From 6f4da4046dc7aa29459ecfb2f02f0204c4dcf59f Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Mon, 4 Mar 2024 14:33:41 +0100
Subject: [PATCH] Media player updates Seek bar, volume bar, updated quota max

---
 playlist/models/profile.py          |   2 +
 playlist/static/img/seek.svg        |  47 +++++++++++++++++++++
 playlist/static/img/vol-select.svg  |  63 ++++++++++++++++++++++++++++
 playlist/static/img/volume.png      | Bin 0 -> 393 bytes
 playlist/static/style.css           |  51 +++++++++++++++++++++-
 playlist/templates/MediaPlayer.html |  10 ++++-
 6 files changed, 171 insertions(+), 2 deletions(-)
 create mode 100644 playlist/static/img/seek.svg
 create mode 100644 playlist/static/img/vol-select.svg
 create mode 100644 playlist/static/img/volume.png

diff --git a/playlist/models/profile.py b/playlist/models/profile.py
index 81ae35a..192c553 100644
--- a/playlist/models/profile.py
+++ b/playlist/models/profile.py
@@ -7,6 +7,7 @@ from django.utils import timezone
 from datetime import datetime, timedelta
 
 NOMINATIONS_PER_DAY = 10
+MAX_QUOTA = 22
 
 class Background(models.Model):
     def __str__(self):
@@ -33,6 +34,7 @@ class Profile(models.Model):
         if elapsed.seconds > 300:
             noms_per_second = NOMINATIONS_PER_DAY/(60*60*24)
             self.quota += noms_per_second * elapsed.seconds
+            self.quota = min(self.quota, MAX_QUOTA)
             print(f"Er zijn {elapsed.seconds}s voorbij, je nieuwe quota is {self.quota}")
             self.quota_last_updated = timezone.now()
 
