Restore fullscreen and PiP during autoplay

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

Hide file tree

Showing 6 changed files with 53 additions and 4 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,9 +107,17 @@ export default defineComponent({
       type: String,
       default: null
     },
+    startInFullscreen: {
+      type: Boolean,
+      default: false
+    },
     startInFullwindow: {
       type: Boolean,
       default: false
+    },
+    startInPip: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -1046,7 +1054,8 @@ export default defineComponent({
         navigator.mediaSession.playbackState = 'none'
       }
 
-      emit('ended', fullWindowEnabled.value)
+      const controls = ui.getControls()
+      emit('ended', controls.isFullScreenEnabled(), fullWindowEnabled.value, controls.isPiPEnabled())
     }
 
     function updateVolume() {
@@ -2543,6 +2552,29 @@ export default defineComponent({
       if (props.chapters.length > 0) {
         createChapterMarkers()
       }
+
+      setDefaultFullscreenOrPiP()
+    }
+
+    function setDefaultFullscreenOrPiP() {
+      const controls = ui.getControls()
+      if (props.startInFullscreen && process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
+        ipcRenderer.send(IpcChannels.REQUEST_FULLSCREEN)
+      }
+
+      if (props.startInPip && controls.isPiPAllowed() && process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
+
+        // TODO: determine if any appropriate promise can be waited on instead of this
+        const interval = setInterval(() => { 
+          if (controls.isPiPEnabled()) {
+            clearInterval(interval)
+          } else {
+            ipcRenderer.send(IpcChannels.REQUEST_PIP)
+          }
+        }, 100)
+      }
     }
 
     watch(

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"

diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
@@ -67,6 +67,8 @@ export default defineComponent({
   data: function () {
     return {
       isInFullwindow: false,
+      isInFullscreen: false,
+      isInPip: false,
       isLoading: true,
       firstLoad: true,
       useTheatreMode: false,
@@ -1182,8 +1184,10 @@ export default defineComponent({
       this.activeFormat = 'audio'
     },
 
-    handleVideoEnded: function (isInFullwindow = false) {
+    handleVideoEnded: function (isInFullscreen = false, isInFullwindow = false, isInPip = false) {
+      this.isInFullscreen = isInFullscreen
       this.isInFullwindow = isInFullwindow
+      this.isInPip = isInPip
       if ((!this.watchingPlaylist || !this.autoplayPlaylists) && !this.playNextVideo) {
         return
       }

diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
@@ -34,14 +34,14 @@
           :theatre-possible="theatrePossible"
           :use-theatre-mode="useTheatreMode"
           :vr-projection="vrProjection"
+          :start-in-fullscreen="isInFullscreen"
           :start-in-fullwindow="isInFullwindow"
+          :start-in-pip="isInPip"
           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"
         />
         <div