From b1f457bd4d11cab18d559037b49483bc92191db7 Mon Sep 17 00:00:00 2001
From: Naved Islam <navedcoded@gmail.com>
Date: Sun, 13 Nov 2022 18:20:47 +0800
Subject: [PATCH] add refresh button!

---
 src/routes/Audio.svelte | 39 +++++++++++++++++++++++++++------------
 static/refresh.svg      |  3 +++
 2 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 static/refresh.svg

diff --git a/src/routes/Audio.svelte b/src/routes/Audio.svelte
index 2f85558..3894126 100644
--- a/src/routes/Audio.svelte
+++ b/src/routes/Audio.svelte
@@ -194,6 +194,9 @@ this is needed since vite doesn't play nice with onerror fallbacks -->
 	<h1>{audios[currentTrack].qasidah}</h1>
 	<h2>﵁ {audios[currentTrack].author}</h2>
 </div>
+<button on:click={() => location.reload()} id="refresh">
+	<img loading="eager" alt="refresh icon" src="/refresh.svg" />
+</button>
 
 <audio src="/audio/{audios[currentTrack].filename}.mp3" preload="metadata" loop />
 <!-- <p>audio player ish</p> -->
@@ -227,8 +230,9 @@ this is needed since vite doesn't play nice with onerror fallbacks -->
 		border-radius: 12px;
 		text-align: center;
 		padding: 30px 20px 20px 20px;
-		margin: -30px 0 90px 0;
+		margin: -30px 0 0px 0;
 		min-width: 300px;
+		box-shadow: rgba(0, 33, 18, 0.12) 0px 1px 3px, rgba(0, 33, 18, 0.24) 0px 1px 2px;
 	}
 	#current-time,
 	#seek-slider,
@@ -252,21 +256,13 @@ this is needed since vite doesn't play nice with onerror fallbacks -->
 		width: 40px;
 		height: 40px;
 		float: left;
-	}
-	p {
-		position: absolute;
-		top: -18px;
-		right: 5%;
-		padding: 0 5px;
-		margin: 0;
-		font-size: 28px;
-		background: #fff;
+		background-color: #006c46;
+		line-height: 0; /* fixes large height from arabic font */
 	}
 	#play-icon {
-		background-color: #006c46;
 		box-shadow: rgba(0, 33, 18, 0.19) 0px 10px 20px, rgba(0, 33, 18, 0.23) 0px 6px 6px;
-		line-height: 0; /* fixes large height from arabic font */
 		transition: all 0.3s ease;
+		margin-top: 80px;
 	}
 	#play-icon.play {
 		width: 75px;
@@ -287,6 +283,25 @@ this is needed since vite doesn't play nice with onerror fallbacks -->
 		width: 40px;
 		height: 40px;
 	}
+	#refresh > img {
+		width: 20px;
+		height: 20px;
+	}
+	#refresh {
+		text-align: center;
+		border-radius: 100px;
+		background-color: #f4fff5;
+		margin: 10px 0 0 0;
+		/* z-index: 10; */
+		/* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
+		width: 50px;
+		height: 30px;
+		color: white;
+		border: 1px solid grey;
+	}
+	#refresh > p {
+		margin: 5px 0 0px 0;
+	}
 	.time {
 		display: inline-block;
 		width: 37px;
diff --git a/static/refresh.svg b/static/refresh.svg
new file mode 100644
index 0000000..fcbbc52
--- /dev/null
+++ b/static/refresh.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+    <path fill="grey"  d="M30.7 38.45q-.8.4-1.4 0-.6-.4-.6-1.35 0-.4.25-.8t.65-.6q3.45-1.6 5.425-4.825Q37 27.65 37 23.85q0-2.4-1.175-4.875T32.75 14.6l-1.45-1.3V18q0 .65-.425 1.075-.425.425-1.075.425-.65 0-1.075-.425Q28.3 18.65 28.3 18V9.5q0-.65.425-1.075Q29.15 8 29.8 8h8.5q.65 0 1.075.425.425.425.425 1.075 0 .65-.425 1.075Q38.95 11 38.3 11h-5.05l.75.7q3 2.8 4.5 6t1.5 6.15q0 4.8-2.525 8.7-2.525 3.9-6.775 5.9ZM9.85 40q-.65 0-1.075-.425-.425-.425-.425-1.075 0-.65.425-1.075Q9.2 37 9.85 37h5l-.75-.6q-3.2-2.55-4.65-5.55-1.45-3-1.45-6.7 0-4.8 2.575-8.725T17.4 9.55q.8-.35 1.375.075t.575 1.325q0 .4-.25.775t-.65.575q-3.4 1.6-5.425 4.825T11 24.15q0 3.15 1.175 5.475 1.175 2.325 3.175 4.025l1.5 1.05V30q0-.65.425-1.075.425-.425 1.075-.425.65 0 1.075.425.425.425.425 1.075v8.5q0 .65-.425 1.075Q19 40 18.35 40Z" />
+</svg>
\ No newline at end of file