iou1name/Pyrite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

controls

Browse Source
This commit is contained in:
iou1name 2024-11-20 15:51:51 -05:00
parent dadf192aef
commit 3305e97552
2 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
static/pyrite.css
View File

@ -48,22 +48,6 @@ input[type="radio"]:checked+div {
grid-area: c; grid-area: c;
} }
#player_container {
grid-area: f;
display: flex;
justify-content: center;
}
#cover_art {
padding-right: 1em;
padding-top: 0.5em;
}
img {
height: 100%;
max-height: 30vh;
}
.list_item { .list_item {
height: 2em; height: 2em;
margin: 0.25em; margin: 0.25em;
@ -84,6 +68,27 @@ img {
font-size: 80%; font-size: 80%;
} }
#player_container {
grid-area: f;
display: flex;
flex-direction: column;
align-items: center;
}
#cover_art {
padding-right: 1em;
padding-top: 0.5em;
}
img {
height: 100%;
max-height: 30vh;
}
#title {
display: flex;
}
input[type='range'] { input[type='range'] {
accent-color: green; accent-color: green;
} }
@ -99,3 +104,11 @@ button img {
#next-track-btn img { #next-track-btn img {
transform: rotate(180deg); transform: rotate(180deg);
} }
#seek_controls {
width: 50%;
}
#seek-slider {
width: 100%;
}

28
templates/index.html
View File

@ -27,18 +27,17 @@
<div id="track_list" class="list"> <div id="track_list" class="list">
</div> </div>
<div id="player_container"> <div id="player_container">
<span id="playlist_container"> <div id="title">
<select id="playlist" onchange="select_playlist(event)">
{% for playlist in playlists %}
<option value="{{ playlist }}"{% if playlist == request.cookies.get('playlist') %} selected{% endif %}>{{ playlist }}</option>
{% endfor %}
</select>
</span>
<span id="cover_art"><img alt="Album cover art" src=""></span> <span id="cover_art"><img alt="Album cover art" src=""></span>
<span id="player_controls"> <span>
<h4><span id="now_playing_artist"></span> - <span id="now_playing_album"></span></h4> <h4>
<h3 id="now_playing_title"></h3> <span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span>
<audio id="player" controls></audio> </h4>
<h3 id="now_playing_title">Title</h3>
</span>
</div>
<div id="player_controls">
<audio id="player" controls style="display:none"></audio>
<button id="prev-track-btn" class="btn" onclick="prevTrack()"> <button id="prev-track-btn" class="btn" onclick="prevTrack()">
<img id="prev" src="./static/prev.svg"></img> <img id="prev" src="./static/prev.svg"></img>
</button> </button>
@ -51,8 +50,11 @@
<button id="next-track-btn" class="btn" onclick="nextTrack()"> <button id="next-track-btn" class="btn" onclick="nextTrack()">
<img id="prev" src="./static/prev.svg"></img> <img id="prev" src="./static/prev.svg"></img>
</button> </button>
<input type="range" id="seek-slider" max="100" value="0"> <input id="volume-slider" type="range" max="100" value="0">
</span> </div>
<div id="seek_controls">
<input id="seek-slider" type="range" max="100" value="0">
</div>
</div> </div>
</main> </main>
<template id="artist_template"> <template id="artist_template">