vyrplay 1.0.0 → 1.0.1

package/src/VyrPlay.js

@@ -1,1331 +0,0 @@
-/**
- * VyrPlay — lightweight, robust, responsive custom video player.
- * Supports MP4, HLS, multi-quality with smart fallback.
- *
- * Usage:
- *   import { VyrPlay } from 'vyrplay';
- *   const player = new VyrPlay('#el', { sources: [...], title: '...' });
- */
-
-import { MediaEngine } from './engine/MediaEngine.js';
-import { Emitter } from './utils/events.js';
-import { fmtTime, fmtRate, clamp } from './utils/format.js';
-import { buildTemplate } from './ui/template.js';
-
-const SEEK_STEPS = [5, 10, 15, 30, 60];
-const SPEED_OPTS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-const HOLD_SPEED_OPTS = [1.5, 1.75, 2, 2.5, 3];
-const LS = {
-  seek: 'vyrplay_seek_step',
-  rate: 'vyrplay_rate',
-  holdOn: 'vyrplay_hold_speed',
-  holdRate: 'vyrplay_hold_rate',
-  vol: 'vyrplay_volume',
-  muted: 'vyrplay_muted',
-  subY: 'vyrplay_sub_y',
-  subOn: 'vyrplay_sub_on',
-  subColor: 'vyrplay_sub_color',
-  subSize: 'vyrplay_sub_size',
-  subBg: 'vyrplay_sub_bg',
-  subLang: 'vyrplay_sub_lang',
-};
-
-function $(root, sel) {
-  if (!root) return null;
-  if (typeof root === "string") return document.querySelector(root);
-  return root.querySelector(sel);
-}
-function $$(root, sel) {
-  if (!root) return [];
-  return Array.from(root.querySelectorAll(sel));
-}
-
-export class VyrPlay {
-  /**
-   * @param {string|HTMLElement} container
-   * @param {object} options
-   */
-  constructor(container, options = {}) {
-    this.el = typeof container === 'string' ? document.querySelector(container) : container;
-    if (!this.el) throw new Error('[VyrPlay] Container not found');
-
-    this.opts = this._mergeOpts(options);
-    this.emitter = new Emitter();
-    if (this.opts.on) {
-      Object.entries(this.opts.on).forEach(([ev, fn]) => {
-        if (typeof fn === 'function') this.emitter.on(ev, fn);
-      });
-    }
-
-    this.uiVisible = true;
-    this.uiLocked = false;
-    this.seeking = false;
-    this.hideTimer = null;
-    this.seekStep = this._loadNum(LS.seek, this.opts.settings.seekStep, 1, 300);
-    this.playRate = this._loadNum(LS.rate, this.opts.settings.playbackRate, 0.25, 3);
-    this.holdSpeedOn = this._loadBool(LS.holdOn, this.opts.settings.holdSpeedEnabled);
-    this.holdRate = this._loadNum(LS.holdRate, this.opts.settings.holdSpeed, 1, 4);
-    this.volLevel = this._loadNum(LS.vol, 1, 0, 1);
-    this.volMuted = this._loadBool(LS.muted, false);
-    this.subY = this._loadNum(LS.subY, 12, 0, 80);
-    this.subOn = this._loadBool(LS.subOn, true);
-    this.subColor = (typeof localStorage !== 'undefined' && localStorage.getItem(LS.subColor)) || '#ffffff';
-    this.subSize = this._loadNum(LS.subSize, 20, 14, 42);
-    this.subBg = this._loadNum(LS.subBg, 55, 0, 100);
-    this.subLang = (typeof localStorage !== 'undefined' && localStorage.getItem(LS.subLang)) || '';
-    this._tracks = [];
-    this._activeTrackIdx = -1;
-    this.isHoldingSpeed = false;
-    this.holdTimer = null;
-    this._destroyed = false;
-
-    this._injectStyles();
-    this._buildDOM();
-    this._bindRefs();
-    this.audioEl = null;
-    this._audioUrl = null;
-    this._bindUI();
-    this._applySettingsUI();
-    this._applySubStyle();
-
-    this.engine = new MediaEngine(this.video, {
-      onReady: (info) => {
-        this._hideLoading();
-        this._hideBuffer();
-        this._updatePlayIcon();
-        this._updateProgress();
-        this._renderQualities();
-        this._showUI();
-        if (this.opts.tracks && this.opts.tracks.length) {
-          this._setupTracks(this.opts.tracks);
-        }
-        this.emitter.emit('ready', this.getState());
-      },
-      onError: (err) => {
-        this._showError(err.message || 'Gagal memuat video');
-        this.emitter.emit('error', err);
-      },
-      onQualityChange: (label) => {
-        if (this.btnQuality) this.btnQuality.textContent = label || 'HD';
-        this._renderQualities();
-      },
-    });
-
-    // Auto start if sources provided
-    if (this.opts.sources || this.opts.src) {
-      this.load(this.opts);
-    } else {
-      this._hideLoading();
-    }
-  }
-
-  _mergeOpts(o) {
-    return {
-      title: o.title || 'VyrPlay',
-      poster: o.poster || null,
-      startTime: o.startTime || 0,
-      sources: o.sources || null,
-      src: o.src || null,
-      type: o.type || null,
-      audio: o.audio || null,
-      features: {
-        quality: true,
-        pip: true,
-        lockUi: true,
-        holdToSpeed: true,
-        volume: true,
-        seekButtons: true,
-        settings: true,
-        subtitles: true,
-        back: false,
-        ...o.features,
-      },
-      settings: {
-        seekStep: 10,
-        playbackRate: 1,
-        holdSpeed: 2,
-        holdSpeedEnabled: true,
-        ...o.settings,
-      },
-      on: o.on || {},
-      ...o,
-    };
-  }
-
-  _loadNum(key, def, min, max) {
-    try {
-      const v = parseFloat(localStorage.getItem(key));
-      if (isFinite(v) && v >= min && v <= max) return v;
-    } catch (_) {}
-    return def;
-  }
-  _loadBool(key, def) {
-    try {
-      const v = localStorage.getItem(key);
-      if (v === '0' || v === 'false') return false;
-      if (v === '1' || v === 'true') return true;
-    } catch (_) {}
-    return def;
-  }
-  _save(key, val) {
-    try { localStorage.setItem(key, String(val)); } catch (_) {}
-  }
-
-  _injectStyles() {
-    if (document.getElementById('vyrplay-styles')) return;
-    // Styles are expected via import or link; for standalone we inject a minimal marker
-    // Full CSS should be imported by user: import 'vyrplay/style.css'
-    // For demo we also allow inline injection from build
-  }
-
-  _buildDOM() {
-    // Parent harus relative supaya absolute root mengisi area
-    try {
-      const parent = this.el.parentElement;
-      if (parent) {
-        const ps = window.getComputedStyle(parent);
-        if (ps.position === 'static') parent.style.position = 'relative';
-      }
-    } catch (_) {}
-    this.el.classList.add('vyr-root');
-    // Pastikan host punya ukuran minimal jika parent belum set height
-    try {
-      const cs = window.getComputedStyle(this.el);
-      if ((!cs.height || cs.height === '0px') && !this.el.style.height) {
-        this.el.style.width = this.el.style.width || '100%';
-        this.el.style.aspectRatio = this.el.style.aspectRatio || '16 / 9';
-      }
-    } catch (_) {}
-    this.el.innerHTML = buildTemplate({
-      title: this.opts.title,
-      features: this.opts.features,
-    });
-    if (this.opts.poster) {
-      const p = this.el.querySelector('.vyr-poster');
-      if (p) {
-        p.style.backgroundImage = `url("${this.opts.poster}")`;
-        p.classList.remove('hide');
-      }
-    }
-  }
-
-  _bindRefs() {
-    const r = this.el;
-    this.video = $(r, 'video');
-    this.ui = $(r, '.vyr-ui');
-    this.loading = $(r, '.vyr-loading');
-    this.buffer = $(r, '.vyr-buffer');
-    this.poster = $(r, '.vyr-poster');
-    this.btnPP = $(r, '.vyr-btn-pp');
-    this.btnRew = $(r, '.vyr-btn-rew');
-    this.btnFf = $(r, '.vyr-btn-ff');
-    this.btnQuality = $(r, '.vyr-btn-quality');
-    this.btnFs = $(r, '.vyr-btn-fs');
-    this.btnLock = $(r, '.vyr-btn-lock');
-    this.btnSettings = $(r, '.vyr-btn-settings');
-    this.btnPip = $(r, '.vyr-btn-pip');
-    this.btnBack = $(r, '.vyr-btn-back');
-    this.progress = $(r, '.vyr-progress');
-    this.pFill = $(r, '.vyr-progress-fill');
-    this.pThumb = $(r, '.vyr-progress-thumb');
-    this.timeLabel = $(r, '.vyr-time');
-    this.scrubTip = $(r, '.vyr-scrub-tip');
-    this.titleEl = $(r, '.vyr-title');
-    this.speedBadge = $(r, '.vyr-speed-badge');
-    this.volToast = $(r, '.vyr-vol-toast');
-    this.backdrop = $(r, '.vyr-backdrop');
-    this.sheetQuality = $(r, '.vyr-sheet-quality');
-    this.sheetSettings = $(r, '.vyr-sheet-settings');
-    this.sheetSeek = $(r, '.vyr-sheet-seek');
-    this.sheetSpeed = $(r, '.vyr-sheet-speed');
-    this.sheetHold = $(r, '.vyr-sheet-hold');
-    this.qualityList = $(r, '.vyr-quality-list');
-    this.seekList = $(r, '.vyr-seek-list');
-    this.speedList = $(r, '.vyr-speed-list');
-    this.holdList = $(r, '.vyr-hold-list');
-    this.pipOverlay = $(r, '.vyr-pip-overlay');
-    this.subLayer = $(r, '.vyr-sub-layer');
-    this.subText = $(r, '.vyr-sub-text');
-    this.btnCc = $(r, '.vyr-btn-cc');
-    this.sheetSubs = $(r, '.vyr-sheet-subs');
-    this.sheetSubstyle = $(r, '.vyr-sheet-substyle');
-    this.subsList = $(r, '.vyr-subs-list');
-  }
-
-  // ─── Public API ───────────────────────────────────────────
-
-  /** Load new sources / options */
-  async load(opts = {}) {
-    if (this._destroyed) return;
-    this._showLoading();
-    if (opts.title && this.titleEl) this.titleEl.textContent = opts.title;
-    if (opts.poster && this.poster) {
-      this.poster.style.backgroundImage = `url("${opts.poster}")`;
-      this.poster.classList.remove('hide');
-    }
-    const input = opts.sources || (opts.src ? [{ url: opts.src, type: opts.type }] : this.opts.sources || this.opts.src);
-    this.engine.setSources(input);
-    const start = opts.startTime ?? this.opts.startTime ?? 0;
-    if (opts.tracks) {
-      this.opts.tracks = opts.tracks;
-    }
-    if (opts.audio !== undefined) {
-      this.opts.audio = opts.audio;
-    }
-    await this._setupAudio(this.opts.audio || null);
-    await this.engine.load(start, true);
-    // tracks juga di onReady; panggil lagi di sini agar custom URL pasti ke-load
-    if (this.opts.tracks && this.opts.tracks.length) {
-      await this._setupTracks(this.opts.tracks);
-    }
-  }
-
-  play() {
-    const p = this.video.play();
-    this._audioPlay();
-    return p;
-  }
-  pause() {
-    this.video.pause();
-    this._audioPause();
-  }
-  toggle() {
-    if (this.video.paused) this.play().catch(() => {});
-    else this.pause();
-  }
-  seek(sec) {
-    this._safeSeek(sec);
-  }
-  setQuality(label) {
-    return this.engine.switchQuality(label);
-  }
-  setPlaybackRate(r) {
-    this.playRate = r;
-    this._save(LS.rate, r);
-    if (!this.isHoldingSpeed) {
-      try { this.video.playbackRate = r; } catch (_) {}
-      try { if (this.audioEl) this.audioEl.playbackRate = r; } catch (_) {}
-    }
-    const el = this.el.querySelector('.vyr-set-speed-val');
-    if (el) el.textContent = fmtRate(r);
-    this._renderSpeedList();
-  }
-  getState() {
-    return {
-      currentTime: this.video?.currentTime || 0,
-      duration: (this.video && isFinite(this.video.duration)) ? this.video.duration : 0,
-      paused: !this.video || this.video.paused,
-      quality: this.engine?.currentQuality,
-      playbackRate: this.playRate,
-      volume: this.volLevel,
-      muted: this.volMuted,
-      subtitle: this._activeTrackIdx >= 0 ? (this._tracks[this._activeTrackIdx]?.label || this.subLang) : null,
-    };
-  }
-  on(event, fn) { return this.emitter.on(event, fn); }
-  off(event, fn) { this.emitter.off(event, fn); }
-
-
-
-  /** Audio terpisah (CDN yang video/audio stream beda URL) */
-  async _setupAudio(url) {
-    if (this._audioHls) {
-      try { this._audioHls.destroy(); } catch (_) {}
-      this._audioHls = null;
-    }
-    if (this.audioEl) {
-      try { this.audioEl.pause(); } catch (_) {}
-      try { this.audioEl.removeAttribute('src'); this.audioEl.load(); } catch (_) {}
-      try { this.audioEl.remove(); } catch (_) {}
-      this.audioEl = null;
-    }
-    this._audioUrl = url || null;
-    if (!url) {
-      try {
-        this.video.muted = !!this.volMuted;
-        this.video.volume = this.volMuted ? 0 : this.volLevel;
-      } catch (_) {}
-      this._syncAudioTime = null;
-      return;
-    }
-    const clean = String(url).split('#')[0];
-    const a = document.createElement('audio');
-    a.preload = 'auto';
-    a.setAttribute('playsinline', '');
-    a.style.display = 'none';
-    this.el.appendChild(a);
-    this.audioEl = a;
-    try {
-      this.video.muted = true;
-      a.volume = this.volMuted ? 0 : this.volLevel;
-      a.muted = !!this.volMuted;
-    } catch (_) {}
-
-    const isHls = /\.m3u8(\?|$)/i.test(clean);
-    if (isHls && a.canPlayType('application/vnd.apple.mpegurl')) {
-      a.src = clean;
-    } else if (isHls) {
-      try {
-        let Hls = window.Hls;
-        if (!Hls) {
-          await new Promise((resolve, reject) => {
-            const s = document.createElement('script');
-            s.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.7';
-            s.onload = () => resolve();
-            s.onerror = reject;
-            document.head.appendChild(s);
-          });
-          Hls = window.Hls;
-        }
-        if (Hls && Hls.isSupported()) {
-          this._audioHls = new Hls({ enableWorker: true, maxBufferLength: 30 });
-          this._audioHls.loadSource(clean);
-          this._audioHls.attachMedia(a);
-        } else {
-          a.src = clean;
-        }
-      } catch (err) {
-        console.warn('[VyrPlay] audio hls failed', err);
-        a.src = clean;
-      }
-    } else {
-      a.src = clean;
-    }
-
-    this._syncAudioTime = () => {
-      if (!this.audioEl || !this.video) return;
-      try {
-        const drift = Math.abs((this.audioEl.currentTime || 0) - (this.video.currentTime || 0));
-        if (drift > 0.35) this.audioEl.currentTime = this.video.currentTime || 0;
-      } catch (_) {}
-    };
-    a.addEventListener('error', () => console.warn('[VyrPlay] audio track failed', url));
-  }
-
-  _audioPlay() {
-    if (!this.audioEl) return;
-    try {
-      this.audioEl.currentTime = this.video.currentTime || 0;
-      this.audioEl.playbackRate = this.video.playbackRate || 1;
-      this.audioEl.play().catch(() => {});
-    } catch (_) {}
-  }
-
-  _audioPause() {
-    if (!this.audioEl) return;
-    try { this.audioEl.pause(); } catch (_) {}
-  }
-
-  // ─── Subtitles ──────────────────────────────────────────
-
-  /** @param {Array<{src,label,srclang,kind,default}>} tracks */
-  setTracks(tracks) {
-    this._setupTracks(tracks || []);
-  }
-
-  async _setupTracks(tracks) {
-    this._tracks = Array.isArray(tracks) ? tracks.map((t) => ({ ...t })) : [];
-    (this._vttBlobs || []).forEach((u) => { try { URL.revokeObjectURL(u); } catch (_) {} });
-    this._vttBlobs = [];
-    if (this.video) {
-      Array.from(this.video.querySelectorAll('track')).forEach((t) => t.remove());
-      try {
-        for (let i = 0; i < this.video.textTracks.length; i++) {
-          this.video.textTracks[i].mode = 'disabled';
-        }
-      } catch (_) {}
-    }
-    this._activeTrackIdx = -1;
-    if (this.subText) this.subText.textContent = '';
-    if (!this._tracks.length) {
-      if (this.btnCc) this.btnCc.style.display = 'none';
-      this._applySubStyle();
-      return;
-    }
-    if (this.btnCc) this.btnCc.style.display = '';
-
-    // Fetch + parse setiap track (multi-sub)
-    for (let i = 0; i < this._tracks.length; i++) {
-      const t = this._tracks[i];
-      let text = null;
-      try {
-        const res = await fetch(t.src, { mode: 'cors', credentials: 'omit' });
-        if (res.ok) text = await res.text();
-      } catch (err) {
-        console.warn('[VyrPlay] VTT fetch CORS failed', t.src, err);
-      }
-      // fallback no-cors tidak bisa baca body — coba sekali lagi tanpa credentials
-      if (!text) {
-        try {
-          const res2 = await fetch(t.src);
-          if (res2.ok) text = await res2.text();
-        } catch (_) {}
-      }
-      if (text && text.trim()) {
-        this._tracks[i]._cues = this._parseVtt(text);
-        console.log('[VyrPlay] sub track', t.label || t.srclang || i, 'cues=', this._tracks[i]._cues.length);
-      } else {
-        this._tracks[i]._cues = [];
-        console.warn('[VyrPlay] VTT empty/failed', t.src);
-      }
-    }
-
-    // Aktifkan default: prefer default flag, else first track with cues
-    let idx = this._tracks.findIndex((t) => t.default);
-    if (idx < 0) idx = this._tracks.findIndex((t) => t._cues && t._cues.length);
-    if (idx < 0) idx = 0;
-    this.subOn = true;
-    this._save(LS.subOn, '1');
-    this._enableTrack(idx);
-    this._renderSubsList();
-    this._applySubStyle();
-    this._syncManualSubs();
-  }
-
-  _enableTrack(idx) {
-    if (idx < 0 || idx >= this._tracks.length) {
-      this._disableAllTracks();
-      return;
-    }
-    this._activeTrackIdx = idx;
-    this.subOn = true;
-    this._save(LS.subOn, '1');
-    const t = this._tracks[idx];
-    if (t) {
-      this.subLang = t.srclang || t.label || '';
-      this._save(LS.subLang, this.subLang);
-    }
-    this.btnCc?.classList.add('active');
-    this._applySubStyle();
-    this._renderSubsList();
-    this._syncManualSubs();
-  }
-
-  _disableAllTracks() {
-    this._activeTrackIdx = -1;
-    try {
-      for (let i = 0; i < this.video.textTracks.length; i++) {
-        this.video.textTracks[i].mode = 'disabled';
-      }
-    } catch (_) {}
-    if (this.subText) this.subText.textContent = '';
-    this.btnCc?.classList.remove('active');
-    this._save(LS.subLang, '');
-    this.subLang = '';
-    this._applySubStyle();
-    this._renderSubsList();
-  }
-
-
-  _parseVtt(text) {
-    const cues = [];
-    if (!text) return cues;
-    const blocks = String(text).replace(/\r/g, '').split(/\n\n+/);
-    const ts = (s) => {
-      const m = String(s || '').trim().replace(',', '.').match(/(?:(\d+):)?(\d{1,2}):(\d{1,2})(?:\.(\d{1,3}))?/);
-      if (!m) return 0;
-      const h = parseInt(m[1] || '0', 10);
-      const mi = parseInt(m[2], 10);
-      const sec = parseInt(m[3], 10);
-      const ms = parseInt((m[4] || '0').padEnd(3, '0'), 10);
-      return h * 3600 + mi * 60 + sec + ms / 1000;
-    };
-    for (const block of blocks) {
-      const lines = block.split('\n').filter((l) => l.trim() !== '');
-      if (!lines.length || /^WEBVTT/i.test(lines[0]) || /^NOTE/.test(lines[0])) continue;
-      let i = 0;
-      if (lines[0].includes('-->')) i = 0;
-      else if (lines[1] && lines[1].includes('-->')) i = 1;
-      else continue;
-      const parts = lines[i].split('-->');
-      if (parts.length < 2) continue;
-      const start = ts(parts[0]);
-      const endRaw = (parts[1] || '').trim().split(/\s+/)[0];
-      const end = ts(endRaw);
-      const body = lines.slice(i + 1).join('\n').replace(/<[^>]+>/g, '');
-      if (body) cues.push({ start, end, text: body });
-    }
-    return cues;
-  }
-
-  _syncManualSubs() {
-    if (!this.subOn || this._activeTrackIdx < 0 || !this.subText) {
-      if (this.subText && (!this.subOn || this._activeTrackIdx < 0)) this.subText.textContent = '';
-      return;
-    }
-    const tr = this._tracks[this._activeTrackIdx];
-    const cues = tr && tr._cues;
-    if (!cues || !cues.length) return;
-    const now = this.video ? (this.video.currentTime || 0) : 0;
-    let text = '';
-    for (let i = 0; i < cues.length; i++) {
-      const cu = cues[i];
-      // toleransi 80ms di akhir biar tidak kedip hilang terlalu cepat
-      if (now >= cu.start && now <= cu.end + 0.08) {
-        text = text ? (text + '\n' + cu.text) : cu.text;
-      }
-    }
-    if (this.subText.textContent !== text) this.subText.textContent = text;
-  }
-
-  _onCueChange(tt) {
-    // Selalu prioritaskan overlay manual jika VTT sudah di-parse
-    // (TextTrack browser sering mismatch timing di HLS)
-    const tr = this._tracks[this._activeTrackIdx];
-    if (tr && tr._cues && tr._cues.length) {
-      this._syncManualSubs();
-      return;
-    }
-    if (this._activeTrackIdx < 0) {
-      if (this.subText) this.subText.textContent = '';
-      return;
-    }
-    try {
-      const active = this.video.textTracks[this._activeTrackIdx];
-      if (tt && active && tt !== active) return;
-      const cues = (active && active.activeCues) ? active.activeCues : null;
-      if (!cues || !cues.length) {
-        if (this.subText) this.subText.textContent = '';
-        return;
-      }
-      const parts = [];
-      for (let i = 0; i < cues.length; i++) parts.push(cues[i].text);
-      if (this.subText) this.subText.textContent = parts.join('\n');
-    } catch (_) {
-      if (this.subText) this.subText.textContent = '';
-    }
-  }
-
-  _applySubStyle() {
-    if (!this.subLayer || !this.subText) return;
-    this.el.style.setProperty('--vyr-sub-y', String(this.subY));
-    this.subLayer.style.display = this.subOn && this._activeTrackIdx >= 0 ? 'flex' : 'none';
-    this.subText.style.color = this.subColor;
-    this.subText.style.fontSize = this.subSize + 'px';
-    this.subText.style.fontFamily = 'var(--vyr-font)';
-    this.subText.style.background = 'rgba(0,0,0,' + (this.subBg / 100).toFixed(2) + ')';
-    const color = this.el.querySelector('.vyr-sub-color');
-    const size = this.el.querySelector('.vyr-sub-size');
-    const bg = this.el.querySelector('.vyr-sub-bg');
-    const y = this.el.querySelector('.vyr-sub-y');
-    const sizeVal = this.el.querySelector('.vyr-sub-size-val');
-    const bgVal = this.el.querySelector('.vyr-sub-bg-val');
-    const yVal = this.el.querySelector('.vyr-sub-y-val');
-    const tog = this.el.querySelector('[data-tog-sub]');
-    if (color) color.value = this.subColor;
-    if (size) size.value = String(this.subSize);
-    if (bg) bg.value = String(this.subBg);
-    if (y) y.value = String(this.subY);
-    if (sizeVal) sizeVal.textContent = this.subSize + 'px';
-    if (bgVal) bgVal.textContent = this.subBg + '%';
-    if (yVal) yVal.textContent = this.subY + '%';
-    if (tog) tog.classList.toggle('on', this.subOn);
-  }
-
-  _renderSubsList() {
-    if (!this.subsList) return;
-    let html = '<div class="vyr-sheet-item' + (this._activeTrackIdx < 0 ? ' active' : '') + '" data-sub-idx="-1">Off<span class="check">✓</span></div>';
-    this._tracks.forEach((t, i) => {
-      const label = t.label || t.srclang || ('Track ' + (i + 1));
-      html += '<div class="vyr-sheet-item' + (i === this._activeTrackIdx ? ' active' : '') + '" data-sub-idx="' + i + '">' + label + '<span class="check">✓</span></div>';
-    });
-    this.subsList.innerHTML = html;
-  }
-
-
-  destroy() {
-    this._destroyed = true;
-    clearTimeout(this.hideTimer);
-    clearTimeout(this.holdTimer);
-    (this._vttBlobs || []).forEach((u) => { try { URL.revokeObjectURL(u); } catch (_) {} });
-    this._vttBlobs = [];
-    this.engine?.destroy();
-    this.emitter.destroy();
-    this.el.innerHTML = '';
-    this.el.classList.remove('vyr-root', 'is-fs');
-  }
-
-  // ─── Internal UI ──────────────────────────────────────────
-
-  _showLoading() { this.loading?.classList.remove('hide'); }
-  _hideLoading() { this.loading?.classList.add('hide'); }
-  _showBuffer() {
-    this.buffer?.classList.add('show');
-    this.btnPP?.classList.add('loading');
-  }
-  _hideBuffer() {
-    this.buffer?.classList.remove('show');
-    this.btnPP?.classList.remove('loading');
-  }
-
-  _showError(msg) {
-    if (!this.loading) return;
-    this.loading.innerHTML = `
-      <div class="vyr-error">
-        <div class="vyr-error-title">Gagal memuat</div>
-        <div class="vyr-error-detail">${msg}</div>
-      </div>`;
-    this.loading.classList.remove('hide');
-  }
-
-  _updatePlayIcon() {
-    const paused = this.video.paused;
-    const play = this.el.querySelector('.vyr-ic-play');
-    const pause = this.el.querySelector('.vyr-ic-pause');
-    if (play) play.style.display = paused ? 'block' : 'none';
-    if (pause) pause.style.display = paused ? 'none' : 'block';
-  }
-
-  _paintProgress(t, d, showTip) {
-    d = (d != null && isFinite(d)) ? d : (this.video?.duration || 0);
-    t = isFinite(t) ? Math.max(0, t) : 0;
-    if (d > 0) t = Math.min(t, d);
-    const pct = d > 0 ? (t / d) * 100 : 0;
-    if (this.pFill) this.pFill.style.width = pct + '%';
-    if (this.pThumb) this.pThumb.style.left = pct + '%';
-    if (this.timeLabel) this.timeLabel.textContent = fmtTime(t) + ' / ' + fmtTime(d);
-    if (this.scrubTip) {
-      this.scrubTip.textContent = fmtTime(t);
-      this.scrubTip.style.left = pct + '%';
-      this.scrubTip.classList.toggle('show', !!showTip);
-    }
-  }
-
-  _updateProgress() {
-    if (this.seeking) return;
-    this._paintProgress(this.video.currentTime || 0, this.video.duration || 0, false);
-  }
-
-  _safeSeek(sec) {
-    if (!this.video || !isFinite(sec)) return;
-    const d = this.video.duration;
-    if (isFinite(d) && d > 0) sec = clamp(sec, 0, Math.max(0, d - 0.3));
-    else sec = Math.max(0, sec);
-    this._paintProgress(sec, d, false);
-    const wasPlaying = !this.video.paused;
-    this.btnPP?.classList.add('loading');
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
-      this.btnPP?.classList.remove('loading');
-      if (wasPlaying) this.video.play().catch(() => {});
-      if (!this.seeking) this._updateProgress();
-    };
-    this.video.addEventListener('seeked', finish, { once: true });
-    this.video.addEventListener('canplay', finish, { once: true });
-    setTimeout(finish, 4000);
-    try { this.video.currentTime = sec; } catch (_) { finish(); }
-    if (this.audioEl) {
-      try { this.audioEl.currentTime = sec; } catch (_) {}
-    }
-  }
-
-  _showUI() {
-    if (this.uiLocked) return;
-    this.uiVisible = true;
-    this.ui?.classList.remove('hidden');
-    clearTimeout(this.hideTimer);
-    if (this.seeking || this._anySheetOpen()) return;
-    this.hideTimer = setTimeout(() => {
-      if (!this._anySheetOpen() && !this.seeking) this._hideUI();
-    }, 3500);
-  }
-  _hideUI() {
-    if (this.uiLocked || this.seeking) return;
-    // sheet terbuka: jangan auto-close di sini; user tutup via X / backdrop
-    if (this._anySheetOpen()) return;
-    this.uiVisible = false;
-    this.ui?.classList.add('hidden');
-    clearTimeout(this.hideTimer);
-  }
-  _toggleUI() {
-    if (this.uiLocked) return;
-    if (this.uiVisible) this._hideUI();
-    else this._showUI();
-  }
-  _anySheetOpen() {
-    return !!this.el.querySelector('.vyr-sheet.show');
-  }
-  _closeSheets() {
-    $$(this.el, '.vyr-sheet').forEach((s) => s.classList.remove('show'));
-    this.backdrop?.classList.remove('show');
-  }
-  _openSheet(sheet) {
-    if (!sheet || this.uiLocked) return;
-    this._closeSheets();
-    sheet.classList.add('show');
-    this.backdrop?.classList.add('show');
-    this._showUI();
-  }
-
-  _applySettingsUI() {
-    const seekVal = this.el.querySelector('.vyr-set-seek-val');
-    if (seekVal) seekVal.textContent = this.seekStep + 's';
-    const speedVal = this.el.querySelector('.vyr-set-speed-val');
-    if (speedVal) speedVal.textContent = fmtRate(this.playRate);
-    const holdVal = this.el.querySelector('.vyr-set-hold-val');
-    if (holdVal) holdVal.textContent = fmtRate(this.holdRate);
-    const br = this.el.querySelector('.vyr-badge-rew');
-    const bf = this.el.querySelector('.vyr-badge-ff');
-    if (br) br.textContent = String(this.seekStep);
-    if (bf) bf.textContent = String(this.seekStep);
-    try { this.video.playbackRate = this.playRate; } catch (_) {}
-    this._applyVolume(false);
-  }
-
-  _renderQualities() {
-    if (!this.qualityList || !this.btnQuality) return;
-    const qs = this.engine.getQualities();
-    if (!qs.length) {
-      this.btnQuality.style.display = 'none';
-      return;
-    }
-    this.btnQuality.style.display = '';
-    this.btnQuality.textContent = this.engine.currentQuality || qs[0].label;
-    this.qualityList.innerHTML = qs.map((q) =>
-      `<div class="vyr-sheet-item${q.label === this.engine.currentQuality ? ' active' : ''}" data-label="${q.label}">${q.label}<span class="check">✓</span></div>`
-    ).join('');
-  }
-
-  _renderSeekList() {
-    if (!this.seekList) return;
-    this.seekList.innerHTML = SEEK_STEPS.map((n) =>
-      `<div class="vyr-sheet-item${n === this.seekStep ? ' active' : ''}" data-step="${n}">${n} detik<span class="check">✓</span></div>`
-    ).join('');
-  }
-  _renderSpeedList() {
-    if (!this.speedList) return;
-    this.speedList.innerHTML = SPEED_OPTS.map((r) =>
-      `<div class="vyr-sheet-item${r === this.playRate ? ' active' : ''}" data-rate="${r}">${fmtRate(r)}<span class="check">✓</span></div>`
-    ).join('');
-  }
-  _renderHoldList() {
-    if (!this.holdList) return;
-    this.holdList.innerHTML = HOLD_SPEED_OPTS.map((r) =>
-      `<div class="vyr-sheet-item${r === this.holdRate ? ' active' : ''}" data-rate="${r}">${fmtRate(r)}<span class="check">✓</span></div>`
-    ).join('');
-    const tog = this.el.querySelector('[data-tog-hold]');
-    if (tog) tog.classList.toggle('on', this.holdSpeedOn);
-  }
-
-  _setSeekStep(n) {
-    n = clamp(Math.round(Number(n)), 1, 300);
-    this.seekStep = n;
-    this._save(LS.seek, n);
-    this._applySettingsUI();
-    this._renderSeekList();
-  }
-
-  _applyVolume(showToast) {
-    try {
-      if (this.audioEl) {
-        // video tetap mute; volume di audio track
-        this.video.muted = true;
-        this.audioEl.volume = this.volMuted ? 0 : this.volLevel;
-        this.audioEl.muted = !!this.volMuted;
-      } else {
-        this.video.volume = this.volMuted ? 0 : this.volLevel;
-        this.video.muted = !!this.volMuted;
-      }
-    } catch (_) {}
-    const sl = this.el.querySelector('.vyr-vol-slider');
-    if (sl) sl.value = String(Math.round((this.volMuted ? 0 : this.volLevel) * 100));
-    const on = this.el.querySelector('.vyr-ic-vol-on');
-    const off = this.el.querySelector('.vyr-ic-vol-off');
-    const muted = this.volMuted || this.volLevel <= 0.001;
-    if (on) on.style.display = muted ? 'none' : 'block';
-    if (off) off.style.display = muted ? 'block' : 'none';
-    this._save(LS.vol, this.volLevel);
-    this._save(LS.muted, this.volMuted ? '1' : '0');
-    if (showToast && this.volToast) {
-      const tx = this.volToast.querySelector('.vyr-vol-toast-text');
-      if (tx) tx.textContent = (this.volMuted ? 0 : Math.round(this.volLevel * 100)) + '%';
-      this.volToast.classList.add('show');
-      clearTimeout(this._volT);
-      this._volT = setTimeout(() => this.volToast.classList.remove('show'), 900);
-    }
-  }
-
-  // ─── Bind events ──────────────────────────────────────────
-
-  _bindUI() {
-    const r = this.el;
-
-    // Play / pause
-    this.btnPP?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.toggle();
-      this._showUI();
-    });
-
-    // Seek buttons
-    this.btnRew?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (this.uiLocked) return;
-      this._safeSeek((this.video.currentTime || 0) - this.seekStep);
-      this._toastSeek('left');
-      this._showUI();
-    });
-    this.btnFf?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (this.uiLocked) return;
-      this._safeSeek((this.video.currentTime || 0) + this.seekStep);
-      this._toastSeek('right');
-      this._showUI();
-    });
-
-    // Double-tap zones
-    this._bindDoubleTap($(r, '.vyr-tap-left'), -1);
-    this._bindDoubleTap($(r, '.vyr-tap-right'), 1);
-
-    // Progress scrub
-    this._bindProgress();
-
-    // Fullscreen
-    this.btnFs?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this._toggleFs();
-      this._showUI();
-    });
-    document.addEventListener('fullscreenchange', () => this._syncFs());
-    document.addEventListener('webkitfullscreenchange', () => this._syncFs());
-
-    // Lock
-    this.btnLock?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.uiLocked = !this.uiLocked;
-      this._closeSheets();
-      this._updateLockIcon();
-      if (!this.uiLocked) this._showUI();
-    });
-
-    // Settings sheets
-    this.btnSettings?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (this.uiLocked) return;
-      this._openSheet(this.sheetSettings);
-    });
-    this.btnQuality?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (this.uiLocked) return;
-      this._renderQualities();
-      this._openSheet(this.sheetQuality);
-    });
-
-    // Subtitles CC
-    this.btnCc?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (this.uiLocked) return;
-      this._renderSubsList();
-      this._applySubStyle();
-      this._openSheet(this.sheetSubs);
-    });
-    this.subsList?.addEventListener('click', (e) => {
-      const item = e.target.closest('[data-sub-idx]');
-      if (!item) return;
-      const idx = parseInt(item.dataset.subIdx, 10);
-      if (idx < 0) this._disableAllTracks();
-      else this._enableTrack(idx);
-      this._showUI();
-    });
-    this.el.querySelector('[data-sub-toggle]')?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.subOn = !this.subOn;
-      this._save(LS.subOn, this.subOn ? '1' : '0');
-      this._applySubStyle();
-    });
-    this.el.querySelector('.vyr-sub-y')?.addEventListener('input', (e) => {
-      this.subY = parseInt(e.target.value, 10) || 0;
-      this._save(LS.subY, this.subY);
-      this._applySubStyle();
-    });
-    this.el.querySelector('.vyr-sub-color')?.addEventListener('input', (e) => {
-      this.subColor = e.target.value;
-      this._save(LS.subColor, this.subColor);
-      this._applySubStyle();
-    });
-    this.el.querySelector('.vyr-sub-size')?.addEventListener('input', (e) => {
-      this.subSize = parseInt(e.target.value, 10) || 20;
-      this._save(LS.subSize, this.subSize);
-      this._applySubStyle();
-    });
-    this.el.querySelector('.vyr-sub-bg')?.addEventListener('input', (e) => {
-      this.subBg = parseInt(e.target.value, 10) || 0;
-      this._save(LS.subBg, this.subBg);
-      this._applySubStyle();
-    });
-    const closeOverlay = (e) => {
-      if (e) e.stopPropagation();
-      this._closeSheets();
-      this._showUI();
-    };
-    this.backdrop?.addEventListener('click', closeOverlay);
-    this.backdrop?.addEventListener('touchend', (e) => {
-      // touch pada area gelap = tutup
-      if (e.target === this.backdrop) closeOverlay(e);
-    }, { passive: false });
-    $$(r, '[data-close]').forEach((btn) => {
-      btn.addEventListener('click', closeOverlay);
-      btn.addEventListener('touchend', (e) => {
-        e.preventDefault();
-        closeOverlay(e);
-      }, { passive: false });
-    });
-
-    // Quality select
-    this.qualityList?.addEventListener('click', (e) => {
-      const item = e.target.closest('[data-label]');
-      if (!item) return;
-      this.engine.switchQuality(item.dataset.label);
-      this._closeSheets();
-      this._showUI();
-    });
-
-    // Settings rows
-    r.querySelector('[data-set="seek"]')?.addEventListener('click', () => {
-      this._renderSeekList();
-      this._openSheet(this.sheetSeek);
-    });
-    r.querySelector('[data-set="speed"]')?.addEventListener('click', () => {
-      this._renderSpeedList();
-      this._openSheet(this.sheetSpeed);
-    });
-    r.querySelector('[data-set="hold"]')?.addEventListener('click', () => {
-      this._renderHoldList();
-      this._openSheet(this.sheetHold);
-    });
-    r.querySelector('[data-set="substyle"]')?.addEventListener('click', () => {
-      this._applySubStyle();
-      this._openSheet(this.sheetSubstyle);
-    });
-    this.seekList?.addEventListener('click', (e) => {
-      const item = e.target.closest('[data-step]');
-      if (!item) return;
-      this._setSeekStep(parseInt(item.dataset.step, 10));
-      this._closeSheets();
-      this._showUI();
-    });
-    this.speedList?.addEventListener('click', (e) => {
-      const item = e.target.closest('[data-rate]');
-      if (!item) return;
-      this.setPlaybackRate(parseFloat(item.dataset.rate));
-      this._closeSheets();
-      this._showUI();
-    });
-    this.holdList?.addEventListener('click', (e) => {
-      const item = e.target.closest('[data-rate]');
-      if (!item) return;
-      this.holdRate = parseFloat(item.dataset.rate);
-      this._save(LS.holdRate, this.holdRate);
-      const el = r.querySelector('.vyr-set-hold-val');
-      if (el) el.textContent = fmtRate(this.holdRate);
-      this._renderHoldList();
-    });
-    r.querySelector('[data-hold-toggle]')?.addEventListener('click', () => {
-      this.holdSpeedOn = !this.holdSpeedOn;
-      this._save(LS.holdOn, this.holdSpeedOn ? '1' : '0');
-      this._renderHoldList();
-    });
-
-    // Volume
-    r.querySelector('.vyr-btn-vol')?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.volMuted = !this.volMuted;
-      this._applyVolume(true);
-      this._showUI();
-    });
-    r.querySelector('.vyr-vol-slider')?.addEventListener('input', (e) => {
-      e.stopPropagation();
-      this.volLevel = parseInt(e.target.value, 10) / 100;
-      if (this.volLevel > 0.001) this.volMuted = false;
-      this._applyVolume(true);
-    });
-
-    // PiP
-    this.btnPip?.addEventListener('click', async (e) => {
-      e.stopPropagation();
-      if (this.uiLocked) return;
-      try {
-        if (document.pictureInPictureElement) await document.exitPictureInPicture();
-        else {
-          if (this.video.paused) await this.video.play();
-          await this.video.requestPictureInPicture();
-        }
-      } catch (_) {}
-      this._showUI();
-    });
-    r.querySelector('.vyr-btn-pip-back')?.addEventListener('click', async () => {
-      try { if (document.pictureInPictureElement) await document.exitPictureInPicture(); } catch (_) {}
-    });
-    this.video?.addEventListener('enterpictureinpicture', () => this.pipOverlay?.classList.add('show'));
-    this.video?.addEventListener('leavepictureinpicture', () => this.pipOverlay?.classList.remove('show'));
-
-    // Hold to speed
-    if (this.opts.features.holdToSpeed !== false) {
-      r.addEventListener('touchstart', (e) => this._onHoldStart(e), { passive: true });
-      r.addEventListener('touchend', () => this._onHoldEnd());
-      r.addEventListener('touchcancel', () => this._onHoldEnd());
-      r.addEventListener('mousedown', (e) => this._onHoldStart(e));
-      r.addEventListener('mouseup', () => this._onHoldEnd());
-      r.addEventListener('mouseleave', () => this._onHoldEnd());
-    }
-
-    // Toggle UI on tap
-    r.addEventListener('click', (e) => {
-      if (e.target.closest('.vyr-btn-lock')) return;
-      if (this.uiLocked) return;
-      if (e.target.closest('button') || e.target.closest('.vyr-sheet') ||
-          e.target.closest('.vyr-progress') || e.target.closest('.vyr-chip') ||
-          e.target.closest('.vyr-vol-wrap')) return;
-      if (this._anySheetOpen()) { this._closeSheets(); return; }
-      this._toggleUI();
-    });
-
-    // Video events
-    this.video.addEventListener('play', () => {
-      this.poster?.classList.add('hide');
-      this._updatePlayIcon();
-      this._showUI();
-      this._audioPlay();
-      this.emitter.emit('play', this.getState());
-    });
-    this.video.addEventListener('pause', () => {
-      this._updatePlayIcon();
-      this._showUI();
-      this._audioPause();
-      this.emitter.emit('pause', this.getState());
-    });
-    this.video.addEventListener('timeupdate', () => {
-      this._updateProgress();
-      this._syncManualSubs();
-      if (this._syncAudioTime) this._syncAudioTime();
-      // hilangkan bat spinner palsu saat playback jalan
-      if (!this.video.paused && this.video.readyState >= 2) {
-        if (this.buffer && this.buffer.classList.contains('show')) {
-          clearTimeout(this._bufT);
-          this._hideBuffer();
-        }
-      }
-      this.emitter.emit('timeupdate', this.getState());
-    });
-    this.video.addEventListener('ended', () => {
-      this.emitter.emit('ended', this.getState());
-    });
-    this.video.addEventListener('waiting', () => {
-      clearTimeout(this._bufT);
-      // HLS sering fire waiting tiap ganti segment — jangan langsung tampilkan bat
-      this._bufT = setTimeout(() => {
-        if (this._destroyed || !this.video) return;
-        if (this.video.paused) return;
-        // masih punya data ke depan → bukan buffering sungguhan
-        if (this.video.readyState >= 3) return;
-        try {
-          const t = this.video.currentTime || 0;
-          const buf = this.video.buffered;
-          for (let i = 0; i < buf.length; i++) {
-            if (t >= buf.start(i) - 0.15 && t < buf.end(i) - 0.35) return;
-          }
-        } catch (_) {}
-        this._showBuffer();
-      }, 500);
-    });
-    this.video.addEventListener('playing', () => {
-      clearTimeout(this._bufT);
-      this._hideBuffer();
-    });
-    this.video.addEventListener('canplay', () => {
-      clearTimeout(this._bufT);
-      this._hideBuffer();
-    });
-    this.video.addEventListener('canplaythrough', () => {
-      clearTimeout(this._bufT);
-      this._hideBuffer();
-    });
-    this.video.addEventListener('seeked', () => {
-      clearTimeout(this._bufT);
-      if (!this.video.paused) this._hideBuffer();
-    });
-
-    // Keyboard
-    document.addEventListener('keydown', (e) => {
-      if (this._destroyed) return;
-      if (e.key === 'Escape' || e.code === 'Escape') {
-        if (this._anySheetOpen()) {
-          e.preventDefault();
-          this._closeSheets();
-          this._showUI();
-        }
-        return;
-      }
-      if (e.code === 'Space') {
-        e.preventDefault();
-        this.toggle();
-        this._showUI();
-      } else if (e.code === 'ArrowLeft') {
-        if (this.uiLocked) return;
-        this._safeSeek((this.video.currentTime || 0) - this.seekStep);
-        this._toastSeek('left');
-        this._showUI();
-      } else if (e.code === 'ArrowRight') {
-        if (this.uiLocked) return;
-        this._safeSeek((this.video.currentTime || 0) + this.seekStep);
-        this._toastSeek('right');
-        this._showUI();
-      }
-    });
-
-    // Block context menu on video
-    r.addEventListener('contextmenu', (e) => {
-      if (e.target.closest('video') || e.target.closest('.vyr-root')) e.preventDefault();
-    });
-
-    this._showUI();
-  }
-
-  _bindDoubleTap(zone, dir) {
-    if (!zone) return;
-    let last = 0;
-    zone.addEventListener('touchend', (e) => {
-      const now = Date.now();
-      if (now - last < 300) {
-        if (this.uiLocked) return;
-        this._safeSeek((this.video.currentTime || 0) + dir * this.seekStep);
-        this._toastSeek(dir < 0 ? 'left' : 'right');
-        e.preventDefault();
-        this._showUI();
-      }
-      last = now;
-    }, { passive: false });
-  }
-
-  _bindProgress() {
-    if (!this.progress) return;
-    let scrubTarget = 0;
-    const pctFrom = (e) => {
-      const rect = this.progress.getBoundingClientRect();
-      const clientX = e.touches?.[0]?.clientX ?? e.changedTouches?.[0]?.clientX ?? e.clientX;
-      return clamp((clientX - rect.left) / rect.width, 0, 1);
-    };
-    const preview = (e) => {
-      const pct = pctFrom(e);
-      const d = isFinite(this.video.duration) ? this.video.duration : 0;
-      scrubTarget = d * pct;
-      this._paintProgress(scrubTarget, d, true);
-      this.uiVisible = true;
-      this.ui?.classList.remove('hidden');
-      clearTimeout(this.hideTimer);
-    };
-    const end = (e) => {
-      if (!this.seeking) return;
-      this.seeking = false;
-      this.progress.classList.remove('scrubbing');
-      const pct = e ? pctFrom(e) : null;
-      const d = isFinite(this.video.duration) ? this.video.duration : 0;
-      const t = (pct != null && d) ? d * pct : scrubTarget;
-      this.scrubTip?.classList.remove('show');
-      if (d > 0) this._safeSeek(t);
-      this._showUI();
-    };
-    this.progress.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (this.seeking) return;
-      const pct = pctFrom(e);
-      const d = isFinite(this.video.duration) ? this.video.duration : 0;
-      if (d > 0) this._safeSeek(d * pct);
-      this._showUI();
-    });
-    this.progress.addEventListener('touchstart', (e) => {
-      this.seeking = true;
-      this.progress.classList.add('scrubbing');
-      e.stopPropagation();
-      preview(e);
-    }, { passive: true });
-    this.progress.addEventListener('touchmove', (e) => { if (this.seeking) preview(e); }, { passive: true });
-    this.progress.addEventListener('touchend', end);
-    this.progress.addEventListener('touchcancel', end);
-    this.progress.addEventListener('mousedown', (e) => {
-      if (e.button !== 0) return;
-      this.seeking = true;
-      this.progress.classList.add('scrubbing');
-      e.preventDefault();
-      preview(e);
-      const onMove = (ev) => { if (this.seeking) preview(ev); };
-      const onUp = (ev) => {
-        document.removeEventListener('mousemove', onMove);
-        document.removeEventListener('mouseup', onUp);
-        end(ev);
-      };
-      document.addEventListener('mousemove', onMove);
-      document.addEventListener('mouseup', onUp);
-    });
-  }
-
-  _toastSeek(side) {
-    const el = this.el.querySelector(side === 'left' ? '.vyr-seek-left' : '.vyr-seek-right');
-    if (!el) return;
-    const sec = el.querySelector('.sec');
-    if (sec) sec.textContent = side === 'left' ? ('«' + this.seekStep) : (this.seekStep + '»');
-    el.classList.remove('show');
-    void el.offsetWidth;
-    el.classList.add('show');
-    clearTimeout(el._t);
-    el._t = setTimeout(() => el.classList.remove('show'), 700);
-  }
-
-  _onHoldStart(e) {
-    if (!this.holdSpeedOn || this.uiLocked || this.video.paused) return;
-    if (e.target.closest('button') || e.target.closest('.vyr-sheet') ||
-        e.target.closest('.vyr-progress') || e.target.closest('.vyr-chip')) return;
-    clearTimeout(this.holdTimer);
-    this.holdTimer = setTimeout(() => {
-      this.isHoldingSpeed = true;
-      try { this.video.playbackRate = this.holdRate; } catch (_) {}
-      if (this.speedBadge) {
-        this.speedBadge.textContent = fmtRate(this.holdRate);
-        this.speedBadge.classList.add('show');
-      }
-    }, 320);
-  }
-  _onHoldEnd() {
-    clearTimeout(this.holdTimer);
-    if (!this.isHoldingSpeed) return;
-    this.isHoldingSpeed = false;
-    try { this.video.playbackRate = this.playRate; } catch (_) {}
-    this.speedBadge?.classList.remove('show');
-  }
-
-  _updateLockIcon() {
-    const open = this.el.querySelector('.vyr-ic-lock-open');
-    const closed = this.el.querySelector('.vyr-ic-lock-closed');
-    if (this.uiLocked) {
-      if (open) open.style.display = 'none';
-      if (closed) closed.style.display = 'block';
-      this.btnLock?.classList.add('active-lock');
-      this.ui?.classList.add('ui-locked');
-      this.ui?.classList.remove('hidden');
-    } else {
-      if (open) open.style.display = 'block';
-      if (closed) closed.style.display = 'none';
-      this.btnLock?.classList.remove('active-lock');
-      this.ui?.classList.remove('ui-locked');
-    }
-  }
-
-  _toggleFs() {
-    const el = this.el;
-    if (!document.fullscreenElement && !document.webkitFullscreenElement) {
-      (el.requestFullscreen || el.webkitRequestFullscreen || (() => {})).call(el);
-      try { screen.orientation?.lock?.('landscape'); } catch (_) {}
-    } else {
-      (document.exitFullscreen || document.webkitExitFullscreen || (() => {})).call(document);
-      try { screen.orientation?.unlock?.(); } catch (_) {}
-    }
-  }
-  _syncFs() {
-    const on = !!(document.fullscreenElement || document.webkitFullscreenElement);
-    this.el.classList.toggle('is-fs', on);
-  }
-}
-
-export default VyrPlay;