Add smartlist support

src/components/Navigation/PlayerControl.vue

@@ -25,6 +25,9 @@
       <div class="amplitude-next control-button">
         <font-awesome-icon :icon="['fas', 'step-forward']" :title="$t('player_control.next')" />
       </div>
+      <div class="amplitude-shuffle control-button">
+        <font-awesome-icon :icon="['fas', 'shuffle']" :title="$t('player_control.shuffle')" />
+      </div>
     </div>
   </div>
 </template>
@@ -89,6 +92,14 @@ div.control-button {
   font-size: 150%;
 }
 
+div.amplitude-shuffle-on {
+  color: rgb(175, 118, 12);
+}
+
+div.amplitude-shuffle-on:hover {
+  color: rgb(85, 57, 5);
+}
+
 div.control-button-paused {
   animation: blinker 3s linear infinite;
 }

src/components/Playlist/PlaylistEdit.vue

@@ -9,6 +9,13 @@
         <div>
           <input type="text" class="textInput" :placeholder="$t('playlists_edit.input.name_placeholder')" v-model="name" required />
         </div>
+        <div v-if="isNewPlaylist()">
+          <select v-model="selectedPlaylistType">
+            <option v-for="option in playlistTypes" :value="option.value" v-bind:key="option.value">
+                  {{ $t(option.label) }}
+            </option>
+          </select>
+        </div>
         <div>
           <input type="button" class="button" @click="save()" :value="$t('playlists_edit.save')" />
         </div>
@@ -31,7 +38,9 @@ export default defineComponent({
   data() {
     return { 
       playlist: new Playlist(),
-      msg: ''
+      msg: '',
+      playlistTypes: null as Array<{value: string, label: string}>|null,
+      selectedPlaylistType: 1 as number
     }
   },
   components: {
@@ -51,21 +60,36 @@ export default defineComponent({
     let playlistId = +this.$route.params.playlistId;
     if (playlistId !== 0) {
       EntityLoader.loadPlaylist(playlistId).then((playlist: PlaylistInterface) => this.playlist = playlist);
+    } else {
+      HttpRequest.get(
+        'playlist_types'
+      ).then((response: AxiosResponse): void => {
+        this.playlistTypes = response.data.items.map((typeId: number): object => {
+          return {
+            'value': typeId,
+            'label': 'playlist_type.' + typeId
+          };
+        });
+      });
     }
   },
   methods: {
     async save(): Promise<void> {
-      if (this.playlist.getId() === 0) {
+      if (this.isNewPlaylist()) {
         this.create();
       } else {
         this.persist();
       }
     },
+    isNewPlaylist(): boolean {
+      return this.playlist.getId() === 0
+    },
     async create(): Promise<void> {
       HttpRequest.post(
         'playlist',
         {
           name: this.playlist.getName(),
+          typeId: this.selectedPlaylistType,
         }
       ).then((response: AxiosResponse): void => {
         let data = response.data;
@@ -110,7 +134,9 @@ div.creationBox form div {
   width: 100%;
 }
 
-input[type=text], input[type=password] {
+input[type=text],
+input[type=password],
+select {
   width: 80%;
 }
 

src/locales/de.json

@@ -143,7 +143,8 @@
     "previous": "Letzter",
     "next": "Nächster",
     "play": "Abspielen",
-    "pause": "Pausieren"
+    "pause": "Pausieren",
+    "shuffle": "Zufallswiedergabe"
   },
   "songs": {
     "title": "Titel",
@@ -185,5 +186,9 @@
   "country_iso2": {
     "en": "Englisch",
     "de": "Deutsch"
+  },
+  "playlist_type": {
+    "1": "Statische Playlist",
+    "2": "Favoriten"
   }
 }

src/locales/en.json

@@ -143,7 +143,8 @@
     "previous": "Previous",
     "next": "Next",
     "play": "Play",
-    "pause": "Pause"
+    "pause": "Pause",
+    "shuffle": "Shuffle"
   },
   "songs": {
     "title": "Songs",
@@ -185,5 +186,9 @@
   "country_iso2": {
     "en": "English",
     "de": "German"
+  },
+  "playlist_type": {
+    "1": "Static playlist",
+    "2": "Favorites"
   }
 }

src/main.ts

@@ -18,6 +18,7 @@ import { faTools } from '@fortawesome/free-solid-svg-icons'
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
+import { faShuffle } from '@fortawesome/free-solid-svg-icons';
 import enLocaleMessages from './locales/en.json'
 import deLocaleMessages from './locales/de.json'
 import { createI18n } from 'vue-i18n';
@@ -46,6 +47,7 @@ library.add(faTools);
 library.add(faPlus);
 library.add(faTriangleExclamation);
 library.add(faCircleCheck);
+library.add(faShuffle);
 
 const emitter = mitt();