diff --git a/playlist/static/img/seek.svg b/playlist/static/img/seek.svg
new file mode 100644
index 0000000..0780962
--- /dev/null
+++ b/playlist/static/img/seek.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="21"
+   height="21"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="svg.svg"
+   inkscape:export-filename="seek.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false" />
+  <path
+     d="M 0,0 V 1 H 20 V 20 H 0 v 1 H 21 V 0 Z"
+     style="fill:#000000;stroke-width:1.48889"
+     id="path10" />
+  <path
+     d="M 0,1 V 20 H 20 V 1 Z M 5,5 H 17 V 17 H 5 Z"
+     style="fill:#87888f;stroke-width:4.57988"
+     id="path11"
+     sodipodi:nodetypes="cccccccccc" />
+  <path
+     d="M 0,0 V 19 H 1 V 1 H 20 V 0 Z"
+     style="fill:#ffffff;stroke-width:1.3985"
+     id="path9"
+     sodipodi:nodetypes="ccccccc" />
+  <path
+     d="M 1,1 V 19 H 19 V 1 Z M 4,4 H 16 V 16 H 4 Z"
+     style="fill:#c0c7c8;stroke-width:1.49631"
+     id="path8"
+     sodipodi:nodetypes="cccccccccc" />
+</svg>
diff --git a/playlist/static/img/vol-select.svg b/playlist/static/img/vol-select.svg
new file mode 100644
index 0000000..ab1b6f2
--- /dev/null
+++ b/playlist/static/img/vol-select.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="11"
+   height="21"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="svg.svg"
+   inkscape:export-filename="vol-select.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false" />
+  <rect
+     style="fill:#000000;fill-opacity:1;stroke-width:1.07758"
+     id="rect7"
+     width="11"
+     height="21"
+     x="0"
+     y="0" />
+  <rect
+     style="fill:#87888f;fill-opacity:1;stroke-width:3.23846"
+     id="rect4"
+     width="10"
+     height="19"
+     x="0"
+     y="1" />
+  <rect
+     style="fill:#ffffff;fill-opacity:1;stroke-width:0.962516"
+     id="rect6"
+     width="9"
+     height="19"
+     x="0"
+     y="0" />
+  <rect
+     style="fill:#c0c7c8;fill-opacity:1;stroke-width:0.997539"
+     id="rect5"
+     width="8"
+     height="18"
+     x="1"
+     y="1" />
+  <rect
+     style="fill:#ffffff;fill-opacity:1;stroke-width:1.24518"
+     id="rect8"
+     width="1.3213186"
+     height="1"
+     x="8.6786814"
+     y="0" />
+</svg>
diff --git a/playlist/static/img/volume.png b/playlist/static/img/volume.png
new file mode 100644
index 0000000000000000000000000000000000000000..a697102535d82469f2aea9399585c272b031655a
GIT binary patch
literal 393
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!73?$#)eFPF<Nq6*hWMJ6X&;2Kn706de_6YK2
zV5m}KU}$JzVE6?TYIwoGP-?)y@G60U!D<ErgLuK5U4b@03DE$b5LX}#1pD_hG&D5)
z|IcvXz=8k&|F7EkDjF!tSQ6wH%;50sMjD8d<n8XlmYBAq7RX^Q@$_|Nf5avsE~wjd
zD<Bgnl;Y{)7{YNqIROYn5*ip%6FJU4k>E;PA<-^rAi=<T$K^85jK(cqToV{Y0=SEX
zeT*4aa(D`gG8-Sd({hxjr&qGYCrBZv$4MbpAz30+VV8tNOV7b)46P#02i2Hc7ff@S
z!^m*ofp>YeM|KF%KGhP}h?11Vl2ohYqEsNoU}Ruup=)5KYh)5)WNc+<Ze?PsYhYq!
kV6ZM^dLW91-29Zxv`X9>?sMwD1!`dMboFyt=akR{0J?{8S^xk5

literal 0
HcmV?d00001

diff --git a/playlist/static/style.css b/playlist/static/style.css
index 3b92681..efee7ec 100644
--- a/playlist/static/style.css
+++ b/playlist/static/style.css
@@ -147,7 +147,11 @@ menu[role="tablist"] > li > a {
 iframe {
 	opacity: 0;
 	position: fixed;
+}
+
+iframe.hide {
 	left: 100%;
+
 }
 
 /* Media player */
@@ -185,6 +189,32 @@ iframe {
 	height: 22px;
 }
 
+#seek::-moz-range-thumb {
+	background:transparent;
+	background-image: url(img/seek.svg);
+	width: 21px;
+	transform: none;
+}
+input[type="range"]#seek::-webkit-slider-thumb {
+	background:transparent;
+	background-image: url(img/seek.svg);
+	width: 21px;
+	transform: translateX(-5px) translateY(-4px);
+}
+
+input[type="range"]#seek::-webkit-slider-runnable-track{
+	height: 11px;
+	background: transparent;
+	box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #461c1c, -1px -1px 0 #333, -1px 1px black, 1px -1px #a460a4
+}
+
+#seek::-moz-range-track {
+	height: 11px;
+	background: transparent;
+	box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #461c1c, -1px -1px 0 #333, -1px 1px black, 1px -1px #a460a4
+}
+
+
 #media-control {
 	display:flex;
 }
@@ -250,6 +280,25 @@ iframe {
 	background-image:url(img/eject.svg);
 }
 
+#media-control #volume {
+	background-image:url(img/volume.png);
+	background-repeat:no-repeat;
+	padding-left: 24px;
+	background-position: 0 50%;
+	max-width: 120px;
+}
+
+#volume::-moz-range-thumb {
+	background: transparent;
+	background-image:url(img/vol-select.svg);
+}
+
+input[type="range"]#volume::-webkit-slider-thumb {
+	background: transparent;
+	-webkit-appearance: none;
+	background-image:url(img/vol-select.svg);
+}
+
 /* Clippy */
 #clippy {
 	position: fixed;
@@ -390,7 +439,7 @@ iframe {
 .progress-indicator {
 	height: 26px;
 	padding: 4px 3px;
-	width: 360px;
+	width: 340px;
 }
 
 .field-row.settings label {
diff --git a/playlist/templates/MediaPlayer.html b/playlist/templates/MediaPlayer.html
index 10c932c..cb304e4 100644
--- a/playlist/templates/MediaPlayer.html
+++ b/playlist/templates/MediaPlayer.html
@@ -22,6 +22,8 @@
 <button id="next" class="dummy"></button>
 <div class="spacer"></div>
 <button id="eject" class="dummy"></button>
+<div class="spacer"></div>
+<input id="volume" type="range" min="1" max="11" value="5" />
 </div>
 <script src="https://open.spotify.com/embed/iframe-api/v1"></script>
 <script>
@@ -36,7 +38,8 @@
     let playingPosition = 0;
     let duration = {{track.duration_ms}};
     let options = {
-      uri: 'spotify:track:{{track.id}}'
+      uri: 'spotify:track:{{track.id}}',
+      height: 152
     };
     const callback = (EmbedController) => {
         document.getElementById("play").addEventListener('click', () => {
@@ -84,5 +87,10 @@
         })
       };
       ifa.createController(element, options, callback);
+      iframe = document.getElementsByTagName("iframe")[0]
+      iframe.addEventListener('load', (e) => {
+        console.log(e);
+        iframe.classList.add('hide');
+      });
   };
 </script>
\ No newline at end of file