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

Windows media player

Browse Source 
Soort van. Een begin eraan in ieder geval
This commit is contained in:
Mark Hoekveen
2024-02-12 15:02:43 +01:00
parent 963ab7f0bf
commit dfbdcf1459
6 changed files with 93 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
playlist/models/album.py
+1
View File
@@ -10,3 +10,4 @@ class Album(models.Model):
album_type = models.CharField(max_length=255) album_type = models.CharField(max_length=255)
total_tracks = models.PositiveSmallIntegerField(null=True) total_tracks = models.PositiveSmallIntegerField(null=True)
image = models.ImageField(upload_to="albums/") image = models.ImageField(upload_to="albums/")
image_url = models.URLField(null=True)
playlist/models/track.py
+6
View File
@@ -15,6 +15,12 @@ class Track(models.Model):
s += " door " s += " door "
s += " & ".join(artists) s += " & ".join(artists)
return s return s
@property
def artist(self):
if self.artists.count() > 0:
artists = list(map(lambda a:a.name, self.artists.all()))
return " & ".join(artists)
id = models.CharField(primary_key=True, max_length=128) id = models.CharField(primary_key=True, max_length=128)
name = models.CharField(max_length=255) name = models.CharField(max_length=255)
artists = models.ManyToManyField(Artist) artists = models.ManyToManyField(Artist)
playlist/static/style.css
+50
View File
@@ -10,3 +10,53 @@
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: space-between; justify-content: space-between;
} }
iframe {
opacity: 0;
position: fixed;
left: 100%;
}
#album {
background: black;
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
#album h1, #album h2 {
color: white;
margin: 0;
}
#album h1 {
font-size: 2rem;
}
#album h2 {
font-size: 1.5rem;
font-weight: normal;
}
#album img {
max-width: 256px;
}
input[type="range"] {
margin: 8px 0;
}
input[type="range"]::-moz-range-track {
background: #aaa;
height: 12px;
}
input[type="range"]::-moz-range-thumb {
height: 15px;
width: 15px;
transform: unset;
background: transparent;
border: 3px solid lightgray;
border-bottom-color: darkgrey;
box-shadow: 1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9;
}
playlist/templates/Base.html
+2 -4
View File
@@ -4,12 +4,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{% static 'js/htmx.min.js' %}" defer></script> <script src="{% static 'js/htmx.min.js' %}" defer></script>
<script src="https://unpkg.com/interactjs"></script> <script src="https://unpkg.com/interactjs"></script>
<link <link rel="stylesheet" href="https://unpkg.com/98.css" >
rel="stylesheet"
href="https://unpkg.com/98.css"
>
<link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" /> <link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
</head> </head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="background:#01817F;"> <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="background:#01817F;">
playlist/templates/SpotifyEmbed.html
+31 -6
View File
@@ -1,12 +1,19 @@
{% if track %} {% if track %}
<div id="vote-box" hx-target="#vote-box"> <div id="vote-box" hx-target="#vote-box">
{% if error %}<div class="error">{{ error }}</div>{% endif %} {% if error %}<div class="error">{{ error }}</div>{% endif %}
<iframe src="https://open.spotify.com/embed/track/{{ track.id }}" <div id="embed"></div>
class="play-sample" <div id="album">
width="100%" {% if track.album.image_url %}
height="352" <img src="{{track.album.image_url}}" />
frameborder="0" {% else %}
allow="encrypted-media"></iframe> <img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
{% endif %}
<h1>{{track.name}}</h1>
<h2>{{track.artist}}</h2>
</div>
<input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
<button id="playpause">||</button>
<div <div
id="vote-buttons" id="vote-buttons"
hx-vals='{"spotify_id": "{{ track.id }}"}' hx-vals='{"spotify_id": "{{ track.id }}"}'
@@ -42,6 +49,24 @@
{% endblock %} {% endblock %}
{% endif %} {% endif %}
</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.loadUri(episode.dataset.spotifyId)
EmbedController.togglePlay()
});
EmbedController.addListener('playback_update', e => {
console.log(e);
document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
})
};
IFrameAPI.createController(element, options, callback);
};
{% 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/views.py
+2
View File
@@ -81,6 +81,8 @@ class NominateView(LoginRequiredMixin, View):
# Album # Album
album = from_json(Album, json["album"]) album = from_json(Album, json["album"])
album.image_url = json["album"]["images"][0]["url"]
album.save()
del json["album"] del json["album"]
for artist in album_artists: for artist in album_artists:
album.artists.add(artist) album.artists.add(artist)