✨ Add dropdown button to play tracks in browser mode

cristianpb · May 24, 2020 · 30e25ef · 30e25ef
1 parent 35c9468
commit 30e25ef
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 23 deletions.
diff --git a/src/routes/browse.svelte b/src/routes/browse.svelte
@@ -4,23 +4,60 @@
 
 <h1 class="title">Browse
 </h1>
-
-<nav class="breadcrumb" aria-label="breadcrumbs">
-  <ul>
-    <li>
-      <a href="{null}" on:click={() => promise = goToRoot()}>
-      Root
-      </a>
-    </li>
-    {#each browsePath as pathElement, idx}
-      <li>
-        <a href="{null}" on:click={() => promise = browserUri(pathElement, idx, 'back')}>
-        {pathElement.name}
+
+<div class="columns is-mobile">
+  <div class="column">
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      <ul>
+        <li>
+          <a href="{null}" on:click={() => promise = goToRoot()}>
+            Root
+          </a>
+        </li>
+        {#each browsePath as pathElement, idx}
+          <li>
+            <a href="{null}" on:click={() => promise = browserUri(pathElement, idx, 'back')}>
+              {pathElement.name}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    </nav>
+  </div>
+  {#if results.some(result => ['track'].indexOf(result.type) > -1)}
+  <div class="column is-narrow">
+    <div class="dropdown is-right" class:is-active={showOptions} >
+      <div class="dropdown-trigger" on:click={() => showOptions = !showOptions}>
+      {#if showOptions}
+        <a href="{null}" class="button">
+          <FontAwesomeIcon icon={faAngleUp} class="icon" aria-haspopup="true" aria-controls="dropdown-menu"/>
         </a>
-      </li>
-    {/each}
-  </ul>
-</nav>
+      {:else}
+        <a href="{null}" class="button">
+          <FontAwesomeIcon icon={faAngleDown} class="icon" aria-haspopup="true" aria-controls="dropdown-menu"/>
+        </a>
+      {/if}
+      </div>
+      <div class="dropdown-menu" id="dropdown-menu" role="menu">
+        <div class="dropdown-content">
+          <a href="{null}" class="dropdown-item" on:click={playAllTracks(results.map(result => result.uri))}>
+            <FontAwesomeIcon icon={faPlayCircle} class="icon is-small"  />&nbsp;&nbsp;
+            Play now
+          </a>
+          <a href="{null}" class="dropdown-item" on:click={shufflePlayAllTracks(null, results.map(result => result.uri))}>
+            <FontAwesomeIcon icon={faRandom} class="icon is-small"/>&nbsp;&nbsp;
+            Play shuffle
+          </a>
+          <a href="{null}" class="dropdown-item" on:click={addTracksQueue(null, results.map(result => result.uri))}>
+            <FontAwesomeIcon icon={faLevelDownAlt} class="icon is-small"/>&nbsp;&nbsp;
+            Add to queue
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  {/if}
+</div>
 
 {#if promise}
   <div class="list is-hoverable">
@@ -86,21 +123,23 @@
 <script>
   import { onMount } from 'svelte';
   import { mopidy } from '../tools/stores';
-  import { connectWS, playTrackSingle, addTrackNext, addTrackQueue  } from '../tools/mopidyTools';
+  import { connectWS, playTrackSingle, addTrackNext, addTrackQueue, addTracksQueue, shufflePlayAllTracks, playAllTracks } from '../tools/mopidyTools';
   import FontAwesomeIcon from '../components/FontAwesomeIcon.svelte';
   import {
     faSpinner,
     faAngleDown,
     faAngleUp,
     faPlayCircle,
     faArrowRight,
-    faLevelDownAlt
+    faLevelDownAlt,
+    faRandom
   } from '@fortawesome/free-solid-svg-icons';
 
   let browsePath = [];
   let results = [];
   let promise;
   let options;
+  let showOptions = false;
 
   onMount(async () => {
     $mopidy = await connectWS()

diff --git a/src/tools/mopidyTools.js b/src/tools/mopidyTools.js
@@ -277,15 +277,29 @@ export const playTracklist = (tlTrack) => {
   mopidyWS.playback.play([tlTrack])
 }
 
-export const shufflePlayAllTracks = (Tracks) => {
+export const playAllTracks = (uris) => {
   mopidyWS.tracklist.clear()
-  mopidyWS.tracklist.add([Tracks])
+  mopidyWS.tracklist.add({ uris })
+  mopidyWS.playback.play()
+}
+
+export const shufflePlayAllTracks = (Tracks, uris) => {
+  mopidyWS.tracklist.clear()
+  if (Tracks) {
+    mopidyWS.tracklist.add([Tracks])
+  } else if (uris) {
+    mopidyWS.tracklist.add({ uris })
+  }
   mopidyWS.tracklist.shuffle()
   mopidyWS.playback.play()
 }
 
-export const addTracksQueue = (Tracks) => {
-  mopidyWS.tracklist.add([Tracks])
+export const addTracksQueue = (Tracks, uris) => {
+  if (Tracks) {
+    mopidyWS.tracklist.add([Tracks])
+  } else if (uris) {
+    mopidyWS.tracklist.add({ uris })
+  }
 }
 
 export const loadAlbumImageLocal = async (track) => {

diff --git a/src/tools/stores.js b/src/tools/stores.js
@@ -40,4 +40,4 @@ export const mopidyPort = writable('__MOPIDY_PORT__');
 
 export const mopidyProtocol = writable('');
 
-export const imageProvider = writable('local');
+export const imageProvider = writable('lastfm');
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,4 +40,4 @@ export const mopidyPort = writable('__MOPIDY_PORT__');

		export const mopidyProtocol = writable('');

		export const imageProvider = writable('local');
		export const imageProvider = writable('lastfm');