mt-music-player
Version:
A simply web music player app.
294 lines (268 loc) • 13.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#202b27">
<title>MT Music Player</title>
<link rel="icon" type="image/png" href="icons/icon-square@48.png">
<link rel="icon" sizes="any" type="image/svg+xml" href="icons/icon.svg">
<link rel="modulepreload" href="index.js">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
html {
font-size: 62.5%;
}
body {
display: flex;
flex-direction: column;
overflow: hidden;
font-size: 1.6rem;
font-family: system-ui, sans-serif;
font-weight: normal;
cursor: default;
-webkit-user-select: none;
user-select: none;
}
[hidden] {
display: none;
}
</style>
<script>
window.onerror = function (msg) {
window.onload = function () {
var splashImg = document.querySelector('app-splash img');
if (splashImg) {
splashImg.insertAdjacentHTML(
'afterend',
'<p>Loading error! Try using a different browser</p>' +
'<p style="font-size: smaller; opacity: .5">Message: ' +
msg +
'</p>'
);
splashImg.parentElement.removeChild(splashImg);
}
}
}
</script>
<script type="module" src="index.js"></script>
<link rel="manifest" href="manifest.json">
</head>
<body>
<app-theme></app-theme>
<app-router></app-router>
<app-player></app-player>
<app-menu hidden></app-menu>
<app-modal hidden></app-modal>
<app-toast></app-toast>
<app-confirm hidden></app-confirm>
<app-upload></app-upload>
<app-splash>
<style>
app-splash {
z-index: 11;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: white;
}
app-splash img {
width: 16rem;
height: 16rem;
max-width: 100%;
max-height: 100%;
}
</style>
<img src="icons/icon.svg" alt="MT Music Player">
</app-splash>
<noscript>
<style>
app-splash {
display: none;
}
dialog {
margin-top: 5em;
max-width: 80%;
}
</style>
<dialog open>
<p>⚠️ Need to open JavaScript to function properly</p>
</dialog>
</noscript>
<!-- https://material.io/tools/icons/?icon=arrow_back&style=baseline -->
<template id="icon-expand-less">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
<path d="M0 0h24v24H0z" fill="none" /></svg>
</template>
<template id="icon-expand-more">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
<path d="M0 0h24v24H0z" fill="none" /></svg>
</template>
<template id="icon-arrow-back">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></svg>
</template>
<!-- https://material.io/tools/icons/?icon=more_vert&style=baseline -->
<template id="icon-more-horiz"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg></template>
<template id="icon-more-vert"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg></template>
<!-- https://material.io/tools/icons/?icon=volume_down&style=baseline -->
<template id="icon-volume-down"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3z" />
<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<template id="icon-volume-up"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3z" />
<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z" />
<path d="M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<template id="icon-volume-mute"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<template id="icon-volume-off"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<!-- https://material.io/tools/icons/?icon=shuffle&style=baseline -->
<template id="icon-shuffle"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z" /></svg></template>
<template id="icon-skip-next"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<template id="icon-skip-previous"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<!-- https://material.io/tools/icons/?icon=album&style=baseline -->
<template id="icon-album"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z" /></svg></template>
<!-- https://material.io/tools/icons/?icon=equalizer&style=baseline -->
<template id="icon-playing"><svg width="24" height="24" viewBox="0 0 24 24">
<style>
path:nth-of-type(n+1) {
animation: 0.3s ease-in infinite alternate both running beat;
transform-origin: bottom;
transform-box: fill-box;
}
path:nth-of-type(2) {
animation-delay: 0.1s;
}
path:nth-of-type(3) {
animation-delay: 0.2s;
}
path:nth-of-type(4) {
animation-delay: 0.3s;
}
@keyframes beat {
from {
transform: scaleY(.5);
}
to {
transform: scaleX(1);
}
}
</style>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M4 20h4v-8H4v8z" />
<path d="M10 20h4V4h-4v16z" />
<path d="M16 9v11h4V9h-4z" />
</svg></template>
</template>
<!-- https://material.io/tools/icons/?icon=warning&style=baseline -->
<template id="icon-warning">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /></svg>
</template>
<!-- https://material.io/tools/icons/?icon=pause&style=baseline -->
<template id="icon-pause"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<template id="icon-pause-circle-outline"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-4h2V8h-2v8z" /></svg></template>
<template id="icon-play-arrow"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<template id="icon-play-circle-outline"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" /></svg></template>
<template id="icon-playlist-add"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z" /></svg></template>
<template id="icon-playlist-play"><svg width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M4 10h12v2H4zm0-4h12v2H4zm0 8h8v2H4zm10 0v6l5-3z" /></svg></template>
<template id="icon-queue-music"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z" /></svg></template>
<template id="icon-repeat"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" /></svg></template>
<template id="icon-repeat-one"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z" /></svg></template>
<!-- https://material.io/tools/icons/?icon=music_note&style=baseline -->
<template id="icon-music-note"><svg width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" /></svg></template>
<!-- https://material.io/tools/icons/?icon=star&style=baseline -->
<template id="icon-star-border"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<template id="icon-star"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<!-- https://material.io/tools/icons/?icon=search&style=baseline -->
<template id="icon-search"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<!-- https://material.io/tools/icons/?icon=add_circle_outline&style=baseline -->
<template id="icon-add"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<template id="icon-clear"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<template id="icon-add-circle-outline"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" /></svg></template>
<template id="icon-edit"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
<!-- https://material.io/tools/icons/?icon=drag_handle&style=baseline -->
<template id="icon-drag-handle"><svg width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M0 0h24v24H0V0z" />
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible" />
</clipPath>
<path clip-path="url(#b)" d="M20 9H4v2h16V9zM4 15h16v-2H4v2z" />
</svg></template>
<!-- https://material.io/tools/icons/?icon=person&style=baseline -->
<template id="icon-person"><svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
<path d="M0 0h24v24H0z" fill="none" /></svg></template>
</body>
</html>