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

* development: (26 commits)
  Translated using Weblate (Portuguese)
  Ensure updated locales are auto-reloaded in electron renderer dev mode (FreeTubeApp#4066)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Russian)
  Translated using Weblate (Latvian)
  Added translation using Weblate (Latvian)
  Translated using Weblate (Portuguese)
  Bump sass from 1.69.3 to 1.69.4 (FreeTubeApp#4216)
  Bump the stylelint group with 1 update (FreeTubeApp#4214)
  Bump the eslint group with 2 updates (FreeTubeApp#4213)
  Bump vue from 2.7.14 to 2.7.15 (FreeTubeApp#4217)
  Bump electron from 27.0.0 to 27.0.2 (FreeTubeApp#4215)
  Translated using Weblate (Portuguese)
  Add logo hover styling (FreeTubeApp#4209)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Update CONTRIBUTING.md (FreeTubeApp#4208)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Samoan)
  ...

CONTRIBUTING.md

@@ -20,7 +20,7 @@ Please follow these guidelines before sending your pull request and making contr
 * 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 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 two 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.
+* 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.
 
 # Setting up Your Environment
 

_scripts/ProcessLocalesPlugin.js

@@ -1,4 +1,4 @@
-const { existsSync, readFileSync } = require('fs')
+const { existsSync, readFileSync, statSync } = require('fs')
 const { brotliCompress, constants } = require('zlib')
 const { promisify } = require('util')
 const { load: loadYaml } = require('js-yaml')
@@ -8,6 +8,7 @@ const brotliCompressAsync = promisify(brotliCompress)
 class ProcessLocalesPlugin {
   constructor(options = {}) {
     this.compress = !!options.compress
+    this.isIncrementalBuild = false
 
     if (typeof options.inputDir !== 'string') {
       throw new Error('ProcessLocalesPlugin: no input directory `inputDir` specified.')
@@ -21,10 +22,11 @@ class ProcessLocalesPlugin {
     }
     this.outputDir = options.outputDir
 
-    this.locales = []
+    this.locales = {}
     this.localeNames = []
+    this.activeLocales = []
 
-    this.cache = []
+    this.cache = {}
 
     this.loadLocales()
   }
@@ -37,66 +39,98 @@ class ProcessLocalesPlugin {
 
       compilation.hooks.additionalAssets.tapPromise('process-locales-plugin', async (_assets) => {
 
-        // While running in the webpack dev server, this hook gets called for every incrememental build.
+        // While running in the webpack dev server, this hook gets called for every incremental 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 })
-          }
+        const promises = []
+        // Prevents `loadLocales` called twice on first time (e.g. release build)
+        if (this.isIncrementalBuild) {
+          this.loadLocales(true)
         } else {
-          const promises = []
+          this.isIncrementalBuild = true
+        }
 
-          for (const { locale, data } of this.locales) {
-            promises.push(new Promise(async (resolve) => {
-              if (Object.prototype.hasOwnProperty.call(data, 'Locale Name')) {
-                delete data['Locale Name']
-              }
+        Object.values(this.locales).forEach((localeEntry) => {
+          const { locale, data, mtimeMs } = localeEntry
 
-              this.removeEmptyValues(data)
+          promises.push(new Promise(async (resolve) => {
+            if (IS_DEV_SERVER) {
+              const cacheEntry = this.cache[locale]
 
-              let filename = `${this.outputDir}/${locale}.json`
-              let output = JSON.stringify(data)
+              if (cacheEntry != null) {
+                const { filename, source, mtimeMs: cachedMtimeMs } = cacheEntry
 
-              if (this.compress) {
-                filename += '.br'
-                output = await this.compressLocale(output)
+                if (cachedMtimeMs === mtimeMs) {
+                  compilation.emitAsset(filename, source, { minimized: true })
+                  resolve()
+                  return
+                }
               }
+            }
 
-              let source = new RawSource(output)
+            if (Object.prototype.hasOwnProperty.call(data, 'Locale Name')) {
+              delete data['Locale Name']
+            }
 
-              if (IS_DEV_SERVER) {
-                source = new CachedSource(source)
-                this.cache.push({ filename, source })
-              }
+            this.removeEmptyValues(data)
 
-              compilation.emitAsset(filename, source, { minimized: true })
+            let filename = `${this.outputDir}/${locale}.json`
+            let output = JSON.stringify(data)
 
-              resolve()
-            }))
-          }
+            if (this.compress) {
+              filename += '.br'
+              output = await this.compressLocale(output)
+            }
+
+            let source = new RawSource(output)
+
+            if (IS_DEV_SERVER) {
+              source = new CachedSource(source)
+              this.cache[locale] = { filename, source, mtimeMs }
+            }
 
-          await Promise.all(promises)
+            compilation.emitAsset(filename, source, { minimized: true })
+
+            resolve()
+          }))
 
           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
+            delete localeEntry.data
           }
-        }
+        })
+
+        await Promise.all(promises)
       })
     })
   }
 
-  loadLocales() {
-    const activeLocales = JSON.parse(readFileSync(`${this.inputDir}/activeLocales.json`))
+  loadLocales(loadModifiedFilesOnly = false) {
+    if (this.activeLocales.length === 0) {
+      this.activeLocales = JSON.parse(readFileSync(`${this.inputDir}/activeLocales.json`))
+    }
 
-    for (const locale of activeLocales) {
-      const contents = readFileSync(`${this.inputDir}/${locale}.yaml`, 'utf-8')
+    for (const locale of this.activeLocales) {
+      const filePath = `${this.inputDir}/${locale}.yaml`
+      // Cannot use `mtime` since values never equal
+      const mtimeMsFromStats = statSync(filePath).mtimeMs
+      if (loadModifiedFilesOnly) {
+        // Skip reading files where mtime (modified time) same as last read
+        // (stored in mtime)
+        const existingMtime = this.locales[locale]?.mtimeMs
+        if (existingMtime != null && existingMtime === mtimeMsFromStats) {
+          continue
+        }
+      }
+      const contents = readFileSync(filePath, 'utf-8')
       const data = loadYaml(contents)
+      this.locales[locale] = { locale, data, mtimeMs: mtimeMsFromStats }
 
-      this.localeNames.push(data['Locale Name'] ?? locale)
-      this.locales.push({ locale, data })
+      const localeName = data['Locale Name'] ?? locale
+      if (!loadModifiedFilesOnly) {
+        this.localeNames.push(localeName)
+      }
     }
   }
 

_scripts/webpack.renderer.config.js

@@ -1,10 +1,12 @@
 const path = require('path')
+const { readFileSync } = require('fs')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const ProcessLocalesPlugin = require('./ProcessLocalesPlugin')
+const WatchExternalFilesPlugin = require('webpack-watch-external-files-plugin')
 
 const isDevMode = process.env.NODE_ENV === 'development'
 
@@ -128,7 +130,7 @@ const config = {
     new MiniCssExtractPlugin({
       filename: isDevMode ? '[name].css' : '[name].[contenthash].css',
       chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',
-    })
+    }),
   ],
   resolve: {
     alias: {
@@ -146,4 +148,16 @@ const config = {
   target: 'electron-renderer',
 }
 
+if (isDevMode) {
+  const activeLocales = JSON.parse(readFileSync(path.join(__dirname, '../static/locales/activeLocales.json')))
+
+  config.plugins.push(
+    new WatchExternalFilesPlugin({
+      files: [
+        `./static/locales/{${activeLocales.join(',')}}.yaml`,
+      ],
+    }),
+  )
+}
+
 module.exports = config

package.json

@@ -72,7 +72,7 @@
     "videojs-mobile-ui": "^0.8.0",
     "videojs-overlay": "^3.1.0",
     "videojs-vtt-thumbnails-freetube": "0.0.15",
-    "vue": "^2.7.14",
+    "vue": "^2.7.15",
     "vue-i18n": "^8.28.2",
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
@@ -90,12 +90,12 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "electron": "^27.0.0",
+    "electron": "^27.0.2",
     "electron-builder": "^24.6.4",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsonc": "^2.10.0",
     "eslint-plugin-n": "^16.2.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -114,9 +114,9 @@
     "postcss-scss": "^4.0.9",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.5",
-    "sass": "^1.69.3",
+    "sass": "^1.69.4",
     "sass-loader": "^13.3.2",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-high-performance-animation": "^1.9.0",
@@ -127,6 +127,7 @@
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
+    "webpack-watch-external-files-plugin": "^2.0.0",
     "yaml-eslint-parser": "^1.2.2"
   }
 }

src/renderer/components/top-nav/top-nav.scss

@@ -130,6 +130,16 @@
     padding-block: 0;
     padding-inline: 10px 25px;
 
+    &:hover {
+      background-color: var(--side-nav-hover-color);
+      color: var(--side-nav-hover-text-color);
+      transition: background 0.2s ease-in;
+
+      @include top-nav-is-colored {
+        background-color: var(--primary-color-hover);
+      }
+    }
+
     &:active {
       background-color: var(--tertiary-text-color);
       transition: background 0.2s ease-in;

static/locales/ar.yaml

@@ -1,5 +1,5 @@
 # Put the name of your locale in the same language
-Locale Name: 'العربية'
+Locale Name: 'الإنجليزية (الولايات المتحدة)'
 FreeTube: 'فري تيوب'
 # Currently on Subscriptions, Playlists, and History
 'This part of the app is not ready yet. Come back later when progress has been made.': >-
@@ -18,7 +18,7 @@ Delete: 'حذف'
 Select all: 'حدد الكل'
 Reload: 'إعادة تحميل'
 Force Reload: 'فرض إعادة التحميل'
-Toggle Developer Tools: 'فتح أدوات المطوّر'
+Toggle Developer Tools: 'إظهار/إخفاء أدوات المطوّر'
 Actual size: 'الحجم الأصلي'
 Zoom in: 'تكبير'
 Zoom out: 'تصغير'
@@ -34,22 +34,22 @@ Forward: 'إلى الأمام'
 Global:
   Videos: 'الفيديوهات'
   Shorts: القصيرة
-  Live: مباشر
+  Live: بث مباشر
   Community: المجتمع
 
 # Search Bar
   Counts:
     Video Count: 1 فيديو | {count} مقاطع فيديو
-    Channel Count: 1 قناة | {count} القنوات
-    Subscriber Count: 1 مشترك | {count} المشتركين
+    Channel Count: 1 قناة | {count} قنوات
+    Subscriber Count: 1 مشترك | {count} مشتركين
     View Count: 1 مشاهدة | {count} مشاهدات
-    Watching Count: 1 مشاهدة | {count} مشاهدة
+    Watching Count: 1 مشاهد | {count} مشاهدون
 Search / Go to URL: 'ابحث / اذهب إلى رابط'
   # In Filter Button
 Search Filters:
   Search Filters: 'فلاتر البحث'
   Sort By:
-    Sort By: 'فرز بحسب'
+    Sort By: 'ترتيب حسب'
     Most Relevant: 'الأكثر صلة'
     Rating: 'التقييم'
     Upload Date: 'تاريخ الرفع'