Media player updates

Seek bar, volume bar, updated quota max

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()
 

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>

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>

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 {

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>