Added skip controls UI

layout/sidebar/audioplayer.pixy

@@ -1,10 +1,17 @@
 component AudioPlayer
 	#audio-player
-		.audio-player-play-pause-container
-			button#audio-player-play.action(data-action="resumeAudio", data-trigger="click")
-				RawIcon("play")
-			
-			button#audio-player-pause.fade-out.action(data-action="pauseAudio", data-trigger="click")
-				RawIcon("pause")
+		#audio-player-controls
+			button#audio-player-prev.audio-player-side-button
+				RawIcon("step-backward")
+
+			.audio-player-play-pause-container
+				button#audio-player-play.action(data-action="resumeAudio", data-trigger="click")
+					RawIcon("play")
+				
+				button#audio-player-pause.fade-out.action(data-action="pauseAudio", data-trigger="click")
+					RawIcon("pause")
+
+			button#audio-player-next.audio-player-side-button
+				RawIcon("step-forward")
 		
 		input#audio-player-volume.action(data-action="setVolume", data-trigger="input", type="range", min="0", max="100", value="50")

layout/sidebar/audioplayer.scarlet

@@ -2,11 +2,15 @@
 	vertical
 	default-transition
 	position relative
-	justify-content center
-	align-items center
 	margin 0.8rem 0
 	min-height 90px
 
+#audio-player-controls
+	horizontal
+	justify-content center
+	align-items center
+	justify-content space-evenly
+
 .audio-player-play-pause-container
 	position relative
 	width 48px
@@ -21,9 +25,7 @@
 	justify-content center
 	align-items center
 	font-size 1.5rem
-	color text-color
-	background rgba(0, 0, 0, 0.03)
-	border none
+
 	border-radius 50%
 	width 100%
 	height 100%
@@ -38,6 +40,26 @@
 	.icon-play
 		transform translateX(3px)
 
+#audio-player-play,
+#audio-player-pause,
+.audio-player-side-button
+	color text-color
+	background rgba(0, 0, 0, 0.03)
+	border none
+
+.audio-player-side-button
+	width 32px
+	height 32px
+	display flex
+	justify-content center
+	align-items center
+
+#audio-player-prev
+	//
+
+#audio-player-next
+	//
+
 mixin volume-slider-thumb
 	appearance none
 	width 18px