✨ Added option to select playback speed from a list of values (#2771)

* Added option to select playback speed from a list of values --------- Co-authored-by: iyakushev <yakushevis@itsintellect.ru>
ViewTube · Apr 17, 2024 · 8c2239a · 8c2239a
1 parent 9fa1a48
commit 8c2239a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 14 deletions.
diff --git a/client/components/Settings.vue b/client/components/Settings.vue
@@ -5,6 +5,7 @@ import MultiOptionButton from '@/components/buttons/MultiOptionButton.vue';
 import Dropdown from '@/components/filter/Dropdown.vue';
 import '@/assets/styles/popup.scss';
 import { type SegmentOption, useSettingsStore } from '@/store/settings';
+import CheckBox from '~/components/form/CheckBox.vue';
 
 defineEmits<{
   (e: 'close'): void;
@@ -18,6 +19,7 @@ const sponsorblockSegmentOptions = reactive([
 ]);
 
 const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p'];
+const videoSpeedArray = ['0', '0.25', '0.5', '0.75', '1', '1.25', '1.5', '1.75', '2', '2.25', '2.5', '2.75', '3'];
 </script>
 
 <template>
@@ -232,6 +234,39 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
           @valuechange="val => settingsStore.setDefaultVideoQuality(val.value)"
         />
       </div>
+      <div class="settings-number-menu">
+        <label for="video-speed-input">Default video speed</label>
+        <div class="video-speed-checkbox">
+          <label for="as-list" style="padding-right: 5px"> (as list ?)</label>
+          <CheckBox id="as-list"
+                    :value="settingsStore.videoSpeedAsList"
+                    :label="''"
+                    @valuechange="val => settingsStore.setVideoSpeedAsList(val)"
+          />
+        </div>
+        <input v-if="!settingsStore.videoSpeedAsList"
+               id="video-speed-input"
+               class="settings-number-input"
+               type="number"
+               name="video-speed"
+               :value="settingsStore.defaultVideoSpeed"
+               step="0.1"
+               max="3"
+               min="0.1"
+               @change="(e: any) => settingsStore.setDefaultVideoSpeed(parseFloat(e.target.value))"
+        />
+        <Dropdown
+          v-if="settingsStore.videoSpeedAsList"
+          :style="{
+              'margin-top': '-20px',
+              'margin-right': '-20px',
+              'width': '63px'
+            }"
+          :values="videoSpeedArray"
+          :value="settingsStore.defaultVideoSpeed.toString()"
+          @valuechange="val => settingsStore.setDefaultVideoSpeed(val.value)"
+        />
+      </div>
       <SwitchButton
         :value="settingsStore.dashPlaybackEnabled"
         :label="'Enable MPEG-DASH'"
@@ -272,20 +307,6 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
         :right="true"
         @valuechange="val => settingsStore.setAudioModeDefault(val)"
       />
-      <div class="settings-number-menu">
-        <label for="video-speed-input">Default video speed</label>
-        <input
-          id="video-speed-input"
-          class="settings-number-input"
-          type="number"
-          name="video-speed"
-          :value="settingsStore.defaultVideoSpeed"
-          step="0.1"
-          max="3"
-          min="0.1"
-          @change="(e: any) => settingsStore.setDefaultVideoSpeed(parseInt(e.target.value))"
-        />
-      </div>
     </div>
     <div class="settings-overlay popup-overlay" @click.stop="$emit('close')" />
   </div>
@@ -408,6 +429,12 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
     }
   }
 
+  .video-speed-checkbox {
+    display: flex;
+    flex: 1;
+    margin-left: 5px;
+  }
+
   .sponsorblock-options-container {
     width: calc(100% - 36px);
 

diff --git a/client/store/settings.ts b/client/store/settings.ts
@@ -28,6 +28,7 @@ export const useSettingsStore = defineStore(
       reactive({
         alwaysLoopVideo: false,
         hideComments: false,
+        videoSpeedAsList: false,
         audioModeDefault: false,
         autoAdjustAudioQuality: true,
         autoAdjustVideoQuality: true,

diff --git a/server/src/user/settings/dto/settings.dto.ts b/server/src/user/settings/dto/settings.dto.ts
@@ -35,6 +35,8 @@ export class SettingsDto {
 
   hideComments: boolean;
 
+  videoSpeedAsList: boolean;
+
   autoplayNextVideo: boolean;
 
   audioModeDefault: boolean;

diff --git a/server/src/user/settings/schemas/settings.schema.ts b/server/src/user/settings/schemas/settings.schema.ts
@@ -59,6 +59,9 @@ export class Settings extends Document implements SettingsDto {
   @Prop()
   hideComments: boolean;
 
+  @Prop()
+  videoSpeedAsList: boolean;
+
   @Prop()
   autoplayNextVideo: boolean;
 

diff --git a/server/src/user/settings/settings.service.ts b/server/src/user/settings/settings.service.ts
@@ -14,6 +14,7 @@ export class SettingsService {
   private defaultOptions: SettingsDto = {
     alwaysLoopVideo: false,
     hideComments: false,
+    videoSpeedAsList: false,
     audioModeDefault: false,
     autoAdjustAudioQuality: true,
     autoAdjustVideoQuality: true,

diff --git a/shared/api.schema.ts b/shared/api.schema.ts
@@ -235,6 +235,7 @@ export interface components {
       showRecommendedVideos: boolean;
       alwaysLoopVideo: boolean;
       hideComments: boolean;
+      videoSpeedAsList: boolean;
       autoplayNextVideo: boolean;
       audioModeDefault: boolean;
       defaultVideoSpeed: number;