From d47ed75fa3b7de4a6d3798a7ba5f5e5580ab1399 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 29 Mar 2022 11:01:17 +0900
Subject: [PATCH] Add: Option - `userContent.player.twoline`

---
 src/contents/_video_player.scss | 167 +++++++++++++++++++----
 user.js                         |   2 +
 userContent.css                 | 226 +++++++++++++++++++++++---------
 3 files changed, 308 insertions(+), 87 deletions(-)

diff --git a/src/contents/_video_player.scss b/src/contents/_video_player.scss
index 615aca2..29604e4 100644
--- a/src/contents/_video_player.scss
+++ b/src/contents/_video_player.scss
@@ -1,3 +1,31 @@
+/* Control Bar Size */
+@include Option("userContent.player.size") {
+  #controlsContainer {
+    --button-size: 32px !important; /* Original: 30px */
+    --controlBar-height: 40px; /* Original: 40px, Replace to this value */
+  }
+  #controlsContainer .touch {
+    --button-size: 48px !important; /* Original: 40px */
+    --controlBar-height: 52px; /* Original: 52px */
+  }
+  .videocontrols[inDOMFullscreen] #controlsContainer {
+    --button-size: 64px !important; /* Original: 30px */
+    --track-size: 6px !important; /* Original: 5px, Touch: 7px */
+    --thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
+    --controlBar-height: 64px; /* Original: 40px */
+  }
+  .videocontrols[inDOMFullscreen] #controlsContainer .touch {
+    --button-size: 72px !important; /* Original: 40px */
+    --controlBar-height: 64px; /* Original: 52px */
+  }
+  #controlsContainer .controlBar {
+    height: var(--controlBar-height) !important; /* Original: 40px */
+  }
+  .videocontrols[inDOMFullscreen] #controlsContainer .controlBar {
+    padding-bottom: 8px !important;
+  }
+}
+
 /* Control Bar UI */
 @include Option("userContent.player.ui") {
   audio {
@@ -36,6 +64,111 @@
   #controlsContainer .duration {
     color: var(--duration-color) !important; /* Original: #929292 */
   }
+
+  @include Option("userContent.player.ui.twoline") {
+    audio {
+      // All thing like original
+      /* #controlsContainer .controlBar */
+      --controlBar-flex-wrap: unset;
+      --controlBar-justify-content: center;
+      --controlBar-align-content: unset;
+      --controlBar-twoline-more-height: 0px;
+      --controlBar-padding-inline: 9px;
+
+      /* #controlsContainer .scrubberStack */
+      /* .scrubberStack - Vertical */
+      --scrubberStack-order: unset;
+      --scrubberStack-height: 100%;
+      --scrubberStack-transform: none;
+
+      /* .scrubberStack - Horizontal */
+      --scrubberStack-margin-inline: 9px;
+
+      /* #controlsContainer .positionDurationBox */
+      --positionDurationBox-flex-grow: unset;
+      --positionDurationBox-margin-left: unset;
+      --positionDurationBox-text-align: center;
+
+      /* Others */
+      --button-outside-margin: 0;
+    }
+    video {
+      /* #scrubber .scrubber::-moz-range-thumb */
+      --scrubber-thumb-scale: 0;
+      --scrubber-thumb-color: #48a0f7; /* Color as hover, Prevent flashing */
+
+      /* .progressBar::-moz-progress-bar */
+      --progressBar-scale: 0.65;
+
+      /* #controlsContainer .controlBar */
+      --controlBar-flex-wrap: wrap;
+      --controlBar-justify-content: space-between;
+      --controlBar-align-content: space-around;
+      --controlBar-padding-inline: 0 !important; /* Original: 9px */
+
+      /* #controlsContainer .scrubberStack */
+      /* .scrubberStack - Vertical */
+      --scrubberStack-order: -1;
+
+      /* .scrubberStack - Horizontal */
+      --scrubberStack-flex-basis: auto;
+      --scrubberStack-twoline-width: 100%;
+      --scrubberStack-margin-inline: 0;
+
+      /* #controlsContainer .positionDurationBox */
+      --positionDurationBox-flex-grow: 2;
+      --positionDurationBox-margin-left: 15px;
+      --positionDurationBox-text-align: left;
+
+      /* Others */
+      --duration-color: #dadada;
+      --button-outside-margin: 9px;
+    }
+
+    .scrubber:not(:hover)::-moz-range-thumb {
+      transform: scale(var(--scrubber-thumb-scale, 1));
+      background-color: var(--scrubber-thumb-color, currentColor) !important;
+    }
+    .progressStack {
+      transform-origin: bottom;
+      transform: scaleY(var(--progressBar-scale, 1));
+    }
+    .scrubber:hover::-moz-range-thumb,
+    .progressContainer:hover .progressStack {
+      transform:scale(1);
+    }
+
+    #controlsContainer .controlBar {
+      flex-wrap: var(--controlBar-flex-wrap);
+      justify-content: var(--controlBar-justify-content);
+      align-content: var(--controlBar-align-content);
+      height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
+      padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */
+    }
+    #controlsContainer .scrubberStack {
+      /* Vertical */
+      order: var(--scrubberStack-order);
+      height: var(--scrubberStack-height, var(--thumb-size)) !important;
+      transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2)));
+
+      /* Horizontal */
+      flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important;
+      width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
+      margin-inline: var(--scrubberStack-margin-inline) !important;
+    }
+    #controlsContainer .positionDurationBox {
+      flex-grow: var(--positionDurationBox-flex-grow);
+      margin-left: var(--positionDurationBox-margin-left);
+      text-align: var(--positionDurationBox-text-align) !important;
+    }
+
+    #playButton {
+      margin-left: var(--button-outside-margin) !important;
+    }
+    #fullscreenButton {
+      margin-right: var(--button-outside-margin) !important;
+    }
+  }
 }
 
 @include Option("userContent.player.icon") {
@@ -54,34 +187,6 @@
   }
 }
 
