From 42c16053a9efaa240684e2d072586596d35a898a Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sun, 11 Mar 2018 04:45:01 +0100
Subject: [PATCH] Implemented audio player

---
 layout/sidebar/audioplayer.scarlet | 36 +++++++++++++++++++
 layout/sidebar/sidebar.pixy        |  9 +++++
 scripts/Actions/Audio.ts           | 57 ++++++++++++++++++++++++++----
 scripts/AnimeNotifier.ts           |  1 -
 4 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 layout/sidebar/audioplayer.scarlet

diff --git a/layout/sidebar/audioplayer.scarlet b/layout/sidebar/audioplayer.scarlet
new file mode 100644
index 00000000..aa8a1ae6
--- /dev/null
+++ b/layout/sidebar/audioplayer.scarlet
@@ -0,0 +1,36 @@
+#audio-player
+	horizontal
+	default-transition
+	justify-content center
+	align-items center
+	margin 0.8rem 0
+
+.audio-player-play-pause-container
+	position relative
+	width 48px
+	height 48px
+
+#audio-player-play,
+#audio-player-pause
+	position absolute
+	left 0
+	top 0
+	display flex
+	justify-content center
+	align-items center
+	font-size 1.5rem
+	background rgba(0, 0, 0, 0.03)
+	border none
+	border-radius 50%
+	width 100%
+	height 100%
+
+	:hover
+		color button-hover-color
+		background button-hover-background
+
+	&.fade-out
+		pointer-events none
+
+	.icon-play
+		transform translateX(3px)
\ No newline at end of file
diff --git a/layout/sidebar/sidebar.pixy b/layout/sidebar/sidebar.pixy
index 6d62386c..7fc18880 100644
--- a/layout/sidebar/sidebar.pixy
+++ b/layout/sidebar/sidebar.pixy
@@ -51,6 +51,15 @@ component Sidebar(user *arn.User)
 		//- SidebarButton("Genres", "/genres", "clone")
 
 		.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")
 		
 		.sidebar-link(aria-label="Search")
 			.sidebar-button
diff --git a/scripts/Actions/Audio.ts b/scripts/Actions/Audio.ts
index 7f90de38..dd11037c 100644
--- a/scripts/Actions/Audio.ts
+++ b/scripts/Actions/Audio.ts
@@ -1,13 +1,58 @@
 import { AnimeNotifier } from "../AnimeNotifier"
 
+var audioContext: AudioContext
+var audioNode: AudioBufferSourceNode
+
 // Play audio file
 export function playAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
-	if(!arn.audio) {
-		arn.audio = document.createElement("audio") as HTMLAudioElement
-		let source = document.createElement("source") as HTMLSourceElement
-		source.src = button.dataset.src
-		arn.audio.appendChild(source)
+	if(!audioContext) {
+		audioContext = new AudioContext()
 	}
 
-	arn.audio.play()
+	if(audioNode) {
+		audioNode.stop()
+	}
+
+	let request = new XMLHttpRequest()
+	request.open("GET", button.dataset.src, true)
+	request.responseType = "arraybuffer"
+	request.onload = () => {
+		audioContext.decodeAudioData(request.response, buffer => {
+			console.log("play")
+			audioNode = audioContext.createBufferSource()
+			audioNode.buffer = buffer
+			audioNode.connect(audioContext.destination)
+			audioNode.start(0)
+		}, console.error)
+	}
+	request.send()
+
+	// Show audio player
+	document.getElementById("audio-player").classList.remove("fade-out")
+	document.getElementById("audio-player-play").classList.add("fade-out")
+	document.getElementById("audio-player-pause").classList.remove("fade-out")
+}
+
+// Pause audio
+export function pauseAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
+	if(!audioNode) {
+		return
+	}
+
+	audioNode.playbackRate.setValueAtTime(0.0, 0)
+
+	document.getElementById("audio-player-play").classList.remove("fade-out")
+	document.getElementById("audio-player-pause").classList.add("fade-out")
+}
+
+// Resume audio
+export function resumeAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
+	if(!audioNode) {
+		return
+	}
+
+	audioNode.playbackRate.setValueAtTime(1.0, 0)
+
+	document.getElementById("audio-player-play").classList.add("fade-out")
+	document.getElementById("audio-player-pause").classList.remove("fade-out")
 }
\ No newline at end of file
diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts
index ce6f340a..26aa69f3 100644
--- a/scripts/AnimeNotifier.ts
+++ b/scripts/AnimeNotifier.ts
@@ -32,7 +32,6 @@ export class AnimeNotifier {
 	mainPageLoaded: boolean
 	isLoading: boolean
 	lastReloadContentPath: string
-	audio: HTMLAudioElement
 
 	elementFound: MutationQueue
 	elementNotFound: MutationQueue