Lazy load playlist components to improve performance (#2993)

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

@@ -0,0 +1,55 @@
+import Vue from 'vue'
+import FtListVideo from '../ft-list-video/ft-list-video.vue'
+
+export default Vue.extend({
+  name: 'FtListVideoLazy',
+  components: {
+    'ft-list-video': FtListVideo
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    playlistId: {
+      type: String,
+      default: null
+    },
+    playlistIndex: {
+      type: Number,
+      default: null
+    },
+    playlistReverse: {
+      type: Boolean,
+      default: false
+    },
+    playlistShuffle: {
+      type: Boolean,
+      default: false
+    },
+    playlistLoop: {
+      type: Boolean,
+      default: false
+    },
+    forceListType: {
+      type: String,
+      default: null
+    },
+    appearance: {
+      type: String,
+      required: true
+    }
+  },
+  data: function () {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    onVisibilityChanged: function (visible) {
+      if (visible) {
+        this.visible = visible
+      }
+    }
+  }
+})

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

@@ -0,0 +1,23 @@
+<template>
+  <div
+    v-observe-visibility="{
+      callback: onVisibilityChanged,
+      once: true,
+    }"
+  >
+    <ft-list-video
+      v-if="visible"
+      :data="data"
+      :playlist-id="playlistId"
+      :playlist-index="playlistIndex"
+      :playlist-reverse="playlistReverse"
+      :playlist-shuffle="playlistShuffle"
+      :playlist-loop="playlistLoop"
+      :force-list-type="forceListType"
+      :appearance="appearance"
+      @pause-player="$emit('pause-player')"
+    />
+  </div>
+</template>
+
+<script src="./ft-list-video-lazy.js" />

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

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtLoader from '../ft-loader/ft-loader.vue'
 import FtCard from '../ft-card/ft-card.vue'
-import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import FtListVideoLazy from '../ft-list-video-lazy/ft-list-video-lazy.vue'
 import { copyToClipboard, showToast } from '../../helpers/utils'
 import { getLocalPlaylist, parseLocalPlaylistVideo } from '../../helpers/api/local'
 
@@ -11,7 +11,7 @@ export default Vue.extend({
   components: {
     'ft-loader': FtLoader,
     'ft-card': FtCard,
-    'ft-list-video': FtListVideo
+    'ft-list-video-lazy': FtListVideoLazy
   },
   props: {
     playlistId: {

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

@@ -108,7 +108,7 @@
               {{ index + 1 }}
             </p>
           </div>
-          <ft-list-video
+          <ft-list-video-lazy
             :data="item"
             :playlist-id="playlistId"
             :playlist-index="reversePlaylist ? playlistItems.length - index - 1 : index"

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

@@ -1,14 +1,14 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
-import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import FtListVideoLazy from '../ft-list-video-lazy/ft-list-video-lazy.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 
 export default Vue.extend({
   name: 'WatchVideoRecommendations',
   components: {
     'ft-card': FtCard,
-    'ft-list-video': FtListVideo,
+    'ft-list-video-lazy': FtListVideoLazy,
     'ft-toggle-switch': FtToggleSwitch
   },
   props: {

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

@@ -16,7 +16,7 @@
         @change="updatePlayNextVideo"
       />
     </div>
-    <ft-list-video
+    <ft-list-video-lazy
       v-for="(video, index) in data"
       :key="index"
       :data="video"

src/renderer/views/Playlist/Playlist.js

@@ -3,7 +3,7 @@ import { mapActions, mapMutations } from 'vuex'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import PlaylistInfo from '../../components/playlist-info/playlist-info.vue'
-import FtListVideo from '../../components/ft-list-video/ft-list-video.vue'
+import FtListVideoLazy from '../../components/ft-list-video-lazy/ft-list-video-lazy.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
 import i18n from '../../i18n/index'
@@ -16,7 +16,7 @@ export default Vue.extend({
     'ft-loader': FtLoader,
     'ft-card': FtCard,
     'playlist-info': PlaylistInfo,
-    'ft-list-video': FtListVideo,
+    'ft-list-video-lazy': FtListVideoLazy,
     'ft-flex-box': FtFlexBox,
     'ft-button': FtButton
   },

src/renderer/views/Playlist/Playlist.vue

@@ -25,7 +25,7 @@
         >
           {{ index + 1 }}
         </p>
-        <ft-list-video
+        <ft-list-video-lazy
           :data="item"
           :playlist-id="playlistId"
           :playlist-index="index"