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

…at/refresh-button-timestamp
FreeTubeApp · Apr 16, 2024 · 88f996f · 88f996f
2 parents 2feb50c + 3ded01b
commit 88f996f
Show file tree

Hide file tree

Showing 74 changed files with 372 additions and 389 deletions.
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/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.js b/src/renderer/components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.js
@@ -0,0 +1,30 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'FtAutoLoadNextPageWrapper',
+  computed: {
+    generalAutoLoadMorePaginatedItemsEnabled() {
+      return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
+    },
+    observeVisibilityOptions() {
+      if (!this.generalAutoLoadMorePaginatedItemsEnabled) { return false }
+
+      return {
+        callback: (isVisible, _entry) => {
+          // This is also fired when **hidden**
+          // No point doing anything if not visible
+          if (!isVisible) { return }
+
+          this.$emit('load-next-page')
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for loading multiple pages
+        once: false,
+      }
+    },
+
+  },
+})
diff --git a/src/renderer/components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue b/src/renderer/components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue
@@ -0,0 +1,16 @@
+<template>
+  <div
+    class="ft-auto-load-next-page-wrapper"
+  >
+    <div
+      v-observe-visibility="observeVisibilityOptions"
+    >
+      <!--
+        Dummy element to be observed by Intersection Observer
+      -->
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script src="./ft-auto-load-next-page-wrapper.js" />
diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
@@ -141,6 +141,9 @@ export default defineComponent({
     defaultInvidiousInstance: function () {
       return this.$store.getters.getDefaultInvidiousInstance
     },
+    generalAutoLoadMorePaginatedItemsEnabled() {
+      return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
+    },
 
     localeOptions: function () {
       return [
@@ -270,7 +273,8 @@ export default defineComponent({
       'updateThumbnailPreference',
       'updateForceLocalBackendForLegacy',
       'updateCurrentLocale',
-      'updateExternalLinkHandling'
+      'updateExternalLinkHandling',
+      'updateGeneralAutoLoadMorePaginatedItemsEnabled',
     ])
   }
 })
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
@@ -17,6 +17,13 @@
           :tooltip="$t('Tooltips.General Settings.Fallback to Non-Preferred Backend on Failure')"
           @change="updateBackendFallback"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.General Settings.Auto Load Next Page.Label')"
+          :default-value="generalAutoLoadMorePaginatedItemsEnabled"
+          :compact="true"
+          :tooltip="$t('Settings.General Settings.Auto Load Next Page.Tooltip')"
+          @change="updateGeneralAutoLoadMorePaginatedItemsEnabled"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch

diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
@@ -197,10 +197,6 @@ export default defineComponent({
       return this.$store.getters.getScreenshotFilenamePattern
     },
 
-    commentAutoLoadEnabled: function () {
-      return this.$store.getters.getCommentAutoLoadEnabled
-    },
-
     hideComments: function () {
       return this.$store.getters.getHideComments
     },
@@ -209,11 +205,6 @@ export default defineComponent({
     screenshotFolder: function() {
       this.getScreenshotFolderPlaceholder()
     },
-    hideComments: function(newValue) {
-      if (newValue) {
-        this.updateCommentAutoLoadEnabled(false)
-      }
-    }
   },
   mounted: function() {
     this.getScreenshotFolderPlaceholder()
@@ -317,7 +308,6 @@ export default defineComponent({
       'updateScreenshotFolderPath',
       'updateScreenshotFilenamePattern',
       'parseScreenshotCustomFileName',
-      'updateCommentAutoLoadEnabled',
     ])
   }
 })
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
@@ -255,14 +255,6 @@
       </ft-flex-box>
       <br>
     </div>
-    <ft-flex-box>
-      <ft-toggle-switch
-        :label="$t('Settings.Player Settings.Comment Auto Load.Comment Auto Load')"
-        :default-value="commentAutoLoadEnabled"
-        :disabled="hideComments"
-        @change="updateCommentAutoLoadEnabled"
-      />
-    </ft-flex-box>
   </ft-settings-section>
 </template>
 

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,12 +75,6 @@
 
 .searchInputsRow {
   margin-block-start: 8px;
-
-  display: grid;
-
-  /* 2 columns */
-  grid-template-columns: 1fr auto;
-  column-gap: 8px;
 }
 
 @media only screen and (max-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/subscriptions-tab-ui/subscriptions-tab-ui.js b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.js
@@ -7,6 +7,7 @@ import FtRefreshWidget from '../ft-refresh-widget/ft-refresh-widget.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtElementList from '../ft-element-list/ft-element-list.vue'
 import FtChannelBubble from '../ft-channel-bubble/ft-channel-bubble.vue'
+import FtAutoLoadNextPageWrapper from '../ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
 
 export default defineComponent({
   name: 'SubscriptionsTabUI',
@@ -17,7 +18,8 @@ export default defineComponent({
     'ft-refresh-widget': FtRefreshWidget,
     'ft-flex-box': FtFlexBox,
     'ft-element-list': FtElementList,
-    'ft-channel-bubble': FtChannelBubble
+    'ft-channel-bubble': FtChannelBubble,
+    'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
   },
   props: {
     isLoading: {
@@ -88,7 +90,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/subscriptions-tab-ui/subscriptions-tab-ui.vue b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.vue
@@ -45,16 +45,19 @@
       :use-channels-hidden-preference="false"
       :display="isCommunity ? 'list' : ''"
     />
-    <ft-flex-box
+    <ft-auto-load-next-page-wrapper
       v-if="!isLoading && videoList.length > dataLimit"
+      @load-next-page="increaseLimit"
     >
-      <ft-button
-        :label="isCommunity ? $t('Subscriptions.Load More Posts') : $t('Subscriptions.Load More Videos')"
-        background-color="var(--primary-color)"
-        text-color="var(--text-with-main-color)"
-        @click="increaseLimit"
-      />
-    </ft-flex-box>
+      <ft-flex-box>
+        <ft-button
+          :label="isCommunity ? $t('Subscriptions.Load More Posts') : $t('Subscriptions.Load More Videos')"
+          background-color="var(--primary-color)"
+          text-color="var(--text-with-main-color)"
+          @click="increaseLimit"
+        />
+      </ft-flex-box>
+    </ft-auto-load-next-page-wrapper>
     <ft-refresh-widget
       :disable-refresh="isLoading || activeSubscriptionList.length === 0"
       :last-refresh-timestamp="lastRefreshTimestamp"

diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js
@@ -63,10 +63,6 @@ export default defineComponent({
       return this.$store.getters.getHideCommentPhotos
     },
 
-    commentAutoLoadEnabled: function () {
-      return this.$store.getters.getCommentAutoLoadEnabled
-    },
-
     sortNames: function () {
       return [
         this.$t('Comments.Top comments'),
@@ -85,8 +81,13 @@ export default defineComponent({
       return (this.sortNewest) ? 'newest' : 'top'
     },
 
+    generalAutoLoadMorePaginatedItemsEnabled() {
+      return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
+    },
     observeVisibilityOptions: function () {
-      if (!this.commentAutoLoadEnabled) { return false }
+      if (!this.generalAutoLoadMorePaginatedItemsEnabled) {
+        return false
+      }
       if (!this.videoPlayerReady) { return false }
 
       return {