Merge branch 'development' into feature/playlist-search-videos-in-one…

…-user-playlist-2

* development: (37 commits)
  Fix local API search erroring, because the default parameter values were not getting applied (#4704)
  Hide date and views separator on the watch page when views are hidden (#4697)
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Polish)
  Translated using Weblate (Estonian)
  Bump webpack from 5.90.1 to 5.90.3 (#4696)
  Bump sass from 1.70.0 to 1.71.0 (#4693)
  Bump electron from 28.2.2 to 28.2.3 (#4692)
  Bump the stylelint group with 1 update (#4691)
  Remove unused isLoading from ft-community-post (#4684)
  Include swiper version in CSS file name, for cache busting (#4685)
  Translated using Weblate (Chinese (Traditional))
  Fix local API erroring when the view count is missing on the channel shorts tab (#4689)
  Translated using Weblate (Croatian)
  Translated using Weblate (Polish)
  Fix Hungarian Locale Name (#4686)
  Translated using Weblate (Dutch)
  Translated using Weblate (French)
  Translated using Weblate (Spanish)
  Bump marked from 11.2.0 to 12.0.0 (#4638)
  ...

_scripts/webpack.renderer.config.js

@@ -11,6 +11,8 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 const isDevMode = process.env.NODE_ENV === 'development'
 
+const { version: swiperVersion } = JSON.parse(readFileSync(path.join(__dirname, '../node_modules/swiper/package.json')))
+
 const processLocalesPlugin = new ProcessLocalesPlugin({
   compress: !isDevMode,
   inputDir: path.join(__dirname, '../static/locales'),
@@ -118,7 +120,8 @@ const config = {
       'process.env.IS_ELECTRON': true,
       'process.env.IS_ELECTRON_MAIN': false,
       'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames),
-      'process.env.GEOLOCATION_NAMES': JSON.stringify(readdirSync(path.join(__dirname, '..', 'static', 'geolocations')).map(filename => filename.replace('.json', '')))
+      'process.env.GEOLOCATION_NAMES': JSON.stringify(readdirSync(path.join(__dirname, '..', 'static', 'geolocations')).map(filename => filename.replace('.json', ''))),
+      'process.env.SWIPER_VERSION': `'${swiperVersion}'`
     }),
     new HtmlWebpackPlugin({
       excludeChunks: ['processTaskWorker'],
@@ -137,7 +140,7 @@ const config = {
       patterns: [
         {
           from: path.join(__dirname, '../node_modules/swiper/modules/{a11y,navigation,pagination}-element.css').replaceAll('\\', '/'),
-          to: 'swiper.css',
+          to: `swiper-${swiperVersion}.css`,
           context: path.join(__dirname, '../node_modules/swiper/modules'),
           transformAll: (assets) => {
             return Buffer.concat(assets.map(asset => asset.data))

_scripts/webpack.web.config.js

@@ -11,6 +11,8 @@ const ProcessLocalesPlugin = require('./ProcessLocalesPlugin')
 
 const isDevMode = process.env.NODE_ENV === 'development'
 
+const { version: swiperVersion } = JSON.parse(fs.readFileSync(path.join(__dirname, '../node_modules/swiper/package.json')))
+
 const config = {
   name: 'web',
   mode: process.env.NODE_ENV,
@@ -114,6 +116,7 @@ const config = {
     new webpack.DefinePlugin({
       'process.env.IS_ELECTRON': false,
       'process.env.IS_ELECTRON_MAIN': false,
+      'process.env.SWIPER_VERSION': `'${swiperVersion}'`,
 
       // video.js' vhs-utils supports both atob() in web browsers and Buffer in node
       // As the FreeTube web build only runs in web browsers, we can override their check for atob() here: https://github.com/videojs/vhs-utils/blob/main/src/decode-b64-to-uint8-array.js#L3
@@ -145,7 +148,7 @@ const config = {
       patterns: [
         {
           from: path.join(__dirname, '../node_modules/swiper/modules/{a11y,navigation,pagination}-element.css').replaceAll('\\', '/'),
-          to: 'swiper.css',
+          to: `swiper-${swiperVersion}.css`,
           context: path.join(__dirname, '../node_modules/swiper/modules'),
           transformAll: (assets) => {
             return Buffer.concat(assets.map(asset => asset.data))

package.json

@@ -62,7 +62,7 @@
     "autolinker": "^4.0.0",
     "electron-context-menu": "^3.6.1",
     "lodash.debounce": "^4.0.8",
-    "marked": "^11.2.0",
+    "marked": "^12.0.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "swiper": "^11.0.6",
@@ -84,12 +84,12 @@
     "@babel/eslint-parser": "^7.23.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.23.9",
-    "@double-great/stylelint-a11y": "^3.0.1",
+    "@double-great/stylelint-a11y": "^3.0.2",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
-    "electron": "^28.2.2",
+    "electron": "^28.2.3",
     "electron-builder": "^24.9.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -113,7 +113,7 @@
     "postcss-scss": "^4.0.9",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.5",
-    "sass": "^1.70.0",
+    "sass": "^1.71.0",
     "sass-loader": "^14.1.0",
     "stylelint": "^16.2.1",
     "stylelint-config-sass-guidelines": "^11.0.0",
@@ -124,7 +124,7 @@
     "vue-devtools": "^5.1.4",
     "vue-eslint-parser": "^9.4.2",
     "vue-loader": "^15.10.0",
-    "webpack": "^5.90.1",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-watch-external-files-plugin": "^3.0.0",

src/renderer/components/data-settings/data-settings.js

@@ -1133,7 +1133,7 @@ export default defineComponent({
           })
 
           if (process.env.IS_ELECTRON && this.backendFallback && this.backendPreference === 'invidious') {
-            showToast(this.$t('Falling back to the local API'))
+            showToast(this.$t('Falling back to Local API'))
             resolve(this.getChannelInfoLocal(channelId))
           } else {
             resolve([])

src/renderer/components/ft-age-restricted/ft-age-restricted.js

@@ -3,10 +3,14 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'FtAgeRestricted',
   props: {
-    contentTypeString: {
-      type: String,
-      required: true
-    }
+    isChannel: {
+      type: Boolean,
+      default: false,
+    },
+    isVideo: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     emoji: function () {
@@ -15,8 +19,11 @@ export default defineComponent({
     },
 
     restrictedMessage: function () {
-      const contentType = this.$t('Age Restricted.Type.' + this.contentTypeString)
-      return this.$t('Age Restricted.This {videoOrPlaylist} is age restricted', { videoOrPlaylist: contentType })
+      if (this.isChannel) {
+        return this.$t('Age Restricted.This channel is age restricted')
+      }
+
+      return this.$t('Age Restricted.This video is age restricted:')
     }
   }
 })

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

@@ -40,7 +40,6 @@ export default defineComponent({
       voteCount: '',
       postContent: '',
       commentCount: '',
-      isLoading: true,
       author: '',
       authorId: '',
     }
@@ -73,7 +72,7 @@ export default defineComponent({
         injectStylesUrls: [
           // This file is created with the copy webpack plugin in the web and renderer webpack configs.
           // If you add more modules, please remember to add their CSS files to the list in webpack config files.
-          createWebURL('/swiper.css')
+          createWebURL(`/swiper-${process.env.SWIPER_VERSION}.css`)
         ],
 
         a11y: true,
@@ -132,7 +131,6 @@ export default defineComponent({
       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
-      this.isLoading = false
     },
 
     getBestQualityImage(imageArray) {

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

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="!isLoading"
     class="ft-list-post ft-list-item outside"
     :appearance="appearance"
     :class="{ list: listType === 'list', grid: listType === 'grid' }"

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

@@ -152,7 +152,7 @@
       <ft-icon-button
         class="optionsButton"
         :icon="['fas', 'ellipsis-v']"
-        title="More Options"
+        :title="$t('Video.More Options')"
         theme="base-no-default"
         :size="16"
         :use-shadow="false"

src/renderer/components/subscriptions-community/subscriptions-community.js

@@ -200,7 +200,7 @@ export default defineComponent({
             copyToClipboard(err)
           })
           if (process.env.IS_ELECTRON && this.backendPreference === 'invidious' && this.backendFallback) {
-            showToast(this.$t('Falling back to the local API'))
+            showToast(this.$t('Falling back to Local API'))
             resolve(this.getChannelPostsLocal(channel))
           } else {
             resolve([])

src/renderer/components/subscriptions-live/subscriptions-live.js

@@ -282,7 +282,7 @@ export default defineComponent({
               break
             case 1:
               if (process.env.IS_ELECTRON && this.backendFallback) {
-                showToast(this.$t('Falling back to the local API'))
+                showToast(this.$t('Falling back to Local API'))
                 resolve(this.getChannelLiveLocal(channel, failedAttempts + 1))
               } else {
                 resolve([])
@@ -321,7 +321,7 @@ export default defineComponent({
             return this.getChannelLiveInvidious(channel, failedAttempts + 1)
           case 1:
             if (process.env.IS_ELECTRON && this.backendFallback) {
-              showToast(this.$t('Falling back to the local API'))
+              showToast(this.$t('Falling back to Local API'))
               return this.getChannelLiveLocalRSS(channel, failedAttempts + 1)
             } else {
               return []

src/renderer/components/subscriptions-shorts/subscriptions-shorts.js

@@ -213,7 +213,7 @@ export default defineComponent({
         switch (failedAttempts) {
           case 0:
             if (process.env.IS_ELECTRON && this.backendFallback) {
-              showToast(this.$t('Falling back to the local API'))
+              showToast(this.$t('Falling back to Local API'))
               return this.getChannelShortsLocal(channel, failedAttempts + 1)
             } else {
               return []

src/renderer/components/subscriptions-videos/subscriptions-videos.js

@@ -279,7 +279,7 @@ export default defineComponent({
               break
             case 1:
               if (process.env.IS_ELECTRON && this.backendFallback) {
-                showToast(this.$t('Falling back to the local API'))
+                showToast(this.$t('Falling back to Local API'))
                 resolve(this.getChannelVideosLocalScraper(channel, failedAttempts + 1))
               } else {
                 resolve([])
@@ -319,7 +319,7 @@ export default defineComponent({
             return this.getChannelVideosInvidiousScraper(channel, failedAttempts + 1)
           case 1:
             if (process.env.IS_ELECTRON && this.backendFallback) {
-              showToast(this.$t('Falling back to the local API'))
+              showToast(this.$t('Falling back to Local API'))
               return this.getChannelVideosLocalRSS(channel, failedAttempts + 1)
             } else {
               return []

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -293,7 +293,7 @@ export default defineComponent({
           copyToClipboard(err)
         })
         if (process.env.IS_ELECTRON && this.backendFallback && this.backendPreference === 'invidious') {
-          showToast(this.$t('Falling back to local API'))
+          showToast(this.$t('Falling back to Local API'))
           this.getCommentDataLocal()
         } else {
           this.isLoading = false

src/renderer/components/watch-video-comments/watch-video-comments.vue

@@ -268,7 +268,7 @@
       v-else-if="showComments && !isLoading"
     >
       <h3 class="noCommentMsg">
-        {{ $t("There are no comments available for this video") }}
+        {{ $t("Comments.There are no comments available for this video") }}
       </h3>
     </div>
     <h4

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -9,7 +9,10 @@
     </div>
     <div class="videoMetrics">
       <div class="datePublishedAndViewCount">
-        {{ publishedString }} {{ dateString }} • {{ parsedViewCount }}
+        {{ publishedString }} {{ dateString }}
+        <template v-if="!hideVideoViews">
+          • {{ parsedViewCount }}
+        </template>
       </div>
       <div
         v-if="!hideVideoLikesAndDislikes"

src/renderer/helpers/api/local.js

@@ -35,23 +35,23 @@ const TRACKING_PARAM_NAMES = [
  * @param {boolean} options.generateSessionLocally generate the session locally or let YouTube generate it (local is faster, remote is more accurate)
  * @returns the Innertube instance
  */
-async function createInnertube(options = { withPlayer: false, location: undefined, safetyMode: false, clientType: undefined, generateSessionLocally: true }) {
+async function createInnertube({ withPlayer = false, location = undefined, safetyMode = false, clientType = undefined, generateSessionLocally = true } = {}) {
   let cache
-  if (options.withPlayer) {
+  if (withPlayer) {
     const userData = await getUserDataPath()
     cache = new PlayerCache(join(userData, 'player_cache'))
   }
 
   return await Innertube.create({
-    retrieve_player: !!options.withPlayer,
-    location: options.location,
-    enable_safety_mode: !!options.safetyMode,
-    client_type: options.clientType,
+    retrieve_player: !!withPlayer,
+    location: location,
+    enable_safety_mode: !!safetyMode,
+    client_type: clientType,
 
     // use browser fetch
     fetch: (input, init) => fetch(input, init),
     cache,
-    generate_session_locally: !!options.generateSessionLocally
+    generate_session_locally: !!generateSessionLocally
   })
 }
 
@@ -539,7 +539,7 @@ export function parseLocalChannelShorts(shorts, channelId, channelName) {
       title: short.title.text,
       author: channelName,
       authorId: channelId,
-      viewCount: parseLocalSubscriberCount(short.views.text),
+      viewCount: short.views.isEmpty() ? null : parseLocalSubscriberCount(short.views.text),
       lengthSeconds: ''
     }
   })

src/renderer/store/modules/invidious.js

@@ -39,22 +39,21 @@ const actions = {
         console.error(err)
       }
     }
+
     // If the invidious instance fetch isn't returning anything interpretable
     if (instances.length === 0) {
       // Fallback: read from static file
       const fileName = 'invidious-instances.json'
       /* eslint-disable-next-line n/no-path-concat */
       const fileLocation = process.env.NODE_ENV === 'development' ? './static/' : `${__dirname}/static/`
       const filePath = `${fileLocation}${fileName}`
-      if (!process.env.IS_ELECTRON) {
-        console.warn('reading static file for invidious instances')
-        const fileData = process.env.IS_ELECTRON ? await fs.readFile(filePath, 'utf8') : await (await fetch(createWebURL(filePath))).text()
-        instances = JSON.parse(fileData).filter(e => {
-          return process.env.IS_ELECTRON || e.cors
-        }).map(e => {
-          return e.url
-        })
-      }
+      console.warn('reading static file for invidious instances')
+      const fileData = process.env.IS_ELECTRON ? await fs.readFile(filePath, 'utf8') : await (await fetch(createWebURL(filePath))).text()
+      instances = JSON.parse(fileData).filter(e => {
+        return process.env.IS_ELECTRON || e.cors
+      }).map(e => {
+        return e.url
+      })
     }
     commit('setInvidiousInstancesList', instances)
   },

src/renderer/store/modules/settings.js

@@ -289,7 +289,7 @@ const state = {
   videoPlaybackRateInterval: 0.25,
   downloadAskPath: true,
   downloadFolderPath: '',
-  downloadBehavior: 'download',
+  downloadBehavior: 'open',
   enableScreenshot: false,
   screenshotFormat: 'png',
   screenshotQuality: 95,

src/renderer/views/Channel/Channel.vue

@@ -417,7 +417,7 @@
     <ft-age-restricted
       v-else-if="!isLoading && (!isFamilyFriendly && showFamilyFriendlyOnly)"
       class="ageRestricted"
-      :content-type-string="'Channel'"
+      :is-channel="true"
     />
   </div>
 </template>

src/renderer/views/Playlist/Playlist.js

@@ -284,7 +284,7 @@ export default defineComponent({
         const dateString = new Date(result.updated * 1000)
         this.lastUpdated = dateString.toLocaleDateString(this.currentLocale, { year: 'numeric', month: 'short', day: 'numeric' })
 
-        this.allPlaylistItems = result.videos
+        this.playlistItems = result.videos
 
         this.isLoading = false
       }).catch((err) => {

src/renderer/views/Watch/Watch.vue

@@ -87,7 +87,7 @@
     <ft-age-restricted
       v-if="(!isLoading && !isFamilyFriendly && showFamilyFriendlyOnly)"
       class="ageRestricted"
-      :content-type-string="'Video'"
+      :is-video="true"
     />
     <div
       v-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"