-/* Control Bar Size */
-@include Option("userContent.player.size") {
-  #controlsContainer {
-    --button-size: 32px !important; /* Original: 30px */
-    --controlBar-height: 40px; /* Original: 40px, Replace to this value */
-  }
-  #controlsContainer .touch {
-    --button-size: 48px !important; /* Original: 40px */
-    --controlBar-height: 52px; /* Original: 52px */
-  }
-  .videocontrols[inDOMFullscreen] #controlsContainer {
-    --button-size: 64px !important; /* Original: 30px */
-    --track-size: 6px !important; /* Original: 5px, Touch: 7px */
-    --thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
-    --controlBar-height: 64px; /* Original: 40px */
-  }
-  .videocontrols[inDOMFullscreen] #controlsContainer .touch {
-    --button-size: 72px !important; /* Original: 40px */
-    --controlBar-height: 64px; /* Original: 52px */
-  }
-  #controlsContainer .controlBar {
-    height: var(--controlBar-height) !important; /* Original: 40px */
-  }
-  .videocontrols[inDOMFullscreen] #controlsContainer .controlBar {
-    padding-bottom: 8px !important;
-  }
-}
-
 /* Click to play UI */
 @include Option("userContent.player.click_to_play") {
   #controlsContainer .clickToPlay {
@@ -117,6 +222,12 @@
       transition: opacity 150ms ease 50ms;
     }
 
+    /* Two line Control Bar */
+    .scrubber::-moz-range-thumb,
+    .progressStack {
+      transition:transform .1s cubic-bezier(0, 0, 0.2, 1);
+    }
+
     /* Click to play */
     #controlsContainer .clickToPlay {
     transition: opacity 150ms ease-in-out, fill 150ms ease-in-out;
diff --git a/user.js b/user.js
index 5560e51..06cd23d 100644
--- a/user.js
+++ b/user.js
@@ -87,6 +87,8 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 // user_pref("userChrome.icon.account_image_to_right",        true);
 // user_pref("userChrome.icon.account_label_to_right",        true);
 
+// user_pref("userContent.player.ui.twoline",                 true);
+
 // == Theme Default Settings ===================================================
 // -- User Chrome --------------------------------------------------------------
 user_pref("userChrome.compatibility.theme",       true);
