Merge branch 'development' into local-api-potokens

package.json

@@ -55,13 +55,13 @@
     "ci": "yarn install --silent --frozen-lockfile"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.1",
-    "@fortawesome/free-brands-svg-icons": "^6.7.1",
-    "@fortawesome/free-regular-svg-icons": "^6.7.1",
-    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^2.0.10",
     "@seald-io/nedb": "^4.0.4",
-    "autolinker": "^4.0.0",
+    "autolinker": "^4.0.1",
     "bgutils-js": "^3.1.0",
     "electron-context-menu": "^4.0.4",
     "lodash.debounce": "^4.0.8",
@@ -98,14 +98,14 @@
     "eslint-plugin-vue": "^9.32.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "eslint-plugin-yml": "^1.16.0",
-    "globals": "^15.13.0",
+    "globals": "^15.14.0",
     "html-webpack-plugin": "^5.6.3",
     "js-yaml": "^4.1.0",
     "json-minimizer-webpack-plugin": "^5.0.0",
-    "lefthook": "^1.9.2",
+    "lefthook": "^1.10.0",
     "mini-css-extract-plugin": "^2.9.2",
     "neostandard": "^0.12.0",
-    "npm-run-all2": "^7.0.1",
+    "npm-run-all2": "^7.0.2",
     "postcss": "^8.4.49",
     "postcss-scss": "^4.0.9",
     "rimraf": "^6.0.1",
@@ -121,7 +121,7 @@
     "vue-eslint-parser": "^9.4.3",
     "vue-loader": "^15.10.0",
     "webpack": "^5.97.1",
-    "webpack-cli": "^5.1.4",
+    "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.0",
     "yaml-eslint-parser": "^1.2.3"
   }

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js

