Media player update
And also some javascript bugs. player should work properly now.
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="64mm"
|
||||
height="64mm"
|
||||
viewBox="0 0 64 64"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:export-filename="pause.svg"
|
||||
inkscape:export-xdpi="12.7"
|
||||
inkscape:export-ydpi="12.7"
|
||||
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">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
id="rect2"
|
||||
width="16"
|
||||
height="48"
|
||||
x="8"
|
||||
y="8"
|
||||
style="fill:#808080;stroke-width:0.304549" />
|
||||
<rect
|
||||
id="rect2-5"
|
||||
width="16"
|
||||
height="48"
|
||||
x="40"
|
||||
y="8"
|
||||
style="fill:#808080;stroke-width:0.304549" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="64mm"
|
||||
height="64mm"
|
||||
viewBox="0 0 64 64"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:export-filename="play.svg"
|
||||
inkscape:export-xdpi="12.7"
|
||||
inkscape:export-ydpi="12.7"
|
||||
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">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
id="rect2"
|
||||
width="16"
|
||||
height="48"
|
||||
x="8"
|
||||
y="8"
|
||||
style="stroke-width:0.304549" />
|
||||
<rect
|
||||
id="rect2-5"
|
||||
width="16"
|
||||
height="48"
|
||||
x="40"
|
||||
y="8"
|
||||
style="stroke-width:0.304549" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,51 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="64mm"
|
||||
height="64mm"
|
||||
viewBox="0 0 64 64"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:export-filename="play.svg"
|
||||
inkscape:export-xdpi="12.7"
|
||||
inkscape:export-ydpi="12.7"
|
||||
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">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
id="path2"
|
||||
inkscape:flatsided="true"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="3.9214177"
|
||||
sodipodi:cy="28.775017"
|
||||
sodipodi:r1="30.64756"
|
||||
sodipodi:r2="15.32378"
|
||||
sodipodi:arg1="0"
|
||||
sodipodi:arg2="1.0471976"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="m 34.568978,28.775017 -45.97134,26.541565 0,-53.0831308 z"
|
||||
inkscape:transform-center-x="-8.0000004"
|
||||
style="fill:#808080;stroke-width:0.264583"
|
||||
transform="matrix(1.0441288,0,0,0.90424206,19.905535,5.9804195)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="64mm"
|
||||
height="64mm"
|
||||
viewBox="0 0 64 64"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
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">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
id="path2"
|
||||
inkscape:flatsided="true"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="3.9214177"
|
||||
sodipodi:cy="28.775017"
|
||||
sodipodi:r1="30.64756"
|
||||
sodipodi:r2="15.32378"
|
||||
sodipodi:arg1="0"
|
||||
sodipodi:arg2="1.0471976"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="m 34.568978,28.775017 -45.97134,26.541565 0,-53.0831308 z"
|
||||
inkscape:transform-center-x="-8.0000004"
|
||||
style="stroke-width:0.264583"
|
||||
transform="matrix(1.0441288,0,0,0.90424206,19.905535,5.9804195)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="64mm"
|
||||
height="64mm"
|
||||
viewBox="0 0 64 64"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:export-filename="stop.svg"
|
||||
inkscape:export-xdpi="12.7"
|
||||
inkscape:export-ydpi="12.7"
|
||||
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">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
id="rect2"
|
||||
width="48"
|
||||
height="49.048836"
|
||||
x="8"
|
||||
y="8"
|
||||
style="fill:#808080;stroke-width:0.533226" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="64mm"
|
||||
height="64mm"
|
||||
viewBox="0 0 64 64"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:export-filename="pause.svg"
|
||||
inkscape:export-xdpi="12.7"
|
||||
inkscape:export-ydpi="12.7"
|
||||
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">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
id="rect2"
|
||||
width="48"
|
||||
height="49.048836"
|
||||
x="8"
|
||||
y="8"
|
||||
style="stroke-width:0.533226" />
|
||||
<rect
|
||||
id="rect2-5"
|
||||
width="16"
|
||||
height="48"
|
||||
x="40"
|
||||
y="8"
|
||||
style="stroke-width:0.304549" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -185,9 +185,41 @@ iframe {
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
|
||||
#media-control button {
|
||||
min-width: 0;
|
||||
width: 20px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
#media-control:not(.waiting) button:hover {
|
||||
box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf
|
||||
}
|
||||
|
||||
#media-control button#play {
|
||||
background-image:url(img/play.svg);
|
||||
}
|
||||
|
||||
#media-control button#pause {
|
||||
background-image:url(img/pause.svg);
|
||||
}
|
||||
|
||||
#media-control button#stop {
|
||||
background-image:url(img/stop.svg);
|
||||
}
|
||||
|
||||
#media-control.waiting button#play {
|
||||
background-image:url(img/play-inactive.svg);
|
||||
}
|
||||
#media-control.waiting button#pause {
|
||||
background-image:url(img/pause-inactive.svg);
|
||||
}
|
||||
#media-control.waiting button#stop {
|
||||
background-image:url(img/stop-inactive.svg);
|
||||
}
|
||||
|
||||
/* Clippy */
|
||||
|
||||
@@ -43,17 +43,20 @@
|
||||
{% block clippy %}{% endblock %}
|
||||
<script>
|
||||
position.get_pos(); // Gets position from localStorage
|
||||
interact('.main-title-bar').draggable({
|
||||
listeners: {
|
||||
move (event) {
|
||||
position.x += event.dx
|
||||
position.y += event.dy
|
||||
event.target.parentElement.style.transform =
|
||||
`translate(${position.x}px, ${position.y}px)`
|
||||
},
|
||||
}
|
||||
window.addEventListener('load', function () {
|
||||
interact('.main-title-bar').draggable({
|
||||
listeners: {
|
||||
move (event) {
|
||||
position.x += event.dx
|
||||
position.y += event.dy
|
||||
event.target.parentElement.style.transform =
|
||||
`translate(${position.x}px, ${position.y}px)`
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
function hideWindow() {
|
||||
document.getElementById("main-window").classList.add("hide");
|
||||
}
|
||||
|
||||
@@ -11,25 +11,71 @@
|
||||
<h2 title="{{track.artist}}">{{track.artist}}</h2>
|
||||
</div>
|
||||
<input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
|
||||
<div id="media-control">
|
||||
<button id="play">></button>
|
||||
<button id="pause">||</button>
|
||||
<button id="stop">[]</button>
|
||||
<div id="media-control" class="waiting">
|
||||
<button id="play"></button>
|
||||
<button id="pause"></button>
|
||||
<button id="stop"></button>
|
||||
</div>
|
||||
<script src="https://open.spotify.com/embed/iframe-api/v1"></script>
|
||||
<script>
|
||||
window.onSpotifyIframeApiReady = (IFrameAPI) => {
|
||||
window.onSpotifyIframeApiReady = doSpotify;
|
||||
doSpotify();
|
||||
function doSpotify (IFrameAPI) {
|
||||
if (IFrameAPI) {
|
||||
ifa = IFrameAPI;
|
||||
} else if (!ifa) return;
|
||||
let element = document.getElementById('embed');
|
||||
let playing = false;
|
||||
let playingPosition = 0;
|
||||
let duration = {{track.duration_ms}};
|
||||
let options = {
|
||||
uri: 'spotify:track:{{track.id}}'
|
||||
};
|
||||
const callback = (EmbedController) => {
|
||||
document.getElementById("play").addEventListener('click', () => {
|
||||
EmbedController.play()
|
||||
EmbedController.play();
|
||||
playing = true;
|
||||
if (playingPosition) {
|
||||
setTimeout(() => {
|
||||
EmbedController.seek(parseInt(playingPosition/1000));
|
||||
playingPosition = 0
|
||||
}, 100)
|
||||
}
|
||||
});
|
||||
function pause() {
|
||||
if (playing) {
|
||||
EmbedController.togglePlay();
|
||||
playing = false;
|
||||
}
|
||||
}
|
||||
document.getElementById("pause").addEventListener('click', pause);
|
||||
document.getElementById("stop").addEventListener('click', () => {
|
||||
setTimeout(() => {
|
||||
playingPosition = 0;
|
||||
EmbedController.seek(0);
|
||||
document.getElementById("seek").value = 0;
|
||||
}, 500);
|
||||
pause();
|
||||
});
|
||||
EmbedController.addListener('ready', e => {
|
||||
document.getElementById('media-control').classList.remove('waiting')
|
||||
document.getElementById("seek").addEventListener('change', (e) => {
|
||||
let percentile = parseFloat(e.target.value)/100;
|
||||
EmbedController.seek(duration/1000*percentile);
|
||||
});
|
||||
});
|
||||
EmbedController.addListener('playback_update', e => {
|
||||
document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
|
||||
duration = e.data.duration;
|
||||
if (playingPosition == 0) document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
|
||||
if (e.data.isPaused) {
|
||||
playingPosition = e.data.position;
|
||||
}
|
||||
else if (playingPosition != 0 && e.data.position != 0) {
|
||||
EmbedController.seek(parseInt(playingPosition/1000));
|
||||
playingPosition = 0;
|
||||
}
|
||||
})
|
||||
};
|
||||
IFrameAPI.createController(element, options, callback);
|
||||
ifa.createController(element, options, callback);
|
||||
};
|
||||
</script>
|
||||
@@ -12,7 +12,6 @@
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
|
||||
<title>HD Muzak: {{ request.path }}</title>
|
||||
<script>
|
||||
//Global position object for cross-page window positioning
|
||||
@@ -45,4 +44,7 @@
|
||||
localStorage.removeItem("position")
|
||||
}
|
||||
}
|
||||
|
||||
//global spotify IFrameAPI cache
|
||||
ifa = null;
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user