From 3ee2df7faaac2f97a3b0cb28b43854cc11cd97a9 Mon Sep 17 00:00:00 2001
From: Astound <kirito@disroot.org>
Date: Mon, 29 Jan 2024 05:06:38 +0800
Subject: Refactor styles on video playback page

Made changes to the styles on the video playback page to enhance visibility and address issues with the video player.
Added a new custom style file for Plyr, and removed redundant and unused styles in watch.css.

Specific changes:
- Added custom_plyr.css for Plyr styles.
- Removed redundant styles related to playback issues in watch.css
---
 youtube/static/modules/plyr/custom_plyr.css | 22 ++++++++++++++++++++++
 youtube/static/watch.css                    | 14 --------------
 youtube/templates/watch.html                |  8 +-------
 3 files changed, 23 insertions(+), 21 deletions(-)
 create mode 100644 youtube/static/modules/plyr/custom_plyr.css

(limited to 'youtube')

diff --git a/youtube/static/modules/plyr/custom_plyr.css b/youtube/static/modules/plyr/custom_plyr.css
new file mode 100644
index 0000000..7658321
--- /dev/null
+++ b/youtube/static/modules/plyr/custom_plyr.css
@@ -0,0 +1,22 @@
+/* Prevent this div from blocking right-click menu for video
+e.g. Firefox playback speed options */
+.plyr__poster {
+    display: none;
+}
+
+/* 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;
+}
diff --git a/youtube/static/watch.css b/youtube/static/watch.css
index 849e22b..460bba3 100644
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -24,20 +24,6 @@ video {
     max-height: calc(100vh/1.5);
 }
 
-/* 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);
 }
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 9cf9657..0991457 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -8,14 +8,8 @@
     {% if settings.use_video_player == 2 %}
         <!-- plyr -->
         <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet">
+        <link href="/youtube.com/static/modules/plyr/custom_plyr.css" rel="stylesheet">
         <!--/ plyr -->
-        <style>
-         /* Prevent this div from blocking right-click menu for video
-         e.g. Firefox playback speed options */
-         .plyr__poster {
-             display: none !important;
-         }
-        </style>
     {% endif %}
 {% endblock style %}
 
-- 
cgit v1.2.3