Merge branch 'development' of github.com:FreeTubeApp/FreeTube into fe…

…at/add-page-bookmarking

README.md

@@ -150,14 +150,10 @@ If you ever have any questions, feel free to ask it on our [Discussions](https:/
 > Don't forget to check out the [rules](https://docs.freetubeapp.io/community/matrix/) before joining.
 
 ## Donate
-If you enjoy using FreeTube, you're welcome to leave a donation using the following methods.  
-
-* [FreeTube on Liberapay](https://liberapay.com/FreeTube)
+If you enjoy using FreeTube, you're welcome to leave a donation using the following method.  
 
 * Bitcoin Address: `1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS`
 
-* Monero Address: `48WyAPdjwc6VokeXACxSZCFeKEXBiYPV6GjfvBsfg4CrUJ95LLCQSfpM9pvNKy5GE5H4hNaw99P8RZyzmaU9kb1pD7kzhCB`
-
 While your donations are much appreciated, only donate if you really want to.  Donations are used for keeping the website up and running and eventual code signing costs. 
 
 > [!TIP]

_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.20.0",
+  "version": "0.21.0",
   "license": "AGPL-3.0-or-later",
   "main": "./dist/main.js",
   "private": true,
@@ -92,7 +92,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "electron": "^31.0.1",
+    "electron": "^31.0.2",
     "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -104,30 +104,30 @@
     "eslint-plugin-promise": "^6.2.0",
     "eslint-plugin-unicorn": "^54.0.0",
     "eslint-plugin-vue": "^9.26.0",
-    "eslint-plugin-vuejs-accessibility": "^2.3.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.6.18",
     "mini-css-extract-plugin": "^2.9.0",
     "npm-run-all2": "^6.2.0",
     "postcss": "^8.4.38",
     "postcss-scss": "^4.0.9",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.7",
-    "sass": "^1.77.5",
+    "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "stylelint": "^16.6.1",
     "stylelint-config-sass-guidelines": "^11.1.0",
-    "stylelint-config-standard": "^36.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.92.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
     "yaml-eslint-parser": "^1.2.3"

src/constants.js

@@ -110,9 +110,6 @@ const SEARCH_CHAR_LIMIT = 100
 // Displayed on the about page and used in the main.js file to only allow bitcoin URLs with this wallet address to be opened
 const ABOUT_BITCOIN_ADDRESS = '1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS'
 
-// Displayed on the about page and used in the main.js file to only allow monero URLs with this wallet address to be opened
-const ABOUT_MONERO_ADDRESS = '48WyAPdjwc6VokeXACxSZCFeKEXBiYPV6GjfvBsfg4CrUJ95LLCQSfpM9pvNKy5GE5H4hNaw99P8RZyzmaU9kb1pD7kzhCB'
-
 export {
   IpcChannels,
   DBActions,
@@ -122,5 +119,4 @@ export {
   PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD,
   SEARCH_CHAR_LIMIT,
   ABOUT_BITCOIN_ADDRESS,
-  ABOUT_MONERO_ADDRESS
 }

src/main/index.js

@@ -11,7 +11,6 @@ import {
   DBActions,
   SyncEvents,
   ABOUT_BITCOIN_ADDRESS,
-  ABOUT_MONERO_ADDRESS
 } from '../constants'
 import * as baseHandlers from '../datastores/handlers/base'
 import { extractExpiryTimestamp, ImageCache } from './ImageCache'
@@ -410,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']
@@ -882,8 +883,7 @@ function runApp() {
         parsedURL.protocol === 'tel:' ||
 
         // Donation links on the about page
-        (parsedURL.protocol === 'bitcoin:' && parsedURL.pathname === ABOUT_BITCOIN_ADDRESS) ||
-        (parsedURL.protocol === 'monero:' && parsedURL.pathname === ABOUT_MONERO_ADDRESS)
+        (parsedURL.protocol === 'bitcoin:' && parsedURL.pathname === ABOUT_BITCOIN_ADDRESS)
       ) {
         shell.openExternal(url)
         return true

src/renderer/components/subscription-settings/subscription-settings.vue

@@ -35,7 +35,7 @@
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
-          :label="$t('Settings.Subscription Settings.Avoid Accidental Unsubscription')"
+          :label="$t('Settings.Subscription Settings.Confirm Before Unsubscribing')"
           :default-value="unsubscriptionPopupStatus"
           :compact="true"
           @change="updateUnsubscriptionPopupStatus"

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

@@ -21,9 +21,9 @@
   inline-size: 100%;
   z-index: 4;
 
-  @media only screen and (width >= 961px) {
+  @media only screen and (width >= 1162px) {
     display: grid;
-    grid-template-columns: 1fr 440px 0.5fr 0.5fr;
+    grid-template-columns: 1fr 720px 0.5fr 0.5fr;
   }
 
   @include top-nav-is-colored {
@@ -200,7 +200,7 @@
 
 .middle {
   flex: 1;
-  max-inline-size: 440px;
+  max-inline-size: 720px;
 
   .searchContainer {
     align-items: center;

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

@@ -63,7 +63,7 @@ export default defineComponent({
       }
     }
   },
-  mounted: function () {
+  created: function () {
     this.currentIndex = this.currentChapterIndex
   },
   methods: {

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

@@ -133,7 +133,7 @@ export default defineComponent({
       return this.$store.getters.getActiveProfile.subscriptions
     }
   },
-  mounted: function () {
+  created: function () {
     // region No comment detection
     // For videos without any comment (comment disabled?)
     // e.g. https://youtu.be/8NBSwDEf8a8

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

@@ -25,7 +25,7 @@ export default defineComponent({
       shownDescription: ''
     }
   },
-  mounted: function () {
+  created: function () {
     if (this.descriptionHtml !== '') {
       const parsed = this.parseDescriptionHtml(this.descriptionHtml)
 
@@ -50,26 +50,25 @@ export default defineComponent({
       this.$emit('timestamp-event', timestamp)
     },
     parseDescriptionHtml: function (descriptionText) {
-      descriptionText = descriptionText.replaceAll('target="_blank"', '')
-      descriptionText = descriptionText.replaceAll(/\/redirect.+?(?=q=)/g, '')
-      descriptionText = descriptionText.replaceAll('q=', '')
-      descriptionText = descriptionText.replaceAll(/rel="nofollow\snoopener"/g, '')
-      descriptionText = descriptionText.replaceAll(/class=.+?(?=")./g, '')
-      descriptionText = descriptionText.replaceAll(/id=.+?(?=")./g, '')
-      descriptionText = descriptionText.replaceAll(/data-target-new-window=.+?(?=")./g, '')
-      descriptionText = descriptionText.replaceAll(/data-url=.+?(?=")./g, '')
-      descriptionText = descriptionText.replaceAll(/data-sessionlink=.+?(?=")./g, '')
-      descriptionText = descriptionText.replaceAll('&', '&')
-      descriptionText = descriptionText.replaceAll('%3A', ':')
-      descriptionText = descriptionText.replaceAll('%2F', '/')
-      descriptionText = descriptionText.replaceAll(/&v.+?(?=")/g, '')
-      descriptionText = descriptionText.replaceAll(/&redirect-token.+?(?=")/g, '')
-      descriptionText = descriptionText.replaceAll(/&redir_token.+?(?=")/g, '')
-      descriptionText = descriptionText.replaceAll('href="/', 'href="https://www.youtube.com/')
-      descriptionText = descriptionText.replaceAll('href="/hashtag/', 'href="https://wwww.youtube.com/hashtag/')
-      descriptionText = descriptionText.replaceAll('yt.www.watch.player.seekTo', 'changeDuration')
-
       return descriptionText
+        .replaceAll('target="_blank"', '')
+        .replaceAll(/\/redirect.+?(?=q=)/g, '')
+        .replaceAll('q=', '')
+        .replaceAll(/rel="nofollow\snoopener"/g, '')
+        .replaceAll(/class=.+?(?=")./g, '')
+        .replaceAll(/id=.+?(?=")./g, '')
+        .replaceAll(/data-target-new-window=.+?(?=")./g, '')
+        .replaceAll(/data-url=.+?(?=")./g, '')
+        .replaceAll(/data-sessionlink=.+?(?=")./g, '')
+        .replaceAll('&', '&')
+        .replaceAll('%3A', ':')
+        .replaceAll('%2F', '/')
+        .replaceAll(/&v.+?(?=")/g, '')
+        .replaceAll(/&redirect-token.+?(?=")/g, '')
+        .replaceAll(/&redir_token.+?(?=")/g, '')
+        .replaceAll('href="/', 'href="https://www.youtube.com/')
+        .replaceAll('href="/hashtag/', 'href="https://wwww.youtube.com/hashtag/')
+        .replaceAll('yt.www.watch.player.seekTo', 'changeDuration')
     }
   }
 })

src/renderer/components/watch-video-live-chat/watch-video-live-chat.js

@@ -306,18 +306,16 @@ export default defineComponent({
       }
     },
 
-    onScroll: function (event) {
+    onScroll: function (event, isScrollEnd = false) {
       const liveChatComments = this.$refs.liveChatComments
       if (event.wheelDelta >= 0 && this.stayAtBottom) {
         this.stayAtBottom = false
 
         if (liveChatComments.scrollHeight > liveChatComments.clientHeight) {
           this.showScrollToBottom = true
         }
-      } else if (event.wheelDelta < 0 && !this.stayAtBottom) {
-        if ((liveChatComments.scrollHeight - liveChatComments.scrollTop) === liveChatComments.clientHeight) {
-          this.scrollToBottom()
-        }
+      } else if ((isScrollEnd || event.wheelDelta < 0) && !this.stayAtBottom && (liveChatComments.scrollHeight - liveChatComments.scrollTop) === liveChatComments.clientHeight) {
+        this.scrollToBottom()
       }
     },
 

src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue

@@ -128,6 +128,7 @@
         class="liveChatComments"
         :style="{ blockSize: chatHeight }"
         @mousewheel="e => onScroll(e)"
+        @scrollend="e => onScroll(e, true)"
       >
         <div
           v-for="(comment, index) in comments"

src/renderer/main.js

@@ -100,7 +100,6 @@ import {
   faBitcoin,
   faGithub,
   faMastodon,
-  faMonero
 } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import PortalVue from 'portal-vue'
@@ -200,7 +199,6 @@ library.add(
   faGithub,
   faBitcoin,
   faMastodon,
-  faMonero
 )
 
 registerSwiper()

src/renderer/views/About/About.js

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import packageDetails from '../../../../package.json'
-import { ABOUT_BITCOIN_ADDRESS, ABOUT_MONERO_ADDRESS } from '../../../constants'
+import { ABOUT_BITCOIN_ADDRESS } from '../../../constants'
 import FtLogoFull from '../../components/ft-logo-full/ft-logo-full.vue'
 
 export default defineComponent({
@@ -69,20 +69,10 @@ export default defineComponent({
           title: this.$t('About.Credits'),
           content: `${this.$t('About.FreeTube is made possible by')} <a href="https://docs.freetubeapp.io/credits/">${this.$t('About.these people and projects')}</a>`
         },
-        {
-          icon: ['fas', 'heart'],
-          title: `${this.$t('About.Donate')} - Liberapay`,
-          content: '<a href="https://liberapay.com/FreeTube">https://liberapay.com/FreeTube</a>'
-        },
         {
           icon: ['fab', 'bitcoin'],
           title: `${this.$t('About.Donate')} - BTC`,
           content: `<a href="bitcoin:${ABOUT_BITCOIN_ADDRESS}">${ABOUT_BITCOIN_ADDRESS}</a>`
-        },
-        {
-          icon: ['fab', 'monero'],
-          title: `${this.$t('About.Donate')} - XMR`,
-          content: `<a href="monero:${ABOUT_MONERO_ADDRESS}">${ABOUT_MONERO_ADDRESS}</a>`
         }
       ],
     }

static/locales/ar.yaml

@@ -463,7 +463,7 @@ Settings:
     How do I import my subscriptions?: 'كيف استورد اشتراكاتي؟'
     Fetch Automatically: جلب الخلاصة تلقائيا
     Only Show Latest Video for Each Channel: عرض أحدث فيديو فقط لكل قناة
-    Avoid Accidental Unsubscription: تجنب إلغاء الاشتراك عن طريق الخطأ
+    Confirm Before Unsubscribing: تجنب إلغاء الاشتراك عن طريق الخطأ
   Advanced Settings:
     Advanced Settings: 'الإعدادات المتقدمة'
     Enable Debug Mode (Prints data to the console): 'تمكين وضع التنقيح (يطبع البيانات

static/locales/bg.yaml

@@ -472,7 +472,7 @@ Settings:
     Fetch Automatically: Автоматично извличане на съдържание
     Only Show Latest Video for Each Channel: Показване само най-новите видеа за всеки
       канал
-    Avoid Accidental Unsubscription: Избягване на случайно отписване
+    Confirm Before Unsubscribing: Избягване на случайно отписване
   Data Settings:
     Data Settings: 'Настройки на данни'
     Select Import Type: 'Избор на тип за внасяне'

static/locales/cs.yaml

@@ -382,7 +382,7 @@ Settings:
       Solarized Green: Solarizovaná zelená
     Secondary Color Theme: 'Sekundární barva motivu'
         #* Main Color Theme
-    Hide Side Bar Labels: Skrýt štítky na bočním panelu
+    Hide Side Bar Labels: Skrýt popisky na bočním panelu
     Hide FreeTube Header Logo: Skrýt logo FreeTube v záhlaví
   Player Settings:
     Player Settings: 'Nastavení přehrávače'
@@ -468,7 +468,7 @@ Settings:
     Fetch Automatically: Automaticky načítat odběry
     Only Show Latest Video for Each Channel: U každého kanálu zobrazit pouze nejnovější
       video
-    Avoid Accidental Unsubscription: Zamezit nechtěným odběrům
+    Confirm Before Unsubscribing: Zamezit nechtěným odběrům
   Distraction Free Settings:
     Distraction Free Settings: 'Nastavení rozptylování'
     Hide Video Views: 'Skrýt počet přehrání videa'
@@ -1230,7 +1230,7 @@ Display Label: '{label}: {value}'
 Feed:
   Feed Last Updated: 'Zdroj {feedName} naposledy aktualizován: {date}'
   Refresh Feed: Obnovit {subscriptionName}
-Moments Ago: chvílí
+Moments Ago: před chvílí
 Yes, Delete: Ano, odstranit
 Yes, Restart: Ano, restartovat
 Yes, Open Link: Ano, otevřít odkaz

static/locales/de-DE.yaml

@@ -463,7 +463,7 @@ Settings:
     Fetch Automatically: Feed automatisch abrufen
     Only Show Latest Video for Each Channel: Nur das neueste Video für jeden Kanal
       anzeigen
-    Avoid Accidental Unsubscription: Unbeabsichtigtes Deabonnieren vermeiden
+    Confirm Before Unsubscribing: Unbeabsichtigtes Deabonnieren vermeiden
   Advanced Settings:
     Advanced Settings: Erweiterte Einstellungen
     Enable Debug Mode (Prints data to the console): Aktiviere Debug-Modus (Konsolenausgabe
@@ -1318,5 +1318,5 @@ Search Listing:
     4K: 4K
     Closed Captions: Geschlossene Untertitel
     Subtitles: Untertitel
-'Blocked opening potentially unsafe URL': Das Öffnen einer potenziell unsicheren URL
-  wurde blockiert:"{url}".
+'Blocked opening potentially unsafe URL': 'Das Öffnen einer potenziell unsicheren
+  URL wurde blockiert: „{url}“.'

static/locales/en-US.yaml

@@ -481,7 +481,7 @@ Settings:
     Manage Subscriptions: Manage Subscriptions
     Fetch Automatically: Fetch Feed Automatically
     Only Show Latest Video for Each Channel: Only Show Latest Video for Each Channel
-    Avoid Accidental Unsubscription: Avoid Accidental Unsubscription
+    Confirm Before Unsubscribing: Confirm Before Unsubscribing
   Distraction Free Settings:
     Distraction Free Settings: Distraction Free Settings
     Sections: