Merge branch 'feature/playlist-layout-shift' into custom-builds/tmp

* feature/playlist-layout-shift:
  * Make video thumbnails have certain height before image loading starts to avoid layout shifts
  Translated using Weblate (Basque)
  Prevent layout shifts when thumbnails load in the chapter selector (FreeTubeApp#4713)
  Bump electron-builder from 24.9.1 to 24.12.0 (FreeTubeApp#4718)
  Bump sass-loader from 14.1.0 to 14.1.1 (FreeTubeApp#4719)
  Bump sass from 1.71.0 to 1.71.1 (FreeTubeApp#4716)
  Bump the eslint group with 2 updates (FreeTubeApp#4715)
  Support opening video timestamps in a new window (FreeTubeApp#4687)
  Translated using Weblate (Basque)
  Bump webpack-dev-server from 4.15.1 to 5.0.2 (FreeTubeApp#4695)
  Translated using Weblate (Japanese)
  Translated using Weblate (Czech)
  Translated using Weblate (Lithuanian)
  Translated using Weblate (Japanese)
  Translated using Weblate (Vietnamese)
  Bump youtubei.js to 9.1.0 for watch page fix (FreeTubeApp#4707)
  Translated using Weblate (Vietnamese)
  Translated using Weblate (Vietnamese)

_scripts/dev-runner.js

@@ -1,6 +1,5 @@
 process.env.NODE_ENV = 'development'
 
-const open = require('open')
 const electron = require('electron')
 const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
@@ -161,7 +160,8 @@ function startWeb (callback) {
 if (!web) {
   startRenderer(startMain)
 } else {
-  startWeb(({ port }) => {
+  startWeb(async ({ port }) => {
+    const open = (await import('open')).default
     open(`http://localhost:${port}`)
   })
 }

package.json

@@ -90,8 +90,8 @@
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "electron": "^28.2.3",
-    "electron-builder": "^24.9.1",
-    "eslint": "^8.56.0",
+    "electron-builder": "^24.12.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -100,7 +100,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-unicorn": "^51.0.1",
-    "eslint-plugin-vue": "^9.21.1",
+    "eslint-plugin-vue": "^9.22.0",
     "eslint-plugin-vuejs-accessibility": "^2.2.1",
     "eslint-plugin-yml": "^1.12.2",
     "html-webpack-plugin": "^5.6.0",
@@ -113,8 +113,8 @@
     "postcss-scss": "^4.0.9",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.5",
-    "sass": "^1.71.0",
-    "sass-loader": "^14.1.0",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
     "stylelint": "^16.2.1",
     "stylelint-config-sass-guidelines": "^11.0.0",
     "stylelint-config-standard": "^36.0.0",
@@ -126,7 +126,7 @@
     "vue-loader": "^15.10.0",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^5.0.2",
     "webpack-watch-external-files-plugin": "^3.0.0",
     "yaml-eslint-parser": "^1.2.2"
   }

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

@@ -105,6 +105,7 @@ export default defineComponent({
       hideViews: false,
       addToPlaylistPromptCloseCallback: null,
       debounceGetDeArrowThumbnail: null,
+      thumbnailLoaded: false,
     }
   },
   computed: {
@@ -857,6 +858,10 @@ export default defineComponent({
       showToast(this.$t('Video.Video has been removed from your saved list'))
     },
 
+    onThumbnailLoad() {
+      this.thumbnailLoaded = true
+    },
+
     ...mapActions([
       'openInExternalPlayer',
       'updateHistory',

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

@@ -3,3 +3,8 @@
 .thumbnailLink:hover {
   outline: 3px solid var(--side-nav-hover-color);
 }
+
+.thumbnailImage.thumbnailLoading {
+  // Makes img element sized correctly before image loading starts
+  aspect-ratio: 16 / 9;
+}

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

@@ -19,8 +19,12 @@
         <img
           :src="thumbnail"
           class="thumbnailImage"
+          :class="{
+            thumbnailLoading: !thumbnailLoaded,
+          }"
           alt=""
           :style="{filter: blurThumbnailsStyle}"
+          @load="onThumbnailLoad"
         >
       </router-link>
       <div

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

@@ -54,7 +54,6 @@
 .chapterThumbnail {
   grid-area: thumbnail;
   inline-size: 130px;
-  block-size: auto;
   margin: 3px;
 }
 

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

@@ -46,13 +46,15 @@
         @keydown.space.stop.prevent="changeChapter(index)"
         @keydown.enter.stop.prevent="changeChapter(index)"
       >
+        <!-- Setting the aspect ratio avoids layout shifts when the images load -->
         <img
           v-if="!compact"
           alt=""
           aria-hidden="true"
           class="chapterThumbnail"
           loading="lazy"
-          :src="chapter.thumbnail"
+          :src="chapter.thumbnail.url"
+          :style="{ aspectRatio: chapter.thumbnail.width / chapter.thumbnail.height }"
         >
         <div class="chapterTimestamp">
           {{ chapter.timestamp }}

src/renderer/views/Watch/Watch.js

@@ -450,7 +450,7 @@ export default defineComponent({
                 timestamp: formatDurationAsTimestamp(start),
                 startSeconds: start,
                 endSeconds: 0,
-                thumbnail: chapter.thumbnail[0].url
+                thumbnail: chapter.thumbnail[0]
               })
             }
           } else {

static/locales/cs.yaml

@@ -234,7 +234,7 @@ Settings:
   General Settings:
     General Settings: 'Obecné nastavení'
     Check for Updates: 'Kontrolovat aktualizace'
-    Check for Latest Blog Posts: 'Kontrolovat nejnovější příspěvky blogů'
+    Check for Latest Blog Posts: 'Kontrolovat nejnovější příspěvky na blogu'
     Fallback to Non-Preferred Backend on Failure: 'Při chybě přepnout na nepreferovaný
       backend'
     Enable Search Suggestions: 'Zapnout návrhy vyhledávání'

static/locales/eu.yaml

@@ -34,6 +34,17 @@ Forward: 'Aurrera'
 Global:
   Videos: 'Bideoak'
 
+  Counts:
+    Subscriber Count: 1.harpideduna| {count} harpidedun
+    Watching Count: 1. ikuslea | {count} ikusle
+    Channel Count: 1. kanala ! {count} kanal
+    Video Count: 1. bideoa | {count} bideo
+    View Count: 1. ikustaldia | {count} ikustaldi
+  Live: Zuzenekoa
+  Shorts: Laburrak
+  Input Tags:
+    Length Requirement: Etiketak {zenbaki} karaktere izan behar ditu gutxienez
+  Community: Komunitatea
 Version {versionNumber} is now available!  Click for more details: '{versionNumber}
   bertsioa erabilgarri! Klikatu azalpen gehiagorako'
 Download From Site: 'Webgunetik jaitsi'
@@ -90,6 +101,14 @@ Subscriptions:
   Refresh Subscriptions: 'Harpidetzak freskatu'
   Load More Videos: 'Bideo gehiago kargatu'
   Error Channels: Akatsak dituzten kateak
+  Disabled Automatic Fetching: Harpidetza-bilaketa automatikoa desgaitu duzu. Freskatu
+    harpidetzak hemen ikusteko.
+  Empty Channels: Harpidetutako kanalek ez dute bideorik.
+  Empty Posts: Harpidetutako kanalek ez dute argitalpenik.
+  Load More Posts: Kargatu mezu gehiago
+  Subscriptions Tabs: Harpidetzen fitxak
+  All Subscription Tabs Hidden: Harpidetza fitxa guztiak ezkutatuta daude. Hemen edukia
+    ikusteko, erakutsi fitxa batzuk "{azpisection}" ataleko "{settingsSection}"-ean.
 More: 'Gehiago'
 Trending:
   Trending: 'Joerak'
@@ -111,6 +130,24 @@ User Playlists:
   Search bar placeholder: Bilatu Erreprodukzio-zerrendan
   Empty Search Message: Erreprodukzio-zerrenda honetan ez dago zure bilaketarekin
     bat datorren bideorik
+  Remove Watched Videos: Kendu ikusitako bideoak
+  You have no playlists. Click on the create new playlist button to create a new one.: Ez
+    duzu erreprodukzio-zerrendarik. Egin klik sortu erreprodukzio-zerrenda berria
+    botoian berri bat sortzeko.
+  This playlist currently has no videos.: Erreprodukzio-zerrenda honek ez du bideorik.
+  Create New Playlist: Sortu erreprodukzio zerrenda berria
+  Add to Playlist: Gehitu erreprodukzio zerrendara
+  Add to Favorites: Gehitu {playlistName}-ra
+  Remove from Favorites: Kendu {playlistName}tik
+  Move Video Up: Mugitu bideoa gora
+  Move Video Down: Mugitu bideoa behera
+  Remove from Playlist: Kendu erreprodukzio zerrendatik
+  Playlist Name: Erreprodukzio zerrendaren izena
+  Playlist Description: Erreprodukzio-zerrendaren deskribapena
+  Save Changes: Gorde aldaketak
+  Cancel: Utzi
+  Edit Playlist Info: Editatu erreprodukzio zerrendaren informazioa
+  Copy Playlist: Kopiatu Erreprodukzio zerrenda
 History:
   # On History Page
   History: 'Historikoa'
@@ -828,3 +865,5 @@ Channels:
   Count: '{number} kanal aurkitu dira.'
   Empty: Zure kanalen zerrenda hutsik da.
 Preferences: Hobespenak
+Go to page: Joan {page}-ra
+Close Banner: Itxi iragarkia

static/locales/ja.yaml

@@ -114,6 +114,10 @@ User Playlists:
     このページは、完全に動作する動画リストではありません。保存またはお気に入りと設定した動画のみが表示されます。操作が完了すると、現在ここにあるすべての動画は「お気に入り」の動画リストに移動します。
   Search bar placeholder: 動画リスト内の検索
   Empty Search Message: この再生リストに、検索に一致する動画はありません
+  This playlist currently has no videos.: 存在、この再生リストには動画があっていません。
+  Create New Playlist: 新規再生リストを作られる
+  Sort By:
+    NameAscending: A-Z
 History:
   # On History Page
   History: '履歴'
@@ -276,7 +280,7 @@ Settings:
       Folder Button: フォルダーの選択
     Enter Fullscreen on Display Rotate: 横画面時にフルスクリーンにする
     Skip by Scrolling Over Video Player: 動画プレーヤーでスクロールしてスキップ可能にする
-    Allow DASH AV1 formats: DASH AV1形式を許可する
+    Allow DASH AV1 formats: DASH AV1形式を許可
     Comment Auto Load:
       Comment Auto Load: コメント自動読み込み
   Subscription Settings:
@@ -850,7 +854,7 @@ The playlist has been reversed: 再生リストを逆順にしました
 A new blog is now available, {blogTitle}. Click to view more: '新着ブログ公開、{blogTitle}。クリックしてブログを読む'
 Download From Site: サイトからダウンロード
 Version {versionNumber} is now available!  Click for more details: 最新バージョン {versionNumber}
-  配信中！　詳細はクリックして確認してください
+  配信中！詳細はクリックして確認してください
 This video is unavailable because of missing formats. This can happen due to country unavailability.: この動画は、動画形式の情報が利用できないため再生できません。再生が許可されていない国で発生します。
 Tooltips:
   Subscription Settings:
@@ -866,8 +870,8 @@ Tooltips:
     Scroll Playback Rate Over Video Player: カーソルが動画上にあるとき、Ctrl キー（Mac では Command キー）を押したまま、マウスホイールを前後にスクロールして再生速度を調整します。Control
       キー（Mac では Command キー）を押したままマウスを左クリックすると、すぐにデフォルトの再生速度（設定を変更していない場合は 1 x）に戻ります。
     Skip by Scrolling Over Video Player: スクロール ホイールを使用して、ビデオ、MPV スタイルをスキップします。
-    Allow DASH AV1 formats: DASH H.264形式よりDASH AV1形式の方がきれいに見える可能性があるけど、再生には必要な電力がより多い。全ての動画でDASH
-      AV1を利用できないため、プレイヤーはDASH H.264形式に自動変更する場合があります。
+    Allow DASH AV1 formats: DASH H.264形式よりもDASH AV1形式の方がきれいに見える可能性がありますが、再生にはより多くの処理能力が必要となります。DASH
+      AV1形式を使用できない場合、プレイヤーはDASH H.264形式を自動で使用します。
   General Settings:
     Invidious Instance: FreeTube が使用する Invidious API の接続先サーバーです。
     Preferred API Backend: FreeTube が youtube からデータを取得する方法を選択します。「内部 API」とはアプリから取得する方法です。「Invidious
@@ -941,3 +945,5 @@ Hashtag:
   This hashtag does not currently have any videos: このハッシュタグには現在動画がありません
 Playlist will pause when current video is finished: 現在のビデオが終了すると、プレイリストは停止します
 Playlist will not pause when current video is finished: 現在のビデオが終了しても、プレイリストは停止しません
+Close Banner: バナーを閉じる
+Go to page: '{page}に行く'

static/locales/lt.yaml

@@ -41,6 +41,7 @@ Global:
   Counts:
     Subscriber Count: 1 prenumeruoti | {count} prenumeratorių
     Channel Count: 1 kanalas | {count} kanalai
+    Video Count: 1 vaizdo įrašas | {count} vaizdo įrašai
 Version {versionNumber} is now available!  Click for more details: 'Versija {versionNumber}
   jau prieinama!  Spustelėkite, jei norite gauti daugiau informacijos'
 Download From Site: 'Atsisiųsti iš svetainės'
@@ -904,3 +905,4 @@ Clipboard:
     be saugaus ryšio
 Preferences: Nuostatos
 Go to page: Eiti į {page}
+Close Banner: Uždaryti baneris