Compare commits
9
Commits
735f9a4375
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 4DBug
|
c8094b6734 | ||
|
4DBug
|
82c6a96dbb | ||
|
4DBug
|
937e6b8ea6 | ||
|
4DBug
|
c14ea9a853 | ||
|
4DBug
|
a1c3d20eb7 | ||
|
4DBug
|
daea02d0fc | ||
|
4DBug
|
b30b4fd8ed | ||
|
4DBug
|
fc0e2c7af6 | ||
|
4DBug
|
bbb5659e00 |
+3
-1
@@ -1,7 +1,9 @@
|
|||||||
{
|
{
|
||||||
"tmdbKey": "ac014b130a8e6344c91dff4e68b18d47",
|
"tmdbKey": "ac014b130a8e6344c91dff4e68b18d47",
|
||||||
"enabledProviders": [
|
"enabledProviders": [
|
||||||
"cineby"
|
"cineby",
|
||||||
|
"videasy",
|
||||||
|
"vidfast"
|
||||||
],
|
],
|
||||||
"timeoutMs": 30000,
|
"timeoutMs": 30000,
|
||||||
"filters": {
|
"filters": {
|
||||||
|
|||||||
@@ -22,13 +22,13 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
npmDeps = pkgs.fetchNpmDeps {
|
npmDeps = pkgs.fetchNpmDeps {
|
||||||
name = "streamreverse-npm-deps";
|
name = "bug-tv-npm-deps";
|
||||||
inherit src;
|
inherit src;
|
||||||
hash = "sha256-pMxVG+OHiqjz1GHWDhhNOsrhoVPzVJ5kXhiRsP0Rflg=";
|
hash = "sha256-pMxVG+OHiqjz1GHWDhhNOsrhoVPzVJ5kXhiRsP0Rflg=";
|
||||||
};
|
};
|
||||||
in
|
in
|
||||||
pkgs.stdenvNoCC.mkDerivation {
|
pkgs.stdenvNoCC.mkDerivation {
|
||||||
pname = "streamreverse";
|
pname = "bug-tv";
|
||||||
version = "0.1.0";
|
version = "0.1.0";
|
||||||
|
|
||||||
inherit src npmDeps;
|
inherit src npmDeps;
|
||||||
@@ -111,7 +111,7 @@
|
|||||||
enable = lib.mkEnableOption "the bug.tv multi-provider stream finder API";
|
enable = lib.mkEnableOption "the bug.tv multi-provider stream finder API";
|
||||||
|
|
||||||
package = lib.mkOption {
|
package = lib.mkOption {
|
||||||
description = "The streamreverse package to run.";
|
description = "The bug-tv package to run.";
|
||||||
type = lib.types.package;
|
type = lib.types.package;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Generated
+2
-2
@@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"name": "streamreverse",
|
"name": "bug-tv",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "streamreverse",
|
"name": "bug-tv",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cheerio-without-node-native": "^0.20.2",
|
"cheerio-without-node-native": "^0.20.2",
|
||||||
|
|||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "streamreverse",
|
"name": "bug-tv",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"description": "Multi-provider stream finder with TMDB search and REST API",
|
"description": "Multi-provider stream finder with TMDB search and REST API",
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
// OpenAPI 3.0 spec for the streamreverse REST API.
|
|
||||||
// Served at GET /api.json and rendered by Swagger UI at GET /.
|
|
||||||
|
|
||||||
const spec = {
|
const spec = {
|
||||||
openapi: '3.0.3',
|
openapi: '3.0.3',
|
||||||
|
|||||||
@@ -178,6 +178,8 @@ function searchResult(m) {
|
|||||||
name: m.title || m.name,
|
name: m.title || m.name,
|
||||||
year: date ? String(date).slice(0, 4) : '',
|
year: date ? String(date).slice(0, 4) : '',
|
||||||
poster: m.poster_path ? `https://image.tmdb.org/t/p/w342${m.poster_path}` : '',
|
poster: m.poster_path ? `https://image.tmdb.org/t/p/w342${m.poster_path}` : '',
|
||||||
|
backdrop: m.backdrop_path ? `https://image.tmdb.org/t/p/w1280${m.backdrop_path}` : '',
|
||||||
|
rating: m.vote_average ? Number(m.vote_average).toFixed(1) : '',
|
||||||
overview: m.overview || '',
|
overview: m.overview || '',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -239,6 +241,7 @@ async function handleEpisodes(req, res, url, id, season) {
|
|||||||
episode_number: e.episode_number,
|
episode_number: e.episode_number,
|
||||||
name: e.name,
|
name: e.name,
|
||||||
air_date: e.air_date || '',
|
air_date: e.air_date || '',
|
||||||
|
still: e.still_path ? `https://image.tmdb.org/t/p/w300${e.still_path}` : '',
|
||||||
})),
|
})),
|
||||||
});
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|||||||
@@ -230,13 +230,37 @@ select.field {
|
|||||||
|
|
||||||
.card__meta {
|
.card__meta {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-xs);
|
||||||
color: var(--color-text-faint);
|
color: var(--color-text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__meta__text {
|
||||||
|
min-width: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card__ep {
|
||||||
|
color: var(--color-text-dim);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__ep-dot {
|
||||||
|
margin: 0 2px;
|
||||||
|
color: var(--color-text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__dot {
|
||||||
|
color: var(--color-text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
.card__progress {
|
.card__progress {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -676,6 +700,11 @@ select.field {
|
|||||||
color: rgba(255, 255, 255, 0.55);
|
color: rgba(255, 255, 255, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.player-sources__group--error {
|
||||||
|
color: var(--color-danger);
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
.source-item {
|
.source-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
+543
-225
@@ -4,6 +4,236 @@
|
|||||||
page-level blocks and handles responsive behavior.
|
page-level blocks and handles responsive behavior.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/* ---- home: hero carousel ------------------------------------------------------ */
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
height: clamp(440px, 72vh, 640px);
|
||||||
|
margin: calc(-1 * var(--space-5)) 0 var(--space-6);
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--color-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__slides,
|
||||||
|
.hero__slide {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__slide {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 600ms ease, visibility 0s linear 600ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__slide.is-active {
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
transition: opacity 600ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__backdrop {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transform: scale(1.04);
|
||||||
|
transition: transform 8s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__slide.is-active .hero__backdrop {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__scrim {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.58) 45%, rgba(0, 0, 0, 0.22) 75%, rgba(0, 0, 0, 0.05) 100%),
|
||||||
|
linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.05) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__fade {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 34%;
|
||||||
|
background: linear-gradient(to top, var(--color-bg) 2%, color-mix(in srgb, var(--color-bg) 72%, transparent) 58%, transparent 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__inner {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--container-max);
|
||||||
|
padding: 0 var(--container-pad);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__content {
|
||||||
|
max-width: 620px;
|
||||||
|
padding-bottom: clamp(72px, 12vh, 112px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__kicker {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
padding: 4px 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
color: rgba(255, 255, 255, 0.78);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__logo {
|
||||||
|
max-width: min(420px, 60vw);
|
||||||
|
max-height: 140px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__title {
|
||||||
|
font-size: clamp(2.2rem, 5vw, 3.6rem);
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
color: rgba(255, 255, 255, 0.78);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__rating {
|
||||||
|
color: var(--color-star);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__dot {
|
||||||
|
color: rgba(255, 255, 255, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__meta .badge {
|
||||||
|
border-color: rgba(255, 255, 255, 0.18);
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
color: rgba(255, 255, 255, 0.88);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__overview {
|
||||||
|
max-width: 58ch;
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
line-height: 1.6;
|
||||||
|
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-3);
|
||||||
|
margin-top: var(--space-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__play {
|
||||||
|
padding: 10px 24px;
|
||||||
|
font-size: var(--text-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__play svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__arrow {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: rgba(10, 10, 10, 0.42);
|
||||||
|
color: #fff;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 160ms ease, background 120ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero:hover .hero__arrow,
|
||||||
|
.hero__arrow:focus-visible {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__arrow:hover {
|
||||||
|
background: rgba(10, 10, 10, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__arrow svg {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__arrow--prev {
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__arrow--next {
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__dots {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: var(--space-5);
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: rgba(255, 255, 255, 0.32);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: width 160ms ease, background 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__dot.is-active {
|
||||||
|
width: 24px;
|
||||||
|
background: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- search ------------------------------------------------------------------ */
|
/* ---- search ------------------------------------------------------------------ */
|
||||||
|
|
||||||
.search-bar {
|
.search-bar {
|
||||||
@@ -35,99 +265,6 @@
|
|||||||
color: var(--color-text-faint);
|
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 + controls live in components.css) ------------- */
|
/* ---- watch: player (.player-wrap + controls live in components.css) ------------- */
|
||||||
|
|
||||||
.player-status {
|
.player-status {
|
||||||
@@ -176,129 +313,6 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- settings ------------------------------------------------------------------ */
|
/* ---- settings ------------------------------------------------------------------ */
|
||||||
|
|
||||||
.settings {
|
.settings {
|
||||||
@@ -428,19 +442,21 @@
|
|||||||
--card-width: 132px;
|
--card-width: 132px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.watch-hero {
|
.hero {
|
||||||
flex-direction: column;
|
height: clamp(360px, 58vh, 520px);
|
||||||
align-items: flex-start;
|
margin-bottom: var(--space-5);
|
||||||
padding: var(--space-4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.watch-hero__poster {
|
.hero__content {
|
||||||
flex-basis: auto;
|
padding-bottom: 64px;
|
||||||
width: 132px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.watch-hero__title {
|
.hero__overview {
|
||||||
font-size: var(--text-2xl);
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__arrow {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar__form {
|
.search-bar__form {
|
||||||
@@ -462,3 +478,305 @@
|
|||||||
padding: var(--space-4);
|
padding: var(--space-4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.watch-page .page--watch {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-page .site-header {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
backdrop-filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-page.is-scrolled .site-header {
|
||||||
|
background: color-mix(in srgb, var(--color-bg) 85%, transparent);
|
||||||
|
border-bottom-color: var(--color-border);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero {
|
||||||
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
|
margin-top: calc(var(--header-height) * -1);
|
||||||
|
min-height: min(85svh, 900px);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--color-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__backdrop {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -2;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-color: var(--color-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__scrim {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
background:
|
||||||
|
linear-gradient(
|
||||||
|
180deg,
|
||||||
|
color-mix(in srgb, var(--color-bg) 20%, transparent) 0%,
|
||||||
|
color-mix(in srgb, var(--color-bg) 55%, transparent) 55%,
|
||||||
|
var(--color-bg) 100%
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
90deg,
|
||||||
|
color-mix(in srgb, var(--color-bg) 85%, transparent) 0%,
|
||||||
|
transparent 65%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__inner {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--container-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: calc(var(--header-height) + var(--space-8)) var(--container-pad) var(--space-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__logo {
|
||||||
|
max-width: min(420px, 60vw);
|
||||||
|
max-height: 140px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(2.2rem, 6vw, 4.5rem);
|
||||||
|
line-height: 1.02;
|
||||||
|
letter-spacing: -0.035em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2) var(--space-3);
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
color: var(--color-text-dim);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__rating {
|
||||||
|
color: var(--color-star);
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__dot {
|
||||||
|
color: var(--color-text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__genres {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__overview {
|
||||||
|
max-width: 72ch;
|
||||||
|
margin: var(--space-4) 0 0;
|
||||||
|
color: var(--color-text-dim);
|
||||||
|
line-height: 1.55;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__actions {
|
||||||
|
margin-top: var(--space-6);
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__actions .btn--primary {
|
||||||
|
padding: var(--space-3) var(--space-6);
|
||||||
|
font-size: var(--text-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-episodes {
|
||||||
|
padding: var(--space-8) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-episodes__title {
|
||||||
|
margin: 0 0 var(--space-4);
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.season-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
overflow-x: auto;
|
||||||
|
padding-bottom: var(--space-2);
|
||||||
|
margin-bottom: var(--space-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-shelf {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-auto-columns: minmax(220px, 1fr);
|
||||||
|
gap: var(--space-4);
|
||||||
|
overflow-x: auto;
|
||||||
|
scroll-snap-type: x mandatory;
|
||||||
|
padding: var(--space-2) var(--space-2) var(--space-3);
|
||||||
|
scroll-padding: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-shelf__loading,
|
||||||
|
.episode-shelf__empty {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card {
|
||||||
|
scroll-snap-align: start;
|
||||||
|
text-align: left;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card--current {
|
||||||
|
outline: 2px solid var(--color-accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card__thumb {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--color-surface-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card__thumb img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card__thumb--empty {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
color: var(--color-text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card__progress {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card__body {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
padding: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card__num {
|
||||||
|
color: var(--color-text-faint);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card__title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card__meta {
|
||||||
|
color: var(--color-text-dim);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: #000;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-overlay[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.player-open {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.player-open .player-overlay {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-overlay__close {
|
||||||
|
position: absolute;
|
||||||
|
top: var(--space-4);
|
||||||
|
right: var(--space-4);
|
||||||
|
z-index: 20;
|
||||||
|
background: color-mix(in srgb, #000 60%, transparent);
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid rgb(255 255 255 / 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#playerOverlay .player-wrap {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
height: 100dvh;
|
||||||
|
aspect-ratio: auto;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#playerOverlay .watch-toolbar {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: var(--space-5);
|
||||||
|
z-index: 2;
|
||||||
|
background: color-mix(in srgb, #000 65%, transparent);
|
||||||
|
border: 1px solid rgb(255 255 255 / 10%);
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.watch-hero {
|
||||||
|
min-height: 70svh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__inner {
|
||||||
|
padding-bottom: var(--space-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-hero__actions .btn--primary {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-shelf {
|
||||||
|
grid-auto-columns: minmax(160px, 80vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-overlay__close {
|
||||||
|
top: var(--space-2);
|
||||||
|
right: var(--space-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+9
-6
@@ -9,13 +9,12 @@
|
|||||||
<link rel="stylesheet" href="css/components.css">
|
<link rel="stylesheet" href="css/components.css">
|
||||||
<link rel="stylesheet" href="css/pages.css">
|
<link rel="stylesheet" href="css/pages.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="home-page">
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="container site-header__inner">
|
<div class="container site-header__inner">
|
||||||
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
||||||
<nav class="site-header__nav" aria-label="Primary">
|
<nav class="site-header__nav" aria-label="Primary">
|
||||||
<a href="index.html" class="is-active" aria-current="page">Home</a>
|
|
||||||
<a href="search.html">Search</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<div class="site-header__actions">
|
<div class="site-header__actions">
|
||||||
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
||||||
@@ -28,14 +27,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="container page" id="content">
|
<main class="page" id="content">
|
||||||
|
<div id="heroSlot"></div>
|
||||||
|
<div class="container">
|
||||||
<div id="sections"></div>
|
<div id="sections"></div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span>bug.tv</span>
|
<span>tv.bug.tools</span>
|
||||||
<span>API: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
<span>api: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
||||||
|
<span>tv.bug.tools doesn't store files, but provides links to external services.</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|||||||
+123
-5
@@ -1,7 +1,21 @@
|
|||||||
|
/*
|
||||||
|
API — two upstreams:
|
||||||
|
1. the bug-tv REST server (SR.config.getBase()): provider catalog,
|
||||||
|
/streams lookup, and the /proxy/media tunnel the player needs (CORS,
|
||||||
|
headers, m3u8 rewrite).
|
||||||
|
2. TMDB, called straight from the browser (it is CORS-enabled): search,
|
||||||
|
trending, details, seasons, episodes. Each returns the same shape the
|
||||||
|
server's endpoints used to, so the pages are unchanged.
|
||||||
|
|
||||||
|
Keeping catalog traffic off the server means it only does provider scraping
|
||||||
|
and stream proxying.
|
||||||
|
*/
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
const TMDB_BASE = 'https://api.themoviedb.org/3';
|
||||||
|
const TMDB_IMG = 'https://image.tmdb.org/t/p/';
|
||||||
|
|
||||||
async function request(path, params) {
|
async function request(path, params) {
|
||||||
const url = new URL(SR.config.getBase() + path);
|
const url = new URL(SR.config.getBase() + path);
|
||||||
if (params) {
|
if (params) {
|
||||||
@@ -28,6 +42,38 @@
|
|||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Direct TMDB call. `key` overrides the configured key (Settings "Test").
|
||||||
|
async function tmdb(pathname, params, key) {
|
||||||
|
const url = new URL(TMDB_BASE + pathname);
|
||||||
|
url.searchParams.set('api_key', key || SR.config.getTmdbKey());
|
||||||
|
url.searchParams.set('language', 'en-US');
|
||||||
|
if (params) {
|
||||||
|
for (const [k, v] of Object.entries(params)) {
|
||||||
|
if (v === undefined || v === null || v === '') continue;
|
||||||
|
url.searchParams.set(k, String(v));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let res;
|
||||||
|
try {
|
||||||
|
res = await fetch(url.toString());
|
||||||
|
} catch (e) {
|
||||||
|
throw new Error('cannot reach the TMDB API — check your connection or the TMDB API key in Settings');
|
||||||
|
}
|
||||||
|
let data = null;
|
||||||
|
try {
|
||||||
|
data = await res.json();
|
||||||
|
} catch (e) {
|
||||||
|
/* non-JSON body */
|
||||||
|
}
|
||||||
|
if (!res.ok) {
|
||||||
|
if (res.status === 401) {
|
||||||
|
throw new Error('TMDB rejected the API key — check "TMDB API key" in Settings');
|
||||||
|
}
|
||||||
|
throw new Error((data && (data.status_message || data.error)) || `TMDB error: HTTP ${res.status}`);
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
// route a media/subtitle URL through the API proxy (CORS, headers, m3u8 rewrite)
|
// route a media/subtitle URL through the API proxy (CORS, headers, m3u8 rewrite)
|
||||||
function proxyUrl(target, headers) {
|
function proxyUrl(target, headers) {
|
||||||
const q = new URLSearchParams();
|
const q = new URLSearchParams();
|
||||||
@@ -36,15 +82,87 @@
|
|||||||
return SR.config.getBase() + '/proxy/media?' + q.toString();
|
return SR.config.getBase() + '/proxy/media?' + q.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Same shapes the server endpoints used to return.
|
||||||
|
function searchResult(m) {
|
||||||
|
const isTv = m.media_type === 'tv';
|
||||||
|
const date = isTv ? m.first_air_date : m.release_date;
|
||||||
|
return {
|
||||||
|
tmdb_id: m.id,
|
||||||
|
type: isTv ? 'tv' : 'movie',
|
||||||
|
name: m.title || m.name,
|
||||||
|
year: date ? String(date).slice(0, 4) : '',
|
||||||
|
poster: m.poster_path ? `${TMDB_IMG}w342${m.poster_path}` : '',
|
||||||
|
backdrop: m.backdrop_path ? `${TMDB_IMG}w1280${m.backdrop_path}` : '',
|
||||||
|
rating: m.vote_average ? Number(m.vote_average).toFixed(1) : '',
|
||||||
|
overview: m.overview || '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function fullImage(pathname) {
|
||||||
|
return pathname ? `${TMDB_IMG}original${pathname}` : '';
|
||||||
|
}
|
||||||
|
|
||||||
window.SR = window.SR || {};
|
window.SR = window.SR || {};
|
||||||
SR.api = {
|
SR.api = {
|
||||||
request,
|
request,
|
||||||
|
tmdb,
|
||||||
proxyUrl,
|
proxyUrl,
|
||||||
search: (q) => request('/search', { q }),
|
|
||||||
trending: (type, timeWindow) => request('/trending', { type, window: timeWindow }),
|
// — TMDB, straight from the browser —
|
||||||
details: (type, id) => request(`/${type}/${id}`),
|
search: (q) =>
|
||||||
seasons: (id) => request(`/tv/${id}/seasons`),
|
tmdb('/search/multi', { query: q, include_adult: 'false', page: 1 }).then((r) => {
|
||||||
episodes: (id, season) => request(`/tv/${id}/seasons/${season}`),
|
const results = (r.results || [])
|
||||||
|
.filter((m) => m.media_type === 'movie' || m.media_type === 'tv')
|
||||||
|
.slice(0, 15)
|
||||||
|
.map(searchResult);
|
||||||
|
return { query: q, count: results.length, results };
|
||||||
|
}),
|
||||||
|
trending: (type, timeWindow) => {
|
||||||
|
const t = ['movie', 'tv', 'all'].includes(type) ? type : 'all';
|
||||||
|
const w = timeWindow === 'day' ? 'day' : 'week';
|
||||||
|
return tmdb(`/trending/${t}/${w}`).then((r) => {
|
||||||
|
const results = (r.results || []).slice(0, 20).map(searchResult);
|
||||||
|
return { type: t, window: w, count: results.length, results };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
details: (type, id) =>
|
||||||
|
tmdb(`/${type}/${id}`, { append_to_response: 'images' }).then((d) => {
|
||||||
|
d.poster_url = fullImage(d.poster_path);
|
||||||
|
d.backdrop_url = fullImage(d.backdrop_path);
|
||||||
|
if (d.images) {
|
||||||
|
for (const key of Object.keys(d.images)) {
|
||||||
|
d.images[key] = (d.images[key] || []).map((im) => ({ ...im, url: fullImage(im.file_path) }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return d;
|
||||||
|
}),
|
||||||
|
seasons: (id) =>
|
||||||
|
tmdb(`/tv/${id}`).then((r) => {
|
||||||
|
const seasons = (r.seasons || [])
|
||||||
|
.filter((s) => s.season_number > 0 && (s.episode_count || 0) > 0)
|
||||||
|
.map((s) => ({
|
||||||
|
season_number: s.season_number,
|
||||||
|
name: s.name,
|
||||||
|
episode_count: s.episode_count,
|
||||||
|
air_date: s.air_date || '',
|
||||||
|
}));
|
||||||
|
return { tmdb_id: id, count: seasons.length, seasons };
|
||||||
|
}),
|
||||||
|
episodes: (id, season) =>
|
||||||
|
tmdb(`/tv/${id}/season/${season}`).then((r) => {
|
||||||
|
const episodes = (r.episodes || [])
|
||||||
|
.slice()
|
||||||
|
.sort((a, b) => a.episode_number - b.episode_number)
|
||||||
|
.map((e) => ({
|
||||||
|
episode_number: e.episode_number,
|
||||||
|
name: e.name,
|
||||||
|
air_date: e.air_date || '',
|
||||||
|
still: e.still_path ? `${TMDB_IMG}w300${e.still_path}` : '',
|
||||||
|
}));
|
||||||
|
return { tmdb_id: id, season: parseInt(season, 10), count: episodes.length, episodes };
|
||||||
|
}),
|
||||||
|
|
||||||
|
// — bug-tv server (providers, streams, proxy) —
|
||||||
streams: ({ tmdb, type, season, episode, providers }) =>
|
streams: ({ tmdb, type, season, episode, providers }) =>
|
||||||
request('/streams', {
|
request('/streams', {
|
||||||
tmdb,
|
tmdb,
|
||||||
|
|||||||
+145
-4
@@ -17,6 +17,8 @@
|
|||||||
name: r.name || r.title || '',
|
name: r.name || r.title || '',
|
||||||
year: r.year || '',
|
year: r.year || '',
|
||||||
poster: r.poster || r.poster_url || '',
|
poster: r.poster || r.poster_url || '',
|
||||||
|
backdrop: r.backdrop || r.backdrop_url || '',
|
||||||
|
rating: r.rating || (r.vote_average ? Number(r.vote_average).toFixed(1) : ''),
|
||||||
overview: r.overview || '',
|
overview: r.overview || '',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -48,13 +50,18 @@
|
|||||||
: item.type === 'tv'
|
: item.type === 'tv'
|
||||||
? 'TV'
|
? 'TV'
|
||||||
: 'Movie');
|
: 'Movie');
|
||||||
|
const metaHtml = item.metaHtml || `<span class="card__meta__text">${esc(meta)}</span>`;
|
||||||
|
const title = item.hideTitle
|
||||||
|
? ''
|
||||||
|
: `<span class="card__title">${esc(item.name)}</span>`;
|
||||||
el.innerHTML = `
|
el.innerHTML = `
|
||||||
<span class="card__poster${poster ? '' : ' card__poster--empty'}">
|
<span class="card__poster${poster ? '' : ' card__poster--empty'}">
|
||||||
${poster ? `<img src="${poster}" alt="" loading="lazy">` : '?'}
|
${poster ? `<img src="${poster}" alt="" loading="lazy">` : '?'}
|
||||||
${progress}
|
${progress}
|
||||||
</span>
|
</span>
|
||||||
<span class="card__title">${esc(item.name)}</span>
|
${title}
|
||||||
<span class="card__meta">${esc(meta)}</span>`;
|
<span class="card__meta">${metaHtml}</span>`;
|
||||||
|
if (item.hideTitle) el.setAttribute('aria-label', `${item.name} — ${meta}`);
|
||||||
return el;
|
return el;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,15 +101,149 @@
|
|||||||
episode: r.episode,
|
episode: r.episode,
|
||||||
name: r.show || r.title || '',
|
name: r.show || r.title || '',
|
||||||
poster: r.poster || '',
|
poster: r.poster || '',
|
||||||
|
hideTitle: true,
|
||||||
meta:
|
meta:
|
||||||
r.type === 'tv'
|
r.type === 'tv'
|
||||||
? `S${r.season}E${r.episode}${r.title ? ` · ${r.title}` : ''} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
|
? `S${r.season} · E${r.episode} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
|
||||||
: `Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left`,
|
: `Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left`,
|
||||||
|
metaHtml:
|
||||||
|
r.type === 'tv'
|
||||||
|
? `<span class="card__ep">S${r.season} <span class="card__ep-dot">·</span> E${r.episode}</span><span class="card__dot">·</span><span class="card__meta__text">${formatSeconds(Math.max(0, r.d - r.t))} left</span>`
|
||||||
|
: `<span class="card__meta__text">Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left</span>`,
|
||||||
progress: r.d ? r.t / r.d : 0,
|
progress: r.d ? r.t / r.d : 0,
|
||||||
}));
|
}));
|
||||||
return row('Continue watching', items);
|
return row('Continue watching', items);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function heroCarousel(items) {
|
||||||
|
const data = (items || []).filter((item) => item && item.backdrop && item.name);
|
||||||
|
if (!data.length) return null;
|
||||||
|
|
||||||
|
const section = document.createElement('section');
|
||||||
|
section.className = 'hero';
|
||||||
|
section.setAttribute('aria-roledescription', 'carousel');
|
||||||
|
section.setAttribute('aria-label', 'Featured titles');
|
||||||
|
|
||||||
|
const wrap = document.createElement('div');
|
||||||
|
wrap.className = 'hero__slides';
|
||||||
|
const slideEls = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < data.length; i += 1) {
|
||||||
|
const item = data[i];
|
||||||
|
const slide = document.createElement('article');
|
||||||
|
slide.className = i === 0 ? 'hero__slide is-active' : 'hero__slide';
|
||||||
|
slide.setAttribute('role', 'group');
|
||||||
|
slide.setAttribute('aria-roledescription', 'slide');
|
||||||
|
slide.setAttribute('aria-label', `${i + 1} of ${data.length}: ${item.name}`);
|
||||||
|
|
||||||
|
const typeLabel = item.type === 'tv' ? 'TV' : 'Movie';
|
||||||
|
const metaBits = [
|
||||||
|
item.rating ? `<span class="hero__rating">★ ${esc(item.rating)}</span>` : '',
|
||||||
|
item.year ? `<span>${esc(item.year)}</span>` : '',
|
||||||
|
`<span class="badge">${esc(typeLabel)}</span>`,
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('<span class="hero__dot" style="height: 1px;">·</span>');
|
||||||
|
|
||||||
|
slide.innerHTML = `
|
||||||
|
<img class="hero__backdrop" src="${item.backdrop}" alt="" loading="${i === 0 ? 'eager' : 'lazy'}">
|
||||||
|
<div class="hero__scrim"></div>
|
||||||
|
<div class="hero__fade"></div>
|
||||||
|
<div class="container hero__inner">
|
||||||
|
<div class="hero__content">
|
||||||
|
<h1 class="hero__title">${esc(item.name)}</h1>
|
||||||
|
<div class="hero__meta">${metaBits}</div>
|
||||||
|
${item.overview ? `<p class="hero__overview">${esc(item.overview)}</p>` : ''}
|
||||||
|
<div class="hero__actions">
|
||||||
|
<a class="btn btn--primary hero__play" href="${watchHref(item)}">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
|
||||||
|
<span>Play</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
wrap.appendChild(slide);
|
||||||
|
slideEls.push(slide);
|
||||||
|
}
|
||||||
|
|
||||||
|
section.appendChild(wrap);
|
||||||
|
|
||||||
|
if (slideEls.length > 1) {
|
||||||
|
const prev = document.createElement('button');
|
||||||
|
prev.type = 'button';
|
||||||
|
prev.className = 'hero__arrow hero__arrow--prev';
|
||||||
|
prev.setAttribute('aria-label', 'Previous slide');
|
||||||
|
prev.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"></path></svg>';
|
||||||
|
|
||||||
|
const next = document.createElement('button');
|
||||||
|
next.type = 'button';
|
||||||
|
next.className = 'hero__arrow hero__arrow--next';
|
||||||
|
next.setAttribute('aria-label', 'Next slide');
|
||||||
|
next.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"></path></svg>';
|
||||||
|
|
||||||
|
const dots = document.createElement('div');
|
||||||
|
dots.className = 'hero__dots';
|
||||||
|
const dotEls = [];
|
||||||
|
for (let i = 0; i < slideEls.length; i += 1) {
|
||||||
|
const dot = document.createElement('button');
|
||||||
|
dot.type = 'button';
|
||||||
|
dot.className = i === 0 ? 'hero__dot is-active' : 'hero__dot';
|
||||||
|
dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
|
||||||
|
dots.appendChild(dot);
|
||||||
|
dotEls.push(dot);
|
||||||
|
}
|
||||||
|
|
||||||
|
section.append(prev, next, dots);
|
||||||
|
|
||||||
|
let current = 0;
|
||||||
|
let timer = null;
|
||||||
|
|
||||||
|
function goTo(index) {
|
||||||
|
current = (index + slideEls.length) % slideEls.length;
|
||||||
|
slideEls.forEach((slide, i) => slide.classList.toggle('is-active', i === current));
|
||||||
|
dotEls.forEach((dot, i) => dot.classList.toggle('is-active', i === current));
|
||||||
|
}
|
||||||
|
|
||||||
|
function start() {
|
||||||
|
stop();
|
||||||
|
if (!document.hidden) timer = setInterval(() => goTo(current + 1), 7000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stop() {
|
||||||
|
if (timer) {
|
||||||
|
clearInterval(timer);
|
||||||
|
timer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
prev.addEventListener('click', () => {
|
||||||
|
goTo(current - 1);
|
||||||
|
start();
|
||||||
|
});
|
||||||
|
next.addEventListener('click', () => {
|
||||||
|
goTo(current + 1);
|
||||||
|
start();
|
||||||
|
});
|
||||||
|
dotEls.forEach((dot, i) => dot.addEventListener('click', () => {
|
||||||
|
goTo(i);
|
||||||
|
start();
|
||||||
|
}));
|
||||||
|
section.addEventListener('mouseenter', stop);
|
||||||
|
section.addEventListener('mouseleave', start);
|
||||||
|
section.addEventListener('focusin', stop);
|
||||||
|
section.addEventListener('focusout', (e) => {
|
||||||
|
if (!section.contains(e.relatedTarget)) start();
|
||||||
|
});
|
||||||
|
document.addEventListener('visibilitychange', () => {
|
||||||
|
if (document.hidden) stop();
|
||||||
|
else start();
|
||||||
|
});
|
||||||
|
start();
|
||||||
|
}
|
||||||
|
|
||||||
|
return section;
|
||||||
|
}
|
||||||
|
|
||||||
window.SR = window.SR || {};
|
window.SR = window.SR || {};
|
||||||
SR.cards = { normalizeItem, card, row, grid, emptyState, continueRow };
|
SR.cards = { normalizeItem, card, row, grid, emptyState, continueRow, watchHref, heroCarousel };
|
||||||
})();
|
})();
|
||||||
|
|||||||
+78
-6
@@ -9,13 +9,22 @@
|
|||||||
Providers: until the user toggles anything in Settings, the server's own
|
Providers: until the user toggles anything in Settings, the server's own
|
||||||
enabled list is used. Once customized, a {name: bool} map is stored in
|
enabled list is used. Once customized, a {name: bool} map is stored in
|
||||||
localStorage; names missing from the map default to enabled.
|
localStorage; names missing from the map default to enabled.
|
||||||
|
|
||||||
|
TMDB key: search/trending/details/images go straight to TMDB from the
|
||||||
|
browser (the server only serves providers, streams and the media proxy).
|
||||||
|
The key resolves from localStorage (Settings) or the built-in default.
|
||||||
*/
|
*/
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const DEFAULT_BASE = 'https://api-tv.bug.tools';
|
const DEFAULT_BASE = 'https://api-tv.bug.tools';
|
||||||
const STORAGE_KEY = 'streamreverse.apiBase.v1';
|
const STORAGE_KEY = 'bug-tv.apiBase.v1';
|
||||||
const PROVIDER_KEY = 'streamreverse.providers.v1';
|
const PROVIDER_KEY = 'bug-tv.providers.v1';
|
||||||
|
|
||||||
|
// Search/details/images go straight to TMDB from the browser; this key
|
||||||
|
// only ever reaches api.themoviedb.org.
|
||||||
|
const DEFAULT_TMDB_KEY = 'ac014b130a8e6344c91dff4e68b18d47';
|
||||||
|
const TMDB_KEY_STORAGE_KEY = 'bug-tv.tmdbKey.v1';
|
||||||
|
|
||||||
function normalize(value) {
|
function normalize(value) {
|
||||||
let v = String(value || '').trim();
|
let v = String(value || '').trim();
|
||||||
@@ -54,6 +63,34 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getTmdbKey() {
|
||||||
|
try {
|
||||||
|
const stored = localStorage.getItem(TMDB_KEY_STORAGE_KEY);
|
||||||
|
if (stored) return stored.trim();
|
||||||
|
} catch (e) {
|
||||||
|
/* private mode etc. */
|
||||||
|
}
|
||||||
|
return DEFAULT_TMDB_KEY;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTmdbKey(value) {
|
||||||
|
const v = String(value || '').trim();
|
||||||
|
try {
|
||||||
|
localStorage.setItem(TMDB_KEY_STORAGE_KEY, v);
|
||||||
|
} catch (e) {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearTmdbKey() {
|
||||||
|
try {
|
||||||
|
localStorage.removeItem(TMDB_KEY_STORAGE_KEY);
|
||||||
|
} catch (e) {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// null → user has not customized; caller should fall back to server defaults
|
// null → user has not customized; caller should fall back to server defaults
|
||||||
function getProviders() {
|
function getProviders() {
|
||||||
try {
|
try {
|
||||||
@@ -82,16 +119,45 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const PREFERRED_PROVIDERS = ['cineby', 'playimdb', 'vidrock'];
|
||||||
|
|
||||||
// Merge the server's provider lists with the user's toggles.
|
// Merge the server's provider lists with the user's toggles.
|
||||||
// Returns the enabled provider names, in the server's `all` order.
|
// Returns the enabled provider names, in the server's `all` order.
|
||||||
function enabledProviders(allNames, serverEnabled) {
|
function enabledProviders(allNames, serverEnabled) {
|
||||||
const all = Array.isArray(allNames) ? allNames : [];
|
const all = Array.isArray(allNames) ? allNames : [];
|
||||||
const overrides = getProviders();
|
const overrides = getProviders();
|
||||||
if (!overrides) {
|
if (overrides) {
|
||||||
const base = Array.isArray(serverEnabled) && serverEnabled.length ? serverEnabled : all;
|
return Object.keys(overrides).filter((n) => overrides[n] !== false);
|
||||||
return all.filter((n) => base.includes(n));
|
|
||||||
}
|
}
|
||||||
return all.filter((n) => overrides[n] !== false);
|
const server = Array.isArray(serverEnabled) ? serverEnabled : [];
|
||||||
|
const wanted = new Set([...PREFERRED_PROVIDERS, ...server]);
|
||||||
|
return (all.length ? all : PREFERRED_PROVIDERS.slice()).filter((n) =>
|
||||||
|
wanted.has(n)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Watch-page resolver. Re-reads localStorage on every call so provider
|
||||||
|
// changes made in Settings apply to the next lookup without a reload.
|
||||||
|
function resolveProviders(catalog) {
|
||||||
|
const all = Array.isArray(catalog && catalog.all) ? catalog.all : [];
|
||||||
|
const serverEnabled = Array.isArray(catalog && catalog.enabled) ? catalog.enabled : [];
|
||||||
|
const overrides = getProviders();
|
||||||
|
if (overrides) {
|
||||||
|
return {
|
||||||
|
names: Object.keys(overrides).filter((n) => overrides[n] !== false),
|
||||||
|
customized: true,
|
||||||
|
useServerDefaults: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const wanted = new Set([...PREFERRED_PROVIDERS, ...serverEnabled]);
|
||||||
|
const names = all.length
|
||||||
|
? all.filter((n) => wanted.has(n))
|
||||||
|
: PREFERRED_PROVIDERS.slice();
|
||||||
|
return {
|
||||||
|
names,
|
||||||
|
customized: false,
|
||||||
|
useServerDefaults: !names.length,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
window.SR = window.SR || {};
|
window.SR = window.SR || {};
|
||||||
@@ -99,12 +165,18 @@
|
|||||||
DEFAULT_BASE,
|
DEFAULT_BASE,
|
||||||
STORAGE_KEY,
|
STORAGE_KEY,
|
||||||
PROVIDER_KEY,
|
PROVIDER_KEY,
|
||||||
|
DEFAULT_TMDB_KEY,
|
||||||
|
TMDB_KEY_STORAGE_KEY,
|
||||||
getBase,
|
getBase,
|
||||||
setBase,
|
setBase,
|
||||||
clearBase,
|
clearBase,
|
||||||
|
getTmdbKey,
|
||||||
|
setTmdbKey,
|
||||||
|
clearTmdbKey,
|
||||||
getProviders,
|
getProviders,
|
||||||
setProviders,
|
setProviders,
|
||||||
clearProviders,
|
clearProviders,
|
||||||
enabledProviders,
|
enabledProviders,
|
||||||
|
resolveProviders,
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|||||||
+54
-6
@@ -6,6 +6,7 @@
|
|||||||
|
|
||||||
SR.app.initChrome();
|
SR.app.initChrome();
|
||||||
|
|
||||||
|
const heroSlot = document.getElementById('heroSlot');
|
||||||
const sections = document.getElementById('sections');
|
const sections = document.getElementById('sections');
|
||||||
|
|
||||||
const cont = SR.cards.continueRow();
|
const cont = SR.cards.continueRow();
|
||||||
@@ -16,16 +17,63 @@
|
|||||||
sections.appendChild(SR.cards.row(title, data.results.map(SR.cards.normalizeItem)));
|
sections.appendChild(SR.cards.row(title, data.results.map(SR.cards.normalizeItem)));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function itemsFrom(data) {
|
||||||
|
return data && Array.isArray(data.results) ? data.results.map(SR.cards.normalizeItem) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadHeroLogos(section, items) {
|
||||||
|
const slides = section.querySelectorAll('.hero__slide');
|
||||||
|
items.forEach((item, i) => {
|
||||||
|
const slide = slides[i];
|
||||||
|
if (!slide || !item || item.tmdbId == null) return;
|
||||||
|
const titleEl = slide.querySelector('.hero__title');
|
||||||
|
if (!titleEl) return;
|
||||||
|
const logo = document.createElement('img');
|
||||||
|
logo.className = 'hero__logo';
|
||||||
|
logo.alt = item.name;
|
||||||
|
logo.hidden = true;
|
||||||
|
titleEl.insertAdjacentElement('beforebegin', logo);
|
||||||
|
SR.api.details(item.type, item.tmdbId)
|
||||||
|
.then((details) => {
|
||||||
|
const images = (details && details.images) || {};
|
||||||
|
const logos = images.logos || [];
|
||||||
|
const url = (logos.find((l) => l && l.url && String(l.iso_639_1 || '').toLowerCase() === 'en') || {}).url;
|
||||||
|
if (!url) return;
|
||||||
|
logo.onerror = () => {
|
||||||
|
logo.hidden = true;
|
||||||
|
titleEl.hidden = false;
|
||||||
|
};
|
||||||
|
logo.src = SR.util.tmdbResize(url, 'w500');
|
||||||
|
logo.hidden = false;
|
||||||
|
titleEl.hidden = true;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
|
const [movieRes, tvRes] = await Promise.allSettled([
|
||||||
|
SR.api.trending('movie', 'day'),
|
||||||
|
SR.api.trending('tv', 'week'),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (movieRes.status === 'fulfilled') appendRow(movieRes.value, 'Trending movies today');
|
||||||
|
else SR.app.showError(movieRes.reason, 'could not load trending movies');
|
||||||
|
|
||||||
|
if (tvRes.status === 'fulfilled') appendRow(tvRes.value, 'Trending shows this week');
|
||||||
|
else SR.app.showError(tvRes.reason, 'could not load trending shows');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
appendRow(await SR.api.trending('movie', 'day'), 'Trending movies today');
|
const heroData = [...itemsFrom(tvRes.value), ...itemsFrom(movieRes.value)]
|
||||||
} catch (e) {
|
.filter((item) => item.backdrop && item.overview && item.name)
|
||||||
SR.app.showError(e, 'could not load trending movies');
|
.slice(0, 6);
|
||||||
|
const hero = SR.cards.heroCarousel(heroData);
|
||||||
|
if (hero) {
|
||||||
|
heroSlot.appendChild(hero);
|
||||||
|
loadHeroLogos(hero, heroData);
|
||||||
}
|
}
|
||||||
try {
|
|
||||||
appendRow(await SR.api.trending('tv', 'week'), 'Trending shows this week');
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
SR.app.showError(e, 'could not load trending shows');
|
SR.app.showError(e, 'could not load featured titles');
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
})();
|
})();
|
||||||
|
|||||||
+38
-5
@@ -1,5 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
SETTINGS — source provider toggles, API server base URL, local data.
|
SETTINGS — source provider toggles, API server base URL, TMDB key, local data.
|
||||||
*/
|
*/
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
@@ -10,6 +10,8 @@
|
|||||||
const providersStatus = document.getElementById('providersStatus');
|
const providersStatus = document.getElementById('providersStatus');
|
||||||
const apiBaseInput = document.getElementById('apiBaseInput');
|
const apiBaseInput = document.getElementById('apiBaseInput');
|
||||||
const connStatus = document.getElementById('connStatus');
|
const connStatus = document.getElementById('connStatus');
|
||||||
|
const tmdbKeyInput = document.getElementById('tmdbKeyInput');
|
||||||
|
const tmdbStatus = document.getElementById('tmdbStatus');
|
||||||
const dataStatus = document.getElementById('dataStatus');
|
const dataStatus = document.getElementById('dataStatus');
|
||||||
|
|
||||||
/* ---- nav --------------------------------------------------------------------- */
|
/* ---- nav --------------------------------------------------------------------- */
|
||||||
@@ -54,8 +56,9 @@
|
|||||||
providerList.replaceChildren();
|
providerList.replaceChildren();
|
||||||
boxes.clear();
|
boxes.clear();
|
||||||
const overrides = SR.config.getProviders();
|
const overrides = SR.config.getProviders();
|
||||||
|
const enabled = SR.config.enabledProviders(allProviders, serverEnabled);
|
||||||
for (const name of allProviders) {
|
for (const name of allProviders) {
|
||||||
const checked = overrides ? overrides[name] !== false : serverEnabled.includes(name);
|
const checked = enabled.includes(name);
|
||||||
const label = document.createElement('label');
|
const label = document.createElement('label');
|
||||||
label.className = 'provider';
|
label.className = 'provider';
|
||||||
const input = document.createElement('input');
|
const input = document.createElement('input');
|
||||||
@@ -71,7 +74,7 @@
|
|||||||
providerList.appendChild(label);
|
providerList.appendChild(label);
|
||||||
}
|
}
|
||||||
const on = boxes.size ? Array.from(boxes.values()).filter((b) => b.checked).length : 0;
|
const on = boxes.size ? Array.from(boxes.values()).filter((b) => b.checked).length : 0;
|
||||||
const source = overrides ? 'your selection' : 'server defaults';
|
const source = overrides ? 'your selection' : 'default sources';
|
||||||
let host;
|
let host;
|
||||||
try { host = new URL(SR.config.getBase()).host; } catch (e) { host = SR.config.getBase(); }
|
try { host = new URL(SR.config.getBase()).host; } catch (e) { host = SR.config.getBase(); }
|
||||||
setStatus(providersStatus, `${on} of ${allProviders.length} enabled — ${source} · ${host}`);
|
setStatus(providersStatus, `${on} of ${allProviders.length} enabled — ${source} · ${host}`);
|
||||||
@@ -96,7 +99,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('providersReset').addEventListener('click', () =>
|
document.getElementById('providersReset').addEventListener('click', () =>
|
||||||
resetProviders('Using server defaults'));
|
resetProviders('Using default sources'));
|
||||||
|
|
||||||
async function initSources() {
|
async function initSources() {
|
||||||
try {
|
try {
|
||||||
@@ -138,6 +141,36 @@
|
|||||||
await testConnection();
|
await testConnection();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* ---- TMDB key ------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
tmdbKeyInput.value = SR.config.getTmdbKey();
|
||||||
|
|
||||||
|
async function testTmdbKey(key) {
|
||||||
|
setStatus(tmdbStatus, 'Testing TMDB key…');
|
||||||
|
try {
|
||||||
|
await SR.api.tmdb('/search/movie', { query: 'The Matrix', page: 1 }, key);
|
||||||
|
setStatus(tmdbStatus, 'TMDB key works — search, details and images load directly from TMDB.', 'ok');
|
||||||
|
} catch (e) {
|
||||||
|
setStatus(tmdbStatus, e.message, 'err');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('tmdbKeySave').addEventListener('click', async () => {
|
||||||
|
SR.config.setTmdbKey(tmdbKeyInput.value);
|
||||||
|
tmdbKeyInput.value = SR.config.getTmdbKey();
|
||||||
|
await testTmdbKey(SR.config.getTmdbKey());
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('tmdbKeyTest').addEventListener('click', async () => {
|
||||||
|
await testTmdbKey(tmdbKeyInput.value.trim());
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('tmdbKeyReset').addEventListener('click', async () => {
|
||||||
|
SR.config.clearTmdbKey();
|
||||||
|
tmdbKeyInput.value = SR.config.getTmdbKey();
|
||||||
|
await testTmdbKey(SR.config.getTmdbKey());
|
||||||
|
});
|
||||||
|
|
||||||
/* ---- data ---------------------------------------------------------------------------- */
|
/* ---- data ---------------------------------------------------------------------------- */
|
||||||
|
|
||||||
document.getElementById('clearHistory').addEventListener('click', () => {
|
document.getElementById('clearHistory').addEventListener('click', () => {
|
||||||
@@ -147,7 +180,7 @@
|
|||||||
|
|
||||||
document.getElementById('resetProviders').addEventListener('click', () => {
|
document.getElementById('resetProviders').addEventListener('click', () => {
|
||||||
resetProviders('');
|
resetProviders('');
|
||||||
setStatus(dataStatus, 'Source toggles reset to server defaults.');
|
setStatus(dataStatus, 'Source toggles reset to default sources.');
|
||||||
});
|
});
|
||||||
|
|
||||||
initSources();
|
initSources();
|
||||||
|
|||||||
+1
-1
@@ -24,7 +24,7 @@
|
|||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const KEY = 'streamreverse.resume.v1';
|
const KEY = 'bug-tv.resume.v1';
|
||||||
const MAX_RECORDS = 200;
|
const MAX_RECORDS = 200;
|
||||||
|
|
||||||
function readAll() {
|
function readAll() {
|
||||||
|
|||||||
+16
-1
@@ -50,6 +50,21 @@
|
|||||||
return url.replace(/\/t\/p\/[A-Za-z0-9._-]+/, `/t/p/${size}`);
|
return url.replace(/\/t\/p\/[A-Za-z0-9._-]+/, `/t/p/${size}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// True when the in-browser player can load the stream through the proxy.
|
||||||
|
function webPlayable(stream) {
|
||||||
|
const s = stream || {};
|
||||||
|
const url = String(s.url || '');
|
||||||
|
if (!/^https?:\/\//i.test(url)) return false;
|
||||||
|
const type = String(s.type || '').toLowerCase();
|
||||||
|
if (['magnet', 'torrent', 'dash', 'mkv', 'avi'].includes(type)) return false;
|
||||||
|
const isHls = type === 'm3u8' || /\.m3u8($|\?)/i.test(url);
|
||||||
|
const isDirect =
|
||||||
|
type === 'mp4' ||
|
||||||
|
type === 'webm' ||
|
||||||
|
/\.(mp4|m4v|webm)(\?|#|$)/i.test(url);
|
||||||
|
return isHls || isDirect;
|
||||||
|
}
|
||||||
|
|
||||||
window.SR = window.SR || {};
|
window.SR = window.SR || {};
|
||||||
SR.util = { escapeHtml, getParam, formatSeconds, runtimeLabel, debounce, tmdbResize };
|
SR.util = { escapeHtml, getParam, formatSeconds, runtimeLabel, debounce, tmdbResize, webPlayable };
|
||||||
})();
|
})();
|
||||||
|
|||||||
+326
-102
@@ -19,15 +19,29 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const heroEl = document.getElementById('hero');
|
||||||
|
const heroBackdrop = document.getElementById('heroBackdrop');
|
||||||
|
const heroTitleCard = document.getElementById('heroTitleCard');
|
||||||
|
const heroTitle = document.getElementById('heroTitle');
|
||||||
|
const heroMeta = document.getElementById('heroMeta');
|
||||||
|
const heroGenres = document.getElementById('heroGenres');
|
||||||
|
const heroOverview = document.getElementById('heroOverview');
|
||||||
|
const playButton = document.getElementById('playButton');
|
||||||
|
const playLabel = document.getElementById('playLabel');
|
||||||
|
const episodeSection = document.getElementById('episodeSection');
|
||||||
|
const seasonTabs = document.getElementById('seasonTabs');
|
||||||
|
const episodeShelf = document.getElementById('episodeShelf');
|
||||||
|
const playerOverlay = document.getElementById('playerOverlay');
|
||||||
|
const playerClose = document.getElementById('playerClose');
|
||||||
|
|
||||||
|
// custom player controls
|
||||||
const video = document.getElementById('video');
|
const video = document.getElementById('video');
|
||||||
const statusEl = document.getElementById('playerStatus');
|
const statusEl = document.getElementById('playerStatus');
|
||||||
const sourceLabel = document.getElementById('sourceLabel');
|
const sourceLabel = document.getElementById('sourceLabel');
|
||||||
const resumeNote = document.getElementById('resumeNote');
|
const resumeNote = document.getElementById('resumeNote');
|
||||||
const sourcesPanel = document.getElementById('sourcesPanel');
|
const sourcesPanel = document.getElementById('sourcesPanel');
|
||||||
const sourcesClose = document.getElementById('sourcesClose');
|
const sourcesClose = document.getElementById('sourcesClose');
|
||||||
const episodeSection = document.getElementById('episodes');
|
|
||||||
|
|
||||||
// custom player controls
|
|
||||||
const playerWrap = document.getElementById('playerWrap');
|
const playerWrap = document.getElementById('playerWrap');
|
||||||
const bigPlay = document.getElementById('bigPlay');
|
const bigPlay = document.getElementById('bigPlay');
|
||||||
const pcSeek = document.getElementById('pcSeek');
|
const pcSeek = document.getElementById('pcSeek');
|
||||||
@@ -40,22 +54,26 @@
|
|||||||
const pcGear = document.getElementById('pcGear');
|
const pcGear = document.getElementById('pcGear');
|
||||||
const pcPip = document.getElementById('pcPip');
|
const pcPip = document.getElementById('pcPip');
|
||||||
const pcFull = document.getElementById('pcFull');
|
const pcFull = document.getElementById('pcFull');
|
||||||
const seasonSelect = document.getElementById('seasonSelect');
|
|
||||||
const episodeGrid = document.getElementById('episodeGrid');
|
|
||||||
const prevBtn = document.getElementById('prevEpisode');
|
|
||||||
const nextBtn = document.getElementById('nextEpisode');
|
|
||||||
|
|
||||||
const state = {
|
const state = {
|
||||||
details: null,
|
details: null,
|
||||||
seasons: [],
|
seasons: [],
|
||||||
episodes: [],
|
episodes: [],
|
||||||
streams: [],
|
streams: [],
|
||||||
|
unsupported: [],
|
||||||
|
providerErrors: {},
|
||||||
|
loadErrors: {},
|
||||||
sourceIndex: -1,
|
sourceIndex: -1,
|
||||||
season: null,
|
season: null,
|
||||||
episode: null,
|
episode: null,
|
||||||
loadedKey: null,
|
loadedKey: null,
|
||||||
|
loadToken: 0,
|
||||||
|
overlayOpen: false,
|
||||||
|
lastFocusedElement: null,
|
||||||
|
pendingClose: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/* ---- status overlay ------------------------------------------------------ */
|
/* ---- status overlay ------------------------------------------------------ */
|
||||||
|
|
||||||
function closeSources() {
|
function closeSources() {
|
||||||
@@ -320,7 +338,16 @@
|
|||||||
break;
|
break;
|
||||||
case 'Escape':
|
case 'Escape':
|
||||||
if (!sourcesPanel.hidden) closeSources();
|
if (!sourcesPanel.hidden) closeSources();
|
||||||
|
else if (state.overlayOpen) {
|
||||||
|
if (document.fullscreenElement) {
|
||||||
|
state.pendingClose = true;
|
||||||
|
document.exitFullscreen().catch(() => {});
|
||||||
|
} else {
|
||||||
|
closePlayer();
|
||||||
|
}
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
}
|
}
|
||||||
if (video.src || video.currentSrc) showControls();
|
if (video.src || video.currentSrc) showControls();
|
||||||
});
|
});
|
||||||
@@ -331,35 +358,120 @@
|
|||||||
|
|
||||||
/* ---- hero ------------------------------------------------------------------ */
|
/* ---- hero ------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
function openPlayer() {
|
||||||
|
if (state.overlayOpen) return;
|
||||||
|
state.overlayOpen = true;
|
||||||
|
state.lastFocusedElement = document.activeElement;
|
||||||
|
playerOverlay.hidden = false;
|
||||||
|
document.body.classList.add('player-open');
|
||||||
|
playerClose.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closePlayer() {
|
||||||
|
if (!state.overlayOpen) return;
|
||||||
|
state.overlayOpen = false;
|
||||||
|
state.pendingClose = false;
|
||||||
|
video.pause();
|
||||||
|
playerOverlay.hidden = true;
|
||||||
|
document.body.classList.remove('player-open');
|
||||||
|
if (state.lastFocusedElement && typeof state.lastFocusedElement.focus === 'function') {
|
||||||
|
state.lastFocusedElement.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('fullscreenchange', () => {
|
||||||
|
if (!document.fullscreenElement && state.pendingClose && state.overlayOpen) closePlayer();
|
||||||
|
});
|
||||||
|
|
||||||
|
function syncHeader() {
|
||||||
|
document.body.classList.toggle('is-scrolled', window.scrollY > 8);
|
||||||
|
}
|
||||||
|
window.addEventListener('scroll', syncHeader, { passive: true });
|
||||||
|
syncHeader();
|
||||||
|
|
||||||
|
function setPlayLabel() {
|
||||||
|
if (type === 'tv' && state.season != null && state.episode != null) {
|
||||||
|
playLabel.textContent = `Play S${state.season} E${state.episode}`;
|
||||||
|
} else {
|
||||||
|
playLabel.textContent = 'Play';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function renderHero(d) {
|
function renderHero(d) {
|
||||||
document.title = `${d.name || d.title} — bug.tv`;
|
document.title = `${d.name || d.title} — bug.tv`;
|
||||||
const isTv = type === 'tv';
|
const isTv = type === 'tv';
|
||||||
const year = String((isTv ? d.first_air_date : d.release_date) || '').slice(0, 4);
|
const year = String((isTv ? d.first_air_date : d.release_date) || '').slice(0, 4);
|
||||||
const facts = [
|
const facts = [];
|
||||||
isTv ? `${d.number_of_seasons || 0} seasons` : SR.util.runtimeLabel(d.runtime),
|
if (isTv) {
|
||||||
year,
|
if (d.number_of_seasons) {
|
||||||
]
|
facts.push(`${d.number_of_seasons} season${d.number_of_seasons === 1 ? '' : 's'}`);
|
||||||
.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>`;
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
const runtime = SR.util.runtimeLabel(d.runtime);
|
||||||
|
if (runtime) facts.push(runtime);
|
||||||
|
}
|
||||||
|
if (year) facts.push(year);
|
||||||
|
|
||||||
|
const vote = Number(d.vote_average || 0);
|
||||||
|
const filled = Math.max(0, Math.min(5, Math.round(vote / 2)));
|
||||||
|
const rating = vote
|
||||||
|
? `<span class="watch-hero__rating" role="img" aria-label="${vote.toFixed(1)} out of 10">${'★'.repeat(filled)}${'☆'.repeat(5 - filled)} ${vote.toFixed(1)}</span>`
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const title = d.name || d.title || '';
|
||||||
|
heroTitle.textContent = title;
|
||||||
|
heroMeta.innerHTML = [rating, ...facts.map((fact) => `<span>${SR.util.escapeHtml(fact)}</span>`)]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('<span class="watch-hero__dot" aria-hidden="true">·</span>');
|
||||||
|
|
||||||
|
heroGenres.replaceChildren();
|
||||||
|
for (const genre of d.genres || []) {
|
||||||
|
const tag = document.createElement('span');
|
||||||
|
tag.className = 'tag';
|
||||||
|
tag.textContent = genre.name;
|
||||||
|
heroGenres.appendChild(tag);
|
||||||
|
}
|
||||||
|
|
||||||
|
heroOverview.textContent = d.overview || '';
|
||||||
|
heroOverview.hidden = !d.overview;
|
||||||
|
|
||||||
|
const images = d.images || {};
|
||||||
|
const backdrop = d.backdrop_url || (images.backdrops && images.backdrops[0] && images.backdrops[0].url);
|
||||||
|
heroBackdrop.style.backgroundImage = backdrop
|
||||||
|
? `url("${SR.util.escapeHtml(SR.util.tmdbResize(backdrop, 'w1280'))}")`
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const logos = images.logos || [];
|
||||||
|
const logo = (logos.find((l) => l && l.url && String(l.iso_639_1 || '').toLowerCase() === 'en') || {}).url;
|
||||||
|
if (logo) {
|
||||||
|
heroTitleCard.alt = title;
|
||||||
|
heroTitleCard.src = SR.util.tmdbResize(logo, 'w500');
|
||||||
|
heroTitleCard.hidden = false;
|
||||||
|
heroTitle.hidden = true;
|
||||||
|
heroTitleCard.onerror = () => {
|
||||||
|
heroTitleCard.hidden = true;
|
||||||
|
heroTitle.hidden = false;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
heroTitleCard.hidden = true;
|
||||||
|
heroTitle.hidden = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
playButton.hidden = false;
|
||||||
|
setPlayLabel();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderHeroError(message) {
|
||||||
|
heroTitle.textContent = 'Unavailable';
|
||||||
|
heroTitle.hidden = false;
|
||||||
|
heroMeta.textContent = message;
|
||||||
|
heroOverview.textContent = '';
|
||||||
|
heroBackdrop.style.backgroundImage = '';
|
||||||
|
heroTitleCard.hidden = true;
|
||||||
|
playButton.hidden = true;
|
||||||
|
episodeSection.hidden = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ---- url -------------------------------------------------------------------- */
|
/* ---- url -------------------------------------------------------------------- */
|
||||||
|
|
||||||
@@ -380,44 +492,87 @@
|
|||||||
return SR.storage.keyFor({ type, tmdbId: Number(id), season: state.season, episode: state.episode });
|
return SR.storage.keyFor({ type, tmdbId: Number(id), season: state.season, episode: state.episode });
|
||||||
}
|
}
|
||||||
|
|
||||||
let providerNames = null; // cached per page load; null → ask server again
|
let providerCatalog = null; // cached per page load; enabled names are re-read from localStorage every lookup
|
||||||
|
|
||||||
async function getProviderNames() {
|
async function getProviderCatalog() {
|
||||||
if (providerNames) return providerNames;
|
if (providerCatalog) return providerCatalog;
|
||||||
try {
|
try {
|
||||||
const data = await SR.api.providers();
|
const data = await SR.api.providers();
|
||||||
providerNames = SR.config.enabledProviders(data.all || [], data.enabled || []);
|
providerCatalog = { all: data.all || [], enabled: data.enabled || [] };
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
providerNames = null; // unreachable → let /streams use server defaults
|
return { all: [], enabled: [] };
|
||||||
}
|
}
|
||||||
return providerNames;
|
return providerCatalog;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getProviderInfo() {
|
||||||
|
if (SR.config.getProviders()) return SR.config.resolveProviders(null);
|
||||||
|
return SR.config.resolveProviders(await getProviderCatalog());
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadStreams() {
|
async function loadStreams() {
|
||||||
const query = { tmdb: id, type, providers: await getProviderNames() };
|
const token = ++state.loadToken;
|
||||||
|
const providerInfo = await getProviderInfo();
|
||||||
|
if (token !== state.loadToken) return;
|
||||||
|
|
||||||
|
if (!providerInfo.useServerDefaults && providerInfo.names.length === 0) {
|
||||||
|
closeSources();
|
||||||
|
pcQuality.textContent = '';
|
||||||
|
sourceLabel.textContent = '';
|
||||||
|
resumeNote.textContent = '';
|
||||||
|
showStatus('No sources are enabled. Open Settings → Sources and enable at least one provider.', true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = {
|
||||||
|
tmdb: id,
|
||||||
|
type,
|
||||||
|
providers: providerInfo.useServerDefaults ? null : providerInfo.names,
|
||||||
|
};
|
||||||
if (type === 'tv') {
|
if (type === 'tv') {
|
||||||
if (state.season == null || state.episode == null) return;
|
if (state.season == null || state.episode == null) return;
|
||||||
query.season = state.season;
|
query.season = state.season;
|
||||||
query.episode = state.episode;
|
query.episode = state.episode;
|
||||||
}
|
}
|
||||||
|
|
||||||
closeSources();
|
closeSources();
|
||||||
pcQuality.textContent = '';
|
pcQuality.textContent = '';
|
||||||
showStatus('Finding streams…');
|
showStatus('Finding streams…');
|
||||||
sourceLabel.textContent = '';
|
sourceLabel.textContent = '';
|
||||||
resumeNote.textContent = '';
|
resumeNote.textContent = '';
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const data = await SR.api.streams(query);
|
const data = await SR.api.streams(query);
|
||||||
state.streams = data.streams || [];
|
if (token !== state.loadToken) return;
|
||||||
|
|
||||||
|
const allStreams = data.streams || [];
|
||||||
|
state.streams = allStreams.filter(SR.util.webPlayable);
|
||||||
|
state.unsupported = allStreams.filter((s) => !SR.util.webPlayable(s));
|
||||||
|
state.providerErrors = data.providerErrors || {};
|
||||||
|
state.loadErrors = data.loadErrors || {};
|
||||||
renderSources();
|
renderSources();
|
||||||
pcGear.hidden = state.streams.length === 0;
|
pcGear.hidden = state.streams.length === 0;
|
||||||
if (state.streams.length) playSource(0);
|
if (state.streams.length) playSource(0);
|
||||||
else showStatus('No streams found for this title.', true);
|
else {
|
||||||
|
const failed = Object.keys({ ...state.loadErrors, ...state.providerErrors });
|
||||||
|
const hidden = state.unsupported.length;
|
||||||
|
if (failed.length || hidden) {
|
||||||
|
const parts = ['No web-playable streams found.'];
|
||||||
|
if (failed.length) parts.push(`Provider failures: ${failed.join(', ')}.`);
|
||||||
|
if (hidden) parts.push(`Hidden ${hidden} unsupported source(s).`);
|
||||||
|
showStatus(parts.join(' '), true);
|
||||||
|
} else {
|
||||||
|
showStatus('No streams found for this title.', true);
|
||||||
|
}
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
if (token !== state.loadToken) return;
|
||||||
SR.app.showError(e, 'stream lookup failed');
|
SR.app.showError(e, 'stream lookup failed');
|
||||||
showStatus('Stream lookup failed.', true);
|
showStatus('Stream lookup failed.', true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Sort the popup by provider: provider name is the primary key (A→Z),
|
// Sort the popup by provider: provider name is the primary key (A→Z),
|
||||||
// original rank is the tie-breaker so order inside a provider is stable.
|
// original rank is the tie-breaker so order inside a provider is stable.
|
||||||
function sortedStreams() {
|
function sortedStreams() {
|
||||||
@@ -454,8 +609,31 @@
|
|||||||
b.addEventListener('click', () => playSource(i));
|
b.addEventListener('click', () => playSource(i));
|
||||||
list.appendChild(b);
|
list.appendChild(b);
|
||||||
}
|
}
|
||||||
document.getElementById('sourcesCount').textContent =
|
const failures = { ...state.loadErrors, ...state.providerErrors };
|
||||||
`${state.streams.length} source${state.streams.length === 1 ? '' : 's'}`;
|
const failed = Object.keys(failures);
|
||||||
|
if (failed.length) {
|
||||||
|
const note = document.createElement('div');
|
||||||
|
note.className = 'player-sources__group player-sources__group--error';
|
||||||
|
note.textContent = `Failed: ${failed.join(', ')}`;
|
||||||
|
note.title = failed.map((name) => `${name}: ${failures[name] || 'no streams'}`).join('\n');
|
||||||
|
list.appendChild(note);
|
||||||
|
}
|
||||||
|
if (state.unsupported.length) {
|
||||||
|
const types = [
|
||||||
|
...new Set(state.unsupported.map((s) => String(s.type || 'unknown').toLowerCase())),
|
||||||
|
];
|
||||||
|
const note = document.createElement('div');
|
||||||
|
note.className = 'player-sources__group player-sources__group--error';
|
||||||
|
note.textContent = `Hidden unsupported: ${state.unsupported.length} (${types.join(', ')})`;
|
||||||
|
note.title = state.unsupported
|
||||||
|
.map((s) => `${s.provider || 'Other'}: ${s.name || 'stream'} (${s.type || 'unknown'})`)
|
||||||
|
.join('\n');
|
||||||
|
list.appendChild(note);
|
||||||
|
}
|
||||||
|
const count = `${state.streams.length} source${state.streams.length === 1 ? '' : 's'}`;
|
||||||
|
document.getElementById('sourcesCount').textContent = state.unsupported.length
|
||||||
|
? `${count} · ${state.unsupported.length} hidden`
|
||||||
|
: count;
|
||||||
}
|
}
|
||||||
|
|
||||||
function playSource(i) {
|
function playSource(i) {
|
||||||
@@ -525,100 +703,133 @@
|
|||||||
|
|
||||||
async function loadSeasons() {
|
async function loadSeasons() {
|
||||||
const data = await SR.api.seasons(id);
|
const data = await SR.api.seasons(id);
|
||||||
state.seasons = data.seasons || [];
|
state.seasons = (data.seasons || []).slice().sort((a, b) => a.season_number - b.season_number);
|
||||||
|
renderSeasonTabs();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSeasonTabs() {
|
||||||
|
seasonTabs.replaceChildren();
|
||||||
for (const s of state.seasons) {
|
for (const s of state.seasons) {
|
||||||
const opt = document.createElement('option');
|
const b = document.createElement('button');
|
||||||
opt.value = s.season_number;
|
b.type = 'button';
|
||||||
opt.textContent = `${s.name} (${s.episode_count})`;
|
b.role = 'tab';
|
||||||
seasonSelect.appendChild(opt);
|
b.className = s.season_number === state.season ? 'chip chip--active' : 'chip';
|
||||||
|
b.textContent = `Season ${s.season_number}`;
|
||||||
|
b.title = `${s.name || `Season ${s.season_number}`} (${s.episode_count || 0})`;
|
||||||
|
b.addEventListener('click', () => {
|
||||||
|
if (s.season_number !== state.season) loadEpisodes(s.season_number, null);
|
||||||
|
});
|
||||||
|
seasonTabs.appendChild(b);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showGridSpinner() {
|
function showShelfSpinner() {
|
||||||
episodeGrid.replaceChildren();
|
episodeShelf.replaceChildren();
|
||||||
const cell = document.createElement('div');
|
const cell = document.createElement('div');
|
||||||
cell.className = 'loading-cell';
|
cell.className = 'episode-shelf__loading';
|
||||||
cell.innerHTML = '<div class="spinner"></div>';
|
cell.innerHTML = '<div class="spinner"></div>';
|
||||||
episodeGrid.appendChild(cell);
|
episodeShelf.appendChild(cell);
|
||||||
|
}
|
||||||
|
|
||||||
|
function progressFor(season, episode) {
|
||||||
|
const key = SR.storage.keyFor({ type, tmdbId: Number(id), season, episode });
|
||||||
|
const rec = SR.storage.get(key);
|
||||||
|
if (!rec || !rec.t || !rec.d) return 0;
|
||||||
|
return Math.max(0, Math.min(1, rec.t / rec.d));
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderEpisodes() {
|
function renderEpisodes() {
|
||||||
episodeGrid.replaceChildren();
|
episodeShelf.replaceChildren();
|
||||||
if (!state.episodes.length) {
|
if (!state.episodes.length) {
|
||||||
const empty = SR.cards.emptyState('No episodes listed');
|
const empty = SR.cards.emptyState('No episodes listed');
|
||||||
empty.style.gridColumn = '1 / -1';
|
empty.className = `${empty.className} episode-shelf__empty`;
|
||||||
episodeGrid.appendChild(empty);
|
episodeShelf.appendChild(empty);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const ep of state.episodes) {
|
for (const ep of state.episodes) {
|
||||||
|
const current = ep.episode_number === state.episode;
|
||||||
const b = document.createElement('button');
|
const b = document.createElement('button');
|
||||||
b.type = 'button';
|
b.type = 'button';
|
||||||
b.className = ep.episode_number === state.episode ? 'episode episode--current' : 'episode';
|
b.className = current ? 'episode-card episode-card--current' : 'episode-card';
|
||||||
const date = ep.air_date ? ` · ${SR.util.escapeHtml(ep.air_date)}` : '';
|
const date = ep.air_date ? ` · ${SR.util.escapeHtml(ep.air_date)}` : '';
|
||||||
|
const still = ep.still || (ep.still_path ? SR.util.tmdbResize(ep.still_path, 'w300') : '');
|
||||||
|
const progress = progressFor(state.season, ep.episode_number);
|
||||||
|
|
||||||
b.innerHTML = `
|
b.innerHTML = `
|
||||||
<span class="episode__thumb"><span class="episode__play">▶</span></span>
|
<span class="episode-card__thumb${still ? '' : ' episode-card__thumb--empty'}">
|
||||||
<span class="episode__body">
|
${still ? `<img src="${still}" alt="" loading="lazy">` : `<span aria-hidden="true">${ep.episode_number}</span>`}
|
||||||
<span class="episode__num">S${state.season} · E${ep.episode_number}${date}</span>
|
${progress > 0 ? `<span class="episode-card__progress" style="width:${Math.round(progress * 100)}%"></span>` : ''}
|
||||||
<span class="episode__title">${SR.util.escapeHtml(ep.name || `Episode ${ep.episode_number}`)}</span>
|
</span>
|
||||||
|
<span class="episode-card__body">
|
||||||
|
<span class="episode-card__num">S${state.season} · E${ep.episode_number}${date}</span>
|
||||||
|
<span class="episode-card__title">${SR.util.escapeHtml(ep.name || `Episode ${ep.episode_number}`)}</span>
|
||||||
|
<span class="episode-card__meta">${SR.util.escapeHtml(SR.util.runtimeLabel(ep.runtime) || '')}</span>
|
||||||
</span>`;
|
</span>`;
|
||||||
|
|
||||||
|
const img = b.querySelector('.episode-card__thumb img');
|
||||||
|
if (img) {
|
||||||
|
img.addEventListener('error', () => {
|
||||||
|
const thumb = img.closest('.episode-card__thumb');
|
||||||
|
img.remove();
|
||||||
|
thumb.classList.add('episode-card__thumb--empty');
|
||||||
|
const num = document.createElement('span');
|
||||||
|
num.setAttribute('aria-hidden', 'true');
|
||||||
|
num.textContent = ep.episode_number;
|
||||||
|
thumb.prepend(num);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
b.addEventListener('click', () => playEpisode(ep.episode_number));
|
b.addEventListener('click', () => playEpisode(ep.episode_number));
|
||||||
episodeGrid.appendChild(b);
|
episodeShelf.appendChild(b);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadEpisodes(season, autoplayEpisode) {
|
async function loadEpisodes(season, autoplayEpisode) {
|
||||||
|
const token = ++state.loadToken;
|
||||||
state.season = season;
|
state.season = season;
|
||||||
seasonSelect.value = String(season);
|
state.episode = autoplayEpisode != null ? autoplayEpisode : null;
|
||||||
showGridSpinner();
|
renderSeasonTabs();
|
||||||
|
showShelfSpinner();
|
||||||
|
|
||||||
const data = await SR.api.episodes(id, season);
|
const data = await SR.api.episodes(id, season);
|
||||||
|
if (token !== state.loadToken) return;
|
||||||
|
|
||||||
state.episodes = data.episodes || [];
|
state.episodes = data.episodes || [];
|
||||||
|
if (autoplayEpisode != null && state.episodes.some((e) => e.episode_number === autoplayEpisode)) {
|
||||||
|
playEpisode(autoplayEpisode);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.episode = state.episodes.length ? state.episodes[0].episode_number : null;
|
||||||
renderEpisodes();
|
renderEpisodes();
|
||||||
syncUrl();
|
syncUrl();
|
||||||
if (autoplayEpisode && state.episodes.some((e) => e.episode_number === autoplayEpisode)) {
|
setPlayLabel();
|
||||||
playEpisode(autoplayEpisode);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function playEpisode(n) {
|
function playEpisode(n) {
|
||||||
state.episode = n;
|
state.episode = n;
|
||||||
syncUrl();
|
syncUrl();
|
||||||
renderEpisodes();
|
renderEpisodes();
|
||||||
|
setPlayLabel();
|
||||||
|
openPlayer();
|
||||||
loadStreams();
|
loadStreams();
|
||||||
document.getElementById('playerSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
seasonSelect.addEventListener('change', async () => {
|
playButton.addEventListener('click', () => {
|
||||||
const season = parseInt(seasonSelect.value, 10);
|
if (type === 'tv' && state.episode == null) {
|
||||||
if (!season) return;
|
if (state.episodes.length) playEpisode(state.episodes[0].episode_number);
|
||||||
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;
|
return;
|
||||||
}
|
}
|
||||||
const sIdx = state.seasons.findIndex((s) => s.season_number === state.season);
|
if (state.loadedKey === keyFor() && state.streams.length) {
|
||||||
if (sIdx < 0 || sIdx + delta < 0 || sIdx + delta >= state.seasons.length) return;
|
openPlayer();
|
||||||
try {
|
video.play().catch(() => {});
|
||||||
await loadEpisodes(state.seasons[sIdx + delta].season_number);
|
return;
|
||||||
const first = state.episodes[0];
|
|
||||||
if (first) playEpisode(first.episode_number);
|
|
||||||
} catch (e) {
|
|
||||||
SR.app.showError(e, 'failed to load episodes');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
openPlayer();
|
||||||
|
loadStreams();
|
||||||
|
});
|
||||||
|
|
||||||
prevBtn.addEventListener('click', () => stepEpisode(-1));
|
playerClose.addEventListener('click', closePlayer);
|
||||||
nextBtn.addEventListener('click', () => stepEpisode(1));
|
|
||||||
|
|
||||||
/* ---- init ------------------------------------------------------------------------------ */
|
|
||||||
|
|
||||||
(async function init() {
|
(async function init() {
|
||||||
let details;
|
let details;
|
||||||
@@ -626,41 +837,54 @@
|
|||||||
details = await SR.api.details(type, id);
|
details = await SR.api.details(type, id);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
SR.app.showError(e, 'failed to load this title');
|
SR.app.showError(e, 'failed to load this title');
|
||||||
showStatus('Could not load this title.', true);
|
renderHeroError('Could not load this title.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
state.details = details;
|
state.details = details;
|
||||||
renderHero(details);
|
renderHero(details);
|
||||||
|
|
||||||
if (type !== 'tv') {
|
if (type !== 'tv') {
|
||||||
loadStreams();
|
setPlayLabel();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
episodeSection.hidden = false;
|
episodeSection.hidden = false;
|
||||||
showStatus('Pick an episode to start.');
|
showStatus('Loading episodes…');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await loadSeasons();
|
await loadSeasons();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
SR.app.showError(e, 'failed to load seasons');
|
SR.app.showError(e, 'failed to load seasons');
|
||||||
|
renderHeroError('Could not load seasons.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!state.seasons.length) {
|
if (!state.seasons.length) {
|
||||||
showStatus('No seasons found for this show.', true);
|
renderHeroError('No seasons found for this show.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const sParam = parseInt(params.get('s'), 10);
|
const sParam = parseInt(params.get('s'), 10);
|
||||||
const eParam = parseInt(params.get('e'), 10);
|
const eParam = parseInt(params.get('e'), 10);
|
||||||
const season = state.seasons.some((s) => s.season_number === sParam)
|
const hasSeason = (n) => state.seasons.some((s) => s.season_number === n);
|
||||||
? sParam
|
const season = hasSeason(sParam) ? sParam : hasSeason(1) ? 1 : state.seasons[0].season_number;
|
||||||
: state.seasons[0].season_number;
|
|
||||||
try {
|
try {
|
||||||
await loadEpisodes(season, eParam || null);
|
await loadEpisodes(season, null);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
SR.app.showError(e, 'failed to load episodes');
|
SR.app.showError(e, 'failed to load episodes');
|
||||||
showStatus('Failed to load episodes.', true);
|
renderHeroError('Could not load episodes.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!state.episodes.length) {
|
||||||
|
renderHeroError('No episodes found for this show.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (season === sParam && state.episodes.some((e) => e.episode_number === eParam)) {
|
||||||
|
playEpisode(eParam);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
})();
|
})();
|
||||||
|
|||||||
+4
-4
@@ -14,8 +14,7 @@
|
|||||||
<div class="container site-header__inner">
|
<div class="container site-header__inner">
|
||||||
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
||||||
<nav class="site-header__nav" aria-label="Primary">
|
<nav class="site-header__nav" aria-label="Primary">
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="search.html" class="is-active" aria-current="page">Search</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<div class="site-header__actions">
|
<div class="site-header__actions">
|
||||||
<a class="icon-btn is-active" href="search.html" aria-label="Search" title="Search">
|
<a class="icon-btn is-active" href="search.html" aria-label="Search" title="Search">
|
||||||
@@ -45,8 +44,9 @@
|
|||||||
|
|
||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span>bug.tv</span>
|
<span>tv.bug.tools</span>
|
||||||
<span>API: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
<span>api: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
||||||
|
<span>tv.bug.tools doesn't store files, but provides links to external services.</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|||||||
+15
-6
@@ -14,8 +14,7 @@
|
|||||||
<div class="container site-header__inner">
|
<div class="container site-header__inner">
|
||||||
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
||||||
<nav class="site-header__nav" aria-label="Primary">
|
<nav class="site-header__nav" aria-label="Primary">
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="search.html">Search</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<div class="site-header__actions">
|
<div class="site-header__actions">
|
||||||
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
||||||
@@ -39,7 +38,7 @@
|
|||||||
<div class="settings__content">
|
<div class="settings__content">
|
||||||
<section class="settings__card" id="sources">
|
<section class="settings__card" id="sources">
|
||||||
<h2>Sources</h2>
|
<h2>Sources</h2>
|
||||||
<p class="settings__hint">Choose which providers to search for streams. Saved in this browser; applies to new lookups.</p>
|
<p class="settings__hint">Choose which providers to search for streams. Saved in this browser; applies from the next stream lookup.</p>
|
||||||
<div class="settings__actions">
|
<div class="settings__actions">
|
||||||
<button class="btn btn--ghost" id="allOn" type="button">Enable all</button>
|
<button class="btn btn--ghost" id="allOn" type="button">Enable all</button>
|
||||||
<button class="btn btn--ghost" id="allOff" type="button">Disable all</button>
|
<button class="btn btn--ghost" id="allOff" type="button">Disable all</button>
|
||||||
@@ -51,7 +50,7 @@
|
|||||||
|
|
||||||
<section class="settings__card" id="server">
|
<section class="settings__card" id="server">
|
||||||
<h2>Server</h2>
|
<h2>Server</h2>
|
||||||
<p class="settings__hint">The REST API that bug.tv queries. Change this only if you run your own instance.</p>
|
<p class="settings__hint">The REST API that bug.tv uses for providers, stream lookups and the media proxy. Change this only if you run your own instance.</p>
|
||||||
<label class="field-label" for="apiBaseInput">API base URL</label>
|
<label class="field-label" for="apiBaseInput">API base URL</label>
|
||||||
<input class="field" id="apiBaseInput" type="text" spellcheck="false" autocomplete="off" placeholder="https://api-tv.bug.tools">
|
<input class="field" id="apiBaseInput" type="text" spellcheck="false" autocomplete="off" placeholder="https://api-tv.bug.tools">
|
||||||
<div class="settings__actions">
|
<div class="settings__actions">
|
||||||
@@ -59,6 +58,15 @@
|
|||||||
<button class="btn btn--ghost" id="apiBaseReset" type="button">Reset to default</button>
|
<button class="btn btn--ghost" id="apiBaseReset" type="button">Reset to default</button>
|
||||||
</div>
|
</div>
|
||||||
<p class="settings__status" id="connStatus"></p>
|
<p class="settings__status" id="connStatus"></p>
|
||||||
|
<p class="settings__hint">Search, details and images go straight to TMDB from your browser, using the key below — your server is not involved.</p>
|
||||||
|
<label class="field-label" for="tmdbKeyInput">TMDB API key</label>
|
||||||
|
<input class="field" id="tmdbKeyInput" type="text" spellcheck="false" autocomplete="off" placeholder="32-character TMDB API key">
|
||||||
|
<div class="settings__actions">
|
||||||
|
<button class="btn btn--primary" id="tmdbKeySave" type="button">Save</button>
|
||||||
|
<button class="btn btn--ghost" id="tmdbKeyTest" type="button">Test</button>
|
||||||
|
<button class="btn btn--ghost" id="tmdbKeyReset" type="button">Reset to default</button>
|
||||||
|
</div>
|
||||||
|
<p class="settings__status" id="tmdbStatus"></p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="settings__card" id="data">
|
<section class="settings__card" id="data">
|
||||||
@@ -76,8 +84,9 @@
|
|||||||
|
|
||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span>bug.tv</span>
|
<span>tv.bug.tools</span>
|
||||||
<span>API: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
<span>api: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
||||||
|
<span>tv.bug.tools doesn't store files, but provides links to external services.</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|||||||
+35
-25
@@ -9,13 +9,12 @@
|
|||||||
<link rel="stylesheet" href="css/components.css">
|
<link rel="stylesheet" href="css/components.css">
|
||||||
<link rel="stylesheet" href="css/pages.css">
|
<link rel="stylesheet" href="css/pages.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="watch-page">
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="container site-header__inner">
|
<div class="container site-header__inner">
|
||||||
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
<a class="brand" href="index.html">bug<span>.tv</span></a>
|
||||||
<nav class="site-header__nav" aria-label="Primary">
|
<nav class="site-header__nav" aria-label="Primary">
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="search.html">Search</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<div class="site-header__actions">
|
<div class="site-header__actions">
|
||||||
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
<a class="icon-btn" href="search.html" aria-label="Search" title="Search">
|
||||||
@@ -28,17 +27,40 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="page" id="content">
|
<main class="page page--watch" id="content">
|
||||||
<section id="hero" class="watch-hero container"></section>
|
<section id="hero" class="watch-hero" aria-labelledby="heroTitle">
|
||||||
|
<div id="heroBackdrop" class="watch-hero__backdrop" aria-hidden="true"></div>
|
||||||
|
<div class="watch-hero__scrim" aria-hidden="true"></div>
|
||||||
|
<div class="watch-hero__inner">
|
||||||
|
<img id="heroTitleCard" class="watch-hero__logo" hidden alt="">
|
||||||
|
<h1 id="heroTitle" class="watch-hero__title">Loading…</h1>
|
||||||
|
<div id="heroMeta" class="watch-hero__meta"></div>
|
||||||
|
<div id="heroGenres" class="watch-hero__genres"></div>
|
||||||
|
<p id="heroOverview" class="watch-hero__overview"></p>
|
||||||
|
<div class="watch-hero__actions">
|
||||||
|
<button id="playButton" class="btn btn--primary" type="button">
|
||||||
|
<span id="playLabel">Play</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="playerSection" class="container">
|
<section id="episodeSection" class="watch-episodes" hidden>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="watch-episodes__title">Episodes</h2>
|
||||||
|
<div id="seasonTabs" class="season-tabs" role="tablist" aria-label="Seasons"></div>
|
||||||
|
<div id="episodeShelf" class="episode-shelf" role="list"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="playerOverlay" class="player-overlay" hidden>
|
||||||
|
<button id="playerClose" class="icon-btn player-overlay__close" type="button" aria-label="Close player">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</button>
|
||||||
<div class="player-wrap" id="playerWrap">
|
<div class="player-wrap" id="playerWrap">
|
||||||
<video id="video" playsinline preload="metadata"></video>
|
<video id="video" playsinline preload="metadata"></video>
|
||||||
|
|
||||||
<a class="player-back" href="index.html" aria-label="Back to home" title="Back to home">
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<button class="player-bigplay" id="bigPlay" type="button" aria-label="Play">
|
<button class="player-bigplay" id="bigPlay" type="button" aria-label="Play">
|
||||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
|
||||||
</button>
|
</button>
|
||||||
@@ -90,25 +112,13 @@
|
|||||||
<span id="resumeNote"></span>
|
<span id="resumeNote"></span>
|
||||||
<span class="watch-toolbar__spacer"></span>
|
<span class="watch-toolbar__spacer"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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>
|
|
||||||
<div class="chips">
|
|
||||||
<button class="chip" id="prevEpisode" type="button">← Previous</button>
|
|
||||||
<button class="chip" id="nextEpisode" type="button">Next →</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="episode-grid" id="episodeGrid"></div>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span>bug.tv</span>
|
<span>tv.bug.tools</span>
|
||||||
<span>API: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
<span>api: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
|
||||||
|
<span>tv.bug.tools doesn't store files, but provides links to external services.</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user