Mobile-only/not options

Author: cpiber

src/manifest.ts

@@ -3,7 +3,7 @@ declare global {
   const __VERSION__: string;
 }
 
-export default {
+const manifest: browser._manifest.WebExtensionManifest = {
   manifest_version: 2,
   name: '__MSG_title__',
   description: '__MSG_extensionDescription__',
@@ -62,4 +62,5 @@ export default {
     },
   },
   default_locale: 'en',
-};
+};
+export default manifest;

src/options.html

@@ -10,7 +10,7 @@
   <form>
     <h1 class="i18n page-title">__MSG_optionsTitle__</h1>
     <h2 class="i18n">__MSG_optionsTitlePlayer__</h2>
-    <p>
+    <p class="no-mobile">
     <label>
       <span class="title i18n">__MSG_optionsPlaybackChangeRateTitle__:</span>
       <input type="number" name="playbackChange" data-default="0.1" step="0.05" size="5" placeholder="0.1" />
@@ -25,7 +25,7 @@ <h2 class="i18n">__MSG_optionsTitlePlayer__</h2>
     <label><span class="flex"><input type="checkbox" name="autoplayQueue" data-default="" /> <span class="i18n">__MSG_optionsAutoplayQueue__</span></span></label>
     <span class="hint i18n">__MSG_optionsAutoplayHint__</span>
     </p>
-    <p>
+    <p class="no-mobile">
     <label>
       <span class="title i18n">__MSG_optionsVolumeScrollTitle__:</span>
       <span class="flex"><input type="checkbox" name="volumeEnabled" data-default="" /> <span class="i18n">__MSG_optionsEnable__</span></span>
@@ -35,6 +35,12 @@ <h2 class="i18n">__MSG_optionsTitlePlayer__</h2>
     <label><span class="flex"><span class="i18n">__MSG_optionsVolumeScrollChange__:</span> <input type="number" name="volumeChange" data-default="0.1" step="0.05" size="5" placeholder="0.1" min="-1" max="1" /></span></label>
     <span class="hint i18n">__MSG_optionsVolumeScrollHint__</span>
     </p>
+    <p class="mobile">
+    <label>
+      <span class="title i18n">__MSG_optionsVolumeScrollShow__:</span>
+      <span class="flex"><input type="checkbox" name="volumeShow" data-default="" /> <span class="i18n">__MSG_optionsEnable__</span></span>
+    </label>
+    </p>
 
     <h2 class="i18n">__MSG_optionsTitlePage__</h2>
     <label>

src/scripts/options.ts

@@ -1,4 +1,4 @@
-import { getBrowserInstance } from './helpers/sharedExt';
+import { getBrowserInstance, isMobile } from './helpers/sharedExt';
 import { load } from './options/form';
 import { showLogs } from './options/logs';
 import { Settings } from './options/settings';
@@ -7,6 +7,7 @@ import { standalone } from './options/standalone';
 const cl = decodeURIComponent(window.location.hash.slice(1)).split(' ').filter(c => !!c);
 if (cl.length)
   document.body.classList.add(...cl);
+document.body.classList.toggle('mobile', isMobile());
 
 const els = Settings.get();
 const { local } = getBrowserInstance().storage;

src/styles/options.scss

@@ -7,6 +7,14 @@ html, body {
 
 body {
   margin-bottom: 12px;
+
+  &.mobile .no-mobile {
+    display: none;
+  }
+
+  &:not(.mobile) .mobile {
+    display: none;
+  }
 }
 
 form {