Stay in fullscreen/fullwindow/PiP + default viewing mode setting

src/constants.js

@@ -16,6 +16,9 @@ const IpcChannels = {
   APP_READY: 'app-ready',
   RELAUNCH_REQUEST: 'relaunch-request',
 
+  REQUEST_FULLSCREEN: 'request-fullscreen',
+  REQUEST_PIP: 'request-pip',
+
   SEARCH_INPUT_HANDLING_READY: 'search-input-handling-ready',
   UPDATE_SEARCH_INPUT_TEXT: 'update-search-input-text',
 

src/datastores/handlers/base.js

@@ -25,6 +25,19 @@ class Settings {
       await this.upsert('externalPlayerCustomArgs', newValue)
     }
 
+    // In FreeTube 0.23.0, the "Enable Theatre Mode by Default" setting was incoporated as an option
+    // of the "Default Viewing Mode" setting. This is a one time migration to preserve users'
+    // Theater Mode preference through this change.
+    const defaultTheatreMode = await db.settings.findOneAsync({ _id: 'defaultTheatreMode' })
+
+    if (defaultTheatreMode) {
+      if (defaultTheatreMode.value) {
+        await this.upsert('defaultViewingMode', 'theatre')
+      }
+
+      await db.settings.removeAsync({ _id: 'defaultTheatreMode' })
+    }
+
     return db.settings.findAsync({ _id: { $ne: 'bounds' } })
   }
 

src/main/index.js

@@ -981,6 +981,18 @@ function runApp() {
     return app.getPath('pictures')
   })
 
