Support YouTube's new layout for shorts only playlists (#3708)

FreeTubeApp · Jun 27, 2023 · 6e0395d · 6e0395d
1 parent 2c759b8
commit 6e0395d
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 37 deletions.
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -58,8 +58,8 @@ export default defineComponent({
     return {
       id: '',
       title: '',
-      channelName: '',
-      channelId: '',
+      channelName: null,
+      channelId: null,
       viewCount: 0,
       parsedViewCount: '',
       uploadedTime: '',
@@ -190,30 +190,34 @@ export default defineComponent({
           {
             label: this.$t('Video.Open in Invidious'),
             value: 'openInvidious'
-          },
-          {
-            type: 'divider'
-          },
-          {
-            label: this.$t('Video.Copy YouTube Channel Link'),
-            value: 'copyYoutubeChannel'
-          },
-          {
-            label: this.$t('Video.Copy Invidious Channel Link'),
-            value: 'copyInvidiousChannel'
-          },
-          {
-            type: 'divider'
-          },
-          {
-            label: this.$t('Video.Open Channel in YouTube'),
-            value: 'openYoutubeChannel'
-          },
-          {
-            label: this.$t('Video.Open Channel in Invidious'),
-            value: 'openInvidiousChannel'
           }
         )
+        if (this.channelId !== null) {
+          options.push(
+            {
+              type: 'divider'
+            },
+            {
+              label: this.$t('Video.Copy YouTube Channel Link'),
+              value: 'copyYoutubeChannel'
+            },
+            {
+              label: this.$t('Video.Copy Invidious Channel Link'),
+              value: 'copyInvidiousChannel'
+            },
+            {
+              type: 'divider'
+            },
+            {
+              label: this.$t('Video.Open Channel in YouTube'),
+              value: 'openYoutubeChannel'
+            },
+            {
+              label: this.$t('Video.Open Channel in Invidious'),
+              value: 'openInvidiousChannel'
+            }
+          )
+        }
       }
 
       return options
@@ -402,8 +406,8 @@ export default defineComponent({
       this.title = this.data.title
       // this.thumbnail = this.data.videoThumbnails[4].url
 
-      this.channelName = this.data.author
-      this.channelId = this.data.authorId
+      this.channelName = this.data.author ?? null
+      this.channelId = this.data.authorId ?? null
       this.duration = formatDurationAsTimestamp(this.data.lengthSeconds)
       this.description = this.data.description
       this.isLive = this.data.liveNow || this.data.lengthSeconds === 'undefined'

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -78,13 +78,14 @@
       </router-link>
       <div class="infoLine">
         <router-link
+          v-if="channelId !== null"
           class="channelName"
           :to="`/channel/${channelId}`"
         >
           <span>{{ channelName }}</span>
         </router-link>
         <template v-if="!isLive && !isUpcoming && !isPremium && !hideViews">
-          <span class="viewCount"> • {{ parsedViewCount }} </span>
+          <span class="viewCount"><template v-if="channelId !== null"> •</template> {{ parsedViewCount }} </span>
           <span v-if="viewCount === 1">{{ $t("Video.View").toLowerCase() }}</span>
           <span v-else>{{ $t("Video.Views").toLowerCase() }}</span>
         </template>

diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
@@ -406,18 +406,37 @@ function handleSearchResponse(response) {
 }
 
 /**
- * @param {import('youtubei.js').YTNodes.PlaylistVideo} video
+ * @param {import('youtubei.js').YTNodes.PlaylistVideo|import('youtubei.js').YTNodes.ReelItem} video
  */
 export function parseLocalPlaylistVideo(video) {
-  return {
-    videoId: video.id,
-    title: video.title.text,
-    author: video.author.name,
-    authorId: video.author.id,
-    lengthSeconds: isNaN(video.duration.seconds) ? '' : video.duration.seconds,
-    liveNow: video.is_live,
-    isUpcoming: video.is_upcoming,
-    premiereDate: video.upcoming
+  if (video.type === 'ReelItem') {
+    /** @type {import('youtubei.js').YTNodes.ReelItem} */
+    const short = video
+
+    // unfortunately the only place with the duration is the accesibility string
+    const duration = parseShortDuration(video.accessibility_label, short.id)
+
+    return {
+      type: 'video',
+      videoId: short.id,
+      title: short.title.text,
+      viewCount: parseLocalSubscriberCount(short.views.text),
+      lengthSeconds: isNaN(duration) ? '' : duration
+    }
+  } else {
+    /** @type {import('youtubei.js').YTNodes.PlaylistVideo} */
+    const video_ = video
+
+    return {
+      videoId: video_.id,
+      title: video_.title.text,
+      author: video_.author.name,
+      authorId: video_.author.id,
+      lengthSeconds: isNaN(video_.duration.seconds) ? '' : video_.duration.seconds,
+      liveNow: video_.is_live,
+      isUpcoming: video_.is_upcoming,
+      premiereDate: video_.upcoming
+    }
   }
 }