mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

Refactor MediaPlayer, adds login sound

Browse Source 
Logingeluidje werkt waarschijnlijk bij niemand, maar leuke easter egg
This commit is contained in:
Mark Hoekveen
2024-02-23 12:00:07 +01:00
parent d73910ab02
commit 2c808c7703
8 changed files with 47 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
playlist/static/startup.wav
BIN
View File
Binary file not shown.
playlist/static/style.css
+6 -16
View File
@@ -11,8 +11,7 @@ body {
z-index:99; z-index:99;
min-height: 520px; min-height: 520px;
width:560px; width:560px;
overflow-y:scroll; overflow:hidden;
overflow-x:hidden;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: space-between; justify-content: space-between;
@@ -154,22 +153,13 @@ iframe {
width: 256px; width: 256px;
} }
input[type="range"] { #seek {
margin: 8px 0; height: 22px;
} }
input[type="range"]::-moz-range-track { #media-control button {
background: #aaa; min-width: 0;
height: 12px; width: 20px;
}
input[type="range"]::-moz-range-thumb {
height: 15px;
width: 15px;
transform: unset;
background: transparent;
border: 3px solid lightgray;
border-bottom-color: darkgrey;
} }
/* Clippy */ /* Clippy */
playlist/templates/Base.html
-1
View File
@@ -4,7 +4,6 @@
{% include "head.html" %} {% include "head.html" %}
</head> </head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'> <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
<script>setWallpaper()</script>
<div class="window" id="main-window"> <div class="window" id="main-window">
<div class="title-bar main-title-bar"> <div class="title-bar main-title-bar">
<div class="title-bar-text"> <div class="title-bar-text">
playlist/templates/Login.html
+5 -1
View File
@@ -4,7 +4,11 @@
{% include "head.html" %} {% include "head.html" %}
</head> </head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'> <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
<script>setWallpaper()</script> <script>
a = new Audio("{% static 'startup.wav' %}");
a.volume = 0.5;
a.play();
</script>
<div class="window popup login" id="info-window"> <div class="window popup login" id="info-window">
<div class="title-bar"> <div class="title-bar">
<div class="title-bar-text">Welkom bij Muzak</div> <div class="title-bar-text">Welkom bij Muzak</div>
playlist/templates/MediaPlayer.html
+35
View File
@@ -0,0 +1,35 @@
<div id="embed"></div>
<div id="album">
{% if track.album.image %}
<img src="{{track.album.image.url}}" />
{% elif track.album.image_url %}
<img src="{{track.album.image_url}}" />
{% else %}
<img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
{% endif %}
<h1 title="{{track.name}}">{{track.name}}</h1>
<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">&gt;</button>
<button id="pause">||</button>
<button id="stop">[]</button>
</div>
<script>
window.onSpotifyIframeApiReady = (IFrameAPI) => {
let element = document.getElementById('embed');
let options = {
uri: 'spotify:track:{{track.id}}'
};
const callback = (EmbedController) => {
document.getElementById("play").addEventListener('click', () => {
EmbedController.play()
});
EmbedController.addListener('playback_update', e => {
document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
})
};
IFrameAPI.createController(element, options, callback);
};
</script>
playlist/templates/Settings.html
-13
View File
@@ -25,20 +25,7 @@
</option> </option>
{% endfor %} {% endfor %}
</select> </select>
<button id="wallpaper-reset" onclick="wallpaperChanged()">Reset</button>
</div> </div>
{% endif %} {% endif %}
</form> </form>
<script>
function wallpaperChanged() {
const expression = /^https?:\/\/.*\.(jpeg|jpg|png|gif)$/
const regex = new RegExp(expression)
val = document.getElementById("wallpaper").value
if(regex.test(val)) {
console.log(val)
localStorage.setItem("wallpaper", val);
setWallpaper()
}
}
</script>
{% endblock %} {% endblock %}
playlist/templates/Vote.html
+1 -33
View File
@@ -8,22 +8,7 @@ Stemmen
{% if track %} {% if track %}
<div id="vote-box" hx-target="body"> <div id="vote-box" hx-target="body">
{% if error %}<div class="error">{{ error }}</div>{% endif %} {% if error %}<div class="error">{{ error }}</div>{% endif %}
<div id="embed"></div> {% include 'MediaPlayer.html' with track=track %}
<div id="album">
{% if track.album.image %}
<img src="{{track.album.image.url}}" />
{% elif track.album.image_url %}
<img src="{{track.album.image_url}}" />
{% else %}
<img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
{% endif %}
<h1 title="{{track.name}}">{{track.name}}</h1>
<h2 title="{{track.artist}}">{{track.artist}}</h2>
</div>
<input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
<div class="media-control">
<button id="playpause">⏵️</button>
</div>
<div <div
id="vote-stars" id="vote-stars"
@@ -65,23 +50,6 @@ Stemmen
{% endif %} {% endif %}
</div> </div>
</div> </div>
<script>
window.onSpotifyIframeApiReady = (IFrameAPI) => {
let element = document.getElementById('embed');
let options = {
uri: 'spotify:track:{{track.id}}'
};
const callback = (EmbedController) => {
document.getElementById("playpause").addEventListener('click', () => {
EmbedController.togglePlay()
});
EmbedController.addListener('playback_update', e => {
document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
})
};
IFrameAPI.createController(element, options, callback);
};
</script>
{% else %} {% else %}
<p hx-boost="true"> <p hx-boost="true">
Je hebt niets meer om te stemmen. Lekker bezig! Je hebt niets meer om te stemmen. Lekker bezig!
playlist/templates/head.html
-8
View File
@@ -46,11 +46,3 @@
} }
} }
</script> </script>
<script>
function setWallpaper() {
url = localStorage.getItem("wallpaper")
if (url)
document.body.style.backgroundImage = "url(" + url + ")";
}
</script>