added player control buttons
This commit is contained in:
parent
4b7d917a21
commit
912da7c28b
|
|
@ -22,6 +22,11 @@ async def index(request: Request):
|
||||||
context = {"request": request}
|
context = {"request": request}
|
||||||
return templates.TemplateResponse('index.html', context)
|
return templates.TemplateResponse('index.html', context)
|
||||||
|
|
||||||
|
@app.get("/player", response_class=HTMLResponse)
|
||||||
|
async def player(request: Request):
|
||||||
|
context = {"request": request}
|
||||||
|
return templates.TemplateResponse('player.html', context)
|
||||||
|
|
||||||
@app.get("/rand_track/")
|
@app.get("/rand_track/")
|
||||||
async def get_rand_track():
|
async def get_rand_track():
|
||||||
"""Return a random track."""
|
"""Return a random track."""
|
||||||
|
|
|
||||||
16
static/pause.svg
Normal file
16
static/pause.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="800px" height="800px" viewBox="0 0 332.145 332.146"
|
||||||
|
xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M121.114,0H25.558c-8.017,0-14.517,6.5-14.517,14.515v303.114c0,8.017,6.5,14.517,14.517,14.517h95.556
|
||||||
|
c8.017,0,14.517-6.5,14.517-14.517V14.515C135.631,6.499,129.131,0,121.114,0z M106.6,303.113H40.072V29.031H106.6V303.113z"/>
|
||||||
|
<path d="M306.586,0h-95.541c-8.018,0-14.518,6.5-14.518,14.515v303.114c0,8.017,6.5,14.517,14.518,14.517h95.541
|
||||||
|
c8.016,0,14.518-6.5,14.518-14.517V14.515C321.102,6.499,314.602,0,306.586,0z M292.073,303.113h-66.514V29.031h66.514V303.113z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 958 B |
13
static/play.svg
Normal file
13
static/play.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 58.752 58.752" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M52.524,23.925L12.507,0.824c-1.907-1.1-4.376-1.097-6.276,0C4.293,1.94,3.088,4.025,3.088,6.264v46.205
|
||||||
|
c0,2.24,1.204,4.325,3.131,5.435c0.953,0.555,2.042,0.848,3.149,0.848c1.104,0,2.192-0.292,3.141-0.843l40.017-23.103
|
||||||
|
c1.936-1.119,3.138-3.203,3.138-5.439C55.663,27.134,54.462,25.05,52.524,23.925z M49.524,29.612L9.504,52.716
|
||||||
|
c-0.082,0.047-0.18,0.052-0.279-0.005c-0.084-0.049-0.137-0.142-0.137-0.242V6.263c0-0.1,0.052-0.192,0.14-0.243
|
||||||
|
c0.042-0.025,0.09-0.038,0.139-0.038c0.051,0,0.099,0.013,0.142,0.038l40.01,23.098c0.089,0.052,0.145,0.147,0.145,0.249
|
||||||
|
C49.663,29.47,49.611,29.561,49.524,29.612z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 972 B |
14
static/prev.svg
Normal file
14
static/prev.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="800px" height="800px" viewBox="0 0 372.511 372.511"
|
||||||
|
xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M365.563,29.145c-4.301-2.483-9.592-2.483-13.896,0L119.264,163.327V41.177c0-7.673-6.229-13.896-13.896-13.896H13.894
|
||||||
|
C6.229,27.281,0,33.504,0,41.177v290.159c0,7.674,6.229,13.895,13.894,13.895h91.474c7.668,0,13.896-6.221,13.896-13.895V209.186
|
||||||
|
l232.404,134.185c2.145,1.24,4.547,1.859,6.947,1.859c2.401,0,4.793-0.619,6.947-1.859c4.302-2.48,6.948-7.07,6.948-12.033V41.177
|
||||||
|
C372.512,36.214,369.864,31.624,365.563,29.145z M91.472,317.441H27.789V55.072h63.683V317.441z M344.72,307.267L135.126,186.255
|
||||||
|
L344.72,65.246V307.267z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 998 B |
|
|
@ -4,6 +4,7 @@ body {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: Helvetica, sans-serif;
|
font-family: Helvetica, sans-serif;
|
||||||
|
background-color: #eed89b;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
|
@ -32,6 +33,7 @@ input[type="radio"]:checked+div {
|
||||||
.list {
|
.list {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
|
background-color: #e8e2d7;
|
||||||
}
|
}
|
||||||
|
|
||||||
#artist_list {
|
#artist_list {
|
||||||
|
|
@ -81,3 +83,19 @@ img {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type='range'] {
|
||||||
|
accent-color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button img {
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-track-btn img {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,17 +38,26 @@ async function playTrack() {
|
||||||
player.play();
|
player.play();
|
||||||
navigator.mediaSession.playbackState = "playing";
|
navigator.mediaSession.playbackState = "playing";
|
||||||
setMediaSession(track);
|
setMediaSession(track);
|
||||||
|
|
||||||
|
document.querySelector("#play-btn").style.display = "none";
|
||||||
|
document.querySelector("#pause-btn").style.display = "initial";
|
||||||
}
|
}
|
||||||
|
|
||||||
function pauseTrack() {
|
function pauseTrack() {
|
||||||
player.pause();
|
player.pause();
|
||||||
navigator.mediaSession.playbackState = "paused";
|
navigator.mediaSession.playbackState = "paused";
|
||||||
|
|
||||||
|
document.querySelector("#play-btn").style.display = "initial";
|
||||||
|
document.querySelector("#pause-btn").style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
function stopTrack() {
|
function stopTrack() {
|
||||||
player.pause();
|
player.pause();
|
||||||
player.load();
|
player.load();
|
||||||
navigator.mediaSession.playbackState = "none";
|
navigator.mediaSession.playbackState = "none";
|
||||||
|
|
||||||
|
document.querySelector("#play-btn").style.display = "initial";
|
||||||
|
document.querySelector("#pause-btn").style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
function setMediaSession(track) {
|
function setMediaSession(track) {
|
||||||
|
|
|
||||||
25
static/volume-max.svg
Normal file
25
static/volume-max.svg
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="800px" height="800px" viewBox="0 0 500.071 500.071"
|
||||||
|
xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M248.759,122.434c-3.753-2.522-8.52-2.999-12.69-1.291L97.601,177.807H13.557C6.07,177.807,0,183.878,0,191.364v117.332
|
||||||
|
c0,7.485,6.07,13.56,13.557,13.56H97.6l138.468,56.669c1.648,0.675,3.396,1.007,5.13,1.007c2.654,0,5.289-0.775,7.56-2.298
|
||||||
|
c3.746-2.522,5.997-6.737,5.997-11.26V133.688C254.756,129.173,252.505,124.95,248.759,122.434z M27.115,204.921h59.596v90.218
|
||||||
|
H27.115V204.921z M227.642,346.178l-113.817-46.574v-99.136l113.817-46.583V346.178z"/>
|
||||||
|
<path d="M327.532,144.061c-5.29-5.295-13.882-5.295-19.171,0c-5.296,5.289-5.296,13.875,0,19.17
|
||||||
|
c47.866,47.86,47.866,125.741,0,173.605c-5.296,5.289-5.296,13.875,0,19.17c2.646,2.648,6.116,3.974,9.585,3.974
|
||||||
|
s6.943-1.324,9.586-3.974C385.97,297.569,385.97,202.492,327.532,144.061z"/>
|
||||||
|
<path d="M375.286,96.321c-5.29-5.296-13.883-5.296-19.171,0c-5.296,5.289-5.296,13.875,0,19.17
|
||||||
|
c74.186,74.186,74.186,194.899,0,269.086c-5.296,5.297-5.296,13.883,0,19.17c2.646,2.648,6.116,3.973,9.585,3.973
|
||||||
|
s6.944-1.323,9.586-3.973C460.042,318.991,460.042,181.078,375.286,96.321z"/>
|
||||||
|
<path d="M418.491,53.108c-5.295-5.295-13.881-5.295-19.17,0c-5.295,5.289-5.295,13.875,0,19.17
|
||||||
|
c47.482,47.476,73.636,110.607,73.636,177.756c0,67.149-26.153,130.274-73.636,177.756c-5.295,5.295-5.295,13.881,0,19.17
|
||||||
|
c2.646,2.648,6.116,3.974,9.586,3.974c3.468,0,6.943-1.324,9.584-3.974c52.604-52.6,81.58-122.534,81.58-196.926
|
||||||
|
C500.071,175.643,471.097,105.707,418.491,53.108z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
19
static/volume-off.svg
Normal file
19
static/volume-off.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="800px" height="800px" viewBox="0 0 456.041 456.041"
|
||||||
|
xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M267.564,90.774c-4.037-2.713-9.164-3.226-13.648-1.389l-148.935,60.948H14.583C6.53,150.333,0,156.862,0,164.916v126.208
|
||||||
|
c0,8.053,6.529,14.582,14.583,14.582h90.397l148.936,60.95c1.775,0.728,3.65,1.086,5.52,1.086c2.852,0,5.689-0.836,8.129-2.475
|
||||||
|
c4.033-2.708,6.455-7.247,6.455-12.107V102.882C274.02,98.021,271.598,93.482,267.564,90.774z M29.165,179.498h64.102v97.043
|
||||||
|
H29.165V179.498z M244.855,331.438l-122.423-50.102v-106.63l122.423-50.102V331.438z"/>
|
||||||
|
<path d="M406.416,228.018l45.352-45.348c5.695-5.693,5.695-14.924,0-20.62c-5.689-5.696-14.924-5.696-20.621,0l-45.354,45.348
|
||||||
|
l-45.35-45.348c-5.697-5.696-14.932-5.696-20.621,0c-5.695,5.692-5.695,14.927,0,20.62l45.35,45.348l-45.355,45.349
|
||||||
|
c-5.695,5.692-5.695,14.924,0,20.618c2.846,2.85,6.58,4.271,10.311,4.271s7.463-1.423,10.311-4.271l45.355-45.352l45.354,45.354
|
||||||
|
c2.85,2.849,6.58,4.272,10.312,4.272c3.73,0,7.465-1.425,10.311-4.272c5.695-5.691,5.695-14.928,0-20.618L406.416,228.018z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -39,8 +39,19 @@
|
||||||
<h4><span id="now_playing_artist"></span> - <span id="now_playing_album"></span></h4>
|
<h4><span id="now_playing_artist"></span> - <span id="now_playing_album"></span></h4>
|
||||||
<h3 id="now_playing_title"></h3>
|
<h3 id="now_playing_title"></h3>
|
||||||
<audio id="player" controls></audio>
|
<audio id="player" controls></audio>
|
||||||
<button id="play-btn" onclick="playTrack()">Play</button>
|
<button id="prev-track-btn" class="btn" onclick="prevTrack()">
|
||||||
<button id="pause-btn" onclick="pauseTrack()">Pause</button>
|
<img id="prev" src="./static/prev.svg"></img>
|
||||||
|
</button>
|
||||||
|
<button id="play-btn" class="btn" onclick="playTrack()">
|
||||||
|
<img id="prev" src="./static/play.svg"></img>
|
||||||
|
</button>
|
||||||
|
<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
|
||||||
|
<img id="prev" src="./static/pause.svg"></img>
|
||||||
|
</button>
|
||||||
|
<button id="next-track-btn" class="btn" onclick="nextTrack()">
|
||||||
|
<img id="prev" src="./static/prev.svg"></img>
|
||||||
|
</button>
|
||||||
|
<input type="range" id="seek-slider" max="100" value="0">
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -69,5 +80,4 @@
|
||||||
</label>
|
</label>
|
||||||
</template>
|
</template>
|
||||||
</body>
|
</body>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user