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

…at/add-page-bookmarking

.github/workflows/conflicts.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@releases/2.x
+        uses: eps1lon/actions-label-merge-conflict@v3
         with:
           dirtyLabel: "PR: merge conflicts / rebase needed"
           removeOnDirtyLabel: "PR: waiting for review"

_scripts/mime-db-shrinking-loader.js

@@ -0,0 +1,26 @@
+/**
+ * electron-context-menu only needs mime-db for its save as feature.
+ * As we only activate save image and save as image features, we can remove all other mimetypes,
+ * as they will never get used.
+ * Which results in quite a significant reduction in file size.
+ * @param {string} source
+ */
+module.exports = function (source) {
+  const original = JSON.parse(source)
+
+  const reduced = {}
+
+  for (const mimeType of Object.keys(original)) {
+    if (mimeType.startsWith('image/') && original[mimeType].extensions &&
+      (!mimeType.startsWith('image/x-') || mimeType === 'image/x-icon' || mimeType === 'image/x-ms-bmp') &&
+      (!mimeType.startsWith('image/vnd.') || mimeType === 'image/vnd.microsoft.icon')) {
+
+      // Only the extensions field is needed, see: https://github.com/kevva/ext-list/blob/v2.2.2/index.js
+      reduced[mimeType] = {
+        extensions: original[mimeType].extensions
+      }
+    }
+  }
+
+  return JSON.stringify(reduced)
+}

_scripts/webpack.main.config.js

@@ -19,6 +19,10 @@ const config = {
         use: 'babel-loader',
         exclude: /node_modules/,
       },
+      {
+        resource: path.resolve(__dirname, '../node_modules/mime-db/db.json'),
+        use: path.join(__dirname, 'mime-db-shrinking-loader.js')
+      }
     ],
   },
   // webpack defaults to only optimising the production builds, so having this here is fine

package.json

@@ -61,7 +61,7 @@
     "@seald-io/nedb": "^4.0.4",
     "@silvermine/videojs-quality-selector": "^1.3.1",
     "autolinker": "^4.0.0",
-    "electron-context-menu": "^3.6.1",
+    "electron-context-menu": "^4.0.0",
     "lodash.debounce": "^4.0.8",
     "marked": "^12.0.2",
     "path-browserify": "^1.0.1",
@@ -92,7 +92,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.1",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "electron": "^30.0.3",
+    "electron": "^30.0.6",
     "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

src/constants.js

