From 220549b30b79a95bfde239d10538007960690879 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sun, 11 Mar 2018 21:28:07 +0100
Subject: [PATCH] Added skip controls UI

---
 layout/sidebar/audioplayer.pixy    | 19 ++++++++++++------
 layout/sidebar/audioplayer.scarlet | 32 +++++++++++++++++++++++++-----
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/layout/sidebar/audioplayer.pixy b/layout/sidebar/audioplayer.pixy
index 2665e4c7..f4678352 100644
--- a/layout/sidebar/audioplayer.pixy
+++ b/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")
\ No newline at end of file
diff --git a/layout/sidebar/audioplayer.scarlet b/layout/sidebar/audioplayer.scarlet
index 92013211..9ecc0426 100644
--- a/layout/sidebar/audioplayer.scarlet
+++ b/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