Add http-source-selector

assets/css/default.css

@@ -279,7 +279,8 @@ input[type="search"]::-webkit-search-cancel-button {
   order: 2;
 }
 
-.vjs-quality-selector {
+.vjs-quality-selector,
+.video-js .vjs-http-source-selector {
   order: 3;
 }
 
@@ -300,6 +301,10 @@ input[type="search"]::-webkit-search-cancel-button {
   flex-direction: row;
 }
 
+.video-js .vjs-icon-cog {
+  font-size: 18px;
+}
+
 .video-js .vjs-control-bar,
 .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
   background-color: rgba(35, 35, 35, 0.75);

assets/css/videojs-http-source-selector.css

@@ -0,0 +1,7 @@
+/**
+ * videojs-http-source-selector
+ * @version 1.1.5
+ * @copyright 2019 Justin Fujita <Justin@pivotshare.com>
+ * @license MIT
+ */
+.video-js.vjs-http-source-selector{display:block}

assets/js/videojs-contrib-quality-levels.min.js

@@ -1,2 +1,2 @@
-/*! @name videojs-contrib-quality-levels @version 2.0.7 @license Apache-2.0 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js"),require("global/document")):"function"==typeof define&&define.amd?define(["video.js","global/document"],t):e.videojsContribQualityLevels=t(e.videojs,e.document)}(this,function(e,t){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var n=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},i=function(i){function o(){n(this,o);var l=r(this,i.call(this)),s=l;if(e.browser.IS_IE8)for(var u in s=t.createElement("custom"),o.prototype)"constructor"!==u&&(s[u]=o.prototype[u]);return s.levels_=[],s.selectedIndex_=-1,Object.defineProperty(s,"selectedIndex",{get:function(){return s.selectedIndex_}}),Object.defineProperty(s,"length",{get:function(){return s.levels_.length}}),r(l,s)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(o,i),o.prototype.addQualityLevel=function(r){var i=this.getQualityLevelById(r.id);if(i)return i;var o=this.levels_.length;return i=new function r(i){n(this,r);var o=this;if(e.browser.IS_IE8)for(var l in o=t.createElement("custom"),r.prototype)"constructor"!==l&&(o[l]=r.prototype[l]);return o.id=i.id,o.label=o.id,o.width=i.width,o.height=i.height,o.bitrate=i.bandwidth,o.enabled_=i.enabled,Object.defineProperty(o,"enabled",{get:function(){return o.enabled_()},set:function(e){o.enabled_(e)}}),o}(r),""+o in this||Object.defineProperty(this,o,{get:function(){return this.levels_[o]}}),this.levels_.push(i),this.trigger({qualityLevel:i,type:"addqualitylevel"}),i},o.prototype.removeQualityLevel=function(e){for(var t=null,n=0,r=this.length;n<r;n++)if(this[n]===e){t=this.levels_.splice(n,1)[0],this.selectedIndex_===n?this.selectedIndex_=-1:this.selectedIndex_>n&&this.selectedIndex_--;break}return t&&this.trigger({qualityLevel:e,type:"removequalitylevel"}),t},o.prototype.getQualityLevelById=function(e){for(var t=0,n=this.length;t<n;t++){var r=this[t];if(r.id===e)return r}return null},o.prototype.dispose=function(){this.selectedIndex_=-1,this.levels_.length=0},o}(e.EventTarget);for(var o in i.prototype.allowedEvents_={change:"change",addqualitylevel:"addqualitylevel",removequalitylevel:"removequalitylevel"},i.prototype.allowedEvents_)i.prototype["on"+o]=null;var l=function(t){return n=this,e.mergeOptions({},t),r=n.qualityLevels,o=new i,n.on("dispose",function e(){o.dispose(),n.qualityLevels=r,n.off("dispose",e)}),n.qualityLevels=function(){return o},n.qualityLevels.VERSION="__VERSION__",o;var n,r,o};return(e.registerPlugin||e.plugin)("qualityLevels",l),l.VERSION="__VERSION__",l});
+/*! @name videojs-contrib-quality-levels @version 2.0.9 @license Apache-2.0 */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js"),require("global/document")):"function"==typeof define&&define.amd?define(["video.js","global/document"],t):e.videojsContribQualityLevels=t(e.videojs,e.document)}(this,function(e,t){"use strict";function n(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var r=function(r){var i,l;function o(){var i,l=n(n(i=r.call(this)||this));if(e.browser.IS_IE8)for(var s in l=t.createElement("custom"),o.prototype)"constructor"!==s&&(l[s]=o.prototype[s]);return l.levels_=[],l.selectedIndex_=-1,Object.defineProperty(l,"selectedIndex",{get:function(){return l.selectedIndex_}}),Object.defineProperty(l,"length",{get:function(){return l.levels_.length}}),l||n(i)}l=r,(i=o).prototype=Object.create(l.prototype),i.prototype.constructor=i,i.__proto__=l;var s=o.prototype;return s.addQualityLevel=function(n){var r=this.getQualityLevelById(n.id);if(r)return r;var i=this.levels_.length;return r=new function n(r){var i=this;if(e.browser.IS_IE8)for(var l in i=t.createElement("custom"),n.prototype)"constructor"!==l&&(i[l]=n.prototype[l]);return i.id=r.id,i.label=i.id,i.width=r.width,i.height=r.height,i.bitrate=r.bandwidth,i.enabled_=r.enabled,Object.defineProperty(i,"enabled",{get:function(){return i.enabled_()},set:function(e){i.enabled_(e)}}),i}(n),""+i in this||Object.defineProperty(this,i,{get:function(){return this.levels_[i]}}),this.levels_.push(r),this.trigger({qualityLevel:r,type:"addqualitylevel"}),r},s.removeQualityLevel=function(e){for(var t=null,n=0,r=this.length;n<r;n++)if(this[n]===e){t=this.levels_.splice(n,1)[0],this.selectedIndex_===n?this.selectedIndex_=-1:this.selectedIndex_>n&&this.selectedIndex_--;break}return t&&this.trigger({qualityLevel:e,type:"removequalitylevel"}),t},s.getQualityLevelById=function(e){for(var t=0,n=this.length;t<n;t++){var r=this[t];if(r.id===e)return r}return null},s.dispose=function(){this.selectedIndex_=-1,this.levels_.length=0},o}(e.EventTarget);for(var i in r.prototype.allowedEvents_={change:"change",addqualitylevel:"addqualitylevel",removequalitylevel:"removequalitylevel"},r.prototype.allowedEvents_)r.prototype["on"+i]=null;var l=function(t){return n=this,e.mergeOptions({},t),i=n.qualityLevels,l=new r,n.on("dispose",function e(){l.dispose(),n.qualityLevels=i,n.off("dispose",e)}),n.qualityLevels=function(){return l},n.qualityLevels.VERSION="2.0.9",l;var n,i,l};return(e.registerPlugin||e.plugin)("qualityLevels",l),l.VERSION="2.0.9",l});

assets/js/videojs-http-source-selector.min.js

@@ -0,0 +1,7 @@
+/**
+ * videojs-http-source-selector
+ * @version 1.1.5
+ * @copyright 2019 Justin Fujita <Justin@pivotshare.com>
+ * @license MIT
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):(e=e||self)["videojs-http-source-selector"]=t(e.videojs)}(this,function(i){"use strict";function o(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}var a=function(n){function e(e,t){var o;return o=n.call(this,e,t)||this,t.selectable=!0,o}o(e,n);var t=e.prototype;return t.handleClick=function(){var e=this.options_;console.log("Changing quality to:",e.label),this.selected_=!0,this.selected(!0);for(var t=this.player().qualityLevels(),o=0;o<t.length;o++)e.index==t.length?t[o].enabled=!0:e.index==o?t[o].enabled=!0:t[o].enabled=!1},t.update=function(){var e=this.player().qualityLevels().selectedIndex;this.selected(this.options_.index==e),this.selected_=this.options_.index===e},e}((i=i&&i.hasOwnProperty("default")?i.default:i).getComponent("MenuItem")),r=i.getComponent("MenuButton"),n=function(l){function e(e,t){var o;o=l.call(this,e,t)||this,r.apply(function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(o),arguments);var n=o.player().qualityLevels();if(t&&t.default)if("low"==t.default)for(var i=0;i<n.length;i++)n[i].enabled=0==i;else if(t.default="high")for(i=0;i<n.length;i++)n[i].enabled=i==n.length-1;return o}o(e,l);var t=e.prototype;return t.createEl=function(){return i.dom.createEl("div",{className:"vjs-http-source-selector vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"})},t.buildCSSClass=function(){return r.prototype.buildCSSClass.call(this)+" vjs-icon-cog"},t.update=function(){return r.prototype.update.call(this)},t.createItems=function(){for(var e=[],t=this.player().qualityLevels(),o=[],n=0;n<t.length;n++){var i=t.length-(n+1),l=i===t.selectedIndex,r=""+i,s=i;t[i].height?(r=t[i].height+"p",s=parseInt(t[i].height,10)):t[i].bitrate&&(r=Math.floor(t[i].bitrate/1e3)+" kbps",s=parseInt(t[i].bitrate,10)),0<=o.indexOf(r)||(o.push(r),e.push(new a(this.player_,{label:r,index:i,selected:l,sortVal:s})))}return 1<t.length&&e.push(new a(this.player_,{label:"Auto",index:t.length,selected:!1,sortVal:99999})),e.sort(function(e,t){return e.options_.sortVal<t.options_.sortVal?1:e.options_.sortVal>t.options_.sortVal?-1:0}),e},e}(r),l={},e=i.registerPlugin||i.plugin,t=function(e){var t=this;this.ready(function(){!function(n,e){if(n.addClass("vjs-http-source-selector"),console.log("videojs-http-source-selector initialized!"),console.log("player.techName_:"+n.techName_),"Html5"!=n.techName_)return;n.on(["loadedmetadata"],function(e){if(n.qualityLevels(),i.log("loadmetadata event"),"undefined"==n.videojs_http_source_selector_initialized||1==n.videojs_http_source_selector_initialized)console.log("player.videojs_http_source_selector_initialized == true");else{console.log("player.videojs_http_source_selector_initialized == false"),n.videojs_http_source_selector_initialized=!0;var t=n.controlBar,o=t.getChild("fullscreenToggle").el();t.el().insertBefore(t.addChild("SourceMenuButton").el(),o)}})}(t,i.mergeOptions(l,e))}),i.registerComponent("SourceMenuButton",n),i.registerComponent("SourceMenuItem",a)};return e("httpSourceSelector",t),t.VERSION="1.1.5",t});

src/invidious/views/components/player.ecr

@@ -13,15 +13,16 @@
             <% audio_streams.each_with_index do |fmt, i| %>
                 <source src="/latest_version?id=<%= video.id %>&itag=<%= fmt["itag"] %><% if params[:local] %>&local=true<% end %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
             <% end %>
-        <% else %>
+          <% else %>
             <% if params[:quality] == "dash" %>
                 <source src="/api/manifest/dash/id/<%= video.id %>?local=true" type='application/dash+xml' label="dash">
             <% end %>
+
             <% fmt_stream.each_with_index do |fmt, i| %>
                 <% if params[:quality] %>
-                <source src="/latest_version?id=<%= video.id %>&itag=<%= fmt["itag"] %><% if params[:local] %>&local=true<% end %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= params[:quality] == fmt["label"].split(" - ")[0] %>">
+                    <source src="/latest_version?id=<%= video.id %>&itag=<%= fmt["itag"] %><% if params[:local] %>&local=true<% end %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= params[:quality] == fmt["label"].split(" - ")[0] %>">
                 <% else %>
-                <source src="/latest_version?id=<%= video.id %>&itag=<%= fmt["itag"] %><% if params[:local] %>&local=true<% end %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
+                    <source src="/latest_version?id=<%= video.id %>&itag=<%= fmt["itag"] %><% if params[:local] %>&local=true<% end %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
                 <% end %>
             <% end %>
         <% end %> 
@@ -210,6 +211,8 @@ if (bpb) {
 }
 <% end %>
 
+player.httpSourceSelector();
+
 // Since videojs-share can sometimes be blocked, we try to load it last
 player.share(shareOptions);
 </script>

src/invidious/views/components/player_sources.ecr

@@ -1,15 +1,15 @@
 <link rel="stylesheet" href="/css/video-js.min.css">
-<link rel="stylesheet" href="/css/quality-selector.css">
+<link rel="stylesheet" href="/css/videojs-http-source-selector.css">
 <link rel="stylesheet" href="/css/videojs.markers.min.css">
 <link rel="stylesheet" href="/css/videojs-share.css">
 <script src="/js/video.min.js"></script>
+<script src="/js/videojs-contrib-quality-levels.min.js"></script>
+<script src="/js/videojs-http-source-selector.min.js"></script>
 <script src="/js/videojs.hotkeys.min.js"></script>
-<script src="/js/silvermine-videojs-quality-selector.min.js"></script>
 <script src="/js/videojs-markers.min.js"></script>
 <script src="/js/videojs-share.min.js"></script>
-<script src="/js/videojs-http-streaming.min.js"></script>
-<% if params[:quality] == "dash" %>
-<script src="/js/dash.mediaplayer.min.js"></script>
-<script src="/js/videojs-dash.min.js"></script>
-<script src="/js/videojs-contrib-quality-levels.min.js"></script>
+
+<% if params[:quality] != "dash" %>
+<link rel="stylesheet" href="/css/quality-selector.css">
+<script src="/js/silvermine-videojs-quality-selector.min.js"></script>
 <% end %>

src/invidious/views/licenses.ecr

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-US">
 
 <head>
   <meta charset="utf-8">
@@ -9,20 +9,6 @@
 <body>
     <h1><%= translate(locale, "JavaScript license information") %></h1>
     <table id="jslicense-labels1">
-        <tr>
-            <td>
-                <a href="/js/dash.mediaplayer.min.js">dash.mediaplayer.min.js</a>
-            </td>
-
-            <td>
-                <a href="http://directory.fsf.org/wiki/License:BSD_3Clause">Modified-BSD</a>
-            </td>
-
-            <td>
-                <a href="https://github.com/Dash-Industry-Forum/dash.js"><%= translate(locale, "source") %></a>
-            </td>
-        </tr>
-
         <tr>
             <td>
                 <a href="/js/silvermine-videojs-quality-selector.min.js">silvermine-videojs-quality-selector.min.js</a>
@@ -37,20 +23,6 @@
             </td>
         </tr>
 
-        <tr>
-            <td>
-                <a href="/js/video.min.js">video.min.js</a>
-            </td>
-
-            <td>
-                <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache-2.0-only</a>
-            </td>
-
-            <td>
-                <a href="https://github.com/videojs/video.js"><%= translate(locale, "source") %></a>
-            </td>
-        </tr>
-
         <tr>
             <td>
                 <a href="/js/videojs-contrib-quality-levels.min.js">videojs-contrib-quality-levels.min.js</a>
@@ -67,7 +39,7 @@
 
         <tr>
             <td>
-                <a href="/js/videojs-dash.min.js">videojs-dash.min.js</a>
+                <a href="/js/videojs.hotkeys.min.js">videojs.hotkeys.min.js</a>
             </td>
 
             <td>
@@ -75,21 +47,21 @@
             </td>
 
             <td>
-                <a href="https://github.com/videojs/videojs-contrib-dash"><%= translate(locale, "source") %></a>
+                <a href="https://github.com/ctd1500/videojs-hotkeys"><%= translate(locale, "source") %></a>
             </td>
         </tr>
 
         <tr>
             <td>
-                <a href="/js/videojs-http-streaming.min.js">videojs-http-streaming.min.js</a>
+                <a href="/js/videojs-http-source-selector.min.js">videojs-http-source-selector.min.js</a>
             </td>
 
             <td>
-                <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache-2.0-only</a>
+                <a href="http://www.jclark.com/xml/copying.txt">Expat</a>
             </td>
             
             <td>
-                <a href="https://github.com/videojs/http-streaming"><%= translate(locale, "source") %></a>
+                <a href="https://github.com/jfujita/videojs-http-source-selector"><%= translate(locale, "source") %></a>
             </td>
         </tr>
 
@@ -117,13 +89,13 @@
             </td>
 
             <td>
-                <a href="https://github.com/omarroth/videojs-share/tree/add-email"><%= translate(locale, "source") %></a>
+                <a href="https://github.com/mkhazov/videojs-share"><%= translate(locale, "source") %></a>
             </td>
         </tr>
 
         <tr>
             <td>
-                <a href="/js/videojs.hotkeys.min.js">videojs.hotkeys.min.js</a>
+                <a href="/js/video.min.js">video.min.js</a>
             </td>
 
             <td>
@@ -131,7 +103,7 @@
             </td>
 
             <td>
-                <a href="https://github.com/ctd1500/videojs-hotkeys"><%= translate(locale, "source") %></a>
+                <a href="https://github.com/videojs/video.js"><%= translate(locale, "source") %></a>
             </td>
         </tr>