diff --git a/android/.gitignore b/android/.gitignore
new file mode 100644
index 0000000..48354a3
--- /dev/null
+++ b/android/.gitignore
@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+# Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml
diff --git a/android/app/.gitignore b/android/app/.gitignore
new file mode 100644
index 0000000..043df80
--- /dev/null
+++ b/android/app/.gitignore
@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep
diff --git a/android/app/build.gradle b/android/app/build.gradle
new file mode 100644
index 0000000..86510de
--- /dev/null
+++ b/android/app/build.gradle
@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+ namespace "tv.vyla.app"
+ compileSdk rootProject.ext.compileSdkVersion
+ defaultConfig {
+ applicationId "tv.vyla.app"
+ minSdkVersion rootProject.ext.minSdkVersion
+ targetSdkVersion rootProject.ext.targetSdkVersion
+ versionCode 1
+ versionName "1.0"
+ testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+ aaptOptions {
+ // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+ // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+ ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+ }
+ }
+ buildTypes {
+ release {
+ minifyEnabled false
+ proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+ }
+ }
+}
+
+repositories {
+ flatDir{
+ dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+ }
+}
+
+dependencies {
+ implementation fileTree(include: ['*.jar'], dir: 'libs')
+ implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+ implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+ implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+ implementation project(':capacitor-android')
+ testImplementation "junit:junit:$junitVersion"
+ androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+ androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+ implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+ def servicesJSON = file('google-services.json')
+ if (servicesJSON.text) {
+ apply plugin: 'com.google.gms.google-services'
+ }
+} catch(Exception e) {
+ logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
new file mode 100644
index 0000000..fdb4970
--- /dev/null
+++ b/android/app/capacitor.build.gradle
@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+ compileOptions {
+ sourceCompatibility JavaVersion.VERSION_17
+ targetCompatibility JavaVersion.VERSION_17
+ }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+ postBuildExtras()
+}
diff --git a/android/app/proguard-rules.pro b/android/app/proguard-rules.pro
new file mode 100644
index 0000000..f1b4245
--- /dev/null
+++ b/android/app/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+# http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+# public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
diff --git a/android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java b/android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java
new file mode 100644
index 0000000..f2c2217
--- /dev/null
+++ b/android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java
@@ -0,0 +1,26 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see Testing documentation
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+ @Test
+ public void useAppContext() throws Exception {
+ // Context of the app under test.
+ Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+ assertEquals("com.getcapacitor.app", appContext.getPackageName());
+ }
+}
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 81c4711..36512b3 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,6 +1,7 @@
+
-
+
+ android:theme="@style/AppTheme">
+
+
+
+
-
\ No newline at end of file
+
+
+
+
+
diff --git a/android/app/src/main/java/tv/vyla/app/MainActivity.java b/android/app/src/main/java/tv/vyla/app/MainActivity.java
new file mode 100644
index 0000000..a1b53b6
--- /dev/null
+++ b/android/app/src/main/java/tv/vyla/app/MainActivity.java
@@ -0,0 +1,5 @@
+package tv.vyla.app;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}
diff --git a/android/app/src/main/res/drawable-land-hdpi/splash.png b/android/app/src/main/res/drawable-land-hdpi/splash.png
new file mode 100644
index 0000000..e31573b
Binary files /dev/null and b/android/app/src/main/res/drawable-land-hdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-land-mdpi/splash.png b/android/app/src/main/res/drawable-land-mdpi/splash.png
new file mode 100644
index 0000000..f7a6492
Binary files /dev/null and b/android/app/src/main/res/drawable-land-mdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-land-xhdpi/splash.png b/android/app/src/main/res/drawable-land-xhdpi/splash.png
new file mode 100644
index 0000000..8077255
Binary files /dev/null and b/android/app/src/main/res/drawable-land-xhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-land-xxhdpi/splash.png b/android/app/src/main/res/drawable-land-xxhdpi/splash.png
new file mode 100644
index 0000000..14c6c8f
Binary files /dev/null and b/android/app/src/main/res/drawable-land-xxhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-land-xxxhdpi/splash.png b/android/app/src/main/res/drawable-land-xxxhdpi/splash.png
new file mode 100644
index 0000000..244ca25
Binary files /dev/null and b/android/app/src/main/res/drawable-land-xxxhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-port-hdpi/splash.png b/android/app/src/main/res/drawable-port-hdpi/splash.png
new file mode 100644
index 0000000..74faaa5
Binary files /dev/null and b/android/app/src/main/res/drawable-port-hdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-port-mdpi/splash.png b/android/app/src/main/res/drawable-port-mdpi/splash.png
new file mode 100644
index 0000000..e944f4a
Binary files /dev/null and b/android/app/src/main/res/drawable-port-mdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-port-xhdpi/splash.png b/android/app/src/main/res/drawable-port-xhdpi/splash.png
new file mode 100644
index 0000000..564a82f
Binary files /dev/null and b/android/app/src/main/res/drawable-port-xhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-port-xxhdpi/splash.png b/android/app/src/main/res/drawable-port-xxhdpi/splash.png
new file mode 100644
index 0000000..bfabe68
Binary files /dev/null and b/android/app/src/main/res/drawable-port-xxhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-port-xxxhdpi/splash.png b/android/app/src/main/res/drawable-port-xxxhdpi/splash.png
new file mode 100644
index 0000000..6929071
Binary files /dev/null and b/android/app/src/main/res/drawable-port-xxxhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml b/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
new file mode 100644
index 0000000..c7bd21d
--- /dev/null
+++ b/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
${t}
`;
+ $('#hmeta').innerHTML = `★ ${(it.vote_average || 0).toFixed(1)}${yr(it)}${it._t === 'movie' ? 'Movie' : 'Series'}${gn(it)}`;
+ $('#hov').textContent = it.overview || '';
+ const l = await logo(it);
+ if (heroIt === it && l) $('#hlogo').innerHTML = `
`
+}
+
+function card(it, h = true) {
+ const c = document.createElement('div'); c.className = 'card f'; c.tabIndex = -1;
+ c.innerHTML = `
`;
+ if (h) c._it = it; c._a = () => openDetail(it); return c
+}
+
+function mkRow(i) {
+ const mv = mode === "movie" || (mode === "discover" && i % 2 === 0), k = mode === "discover" ? i >> 1 : i, list = mv ? MG : TG, g = list[k % list.length], pg = 1 + Math.floor(k / list.length) % 20;
+ const sec = document.createElement('section'); sec.className = 'sec';
+ sec.innerHTML = `${g.name} ${mv ? 'Movies' : 'TV Shows'}
${SK.cards(14)}
`;
+ rowsEl.appendChild(sec);
+ return api(`/discover/${mv ? 'movie' : 'tv'}`, `&with_genres=${g.id}&sort_by=popularity.desc&vote_count.gte=100&include_adult=false&page=${pg}`).then(d => {
+ const rs = (d.results || []).filter(x => x.poster_path);
+ if (!rs.length) { sec.remove(); return }
+ sec.lastChild.innerHTML = ''; rs.forEach(x => { x._t = mv ? 'movie' : 'tv'; sec.lastChild.appendChild(card(x)) })
+ })
+}
+
+async function more(n) {
+ if (busy) return; busy = true; const g = gen;
+ const ps = []; for (let j = 0; j < n; j++)ps.push(mkRow(idx++));
+ await Promise.all(ps); if (g === gen) busy = false
+}
+
+async function go(k) {
+ if (k === 'search') { closeLib(true); openSearch(); return }
+ closeSearch(true);
+ if (k === 'wl' || k === 'fav') { openLib(k); return }
+ closeLib(true);
+ if (k === mode && rowsEl.children.length) { setAct(k); setFocus(document.querySelector('#rows .card')); return }
+ mode = k; setAct(k); gen++; busy = false; idx = 0; heroIt = null; lastMain = null; rowsEl.innerHTML = ''; main.scrollTop = 0; $('.hc').classList.add('sl');
+ await more(6);
+ const first = document.querySelector('#rows .card');
+ if (first) { applyHero(first._it); setFocus(first) }
+}
+
+main.addEventListener('scroll', () => {
+ const h = innerHeight;
+ $('#dim2').style.opacity = Math.min(main.scrollTop / (h * .6), 1) * .55;
+ if (main.scrollTop + h * 2.5 > main.scrollHeight) more(4)
+});
+
+$('#hplay')._a = () => openPlayer(heroIt);
+$('#hinfo')._a = () => heroIt && openDetail(heroIt);
diff --git a/www/js/core.js b/www/js/core.js
new file mode 100644
index 0000000..b7918fb
--- /dev/null
+++ b/www/js/core.js
@@ -0,0 +1,37 @@
+const API_BASE = window.API_BASE || localStorage.getItem('vyla.api') || '';
+
+const K = '3f6703f3e2a0b2b40fe4fbb3e1546244', A = 'https://api.themoviedb.org/3', I = 'https://image.tmdb.org/t/p/';
+const $ = s => document.querySelector(s);
+const main = $('#main'), rowsEl = $('#rows'), side = $('#side'), ov = $('#ov'), bgb = $('#bg'), hb = $('#hb'), sr = $('#sr'), sres = $('#sres'), chips = $('#chips'), tabs = $('#tabs'), kb = $('#kb'), pl = $('#pl'), vd = $('#pv');
+const api = async (p, q = '') => { try { const r = await fetch(`${A}${p}?api_key=${K}&language=en-US${q}`); return r.ok ? await r.json() : {} } catch (e) { return {} } };
+const ic = p => ``;
+const P_WL = '', P_FV = '';
+const LN = { wl: 'Watch Later', fav: 'Favorites' };
+const NAVEL = {}; let navAct = null, mode = '', gen = 0, sgen = 0, st;
+let fast = false, G = {}, MG = [], TG = [], cur = null, lastMain = null, heroIt = null, idx = 0, busy = false, ht;
+const LC = {};
+
+function xf(box, url, cls = 'xf') {
+ if (box._u === url) return; box._u = url;
+ const im = new Image();
+ im.onload = () => { if (box._u !== url) return; const d = document.createElement('div'); d.className = cls; d.style.backgroundImage = `url(${url})`; box.appendChild(d); requestAnimationFrame(() => requestAnimationFrame(() => d.classList.add('in'))); setTimeout(() => { while (box.children.length > 2) box.firstChild.remove() }, 800) };
+ im.onerror = () => { if (box._u === url) box._u = null };
+ im.src = url
+}
+
+async function logo(it) {
+ const k = it._t + it.id; if (k in LC) return LC[k];
+ const d = await api(`/${it._t}/${it.id}/images`, '&include_image_language=en,null');
+ const l = (d.logos || []).find(x => x.iso_639_1 === 'en') || (d.logos || [])[0];
+ return LC[k] = l ? I + 'w500' + l.file_path : null
+}
+
+const yr = it => ((it.release_date || it.first_air_date || '') + '').slice(0, 4);
+const gn = it => (it.genre_ids || []).map(i => G[i]).filter(Boolean).slice(0, 2).join(', ');
+
+const esc = t => String(t).replace(/ { const e = document.createElement('div'); e.className = cls + ' f'; e.tabIndex = -1; e.innerHTML = html; e._a = fn; return e };
+const LOGO = 'assets/favicon.ico', PH = 'data:image/svg+xml,' + encodeURIComponent('');
+function toast(m) { const t = document.createElement('div'); t.className = 'toast'; t.textContent = m; (document.fullscreenElement || document.body).appendChild(t); setTimeout(() => t.remove(), 2300) }
+const imgDone = e => { const t = e.target; if (t.tagName === 'IMG') { t.classList.add('ld'); t.parentElement && t.parentElement.classList.add('lded') } };
+document.addEventListener('load', imgDone, true); document.addEventListener('error', imgDone, true);
diff --git a/www/js/detail.js b/www/js/detail.js
new file mode 100644
index 0000000..9d95c43
--- /dev/null
+++ b/www/js/detail.js
@@ -0,0 +1,66 @@
+let dgen = 0;
+async function openDetail(it) {
+ const t = it._t;
+ if (!ov.classList.contains('show')) ov._prev = cur;
+ ov.classList.add('show'); side.classList.remove('open'); const my = ++dgen; ov.innerHTML = SK.detail(it); ov.scrollTop = 0;
+ const d = await api(`/${t}/${it.id}`, `&append_to_response=videos,credits,recommendations,images,${t === 'movie' ? 'release_dates' : 'content_ratings'}&include_image_language=en,null`);
+ if (my !== dgen || !ov.classList.contains('show')) return;
+ if (!d.id) { closeDetail(); return }
+ const title = d.title || d.name, year = ((d.release_date || d.first_air_date) || '').slice(0, 4);
+ const cert = t === 'movie' ? (((d.release_dates || {}).results || []).find(r => r.iso_3166_1 === 'US') || { release_dates: [] }).release_dates.map(x => x.certification).find(Boolean) : (((d.content_ratings || {}).results || []).find(r => r.iso_3166_1 === 'US') || {}).rating;
+ const rt = t === 'movie' ? (d.runtime ? `${Math.floor(d.runtime / 60)}h ${d.runtime % 60}m` : '') : (d.number_of_seasons ? `${d.number_of_seasons} Season${d.number_of_seasons > 1 ? 's' : ''}` : '');
+ const lg = ((d.images || {}).logos || []).find(x => x.iso_639_1 === 'en') || ((d.images || {}).logos || [])[0];
+ const bp = d.backdrop_path || d.poster_path;
+ ov.innerHTML = `${lg ? `
` : `
${title}
`}
${(d.vote_average || 0).toFixed(1)}${year}${cert ? `${cert}` : ''}${rt}${(d.genres || []).slice(0, 3).map(g => g.name).join(', ')}
${d.overview || ''}
MORE${name}
`; s.lastChild.append(...kids); secs.appendChild(s) };
+ const el = (c, h) => { const e = document.createElement('div'); e.className = c + ' f'; e.tabIndex = -1; e.innerHTML = h; e._a = () => { }; return e };
+ if (t === 'tv') {
+ const ss = (d.seasons || []).filter(x => x.season_number > 0 && x.episode_count);
+ if (ss.length) {
+ const sec = document.createElement('section'); sec.className = 'ds eps';
+ sec.innerHTML = '';
+ secs.appendChild(sec);
+ const ddb = $('#ddb'), ddl = $('#ddl'), list = $('#el'); let cs = null;
+ const nm = x => x.name || 'Season ' + x.season_number;
+ const loadEps = async x => {
+ cs = x; ddb.innerHTML = `${esc(nm(x))}` + ic('');
+ [...ddl.children].forEach((c, i) => c.classList.toggle('cur', ss[i] === x));
+ list.innerHTML = SK.eps(10);
+ const r = await api(`/tv/${it.id}/season/${x.season_number}`);
+ if (cs !== x || !list.isConnected) return;
+ list.innerHTML = '';
+ (r.episodes || []).forEach((p, ix) => {
+ const n = p.episode_number, img = p.still_path ? I + 'w300' + p.still_path : (it.backdrop_path ? I + 'w300' + it.backdrop_path : PH);
+ const e = el('ep', `${esc(p.name || 'Episode ' + n)}${['Episode ' + n, p.runtime ? p.runtime + 'm' : ''].filter(Boolean).join(' \u2022 ')}`);
+ e.title = p.overview || '';
+ e._a = () => openPlayer(it, `S${x.season_number} E${n} \u2022 ${p.name || ''}`, { it, seasons: ss, s: x.season_number, eps: r.episodes, i: ix, cache: { [x.season_number]: r.episodes } }); list.appendChild(e)
+ });
+ const f0 = list.firstChild; if (f0 && f0._a && $('#dplay')) $('#dplay')._a = () => f0._a();
+ if (!list.children.length) list.innerHTML = 'No episodes listed.
'
+ };
+ ss.forEach(x => ddl.appendChild(mkf('ddi', `${esc(nm(x))}${x.episode_count} eps`, () => { closeDD(); loadEps(x) })));
+ ddb._a = () => { if (!closeDD()) { ddl.classList.add('open'); setFocus(ddl.children[Math.max(0, ss.indexOf(cs))]) } };
+ loadEps(ss[0])
+ }
+ }
+ rowOf('Trailers', ((d.videos || {}).results || []).filter(v => v.site === 'YouTube' && /Trailer|Teaser|Clip/.test(v.type)).sort((a, b) => (b.type === 'Trailer') - (a.type === 'Trailer')).slice(0, 8).map(v => el('tr', `${v.name}▶ ${v.type}`)));
+ rowOf('Related', ((d.recommendations || {}).results || []).filter(x => x.poster_path).map(x => { x._t = t; return card(x, false) }));
+ rowOf('Cast', ((d.credits || {}).cast || []).slice(0, 20).map(p => el('cs', `${p.profile_path ? '' : p.name[0]}
${p.name}${p.character || ''}`)));
+ $('#dplay')._a = () => openPlayer(it); const sync = () => [['dwl', 'wl', P_WL], ['dfv', 'fav', P_FV]].forEach(([id, k, p]) => { const e = $('#' + id), v = has(k, it); e.classList.toggle('sv', v); e.dataset.l = (v ? 'Remove from ' : 'Add to ') + LN[k]; e.innerHTML = ic(p) });
+ sync();
+ $('#dmenu')._a = () => { const o = $('#dmx').classList.toggle('open'); $('#dmenu').classList.toggle('sv', o) };
+ $('#dwl')._a = () => { toggleLib('wl', it); sync() }; $('#dfv')._a = () => { toggleLib('fav', it); sync() };
+ $('#dmore')._a = () => { const o = $('#otx'), m = $('#dmore'); o.classList.toggle('x'); m.textContent = o.classList.contains('x') ? 'LESS' : 'MORE' };
+ ov.scrollTop = 0;
+ setFocus($('#dplay'))
+}
+
+function closeDetail() {
+ ov.classList.remove('show');
+ const p = ov._prev;
+ setTimeout(() => { if (!ov.classList.contains('show')) ov.innerHTML = '' }, 400);
+ if (p && document.body.contains(p)) setFocus(p); else if (lib.classList.contains('show')) setFocus($('#lgrid .card') || navAct)
+}
+
+function closeDD() { const l = $('#ddl'); if (l && l.classList.contains('open')) { l.classList.remove('open'); setFocus($('#ddb')); return true } return false }
\ No newline at end of file
diff --git a/www/js/focus.js b/www/js/focus.js
new file mode 100644
index 0000000..2ba76a9
--- /dev/null
+++ b/www/js/focus.js
@@ -0,0 +1,60 @@
+function setFocus(el) {
+ if (!el) return;
+ const od = $('#ddl.open'); if (od && !el.closest('.dd')) od.classList.remove('open');
+ cur && cur.classList.remove('on'); cur = el; el.classList.add('on');
+ const inSide = !!el.closest('#side'), inOv = !!el.closest('#ov');
+ side.classList.toggle('open', inSide && !ov.classList.contains('show'));
+ if (!inSide && !inOv && !el.closest('#pl')) lastMain = el;
+ const row = el.closest('.row');
+ if (row) row.scrollTo({ left: Math.max(0, el.offsetLeft - parseInt(getComputedStyle(row).paddingLeft)), behavior: fast ? 'auto' : 'smooth' });
+
+ const menu = el.closest('#pm');
+ if (menu) {
+ el.scrollIntoView({ block: 'nearest', behavior: fast ? 'auto' : 'smooth' });
+ return;
+ }
+
+ const scr = el.closest('#ov,#sr,#lib');
+ if (scr && el.closest('#kb,#chips,#tabs')) scr.scrollTo({ top: 0, behavior: fast ? 'auto' : 'smooth' });
+ else if (scr) {
+ const r = el.getBoundingClientRect();
+ if (r.bottom > innerHeight - 50) scr.scrollBy({ top: r.bottom - innerHeight + 110, behavior: fast ? 'auto' : 'smooth' });
+ else if (r.top < 50) scr.scrollBy({ top: r.top - 110, behavior: fast ? 'auto' : 'smooth' });
+ }
+ else if (!inSide && !el.closest('#pl')) {
+ const sec = el.closest('.sec');
+ main.scrollTo({ top: sec ? Math.max(0, sec.offsetTop - innerHeight * .52) : 0, behavior: fast ? 'auto' : 'smooth' });
+ }
+ if (el._it) hero(el._it); if (el._bg) sbgf(el._bg);
+}
+
+function nav(d) {
+ const sc = pl.classList.contains('show') ? (pl.classList.contains('eps') ? '#pep .f' : '#pl .f') : ov.classList.contains('show') ? '#ov .f' : sr.classList.contains('show') ? '#sr .f,#side .f' : lib.classList.contains('show') ? '#lib .f,#side .f' : '#side .f,#main .f';
+ const c = cur.getBoundingClientRect(), cx = c.left + c.width / 2, cy = c.top + c.height / 2;
+ const inSide = !!cur.closest('#side');
+ if (inSide && d === 'r' && lastMain && getComputedStyle(lastMain).visibility !== 'hidden') { setFocus(lastMain); return }
+ if ((d === 'l' || d === 'r') && !inSide) {
+ const g = cur.closest('.row,#kb,#tabs');
+ if (g) {
+ const L = [...g.children].filter(e => e.classList.contains('f') && e.getBoundingClientRect().width), i = L.indexOf(cur), n = L[i + (d === 'r' ? 1 : -1)];
+ if (i >= 0) { if (n) setFocus(n); else if (d === 'l' && !cur.closest('#ov,#pl')) setFocus(navAct); return }
+ }
+ }
+ let best = null, bs = 1e9;
+ document.querySelectorAll(sc).forEach(e => {
+ if (e === cur) return;
+ const r = e.getBoundingClientRect(); if (!r.width) return;
+ const x = r.left + r.width / 2, y = r.top + r.height / 2, dx = x - cx, dy = y - cy;
+ let p, s;
+ if (d === 'r') { if (dx < 8) return; p = dx; s = Math.abs(dy) * 2.5 }
+ else if (d === 'l') { if (dx > -8) return; p = -dx; s = Math.abs(dy) * 2.5 }
+ else if (d === 'd') { if (dy < 8) return; p = dy; s = Math.abs(dx) * 2 }
+ else { if (dy > -8) return; p = -dy; s = Math.abs(dx) * 2 }
+ if (p + s < bs) { bs = p + s; best = e }
+ });
+ if (!best) return;
+ if (best.closest('#side') && !inSide) best = navAct;
+ setFocus(best)
+}
+
+function act(el) { el && el._a && el._a() }
\ No newline at end of file
diff --git a/www/js/input.js b/www/js/input.js
new file mode 100644
index 0000000..fb95ac5
--- /dev/null
+++ b/www/js/input.js
@@ -0,0 +1,99 @@
+const KM = {
+ 37: 'l', 21: 'l',
+ 38: 'u', 19: 'u',
+ 39: 'r', 22: 'r',
+ 40: 'd', 20: 'd',
+ 13: 'e', 23: 'e', 66: 'e',
+ 27: 'b', 8: 'b', 4: 'b', 10009: 'b', 461: 'b'
+};
+
+document.addEventListener('keydown', e => {
+ fast = e.repeat;
+ document.body.classList.add('kbm');
+
+ if (e.keyCode === 85 || e.keyCode === 179) {
+ e.preventDefault();
+ tgl();
+ return;
+ }
+ if (e.keyCode === 126 || e.keyCode === 250) {
+ e.preventDefault();
+ vd.play();
+ return;
+ }
+ if (e.keyCode === 127) {
+ e.preventDefault();
+ vd.pause();
+ return;
+ }
+ if (e.keyCode === 89 || e.keyCode === 227) {
+ e.preventDefault();
+ vd.currentTime = Math.max(0, vd.currentTime - 10);
+ return;
+ }
+ if (e.keyCode === 90 || e.keyCode === 228) {
+ e.preventDefault();
+ vd.currentTime = Math.min(vd.duration || Infinity, vd.currentTime + 10);
+ return;
+ }
+
+ if (pl.classList.contains('show')) {
+ showCtl();
+ if (e.key === ' ' || e.keyCode === 32) { e.preventDefault(); tgl(); return }
+ if (cur === $('#pseek') && (e.keyCode === 37 || e.keyCode === 39 || e.keyCode === 21 || e.keyCode === 22)) {
+ e.preventDefault();
+ vd.currentTime += (e.keyCode === 39 || e.keyCode === 22) ? 10 : -10;
+ return;
+ }
+ if (cur && cur.id === 'vsl' && (e.keyCode === 37 || e.keyCode === 39 || e.keyCode === 21 || e.keyCode === 22)) {
+ e.preventDefault();
+ vd.muted = false;
+ vd.volume = Math.min(1, Math.max(0, vd.volume + ((e.keyCode === 39 || e.keyCode === 22) ? .1 : -.1)));
+ cur._v();
+ return;
+ }
+ }
+
+ if (sr.classList.contains('show') && !ov.classList.contains('show') && !pl.classList.contains('show')) {
+ if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault(); setQ(sqv + e.key); return }
+ if (e.keyCode === 8) { e.preventDefault(); setQ(sqv.slice(0, -1)); return }
+ }
+
+ const k = KM[e.keyCode];
+ if (!k) return;
+ e.preventDefault();
+
+ if (!cur) {
+ const fallback = document.querySelector('.f');
+ if (fallback) setFocus(fallback);
+ return;
+ }
+
+ if (k === 'e') act(cur);
+ else if (k === 'b') {
+ if (pl.classList.contains('show')) {
+ pmK ? closeMenu(1) : pl.classList.contains('eps') ? closeEps(1) : closePlayer();
+ } else if (ov.classList.contains('show')) {
+ closeDD() || closeDetail();
+ } else if (lib.classList.contains('show')) {
+ closeLib();
+ } else if (sr.classList.contains('show')) {
+ closeSearch();
+ }
+ } else {
+ nav(k);
+ }
+});
+
+let mx = -1, my = -1;
+document.addEventListener('mousemove', e => {
+ if (Math.abs(e.clientX - mx) + Math.abs(e.clientY - my) < 4) return;
+ mx = e.clientX; my = e.clientY; document.body.classList.remove('kbm');
+ if (pl.classList.contains('show')) { showCtl(); const g = e.target.closest('.f'); if (g && g !== cur && pl.contains(g)) setFocus(g); return }
+ const f = e.target.closest('.f');
+ if (f && f !== cur && (!ov.classList.contains('show') || ov.contains(f))) setFocus(f)
+});
+document.addEventListener('click', e => {
+ const f = e.target.closest('.f'); if (f) act(f)
+});
+ov.addEventListener('wheel', () => { }, { passive: true });
\ No newline at end of file
diff --git a/www/js/library.js b/www/js/library.js
new file mode 100644
index 0000000..5c9168c
--- /dev/null
+++ b/www/js/library.js
@@ -0,0 +1,27 @@
+let LIB = { wl: [], fav: [] }, libK = null; const lib = $('#lib');
+try { Object.assign(LIB, JSON.parse(localStorage.getItem('vyla.lib') || '{}')) } catch (e) { }
+const saveLib = () => { try { localStorage.setItem('vyla.lib', JSON.stringify(LIB)) } catch (e) { } };
+const slim = it => ({ id: it.id, _t: it._t || it.media_type, title: it.title, name: it.name, poster_path: it.poster_path, backdrop_path: it.backdrop_path, release_date: it.release_date, first_air_date: it.first_air_date, vote_average: it.vote_average, overview: it.overview });
+const has = (k, it) => LIB[k].some(x => x.id === it.id && x._t === it._t);
+function toggleLib(k, it) {
+ const i = LIB[k].findIndex(x => x.id === it.id && x._t === it._t), had = i >= 0;
+ if (had) LIB[k].splice(i, 1); else LIB[k].unshift(slim(it));
+ saveLib(); syncNav(); toast((had ? 'Removed from ' : 'Added to ') + LN[k]);
+ if (lib.classList.contains('show')) drawLib()
+}
+function drawLib() {
+ const k = libK, a = LIB[k], g = $('#lgrid');
+ $('#lt').innerHTML = `${LN[k]}${a.length} title${a.length === 1 ? '' : 's'}`;
+ g.innerHTML = '';
+ if (!a.length) { g.innerHTML = 'Nothing here yet. Open a title, press the \u22EE button and add it.
'; return }
+ a.forEach(x => { const c = card(x, false); c._bg = x; g.appendChild(c) })
+}
+function openLib(k) {
+ libK = k; setAct(k); document.body.classList.add('lib'); lib.classList.add('show'); side.classList.remove('open'); lib.scrollTop = 0;
+ drawLib(); syncNav(); setFocus($('#lgrid .card') || NAVEL[k])
+}
+function closeLib(silent) {
+ if (!lib.classList.contains('show')) return;
+ lib.classList.remove('show'); document.body.classList.remove('lib'); libK = null; heroIt = null; bgb._u = null; syncNav();
+ if (!silent) { setAct(mode); setFocus($('#rows .card')) }
+}
diff --git a/www/js/main.js b/www/js/main.js
new file mode 100644
index 0000000..ef547ec
--- /dev/null
+++ b/www/js/main.js
@@ -0,0 +1,8 @@
+(async () => {
+ rowsEl.innerHTML = SK.rows(4);
+ const [m, t] = await Promise.all([api('/genre/movie/list'), api('/genre/tv/list')]);
+ MG = m.genres || []; TG = t.genres || [];
+ [...MG, ...TG].forEach(g => G[g.id] = g.name);
+ if (!MG.length || !TG.length) { rowsEl.innerHTML = 'Could not reach TMDB.
'; return }
+ await go('discover');
+})();
diff --git a/www/js/player.js b/www/js/player.js
new file mode 100644
index 0000000..e349f81
--- /dev/null
+++ b/www/js/player.js
@@ -0,0 +1,805 @@
+let currentHls = null;
+let currentBgHls = null;
+let currentSources = [];
+let resolvedStreams = [];
+let selectedSourceKey = null;
+let selectedStreamUrl = null;
+let expandedSources = new Set();
+let currentQualityLevels = [];
+let selectedQualityIndex = -1;
+let activeSubtitles = [];
+let mediaSegments = [];
+let activeSegment = null;
+let plPrev = null;
+let plT = null;
+let plItem = null;
+let pmK = null;
+let plCtx = null;
+let viewS = null;
+let drag = 0;
+let discoverySession = 0;
+let userHasManuallySelectedSource = false;
+
+let subSettings = {
+ size: 24,
+ color: '#ffffff',
+ bg: 'rgba(0,0,0,0.75)',
+ offset: 0
+};
+
+const pi = (p, f) => ``;
+const SPK = '';
+const PI = {
+ x: pi(''),
+ play: pi('', 1),
+ pause: pi('', 1),
+ cc: pi(''),
+ vol: pi(SPK + ''),
+ mute: pi(SPK + ''),
+ qlt: pi(''),
+ set: pi(''),
+ more: pi(''),
+ fs: pi(''),
+ fx: pi(''),
+ eps: pi(''),
+ chk: pi('')
+};
+
+$('#ptop').innerHTML = `${PI.x}
![]()
${PI.qlt}
${PI.cc}
${PI.vol}
${PI.set}
${PI.more}
0:00${PI.eps}
${PI.fs}
`;
+$('#pmid').innerHTML = PI.play;
+
+const pm = $('#pm');
+const sk = $('#pseek');
+const pbg = $('#pbg');
+
+const fmt = t => {
+ t = Math.max(0, Math.floor(t || 0));
+ const h = Math.floor(t / 3600);
+ const m = Math.floor((t % 3600) / 60);
+ const c = t % 60;
+ return (h ? h + ':' + String(m).padStart(2, '0') : m) + ':' + String(c).padStart(2, '0');
+};
+
+const tgl = () => vd.paused ? vd.play() : vd.pause();
+const pico = () => {
+ $('#pmid').innerHTML = vd.paused ? PI.play : PI.pause;
+};
+
+function showCtl() {
+ pl.classList.add('ui');
+ clearTimeout(plT);
+ plT = setTimeout(() => {
+ if (!vd.paused && !pmK && !pl.classList.contains('eps')) {
+ pl.classList.remove('ui');
+ }
+ }, 3800);
+}
+
+function closeMenu(rf) {
+ if (!pmK) return;
+ const t = {
+ qlt: '#pqlt',
+ cc: '#pcc',
+ vol: '#pvol',
+ set: '#pset',
+ more: '#pmore'
+ }[pmK];
+ pmK = null;
+ pm.classList.remove('open');
+ pm.innerHTML = '';
+ if (rf) setFocus($(t));
+}
+
+function updateSubStyles() {
+ vd.classList.add('sub-active');
+ vd.style.setProperty('--sub-size', `${subSettings.size}px`);
+ vd.style.setProperty('--sub-color', subSettings.color);
+ vd.style.setProperty('--sub-bg', subSettings.bg);
+ Array.from(vd.textTracks).forEach(track => {
+ if (track.cues) {
+ for (let i = 0; i < track.cues.length; i++) {
+ const cue = track.cues[i];
+ if (cue && !cue._initialOffsetApplied) {
+ cue.startTime += subSettings.offset;
+ cue.endTime += subSettings.offset;
+ }
+ }
+ }
+ });
+}
+
+function applySubOffset(delta) {
+ subSettings.offset += delta;
+ Array.from(vd.textTracks).forEach(track => {
+ if (track.cues) {
+ for (let i = 0; i < track.cues.length; i++) {
+ const cue = track.cues[i];
+ if (cue) {
+ cue.startTime += delta;
+ cue.endTime += delta;
+ }
+ }
+ }
+ });
+}
+
+function buildProxyUrl(rawUrl, headersObj = {}) {
+ return `${API_BASE}/api/proxy?url=${encodeURIComponent(rawUrl)}&headers=${encodeURIComponent(JSON.stringify(headersObj))}`;
+}
+
+async function fetchSources() {
+ try {
+ const res = await fetch(`${API_BASE}/api/sources`);
+ const data = await res.json();
+ currentSources = data.sources || [];
+ } catch (_) {
+ currentSources = [];
+ }
+}
+
+async function startConcurrentDiscovery(it, s = null, e = null) {
+ const session = ++discoverySession;
+ pl.classList.add('buf');
+
+ resolvedStreams = [];
+ selectedStreamUrl = null;
+ let foundFirstPlayable = false;
+
+ if (!currentSources.length) {
+ await fetchSources();
+ }
+
+ if (session !== discoverySession) return;
+
+ const sourcePromises = currentSources.map(async (src) => {
+ let epQuery = s && e ? `&season=${s}&episode=${e}` : '';
+ try {
+ const res = await fetch(`${API_BASE}/api/stream?provider=${src.key}&tmdbId=${it.id}${epQuery}`);
+ const data = await res.json();
+ if (session !== discoverySession) return;
+
+ if (data.success && data.stream) {
+ const streamData = data.stream;
+ const headers = streamData.headers || {};
+ let playable = [];
+
+ if (Array.isArray(streamData.allUrls) && streamData.allUrls.length > 0) {
+ playable = streamData.allUrls;
+ } else if (streamData.url) {
+ playable = [{ url: streamData.url, quality: streamData.quality || 'Auto', isM3U8: streamData.isM3U8 }];
+ }
+
+ if (playable.length > 0) {
+ const resolvedEntry = {
+ provider: src.key,
+ label: src.label || src.key,
+ headers,
+ primaryUrl: playable[0].url,
+ allUrls: playable
+ };
+
+ resolvedStreams.push(resolvedEntry);
+
+ if (pmK === 'set') {
+ renderSourcesMenu();
+ }
+
+ if (!foundFirstPlayable && !userHasManuallySelectedSource) {
+ foundFirstPlayable = true;
+ selectedSourceKey = src.key;
+ playSpecificStream(resolvedEntry.primaryUrl, resolvedEntry.headers);
+ } else if (userHasManuallySelectedSource && selectedSourceKey === src.key && !selectedStreamUrl) {
+ playSpecificStream(resolvedEntry.primaryUrl, resolvedEntry.headers);
+ }
+ }
+ }
+ } catch (_) { }
+ });
+
+ Promise.allSettled(sourcePromises).then(() => {
+ if (session !== discoverySession) return;
+ if (!resolvedStreams.length) {
+ pl.classList.remove('buf');
+ toast('No playable sources available.');
+ }
+ });
+
+ loadSubtitles(it.id, s, e);
+ loadTimestamps(it.id, s, e);
+}
+
+function playSpecificStream(streamUrl, headers = {}) {
+ pl.classList.add('buf');
+ selectedStreamUrl = streamUrl;
+
+ if (currentHls) {
+ currentHls.destroy();
+ currentHls = null;
+ }
+ if (currentBgHls) {
+ currentBgHls.destroy();
+ currentBgHls = null;
+ }
+
+ const finalUrl = buildProxyUrl(streamUrl, headers);
+
+ if (streamUrl.includes('.m3u8')) {
+ if (Hls.isSupported()) {
+ currentHls = new Hls({
+ xhrSetup: function (xhr) {
+ xhr.withCredentials = false;
+ }
+ });
+ currentHls.loadSource(finalUrl);
+ currentHls.attachMedia(vd);
+ currentHls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
+ currentQualityLevels = data.levels || [];
+ vd.play().catch(() => { });
+ });
+ currentHls.on(Hls.Events.LEVEL_SWITCHED, (_, data) => {
+ selectedQualityIndex = data.level;
+ });
+
+ if (pbg) {
+ currentBgHls = new Hls({
+ xhrSetup: function (xhr) {
+ xhr.withCredentials = false;
+ }
+ });
+ currentBgHls.loadSource(finalUrl);
+ currentBgHls.attachMedia(pbg);
+ currentBgHls.on(Hls.Events.MANIFEST_PARSED, () => {
+ pbg.muted = true;
+ if (!vd.paused) pbg.play().catch(() => { });
+ });
+ }
+ } else if (vd.canPlayType('application/vnd.apple.mpegurl')) {
+ vd.src = finalUrl;
+ vd.play().catch(() => { });
+ if (pbg) {
+ pbg.src = finalUrl;
+ pbg.muted = true;
+ pbg.play().catch(() => { });
+ }
+ }
+ } else {
+ currentQualityLevels = [];
+ vd.src = finalUrl;
+ vd.play().catch(() => { });
+ if (pbg) {
+ pbg.src = finalUrl;
+ pbg.muted = true;
+ pbg.play().catch(() => { });
+ }
+ }
+}
+
+function setPlaybackQuality(levelIndex) {
+ selectedQualityIndex = levelIndex;
+ if (currentHls) {
+ currentHls.currentLevel = levelIndex;
+ }
+}
+
+async function loadSubtitles(id, s, e) {
+ Array.from(vd.querySelectorAll('track')).forEach(t => t.remove());
+ activeSubtitles = [];
+
+ try {
+ let epQuery = s && e ? `&season=${s}&episode=${e}` : '';
+ const res = await fetch(`${API_BASE}/api/subtitles?tmdbId=${id}${epQuery}`);
+ const data = await res.json();
+ activeSubtitles = data.subtitles || [];
+
+ activeSubtitles.forEach((sub, idx) => {
+ const track = document.createElement('track');
+ track.kind = 'subtitles';
+ track.label = `${sub.label} (${sub.source || 'mirror'})`;
+ track.srclang = sub.label.slice(0, 2).toLowerCase();
+ track.src = buildProxyUrl(sub.file);
+ track.default = idx === 0;
+ vd.appendChild(track);
+ track.track.mode = 'disabled';
+ });
+ updateSubStyles();
+ } catch (_) { }
+}
+
+async function loadTimestamps(tmdbId, season = null, episode = null, durationSec = null) {
+ mediaSegments = [];
+ activeSegment = null;
+ $('#pskip').classList.remove('v');
+ try {
+ let q = `${API_BASE}/api/timestamps?tmdb_id=${tmdbId}`;
+ if (season) q += `&season=${season}`;
+ if (episode) q += `&episode=${episode}`;
+ if (durationSec) q += `&duration_ms=${Math.round(durationSec * 1000)}`;
+
+ const res = await fetch(q);
+ const data = await res.json();
+ mediaSegments = data.segments || [];
+ } catch (_) {
+ mediaSegments = [];
+ }
+}
+
+function renderSourcesMenu() {
+ let container = $('#pm-src-list');
+ if (!container) return;
+ container.innerHTML = '';
+
+ if (!resolvedStreams.length) {
+ container.innerHTML = 'Probing providers...
';
+ return;
+ }
+
+ resolvedStreams.forEach(s => {
+ const grp = document.createElement('div');
+ grp.className = 'src-group';
+
+ const hdr = document.createElement('div');
+ hdr.className = 'src-header f' + (s.provider === selectedSourceKey ? ' on' : '');
+
+ const hasMulti = s.allUrls && s.allUrls.length > 1;
+ const countLabel = hasMulti ? ` (${s.allUrls.length})` : '';
+ const expandIcon = hasMulti ? `${expandedSources.has(s.provider) ? '▲' : '▼'}` : '';
+
+ hdr.innerHTML = `${s.label}${countLabel}${expandIcon}${s.provider === selectedSourceKey ? PI.chk : ''}
`;
+ hdr._a = () => {
+ userHasManuallySelectedSource = true;
+ if (hasMulti && s.provider === selectedSourceKey) {
+ if (expandedSources.has(s.provider)) expandedSources.delete(s.provider);
+ else expandedSources.add(s.provider);
+ renderSourcesMenu();
+ } else {
+ selectedSourceKey = s.provider;
+ playSpecificStream(s.primaryUrl, s.headers);
+ renderSourcesMenu();
+ }
+ };
+ grp.appendChild(hdr);
+
+ if (hasMulti) {
+ const sub = document.createElement('div');
+ sub.className = 'src-sublist' + (expandedSources.has(s.provider) ? ' open' : '');
+
+ s.allUrls.forEach((u, i) => {
+ const item = document.createElement('div');
+ item.className = 'src-subitem f' + (u.url === selectedStreamUrl ? ' on' : '');
+ item.innerHTML = `${u.quality || 'Stream ' + (i + 1)}${u.url === selectedStreamUrl ? PI.chk : ''}`;
+ item._a = () => {
+ userHasManuallySelectedSource = true;
+ selectedSourceKey = s.provider;
+ playSpecificStream(u.url, s.headers);
+ renderSourcesMenu();
+ };
+ sub.appendChild(item);
+ });
+ grp.appendChild(sub);
+ }
+
+ container.appendChild(grp);
+ });
+}
+
+function openMenu(k) {
+ if (pmK === k) {
+ closeMenu(1);
+ return;
+ }
+ closeEps();
+ pm.innerHTML = '';
+ pmK = k;
+ pm.classList.add('open');
+ let first = null;
+
+ const h = t => {
+ const e = document.createElement('h4');
+ e.textContent = t;
+ pm.appendChild(e);
+ };
+
+ const r = (l, on, fn) => {
+ const e = mkf('pi', `${l}${on ? PI.chk : ''}`, () => {
+ fn();
+ closeMenu(1);
+ });
+ pm.appendChild(e);
+ if (on && !first) first = e;
+ return e;
+ };
+
+ if (k === 'qlt') {
+ h('Stream Quality');
+ if (currentHls && currentQualityLevels.length > 0) {
+ r('Auto', selectedQualityIndex === -1, () => setPlaybackQuality(-1));
+ currentQualityLevels.forEach((lvl, idx) => {
+ const label = lvl.height ? `${lvl.height}p` : `${Math.round(lvl.bitrate / 1000)} kbps`;
+ r(label, selectedQualityIndex === idx, () => setPlaybackQuality(idx));
+ });
+ } else {
+ const activeProv = resolvedStreams.find(s => s.provider === selectedSourceKey);
+ if (activeProv && activeProv.allUrls.length > 1) {
+ activeProv.allUrls.forEach((u, idx) => {
+ const label = u.quality || `Stream ${idx + 1}`;
+ r(label, u.url === selectedStreamUrl, () => {
+ userHasManuallySelectedSource = true;
+ playSpecificStream(u.url, activeProv.headers);
+ });
+ });
+ } else {
+ r('Auto', true, () => { });
+ }
+ }
+ } else if (k === 'cc') {
+ h('Subtitles');
+ const T = [...vd.textTracks];
+ r('Off', !T.some(t => t.mode === 'showing'), () => {
+ T.forEach(t => t.mode = 'disabled');
+ });
+ T.forEach(t => r(t.label, t.mode === 'showing', () => {
+ T.forEach(u => u.mode = u === t ? 'showing' : 'disabled');
+ updateSubStyles();
+ }));
+
+ h('Subtitle Size');
+ [18, 22, 26, 32].forEach(sz => {
+ r(`${sz}px`, subSettings.size === sz, () => {
+ subSettings.size = sz;
+ updateSubStyles();
+ });
+ });
+
+ h('Subtitle Color');
+ [['White', '#ffffff'], ['Yellow', '#ffd700'], ['Cyan', '#00ffff']].forEach(([col, code]) => {
+ r(col, subSettings.color === code, () => {
+ subSettings.color = code;
+ updateSubStyles();
+ });
+ });
+
+ h('Subtitle Sync');
+ const syncRow = document.createElement('div');
+ syncRow.className = 'sub-ctrl-row';
+ syncRow.innerHTML = `Timing Offset`;
+ pm.appendChild(syncRow);
+ $('#sub-min').onclick = (ev) => {
+ ev.stopPropagation();
+ applySubOffset(-0.5);
+ };
+ $('#sub-plus').onclick = (ev) => {
+ ev.stopPropagation();
+ applySubOffset(0.5);
+ };
+ } else if (k === 'vol') {
+ h('Volume');
+ const w = document.createElement('div');
+ w.className = 'vrow';
+ w.innerHTML = '
';
+ pm.appendChild(w);
+ const vm = $('#vm');
+ const vs = $('#vsl');
+ const vu = () => {
+ const v = vd.muted ? 0 : vd.volume;
+ vs.firstChild.style.width = v * 100 + '%';
+ $('#vpc').textContent = Math.round(v * 100);
+ vm.innerHTML = $('#pvol').innerHTML = v ? PI.vol : PI.mute;
+ };
+ vm._a = () => {
+ vd.muted = !vd.muted;
+ vu();
+ };
+ vs._a = () => { };
+ vs._v = vu;
+ vs.addEventListener('click', e => {
+ const b = vs.getBoundingClientRect();
+ vd.muted = false;
+ vd.volume = Math.min(1, Math.max(0, (e.clientX - b.left) / b.width));
+ vu();
+ });
+ vu();
+ first = vs;
+ } else if (k === 'set') {
+ h('Available Sources');
+ const srcContainer = document.createElement('div');
+ srcContainer.id = 'pm-src-list';
+ pm.appendChild(srcContainer);
+ renderSourcesMenu();
+
+ h('Playback Speed');
+ [.5, 1, 1.25, 1.5, 2].forEach(v => r(v === 1 ? 'Normal' : v + '\u00d7', vd.playbackRate === v, () => vd.playbackRate = v));
+
+ h('Aspect Ratio');
+ r('Fit Screen', !pl.classList.contains('cover'), () => {
+ pl.classList.remove('cover');
+ if (pbg) {
+ pbg.currentTime = vd.currentTime;
+ if (!vd.paused) pbg.play().catch(() => { });
+ }
+ });
+ r('Fill Screen', pl.classList.contains('cover'), () => {
+ pl.classList.add('cover');
+ if (pbg) pbg.pause();
+ });
+ } else {
+ h('Library');
+ r('Watch Later', has('wl', plItem), () => toggleLib('wl', plItem));
+ r('Favorites', has('fav', plItem), () => toggleLib('fav', plItem));
+ }
+
+ showCtl();
+ setFocus(first || pm.querySelector('.f'));
+}
+
+async function openPlayer(it, ep, ctx) {
+ if (!it) return;
+ plPrev = cur;
+ plItem = it;
+ plCtx = ctx || null;
+ userHasManuallySelectedSource = false;
+ $('#peps').style.display = plCtx ? '' : 'none';
+ pl.classList.remove('eps');
+ $('#pnext').classList.remove('v');
+ $('#pt').textContent = it.title || it.name || '';
+ $('#ps').textContent = ep || [yr(it), it._t === 'tv' ? 'Series' : 'Movie'].filter(Boolean).join(' \u2022 ');
+ $('#pav').src = it.poster_path ? I + 'w185' + it.poster_path : PH;
+ vd.poster = it.backdrop_path ? I + 'w1280' + it.backdrop_path : '';
+
+ pl.classList.add('show');
+ showCtl();
+ pico();
+ setFocus($('#pmid'));
+
+ if (plCtx) {
+ const epData = plCtx.eps[plCtx.i];
+ startConcurrentDiscovery(it, plCtx.s, epData.episode_number);
+ } else {
+ startConcurrentDiscovery(it);
+ }
+}
+
+function closePlayer() {
+ closeMenu();
+ closeEps();
+ if (currentHls) {
+ currentHls.destroy();
+ currentHls = null;
+ }
+ if (currentBgHls) {
+ currentBgHls.destroy();
+ currentBgHls = null;
+ }
+ plCtx = null;
+ vd.pause();
+ vd.removeAttribute('src');
+ vd.load();
+ if (pbg) {
+ pbg.pause();
+ pbg.removeAttribute('src');
+ pbg.load();
+ }
+ if (document.fullscreenElement) document.exitFullscreen();
+ pl.classList.remove('show', 'ui');
+ if (plPrev && document.body.contains(plPrev)) setFocus(plPrev);
+}
+
+$('#pback')._a = closePlayer;
+$('#pmid')._a = tgl;
+
+$('#pskip')._a = () => {
+ if (activeSegment) {
+ const target = activeSegment.end != null ? activeSegment.end + 0.5 : (vd.duration || vd.currentTime + 30);
+ vd.currentTime = target;
+ $('#pskip').classList.remove('v');
+ activeSegment = null;
+ } else {
+ vd.currentTime += 85;
+ }
+};
+
+$('#pqlt')._a = () => openMenu('qlt');
+$('#pcc')._a = () => openMenu('cc');
+$('#pvol')._a = () => openMenu('vol');
+$('#pset')._a = () => openMenu('set');
+$('#pmore')._a = () => openMenu('more');
+$('#pfs')._a = () => document.fullscreenElement ? document.exitFullscreen() : pl.requestFullscreen && pl.requestFullscreen();
+
+document.addEventListener('fullscreenchange', () => {
+ $('#pfs').innerHTML = document.fullscreenElement ? PI.fx : PI.fs;
+});
+
+const sp = e => {
+ const b = sk.getBoundingClientRect();
+ vd.currentTime = Math.min(1, Math.max(0, (e.clientX - b.left) / b.width)) * (vd.duration || 0);
+};
+
+sk.addEventListener('pointerdown', e => {
+ drag = 1;
+ sk._m = 1;
+ sk.setPointerCapture(e.pointerId);
+ sp(e);
+});
+
+sk.addEventListener('pointermove', e => {
+ if (drag) sp(e);
+});
+
+sk.addEventListener('pointerup', () => drag = 0);
+
+sk._a = () => {
+ if (sk._m) {
+ sk._m = 0;
+ return;
+ }
+ tgl();
+};
+
+pl.querySelectorAll('.f').forEach(e => {
+ if (!e._a) e._a = () => { };
+});
+
+vd.addEventListener('click', () => {
+ if (pmK) closeMenu();
+ else if (pl.classList.contains('eps')) closeEps();
+ else tgl();
+ showCtl();
+});
+
+vd.addEventListener('play', () => {
+ if (!pl.classList.contains('cover') && pbg) {
+ pbg.muted = true;
+ pbg.currentTime = vd.currentTime;
+ pbg.play().catch(() => { });
+ }
+});
+
+vd.addEventListener('pause', () => {
+ if (pbg) pbg.pause();
+});
+
+vd.addEventListener('seeking', () => {
+ if (pbg) pbg.currentTime = vd.currentTime;
+});
+
+vd.addEventListener('seeked', () => {
+ if (pbg) pbg.currentTime = vd.currentTime;
+});
+
+vd.addEventListener('ratechange', () => {
+ if (pbg) pbg.playbackRate = vd.playbackRate;
+});
+
+vd.addEventListener('durationchange', () => {
+ $('#pdur').textContent = fmt(vd.duration);
+ if (vd.duration && plItem) {
+ const c = plCtx;
+ loadTimestamps(plItem.id, c ? c.s : null, c ? c.eps[c.i].episode_number : null, vd.duration);
+ }
+});
+
+vd.addEventListener('timeupdate', () => {
+ const d = vd.duration || 0;
+ const t = vd.currentTime;
+ const p = d ? (t / d) * 100 : 0;
+
+ $('#pfill').style.width = p + '%';
+ $('#phd').style.left = p + '%';
+ $('#pcur').textContent = fmt(t);
+
+ if (d && vd.buffered.length) {
+ $('#pbuf').style.width = (vd.buffered.end(vd.buffered.length - 1) / d * 100) + '%';
+ }
+
+ if (!pl.classList.contains('cover') && pbg && Math.abs(pbg.currentTime - t) > 0.35) {
+ pbg.currentTime = t;
+ }
+
+ const currentSeg = mediaSegments.find(seg => {
+ const afterStart = t >= seg.start;
+ const beforeEnd = seg.end == null ? (d ? t < d - 5 : true) : t < seg.end;
+ return afterStart && beforeEnd;
+ });
+
+ if (currentSeg) {
+ activeSegment = currentSeg;
+ $('#pskip').textContent = currentSeg.label;
+ $('#pskip').classList.add('v');
+ } else {
+ activeSegment = null;
+ $('#pskip').classList.remove('v');
+ }
+});
+
+['play', 'pause', 'ended'].forEach(n => vd.addEventListener(n, pico));
+['loadstart', 'waiting', 'seeking'].forEach(n => vd.addEventListener(n, () => pl.classList.add('buf')));
+['playing', 'canplay', 'seeked', 'error'].forEach(n => vd.addEventListener(n, () => pl.classList.remove('buf')));
+
+const hasNext = () => !!plCtx && (plCtx.i + 1 < plCtx.eps.length || plCtx.seasons.some(x => x.season_number > plCtx.s));
+const getSeason = async s => plCtx.cache[s] || (plCtx.cache[s] = (await api(`/tv/${plCtx.it.id}/season/${s}`)).episodes || []);
+
+async function playEp(s, i) {
+ const c = plCtx;
+ if (!c) return;
+ const eps = await getSeason(s);
+ const p = eps[i];
+ if (!p || plCtx !== c) return;
+ c.s = s;
+ c.i = i;
+ c.eps = eps;
+ $('#ps').textContent = `S${s} E${p.episode_number} \u2022 ${p.name || ''}`;
+ $('#pnext').classList.remove('v');
+ closeEps();
+ showCtl();
+ setFocus($('#pmid'));
+ userHasManuallySelectedSource = false;
+ startConcurrentDiscovery(c.it, s, p.episode_number);
+}
+
+function nextEp() {
+ const c = plCtx;
+ if (!hasNext()) return;
+ if (c.i + 1 < c.eps.length) {
+ playEp(c.s, c.i + 1);
+ } else {
+ playEp(c.seasons.find(x => x.season_number > c.s).season_number, 0);
+ }
+}
+
+function closeEps(rf) {
+ if (!pl.classList.contains('eps')) return;
+ pl.classList.remove('eps');
+ if (rf) setFocus($('#peps'));
+}
+
+function openEps() {
+ const c = plCtx;
+ if (!c) return;
+ closeMenu();
+ $('#peT').innerHTML = `Episodes${esc(c.it.title || c.it.name || '')}`;
+ const sr = $('#pseas');
+ sr.innerHTML = '';
+ c.seasons.forEach(x => {
+ sr.appendChild(mkf('chip', esc(x.name || 'Season ' + x.season_number), () => showSeason(x.season_number)));
+ });
+ pl.classList.add('eps');
+ showCtl();
+ showSeason(c.s, true);
+}
+
+async function showSeason(sn, focus) {
+ const c = plCtx;
+ const car = $('#pcar');
+ if (!c) return;
+ viewS = sn;
+ [...$('#pseas').children].forEach((e, i) => e.classList.toggle('act', c.seasons[i].season_number === sn));
+ car.innerHTML = SK.pep(8);
+ const eps = await getSeason(sn);
+ if (viewS !== sn || plCtx !== c) return;
+ car.innerHTML = '';
+ eps.forEach((p, i) => {
+ const n = p.episode_number;
+ const cur = c.s === sn && c.i === i;
+ const img = p.still_path ? I + 'w300' + p.still_path : (c.it.backdrop_path ? I + 'w300' + c.it.backdrop_path : PH);
+ car.appendChild(mkf('pe' + (cur ? ' cur' : ''), `
${n}${cur ? '
' : ''}
${h}
`; sec.lastChild.append(...a.map(tile)); sres.appendChild(sec) });
+ if (!n) sres.innerHTML = `No results${q ? ` for \u201c${esc(q)}\u201d` : ''}
`;
+ [...tabs.children].forEach((t, i) => t.classList.toggle('act', i === stab));
+ if (cur && !document.body.contains(cur)) setFocus(chips.children[1] || chips.firstChild || kb.children[2])
+}
+['Top Results', 'Movies', 'TV Shows'].forEach((t, i) => tabs.appendChild(mkf('tab', t, () => { stab = i; drawSearch() })));
+const KL = 'abcdefghijklmnopqrstuvwxyz'.split(''), KN = "1234567890.-'&:".split('');
+let num = false;
+function buildKb() {
+ kb.innerHTML = '';
+ const mk = (label, cls, fn) => kb.appendChild(mkf('k ' + cls, label, () => { fn(); sr.scrollTo({ top: 0, behavior: 'smooth' }) }));
+ mk(num ? 'ABC' : '123', 'w', () => { num = !num; buildKb(); setFocus(kb.firstChild) });
+ mk('SPACE', 'w', () => { if (sqv && !sqv.endsWith(' ')) setQ(sqv + ' ') });
+ (num ? KN : KL).forEach(c => mk(c, '', () => setQ(sqv + c)));
+ mk('', 'd', () => setQ(sqv.slice(0, -1)))
+}
+buildKb();
+function openSearch() {
+ setAct('search'); document.body.classList.add('srch'); sr.classList.add('show'); side.classList.remove('open'); sr.scrollTop = 0;
+ if (!sres.children.length) fillSearch('');
+ setFocus(kb.children[2])
+}
+function closeSearch(silent) {
+ if (!sr.classList.contains('show')) return;
+ sr.classList.remove('show'); document.body.classList.remove('srch');
+ heroIt = null; bgb._u = null;
+ if (!silent) { setAct(mode); setFocus(document.querySelector('#rows .card')) }
+}
+
+
+function skelSearch() {
+ chips.innerHTML = SK.chips(7);
+ sres.innerHTML = [0, 1].map(() => ``).join('')
+}
diff --git a/www/js/sidebar.js b/www/js/sidebar.js
new file mode 100644
index 0000000..edb0a85
--- /dev/null
+++ b/www/js/sidebar.js
@@ -0,0 +1,16 @@
+const NAV = [
+ ['search', 'Search', ic('')],
+ ['discover', 'Discovery', ic('')],
+ ['movie', 'Movies', ic('')],
+ ['tv', 'TV Shows', ic('')],
+ ['wl', 'Watch Later', ic(P_WL)],
+ ['fav', 'Favorites', ic(P_FV)]
+];
+
+NAV.forEach(([k, n, s]) => { const e = document.createElement('div'); e.className = 'ni f'; e.tabIndex = -1; e.innerHTML = s + `${n}`; e._a = () => go(k); NAVEL[k] = e; $('#nav').appendChild(e) });
+syncNav();
+function setAct(k) { Object.entries(NAVEL).forEach(([n, e]) => e.classList.toggle('act', n === k)); navAct = NAVEL[k] }
+const mark = $('#mark'); mark.onerror = () => { mark.onerror = null; mark.src = PH }; mark.src = LOGO;
+
+
+function syncNav() { ['wl', 'fav'].forEach(k => { if (NAVEL[k]) NAVEL[k].style.display = (LIB[k].length || libK === k) ? '' : 'none' }) }
diff --git a/www/js/skeleton.js b/www/js/skeleton.js
new file mode 100644
index 0000000..7358c76
--- /dev/null
+++ b/www/js/skeleton.js
@@ -0,0 +1,13 @@
+const SK = {
+ cards: n => ''.repeat(n),
+ tiles: n => ''.repeat(n),
+ chips: n => Array.from({ length: n }, (_, i) => ``).join(''),
+ pep: n => ''.repeat(n),
+ eps: n => ''.repeat(n),
+ rows: n => Array.from({ length: n }, () => '').join(''),
+ detail: it => {
+ const bp = it.backdrop_path || it.poster_path || '';
+ return ``
+ }
+};
\ No newline at end of file