Add plyr as main player

Also plyr supports switch quality

2 files changed, 15 insertions, 1 deletions

diff --git a/youtube/templates/licenses.html b/youtube/templates/licenses.html
index dc883a8..60b76fb 100644
--- a/youtube/templates/licenses.html
+++ b/youtube/templates/licenses.html
@@ -35,6 +35,11 @@
                 <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>
                 <td data-label="Source"><a href="/youtube.com/static/js/speedyplay.js">speedyplay.js</a></td>
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 7184872..993befc 100644
--- a/youtube/templates/watch.html
+++ b/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 %}