From 30e25ef1c02d9efc742c42ad37038120b2a5cf9e Mon Sep 17 00:00:00 2001
From: cristianpb <felipebrokate@gmail.com>
Date: Sun, 24 May 2020 12:48:48 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20dropdown=20button=20to=20play?=
 =?UTF-8?q?=20tracks=20in=20browser=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/browse.svelte | 75 ++++++++++++++++++++++++++++++----------
 src/tools/mopidyTools.js | 22 +++++++++---
 src/tools/stores.js      |  2 +-
 3 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/src/routes/browse.svelte b/src/routes/browse.svelte
index 4beaf54..cb333e9 100644
--- 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,7 +123,7 @@
 <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,
@@ -94,13 +131,15 @@
     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
index f2babc8..7cff82d 100644
--- 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
index 819110c..90ae4a1 100644
--- 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');