Add plyr as main player

Also plyr supports switch quality

1 files changed, 10 insertions, 1 deletions

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 %}