Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 4DBug
|
735f9a4375 | ||
|
4DBug
|
145851a32e |
+3
-2
@@ -45,8 +45,9 @@ async function scrapeAll(providers, media, timeoutMs) {
|
|||||||
const seen = new Set();
|
const seen = new Set();
|
||||||
const unique = [];
|
const unique = [];
|
||||||
for (const s of streams) {
|
for (const s of streams) {
|
||||||
if (seen.has(s.url)) continue;
|
const key = `${s._provider}|${s.url}|${s.quality || ''}|${s.name || s.title || ''}`;
|
||||||
seen.add(s.url);
|
if (seen.has(key)) continue;
|
||||||
|
seen.add(key);
|
||||||
unique.push(s);
|
unique.push(s);
|
||||||
}
|
}
|
||||||
return { streams: unique, errors };
|
return { streams: unique, errors };
|
||||||
|
|||||||
+70
-6
@@ -52,6 +52,14 @@ p {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 1px var(--space-1);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: var(--color-surface-2);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- page frame ---------------------------------------------------------- */
|
/* ---- page frame ---------------------------------------------------------- */
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -66,6 +74,8 @@ p {
|
|||||||
padding-bottom: var(--space-8);
|
padding-bottom: var(--space-8);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- header ---------------------------------------------------------------- */
|
||||||
|
|
||||||
.site-header {
|
.site-header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -77,7 +87,8 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.site-header__inner {
|
.site-header__inner {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-4);
|
gap: var(--space-4);
|
||||||
height: var(--header-height);
|
height: var(--header-height);
|
||||||
@@ -94,22 +105,67 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.site-header__nav {
|
.site-header__nav {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header__nav a {
|
||||||
|
padding: var(--space-2) var(--space-4);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
color: var(--color-text-dim);
|
color: var(--color-text-dim);
|
||||||
padding: var(--space-2) var(--space-3);
|
transition: background 120ms ease, color 120ms ease;
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header__nav:hover {
|
.site-header__nav a:hover {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background: var(--color-surface);
|
background: var(--color-surface);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header__spacer {
|
.site-header__nav a.is-active {
|
||||||
flex: 1;
|
color: var(--color-accent-text);
|
||||||
|
background: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-header__actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- icon buttons ----------------------------------------------------------- */
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--color-text-dim);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease, color 120ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn:hover {
|
||||||
|
background: var(--color-surface);
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn.is-active {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- footer ------------------------------------------------------------------ */
|
||||||
|
|
||||||
.site-footer {
|
.site-footer {
|
||||||
border-top: 1px solid var(--color-border);
|
border-top: 1px solid var(--color-border);
|
||||||
padding: var(--space-4) 0 var(--space-5);
|
padding: var(--space-4) 0 var(--space-5);
|
||||||
@@ -130,3 +186,11 @@ p {
|
|||||||
.site-footer a:hover {
|
.site-footer a:hover {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- responsive ---------------------------------------------------------------- */
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.site-header__nav a {
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+391
-72
@@ -3,7 +3,7 @@
|
|||||||
after the thing it styles (BEM-ish: block, block__element, block--modifier).
|
after the thing it styles (BEM-ish: block, block__element, block--modifier).
|
||||||
Theme values come from tokens.css; never hardcode colors/sizes here if a
|
Theme values come from tokens.css; never hardcode colors/sizes here if a
|
||||||
token exists.
|
token exists.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* ---- buttons ------------------------------------------------------------- */
|
/* ---- buttons ------------------------------------------------------------- */
|
||||||
|
|
||||||
@@ -12,9 +12,9 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: var(--space-2);
|
gap: var(--space-2);
|
||||||
padding: var(--space-2) var(--space-4);
|
padding: var(--space-2) var(--space-5);
|
||||||
border: 1px solid var(--color-border-strong);
|
border: 1px solid var(--color-border-strong);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-full);
|
||||||
background: var(--color-surface-2);
|
background: var(--color-surface-2);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background 120ms ease, border-color 120ms ease;
|
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
@@ -97,7 +97,7 @@
|
|||||||
|
|
||||||
select.field {
|
select.field {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2398a2b0' stroke-width='2'/%3E%3C/svg%3E");
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a9a9a' stroke-width='2'/%3E%3C/svg%3E");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: right 12px center;
|
background-position: right 12px center;
|
||||||
padding-right: 32px;
|
padding-right: 32px;
|
||||||
@@ -135,7 +135,7 @@ select.field {
|
|||||||
.tag {
|
.tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 2px var(--space-2);
|
padding: 2px var(--space-2);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-full);
|
||||||
background: var(--color-surface-2);
|
background: var(--color-surface-2);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-xs);
|
||||||
@@ -151,7 +151,7 @@ select.field {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chip {
|
.chip {
|
||||||
padding: var(--space-1) var(--space-3);
|
padding: var(--space-1) var(--space-4);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
border-radius: var(--radius-full);
|
border-radius: var(--radius-full);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -168,9 +168,9 @@ select.field {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chip--active {
|
.chip--active {
|
||||||
background: var(--color-surface);
|
background: var(--color-accent);
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-accent);
|
||||||
color: var(--color-text);
|
color: var(--color-accent-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- media cards (poster) --------------------------------------------------- */
|
/* ---- media cards (poster) --------------------------------------------------- */
|
||||||
@@ -184,23 +184,29 @@ select.field {
|
|||||||
|
|
||||||
.card__poster {
|
.card__poster {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: block;
|
||||||
aspect-ratio: var(--poster-aspect);
|
aspect-ratio: var(--poster-aspect);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--color-surface);
|
background: var(--color-surface);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
transition: border-color 120ms ease, transform 120ms ease;
|
transition: border-color 120ms ease, box-shadow 120ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover .card__poster {
|
.card:hover .card__poster {
|
||||||
border-color: var(--color-border-strong);
|
border-color: var(--color-accent);
|
||||||
transform: translateY(-2px);
|
box-shadow: 0 0 0 1px var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__poster img {
|
.card__poster img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
transition: transform 220ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover .card__poster img {
|
||||||
|
transform: scale(1.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__poster--empty {
|
.card__poster--empty {
|
||||||
@@ -236,8 +242,8 @@ select.field {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 3px;
|
height: 4px;
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__progress i {
|
.card__progress i {
|
||||||
@@ -301,62 +307,6 @@ select.field {
|
|||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- modal ----------------------------------------------------------------- */
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 100;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: var(--space-4);
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 460px;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
background: var(--color-surface);
|
|
||||||
box-shadow: var(--shadow-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: var(--space-3);
|
|
||||||
padding: var(--space-4) var(--space-5);
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__title {
|
|
||||||
font-size: var(--text-lg);
|
|
||||||
font-weight: var(--font-weight-semibold);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__body {
|
|
||||||
padding: var(--space-5);
|
|
||||||
display: grid;
|
|
||||||
gap: var(--space-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__hint {
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
color: var(--color-text-faint);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: var(--space-2);
|
|
||||||
padding: var(--space-4) var(--space-5);
|
|
||||||
border-top: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- toast ----------------------------------------------------------------- */
|
/* ---- toast ----------------------------------------------------------------- */
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
@@ -366,9 +316,9 @@ select.field {
|
|||||||
z-index: 110;
|
z-index: 110;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
max-width: min(90vw, 480px);
|
max-width: min(90vw, 480px);
|
||||||
padding: var(--space-2) var(--space-4);
|
padding: var(--space-2) var(--space-5);
|
||||||
border: 1px solid var(--color-border-strong);
|
border: 1px solid var(--color-border-strong);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-full);
|
||||||
background: var(--color-surface);
|
background: var(--color-surface);
|
||||||
box-shadow: var(--shadow-2);
|
box-shadow: var(--shadow-2);
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
@@ -419,3 +369,372 @@ select.field {
|
|||||||
color: var(--color-text-dim);
|
color: var(--color-text-dim);
|
||||||
margin-bottom: var(--space-2);
|
margin-bottom: var(--space-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- player controls --------------------------------------------------------- */
|
||||||
|
|
||||||
|
.player-wrap {
|
||||||
|
--pc-progress: 0%;
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: var(--player-aspect);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
background: #000;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-wrap video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* top-left back button */
|
||||||
|
.player-back {
|
||||||
|
position: absolute;
|
||||||
|
top: var(--space-3);
|
||||||
|
left: var(--space-3);
|
||||||
|
z-index: 5;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: rgba(0, 0, 0, 0.45);
|
||||||
|
color: #fff;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-4px);
|
||||||
|
transition: opacity 160ms ease, transform 160ms ease, background 120ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-back:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-back svg {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* centered big play (shown when paused) */
|
||||||
|
.player-bigplay {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
z-index: 4;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 76px;
|
||||||
|
height: 76px;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: color-mix(in srgb, var(--color-accent) 90%, transparent);
|
||||||
|
color: var(--color-accent-text);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: var(--shadow-2);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 160ms ease, transform 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-bigplay:hover {
|
||||||
|
transform: translate(-50%, -50%) scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-bigplay svg {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* bottom controls bar */
|
||||||
|
.player-controls {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 6;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: var(--space-4) var(--space-4) var(--space-3);
|
||||||
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(6px);
|
||||||
|
transition: opacity 160ms ease, transform 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-controls__bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-controls__spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-btn:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-btn:focus-visible {
|
||||||
|
outline: 2px solid var(--color-accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-btn svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-btn--text {
|
||||||
|
width: auto;
|
||||||
|
padding: 0 var(--space-2);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-btn.is-on {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-time {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-quality {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
color: var(--color-accent);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* range inputs (seek + volume) */
|
||||||
|
.pc-seek,
|
||||||
|
.pc-vol {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
var(--color-accent) var(--pc-progress),
|
||||||
|
rgba(255, 255, 255, 0.28) var(--pc-progress)
|
||||||
|
);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-seek {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-vol {
|
||||||
|
width: 72px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-seek::-webkit-slider-thumb,
|
||||||
|
.pc-vol::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--color-accent);
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-seek::-moz-range-thumb,
|
||||||
|
.pc-vol::-moz-range-thumb {
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--color-accent);
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* show back + controls when hovered or flagged */
|
||||||
|
.player-wrap:hover .player-controls,
|
||||||
|
.player-wrap:hover .player-back,
|
||||||
|
.player-wrap--controls .player-controls,
|
||||||
|
.player-wrap--controls .player-back {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-wrap:hover .player-bigplay,
|
||||||
|
.player-wrap--controls .player-bigplay {
|
||||||
|
/* big play only when paused — handled by .player-wrap--paused below */
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-wrap--paused .player-bigplay {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* in-player source switcher (gear popup) */
|
||||||
|
.player-sources {
|
||||||
|
position: absolute;
|
||||||
|
right: var(--space-3);
|
||||||
|
bottom: calc(var(--space-4) + 64px);
|
||||||
|
z-index: 7;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: min(380px, calc(100% - var(--space-6)));
|
||||||
|
max-height: calc(100% - 112px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: rgba(10, 10, 10, 0.94);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
box-shadow: var(--shadow-2);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-sources__head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-3);
|
||||||
|
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
color: #fff;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-sources__close {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-sources__close:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-sources__close svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-sources__list {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: var(--space-2);
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--color-border-strong) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-sources__group {
|
||||||
|
padding: var(--space-2) var(--space-3) var(--space-1);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(255, 255, 255, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--color-text);
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-item--active {
|
||||||
|
background: color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-item__rank {
|
||||||
|
flex: 0 0 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-item--active .source-item__rank {
|
||||||
|
background: var(--color-accent);
|
||||||
|
border-color: var(--color-accent);
|
||||||
|
color: var(--color-accent-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-item__name {
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-item__meta {
|
||||||
|
margin-left: auto;
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.player-sources {
|
||||||
|
left: var(--space-3);
|
||||||
|
right: var(--space-3);
|
||||||
|
bottom: calc(var(--space-3) + 64px);
|
||||||
|
width: auto;
|
||||||
|
max-height: calc(100% - 88px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+139
-122
@@ -4,34 +4,6 @@
|
|||||||
page-level blocks and handles responsive behavior.
|
page-level blocks and handles responsive behavior.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* ---- home ------------------------------------------------------------------ */
|
|
||||||
|
|
||||||
.home-hero {
|
|
||||||
margin: 0 0 var(--space-6);
|
|
||||||
padding: var(--space-5);
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
background:
|
|
||||||
radial-gradient(80% 120% at 10% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60%),
|
|
||||||
var(--color-surface);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-hero h1 {
|
|
||||||
font-size: var(--text-2xl);
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-hero p {
|
|
||||||
margin-top: var(--space-2);
|
|
||||||
max-width: 56ch;
|
|
||||||
color: var(--color-text-dim);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-hero .chips {
|
|
||||||
margin-top: var(--space-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- search ------------------------------------------------------------------ */
|
/* ---- search ------------------------------------------------------------------ */
|
||||||
|
|
||||||
.search-bar {
|
.search-bar {
|
||||||
@@ -156,23 +128,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- watch: player ------------------------------------------------------------- */
|
/* ---- watch: player (.player-wrap + controls live in components.css) ------------- */
|
||||||
|
|
||||||
.player-wrap {
|
|
||||||
position: relative;
|
|
||||||
aspect-ratio: var(--player-aspect);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
overflow: hidden;
|
|
||||||
background: #000;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-wrap video {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-status {
|
.player-status {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -199,7 +155,7 @@
|
|||||||
margin-bottom: var(--space-1);
|
margin-bottom: var(--space-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- watch: toolbar + sources ---------------------------------------------------- */
|
/* ---- watch: toolbar (source popup lives in components.css with the player) ---------- */
|
||||||
|
|
||||||
.watch-toolbar {
|
.watch-toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -220,78 +176,6 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sources {
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
background: var(--color-surface);
|
|
||||||
margin-bottom: var(--space-6);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sources__head {
|
|
||||||
padding: var(--space-3) var(--space-4);
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
font-weight: var(--font-weight-semibold);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-3);
|
|
||||||
width: 100%;
|
|
||||||
padding: var(--space-3) var(--space-4);
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
background: transparent;
|
|
||||||
color: var(--color-text);
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item:hover {
|
|
||||||
background: var(--color-surface-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item--active {
|
|
||||||
background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item__rank {
|
|
||||||
flex: 0 0 24px;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
background: var(--color-surface-2);
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
color: var(--color-text-dim);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item--active .source-item__rank {
|
|
||||||
background: var(--color-accent);
|
|
||||||
border-color: var(--color-accent);
|
|
||||||
color: var(--color-accent-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item__name {
|
|
||||||
font-weight: var(--font-weight-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item__meta {
|
|
||||||
margin-left: auto;
|
|
||||||
color: var(--color-text-faint);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-cell {
|
.loading-cell {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -415,6 +299,128 @@
|
|||||||
color: var(--color-text-faint);
|
color: var(--color-text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- settings ------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
.settings {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 200px minmax(0, 1fr);
|
||||||
|
gap: var(--space-6);
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__nav {
|
||||||
|
position: sticky;
|
||||||
|
top: calc(var(--header-height) + var(--space-5));
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__navlink {
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
color: var(--color-text-dim);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__navlink:hover {
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__navlink.is-active {
|
||||||
|
color: var(--color-accent-text);
|
||||||
|
background: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__content {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-5);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__card {
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: var(--color-surface);
|
||||||
|
padding: var(--space-5);
|
||||||
|
scroll-margin-top: calc(var(--header-height) + var(--space-4));
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__card h2 {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__hint {
|
||||||
|
color: var(--color-text-dim);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
max-width: 60ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin: var(--space-4) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__status {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
min-height: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__status--ok {
|
||||||
|
color: var(--color-success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__status--err {
|
||||||
|
color: var(--color-danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--color-surface-2);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 120ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider:hover {
|
||||||
|
border-color: var(--color-border-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider input[type="checkbox"] {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 0;
|
||||||
|
accent-color: var(--color-accent);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider__name {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- responsive ---------------------------------------------------------------- */
|
/* ---- responsive ---------------------------------------------------------------- */
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
@@ -437,11 +443,22 @@
|
|||||||
font-size: var(--text-2xl);
|
font-size: var(--text-2xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-hero h1 {
|
|
||||||
font-size: var(--text-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar__form {
|
.search-bar__form {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.settings {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__nav {
|
||||||
|
position: static;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__card {
|
||||||
|
padding: var(--space-4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+18
-18
@@ -8,20 +8,20 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* ---- palette (retheme here) ----------------------------------------- */
|
/* ---- palette (retheme here) ----------------------------------------- */
|
||||||
--color-bg: #0b0d10; /* page background */
|
--color-bg: #0a0a0a; /* page background */
|
||||||
--color-surface: #14171c; /* cards, panels */
|
--color-surface: #141414; /* cards, panels */
|
||||||
--color-surface-hover: #1c2129; /* hover state for surfaces */
|
--color-surface-hover: #1d1d1d; /* hover state for surfaces */
|
||||||
--color-surface-2: #191d24; /* inputs, alt surfaces */
|
--color-surface-2: #1a1a1a; /* inputs, alt surfaces */
|
||||||
--color-border: #262c35; /* default borders */
|
--color-border: #262626; /* default borders */
|
||||||
--color-border-strong: #39424f; /* visible borders / hover borders */
|
--color-border-strong: #3a3a3a; /* visible borders / hover borders */
|
||||||
--color-text: #eceff3; /* primary text */
|
--color-text: #f2f2f2; /* primary text */
|
||||||
--color-text-dim: #98a2b0; /* secondary text */
|
--color-text-dim: #9a9a9a; /* secondary text */
|
||||||
--color-text-faint: #5f6b7a; /* tertiary text */
|
--color-text-faint: #5c5c5c; /* tertiary text */
|
||||||
--color-accent: #4f8cff; /* brand / primary action color */
|
--color-accent: #c084fc; /* brand / primary action color */
|
||||||
--color-accent-hover: #6ea1ff;
|
--color-accent-hover: #d8b4fe;
|
||||||
--color-accent-text: #ffffff; /* text on accent buttons */
|
--color-accent-text: #12071f; /* text on accent buttons */
|
||||||
--color-danger: #ff6b6b;
|
--color-danger: #ff6b6b;
|
||||||
--color-success: #46c98f;
|
--color-success: #c084fc;
|
||||||
--color-star: #ffc94d; /* rating stars */
|
--color-star: #ffc94d; /* rating stars */
|
||||||
|
|
||||||
/* ---- typography ------------------------------------------------------ */
|
/* ---- typography ------------------------------------------------------ */
|
||||||
@@ -51,12 +51,12 @@
|
|||||||
--space-8: 64px;
|
--space-8: 64px;
|
||||||
|
|
||||||
/* ---- shape ------------------------------------------------------------- */
|
/* ---- shape ------------------------------------------------------------- */
|
||||||
--radius-sm: 6px;
|
--radius-sm: 8px;
|
||||||
--radius-md: 10px;
|
--radius-md: 12px;
|
||||||
--radius-lg: 14px;
|
--radius-lg: 16px;
|
||||||
--radius-full: 999px;
|
--radius-full: 999px;
|
||||||
--shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
|
--shadow-1: 0 2px 8px rgba(0, 0, 0, 0.45);
|
||||||
--shadow-2: 0 12px 40px rgba(0, 0, 0, 0.5);
|
--shadow-2: 0 12px 40px rgba(0, 0, 0, 0.6);
|
||||||
|
|
||||||
/* ---- layout ------------------------------------------------------------ */
|
/* ---- layout ------------------------------------------------------------ */
|
||||||
--container-max: 1280px;
|
--container-max: 1280px;
|
||||||
|
|||||||
+12
-40
@@ -13,27 +13,22 @@
|
|||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="container site-header__inner">
|
<div class="container site-header__inner">
|
||||||
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
||||||
<a class="site-header__nav" href="index.html">Home</a>
|
<nav class="site-header__nav" aria-label="Primary">
|
||||||
<a class="site-header__nav" href="search.html">Search</a>
|
<a href="index.html" class="is-active" aria-current="page">Home</a>
|
||||||
<span class="site-header__spacer"></span>
|
<a href="search.html">Search</a>
|
||||||
<button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
|
</nav>
|
||||||
|
<div class="site-header__actions">
|
||||||
|
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||||
|
</a>
|
||||||
|
<a class="icon-btn" href="settings.html" aria-label="Settings" title="Settings">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="container page" id="content">
|
<main class="container page" id="content">
|
||||||
<section class="home-hero">
|
|
||||||
<h1>What do you want to watch?</h1>
|
|
||||||
<p>
|
|
||||||
One catalog, many sources. Pick a stream, and if it dies mid-episode,
|
|
||||||
switch source — your place is remembered.
|
|
||||||
</p>
|
|
||||||
<form class="search-bar__form" id="heroForm" role="search">
|
|
||||||
<input class="field search-bar__input" id="heroInput" type="search" placeholder="Search movies and shows…" autocomplete="off">
|
|
||||||
<button class="btn btn--primary" type="submit">Search</button>
|
|
||||||
</form>
|
|
||||||
<div class="chips" id="heroChips"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div id="sections"></div>
|
<div id="sections"></div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
@@ -44,29 +39,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<div class="modal-overlay" id="settingsModal" hidden>
|
|
||||||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
|
|
||||||
<div class="modal__head">
|
|
||||||
<h2 class="modal__title" id="settingsTitle">Settings</h2>
|
|
||||||
<button class="btn btn--ghost btn--sm" id="settingsClose" type="button">Close</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal__body">
|
|
||||||
<div>
|
|
||||||
<label class="field-label" for="apiBaseInput">API base URL</label>
|
|
||||||
<input class="field" id="apiBaseInput" type="url" placeholder="https://…">
|
|
||||||
<p class="modal__hint">
|
|
||||||
All requests go to this API. You can also override it for one session
|
|
||||||
by adding <code>?api=https://…</code> to any page URL.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal__actions">
|
|
||||||
<button class="btn" id="apiBaseReset" type="button">Reset to default</button>
|
|
||||||
<button class="btn btn--primary" id="apiBaseSave" type="button">Save</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="js/util.js"></script>
|
<script src="js/util.js"></script>
|
||||||
<script src="js/config.js"></script>
|
<script src="js/config.js"></script>
|
||||||
<script src="js/api.js"></script>
|
<script src="js/api.js"></script>
|
||||||
|
|||||||
+9
-1
@@ -45,6 +45,14 @@
|
|||||||
details: (type, id) => request(`/${type}/${id}`),
|
details: (type, id) => request(`/${type}/${id}`),
|
||||||
seasons: (id) => request(`/tv/${id}/seasons`),
|
seasons: (id) => request(`/tv/${id}/seasons`),
|
||||||
episodes: (id, season) => request(`/tv/${id}/seasons/${season}`),
|
episodes: (id, season) => request(`/tv/${id}/seasons/${season}`),
|
||||||
streams: ({ tmdb, type, season, episode }) => request('/streams', { tmdb, type, season, episode }),
|
streams: ({ tmdb, type, season, episode, providers }) =>
|
||||||
|
request('/streams', {
|
||||||
|
tmdb,
|
||||||
|
type,
|
||||||
|
season,
|
||||||
|
episode,
|
||||||
|
providers: Array.isArray(providers) && providers.length ? providers.join(',') : '',
|
||||||
|
}),
|
||||||
|
providers: () => request('/providers'),
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|||||||
+2
-40
@@ -1,49 +1,11 @@
|
|||||||
/*
|
/*
|
||||||
APP — shared chrome for every page: settings dialog, footer API label,
|
APP — shared chrome for every page: footer API label, toast notifications.
|
||||||
toast notifications.
|
(Settings moved to its own page: settings.html)
|
||||||
*/
|
*/
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function initChrome() {
|
function initChrome() {
|
||||||
const modal = document.getElementById('settingsModal');
|
|
||||||
const openBtn = document.getElementById('settingsBtn');
|
|
||||||
const input = document.getElementById('apiBaseInput');
|
|
||||||
|
|
||||||
if (openBtn && modal && input) {
|
|
||||||
const close = () => {
|
|
||||||
modal.hidden = true;
|
|
||||||
};
|
|
||||||
openBtn.addEventListener('click', () => {
|
|
||||||
input.value = SR.config.getBase();
|
|
||||||
modal.hidden = false;
|
|
||||||
input.focus();
|
|
||||||
input.select();
|
|
||||||
});
|
|
||||||
const closeBtn = document.getElementById('settingsClose');
|
|
||||||
if (closeBtn) closeBtn.addEventListener('click', close);
|
|
||||||
modal.addEventListener('click', (e) => {
|
|
||||||
if (e.target === modal) close();
|
|
||||||
});
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape' && !modal.hidden) close();
|
|
||||||
});
|
|
||||||
const saveBtn = document.getElementById('apiBaseSave');
|
|
||||||
if (saveBtn) {
|
|
||||||
saveBtn.addEventListener('click', () => {
|
|
||||||
SR.config.setBase(input.value);
|
|
||||||
location.reload();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const resetBtn = document.getElementById('apiBaseReset');
|
|
||||||
if (resetBtn) {
|
|
||||||
resetBtn.addEventListener('click', () => {
|
|
||||||
SR.config.clearBase();
|
|
||||||
location.reload();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const label = document.getElementById('apiBaseLabel');
|
const label = document.getElementById('apiBaseLabel');
|
||||||
if (label) {
|
if (label) {
|
||||||
const base = SR.config.getBase();
|
const base = SR.config.getBase();
|
||||||
|
|||||||
+62
-4
@@ -1,14 +1,21 @@
|
|||||||
/*
|
/*
|
||||||
CONFIG — where the API lives. Resolution order:
|
CONFIG — where the API lives + which providers to query.
|
||||||
|
|
||||||
|
API base resolution order:
|
||||||
1. ?api=<url> query param on any page (session override)
|
1. ?api=<url> query param on any page (session override)
|
||||||
2. localStorage (saved from the Settings dialog)
|
2. localStorage (saved from Settings)
|
||||||
3. built-in default
|
3. built-in default
|
||||||
|
|
||||||
|
Providers: until the user toggles anything in Settings, the server's own
|
||||||
|
enabled list is used. Once customized, a {name: bool} map is stored in
|
||||||
|
localStorage; names missing from the map default to enabled.
|
||||||
*/
|
*/
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const DEFAULT_BASE = 'https://bug-api-test.tuns.sh';
|
const DEFAULT_BASE = 'https://api-tv.bug.tools';
|
||||||
const STORAGE_KEY = 'streamreverse.apiBase.v1';
|
const STORAGE_KEY = 'streamreverse.apiBase.v1';
|
||||||
|
const PROVIDER_KEY = 'streamreverse.providers.v1';
|
||||||
|
|
||||||
function normalize(value) {
|
function normalize(value) {
|
||||||
let v = String(value || '').trim();
|
let v = String(value || '').trim();
|
||||||
@@ -47,6 +54,57 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// null → user has not customized; caller should fall back to server defaults
|
||||||
|
function getProviders() {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(PROVIDER_KEY);
|
||||||
|
if (!raw) return null;
|
||||||
|
const parsed = JSON.parse(raw);
|
||||||
|
return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : null;
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setProviders(map) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(PROVIDER_KEY, JSON.stringify(map));
|
||||||
|
} catch (e) {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearProviders() {
|
||||||
|
try {
|
||||||
|
localStorage.removeItem(PROVIDER_KEY);
|
||||||
|
} catch (e) {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Merge the server's provider lists with the user's toggles.
|
||||||
|
// Returns the enabled provider names, in the server's `all` order.
|
||||||
|
function enabledProviders(allNames, serverEnabled) {
|
||||||
|
const all = Array.isArray(allNames) ? allNames : [];
|
||||||
|
const overrides = getProviders();
|
||||||
|
if (!overrides) {
|
||||||
|
const base = Array.isArray(serverEnabled) && serverEnabled.length ? serverEnabled : all;
|
||||||
|
return all.filter((n) => base.includes(n));
|
||||||
|
}
|
||||||
|
return all.filter((n) => overrides[n] !== false);
|
||||||
|
}
|
||||||
|
|
||||||
window.SR = window.SR || {};
|
window.SR = window.SR || {};
|
||||||
SR.config = { DEFAULT_BASE, STORAGE_KEY, getBase, setBase, clearBase };
|
SR.config = {
|
||||||
|
DEFAULT_BASE,
|
||||||
|
STORAGE_KEY,
|
||||||
|
PROVIDER_KEY,
|
||||||
|
getBase,
|
||||||
|
setBase,
|
||||||
|
clearBase,
|
||||||
|
getProviders,
|
||||||
|
setProviders,
|
||||||
|
clearProviders,
|
||||||
|
enabledProviders,
|
||||||
|
};
|
||||||
})();
|
})();
|
||||||
|
|||||||
+1
-25
@@ -1,37 +1,13 @@
|
|||||||
/*
|
/*
|
||||||
HOME — hero with search + continue-watching row + trending rows.
|
HOME — continue-watching row + trending rows.
|
||||||
*/
|
*/
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// quick-search chips in the hero — edit freely
|
|
||||||
const QUICK_SEARCHES = ['Action', 'Comedy', 'Sci-Fi', 'Drama', 'Horror', 'Animation', 'Crime'];
|
|
||||||
|
|
||||||
SR.app.initChrome();
|
SR.app.initChrome();
|
||||||
|
|
||||||
const sections = document.getElementById('sections');
|
const sections = document.getElementById('sections');
|
||||||
|
|
||||||
const form = document.getElementById('heroForm');
|
|
||||||
const input = document.getElementById('heroInput');
|
|
||||||
if (form && input) {
|
|
||||||
form.addEventListener('submit', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const q = input.value.trim();
|
|
||||||
location.href = q ? `search.html?q=${encodeURIComponent(q)}` : 'search.html';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const chips = document.getElementById('heroChips');
|
|
||||||
if (chips) {
|
|
||||||
for (const term of QUICK_SEARCHES) {
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.className = 'chip';
|
|
||||||
a.href = `search.html?q=${encodeURIComponent(term)}`;
|
|
||||||
a.textContent = term;
|
|
||||||
chips.appendChild(a);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const cont = SR.cards.continueRow();
|
const cont = SR.cards.continueRow();
|
||||||
if (cont) sections.appendChild(cont);
|
if (cont) sections.appendChild(cont);
|
||||||
|
|
||||||
|
|||||||
+5
-3
@@ -89,7 +89,9 @@
|
|||||||
|
|
||||||
function load(stream, opts = {}) {
|
function load(stream, opts = {}) {
|
||||||
const st = capture();
|
const st = capture();
|
||||||
if (typeof opts.resumeAt === 'number' && opts.resumeAt > 10) st.time = opts.resumeAt;
|
const explicitResume = typeof opts.resumeAt === 'number' && opts.resumeAt > 10;
|
||||||
|
if (typeof opts.resumeAt === 'number') st.time = Math.max(0, opts.resumeAt);
|
||||||
|
const readyAt = () => (explicitResume ? st.time : 0);
|
||||||
|
|
||||||
teardown();
|
teardown();
|
||||||
networkRetry = false;
|
networkRetry = false;
|
||||||
@@ -126,7 +128,7 @@
|
|||||||
h.attachMedia(video);
|
h.attachMedia(video);
|
||||||
h.on(Hls.Events.MANIFEST_PARSED, guarded(() => {
|
h.on(Hls.Events.MANIFEST_PARSED, guarded(() => {
|
||||||
restore(st);
|
restore(st);
|
||||||
onReady(st.time > 10 ? st.time : 0);
|
onReady(readyAt());
|
||||||
}));
|
}));
|
||||||
h.on(Hls.Events.ERROR, (evt, data) => {
|
h.on(Hls.Events.ERROR, (evt, data) => {
|
||||||
if (myToken !== token || !data.fatal) return;
|
if (myToken !== token || !data.fatal) return;
|
||||||
@@ -155,7 +157,7 @@
|
|||||||
'loadedmetadata',
|
'loadedmetadata',
|
||||||
guarded(() => {
|
guarded(() => {
|
||||||
restore(st);
|
restore(st);
|
||||||
onReady(st.time > 10 ? st.time : 0);
|
onReady(readyAt());
|
||||||
}),
|
}),
|
||||||
{ once: true }
|
{ once: true }
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -0,0 +1,154 @@
|
|||||||
|
/*
|
||||||
|
SETTINGS — source provider toggles, API server base URL, local data.
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
SR.app.initChrome();
|
||||||
|
|
||||||
|
const providerList = document.getElementById('providerList');
|
||||||
|
const providersStatus = document.getElementById('providersStatus');
|
||||||
|
const apiBaseInput = document.getElementById('apiBaseInput');
|
||||||
|
const connStatus = document.getElementById('connStatus');
|
||||||
|
const dataStatus = document.getElementById('dataStatus');
|
||||||
|
|
||||||
|
/* ---- nav --------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
const navlinks = Array.from(document.querySelectorAll('.settings__navlink'));
|
||||||
|
navlinks.forEach((link) => {
|
||||||
|
link.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(link.getAttribute('href'));
|
||||||
|
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
navlinks.forEach((l) => l.classList.toggle('is-active', l === link));
|
||||||
|
history.replaceState(null, '', link.getAttribute('href'));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---- sources ------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
let allProviders = [];
|
||||||
|
let serverEnabled = [];
|
||||||
|
const boxes = new Map(); // provider name -> checkbox
|
||||||
|
|
||||||
|
function setStatus(el, message, kind) {
|
||||||
|
el.textContent = message || '';
|
||||||
|
el.className =
|
||||||
|
kind === 'ok' ? 'settings__status settings__status--ok'
|
||||||
|
: kind === 'err' ? 'settings__status settings__status--err'
|
||||||
|
: 'settings__status';
|
||||||
|
}
|
||||||
|
|
||||||
|
function currentMap() {
|
||||||
|
const map = {};
|
||||||
|
for (const [name, box] of boxes) map[name] = box.checked;
|
||||||
|
return map;
|
||||||
|
}
|
||||||
|
|
||||||
|
function persist(map, message) {
|
||||||
|
SR.config.setProviders(map);
|
||||||
|
if (message) setStatus(providersStatus, message);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderProviders() {
|
||||||
|
providerList.replaceChildren();
|
||||||
|
boxes.clear();
|
||||||
|
const overrides = SR.config.getProviders();
|
||||||
|
for (const name of allProviders) {
|
||||||
|
const checked = overrides ? overrides[name] !== false : serverEnabled.includes(name);
|
||||||
|
const label = document.createElement('label');
|
||||||
|
label.className = 'provider';
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.type = 'checkbox';
|
||||||
|
input.checked = !!checked;
|
||||||
|
const nameEl = document.createElement('span');
|
||||||
|
nameEl.className = 'provider__name';
|
||||||
|
nameEl.textContent = name;
|
||||||
|
label.append(input, nameEl);
|
||||||
|
input.addEventListener('change', () =>
|
||||||
|
persist(currentMap(), input.checked ? `${name} enabled` : `${name} disabled`));
|
||||||
|
boxes.set(name, input);
|
||||||
|
providerList.appendChild(label);
|
||||||
|
}
|
||||||
|
const on = boxes.size ? Array.from(boxes.values()).filter((b) => b.checked).length : 0;
|
||||||
|
const source = overrides ? 'your selection' : 'server defaults';
|
||||||
|
let host;
|
||||||
|
try { host = new URL(SR.config.getBase()).host; } catch (e) { host = SR.config.getBase(); }
|
||||||
|
setStatus(providersStatus, `${on} of ${allProviders.length} enabled — ${source} · ${host}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetProviders(message) {
|
||||||
|
SR.config.clearProviders();
|
||||||
|
renderProviders();
|
||||||
|
if (message) setStatus(providersStatus, message);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('allOn').addEventListener('click', () => {
|
||||||
|
if (!boxes.size) return;
|
||||||
|
for (const box of boxes.values()) box.checked = true;
|
||||||
|
persist(currentMap(), 'All sources enabled');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('allOff').addEventListener('click', () => {
|
||||||
|
if (!boxes.size) return;
|
||||||
|
for (const box of boxes.values()) box.checked = false;
|
||||||
|
persist(currentMap(), 'All sources disabled');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('providersReset').addEventListener('click', () =>
|
||||||
|
resetProviders('Using server defaults'));
|
||||||
|
|
||||||
|
async function initSources() {
|
||||||
|
try {
|
||||||
|
const data = await SR.api.providers();
|
||||||
|
allProviders = data.all || [];
|
||||||
|
serverEnabled = data.enabled || [];
|
||||||
|
renderProviders();
|
||||||
|
} catch (e) {
|
||||||
|
setStatus(providersStatus, `Could not load the provider list: ${e.message}`, 'err');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- server ----------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
apiBaseInput.value = SR.config.getBase();
|
||||||
|
|
||||||
|
async function testConnection() {
|
||||||
|
try {
|
||||||
|
const data = await SR.api.providers();
|
||||||
|
setStatus(connStatus, `Connected — ${data.all ? data.all.length : 0} provider(s) known.`, 'ok');
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
setStatus(connStatus, `Not reachable: ${e.message}`, 'err');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('apiBaseSave').addEventListener('click', async () => {
|
||||||
|
SR.config.setBase(apiBaseInput.value);
|
||||||
|
apiBaseInput.value = SR.config.getBase();
|
||||||
|
SR.app.initChrome(); // refresh the footer label
|
||||||
|
if (await testConnection()) SR.app.toast('API base URL saved');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('apiBaseReset').addEventListener('click', async () => {
|
||||||
|
SR.config.clearBase();
|
||||||
|
apiBaseInput.value = SR.config.getBase();
|
||||||
|
SR.app.initChrome();
|
||||||
|
await testConnection();
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---- data ---------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
document.getElementById('clearHistory').addEventListener('click', () => {
|
||||||
|
SR.storage.clear();
|
||||||
|
setStatus(dataStatus, 'Continue-watching history cleared.');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('resetProviders').addEventListener('click', () => {
|
||||||
|
resetProviders('');
|
||||||
|
setStatus(dataStatus, 'Source toggles reset to server defaults.');
|
||||||
|
});
|
||||||
|
|
||||||
|
initSources();
|
||||||
|
})();
|
||||||
+5
-1
@@ -68,6 +68,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
writeAll({});
|
||||||
|
}
|
||||||
|
|
||||||
function list() {
|
function list() {
|
||||||
return Object.values(readAll());
|
return Object.values(readAll());
|
||||||
}
|
}
|
||||||
@@ -83,5 +87,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
window.SR = window.SR || {};
|
window.SR = window.SR || {};
|
||||||
SR.storage = { KEY, keyFor, get, save, remove, list, latestPerShow };
|
SR.storage = { KEY, keyFor, get, save, remove, clear, list, latestPerShow };
|
||||||
})();
|
})();
|
||||||
|
|||||||
+316
-16
@@ -24,8 +24,22 @@
|
|||||||
const sourceLabel = document.getElementById('sourceLabel');
|
const sourceLabel = document.getElementById('sourceLabel');
|
||||||
const resumeNote = document.getElementById('resumeNote');
|
const resumeNote = document.getElementById('resumeNote');
|
||||||
const sourcesPanel = document.getElementById('sourcesPanel');
|
const sourcesPanel = document.getElementById('sourcesPanel');
|
||||||
const changeSourceBtn = document.getElementById('changeSourceBtn');
|
const sourcesClose = document.getElementById('sourcesClose');
|
||||||
const episodeSection = document.getElementById('episodes');
|
const episodeSection = document.getElementById('episodes');
|
||||||
|
|
||||||
|
// custom player controls
|
||||||
|
const playerWrap = document.getElementById('playerWrap');
|
||||||
|
const bigPlay = document.getElementById('bigPlay');
|
||||||
|
const pcSeek = document.getElementById('pcSeek');
|
||||||
|
const pcPlay = document.getElementById('pcPlay');
|
||||||
|
const pcMute = document.getElementById('pcMute');
|
||||||
|
const pcVol = document.getElementById('pcVol');
|
||||||
|
const pcTime = document.getElementById('pcTime');
|
||||||
|
const pcCc = document.getElementById('pcCc');
|
||||||
|
const pcQuality = document.getElementById('pcQuality');
|
||||||
|
const pcGear = document.getElementById('pcGear');
|
||||||
|
const pcPip = document.getElementById('pcPip');
|
||||||
|
const pcFull = document.getElementById('pcFull');
|
||||||
const seasonSelect = document.getElementById('seasonSelect');
|
const seasonSelect = document.getElementById('seasonSelect');
|
||||||
const episodeGrid = document.getElementById('episodeGrid');
|
const episodeGrid = document.getElementById('episodeGrid');
|
||||||
const prevBtn = document.getElementById('prevEpisode');
|
const prevBtn = document.getElementById('prevEpisode');
|
||||||
@@ -39,12 +53,20 @@
|
|||||||
sourceIndex: -1,
|
sourceIndex: -1,
|
||||||
season: null,
|
season: null,
|
||||||
episode: null,
|
episode: null,
|
||||||
|
loadedKey: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
/* ---- status overlay ------------------------------------------------------ */
|
/* ---- status overlay ------------------------------------------------------ */
|
||||||
|
|
||||||
|
function closeSources() {
|
||||||
|
sourcesPanel.hidden = true;
|
||||||
|
pcGear.classList.remove('is-on');
|
||||||
|
}
|
||||||
|
|
||||||
function showStatus(msg, isError) {
|
function showStatus(msg, isError) {
|
||||||
|
closeSources();
|
||||||
statusEl.hidden = false;
|
statusEl.hidden = false;
|
||||||
|
playerWrap.classList.remove('player-wrap--controls', 'player-wrap--paused');
|
||||||
statusEl.innerHTML = isError
|
statusEl.innerHTML = isError
|
||||||
? `<h3>Playback problem</h3><p>${SR.util.escapeHtml(msg)}</p>`
|
? `<h3>Playback problem</h3><p>${SR.util.escapeHtml(msg)}</p>`
|
||||||
: `<div class="spinner"></div><p>${SR.util.escapeHtml(msg)}</p>`;
|
: `<div class="spinner"></div><p>${SR.util.escapeHtml(msg)}</p>`;
|
||||||
@@ -52,6 +74,7 @@
|
|||||||
|
|
||||||
function hideStatus() {
|
function hideStatus() {
|
||||||
statusEl.hidden = true;
|
statusEl.hidden = true;
|
||||||
|
syncPaused();
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- player --------------------------------------------------------------- */
|
/* ---- player --------------------------------------------------------------- */
|
||||||
@@ -68,6 +91,244 @@
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* ---- custom player controls -------------------------------------------------- */
|
||||||
|
|
||||||
|
const ICON_PLAY =
|
||||||
|
'<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>';
|
||||||
|
const ICON_PAUSE =
|
||||||
|
'<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 4h4v16H6zm8 0h4v16h-4z"></path></svg>';
|
||||||
|
const ICON_VOL =
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>';
|
||||||
|
const ICON_VOL_X =
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>';
|
||||||
|
|
||||||
|
let hideTimer = null;
|
||||||
|
let scrubbing = false;
|
||||||
|
|
||||||
|
function paintProgress(el, ratio) {
|
||||||
|
const pct = Math.max(0, Math.min(1, ratio)) * 100;
|
||||||
|
el.style.setProperty('--pc-progress', pct + '%');
|
||||||
|
}
|
||||||
|
|
||||||
|
function timeLabel() {
|
||||||
|
const d = video.duration;
|
||||||
|
const ds = d && isFinite(d) ? SR.util.formatSeconds(d) : '0:00';
|
||||||
|
return `${SR.util.formatSeconds(video.currentTime)} / ${ds}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncPlayIcon() {
|
||||||
|
const playing = !video.paused && !video.ended;
|
||||||
|
pcPlay.innerHTML = playing ? ICON_PAUSE : ICON_PLAY;
|
||||||
|
pcPlay.setAttribute('aria-label', playing ? 'Pause' : 'Play');
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncVolIcon() {
|
||||||
|
const muted = video.muted || video.volume === 0;
|
||||||
|
pcMute.innerHTML = muted ? ICON_VOL_X : ICON_VOL;
|
||||||
|
pcMute.setAttribute('aria-label', muted ? 'Unmute' : 'Mute');
|
||||||
|
pcMute.classList.toggle('is-on', muted);
|
||||||
|
pcVol.value = String(video.muted ? 0 : video.volume);
|
||||||
|
paintProgress(pcVol, video.muted ? 0 : video.volume);
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncTimeUI() {
|
||||||
|
if (scrubbing) return;
|
||||||
|
const d = video.duration;
|
||||||
|
if (d && isFinite(d) && d > 0) {
|
||||||
|
pcSeek.value = String(Math.round((video.currentTime / d) * 1000));
|
||||||
|
paintProgress(pcSeek, video.currentTime / d);
|
||||||
|
}
|
||||||
|
pcTime.textContent = timeLabel();
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncPaused() {
|
||||||
|
playerWrap.classList.toggle('player-wrap--paused', video.paused);
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePlay() {
|
||||||
|
if (!video.src && !video.currentSrc) return;
|
||||||
|
if (video.paused || video.ended) {
|
||||||
|
video.play().catch(() => {});
|
||||||
|
} else {
|
||||||
|
video.pause();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showControls() {
|
||||||
|
playerWrap.classList.add('player-wrap--controls');
|
||||||
|
clearTimeout(hideTimer);
|
||||||
|
hideTimer = setTimeout(() => {
|
||||||
|
if (!video.paused && !video.ended && !scrubbing && sourcesPanel.hidden) {
|
||||||
|
playerWrap.classList.remove('player-wrap--controls');
|
||||||
|
}
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleFullscreen() {
|
||||||
|
const el = playerWrap;
|
||||||
|
const doc = document;
|
||||||
|
if (doc.fullscreenElement || doc.webkitFullscreenElement) {
|
||||||
|
(doc.exitFullscreen || doc.webkitExitFullscreen).call(doc);
|
||||||
|
} else {
|
||||||
|
(el.requestFullscreen || el.webkitRequestFullscreen).call(el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePip() {
|
||||||
|
if (!document.pictureInPictureEnabled) {
|
||||||
|
SR.app.toast('Picture-in-picture is not supported in this browser', true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (document.pictureInPictureElement) {
|
||||||
|
document.exitPictureInPicture().catch(() => {});
|
||||||
|
} else {
|
||||||
|
video.requestPictureInPicture().catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleCc() {
|
||||||
|
const tracks = video.textTracks;
|
||||||
|
let target = null;
|
||||||
|
for (let i = 0; i < tracks.length; i++) {
|
||||||
|
if (tracks[i].kind === 'subtitles') {
|
||||||
|
target = tracks[i];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!target) {
|
||||||
|
SR.app.toast('This source has no subtitles', true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
target.mode = target.mode === 'showing' ? 'hidden' : 'showing';
|
||||||
|
pcCc.classList.toggle('is-on', target.mode === 'showing');
|
||||||
|
pcCc.setAttribute('aria-pressed', String(target.mode === 'showing'));
|
||||||
|
}
|
||||||
|
|
||||||
|
// video events
|
||||||
|
video.addEventListener('click', () => {
|
||||||
|
if (!sourcesPanel.hidden) {
|
||||||
|
closeSources();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
togglePlay();
|
||||||
|
});
|
||||||
|
video.addEventListener('dblclick', toggleFullscreen);
|
||||||
|
video.addEventListener('play', () => {
|
||||||
|
syncPlayIcon();
|
||||||
|
syncPaused();
|
||||||
|
showControls();
|
||||||
|
});
|
||||||
|
video.addEventListener('pause', () => {
|
||||||
|
syncPlayIcon();
|
||||||
|
syncPaused();
|
||||||
|
showControls();
|
||||||
|
});
|
||||||
|
video.addEventListener('loadedmetadata', () => {
|
||||||
|
syncPlayIcon();
|
||||||
|
syncPaused();
|
||||||
|
syncTimeUI();
|
||||||
|
});
|
||||||
|
video.addEventListener('timeupdate', syncTimeUI);
|
||||||
|
video.addEventListener('volumechange', syncVolIcon);
|
||||||
|
|
||||||
|
// buttons
|
||||||
|
bigPlay.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
togglePlay();
|
||||||
|
});
|
||||||
|
pcPlay.addEventListener('click', togglePlay);
|
||||||
|
pcMute.addEventListener('click', () => {
|
||||||
|
video.muted = !video.muted;
|
||||||
|
});
|
||||||
|
pcCc.addEventListener('click', toggleCc);
|
||||||
|
pcGear.addEventListener('click', () => {
|
||||||
|
if (sourcesPanel.hidden) {
|
||||||
|
sourcesPanel.hidden = false;
|
||||||
|
pcGear.classList.add('is-on');
|
||||||
|
showControls();
|
||||||
|
} else {
|
||||||
|
closeSources();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
sourcesClose.addEventListener('click', closeSources);
|
||||||
|
pcPip.addEventListener('click', togglePip);
|
||||||
|
pcFull.addEventListener('click', toggleFullscreen);
|
||||||
|
|
||||||
|
// seek + volume scrubbing
|
||||||
|
pcSeek.addEventListener('pointerdown', () => {
|
||||||
|
scrubbing = true;
|
||||||
|
showControls();
|
||||||
|
});
|
||||||
|
pcSeek.addEventListener('input', () => {
|
||||||
|
const d = video.duration;
|
||||||
|
if (d && isFinite(d) && d > 0) {
|
||||||
|
paintProgress(pcSeek, pcSeek.value / 1000);
|
||||||
|
pcTime.textContent = `${SR.util.formatSeconds((pcSeek.value / 1000) * d)} / ${SR.util.formatSeconds(d)}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
pcSeek.addEventListener('change', () => {
|
||||||
|
const d = video.duration;
|
||||||
|
if (d && isFinite(d) && d > 0) {
|
||||||
|
video.currentTime = (pcSeek.value / 1000) * d;
|
||||||
|
}
|
||||||
|
scrubbing = false;
|
||||||
|
syncTimeUI();
|
||||||
|
});
|
||||||
|
pcVol.addEventListener('input', () => {
|
||||||
|
video.volume = Number(pcVol.value);
|
||||||
|
video.muted = video.volume === 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// reveal controls on hover/interaction
|
||||||
|
playerWrap.addEventListener('pointermove', showControls);
|
||||||
|
playerWrap.addEventListener('pointerdown', showControls);
|
||||||
|
|
||||||
|
// keyboard shortcuts
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
const tag = (e.target.tagName || '').toLowerCase();
|
||||||
|
if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
|
||||||
|
const d = video.duration;
|
||||||
|
switch (e.key) {
|
||||||
|
case ' ':
|
||||||
|
case 'k':
|
||||||
|
e.preventDefault();
|
||||||
|
togglePlay();
|
||||||
|
break;
|
||||||
|
case 'ArrowRight':
|
||||||
|
if (d && isFinite(d)) video.currentTime = Math.min(d, video.currentTime + 10);
|
||||||
|
break;
|
||||||
|
case 'ArrowLeft':
|
||||||
|
if (d && isFinite(d)) video.currentTime = Math.max(0, video.currentTime - 10);
|
||||||
|
break;
|
||||||
|
case 'ArrowUp':
|
||||||
|
e.preventDefault();
|
||||||
|
video.volume = Math.min(1, video.volume + 0.05);
|
||||||
|
video.muted = false;
|
||||||
|
break;
|
||||||
|
case 'ArrowDown':
|
||||||
|
e.preventDefault();
|
||||||
|
video.volume = Math.max(0, video.volume - 0.05);
|
||||||
|
break;
|
||||||
|
case 'm':
|
||||||
|
video.muted = !video.muted;
|
||||||
|
break;
|
||||||
|
case 'f':
|
||||||
|
toggleFullscreen();
|
||||||
|
break;
|
||||||
|
case 'c':
|
||||||
|
toggleCc();
|
||||||
|
break;
|
||||||
|
case 'Escape':
|
||||||
|
if (!sourcesPanel.hidden) closeSources();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (video.src || video.currentSrc) showControls();
|
||||||
|
});
|
||||||
|
|
||||||
|
// initial icon state
|
||||||
|
syncPlayIcon();
|
||||||
|
syncVolIcon();
|
||||||
|
|
||||||
/* ---- hero ------------------------------------------------------------------ */
|
/* ---- hero ------------------------------------------------------------------ */
|
||||||
|
|
||||||
function renderHero(d) {
|
function renderHero(d) {
|
||||||
@@ -119,15 +380,28 @@
|
|||||||
return SR.storage.keyFor({ type, tmdbId: Number(id), season: state.season, episode: state.episode });
|
return SR.storage.keyFor({ type, tmdbId: Number(id), season: state.season, episode: state.episode });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let providerNames = null; // cached per page load; null → ask server again
|
||||||
|
|
||||||
|
async function getProviderNames() {
|
||||||
|
if (providerNames) return providerNames;
|
||||||
|
try {
|
||||||
|
const data = await SR.api.providers();
|
||||||
|
providerNames = SR.config.enabledProviders(data.all || [], data.enabled || []);
|
||||||
|
} catch (e) {
|
||||||
|
providerNames = null; // unreachable → let /streams use server defaults
|
||||||
|
}
|
||||||
|
return providerNames;
|
||||||
|
}
|
||||||
|
|
||||||
async function loadStreams() {
|
async function loadStreams() {
|
||||||
const query = { tmdb: id, type };
|
const query = { tmdb: id, type, providers: await getProviderNames() };
|
||||||
if (type === 'tv') {
|
if (type === 'tv') {
|
||||||
if (state.season == null || state.episode == null) return;
|
if (state.season == null || state.episode == null) return;
|
||||||
query.season = state.season;
|
query.season = state.season;
|
||||||
query.episode = state.episode;
|
query.episode = state.episode;
|
||||||
}
|
}
|
||||||
sourcesPanel.hidden = true;
|
closeSources();
|
||||||
changeSourceBtn.textContent = 'Change source';
|
pcQuality.textContent = '';
|
||||||
showStatus('Finding streams…');
|
showStatus('Finding streams…');
|
||||||
sourceLabel.textContent = '';
|
sourceLabel.textContent = '';
|
||||||
resumeNote.textContent = '';
|
resumeNote.textContent = '';
|
||||||
@@ -135,7 +409,7 @@
|
|||||||
const data = await SR.api.streams(query);
|
const data = await SR.api.streams(query);
|
||||||
state.streams = data.streams || [];
|
state.streams = data.streams || [];
|
||||||
renderSources();
|
renderSources();
|
||||||
changeSourceBtn.hidden = state.streams.length === 0;
|
pcGear.hidden = state.streams.length === 0;
|
||||||
if (state.streams.length) playSource(0);
|
if (state.streams.length) playSource(0);
|
||||||
else showStatus('No streams found for this title.', true);
|
else showStatus('No streams found for this title.', true);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -144,21 +418,42 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Sort the popup by provider: provider name is the primary key (A→Z),
|
||||||
|
// original rank is the tie-breaker so order inside a provider is stable.
|
||||||
|
function sortedStreams() {
|
||||||
|
return state.streams
|
||||||
|
.map((s, i) => ({ s, i }))
|
||||||
|
.sort((a, b) => {
|
||||||
|
const pa = String(a.s.provider || '').toLowerCase();
|
||||||
|
const pb = String(b.s.provider || '').toLowerCase();
|
||||||
|
if (pa !== pb) return pa < pb ? -1 : 1;
|
||||||
|
return a.i - b.i;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function renderSources() {
|
function renderSources() {
|
||||||
const list = document.getElementById('sourceList');
|
const list = document.getElementById('sourceList');
|
||||||
list.replaceChildren();
|
list.replaceChildren();
|
||||||
state.streams.forEach((s, i) => {
|
let lastProvider = null;
|
||||||
|
for (const { s, i } of sortedStreams()) {
|
||||||
|
if (s.provider !== lastProvider) {
|
||||||
|
lastProvider = s.provider;
|
||||||
|
const h = document.createElement('div');
|
||||||
|
h.className = 'player-sources__group';
|
||||||
|
h.textContent = s.provider || 'Other';
|
||||||
|
list.appendChild(h);
|
||||||
|
}
|
||||||
const b = document.createElement('button');
|
const b = document.createElement('button');
|
||||||
b.type = 'button';
|
b.type = 'button';
|
||||||
b.className = i === state.sourceIndex ? 'source-item source-item--active' : 'source-item';
|
b.className = i === state.sourceIndex ? 'source-item source-item--active' : 'source-item';
|
||||||
const meta = [s.provider, s.quality, s.audio].filter(Boolean).join(' · ');
|
const meta = [s.quality, s.audio].filter(Boolean).join(' · ');
|
||||||
b.innerHTML = `
|
b.innerHTML = `
|
||||||
<span class="source-item__rank">${i + 1}</span>
|
<span class="source-item__rank">${i + 1}</span>
|
||||||
<span class="source-item__name">${SR.util.escapeHtml(s.name)}</span>
|
<span class="source-item__name">${SR.util.escapeHtml(s.name)}</span>
|
||||||
<span class="source-item__meta">${SR.util.escapeHtml(meta)}</span>`;
|
${meta ? `<span class="source-item__meta">${SR.util.escapeHtml(meta)}</span>` : ''}`;
|
||||||
b.addEventListener('click', () => playSource(i));
|
b.addEventListener('click', () => playSource(i));
|
||||||
list.appendChild(b);
|
list.appendChild(b);
|
||||||
});
|
}
|
||||||
document.getElementById('sourcesCount').textContent =
|
document.getElementById('sourcesCount').textContent =
|
||||||
`${state.streams.length} source${state.streams.length === 1 ? '' : 's'}`;
|
`${state.streams.length} source${state.streams.length === 1 ? '' : 's'}`;
|
||||||
}
|
}
|
||||||
@@ -166,18 +461,23 @@
|
|||||||
function playSource(i) {
|
function playSource(i) {
|
||||||
const s = state.streams[i];
|
const s = state.streams[i];
|
||||||
if (!s) return;
|
if (!s) return;
|
||||||
|
const key = keyFor();
|
||||||
|
// Same episode as the one currently loaded → source switch: carry the
|
||||||
|
// playhead over (resumeAt: null). A different episode → fresh resume:
|
||||||
|
// pick up its own saved record, or start from the top.
|
||||||
|
const resumeAt = state.loadedKey === key ? null : (() => {
|
||||||
|
const rec = SR.storage.get(key);
|
||||||
|
return rec && rec.t > 10 ? rec.t : 0;
|
||||||
|
})();
|
||||||
state.sourceIndex = i;
|
state.sourceIndex = i;
|
||||||
|
state.loadedKey = key;
|
||||||
|
closeSources();
|
||||||
renderSources();
|
renderSources();
|
||||||
sourceLabel.textContent = `${s.name} — ${[s.quality, s.provider].filter(Boolean).join(', ')}`;
|
sourceLabel.textContent = `${s.name} — ${[s.quality, s.provider].filter(Boolean).join(', ')}`;
|
||||||
const rec = SR.storage.get(keyFor());
|
pcQuality.textContent = s.quality || '';
|
||||||
player.load(s, { resumeAt: rec && rec.t > 10 ? rec.t : null });
|
player.load(s, { resumeAt });
|
||||||
}
|
}
|
||||||
|
|
||||||
changeSourceBtn.addEventListener('click', () => {
|
|
||||||
sourcesPanel.hidden = !sourcesPanel;
|
|
||||||
changeSourceBtn.textContent = sourcesPanel.hidden ? 'Change source' : 'Hide sources';
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ---- resume persistence ---------------------------------------------------------- */
|
/* ---- resume persistence ---------------------------------------------------------- */
|
||||||
|
|
||||||
let lastPersist = 0;
|
let lastPersist = 0;
|
||||||
|
|||||||
+12
-27
@@ -13,10 +13,18 @@
|
|||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="container site-header__inner">
|
<div class="container site-header__inner">
|
||||||
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
||||||
<a class="site-header__nav" href="index.html">Home</a>
|
<nav class="site-header__nav" aria-label="Primary">
|
||||||
<a class="site-header__nav" href="search.html">Search</a>
|
<a href="index.html">Home</a>
|
||||||
<span class="site-header__spacer"></span>
|
<a href="search.html" class="is-active" aria-current="page">Search</a>
|
||||||
<button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
|
</nav>
|
||||||
|
<div class="site-header__actions">
|
||||||
|
<a class="icon-btn is-active" href="search.html" aria-label="Search" title="Search">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||||
|
</a>
|
||||||
|
<a class="icon-btn" href="settings.html" aria-label="Settings" title="Settings">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -42,29 +50,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<div class="modal-overlay" id="settingsModal" hidden>
|
|
||||||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
|
|
||||||
<div class="modal__head">
|
|
||||||
<h2 class="modal__title" id="settingsTitle">Settings</h2>
|
|
||||||
<button class="btn btn--ghost btn--sm" id="settingsClose" type="button">Close</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal__body">
|
|
||||||
<div>
|
|
||||||
<label class="field-label" for="apiBaseInput">API base URL</label>
|
|
||||||
<input class="field" id="apiBaseInput" type="url" placeholder="https://…">
|
|
||||||
<p class="modal__hint">
|
|
||||||
All requests go to this API. You can also override it for one session
|
|
||||||
by adding <code>?api=https://…</code> to any page URL.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal__actions">
|
|
||||||
<button class="btn" id="apiBaseReset" type="button">Reset to default</button>
|
|
||||||
<button class="btn btn--primary" id="apiBaseSave" type="button">Save</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="js/util.js"></script>
|
<script src="js/util.js"></script>
|
||||||
<script src="js/config.js"></script>
|
<script src="js/config.js"></script>
|
||||||
<script src="js/api.js"></script>
|
<script src="js/api.js"></script>
|
||||||
|
|||||||
@@ -0,0 +1,92 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>bug.tv — settings</title>
|
||||||
|
<link rel="stylesheet" href="css/tokens.css">
|
||||||
|
<link rel="stylesheet" href="css/base.css">
|
||||||
|
<link rel="stylesheet" href="css/components.css">
|
||||||
|
<link rel="stylesheet" href="css/pages.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container site-header__inner">
|
||||||
|
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
||||||
|
<nav class="site-header__nav" aria-label="Primary">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="search.html">Search</a>
|
||||||
|
</nav>
|
||||||
|
<div class="site-header__actions">
|
||||||
|
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||||
|
</a>
|
||||||
|
<a class="icon-btn is-active" href="settings.html" aria-label="Settings" title="Settings" aria-current="page">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="page container">
|
||||||
|
<div class="settings">
|
||||||
|
<nav class="settings__nav" aria-label="Settings sections">
|
||||||
|
<a class="settings__navlink is-active" href="#sources">Sources</a>
|
||||||
|
<a class="settings__navlink" href="#server">Server</a>
|
||||||
|
<a class="settings__navlink" href="#data">Data</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="settings__content">
|
||||||
|
<section class="settings__card" id="sources">
|
||||||
|
<h2>Sources</h2>
|
||||||
|
<p class="settings__hint">Choose which providers to search for streams. Saved in this browser; applies to new lookups.</p>
|
||||||
|
<div class="settings__actions">
|
||||||
|
<button class="btn btn--ghost" id="allOn" type="button">Enable all</button>
|
||||||
|
<button class="btn btn--ghost" id="allOff" type="button">Disable all</button>
|
||||||
|
<button class="btn btn--ghost" id="providersReset" type="button">Server defaults</button>
|
||||||
|
</div>
|
||||||
|
<p class="settings__status" id="providersStatus"></p>
|
||||||
|
<div class="provider-list" id="providerList"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="settings__card" id="server">
|
||||||
|
<h2>Server</h2>
|
||||||
|
<p class="settings__hint">The REST API that bug.tv queries. Change this only if you run your own instance.</p>
|
||||||
|
<label class="field-label" for="apiBaseInput">API base URL</label>
|
||||||
|
<input class="field" id="apiBaseInput" type="text" spellcheck="false" autocomplete="off" placeholder="https://api-tv.bug.tools">
|
||||||
|
<div class="settings__actions">
|
||||||
|
<button class="btn btn--primary" id="apiBaseSave" type="button">Save</button>
|
||||||
|
<button class="btn btn--ghost" id="apiBaseReset" type="button">Reset to default</button>
|
||||||
|
</div>
|
||||||
|
<p class="settings__status" id="connStatus"></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="settings__card" id="data">
|
||||||
|
<h2>Data</h2>
|
||||||
|
<p class="settings__hint">Everything bug.tv stores lives in this browser — no accounts, nothing on a server.</p>
|
||||||
|
<div class="settings__actions">
|
||||||
|
<button class="btn btn--ghost" id="clearHistory" type="button">Clear continue-watching</button>
|
||||||
|
<button class="btn btn--ghost" id="resetProviders" type="button">Reset source toggles</button>
|
||||||
|
</div>
|
||||||
|
<p class="settings__status" id="dataStatus"></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<span>bug.tv</span>
|
||||||
|
<span>API: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/util.js"></script>
|
||||||
|
<script src="js/config.js"></script>
|
||||||
|
<script src="js/api.js"></script>
|
||||||
|
<script src="js/storage.js"></script>
|
||||||
|
<script src="js/cards.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
<script src="js/settings.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+75
-49
@@ -13,22 +13,75 @@
|
|||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="container site-header__inner">
|
<div class="container site-header__inner">
|
||||||
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
||||||
<a class="site-header__nav" href="index.html">Home</a>
|
<nav class="site-header__nav" aria-label="Primary">
|
||||||
<a class="site-header__nav" href="search.html">Search</a>
|
<a href="index.html">Home</a>
|
||||||
<span class="site-header__spacer"></span>
|
<a href="search.html">Search</a>
|
||||||
<button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
|
</nav>
|
||||||
|
<div class="site-header__actions">
|
||||||
|
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||||
|
</a>
|
||||||
|
<a class="icon-btn" href="settings.html" aria-label="Settings" title="Settings">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="container page" id="content">
|
<main class="page" id="content">
|
||||||
<section class="watch-hero" id="hero" aria-busy="true"></section>
|
<section id="hero" class="watch-hero container"></section>
|
||||||
|
|
||||||
<section id="playerSection">
|
<section id="playerSection" class="container">
|
||||||
<div class="player-wrap">
|
<div class="player-wrap" id="playerWrap">
|
||||||
<video id="video" controls playsinline></video>
|
<video id="video" playsinline preload="metadata"></video>
|
||||||
<div class="player-status" id="playerStatus">
|
|
||||||
|
<a class="player-back" href="index.html" aria-label="Back to home" title="Back to home">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button class="player-bigplay" id="bigPlay" type="button" aria-label="Play">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="player-controls" id="playerControls">
|
||||||
|
<input class="pc-seek" id="pcSeek" type="range" min="0" max="1000" step="1" value="0" aria-label="Seek position">
|
||||||
|
<div class="player-controls__bar">
|
||||||
|
<button class="pc-btn" id="pcPlay" type="button" aria-label="Play or pause">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
|
||||||
|
</button>
|
||||||
|
<button class="pc-btn" id="pcMute" type="button" aria-label="Mute or unmute">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>
|
||||||
|
</button>
|
||||||
|
<input class="pc-vol" id="pcVol" type="range" min="0" max="1" step="0.05" value="1" aria-label="Volume">
|
||||||
|
<span class="pc-time" id="pcTime">0:00 / 0:00</span>
|
||||||
|
<span class="player-controls__spacer"></span>
|
||||||
|
<button class="pc-btn pc-btn--text" id="pcCc" type="button" aria-pressed="false" aria-label="Toggle captions">CC</button>
|
||||||
|
<span class="pc-quality" id="pcQuality"></span>
|
||||||
|
<button class="pc-btn" id="pcGear" type="button" aria-label="Source settings">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||||
|
</button>
|
||||||
|
<button class="pc-btn" id="pcPip" type="button" aria-label="Picture in picture">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="14" rx="2"></rect><rect x="12" y="9" width="7" height="5" rx="1" fill="currentColor" stroke="none"></rect></svg>
|
||||||
|
</button>
|
||||||
|
<button class="pc-btn" id="pcFull" type="button" aria-label="Toggle fullscreen">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="player-status" id="playerStatus" hidden>
|
||||||
<div class="spinner"></div>
|
<div class="spinner"></div>
|
||||||
<p>Getting ready…</p>
|
<p>Warming up…</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="player-sources" id="sourcesPanel" hidden>
|
||||||
|
<div class="player-sources__head">
|
||||||
|
<span>Sources · <span id="sourcesCount"></span></span>
|
||||||
|
<button class="player-sources__close" id="sourcesClose" type="button" aria-label="Close sources">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="player-sources__list" id="sourceList"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -36,23 +89,19 @@
|
|||||||
<span class="watch-toolbar__source" id="sourceLabel"></span>
|
<span class="watch-toolbar__source" id="sourceLabel"></span>
|
||||||
<span id="resumeNote"></span>
|
<span id="resumeNote"></span>
|
||||||
<span class="watch-toolbar__spacer"></span>
|
<span class="watch-toolbar__spacer"></span>
|
||||||
<button class="btn btn--sm" id="changeSourceBtn" type="button" hidden>Change source</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sources" id="sourcesPanel" hidden>
|
<section class="episodes" id="episodes" hidden>
|
||||||
<div class="sources__head">Sources <span id="sourcesCount"></span></div>
|
<div class="episodes__toolbar">
|
||||||
<div id="sourceList"></div>
|
<h2 class="episodes__title">Episodes</h2>
|
||||||
</div>
|
<select class="field" id="seasonSelect" aria-label="Season"></select>
|
||||||
</section>
|
<div class="chips">
|
||||||
|
<button class="chip" id="prevEpisode" type="button">← Previous</button>
|
||||||
<section class="episodes" id="episodes" hidden>
|
<button class="chip" id="nextEpisode" type="button">Next →</button>
|
||||||
<div class="episodes__toolbar">
|
</div>
|
||||||
<h2 class="episodes__title">Episodes</h2>
|
</div>
|
||||||
<select class="field" id="seasonSelect" aria-label="Season"></select>
|
<div class="episode-grid" id="episodeGrid"></div>
|
||||||
<button class="btn btn--sm" id="prevEpisode" type="button">Previous</button>
|
</section>
|
||||||
<button class="btn btn--sm" id="nextEpisode" type="button">Next</button>
|
|
||||||
</div>
|
|
||||||
<div class="episode-grid" id="episodeGrid"></div>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
@@ -63,29 +112,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<div class="modal-overlay" id="settingsModal" hidden>
|
|
||||||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
|
|
||||||
<div class="modal__head">
|
|
||||||
<h2 class="modal__title" id="settingsTitle">Settings</h2>
|
|
||||||
<button class="btn btn--ghost btn--sm" id="settingsClose" type="button">Close</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal__body">
|
|
||||||
<div>
|
|
||||||
<label class="field-label" for="apiBaseInput">API base URL</label>
|
|
||||||
<input class="field" id="apiBaseInput" type="url" placeholder="https://…">
|
|
||||||
<p class="modal__hint">
|
|
||||||
All requests go to this API. You can also override it for one session
|
|
||||||
by adding <code>?api=https://…</code> to any page URL.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal__actions">
|
|
||||||
<button class="btn" id="apiBaseReset" type="button">Reset to default</button>
|
|
||||||
<button class="btn btn--primary" id="apiBaseSave" type="button">Save</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="vendor/hls.min.js"></script>
|
<script src="vendor/hls.min.js"></script>
|
||||||
<script src="js/util.js"></script>
|
<script src="js/util.js"></script>
|
||||||
<script src="js/config.js"></script>
|
<script src="js/config.js"></script>
|
||||||
|
|||||||
Reference in New Issue
Block a user