Add player UI settings panel

src/csui/src/PlayerUIWindow.vue

@@ -43,14 +43,6 @@
         </div>
       </div>
       <div class="header-buttons">
-        <div
-          class="header-button"
-          :class="{'button-active': preventClose}"
-          @click="setPreventClose(!preventClose)"
-        >
-          <mdicon v-if="!preventClose" name="pin-outline" :size="32" />
-          <mdicon v-else name="pin" :size="32" />
-        </div>
         <div
           class="header-button close-button"
           @click="$emit('close')"
@@ -119,6 +111,13 @@
             :site="site"
           >
           </PlayerDetectionPanel>
+          <PlayerUiSettings
+            v-if="selectedTab === 'playerUiSettings'"
+            :settings="settings"
+            :eventBus="eventBus"
+          >
+
+          </PlayerUiSettings>
           <BaseExtensionSettings
             v-if="selectedTab === 'extensionSettings'"
             :settings="settings"
@@ -161,6 +160,7 @@ import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
 import BrowserDetect from '../../ext/conf/BrowserDetect'
 import ChangelogPanel from './PlayerUiPanels/ChangelogPanel.vue'
 import AboutPanel from './PlayerUiPanels/AboutPanel.vue'
+import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
 
 export default {
   components: {
@@ -169,6 +169,7 @@ export default {
     BaseExtensionSettings,
     AutodetectionSettingsPanel,
     DebugPanel,
+    PlayerUiSettings,
     ChangelogPanel,
     AboutPanel
   },
@@ -182,11 +183,12 @@ export default {
       tabs: [
         // {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
+        {id: 'playerUiSettings', label: 'In-player interface', icon: 'movie-cog-outline' },
         {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
         // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
         // {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
-        {id: 'changelog', label: 'What\'s new', icon: 'information-box-outline' },
+        {id: 'changelog', label: 'What\'s new', icon: 'newspaper-plus' },
         {id: 'about', label: 'About', icon: 'star-four-points-circle'}
       ],
       selectedTab: 'extensionSettings',

src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="flex flex-col" style="position: relative; width: 100%;">
+    <!-- The rest of the tab is under 'edit ratios and shortcuts' row -->
+    <div class="flex flex-col" style="width: 100%">
+
+      <h2>Player UI options</h2>
+
+      <div class="field">
+        <div class="label">Enable in-player UI</div>
+        <input type="checkbox" v-model="settings.active.ui.inPlayer.enabled" />
+      </div>
+<!--
+      <div
+        class="flex flex-col"
+        :class="{disabled: settings.active.ui.inPlayer.enabled}"
+      >
+        <div class="field">
+          <div class="label">Enable only in full screen</div>
+          <input type="checkbox" v-model="settings.active.ui.inPlayer.enabledFullscreenOnly" />
+        </div>
+
+        <div class="field">
+          <div class="label">
+            Popup activator position:
+          </div>
+          <div class="select">
+            <select
+              v-model="settings.active.ui.inPlayer.alignment"
+              @click="setUiOption('alignment', $event)"
+            >
+              <option value="left">Left</option>
+              <option value="right">Right</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="field">
+          <div class="label">
+            Activate in-player UI:
+          </div>
+          <div class="select">
+            <select
+              v-model="settings.active.ui.inPlayer.activation"
+              @click="setUiOption('', $event)"
+            >
+              <option value="player">
+                When mouse hovers over player
+              </option>
+              <option value="trigger-zone">
+                When mouse hovers over trigger zone
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div v-if="settings.active.ui.inPlayer.activation === 'trigger-zone'">
+          Trigger zone size:
+        </div>
+
+        <div class="field">
+          <div class="label">
+            Do not show in-player UI when video player is narrower than (% of screen width)
+          </div>
+          <div>TODO: slider</div>
+        </div>
+      </div> -->
+
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from '../components/Button.vue'
+import BrowserDetect from '../../../ext/conf/BrowserDetect';
+
+export default {
+  data() {
+    return {
+
+    }
+  },
+  mixins: [
+  ],
+  props: [
+    'settings',      // required for buttons and actions, which are global
+    'eventBus',
+  ],
+  created() {
+  },
+  mounted() {
+  },
+  components: {
+    Button,
+  },
+  methods: {
+    setUiPage(key, event) {
+
+    },
+
+    async openOptionsPage() {
+      BrowserDetect.runtime.openOptionsPage();
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" scoped>
+.justify-center {
+  justify-content: center;
+}
+.items-center {
+  align-items: center;
+}
+.mt-4{
+  margin-top: 1rem;
+}
+</style>