Redesign Lyrics Studio timing editor
This commit is contained in:
Jonathan Sykes
@@ -7,6 +7,12 @@
|
||||
<meta name="theme-color" content="#0a0c12" />
|
||||
<title>Lyrics Studio</title>
|
||||
<link rel="stylesheet" href="download-actions.css" />
|
||||
<script>
|
||||
try {
|
||||
const savedTheme = JSON.parse(localStorage.getItem('_ytpdata') || '{}').settings?.theme;
|
||||
document.documentElement.dataset.editorTheme = ['light', 'contrast'].includes(savedTheme) ? savedTheme : 'dark';
|
||||
} catch { document.documentElement.dataset.editorTheme = 'dark'; }
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
@@ -154,6 +160,48 @@
|
||||
.gate .brand { justify-content: center; margin-bottom: 18px; font-size: 22px; }
|
||||
|
||||
/* ---------- editor: picker + empty state ---------- */
|
||||
/* The editor follows the user's app appearance while the surrounding admin tools stay untouched. */
|
||||
#p-editor {
|
||||
--ed-bg: #121315; --ed-surface: #18191c; --ed-raised: #202226; --ed-selected: #2b2e33;
|
||||
--ed-line: #42464d; --ed-text: #f3f1ed; --ed-muted: #c3c4c7; --ed-dim: #a1a5ac;
|
||||
--ed-accent: #f06b53; --ed-action: #c6442f; --ed-on-action: #fff;
|
||||
--ed-wave-played: #f06b53; --ed-wave-unplayed: #8f9399; --ed-wave-mark: #c3c4c7; --ed-wave-cursor: #fff;
|
||||
--ok: #4ade80; --warn: #ffcf70; --bad: #ff8585;
|
||||
--bg: var(--ed-bg); --bg-1: var(--ed-surface); --bg-2: var(--ed-raised); --bg-3: var(--ed-selected);
|
||||
--line: var(--ed-line); --line-2: var(--ed-line); --text: var(--ed-text); --text-2: var(--ed-muted); --text-dim: var(--ed-dim);
|
||||
--a1: var(--ed-accent); --a2: var(--ed-accent); --grad: var(--ed-action);
|
||||
color: var(--ed-text); color-scheme: dark; background: var(--ed-bg); border: 1px solid var(--ed-line); border-radius: 14px; padding: 16px;
|
||||
}
|
||||
html[data-editor-theme="light"] #p-editor {
|
||||
--ed-bg: #f4f2ee; --ed-surface: #fff; --ed-raised: #efece6; --ed-selected: #e5e0d8;
|
||||
--ed-line: #d8d2c8; --ed-text: #1b1a18; --ed-muted: #4a4843; --ed-dim: #625e59;
|
||||
--ed-accent: #b43623; --ed-action: #b43623; --ed-on-action: #fff;
|
||||
--ed-wave-played: #b43623; --ed-wave-unplayed: #716c65; --ed-wave-mark: #4a4843; --ed-wave-cursor: #1b1a18;
|
||||
--ok: #166534; --warn: #754500; --bad: #a32121;
|
||||
color-scheme: light;
|
||||
}
|
||||
html[data-editor-theme="contrast"] #p-editor {
|
||||
--ed-bg: #000; --ed-surface: #000; --ed-raised: #0a0a0a; --ed-selected: #161616;
|
||||
--ed-line: #fff; --ed-text: #fff; --ed-muted: #fff; --ed-dim: #d8d8d8;
|
||||
--ed-accent: #ff8a6c; --ed-action: #ff5a3c; --ed-on-action: #000;
|
||||
--ed-wave-played: #ff5a3c; --ed-wave-unplayed: #fff; --ed-wave-mark: #fff; --ed-wave-cursor: #fff;
|
||||
--ok: #00ff70; --warn: #ffff00; --bad: #ff7777;
|
||||
color-scheme: dark;
|
||||
}
|
||||
#p-editor .card { background: var(--ed-surface); border-color: var(--ed-line); }
|
||||
#p-editor .field, #p-editor select.mini, #p-editor .ln-tools input.tin { background: var(--ed-bg); border-color: var(--ed-line); color: var(--ed-text); }
|
||||
#p-editor .deck { background: var(--ed-surface); border-color: var(--ed-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
|
||||
#p-editor #wave { background: var(--ed-bg); }
|
||||
#p-editor #raw { background: var(--ed-surface); border-color: var(--ed-line); color: var(--ed-text); }
|
||||
#p-editor .btn { min-height: 44px; }
|
||||
#p-editor .btn.pri { background: var(--ed-action); color: var(--ed-on-action); }
|
||||
#p-editor .btn.ok { background: var(--ed-action); color: var(--ed-on-action); }
|
||||
#p-editor .btn.dng { color: var(--ed-action); border-color: var(--ed-action); background: transparent; }
|
||||
#p-editor :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ed-accent); outline-offset: 2px; }
|
||||
#p-editor ::selection { background: var(--ed-accent); color: var(--ed-bg); }
|
||||
#p-editor :is(input, textarea) { caret-color: var(--ed-accent); }
|
||||
#p-editor :is(input, textarea)::placeholder { color: var(--ed-dim); opacity: 1; }
|
||||
|
||||
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 4px; }
|
||||
.step { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
|
||||
.step b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 13px; margin-bottom: 8px; }
|
||||
@@ -166,7 +214,7 @@
|
||||
.song-row .st { flex: none; font: 700 11px var(--ui); padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--text-dim); }
|
||||
.song-row .st.has { color: var(--ok); border-color: rgba(74,222,128,.4); }
|
||||
.song-open { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
|
||||
.whisper-request { min-height: 44px; flex: none; }
|
||||
.whisper-request { min-height: 46px; flex: none; }
|
||||
.whisper-draft { margin-block: 14px; }
|
||||
.whisper-draft pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; font: 400 14px/1.55 var(--ui); color: var(--text); }
|
||||
#whisperStatus { color: var(--text-dim); font-size: 14px; margin-block: 10px; }
|
||||
@@ -186,57 +234,60 @@
|
||||
.song small { color: var(--text-dim); }
|
||||
|
||||
.deck {
|
||||
position: sticky; top: 58px; z-index: 30; padding: 12px; margin: 0 -6px 14px; border-radius: 22px;
|
||||
background: #11141e; border: 1px solid var(--line-2);
|
||||
-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 40px -22px #000;
|
||||
position: sticky; top: 58px; z-index: 30; padding: 12px; margin: 0 0 14px; border-radius: 14px;
|
||||
background: var(--ed-surface); border: 1px solid var(--ed-line);
|
||||
}
|
||||
#wave { width: 100%; height: 64px; display: block; border-radius: 12px; background: rgba(0,0,0,.35); cursor: pointer; touch-action: none; }
|
||||
#wave { width: 100%; height: 64px; display: block; border-radius: 8px; background: var(--ed-bg); cursor: pointer; touch-action: none; }
|
||||
.transport { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
||||
.round { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.06); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
|
||||
.round.big { width: 52px; height: 52px; border: 0; background: var(--grad); box-shadow: 0 10px 24px -8px var(--a1); }
|
||||
.round { width: 44px; min-width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--ed-line); background: var(--ed-raised); color: var(--ed-text); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
|
||||
.round.big { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--ed-action); color: var(--ed-on-action); box-shadow: none; }
|
||||
.round svg { width: 20px; height: 20px; }
|
||||
.clock { font: 600 17px var(--mono); letter-spacing: -.02em; min-width: 108px; text-align: center; }
|
||||
.clock b { color: var(--a2); } .clock span { color: var(--text-dim); font-size: 13px; }
|
||||
.seg { display: inline-flex; padding: 3px; border-radius: 13px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
|
||||
.seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font-weight: 700; font-size: 13px; }
|
||||
.seg button[aria-pressed="true"] { background: var(--grad); color: #fff; }
|
||||
select.mini { height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); padding: 0 8px; font-size: 13px; }
|
||||
.iconbtn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); display: grid; place-items: center; }
|
||||
.clock { font: 700 17px var(--mono); letter-spacing: -.02em; min-width: 108px; text-align: center; font-variant-numeric: tabular-nums; }
|
||||
.clock b { color: var(--ed-accent); } .clock span { color: var(--ed-dim); font-size: 13px; }
|
||||
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--ed-bg); border: 1px solid var(--ed-line); }
|
||||
.seg button { min-width: 76px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ed-muted); font-weight: 700; font-size: 13px; }
|
||||
.seg button[aria-pressed="true"] { background: var(--ed-selected); color: var(--ed-text); box-shadow: inset 0 0 0 1px var(--ed-line); }
|
||||
select.mini { min-height: 44px; border-radius: 8px; border: 1px solid var(--ed-line); background: var(--ed-bg); color: var(--ed-text); padding: 0 10px; font-size: 13px; }
|
||||
.iconbtn { width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--ed-line); background: var(--ed-raised); color: var(--ed-text); display: grid; place-items: center; }
|
||||
.iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.iconbtn[disabled] { opacity: .3; pointer-events: none; }
|
||||
.iconbtn[aria-pressed="true"] { background: rgba(124,92,255,.3); border-color: var(--a1); }
|
||||
.iconbtn[disabled] { opacity: .5; cursor: not-allowed; }
|
||||
.iconbtn[aria-pressed="true"] { background: var(--ed-selected); border-color: var(--ed-accent); }
|
||||
#p-editor :is(.btn, .round, .iconbtn, .seg button, .more, .tc):hover:not(:disabled) { border-color: var(--ed-accent); }
|
||||
#p-editor :is(.btn, .round, .iconbtn, .seg button, .more, .tc):active:not(:disabled) { transform: translateY(1px); }
|
||||
|
||||
.drawer { display: grid; gap: 10px; padding: 14px; margin-bottom: 14px; border-radius: 18px; border: 1px dashed var(--line-2); background: rgba(255,255,255,.025); }
|
||||
.drawer .row label { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
/* ---------- editor: lines ---------- */
|
||||
.lines { display: grid; gap: 8px; }
|
||||
.ln { border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: background .2s, border-color .2s, box-shadow .2s; scroll-margin: 200px; }
|
||||
.ln-main { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
|
||||
.ln { position: relative; border-radius: 10px; border: 1px solid var(--ed-line); background: var(--ed-surface); transition: background .16s, border-color .16s, box-shadow .16s; scroll-margin: 200px; }
|
||||
.ln-main { display: grid; grid-template-columns: 88px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 8px; }
|
||||
.tc {
|
||||
flex: none; width: 82px; height: 38px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(0,0,0,.32);
|
||||
font: 700 13px var(--mono); color: var(--text-2);
|
||||
flex: none; width: 88px; min-height: 44px; border-radius: 8px; border: 1px solid var(--ed-line); background: var(--ed-bg);
|
||||
font: 700 13px var(--mono); color: var(--ed-muted); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.tc:hover { border-color: var(--a2); color: var(--text); }
|
||||
.ln.untimed .tc { color: var(--warn); border-style: dashed; border-color: rgba(255,180,84,.55); }
|
||||
.ln-text { flex: 1 1 auto; min-width: 0; min-height: 38px; height: auto; padding: 7px 8px; resize: vertical; overflow: hidden; line-height: 1.3; border: 0; border-radius: 9px; background: transparent; font-size: 16px; }
|
||||
.ln.section .ln-text { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--a2); }
|
||||
.ln.cue .ln-text { font-style: italic; color: var(--warn); }
|
||||
.ln.now { background: rgba(124,92,255,.16); border-color: rgba(124,92,255,.55); box-shadow: 0 0 0 1px rgba(124,92,255,.25), 0 10px 30px -16px var(--a1); }
|
||||
.ln.next { background: rgba(124,92,255,.06); }
|
||||
.ln.sel { border-color: var(--a2); }
|
||||
.tc:hover { border-color: var(--ed-accent); color: var(--ed-text); }
|
||||
.ln.untimed .tc { color: var(--ed-accent); border-style: dashed; }
|
||||
.ln-text { width: 100%; min-width: 0; min-height: 44px; max-height: 8rem; height: auto; padding: 8px 10px; resize: vertical; overflow: auto; line-height: 1.4; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ed-text); font-size: 16px; }
|
||||
.ln.section .ln-text { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--ed-accent); }
|
||||
.ln.cue .ln-text { font-style: italic; color: var(--ed-muted); }
|
||||
.ln.now { background: var(--ed-selected); border-color: var(--ed-line); }
|
||||
.ln.now .tc { color: var(--ed-on-action); background: var(--ed-action); border-color: var(--ed-action); }
|
||||
.ln.next { background: var(--ed-bg); }
|
||||
.ln.sel { outline: 2px solid var(--ed-accent); outline-offset: 2px; }
|
||||
.ln.sel .ln-text { border-color: var(--ed-line); background: var(--ed-bg); }
|
||||
.ln.flash { animation: flash 1.6s ease; }
|
||||
@keyframes flash { 0%,60% { box-shadow: 0 0 0 3px var(--warn); } 100% { box-shadow: 0 0 0 0 transparent; } }
|
||||
.flagchip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 99px; border: 1px solid rgba(255,180,84,.55); background: rgba(255,180,84,.12); color: var(--warn); font: 800 12px var(--ui); }
|
||||
.flagchip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--warn); background: var(--ed-bg); color: var(--warn); font: 800 12px var(--ui); }
|
||||
.flagchip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.ln.flagged { border-color: rgba(255,180,84,.5); background: rgba(255,180,84,.05); }
|
||||
.more { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--text-dim); font-size: 20px; line-height: 1; }
|
||||
.more:hover { background: rgba(255,255,255,.07); color: var(--text); }
|
||||
.ln-tools { display: none; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 10px 10px 10px; }
|
||||
.ln.flagged { border-color: var(--warn); }
|
||||
.more { width: 44px; height: 44px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ed-dim); font-size: 20px; line-height: 1; }
|
||||
.more:hover { background: var(--ed-raised); color: var(--ed-text); }
|
||||
.ln-tools { display: none; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 8px 8px; }
|
||||
.ln.sel .ln-tools { display: flex; }
|
||||
.ln-tools .btn { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
|
||||
.ln-tools input.tin { width: 88px; height: 34px; text-align: center; font: 600 13px var(--mono); border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); }
|
||||
.flagbox { display: grid; gap: 8px; margin: 0 10px 10px; padding: 12px; border-radius: 13px; background: rgba(255,180,84,.09); border: 1px solid rgba(255,180,84,.35); }
|
||||
.ln-tools .btn { min-height: 44px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
|
||||
.ln-tools input.tin { width: 88px; height: 44px; text-align: center; font: 600 13px var(--mono); border-radius: 8px; border: 1px solid var(--ed-line); background: var(--ed-bg); }
|
||||
.flagbox { display: grid; gap: 8px; margin: 0 10px 10px; padding: 12px; border-radius: 13px; background: var(--ed-bg); border: 1px solid var(--warn); }
|
||||
.rep { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
|
||||
.rep .who { font-weight: 800; color: var(--warn); }
|
||||
.rep .why { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 11.5px; color: var(--text-2); }
|
||||
@@ -253,17 +304,28 @@
|
||||
background: rgba(20,23,34,.92); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -14px #000;
|
||||
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
|
||||
}
|
||||
#p-editor .savebar > div { background: var(--ed-surface); border-color: var(--ed-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
|
||||
#p-editor .dot, #p-editor .dirty .dot { box-shadow: none; }
|
||||
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 10px var(--ok); }
|
||||
.dirty .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); animation: pulse 1.4s infinite; }
|
||||
@keyframes pulse { 50% { opacity: .35; } }
|
||||
.savebar .stat { font-size: 13px; color: var(--text-2); flex: 1; min-width: 0; }
|
||||
.tap {
|
||||
position: fixed; right: 18px; bottom: calc(var(--nav-h) + var(--safe) + 84px); z-index: 46; width: 104px; height: 104px; border-radius: 50%; border: 0;
|
||||
background: var(--grad); color: #fff; font: 800 15px var(--ui); letter-spacing: .04em; box-shadow: 0 18px 40px -8px var(--a1), inset 0 2px 0 rgba(255,255,255,.35);
|
||||
flex: none; min-width: 76px; min-height: 44px; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ed-line);
|
||||
background: var(--ed-action); color: var(--ed-on-action); font: 800 14px var(--ui); letter-spacing: .04em; box-shadow: none;
|
||||
display: grid; place-items: center; text-align: center; line-height: 1.15;
|
||||
}
|
||||
.tap small { display: block; font-weight: 600; opacity: .8; font-size: 11px; letter-spacing: 0; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.tap:active { transform: scale(.93); }
|
||||
.tap small { display: none; }
|
||||
.tap:active { transform: translateY(1px); }
|
||||
.keyboard-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 2px 0; min-width: 0; color: var(--ed-muted); font-size: 12px; }
|
||||
#p-editor .ghost { min-height: 44px; }
|
||||
.keyboard-hint kbd { min-width: 24px; padding: 2px 5px; border: 1px solid var(--ed-line); border-radius: 4px; background: var(--ed-bg); color: var(--ed-text); font: 600 11px var(--mono); text-align: center; }
|
||||
.editor-footer { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 14px; }
|
||||
.line-code { color: var(--ed-dim); font: 600 11px var(--mono); font-variant-numeric: tabular-nums; }
|
||||
#p-editor .ring { background: conic-gradient(var(--ed-accent) calc(var(--p) * 1%), var(--ed-raised) 0); }
|
||||
#p-editor .ring::before { background: var(--ed-surface); }
|
||||
#p-editor .ring span { color: var(--ed-text); }
|
||||
#p-editor .flagchip, #p-editor .flagbox { color: var(--warn); }
|
||||
|
||||
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; }
|
||||
.metric { padding: 18px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; }
|
||||
@@ -297,20 +359,33 @@
|
||||
.nav .tab { flex-direction: column; justify-content: center; gap: 3px; height: auto; padding: 4px 0; font-size: 10.5px; border-radius: 12px; }
|
||||
.nav .tab .badge { position: absolute; top: 2px; left: 55%; }
|
||||
.steps { grid-template-columns: 1fr; }
|
||||
.ln-main { flex-wrap: wrap; }
|
||||
.ln-text { flex: 1 1 60%; }
|
||||
.tc { width: 74px; }
|
||||
.deck { top: 54px; padding: 8px; margin: 0 -6px 10px; border-radius: 18px; }
|
||||
#wave { height: 40px; }
|
||||
.transport { gap: 6px; margin-top: 8px; }
|
||||
.round { width: 36px; height: 36px; } .round.big { width: 44px; height: 44px; }
|
||||
.ln-main { grid-template-columns: 82px minmax(0, 1fr) 44px; gap: 6px; padding: 7px; }
|
||||
.ln-text { grid-column: 2; }
|
||||
.tc { width: 82px; }
|
||||
.deck { top: 54px; padding: 8px; margin: 0 0 10px; border-radius: 12px; }
|
||||
#wave { height: 48px; }
|
||||
.transport { display: grid; grid-template-columns: 44px 52px 44px minmax(72px, 1fr) 74px; gap: 6px; margin-top: 8px; }
|
||||
#bBack { grid-column: 1; } #bPlay { grid-column: 2; } #bFwd { grid-column: 3; } .clock { grid-column: 4; } #rate { grid-column: 5; }
|
||||
.transport .seg { grid-column: 1 / span 2; }
|
||||
#bUndo { grid-column: 3; } #bRedo { grid-column: 4; } #bTools { grid-column: 5; }
|
||||
.round { width: 44px; height: 44px; } .round.big { width: 52px; height: 52px; }
|
||||
.clock { font-size: 15px; }
|
||||
.transport .grow { display: none; }
|
||||
select.mini, .seg button { height: 32px; }
|
||||
.iconbtn { width: 34px; height: 34px; }
|
||||
.seg button { min-width: 0; min-height: 44px; padding: 0 5px; }
|
||||
.iconbtn { width: 44px; height: 44px; }
|
||||
.song { margin-bottom: 10px; } .ring { width: 44px; height: 44px; }
|
||||
.clock { min-width: 0; }
|
||||
.clock { min-width: 0; font-size: 14px; }
|
||||
main { padding-top: 16px; }
|
||||
#tapPad { grid-column: 1 / -1; width: 100%; min-height: 52px; height: 52px; }
|
||||
.editor-footer { align-items: flex-start; }
|
||||
#p-editor { padding: 12px; border-radius: 12px; }
|
||||
}
|
||||
@media (max-width: 370px) {
|
||||
.transport { grid-template-columns: 44px 52px 44px minmax(64px, 1fr); }
|
||||
#rate { grid-column: 4; }
|
||||
#bUndo { grid-column: 1; } #bRedo { grid-column: 2; } #bTools { grid-column: 3; }
|
||||
.transport .seg { grid-column: 1 / span 3; }
|
||||
.clock { font-size: 12px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
|
||||
.media-shape { display:none; } .media-shape-classic { display:inline; }
|
||||
@@ -399,7 +474,9 @@
|
||||
<button class="iconbtn" id="bUndo" type="button" title="Undo (Ctrl/⌘ Z)" aria-label="Undo" disabled><svg viewBox="0 0 24 24"><path d="M9 14L4 9l5-5"/><path d="M4 9h10a6 6 0 010 12h-3"/></svg></button>
|
||||
<button class="iconbtn" id="bRedo" type="button" title="Redo (Ctrl/⌘ Shift Z)" aria-label="Redo" disabled><svg viewBox="0 0 24 24"><path d="M15 14l5-5-5-5"/><path d="M20 9H10a6 6 0 000 12h3"/></svg></button>
|
||||
<button class="iconbtn" id="bTools" type="button" title="More tools" aria-label="More tools" aria-pressed="false"><svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></svg></button>
|
||||
<button id="tapPad" class="tap hidden" type="button" aria-label="Stamp the next line">TAP<small id="tapNext">next line</small></button>
|
||||
</div>
|
||||
<div class="keyboard-hint" aria-label="Keyboard shortcuts"><strong>Shortcuts</strong> <kbd>Space</kbd> stamp in Tap-sync · <kbd>↑</kbd><kbd>↓</kbd> select · <kbd>S</kbd> stamp selected · <kbd>K</kbd> play · <kbd>⌘/Ctrl S</kbd> save</div>
|
||||
</div>
|
||||
|
||||
<div id="drawer" class="drawer hidden">
|
||||
@@ -416,7 +493,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="msg" class="msg"></div>
|
||||
<div id="msg" class="msg" role="status" aria-live="polite"></div>
|
||||
<p id="whisperStatus" role="status" aria-live="polite"></p>
|
||||
<div id="whisperResult" class="card whisper-draft hidden">
|
||||
<h2 style="font-size:18px;margin:0 0 8px">Whisper transcript ready</h2>
|
||||
@@ -426,10 +503,14 @@
|
||||
</div>
|
||||
<div id="lines" class="lines"></div>
|
||||
<textarea id="raw" aria-label="Lyrics as text; prefix continuation lines with vertical bar and space" class="hidden" spellcheck="false"></textarea>
|
||||
<div class="row" style="margin-top:14px">
|
||||
<div class="editor-footer">
|
||||
<button class="btn sm" id="addLine" type="button">＋ Add line</button>
|
||||
<span class="muted" style="font-size:12.5px">Shortcuts: <code>Space</code> stamp (Tap-sync) · <code>S</code> stamp selected · <code>K</code> play · <code>↑↓</code> select · <code>⌘/Ctrl S</code> save</span>
|
||||
</div>
|
||||
<div id="saveBar" class="savebar hidden"><div id="saveInner">
|
||||
<span class="dot"></span><span class="stat" id="saveStat">All changes saved</span>
|
||||
<button class="btn sm" id="discard" type="button">Discard</button>
|
||||
<button class="btn pri" id="save" type="button">Save lyrics</button>
|
||||
</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -563,12 +644,6 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="saveBar" class="savebar hidden"><div id="saveInner">
|
||||
<span class="dot"></span><span class="stat" id="saveStat">All changes saved</span>
|
||||
<button class="btn sm" id="discard" type="button">Discard</button>
|
||||
<button class="btn pri" id="save" type="button">Save lyrics</button>
|
||||
</div></div>
|
||||
<button id="tapPad" class="tap hidden" type="button" aria-label="Stamp the next line">TAP<small id="tapNext">next line</small></button>
|
||||
<nav class="nav" id="tabsBottom" role="tablist"></nav>
|
||||
</div>
|
||||
|
||||
@@ -1339,22 +1414,26 @@
|
||||
const w = c.clientWidth || 600, h = c.height, dpr = window.devicePixelRatio || 1;
|
||||
if (c.width !== Math.round(w * dpr)) c.width = Math.round(w * dpr);
|
||||
const g = c.getContext('2d'); g.setTransform(dpr, 0, 0, dpr, 0, 0); g.clearRect(0, 0, w, h);
|
||||
const waveStyle = getComputedStyle($('p-editor'));
|
||||
const played = waveStyle.getPropertyValue('--ed-wave-played').trim();
|
||||
const unplayed = waveStyle.getPropertyValue('--ed-wave-unplayed').trim();
|
||||
const marker = waveStyle.getPropertyValue('--ed-wave-mark').trim();
|
||||
const cursor = waveStyle.getPropertyValue('--ed-wave-cursor').trim();
|
||||
const dur = LE.dur || 1, t = cur();
|
||||
if (LE.peaks && LE.peaks.length) {
|
||||
const n = LE.peaks.length, bw = w / n;
|
||||
const grad = g.createLinearGradient(0, 0, w, 0); grad.addColorStop(0, '#7c5cff'); grad.addColorStop(1, '#22d3ee');
|
||||
for (let i = 0; i < n; i++) {
|
||||
const bh = Math.max(2, (LE.peaks[i] / 100) * (h - 10));
|
||||
g.fillStyle = (i * dur) / n <= t ? grad : 'rgba(255,255,255,.16)';
|
||||
g.fillStyle = (i * dur) / n <= t ? played : unplayed;
|
||||
g.fillRect(i * bw, (h - bh) / 2, Math.max(1, bw - 1), bh);
|
||||
}
|
||||
} else {
|
||||
g.fillStyle = 'rgba(255,255,255,.14)'; g.fillRect(0, h / 2 - 2, w, 4);
|
||||
g.fillStyle = '#22d3ee'; g.fillRect(0, h / 2 - 2, (t / dur) * w, 4);
|
||||
g.fillStyle = unplayed; g.fillRect(0, h / 2 - 2, w, 4);
|
||||
g.fillStyle = played; g.fillRect(0, h / 2 - 2, (t / dur) * w, 4);
|
||||
}
|
||||
g.fillStyle = 'rgba(255,255,255,.55)';
|
||||
g.fillStyle = marker;
|
||||
for (const l of LE.lines) { if (l.t == null) continue; const x = ((l.t + LE.offset) / dur) * w; g.fillRect(x, 0, 1, 7); g.fillRect(x, h - 7, 1, 7); }
|
||||
g.fillStyle = '#fff'; g.fillRect((t / dur) * w - 1, 0, 2, h);
|
||||
g.fillStyle = cursor; g.fillRect((t / dur) * w - 1, 0, 2, h);
|
||||
}
|
||||
function seek(t) { if (!LE.audio) return; LE.audio.currentTime = Math.max(0, Math.min(LE.dur || 1e9, t)); tick(); }
|
||||
function stamp(i) {
|
||||
@@ -1439,7 +1518,7 @@
|
||||
function setMode(tapOn) {
|
||||
LE.tap = tapOn;
|
||||
$('mTap').setAttribute('aria-pressed', String(tapOn)); $('mEdit').setAttribute('aria-pressed', String(!tapOn));
|
||||
say(tapOn ? 'Tap-sync: press the big TAP button (or Space) each time the highlighted line starts. Play the song first.' : '', tapOn ? 'ok' : '');
|
||||
say(tapOn ? 'Tap-sync active. TAP or Space stamps the next untimed line.' : '', tapOn ? 'ok' : '');
|
||||
lastIdx = -2; tick(); tapLabel(); syncBars();
|
||||
}
|
||||
$('mEdit').addEventListener('click', () => setMode(false));
|
||||
|
||||
@@ -7,7 +7,7 @@ test('download and offline icons never use emoji or text glyphs', () => {
|
||||
// Arrow keys are prose, not action icons. Exact lines prevent new exceptions.
|
||||
const allow = new Map([
|
||||
['index.html', new Set(['<div class="shortcut-row"><kbd>↑</kbd><kbd>↓</kbd><span>Volume up / down</span></div>'])],
|
||||
['admin.html', new Set(['<span class="muted" style="font-size:12.5px">Shortcuts: <code>Space</code> stamp (Tap-sync) · <code>S</code> stamp selected · <code>K</code> play · <code>↑↓</code> select · <code>⌘/Ctrl S</code> save</span>'])],
|
||||
['admin.html', new Set(['<div class="keyboard-hint" aria-label="Keyboard shortcuts"><strong>Shortcuts</strong> <kbd>Space</kbd> stamp in Tap-sync · <kbd>↑</kbd><kbd>↓</kbd> select · <kbd>S</kbd> stamp selected · <kbd>K</kbd> play · <kbd>⌘/Ctrl S</kbd> save</div>'])],
|
||||
]);
|
||||
const failures=[];
|
||||
for (const file of readdirSync(__dirname).filter(f=>/\.(js|html|css)$/.test(f) && !f.endsWith('.test.js'))) {
|
||||
|
||||
BIN
plans/editor-redesign-shots/before-desktop-dark.png
Normal file
BIN
plans/editor-redesign-shots/before-desktop-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
BIN
plans/editor-redesign-shots/before-mobile-dark.png
Normal file
BIN
plans/editor-redesign-shots/before-mobile-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
BIN
plans/editor-redesign-shots/contrast-1280.png
Normal file
BIN
plans/editor-redesign-shots/contrast-1280.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
plans/editor-redesign-shots/contrast-1920.png
Normal file
BIN
plans/editor-redesign-shots/contrast-1920.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
plans/editor-redesign-shots/contrast-390.png
Normal file
BIN
plans/editor-redesign-shots/contrast-390.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
plans/editor-redesign-shots/contrast-768.png
Normal file
BIN
plans/editor-redesign-shots/contrast-768.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
plans/editor-redesign-shots/dark-1280.png
Normal file
BIN
plans/editor-redesign-shots/dark-1280.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
plans/editor-redesign-shots/dark-1920.png
Normal file
BIN
plans/editor-redesign-shots/dark-1920.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
plans/editor-redesign-shots/dark-390.png
Normal file
BIN
plans/editor-redesign-shots/dark-390.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
plans/editor-redesign-shots/dark-768.png
Normal file
BIN
plans/editor-redesign-shots/dark-768.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
plans/editor-redesign-shots/light-1280.png
Normal file
BIN
plans/editor-redesign-shots/light-1280.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
plans/editor-redesign-shots/light-1920.png
Normal file
BIN
plans/editor-redesign-shots/light-1920.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
BIN
plans/editor-redesign-shots/light-390.png
Normal file
BIN
plans/editor-redesign-shots/light-390.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
plans/editor-redesign-shots/light-768.png
Normal file
BIN
plans/editor-redesign-shots/light-768.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
@@ -1,6 +1,7 @@
|
||||
const { test, expect } = require('@playwright/test');
|
||||
const fs = require('node:fs');
|
||||
const id = '0gfX0dFLaBc';
|
||||
async function fixture(page) {
|
||||
async function fixture(page, theme = 'dark') {
|
||||
const state = { job: null, starts: 0, saves: [] };
|
||||
await page.route('**/api/**', async route => {
|
||||
const req = route.request(), url = new URL(req.url()); let body = { ok: true };
|
||||
@@ -16,6 +17,7 @@ async function fixture(page) {
|
||||
} else if (url.pathname === '/api/notes/' + id + '/lyrics' && req.method() === 'PUT') { state.saves.push(req.postDataJSON()); body.rev = 9; }
|
||||
return route.fulfill({ contentType: 'application/json', body: JSON.stringify(body) });
|
||||
});
|
||||
await page.addInitScript(theme => localStorage.setItem('_ytpdata', JSON.stringify({ settings: { theme } })), theme);
|
||||
await page.goto('/admin.html#editor');
|
||||
await expect(page.locator('[data-open="' + id + '"]').first()).toBeVisible();
|
||||
return state;
|
||||
@@ -165,3 +167,98 @@ test('editor loads the whole audio into the browser once and reuses it', async (
|
||||
await expect(page.locator('#dur')).toHaveText('0:01');
|
||||
expect(hits).toBe(1);
|
||||
});
|
||||
|
||||
function ratio(fg, bg) {
|
||||
const channel = value => {
|
||||
const n = value / 255;
|
||||
return n <= 0.04045 ? n / 12.92 : ((n + 0.055) / 1.055) ** 2.4;
|
||||
};
|
||||
const lum = color => {
|
||||
const values = color.startsWith('#')
|
||||
? (color.slice(1).length === 3
|
||||
? [...color.slice(1)].map(value => value + value).join('')
|
||||
: color.slice(1)).match(/.{2}/g).slice(0, 3).map(value => parseInt(value, 16))
|
||||
: color.match(/[\d.]+/g).slice(0, 3).map(Number);
|
||||
return 0.2126 * channel(values[0]) + 0.7152 * channel(values[1]) + 0.0722 * channel(values[2]);
|
||||
};
|
||||
const [a, b] = [lum(fg), lum(bg)].sort((x, y) => y - x);
|
||||
return (a + 0.05) / (b + 0.05);
|
||||
}
|
||||
|
||||
test('Lyrics Studio stays readable, touchable and contained across themes and screen sizes', async ({ page }) => {
|
||||
const shots = 'plans/editor-redesign-shots'; fs.mkdirSync(shots, { recursive: true });
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await fixture(page, 'light');
|
||||
await expect(page.locator('html')).toHaveAttribute('data-editor-theme', 'light');
|
||||
await page.locator(`[data-open="${id}"]`).first().click();
|
||||
await expect(page.locator('.ln')).toHaveCount(47);
|
||||
await page.locator('.ln').first().locator('.tc').click();
|
||||
await expect(page.locator('.ln').first()).toHaveClass(/sel/);
|
||||
await page.locator('.ln').first().evaluate(row => row.classList.add('now'));
|
||||
await page.locator('#mTap').click();
|
||||
await page.locator('.ln').first().evaluate(row => row.classList.add('now'));
|
||||
await expect(page.locator('#tapPad')).toBeVisible();
|
||||
await page.locator('.ln-text').first().fill('A corrected lyric remains in the editor while the save controls stay available.');
|
||||
await expect(page.locator('#saveBar')).toBeVisible();
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
|
||||
for (const theme of ['dark', 'light', 'contrast']) {
|
||||
for (const width of [390, 768, 1280, 1920]) {
|
||||
await page.setViewportSize({ width, height: width < 500 ? 844 : 900 });
|
||||
await page.evaluate(value => { document.documentElement.dataset.editorTheme = value; }, theme);
|
||||
const metrics = await page.evaluate(() => {
|
||||
const css = selector => getComputedStyle(document.querySelector(selector));
|
||||
const root = css('#p-editor'), title = css('#songTitle'), meta = css('#songMeta');
|
||||
const primary = css('#save');
|
||||
const line = css('.ln.sel .ln-text');
|
||||
const row = css('.ln.sel');
|
||||
const waveTokens = ['--ed-wave-played', '--ed-wave-unplayed', '--ed-wave-mark', '--ed-wave-cursor'];
|
||||
const rect = selector => { const r = document.querySelector(selector).getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height, right: r.right, bottom: r.bottom }; };
|
||||
const visibleControls = [...document.querySelectorAll('#studio button, #studio select, #studio input, #studio textarea, #saveBar button, #tapPad')]
|
||||
.filter(el => el.getClientRects().length);
|
||||
return {
|
||||
theme: document.documentElement.dataset.editorTheme,
|
||||
viewport: innerWidth,
|
||||
rootScroll: document.documentElement.scrollWidth,
|
||||
editorScroll: document.querySelector('#p-editor').scrollWidth,
|
||||
editorClient: document.querySelector('#p-editor').clientWidth,
|
||||
titleRatio: [title.color, root.backgroundColor],
|
||||
metaRatio: [meta.color, root.backgroundColor],
|
||||
primaryRatio: [primary.color, primary.backgroundColor],
|
||||
primaryBoundary: [row.outlineColor, root.backgroundColor],
|
||||
lineRatio: [line.color, line.backgroundColor],
|
||||
waveRatios: waveTokens.map(token => [root.getPropertyValue(token).trim(), root.getPropertyValue('--ed-bg').trim()]),
|
||||
nowBorder: css('.ln.now').borderTopColor,
|
||||
selectedOutline: row.outlineColor,
|
||||
keyboardHint: (() => { const el = document.querySelector('.keyboard-hint'), r = el.getBoundingClientRect(); return { visible: !!el.getClientRects().length, insideDeck: document.querySelector('.deck').contains(el), bottom: r.bottom, top: r.top }; })(),
|
||||
targets: visibleControls.map(el => ({ id: el.id || el.className, width: el.getBoundingClientRect().width, height: el.getBoundingClientRect().height })),
|
||||
tap: rect('#tapPad'), save: rect('#saveInner'),
|
||||
focus: (() => { const el = document.querySelector('#bBack'); el.focus({ focusVisible: true }); const s = getComputedStyle(el); return { style: s.outlineStyle, width: s.outlineWidth }; })(),
|
||||
reduceMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,
|
||||
transition: getComputedStyle(document.querySelector('.ln')).transitionDuration,
|
||||
rowCount: document.querySelectorAll('.ln').length,
|
||||
};
|
||||
});
|
||||
expect(metrics.rootScroll, `${theme} ${width}px page overflow`).toBeLessThanOrEqual(width + 1);
|
||||
expect(metrics.editorScroll, `${theme} ${width}px editor overflow`).toBeLessThanOrEqual(metrics.editorClient + 1);
|
||||
expect(metrics.rowCount).toBe(47);
|
||||
expect(ratio(...metrics.titleRatio), `${theme} title contrast`).toBeGreaterThanOrEqual(4.5);
|
||||
expect(ratio(...metrics.metaRatio), `${theme} metadata contrast`).toBeGreaterThanOrEqual(4.5);
|
||||
expect(ratio(...metrics.primaryRatio), `${theme} primary action contrast ${JSON.stringify(metrics.primaryRatio)}`).toBeGreaterThanOrEqual(4.5);
|
||||
expect(ratio(...metrics.primaryBoundary), `${theme} selected boundary contrast`).toBeGreaterThanOrEqual(3);
|
||||
expect(ratio(...metrics.lineRatio), `${theme} lyric text contrast`).toBeGreaterThanOrEqual(4.5);
|
||||
for (const colors of metrics.waveRatios) expect(ratio(...colors), `${theme} waveform contrast ${colors[0]}`).toBeGreaterThanOrEqual(3);
|
||||
expect(metrics.nowBorder).not.toBe(metrics.selectedOutline);
|
||||
expect(metrics.keyboardHint.visible).toBe(true);
|
||||
expect(metrics.keyboardHint.insideDeck).toBe(true);
|
||||
for (const target of metrics.targets) expect(target.height, `${target.id} target at ${width}px`).toBeGreaterThanOrEqual(44);
|
||||
expect(metrics.focus.style).not.toBe('none');
|
||||
expect(metrics.focus.width).toBe('3px');
|
||||
expect(metrics.reduceMotion).toBe(true);
|
||||
expect(metrics.transition).toBe('0s');
|
||||
expect(metrics.tap.bottom).toBeLessThanOrEqual(metrics.save.y);
|
||||
if (width < 500) expect(metrics.tap.right).toBeLessThanOrEqual(width);
|
||||
await page.screenshot({ path: `${shots}/${theme}-${width}.png`, fullPage: false });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user