Media player updates
Seek bar, volume bar, updated quota max
This commit is contained in:
@@ -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()
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 393 B |
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user