Merge branch 'development' into feature/subscription-cache

* development: (59 commits)
  Bump the stylelint group with 2 updates (FreeTubeApp#5411)
  Bump rimraf from 5.0.8 to 6.0.1 (FreeTubeApp#5412)
  Translated using Weblate (Indonesian)
  Bump the babel group across 1 directory with 3 updates (FreeTubeApp#5419)
  Bump sass from 1.77.6 to 1.77.8 (FreeTubeApp#5413)
  Bump webpack from 5.92.1 to 5.93.0 (FreeTubeApp#5414)
  Bump lefthook from 1.7.1 to 1.7.2 (FreeTubeApp#5415)
  Bump electron from 31.1.0 to 31.2.0 (FreeTubeApp#5416)
  Fix about page not reacting to locale changes (FreeTubeApp#5393)
  Delete .github/workflows/report.yml (FreeTubeApp#5395)
  Bump version number to v0.21.1
  Fix Invidious DASH manifest generation (FreeTubeApp#5387)
  ^ Update YouTube.js to 10.1.0 (FreeTubeApp#5384)
  Fix Invidious API error toasts saying undefined (FreeTubeApp#5380)
  Bump lefthook from 1.6.18 to 1.7.1 (FreeTubeApp#5376)
  Bump eslint-plugin-vue from 9.26.0 to 9.27.0 in the eslint group (FreeTubeApp#5371)
  Bump rimraf from 5.0.7 to 5.0.8 (FreeTubeApp#5373)
  Bump npm-run-all2 from 6.2.0 to 6.2.2 (FreeTubeApp#5374)
  Bump marked from 13.0.1 to 13.0.2 (FreeTubeApp#5375)
  Translated using Weblate (Portuguese (Brazil))
  ...

_scripts/webpack.renderer.config.js

@@ -150,8 +150,9 @@ 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'),
+      DB_HANDLERS_ELECTRON_RENDERER_OR_WEB$: path.resolve(__dirname, '../src/datastores/handlers/electron.js'),
 
       'youtubei.js$': 'youtubei.js/web',
 

_scripts/webpack.web.config.js

@@ -159,8 +159,9 @@ 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'),
+      DB_HANDLERS_ELECTRON_RENDERER_OR_WEB$: path.resolve(__dirname, '../src/datastores/handlers/web.js'),
 
       // video.js's mpd-parser uses @xmldom/xmldom so that it can support both node and web browsers
       // As FreeTube only runs in electron and web browsers, we can use the native DOMParser class, instead of the "polyfill"

package.json

@@ -2,7 +2,7 @@
   "name": "freetube",
   "productName": "FreeTube",
   "description": "A private YouTube client",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "license": "AGPL-3.0-or-later",
   "main": "./dist/main.js",
   "private": true,
@@ -61,9 +61,9 @@
     "@seald-io/nedb": "^4.0.4",
     "@silvermine/videojs-quality-selector": "^1.3.1",
     "autolinker": "^4.0.0",
-    "electron-context-menu": "^4.0.0",
+    "electron-context-menu": "^4.0.1",
     "lodash.debounce": "^4.0.8",
-    "marked": "^13.0.0",
+    "marked": "^13.0.2",
     "path-browserify": "^1.0.1",
     "portal-vue": "^2.1.7",
     "process": "^0.11.10",
@@ -79,20 +79,20 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2",
-    "youtubei.js": "^10.0.0"
+    "youtubei.js": "^10.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/eslint-parser": "^7.24.7",
+    "@babel/core": "^7.24.9",
+    "@babel/eslint-parser": "^7.24.8",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-env": "^7.24.8",
     "@double-great/stylelint-a11y": "^3.0.2",
     "@intlify/eslint-plugin-vue-i18n": "^3.0.0",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "electron": "^31.0.1",
+    "electron": "^31.2.0",
     "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -101,33 +101,33 @@
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-n": "^17.9.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-promise": "^6.4.0",
     "eslint-plugin-unicorn": "^54.0.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "eslint-plugin-vuejs-accessibility": "^2.3.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-vuejs-accessibility": "^2.3.1",
     "eslint-plugin-yml": "^1.14.0",
     "html-webpack-plugin": "^5.6.0",
     "js-yaml": "^4.1.0",
     "json-minimizer-webpack-plugin": "^5.0.0",
-    "lefthook": "^1.6.16",
+    "lefthook": "^1.7.2",
     "mini-css-extract-plugin": "^2.9.0",
-    "npm-run-all2": "^6.2.0",
-    "postcss": "^8.4.38",
+    "npm-run-all2": "^6.2.2",
+    "postcss": "^8.4.39",
     "postcss-scss": "^4.0.9",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.7",
-    "sass": "^1.77.5",
+    "rimraf": "^6.0.1",
+    "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
-    "stylelint": "^16.6.1",
-    "stylelint-config-sass-guidelines": "^11.1.0",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint": "^16.7.0",
+    "stylelint-config-sass-guidelines": "^12.0.0",
+    "stylelint-config-standard": "^36.0.1",
     "stylelint-high-performance-animation": "^1.10.0",
     "stylelint-use-logical-spec": "^5.0.1",
     "tree-kill": "1.2.2",
     "vue-devtools": "^5.1.4",
     "vue-eslint-parser": "^9.4.3",
     "vue-loader": "^15.10.0",
-    "webpack": "^5.92.0",
+    "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
     "yaml-eslint-parser": "^1.2.3"

src/main/index.js

@@ -409,6 +409,8 @@ function runApp() {
 
       if (url.startsWith('https://www.youtube.com/youtubei/')) {
         requestHeaders['Sec-Fetch-Site'] = 'same-origin'
+        requestHeaders['Sec-Fetch-Mode'] = 'same-origin'
+        requestHeaders['X-Youtube-Bootstrap-Logged-In'] = 'false'
       } else {
         // YouTube doesn't send the Content-Type header for the media requests, so we shouldn't either
         delete requestHeaders['Content-Type']
@@ -974,6 +976,13 @@ function runApp() {
 
     try {
       const contents = await asyncFs.readFile(filePath)
+
+      // Probably a corrupted/broken cache entry, pretend it's absent
+      // A valid entry should be a few KB large
+      if (contents.byteLength < 500) {
+        return undefined
+      }
+
       return contents.buffer
     } catch (e) {
       console.error(e)

src/renderer/App.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: Roboto;
-  src: url("assets/font/Roboto-Regular.ttf");
+  src: url('assets/font/Roboto-Regular.ttf');
 }
 
 .app {
@@ -45,11 +45,13 @@
   overflow-wrap: break-word;
 }
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .15s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s;
 }
 
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.fade-enter,
+.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 

src/renderer/components/experimental-settings/experimental-settings.css

@@ -1,5 +1,5 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-inline: 4% 4%
+  padding-inline: 4%;
 }

src/renderer/components/ft-age-restricted/ft-age-restricted.css

@@ -8,7 +8,8 @@
   padding-block: 20px;
 }
 
-.message, .frown {
+.message,
+.frown {
   color: var(--primary-text-color);
   background-color: var(--card-bg-color);
   padding-inline: 0;

src/renderer/components/ft-button/ft-button.css

@@ -34,7 +34,7 @@
 }
 
 .ripple::after {
-  content: "";
+  content: '';
   display: block;
   position: absolute;
   inline-size: 100%;
@@ -47,11 +47,11 @@
   background-position: 50%;
   transform: scale(10, 10);
   opacity: 0;
-  transition: transform .5s, opacity 1s;
+  transition: transform 0.5s, opacity 1s;
 }
 
 .ripple:active::after {
   transform: scale(0, 0);
-  opacity: .3;
+  opacity: 0.3;
   transition: 0s;
 }

src/renderer/components/ft-channel-bubble/ft-channel-bubble.css

@@ -34,7 +34,7 @@
 }
 
 .icon {
-  color: #EEE;
+  color: #eee;
   font-size: 25px;
   position: absolute;
   inset-block-start: 12px;

src/renderer/components/ft-checkbox-list/ft-checkbox-list.css

@@ -1,5 +1,5 @@
 /* stylelint-disable no-descending-specificity */
-.pure-checkbox input[type="checkbox"] {
+.pure-checkbox input[type='checkbox'] {
   border: 0;
   clip: rect(0 0 0 0);
   block-size: 1px;
@@ -10,13 +10,14 @@
   inline-size: 1px;
 }
 
-.pure-checkbox input[type="checkbox"]:focus + label::before, .pure-checkbox input[type="checkbox"]:hover + label::before {
+.pure-checkbox input[type='checkbox']:focus + label::before,
+.pure-checkbox input[type='checkbox']:hover + label::before {
   border: 2px solid var(--primary-color);
 }
 
-.pure-checkbox input[type="checkbox"]:active + label::before { transition-duration: 0s; }
+.pure-checkbox input[type='checkbox']:active + label::before { transition-duration: 0s; }
 
-.pure-checkbox input[type="checkbox"] + label {
+.pure-checkbox input[type='checkbox'] + label {
   position: relative;
   padding-inline-start: 2em;
   user-select: none;
@@ -25,7 +26,7 @@
   margin-block-start: 10px;
 }
 
-.pure-checkbox input[type="checkbox"] + label::before {
+.pure-checkbox input[type='checkbox'] + label::before {
   box-sizing: content-box;
   content: '';
   color: var(--primary-text-color);
@@ -40,7 +41,7 @@
   transition: all 0.4s ease;
 }
 
-.pure-checkbox input[type="checkbox"] + label::after {
+.pure-checkbox input[type='checkbox'] + label::after {
   box-sizing: content-box;
   border-style: solid;
   border-image: none;
@@ -58,34 +59,35 @@
   transition: transform 200ms ease-out;
 }
 
-.pure-checkbox input[type="checkbox"]:disabled + label::before { border-color: #ccc; }
+.pure-checkbox input[type='checkbox']:disabled + label::before { border-color: #ccc; }
 
-.pure-checkbox input[type="checkbox"]:disabled:focus + label::before, .pure-checkbox input[type="checkbox"]:disabled:hover + label::before { background-color: inherit; }
+.pure-checkbox input[type='checkbox']:disabled:focus + label::before,
+.pure-checkbox input[type='checkbox']:disabled:hover + label::before { background-color: inherit; }
 
-.pure-checkbox input[type="checkbox"]:disabled:checked + label::before { background-color: #ccc; }
+.pure-checkbox input[type='checkbox']:disabled:checked + label::before { background-color: #ccc; }
 
-.pure-checkbox input[type="checkbox"]:checked + label::after {
+.pure-checkbox input[type='checkbox']:checked + label::after {
   content: '';
   transform: rotate(-45deg) scale(1);
   transition: transform 200ms ease-out;
 }
 
-.pure-checkbox input[type="checkbox"]:checked + label::before {
+.pure-checkbox input[type='checkbox']:checked + label::before {
   animation: borderscale 200ms ease-in;
 }
 
 @keyframes
-borderscale {  50% {
- box-shadow: 0 0 0 2px var(--primary-text-color);
-}
+  borderscale {  50% {
+    box-shadow: 0 0 0 2px var(--primary-text-color);
+  }
 }
 
 .checkboxTitle {
   margin-block: 0;
 }
 
 @media only screen and (width <= 680px) {
-  .pure-checkbox input[type="checkbox"] + label {
+  .pure-checkbox input[type='checkbox'] + label {
     margin-block-start: 3px;
   }
 }

src/renderer/components/ft-community-poll/ft-community-poll.css

@@ -65,6 +65,7 @@
   cursor: pointer;
 }
 
-.reveal-answer:hover, .reveal-answer:focus {
-  background-color: var(--side-nav-hover-color)
+.reveal-answer:hover,
+.reveal-answer:focus {
+  background-color: var(--side-nav-hover-color);
 }

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

@@ -98,7 +98,9 @@
     }
   }
 
-  &.favorite, &.favorite:hover, &.favorite:focus-visible {
+  &.favorite,
+  &.favorite:hover,
+  &.favorite:focus-visible {
     &:not(.disabled) {
       color: var(--favorite-icon-color);
     }