Merge branch 'development' into feature/playlist-2023-05

* development:
  Translated using Weblate (French)
  Avoid extending the VueI18n class as it won't exist in Vue 3 (FreeTubeApp#4046)
  Fix comment author focus outline being broken (FreeTubeApp#4041)
  Bump sass from 1.66.1 to 1.67.0 (FreeTubeApp#4052)
  Bump marked from 9.0.0 to 9.0.2 (FreeTubeApp#4054)
  Bump the babel group with 2 updates (FreeTubeApp#4050)
  Bump the eslint group with 1 update (FreeTubeApp#4051)
  Bump lefthook from 1.4.10 to 1.4.11 (FreeTubeApp#4055)
  Avoid extending the VueRouter class as it won't exist in Vue 3 (FreeTubeApp#4047)
  Fix focus disappearing when visiting the settings (FreeTubeApp#4042)
  Translated using Weblate (Catalan)
  Translated using Weblate (Bulgarian)
  Translated using Weblate (Croatian)
  Translated using Weblate (Hebrew)
  Translated using Weblate (Portuguese (Brazil))
  Translated using Weblate (German)
  Translated using Weblate (Hungarian)
  Translated using Weblate (Spanish)
  Translated using Weblate (Estonian)
  Translated using Weblate (Ukrainian)

package.json

@@ -62,7 +62,7 @@
     "autolinker": "^4.0.0",
     "electron-context-menu": "^3.6.1",
     "lodash.debounce": "^4.0.8",
-    "marked": "^9.0.0",
+    "marked": "^9.0.2",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "stylelint-use-logical-spec": "^5.0.0",
@@ -81,10 +81,10 @@
     "youtubei.js": "^6.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.17",
+    "@babel/core": "^7.22.20",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
     "@double-great/stylelint-a11y": "^2.0.2",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
@@ -103,18 +103,18 @@
     "eslint-plugin-unicorn": "^48.0.1",
     "eslint-plugin-vue": "^9.17.0",
     "eslint-plugin-vuejs-accessibility": "^2.2.0",
-    "eslint-plugin-yml": "^1.8.0",
+    "eslint-plugin-yml": "^1.9.0",
     "html-webpack-plugin": "^5.5.3",
     "js-yaml": "^4.1.0",
     "json-minimizer-webpack-plugin": "^4.0.0",
-    "lefthook": "^1.4.10",
+    "lefthook": "^1.4.11",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.29",
     "postcss-scss": "^4.0.8",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.1",
-    "sass": "^1.66.1",
+    "sass": "^1.67.0",
     "sass-loader": "^13.3.2",
     "stylelint": "^15.10.3",
     "stylelint-config-sass-guidelines": "^10.0.0",

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

@@ -8,6 +8,7 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtButton from '../ft-button/ft-button.vue'
 
 import debounce from 'lodash.debounce'
+import allLocales from '../../../../static/locales/activeLocales.json'
 import { showToast } from '../../helpers/utils'
 
 export default defineComponent({
@@ -108,7 +109,7 @@ export default defineComponent({
     localeOptions: function () {
       return [
         'system',
-        ...this.$i18n.allLocales
+        ...allLocales
       ]
     },
 

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

@@ -70,9 +70,8 @@
   font-weight: bold;
   font-size: 14px;
   margin-inline-start: 68px;
-  margin-block-start: 0px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  margin-block-start: 0;
+  word-wrap: break-word;
 }
 
 .commentOwner {
@@ -94,10 +93,10 @@
   margin-inline-start: 70px;
   word-wrap: break-word;
 }
+
 .commentPinned {
   font-weight: normal;
   font-size: 12px;
-  margin-block-end: 0;
   margin-block-start: 0;
   margin-inline-start: 68px;
   margin-block-end: 5px;
@@ -126,7 +125,7 @@
 .commentLikeCount {
   font-size: 11px;
   margin-inline-start: 70px;
-  margin-block-start: 0px;
+  margin-block-start: 0;
 }
 
 .commentHeartBadge {
@@ -187,7 +186,6 @@
 
 .getMoreComments {
   padding-block-end: 1em;
-
   text-align: center;
   text-decoration: underline;
   cursor: pointer;

src/renderer/i18n/index.js

@@ -4,54 +4,47 @@ import { createWebURL } from '../helpers/utils'
 // List of locales approved for use
 import activeLocales from '../../../static/locales/activeLocales.json'
 
-class CustomVueI18n extends VueI18n {
-  constructor(options) {
-    super(options)
-    this.allLocales = activeLocales
-  }
+Vue.use(VueI18n)
 
-  async loadLocale(locale) {
-    // don't need to load it if it's already loaded
-    if (this.availableLocales.includes(locale)) {
-      return
-    }
-    if (!this.allLocales.includes(locale)) {
-      console.error(`Unable to load unknown locale: "${locale}"`)
-    }
+const i18n = new VueI18n({
+  locale: 'en-US',
+  fallbackLocale: { default: 'en-US' }
+})
 
-    if (process.env.IS_ELECTRON && process.env.NODE_ENV !== 'development') {
-      const { readFile } = require('fs/promises')
-      const { promisify } = require('util')
-      const { brotliDecompress } = require('zlib')
-      const brotliDecompressAsync = promisify(brotliDecompress)
-      // locales are only compressed in our production Electron builds
-      try {
-        // decompress brotli compressed json file and then load it
-        // eslint-disable-next-line n/no-path-concat
-        const compressed = await readFile(`${__dirname}/static/locales/${locale}.json.br`)
-        const decompressed = await brotliDecompressAsync(compressed)
-        const data = JSON.parse(decompressed.toString())
-        this.setLocaleMessage(locale, data)
-      } catch (err) {
-        console.error(locale, err)
-      }
-    } else {
-      const url = createWebURL(`/static/locales/${locale}.json`)
+export async function loadLocale(locale) {
+  // don't need to load it if it's already loaded
+  if (i18n.availableLocales.includes(locale)) {
+    return
+  }
+  if (!activeLocales.includes(locale)) {
+    console.error(`Unable to load unknown locale: "${locale}"`)
+  }
 
-      const response = await fetch(url)
-      const data = await response.json()
-      this.setLocaleMessage(locale, data)
+  // locales are only compressed in our production Electron builds
+  if (process.env.IS_ELECTRON && process.env.NODE_ENV !== 'development') {
+    const { readFile } = require('fs/promises')
+    const { promisify } = require('util')
+    const { brotliDecompress } = require('zlib')
+    const brotliDecompressAsync = promisify(brotliDecompress)
+    try {
+      // decompress brotli compressed json file and then load it
+      // eslint-disable-next-line n/no-path-concat
+      const compressed = await readFile(`${__dirname}/static/locales/${locale}.json.br`)
+      const decompressed = await brotliDecompressAsync(compressed)
+      const data = JSON.parse(decompressed.toString())
+      i18n.setLocaleMessage(locale, data)
+    } catch (err) {
+      console.error(locale, err)
     }
+  } else {
+    const url = createWebURL(`/static/locales/${locale}.json`)
+
+    const response = await fetch(url)
+    const data = await response.json()
+    i18n.setLocaleMessage(locale, data)
   }
 }
 
-Vue.use(CustomVueI18n)
-
-const i18n = new CustomVueI18n({
-  locale: 'en-US',
-  fallbackLocale: { default: 'en-US' }
-})
-
-i18n.loadLocale('en-US')
+loadLocale('en-US')
 
 export default i18n

src/renderer/router/index.js

@@ -16,41 +16,9 @@ import Channel from '../views/Channel/Channel.vue'
 import Watch from '../views/Watch/Watch.vue'
 import Hashtag from '../views/Hashtag/Hashtag.vue'
 
-class CustomRouter extends Router {
-  push(location) {
-    // only navigates if the location is not identical to the current location
+Vue.use(Router)
 
-    const currentQueryUSP = new URLSearchParams(router.currentRoute.query)
-    let newPath = ''
-    let newQueryUSP = new URLSearchParams()
-
-    if (typeof location === 'string') {
-      if (location.includes('?')) {
-        const urlParts = location.split('?')
-        newPath = urlParts[0]
-        newQueryUSP = new URLSearchParams(urlParts[1])
-      } else {
-        newPath = location
-        // newQueryUSP already empty
-      }
-    } else {
-      newPath = location.path
-      newQueryUSP = new URLSearchParams(location.query)
-    }
-
-    const pathsAreDiff = router.currentRoute.path !== newPath
-    // Comparing `URLSearchParams` objects directly will always be different
-    const queriesAreDiff = newQueryUSP.toString() !== currentQueryUSP.toString()
-
-    if (pathsAreDiff || queriesAreDiff) {
-      return super.push(location)
-    }
-  }
-}
-
-Vue.use(CustomRouter)
-
-const router = new CustomRouter({
+const router = new Router({
   routes: [
     {
       path: '/',
@@ -188,4 +156,36 @@ const router = new CustomRouter({
   }
 })
 
+const originalPush = router.push.bind(router)
+
+router.push = (location) => {
+  // only navigates if the location is not identical to the current location
+
+  const currentQueryUSP = new URLSearchParams(router.currentRoute.query)
+  let newPath = ''
+  let newQueryUSP = new URLSearchParams()
+
+  if (typeof location === 'string') {
+    if (location.includes('?')) {
+      const urlParts = location.split('?')
+      newPath = urlParts[0]
+      newQueryUSP = new URLSearchParams(urlParts[1])
+    } else {
+      newPath = location
+      // newQueryUSP already empty
+    }
+  } else {
+    newPath = location.path
+    newQueryUSP = new URLSearchParams(location.query)
+  }
+
+  const pathsAreDiff = router.currentRoute.path !== newPath
+  // Comparing `URLSearchParams` objects directly will always be different
+  const queriesAreDiff = newQueryUSP.toString() !== currentQueryUSP.toString()
+
+  if (pathsAreDiff || queriesAreDiff) {
+    return originalPush(location)
+  }
+}
+
 export default router

src/renderer/store/modules/settings.js

@@ -1,4 +1,5 @@
-import i18n from '../../i18n/index'
+import i18n, { loadLocale } from '../../i18n/index'
+import allLocales from '../../../../static/locales/activeLocales.json'
 import { MAIN_PROFILE_ID, IpcChannels, SyncEvents } from '../../../constants'
 import { DBSettingHandlers } from '../../../datastores/handlers/index'
 import { getSystemLocale, showToast } from '../../helpers/utils'
@@ -306,7 +307,7 @@ const stateWithSideEffects = {
       if (value === 'system') {
         const systemLocaleName = (await getSystemLocale()).replace('-', '_') // ex: en_US
         const systemLocaleLang = systemLocaleName.split('_')[0] // ex: en
-        const targetLocaleOptions = i18n.allLocales.filter((locale) => { // filter out other languages
+        const targetLocaleOptions = allLocales.filter((locale) => { // filter out other languages
           const localeLang = locale.replace('-', '_').split('_')[0]
           return localeLang.includes(systemLocaleLang)
         }).sort((a, b) => {
@@ -340,7 +341,7 @@ const stateWithSideEffects = {
         }
       }
 
-      await i18n.loadLocale(targetLocale)
+      await loadLocale(targetLocale)
 
       i18n.locale = targetLocale
       await dispatch('getRegionData', {

src/renderer/views/Settings/Settings.js

@@ -48,7 +48,7 @@ export default defineComponent({
       return this.$store.getters.getSettingsPassword
     }
   },
-  mounted: function () {
+  created: function () {
     if (this.settingsPassword === '') {
       this.unlocked = true
     }

static/locales/bg.yaml

@@ -40,6 +40,9 @@ Global:
   Counts:
     Video Count: 1 видео | {count} видеа
     Channel Count: 1 канал | {count} канала
+    Subscriber Count: 1 абонат | {count} абоната
+    View Count: 1 преглед | {count} прегледа
+    Watching Count: 1 гледане | {count} гледания
 Version {versionNumber} is now available!  Click for more details: 'Версия {versionNumber}
   е вече налична! Щракнете за повече детайли'
 Download From Site: 'Сваляне от сайта'
@@ -889,6 +892,7 @@ Comments:
   Member: Член
   View {replyCount} replies: Преглед на {replyCount} отговора
   Hearted: Сърдечно
+  Subscribed: Абониран
 Up Next: 'Следващ'
 
 # Toast Messages