Merge branch 'development' into custom-builds/current

* development:
  Translated using Weblate (Indonesian)
  Bump version number to v0.23.1
  Translated using Weblate (Portuguese (Brazil))
  Fix comment sorting when sort by newest is the default (FreeTubeApp#6702)
  ! Fix license data reading code causing some videos cannot be played (FreeTubeApp#6682)
  Translated using Weblate (Spanish)
  Update release.yml
  Update release.yml
  Bump version number to v0.23.0
  Add Creative Commons License to Description of Videos (FreeTubeApp#6614)
  Only refresh current trending tab (FreeTubeApp#6667)
  Translated using Weblate (Icelandic)
  Translated using Weblate (Chinese (Traditional Han script))
  Translated using Weblate (Arabic)

.github/workflows/release.yml

@@ -59,6 +59,10 @@ jobs:
       id: getPackageInfo
       uses: jaywcjlove/github-action-package@main
 
+    - name: Install libarchive-tools
+      if: startsWith(matrix.os, 'ubuntu')
+      run: sudo apt update; sudo apt -y install libarchive-tools; echo "Version Number ${{ toJson(job) }} ${{ toJson(needs) }}"
+
     - name: Build x64 with Node.js ${{ matrix.node-version}}
       if: contains(matrix.runtime, 'x64')
       run: yarn run build
@@ -76,7 +80,7 @@ jobs:
       run: |
         sudo apt install desktop-file-utils
         cd build
-        appimage="FreeTube-${{ steps.versionNumber.outputs.result }}.AppImage"
+        appimage="FreeTube-${{ steps.getPackageInfo.outputs.version }}.AppImage"
         wget "https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-x86_64.AppImage" -O ./appimagetool.AppImage
         chmod +x ./"$appimage" ./appimagetool.AppImage
         ./"$appimage" --appimage-extract && rm -f ./"$appimage"

package.json

@@ -2,7 +2,7 @@
   "name": "freetube",
   "productName": "FreeTube",
   "description": "A private YouTube client",
-  "version": "0.22.1",
+  "version": "0.23.1",
   "license": "AGPL-3.0-or-later",
   "main": "./dist/main.js",
   "private": true,

src/renderer/components/CommentSection/CommentSection.vue

@@ -363,6 +363,9 @@ const nextPageToken = shallowRef(null)
 // we need to react to new replies and showReplies being toggled
 const commentData = ref([])
 
+/** @type {import('youtubei.js').YT.Comments | undefined} */
+let localCommentsInstance
+
 /** @type {import('vue').ComputedRef<'local' | 'invidious'>} */
 const backendPreference = computed(() => {
   return store.getters.getBackendPreference
@@ -538,8 +541,13 @@ async function getCommentDataLocal(more = false) {
     let comments
     if (more) {
       comments = await nextPageToken.value.getContinuation()
+    } else if (localCommentsInstance) {
+      comments = await localCommentsInstance.applySort(sortNewest.value ? 'NEWEST_FIRST' : 'TOP_COMMENTS')
+      localCommentsInstance = comments
     } else {
-      comments = await getLocalComments(props.id, sortNewest.value)
+      comments = await getLocalComments(props.id)
+      sortNewest.value = comments.header?.sort_menu?.sub_menu_items?.[1].selected ?? false
+      localCommentsInstance = comments
     }
 
     const parsedComments = comments.contents
@@ -575,6 +583,7 @@ async function getCommentDataLocal(more = false) {
       nextPageToken.value = null
       isLoading.value = false
       showComments.value = true
+      localCommentsInstance = undefined
       return
     }
     // endregion No comment detection
@@ -585,6 +594,7 @@ async function getCommentDataLocal(more = false) {
       copyToClipboard(err)
     })
     if (backendFallback.value && backendPreference.value === 'local') {
+      localCommentsInstance = undefined
       showToast(t('Falling back to Invidious API'))
       getCommentDataInvidious()
     } else {

src/renderer/components/WatchVideoDescription/WatchVideoDescription.css

@@ -43,3 +43,7 @@
   max-block-size: 4lh;
   overflow: hidden;
 }
+
+.license {
+  margin-block: 1em;
+}

src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue

@@ -22,6 +22,12 @@
       @timestamp-event="onTimestamp"
       @click.native="expandDescriptionWithClick"
     />
+    <span
+      v-if="license && showFullDescription"
+      class="license"
+    >
+      {{ license }}
+    </span>
     <span
       v-if="showControls && showFullDescription"
       class="descriptionStatus"
@@ -51,6 +57,10 @@ const props = defineProps({
   descriptionHtml: {
     type: String,
     default: ''
+  },
+  license: {
+    type: String,
+    default: null,
   }
 })
 

src/renderer/helpers/api/local.js

@@ -291,11 +291,10 @@ export async function getLocalVideoInfo(id) {
 
 /**
  * @param {string} id
- * @param {boolean | undefined} sortByNewest
  */
-export async function getLocalComments(id, sortByNewest = false) {
+export async function getLocalComments(id) {
   const innertube = await createInnertube()
-  return innertube.getComments(id, sortByNewest ? 'NEWEST_FIRST' : 'TOP_COMMENTS')
+  return innertube.getComments(id)
 }
 
 // I know `type & type` is typescript syntax and not valid jsdoc but I couldn't get @extends or @augments to work

src/renderer/store/modules/utils.js

@@ -54,7 +54,12 @@ const state = {
   externalPlayerValues: [],
   externalPlayerCmdArguments: {},
   lastPopularRefreshTimestamp: '',
-  lastTrendingRefreshTimestamp: '',
+  lastTrendingRefreshTimestamp: {
+    default: '',
+    music: '',
+    gaming: '',
+    movies: ''
+  },
   subscriptionFirstAutoFetchRunData: {
     videos: false,
     liveStreams: false,
@@ -905,21 +910,24 @@ const mutations = {
     state.trendingCache[page] = value
   },
 
-  setLastTrendingRefreshTimestamp (state, timestamp) {
-    state.lastTrendingRefreshTimestamp = timestamp
+  /**
+   * @param {typeof state} state
+   * @param {{page: 'default' | 'music' | 'gaming' | 'movies', timestamp: Date}} param1
+   */
+  setLastTrendingRefreshTimestamp (state, { page, timestamp }) {
+    state.lastTrendingRefreshTimestamp[page] = timestamp
   },
 
   setLastPopularRefreshTimestamp (state, timestamp) {
     state.lastPopularRefreshTimestamp = timestamp
   },
 
-  clearTrendingCache(state) {
-    state.trendingCache = {
-      default: null,
-      music: null,
-      gaming: null,
-      movies: null
-    }
+  /**
+   * @param {typeof state} state
+   * @param {'default' | 'music' | 'gaming' | 'movies'} page
+   */
+  clearTrendingCache(state, page) {
+    state.trendingCache[page] = null
   },
 
   setCachedPlaylist(state, value) {

src/renderer/views/Trending/Trending.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <FtLoader
-      v-if="isLoading"
-      :fullscreen="true"
-    />
     <FtCard
-      v-else
       class="card"
     >
       <h2>
@@ -106,14 +101,21 @@
           {{ $t("Trending.Movies").toUpperCase() }}
         </div>
       </FtFlexBox>
-      <FtElementList
+      <div
         id="trendingPanel"
         role="tabpanel"
-        :data="shownResults"
-      />
+      >
+        <FtLoader
+          v-if="isLoading[currentTab]"
+        />
+        <FtElementList
+          v-else
+          :data="shownResults"
+        />
+      </div>
     </FtCard>
     <FtRefreshWidget
-      :disable-refresh="isLoading"
+      :disable-refresh="isLoading[currentTab]"
       :last-refresh-timestamp="lastTrendingRefreshTimestamp"
       :title="$t('Trending.Trending')"
       @click="getTrendingInfo(true)"
@@ -152,7 +154,7 @@ const backendFallback = computed(() => {
 })
 
 const lastTrendingRefreshTimestamp = computed(() => {
-  return getRelativeTimeFromDate(store.getters.getLastTrendingRefreshTimestamp, true)
+  return getRelativeTimeFromDate(store.getters.getLastTrendingRefreshTimestamp[currentTab.value], true)
 })
 
 /** @type {import('vue').ComputedRef<string>} */
@@ -165,7 +167,7 @@ const trendingCache = computed(() => {
   return store.getters.getTrendingCache
 })
 
-const isLoading = ref(false)
+const isLoading = ref({ default: false, music: false, gaming: false, movies: false })
 const shownResults = shallowRef([])
 
 /** @type {import('vue').Ref<'default' | 'music' | 'gaming' | 'movies'>} */
@@ -190,7 +192,7 @@ function getTrendingInfo(refresh = false) {
       trendingInstance = null
     }
 
-    store.commit('clearTrendingCache')
+    store.commit('clearTrendingCache', currentTab.value)
   }
 
   if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious') {
@@ -199,17 +201,17 @@ function getTrendingInfo(refresh = false) {
     getTrendingInfoLocal()
   }
 
-  store.commit('setLastTrendingRefreshTimestamp', new Date())
+  store.commit('setLastTrendingRefreshTimestamp', { page: currentTab.value, timestamp: new Date() })
 }
 
 async function getTrendingInfoLocal() {
-  isLoading.value = true
+  isLoading.value[currentTab.value] = true
 
   try {
     const { results, instance } = await getLocalTrending(region.value, currentTab.value, trendingInstance)
 
     shownResults.value = results
-    isLoading.value = false
+    isLoading.value[currentTab.value] = false
     trendingInstance = instance
 
     store.commit('setTrendingCache', { value: results, page: currentTab.value })
@@ -226,21 +228,21 @@ async function getTrendingInfoLocal() {
       showToast(t('Falling back to Invidious API'))
       getTrendingInfoInvidious()
     } else {
-      isLoading.value = false
+      isLoading.value[currentTab.value] = false
     }
   }
 }
 
 function getTrendingInfoInvidious() {
-  isLoading.value = true
+  isLoading.value[currentTab.value] = true
 
   getInvidiousTrending(currentTab.value, region.value).then((items) => {
     if (!items) {
       return
     }
 
     shownResults.value = items
-    isLoading.value = false
+    isLoading.value[currentTab.value] = false
     store.commit('setTrendingCache', { value: items, page: currentTab.value })
     nextTick(() => {
       focusTab(currentTab.value)
@@ -256,7 +258,7 @@ function getTrendingInfoInvidious() {
       showToast(t('Falling back to Local API'))
       getTrendingInfoLocal()
     } else {
-      isLoading.value = false
+      isLoading.value[currentTab.value] = false
     }
   })
 }
@@ -332,7 +334,7 @@ function keyboardShortcutHandler(event) {
   switch (event.key.toLowerCase()) {
     case 'f5':
     case KeyboardShortcuts.APP.SITUATIONAL.REFRESH:
-      if (!isLoading.value) {
+      if (!isLoading.value[currentTab.value]) {
         getTrendingInfo(true)
       }
       break

src/renderer/views/Watch/Watch.js

@@ -416,6 +416,7 @@ export default defineComponent({
         // extract localised title first and fall back to the not localised one
         this.videoTitle = result.primary_info?.title.text ?? result.basic_info.title
         this.videoViewCount = result.basic_info.view_count ?? (result.primary_info.view_count ? extractNumberFromString(result.primary_info.view_count.text) : null)
+        this.license = result.secondary_info.metadata.rows.find(element => element.title?.text === 'License')?.contents[0]?.text
 
         this.channelId = result.basic_info.channel_id ?? result.secondary_info.owner?.author.id
         this.channelName = result.basic_info.author ?? result.secondary_info.owner?.author.name

src/renderer/views/Watch/Watch.vue

@@ -169,6 +169,7 @@
         v-if="!isLoading && !hideVideoDescription"
         :description="videoDescription"
         :description-html="videoDescriptionHtml"
+        :license="license"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
         @timestamp-event="changeTimestamp"