This commit is contained in:
Ondrej Zara 2019-03-30 22:05:33 +01:00
parent 181c988649
commit 4995018b40
8 changed files with 141 additions and 7 deletions

View file

@ -40,6 +40,9 @@ button {
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
} }
.art img {
vertical-align: top;
}
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
src: url('font/LatoLatin-Regular.woff2') format('woff2'); src: url('font/LatoLatin-Regular.woff2') format('woff2');
@ -101,9 +104,6 @@ nav ul li.active {
#player:not([data-flags~=repeat]) .repeat { #player:not([data-flags~=repeat]) .repeat {
opacity: 0.5; opacity: 0.5;
} }
#player .art img {
vertical-align: top;
}
#player .info { #player .info {
flex-grow: 1; flex-grow: 1;
white-space: nowrap; white-space: nowrap;
@ -245,6 +245,9 @@ nav ul li.active {
width: 32px; width: 32px;
} }
} }
#library li {
padding: 0;
}
#library .tiles { #library .tiles {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@ -341,6 +344,78 @@ nav ul li.active {
width: 32px; width: 32px;
} }
} }
#yt {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#yt ul {
flex-grow: 1;
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
}
#yt li {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 4px;
white-space: nowrap;
}
#yt h2 {
flex-grow: 1;
font-size: 100%;
font-weight: normal;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
#yt h2 .icon {
margin-right: 4px;
color: var(--primary);
}
#yt li:nth-child(odd) {
background-color: #555;
}
@media (pointer: coarse) {
#yt .icon {
width: 32px;
}
}
#yt .go {
width: 96px;
height: 96px;
}
#yt .go:disabled {
position: relative;
}
#yt .go:disabled::before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-top: 3px solid var(--primary);
border-radius: 50%;
animation: rotate linear 3s infinite;
}
#yt p {
margin: 16px 8px;
white-space: pre-wrap;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
:root { :root {
--primary: dodgerblue; --primary: dodgerblue;
--fg: #fff; --fg: #fff;

View file

@ -40,6 +40,10 @@ button {
flex-shrink: 0; flex-shrink: 0;
} }
.art img {
vertical-align: top;
}
@import "font.less"; @import "font.less";
@import "icons.less"; @import "icons.less";
@import "main.less"; @import "main.less";
@ -50,4 +54,5 @@ button {
@import "library.less"; @import "library.less";
@import "fs.less"; @import "fs.less";
@import "playlists.less"; @import "playlists.less";
@import "yt.less";
@import "variables.less"; @import "variables.less";

View file

@ -1,6 +1,10 @@
#library { #library {
.component; .component;
li {
padding: 0;
}
.tiles { .tiles {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

View file

@ -7,8 +7,6 @@
&[data-state=play] .play { display: none; } &[data-state=play] .play { display: none; }
&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
.art img { vertical-align: top; }
.info { .info {
flex-grow: 1; flex-grow: 1;
white-space: nowrap; white-space: nowrap;

38
app/css/yt.less Normal file
View file

@ -0,0 +1,38 @@
#yt {
.component;
align-items: center;
justify-content: center;
.go {
width: 96px;
height: 96px;
&:disabled {
position: relative;
&::before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-top: 3px solid var(--primary);
border-radius: 50%;
animation: rotate linear 3s infinite;
}
}
}
p {
margin: 16px 8px;
white-space: pre-wrap;
}
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

View file

@ -50,6 +50,7 @@
</section> </section>
<section id="yt"> <section id="yt">
<button class="go" data-icon="download">Go!</button> <button class="go" data-icon="download">Go!</button>
<p></p>
</section> </section>
</main> </main>
<footer> <footer>

View file

@ -1 +1,2 @@
export const artSize = 96; export const artSize = 96;
export const ytPath = "_youtube";

View file

@ -2,6 +2,7 @@ import * as mpd from "./lib/mpd.js";
import * as html from "./lib/html.js"; import * as html from "./lib/html.js";
import * as pubsub from "./lib/pubsub.js"; import * as pubsub from "./lib/pubsub.js";
import * as ui from "./lib/ui.js"; import * as ui from "./lib/ui.js";
import * as conf from "./conf.js";
let node; let node;
@ -9,12 +10,23 @@ async function onClick(e) {
let url = prompt("Please enter a YouTube URL:"); let url = prompt("Please enter a YouTube URL:");
if (!url) { return; } if (!url) { return; }
let button = e.target;
button.disabled = true;
let p = node.querySelector("p");
p.textContent = "";
let body = new URLSearchParams(); let body = new URLSearchParams();
body.set("url", url); body.set("url", url);
let response = await fetch("/youtube", {method:"POST", body}); let response = await fetch("/youtube", {method:"POST", body});
console.log(response);
let text = await response.text(); let text = await response.text();
console.log(text, text.length);
button.disabled = false;
p.textContent = text;
if (response.status == 200) {
mpd.command(`update ${mpd.escape(conf.ytPath)}`);
}
} }
export async function activate() {} export async function activate() {}