Implement Default Viewing Mode setting

kommunarr · Oct 20, 2024 · e4fc61c · e4fc61c
1 parent 8f2adf5
commit e4fc61c
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 43 deletions.
diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -203,7 +203,7 @@ export default defineComponent({
       'updateHideLiveChat',
       'updateHideActiveSubscriptions',
       'updatePlayNextVideo',
-      'updateDefaultTheatreMode',
+      'updateDefaultViewingMode',
       'updateHideVideoDescription',
       'updateHideComments',
       'updateHideCommentPhotos',

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -2378,7 +2378,6 @@ export default defineComponent({
       registerLegacyQualitySelection()
       registerStatsButton()
 
-
       if (ui.isMobile()) {
         useOverFlowMenu.value = true
       } else {

diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
@@ -49,6 +49,14 @@ export default defineComponent({
         0.5,
         1
       ],
+      viewingModeValues: [
+        'default',
+        'theatre',
+        'fullscreen',
+        'fullwindow',
+        'pip',
+        'external_player'
+      ],
       screenshotFormatNames: [
         'PNG',
         'JPEG'
@@ -119,8 +127,8 @@ export default defineComponent({
       return this.$store.getters.getDefaultQuality
     },
 
-    defaultTheatreMode: function () {
-      return this.$store.getters.getDefaultTheatreMode
+    defaultViewingMode: function () {
+      return this.$store.getters.getDefaultViewingMode
     },
 
     hideRecommendedVideos: function () {
@@ -177,6 +185,17 @@ export default defineComponent({
       ]
     },
 
+    viewingModeNames: function () {
+      return [
+        this.$t('Settings.General Settings.Thumbnail Preference.Default'),
+        this.$t('Video.Player.Theatre Mode'),
+        this.$t('Settings.Player Settings.Default Viewing Mode.Fullscreen'),
+        this.$t('Video.Player.Full Window'),
+        this.$t('Settings.Player Settings.Default Viewing Mode.Picture in Picture'),
+        this.$t('Settings.External Player Settings.External Player'),
+      ]
+    },
+
     enableScreenshot: function() {
       return this.$store.getters.getEnableScreenshot
     },
@@ -289,7 +308,7 @@ export default defineComponent({
       'updatePlayNextVideo',
       'updateEnableSubtitlesByDefault',
       'updateProxyVideos',
-      'updateDefaultTheatreMode',
+      'updateDefaultViewingMode',
       'updateDefaultSkipInterval',
       'updateDefaultInterval',
       'updateDefaultVolume',

diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
@@ -18,12 +18,6 @@
           :default-value="enableSubtitlesByDefault"
           @change="updateEnableSubtitlesByDefault"
         />
-        <ft-toggle-switch
-          :label="$t('Settings.Player Settings.Enable Theatre Mode by Default')"
-          :compact="true"
-          :default-value="defaultTheatreMode"
-          @change="updateDefaultTheatreMode"
-        />
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Scroll Volume Over Video Player')"
           :compact="true"
@@ -81,6 +75,41 @@
         />
       </div>
     </div>
+    <ft-flex-box>
+      <ft-select
+        :placeholder="$t('Settings.Player Settings.Default Viewing Mode.Default Viewing Mode')"
+        :value="defaultViewingMode"
+        :select-names="viewingModeNames"
+        :select-values="viewingModeValues"
+        :icon="['fas', 'display']"
+        @change="updateDefaultViewingMode"
+      />
+      <ft-select
+        :placeholder="$t('Settings.Player Settings.Default Video Format.Default Video Format')"
+        :value="defaultVideoFormat"
+        :select-names="formatNames"
+        :select-values="formatValues"
+        :tooltip="$t('Tooltips.Player Settings.Default Video Format')"
+        :icon="['fas', 'file-video']"
+        @change="updateDefaultVideoFormat"
+      />
+      <ft-select
+        :placeholder="$t('Settings.Player Settings.Default Quality.Default Quality')"
+        :value="defaultQuality"
+        :select-names="qualityNames"
+        :select-values="qualityValues"
+        :icon="['fas', 'photo-film']"
+        @change="updateDefaultQuality"
+      />
+      <ft-select
+        :placeholder="$t('Settings.Player Settings.Video Playback Rate Interval')"
+        :value="videoPlaybackRateInterval"
+        :select-names="playbackRateIntervalValues"
+        :select-values="playbackRateIntervalValues"
+        :icon="['fas', 'gauge']"
+        @change="updateVideoPlaybackRateInterval"
+      />
+    </ft-flex-box>
     <ft-flex-box>
       <ft-slider
         :label="$t('Settings.Player Settings.Fast-Forward / Rewind Interval')"
@@ -127,33 +156,6 @@
         value-extension="x"
         @change="updateMaxVideoPlaybackRate"
       />
-      <ft-select
-        :placeholder="$t('Settings.Player Settings.Video Playback Rate Interval')"
-        :value="videoPlaybackRateInterval"
-        :select-names="playbackRateIntervalValues"
-        :select-values="playbackRateIntervalValues"
-        :icon="['fas', 'gauge']"
-        @change="updateVideoPlaybackRateInterval"
-      />
-    </ft-flex-box>
-    <ft-flex-box>
-      <ft-select
-        :placeholder="$t('Settings.Player Settings.Default Video Format.Default Video Format')"
-        :value="defaultVideoFormat"
-        :select-names="formatNames"
-        :select-values="formatValues"
-        :tooltip="$t('Tooltips.Player Settings.Default Video Format')"
-        :icon="['fas', 'file-video']"
-        @change="updateDefaultVideoFormat"
-      />
-      <ft-select
-        :placeholder="$t('Settings.Player Settings.Default Quality.Default Quality')"
-        :value="defaultQuality"
-        :select-names="qualityNames"
-        :select-values="qualityValues"
-        :icon="['fas', 'photo-film']"
-        @change="updateDefaultQuality"
-      />
     </ft-flex-box>
     <br>
     <ft-flex-box

diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
@@ -178,7 +178,7 @@ const state = {
   defaultProfile: MAIN_PROFILE_ID,
   defaultQuality: '720',
   defaultSkipInterval: 5,
-  defaultTheatreMode: false,
+  defaultViewingMode: 'default',
   defaultVideoFormat: 'dash',
   disableSmoothScrolling: false,
   displayVideoPlayButton: true,

diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
@@ -164,8 +164,11 @@ export default defineComponent({
     defaultInterval: function () {
       return this.$store.getters.getDefaultInterval
     },
-    defaultTheatreMode: function () {
-      return this.$store.getters.getDefaultTheatreMode
+    defaultViewingMode: function () {
+      return this.$store.getters.getDefaultViewingMode
+    },
+    externalPlayer: function () {
+      return this.$store.getters.getExternalPlayer
     },
     defaultVideoFormat: function () {
       return this.$store.getters.getDefaultVideoFormat
@@ -314,7 +317,7 @@ export default defineComponent({
       this.checkIfPlaylist()
 
       // this has to be below checkIfPlaylist() as theatrePossible needs to know if there is a playlist or not
-      this.useTheatreMode = this.defaultTheatreMode && this.theatrePossible
+      this.setViewingModeOnFirstLoad()
 
       if (!process.env.SUPPORTS_LOCAL_API || this.backendPreference === 'invidious') {
         this.getVideoInformationInvidious()
@@ -325,6 +328,23 @@ export default defineComponent({
       window.addEventListener('beforeunload', this.handleWatchProgress)
     },
 
+    setViewingModeOnFirstLoad: function () {
+      switch (this.defaultViewingMode) {
+        case 'theatre':
+          this.useTheatreMode = this.theatrePossible
+          return
+        case 'fullscreen':
+          this.startNextVideoInFullscreen = true
+          return
+        case 'fullwindow':
+          this.startNextVideoInFullwindow = true
+          return
+        case 'pip':
+          this.startNextVideoInPip = true
+
+      }
+    },
+
     changeTimestamp: function (timestamp) {
       const player = this.$refs.player
 

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -402,7 +402,10 @@ Settings:
     Autoplay Videos: Autoplay Videos
     Proxy Videos Through Invidious: Proxy Videos Through Invidious
     Autoplay Playlists: Autoplay Playlists
-    Enable Theatre Mode by Default: Enable Theatre Mode by Default
+    Default Viewing Mode: 
+      Default Viewing Mode: Default Viewing Mode
+      Fullscreen: Fullscreen
+      Picture in Picture: Picture in Picture
     Scroll Volume Over Video Player: Scroll Volume Over Video Player
     Scroll Playback Rate Over Video Player: Scroll Playback Rate Over Video Player
     Skip by Scrolling Over Video Player: Skip by Scrolling Over Video Player