Remove build
This commit is contained in:
parent
17f155cadc
commit
61d11fc9fa
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
build/
|
||||||
@ -1,403 +0,0 @@
|
|||||||
:root {
|
|
||||||
/* --iiv: #000;
|
|
||||||
--iv: #444;
|
|
||||||
--v: #0bb;
|
|
||||||
--iv: #aaa;
|
|
||||||
--iiv: #fff;
|
|
||||||
--a: #f33; */
|
|
||||||
|
|
||||||
--iiv: #ddd;
|
|
||||||
--iv: #aaa;
|
|
||||||
--v: #375;
|
|
||||||
--vi: #555;
|
|
||||||
--vii: #222;
|
|
||||||
--a: #f40;
|
|
||||||
|
|
||||||
--chevron-right: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v2h2V5H8zm4 4V7h-2v2h2zm2 2V9h-2v2h2zm0 2h2v-2h-2v2zm-2 2v-2h2v2h-2zm0 0h-2v2h2v-2zm-4 4v-2h2v2H8z' fill='currentColor'/%3E%3C/svg%3E")
|
|
||||||
}
|
|
||||||
|
|
||||||
body:not(.player) .player { display: none; }
|
|
||||||
body:not(.browser) .browser { display: none; }
|
|
||||||
body:not(.queue) .queue { display: none; }
|
|
||||||
body:not(.playing) .playing { display: none; }
|
|
||||||
body:not(.paused) .paused { display: none; }
|
|
||||||
|
|
||||||
button, a {
|
|
||||||
all: unset;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
button:hover, a:hover, .focus {
|
|
||||||
color: var(--a)
|
|
||||||
}
|
|
||||||
button:active, a:active {
|
|
||||||
color: var(--v)
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background: var(--iiv);
|
|
||||||
color: var(--vii);
|
|
||||||
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
height: 100vh;
|
|
||||||
max-height: 100vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
section > header {
|
|
||||||
height: 30px;
|
|
||||||
padding: 0 5px 3px 5px;
|
|
||||||
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
section > header h4 {
|
|
||||||
display: block;
|
|
||||||
/* color: var(--v); */
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
/* section > header {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 26px;
|
|
||||||
background: linear-gradient(180deg, var(--iiv), 80% transparent);
|
|
||||||
} */
|
|
||||||
|
|
||||||
menu li:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 5px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu li {
|
|
||||||
list-style-type: none;
|
|
||||||
height: 28px;
|
|
||||||
margin: 8px 0;
|
|
||||||
text-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu a::after {
|
|
||||||
content: " ";
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
background: currentColor;
|
|
||||||
mask: var(--chevron-right);
|
|
||||||
mask-mode: alpha;
|
|
||||||
margin-left: auto;
|
|
||||||
position: sticky;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu header {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu a, menu li {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu code {
|
|
||||||
width: 16px;
|
|
||||||
margin-right: 5px;
|
|
||||||
color: var(--v)
|
|
||||||
}
|
|
||||||
|
|
||||||
menu section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu b, menu code {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu b {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu cite {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu section, menu b, menu cite {
|
|
||||||
min-width: 0;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu code {
|
|
||||||
margin-right: 5px;
|
|
||||||
color: var(--v)
|
|
||||||
}
|
|
||||||
|
|
||||||
menu:empty::after {
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
content: "\2014 Empty \2014";
|
|
||||||
}
|
|
||||||
|
|
||||||
menu:empty::after, #loading {
|
|
||||||
color: var(--vi);
|
|
||||||
font-style: italic;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
height: 30px;
|
|
||||||
width: 100%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
background: var(--iiv);
|
|
||||||
color: var(--vii);
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
padding: 0 5px;
|
|
||||||
|
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: 700;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 26px;
|
|
||||||
margin-top: auto;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.left,
|
|
||||||
.right {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14px;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
text-align: left;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 120px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
text-align: right;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* nav button {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
nav, nav button {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
nav svg {
|
|
||||||
stroke-width: 0;
|
|
||||||
stroke-linecap: square;
|
|
||||||
stroke-linejoin: square;
|
|
||||||
stroke: currentcolor;
|
|
||||||
fill: currentcolor;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
section {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.player {
|
|
||||||
padding: 0 5px;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.player img {
|
|
||||||
width: 230px;
|
|
||||||
height: 230px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#track-title {
|
|
||||||
font-size: 20px;
|
|
||||||
margin-top: 2px;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
#track-artist {
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0 50px 5px 50px;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#track-title, #track-artist {
|
|
||||||
text-wrap: nowrap;
|
|
||||||
text-overflow: clip;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marquee {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: clip;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marquee span {
|
|
||||||
display: inline-block;
|
|
||||||
animation: marquee 60s linear infinite;
|
|
||||||
padding-right: 4ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes marquee {
|
|
||||||
0% { transform: translate(0, 0) }
|
|
||||||
25% { transform: translate(-100%, 0) }
|
|
||||||
100% { transform: translate(-100%, 0) }
|
|
||||||
}
|
|
||||||
|
|
||||||
#playpause {
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid currentcolor;
|
|
||||||
}
|
|
||||||
#timestamp, #track-length {
|
|
||||||
position: absolute;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 13px;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
#timestamp {
|
|
||||||
color: var(--a);
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
#track-length {
|
|
||||||
color: var(--vi);
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
color: var(--vii)
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress path {
|
|
||||||
stroke-width: 2px;
|
|
||||||
stroke-dasharray: 100;
|
|
||||||
stroke-dashoffset: 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
progress {
|
|
||||||
width: 100%;
|
|
||||||
block-size: 3px;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
progress::-webkit-progress-bar {
|
|
||||||
background-color: var(--iv);
|
|
||||||
}
|
|
||||||
progress::-webkit-progress-value {
|
|
||||||
background-color: var(--vii);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
background: none;
|
|
||||||
width: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: var(--vi);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > svg {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tab-indicator {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 5px 3px 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tab-indicator line {
|
|
||||||
stroke: var(--v);
|
|
||||||
transition: stroke-dasharray 0.1s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* body > header {
|
|
||||||
height: 24px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs {
|
|
||||||
margin: 0 5px;
|
|
||||||
scrollbar-width: none;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
gap: 25px;
|
|
||||||
overflow-x: scroll;
|
|
||||||
|
|
||||||
color: var(--vi);
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs .selected {
|
|
||||||
color: var(--vii);
|
|
||||||
min-width: 60%;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
background: var(--iv);
|
|
||||||
}
|
|
||||||
|
|
||||||
#playback-progress {
|
|
||||||
transition: stroke-dasharray 0.1s;
|
|
||||||
}
|
|
||||||
125
build/index.html
125
build/index.html
@ -1,125 +0,0 @@
|
|||||||
<head>
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<!-- start injection -->
|
|
||||||
<script type="importmap">
|
|
||||||
{
|
|
||||||
"imports": {
|
|
||||||
"device": "./device/browser.js",
|
|
||||||
"store": "./lib/store.js"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script src="./node_modules/jsmediatags/dist/jsmediatags.min.js"></script>
|
|
||||||
<script type="module" src="src/index.js"></script>
|
|
||||||
<!-- end injection -->
|
|
||||||
<script type="module" src="src/index.js"></script>
|
|
||||||
<link rel="stylesheet" href="assets/main.css"></link>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- <section class="controls">
|
|
||||||
|
|
||||||
<header>
|
|
||||||
|
|
||||||
<h3 id="track-title">Bocce</h3>
|
|
||||||
<p id="track-artist">Patricia Taxxon</p>
|
|
||||||
|
|
||||||
</header>
|
|
||||||
<nav>
|
|
||||||
|
|
||||||
<button id="prev">
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" viewbox="0 0 120 120" preserveAspectRatio="xMidYMid meet">
|
|
||||||
<path d="M15,60 L15,60 L60,105 L60,15 L15,60 M60,60 L60,60 L105,15 L105,105 L60,60 "/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</button>
|
|
||||||
<button id="playpause">
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" viewbox="0 0 105 120" preserveAspectRatio="xMidYMid meet">
|
|
||||||
<path id="pause-icon" d="M15,15 L15,15 L15,105 L45,105 L45,15 L15,15 M60,15 L60,15 L60,105 L90,105 L90,15 L60,15 "/>
|
|
||||||
<path id="play-icon" d="M30,15 L30,15 L30,105 L90,60 L30,15 "/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</button>
|
|
||||||
<button id="next">
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" viewbox="0 0 120 120" preserveAspectRatio="xMidYMid meet">
|
|
||||||
<path d="M60,60 L60,60 L15,105 L15,15 L60,60 M105,60 L105,60 L60,15 L60,105 L105,60 " />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
</section> -->
|
|
||||||
|
|
||||||
<svg viewBox="0 0 100 2" xmlns="http://www.w3.org/2000/svg" id="tab-indicator">
|
|
||||||
<!-- No dashes nor gaps -->
|
|
||||||
<line x1="0" y1="0" x2="100" y2="0" stroke-width="3" id="tab-indicator-line" />
|
|
||||||
</svg>
|
|
||||||
<!-- <header id="tabs"></header> -->
|
|
||||||
<!-- <header>
|
|
||||||
<b>Browser</b>
|
|
||||||
</header> -->
|
|
||||||
<main id="main">
|
|
||||||
<section class="player">
|
|
||||||
|
|
||||||
<img id="track-cover">
|
|
||||||
<cite id="track-title">No Track Selected</cite>
|
|
||||||
<cite id="track-artist">Unknown Artist</cite>
|
|
||||||
|
|
||||||
<code id="timestamp">--:--</code>
|
|
||||||
<code id="track-length">--:--</code>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<section class="browser">
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<h4>Browser</h4>
|
|
||||||
</header>
|
|
||||||
<menu id="browser"></menu>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<section class="queue">
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<h4>Queue</h4>
|
|
||||||
|
|
||||||
</header>
|
|
||||||
<menu id="queue"></menu>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<section id="loading">
|
|
||||||
|
|
||||||
<header>— Loading —</header>
|
|
||||||
<small id="loading-status"></small>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
<svg viewBox="0 0 100 1" xmlns="http://www.w3.org/2000/svg" class="progress">
|
|
||||||
<!-- No dashes nor gaps -->
|
|
||||||
<line x1="0" y1="0" x2="100" y2="0" stroke="currentColor" stroke-width="3" id="playback-progress" />
|
|
||||||
</svg>
|
|
||||||
<nav>
|
|
||||||
|
|
||||||
<button class="left player">Previous</button>
|
|
||||||
<button class="center player playing">Paused</button>
|
|
||||||
<button class="center player paused">Play</button>
|
|
||||||
<button class="right player">Next</button>
|
|
||||||
|
|
||||||
<button class="left queue">Up</button>
|
|
||||||
<button class="center queue">Jump</button>
|
|
||||||
<button class="right queue">Down</button>
|
|
||||||
|
|
||||||
<button class="left browser">Queue All</button>
|
|
||||||
<button class="center browser">Queue</button>
|
|
||||||
<button class="right browser">Play Track</button>
|
|
||||||
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user