Commit for review and suggestions

#2476

package.json

@@ -77,8 +77,8 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2",
-    "youtubei.js": "^2.8.0",
-    "yt-channel-info": "^3.2.1"
+    "youtubei.js": "^2.9.0",
+    "yt-channel-info": "http://github.com/freetubeapp/yt-channel-info.git#1e80fc79bdc86355ca48425f03bc8a64d7451133"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

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

@@ -393,7 +393,7 @@ export default Vue.extend({
         this.publishedText = this.data.publishedText
       }
 
-      if (typeof (this.data.publishedText) !== 'undefined' && this.data.publishedText !== null && !this.isLive) {
+      if ('publishedText' in this.data && !!this.data.publishedText && !this.isLive) {
         // produces a string according to the template in the locales string
         this.uploadedTime = toLocalePublicationString({
           publishText: this.publishedText,

src/renderer/views/Channel/Channel.js

@@ -54,6 +54,7 @@ export default Vue.extend({
       lastSearchQuery: '',
       relatedChannels: [],
       latestVideos: [],
+      latestShorts: [],
       latestPlaylists: [],
       searchResults: [],
       shownElementList: [],
@@ -189,6 +190,7 @@ export default Vue.extend({
       this.searchPage = 2
       this.relatedChannels = []
       this.latestVideos = []
+      this.latestShorts = []
       this.latestPlaylists = []
       this.searchResults = []
       this.shownElementList = []
@@ -198,9 +200,11 @@ export default Vue.extend({
       if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') {
         this.getChannelInfoInvidious()
         this.getPlaylistsInvidious()
+        this.getShortsInvidious()
       } else {
         this.getChannelInfoLocal()
         this.getChannelVideosLocal()
+        this.getChannelShortsLocal()
         this.getPlaylistsLocal()
       }
     },
@@ -215,9 +219,11 @@ export default Vue.extend({
         case 'invidious':
           this.latestVideosPage = 1
           this.channelInvidiousNextPage()
+          this.getShortsInvidious()
           break
         default:
           this.getChannelVideosLocal()
+          this.getChannelShortsLocal()
       }
     },
 
@@ -247,9 +253,11 @@ export default Vue.extend({
     if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') {
       this.getChannelInfoInvidious()
       this.getPlaylistsInvidious()
+      this.getShortsInvidious()
     } else {
       this.getChannelInfoLocal()
       this.getChannelVideosLocal()
+      this.getChannelShortsLocal()
       this.getPlaylistsLocal()
     }
   },
@@ -352,6 +360,31 @@ export default Vue.extend({
         }
       })
     },
+    getChannelShortsLocal: function () {
+      this.isElementListLoading = true
+      const expectedId = this.originalId
+      ytch.getChannelShorts({ channelId: this.id, channelIdType: this.idType, sortBy: this.videoSortBy }).then((response) => {
+        if (expectedId !== this.originalId) {
+          return
+        }
+
+        this.latestShorts = response.items
+        this.videoContinuationString = response.continuation
+        this.isElementListLoading = false
+      }).catch((err) => {
+        console.error(err)
+        const errorMessage = this.$t('Local API Error (Click to copy)')
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
+          copyToClipboard(err)
+        })
+        if (this.backendPreference === 'local' && this.backendFallback) {
+          showToast(this.$t('Falling back to Invidious API'))
+          this.getChannelInfoInvidious()
+        } else {
+          this.isLoading = false
+        }
+      })
+    },
 
     channelLocalNextPage: function () {
       ytch.getChannelVideosMore({ continuation: this.videoContinuationString }).then((response) => {
@@ -509,6 +542,34 @@ export default Vue.extend({
       })
     },
 
+    getShortsInvidious: function () {
+      const payload = {
+        resource: `channels/${this.id}/shorts`,
+        id: '',
+        params: {
+          sort_by: this.playlistSortBy
+        }
+      }
+      this.invidiousAPICall(payload).then((response) => {
+        this.latestShorts = response.videos
+        this.videoContinuationString = response.continuation
+        this.isElementListLoading = false
+      }).catch((err) => {
+        console.error(err)
+        const errorMessage = this.$t('Invidious API Error (Click to copy)')
+        showToast(`${errorMessage}: ${err.responseJSON.error}`, 10000, () => {
+          copyToClipboard(err.responseJSON.error)
+        })
+        if (process.env.IS_ELECTRON && this.backendPreference === 'invidious' && this.backendFallback) {
+          showToast(this.$t('Falling back to Local API'))
+          this.getPlaylistsLocal()
+        } else {
+          this.isLoading = false
+        }
+      }
+      )
+    },
+
     getPlaylistsInvidiousMore: function () {
       if (this.playlistContinuationString === null) {
         console.warn('There are no more playlists available for this channel')

src/renderer/views/Channel/Channel.vue

@@ -92,6 +92,19 @@
             >
               {{ $t("Channel.Videos.Videos").toUpperCase() }}
             </div>
+            <div
+              id="shortsTab"
+              class="tab"
+              :class="(currentTab==='shorts')?'selectedTab':''"
+              role="tab"
+              aria-selected="true"
+              aria-controls="shortsPanel"
+              tabindex="0"
+              @click="changeTab('shorts')"
+              @keydown.left.right.enter.space="changeTab('shorts', $event)"
+            >
+              {{ $t("Channel.Shorts.Shorts").toUpperCase() }}
+            </div>
             <div
               id="playlistsTab"
               class="tab"
@@ -204,6 +217,20 @@
             {{ $t("Channel.Videos.This channel does not currently have any videos") }}
           </p>
         </ft-flex-box>
+        <ft-element-list
+          v-show="currentTab === 'shorts'"
+          id="shortsPanel"
+          :data="latestShorts"
+          role="tabpanel"
+          aria-labelledby="shortsTab"
+        />
+        <ft-flex-box
+          v-if="currentTab === 'shorts' && latestShorts.length === 0"
+        >
+          <p class="message">
+            {{ $t("Channel.Shorts.This channel does not currently have any shorts") }}
+          </p>
+        </ft-flex-box>
         <ft-element-list
           v-show="currentTab === 'playlists'"
           id="playlistPanel"

src/renderer/views/Watch/Watch.js

@@ -626,7 +626,7 @@ export default Vue.extend({
             this.enableLegacyFormat()
           }
 
-          if (result.storyboards?.type === 'PlayerStoryboardSpec') {
+          if (result.storyboards?.type === 'PlayerStoryboardSpec' && result.storyboards.boards.length >= 3) {
             await this.createLocalStoryboardUrls(result.storyboards.boards[2])
           }
         }

static/locales/en-US.yaml

@@ -512,6 +512,8 @@ Channel:
   Your search results have returned 0 results: Your search results have returned 0
     results
   Sort By: Sort By
+  Shorts:
+    Shorts: Shorts
   Videos:
     Videos: Videos
     This channel does not currently have any videos: This channel does not currently

yarn.lock

@@ -9184,9 +9184,8 @@ youtubei.js@^2.8.0:
     linkedom "^0.14.12"
     undici "^5.7.0"
 
-yt-channel-info@^3.2.1:
+"yt-channel-info@http://github.com/freetubeapp/yt-channel-info.git#1e80fc79bdc86355ca48425f03bc8a64d7451133":
   version "3.2.1"
-  resolved "https://registry.yarnpkg.com/yt-channel-info/-/yt-channel-info-3.2.1.tgz#7b8d5c335a54edd7f41f2db561ff23dd37f854a5"
-  integrity sha512-drGySe+MqoYMhZzkJpapG5pCfAEBSsCaOZXDzZz4nfQfYhXQGUU11IJ9HpDZmnari1vEWrUasjeu2hwZujZYmw==
+  resolved "http://github.com/freetubeapp/yt-channel-info.git#1e80fc79bdc86355ca48425f03bc8a64d7451133"
   dependencies:
     axios "^1.1.2"