Force list view on playlists for mobile devices

src/constants.js

@@ -76,9 +76,13 @@ 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
+
 export {
   IpcChannels,
   DBActions,
   SyncEvents,
-  MAIN_PROFILE_ID
+  MAIN_PROFILE_ID,
+  MOBILE_WIDTH_THRESHOLD
 }

src/renderer/components/top-nav/top-nav.js

@@ -5,7 +5,7 @@ import FtSearchFilters from '../ft-search-filters/ft-search-filters.vue'
 import FtProfileSelector from '../ft-profile-selector/ft-profile-selector.vue'
 import debounce from 'lodash.debounce'
 
-import { IpcChannels } from '../../../constants'
+import { IpcChannels, MOBILE_WIDTH_THRESHOLD } from '../../../constants'
 import { openInternalPath } from '../../helpers/utils'
 import { translateWindowTitle } from '../../helpers/strings'
 import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '../../helpers/api/local'
@@ -98,7 +98,7 @@ export default defineComponent({
   },
   mounted: function () {
     let previousWidth = window.innerWidth
-    if (window.innerWidth <= 680) {
+    if (window.innerWidth <= MOBILE_WIDTH_THRESHOLD) {
       this.showSearchContainer = false
     }
 
@@ -113,7 +113,7 @@ export default defineComponent({
       // Don't change the status of showSearchContainer if only the height of the window changes
       // Opening the virtual keyboard can trigger this resize event, but it won't change the width
       if (previousWidth !== window.innerWidth) {
-        this.showSearchContainer = window.innerWidth > 680
+        this.showSearchContainer = window.innerWidth > MOBILE_WIDTH_THRESHOLD
         previousWidth = window.innerWidth
       }
     })
@@ -124,7 +124,7 @@ export default defineComponent({
     goToSearch: async function (query, { event }) {
       const doCreateNewWindow = event && event.shiftKey
 
-      if (window.innerWidth <= 680) {
+      if (window.innerWidth <= MOBILE_WIDTH_THRESHOLD) {
         this.$refs.searchContainer.blur()
         this.showSearchContainer = false
       } else {

src/renderer/themes.css

@@ -14,7 +14,6 @@
   /* stylelint-disable length-zero-no-unit */
   --top-bar-push-down-adjustment-has-description: 0px;
   --top-bar-push-down-adjustment-edit-mode: 0px;
-  --top-bar-push-down-adjustment-mobile: 0px;
   --top-bar-push-down-adjustment-empty: 0px;
   /* stylelint-enable length-zero-no-unit */
 }

src/renderer/views/Playlist/Playlist.js

@@ -17,6 +17,7 @@ import {
 } from '../../helpers/api/local'
 import { extractNumberFromString, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
 import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
+import { MOBILE_WIDTH_THRESHOLD } from '../../../constants'
 
 const SORT_BY_VALUES = {
   DateAddedNewest: 'date_added_descending',
@@ -75,6 +76,7 @@ export default defineComponent({
       isLoadingMore: false,
       getPlaylistInfoDebounce: function() {},
       playlistInEditMode: false,
+      forceListView: false,
 
       videoSearchQuery: '',
 
@@ -104,7 +106,7 @@ export default defineComponent({
       return this.$route.params.id
     },
     listType: function () {
-      return this.isUserPlaylistRequested ? this.$store.getters.getListType : 'list'
+      return this.isUserPlaylistRequested && !this.forceListView ? this.$store.getters.getListType : 'list'
     },
     userPlaylistsReady: function () {
       return this.$store.getters.getPlaylistsReady
@@ -285,6 +287,11 @@ export default defineComponent({
   },
   mounted: function () {
     this.getPlaylistInfoDebounce()
+    this.forceListView = window.innerWidth <= MOBILE_WIDTH_THRESHOLD
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy: function () {
+    window.removeEventListener('resize', this.handleResize)
   },
   methods: {
     getPlaylistInfo: function () {
@@ -562,6 +569,10 @@ export default defineComponent({
       }
     },
 
+    handleResize: function () {
+      this.forceListView = window.innerWidth <= MOBILE_WIDTH_THRESHOLD
+    },
+
     ...mapActions([
       'updateSubscriptionDetails',
       'updatePlaylist',

src/renderer/views/Playlist/Playlist.scss

@@ -26,7 +26,7 @@
 
   &.grid {
     flex-direction: column;
-    margin-block-start: calc(var(--top-bar-push-down-adjustment-default) + var(--top-bar-push-down-adjustment-edit-mode) + var(--top-bar-push-down-adjustment-mobile) + var(--top-bar-push-down-adjustment-has-description) + var(--top-bar-push-down-adjustment-empty));
+    margin-block-start: calc(var(--top-bar-push-down-adjustment-default) + var(--top-bar-push-down-adjustment-edit-mode) + var(--top-bar-push-down-adjustment-has-description) + var(--top-bar-push-down-adjustment-empty));
 
     &.hasPlaylistDescription {
       --top-bar-push-down-adjustment-has-description: 19px;
@@ -158,15 +158,3 @@
 .message {
   color: var(--tertiary-text-color);
 }
-
-@media only screen and (width <= 680px) {
-  .routerView{
-    &.grid {
-      --top-bar-push-down-adjustment-mobile: 20px;
-
-      .playlistInfoContainer {
-        position: absolute;
-      }
-    }
-  }
-}