complete play mode feature and add some songs

src/data/songs.js

@@ -45,5 +45,41 @@ export const songs = [
             name: 'Let it Bleed',
             cover: 'let-it-bleed.jpg'
         }
-    }
+    },
+    {
+        title: 'Planet Caravan',
+        filename: `${HOSTING_URL}ipkoupcos7hsuph/planet-caravan.mp3?dl=0`,
+        artist: 'Pantera',
+        album: {
+            name: 'Far Beyond Driven',
+            cover: 'far-beyond-driven.jpeg'
+        }
+    },
+    {
+        title: 'Ouch',
+        filename: `${HOSTING_URL}2m2uopq9jskl0jj/ouch.mp3?dl=0`,
+        artist: 'Bring Me The Horizon',
+        album: {
+            name: 'amo',
+            cover: 'amo.jpeg'
+        }
+    },
+    {
+        title: 'Zeitgeist',
+        filename: `${HOSTING_URL}udwou3jm08cuis0/zeitgeist.mp3?dl=0`,
+        artist: 'Black Sabbath',
+        album: {
+            name: '13',
+            cover: '13.jpeg'
+        }
+    },
+    {
+        title: 'Friends',
+        filename: `${HOSTING_URL}zcet6mgfvdwms45/friends.mp3?dl=0`,
+        artist: 'Led Zeppelin',
+        album: {
+            name: 'Led Zeppelin III',
+            cover: 'led-zeppelin-3.jpeg'
+        }
+    },
 ]

src/helpers/song.js

@@ -31,4 +31,4 @@ export const showError = () => {
     notyf.error('Please pick a song');
 }
 
-export const MODE = ['normal', 'random', 'single'];
+export const PLAY_MODE = ['normal', 'random', 'single'];

src/routes/__layout.svelte

@@ -23,7 +23,7 @@
 
 <style>
 	main {
-		padding: 2em;
+		padding: 1.4em;
 		max-width: 800px;
 		margin: 0 auto;
 	}

src/routes/index.svelte

@@ -9,11 +9,12 @@
 		albumCover,
 		album,
 		isLoaded,
-		index
+		index,
+		playMode
 	} from '../stores/song';
 	import SongBar from '../components/SongBar.svelte';
 	import { songs } from '../data/songs';
-	import { onEndedSong, showError } from '../helpers/song';
+	import { onEndedSong, PLAY_MODE, showError } from '../helpers/song';
 
 	let time = 0,
 		muted = false,
@@ -23,20 +24,30 @@
 		ended,
 		slider,
 		duration,
-		audio;
+		audio,
+		playModeIcon = 'repeat';
 
 	onMount(() => {
 		audio.onended = async () => {
 			isPlay.set(false);
 			time = 0;
-			let nextSong = $index + 1;
-			index.set(nextSong);
 			let lastSong = songs.length - 1;
-			if ($index > lastSong) {
-				index.set(0);
-				onEndedSong(0, audio);
+			if ($playMode === PLAY_MODE[0]) {
+				let nextSong = $index + 1;
+				index.set(nextSong);
+				if ($index > lastSong) {
+					index.set(0);
+					onEndedSong(0, audio);
+				} else {
+					onEndedSong(nextSong, audio);
+				}
+			} else if ($playMode === PLAY_MODE[1]) {
+				const randomSong = songs[Math.floor(Math.random() * songs.length)];
+				const randomIndex = songs.indexOf(randomSong);
+				index.set(randomIndex);
+				onEndedSong($index, audio);
 			} else {
-				onEndedSong(nextSong, audio);
+				onEndedSong($index, audio);
 			}
 		};
 	});
@@ -99,6 +110,19 @@
 			showError();
 		}
 	};
+
+	const changeMode = () => {
+		if ($playMode === PLAY_MODE[0]) {
+			playMode.set(PLAY_MODE[1]);
+			playModeIcon = 'random';
+		} else if ($playMode === PLAY_MODE[1]) {
+			playMode.set(PLAY_MODE[2]);
+			playModeIcon = 'repeat-1';
+		} else {
+			playMode.set(PLAY_MODE[0]);
+			playModeIcon = 'repeat';
+		}
+	};
 </script>
 
 <svelte:head>
@@ -120,9 +144,11 @@
 		/>
 		<div class="card__minutes">
 			<p>{formatDuration(time)}</p>
-			<!-- {#if $source}
-				<button type="button"><i class="far fa-fw fa-random" /></button>
-			{/if} -->
+			{#if $source}
+				<button type="button" on:click={changeMode}
+					><i class="far fa-fw fa-{playModeIcon}" /></button
+				>
+			{/if}
 			<p>{formatDuration(duration)}</p>
 		</div>
 		<div class="card__actions">
@@ -241,6 +267,10 @@
 			'Open Sans', 'Helvetica Neue', sans-serif;
 	}
 
+	.card .card__minutes > button {
+		font-size: 1.5rem;
+	}
+
 	.card .card__actions > button {
 		padding: 1em;
 		border-radius: 50%;

src/stores/song.js

@@ -8,4 +8,4 @@ export let source = writable(null),
             albumCover = writable('album.png'),
             isPlay = writable(false),
             isLoaded = writable(false),
-            mode = writable('normal');
+            playMode = writable('normal');