Merge branch 'development' into feature/subscription-cache

* development: (24 commits)
  Add ability to see comment replies of community posts through invidious (FreeTubeApp#5589)
  Bump electron-builder from 24.13.3 to 25.0.5 (FreeTubeApp#5674)
  Change Sponsorblock Default Category Colors (FreeTubeApp#5686)
  Proxy live streams when "Proxy Videos Through Invidious" is enabled (FreeTubeApp#5649)
  Translated using Weblate (Belarusian)
  Translated using Weblate (Hebrew)
  Fix saving Invidious thumbnail URLs for subscriptions (FreeTubeApp#5662)
  Bump peter-evans/create-pull-request from 6 to 7 (FreeTubeApp#5676)
  Bump webpack-dev-server from 5.0.4 to 5.1.0 (FreeTubeApp#5672)
  Use auto-generated playlists for the videos tab on artist topic channels (FreeTubeApp#5661)
  Rewrite locale file updating to be more Vue 3 friendly (FreeTubeApp#5660)
  Bump sass from 1.77.8 to 1.78.0 (FreeTubeApp#5673)
  Bump electron from 32.0.1 to 32.0.2 (FreeTubeApp#5671)
  Bump marked from 14.1.0 to 14.1.2 (FreeTubeApp#5670)
  Bump postcss from 8.4.44 to 8.4.45 in the stylelint group (FreeTubeApp#5669)
  Bump the eslint group with 2 updates (FreeTubeApp#5668)
  Cleanup a few vue-i18n usages (FreeTubeApp#5663)
  Use nextTick instead of setTimeout to wait until Vue has rendered changes (FreeTubeApp#5664)
  Translated using Weblate (Estonian)
  Translated using Weblate (Belarusian)
  ...

# Conflicts:
#	src/renderer/components/ft-community-post/ft-community-post.js
#	src/renderer/helpers/api/local.js

Author: PikachuEXE

.github/workflows/calibreapp-image-actions.yml

@@ -20,7 +20,7 @@ jobs:
           compressOnly: true
       - name: Create New Pull Request If Needed
         if: steps.calibre.outputs.markdown != ''
-        uses: peter-evans/create-pull-request@v6
+        uses: peter-evans/create-pull-request@v7
         with:
           title: Compressed Images Nightly
           branch-suffix: timestamp

_scripts/ProcessLocalesPlugin.js

@@ -40,17 +40,17 @@ class ProcessLocalesPlugin {
     /** @type {(updatedLocales: [string, string][]) => void|null} */
     this.notifyLocaleChange = null
 
-    if (this.hotReload) {
-      this.hotReloadScript = readFileSync(`${__dirname}/_hotReloadLocalesScript.js`, 'utf-8')
-    }
-
     this.loadLocales()
   }
 
   /** @param {import('webpack').Compiler} compiler  */
   apply(compiler) {
     const { CachedSource, RawSource } = compiler.webpack.sources;
-    const { Compilation } = compiler.webpack
+    const { Compilation, DefinePlugin } = compiler.webpack
+
+    new DefinePlugin({
+      'process.env.HOT_RELOAD_LOCALES': this.hotReload
+    }).apply(compiler)
 
     compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
       const IS_DEV_SERVER = !!compiler.watching
@@ -136,19 +136,6 @@ class ProcessLocalesPlugin {
         compilation.fileDependencies.addAll(this.filePaths)
       }
     })
-
-    compiler.hooks.emit.tap(PLUGIN_NAME, (compilation) => {
-      if (this.hotReload) {
-        // Find generated JavaScript output file (e.g. renderer.js or web.js)
-        // and inject the code snippet that listens for locale updates and replaces vue-i18n's locales
-
-        /** @type {string} */
-        const filename = [...[...compilation.chunks][0].files]
-          .find(file => file.endsWith('.js'))
-
-        compilation.assets[filename]._source._children.push(`\n${this.hotReloadScript}`)
-      }
-    })
   }
 
   loadLocales() {

_scripts/_hotReloadLocalesScript.js

@@ -63,7 +63,7 @@
     "autolinker": "^4.0.0",
     "electron-context-menu": "^4.0.4",
     "lodash.debounce": "^4.0.8",
-    "marked": "^14.1.0",
+    "marked": "^14.1.2",
     "path-browserify": "^1.0.1",
     "portal-vue": "^2.1.7",
     "process": "^0.11.10",
@@ -87,18 +87,18 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "electron": "^32.0.1",
-    "electron-builder": "^24.13.3",
+    "electron": "^32.0.2",
+    "electron-builder": "^25.0.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-n": "^17.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-unicorn": "^55.0.0",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-vue": "^9.28.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "eslint-plugin-yml": "^1.14.0",
     "html-webpack-plugin": "^5.6.0",
@@ -107,11 +107,11 @@
     "lefthook": "^1.7.15",
     "mini-css-extract-plugin": "^2.9.1",
     "npm-run-all2": "^6.2.2",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.45",
     "postcss-scss": "^4.0.9",
     "prettier": "^2.8.8",
     "rimraf": "^6.0.1",
-    "sass": "^1.77.8",
+    "sass": "^1.78.0",
     "sass-loader": "^16.0.1",
     "stylelint": "^16.9.0",
     "stylelint-config-sass-guidelines": "^12.0.0",
@@ -124,7 +124,7 @@
     "vue-loader": "^15.10.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4",
+    "webpack-dev-server": "^5.1.0",
     "yaml-eslint-parser": "^1.2.3"
   }
 }

package.json

@@ -454,6 +454,17 @@ export default defineComponent({
             break
           }
 
+          case 'post': {
+            const { postId, query } = result
+
+            openInternalPath({
+              path: `/post/${postId}`,
+              query,
+              doCreateNewWindow
+            })
+            break
+          }
+
           case 'channel': {
             const { channelId, subPath, url } = result
 

src/renderer/App.js

@@ -10,6 +10,7 @@ import { A11y, Navigation, Pagination } from 'swiper/modules'
 import {
   createWebURL,
   deepCopy,
+  formatNumber,
   getRelativeTimeFromDate,
   toLocalePublicationString,
 } from '../../helpers/utils'
@@ -34,17 +35,23 @@ export default defineComponent({
     hideForbiddenTitles: {
       type: Boolean,
       default: true
-    }
+    },
+    singlePost: {
+      type: Boolean,
+      default: false
+    },
   },
   data: function () {
     return {
       postText: '',
       postId: '',
       authorThumbnails: null,
       publishedText: '',
-      voteCount: '',
+      voteCount: 0,
+      formattedVoteCount: '',
       postContent: '',
-      commentCount: '',
+      commentCount: null,
+      formattedCommentCount: '',
       author: '',
       authorId: '',
     }
@@ -61,6 +68,16 @@ export default defineComponent({
 
     hideVideo() {
       return this.forbiddenTitles.some((text) => this.data.postContent.content.title?.toLowerCase().includes(text.toLowerCase()))
+    },
+
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
+    backendFallback: function () {
+      return this.$store.getters.getBackendFallback
+    },
+    isInvidiousAllowed: function() {
+      return this.backendPreference === 'invidious' || this.backendFallback
     }
   },
   created: function () {
@@ -132,7 +149,9 @@ export default defineComponent({
         isRSS: this.data.isRSS
       })
       this.voteCount = this.data.voteCount
+      this.formattedVoteCount = formatNumber(this.voteCount)
       this.commentCount = this.data.commentCount
+      this.formattedCommentCount = formatNumber(this.commentCount)
       this.type = (this.data.postContent !== null && this.data.postContent !== undefined) ? this.data.postContent.type : 'text'
       this.author = this.data.author
       this.authorId = this.data.authorId

src/renderer/components/ft-community-post/ft-community-post.js

@@ -59,6 +59,12 @@
   white-space: pre-wrap;
 }
 
+.commentsLink {
+  color: var(--primary-text-color);
+  text-decoration: none;
+  font-weight: bold;
+}
+
 .bottomSection {
   color: var(--tertiary-text-color);
   display: block;

src/renderer/components/ft-community-post/ft-community-post.scss

@@ -115,11 +115,42 @@
     <div
       class="bottomSection"
     >
-      <span class="likeCount"><font-awesome-icon
-        class="thumbs-up-icon"
-        :icon="['fas', 'thumbs-up']"
-      /> {{ voteCount }}</span>
-      <span class="commentCount">
+      <span
+        class="likeCount"
+        :title="$tc('Global.Counts.Like Count', voteCount, {count: formattedVoteCount})"
+        :aria-label="$tc('Global.Counts.Like Count', voteCount, {count: formattedVoteCount})"
+      >
+        <font-awesome-icon
+          class="thumbs-up-icon"
+          :icon="['fas', 'thumbs-up']"
+          aria-hidden="true"
+        /> {{ formattedVoteCount }}</span>
+      <router-link
+        v-if="isInvidiousAllowed && !singlePost"
+        :to="{
+          path: `/post/${postId}`,
+          query: authorId ? { authorId } : undefined
+        }"
+        class="commentsLink"
+        :aria-label="$t('Channel.Community.View Full Post')"
+      >
+        <span
+          class="commentCount"
+          :title="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+          :aria-label="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+        >
+          <font-awesome-icon
+            class="comment-count-icon"
+            :icon="['fas', 'comment']"
+            aria-hidden="true"
+          /> {{ formattedCommentCount }}</span>
+      </router-link>
+      <span
+        v-else-if="commentCount != null"
+        class="commentCount"
+        :title="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+        :aria-label="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+      >
         <font-awesome-icon
           class="comment-count-icon"
           :icon="['fas', 'comment']"

src/renderer/components/ft-community-post/ft-community-post.vue

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
@@ -102,7 +102,7 @@ export default defineComponent({
         if (this.dropdownShown && !this.useModal) {
           // wait until the dropdown is visible
           // then focus it so we can hide it automatically when it loses focus
-          setTimeout(() => {
+          nextTick(() => {
             this.$refs.dropdown?.focus()
           })
         }

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -207,6 +207,7 @@ export default defineComponent({
             case 'search':
             case 'channel':
             case 'hashtag':
+            case 'post':
               isYoutubeLink = true
               break
 

src/renderer/components/ft-input/ft-input.js

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -53,7 +53,7 @@ export default defineComponent({
       if (this.profileListShown) {
         // wait until the profile list is visible
         // then focus it so we can hide it automatically when it loses focus
-        setTimeout(() => {
+        nextTick(() => {
           this.$refs.profileList?.$el?.focus()
         })
       }

src/renderer/components/ft-profile-selector/ft-profile-selector.js

@@ -38,6 +38,7 @@ const HTTP_IN_HEX = 0x68747470
 const USE_OVERFLOW_MENU_WIDTH_THRESHOLD = 600
 
 const RequestType = shaka.net.NetworkingEngine.RequestType
+const AdvancedRequestType = shaka.net.NetworkingEngine.AdvancedRequestType
 const TrackLabelFormat = shaka.ui.Overlay.TrackLabelFormat
 
 /** @type {Map<string, string>} */
@@ -1232,7 +1233,47 @@ export default defineComponent({
             response.data = new TextEncoder().encode(cleaned).buffer
           }
         }
+      } else if (type === RequestType.MANIFEST && context.type === AdvancedRequestType.MEDIA_PLAYLIST) {
+        const url = new URL(response.uri)
+
+        // Fixes proxied HLS manifests, as Invidious replaces the path parameters with query parameters,
+        // so shaka-player isn't able to infer the mime type from the `/file/seg.ts` part like it does for non-proxied HLS manifests.
+        // Shaka-player does attempt to detect it with HEAD request but the `Content-Type` header is `application/octet-stream`,
+        // which still doesn't tell shaka-player how to handle the stream because that's the equivalent of saying "binary data".
+        if (url.searchParams.has('local')) {
+          const stringBody = new TextDecoder().decode(response.data)
+          const fixed = stringBody.replaceAll(/https?:\/\/.+$/gm, hlsProxiedUrlReplacer)
+
+          response.data = new TextEncoder().encode(fixed).buffer
+        }
+      }
+    }
+
+    /**
+     * @param {string} match
+     */
+    function hlsProxiedUrlReplacer(match) {
+      const url = new URL(match)
+
+      let fileValue
+      for (const [key, value] of url.searchParams) {
+        if (key === 'file') {
+          fileValue = value
+          continue
+        } else if (key === 'hls_chunk_host') {
+          // Add the host parameter so some Invidious instances stop complaining about the missing host parameter
+          // Replace .c.youtube.com with .googlevideo.com as the built-in Invidious video proxy only accepts host parameters with googlevideo.com
+          url.pathname += `/host/${encodeURIComponent(value.replace('.c.youtube.com', '.googlevideo.com'))}`
+        }
+
+        url.pathname += `/${key}/${encodeURIComponent(value)}`
       }
+
+      // This has to be right at the end so that shaka-player can read the file extension
+      url.pathname += `/file/${encodeURIComponent(fileValue)}`
+
+      url.search = ''
+      return url.toString()
     }
 
     // #endregion request/response filters

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import FtToastEvents from './ft-toast-events.js'
 
 let id = 0
@@ -38,7 +38,7 @@ export default defineComponent({
         id: id++
       }
       toast.timeout = setTimeout(this.close, time || 3000, toast)
-      setTimeout(() => { toast.isOpen = true })
+      nextTick(() => { toast.isOpen = true })
       if (this.toasts.length > 4) {
         this.remove(0)
       }

src/renderer/components/ft-toast/ft-toast.js

@@ -173,12 +173,8 @@ export default defineComponent({
             let thumbnailUrl = post.authorThumbnails?.[0]?.url
 
             if (name || thumbnailUrl) {
-              if (thumbnailUrl) {
-                if (thumbnailUrl.startsWith('//')) {
-                  thumbnailUrl = 'https:' + thumbnailUrl
-                } else if (thumbnailUrl.startsWith(`${this.currentInvidiousInstanceUrl}/ggpht`)) {
-                  thumbnailUrl = thumbnailUrl.replace(`${this.currentInvidiousInstanceUrl}/ggpht`, 'https://yt3.googleusercontent.com')
-                }
+              if (thumbnailUrl?.startsWith('//')) {
+                thumbnailUrl = 'https:' + thumbnailUrl
               }
 
               subscriptionUpdates.push({