Update to Vue 3 (#8094)

* Update to Vue 3

* Fix toasts and removing videos from playlists

* Fix duplicate app ID

* Simplify aria-selected handling now that false doesn't remove attributes

* Fix various errors

* Fix toasts and hiding watched videos

* Update vue-router to 4.6.3

---------

Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com>

CONTRIBUTING.md

@@ -16,9 +16,9 @@ Please follow these guidelines before sending your pull request and making contr
 * Stick to a similar style of code already in the project.  Please look at current code to get an idea on how to do this.
 * Follow [ES6](https://rse.github.io/es6-features/) standards in your code. Ex: Use `let` and `const` instead of `var`. Do not use `function(response){//code}` for callbacks, use `(response) => {//code}`.
 * Comment your code when necessary.  Follow the [JavaScript Documentation and Comments Standard](https://www.drupal.org/docs/develop/standards/javascript/javascript-api-documentation-and-comment-standards) for functions.
-* Please follow proper Vue structure when creating new code / components.  Use existing code as well as the [Vue.js Guide](https://vuejs.org/v2/guide/) for reference.
+* Please follow proper Vue structure when creating new code / components.  Use existing code as well as the [Vue.js Guide](https://vuejs.org/guide/introduction.html) for reference.
 * Please test your code.  Make sure new features work as well as existing core features such as watching videos or loading subscriptions.  New features need to work with both the Local API as well as the Invidious API
-* Please make sure your code does not violate any standards set by our linter.  It's up to you to make fixes whenever necessary.  You can run `npm run lint` to check locally and `npm run lint-fix` to automatically fix smaller issues.
+* Please make sure your code does not violate any standards set by our linter.  It's up to you to make fixes whenever necessary.  You can run `yarn run lint` to check locally and `yarn run lint-fix` to automatically fix smaller issues.
 * Please limit the amount of Node Modules that you introduce into the project.  Only include them when **absolutely necessary** for your code to work (Ex: Using nedb for databases) or if a module provides similar functionality to what you are trying to achieve (Ex: Using autolinker to create links to outside URLs instead of writing the functionality myself).
 * Please try to stay involved with the community and maintain your code.  We are only a handful of developers working on FreeTube in our spare time.  We do not have time to work on everything, and it would be nice if you can maintain your code when necessary.
 

_scripts/webpack.renderer.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const { readFileSync, readdirSync } = require('fs')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const ProcessLocalesPlugin = require('./ProcessLocalesPlugin')
@@ -56,7 +56,7 @@ const config = {
         loader: 'vue-loader',
         options: {
           compilerOptions: {
-            whitespace: 'condense',
+            isCustomElement: (tag) => tag === 'swiper-container' || tag === 'swiper-slide'
           }
         }
       },
@@ -133,6 +133,12 @@ const config = {
       'process.env.IS_ELECTRON': true,
       'process.env.IS_ELECTRON_MAIN': false,
       'process.env.SUPPORTS_LOCAL_API': true,
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+      __VUE_I18N_LEGACY_API__: 'true',
+      __VUE_I18N_FULL_INSTALL__: 'false',
+      __INTLIFY_PROD_DEVTOOLS__: '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.SWIPER_VERSION': `'${swiperVersion}'`,
@@ -180,9 +186,6 @@ const config = {
   ],
   resolve: {
     alias: {
-      vue$: 'vue/dist/vue.runtime.esm.js',
-      'portal-vue$': 'portal-vue/dist/portal-vue.esm.js',
-
       DB_HANDLERS_ELECTRON_RENDERER_OR_WEB$: path.resolve(__dirname, '../src/datastores/handlers/electron.js'),
 
       'youtubei.js$': 'youtubei.js/web',

_scripts/webpack.web.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const JsonMinimizerPlugin = require('json-minimizer-webpack-plugin')
@@ -45,7 +45,7 @@ const config = {
         loader: 'vue-loader',
         options: {
           compilerOptions: {
-            whitespace: 'condense',
+            isCustomElement: (tag) => tag === 'swiper-container' || tag === 'swiper-slide',
           }
         }
       },
@@ -128,6 +128,12 @@ const config = {
       'process.env.IS_ELECTRON': false,
       'process.env.IS_ELECTRON_MAIN': false,
       'process.env.SUPPORTS_LOCAL_API': false,
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+      __VUE_I18N_LEGACY_API__: 'true',
+      __VUE_I18N_FULL_INSTALL__: 'false',
+      __INTLIFY_PROD_DEVTOOLS__: 'false',
       'process.env.SWIPER_VERSION': `'${swiperVersion}'`
     }),
     new webpack.ProvidePlugin({
@@ -158,9 +164,6 @@ const config = {
   ],
   resolve: {
     alias: {
-      vue$: 'vue/dist/vue.runtime.esm.js',
-      'portal-vue$': 'portal-vue/dist/portal-vue.esm.js',
-
       DB_HANDLERS_ELECTRON_RENDERER_OR_WEB$: path.resolve(__dirname, '../src/datastores/handlers/web.js'),
 
       // change to "shaka-player.ui.debug.js" to get debug logs (update jsconfig to get updated types)

eslint.config.mjs

@@ -33,9 +33,9 @@ export default [
     ts: false,
   }),
   js.configs.recommended,
-  ...eslintPluginVue.configs['flat/vue2-recommended'],
+  ...eslintPluginVue.configs['flat/recommended'],
   ...vuejsAccessibility.configs["flat/recommended"],
-  ...intlifyVueI18N.configs['flat/recommended'],
+  ...intlifyVueI18N.configs['recommended'],
   {
     files: [
       '**/*.{js,vue}',
@@ -63,7 +63,7 @@ export default [
     settings: {
       'vue-i18n': {
         localeDir: `./static/locales/{${activeLocales.join(',')}}.yaml`,
-        messageSyntaxVersion: '^8.0.0',
+        messageSyntaxVersion: '^11.0.0',
       },
     },
 
@@ -79,7 +79,6 @@ export default [
       'no-unused-vars': 'warn',
       'no-undef': 'warn',
       'object-shorthand': 'off',
-      'vue/no-template-key': 'warn',
       'vue/multi-word-component-names': 'off',
 
       'vuejs-accessibility/label-has-for': ['error', {
@@ -119,8 +118,6 @@ export default [
         ignoreText: ['-', '•', '/', 'YouTube', 'Invidious', 'FreeTube'],
       }],
 
-      '@intlify/vue-i18n/no-deprecated-tc': 'off',
-      'vue/require-explicit-emits': 'error',
       'vue/no-unused-emit-declarations': 'error',
 
       'jsdoc/check-alignment': 'error',
@@ -166,7 +163,7 @@ export default [
     settings: {
       'vue-i18n': {
         localeDir: `./static/locales/{${activeLocales.join(',')}}.yaml`,
-        messageSyntaxVersion: '^8.0.0',
+        messageSyntaxVersion: '^11.0.0',
       },
     },
   },
@@ -191,7 +188,7 @@ export default [
     settings: {
       'vue-i18n': {
         localeDir: `./static/locales/{${activeLocales.join(',')}}.yaml`,
-        messageSyntaxVersion: '^8.0.0',
+        messageSyntaxVersion: '^11.0.0',
       },
     },
   },
@@ -210,7 +207,7 @@ export default [
     settings: {
       'vue-i18n': {
         localeDir: `./static/locales/{${activeLocales.join(',')}}.yaml`,
-        messageSyntaxVersion: '^8.0.0',
+        messageSyntaxVersion: '^11.0.0',
       },
     },
   },

jsconfig.json

@@ -1,6 +1,6 @@
 {
   "vueCompilerOptions": {
-    "target": 2.7
+    "target": 3.5
   },
   "compilerOptions": {
     "strictNullChecks": true,

package.json

@@ -58,21 +58,21 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/vue-fontawesome": "^2.0.10",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "@seald-io/nedb": "^4.1.2",
     "autolinker": "^4.1.5",
     "bgutils-js": "^3.2.0",
     "electron-context-menu": "^4.1.1",
     "marked": "^16.4.1",
-    "portal-vue": "^2.1.7",
+    "portal-vue": "^3.0.0",
     "process": "^0.11.10",
     "shaka-player": "^4.16.6",
     "swiper": "^12.0.3",
-    "vue": "^2.7.16",
+    "vue": "^3.5.22",
-    "vue-i18n": "^8.28.2",
+    "vue-i18n": "^11.1.12",
-    "vue-observe-visibility": "^1.0.0",
+    "vue-observe-visibility": "^2.0.0-alpha.1",
-    "vue-router": "^3.6.5",
+    "vue-router": "^4.6.3",
-    "vuex": "^3.6.2",
+    "vuex": "^4.1.0",
     "youtubei.js": "^16.0.1"
   },
   "devDependencies": {
@@ -80,7 +80,7 @@
     "@babel/preset-env": "^7.28.5",
     "@double-great/stylelint-a11y": "^3.4.0",
     "@eslint/js": "^9.38.0",
-    "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
+    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
     "babel-loader": "^10.0.0",
     "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.2",
@@ -112,9 +112,8 @@
     "stylelint-high-performance-animation": "^1.11.0",
     "stylelint-use-logical-spec": "^5.0.1",
     "tree-kill": "1.2.2",
-    "vue-devtools": "^5.1.4",
     "vue-eslint-parser": "^10.2.0",
-    "vue-loader": "^15.10.0",
+    "vue-loader": "^17.4.2",
     "webpack": "^5.102.1",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2",

src/main/index.js

@@ -710,14 +710,6 @@ function runApp() {
 
     await createWindow()
 
-    if (process.env.NODE_ENV === 'development') {
-      try {
-        require('vue-devtools').install()
-      } catch (err) {
-        console.error(err)
-      }
-    }
-
     if (isDebug) {
       mainWindow.webContents.openDevTools()
     }

src/renderer/App.css

@@ -56,8 +56,8 @@
   transition: opacity 0.15s;
 }
 
-.fade-enter,
+.fade-enter-from,
-.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.fade-leave-to {
   opacity: 0;
 }
 

src/renderer/App.js

@@ -209,18 +209,16 @@ export default defineComponent({
         }, 500)
       })
 
-      this.$router.onReady(() => {
+      if (this.$route.path === '/') {
-        if (this.$router.currentRoute.path === '/') {
+        this.$router.replace({ path: this.landingPage })
-          this.$router.replace({ path: this.landingPage })
+      }
-        }
 
-        this.setWindowTitle()
+      this.setWindowTitle()
-      })
     })
 
     document.addEventListener('dragstart', this.handleDragStart)
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     document.removeEventListener('dragstart', this.handleDragStart)
   },
   methods: {
@@ -332,8 +330,8 @@ export default defineComponent({
       this.showBlogBanner = false
     },
 
-    handlePromptPortalUpdate: function(newVal) {
+    handlePromptPortalUpdate: function(data) {
-      this.isPromptOpen = newVal
+      this.isPromptOpen = data.hasContent
     },
 
     openDownloadsPage: function () {

src/renderer/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     v-if="dataReady"
-    id="app"
     class="app"
     :class="{
       hideOutlines: outlinesHidden,
@@ -101,17 +100,18 @@
           @click="handleNewBlogBannerClick"
         />
       </div>
-      <transition
+      <RouterView
         v-if="dataReady"
-        mode="out-in"
+        v-slot="{ Component }"
-        name="fade"
+        class="routerView"
       >
-        <!-- <keep-alive> -->
+        <Transition
-        <RouterView
+          mode="out-in"
-          class="routerView"
+          name="fade"
-        />
+        >
-        <!-- </keep-alive> -->
+          <component :is="Component" />
-      </transition>
+        </Transition>
+      </RouterView>
     </ft-flex-box>
   </div>
 </template>

src/renderer/components/ChannelDetails/ChannelDetails.vue

@@ -42,7 +42,7 @@
               v-if="subCount !== null && !hideChannelSubscriptions"
               class="subCount"
             >
-              {{ $tc('Global.Counts.Subscriber Count', subCount, { count: formattedSubCount }) }}
+              {{ $t('Global.Counts.Subscriber Count', { count: formattedSubCount }, subCount) }}
             </p>
           </div>
         </div>
@@ -81,7 +81,7 @@
             class="tab"
             :class="{ selectedTab: currentTab === 'home' }"
             role="tab"
-            :aria-selected="String(currentTab === 'home')"
+            :aria-selected="currentTab === 'home'"
             aria-controls="homePanel"
             :tabindex="(currentTab === 'home' || currentTab === 'search') ? 0 : -1"
             @click="changeTab('home')"
@@ -97,7 +97,7 @@
             class="tab"
             :class="{ selectedTab: currentTab === 'videos' }"
             role="tab"
-            :aria-selected="String(currentTab === 'videos')"
+            :aria-selected="currentTab === 'videos'"
             aria-controls="videoPanel"
             :tabindex="(currentTab === 'videos' || currentTab === 'search') ? 0 : -1"
             @click="changeTab('videos')"
@@ -113,7 +113,7 @@
             class="tab"
             :class="{ selectedTab: currentTab === 'shorts' }"
             role="tab"
-            :aria-selected="String(currentTab === 'shorts')"
+            :aria-selected="currentTab === 'shorts'"
             aria-controls="shortPanel"
             :tabindex="currentTab === 'shorts' ? 0 : -1"
             @click="changeTab('shorts')"
@@ -129,7 +129,7 @@
             class="tab"
             :class="{ selectedTab: currentTab === 'live' }"
             role="tab"
-            :aria-selected="String(currentTab === 'live')"
+            :aria-selected="currentTab === 'live'"
             aria-controls="livePanel"
             :tabindex="currentTab === 'live' ? 0 : -1"
             @click="changeTab('live')"
@@ -144,7 +144,7 @@
             id="releasesTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'releases')"
+            :aria-selected="currentTab === 'releases'"
             aria-controls="releasePanel"
             :tabindex="currentTab === 'releases' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'releases' }"
@@ -160,7 +160,7 @@
             id="podcastsTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'podcasts')"
+            :aria-selected="currentTab === 'podcasts'"
             aria-controls="podcastPanel"
             :tabindex="currentTab === 'podcasts' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'podcasts' }"
@@ -176,7 +176,7 @@
             id="coursesTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'courses')"
+            :aria-selected="currentTab === 'courses'"
             aria-controls="coursesPanel"
             :tabindex="currentTab === 'courses' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'courses' }"
@@ -192,7 +192,7 @@
             id="playlistsTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'playlists')"
+            :aria-selected="currentTab === 'playlists'"
             aria-controls="playlistPanel"
             :tabindex="currentTab === 'playlists' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'playlists' }"
@@ -208,7 +208,7 @@
             id="communityTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'community')"
+            :aria-selected="currentTab === 'community'"
             aria-controls="communityPanel"
             :tabindex="currentTab === 'community' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'community' }"
@@ -223,7 +223,7 @@
             id="aboutTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'about')"
+            :aria-selected="currentTab === 'about'"
             aria-controls="aboutPanel"
             :tabindex="currentTab === 'about' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'about' }"

src/renderer/components/DataSettings.vue

@@ -65,7 +65,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { useI18n } from '../composables/use-i18n-polyfill'
-import { useRouter } from 'vue-router/composables'
+import { useRouter } from 'vue-router'
 
 import FtButton from './FtButton/FtButton.vue'
 import FtFlexBox from './ft-flex-box/ft-flex-box.vue'

src/renderer/components/FtChannelBubble/FtChannelBubble.vue

@@ -58,8 +58,8 @@
 </template>
 
 <script setup>
-import { useId } from '../../composables/use-id-polyfill'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { useId } from 'vue'
 
 const props = defineProps({
   channelId: {

src/renderer/components/FtCheckboxList/FtCheckboxList.vue

@@ -5,10 +5,10 @@
     </h3>
     <template
       v-for="(label, index) in labels"
+      :key="values[index]"
     >
       <input
         :id="id + values[index]"
-        :key="'value' + values[index]"
         v-model="modelValue"
         :name="id"
         :value="values[index]"
@@ -17,7 +17,6 @@
         type="checkbox"
       >
       <label
-        :key="'label' + values[index]"
         :for="id + values[index]"
       >
         {{ label }}
@@ -27,12 +26,11 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { useId } from 'vue'
-import { useId } from '../../composables/use-id-polyfill'
 
 const id = useId()
 
-const props = defineProps({
+defineProps({
   title: {
     type: String,
     required: true
@@ -49,39 +47,9 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-
-  // Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
-  // Do not rename or remove
-  // TODO: Replace with defineModel in Vue 3
-  value: {
-    type: Array,
-    required: true
-  }
 })
 
-// Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
+const modelValue = defineModel({ type: Array, required: true })
-// Do not rename or remove
-// TODO: Replace with defineModel in Vue 3
-const emit = defineEmits(['input'])
-
-/** @type {import('vue').Ref<string[]>} */
-const modelValue = ref(props.value)
-
-watch(
-  modelValue,
-  (newValue) => {
-    emit('input', newValue)
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.value,
-  (newValue) => {
-    modelValue.value = newValue
-  },
-  { deep: true }
-)
 </script>
 
 <style scoped src="./FtCheckboxList.css" />

src/renderer/components/FtCommunityPost/FtCommunityPost.vue

@@ -117,8 +117,8 @@
     >
       <span
         class="likeCount"
-        :title="$tc('Global.Counts.Like Count', voteCount, {count: formattedVoteCount})"
+        :title="$t('Global.Counts.Like Count', {count: formattedVoteCount}, voteCount)"
-        :aria-label="$tc('Global.Counts.Like Count', voteCount, {count: formattedVoteCount})"
+        :aria-label="$t('Global.Counts.Like Count', {count: formattedVoteCount}, voteCount)"
       >
         <FontAwesomeIcon
           class="thumbs-up-icon"
@@ -136,8 +136,8 @@
       >
         <span
           class="commentCount"
-          :title="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+          :title="$t('Global.Counts.Comment Count', {count: formattedCommentCount}, commentCount)"
-          :aria-label="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+          :aria-label="$t('Global.Counts.Comment Count', {count: formattedCommentCount}, commentCount)"
         >
           <FontAwesomeIcon
             class="comment-count-icon"
@@ -148,8 +148,8 @@
       <span
         v-else-if="commentCount != null"
         class="commentCount"
-        :title="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+        :title="$t('Global.Counts.Comment Count', {count: formattedCommentCount}, commentCount)"
-        :aria-label="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+        :aria-label="$t('Global.Counts.Comment Count', {count: formattedCommentCount}, commentCount)"
       >
         <FontAwesomeIcon
           class="comment-count-icon"

src/renderer/components/FtInputTags/FtInputTags.vue

@@ -79,8 +79,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { ref } from 'vue'
+import { ref, useId } from 'vue'
-import { useId } from '../../composables/use-id-polyfill'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtInput from '../ft-input/ft-input.vue'

src/renderer/components/FtListChannel/FtListChannel.vue

@@ -44,14 +44,14 @@
             class="subscriberCount"
           >
             <template v-if="handle !== null"> • </template>
-            {{ $tc('Global.Counts.Subscriber Count', subscriberCount, {count: formattedSubscriberCount}) }}
+            {{ $t('Global.Counts.Subscriber Count', {count: formattedSubscriberCount}, subscriberCount) }}
           </span>
           <span
             v-if="handle == null && videoCount != null"
             class="videoCount"
           >
             <template v-if="subscriberCount !== null && !hideChannelSubscriptions"> • </template>
-            {{ $tc('Global.Counts.Video Count', videoCount, {count: formattedVideoCount}) }}
+            {{ $t('Global.Counts.Video Count', {count: formattedVideoCount}, videoCount) }}
           </span>
         </div>
         <p

src/renderer/components/FtListHashtag/FtListHashtag.vue

@@ -34,14 +34,14 @@
           v-if="channelCount"
           class="channelCount"
         >
-          {{ $tc('Global.Counts.Channel Count', channelCount, {count: formattedChannelCount}) }}
+          {{ $t('Global.Counts.Channel Count', {count: formattedChannelCount}, channelCount) }}
         </span>
         <span
           v-if="videoCount"
           class="videoCount"
         >
           <template v-if="channelCount"> • </template>
-          {{ $tc('Global.Counts.Video Count', videoCount, {count: formattedVideosCount}) }}
+          {{ $t('Global.Counts.Video Count', {count: formattedVideosCount}, videoCount) }}
         </span>
       </div>
     </div>

src/renderer/components/FtNotificationBanner/FtNotificationBanner.vue

@@ -29,7 +29,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { useId } from '../../composables/use-id-polyfill'
+import { useId } from 'vue'
 
 defineProps({
   message: {

src/renderer/components/FtProfileBubble/FtProfileBubble.vue

@@ -25,8 +25,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
-import { useId } from '../../composables/use-id-polyfill'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import { getFirstCharacter } from '../../helpers/strings'

src/renderer/components/FtProfileChannelList/FtProfileChannelList.vue

@@ -222,14 +222,15 @@ function handleDeletePromptClick(value) {
       showToast(t('Profile.Profile has been updated'))
       selectNone()
     } else {
-      /** @type {Profile} */
-      const profile = deepCopy(props.profile)
-
       subscriptions.value = subscriptions.value.filter((channel) => {
         return !selected_.includes(channel.id)
       })
 
-      profile.subscriptions = subscriptions.value
+      /** @type {Profile} */
+      const profile = {
+        ...props.profile,
+        subscriptions: deepCopy(subscriptions.value)
+      }
 
       store.dispatch('updateProfile', profile)
 

src/renderer/components/FtProfileEdit/FtProfileEdit.vue

@@ -48,7 +48,7 @@
               :show-action-button="false"
               :maxlength="100"
               @input="profileName = $event"
-              @keydown.enter.native="saveProfile"
+              @keydown.enter="saveProfile"
             />
           </div>
           <div>
@@ -121,7 +121,7 @@ import store from '../../store/index'
 
 import { MAIN_PROFILE_ID } from '../../../constants'
 import { calculateColorLuminance, colors } from '../../helpers/colors'
-import { showToast } from '../../helpers/utils'
+import { deepCopy, showToast } from '../../helpers/utils'
 import { getFirstCharacter } from '../../helpers/strings'
 
 /**
@@ -204,7 +204,7 @@ function saveProfile() {
     name: profileName.value,
     bgColor: profileBgColor.value,
     textColor: profileTextColor.value,
-    subscriptions: props.profile.subscriptions
+    subscriptions: deepCopy(props.profile.subscriptions)
   }
 
   if (!props.isNew) {

src/renderer/components/FtProfileSelector/FtProfileSelector.vue

@@ -26,8 +26,8 @@
       ref="profileListRef"
       class="profileList"
       tabindex="-1"
-      @focusout.native="handleProfileListFocusOut"
+      @focusout="handleProfileListFocusOut"
-      @keydown.native.esc.stop="handleProfileListEscape"
+      @keydown.esc.stop="handleProfileListEscape"
     >
       <h3
         :id="id + 'title'"
@@ -80,10 +80,9 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, useId } from 'vue'
-import { useId } from '../../composables/use-id-polyfill'
 import { useI18n } from '../../composables/use-i18n-polyfill'
-import { useRouter } from 'vue-router/composables'
+import { useRouter } from 'vue-router'
 
 import FtCard from '../ft-card/ft-card.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'

src/renderer/components/FtPrompt/FtPrompt.vue

@@ -56,8 +56,7 @@
 </template>
 
 <script setup>
-import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, useId } from 'vue'
-import { useId } from '../../composables/use-id-polyfill'
 
 import store from '../../store/index'
 

src/renderer/components/FtRadioButton/FtRadioButton.vue

@@ -5,20 +5,18 @@
     </h3>
     <template
       v-for="(label, index) in labels"
+      :key="values[index]"
     >
       <input
         :id="id + values[index]"
-        :key="'value' + values[index]"
+        v-model="modelValue"
         :name="id"
         :value="values[index]"
-        :checked="value === values[index]"
         :disabled="disabled"
         class="radio"
         type="radio"
-        @change="handleChange(values[index])"
       >
       <label
-        :key="'label' + values[index]"
         :for="id + values[index]"
       >
         {{ label }}
@@ -28,7 +26,7 @@
 </template>
 
 <script setup>
-import { useId } from '../../composables/use-id-polyfill'
+import { useId } from 'vue'
 
 const id = useId()
 
@@ -49,27 +47,9 @@ defineProps({
     type: Boolean,
     default: false
   },
-
-  // Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
-  // Do not rename or remove
-  // TODO: Replace with defineModel in Vue 3
-  value: {
-    type: String,
-    required: true
-  }
 })
 
-// Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
+const modelValue = defineModel({ type: String, required: true })
-// Do not rename or remove
-// TODO: Replace with defineModel in Vue 3
-const emit = defineEmits(['input'])
-
-/**
- * @param {string} value
- */
-function handleChange(value) {
-  emit('input', value)
-}
 </script>
 
 <style scoped src="./FtRadioButton.css" />

src/renderer/components/FtSelect/FtSelect.vue

@@ -47,7 +47,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { useId } from '../../composables/use-id-polyfill'
+import { useId } from 'vue'
 
 import FtTooltip from '../FtTooltip/FtTooltip.vue'
 

src/renderer/components/FtSlider/FtSlider.vue

@@ -20,8 +20,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, useId, watch } from 'vue'
-import { useId } from '../../composables/use-id-polyfill.js'
 
 const props = defineProps({
   label: {

src/renderer/components/FtSponsorBlockCategory/FtSponsorBlockCategory.vue

@@ -30,8 +30,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
-import { useId } from '../../composables/use-id-polyfill'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtSelect from '../FtSelect/FtSelect.vue'

src/renderer/components/FtSubscribeButton/FtSubscribeButton.vue

@@ -90,8 +90,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref, shallowRef, useId } from 'vue'
-import { useId } from '../../composables/use-id-polyfill'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtButton from '../FtButton/FtButton.vue'
@@ -246,7 +245,7 @@ function handleSubscription(profile) {
 const subscribeButton = ref(null)
 
 function handleProfileDropdownFocusOut() {
-  if (!subscribeButton.value.matches(':focus-within')) {
+  if (subscribeButton.value && !subscribeButton.value.matches(':focus-within')) {
     isProfileDropdownOpen.value = false
   }
 }

src/renderer/components/FtTimestampCatcher.vue

@@ -7,7 +7,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import { useRouter } from 'vue-router/composables'
+import { useRouter } from 'vue-router'
 
 const props = defineProps({
   inputHtml: {
@@ -21,7 +21,7 @@ const props = defineProps({
 })
 
 const router = useRouter()
-const videoId = router.currentRoute.params.id
+const videoId = router.currentRoute.value.params.id
 
 /** @type {import('vue').ComputedRef<string>} */
 const displayText = computed(() => props.inputHtml.replaceAll(/(?:(\d+):)?(\d+):(\d+)/g, (timestamp, hours, minutes, seconds) => {

src/renderer/components/FtToast/FtToast.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { nextTick, onBeforeUnmount, onMounted, shallowReactive } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, reactive } from 'vue'
 import { ToastEventBus } from '../../helpers/utils'
 
 let idCounter = 0
@@ -34,21 +34,23 @@ let idCounter = 0
  * @property {number} id
  */
 
-/** @type {import('vue').ShallowReactive<Toast[]>} */
+/** @type {import('vue').Reactive<Toast[]>} */
-const toasts = shallowReactive([])
+const toasts = reactive([])
 
 /**
  * @param {CustomEvent<{ message: string | (({elapsedMs: number, remainingMs: number}) => string), time: number | null, action: Function | null, abortSignal: AbortSignal | null }>} event
  */
 function open({ detail: { message, time, action, abortSignal } }) {
+  const id = idCounter++
+
   /** @type {Toast} */
   const toast = {
+    id,
     message,
     action,
     isOpen: false,
     timeout: 0,
-    interval: 0,
+    interval: 0
-    id: idCounter++
   }
   time ||= 3000
   let elapsed = 0
@@ -60,7 +62,14 @@ function open({ detail: { message, time, action, abortSignal } }) {
       elapsed += updateDelay
       // Skip last update
       if (elapsed >= time) { return }
-      toast.message = message({ elapsedMs: elapsed, remainingMs: time - elapsed })
+
+      // We need to locate the object in the array so we get the reactive proxy,
+      // as modifying the original object won't trigger reactive effects such as updating the DOM
+      const toast = toasts.find(t => t.id === id)
+
+      if (toast) {
+        toast.message = message({ elapsedMs: elapsed, remainingMs: time - elapsed })
+      }
     }, updateDelay)
   }
 
@@ -72,7 +81,13 @@ function open({ detail: { message, time, action, abortSignal } }) {
   }
 
   nextTick(() => {
-    toast.isOpen = true
+    // We need to locate the object in the array so we get the reactive proxy,
+    // as modifying the original object won't trigger reactive effects such as updating the DOM
+    const toast = toasts.find(t => t.id === id)
+
+    if (toast) {
+      toast.isOpen = true
+    }
   })
 
   if (toasts.length > 4) {

src/renderer/components/FtToggleSwitch/FtToggleSwitch.vue

@@ -36,8 +36,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, useId, watch } from 'vue'
-import { useId } from '../../composables/use-id-polyfill'
 
 import FtTooltip from '../FtTooltip/FtTooltip.vue'
 

src/renderer/components/FtTooltip/FtTooltip.vue

@@ -23,7 +23,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { useId } from '../../composables/use-id-polyfill'
+import { useId } from 'vue'
 
 defineProps({
   position: {

src/renderer/components/PasswordSettings/PasswordSettings.vue

@@ -22,7 +22,7 @@
         input-type="password"
         :value="password"
         @input="e => password = e"
-        @keydown.enter.native="handleSetPassword"
+        @keydown.enter="handleSetPassword"
       />
       <FtButton
         class="centerButton"

src/renderer/components/PlaylistInfo/PlaylistInfo.vue

@@ -45,7 +45,7 @@
           :value="newTitle"
           :maxlength="255"
           @input="handlePlaylistNameInput"
-          @keydown.enter.native="savePlaylistInfo"
+          @keydown.enter="savePlaylistInfo"
         />
         <FtFlexBox v-if="inputPlaylistNameBlank">
           <p>
@@ -67,9 +67,9 @@
           {{ title }}
         </h2>
         <p>
-          {{ $tc('Global.Counts.Video Count', videoCount, { count: parsedVideoCount }) }}
+          {{ t('Global.Counts.Video Count', { count: parsedVideoCount }, videoCount) }}
           <span v-if="!hideViews && !isUserPlaylist">
-            - {{ $tc('Global.Counts.View Count', viewCount, { count: parsedViewCount }) }}
+            - {{ t('Global.Counts.View Count', { count: parsedViewCount }, viewCount) }}
           </span>
           <span>- </span>
           <span v-if="infoSource !== 'local'">
@@ -92,7 +92,7 @@
       :show-label="false"
       :value="newDescription"
       @input="(input) => newDescription = input"
-      @keydown.enter.native="savePlaylistInfo"
+      @keydown.enter="savePlaylistInfo"
     />
     <p
       v-else
@@ -265,7 +265,7 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
-import { useRouter } from 'vue-router/composables'
+import { useRouter } from 'vue-router'
 
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
@@ -282,6 +282,7 @@ import {
   showToast,
   getTodayDateStrLocalTimezone,
   writeFileWithPicker,
+  deepCopy,
 } from '../../helpers/utils'
 import thumbnailPlaceholder from '../../assets/img/thumbnail_placeholder.svg'
 
@@ -481,7 +482,7 @@ const userPlaylistAnyVideoWatched = computed(() => {
 
   const historyCacheById_ = historyCacheById.value
   return selectedUserPlaylist.value.videos.some((video) => {
-    return Object.hasOwn(historyCacheById_, video.videoId)
+    return historyCacheById_[video.videoId] !== undefined
   })
 })
 
@@ -594,7 +595,7 @@ async function savePlaylistInfo() {
     playlistName: newTitle.value,
     protected: selectedUserPlaylist.value.protected,
     description: newDescription.value,
-    videos: selectedUserPlaylist.value.videos,
+    videos: deepCopy(selectedUserPlaylist.value.videos),
     _id: props.id,
   }
   try {
@@ -740,7 +741,7 @@ const userPlaylistWatchedVideoCount = computed(() => {
 
   const historyCacheById_ = historyCacheById.value
   return selectedUserPlaylist.value.videos.reduce((count, video) => {
-    return Object.hasOwn(historyCacheById_, video.videoId) ? count + 1 : count
+    return historyCacheById_[video.videoId] !== undefined ? count + 1 : count
   }, 0)
 })
 
@@ -787,7 +788,7 @@ async function handleRemoveDuplicateVideosPromptAnswer(option) {
     playlistName: props.title,
     protected: selectedUserPlaylist.value.protected,
     description: props.description,
-    videos: newVideoItems,
+    videos: deepCopy(newVideoItems),
     _id: props.id,
   }
   try {
@@ -824,7 +825,7 @@ async function handleRemoveVideosOnWatchPromptAnswer(option) {
     playlistName: props.title,
     protected: selectedUserPlaylist.value.protected,
     description: props.description,
-    videos: videosToWatch,
+    videos: deepCopy(videosToWatch),
     _id: props.id
   }
   try {

src/renderer/components/ProxySettings/ProxySettings.vue

@@ -41,7 +41,7 @@
           show-label
           :value="proxyHostname"
           @input="handleUpdateProxyHostname"
-          @keydown.enter.native="testProxy"
+          @keydown.enter="testProxy"
         />
         <FtInput
           :placeholder="$t('Settings.Proxy Settings.Proxy Port Number')"
@@ -50,7 +50,7 @@
           :value="proxyPort"
           :maxlength="5"
           @input="handleUpdateProxyPort"
-          @keydown.enter.native="testProxy"
+          @keydown.enter="testProxy"
         />
       </FtFlexBox>
       <FtFlexBox>
@@ -60,7 +60,7 @@
           show-label
           :value="proxyUsername"
           @input="handleUpdateProxyUsername"
-          @keydown.enter.native="testProxy"
+          @keydown.enter="testProxy"
         />
         <FtInput
           :placeholder="$t('Settings.Proxy Settings.Proxy Password')"
@@ -69,7 +69,7 @@
           :value="proxyPassword"
           input-type="password"
           @input="handleUpdateProxyPassword"
-          @keydown.enter.native="testProxy"
+          @keydown.enter="testProxy"
         />
       </FtFlexBox>
       <p

src/renderer/components/SideNavMoreOptions/SideNavMoreOptions.vue

@@ -198,7 +198,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
-import router from '../../router/index.js'
+import { useRouter } from 'vue-router'
 
 import store from '../../store/index'
 
@@ -238,6 +238,8 @@ function handleClickOutside(event) {
   }
 }
 
+const router = useRouter()
+
 onMounted(() => {
   document.addEventListener('click', handleClickOutside)
   router.afterEach(() => {

src/renderer/components/SubscriptionsTabUi/SubscriptionsTabUi.vue

@@ -152,7 +152,7 @@ const hideWatchedSubs = computed(() => {
 const filteredVideoList = computed(() => {
   if (hideWatchedSubs.value && !props.isCommunity) {
     return props.videoList.filter((video) => {
-      return !Object.hasOwn(historyCacheById.value, video.videoId)
+      return historyCacheById.value[video.videoId] === undefined
     })
   } else {
     return props.videoList

src/renderer/components/TopNav/TopNav.vue

@@ -121,7 +121,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
-import { useRoute, useRouter } from 'vue-router/composables'
+import { useRoute, useRouter } from 'vue-router'
 
 import FtInput from '../ft-input/ft-input.vue'
 import FtProfileSelector from '../FtProfileSelector/FtProfileSelector.vue'

src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue

@@ -20,7 +20,7 @@
       :input-html="processedShownDescription"
       :link-tab-index="linkTabIndex"
       @timestamp-event="onTimestamp"
-      @click.native="expandDescriptionWithClick"
+      @click="expandDescriptionWithClick"
     />
     <span
       v-if="license && showFullDescription"

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

@@ -87,7 +87,7 @@ export default defineComponent({
       window.addEventListener('resize', this.handleResize)
     }
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     if (this.dropdownModalOnMobile) {
       window.removeEventListener('resize', this.handleResize)
     }

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

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, useId } from 'vue'
 import { mapActions } from 'vuex'
 
 import FtTooltip from '../FtTooltip/FtTooltip.vue'
@@ -77,13 +77,19 @@ export default defineComponent({
     }
   },
   emits: ['clear', 'click', 'input', 'remove'],
+  setup() {
+    const id = useId()
+
+    return {
+      id
+    }
+  },
   data: function () {
     let actionIcon = ['fas', 'search']
     if (this.forceActionButtonIconName !== null) {
       actionIcon = this.forceActionButtonIconName
     }
     return {
-      id: '',
       inputData: '',
       searchState: {
         showOptions: false,
@@ -152,7 +158,6 @@ export default defineComponent({
     }
   },
   created: function () {
-    this.id = this._uid
     this.inputData = this.value
     this.updateVisibleDataList()
   },

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

@@ -15,7 +15,7 @@
         class="thumbnailLink"
         tabindex="-1"
         :to="watchVideoRouterLink"
-        @click.native="handleWatchPageLinkClick"
+        @click="handleWatchPageLinkClick"
       >
         <img
           :src="thumbnail"
@@ -113,7 +113,7 @@
       <router-link
         class="title"
         :to="watchVideoRouterLink"
-        @click.native="handleWatchPageLinkClick"
+        @click="handleWatchPageLinkClick"
       >
         <h3 class="h3Title">
           {{ displayTitle }}
@@ -135,7 +135,7 @@
           class="viewCount"
         >
           <template v-if="channelId !== null || channelName !== null"> • </template>
-          {{ $tc('Global.Counts.View Count', viewCount, {count: parsedViewCount}) }}
+          {{ $t('Global.Counts.View Count', {count: parsedViewCount}, viewCount) }}
         </span>
         <span
           v-if="uploadedTime !== '' && !isLive"
@@ -144,7 +144,7 @@
         <span
           v-if="isLive && !hideViews"
           class="viewCount"
-        > • {{ $tc('Global.Counts.Watching Count', viewCount, {count: parsedViewCount}) }}</span>
+        > • {{ $t('Global.Counts.Watching Count', {count: parsedViewCount}, viewCount) }}</span>
       </div>
       <div
         v-if="is4k || hasCaptions || is8k || isNew || isVr180 || isVr360 || is3D"

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

@@ -1192,16 +1192,18 @@ export default defineComponent({
     }
 
     function handleTimeupdate() {
-      const currentTime = video.value.currentTime
+      if (video.value) {
+        const currentTime = video.value.currentTime
 
-      emit('timeupdate', currentTime)
+        emit('timeupdate', currentTime)
 
-      if (showStats.value && hasLoaded.value) {
+        if (showStats.value && hasLoaded.value) {
-        updateStats()
+          updateStats()
-      }
+        }
 
-      if (useSponsorBlock.value && sponsorBlockSegments.length > 0 && canSeek()) {
+        if (useSponsorBlock.value && sponsorBlockSegments.length > 0 && canSeek()) {
-        skipSponsorBlockSegments(currentTime)
+          skipSponsorBlockSegments(currentTime)
+        }
       }
     }
 

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

@@ -133,7 +133,7 @@ export class AudioTrackSelection extends shaka.ui.SettingsMenu {
   updateLocalisedStrings_() {
     this.backButton.ariaLabel = this.localization.resolve('BACK')
 
-    const audioTracksText = i18n.t('Video.Player.Audio Tracks')
+    const audioTracksText = i18n.global.t('Video.Player.Audio Tracks')
 
     this.button.ariaLabel = audioTracksText
     this.nameSpan.textContent = audioTracksText

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

@@ -67,12 +67,12 @@ export class AutoplayToggle extends shaka.ui.Element {
 
   /** @private */
   updateLocalisedStrings_() {
-    this.nameSpan_.textContent = i18n.t('Video.Autoplay')
+    this.nameSpan_.textContent = i18n.global.t('Video.Autoplay')
 
     this.icon_.use(this.autoplayEnabled_ ? PlayerIcons.PLAY_CIRCLE_FILLED : PlayerIcons.PAUSE_CIRCLE_FILLED)
 
     this.currentState_.textContent = this.localization.resolve(this.autoplayEnabled_ ? 'ON' : 'OFF')
 
-    this.button_.ariaLabel = this.autoplayEnabled_ ? i18n.t('Video.Player.Autoplay is on') : i18n.t('Video.Player.Autoplay is off')
+    this.button_.ariaLabel = this.autoplayEnabled_ ? i18n.global.t('Video.Player.Autoplay is on') : i18n.global.t('Video.Player.Autoplay is off')
   }
 }

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

@@ -70,7 +70,7 @@ export class FullWindowButton extends shaka.ui.Element {
     this.icon_.use(this.fullWindowEnabled_ ? PlayerIcons.CLOSE_FULLSCREEN_FILLED : PlayerIcons.OPEN_IN_FULL_FILLED)
     this.currentState_.textContent = this.localization.resolve(this.fullWindowEnabled_ ? 'ON' : 'OFF')
 
-    const baseAriaLabel = this.fullWindowEnabled_ ? i18n.t('Video.Player.Exit Full Window') : i18n.t('Video.Player.Full Window')
+    const baseAriaLabel = this.fullWindowEnabled_ ? i18n.global.t('Video.Player.Exit Full Window') : i18n.global.t('Video.Player.Full Window')
     const newLabel = addKeyboardShortcutToActionTitle(
       baseAriaLabel,
       KeyboardShortcuts.VIDEO_PLAYER.GENERAL.FULLWINDOW

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

@@ -51,7 +51,7 @@ export class ScreenshotButton extends shaka.ui.Element {
   /** @private */
   updateLocalisedStrings_() {
     const label = addKeyboardShortcutToActionTitle(
-      i18n.t('Video.Player.Take Screenshot'),
+      i18n.global.t('Video.Player.Take Screenshot'),
       KeyboardShortcuts.VIDEO_PLAYER.GENERAL.TAKE_SCREENSHOT
     )
     this.nameSpan_.textContent = this.button_.ariaLabel = label

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

@@ -65,7 +65,7 @@ export class StatsButton extends shaka.ui.Element {
   updateLocalisedStrings_() {
     this.icon_.use(this.showStats_ ? PlayerIcons.INSERT_CHART_FILLED : PlayerIcons.INSERT_CHART_DEFAULT)
 
-    const baseLabel = this.showStats_ ? i18n.t('Video.Player.Hide Stats') : i18n.t('Video.Player.Show Stats')
+    const baseLabel = this.showStats_ ? i18n.global.t('Video.Player.Hide Stats') : i18n.global.t('Video.Player.Show Stats')
     const label = addKeyboardShortcutToActionTitle(
       baseLabel,
       KeyboardShortcuts.VIDEO_PLAYER.GENERAL.STATS

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

@@ -71,7 +71,7 @@ export class TheatreModeButton extends shaka.ui.Element {
 
     this.currentState_.textContent = this.localization.resolve(this.theatreModeEnabled_ ? 'ON' : 'OFF')
 
-    const baseAriaLabel = this.theatreModeEnabled_ ? i18n.t('Video.Player.Exit Theatre Mode') : i18n.t('Video.Player.Theatre Mode')
+    const baseAriaLabel = this.theatreModeEnabled_ ? i18n.global.t('Video.Player.Exit Theatre Mode') : i18n.global.t('Video.Player.Theatre Mode')
 
     this.nameSpan_.textContent = this.button_.ariaLabel = addKeyboardShortcutToActionTitle(
       baseAriaLabel,

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

@@ -220,7 +220,7 @@ export default defineComponent({
     this.setCurrentInvidiousInstanceBounce =
       debounce(this.setCurrentInvidiousInstance, 500)
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     if (this.currentInvidiousInstance === '') {
       // FIXME: If we call an action from here, there's no guarantee it will finish
       // before the component is destroyed, which could bring up some problems

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

@@ -219,7 +219,7 @@ export default defineComponent({
         return null
       }
 
-      return this.$tc('Global.Counts.View Count', this.viewCount, { count: formatNumber(this.viewCount) })
+      return this.$t('Global.Counts.View Count', { count: formatNumber(this.viewCount) }, this.viewCount)
     },
 
     dateString: function () {

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

@@ -218,7 +218,7 @@ export default defineComponent({
       navigator.mediaSession.setActionHandler('nexttrack', this.playNextVideo)
     }
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     if ('mediaSession' in navigator) {
       navigator.mediaSession.setActionHandler('previoustrack', null)
       navigator.mediaSession.setActionHandler('nexttrack', null)

src/renderer/composables/use-i18n-polyfill.js

@@ -17,10 +17,10 @@ import i18n from '../i18n/index'
 export function useI18n() {
   const locale = computed({
     get() {
-      return i18n.locale
+      return i18n.global.locale
     },
     set(locale) {
-      i18n.locale = locale
+      i18n.global.locale = locale
     }
   })
 
@@ -74,22 +74,9 @@ export function useI18n() {
  */
 
 /**
- * @param {string} key
+ * @param {...any} args
- * @param {number | unknown[] | Record<string, unknown> | undefined} arg1
- * @param {number | undefined} arg2
  * @returns {string}
  */
-function t(key, arg1, arg2) {
+function t(...args) {
-  // Remove these lines in the Vue 3 migration and pass all args to the `.t()` call
+  return i18n.global.t(...args)
-  if (typeof arg1 === 'number') {
-    return i18n.tc(key, arg1)
-  } else if (typeof arg2 === 'number') {
-    return i18n.tc(key, arg2, arg1)
-  }
-
-  if (arg1 != null) {
-    return i18n.t(key, arg1)
-  }
-
-  return i18n.t(key)
 }

src/renderer/composables/use-id-polyfill.js

@@ -1,10 +0,0 @@
-// based on https://github.com/vuejs/core/blob/main/packages/runtime-core/src/helpers/useId.ts
-
-let counter = 0
-
-/**
- * Polyfill for Vue 3's useId composable in Vue 2
- */
-export function useId() {
-  return `v-0-${counter++}`
-}

src/renderer/helpers/player/utils.js

@@ -98,21 +98,21 @@ export async function getSponsorBlockSegments(videoId, categories) {
 export function translateSponsorBlockCategory(category) {
   switch (category) {
     case 'sponsor':
-      return i18n.t('Video.Sponsor Block category.sponsor')
+      return i18n.global.t('Video.Sponsor Block category.sponsor')
     case 'intro':
-      return i18n.t('Video.Sponsor Block category.intro')
+      return i18n.global.t('Video.Sponsor Block category.intro')
     case 'outro':
-      return i18n.t('Video.Sponsor Block category.outro')
+      return i18n.global.t('Video.Sponsor Block category.outro')
     case 'recap':
-      return i18n.t('Video.Sponsor Block category.recap')
+      return i18n.global.t('Video.Sponsor Block category.recap')
     case 'selfpromo':
-      return i18n.t('Video.Sponsor Block category.self-promotion')
+      return i18n.global.t('Video.Sponsor Block category.self-promotion')
     case 'interaction':
-      return i18n.t('Video.Sponsor Block category.interaction')
+      return i18n.global.t('Video.Sponsor Block category.interaction')
     case 'music_offtopic':
-      return i18n.t('Video.Sponsor Block category.music offtopic')
+      return i18n.global.t('Video.Sponsor Block category.music offtopic')
     case 'filler':
-      return i18n.t('Video.Sponsor Block category.filler')
+      return i18n.global.t('Video.Sponsor Block category.filler')
     default:
       console.error(`Unknown translation for SponsorBlock category ${category}`)
       return category
@@ -131,7 +131,7 @@ export function translateSponsorBlockCategory(category) {
  * }[]} captions
  */
 export function sortCaptions(captions) {
-  const currentLocale = i18n.locale
+  const currentLocale = i18n.global.locale
   const userLocale = currentLocale.split('-') // ex. [en,US]
 
   const collator = new Intl.Collator([currentLocale, 'en'])

src/renderer/helpers/strings.js

@@ -32,25 +32,25 @@ export function isKeyboardEventKeyPrintableChar(eventKey) {
 export function translateWindowTitle(title) {
   switch (title) {
     case 'Subscriptions':
-      return i18n.t('Subscriptions.Subscriptions')
+      return i18n.global.t('Subscriptions.Subscriptions')
     case 'Channels':
-      return i18n.t('Channels.Title')
+      return i18n.global.t('Channels.Title')
     case 'Trending':
-      return i18n.t('Trending.Trending')
+      return i18n.global.t('Trending.Trending')
     case 'Most Popular':
-      return i18n.t('Most Popular')
+      return i18n.global.t('Most Popular')
     case 'Your Playlists':
-      return i18n.t('User Playlists.Your Playlists')
+      return i18n.global.t('User Playlists.Your Playlists')
     case 'History':
-      return i18n.t('History.History')
+      return i18n.global.t('History.History')
     case 'Settings':
-      return i18n.t('Settings.Settings')
+      return i18n.global.t('Settings.Settings')
     case 'About':
-      return i18n.t('About.About')
+      return i18n.global.t('About.About')
     case 'Profile Settings':
-      return i18n.t('Profile.Profile Settings')
+      return i18n.global.t('Profile.Profile Settings')
     case 'Playlist':
-      return i18n.t('Playlist.Playlist')
+      return i18n.global.t('Playlist.Playlist')
     default:
       return null
   }

src/renderer/helpers/utils.js

@@ -206,11 +206,11 @@ export async function copyToClipboard(content, { messageOnSuccess = null, messag
       if (messageOnError !== null) {
         showToast(`${messageOnError}: ${error}`, 5000)
       } else {
-        showToast(`${i18n.t('Clipboard.Copy failed')}: ${error}`, 5000)
+        showToast(`${i18n.global.t('Clipboard.Copy failed')}: ${error}`, 5000)
       }
     }
   } else {
-    showToast(i18n.t('Clipboard.Cannot access clipboard without a secure connection'), 5000)
+    showToast(i18n.global.t('Clipboard.Cannot access clipboard without a secure connection'), 5000)
   }
 }
 
@@ -556,7 +556,7 @@ export function extractNumberFromString(str) {
 }
 
 export function showExternalPlayerUnsupportedActionToast(externalPlayer, action) {
-  const message = i18n.t('Video.External Player.UnsupportedActionTemplate', { externalPlayer, action })
+  const message = i18n.global.t('Video.External Player.UnsupportedActionTemplate', { externalPlayer, action })
   showToast(message)
 }
 
@@ -682,7 +682,7 @@ export function toDistractionFreeTitle(title, minUpperCase = 3) {
  * @returns {string}
  */
 export function formatNumber(number, options = undefined) {
-  return Intl.NumberFormat([i18n.locale, 'en'], options).format(number)
+  return Intl.NumberFormat([i18n.global.locale, 'en'], options).format(number)
 }
 
 export function getTodayDateStrLocalTimezone() {
@@ -715,7 +715,7 @@ export function getRelativeTimeFromDate(date, hideSeconds = false, useThirtyDayM
   let timeUnit = 'second'
 
   if (timeDiffFromNow < 60 && hideSeconds) {
-    return i18n.t('Moments Ago')
+    return i18n.global.t('Moments Ago')
   }
 
   if (timeDiffFromNow >= 60) {
@@ -755,7 +755,7 @@ export function getRelativeTimeFromDate(date, hideSeconds = false, useThirtyDayM
 
   // Using `Math.ceil` so that -1.x days ago displayed as 1 day ago
   // Notice that the value is turned to negative to be displayed as "ago"
-  return new Intl.RelativeTimeFormat([i18n.locale, 'en']).format(Math.ceil(-timeDiffFromNow), timeUnit)
+  return new Intl.RelativeTimeFormat([i18n.global.locale, 'en']).format(Math.ceil(-timeDiffFromNow), timeUnit)
 }
 
 /**
@@ -906,23 +906,23 @@ export function getChannelPlaylistId(channelId, type, sortBy) {
 function getIndividualLocalizedShortcut(shortcut) {
   switch (shortcut) {
     case 'alt':
-      return i18n.t('Keys.alt')
+      return i18n.global.t('Keys.alt')
     case 'ctrl':
-      return i18n.t('Keys.ctrl')
+      return i18n.global.t('Keys.ctrl')
     case 'shift':
-      return i18n.t('Keys.shift')
+      return i18n.global.t('Keys.shift')
     case 'enter':
-      return i18n.t('Keys.enter')
+      return i18n.global.t('Keys.enter')
     case 'plus':
-      return i18n.t('Keys.plus')
+      return i18n.global.t('Keys.plus')
     case 'arrowleft':
-      return i18n.t('Keys.arrowleft')
+      return i18n.global.t('Keys.arrowleft')
     case 'arrowright':
-      return i18n.t('Keys.arrowright')
+      return i18n.global.t('Keys.arrowright')
     case 'arrowup':
-      return i18n.t('Keys.arrowup')
+      return i18n.global.t('Keys.arrowup')
     case 'arrowdown':
-      return i18n.t('Keys.arrowdown')
+      return i18n.global.t('Keys.arrowdown')
     default:
       return shortcut
   }
@@ -967,7 +967,7 @@ export function getLocalizedShortcut(shortcut) {
     return shortcutsAsIcons.join('')
   } else {
     const localizedShortcuts = shortcuts.map((shortcut) => getIndividualLocalizedShortcut(shortcut))
-    const shortcutJoinOperator = i18n.t('shortcutJoinOperator')
+    const shortcutJoinOperator = i18n.global.t('shortcutJoinOperator')
     return localizedShortcuts.join(shortcutJoinOperator)
   }
 }
@@ -978,7 +978,7 @@ export function getLocalizedShortcut(shortcut) {
  * @returns {string} the localized action title with keyboard shortcut
  */
 export function addKeyboardShortcutToActionTitle(actionTitle, shortcut) {
-  return i18n.t('KeyboardShortcutTemplate', {
+  return i18n.global.t('KeyboardShortcutTemplate', {
     label: actionTitle,
     shortcut
   })
@@ -995,7 +995,7 @@ export function localizeAndAddKeyboardShortcutToActionTitle(localizedActionTitle
     unlocalizedShortcuts = [unlocalizedShortcuts]
   }
   const localizedShortcuts = unlocalizedShortcuts.map((s) => getLocalizedShortcut(s))
-  const shortcutLabelSeparator = i18n.t('shortcutLabelSeparator')
+  const shortcutLabelSeparator = i18n.global.t('shortcutLabelSeparator')
   return addKeyboardShortcutToActionTitle(localizedActionTitle, localizedShortcuts.join(shortcutLabelSeparator))
 }
 

src/renderer/i18n/index.js

@@ -1,15 +1,13 @@
-import Vue from 'vue'
+import { createI18n } from 'vue-i18n'
-import VueI18n from 'vue-i18n'
 import { createWebURL } from '../helpers/utils'
 // List of locales approved for use
 import activeLocales from '../../../static/locales/activeLocales.json'
 
-Vue.use(VueI18n)
+const i18n = createI18n({
-
-const i18n = new VueI18n({
   locale: 'en-US',
+  legacy: true,
   fallbackLocale: {
-    // https://kazupon.github.io/vue-i18n/guide/fallback.html#explicit-fallback-with-decision-maps
+    // https://vue-i18n.intlify.dev/guide/essentials/fallback.html
 
     // es-AR -> es -> en-US
     'es-AR': ['es'],
@@ -26,7 +24,8 @@ const i18n = new VueI18n({
 
 export async function loadLocale(locale) {
   // don't need to load it if it's already loaded
-  if (i18n.availableLocales.includes(locale)) {
+  if (i18n.global.availableLocales.includes(locale) &&
+    Object.keys(i18n.global.messages[locale]).length > 0) {
     return
   }
   if (!activeLocales.includes(locale)) {
@@ -47,7 +46,7 @@ export async function loadLocale(locale) {
 
   const response = await fetch(url)
   const data = await response.json()
-  i18n.setLocaleMessage(locale, data)
+  i18n.global.setLocaleMessage(locale, data)
 }
 
 // Set by _scripts/ProcessLocalesPlugin.js
@@ -60,10 +59,11 @@ if (process.env.HOT_RELOAD_LOCALES) {
     if (message.type === 'freetube-locale-update') {
       for (const [locale, data] of message.data) {
         // Only update locale data if it was already loaded
-        if (i18n.availableLocales.includes(locale)) {
+        if (i18n.global.availableLocales.includes(locale) &&
+          Object.keys(i18n.global.messages[locale]).length > 0) {
           const localeData = JSON.parse(data)
 
-          i18n.setLocaleMessage(locale, localeData)
+          i18n.global.setLocaleMessage(locale, localeData)
         }
       }
     }

src/renderer/main.js

@@ -1,5 +1,5 @@
 // import the styles
-import Vue from 'vue'
+import { createApp } from 'vue'
 import i18n from './i18n/index'
 import router from './router/index'
 import store from './store/index'
@@ -133,10 +133,6 @@ import {
 import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 import PortalVue from 'portal-vue'
 
-Vue.config.devtools = process.env.NODE_ENV === 'development'
-Vue.config.performance = process.env.NODE_ENV === 'development'
-Vue.config.productionTip = process.env.NODE_ENV === 'development'
-
 // Please keep the list of constants sorted by name
 // to avoid code conflict and duplicate entries
 library.add(
@@ -261,19 +257,23 @@ library.add(
 
 registerSwiper()
 
-Vue.component('FontAwesomeIcon', FontAwesomeIcon)
+const app = createApp(App)
-Vue.component('FontAwesomeLayers', FontAwesomeLayers)
-Vue.directive('observe-visibility', ObserveVisibility)
 
-/* eslint-disable-next-line no-new */
+app.config.performance = process.env.NODE_ENV === 'development'
-new Vue({
+
-  el: '#app',
+app
-  router,
+  .component('FontAwesomeIcon', FontAwesomeIcon)
-  store,
+  .component('FontAwesomeLayers', FontAwesomeLayers)
-  i18n,
+  .directive('observe-visibility', ObserveVisibility)
-  render: h => h(App)
+
+  .use(router)
+  .use(store)
+  .use(i18n)
+  .use(PortalVue)
+
+router.isReady().then(() => {
+  app.mount('#app')
 })
-Vue.use(PortalVue)
 
 // to avoid accessing electron api from web app build
 if (process.env.IS_ELECTRON) {

src/renderer/router/index.js

@@ -1,5 +1,4 @@
-import Vue from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
-import Router from 'vue-router'
 import Subscriptions from '../views/Subscriptions/Subscriptions.vue'
 import SubscribedChannels from '../views/SubscribedChannels/SubscribedChannels.vue'
 import ProfileSettings from '../views/ProfileSettings/ProfileSettings.vue'
@@ -16,9 +15,8 @@ import Watch from '../views/Watch/Watch.vue'
 import Hashtag from '../views/Hashtag/Hashtag.vue'
 import Post from '../views/Post.vue'
 
-Vue.use(Router)
+const router = createRouter({
-
+  history: createWebHashHistory(),
-const router = new Router({
   routes: [
     {
       path: '/',
@@ -149,43 +147,11 @@ const router = new Router({
         if (savedPosition !== null) {
           resolve(savedPosition)
         } else {
-          resolve({ x: 0, y: 0 })
+          resolve({ left: 0, top: 0 })
         }
       }, 500)
     })
   }
 })
 
-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/index.js

@@ -1,5 +1,4 @@
-import Vue from 'vue'
+import { createStore } from 'vuex'
-import Vuex from 'vuex'
 // import createPersistedState from 'vuex-persistedstate'
 
 import history from './modules/history'
@@ -12,9 +11,7 @@ import subscriptionCache from './modules/subscription-cache'
 import utils from './modules/utils'
 import player from './modules/player'
 
-Vue.use(Vuex)
+export default createStore({
-
-export default new Vuex.Store({
   modules: {
     history,
     invidious,

src/renderer/store/modules/history.js

@@ -1,4 +1,3 @@
-import { set as vueSet, del as vueDel } from 'vue'
 import { DBHistoryHandlers } from '../../../datastores/handlers/index'
 
 const state = {
@@ -125,7 +124,7 @@ const mutations = {
     }
 
     state.historyCacheSorted.unshift(record)
-    vueSet(state.historyCacheById, record.videoId, record)
+    state.historyCacheById[record.videoId] = record
   },
 
   updateRecordWatchProgressInHistoryCache(state, { videoId, watchProgress }) {
@@ -136,7 +135,7 @@ const mutations = {
 
     // Don't set, if the item was removed from the watch history, as we don't have any video details
     if (record) {
-      vueSet(record, 'watchProgress', watchProgress)
+      record.watchProgress = watchProgress
     }
   },
 
@@ -148,9 +147,9 @@ const mutations = {
 
     // Don't set, if the item was removed from the watch history, as we don't have any video details
     if (record) {
-      vueSet(record, 'lastViewedPlaylistId', lastViewedPlaylistId)
+      record.lastViewedPlaylistId = lastViewedPlaylistId
-      vueSet(record, 'lastViewedPlaylistType', lastViewedPlaylistType)
+      record.lastViewedPlaylistType = lastViewedPlaylistType
-      vueSet(record, 'lastViewedPlaylistItemId', lastViewedPlaylistItemId)
+      record.lastViewedPlaylistItemId = lastViewedPlaylistItemId
     }
   },
 
@@ -162,7 +161,7 @@ const mutations = {
       }
     }
 
-    vueDel(state.historyCacheById, videoId)
+    delete state.historyCacheById[videoId]
   }
 }
 

src/renderer/store/modules/player.js

@@ -1,4 +1,3 @@
-import { set as vueSet } from 'vue'
 import { createWebURL } from '../../helpers/utils'
 
 // replace with a Map after the Vue 3 and Pinia migrations
@@ -23,7 +22,7 @@ const actions = {
 
 const mutations = {
   addPlayerLocaleToCache(state, { locale, data }) {
-    vueSet(state.cachedPlayerLocales, locale, data)
+    state.cachedPlayerLocales[locale] = data
   }
 }
 

src/renderer/store/modules/settings.js

@@ -385,7 +385,7 @@ const sideEffectHandlers = {
 
     await Promise.allSettled(loadPromises)
 
-    i18n.locale = targetLocale
+    i18n.global.locale = targetLocale
     await dispatch('getRegionData', targetLocale)
   },
 

src/renderer/store/modules/utils.js

@@ -1,5 +1,4 @@
 import i18n from '../../i18n/index'
-import { set as vueSet } from 'vue'
 
 import { DefaultFolderKind } from '../../../constants'
 import {
@@ -223,11 +222,11 @@ const actions = {
         }
 
         console.error(error)
-        showToast(i18n.t('Downloading failed', { videoTitle: title }))
+        showToast(i18n.global.t('Downloading failed', { videoTitle: title }))
         return
       }
 
-      showToast(i18n.t('Starting download', { videoTitle: title }))
+      showToast(i18n.global.t('Starting download', { videoTitle: title }))
 
       let writeableFileStream
 
@@ -238,20 +237,20 @@ const actions = {
           writeableFileStream = await handle.createWritable()
 
           await response.body.pipeTo(writeableFileStream, { preventClose: true })
-          showToast(i18n.t('Downloading has completed', { videoTitle: title }))
+          showToast(i18n.global.t('Downloading has completed', { videoTitle: title }))
         } else {
           throw new Error(`Bad status code: ${response.status}`)
         }
       } catch (error) {
         console.error(error)
-        showToast(i18n.t('Downloading failed', { videoTitle: title }))
+        showToast(i18n.global.t('Downloading failed', { videoTitle: title }))
       } finally {
         if (writeableFileStream) {
           await writeableFileStream.close()
         }
       }
     } else {
-      showToast(i18n.t('Starting download', { videoTitle: title }))
+      showToast(i18n.global.t('Starting download', { videoTitle: title }))
 
       try {
         const response = await fetch(url)
@@ -263,13 +262,13 @@ const actions = {
             await window.ftElectron.writeToDefaultFolder(DefaultFolderKind.DOWNLOADS, fileName, arrayBuffer)
           }
 
-          showToast(i18n.t('Downloading has completed', { videoTitle: title }))
+          showToast(i18n.global.t('Downloading has completed', { videoTitle: title }))
         } else {
           throw new Error(`Bad status code: ${response.status}`)
         }
       } catch (error) {
         console.error(error)
-        showToast(i18n.t('Downloading failed', { videoTitle: title }))
+        showToast(i18n.global.t('Downloading failed', { videoTitle: title }))
       }
     }
   },
@@ -295,11 +294,11 @@ const actions = {
     }
 
     if (parsedString !== replaceFilenameForbiddenChars(parsedString)) {
-      throw new Error(i18n.t('Settings.Player Settings.Screenshot.Error.Forbidden Characters'))
+      throw new Error(i18n.global.t('Settings.Player Settings.Screenshot.Error.Forbidden Characters'))
     }
 
     if (!parsedString) {
-      throw new Error(i18n.t('Settings.Player Settings.Screenshot.Error.Empty File Name'))
+      throw new Error(i18n.global.t('Settings.Player Settings.Screenshot.Error.Empty File Name'))
     }
 
     return parsedString
@@ -733,7 +732,7 @@ const actions = {
             args.push(cmdArgs.startOffset, Math.trunc(payload.watchProgress))
           }
         } else if (!ignoreWarnings) {
-          showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.t('Video.External Player.Unsupported Actions.starting video at offset'))
+          showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.global.t('Video.External Player.Unsupported Actions.starting video at offset'))
         }
       }
 
@@ -741,7 +740,7 @@ const actions = {
         if (typeof cmdArgs.playbackRate === 'string') {
           args.push(`${cmdArgs.playbackRate}${payload.playbackRate}`)
         } else if (!ignoreWarnings) {
-          showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.t('Video.External Player.Unsupported Actions.setting a playback rate'))
+          showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.global.t('Video.External Player.Unsupported Actions.setting a playback rate'))
         }
       }
 
@@ -751,7 +750,7 @@ const actions = {
           if (typeof cmdArgs.playlistIndex === 'string') {
             args.push(`${cmdArgs.playlistIndex}${payload.playlistIndex}`)
           } else if (!ignoreWarnings) {
-            showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.t('Video.External Player.Unsupported Actions.opening specific video in a playlist (falling back to opening the video)'))
+            showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.global.t('Video.External Player.Unsupported Actions.opening specific video in a playlist (falling back to opening the video)'))
           }
         }
 
@@ -759,7 +758,7 @@ const actions = {
           if (typeof cmdArgs.playlistReverse === 'string') {
             args.push(cmdArgs.playlistReverse)
           } else if (!ignoreWarnings) {
-            showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.t('Video.External Player.Unsupported Actions.reversing playlists'))
+            showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.global.t('Video.External Player.Unsupported Actions.reversing playlists'))
           }
         }
 
@@ -767,7 +766,7 @@ const actions = {
           if (typeof cmdArgs.playlistShuffle === 'string') {
             args.push(cmdArgs.playlistShuffle)
           } else if (!ignoreWarnings) {
-            showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.t('Video.External Player.Unsupported Actions.shuffling playlists'))
+            showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.global.t('Video.External Player.Unsupported Actions.shuffling playlists'))
           }
         }
 
@@ -775,7 +774,7 @@ const actions = {
           if (typeof cmdArgs.playlistLoop === 'string') {
             args.push(cmdArgs.playlistLoop)
           } else if (!ignoreWarnings) {
-            showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.t('Video.External Player.Unsupported Actions.looping playlists'))
+            showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.global.t('Video.External Player.Unsupported Actions.looping playlists'))
           }
         }
 
@@ -787,7 +786,7 @@ const actions = {
         }
       } else {
         if (payload.playlistId != null && payload.playlistId !== '' && !ignoreWarnings) {
-          showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.t('Video.External Player.Unsupported Actions.opening playlists'))
+          showExternalPlayerUnsupportedActionToast(externalPlayer, i18n.global.t('Video.External Player.Unsupported Actions.opening playlists'))
         }
         if (payload.videoId != null) {
           args.push(`${cmdArgs.videoUrl}https://www.youtube.com/watch?v=${payload.videoId}`)
@@ -796,10 +795,10 @@ const actions = {
     }
 
     const videoOrPlaylist = payload.playlistId != null && payload.playlistId !== ''
-      ? i18n.t('Video.External Player.playlist')
+      ? i18n.global.t('Video.External Player.playlist')
-      : i18n.t('Video.External Player.video')
+      : i18n.global.t('Video.External Player.video')
 
-    showToast(i18n.t('Video.External Player.OpeningTemplate', { videoOrPlaylist, externalPlayer }))
+    showToast(i18n.global.t('Video.External Player.OpeningTemplate', { videoOrPlaylist, externalPlayer }))
 
     if (process.env.IS_ELECTRON) {
       window.ftElectron.openInExternalPlayer(executable, args)
@@ -836,14 +835,12 @@ const mutations = {
     const sameVideo = state.deArrowCache[payload.videoId]
 
     if (!sameVideo) {
-      // setting properties directly doesn't trigger watchers in Vue 2,
+      state.deArrowCache[payload.videoId] = payload
-      // so we need to use Vue's set function
-      vueSet(state.deArrowCache, payload.videoId, payload)
     }
   },
 
   addThumbnailToDeArrowCache (state, payload) {
-    vueSet(state.deArrowCache, payload.videoId, payload)
+    state.deArrowCache[payload.videoId] = payload
   },
 
   removeFromSessionSearchHistory (state, query) {

src/renderer/views/Channel/Channel.vue

@@ -267,8 +267,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import autolinker from 'autolinker'
 import { computed, onMounted, ref, shallowRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
+import { isNavigationFailure, NavigationFailureType, useRoute, useRouter } from 'vue-router'
-import { useRoute, useRouter } from 'vue-router/composables'
 import { YTNodes } from 'youtubei.js'
 
 import ChannelAbout from '../../components/ChannelAbout/ChannelAbout.vue'
@@ -2333,7 +2332,7 @@ function handleSubscription() {
 
 function filterWatchedArray(videos) {
   const historyCache = store.getters.getHistoryCacheById
-  return videos.filter(video => !Object.hasOwn(historyCache, video.videoId))
+  return videos.filter(video => historyCache[video.videoId] === undefined)
 }
 </script>
 

src/renderer/views/Hashtag/Hashtag.vue

@@ -58,7 +58,7 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtLoader from '../../components/FtLoader/FtLoader.vue'
 import FtAutoLoadNextPageWrapper from '../../components/FtAutoLoadNextPageWrapper.vue'
 import store from '../../store/index'
-import { useRoute } from 'vue-router/composables'
+import { useRoute } from 'vue-router'
 import packageDetails from '../../../../package.json'
 import { getHashtagLocal, parseLocalListVideo } from '../../helpers/api/local'
 import { copyToClipboard, showToast } from '../../helpers/utils'

src/renderer/views/History/History.vue

@@ -84,8 +84,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
+import { isNavigationFailure, NavigationFailureType, useRoute, useRouter } from 'vue-router'
-import { useRoute, useRouter } from 'vue-router/composables'
 
 import FtAutoLoadNextPageWrapper from '../../components/FtAutoLoadNextPageWrapper.vue'
 import FtButton from '../../components/FtButton/FtButton.vue'

src/renderer/views/Playlist/Playlist.vue

@@ -159,8 +159,7 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
+import { isNavigationFailure, NavigationFailureType, onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
-import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router/composables'
 
 import FtLoader from '../../components/FtLoader/FtLoader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -703,7 +702,7 @@ function moveVideoUp(videoId, playlistItemId) {
     playlistName: playlistTitle.value,
     protected: selectedUserPlaylist.value.protected,
     description: playlistDescription.value,
-    videos: playlistItems_,
+    videos: deepCopy(playlistItems_),
     _id: playlistId.value
   }
 
@@ -738,7 +737,7 @@ function moveVideoDown(videoId, playlistItemId) {
     playlistName: playlistTitle.value,
     protected: selectedUserPlaylist.value.protected,
     description: playlistDescription.value,
-    videos: playlistItems_,
+    videos: deepCopy(playlistItems_),
     _id: playlistId.value
   }
 
@@ -797,7 +796,8 @@ async function removeToBeDeletedVideosSometimes() {
   if (toBeDeletedPlaylistItemIds.value.length > 0) {
     await store.dispatch('removeVideos', {
       _id: playlistId.value,
-      playlistItemIds: toBeDeletedPlaylistItemIds.value,
+      // Create a new non-reactive array to avoid Electron erroring about Proxy objects not being clonable
+      playlistItemIds: [...toBeDeletedPlaylistItemIds.value],
     })
 
     toBeDeletedPlaylistItemIds.value = []
@@ -880,7 +880,7 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', handleResize)
 })
 
-onBeforeRouteLeave((to, from, next) => {
+onBeforeRouteLeave((to) => {
   if (!isLoading.value && to.path.startsWith('/watch') && to.query.playlistId === playlistId.value) {
     store.commit('setCachedPlaylist', {
       id: playlistId.value,
@@ -895,7 +895,6 @@ onBeforeRouteLeave((to, from, next) => {
   }
 
   removeToBeDeletedVideosSometimes()
-  next()
 })
 </script>
 

src/renderer/views/Post.vue

@@ -27,7 +27,7 @@
 
 <script setup>
 import { computed, onMounted, ref, shallowRef, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router/composables'
+import { useRoute, useRouter } from 'vue-router'
 import packageDetails from '../../../package.json'
 import { useI18n } from '../composables/use-i18n-polyfill'
 

src/renderer/views/SearchPage/SearchPage.vue

@@ -41,7 +41,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, onMounted, ref, shallowRef, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
-import { useRoute } from 'vue-router/composables'
+import { useRoute } from 'vue-router'
 
 import FtLoader from '../../components/FtLoader/FtLoader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'

src/renderer/views/Settings/Settings.js

@@ -177,7 +177,7 @@ export default defineComponent({
       this.handleMounted()
     }
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     document.removeEventListener('scroll', this.markScrolledToSectionAsActive)
     window.removeEventListener('resize', this.handleResize)
   },

src/renderer/views/Settings/Settings.vue

@@ -39,11 +39,11 @@
         <div class="settingsSections">
           <template
             v-for="(settingsComponent) in settingsSectionComponents"
+            :key="settingsComponent.type"
           >
             <component
               :is="settingsComponent.type"
               :ref="settingsComponent.type"
-              :key="settingsComponent.type"
               :class="{ hideOnMobile: settingsSectionTypeOpenInMobile !== settingsComponent.type }"
               class="section"
             />

src/renderer/views/SubscribedChannels/SubscribedChannels.vue

@@ -83,8 +83,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
+import { isNavigationFailure, NavigationFailureType, useRoute, useRouter } from 'vue-router'
-import { useRoute, useRouter } from 'vue-router/composables'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'

src/renderer/views/Subscriptions/Subscriptions.vue

@@ -20,7 +20,7 @@
           ref="videosTab"
           class="tab"
           role="tab"
-          :aria-selected="String(currentTab === 'videos')"
+          :aria-selected="currentTab === 'videos'"
           aria-controls="subscriptionsPanel"
           :tabindex="currentTab === 'videos' ? 0 : -1"
           :class="{ selectedTab: currentTab === 'videos' }"
@@ -41,7 +41,7 @@
           ref="shortsTab"
           class="tab"
           role="tab"
-          :aria-selected="String(currentTab === 'shorts')"
+          :aria-selected="currentTab === 'shorts'"
           aria-controls="subscriptionsPanel"
           :tabindex="currentTab === 'shorts' ? 0 : -1"
           :class="{ selectedTab: currentTab === 'shorts' }"
@@ -62,7 +62,7 @@
           ref="liveTab"
           class="tab"
           role="tab"
-          :aria-selected="String(currentTab === 'live')"
+          :aria-selected="currentTab === 'live'"
           aria-controls="subscriptionsPanel"
           :tabindex="currentTab === 'live' ? 0 : -1"
           :class="{ selectedTab: currentTab === 'live' }"
@@ -83,7 +83,7 @@
           ref="communityTab"
           class="tab"
           role="tab"
-          :aria-selected="String(currentTab === 'community')"
+          :aria-selected="currentTab === 'community'"
           aria-controls="subscriptionsPanel"
           :tabindex="currentTab === 'community' ? 0 : -1"
           :class="{ selectedTab: currentTab === 'community' }"

src/renderer/views/Trending/Trending.vue

@@ -21,7 +21,7 @@
           ref="defaultTab"
           class="tab"
           role="tab"
-          :aria-selected="String(currentTab === 'default')"
+          :aria-selected="currentTab === 'default'"
           aria-controls="trendingPanel"
           :tabindex="currentTab === 'default' ? 0 : -1"
           :class="{ selectedTab: currentTab === 'default' }"
@@ -42,7 +42,7 @@
           ref="musicTab"
           class="tab"
           role="tab"
-          :aria-selected="String(currentTab === 'music')"
+          :aria-selected="currentTab === 'music'"
           aria-controls="trendingPanel"
           :tabindex="currentTab === 'music' ? 0 : -1"
           :class="{ selectedTab: currentTab === 'music' }"
@@ -63,7 +63,7 @@
           ref="gamingTab"
           class="tab"
           role="tab"
-          :aria-selected="String(currentTab === 'gaming')"
+          :aria-selected="currentTab === 'gaming'"
           aria-controls="trendingPanel"
           :tabindex="currentTab === 'gaming' ? 0 : -1"
           :class="{ selectedTab: currentTab === 'gaming' }"
@@ -84,7 +84,7 @@
           ref="moviesTab"
           class="tab"
           role="tab"
-          :aria-selected="String(currentTab === 'movies')"
+          :aria-selected="currentTab === 'movies'"
           aria-controls="trendingPanel"
           :tabindex="currentTab === 'movies' ? 0 : -1"
           :class="{ selectedTab: currentTab === 'movies' }"

src/renderer/views/UserPlaylists/UserPlaylists.vue

@@ -99,8 +99,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
+import { isNavigationFailure, NavigationFailureType, useRoute, useRouter } from 'vue-router'
-import { useRoute, useRouter } from 'vue-router/composables'
 
 import FtAutoLoadNextPageWrapper from '../../components/FtAutoLoadNextPageWrapper.vue'
 import FtButton from '../../components/FtButton/FtButton.vue'

src/renderer/views/Watch/Watch.js

@@ -1372,7 +1372,7 @@ export default defineComponent({
         showToast(
           ({ remainingMs }) => {
             const countDownTimeLeftInSecond = remainingMs / 1000
-            return this.$tc('Playing Next Video Interval', countDownTimeLeftInSecond, { nextVideoInterval: countDownTimeLeftInSecond })
+            return this.$t('Playing Next Video Interval', { nextVideoInterval: countDownTimeLeftInSecond }, countDownTimeLeftInSecond)
           },
           // So that we don't see last countdown text like 0/N
           nextVideoInterval * 1000,

static/locales/af.yaml

@@ -867,7 +867,7 @@ Video:
       Stats: 'Statistieke'
       Video ID: 'Video ID: {videoId}'
       Media Formats: 'Mediaformate: {formats}'
-      Resolution: 'Resolusie: {width}x{height}@{frameRate}'
+      Resolution: 'Resolusie: {width}x{height}{''@''}{frameRate}'
       Player Dimensions: 'Spelerdimensies: {width}x{height}'
       Bitrate: 'Bistempo: {bitrate} kbps'
       Volume: 'Volume: {volumePercentage}%'

static/locales/ar.yaml

@@ -833,7 +833,7 @@ Video:
       CodecsVideoAudio: 'برامج الترميز: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
       Stats: الاحصائيات
       Video ID: 'معرف الفيديو: {videoId}'
-      Resolution: 'الدقة: {width}x{height}@{frameRate}'
+      Resolution: 'الدقة: {width}x{height}{''@''}{frameRate}'
       Bandwidth: 'عرض النطاق الترددي: {bandwidth} كيلوبت في الثانية'
     Skipped segment: تم تخطي شريحة {segmentCategory}
     Theatre Mode: وضع المسرح

static/locales/be.yaml

@@ -845,7 +845,7 @@ Video:
       Player Dimensions: 'Памеры прайгравальніка: {width}x{height}'
       Bitrate: 'Бітрэйт: {bitrate} кбіт/с'
       Buffered: 'Буферызавана: {bufferedPercentage}%'
-      Resolution: 'Раздзяляльнасць: {width}x{height}@{frameRate}'
+      Resolution: 'Раздзяляльнасць: {width}x{height}{''@''}{frameRate}'
       Dropped Frames / Total Frames: 'Прапушчаныя кадры: {droppedFrames} / Усяго кадраў: {totalFrames}'
       CodecsVideoAudio: 'Кодэкі: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
       CodecsVideoAudioNoItags: 'Кодэкі: {videoCodec} / {audioCodec}'

static/locales/bg.yaml

@@ -842,7 +842,7 @@ Video:
       CodecAudio: 'Кодек: {audioCodec} ({audioItag})'
       CodecsVideoAudio: 'Кодеци: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
       CodecsVideoAudioNoItags: 'Кодеци: {videoCodec} / {audioCodec}'
-      Resolution: 'Разделителна способност: {width}x{height}@{frameRate}'
+      Resolution: 'Разделителна способност: {width}x{height}{''@''}{frameRate}'
       Player Dimensions: 'Размери на плейъра: {width}x{height}'
       Bitrate: 'Скорост на предаване: {bitrate} kbps'
       Dropped Frames / Total Frames: 'Изпуснати кадри: {droppedFrames} / Общо кадри: {totalFrames}'

static/locales/br.yaml

@@ -903,7 +903,7 @@ Video:
       Stats: 'Stadegoù'
       Video ID: 'ID ar Video : {videoId}'
       Media Formats: 'Furmadoù ar media : {formats}'
-      Resolution: 'Spisder : {width}x{height}@{frameRate}'
+      Resolution: 'Spisder : {width}x{height}{''@''}{frameRate}'
       Player Dimensions: 'Ment al lenner : {width}x{height}'
       Bitrate: 'Fonnder bit : {bitrate} kbps'
       Volume: 'Live-son : {volumePercentage}%'

static/locales/cs.yaml

@@ -835,7 +835,7 @@ Video:
       Stats: Statistiky
       Video ID: 'ID videa: {videoId}'
       Media Formats: 'Formáty médií: {formats}'
-      Resolution: 'Rozlišení: {width}x{height}@{frameRate}'
+      Resolution: 'Rozlišení: {width}x{height}{''@''}{frameRate}'
       Bandwidth: 'Šířka pásma: {bandwidth} kb/s'
       Buffered: 'Načteno: {bufferedPercentage} %'
       Dropped Frames / Total Frames: 'Vypuštěno snímků: {droppedFrames} / Celkem snímků: {totalFrames}'

static/locales/cy.yaml

@@ -844,7 +844,7 @@ Video:
   Player:
     Take Screenshot: Tynnu Llun Sgrin
     Stats:
-      Resolution: 'Cydraniad: {width}x{height}@{frameRate}'
+      Resolution: 'Cydraniad: {width}x{height}{''@''}{frameRate}'
       Bitrate: 'Cyfradd didau: {bitrate} kbps'
       Bandwidth: 'Lled band: {bandwidth} kbps'
       Buffered: 'Byffrwyd: {bufferedPercentage}%'

static/locales/da.yaml

@@ -817,7 +817,7 @@ Video:
     Stats:
       Video ID: 'Video-ID: {videoId}'
       Media Formats: 'Medieformater: {formats}'
-      Resolution: 'Opløsning: {width}x{height}@{frameRate}'
+      Resolution: 'Opløsning: {width}x{height}{''@''}{frameRate}'
       Bandwidth: 'Båndbredde: {bandwidth} kbps'
       Stats: Statistik
       Bitrate: 'Bitrate: {bitrate} kbps'

static/locales/de-DE.yaml

@@ -791,7 +791,7 @@ Video:
       Stats: Statistiken
       Video ID: 'Videokennung (ID): {videoId}'
       Media Formats: 'Medienformate: {formats}'
-      Resolution: 'Auflösung: {width}×{height}@{frameRate}'
+      Resolution: 'Auflösung: {width}×{height}{''@''}{frameRate}'
       Player Dimensions: 'Player-Dimensionen: {width}×{height}'
       Bitrate: 'Bitrate: {bitrate} kb/s'
       Volume: 'Lautstärke: {volumePercentage} %'

static/locales/el.yaml

@@ -831,7 +831,7 @@ Video:
       CodecsVideoAudioNoItags: 'Κωδικοποιητές: {videoCodec} / {audioCodec}'
       CodecAudio: 'Κωδικοποιητής: {audioCodec} ({audioItag})'
       Bitrate: 'Ρυθμός μετάδοσης δεδομένων: {bitrate} kbps'
-      Resolution: 'Διαστάσεις: {width}x{height}@{frameRate}'
+      Resolution: 'Διαστάσεις: {width}x{height}{''@''}{frameRate}'
       Buffered: 'Αποθηκευμένη: {bufferedPercentage}%'
     Theatre Mode: Λειτουργία Θεάτρου
     Full Window: Πλήρες Παράθυρο

static/locales/en-GB.yaml

@@ -841,7 +841,7 @@ Video:
       Stats: Stats
       Video ID: 'Video ID: {videoId}'
       Media Formats: 'Media formats: {formats}'
-      Resolution: 'Resolution: {width}×{height}@{frameRate}'
+      Resolution: 'Resolution: {width}×{height}{''@''}{frameRate}'
       Player Dimensions: 'Player dimensions: {width}×{height}'
       Bitrate: 'Bitrate: {bitrate} kb/s'
       Volume: 'Volume: {volumePercentage}%'

static/locales/en-US.yaml

@@ -931,7 +931,7 @@ Video:
       Stats: Stats
       Video ID: 'Video ID: {videoId}'
       Media Formats: 'Media Formats: {formats}'
-      Resolution: 'Resolution: {width}x{height}@{frameRate}'
+      Resolution: 'Resolution: {width}x{height}{''@''}{frameRate}'
       Player Dimensions: 'Player Dimensions: {width}x{height}'
       Bitrate: 'Bitrate: {bitrate} kbps'
       Volume: 'Volume: {volumePercentage}%'

static/locales/es.yaml

@@ -832,7 +832,7 @@ Video:
       Stats: Estadísticas
       Video ID: 'ID del vídeo: {videoId}'
       Media Formats: 'Formatos del medio: {formats}'
-      Resolution: 'Resolución: {width}x{height}@{frameRate}'
+      Resolution: 'Resolución: {width}x{height}{''@''}{frameRate}'
       Player Dimensions: 'Dimensiones del reproductor: {width}x{height}'
       Bitrate: 'Tasa de bits: {bitrate} kbps'
       Volume: 'Volumen: {volumePercentage}%'

static/locales/et.yaml

@@ -843,7 +843,7 @@ Video:
       CodecsVideoAudio: 'Koodekid: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
       CodecsVideoAudioNoItags: 'Koodekid: {videoCodec} / {audioCodec}'
       Stats: Statistika
-      Resolution: 'Mõõdud ja kaadrisagedus: {width}x{height}@{frameRate}'
+      Resolution: 'Mõõdud ja kaadrisagedus: {width}x{height}{''@''}{frameRate}'
       Player Dimensions: 'Meediamängija mõõdud: {width}x{height}'
       Dropped Frames / Total Frames: 'Vahelejäetud kaadreid: {droppedFrames} / Kaadreid kokku: {totalFrames}'
     Skipped segment: Vahelejäetud {segmentCategory} segment

static/locales/eu.yaml

@@ -837,7 +837,7 @@ Video:
       Dropped Frames / Total Frames: 'Jaregindako fotogramak: {droppedFrames} / Total Frames: {totalFrames}'
       Volume: 'Bolumena: {volumePercentage}%'
       CodecsVideoAudio: 'Kodekak: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
-      Resolution: 'Bereizmena: {width}x{height}@{frameRate}'
+      Resolution: 'Bereizmena: {width}x{height}{''@''}{frameRate}'
       Player Dimensions: 'Erreproduzigailuaren neurriak: {width}x{height}'
       Bitrate: 'Bit-emaria: {bitrate} kbps'
       CodecsVideoAudioNoItags: 'Kodekak: {videoCodec} / {audioCodec}'

static/locales/fa.yaml

@@ -738,7 +738,7 @@ Video:
       Video ID: 'شناسه ویدئو: {videoId}'
       Media Formats: 'فرمت ویدئو: {formats}'
       Stats: اطلاعات
-      Resolution: 'وضوح: {width}x{height}@{frameRate}'
+      Resolution: 'وضوح: {width}x{height}{''@''}{frameRate}'
       Bandwidth: 'پهنای باند: {bandwidth} کیلوبیت‌بر‌ثانیه'
       Player Dimensions: 'ابعاد پخش کننده: {width}x{height}'
       Bitrate: 'نرخ بیت: {bitrate} کیلوبیت‌بر‌ثانیه'

static/locales/fr-FR.yaml

@@ -789,7 +789,7 @@ Video:
       Stats: Stats
       Video ID: 'Identifiant de la vidéo : {videoId}'
       Media Formats: 'Formats du média : {formats}'
-      Resolution: 'Résolution : {width}×{height}@{frameRate}'
+      Resolution: 'Résolution : {width}×{height}{''@''}{frameRate}'
       Player Dimensions: 'Dimensions du lecteur : {width}×{height}'
       Volume: 'Volume : {volumePercentage} %'
       Bandwidth: 'Bande passante : {bandwidth} kb/s'

static/locales/he.yaml

@@ -835,7 +835,7 @@ Video:
     Show Stats: הצג נתונים
     Stats:
       Video ID: 'ID סרטון: {videoId}'
-      Resolution: 'רזולוציה: {height}‎‏x‏{width}@{frameRate}'
+      Resolution: 'רזולוציה: {height}‎‏x‏{width}{''@''}{frameRate}'
       Stats: נתונים
       Media Formats: 'פורמטים מדיה: {formats}'
       Player Dimensions: 'ממדי הנגן: {height}x‏{width}'

static/locales/hr.yaml

@@ -827,7 +827,7 @@ Video:
       Stats: Statistika
       CodecsVideoAudio: 'Kodeci: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
       Bitrate: 'Brzina: {bitrate} kbps'
-      Resolution: 'Rezolucija: {width}x{height}@{frameRate}'
+      Resolution: 'Rezolucija: {width}x{height}{''@''}{frameRate}'
       CodecsVideoAudioNoItags: 'Kodeci: {videoCodec} / {audioCodec}'
       Volume: 'Glasnoća: {volumePercentage}%'
       Video ID: 'ID videa: {videoId}'

static/locales/hu.yaml

@@ -846,7 +846,7 @@ Video:
       CodecAudio: 'Kodek: {audioCodec} ({audioItag})'
       CodecsVideoAudioNoItags: 'Kodekek: {videoCodec} / {audioCodec}'
       Dropped Frames / Total Frames: 'Kihagyott képkockák: {droppedFrames} / Összes képkocka: {totalFrames}'
-      Resolution: 'Felbontás: {width}x{height}@{frameRate}'
+      Resolution: 'Felbontás: {width}x{height}{''@''}{frameRate}'
       CodecsVideoAudio: 'Kodekek: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
     You appear to be offline: Úgy tűnik, hogy jelenleg nem kapcsolódsz a hálózathoz.
     Skipped segment: Kihagyott {segmentCategory} szakasz

static/locales/id.yaml

@@ -839,7 +839,7 @@ Video:
       Dropped Frames / Total Frames: 'Frame yang Dihilangkan: {droppedFrames} / Jumlah Frame: {totalFrames}'
       Media Formats: 'Format Media: {formats}'
       CodecsVideoAudio: 'Kodek: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
-      Resolution: 'Resolusi: {width}x{height}@{frameRate}'
+      Resolution: 'Resolusi: {width}x{height}{''@''}{frameRate}'
       Player Dimensions: 'Dimensi Pemain: {width}x{height}'
       Stats: Statistik
       Bandwidth: 'bandwidth: {bandwidth} kbps'