From ee071c3fe8903d7dd6c9665a83b7daa02e9a3d8a Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sun, 11 Mar 2018 18:17:35 +0100
Subject: [PATCH] Added volume slider

---
 layout/sidebar/audioplayer.pixy    | 10 +++++++
 layout/sidebar/audioplayer.scarlet | 48 ++++++++++++++++++++++++++++--
 layout/sidebar/sidebar.pixy        |  9 +-----
 pages/soundtrack/soundtrack.pixy   |  2 +-
 scripts/Actions/Audio.ts           | 25 +++++++++++-----
 5 files changed, 76 insertions(+), 18 deletions(-)
 create mode 100644 layout/sidebar/audioplayer.pixy

diff --git a/layout/sidebar/audioplayer.pixy b/layout/sidebar/audioplayer.pixy
new file mode 100644
index 00000000..790141bb
--- /dev/null
+++ b/layout/sidebar/audioplayer.pixy
@@ -0,0 +1,10 @@
+component AudioPlayer
+	#audio-player.fade-out
+		.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")
+		
+		input#audio-player-volume.action(data-action="setVolume", data-trigger="input", type="range", min="0", max="100", value="100")
\ No newline at end of file
diff --git a/layout/sidebar/audioplayer.scarlet b/layout/sidebar/audioplayer.scarlet
index 2fdd0b8b..a9ccc3ec 100644
--- a/layout/sidebar/audioplayer.scarlet
+++ b/layout/sidebar/audioplayer.scarlet
@@ -1,6 +1,7 @@
 #audio-player
-	horizontal
+	vertical
 	default-transition
+	position relative
 	justify-content center
 	align-items center
 	margin 0.8rem 0
@@ -34,4 +35,47 @@
 		pointer-events none
 
 	.icon-play
-		transform translateX(3px)
\ No newline at end of file
+		transform translateX(3px)
+
+mixin volume-slider-thumb
+	appearance none
+	width 18px
+	height 18px
+	transform scale(0.5)
+	border-radius 50%
+	background text-color
+	cursor pointer
+	opacity 0.25
+	box-shadow shadow-medium
+	default-transition
+
+#audio-player-volume
+	appearance none
+	-webkit-appearance none
+	width 100%
+	height 6px
+	background rgba(0, 0, 0, 0.03)
+	outline none !important
+	border none !important
+	border-radius 0
+	padding 0
+	margin 0
+	margin-top 1rem
+
+	::-webkit-slider-thumb
+		volume-slider-thumb
+		-webkit-appearance none
+
+	::-moz-range-thumb
+		volume-slider-thumb
+
+	:active
+		transform none
+
+	:hover
+		background rgba(0, 0, 0, 0.06)
+
+		::-webkit-slider-thumb
+			background link-hover-color
+			opacity 1
+			transform scale(1)
\ No newline at end of file
diff --git a/layout/sidebar/sidebar.pixy b/layout/sidebar/sidebar.pixy
index 7fc18880..4b2b383e 100644
--- a/layout/sidebar/sidebar.pixy
+++ b/layout/sidebar/sidebar.pixy
@@ -52,14 +52,7 @@ component Sidebar(user *arn.User)
 
 		.spacer
 
-		
-		#audio-player.fade-out
-			.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")
+		AudioPlayer
 		
 		.sidebar-link(aria-label="Search")
 			.sidebar-button
diff --git a/pages/soundtrack/soundtrack.pixy b/pages/soundtrack/soundtrack.pixy
index 0c07dff6..0b28ce0a 100644
--- a/pages/soundtrack/soundtrack.pixy
+++ b/pages/soundtrack/soundtrack.pixy
@@ -16,7 +16,7 @@ component Track(track *arn.SoundTrack, user *arn.User)
 					
 					if user != nil && media.Service == "Youtube" && track.File != ""
 						.buttons
-							button.action(data-action="playAudio", data-trigger="click", data-audio-src="/audio/" + track.File)
+							button.action(data-action="playAudio", data-trigger="click", data-audio-src="/audio/" + track.File, data-soundtrack-id=track.ID)
 								Icon("play")
 								span Play in background
 
diff --git a/scripts/Actions/Audio.ts b/scripts/Actions/Audio.ts
index 6c7eeaa0..b64c3ae5 100644
--- a/scripts/Actions/Audio.ts
+++ b/scripts/Actions/Audio.ts
@@ -2,6 +2,8 @@ import { AnimeNotifier } from "../AnimeNotifier"
 
 var audioContext: AudioContext
 var audioNode: AudioBufferSourceNode
+var gainNode: GainNode
+var volume = 1.0
 var playId = 0
 var audioPlayer = document.getElementById("audio-player")
 var audioPlayerPlay = document.getElementById("audio-player-play")
@@ -11,6 +13,8 @@ var audioPlayerPause = document.getElementById("audio-player-pause")
 export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
 	if(!audioContext) {
 		audioContext = new AudioContext()
+		gainNode = audioContext.createGain()
+		gainNode.gain.value = volume
 	}
 
 	playId++
@@ -39,7 +43,8 @@ export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
 
 			audioNode = audioContext.createBufferSource()
 			audioNode.buffer = buffer
-			audioNode.connect(audioContext.destination)
+			audioNode.connect(gainNode)
+			gainNode.connect(audioContext.destination)
 			audioNode.start(0)
 
 			audioNode.onended = (event: MediaStreamErrorEvent) => {
@@ -74,13 +79,15 @@ export function stopAudio(arn: AnimeNotifier) {
 	// Fade out sidebar player
 	audioPlayer.classList.add("fade-out")
 
-	if(!audioNode) {
-		return
+	if(gainNode) {
+		gainNode.disconnect()
 	}
 
-	audioNode.stop()
-	audioNode.disconnect()
-	audioNode = null
+	if(audioNode) {
+		audioNode.stop()
+		audioNode.disconnect()
+		audioNode = null
+	}
 }
 
 // Toggle audio
@@ -95,8 +102,12 @@ export function toggleAudio(arn: AnimeNotifier, element: HTMLElement) {
 }
 
 // Set volume
-export function setVolume(arn: AnimeNotifier, element: HTMLElement) {
+export function setVolume(arn: AnimeNotifier, element: HTMLInputElement) {
+	volume = parseFloat(element.value) / 100.0
 
+	if(gainNode) {
+		gainNode.gain.value = volume
+	}
 }
 
 // Pause audio