refactor: create reusable component for shorts, lives and videos tab

zimui/src/components/channel/tabs/LivesTab.vue

@@ -2,17 +2,17 @@
 import { useMainStore } from '@/stores/main'
 import { computed } from 'vue'
 
-import LivesGridTab from './LivesGridTab.vue'
+import TabView from '@/views/TabView.vue'
 
 const main = useMainStore()
-const hideTabs = computed(() => main.channel?.livesPlaylist)
+const livesAvailable = computed(() => main.channel?.livesPlaylist)
 </script>
 
 <template>
-  <div v-if="hideTabs">
-    <lives-grid-tab />
+  <div v-if="livesAvailable">
+    <tab-view :playlist-label="'livesPlaylist'" :playlist-type="'Lives'" />
   </div>
   <div v-else>
-   <p style="text-align:center">No Live available</p>
+    <p style="text-align: center">No Live available</p>
   </div>
 </template>

zimui/src/components/channel/tabs/ShortsTab.vue

@@ -2,17 +2,20 @@
 import { useMainStore } from '@/stores/main'
 import { computed } from 'vue'
 
-import ShortsGridTab from './ShortsGridTab.vue'
+import TabView from '@/views/TabView.vue'
 
 const main = useMainStore()
-const hideTabs = computed(() => main.channel?.shortsPlaylist)
+const shortsAvailable = computed(() => main.channel?.shortsPlaylist)
 </script>
 
 <template>
-  <div v-if="hideTabs">
-    <shorts-grid-tab />
+  <div v-if="shortsAvailable">
+    <tab-view 
+    :playlist-label="'shortsPlaylist'" 
+    :playlist-type="'Shorts'"
+    />
   </div>
   <div v-else>
-   <p style="text-align:center">No short available</p>
+    <p style="text-align: center">No short available</p>
   </div>
 </template>

zimui/src/components/channel/tabs/VideosTab.vue

@@ -2,15 +2,17 @@
 import { useMainStore } from '@/stores/main'
 import { computed } from 'vue'
 
-import VideosGridTab from './VideosGridTab.vue'
+import TabView from '@/views/TabView.vue'
 
 const main = useMainStore()
-const hideTabs = computed(() => main.channel?.longVideosPlaylist)
+const videosAvailable = computed(() => main.channel?.longVideosPlaylist)
 </script>
 
 <template>
-  <div v-if="hideTabs">
-    <videos-grid-tab />
+  <div v-if="videosAvailable">
+    <tab-view
+    :playlist-label="'longVideosPlaylist'"
+    :playlist-type="'Videos'" />
   </div>
   <div v-else>
    <p style="text-align:center">No Video available</p>

zimui/src/components/channel/tabs/LivesGridTab.vue → zimui/src/views/TabView.vue

@@ -13,19 +13,30 @@ const videos = ref<VideoPreview[]>([])
 const playlist = ref<Playlist>()
 const isLoading = ref(true)
 
-// Watch for changes in the main playlist
+const props = defineProps({
+  playlistLabel: {
+    type: String,
+    required: true
+  },
+  playlistType: {
+    type: String,
+    required: true
+  }
+})
+
+// Watch for changes in the playlist
 watch(
-  () => main.channel?.mainPlaylist,
+  () => main.channel?.[props.playlistLabel],
   () => {
     fetchData()
   }
 )
 
-// Fetch the videos for the main playlist
+// Fetch the videos for the playlist
 const fetchData = async function () {
-  if (main.channel?.shortsPlaylist) {
+  if (main.channel?.[props.playlistLabel]) {
     try {
-      const resp = await main.fetchPlaylist(main.channel?.livesPlaylist)
+      const resp = await main.fetchPlaylist(main.channel?.[props.playlistLabel])
       if (resp) {
         playlist.value = resp
         videos.value = resp.videos
@@ -48,6 +59,12 @@ onMounted(() => {
     <v-progress-circular class="d-inline" indeterminate></v-progress-circular>
   </div>
   <div v-else>
-    <video-grid v-if="videos" :videos="videos" :playlist-slug="main.channel?.livessPlaylist" />
+     <tab-info
+      :title="[props.playlistType]+' from '+main.channel?.title"
+      :count="playlist?.videosCount || 0"
+      :count-text="playlist?.videos.length === 1 ? 'video' : 'videos'"
+      icon="mdi-video-outline"
+    />
+    <video-grid v-if="videos" :videos="videos" :playlist-slug="main.channel?.[props.playlistLabel]" />
   </div>
 </template>