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

…at/add-back-stylelint-1
FreeTubeApp · Apr 16, 2024 · 88d6728 · 88d6728
2 parents e6bf4e0 + 5359d84
commit 88d6728
Show file tree

Hide file tree

Showing 21 changed files with 303 additions and 301 deletions.
diff --git a/_scripts/webpack.web.config.js b/_scripts/webpack.web.config.js
@@ -25,7 +25,6 @@ const config = {
     filename: '[name].js',
   },
   externals: {
-    electron: '{}',
     'youtubei.js': '{}'
   },
   module: {

diff --git a/package.json b/package.json
@@ -65,7 +65,7 @@
     "marked": "^12.0.1",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
-    "swiper": "^11.1.0",
+    "swiper": "^11.1.1",
     "video.js": "7.21.5",
     "videojs-contrib-quality-levels": "^3.0.0",
     "videojs-http-source-selector": "^1.1.6",
@@ -77,7 +77,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2",
-    "youtubei.js": "^9.2.0"
+    "youtubei.js": "^9.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
@@ -88,34 +88,34 @@
     "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^7.0.0",
+    "css-loader": "^7.1.1",
     "css-minimizer-webpack-plugin": "^6.0.0",
-    "electron": "^29.2.0",
+    "electron": "^29.3.0",
     "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsonc": "^2.14.1",
-    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-jsonc": "^2.15.1",
+    "eslint-plugin-n": "^17.2.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-unicorn": "^51.0.1",
-    "eslint-plugin-vue": "^9.24.0",
+    "eslint-plugin-unicorn": "^52.0.0",
+    "eslint-plugin-vue": "^9.25.0",
     "eslint-plugin-vuejs-accessibility": "^2.2.1",
-    "eslint-plugin-yml": "^1.13.2",
+    "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.8",
+    "lefthook": "^1.6.10",
     "mini-css-extract-plugin": "^2.8.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-scss": "^4.0.9",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.5",
-    "sass": "^1.74.1",
-    "sass-loader": "^14.1.1",
+    "sass": "^1.75.0",
+    "sass-loader": "^14.2.0",
     "stylelint": "^16.3.1",
     "stylelint-config-sass-guidelines": "^11.1.0",
     "stylelint-config-standard": "^36.0.0",

diff --git a/src/renderer/components/download-settings/download-settings.js b/src/renderer/components/download-settings/download-settings.js
@@ -6,7 +6,6 @@ import FtSelect from '../ft-select/ft-select.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtInput from '../ft-input/ft-input.vue'
 import { mapActions } from 'vuex'
-import { ipcRenderer } from 'electron'
 import { IpcChannels } from '../../../constants'
 
 export default defineComponent({
@@ -48,16 +47,19 @@ export default defineComponent({
     handleDownloadingSettingChange: function (value) {
       this.updateDownloadAskPath(value)
     },
-    chooseDownloadingFolder: async function() {
-      // only use with electron
-      const folder = await ipcRenderer.invoke(
-        IpcChannels.SHOW_OPEN_DIALOG,
-        { properties: ['openDirectory'] }
-      )
+    chooseDownloadingFolder: async function () {
+      if (process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
 
-      if (folder.canceled) return
+        const folder = await ipcRenderer.invoke(
+          IpcChannels.SHOW_OPEN_DIALOG,
+          { properties: ['openDirectory'] }
+        )
 
-      this.updateDownloadFolderPath(folder.filePaths[0])
+        if (folder.canceled) return
+
+        this.updateDownloadFolderPath(folder.filePaths[0])
+      }
     },
     ...mapActions([
       'updateDownloadAskPath',

diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
@@ -259,6 +259,12 @@ export default defineComponent({
 
     this.updateQueryDebounce = debounce(this.updateQuery, 500)
   },
+  mounted: function () {
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
+  },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
   methods: {
     toggleCopyVideosPrompt: function (force = false) {
       if (this.moreVideoDataAvailable && !this.isUserPlaylist && !force) {
@@ -403,24 +409,18 @@ export default defineComponent({
       this.query = query
       this.$emit('search-video-query-change', query)
     },
-    enableVideoSearchMode() {
-      this.searchVideoMode = true
-      this.$emit('search-video-mode-on')
 
-      nextTick(() => {
-        // Some elements only present after rendering update
-        this.$refs.searchInput.focus()
-      })
-    },
-    disableVideoSearchMode() {
-      this.searchVideoMode = false
-      this.updateQuery('')
-      this.$emit('search-video-mode-off')
-
-      nextTick(() => {
-        // Some elements only present after rendering update
-        this.$refs.enableSearchModeButton?.focus()
-      })
+    keyboardShortcutHandler(event) {
+      switch (event.key) {
+        case 'F':
+        case 'f':
+          if (this.searchVideoModeAllowed && ((process.platform !== 'darwin' && event.ctrlKey) || (process.platform === 'darwin' && event.metaKey))) {
+            nextTick(() => {
+              // Some elements only present after rendering update
+              this.$refs.searchInput.focus()
+            })
+          }
+      }
     },
 
     ...mapActions([

diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
@@ -75,11 +75,6 @@
 
 .searchInputsRow {
   margin-block-start: 8px;
-  display: grid;
-
-  /* 2 columns */
-  grid-template-columns: 1fr auto;
-  column-gap: 8px;
 }
 
 @media only screen and (width <= 1250px) {

diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
@@ -76,7 +76,6 @@
     <hr>
 
     <div
-      v-if="!searchVideoMode"
       class="channelShareWrapper"
     >
       <router-link
@@ -107,14 +106,6 @@
       </div>
 
       <div class="playlistOptions">
-        <ft-icon-button
-          v-if="searchVideoModeAllowed && videoCount > 0 && !editMode"
-          ref="enableSearchModeButton"
-          :title="$t('User Playlists.SinglePlaylistView.Search for Videos')"
-          :icon="['fas', 'search']"
-          theme="secondary"
-          @click="enableVideoSearchMode"
-        />
         <ft-icon-button
           v-if="editMode"
           :title="$t('User Playlists.Save Changes')"
@@ -198,7 +189,7 @@
     </div>
 
     <div
-      v-if="searchVideoModeAllowed && searchVideoMode"
+      v-if="searchVideoModeAllowed"
       class="searchInputsRow"
     >
       <ft-input
@@ -211,12 +202,6 @@
         @input="(input) => updateQueryDebounce(input)"
         @clear="updateQueryDebounce('')"
       />
-      <ft-icon-button
-        :title="$t('User Playlists.Cancel')"
-        :icon="['fas', 'times']"
-        theme="secondary"
-        @click="disableVideoSearchMode"
-      />
     </div>
   </div>
 </template>

diff --git a/src/renderer/components/proxy-settings/proxy-settings.js b/src/renderer/components/proxy-settings/proxy-settings.js
@@ -8,7 +8,6 @@ import FtInput from '../ft-input/ft-input.vue'
 import FtLoader from '../ft-loader/ft-loader.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 
-import { ipcRenderer } from 'electron'
 import debounce from 'lodash.debounce'
 
 import { IpcChannels } from '../../../constants'
@@ -125,11 +124,17 @@ export default defineComponent({
     },
 
     enableProxy: function () {
-      ipcRenderer.send(IpcChannels.ENABLE_PROXY, this.proxyUrl)
+      if (process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
+        ipcRenderer.send(IpcChannels.ENABLE_PROXY, this.proxyUrl)
+      }
     },
 
     disableProxy: function () {
-      ipcRenderer.send(IpcChannels.DISABLE_PROXY)
+      if (process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
+        ipcRenderer.send(IpcChannels.DISABLE_PROXY)
+      }
 
       this.dataAvailable = false
       this.proxyIp = ''

diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.js b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.js
@@ -80,7 +80,7 @@ export default defineComponent({
       this.dataLimit = this.initialDataLimit
     }
   },
-  mounted: async function () {
+  mounted: function () {
     document.addEventListener('keydown', this.keyboardShortcutHandler)
   },
   beforeDestroy: function () {

diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
@@ -146,12 +146,14 @@ export default defineComponent({
         return
       }
 
-      this.updateDisableSmoothScrolling(
-        this.disableSmoothScrollingToggleValue
-      ).then(() => {
-        const { ipcRenderer } = require('electron')
-        ipcRenderer.send('relaunchRequest')
-      })
+      if (process.env.IS_ELECTRON) {
+        this.updateDisableSmoothScrolling(
+          this.disableSmoothScrollingToggleValue
+        ).then(() => {
+          const { ipcRenderer } = require('electron')
+          ipcRenderer.send('relaunchRequest')
+        })
+      }
     },
 
     ...mapActions([

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -56,16 +56,30 @@
   border-radius: 50%;
   color: var(--tertiary-text-color);
   transition: background 0.2s ease-out;
+  stroke-width: 20;
+  stroke: var(--bg-color);
 }
 
 .playlistIcon:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
+  stroke-width: 20;
+  stroke: var(--side-nav-hover-color);
   transition: background 0.2s ease-in;
 }
 
 .playlistIconActive {
-  color: var(--accent-color)
+  color: var(--accent-color);
+  stroke-width: 10;
+  stroke: var(--accent-color);
+}
+
+.playlistIconActive:hover {
+  background-color: var(--side-nav-hover-color);
+  color: var(--accent-color-hover);
+  stroke-width: 10;
+  stroke: var(--accent-color-hover);
+  transition: background 0.2s ease-in;
 }
 
 .playlistItems {

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js
@@ -166,13 +166,6 @@ export default defineComponent({
       // Re-fetch from local store when current user playlist updated
       this.parseUserPlaylist(this.selectedUserPlaylist, { allowPlayingVideoRemoval: true })
     },
-    playlistItemId (newId, _oldId) {
-      // Playing online video
-      if (newId == null) { return }
-
-      // Re-fetch from local store when different item played
-      this.parseUserPlaylist(this.selectedUserPlaylist, { allowPlayingVideoRemoval: true })
-    },
     videoId: function (newId, oldId) {
       // Check if next video is from the shuffled list or if the user clicked a different video
       if (this.shuffleEnabled) {
@@ -284,7 +277,7 @@ export default defineComponent({
       this.reversePlaylist = !this.reversePlaylist
       // Create a new array to avoid changing array in data store state
       // it could be user playlist or cache playlist
-      this.playlistItems = [].concat(this.playlistItems).reverse()
+      this.playlistItems = this.playlistItems.toReversed()
       setTimeout(() => {
         this.isLoading = false
       }, 1)
@@ -488,6 +481,10 @@ export default defineComponent({
         }
       }
 
+      if (this.reversePlaylist) {
+        this.playlistItems = this.playlistItems.toReversed()
+      }
+
       this.isLoading = false
     },
 

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -56,6 +56,7 @@
           :title="$t('Video.Loop Playlist')"
           role="button"
           tabindex="0"
+          :aria-pressed="loopEnabled"
           @click="toggleLoop"
           @keydown.enter.prevent="toggleLoop"
           @keydown.space.prevent="toggleLoop"
@@ -67,6 +68,7 @@
           :title="$t('Video.Shuffle Playlist')"
           role="button"
           tabindex="0"
+          :aria-pressed="shuffleEnabled"
           @click="toggleShuffle"
           @keydown.enter.prevent="toggleShuffle"
           @keydown.space.prevent="toggleShuffle"
@@ -78,6 +80,7 @@
           :title="$t('Video.Reverse Playlist')"
           role="button"
           tabindex="0"
+          :aria-pressed="reversePlaylist"
           @click="toggleReversePlaylist"
           @keydown.enter.prevent="toggleReversePlaylist"
           @keydown.space.prevent="toggleReversePlaylist"
@@ -109,6 +112,7 @@
           :title="$t('Video.Pause on Current Video')"
           role="button"
           tabindex="0"
+          :aria-pressed="pauseOnCurrentVideo"
           @click="togglePauseOnCurrentVideo"
           @keydown.enter.prevent="togglePauseOnCurrentVideo"
           @keydown.space.prevent="togglePauseOnCurrentVideo"