Improved mobile handling for player buttons

- Remove volume scroll completely, since Nebula hides it - Break player controls over two lines in options
cpiber · Aug 20, 2023 · a03a0d3 · a03a0d3
1 parent 135aca3
commit a03a0d3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/src/options.html b/src/options.html
@@ -65,15 +65,6 @@ <h3 class="enhancer-field-title i18n">__MSG_optionsVolumeScrollTitle__</h3>
             <p class="hint i18n">__MSG_optionsVolumeScrollHint__</p>
           </div>
 
-          <div class="enhancer-field mobile">
-            <h3 class="enhancer-field-title i18n">__MSG_optionsVolumeScrollShow__</h3>
-
-            <label for="volumeShowMobile" class="enhancer-checkbox">
-              <input type="checkbox" name="volumeShow" id="volumeShowMobile" data-default="" />
-              <span class="i18n">__MSG_optionsEnable__</span>
-            </label>
-          </div>
-
           <div class="enhancer-field">
             <h3 class="enhancer-field-title i18n">__MSG_optionsSubtitleTitle__</h3>
 

diff --git a/src/scripts/options/player.ts b/src/scripts/options/player.ts
@@ -8,7 +8,7 @@ import iconTheater from '../../icons/nebula/theater.svg';
 import iconVolume from '../../icons/nebula/volume.svg';
 import iconNext from '../../icons/next.svg';
 import iconSpeed from '../../icons/speed.svg';
-import { getBrowserInstance, getFromStorage, setToStorage } from '../helpers/sharedExt';
+import { getBrowserInstance, getFromStorage, isMobile, setToStorage } from '../helpers/sharedExt';
 import { Settings, builtin, defaultPositions, minMaxPos, ours as ourComponents, slot, toSorted } from '../page/components';
 import { buildModal, withLoader } from './modal';
 
@@ -46,21 +46,27 @@ const nameToTitle: Record<Comp, string> = {
 };
 
 const render = (settings: Partial<Settings>, selected: Comp = undefined) => {
+  console.debug('Rendering for mobile?', isMobile());
   const wrapper = document.createElement('div');
   const vid = wrapper.appendChild(document.createElement('div'));
   vid.className = 'video-mock';
+  if (isMobile()) vid.className += ' shadow-left';
+  const vid2 = isMobile() ? wrapper.appendChild(document.createElement('div')) : null;
+  if (vid2) vid2.className = 'video-mock right shadow-right';
   const left = vid.appendChild(document.createElement('div'));
   left.className = 'video-mock-left';
-  const right = vid.appendChild(document.createElement('div'));
+  const right = (!isMobile() ? vid : vid2).appendChild(document.createElement('div'));
   right.className = 'video-mock-right';
-  vid.addEventListener('click', e => {
+  const rerenderSel = (e: MouseEvent) => {
     const target = e.target as HTMLElement;
     const sel = target.closest('.video-icon');
     if (sel === null || sel.id === selected) return;
     wrapper.replaceWith(render(settings, sel.id as Comp));
-  }); // removing the element also removes the event listener, no need to clean this up
+  }; // removing the element also removes the event listener, no need to clean this up
+  vid.addEventListener('click', rerenderSel);
+  if (vid2) vid2.addEventListener('click', rerenderSel);
 
-  const sorted = toSorted(settings, true);
+  const sorted = !isMobile() ? toSorted(settings, true) : toSorted(settings, true).filter(b => [ 'volume-toggle-button', 'theater-mode-button' ].indexOf(b) === -1);
   console.dev.log('render', selected, settings, sorted);
   for (const comp of sorted) {
     const container = slot(comp, settings[comp], left, right);

diff --git a/src/styles/player.scss b/src/styles/player.scss
@@ -9,7 +9,9 @@
   color: $fg_dark;
 
   // stolen from nebula.tv
-  background-image: linear-gradient(to top, rgb(0 0 0) 0%, rgb(0 0 0 / 0.738) 19%, rgb(0 0 0 / 0.54) 34%, rgb(0 0 0 / 0.38) 47%, rgb(0 0 0 / 0.28) 56.5%, rgb(0 0 0 / 0.194) 65%, rgb(0 0 0 / 0.126) 73%, rgb(0 0 0 / 0.075) 80.2%, rgb(0 0 0 / 0.042) 86.1%, rgb(0 0 0 / 0.02) 91%, rgb(0 0 0 / 0.008) 95.2%, rgb(0 0 0 / 0.002) 98.2%, rgb(0 0 0 / 0) 100%);
+  $shadow: linear-gradient(to top, rgb(0 0 0) 0%, rgb(0 0 0 / 0.738) 19%, rgb(0 0 0 / 0.54) 34%, rgb(0 0 0 / 0.38) 47%, rgb(0 0 0 / 0.28) 56.5%, rgb(0 0 0 / 0.194) 65%, rgb(0 0 0 / 0.126) 73%, rgb(0 0 0 / 0.075) 80.2%, rgb(0 0 0 / 0.042) 86.1%, rgb(0 0 0 / 0.02) 91%, rgb(0 0 0 / 0.008) 95.2%, rgb(0 0 0 / 0.002) 98.2%, rgb(0 0 0 / 0) 100%);
+
+  background-image: $shadow;
   border-bottom-left-radius: 18px;
   border-bottom-right-radius: 18px;
   display: flex;
@@ -60,6 +62,16 @@
   &-left {
     margin-right: auto;
   }
+
+  &.right {
+    justify-content: end;
+  }
+
+  @each $dir in (left, right) {
+    &.shadow-#{$dir} {
+      background-image: linear-gradient(to $dir, rgb(255 255 255 / 1) 0%, rgb(255 255 255 / 0) 10%), $shadow;
+    }
+  }
 }
 
 .configure-player {