@@ -24,8 +24,8 @@ import {
 import {
   addKeyboardShortcutToActionTitle,
   getPicturesPath,
-  showSaveDialog,
-  showToast
+  showToast,
+  writeFileWithPicker
 } from '../../helpers/utils'
 import { pathExists } from '../../helpers/filesystem'
 
@@ -785,7 +785,7 @@ export default defineComponent({
 
       uiConfig.controlPanelElements.push('fullscreen')
 
-      if (!process.env.IS_ELECTRON || !enableScreenshot.value || props.format === 'audio') {
+      if (!enableScreenshot.value || props.format === 'audio') {
         const index = elementList.indexOf('ft_screenshot')
         elementList.splice(index, 1)
       }
@@ -1515,8 +1515,6 @@ export default defineComponent({
     // #region screenshots
 
     async function takeScreenshot() {
-      // TODO: needs to be refactored to be less reliant on node stuff, so that it can be used in the web (and android) builds
-
       const video_ = video.value
 
       const width = video_.videoWidth
@@ -1541,7 +1539,7 @@ export default defineComponent({
       let filename
       try {
         filename = await store.dispatch('parseScreenshotCustomFileName', {
-          date: new Date(Date.now()),
+          date: new Date(),
           playerTime: video_.currentTime,
           videoId: props.videoId
         })
@@ -1552,59 +1550,48 @@ export default defineComponent({
         return
       }
 
-      let subDir = ''
-      if (filename.indexOf(path.sep) !== -1) {
-        const lastIndex = filename.lastIndexOf(path.sep)
-        subDir = filename.substring(0, lastIndex)
-        filename = filename.substring(lastIndex + 1)
-      }
       const filenameWithExtension = `${filename}.${format}`
 
-      let dirPath
-      let filePath
-      if (screenshotAskPath.value) {
+      if (!process.env.IS_ELECTRON || screenshotAskPath.value) {
         const wasPlaying = !video_.paused
         if (wasPlaying) {
           video_.pause()
         }
 
-        if (screenshotFolder.value === '' || !(await pathExists(screenshotFolder.value))) {
-          dirPath = await getPicturesPath()
-        } else {
-          dirPath = screenshotFolder.value
-        }
+        try {
+          /** @type {Blob} */
+          const blob = await new Promise((resolve) => canvas.toBlob(resolve, mimeType, imageQuality))
+
+          const saved = await writeFileWithPicker(
+            filenameWithExtension,
+            blob,
+            format.toUpperCase(),
+            mimeType,
+            `.${format}`,
+            'player-screenshots',
+            'pictures'
+          )
 
-        const options = {
-          defaultPath: path.join(dirPath, filenameWithExtension),
-          filters: [
-            {
-              name: format.toUpperCase(),
-              extensions: [format]
-            }
-          ]
+          if (saved) {
+            showToast(t('Screenshot Success'))
+          }
+        } catch (error) {
+          console.error(error)
+          showToast(t('Screenshot Error', { error }))
         }
 
-        const response = await showSaveDialog(options)
+        canvas.remove()
+
         if (wasPlaying) {
           video_.play()
         }
-        if (response.canceled || response.filePath === '') {
-          canvas.remove()
-          return
-        }
-
-        filePath = response.filePath
-        if (!filePath.endsWith(`.${format}`)) {
-          filePath = `${filePath}.${format}`
-        }
-
-        dirPath = path.dirname(filePath)
-        store.dispatch('updateScreenshotFolderPath', dirPath)
       } else {
+        let dirPath
+
         if (screenshotFolder.value === '') {
-          dirPath = path.join(await getPicturesPath(), 'Freetube', subDir)
+          dirPath = path.join(await getPicturesPath(), 'Freetube')
         } else {
-          dirPath = path.join(screenshotFolder.value, subDir)
+          dirPath = screenshotFolder.value
         }
 
         if (!(await pathExists(dirPath))) {
@@ -1617,24 +1604,25 @@ export default defineComponent({
             return
           }
         }
-        filePath = path.join(dirPath, filenameWithExtension)
-      }
 
-      canvas.toBlob((result) => {
-        result.arrayBuffer().then(ab => {
-          const arr = new Uint8Array(ab)
+        const filePath = path.join(dirPath, filenameWithExtension)
 
-          fs.writeFile(filePath, arr)
-            .then(() => {
-              showToast(t('Screenshot Success', { filePath }))
-            })
-            .catch((err) => {
-              console.error(err)
-              showToast(t('Screenshot Error', { error: err }))
-            })
-        })
-      }, mimeType, imageQuality)
-      canvas.remove()
+        canvas.toBlob((result) => {
+          result.arrayBuffer().then(ab => {
+            const arr = new Uint8Array(ab)
+
+            fs.writeFile(filePath, arr)
+              .then(() => {
+                showToast(t('Screenshot Success'))
+              })
+              .catch((err) => {
+                console.error(err)
+                showToast(t('Screenshot Error', { error: err }))
+              })
+          })
+        }, mimeType, imageQuality)
+        canvas.remove()
+      }
     }
 
     // #endregion screenshots
@@ -1795,10 +1783,8 @@ export default defineComponent({
 
       shakaContextMenu.registerElement('ft_stats', null)
 
-      if (process.env.IS_ELECTRON) {
-        shakaControls.registerElement('ft_screenshot', null)
-        shakaOverflowMenu.registerElement('ft_screenshot', null)
-      }
+      shakaControls.registerElement('ft_screenshot', null)
+      shakaOverflowMenu.registerElement('ft_screenshot', null)
     }
 
     // #endregion custom player controls
@@ -2168,7 +2154,7 @@ export default defineComponent({
           }
           break
         case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.TAKE_SCREENSHOT:
-          if (process.env.IS_ELECTRON && enableScreenshot.value && props.format !== 'audio') {
+          if (enableScreenshot.value && props.format !== 'audio') {
             event.preventDefault()
             // Take screenshot
             takeScreenshot()
@@ -2370,9 +2356,7 @@ export default defineComponent({
         return
       }
 
-      if (process.env.IS_ELECTRON) {
-        registerScreenshotButton()
-      }
+      registerScreenshotButton()
       registerAudioTrackSelection()
       registerTheatreModeButton()
       registerFullWindowButton()

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

@@ -277,7 +277,7 @@ export default defineComponent({
     getScreenshotFilenameExample: function(pattern) {
       return this.parseScreenshotCustomFileName({
         pattern: pattern || this.screenshotDefaultPattern,
-        date: new Date(Date.now()),
+        date: new Date(),
         playerTime: 123.456,
         videoId: 'dQw4w9WgXcQ'
       }).then(res => {

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

@@ -165,16 +165,14 @@
       />
     </ft-flex-box>
     <br>
-    <ft-flex-box
-      v-if="usingElectron"
-    >
+    <ft-flex-box>
       <ft-toggle-switch
         :label="$t('Settings.Player Settings.Screenshot.Enable')"
         :default-value="enableScreenshot"
         @change="updateEnableScreenshot"
       />
     </ft-flex-box>
-    <div v-if="usingElectron && enableScreenshot">
+    <div v-if="enableScreenshot">
       <ft-flex-box>
         <ft-select
           :placeholder="$t('Settings.Player Settings.Screenshot.Format Label')"
@@ -195,7 +193,7 @@
           @change="updateScreenshotQuality"
         />
       </ft-flex-box>
-      <ft-flex-box>
+      <ft-flex-box v-if="usingElectron">
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Screenshot.Ask Path')"
           :default-value="screenshotAskPath"
@@ -223,7 +221,6 @@
         />
       </ft-flex-box>
       <ft-flex-box
-        v-if="usingElectron"
         class="screenshotFolderContainer"
       >
         <p class="screenshotFilenamePatternTitle">
@@ -245,7 +242,7 @@
         />
         <ft-input
           class="screenshotFilenamePatternExample"
-          :placeholder="`${screenshotFilenameExample}`"
+          :placeholder="screenshotFilenameExample"
           :show-action-button="false"
           :show-label="false"
           :disabled="true"

src/renderer/helpers/api/local.js

@@ -858,12 +858,18 @@ export function parseChannelHomeTab(homeTab) {
       if (itemSection.contents.at(0).type === 'Shelf') {
         /** @type {import('youtubei.js').YTNodes.Shelf} */
         const shelf = itemSection.contents.at(0)
-        shelves.push({
-          title: shelf.title.text,
-          content: shelf.content.items.map(parseListItem).filter(_ => _),
-          playlistId: shelf.play_all_button?.endpoint.payload.playlistId,
-          subtitle: shelf.subtitle?.text
-        })
+
+        const playlistId = shelf.play_all_button?.endpoint.payload.playlistId
+
+        // filter out the members-only video section as none of the videos in that section are playable as they require a paid channel membership
+        if (!playlistId || !playlistId.startsWith('UUMO')) {
+          shelves.push({
+            title: shelf.title.text,
+            content: shelf.content.items.map(parseListItem).filter(_ => _),
+            playlistId,
+            subtitle: shelf.subtitle?.text
+          })
+        }
       } else if (itemSection.contents.at(0).type === 'ReelShelf') {
         /** @type {import('youtubei.js').YTNodes.ReelShelf} */
         const shelf = itemSection.contents.at(0)

src/renderer/store/modules/settings.js

@@ -298,7 +298,7 @@ const state = {
   enableScreenshot: false,
   screenshotFormat: 'png',
   screenshotQuality: 95,
-  screenshotAskPath: false,
+  screenshotAskPath: !process.env.IS_ELECTRON,
   screenshotFolderPath: '',
   screenshotFilenamePattern: '%Y%M%D-%H%N%S',
   settingsSectionSortEnabled: false,