diff --git a/userContent.css b/userContent.css
index 870df79..05e71b8 100644
--- a/userContent.css
+++ b/userContent.css
@@ -1,65 +1,6 @@
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 /** Video player **************************************************************/
-/* Control Bar UI */
-@supports -moz-bool-pref("userContent.player.ui") {
-  audio {
-    --duration-color: #929292;
-    /* Like Original */
-    --media-background: rgba(26, 26, 26, 0.8);
-    /* Like Original */
-    border-radius: 8px;
-    --box-shadow1: rgba(14, 13, 26, 0.12);
-    --box-shadow2: rgba(7, 48, 114, 0.12);
-    --box-shadow3: rgba(34, 0, 51, 0.04);
-    box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2), 0 8px 12px 1px var(--box-shadow3);
-    /* Or: 0 2px 15px rgba(0,0,0,.1); */
-  }
-
-  video {
-    --duration-color: #eee;
-    --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85));
-  }
-
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    audio {
-      --box-shadow1: rgba(249, 249, 250, 0.12);
-      --box-shadow2: rgba(91, 91, 102, 0.12);
-      --box-shadow3: rgba(82, 82, 94, 0.04);
-    }
-  }
-  @media (prefers-contrast) {
-    video {
-      --duration-color: #929292;
-      /* Like Original */
-      --media-background: rgba(26, 26, 26, 0.8);
-      /* Like Original */
-    }
-  }
-  #controlsContainer .controlBar {
-    background: var(--media-background) !important;
-  }
-
-  #controlsContainer .duration {
-    color: var(--duration-color) !important;
-    /* Original: #929292 */
-  }
-}
-@supports -moz-bool-pref("userContent.player.icon") {
-  #controlsContainer .fullscreenButton {
-    background-image: url("./icons/enter-fullscreen.svg") !important;
-  }
-
-  #controlsContainer .fullscreenButton[fullscreened] {
-    background-image: url("./icons/exit-fullscreen.svg") !important;
-  }
-}
-@supports -moz-bool-pref("userContent.player.noaudio") {
-  #controlsContainer .muteButton[noAudio] {
-    /* Remove volume button at noAudio */
-    display: none !important;
-  }
-}
 /* Control Bar Size */
 @supports -moz-bool-pref("userContent.player.size") {
   #controlsContainer {
@@ -103,6 +44,167 @@
     padding-bottom: 8px !important;
   }
 }
