push
This commit is contained in:
4DBug
@@ -0,0 +1,132 @@
|
||||
/*
|
||||
BASE — reset, typography, page frame (header/footer/container).
|
||||
Layout-level stuff only; reusable widgets live in components.css.
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-md);
|
||||
line-height: var(--leading-normal);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ---- page frame ---------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin: 0 auto;
|
||||
padding-left: var(--container-pad);
|
||||
padding-right: var(--container-pad);
|
||||
}
|
||||
|
||||
.page {
|
||||
padding-top: var(--space-5);
|
||||
padding-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-bg);
|
||||
background: color-mix(in srgb, var(--color-bg) 85%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.site-header__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
height: var(--header-height);
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.brand span {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.site-header__nav {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-dim);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.site-header__nav:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.site-header__spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding: var(--space-4) 0 var(--space-5);
|
||||
color: var(--color-text-faint);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.site-footer .container {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.site-footer a {
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
.site-footer a:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
@@ -0,0 +1,421 @@
|
||||
/*
|
||||
COMPONENTS — reusable widgets. Each block is self-contained and named
|
||||
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
|
||||
token exists.
|
||||
*/
|
||||
|
||||
/* ---- buttons ------------------------------------------------------------- */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-2);
|
||||
color: var(--color-text);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.3;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--color-surface-hover);
|
||||
border-color: var(--color-border-strong);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent-text);
|
||||
}
|
||||
|
||||
.btn--primary:hover {
|
||||
background: var(--color-accent-hover);
|
||||
border-color: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
.btn--ghost:hover {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn--sm {
|
||||
padding: var(--space-1) var(--space-3);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ---- form fields --------------------------------------------------------- */
|
||||
|
||||
.field {
|
||||
width: 100%;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-2);
|
||||
color: var(--color-text);
|
||||
font: inherit;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.field::placeholder {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
|
||||
}
|
||||
|
||||
select.field {
|
||||
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-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
display: block;
|
||||
margin-bottom: var(--space-1);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
/* ---- badges & tags -------------------------------------------------------- */
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px var(--space-2);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-dim);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge--accent {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 2px var(--space-2);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
/* ---- chips (filters) ------------------------------------------------------- */
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: var(--space-1) var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-full);
|
||||
background: transparent;
|
||||
color: var(--color-text-dim);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
border-color: var(--color-border-strong);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.chip--active {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ---- media cards (poster) --------------------------------------------------- */
|
||||
|
||||
.card {
|
||||
display: block;
|
||||
flex: 0 0 var(--card-width);
|
||||
width: var(--card-width);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card__poster {
|
||||
position: relative;
|
||||
aspect-ratio: var(--poster-aspect);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
transition: border-color 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.card:hover .card__poster {
|
||||
border-color: var(--color-border-strong);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card__poster img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card__poster--empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text-faint);
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
.card__title {
|
||||
margin-top: var(--space-2);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card__meta {
|
||||
margin-top: 2px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-faint);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card__progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.card__progress i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ---- rows (horizontal carousels) ------------------------------------------ */
|
||||
|
||||
.row {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.row__header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.row__title {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.row__link {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
.row__link:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.row__scroll {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
padding-bottom: var(--space-2);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-border-strong) transparent;
|
||||
}
|
||||
|
||||
.row__scroll .card {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
/* ---- results grid ---------------------------------------------------------- */
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.grid .card {
|
||||
flex: none;
|
||||
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 {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: var(--space-6);
|
||||
z-index: 110;
|
||||
transform: translateX(-50%);
|
||||
max-width: min(90vw, 480px);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-2);
|
||||
font-size: var(--text-sm);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 150ms ease, transform 150ms ease;
|
||||
}
|
||||
|
||||
.toast--show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast--error {
|
||||
border-color: var(--color-danger);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* ---- loading & empty states ------------------------------------------------- */
|
||||
|
||||
.spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 3px solid var(--color-border);
|
||||
border-top-color: var(--color-accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinner--center {
|
||||
padding: var(--space-8) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: var(--space-7) 0;
|
||||
text-align: center;
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
.empty h3 {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--color-text-dim);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
@@ -0,0 +1,447 @@
|
||||
/*
|
||||
PAGES — page-specific layout: home, search, watch.
|
||||
Widget styling lives in components.css; this file only positions
|
||||
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-bar {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.search-bar__form {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.search-bar__input {
|
||||
flex: 1;
|
||||
font-size: var(--text-md);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.search-count {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
/* ---- watch: hero ------------------------------------------------------------- */
|
||||
|
||||
.watch-hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: var(--space-5);
|
||||
align-items: flex-end;
|
||||
margin-bottom: var(--space-5);
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.watch-hero__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.watch-hero__backdrop img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.watch-hero__poster {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 0 0 180px;
|
||||
width: 180px;
|
||||
aspect-ratio: var(--poster-aspect);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
box-shadow: var(--shadow-2);
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
|
||||
.watch-hero__poster img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.watch-hero__body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.watch-hero__title {
|
||||
font-size: var(--text-3xl);
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.watch-hero__facts {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
.watch-hero__rating {
|
||||
color: var(--color-star);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.watch-hero__genres {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.watch-hero__overview {
|
||||
margin-top: var(--space-4);
|
||||
max-width: 72ch;
|
||||
color: var(--color-text-dim);
|
||||
font-size: var(--text-sm);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---- watch: player ------------------------------------------------------------- */
|
||||
|
||||
.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 {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-3);
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: var(--color-text-dim);
|
||||
font-size: var(--text-sm);
|
||||
text-align: center;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.player-status h3 {
|
||||
font-size: var(--text-md);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.player-status .spinner {
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
/* ---- watch: toolbar + sources ---------------------------------------------------- */
|
||||
|
||||
.watch-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin: var(--space-4) 0 var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
.watch-toolbar__source {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.watch-toolbar__spacer {
|
||||
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 {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--space-8) 0;
|
||||
}
|
||||
|
||||
/* ---- watch: episodes --------------------------------------------------------- */
|
||||
|
||||
.episodes {
|
||||
margin-top: var(--space-7);
|
||||
}
|
||||
|
||||
.episodes__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.episodes__title {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.episodes__toolbar select.field {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.episode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.episode {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
cursor: pointer;
|
||||
transition: border-color 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.episode:hover {
|
||||
border-color: var(--color-border-strong);
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
|
||||
.episode--current {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.episode__thumb {
|
||||
position: relative;
|
||||
flex: 0 0 108px;
|
||||
width: 108px;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
|
||||
.episode__thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.episode__play {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--text-lg);
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
opacity: 0;
|
||||
transition: opacity 120ms ease;
|
||||
}
|
||||
|
||||
.episode:hover .episode__play {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.episode--current .episode__play {
|
||||
opacity: 1;
|
||||
background: color-mix(in srgb, var(--color-accent) 35%, rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
|
||||
.episode__body {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.episode__num {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
.episode__title {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.episode__meta {
|
||||
margin-top: 2px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
/* ---- responsive ---------------------------------------------------------------- */
|
||||
|
||||
@media (max-width: 720px) {
|
||||
:root {
|
||||
--card-width: 132px;
|
||||
}
|
||||
|
||||
.watch-hero {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.watch-hero__poster {
|
||||
flex-basis: auto;
|
||||
width: 132px;
|
||||
}
|
||||
|
||||
.watch-hero__title {
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
.home-hero h1 {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.search-bar__form {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/*
|
||||
============================================================================
|
||||
DESIGN TOKENS — the only file you need to touch to restyle the whole UI.
|
||||
Every color, font size, spacing step, radius and shadow used elsewhere
|
||||
references a variable defined here. Change a value and it applies everywhere.
|
||||
============================================================================
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ---- palette (retheme here) ----------------------------------------- */
|
||||
--color-bg: #0b0d10; /* page background */
|
||||
--color-surface: #14171c; /* cards, panels */
|
||||
--color-surface-hover: #1c2129; /* hover state for surfaces */
|
||||
--color-surface-2: #191d24; /* inputs, alt surfaces */
|
||||
--color-border: #262c35; /* default borders */
|
||||
--color-border-strong: #39424f; /* visible borders / hover borders */
|
||||
--color-text: #eceff3; /* primary text */
|
||||
--color-text-dim: #98a2b0; /* secondary text */
|
||||
--color-text-faint: #5f6b7a; /* tertiary text */
|
||||
--color-accent: #4f8cff; /* brand / primary action color */
|
||||
--color-accent-hover: #6ea1ff;
|
||||
--color-accent-text: #ffffff; /* text on accent buttons */
|
||||
--color-danger: #ff6b6b;
|
||||
--color-success: #46c98f;
|
||||
--color-star: #ffc94d; /* rating stars */
|
||||
|
||||
/* ---- typography ------------------------------------------------------ */
|
||||
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-md: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.375rem;
|
||||
--text-2xl: 1.75rem;
|
||||
--text-3xl: 2.25rem;
|
||||
--leading-tight: 1.2;
|
||||
--leading-normal: 1.55;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* ---- spacing (4px scale) ---------------------------------------------- */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 24px;
|
||||
--space-6: 32px;
|
||||
--space-7: 48px;
|
||||
--space-8: 64px;
|
||||
|
||||
/* ---- shape ------------------------------------------------------------- */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--radius-full: 999px;
|
||||
--shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
--shadow-2: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* ---- layout ------------------------------------------------------------ */
|
||||
--container-max: 1280px;
|
||||
--container-pad: var(--space-5);
|
||||
--header-height: 64px;
|
||||
--poster-aspect: 2 / 3; /* 2:3 poster cards */
|
||||
--card-width: 160px; /* poster card width in carousels */
|
||||
--player-aspect: 16 / 9;
|
||||
}
|
||||
@@ -0,0 +1,438 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>bug.tv reverse demo</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
margin: 2rem;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
}
|
||||
h1 { margin-top: 0; }
|
||||
#searchForm {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#apiBase { width: 240px; }
|
||||
#searchInput { flex: 1; min-width: 220px; }
|
||||
#proxyForm { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
|
||||
#proxyForm label { display: flex; align-items: center; gap: .35rem; }
|
||||
#proxyBase { width: 320px; }
|
||||
#proxyToken { width: 200px; }
|
||||
input, select, button {
|
||||
padding: .55rem .7rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #444;
|
||||
background: #1c1c1c;
|
||||
color: #eee;
|
||||
font: inherit;
|
||||
}
|
||||
button { cursor: pointer; }
|
||||
button:hover { background: #2a2a2a; }
|
||||
#providers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: .35rem;
|
||||
max-height: 170px;
|
||||
overflow: auto;
|
||||
padding: .6rem;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#providers label { font-size: .9rem; white-space: nowrap; }
|
||||
#results button, #streams button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: .35rem 0;
|
||||
}
|
||||
.type {
|
||||
display: inline-block;
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
padding: .1rem .4rem;
|
||||
font-size: .75rem;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
.year { color: #aaa; margin-left: .4rem; }
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
background: #000;
|
||||
border-radius: 8px;
|
||||
}
|
||||
#status {
|
||||
min-height: 1.4em;
|
||||
margin: .6rem 0;
|
||||
color: #8cf;
|
||||
word-break: break-word;
|
||||
}
|
||||
#status.error { color: #f88; }
|
||||
#tvBox label { margin-right: 1rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>bug.tv reverse demo</h1>
|
||||
|
||||
<form id="searchForm">
|
||||
<input id="apiBase" type="text" value="https://bug-api-test.tuns.sh" spellcheck="false">
|
||||
<input id="searchInput" type="text" placeholder="Search movies or TV" autocomplete="off">
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
|
||||
<form id="proxyForm">
|
||||
<label>Proxy <input id="proxyBase" type="text" value="https://bug-api-test.tuns.sh" spellcheck="false"></label>
|
||||
<label>Token <input id="proxyToken" type="password" placeholder="optional" autocomplete="off"></label>
|
||||
</form>
|
||||
|
||||
<h2>Providers</h2>
|
||||
<div id="providers">loading…</div>
|
||||
|
||||
<h2>Results</h2>
|
||||
<div id="results"></div>
|
||||
|
||||
<div id="tvBox" hidden>
|
||||
<label>Season <select id="season"></select></label>
|
||||
<label>Episode <select id="episode"></select></label>
|
||||
</div>
|
||||
|
||||
<h2>Streams</h2>
|
||||
<div id="streams"></div>
|
||||
|
||||
<video id="player" controls></video>
|
||||
<div id="status"></div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
|
||||
<script>
|
||||
const searchForm = document.getElementById('searchForm');
|
||||
const apiBaseInput = document.getElementById('apiBase');
|
||||
const proxyBaseInput = document.getElementById('proxyBase');
|
||||
const proxyTokenInput = document.getElementById('proxyToken');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const providerBox = document.getElementById('providers');
|
||||
const resultsBox = document.getElementById('results');
|
||||
const tvBox = document.getElementById('tvBox');
|
||||
const seasonSelect = document.getElementById('season');
|
||||
const episodeSelect = document.getElementById('episode');
|
||||
const streamBox = document.getElementById('streams');
|
||||
const player = document.getElementById('player');
|
||||
const statusBox = document.getElementById('status');
|
||||
|
||||
let hls = null;
|
||||
let currentMedia = null;
|
||||
let lastStreamParams = null;
|
||||
|
||||
function apiBase() {
|
||||
return apiBaseInput.value.trim().replace(/\/+$/, '') || 'http://bug-api-test.tuns.sh';
|
||||
}
|
||||
|
||||
function endpointFor(base) {
|
||||
const root = (base || '').trim().replace(/\/+$/, '');
|
||||
if (!root) return '';
|
||||
return root.endsWith('/proxy/media') ? root : `${root}/proxy/media`;
|
||||
}
|
||||
|
||||
function apiProxyEndpoint() {
|
||||
return endpointFor(apiBase());
|
||||
}
|
||||
|
||||
function selectedProxyEndpoint() {
|
||||
return endpointFor(proxyBaseInput.value.trim() || apiBase());
|
||||
}
|
||||
|
||||
function proxyEndpoints() {
|
||||
const list = [selectedProxyEndpoint()].filter(Boolean);
|
||||
const api = apiProxyEndpoint();
|
||||
if (api && !list.includes(api)) list.push(api);
|
||||
return list;
|
||||
}
|
||||
|
||||
function proxyFor(targetUrl, headers, endpoint) {
|
||||
const query = new URLSearchParams({
|
||||
url: targetUrl,
|
||||
h: JSON.stringify(headers || {}),
|
||||
});
|
||||
const token = proxyTokenInput.value.trim();
|
||||
if (token) query.set('token', token);
|
||||
return `${endpoint || selectedProxyEndpoint()}?${query.toString()}`;
|
||||
}
|
||||
|
||||
function setStatus(message, isError = false) {
|
||||
statusBox.textContent = message || '';
|
||||
statusBox.classList.toggle('error', !!isError);
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '').replace(/[&<>"']/g, (c) => ({
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
}[c]));
|
||||
}
|
||||
|
||||
async function api(path) {
|
||||
const res = await fetch(apiBase() + path, { headers: { Accept: 'application/json' } });
|
||||
const text = await res.text();
|
||||
let data = null;
|
||||
try {
|
||||
data = text ? JSON.parse(text) : null;
|
||||
} catch {
|
||||
data = { error: text.slice(0, 300) };
|
||||
}
|
||||
if (!res.ok) throw new Error((data && data.error) || `HTTP ${res.status}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
function clearPlayer() {
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
hls = null;
|
||||
}
|
||||
player.querySelectorAll('track').forEach((t) => t.remove());
|
||||
player.removeAttribute('src');
|
||||
player.load();
|
||||
}
|
||||
|
||||
async function initProviders() {
|
||||
const data = await api('/providers');
|
||||
providerBox.innerHTML = '';
|
||||
for (const name of data.all) {
|
||||
const label = document.createElement('label');
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.value = name;
|
||||
checkbox.checked = data.enabled.includes(name);
|
||||
label.append(checkbox, document.createTextNode(` ${name}`));
|
||||
providerBox.append(label);
|
||||
}
|
||||
}
|
||||
|
||||
providerBox.addEventListener('change', () => {
|
||||
if (lastStreamParams) loadStreams(lastStreamParams);
|
||||
});
|
||||
|
||||
function selectedProviders() {
|
||||
return [...providerBox.querySelectorAll('input:checked')].map((i) => i.value);
|
||||
}
|
||||
|
||||
searchForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
doSearch();
|
||||
});
|
||||
|
||||
async function doSearch() {
|
||||
const q = searchInput.value.trim();
|
||||
if (!q) return;
|
||||
currentMedia = null;
|
||||
lastStreamParams = null;
|
||||
clearPlayer();
|
||||
tvBox.hidden = true;
|
||||
resultsBox.innerHTML = '';
|
||||
streamBox.innerHTML = '';
|
||||
setStatus('Searching…');
|
||||
try {
|
||||
const data = await api(`/search?q=${encodeURIComponent(q)}`);
|
||||
if (!data.results.length) {
|
||||
setStatus('No results found.');
|
||||
return;
|
||||
}
|
||||
setStatus(`${data.count} result${data.count === 1 ? '' : 's'}`);
|
||||
for (const r of data.results) {
|
||||
const btn = document.createElement('button');
|
||||
btn.innerHTML = `<span class="type">${r.type === 'tv' ? 'TV' : 'MOVIE'}</span>${escapeHtml(r.name)}<span class="year">${escapeHtml(r.year)}</span>`;
|
||||
btn.addEventListener('click', () => selectResult(r));
|
||||
resultsBox.append(btn);
|
||||
}
|
||||
} catch (e) {
|
||||
setStatus(e.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
async function selectResult(result) {
|
||||
currentMedia = result;
|
||||
lastStreamParams = null;
|
||||
clearPlayer();
|
||||
streamBox.innerHTML = '';
|
||||
if (result.type === 'movie') {
|
||||
tvBox.hidden = true;
|
||||
await loadStreams({ tmdb: result.tmdb_id, type: 'movie' });
|
||||
return;
|
||||
}
|
||||
tvBox.hidden = false;
|
||||
seasonSelect.innerHTML = '<option value="">loading…</option>';
|
||||
episodeSelect.innerHTML = '';
|
||||
try {
|
||||
const data = await api(`/tv/${result.tmdb_id}/seasons`);
|
||||
seasonSelect.innerHTML = '';
|
||||
if (!data.seasons.length) {
|
||||
setStatus('No seasons found.');
|
||||
return;
|
||||
}
|
||||
for (const s of data.seasons) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = s.season_number;
|
||||
opt.textContent = `${s.name} (${s.episode_count})`;
|
||||
seasonSelect.append(opt);
|
||||
}
|
||||
setStatus('Choose a season, then an episode.');
|
||||
} catch (e) {
|
||||
setStatus(e.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
seasonSelect.addEventListener('change', async () => {
|
||||
if (!currentMedia || !seasonSelect.value) return;
|
||||
episodeSelect.innerHTML = '<option value="">loading…</option>';
|
||||
try {
|
||||
const data = await api(`/tv/${currentMedia.tmdb_id}/seasons/${seasonSelect.value}`);
|
||||
episodeSelect.innerHTML = '';
|
||||
if (!data.episodes.length) {
|
||||
setStatus('No episodes found.');
|
||||
return;
|
||||
}
|
||||
for (const ep of data.episodes) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = ep.episode_number;
|
||||
opt.textContent = `Episode ${ep.episode_number}${ep.name ? ` — ${ep.name}` : ''}`;
|
||||
episodeSelect.append(opt);
|
||||
}
|
||||
setStatus('Choose an episode.');
|
||||
} catch (e) {
|
||||
setStatus(e.message, true);
|
||||
}
|
||||
});
|
||||
|
||||
episodeSelect.addEventListener('change', () => {
|
||||
if (!currentMedia || !episodeSelect.value) return;
|
||||
loadStreams({
|
||||
tmdb: currentMedia.tmdb_id,
|
||||
type: 'tv',
|
||||
season: seasonSelect.value,
|
||||
episode: episodeSelect.value
|
||||
});
|
||||
});
|
||||
|
||||
async function loadStreams(params) {
|
||||
const providers = selectedProviders();
|
||||
if (!providers.length) {
|
||||
setStatus('Enable at least one provider.', true);
|
||||
return;
|
||||
}
|
||||
lastStreamParams = params;
|
||||
const query = new URLSearchParams({
|
||||
tmdb: params.tmdb,
|
||||
type: params.type,
|
||||
providers: providers.join(',')
|
||||
});
|
||||
if (params.season) query.set('season', params.season);
|
||||
if (params.episode) query.set('episode', params.episode);
|
||||
setStatus('Fetching streams…');
|
||||
try {
|
||||
const data = await api(`/streams?${query.toString()}`);
|
||||
streamBox.innerHTML = '';
|
||||
if (!data.streams.length) {
|
||||
setStatus('No streams found.', true);
|
||||
return;
|
||||
}
|
||||
setStatus(`${data.matched} of ${data.total} streams`);
|
||||
data.streams.forEach((s, i) => {
|
||||
const btn = document.createElement('button');
|
||||
const quality = s.quality || (s.pixels ? `${s.pixels}p` : 'unknown');
|
||||
btn.innerHTML = `${i + 1}. [${escapeHtml(s.provider)}] ${escapeHtml(quality)}${s.audio ? ` · ${escapeHtml(s.audio)}` : ''} — ${escapeHtml(s.name)}`;
|
||||
btn.addEventListener('click', () => playStream(s).catch((e) => setStatus(e.message, true)));
|
||||
streamBox.append(btn);
|
||||
});
|
||||
} catch (e) {
|
||||
setStatus(e.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
async function playStream(stream) {
|
||||
clearPlayer();
|
||||
const url = stream.url;
|
||||
const headers = stream.headers || {};
|
||||
const isHls = /\.m3u8($|\?)/i.test(url) || stream.type === 'm3u8';
|
||||
const isDash = /\.mpd($|\?)/i.test(url) || stream.type === 'dash';
|
||||
|
||||
if (isDash) {
|
||||
setStatus('DASH streams are not supported by this demo player.', true);
|
||||
return;
|
||||
}
|
||||
|
||||
let endpoint = selectedProxyEndpoint();
|
||||
if (!endpoint) {
|
||||
setStatus('Set an API base or proxy endpoint.', true);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus('Checking stream proxy…');
|
||||
for (const candidate of proxyEndpoints()) {
|
||||
const testUrl = proxyFor(url, headers, candidate);
|
||||
try {
|
||||
const res = await fetch(testUrl, { cache: 'no-store' });
|
||||
if (res.ok) {
|
||||
endpoint = candidate;
|
||||
break;
|
||||
}
|
||||
if (res.body) res.body.cancel();
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const proxiedUrl = proxyFor(url, headers, endpoint);
|
||||
|
||||
for (const sub of stream.subtitles || []) {
|
||||
let resolved = sub.url;
|
||||
try {
|
||||
resolved = new URL(sub.url, url).toString();
|
||||
} catch {}
|
||||
const track = document.createElement('track');
|
||||
track.kind = 'subtitles';
|
||||
track.src = proxyFor(resolved, headers, endpoint);
|
||||
track.srclang = sub.language || 'en';
|
||||
track.label = sub.name || sub.language || 'Subtitles';
|
||||
player.append(track);
|
||||
}
|
||||
|
||||
if (isHls && window.Hls && Hls.isSupported()) {
|
||||
setStatus('Loading HLS stream…');
|
||||
hls = new Hls();
|
||||
hls.loadSource(proxiedUrl);
|
||||
hls.attachMedia(player);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
player.play().catch(() => {});
|
||||
});
|
||||
hls.on(Hls.Events.ERROR, (_event, data) => {
|
||||
if (data.fatal) setStatus(`HLS ${data.type} error: ${data.details}`, true);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (isHls && player.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
setStatus('Loading native HLS stream…');
|
||||
player.src = proxiedUrl;
|
||||
player.play().catch(() => {});
|
||||
return;
|
||||
}
|
||||
|
||||
if (isHls) {
|
||||
setStatus('HLS.js is unavailable and this browser does not play HLS natively.', true);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus('Playing proxied stream…');
|
||||
player.src = proxiedUrl;
|
||||
player.play().catch(() => {});
|
||||
}
|
||||
|
||||
initProviders().catch((e) => setStatus(`Failed to load providers: ${e.message}`, true));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>bug.tv — home</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>
|
||||
<a class="site-header__nav" href="index.html">Home</a>
|
||||
<a class="site-header__nav" href="search.html">Search</a>
|
||||
<span class="site-header__spacer"></span>
|
||||
<button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<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/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/home.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
async function request(path, params) {
|
||||
const url = new URL(SR.config.getBase() + path);
|
||||
if (params) {
|
||||
for (const [key, value] of Object.entries(params)) {
|
||||
if (value === undefined || value === null || value === '') continue;
|
||||
url.searchParams.set(key, String(value));
|
||||
}
|
||||
}
|
||||
let res;
|
||||
try {
|
||||
res = await fetch(url.toString());
|
||||
} catch (e) {
|
||||
throw new Error(`cannot reach the API at ${SR.config.getBase()} — check the base URL in Settings`);
|
||||
}
|
||||
let data = null;
|
||||
try {
|
||||
data = await res.json();
|
||||
} catch (e) {
|
||||
/* non-JSON body */
|
||||
}
|
||||
if (!res.ok) {
|
||||
throw new Error((data && data.error) || `API error: HTTP ${res.status}`);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
// route a media/subtitle URL through the API proxy (CORS, headers, m3u8 rewrite)
|
||||
function proxyUrl(target, headers) {
|
||||
const q = new URLSearchParams();
|
||||
q.set('url', target);
|
||||
q.set('h', JSON.stringify(headers || {}));
|
||||
return SR.config.getBase() + '/proxy/media?' + q.toString();
|
||||
}
|
||||
|
||||
window.SR = window.SR || {};
|
||||
SR.api = {
|
||||
request,
|
||||
proxyUrl,
|
||||
search: (q) => request('/search', { q }),
|
||||
trending: (type, timeWindow) => request('/trending', { type, window: timeWindow }),
|
||||
details: (type, id) => request(`/${type}/${id}`),
|
||||
seasons: (id) => request(`/tv/${id}/seasons`),
|
||||
episodes: (id, season) => request(`/tv/${id}/seasons/${season}`),
|
||||
streams: ({ tmdb, type, season, episode }) => request('/streams', { tmdb, type, season, episode }),
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,79 @@
|
||||
/*
|
||||
APP — shared chrome for every page: settings dialog, footer API label,
|
||||
toast notifications.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
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');
|
||||
if (label) {
|
||||
const base = SR.config.getBase();
|
||||
label.textContent = base;
|
||||
label.href = base;
|
||||
}
|
||||
}
|
||||
|
||||
let toastTimer = null;
|
||||
|
||||
function toast(message, isError) {
|
||||
let el = document.getElementById('toast');
|
||||
if (!el) {
|
||||
el = document.createElement('div');
|
||||
el.id = 'toast';
|
||||
el.className = 'toast';
|
||||
el.setAttribute('role', 'status');
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
el.textContent = message;
|
||||
el.classList.toggle('toast--error', !!isError);
|
||||
el.classList.add('toast--show');
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => el.classList.remove('toast--show'), 4500);
|
||||
}
|
||||
|
||||
function showError(err, fallback) {
|
||||
toast(err && err.message ? err.message : fallback || 'Something went wrong', true);
|
||||
}
|
||||
|
||||
window.SR = window.SR || {};
|
||||
SR.app = { initChrome, toast, showError };
|
||||
})();
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
/*
|
||||
CARDS — renders poster cards, rows (carousels) and grids.
|
||||
Items can come straight from the API ({tmdb_id, type, name, year, poster})
|
||||
or from storage records; normalizeItem() handles both.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const { escapeHtml: esc, tmdbResize, formatSeconds } = SR.util;
|
||||
|
||||
function normalizeItem(r) {
|
||||
return {
|
||||
tmdbId: r.tmdb_id != null ? r.tmdb_id : r.tmdbId,
|
||||
type: r.type,
|
||||
season: r.season,
|
||||
episode: r.episode,
|
||||
name: r.name || r.title || '',
|
||||
year: r.year || '',
|
||||
poster: r.poster || r.poster_url || '',
|
||||
overview: r.overview || '',
|
||||
};
|
||||
}
|
||||
|
||||
function watchHref(item) {
|
||||
const p = new URLSearchParams();
|
||||
p.set('id', item.tmdbId);
|
||||
p.set('type', item.type);
|
||||
if (item.type === 'tv') {
|
||||
if (item.season != null) p.set('s', item.season);
|
||||
if (item.episode != null) p.set('e', item.episode);
|
||||
}
|
||||
return `watch.html?${p.toString()}`;
|
||||
}
|
||||
|
||||
function card(item, opts = {}) {
|
||||
const el = document.createElement('a');
|
||||
el.className = 'card';
|
||||
el.href = opts.href || watchHref(item);
|
||||
const poster = tmdbResize(item.poster, 'w342');
|
||||
const progress =
|
||||
opts.progress != null
|
||||
? `<span class="card__progress"><i style="width:${Math.round(Math.min(1, opts.progress) * 100)}%"></i></span>`
|
||||
: '';
|
||||
const meta =
|
||||
item.meta ||
|
||||
(item.year
|
||||
? `${item.year} · ${item.type === 'tv' ? 'TV' : 'Movie'}`
|
||||
: item.type === 'tv'
|
||||
? 'TV'
|
||||
: 'Movie');
|
||||
el.innerHTML = `
|
||||
<span class="card__poster${poster ? '' : ' card__poster--empty'}">
|
||||
${poster ? `<img src="${poster}" alt="" loading="lazy">` : '?'}
|
||||
${progress}
|
||||
</span>
|
||||
<span class="card__title">${esc(item.name)}</span>
|
||||
<span class="card__meta">${esc(meta)}</span>`;
|
||||
return el;
|
||||
}
|
||||
|
||||
function row(title, items) {
|
||||
const section = document.createElement('section');
|
||||
section.className = 'row';
|
||||
section.innerHTML = `<div class="row__header"><h2 class="row__title">${esc(title)}</h2></div>`;
|
||||
const scroll = document.createElement('div');
|
||||
scroll.className = 'row__scroll';
|
||||
for (const item of items) scroll.appendChild(card(item));
|
||||
section.appendChild(scroll);
|
||||
return section;
|
||||
}
|
||||
|
||||
function grid(items) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'grid';
|
||||
for (const item of items) el.appendChild(card(item));
|
||||
return el;
|
||||
}
|
||||
|
||||
function emptyState(title, hint) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'empty';
|
||||
el.innerHTML = `<h3>${esc(title)}</h3>${hint ? `<p>${esc(hint)}</p>` : ''}`;
|
||||
return el;
|
||||
}
|
||||
|
||||
// "Continue watching" row: latest record per show, with progress bar
|
||||
function continueRow() {
|
||||
const recs = SR.storage.latestPerShow();
|
||||
if (!recs.length) return null;
|
||||
const items = recs.map((r) => ({
|
||||
tmdbId: r.tmdbId,
|
||||
type: r.type,
|
||||
season: r.season,
|
||||
episode: r.episode,
|
||||
name: r.show || r.title || '',
|
||||
poster: r.poster || '',
|
||||
meta:
|
||||
r.type === 'tv'
|
||||
? `S${r.season}E${r.episode}${r.title ? ` · ${r.title}` : ''} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
|
||||
: `Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left`,
|
||||
progress: r.d ? r.t / r.d : 0,
|
||||
}));
|
||||
return row('Continue watching', items);
|
||||
}
|
||||
|
||||
window.SR = window.SR || {};
|
||||
SR.cards = { normalizeItem, card, row, grid, emptyState, continueRow };
|
||||
})();
|
||||
@@ -0,0 +1,52 @@
|
||||
/*
|
||||
CONFIG — where the API lives. Resolution order:
|
||||
1. ?api=<url> query param on any page (session override)
|
||||
2. localStorage (saved from the Settings dialog)
|
||||
3. built-in default
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const DEFAULT_BASE = 'https://bug-api-test.tuns.sh';
|
||||
const STORAGE_KEY = 'streamreverse.apiBase.v1';
|
||||
|
||||
function normalize(value) {
|
||||
let v = String(value || '').trim();
|
||||
if (!v) return '';
|
||||
if (!/^https?:\/\//i.test(v)) v = `https://${v}`;
|
||||
return v.replace(/\/+$/, '');
|
||||
}
|
||||
|
||||
function getBase() {
|
||||
const fromQuery = SR.util.getParam('api');
|
||||
if (fromQuery) return normalize(fromQuery);
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored) return normalize(stored);
|
||||
} catch (e) {
|
||||
/* private mode etc. */
|
||||
}
|
||||
return DEFAULT_BASE;
|
||||
}
|
||||
|
||||
function setBase(value) {
|
||||
const v = normalize(value);
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, v);
|
||||
} catch (e) {
|
||||
/* ignore */
|
||||
}
|
||||
return v;
|
||||
}
|
||||
|
||||
function clearBase() {
|
||||
try {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
} catch (e) {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
window.SR = window.SR || {};
|
||||
SR.config = { DEFAULT_BASE, STORAGE_KEY, getBase, setBase, clearBase };
|
||||
})();
|
||||
@@ -0,0 +1,55 @@
|
||||
/*
|
||||
HOME — hero with search + continue-watching row + trending rows.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// quick-search chips in the hero — edit freely
|
||||
const QUICK_SEARCHES = ['Action', 'Comedy', 'Sci-Fi', 'Drama', 'Horror', 'Animation', 'Crime'];
|
||||
|
||||
SR.app.initChrome();
|
||||
|
||||
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();
|
||||
if (cont) sections.appendChild(cont);
|
||||
|
||||
function appendRow(data, title) {
|
||||
if (!data || !data.count) return;
|
||||
sections.appendChild(SR.cards.row(title, data.results.map(SR.cards.normalizeItem)));
|
||||
}
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
appendRow(await SR.api.trending('movie', 'day'), 'Trending movies today');
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'could not load trending movies');
|
||||
}
|
||||
try {
|
||||
appendRow(await SR.api.trending('tv', 'week'), 'Trending shows this week');
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'could not load trending shows');
|
||||
}
|
||||
})();
|
||||
})();
|
||||
@@ -0,0 +1,180 @@
|
||||
/*
|
||||
PLAYER — plays a stream in a <video> element and supports switching
|
||||
sources mid-watch without losing your place.
|
||||
|
||||
Pipeline per stream:
|
||||
- hls.js for .m3u8 when available
|
||||
- native HLS for Safari (canPlayType check)
|
||||
- direct <video src> for mp4/webm
|
||||
- everything else (DASH, mkv, magnet, …) → friendly error
|
||||
|
||||
Every media + subtitle URL is routed through the API proxy.
|
||||
On source switch we carry over currentTime, playbackRate, volume, muted
|
||||
and the playing state, clamped to the new duration.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function create(video, handlers = {}) {
|
||||
const onStatus = handlers.onStatus || (() => {});
|
||||
const onError = handlers.onError || (() => {});
|
||||
const onReady = handlers.onReady || (() => {});
|
||||
|
||||
let hls = null;
|
||||
let token = 0; // guards against overlapping loads
|
||||
let networkRetry = false;
|
||||
|
||||
function teardown() {
|
||||
token++;
|
||||
if (hls) {
|
||||
try {
|
||||
hls.destroy();
|
||||
} catch (e) {
|
||||
/* already destroyed */
|
||||
}
|
||||
hls = null;
|
||||
}
|
||||
for (const track of video.querySelectorAll('track')) track.remove();
|
||||
video.removeAttribute('src');
|
||||
try {
|
||||
video.load();
|
||||
} catch (e) {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
function capture() {
|
||||
const v = video;
|
||||
return {
|
||||
time: isFinite(v.currentTime) && v.currentTime > 0 ? v.currentTime : 0,
|
||||
rate: v.playbackRate || 1,
|
||||
volume: v.volume,
|
||||
muted: v.muted,
|
||||
playing: !v.paused && !v.ended,
|
||||
};
|
||||
}
|
||||
|
||||
function restore(st) {
|
||||
const v = video;
|
||||
v.playbackRate = st.rate;
|
||||
v.volume = st.volume;
|
||||
v.muted = st.muted;
|
||||
const seek = () => {
|
||||
const d = v.duration;
|
||||
let t = st.time;
|
||||
if (isFinite(d) && d > 0) t = Math.min(t, Math.max(0, d - 5));
|
||||
if (t > 10) v.currentTime = t;
|
||||
if (st.playing) v.play().catch(() => {});
|
||||
};
|
||||
if (isFinite(v.duration) && v.duration > 0) seek();
|
||||
else v.addEventListener('loadedmetadata', seek, { once: true });
|
||||
}
|
||||
|
||||
function attachSubtitles(stream) {
|
||||
for (const sub of stream.subtitles || []) {
|
||||
let resolved;
|
||||
try {
|
||||
resolved = new URL(sub.url, stream.url).toString();
|
||||
} catch (e) {
|
||||
continue;
|
||||
}
|
||||
const track = document.createElement('track');
|
||||
track.kind = 'subtitles';
|
||||
track.srclang = sub.language || 'en';
|
||||
track.label = sub.name || sub.language || 'Subtitles';
|
||||
track.src = SR.api.proxyUrl(resolved, stream.headers);
|
||||
video.appendChild(track);
|
||||
}
|
||||
}
|
||||
|
||||
function load(stream, opts = {}) {
|
||||
const st = capture();
|
||||
if (typeof opts.resumeAt === 'number' && opts.resumeAt > 10) st.time = opts.resumeAt;
|
||||
|
||||
teardown();
|
||||
networkRetry = false;
|
||||
const myToken = token;
|
||||
const guarded = (fn) => () => {
|
||||
if (myToken === token) fn();
|
||||
};
|
||||
|
||||
const url = stream.url || '';
|
||||
const isHls = stream.type === 'm3u8' || /\.m3u8($|\?)/i.test(url);
|
||||
const isDash = stream.type === 'dash' || /\.mpd($|\?)/i.test(url);
|
||||
const isDirect =
|
||||
stream.type === 'mp4' ||
|
||||
stream.type === 'webm' ||
|
||||
/\.(mp4|m4v|webm)(\?|#|$)/i.test(url);
|
||||
|
||||
if (isDash) {
|
||||
onError('DASH streams are not supported yet — pick another source.');
|
||||
return;
|
||||
}
|
||||
if (!isHls && !isDirect) {
|
||||
onError(`The browser can't play ${stream.type} files directly — pick an MP4 or HLS source.`);
|
||||
return;
|
||||
}
|
||||
|
||||
attachSubtitles(stream);
|
||||
const proxied = SR.api.proxyUrl(url, stream.headers);
|
||||
|
||||
if (isHls && window.Hls && Hls.isSupported()) {
|
||||
onStatus('Loading stream…');
|
||||
const h = new Hls({ enableWorker: true });
|
||||
hls = h;
|
||||
h.loadSource(proxied);
|
||||
h.attachMedia(video);
|
||||
h.on(Hls.Events.MANIFEST_PARSED, guarded(() => {
|
||||
restore(st);
|
||||
onReady(st.time > 10 ? st.time : 0);
|
||||
}));
|
||||
h.on(Hls.Events.ERROR, (evt, data) => {
|
||||
if (myToken !== token || !data.fatal) return;
|
||||
if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
|
||||
if (!networkRetry) {
|
||||
networkRetry = true;
|
||||
setTimeout(() => {
|
||||
networkRetry = false;
|
||||
if (myToken === token && hls === h) h.startLoad();
|
||||
}, 2000);
|
||||
}
|
||||
} else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
|
||||
h.recoverMediaError();
|
||||
} else {
|
||||
onError('Playback failed: ' + (data.details || 'unknown stream error'));
|
||||
teardown();
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// native HLS (Safari) or direct file
|
||||
onStatus('Loading stream…');
|
||||
video.src = proxied;
|
||||
video.addEventListener(
|
||||
'loadedmetadata',
|
||||
guarded(() => {
|
||||
restore(st);
|
||||
onReady(st.time > 10 ? st.time : 0);
|
||||
}),
|
||||
{ once: true }
|
||||
);
|
||||
video.addEventListener(
|
||||
'error',
|
||||
guarded(() => {
|
||||
onError('Could not load this stream — try another source.');
|
||||
}),
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
teardown();
|
||||
}
|
||||
|
||||
return { load, destroy };
|
||||
}
|
||||
|
||||
window.SR = window.SR || {};
|
||||
SR.player = { create };
|
||||
})();
|
||||
@@ -0,0 +1,88 @@
|
||||
/*
|
||||
SEARCH — debounced live search with client-side type filter.
|
||||
URL ?q= is kept in sync so results are shareable/bookmarkable.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
SR.app.initChrome();
|
||||
|
||||
const input = document.getElementById('searchInput');
|
||||
const chipsEl = document.getElementById('typeChips');
|
||||
const resultsEl = document.getElementById('results');
|
||||
const countEl = document.getElementById('searchCount');
|
||||
|
||||
const state = { type: 'all', results: [] };
|
||||
|
||||
function render() {
|
||||
resultsEl.replaceChildren();
|
||||
const filtered = state.type === 'all' ? state.results : state.results.filter((i) => i.type === state.type);
|
||||
if (!state.results.length) {
|
||||
countEl.textContent = '';
|
||||
resultsEl.appendChild(
|
||||
SR.cards.emptyState('Nothing found', 'Check the spelling or try a different name.')
|
||||
);
|
||||
return;
|
||||
}
|
||||
countEl.textContent = `${filtered.length} of ${state.results.length} result${state.results.length === 1 ? '' : 's'}`;
|
||||
if (!filtered.length) {
|
||||
resultsEl.appendChild(SR.cards.emptyState('No matches for this filter', 'Try the All filter, or a different search.'));
|
||||
return;
|
||||
}
|
||||
resultsEl.appendChild(SR.cards.grid(filtered));
|
||||
}
|
||||
|
||||
async function runSearch(q) {
|
||||
q = (q || '').trim();
|
||||
if (!q) {
|
||||
state.results = [];
|
||||
countEl.textContent = '';
|
||||
resultsEl.replaceChildren(SR.cards.emptyState('Search the catalog', 'Type a movie or show name above.'));
|
||||
return;
|
||||
}
|
||||
countEl.textContent = 'Searching…';
|
||||
try {
|
||||
const data = await SR.api.search(q);
|
||||
state.results = data.results.map(SR.cards.normalizeItem);
|
||||
render();
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'search failed');
|
||||
countEl.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
const LABELS = { all: 'All', movie: 'Movies', tv: 'TV' };
|
||||
for (const t of ['all', 'movie', 'tv']) {
|
||||
const b = document.createElement('button');
|
||||
b.type = 'button';
|
||||
b.className = t === 'all' ? 'chip chip--active' : 'chip';
|
||||
b.textContent = LABELS[t];
|
||||
b.addEventListener('click', () => {
|
||||
state.type = t;
|
||||
for (const c of chipsEl.querySelectorAll('.chip')) c.classList.remove('chip--active');
|
||||
b.classList.add('chip--active');
|
||||
render();
|
||||
});
|
||||
chipsEl.appendChild(b);
|
||||
}
|
||||
|
||||
input.addEventListener(
|
||||
'input',
|
||||
SR.util.debounce(() => {
|
||||
const q = input.value.trim();
|
||||
history.replaceState(null, '', q ? `?q=${encodeURIComponent(q)}` : 'search.html');
|
||||
runSearch(q);
|
||||
}, 450)
|
||||
);
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
runSearch(input.value.trim());
|
||||
}
|
||||
});
|
||||
|
||||
const initialQ = SR.util.getParam('q') || '';
|
||||
input.value = initialQ;
|
||||
if (initialQ) runSearch(initialQ);
|
||||
else input.focus();
|
||||
})();
|
||||
@@ -0,0 +1,87 @@
|
||||
/*
|
||||
STORAGE — resume points, kept in localStorage (survives restarts, no size
|
||||
worries like cookies, no per-request overhead).
|
||||
|
||||
A "record" looks like:
|
||||
{
|
||||
key: "m:603" | "t:1396:s1:e2",
|
||||
type: "movie" | "tv",
|
||||
tmdbId: 1396,
|
||||
season: 1, // tv only
|
||||
episode: 2, // tv only
|
||||
show: "Show name",
|
||||
title: "Episode name", // tv only
|
||||
poster: "https://…/w342/…",
|
||||
t: 934.2, // seconds played
|
||||
d: 2710.5, // duration seconds
|
||||
at: 1712345678901,
|
||||
provider: "cineby"
|
||||
}
|
||||
|
||||
One record per (movie) or (show, season, episode). The home page collapses
|
||||
to the most recent record per show.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const KEY = 'streamreverse.resume.v1';
|
||||
const MAX_RECORDS = 200;
|
||||
|
||||
function readAll() {
|
||||
try {
|
||||
const parsed = JSON.parse(localStorage.getItem(KEY) || '{}');
|
||||
return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
|
||||
} catch (e) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function writeAll(all) {
|
||||
try {
|
||||
localStorage.setItem(KEY, JSON.stringify(all));
|
||||
} catch (e) {
|
||||
/* storage full/blocked — resume just won't persist */
|
||||
}
|
||||
}
|
||||
|
||||
function keyFor({ type, tmdbId, season, episode }) {
|
||||
return type === 'tv' ? `t:${tmdbId}:s${season}:e${episode}` : `m:${tmdbId}`;
|
||||
}
|
||||
|
||||
function get(key) {
|
||||
return readAll()[key] || null;
|
||||
}
|
||||
|
||||
function save(record) {
|
||||
const all = readAll();
|
||||
all[record.key] = record;
|
||||
const keys = Object.keys(all).sort((a, b) => (all[a].at || 0) - (all[b].at || 0));
|
||||
while (keys.length > MAX_RECORDS) delete all[keys.shift()];
|
||||
writeAll(all);
|
||||
}
|
||||
|
||||
function remove(key) {
|
||||
const all = readAll();
|
||||
if (all[key]) {
|
||||
delete all[key];
|
||||
writeAll(all);
|
||||
}
|
||||
}
|
||||
|
||||
function list() {
|
||||
return Object.values(readAll());
|
||||
}
|
||||
|
||||
// one entry per movie/show: the most recently watched record wins
|
||||
function latestPerShow() {
|
||||
const byShow = new Map();
|
||||
for (const rec of list().sort((a, b) => (a.at || 0) - (b.at || 0))) {
|
||||
const showKey = rec.type === 'tv' ? `t:${rec.tmdbId}` : `m:${rec.tmdbId}`;
|
||||
byShow.set(showKey, rec);
|
||||
}
|
||||
return [...byShow.values()].sort((a, b) => (b.at || 0) - (a.at || 0));
|
||||
}
|
||||
|
||||
window.SR = window.SR || {};
|
||||
SR.storage = { KEY, keyFor, get, save, remove, list, latestPerShow };
|
||||
})();
|
||||
@@ -0,0 +1,55 @@
|
||||
/*
|
||||
UTIL — small shared helpers. No dependencies.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value == null ? '' : value)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function getParam(name) {
|
||||
return new URLSearchParams(location.search).get(name);
|
||||
}
|
||||
|
||||
// 95 -> "1:35", 3675 -> "1:01:15"
|
||||
function formatSeconds(sec) {
|
||||
sec = Math.max(0, Math.floor(sec || 0));
|
||||
const h = Math.floor(sec / 3600);
|
||||
const m = Math.floor((sec % 3600) / 60);
|
||||
const s = sec % 60;
|
||||
const mm = h ? String(m).padStart(2, '0') : String(m);
|
||||
const ss = String(s).padStart(2, '0');
|
||||
return h ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
|
||||
}
|
||||
|
||||
// 141 -> "2h 21m"
|
||||
function runtimeLabel(mins) {
|
||||
if (!mins || mins <= 0) return '';
|
||||
const h = Math.floor(mins / 60);
|
||||
const m = mins % 60;
|
||||
return h ? (m ? `${h}h ${m}m` : `${h}h`) : `${m}m`;
|
||||
}
|
||||
|
||||
function debounce(fn, wait) {
|
||||
let timer = null;
|
||||
return function (...args) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => fn.apply(this, args), wait);
|
||||
};
|
||||
}
|
||||
|
||||
// resize a full TMDB image URL (…/t/p/<size>/path) to another size
|
||||
function tmdbResize(url, size) {
|
||||
if (!url) return '';
|
||||
return url.replace(/\/t\/p\/[A-Za-z0-9._-]+/, `/t/p/${size}`);
|
||||
}
|
||||
|
||||
window.SR = window.SR || {};
|
||||
SR.util = { escapeHtml, getParam, formatSeconds, runtimeLabel, debounce, tmdbResize };
|
||||
})();
|
||||
+366
@@ -0,0 +1,366 @@
|
||||
/*
|
||||
WATCH — hero, player, source list (switch mid-watch), episodes.
|
||||
|
||||
URL params: ?id=<tmdb id>&type=<movie|tv>
|
||||
TV adds &s=<season>&e=<episode> as playback progresses.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const id = (params.get('id') || '').trim();
|
||||
const type = params.get('type') === 'tv' ? 'tv' : 'movie';
|
||||
|
||||
SR.app.initChrome();
|
||||
|
||||
const content = document.getElementById('content');
|
||||
if (!id || !/^\d+$/.test(id)) {
|
||||
content.replaceChildren(SR.cards.emptyState('Missing ?id=', 'This page needs a TMDB id, e.g. watch.html?id=1396&type=tv'));
|
||||
return;
|
||||
}
|
||||
|
||||
const video = document.getElementById('video');
|
||||
const statusEl = document.getElementById('playerStatus');
|
||||
const sourceLabel = document.getElementById('sourceLabel');
|
||||
const resumeNote = document.getElementById('resumeNote');
|
||||
const sourcesPanel = document.getElementById('sourcesPanel');
|
||||
const changeSourceBtn = document.getElementById('changeSourceBtn');
|
||||
const episodeSection = document.getElementById('episodes');
|
||||
const seasonSelect = document.getElementById('seasonSelect');
|
||||
const episodeGrid = document.getElementById('episodeGrid');
|
||||
const prevBtn = document.getElementById('prevEpisode');
|
||||
const nextBtn = document.getElementById('nextEpisode');
|
||||
|
||||
const state = {
|
||||
details: null,
|
||||
seasons: [],
|
||||
episodes: [],
|
||||
streams: [],
|
||||
sourceIndex: -1,
|
||||
season: null,
|
||||
episode: null,
|
||||
};
|
||||
|
||||
/* ---- status overlay ------------------------------------------------------ */
|
||||
|
||||
function showStatus(msg, isError) {
|
||||
statusEl.hidden = false;
|
||||
statusEl.innerHTML = isError
|
||||
? `<h3>Playback problem</h3><p>${SR.util.escapeHtml(msg)}</p>`
|
||||
: `<div class="spinner"></div><p>${SR.util.escapeHtml(msg)}</p>`;
|
||||
}
|
||||
|
||||
function hideStatus() {
|
||||
statusEl.hidden = true;
|
||||
}
|
||||
|
||||
/* ---- player --------------------------------------------------------------- */
|
||||
|
||||
const player = SR.player.create(video, {
|
||||
onStatus: (msg) => showStatus(msg),
|
||||
onReady: (resumeAt) => {
|
||||
hideStatus();
|
||||
if (resumeAt > 10) resumeNote.textContent = `Resuming at ${SR.util.formatSeconds(resumeAt)}`;
|
||||
},
|
||||
onError: (msg) => {
|
||||
showStatus(msg, true);
|
||||
SR.app.toast(msg, true);
|
||||
},
|
||||
});
|
||||
|
||||
/* ---- hero ------------------------------------------------------------------ */
|
||||
|
||||
function renderHero(d) {
|
||||
document.title = `${d.name || d.title} — bug.tv`;
|
||||
const isTv = type === 'tv';
|
||||
const year = String((isTv ? d.first_air_date : d.release_date) || '').slice(0, 4);
|
||||
const facts = [
|
||||
isTv ? `${d.number_of_seasons || 0} seasons` : SR.util.runtimeLabel(d.runtime),
|
||||
year,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.map(SR.util.escapeHtml)
|
||||
.join('<span>·</span>');
|
||||
const rating = d.vote_average
|
||||
? `<span class="watch-hero__rating">★ ${Number(d.vote_average).toFixed(1)}</span>`
|
||||
: '';
|
||||
const genres = (d.genres || [])
|
||||
.map((g) => `<span class="tag">${SR.util.escapeHtml(g.name)}</span>`)
|
||||
.join('');
|
||||
const poster = SR.util.tmdbResize(d.poster_url, 'w500');
|
||||
const backdrop = SR.util.tmdbResize(d.backdrop_url, 'w1280');
|
||||
document.getElementById('hero').innerHTML = `
|
||||
${backdrop ? `<div class="watch-hero__backdrop"><img src="${backdrop}" alt=""></div>` : ''}
|
||||
${poster ? `<div class="watch-hero__poster"><img src="${poster}" alt=""></div>` : ''}
|
||||
<div class="watch-hero__body">
|
||||
<h1 class="watch-hero__title">${SR.util.escapeHtml(d.name || d.title)}</h1>
|
||||
<div class="watch-hero__facts">${rating}${rating && facts ? '<span>·</span>' : ''}${facts}</div>
|
||||
${genres ? `<div class="watch-hero__genres">${genres}</div>` : ''}
|
||||
${d.overview ? `<p class="watch-hero__overview">${SR.util.escapeHtml(d.overview)}</p>` : ''}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* ---- url -------------------------------------------------------------------- */
|
||||
|
||||
function syncUrl() {
|
||||
const p = new URLSearchParams();
|
||||
p.set('id', id);
|
||||
p.set('type', type);
|
||||
if (type === 'tv') {
|
||||
if (state.season != null) p.set('s', state.season);
|
||||
if (state.episode != null) p.set('e', state.episode);
|
||||
}
|
||||
history.replaceState(null, '', `?${p.toString()}`);
|
||||
}
|
||||
|
||||
/* ---- streams ------------------------------------------------------------------ */
|
||||
|
||||
function keyFor() {
|
||||
return SR.storage.keyFor({ type, tmdbId: Number(id), season: state.season, episode: state.episode });
|
||||
}
|
||||
|
||||
async function loadStreams() {
|
||||
const query = { tmdb: id, type };
|
||||
if (type === 'tv') {
|
||||
if (state.season == null || state.episode == null) return;
|
||||
query.season = state.season;
|
||||
query.episode = state.episode;
|
||||
}
|
||||
sourcesPanel.hidden = true;
|
||||
changeSourceBtn.textContent = 'Change source';
|
||||
showStatus('Finding streams…');
|
||||
sourceLabel.textContent = '';
|
||||
resumeNote.textContent = '';
|
||||
try {
|
||||
const data = await SR.api.streams(query);
|
||||
state.streams = data.streams || [];
|
||||
renderSources();
|
||||
changeSourceBtn.hidden = state.streams.length === 0;
|
||||
if (state.streams.length) playSource(0);
|
||||
else showStatus('No streams found for this title.', true);
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'stream lookup failed');
|
||||
showStatus('Stream lookup failed.', true);
|
||||
}
|
||||
}
|
||||
|
||||
function renderSources() {
|
||||
const list = document.getElementById('sourceList');
|
||||
list.replaceChildren();
|
||||
state.streams.forEach((s, i) => {
|
||||
const b = document.createElement('button');
|
||||
b.type = 'button';
|
||||
b.className = i === state.sourceIndex ? 'source-item source-item--active' : 'source-item';
|
||||
const meta = [s.provider, s.quality, s.audio].filter(Boolean).join(' · ');
|
||||
b.innerHTML = `
|
||||
<span class="source-item__rank">${i + 1}</span>
|
||||
<span class="source-item__name">${SR.util.escapeHtml(s.name)}</span>
|
||||
<span class="source-item__meta">${SR.util.escapeHtml(meta)}</span>`;
|
||||
b.addEventListener('click', () => playSource(i));
|
||||
list.appendChild(b);
|
||||
});
|
||||
document.getElementById('sourcesCount').textContent =
|
||||
`${state.streams.length} source${state.streams.length === 1 ? '' : 's'}`;
|
||||
}
|
||||
|
||||
function playSource(i) {
|
||||
const s = state.streams[i];
|
||||
if (!s) return;
|
||||
state.sourceIndex = i;
|
||||
renderSources();
|
||||
sourceLabel.textContent = `${s.name} — ${[s.quality, s.provider].filter(Boolean).join(', ')}`;
|
||||
const rec = SR.storage.get(keyFor());
|
||||
player.load(s, { resumeAt: rec && rec.t > 10 ? rec.t : null });
|
||||
}
|
||||
|
||||
changeSourceBtn.addEventListener('click', () => {
|
||||
sourcesPanel.hidden = !sourcesPanel;
|
||||
changeSourceBtn.textContent = sourcesPanel.hidden ? 'Change source' : 'Hide sources';
|
||||
});
|
||||
|
||||
/* ---- resume persistence ---------------------------------------------------------- */
|
||||
|
||||
let lastPersist = 0;
|
||||
|
||||
function persistProgress(force) {
|
||||
const d = video.duration;
|
||||
if (!d || !isFinite(d)) return;
|
||||
const t = video.currentTime;
|
||||
if (t < 10) return;
|
||||
const key = keyFor();
|
||||
if (t >= d - 15 || t / d >= 0.95) {
|
||||
SR.storage.remove(key);
|
||||
return;
|
||||
}
|
||||
const now = Date.now();
|
||||
if (!force && now - lastPersist < 3000) return;
|
||||
lastPersist = now;
|
||||
const ep = state.episodes.find((e) => e.episode_number === state.episode);
|
||||
SR.storage.save({
|
||||
key,
|
||||
type,
|
||||
tmdbId: Number(id),
|
||||
season: state.season,
|
||||
episode: state.episode,
|
||||
show: state.details ? state.details.name || state.details.title : '',
|
||||
title: ep ? ep.name || '' : '',
|
||||
poster: state.details ? SR.util.tmdbResize(state.details.poster_url, 'w342') : '',
|
||||
t,
|
||||
d,
|
||||
at: now,
|
||||
provider: state.streams[state.sourceIndex] ? state.streams[state.sourceIndex].provider : '',
|
||||
});
|
||||
}
|
||||
|
||||
video.addEventListener('timeupdate', () => persistProgress(false));
|
||||
video.addEventListener('pause', () => persistProgress(true));
|
||||
video.addEventListener('seeked', () => persistProgress(true));
|
||||
video.addEventListener('ended', () => SR.storage.remove(keyFor()));
|
||||
window.addEventListener('pagehide', () => persistProgress(true));
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) persistProgress(true);
|
||||
});
|
||||
|
||||
/* ---- episodes ------------------------------------------------------------------------ */
|
||||
|
||||
async function loadSeasons() {
|
||||
const data = await SR.api.seasons(id);
|
||||
state.seasons = data.seasons || [];
|
||||
for (const s of state.seasons) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = s.season_number;
|
||||
opt.textContent = `${s.name} (${s.episode_count})`;
|
||||
seasonSelect.appendChild(opt);
|
||||
}
|
||||
}
|
||||
|
||||
function showGridSpinner() {
|
||||
episodeGrid.replaceChildren();
|
||||
const cell = document.createElement('div');
|
||||
cell.className = 'loading-cell';
|
||||
cell.innerHTML = '<div class="spinner"></div>';
|
||||
episodeGrid.appendChild(cell);
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
episodeGrid.replaceChildren();
|
||||
if (!state.episodes.length) {
|
||||
const empty = SR.cards.emptyState('No episodes listed');
|
||||
empty.style.gridColumn = '1 / -1';
|
||||
episodeGrid.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
for (const ep of state.episodes) {
|
||||
const b = document.createElement('button');
|
||||
b.type = 'button';
|
||||
b.className = ep.episode_number === state.episode ? 'episode episode--current' : 'episode';
|
||||
const date = ep.air_date ? ` · ${SR.util.escapeHtml(ep.air_date)}` : '';
|
||||
b.innerHTML = `
|
||||
<span class="episode__thumb"><span class="episode__play">▶</span></span>
|
||||
<span class="episode__body">
|
||||
<span class="episode__num">S${state.season} · E${ep.episode_number}${date}</span>
|
||||
<span class="episode__title">${SR.util.escapeHtml(ep.name || `Episode ${ep.episode_number}`)}</span>
|
||||
</span>`;
|
||||
b.addEventListener('click', () => playEpisode(ep.episode_number));
|
||||
episodeGrid.appendChild(b);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadEpisodes(season, autoplayEpisode) {
|
||||
state.season = season;
|
||||
seasonSelect.value = String(season);
|
||||
showGridSpinner();
|
||||
const data = await SR.api.episodes(id, season);
|
||||
state.episodes = data.episodes || [];
|
||||
renderEpisodes();
|
||||
syncUrl();
|
||||
if (autoplayEpisode && state.episodes.some((e) => e.episode_number === autoplayEpisode)) {
|
||||
playEpisode(autoplayEpisode);
|
||||
}
|
||||
}
|
||||
|
||||
function playEpisode(n) {
|
||||
state.episode = n;
|
||||
syncUrl();
|
||||
renderEpisodes();
|
||||
loadStreams();
|
||||
document.getElementById('playerSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
seasonSelect.addEventListener('change', async () => {
|
||||
const season = parseInt(seasonSelect.value, 10);
|
||||
if (!season) return;
|
||||
try {
|
||||
await loadEpisodes(season);
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'failed to load episodes');
|
||||
}
|
||||
});
|
||||
|
||||
async function stepEpisode(delta) {
|
||||
if (type !== 'tv') return;
|
||||
const idx = state.episodes.findIndex((e) => e.episode_number === state.episode);
|
||||
if (idx >= 0 && idx + delta >= 0 && idx + delta < state.episodes.length) {
|
||||
playEpisode(state.episodes[idx + delta].episode_number);
|
||||
return;
|
||||
}
|
||||
const sIdx = state.seasons.findIndex((s) => s.season_number === state.season);
|
||||
if (sIdx < 0 || sIdx + delta < 0 || sIdx + delta >= state.seasons.length) return;
|
||||
try {
|
||||
await loadEpisodes(state.seasons[sIdx + delta].season_number);
|
||||
const first = state.episodes[0];
|
||||
if (first) playEpisode(first.episode_number);
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'failed to load episodes');
|
||||
}
|
||||
}
|
||||
|
||||
prevBtn.addEventListener('click', () => stepEpisode(-1));
|
||||
nextBtn.addEventListener('click', () => stepEpisode(1));
|
||||
|
||||
/* ---- init ------------------------------------------------------------------------------ */
|
||||
|
||||
(async function init() {
|
||||
let details;
|
||||
try {
|
||||
details = await SR.api.details(type, id);
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'failed to load this title');
|
||||
showStatus('Could not load this title.', true);
|
||||
return;
|
||||
}
|
||||
state.details = details;
|
||||
renderHero(details);
|
||||
|
||||
if (type !== 'tv') {
|
||||
loadStreams();
|
||||
return;
|
||||
}
|
||||
|
||||
episodeSection.hidden = false;
|
||||
showStatus('Pick an episode to start.');
|
||||
|
||||
try {
|
||||
await loadSeasons();
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'failed to load seasons');
|
||||
return;
|
||||
}
|
||||
if (!state.seasons.length) {
|
||||
showStatus('No seasons found for this show.', true);
|
||||
return;
|
||||
}
|
||||
|
||||
const sParam = parseInt(params.get('s'), 10);
|
||||
const eParam = parseInt(params.get('e'), 10);
|
||||
const season = state.seasons.some((s) => s.season_number === sParam)
|
||||
? sParam
|
||||
: state.seasons[0].season_number;
|
||||
try {
|
||||
await loadEpisodes(season, eParam || null);
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'failed to load episodes');
|
||||
showStatus('Failed to load episodes.', true);
|
||||
}
|
||||
})();
|
||||
})();
|
||||
@@ -0,0 +1,76 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>bug.tv — search</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>
|
||||
<a class="site-header__nav" href="index.html">Home</a>
|
||||
<a class="site-header__nav" href="search.html">Search</a>
|
||||
<span class="site-header__spacer"></span>
|
||||
<button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container page" id="content">
|
||||
<div class="search-bar">
|
||||
<form class="search-bar__form" role="search" onsubmit="return false">
|
||||
<input class="field search-bar__input" id="searchInput" type="search" placeholder="Search movies and shows…" autocomplete="off" spellcheck="false">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="search-toolbar">
|
||||
<div class="chips" id="typeChips"></div>
|
||||
<span class="search-count" id="searchCount"></span>
|
||||
</div>
|
||||
|
||||
<div id="results"></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>
|
||||
|
||||
<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/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/search.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+4
File diff suppressed because one or more lines are too long
@@ -0,0 +1,99 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>bug.tv — watch</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>
|
||||
<a class="site-header__nav" href="index.html">Home</a>
|
||||
<a class="site-header__nav" href="search.html">Search</a>
|
||||
<span class="site-header__spacer"></span>
|
||||
<button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container page" id="content">
|
||||
<section class="watch-hero" id="hero" aria-busy="true"></section>
|
||||
|
||||
<section id="playerSection">
|
||||
<div class="player-wrap">
|
||||
<video id="video" controls playsinline></video>
|
||||
<div class="player-status" id="playerStatus">
|
||||
<div class="spinner"></div>
|
||||
<p>Getting ready…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="watch-toolbar">
|
||||
<span class="watch-toolbar__source" id="sourceLabel"></span>
|
||||
<span id="resumeNote"></span>
|
||||
<span class="watch-toolbar__spacer"></span>
|
||||
<button class="btn btn--sm" id="changeSourceBtn" type="button" hidden>Change source</button>
|
||||
</div>
|
||||
|
||||
<div class="sources" id="sourcesPanel" hidden>
|
||||
<div class="sources__head">Sources <span id="sourcesCount"></span></div>
|
||||
<div id="sourceList"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="episodes" id="episodes" hidden>
|
||||
<div class="episodes__toolbar">
|
||||
<h2 class="episodes__title">Episodes</h2>
|
||||
<select class="field" id="seasonSelect" aria-label="Season"></select>
|
||||
<button class="btn btn--sm" id="prevEpisode" type="button">Previous</button>
|
||||
<button class="btn btn--sm" id="nextEpisode" type="button">Next</button>
|
||||
</div>
|
||||
<div class="episode-grid" id="episodeGrid"></div>
|
||||
</section>
|
||||
</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>
|
||||
|
||||
<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="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/player.js"></script>
|
||||
<script src="js/watch.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user