migration: better handling for song list events

cypress/integration/playlists.spec.ts

@@ -87,7 +87,7 @@ context('Playlists', () => {
       .should('be.visible')
       .and('contain', 'A New Playlist')
 
-    cy.get('#playlistWrapper [data-test=screen-placeholder]')
+    cy.get('#playlistWrapper [data-test=screen-empty-state]')
       .should('be.visible')
       .and('contain', 'The playlist is currently empty.')
   })

cypress/integration/searching.spec.ts

@@ -6,7 +6,7 @@ context('Searching', () => {
 
   it('shows the search screen when search box receives focus', () => {
     cy.get('@searchInput').focus()
-    cy.get('#searchExcerptsWrapper').within(() => cy.get('[data-test=screen-placeholder]').should('be.visible'))
+    cy.get('#searchExcerptsWrapper').within(() => cy.get('[data-test=screen-empty-state]').should('be.visible'))
   })
 
   it('performs an excerpt search', () => {

package.json

@@ -120,7 +120,7 @@
     "**/*.php": [
       "composer cs"
     ],
-    "**/*.ts": [
+    "resources/assets/**/*.ts": [
       "eslint"
     ]
   }

resources/assets/js/__tests__/components/screens/album.spec.ts

@@ -1,4 +1,4 @@
-import Component from '@/components/screens/album.vue'
+import Component from '@/components/screens/AlbumScreen.vue'
 import SongList from '@/components/song/SongList.vue'
 import { albumInfo as albumInfoService, download } from '@/services'
 import factory from '@/__tests__/factory'

resources/assets/js/__tests__/components/screens/artist.spec.ts

@@ -1,4 +1,4 @@
-import Component from '@/components/screens/artist.vue'
+import Component from '@/components/screens/ArtistScreen.vue'
 import SongList from '@/components/song/SongList.vue'
 import { artistInfo as artistInfoService, download } from '@/services'
 import factory from '@/__tests__/factory'

resources/assets/js/__tests__/components/screens/favorites.spec.ts

@@ -1,4 +1,4 @@
-import Component from '@/components/screens/favorites.vue'
+import Component from '@/components/screens/FavoritesScreen.vue'
 import SongList from '@/components/song/SongList.vue'
 import SongListControls from '@/components/songSongListControls.vue'
 import { download } from '@/services'
@@ -36,7 +36,7 @@ describe('components/screens/favorites', () => {
     })
 
     await wrapper.vm.$nextTick()
-    expect(wrapper.has('[data-test=screen-placeholder]')).toBe(true)
+    expect(wrapper.has('[data-test=screen-empty-state]')).toBe(true)
   })
 
   it('allows downloading', () => {

resources/assets/js/__tests__/components/screens/playlist.spec.ts

@@ -1,4 +1,4 @@
-import Component from '@/components/screens/playlist.vue'
+import Component from '@/components/screens/PlaylistScreen.vue'
 import SongList from '@/components/song/SongList.vue'
 import factory from '@/__tests__/factory'
 import { eventBus } from '@/utils'
@@ -39,7 +39,7 @@ describe('components/screens/playlist', () => {
       })
     })
     await wrapper.vm.$nextTick()
-    expect(wrapper.has('[data-test=screen-placeholder]')).toBe(true)
+    expect(wrapper.has('[data-test=screen-empty-state]')).toBe(true)
   })
 
   it('emits an event to delete the playlist', () => {

resources/assets/js/__tests__/components/screens/recently-played.spec.ts

@@ -1,4 +1,4 @@
-import Component from '@/components/screens/recently-played.vue'
+import Component from '@/components/screens/RecentlyPlayedScreen.vue'
 import SongList from '@/components/song/SongList.vue'
 import factory from '@/__tests__/factory'
 import { recentlyPlayedStore } from '@/stores'

resources/assets/js/components/layout/main-wrapper/main-content.vue

@@ -38,14 +38,14 @@ import QueueScreen from '@/components/screens/QueueScreen.vue'
 import AlbumListScreen from '@/components/screens/album-list.vue'
 import ArtistListScreen from '@/components/screens/artist-list.vue'
 import AllSongsScreen from '@/components/screens/AllSongsScreen.vue'
-import PlaylistScreen from '@/components/screens/playlist.vue'
-import FavoritesScreen from '@/components/screens/favorites.vue'
+import PlaylistScreen from '@/components/screens/PlaylistScreen.vue'
+import FavoritesScreen from '@/components/screens/FavoritesScreen.vue'
 
-const RecentlyPlayedScreen = defineAsyncComponent(() => import('@/components/screens/recently-played.vue'))
+const RecentlyPlayedScreen = defineAsyncComponent(() => import('@/components/screens/RecentlyPlayedScreen.vue'))
 const UserListScreen = defineAsyncComponent(() => import('@/components/screens/user-list.vue'))
 const AlbumArtOverlay = defineAsyncComponent(() => import('@/components/ui/album-art-overlay.vue'))
-const AlbumScreen = defineAsyncComponent(() => import('@/components/screens/album.vue'))
-const ArtistScreen = defineAsyncComponent(() => import('@/components/screens/artist.vue'))
+const AlbumScreen = defineAsyncComponent(() => import('@/components/screens/AlbumScreen.vue'))
+const ArtistScreen = defineAsyncComponent(() => import('@/components/screens/ArtistScreen.vue'))
 const SettingsScreen = defineAsyncComponent(() => import('@/components/screens/settings.vue'))
 const ProfileScreen = defineAsyncComponent(() => import('@/components/screens/profile.vue'))
 const YoutubeScreen = defineAsyncComponent(() => import('@/components/screens/youtube.vue'))

resources/assets/js/components/screens/AlbumScreen.vue

@@ -43,7 +43,7 @@
       </template>
     </ScreenHeader>
 
-    <SongList :items="songs" type="album" :config="listConfig" ref="songList"/>
+    <SongList ref="songList" :config="listConfig" :items="songs" type="album" @press:enter="onPressEnter"/>
 
     <section v-if="sharedState.useLastfm && showing" class="info-wrapper">
       <CloseModalBtn @click="showing = false"/>
@@ -84,6 +84,7 @@ const {
   showingControls,
   songListControlConfig,
   isPhone,
+  onPressEnter,
   playAll,
   playSelected,
   toggleControls

resources/assets/js/components/screens/AllSongsScreen.vue

@@ -20,7 +20,7 @@
       </template>
     </ScreenHeader>
 
-    <SongList :items="songs" type="all-songs" ref="songList"/>
+    <SongList ref="songList" :items="songs" type="all-songs" @press:enter="onPressEnter"/>
   </section>
 </template>
 
@@ -43,6 +43,7 @@ const {
   showingControls,
   songListControlConfig,
   isPhone,
+  onPressEnter,
   playAll,
   playSelected,
   toggleControls

resources/assets/js/components/screens/ArtistScreen.vue

@@ -48,7 +48,7 @@
       </template>
     </ScreenHeader>
 
-    <SongList :items="songs" type="artist" :config="listConfig" ref="songList"/>
+    <SongList ref="songList" :config="listConfig" :items="songs" type="artist" @press:enter="onPressEnter"/>
 
     <section class="info-wrapper" v-if="sharedState.useLastfm && showing">
       <CloseModalBtn @click="showing = false"/>
@@ -84,6 +84,7 @@ const {
   showingControls,
   songListControlConfig,
   isPhone,
+  onPressEnter,
   playAll,
   playSelected,
   toggleControls

resources/assets/js/components/screens/FavoritesScreen.vue

@@ -30,9 +30,16 @@
       </template>
     </ScreenHeader>
 
-    <SongList v-if="songs.length" ref="songList" :items="songs" type="favorites"/>
+    <SongList
+      v-if="songs.length"
+      ref="songList"
+      :items="songs"
+      type="favorites"
+      @press:delete="removeSelected"
+      @press:enter="onPressEnter"
+    />
 
-    <ScreenPlaceholder v-else>
+    <ScreenEmptyState v-else>
       <template v-slot:icon>
         <i class="fa fa-frown-o"></i>
       </template>
@@ -42,7 +49,7 @@
         <i class="fa fa-heart-o"></i>&nbsp;
         icon to mark a song as favorite.
       </span>
-    </ScreenPlaceholder>
+    </ScreenEmptyState>
   </section>
 </template>
 
@@ -54,7 +61,7 @@ import { useSongList } from '@/composables'
 import { defineAsyncComponent, toRef } from 'vue'
 
 const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
-const ScreenPlaceholder = defineAsyncComponent(() => import('@/components/ui/screen-placeholder.vue'))
+const ScreenEmptyState = defineAsyncComponent(() => import('@/components/ui/ScreenEmptyState.vue'))
 
 const {
   SongList,
@@ -67,6 +74,7 @@ const {
   showingControls,
   songListControlConfig,
   isPhone,
+  onPressEnter,
   playAll,
   playSelected,
   toggleControls
@@ -75,4 +83,5 @@ const {
 const allowDownload = toRef(sharedStore.state, 'allowDownload')
 
 const download = () => downloadService.fromFavorites()
+const removeSelected = () => selectedSongs.value.length && favoriteStore.unlike(selectedSongs.value)
 </script>

resources/assets/js/components/screens/PlaylistScreen.vue

@@ -36,11 +36,12 @@
         v-if="songs.length"
         ref="songList"
         :items="songs"
-        :playlist="playlist"
         type="playlist"
+        @press:delete="removeSelected"
+        @press:enter="onPressEnter"
       />
 
-      <ScreenPlaceholder v-else>
+      <ScreenEmptyState v-else>
         <template v-slot:icon>
           <i class="fa fa-file-o"></i>
         </template>
@@ -56,20 +57,21 @@
             or use the &quot;Add To…&quot; button to fill it up.
           </span>
         </template>
-      </ScreenPlaceholder>
+      </ScreenEmptyState>
     </template>
   </section>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, nextTick, ref } from 'vue'
+import { defineAsyncComponent, nextTick, ref, watch } from 'vue'
 import { eventBus, pluralize } from '@/utils'
 import { playlistStore, sharedStore } from '@/stores'
 import { download as downloadService } from '@/services'
 import { useSongList } from '@/composables'
+import { difference } from 'lodash'
 
 const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
-const ScreenPlaceholder = defineAsyncComponent(() => import('@/components/ui/screen-placeholder.vue'))
+const ScreenEmptyState = defineAsyncComponent(() => import('@/components/ui/ScreenEmptyState.vue'))
 
 const playlist = ref<Playlist>()
 
@@ -84,6 +86,7 @@ const {
   showingControls,
   songListControlConfig,
   isPhone,
+  onPressEnter,
   playAll,
   playSelected,
   toggleControls
@@ -95,6 +98,13 @@ const destroy = () => eventBus.emit('PLAYLIST_DELETE', playlist.value)
 const download = () => downloadService.fromPlaylist(playlist.value!)
 const editSmartPlaylist = () => eventBus.emit('MODAL_SHOW_EDIT_SMART_PLAYLIST_FORM', playlist.value)
 
+const removeSelected = () => {
+  if (!selectedSongs.value.length) return
+
+  playlistStore.removeSongs(playlist.value!, selectedSongs.value)
+  songs.value = difference(songs.value, selectedSongs.value)
+}
+
 /**
  * Fetch a playlist's content from the server, populate it, and use it afterwards.
  */

resources/assets/js/components/screens/QueueScreen.vue

@@ -25,20 +25,22 @@
 
     <SongList
       v-if="songs.length"
-      :items="songs"
-      :config="{ sortable: false }"
-      type="queue"
       ref="songList"
+      :config="{ sortable: false }"
+      :items="songs"
+      type="queue"
+      @press:delete="removeSelected"
+      @press:enter="onPressEnter"
     />
 
-    <ScreenPlaceholder v-else>
+    <ScreenEmptyState v-else>
       <template v-slot:icon>
         <i class="fa fa-coffee"></i>
       </template>
 
       No songs queued.
       <a v-if="showShuffleLibraryButton" class="start" @click.prevent="playAll(true)">Shuffle the whole library</a>?
-    </ScreenPlaceholder>
+    </ScreenEmptyState>
   </section>
 </template>
 
@@ -50,7 +52,7 @@ import { playback } from '@/services'
 import { useSongList } from '@/composables'
 
 const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
-const ScreenPlaceholder = defineAsyncComponent(() => import('@/components/ui/screen-placeholder.vue'))
+const ScreenEmptyState = defineAsyncComponent(() => import('@/components/ui/ScreenEmptyState.vue'))
 
 const {
   SongList,
@@ -73,6 +75,8 @@ const showShuffleLibraryButton = computed(() => songState.songs.length > 0)
 
 const playAll = (shuffle: boolean) => playback.queueAndPlay(songs.value.length ? songs.value : songStore.all, shuffle)
 const clearQueue = () => queueStore.clear()
+const removeSelected = () => selectedSongs.value.length && queueStore.unqueue(selectedSongs.value)
+const onPressEnter = () => selectedSongs.value.length && playback.play(selectedSongs.value[0])
 </script>
 
 <style lang="scss" scoped>

resources/assets/js/components/screens/RecentlyPlayedScreen.vue

@@ -20,15 +20,22 @@
       </template>
     </ScreenHeader>
 
-    <SongList v-if="songs.length" :items="songs" :sortable="false" type="recently-played"/>
+    <SongList
+      v-if="songs.length"
+      ref="songList"
+      :items="songs"
+      :sortable="false"
+      type="recently-played"
+      @press:enter="onPressEnter"
+    />
 
-    <ScreenPlaceholder v-else>
+    <ScreenEmptyState v-else>
       <template v-slot:icon>
         <i class="fa fa-clock-o"></i>
       </template>
       No songs recently played.
       <span class="secondary d-block">Start playing to populate this playlist.</span>
-    </ScreenPlaceholder>
+    </ScreenEmptyState>
   </section>
 </template>
 
@@ -36,11 +43,10 @@
 import { eventBus, pluralize } from '@/utils'
 import { recentlyPlayedStore } from '@/stores'
 import { useSongList } from '@/composables'
-import { defineAsyncComponent, reactive, toRef } from 'vue'
-import { playback } from '@/services'
+import { defineAsyncComponent, toRef } from 'vue'
 
 const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
-const ScreenPlaceholder = defineAsyncComponent(() => import('@/components/ui/screen-placeholder.vue'))
+const ScreenEmptyState = defineAsyncComponent(() => import('@/components/ui/ScreenEmptyState.vue'))
 
 const {
   SongList,
@@ -53,12 +59,12 @@ const {
   showingControls,
   songListControlConfig,
   isPhone,
+  onPressEnter,
+  playAll,
   playSelected,
   toggleControls
 } = useSongList(toRef(recentlyPlayedStore.state, 'songs'))
 
-const playAll = () => playback.queueAndPlay(songs.value)
-
 eventBus.on({
   'LOAD_MAIN_CONTENT': (view: MainViewName) => view === 'RecentlyPlayed' && recentlyPlayedStore.fetchAll()
 })

resources/assets/js/components/screens/search/excerpts.vue

@@ -48,13 +48,13 @@
         </section>
       </div>
 
-      <ScreenPlaceholder v-else>
+      <ScreenEmptyState v-else>
         <template v-slot:icon>
           <i class="fa fa-search"></i>
         </template>
         Find songs, artists, and albums,
         <span class="secondary d-block">all in one place.</span>
-      </ScreenPlaceholder>
+      </ScreenEmptyState>
     </div>
   </section>
 </template>
@@ -66,7 +66,7 @@ import { searchStore } from '@/stores'
 import router from '@/router'
 
 const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
-const ScreenPlaceholder = defineAsyncComponent(() => import('@/components/ui/screen-placeholder.vue'))
+const ScreenEmptyState = defineAsyncComponent(() => import('@/components/ui/ScreenEmptyState.vue'))
 const SongCard = defineAsyncComponent(() => import('@/components/song/card.vue'))
 const ArtistCard = defineAsyncComponent(() => import('@/components/artist/card.vue'))
 const AlbumCard = defineAsyncComponent(() => import('@/components/album/card.vue'))

resources/assets/js/components/screens/search/song-results.vue

@@ -20,7 +20,7 @@
       </template>
     </ScreenHeader>
 
-    <SongList ref="songList" :items="songs" type="search-results"/>
+    <SongList ref="songList" :items="songs" type="search-results" @press:enter="onPressEnter"/>
   </section>
 </template>
 
@@ -46,6 +46,7 @@ const {
   showingControls,
   songListControlConfig,
   isPhone,
+  onPressEnter,
   playAll,
   playSelected,
   toggleControls

resources/assets/js/components/screens/upload.vue

@@ -31,7 +31,7 @@
           <UploadItem v-for="file in uploadState.files" :key="file.id" :file="file" data-test="upload-item"/>
         </div>
 
-        <ScreenPlaceholder v-else>
+        <ScreenEmptyState v-else>
           <template v-slot:icon>
             <i class="fa fa-upload"></i>
           </template>
@@ -43,15 +43,15 @@
               <input type="file" name="file[]" multiple @change="onFileInputChange"/>
             </a>
           </span>
-        </ScreenPlaceholder>
+        </ScreenEmptyState>
       </div>
 
-      <ScreenPlaceholder v-else>
+      <ScreenEmptyState v-else>
         <template v-slot:icon>
           <i class="fa fa-exclamation-triangle"></i>
         </template>
         No media path set.
-      </ScreenPlaceholder>
+      </ScreenEmptyState>
     </div>
   </section>
 </template>
@@ -71,7 +71,7 @@ import BtnGroup from '@/components/ui/BtnGroup.vue'
 import Btn from '@/components/ui/btn.vue'
 
 const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
-const ScreenPlaceholder = defineAsyncComponent(() => import('@/components/ui/screen-placeholder.vue'))
+const ScreenEmptyState = defineAsyncComponent(() => import('@/components/ui/ScreenEmptyState.vue'))
 
 const mediaPath = toRef(settingStore.state, 'media_path')
 const droppable = ref(false)

resources/assets/js/components/screens/youtube.vue

@@ -3,7 +3,7 @@
     <screen-header>{{ title }}</screen-header>
 
     <div id="player">
-      <screen-placeholder data-testid="youtube-placeholder">
+      <ScreenEmptyState data-testid="youtube-placeholder">
         <template v-slot:icon>
           <i class="fa fa-youtube-play"></i>
         </template>
@@ -11,7 +11,7 @@
         <span class="d-block instruction">
           Start a video playback from the right sidebar.
         </span>
-      </screen-placeholder>
+      </ScreenEmptyState>
     </div>
   </section>
 </template>
@@ -26,7 +26,7 @@ import createYouTubePlayer from 'youtube-player'
 let player: YouTubePlayer|null = null
 
 const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
-const ScreenPlaceholder = defineAsyncComponent(() => import('@/components/ui/screen-placeholder.vue'))
+const ScreenEmptyState = defineAsyncComponent(() => import('@/components/ui/ScreenEmptyState.vue'))
 
 const title = ref('YouTube Video')
 

resources/assets/js/components/song/SongList.vue

@@ -79,9 +79,7 @@ import {
 import { RecycleScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import { $, eventBus, orderBy, startDragging, arrayify } from '@/utils'
-import { favoriteStore, playlistStore, queueStore } from '@/stores'
-import { playback } from '@/services'
-import router from '@/router'
+import { queueStore } from '@/stores'
 
 type SortField = 'song.track'
   | 'song.disc'
@@ -101,11 +99,11 @@ interface SongRow {
 const SongItem = defineAsyncComponent(() => import('@/components/song/item.vue'))
 
 const props = withDefaults(
-  defineProps<{ items: Song[], playlist?: Playlist, type?: SongListType, config?: Partial<SongListConfig> }>(),
+  defineProps<{ items: Song[], type?: SongListType, config?: Partial<SongListConfig> }>(),
   { type: 'all-songs', config: () => ({}) }
 )
 
-const { items, playlist, type, config } = toRefs(props)
+const { items, type, config } = toRefs(props)
 
 const lastSelectedRow = ref<SongRow>()
 const sortFields = ref<SortField[]>([])
@@ -127,7 +125,6 @@ const mergedConfig = computed((): SongListConfig => {
  * Since song objects themselves are shared by all song lists, we can't use them directly to
  * determine their selection status (selected/unselected). Therefore, for each song list, we
  * maintain an array of "song proxies," each containing the song itself and the "selected" flag.
- * To comply with virtual-scroller, a "type" attribute also presents.
  */
 const generateSongProxies = () => {
   // Since this method re-generates the song wrappers, we need to keep track of  the
@@ -184,73 +181,16 @@ watch(items, () => render())
 const vm = getCurrentInstance()
 watch(selectedSongs, () => eventBus.emit('SET_SELECTED_SONGS', selectedSongs.value, vm?.parent))
 
+const emit = defineEmits(['press:enter', 'press:delete'])
+
 const handleDelete = () => {
-  if (!selectedSongs.value.length) {
-    return
-  }
-
-  switch (type.value) {
-    case 'queue':
-      queueStore.unqueue(selectedSongs.value)
-      break
-
-    case 'favorites':
-      favoriteStore.unlike(selectedSongs.value)
-      break
-
-    case 'playlist':
-      playlistStore.removeSongs(playlist!.value!, selectedSongs.value)
-      break
-
-    default:
-      return
-  }
-
+  emit('press:delete')
   clearSelection()
 }
 
-const handleEnter = (event: DragEvent) => {
-  if (!selectedSongs.value.length) {
-    return
-  }
-
-  if (selectedSongs.value.length === 1) {
-    // Just play the song
-    playback.play(selectedSongs.value[0])
-    return
-  }
-
-  switch (type.value) {
-    case 'queue':
-      // Play the first song selected if we're in Queue screen.
-      playback.play(selectedSongs.value[0])
-      break
-
-    default:
-      //
-      // --------------------------------------------------------------------
-      // For other screens, follow this map:
-      //
-      //  • Enter: Queue songs to bottom
-      //  • Shift+Enter: Queues song to top
-      //  • Cmd/Ctrl+Enter: Queues song to bottom and play the first selected song
-      //  • Cmd/Ctrl+Shift+Enter: Queue songs to top and play the first queued song
-      // --------------------------------------------------------------------
-      //
-      if (event.shiftKey) {
-        queueStore.queueToTop(selectedSongs.value)
-      } else {
-        queueStore.queue(selectedSongs.value)
-      }
-
-      if (event.ctrlKey || event.metaKey) {
-        playback.play(selectedSongs.value[0])
-      }
-
-      router.go('queue')
-
-      break
-  }
+const handleEnter = (event: KeyboardEvent) => {
+  emit('press:enter', event)
+  clearSelection()
 }
 
 /**

resources/assets/js/components/ui/ScreenEmptyState.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="screen-placeholder" data-test="screen-placeholder">
+  <div class="screen-empty-state" data-test="screen-empty-state">
     <div>
       <span class="jumbo-icon">
         <slot name="icon">
@@ -13,11 +13,8 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-</script>
-
-<style lang="scss" scoped>
-.screen-placeholder {
+<style lang="scss">
+.screen-empty-state {
   display: flex;
   place-content: center;
   place-items: center;
@@ -58,6 +55,7 @@
     }
 
     .secondary {
+      margin-top: .2rem;
       font-size: 1.5rem;
     }
   }

resources/assets/js/composables/useSongList.ts

@@ -10,7 +10,8 @@ import { eventBus } from '@/utils'
 import ControlsToggler from '@/components/ui/ScreenControlsToggler.vue'
 import SongList from '@/components/song/SongList.vue'
 import SongListControls from '@/components/song/SongListControls.vue'
-import { songStore } from '@/stores'
+import { queueStore, songStore } from '@/stores'
+import router from '@/router'
 
 export const useSongList = (songs: Ref<Song[]>, controlsConfig: Partial<SongListControlsConfig> = {}) => {
   const songList = ref<InstanceType<typeof SongList>>()
@@ -36,10 +37,30 @@ export const useSongList = (songs: Ref<Song[]>, controlsConfig: Partial<SongList
   })
 
   const getSongsToPlay = (): Song[] => songList.value.getAllSongsWithSort()
-  const playAll = (shuffled: boolean) => playback.queueAndPlay(getSongsToPlay(), shuffled)
-  const playSelected = (shuffled: boolean) => playback.queueAndPlay(selectedSongs.value, shuffled)
+  const playAll = (shuffle: boolean) => playback.queueAndPlay(getSongsToPlay(), shuffle)
+  const playSelected = (shuffle: boolean) => playback.queueAndPlay(selectedSongs.value, shuffle)
   const toggleControls = () => (showingControls.value = !showingControls.value)
 
+  const onPressEnter = async (event: KeyboardEvent) => {
+    if (selectedSongs.value.length === 1) {
+      queueStore.queueIfNotQueued(selectedSongs.value[0])
+      await playback.play(selectedSongs.value[0])
+      return
+    }
+
+    //  • Only Enter: Queue songs to bottom
+    //  • Shift+Enter: Queues song to top
+    //  • Cmd/Ctrl+Enter: Queues song to bottom and play the first selected song
+    //  • Cmd/Ctrl+Shift+Enter: Queue songs to top and play the first queued song
+    event.shiftKey ? queueStore.queueToTop(selectedSongs.value) : queueStore.queue(selectedSongs.value)
+
+    if (event.ctrlKey || event.metaKey) {
+      await playback.play(selectedSongs.value[0])
+    }
+
+    router.go('/queue')
+  }
+
   eventBus.on({
     SET_SELECTED_SONGS (songs: Song[], target: ComponentInternalInstance) {
       target === vm && (selectedSongs.value = songs)
@@ -57,6 +78,7 @@ export const useSongList = (songs: Ref<Song[]>, controlsConfig: Partial<SongList
     showingControls,
     songListControlConfig,
     isPhone,
+    onPressEnter,
     playAll,
     playSelected,
     toggleControls

resources/assets/js/stores/queue.ts

@@ -1,4 +1,4 @@
-import { union, difference, shuffle } from 'lodash'
+import { difference, shuffle, union } from 'lodash'
 import { reactive } from 'vue'
 import { arrayify } from '@/utils'
 
@@ -19,7 +19,7 @@ export const queueStore = {
     // Through the clouds
     // With a circus mind
     // That's running wild
-    // Butterflies and zebras and moonbeams and fairytales
+    // Butterflies and zebras and moonbeams and fairy tales
     // That's all she ever thinks about
     // Riding with the wind
     //
@@ -57,16 +57,22 @@ export const queueStore = {
    * Add a list of songs to the end of the current queue.
    * @param {Song|Song[]} songs The song, or an array of songs
    */
-  queue (songs: Song | Song[]): void {
+  queue (songs: Song | Song[]) {
     this.unqueue(songs)
     this.all = union(this.all, arrayify(songs))
   },
 
+  queueIfNotQueued (song: Song) {
+    if (!this.contains(song)) {
+      this.queueAfterCurrent(song)
+    }
+  },
+
   /**
    * Add a list of songs to the top of the current queue.
    * @param {Song|Song[]} songs The song, or an array of songs
    */
-  queueToTop (songs: Song | Song[]): void {
+  queueToTop (songs: Song | Song[]) {
     this.all = union(arrayify(songs), this.all)
   },
 
@@ -74,7 +80,7 @@ export const queueStore = {
    * Replace the current queue with a list of songs.
    * @param {Song|Song[]} songs The song, or an array of songs
    */
-  replaceQueueWith (songs: Song | Song[]): void {
+  replaceQueueWith (songs: Song | Song[]) {
     this.all = arrayify(songs)
   },
 
@@ -82,7 +88,7 @@ export const queueStore = {
    * Queue songs right after the currently played song.
    * @param {Song|Song[]} songs The song, or an array of songs
    */
-  queueAfterCurrent (songs: Song | Song[]): void {
+  queueAfterCurrent (songs: Song | Song[]) {
     songs = arrayify(songs)
 
     if (!this.current || !this.all.length) {
@@ -96,7 +102,7 @@ export const queueStore = {
     this.all = head.concat(songs, this.all)
   },
 
-  unqueue (songs: Song | Song[]): void {
+  unqueue (songs: Song | Song[]) {
     this.all = difference(this.all, arrayify(songs))
   },
 
@@ -106,7 +112,7 @@ export const queueStore = {
    * @param {Song|Song[]} songs The song, or an array of songs
    * @param {Song}     target The target song object
    */
-  move (songs: Song | Song[], target: Song): void {
+  move (songs: Song | Song[], target: Song) {
     const targetIndex = this.indexOf(target)
     const movedSongs = arrayify(songs)
 
@@ -116,7 +122,7 @@ export const queueStore = {
     })
   },
 
-  clear (): void {
+  clear () {
     this.all = []
   },
 
@@ -152,7 +158,7 @@ export const queueStore = {
     this.state.current = song
   },
 
-  shuffle (): void {
+  shuffle () {
     this.all = shuffle(this.all)
   }
 }