User playlists as grid

src/constants.js

@@ -77,6 +77,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
 
@@ -85,5 +91,7 @@ export {
   DBActions,
   SyncEvents,
   MAIN_PROFILE_ID,
+  MOBILE_WIDTH_THRESHOLD,
+  PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD,
   SEARCH_CHAR_LIMIT
 }

src/renderer/App.js

@@ -105,6 +105,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,15 +22,6 @@ export default defineComponent({
     }
   },
   emits: ['click'],
-  computed: {
-    isSideNavOpen: function () {
-      return this.$store.getters.getIsSideNavOpen
-    },
-
-    hideLabelsSideBar: function () {
-      return this.$store.getters.getHideLabelsSideBar
-    }
-  },
   methods: {
     click: function() {
       this.$emit('click')

src/renderer/components/ft-refresh-widget/ft-refresh-widget.css → src/renderer/components/ft-refresh-widget/ft-refresh-widget.scss

@@ -1,9 +1,9 @@
+@use '../../scss-partials/utils';
+
 .floatingRefreshSection {
-  position: fixed;
-  inset-block-start: 60px;
-  inset-inline-end: 0;
+  @include utils.fixed-top-bar;
+
   box-sizing: border-box;
-  inline-size: calc(100% - 80px);
   padding-block: 5px;
   padding-inline: 10px;
   box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
@@ -13,21 +13,12 @@
   align-items: center;
   gap: 5px;
   justify-content: flex-end;
-  z-index: 3;
 }
 
 .floatingRefreshSection:has(.lastRefreshTimestamp + .refreshButton) {
   justify-content: space-between;
 }
 
-.floatingRefreshSection.sideNavOpen {
-  inline-size: calc(100% - 200px);
-}
-
-.floatingRefreshSection.hideLabelsSideBar {
-  inline-size: calc(100% - 60px);
-}
-
 .lastRefreshTimestamp {
   margin-block: 0;
   text-align: center;

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

@@ -1,10 +1,6 @@
 <template>
   <div
     class="floatingRefreshSection"
-    :class="{
-      sideNavOpen: isSideNavOpen,
-      hideLabelsSideBar: hideLabelsSideBar && !isSideNavOpen
-    }"
   >
     <p
       v-if="lastRefreshTimestamp"
@@ -25,4 +21,4 @@
 </template>
 
 <script src="./ft-refresh-widget.js" />
-<style scoped src="./ft-refresh-widget.css" />
+<style scoped lang="scss" src="./ft-refresh-widget.scss" />

src/renderer/components/playlist-info/playlist-info.js

@@ -40,6 +40,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    theme: {
+      type: String,
+      default: 'base'
+    },
     title: {
       type: String,
       required: true,