feat: add controls to big player

src/utils/utils.templ

@@ -208,6 +208,11 @@ templ MusicPlayer() {
 						this.play(this.idx + 1);
 					}
 				},
+				previous() {
+					if (this.idx > 0) {
+						this.play(this.idx - 1);
+					}
+				},
 				preload() {
 					console.log("preloading");
 					if (!(this.idx + 1 < this.queue.length)) {
@@ -276,6 +281,32 @@ templ fullMusicPlayer() {
 				x-text="queue[idx]?.artist ?? '-'"
 			></div>
 		</div>
+		<div class="flex justify-center gap-4 py-4">
+			<button
+				id="next-button"
+				class="flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed px-4"
+				@click="previous"
+				:disabled="idx <= 0? true: false"
+			>
+				@skipBackwardIcon(24)
+			</button>
+			<div
+				class="flex items-center justify-center cursor-pointer relative px-4"
+				@click="togglePlayPause"
+			>
+				@circleNotchIcon(48)
+				@playIcon(38)
+				@pauseIcon(38)
+			</div>
+			<button
+				id="next-button"
+				class="flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed px-4"
+				@click="next"
+				:disabled="idx + 1 >= queue.length? true: false"
+			>
+				@skipForwardIcon(24)
+			</button>
+		</div>
 		<div class="absolute bottom-0 w-full grid grid-cols-2 bg-sky-50">
 			<button type="button" class="inline-block text-center py-4">
 				@playlistIcon(24)
@@ -324,8 +355,30 @@ templ pauseIcon(size int) {
 	</svg>
 }
 
+templ skipBackwardIcon(size int) {
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={ strconv.Itoa(size) }
+		height={ strconv.Itoa(size) }
+		fill="#000000"
+		viewBox="0 0 256 256"
+		style="--darkreader-inline-fill: #000000;"
+		data-darkreader-inline-fill=""
+	>
+		<path d="M208,47.88V208.12a16,16,0,0,1-24.43,13.43L64,146.77V216a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0v69.23L183.57,34.45A15.95,15.95,0,0,1,208,47.88Z"></path>
+	</svg>
+}
+
 templ skipForwardIcon(size int) {
-	<svg xmlns="http://www.w3.org/2000/svg" width={ strconv.Itoa(size) } height={ strconv.Itoa(size) } fill="#000000" viewBox="0 0 256 256" style="--darkreader-inline-fill: #000000;" data-darkreader-inline-fill="">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={ strconv.Itoa(size) }
+		height={ strconv.Itoa(size) }
+		fill="#000000"
+		viewBox="0 0 256 256"
+		style="--darkreader-inline-fill: #000000;"
+		data-darkreader-inline-fill=""
+	>
 		<path d="M208,40V216a8,8,0,0,1-16,0V146.77L72.43,221.55A15.95,15.95,0,0,1,48,208.12V47.88A15.95,15.95,0,0,1,72.43,34.45L192,109.23V40a8,8,0,0,1,16,0Z"></path>
 	</svg>
 }