Have fullscreen and PiP be re-requested on autoplay when they are open

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

Hide file tree

Showing 6 changed files with 66 additions and 9 deletions.
diff --git a/src/constants.js b/src/constants.js
@@ -15,6 +15,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',
 

diff --git a/src/main/index.js b/src/main/index.js
@@ -927,6 +927,15 @@ function runApp() {
     return app.getPath('pictures')
   })
 
+  ipcMain.on(IpcChannels.REQUEST_FULLSCREEN, ({ sender }) => {
+    sender.executeJavaScript('document.getElementById("video").requestFullscreen({navigationUI: "hide"})', true)
+  })
+
+  ipcMain.on(IpcChannels.REQUEST_PIP, ({ sender }) => {
+    sender.executeJavaScript('document.getElementById("video").requestPictureInPicture()', true)
+  })
+
+
   ipcMain.handle(IpcChannels.SHOW_OPEN_DIALOG, async ({ sender }, options) => {
     const senderWindow = findSenderWindow(sender)
     if (senderWindow) {

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
@@ -107,15 +107,24 @@ export default defineComponent({
       type: String,
       default: null
     },
+    startInFullscreen: {
+      type: Boolean,
+      default: false
+    },
     startInFullwindow: {
       type: Boolean,
       default: false
+    },
+    startInPip: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
     'error',
     'loaded',
     'ended',
+    'reset-start-in-viewing-mode',
     'timeupdate',
     'toggle-theatre-mode'
   ],
@@ -143,11 +152,16 @@ export default defineComponent({
     const isLive = ref(false)
 
     const useOverFlowMenu = ref(false)
-    const fullWindowEnabled = ref(props.startInFullwindow)
     const forceAspectRatio = ref(false)
 
     const activeLegacyFormat = shallowRef(null)
 
+    const fullWindowEnabled = ref(props.startInFullwindow)
+    let startInFullscreen = props.startInFullscreen
+    let startInPip = props.startInPip
+
+    emit('reset-start-in-viewing-mode')
+
     /**
      * @type {{
      *   url: string,
@@ -1046,7 +1060,17 @@ export default defineComponent({
         navigator.mediaSession.playbackState = 'none'
       }
 
-      emit('ended', fullWindowEnabled.value)
+      const controls = ui.getControls()
+      emit('ended', controls.isFullScreenEnabled(), fullWindowEnabled.value, controls.isPiPEnabled())
+    }
+
+    function handleCanPlay() {
+      // PiP can only be activated once the video's readState and video track are populated
+      if (startInPip && ui.getControls().isPiPAllowed() && process.env.IS_ELECTRON) {
+        startInPip = false
+        const { ipcRenderer } = require('electron')
+        ipcRenderer.send(IpcChannels.REQUEST_PIP)
+      }
     }
 
     function updateVolume() {
@@ -1754,7 +1778,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)
@@ -2543,6 +2567,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(
@@ -2781,6 +2811,7 @@ export default defineComponent({
 
       handlePlay,
       handlePause,
+      handleCanPlay,
       handleEnded,
       updateVolume,
       handleTimeupdate,

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
@@ -9,6 +9,7 @@
   >
     <!-- eslint-disable-next-line vuejs-accessibility/media-has-caption -->
     <video
+      id="video"
       ref="video"
       class="player"
       preload="auto"
@@ -19,6 +20,7 @@
       @play="handlePlay"
       @pause="handlePause"
       @ended="handleEnded"
+      @canplay="handleCanPlay"
       @volumechange="updateVolume"
       @timeupdate="handleTimeupdate"
     />

diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
@@ -66,7 +66,9 @@ export default defineComponent({
   },
   data: function () {
     return {
-      isInFullwindow: false,
+      startNextVideoInFullscreen: false,
+      startNextVideoInFullwindow: false,
+      startNextVideoInPip: false,
       isLoading: true,
       firstLoad: true,
       useTheatreMode: false,
@@ -1182,8 +1184,11 @@ export default defineComponent({
       this.activeFormat = 'audio'
     },
 
-    handleVideoEnded: function (isInFullwindow = false) {
-      this.isInFullwindow = isInFullwindow
+    handleVideoEnded: function (startNextVideoInFullscreen = false, startNextVideoInFullwindow = false, startNextVideoInPip = false) {
+      this.startNextVideoInFullscreen = startNextVideoInFullscreen
+      this.startNextVideoInFullwindow = startNextVideoInFullwindow
+      this.startNextVideoInPip = startNextVideoInPip
+
       if ((!this.watchingPlaylist || !this.autoplayPlaylists) && !this.playNextVideo) {
         return
       }
@@ -1621,6 +1626,12 @@ export default defineComponent({
       this.updatePlaylistLastPlayedAt({ _id: playlist._id })
     },
 
+    resetStartInViewingMode: function() {
+      this.startNextVideoInFullscreen = false
+      this.startNextVideoInFullwindow = false
+      this.startNextVideoInPip = false
+    },
+
     ...mapActions([
       'updateHistory',
       'updateWatchProgress',

diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
@@ -34,15 +34,16 @@
           :theatre-possible="theatrePossible"
           :use-theatre-mode="useTheatreMode"
           :vr-projection="vrProjection"
-          :start-in-fullwindow="isInFullwindow"
+          :start-in-fullscreen="startNextVideoInFullscreen"
+          :start-in-fullwindow="startNextVideoInFullwindow"
+          :start-in-pip="startNextVideoInPip"
           class="videoPlayer"
           @error="handlePlayerError"
           @loaded="handleVideoLoaded"
           @timeupdate="updateCurrentChapter"
           @ended="handleVideoEnded"
-          @set-fullscreen="e => isInFullscreen = e"
-          @set-fullwindow="e => isInFullwindow = e"
           @toggle-theatre-mode="useTheatreMode = !useTheatreMode"
+          @reset-start-in-viewing-mode="resetStartInViewingMode"
         />
         <div
           v-if="!isLoading && (isUpcoming || errorMessage)"