Add plyr as main player

Also plyr supports switch quality

youtube/static/js/plyr-start.js

@@ -0,0 +1,23 @@
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+const player = new Plyr(document.getElementById('js-video-player'), {
+    disableContextMenu: false,
+    captions: {
+        active: true,
+        language: 'en'
+    },
+    controls: [
+        'play-large',
+        'play',
+        'progress',
+        'current-time',
+        'mute',
+        'volume',
+        'captions',
+        'settings',
+        'fullscreen'
+    ],
+    iconUrl: "/youtube.com/static/modules/plyr/plyr.svg",
+    blankVideo: "/youtube.com/static/modules/plyr/blank.webm",
+    debug: false
+});
+// @license-end

youtube/static/watch.css

@@ -30,6 +30,20 @@ video {
     max-height: 480px;
 }
 
+/* plyr fix */
+.plyr:-moz-full-screen video {
+    max-height: initial;
+}
+.plyr:-webkit-full-screen video {
+    max-height: initial;
+}
+.plyr:-ms-fullscreen video {
+    max-height: initial;
+}
+.plyr:fullscreen video {
+    max-height: initial;
+}
+
 a:link {
     color: var(--link);
 }

youtube/templates/licenses.html

@@ -34,6 +34,11 @@
                 <td data-label="License"><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 or later</a></td>
                 <td data-label="Source"><a href="/youtube.com/static/js/playlistadd.js">playlistadd.js</a></td>
             </tr>
+            <tr>
+                <td data-label="File"><a href="/youtube.com/static/modules/plyr/plyr.min.js">plyr.min.js</a></td>
+                <td data-label="License"><a href="https://www.freebsd.org/copyright/freebsd-license.html">Expat</a></td>
+                <td data-label="Source"><a href="/youtube.com/static/modules/plyr/plyr.js">plyr.js</a></td>
+            </tr>
             <tr>
                 <td data-label="File"><a href="/youtube.com/static/js/speedyplay.js">speedyplay.js</a></td>
                 <td data-label="License"><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 or later</a></td>

youtube/templates/watch.html

@@ -5,6 +5,9 @@
 {% block style %}
     <link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
     <link href="/youtube.com/static/watch.css" rel="stylesheet"/>
+    <!-- plyr -->
+    <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet"/>
+    <!--/ plyr -->
 {% endblock style %}
 
 {% block main %}
@@ -30,7 +33,7 @@
         <figure class="sc-video">
             <video id="js-video-player" playsinline controls>
                 {% for video_source in video_sources %}
-                    <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}">
+                    <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}" data-res="{{ video_source['quality'] }}">
                 {% endfor %}
 
                 {% for source in subtitle_sources %}
@@ -347,6 +350,12 @@
     </script>
     <script src="/youtube.com/static/js/common.js"></script>
     <script src="/youtube.com/static/js/transcript-table.js"></script>
+    <!-- plyr -->
+    <script src="/youtube.com/static/modules/plyr/plyr.min.js"
+            integrity="sha512-l6ZzdXpfMHRfifqaR79wbYCEWjLDMI9DnROvb+oLkKq6d7MGroGpMbI7HFpicvmAH/2aQO+vJhewq8rhysrImw=="
+            crossorigin="anonymous"></script>
+    <script src="/youtube.com/static/js/plyr-start.js"></script>
+    <!-- /plyr -->
     {% if settings.use_video_hotkeys %} <script src="/youtube.com/static/js/hotkeys.js"></script> {% endif %}
     {% if settings.use_comments_js %} <script src="/youtube.com/static/js/comments.js"></script> {% endif %}
     {% if settings.use_sponsorblock_js %} <script src="/youtube.com/static/js/sponsorblock.js"></script> {% endif %}