Use emit and props instead of $parent (#3834)

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

@@ -93,9 +93,21 @@ export default defineComponent({
       type: Array,
       default: () => { return [] }
     },
+    currentChapterIndex: {
+      type: Number,
+      default: 0
+    },
     audioTracks: {
       type: Array,
       default: () => ([])
+    },
+    theatrePossible: {
+      type: Boolean,
+      default: false
+    },
+    useTheatreMode: {
+      type: Boolean,
+      default: false
     }
   },
   data: function () {
@@ -1424,11 +1436,11 @@ export default defineComponent({
     },
 
     createToggleTheatreModeButton: function() {
-      if (!this.$parent.theatrePossible) {
+      if (!this.theatrePossible) {
         return
       }
 
-      const theatreModeActive = this.$parent.useTheatreMode ? ' vjs-icon-theatre-active' : ''
+      const theatreModeActive = this.useTheatreMode ? ' vjs-icon-theatre-active' : ''
 
       const toggleTheatreMode = this.toggleTheatreMode
 
@@ -1458,14 +1470,14 @@ export default defineComponent({
     toggleTheatreMode: function() {
       if (!this.player.isFullscreen_) {
         const toggleTheatreModeButton = document.getElementById('toggleTheatreModeButton')
-        if (!this.$parent.useTheatreMode) {
+        if (!this.useTheatreMode) {
           toggleTheatreModeButton.classList.add('vjs-icon-theatre-active')
         } else {
           toggleTheatreModeButton.classList.remove('vjs-icon-theatre-active')
         }
       }
 
-      this.$parent.toggleTheatreMode()
+      this.$emit('toggle-theatre-mode')
     },
 
     createScreenshotButton: function () {
@@ -1949,7 +1961,7 @@ export default defineComponent({
      * @returns {boolean}
      */
     canChapterJump: function (event, direction) {
-      const currentChapter = this.$parent.videoCurrentChapterIndex
+      const currentChapter = this.currentChapterIndex
       return this.chapters.length > 0 &&
         (direction === 'previous' ? currentChapter > 0 : this.chapters.length - 1 !== currentChapter) &&
         ((process.platform !== 'darwin' && event.ctrlKey) ||
@@ -2075,7 +2087,7 @@ export default defineComponent({
             event.preventDefault()
             if (this.canChapterJump(event, 'previous')) {
               // Jump to the previous chapter
-              this.player.currentTime(this.chapters[this.$parent.videoCurrentChapterIndex - 1].startSeconds)
+              this.player.currentTime(this.chapters[this.currentChapterIndex - 1].startSeconds)
             } else {
               // Rewind by the time-skip interval (in seconds)
               this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate())
@@ -2085,7 +2097,7 @@ export default defineComponent({
             event.preventDefault()
             if (this.canChapterJump(event, 'next')) {
               // Jump to the next chapter
-              this.player.currentTime(this.chapters[this.$parent.videoCurrentChapterIndex + 1].startSeconds)
+              this.player.currentTime(this.chapters[this.currentChapterIndex + 1].startSeconds)
             } else {
               // Fast-Forward by the time-skip interval (in seconds)
               this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate())

src/renderer/components/watch-video-info/watch-video-info.js

@@ -242,13 +242,13 @@ export default defineComponent({
       })
 
       this.$watch('$refs.downloadButton.dropdownShown', (dropdownShown) => {
-        this.$parent.infoAreaSticky = !dropdownShown
+        this.$emit('set-info-area-sticky', !dropdownShown)
 
         if (dropdownShown && window.innerWidth >= 901) {
           // adds a slight delay so we know that the dropdown has shown up
           // and won't mess up our scrolling
-          Promise.resolve().then(() => {
-            this.$parent.$refs.infoArea.scrollIntoView()
+          setTimeout(() => {
+            this.$emit('scroll-to-info-area')
           })
         }
       })
@@ -279,20 +279,6 @@ export default defineComponent({
       }
     },
 
-    handleFormatChange: function (format) {
-      switch (format) {
-        case 'dash':
-          this.$parent.enableDashFormat()
-          break
-        case 'legacy':
-          this.$parent.enableLegacyFormat()
-          break
-        case 'audio':
-          this.$parent.enableAudioFormat()
-          break
-      }
-    },
-
     handleDownload: function (index) {
       const selectedDownloadLinkOption = this.downloadLinkOptions[index]
       const url = selectedDownloadLinkOption.value

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -115,7 +115,7 @@
           theme="secondary"
           :icon="['fas', 'file-video']"
           :dropdown-options="formatTypeOptions"
-          @click="handleFormatChange"
+          @click="$emit('change-format', $event)"
         />
         <ft-share-button
           v-if="!hideSharingActions"

src/renderer/views/Watch/Watch.js

@@ -256,9 +256,6 @@ export default defineComponent({
     changeTimestamp: function (timestamp) {
       this.$refs.videoPlayer.player.currentTime(timestamp)
     },
-    toggleTheatreMode: function () {
-      this.useTheatreMode = !this.useTheatreMode
-    },
 
     getVideoInformationLocal: async function () {
       if (this.firstLoad) {
@@ -1112,6 +1109,20 @@ export default defineComponent({
         })
     },
 
+    handleFormatChange: function (format) {
+      switch (format) {
+        case 'dash':
+          this.enableDashFormat()
+          break
+        case 'legacy':
+          this.enableLegacyFormat()
+          break
+        case 'audio':
+          this.enableAudioFormat()
+          break
+      }
+    },
+
     enableDashFormat: function () {
       if (this.activeFormat === 'dash' || this.isLive) {
         return

src/renderer/views/Watch/Watch.vue

@@ -30,12 +30,16 @@
           :video-id="videoId"
           :length-seconds="videoLengthSeconds"
           :chapters="videoChapters"
+          :current-chapter-index="videoCurrentChapterIndex"
+          :theatre-possible="theatrePossible"
+          :use-theatre-mode="useTheatreMode"
           class="videoPlayer"
           :class="{ theatrePlayer: useTheatreMode }"
           @ready="handleVideoReady"
           @ended="handleVideoEnded"
           @error="handleVideoError"
           @store-caption-list="captionHybridList = $event"
+          @toggle-theatre-mode="useTheatreMode = !useTheatreMode"
           v-on="!hideChapters && videoChapters.length > 0 ? { timeupdate: updateCurrentChapter } : {}"
         />
         <div
@@ -113,12 +117,14 @@
         :get-playlist-reverse="getPlaylistReverse"
         :get-playlist-shuffle="getPlaylistShuffle"
         :get-playlist-loop="getPlaylistLoop"
-        :theatre-possible="theatrePossible"
         :length-seconds="videoLengthSeconds"
         :video-thumbnail="thumbnail"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
+        @change-format="handleFormatChange"
         @pause-player="pausePlayer"
+        @set-info-area-sticky="infoAreaSticky = $event"
+        @scroll-to-info-area="$refs.infoArea.scrollIntoView()"
       />
       <watch-video-chapters
         v-if="!hideChapters && !isLoading && videoChapters.length > 0"