@@ -82,6 +82,12 @@ const SyncEvents = {
 // Utils
 const MAIN_PROFILE_ID = 'allChannels'
 
+// Width threshold in px at which we switch to using a more heavily altered view for mobile users
+const MOBILE_WIDTH_THRESHOLD = 680
+
+// Height threshold in px at which we switch to using a more heavily altered playlist view for mobile users
+const PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD = 500
+
 // YouTube search character limit is 100 characters
 const SEARCH_CHAR_LIMIT = 100
 
@@ -90,5 +96,7 @@ export {
   DBActions,
   SyncEvents,
   MAIN_PROFILE_ID,
+  MOBILE_WIDTH_THRESHOLD,
+  PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD,
   SEARCH_CHAR_LIMIT
 }

src/main/index.js

@@ -543,7 +543,11 @@ function runApp() {
     await createWindow()
 
     if (process.env.NODE_ENV === 'development') {
-      installDevTools()
+      try {
+        require('vue-devtools').install()
+      } catch (err) {
+        console.error(err)
+      }
     }
 
     if (isDebug) {
@@ -592,16 +596,6 @@ function runApp() {
     }
   }
 
-  async function installDevTools() {
-    try {
-      /* eslint-disable */
-      require('vue-devtools').install()
-      /* eslint-enable */
-    } catch (err) {
-      console.error(err)
-    }
-  }
-
   async function createWindow(
     {
       replaceMainWindow = true,

src/renderer/App.js

@@ -112,6 +112,14 @@ export default defineComponent({
       return this.$store.getters.getBaseTheme
     },
 
+    isSideNavOpen: function () {
+      return this.$store.getters.getIsSideNavOpen
+    },
+
+    hideLabelsSideBar: function () {
+      return this.$store.getters.getHideLabelsSideBar
+    },
+
     mainColor: function () {
       return this.$store.getters.getMainColor
     },

src/renderer/App.vue

@@ -5,7 +5,9 @@
     class="app"
     :class="{
       hideOutlines: outlinesHidden,
-      isLocaleRightToLeft: isLocaleRightToLeft
+      isLocaleRightToLeft: isLocaleRightToLeft,
+      isSideNavOpen: isSideNavOpen,
+      hideLabelsSideBar: hideLabelsSideBar && !isSideNavOpen
     }"
   >
     <portal-target

src/renderer/components/ft-element-list/ft-element-list.js

@@ -39,7 +39,40 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    alwaysShowAddToPlaylistButton: {
+      type: Boolean,
+      default: false,
+    },
+    quickBookmarkButtonEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    canMoveVideoUp: {
+      type: Boolean,
+      default: false,
+    },
+    canMoveVideoDown: {
+      type: Boolean,
+      default: false,
+    },
+    canRemoveFromPlaylist: {
+      type: Boolean,
+      default: false,
+    },
+    playlistItemsLength: {
+      type: Number,
+      default: 0
+    },
+    playlistId: {
+      type: String,
+      default: null
+    },
+    playlistType: {
+      type: String,
+      default: null
+    },
   },
+  emits: ['move-video-down', 'move-video-up', 'remove-from-playlist'],
   computed: {
     listType: function () {
       return this.$store.getters.getListType
@@ -48,5 +81,18 @@ export default defineComponent({
     displayValue: function () {
       return this.display === '' ? this.listType : this.display
     }
+  },
+  methods: {
+    moveVideoUp: function(videoId, playlistItemId) {
+      this.$emit('move-video-up', videoId, playlistItemId)
+    },
+
+    moveVideoDown: function(videoId, playlistItemId) {
+      this.$emit('move-video-down', videoId, playlistItemId)
+    },
+
+    removeFromPlaylist: function(videoId, playlistItemId) {
+      this.$emit('remove-from-playlist', videoId, playlistItemId)
+    },
   }
 })

src/renderer/components/ft-element-list/ft-element-list.vue

@@ -13,7 +13,18 @@
       :show-video-with-last-viewed-playlist="showVideoWithLastViewedPlaylist"
       :use-channels-hidden-preference="useChannelsHiddenPreference"
       :hide-forbidden-titles="hideForbiddenTitles"
+      :always-show-add-to-playlist-button="alwaysShowAddToPlaylistButton"
+      :quick-bookmark-button-enabled="quickBookmarkButtonEnabled"
+      :can-move-video-up="canMoveVideoUp && index > 0"
+      :can-move-video-down="canMoveVideoDown && index < playlistItemsLength - 1"
+      :can-remove-from-playlist="canRemoveFromPlaylist"
       :search-query-text="searchQueryText"
+      :playlist-id="playlistId"
+      :playlist-type="playlistType"
+      :playlist-item-id="result.playlistItemId"
+      @move-video-up="moveVideoUp(result.videoId, result.playlistItemId)"
+      @move-video-down="moveVideoDown(result.videoId, result.playlistItemId)"
+      @remove-from-playlist="removeFromPlaylist(result.videoId, result.playlistItemId)"
     />
   </ft-auto-grid>
 </template>

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js

@@ -52,7 +52,40 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    playlistId: {
+      type: String,
+      default: null
+    },
+    playlistType: {
+      type: String,
+      default: null
+    },
+    playlistItemId: {
+      type: String,
+      default: null
+    },
+    alwaysShowAddToPlaylistButton: {
+      type: Boolean,
+      default: false,
+    },
+    quickBookmarkButtonEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    canMoveVideoUp: {
+      type: Boolean,
+      default: false,
+    },
+    canMoveVideoDown: {
+      type: Boolean,
+      default: false,
+    },
+    canRemoveFromPlaylist: {
+      type: Boolean,
+      default: false,
+    },
   },
+  emits: ['move-video-down', 'move-video-up', 'remove-from-playlist'],
   data: function () {
     return {
       visible: this.firstScreen
@@ -160,7 +193,17 @@ export default defineComponent({
   methods: {
     onVisibilityChanged: function (visible) {
       this.visible = visible
-    }
+    },
+    moveVideoUp: function() {
+      this.$emit('move-video-up')
+    },
 
+    moveVideoDown: function() {
+      this.$emit('move-video-down')
+    },
+
+    removeFromPlaylist: function() {
+      this.$emit('remove-from-playlist')
+    },
   }
 })

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue

@@ -17,7 +17,18 @@
         v-if="finalDataType === 'video' || finalDataType === 'shortVideo'"
         :appearance="appearance"
         :data="data"
+        :playlist-id="playlistId"
+        :playlist-type="playlistType"
+        :playlist-item-id="playlistItemId"
         :show-video-with-last-viewed-playlist="showVideoWithLastViewedPlaylist"
+        :always-show-add-to-playlist-button="alwaysShowAddToPlaylistButton"
+        :quick-bookmark-button-enabled="quickBookmarkButtonEnabled"
+        :can-move-video-up="canMoveVideoUp"
+        :can-move-video-down="canMoveVideoDown"
+        :can-remove-from-playlist="canRemoveFromPlaylist"
+        @move-video-up="moveVideoUp"
+        @move-video-down="moveVideoDown"
+        @remove-from-playlist="removeFromPlaylist"
       />
       <ft-list-channel
         v-else-if="finalDataType === 'channel'"

src/renderer/components/ft-list-video/ft-list-video.js

@@ -121,6 +121,10 @@ export default defineComponent({
       return this.$store.getters.getListType
     },
 
+    effectiveListTypeIsList: function () {
+      return (this.listType === 'list' || this.forceListType === 'list') && this.forceListType !== 'grid'
+    },
+
     thumbnailPreference: function () {
       return this.$store.getters.getThumbnailPreference
     },

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -2,8 +2,8 @@
   <div
     class="ft-list-video ft-list-item"
     :class="{
-      list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',
-      grid: (listType === 'grid' || forceListType === 'list') && forceListType !== 'list',
+      list: effectiveListTypeIsList,
+      grid: !effectiveListTypeIsList,
       [appearance]: true,
       watched: addWatchedStyle
     }"
@@ -72,7 +72,7 @@
         <ft-icon-button
           v-if="inUserPlaylist && canMoveVideoUp"
           :title="$t('User Playlists.Move Video Up')"
-          :icon="['fas', 'arrow-up']"
+          :icon="effectiveListTypeIsList ? ['fas', 'arrow-up'] : ['fas', 'arrow-left']"
           class="upArrowIcon"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
@@ -81,7 +81,7 @@
         <ft-icon-button
           v-if="inUserPlaylist && canMoveVideoDown"
           :title="$t('User Playlists.Move Video Down')"
-          :icon="['fas', 'arrow-down']"
+          :icon="effectiveListTypeIsList ? ['fas', 'arrow-down'] : ['fas', 'arrow-right']"
           class="downArrowIcon"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
@@ -157,8 +157,7 @@
         @click="handleOptionsClick"
       />
       <p
-        v-if="description && ((listType === 'list' || forceListType === 'list') && forceListType !== 'grid') &&
-          appearance === 'result'"
+        v-if="description && effectiveListTypeIsList && appearance === 'result'"
         class="description"
         v-html="description"
       />

src/renderer/components/ft-refresh-widget/ft-refresh-widget.js

@@ -22,11 +22,6 @@ export default defineComponent({
     }
   },
   emits: ['click'],
-  computed: {
-    isSideNavOpen: function () {
-      return this.$store.getters.getIsSideNavOpen
-    }
-  },
   methods: {
     click: function() {
       this.$emit('click')