Add setting to toggle `Enter fullscreen on rotate` (#2808)

It defaults to `false`. This should prevent users with
multiple displays from running into issues when they
drag the window from a portrait display to a landscape
display too quickly.

src/renderer/components/ft-video-player/ft-video-player.js

@@ -193,6 +193,10 @@ export default Vue.extend({
       return this.$store.getters.getDisplayVideoPlayButton
     },
 
+    enterFullscreenOnDisplayRotate: function() {
+      return this.$store.getters.getEnterFullscreenOnDisplayRotate
+    },
+
     sponsorSkips: function () {
       const sponsorCats = ['sponsor',
         'selfpromo',
@@ -363,8 +367,8 @@ export default Vue.extend({
         })
         this.player.mobileUi({
           fullscreen: {
-            enterOnRotate: true,
-            exitOnRotate: true,
+            enterOnRotate: this.enterFullscreenOnDisplayRotate,
+            exitOnRotate: this.enterFullscreenOnDisplayRotate,
             lockOnRotate: false
           },
           // Without this flag, the mobile UI will only activate

src/renderer/components/player-settings/player-settings.js

@@ -132,6 +132,10 @@ export default Vue.extend({
       return this.$store.getters.getDisplayVideoPlayButton
     },
 
+    enterFullscreenOnDisplayRotate: function () {
+      return this.$store.getters.getEnterFullscreenOnDisplayRotate
+    },
+
     maxVideoPlaybackRate: function () {
       return parseInt(this.$store.getters.getMaxVideoPlaybackRate)
     },
@@ -270,6 +274,7 @@ export default Vue.extend({
       'updateVideoVolumeMouseScroll',
       'updateVideoPlaybackRateMouseScroll',
       'updateDisplayVideoPlayButton',
+      'updateEnterFullscreenOnDisplayRotate',
       'updateMaxVideoPlaybackRate',
       'updateVideoPlaybackRateInterval',
       'updateEnableScreenshot',

src/renderer/components/player-settings/player-settings.vue

@@ -51,6 +51,12 @@
           :default-value="displayVideoPlayButton"
           @change="updateDisplayVideoPlayButton"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Player Settings.Enter Fullscreen on Display Rotate')"
+          :compact="true"
+          :default-value="enterFullscreenOnDisplayRotate"
+          @change="updateEnterFullscreenOnDisplayRotate"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch

src/renderer/store/modules/settings.js

@@ -183,6 +183,7 @@ const state = {
   displayVideoPlayButton: true,
   enableSearchSuggestions: true,
   enableSubtitles: true,
+  enterFullscreenOnDisplayRotate: false,
   externalLinkHandling: '',
   externalPlayer: '',
   externalPlayerExecutable: '',

static/locales/en-US.yaml

@@ -237,6 +237,7 @@ Settings:
     Scroll Volume Over Video Player: Scroll Volume Over Video Player
     Scroll Playback Rate Over Video Player: Scroll Playback Rate Over Video Player
     Display Play Button In Video Player: Display Play Button In Video Player
+    Enter Fullscreen on Display Rotate: Enter Fullscreen on Display Rotate
     Next Video Interval: Next Video Interval
     Fast-Forward / Rewind Interval: Fast-Forward / Rewind Interval
     Default Volume: Default Volume

static/locales/en_GB.yaml

@@ -247,6 +247,7 @@ Settings:
     Playlist Next Video Interval: Playlist Next Video Interval
     Next Video Interval: Next video interval
     Display Play Button In Video Player: Display play button in video player
+    Enter Fullscreen on Display Rotate: Enter fullscreen on display rotate
     Fast-Forward / Rewind Interval: Fast-forward / rewind interval
     Scroll Playback Rate Over Video Player: Scroll playback rate over video player
     Video Playback Rate Interval: Video playback rate interval