+/* Control Bar UI */
+@supports -moz-bool-pref("userContent.player.ui") {
+  audio {
+    --duration-color: #929292;
+    /* Like Original */
+    --media-background: rgba(26, 26, 26, 0.8);
+    /* Like Original */
+    border-radius: 8px;
+    --box-shadow1: rgba(14, 13, 26, 0.12);
+    --box-shadow2: rgba(7, 48, 114, 0.12);
+    --box-shadow3: rgba(34, 0, 51, 0.04);
+    box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2), 0 8px 12px 1px var(--box-shadow3);
+    /* Or: 0 2px 15px rgba(0,0,0,.1); */
+  }
+
+  video {
+    --duration-color: #eee;
+    --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85));
+  }
+
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    audio {
+      --box-shadow1: rgba(249, 249, 250, 0.12);
+      --box-shadow2: rgba(91, 91, 102, 0.12);
+      --box-shadow3: rgba(82, 82, 94, 0.04);
+    }
+  }
+  @media (prefers-contrast) {
+    video {
+      --duration-color: #929292;
+      /* Like Original */
+      --media-background: rgba(26, 26, 26, 0.8);
+      /* Like Original */
+    }
+  }
+  #controlsContainer .controlBar {
+    background: var(--media-background) !important;
+  }
+
+  #controlsContainer .duration {
+    color: var(--duration-color) !important;
+    /* Original: #929292 */
+  }
+
+  @supports -moz-bool-pref("userContent.player.ui.twoline") {
+    audio {
+      /* #controlsContainer .controlBar */
+      --controlBar-flex-wrap: unset;
+      --controlBar-justify-content: center;
+      --controlBar-align-content: unset;
+      --controlBar-twoline-more-height: 0px;
+      --controlBar-padding-inline: 9px;
+      /* #controlsContainer .scrubberStack */
+      /* .scrubberStack - Vertical */
+      --scrubberStack-order: unset;
+      --scrubberStack-height: 100%;
+      --scrubberStack-transform: none;
+      /* .scrubberStack - Horizontal */
+      --scrubberStack-margin-inline: 9px;
+      /* #controlsContainer .positionDurationBox */
+      --positionDurationBox-flex-grow: unset;
+      --positionDurationBox-margin-left: unset;
+      --positionDurationBox-text-align: center;
+      /* Others */
+      --button-outside-margin: 0;
+    }
+
+    video {
+      /* #scrubber .scrubber::-moz-range-thumb */
+      --scrubber-thumb-scale: 0;
+      --scrubber-thumb-color: #48a0f7;
+      /* Color as hover, Prevent flashing */
+      /* .progressBar::-moz-progress-bar */
+      --progressBar-scale: 0.65;
+      /* #controlsContainer .controlBar */
+      --controlBar-flex-wrap: wrap;
+      --controlBar-justify-content: space-between;
+      --controlBar-align-content: space-around;
+      --controlBar-padding-inline: 0 !important;
+      /* Original: 9px */
+      /* #controlsContainer .scrubberStack */
+      /* .scrubberStack - Vertical */
+      --scrubberStack-order: -1;
+      /* .scrubberStack - Horizontal */
+      --scrubberStack-flex-basis: auto;
+      --scrubberStack-twoline-width: 100%;
+      --scrubberStack-margin-inline: 0;
+      /* #controlsContainer .positionDurationBox */
+      --positionDurationBox-flex-grow: 2;
+      --positionDurationBox-margin-left: 15px;
+      --positionDurationBox-text-align: left;
+      /* Others */
+      --duration-color: #dadada;
+      --button-outside-margin: 9px;
+    }
+
+    .scrubber:not(:hover)::-moz-range-thumb {
+      transform: scale(var(--scrubber-thumb-scale, 1));
+      background-color: var(--scrubber-thumb-color, currentColor) !important;
+    }
+
+    .progressStack {
+      transform-origin: bottom;
+      transform: scaleY(var(--progressBar-scale, 1));
+    }
+
+    .scrubber:hover::-moz-range-thumb,
+    .progressContainer:hover .progressStack {
+      transform: scale(1);
+    }
+
+    #controlsContainer .controlBar {
+      flex-wrap: var(--controlBar-flex-wrap);
+      justify-content: var(--controlBar-justify-content);
+      align-content: var(--controlBar-align-content);
+      height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
+      padding-inline: var(--controlBar-padding-inline) !important;
+      /* Original: 9px */
+    }
+
+    #controlsContainer .scrubberStack {
+      /* Vertical */
+      order: var(--scrubberStack-order);
+      height: var(--scrubberStack-height, var(--thumb-size)) !important;
+      transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2)));
+      /* Horizontal */
+      flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important;
+      width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
+      margin-inline: var(--scrubberStack-margin-inline) !important;
+    }
+
+    #controlsContainer .positionDurationBox {
+      flex-grow: var(--positionDurationBox-flex-grow);
+      margin-left: var(--positionDurationBox-margin-left);
+      text-align: var(--positionDurationBox-text-align) !important;
+    }
+
+    #playButton {
+      margin-left: var(--button-outside-margin) !important;
+    }
+
+    #fullscreenButton {
+      margin-right: var(--button-outside-margin) !important;
+    }
+  }
+}
+@supports -moz-bool-pref("userContent.player.icon") {
+  #controlsContainer .fullscreenButton {
+    background-image: url("./icons/enter-fullscreen.svg") !important;
+  }
+
+  #controlsContainer .fullscreenButton[fullscreened] {
+    background-image: url("./icons/exit-fullscreen.svg") !important;
+  }
+}
+@supports -moz-bool-pref("userContent.player.noaudio") {
+  #controlsContainer .muteButton[noAudio] {
+    /* Remove volume button at noAudio */
+    display: none !important;
+  }
+}
 /* Click to play UI */
 @supports -moz-bool-pref("userContent.player.click_to_play") {
   #controlsContainer .clickToPlay {
@@ -142,6 +244,12 @@
       transition: opacity 150ms ease 50ms;
     }
 
+    /* Two line Control Bar */
+    .scrubber::-moz-range-thumb,
+    .progressStack {
+      transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
+    }
+
     /* Click to play */
     #controlsContainer .clickToPlay {
       transition: opacity 150ms ease-in-out, fill 150ms ease-in-out;