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

…at/add-page-bookmarking

.eslintrc.js

@@ -112,6 +112,9 @@ module.exports = {
         ignoreText: ['-', '•', '/', 'YouTube', 'Invidious', 'FreeTube']
       }
     ],
+    // Only applicable when we upgrade to Vue 3 and vue-i18n 9+
+    '@intlify/vue-i18n/no-deprecated-tc': 'off',
+
     'vue/require-explicit-emits': 'error',
     'vue/no-unused-emit-declarations': 'error',
   },

package.json

@@ -79,15 +79,15 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2",
-    "youtubei.js": "^9.4.0"
+    "youtubei.js": "^10.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.6",
-    "@babel/eslint-parser": "^7.24.6",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-env": "^7.24.7",
     "@double-great/stylelint-a11y": "^3.0.2",
-    "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
+    "@intlify/eslint-plugin-vue-i18n": "^3.0.0",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
@@ -99,7 +99,7 @@
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsonc": "^2.16.0",
-    "eslint-plugin-n": "^17.7.0",
+    "eslint-plugin-n": "^17.8.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.2.0",
     "eslint-plugin-unicorn": "^53.0.0",

src/constants.js

@@ -21,9 +21,6 @@ const IpcChannels = {
   OPEN_URL: 'open-url',
   CHANGE_VIEW: 'change-view',
 
-  HISTORY_BACK: 'history-back',
-  HISTORY_FORWARD: 'history-forward',
-
   DB_SETTINGS: 'db-settings',
   DB_HISTORY: 'db-history',
   DB_PROFILES: 'db-profiles',
@@ -103,12 +100,20 @@ const PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD = 500
 // YouTube search character limit is 100 characters
 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,
   SyncEvents,
   MAIN_PROFILE_ID,
   MOBILE_WIDTH_THRESHOLD,
   PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD,
-  SEARCH_CHAR_LIMIT
+  SEARCH_CHAR_LIMIT,
+  ABOUT_BITCOIN_ADDRESS,
+  ABOUT_MONERO_ADDRESS
 }

src/main/index.js

@@ -6,7 +6,13 @@ import {
 import path from 'path'
 import cp from 'child_process'
 
-import { IpcChannels, DBActions, SyncEvents } from '../constants'
+import {
+  IpcChannels,
+  DBActions,
+  SyncEvents,
+  ABOUT_BITCOIN_ADDRESS,
+  ABOUT_MONERO_ADDRESS
+} from '../constants'
 import * as baseHandlers from '../datastores/handlers/base'
 import { extractExpiryTimestamp, ImageCache } from './ImageCache'
 import { existsSync } from 'fs'
@@ -855,8 +861,36 @@ function runApp() {
     session.defaultSession.closeAllConnections()
   })
 
