Merge branch 'feature/playlist-2023-05' into custom-builds/current

* feature/playlist-2023-05: Translated using Weblate (Greek) Fix locales getting unnecessarily reprocessed for incremental builds (FreeTubeApp#3893) Fix the layout of the hashtag page (FreeTubeApp#3886) Translated using Weblate (French) Translated using Weblate (Swedish) Translated using Weblate (Indonesian) Translated using Weblate (Italian) Translated using Weblate (Portuguese (Brazil)) Translated using Weblate (Italian) Translated using Weblate (Portuguese) Cleanup some template conditionals (FreeTubeApp#3888) Add semantic roles to make the site more accessible (FreeTubeApp#3887) Translated using Weblate (Japanese) Fix Update Subscription Details function when channel name is null (FreeTubeApp#3884) Translated using Weblate (Spanish) Translated using Weblate (Romanian) Translated using Weblate (Hebrew) local API: Add support for PageHeader channel header (FreeTubeApp#3871) ! Fix invalid prop type warning Translated using Weblate (Chinese (Traditional))
PikachuEXE · Aug 19, 2023 · 892de1d · 892de1d
2 parents 823d84e + 83fe839
commit 892de1d
Show file tree

Hide file tree

Showing 48 changed files with 276 additions and 210 deletions.
diff --git a/_scripts/ProcessLocalesPlugin.js b/_scripts/ProcessLocalesPlugin.js
@@ -21,21 +21,30 @@ class ProcessLocalesPlugin {
     }
     this.outputDir = options.outputDir
 
+    this.locales = []
     this.localeNames = []
 
+    this.cache = []
+
     this.loadLocales()
   }
 
   apply(compiler) {
     compiler.hooks.thisCompilation.tap('ProcessLocalesPlugin', (compilation) => {
 
-      const { RawSource } = compiler.webpack.sources;
+      const IS_DEV_SERVER = !!compiler.watching
+      const { CachedSource, RawSource } = compiler.webpack.sources;
+
+      compilation.hooks.additionalAssets.tapPromise('process-locales-plugin', async (_assets) => {
 
-      compilation.hooks.processAssets.tapPromise({
-        name: 'process-locales-plugin',
-        stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
-      },
-        async (_assets) => {
+        // While running in the webpack dev server, this hook gets called for every incrememental build.
+        // For incremental builds we can return the already processed versions, which saves time
+        // and makes webpack treat them as cached
+        if (IS_DEV_SERVER && this.cache.length > 0) {
+          for (const { filename, source } of this.cache) {
+            compilation.emitAsset(filename, source, { minimized: true })
+          }
+        } else {
           const promises = []
 
           for (const { locale, data } of this.locales) {
@@ -54,24 +63,32 @@ class ProcessLocalesPlugin {
                 output = await this.compressLocale(output)
               }
 
-              compilation.emitAsset(
-                filename,
-                new RawSource(output),
-                { minimized: true }
-              )
+              let source = new RawSource(output)
+
+              if (IS_DEV_SERVER) {
+                source = new CachedSource(source)
+                this.cache.push({ filename, source })
+              }
+
+              compilation.emitAsset(filename, source, { minimized: true })
 
               resolve()
             }))
           }
 
           await Promise.all(promises)
-        })
+
+          if (IS_DEV_SERVER) {
+            // we don't need the unmodified sources anymore, as we use the cache `this.cache`
+            // so we can clear this to free some memory
+            delete this.locales
+          }
+        }
+      })
     })
   }
 
   loadLocales() {
-    this.locales = []
-
     const activeLocales = JSON.parse(readFileSync(`${this.inputDir}/activeLocales.json`))
 
     for (const locale of activeLocales) {

diff --git a/src/renderer/App.js b/src/renderer/App.js
@@ -64,7 +64,7 @@ export default defineComponent({
       return this.$store.getters.getShowProgressBar
     },
     isRightAligned: function () {
-      return this.$i18n.locale === 'ar'
+      return this.locale === 'ar' || this.locale === 'he'
     },
     checkForUpdates: function () {
       return this.$store.getters.getCheckForUpdates
@@ -112,6 +112,10 @@ export default defineComponent({
       return this.$store.getters.getSecColor
     },
 
+    locale: function() {
+      return this.$i18n.locale.replace('_', '-')
+    },
+
     systemTheme: function () {
       return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
     },
@@ -136,6 +140,8 @@ export default defineComponent({
 
     secColor: 'checkThemeSettings',
 
+    locale: 'setLocale',
+
     $route () {
       // react to route changes...
       // Hide top nav filter panel on page change
@@ -145,6 +151,7 @@ export default defineComponent({
   created () {
     this.checkThemeSettings()
     this.setWindowTitle()
+    this.setLocale()
   },
   mounted: function () {
     this.grabUserSettings().then(async () => {
@@ -510,6 +517,10 @@ export default defineComponent({
       }
     },
 
+    setLocale: function() {
+      document.documentElement.setAttribute('lang', this.locale)
+    },
+
     /**
      * provided to all child components, see `provide` near the top of this file
      * after injecting it, they can show outlines during keyboard navigation

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -11,6 +11,7 @@
     <side-nav ref="sideNav" />
     <ft-flex-box
       class="flexBox routerView"
+      role="main"
     >
       <div
         v-if="showUpdatesBanner || showBlogBanner"

diff --git a/src/renderer/components/data-settings/data-settings.js b/src/renderer/components/data-settings/data-settings.js
@@ -9,6 +9,7 @@ import { MAIN_PROFILE_ID } from '../../../constants'
 import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
 import {
   copyToClipboard,
+  deepCopy,
   escapeHTML,
   getTodayDateStrLocalTimezone,
   readFileFromDialog,
@@ -69,7 +70,7 @@ export default defineComponent({
       ]
     },
     primaryProfile: function () {
-      return JSON.parse(JSON.stringify(this.profileList[0]))
+      return deepCopy(this.profileList[0])
     }
   },
   methods: {
@@ -174,7 +175,7 @@ export default defineComponent({
             })
 
             if (existingProfileIndex !== -1) {
-              const existingProfile = JSON.parse(JSON.stringify(this.profileList[existingProfileIndex]))
+              const existingProfile = deepCopy(this.profileList[existingProfileIndex])
               existingProfile.subscriptions = existingProfile.subscriptions.concat(profileObject.subscriptions)
               existingProfile.subscriptions = existingProfile.subscriptions.filter((sub, index) => {
                 const profileIndex = existingProfile.subscriptions.findIndex((x) => {

diff --git a/src/renderer/components/download-settings/download-settings.vue b/src/renderer/components/download-settings/download-settings.vue
@@ -11,35 +11,38 @@
         @change="updateDownloadBehavior"
       />
     </ft-flex-box>
-    <ft-flex-box
+    <template
       v-if="downloadBehavior === 'download'"
-      class="settingsFlexStart500px"
     >
-      <ft-toggle-switch
-        :label="$t('Settings.Download Settings.Ask Download Path')"
-        :default-value="askForDownloadPath"
-        @change="handleDownloadingSettingChange"
-      />
-    </ft-flex-box>
-    <ft-flex-box
-      v-if="!askForDownloadPath && downloadBehavior === 'download'"
-    >
-      <ft-input
-        class="folderDisplay"
-        :placeholder="downloadPath"
-        :show-action-button="false"
-        :show-label="false"
-        :disabled="true"
-      />
-    </ft-flex-box>
-    <ft-flex-box
-      v-if="!askForDownloadPath && downloadBehavior === 'download'"
-    >
-      <ft-button
-        :label="$t('Settings.Download Settings.Choose Path')"
-        @click="chooseDownloadingFolder"
-      />
-    </ft-flex-box>
+      <ft-flex-box
+        class="settingsFlexStart500px"
+      >
+        <ft-toggle-switch
+          :label="$t('Settings.Download Settings.Ask Download Path')"
+          :default-value="askForDownloadPath"
+          @change="handleDownloadingSettingChange"
+        />
+      </ft-flex-box>
+      <template
+        v-if="!askForDownloadPath"
+      >
+        <ft-flex-box>
+          <ft-input
+            class="folderDisplay"
+            :placeholder="downloadPath"
+            :show-action-button="false"
+            :show-label="false"
+            :disabled="true"
+          />
+        </ft-flex-box>
+        <ft-flex-box>
+          <ft-button
+            :label="$t('Settings.Download Settings.Choose Path')"
+            @click="chooseDownloadingFolder"
+          />
+        </ft-flex-box>
+      </template>
+    </template>
   </ft-settings-section>
 </template>
 

diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
@@ -50,6 +50,7 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :spellcheck="spellcheck"
+        :aria-label="!showLabel ? placeholder : null"
         @input="e => handleInput(e.target.value)"
         @focus="handleFocus"
         @blur="handleInputBlur"

diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.vue b/src/renderer/components/ft-list-channel/ft-list-channel.vue
@@ -11,6 +11,7 @@
       <router-link
         :to="`/channel/${id}`"
         tabindex="-1"
+        aria-hidden="true"
       >
         <img
           :src="thumbnail"
@@ -24,7 +25,9 @@
         class="title"
         :to="`/channel/${id}`"
       >
-        {{ channelName }}
+        <h3 class="h3Title">
+          {{ channelName }}
+        </h3>
       </router-link>
       <div class="infoLine">
         <span

diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
@@ -10,6 +10,8 @@
       <router-link
         class="thumbnailLink"
         :to="`/playlist/${playlistId}`"
+        tabindex="-1"
+        aria-hidden="true"
       >
         <img
           alt=""
@@ -32,7 +34,9 @@
         class="title"
         :to="`/playlist/${playlistId}`"
       >
-        {{ titleForDisplay }}
+        <h3 class="h3Title">
+          {{ titleForDisplay }}
+        </h3>
       </router-link>
       <div class="infoLine">
         <router-link

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -105,7 +105,7 @@
           query: playlistIdFinal ? {playlistId: playlistIdFinal} : {}
         }"
       >
-        {{ displayTitle }}
+        <h3 class="h3Title">{{ displayTitle }}</h3>
       </router-link>
       <div class="infoLine">
         <router-link

diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
@@ -6,7 +6,7 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubble.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
-import { showToast } from '../../helpers/utils'
+import { deepCopy, showToast } from '../../helpers/utils'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default defineComponent({
@@ -64,48 +64,38 @@ export default defineComponent({
         this.$t('Yes'),
         this.$t('No')
       ]
-    }
+    },
+    locale: function () {
+      return this.$i18n.locale.replace('_', '-')
+    },
   },
   watch: {
     profile: function () {
-      this.subscriptions = JSON.parse(JSON.stringify(this.profile.subscriptions)).sort((a, b) => {
-        const nameA = a.name.toLowerCase()
-        const nameB = b.name.toLowerCase()
-        if (nameA < nameB) {
-          return -1
-        }
-        if (nameA > nameB) {
-          return 1
-        }
-        return 0
-      }).map((channel) => {
+      const subscriptions = deepCopy(this.profile.subscriptions).sort((a, b) => {
+        return a.name?.toLowerCase().localeCompare(b.name?.toLowerCase(), this.locale)
+      })
+      subscriptions.forEach((channel) => {
         if (this.backendPreference === 'invidious') {
           channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
-        return channel
       })
+
+      this.subscriptions = subscriptions
     }
   },
   mounted: function () {
     if (typeof this.profile.subscriptions !== 'undefined') {
-      this.subscriptions = JSON.parse(JSON.stringify(this.profile.subscriptions)).sort((a, b) => {
-        const nameA = a.name.toLowerCase()
-        const nameB = b.name.toLowerCase()
-        if (nameA < nameB) {
-          return -1
-        }
-        if (nameA > nameB) {
-          return 1
-        }
-        return 0
-      }).map((channel) => {
+      const subscriptions = deepCopy(this.profile.subscriptions).sort((a, b) => {
+        return a.name?.toLowerCase().localeCompare(b.name?.toLowerCase(), this.locale)
+      })
+      subscriptions.forEach((channel) => {
         if (this.backendPreference === 'invidious') {
           channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
-        return channel
       })
+      this.subscriptions = subscriptions
     }
   },
   methods: {
@@ -129,7 +119,7 @@ export default defineComponent({
           })
 
           this.profileList.forEach((x) => {
-            const profile = JSON.parse(JSON.stringify(x))
+            const profile = deepCopy(x)
             profile.subscriptions = profile.subscriptions.filter((channel) => {
               const index = channelsToRemove.findIndex((y) => {
                 return y.id === channel.id
@@ -143,7 +133,7 @@ export default defineComponent({
           showToast(this.$t('Profile.Profile has been updated'))
           this.selectNone()
         } else {
-          const profile = JSON.parse(JSON.stringify(this.profile))
+          const profile = deepCopy(this.profile)
 
           this.subscriptions = this.subscriptions.filter((channel) => {
             return !channel.selected