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;
|
height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#media-control button {
|
#media-control button {
|
||||||
min-width: 0;
|
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 */
|
/* Clippy */
|
||||||
|
|||||||
@@ -43,17 +43,20 @@
|
|||||||
{% block clippy %}{% endblock %}
|
{% block clippy %}{% endblock %}
|
||||||
<script>
|
<script>
|
||||||
position.get_pos(); // Gets position from localStorage
|
position.get_pos(); // Gets position from localStorage
|
||||||
interact('.main-title-bar').draggable({
|
window.addEventListener('load', function () {
|
||||||
listeners: {
|
interact('.main-title-bar').draggable({
|
||||||
move (event) {
|
listeners: {
|
||||||
position.x += event.dx
|
move (event) {
|
||||||
position.y += event.dy
|
position.x += event.dx
|
||||||
event.target.parentElement.style.transform =
|
position.y += event.dy
|
||||||
`translate(${position.x}px, ${position.y}px)`
|
event.target.parentElement.style.transform =
|
||||||
},
|
`translate(${position.x}px, ${position.y}px)`
|
||||||
}
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
function hideWindow() {
|
function hideWindow() {
|
||||||
document.getElementById("main-window").classList.add("hide");
|
document.getElementById("main-window").classList.add("hide");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,25 +11,71 @@
|
|||||||
<h2 title="{{track.artist}}">{{track.artist}}</h2>
|
<h2 title="{{track.artist}}">{{track.artist}}</h2>
|
||||||
</div>
|
</div>
|
||||||
<input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
|
<input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
|
||||||
<div id="media-control">
|
<div id="media-control" class="waiting">
|
||||||
<button id="play">></button>
|
<button id="play"></button>
|
||||||
<button id="pause">||</button>
|
<button id="pause"></button>
|
||||||
<button id="stop">[]</button>
|
<button id="stop"></button>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="https://open.spotify.com/embed/iframe-api/v1"></script>
|
||||||
<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 element = document.getElementById('embed');
|
||||||
|
let playing = false;
|
||||||
|
let playingPosition = 0;
|
||||||
|
let duration = {{track.duration_ms}};
|
||||||
let options = {
|
let options = {
|
||||||
uri: 'spotify:track:{{track.id}}'
|
uri: 'spotify:track:{{track.id}}'
|
||||||
};
|
};
|
||||||
const callback = (EmbedController) => {
|
const callback = (EmbedController) => {
|
||||||
document.getElementById("play").addEventListener('click', () => {
|
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 => {
|
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>
|
</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="32x32" href="{% static 'favicon-32x32.png' %}">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">
|
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">
|
||||||
<link rel="manifest" href="/site.webmanifest">
|
<link rel="manifest" href="/site.webmanifest">
|
||||||
<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
|
|
||||||
<title>HD Muzak: {{ request.path }}</title>
|
<title>HD Muzak: {{ request.path }}</title>
|
||||||
<script>
|
<script>
|
||||||
//Global position object for cross-page window positioning
|
//Global position object for cross-page window positioning
|
||||||
@@ -45,4 +44,7 @@
|
|||||||
localStorage.removeItem("position")
|
localStorage.removeItem("position")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//global spotify IFrameAPI cache
|
||||||
|
ifa = null;
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user