-  ipcMain.on(IpcChannels.OPEN_EXTERNAL_LINK, (_, url) => {
-    if (typeof url === 'string') shell.openExternal(url)
+  ipcMain.handle(IpcChannels.OPEN_EXTERNAL_LINK, (_, url) => {
+    if (typeof url === 'string') {
+      let parsedURL
+
+      try {
+        parsedURL = new URL(url)
+      } catch {
+        // If it's not a valid URL don't open it
+        return false
+      }
+
+      if (
+        parsedURL.protocol === 'http:' || parsedURL.protocol === 'https:' ||
+
+        // Email address on the about page and Autolinker detects and links email addresses
+        parsedURL.protocol === 'mailto:' ||
+
+        // Autolinker detects and links phone numbers
+        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)
+      ) {
+        shell.openExternal(url)
+        return true
+      }
+    }
+
+    return false
   })
 
   ipcMain.handle(IpcChannels.GET_SYSTEM_LOCALE, () => {
@@ -1509,9 +1543,7 @@ function runApp() {
             click: (_menuItem, browserWindow, _event) => {
               if (browserWindow == null) { return }
 
-              browserWindow.webContents.send(
-                IpcChannels.HISTORY_BACK
-              )
+              browserWindow.webContents.goBack()
             },
             type: 'normal',
           },
@@ -1521,9 +1553,7 @@ function runApp() {
             click: (_menuItem, browserWindow, _event) => {
               if (browserWindow == null) { return }
 
-              browserWindow.webContents.send(
-                IpcChannels.HISTORY_FORWARD
-              )
+              browserWindow.webContents.goForward()
             },
             type: 'normal',
           },

src/renderer/App.js

@@ -48,7 +48,6 @@ export default defineComponent({
       latestBlogUrl: '',
       updateChangelog: '',
       changeLogTitle: '',
-      currentRouteFullPath: '',
       isPromptOpen: false,
       lastExternalLinkToBeOpened: '',
       showExternalLinkOpeningPrompt: false,
@@ -193,7 +192,6 @@ export default defineComponent({
           ipcRenderer = require('electron').ipcRenderer
           this.setupListenersToSyncWindows()
           this.activateKeyboardShortcuts()
-          this.activateIPCListeners()
           this.openAllLinksExternally()
           this.enableSetSearchQueryText()
           this.enableOpenUrl()
@@ -209,17 +207,10 @@ export default defineComponent({
         }, 500)
       })
 
-      this.$router.afterEach((to, from) => {
-        this.$refs.topNav?.navigateHistory()
-        this.currentRouteFullPath = to.fullPath
-      })
-
       this.$router.onReady(() => {
         if (this.$router.currentRoute.path === '/') {
           this.$router.replace({ path: this.landingPage })
         }
-
-        this.currentRouteFullPath = this.$router.currentRoute.fullPath
       })
     })
   },
@@ -347,16 +338,6 @@ export default defineComponent({
       })
     },
 
-    activateIPCListeners: function () {
-      // handle menu event updates from main script
-      ipcRenderer.on(IpcChannels.HISTORY_BACK, (_event) => {
-        this.$refs.topNav.historyBack()
-      })
-      ipcRenderer.on(IpcChannels.HISTORY_FORWARD, (_event) => {
-        this.$refs.topNav.historyForward()
-      })
-    },
-
     handleKeyboardShortcuts: function (event) {
       if (event.altKey) {
         switch (event.key) {

src/renderer/App.vue

@@ -64,7 +64,6 @@
     <top-nav
       ref="topNav"
       :inert="isPromptOpen"
-      :current-route-full-path="currentRouteFullPath"
       :page-bookmarks-available="pageBookmarksAvailable"
     />
     <side-nav

src/renderer/components/external-player-settings/external-player-settings.js

@@ -15,9 +15,6 @@ export default defineComponent({
     'ft-toggle-switch': FtToggleSwitch,
     'ft-flex-box': FtFlexBox
   },
-  data: function () {
-    return {}
-  },
   computed: {
     externalPlayerNames: function () {
       const fallbackNames = this.$store.getters.getExternalPlayerNames

src/renderer/components/ft-input/ft-input.js

@@ -140,7 +140,7 @@ export default defineComponent({
       }
     }
   },
-  mounted: function () {
+  created: function () {
     this.id = this._uid
     this.inputData = this.value
     this.updateVisibleDataList()

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css

@@ -24,16 +24,29 @@
 
 .optionsRow {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  align-items: center;
+}
+
+.tightOptions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
+  column-gap: 16px;
   align-items: center;
 }
 
 @media only screen and (width <= 800px) {
   .optionsRow {
-    /* Switch to 2 rows from 2 columns */
+    /* Switch to rows from columns */
     grid-template-columns: auto;
-    grid-template-rows: auto auto;
+    grid-template-rows: repeat(auto-fit, auto);
+    align-items: stretch;
+  }
+
+  .tightOptions {
+    /* Switch to rows from columns */
+    grid-template-columns: auto;
+    grid-template-rows: repeat(auto-fit, auto);
     align-items: stretch;
   }
 }
@@ -51,7 +64,11 @@
   overflow-y: scroll;
 }
 
-.playlist-selector-container {
+.playlist-selector-container:not(.disabled) {
   /* Make them look selectable */
   cursor: pointer;
 }
+
+.playlist-selector-container.disabled {
+  opacity: 0.5;
+}

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js

@@ -45,6 +45,7 @@ export default defineComponent({
       updateQueryDebounce: function() {},
       lastShownAt: Date.now(),
       sortBy: SORT_BY_VALUES.LatestUpdatedFirst,
+      addingDuplicateVideosEnabled: false,
     }
   },
   computed: {
@@ -111,6 +112,9 @@ export default defineComponent({
     toBeAddedToPlaylistVideoList: function () {
       return this.$store.getters.getToBeAddedToPlaylistVideoList
     },
+    toBeAddedToPlaylistVideoIdList: function () {
+      return this.toBeAddedToPlaylistVideoList.map((v) => v.videoId)
+    },
     newPlaylistDefaultProperties: function () {
       return this.$store.getters.getNewPlaylistDefaultProperties
     },
@@ -161,6 +165,23 @@ export default defineComponent({
     sortBySelectValues() {
       return Object.values(SORT_BY_VALUES)
     },
+
+    playlistIdsContainingVideosToBeAdded() {
+      const ids = []
+
+      this.allPlaylists.forEach((playlist) => {
+        const playlistVideoIdSet = playlist.videos.reduce((s, v) => s.add(v.videoId), new Set())
+
+        if (this.toBeAddedToPlaylistVideoIdList.every((vid) => playlistVideoIdSet.has(vid))) {
+          ids.push(playlist._id)
+        }
+      })
+
+      return ids
+    },
+    anyPlaylistContainsVideosToBeAdded() {
+      return this.playlistIdsContainingVideosToBeAdded.length > 0
+    },
   },
   watch: {
     allPlaylistsLength(val, oldVal) {
@@ -202,6 +223,16 @@ export default defineComponent({
       // due to enter key press in CreatePlaylistPrompt
       nextTick(() => this.$refs.searchBar.focus())
     },
+
+    addingDuplicateVideosEnabled(val) {
+      if (val) { return }
+
+      // Only care when addingDuplicateVideosEnabled disabled
+      // Remove disabled playlists
+      this.selectedPlaylistIdList = this.selectedPlaylistIdList.filter(playlistId => {
+        return !this.playlistIdsContainingVideosToBeAdded.includes(playlistId)
+      })
+    },
   },
   mounted: function () {
     this.updateQueryDebounce = debounce(this.updateQuery, 500)
@@ -238,10 +269,16 @@ export default defineComponent({
         const playlist = this.allPlaylists.find((list) => list._id === selectedPlaylistId)
         if (playlist == null) { return }
 
+        // Use [].concat to avoid `do not mutate vuex store state outside mutation handlers`
+        let videosToBeAdded = [].concat(this.toBeAddedToPlaylistVideoList)
+        if (!this.addingDuplicateVideosEnabled) {
+          const playlistVideoIds = playlist.videos.map((v) => v.videoId)
+          videosToBeAdded = videosToBeAdded.filter((v) => !playlistVideoIds.includes(v.videoId))
+        }
+
         this.addVideos({
           _id: playlist._id,
-          // Use [].concat to avoid `do not mutate vuex store state outside mutation handlers`
-          videos: [].concat(this.toBeAddedToPlaylistVideoList),
+          videos: videosToBeAdded,
         })
         addedPlaylistIds.add(playlist._id)
         // Update playlist's `lastUpdatedAt`
@@ -281,6 +318,12 @@ export default defineComponent({
 
     getIconForSortPreference: (s) => getIconForSortPreference(s),
 
+    playlistDisabled(playlistId) {
+      if (this.addingDuplicateVideosEnabled) { return false }
+
+      return this.playlistIdsContainingVideosToBeAdded.includes(playlistId)
+    },
+
     ...mapActions([
       'addVideos',
       'updatePlaylist',