+  // Allows programmatic toggling of fullscreen without accompanying user interaction.
+  // See: https://developer.mozilla.org/en-US/docs/Web/Security/User_activation#transient_activation
+  ipcMain.on(IpcChannels.REQUEST_FULLSCREEN, ({ sender }) => {
+    sender.executeJavaScript('document.querySelector("video.player").ui.getControls().toggleFullScreen()', true)
+  })
+
+  // Allows programmatic toggling of picture-in-picture mode without accompanying user interaction.
+  // See: https://developer.mozilla.org/en-US/docs/Web/Security/User_activation#transient_activation
+  ipcMain.on(IpcChannels.REQUEST_PIP, ({ sender }) => {
+    sender.executeJavaScript('document.querySelector("video.player").ui.getControls().togglePiP()', true)
+  })
+
   ipcMain.handle(IpcChannels.SHOW_OPEN_DIALOG, async ({ sender }, options) => {
     const senderWindow = findSenderWindow(sender)
     if (senderWindow) {

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

@@ -218,7 +218,6 @@ export default defineComponent({
       'updateHideLiveChat',
       'updateHideActiveSubscriptions',
       'updatePlayNextVideo',
-      'updateDefaultTheatreMode',
       'updateHideVideoDescription',
       'updateHideComments',
       'updateHideCommentPhotos',

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

@@ -380,6 +380,10 @@ export default defineComponent({
       return this.$store.getters.getExternalPlayer
     },
 
+    externalPlayerIsDefaultViewingMode: function () {
+      return process.env.IS_ELECTRON && this.externalPlayer !== '' && this.$store.getters.getDefaultViewingMode === 'external_player'
+    },
+
     defaultPlayback: function () {
       return this.$store.getters.getDefaultPlayback
     },
@@ -482,13 +486,18 @@ export default defineComponent({
       return this.isInQuickBookmarkPlaylist ? 'base favorite' : 'base'
     },
 
-    watchPageLinkTo() {
-      // For `router-link` attribute `to`
-      return {
-        path: `/watch/${this.id}`,
-        query: this.watchPageLinkQuery,
+    watchVideoRouterLink() {
+    // For `router-link` attribute `to`
+      if (!this.externalPlayerIsDefaultViewingMode) {
+        return {
+          path: `/watch/${this.id}`,
+          query: this.watchPageLinkQuery,
+        }
+      } else {
+        return {}
       }
     },
+
     watchPageLinkQuery() {
       const query = {}
       if (this.playlistIdFinal) { query.playlistId = this.playlistIdFinal }
@@ -547,6 +556,11 @@ export default defineComponent({
     }
   },
   methods: {
+    handleWatchPageLinkClick: function() {
+      if (this.externalPlayerIsDefaultViewingMode) {
+        this.handleExternalPlayer()
+      }
+    },
     fetchDeArrowThumbnail: async function() {
       if (this.thumbnailPreference === 'hidden') { return }
       const videoId = this.id

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -14,7 +14,8 @@
       <router-link
         class="thumbnailLink"
         tabindex="-1"
-        :to="watchPageLinkTo"
+        :to="watchVideoRouterLink"
+        @click.native="handleWatchPageLinkClick"
       >
         <img
           :src="thumbnail"
@@ -34,7 +35,7 @@
         {{ isLive ? $t("Video.Live") : (isUpcoming ? $t("Video.Upcoming") : displayDuration) }}
       </div>
       <ft-icon-button
-        v-if="externalPlayer !== ''"
+        v-if="externalPlayer !== '' && !externalPlayerIsDefaultViewingMode"
         :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
         :icon="['fas', 'external-link-alt']"
         class="externalPlayerIcon"
@@ -112,7 +113,8 @@
     <div class="info">
       <router-link
         class="title"
-        :to="watchPageLinkTo"
+        :to="watchVideoRouterLink"
+        @click.native="handleWatchPageLinkClick"
       >
         <h3 class="h3Title">
           {{ displayTitle }}

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

@@ -132,6 +132,18 @@ export default defineComponent({
       type: String,
       default: null
     },
+    startInFullscreen: {
+      type: Boolean,
+      default: false
+    },
+    startInFullwindow: {
+      type: Boolean,
+      default: false
+    },
+    startInPip: {
+      type: Boolean,
+      default: false
+    },
     currentPlaybackRate: {
       type: Number,
       default: 1
@@ -172,11 +184,15 @@ export default defineComponent({
     const isLive = ref(false)
 
     const useOverFlowMenu = ref(false)
-    const fullWindowEnabled = ref(false)
     const forceAspectRatio = ref(false)
 
     const activeLegacyFormat = shallowRef(null)
 
+    const fullWindowEnabled = ref(false)
+    const startInFullwindow = props.startInFullwindow
+    let startInFullscreen = props.startInFullscreen
+    let startInPip = props.startInPip
+
     /**
      * @type {{
      *   url: string,
@@ -1117,6 +1133,15 @@ export default defineComponent({
       emit('ended')
     }
 
+    function handleCanPlay() {
+      // PiP can only be activated once the video's readState and video track are populated
+      if (startInPip && props.format !== 'audio' && ui.getControls().isPiPAllowed() && process.env.IS_ELECTRON) {
+        startInPip = false
+        const { ipcRenderer } = require('electron')
+        ipcRenderer.send(IpcChannels.REQUEST_PIP)
+      }
+    }
+
     function updateVolume() {
       const video_ = video.value
       // https://docs.videojs.com/html5#volume
@@ -1719,6 +1744,12 @@ export default defineComponent({
         }
       })
 
+      if (startInFullwindow) {
+        events.dispatchEvent(new CustomEvent('setFullWindow', {
+          detail: true
+        }))
+      }
+
       /**
        * @implements {shaka.extern.IUIElement.Factory}
        */
@@ -1809,7 +1840,7 @@ export default defineComponent({
     /**
      * As shaka-player doesn't let you unregister custom control factories,
      * overwrite them with `null` instead so the referenced objects
-     * (e.g. {@linkcode events}, {@linkcode fullWindowEnabled}) can get gargabe collected
+     * (e.g. {@linkcode events}, {@linkcode fullWindowEnabled}) can get garbage collected
      */
     function cleanUpCustomPlayerControls() {
       shakaControls.registerElement('ft_audio_tracks', null)
@@ -2633,6 +2664,12 @@ export default defineComponent({
       if (props.chapters.length > 0) {
         createChapterMarkers()
       }
+
+      if (startInFullscreen && process.env.IS_ELECTRON) {
+        startInFullscreen = false
+        const { ipcRenderer } = require('electron')
+        ipcRenderer.send(IpcChannels.REQUEST_FULLSCREEN)
+      }
     }
 
     watch(
@@ -2844,11 +2881,25 @@ export default defineComponent({
      * Vue's lifecycle hooks are synchonous, so if we destroy the player in {@linkcode onBeforeUnmount},
      * it won't be finished in time, as the player destruction is asynchronous.
      * To workaround that we destroy the player first and wait for it to finish before we unmount this component.
+     *
+     * @returns {Promise<{ startNextVideoInFullscreen: boolean, startNextVideoInFullwindow: boolean, startNextVideoInPip: boolean }>}
      */
     async function destroyPlayer() {
       ignoreErrors = true
 
+      let uiState = { startNextVideoInFullscreen: false, startNextVideoInFullwindow: false, startNextVideoInPip: false }
+
       if (ui) {
+        if (ui.getControls()) {
+          // save the state of player settings to reinitialize them upon next creation
+          const controls = ui.getControls()
+          uiState = {
+            startNextVideoInFullscreen: controls.isFullScreenEnabled(),
+            startNextVideoInFullwindow: fullWindowEnabled.value,
+            startNextVideoInPip: controls.isPiPEnabled()
+          }
+        }
+
         // destroying the ui also destroys the player
         await ui.destroy()
         ui = null
@@ -2867,6 +2918,8 @@ export default defineComponent({
       if (video.value) {
         video.value.ui = null
       }
+
+      return uiState
     }
 
     expose({
@@ -2920,6 +2973,7 @@ export default defineComponent({
 
       handlePlay,
       handlePause,
+      handleCanPlay,
       handleEnded,
       updateVolume,
       handleTimeupdate,

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue

@@ -19,6 +19,7 @@
       @play="handlePlay"
       @pause="handlePause"
       @ended="handleEnded"
+      @canplay="handleCanPlay"
       @volumechange="updateVolume"
       @timeupdate="handleTimeupdate"
     />

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

@@ -125,8 +125,18 @@ export default defineComponent({
       return this.$store.getters.getDefaultQuality
     },
 
-    defaultTheatreMode: function () {
-      return this.$store.getters.getDefaultTheatreMode
+    defaultViewingMode: function () {
+      const defaultViewingMode = this.$store.getters.getDefaultViewingMode
+      if ((defaultViewingMode === 'external_player' && (!process.env.IS_ELECTRON || this.externalPlayer === '')) ||
+        (!process.env.IS_ELECTRON && (defaultViewingMode === 'fullscreen' || defaultViewingMode === 'pip'))) {
+        return 'default'
+      }
+
+      return defaultViewingMode
+    },
+
+    externalPlayer: function () {
+      return this.$store.getters.getExternalPlayer
     },
 
     hideRecommendedVideos: function () {
@@ -183,6 +193,46 @@ export default defineComponent({
       ]
     },
 
+    viewingModeNames: function () {
+      const viewingModeNames = [
+        this.$t('Settings.General Settings.Thumbnail Preference.Default'),
+        this.$t('Settings.Player Settings.Default Viewing Mode.Theater'),
+        this.$t('Video.Player.Full Window'),
+      ]
+
+      if (process.env.IS_ELECTRON) {
+        viewingModeNames.push(
+          this.$t('Settings.Player Settings.Default Viewing Mode.Full Screen'),
+          this.$t('Settings.Player Settings.Default Viewing Mode.Picture in Picture')
+        )
+        if (this.externalPlayer !== '') {
+          viewingModeNames.push(
+            this.$t('Settings.Player Settings.Default Viewing Mode.External Player', { externalPlayerName: this.externalPlayer })
+          )
+        }
+      }
+
+      return viewingModeNames
+    },
+
+    viewingModeValues: function () {
+      const viewingModeValues = [
+        'default',
+        'theatre',
+        'fullwindow'
+      ]
+
+      if (process.env.IS_ELECTRON) {
+        viewingModeValues.push('fullscreen', 'pip')
+
+        if (this.externalPlayer !== '') {
+          viewingModeValues.push('external_player')
+        }
+      }
+
+      return viewingModeValues
+    },
+
     enableScreenshot: function() {
       return this.$store.getters.getEnableScreenshot
     },
@@ -296,7 +346,7 @@ export default defineComponent({
       'updatePlayNextVideo',
       'updateEnableSubtitlesByDefault',
       'updateProxyVideos',
-      'updateDefaultTheatreMode',
+      'updateDefaultViewingMode',
       'updateDefaultSkipInterval',
       'updateDefaultInterval',
       'updateDefaultVolume',