-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
18 lines (18 loc) · 8.9 KB
/
index.html
File metadata and controls
18 lines (18 loc) · 8.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Render App</title>
<link href="./assets/css/style.css" />
<script type="module" src="/main.js"></script>
</head>
<body>
<div id="root"><div id="main"><div class="top-bar wrapper"><div class="logo wrapper"><h1 class="title-lg">LovePlay</h1></div><div class="top-bar-actions"><button class="btn-icon" onclick="$trigger((event) => { event && event.preventDefault(); const [playlist, overlay] = $select('#playlist, .overlay'); if (playlist.classList.contains('active')) { playlist.classList.remove('active'); overlay.classList.remove('active'); } else { playlist.classList.add('active'); overlay.classList.add('active'); } })"><span class="material-symbols-rounded">filter_list</span></button></div></div><article><div class="playlist" id="playlist"><div class="music-list" id="music-list"><div onclick="$trigger(() => { const errorMsg = $select('#selection-error'); if (selectedSongs.length === 0) { errorMsg.classList.add('show'); return; } else { errorMsg.classList.remove('show'); } let depth = 0; while (selectedSongs.length > depth) { const selectedSong = selectedSongs[depth]; if (!selectedSong.isChecked) { continue; } const link = document.createElement('a'); link.href = selectedSong.musicPath; link.download = `${selectedSong.musicPath}`; document.body.appendChild(link); link.click(); document.body.removeChild(link); depth++; } })" ><span class="material-symbols-rounded active">download</span> all </div><span id="selection-error">No song selected</span><div id="1"><input type="checkbox" name="select-song" id="check-1" class="selected-songs" ><button class="music-item " id='playing-1' onclick="$trigger((index) => { $state().selected = true; $utils().getSong(index); }, null, 0)"><img src="/assets/images/calm-down.png" width="800" height="800" alt="Calm Down Album Poster" class="img-cover"><div class="item-icon"><span class="material-symbols-rounded">equalizer</span></div><div class="song-details"><span id="title">Calm Down</span><span id="date">Rema ft Gomez (2023)</span></div></button></div><div id="2"><input type="checkbox" name="select-song" id="check-2" class="selected-songs" ><button class="music-item " id='playing-2' onclick="$trigger((index) => { $state().selected = true; $utils().getSong(index); }, null, 1)"><img src="/assets/images/lonely-at-the-top.jpg" width="800" height="800" alt="Lonely at the top Album Poster" class="img-cover"><div class="item-icon"><span class="material-symbols-rounded">equalizer</span></div><div class="song-details"><span id="title">Lonely at the top </span><span id="date">Asake (2023)</span></div></button></div><div id="3"><input type="checkbox" name="select-song" id="check-3" class="selected-songs" ><button class="music-item " id='playing-3' onclick="$trigger((index) => { $state().selected = true; $utils().getSong(index); }, null, 2)"><img src="./assets/images/unavailable.jpg" width="800" height="800" alt="Unavailable Album Poster" class="img-cover"><div class="item-icon"><span class="material-symbols-rounded">equalizer</span></div><div class="song-details"><span id="title">Unavailable</span><span id="date">Davido ft Musa (2023)</span></div></button></div></div></div><div class="player" id="player"><div class="container" id="playing-song"><audio src="/assets/music/local-music-2.mp3" id="audio-1" data-id="1" onEnded="$utils().autopilotMode(this, '_9s35Ufa7M67wghwT_{"id":1,"posterUrl":"/assets/images/calm-down.png","title":"Calm Down","album":"Audio","year":2023,"artist":"Rema ft Gomez","musicPath":"/assets/music/local-music-2.mp3"}_9s35Ufa7M67wghwT_')" onloadeddata="const showLoadedData = () => { if(document.readyState === 'complete'){ } else { document.addEventListener('DOMContentLoaded', () => { $trigger($utils().updateDuration, '#audio-1,#seek-1, #seek-right-1, #duration') }) } }; showLoadedData()"></audio><figure class="music-banner"><img src="/assets/images/calm-down.png" width="800" height="800" alt="Wotakoi: Love is Hard for an Otaku Album Poster" class="img-cover" /></figure><div class="music-content"><h2 class="headline-sm"> Calm Down </h2><p class="label-lg label-wrapper wrapper"><span>Audio</span><span>2023</span></p><p class="label-md artist">Rema ft Gomez</p><div class="seek-control"><div class="progress-indicator" id="progress-indicator"><div class="range-wrapper"><input type="range" class="duel-range right-range" min="0" max="60" value="60" step="1" id="seek-right-1" onchange="$trigger((elements) => { const [duration, seekRangeRight, fillRight] = elements; const rangeValue = (seekRangeRight.value / seekRangeRight.max) * 100; $state().range.end = Number(seekRangeRight.value); $state().range.elements = elements; duration.textContent = $utils().getTimecode($state().range.end); const rangeRightValue = 100 - rangeValue; fillRight.style.width = `${rangeRightValue}%`; }, '#duration, #seek-right-1, #fill-right')" /><input type="range" step="1" max="60" value="0" class="range" id="seek-1" onchange="$trigger((elements) => { const [audio, runningTime, seekRange, rangFill] = elements; audio.currentTime = seekRange.value; runningTime.textContent = $utils().getTimecode(seekRange.value); const rangeValue = (seekRange.value / seekRange.max) * 100; rangFill.style.width = `${rangeValue}%`; }, '#audio-1,#running-time, #seek-1, #range-fill')" /><div class="range-fill" id="range-fill"></div><div class="fill-right" id="fill-right"></div></div><div class="duration-label wrapper"><span class="label-md" id="running-time">0:00</span><span class="label-md" id="duration">3:00</span></div></div><div class="volume" id="volume"><button class="btn-icon volume-btn"><span class="material-symbols-rounded" id="volume-icon">volume_up</span></button><div class="range-wrapper"><input type="range" step="0.05" max="1" value="1" class="range" id="volume-1" onchange="$trigger(function (elements) { const [audio, volume, volumeIcon] = elements; audio.volume = volume.value; $state().volume = volume.value; if (audio.volume <= 0.1) { volumeIcon.textContent = 'volume_mute'; } else if (audio.volume <= 0.5) { volumeIcon.textContent = 'volume_down'; } else { volumeIcon.textContent = 'volume_up'; } }, '#audio-1, #volume-1, #volume-icon')" /><div class="range-fill"></div></div></div></div><div class="player-control wrapper"><div id="repeat"><button class="btn-icon toggle"><span class="material-symbols-rounded " onclick="$render(Repeat, true)" > repeat </span></button></div><button class="btn-icon"><span class="material-symbols-rounded" onclick="$utils().getSong(-1)" >skip_previous</span></button><div id="play"><button class="btn-icon play "><span class="material-symbols-rounded default-icon" onclick="$render(Play,'_9s35Ufa7M67wghwT_{"song":{"id":1,"posterUrl":"/assets/images/calm-down.png","title":"Calm Down","album":"Audio","year":2023,"artist":"Rema ft Gomez","musicPath":"/assets/music/local-music-2.mp3"},"trigger":true,"playing":true}_9s35Ufa7M67wghwT_')"> play_arrow </span></button></div><div id="next"><button class="btn-icon"><span class="material-symbols-rounded" onclick="$utils().getSong(1)" >skip_next</span></button></div><div id="shuffle"><button class="btn-icon toggle"><span class="material-symbols-rounded " onclick="$render(Shuffle, true)" >shuffle</span></button></div></div></div></div></div><div class="overlay" onclick="$trigger((event) => { event && event.preventDefault(); const [playlist, overlay] = $select('#playlist, .overlay'); if (playlist.classList.contains('active')) { playlist.classList.remove('active'); overlay.classList.remove('active'); } else { playlist.classList.add('active'); overlay.classList.add('active'); } })"><span class="close">x</span></div></article></div></div>
<!--Material Icon Font-->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,-25"
/>
</body>
</html>