vyrplay 1.0.0 → 1.0.1

package/src/ui/template.js

@@ -1,220 +0,0 @@
-const BAT_SVG = `<svg viewBox="0 0 420 220" aria-hidden="true">
-  <path class="vyr-bat-base" d="M210 22 L188 65 Q176 82 186 96 Q142 85 110 120 Q85 92 60 80 Q85 45 28 20 Q65 22 115 55 Q155 85 185 120 Q195 175 210 205 Q225 175 235 120 Q265 85 305 55 Q355 22 392 20 Q335 45 360 80 Q335 92 310 120 Q278 85 234 96 Q244 82 232 65 L210 22"/>
-  <path class="vyr-bat-line" d="M210 22 L188 65 Q176 82 186 96 Q142 85 110 120 Q85 92 60 80 Q85 45 28 20 Q65 22 115 55 Q155 85 185 120 Q195 175 210 205 Q225 175 235 120 Q265 85 305 55 Q355 22 392 20 Q335 45 360 80 Q335 92 310 120 Q278 85 234 96 Q244 82 232 65 L210 22"/>
-</svg>`;
-
-const ICONS = {
-  back: `<svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>`,
-  pip: `<svg viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/></svg>`,
-  settings: `<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7.2 7.2 0 0 0-1.62-.94l-.36-2.54A.48.48 0 0 0 14 2h-4a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.65 8.87a.48.48 0 0 0 .12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.13.23.4.32.64.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h4c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.23.1.51 0 .64-.22l1.92-3.32a.49.49 0 0 0-.12-.61l-2.03-1.58zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z"/></svg>`,
-  lockOpen: `<svg class="vyr-ic-lock-open" viewBox="0 0 24 24"><path d="M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-7h-1V7A5 5 0 0 0 7 7h1.5a3.5 3.5 0 0 1 7 0v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2z"/></svg>`,
-  lockClosed: `<svg class="vyr-ic-lock-closed" viewBox="0 0 24 24" style="display:none"><path d="M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-7h-1V7A5 5 0 0 0 7 7v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zM8.5 7a3.5 3.5 0 0 1 7 0v3h-7V7z"/></svg>`,
-  play: `<svg class="vyr-ic-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>`,
-  pause: `<svg class="vyr-ic-pause" viewBox="0 0 24 24" style="display:none"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`,
-  rew: `<svg viewBox="0 0 24 24"><path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>`,
-  ff: `<svg viewBox="0 0 24 24"><path d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/></svg>`,
-  fs: `<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>`,
-  volOn: `<svg class="vyr-ic-vol-on" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>`,
-  cc: `<svg viewBox="0 0 24 24"><path d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1z"/></svg>`,
-  volOff: `<svg class="vyr-ic-vol-off" viewBox="0 0 24 24" style="display:none"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>`,
-};
-
-export function buildTemplate(opts = {}) {
-  const title = opts.title || 'VyrPlay';
-  const f = opts.features || {};
-  return `
-<div class="vyr-loading">
-  <div class="vyr-bat-wrap">${BAT_SVG}</div>
-  <div class="label">LOADING</div>
-</div>
-<div class="vyr-buffer" aria-hidden="true">
-  <div class="vyr-bat-wrap">${BAT_SVG}</div>
-</div>
-<div class="vyr-poster hide"></div>
-<video playsinline webkit-playsinline preload="metadata" controlslist="nodownload noplaybackrate"></video>
-<div class="vyr-sub-layer pos-bottom" aria-live="polite"><div class="vyr-sub-text"></div></div>
-<div class="vyr-pip-overlay" aria-hidden="true">
-  <div class="vyr-pip-box">
-    ${ICONS.pip}
-    <div style="font-size:16px;font-weight:800;margin:12px 0 6px">Picture-in-Picture aktif</div>
-    <div style="font-size:13px;opacity:.65;margin-bottom:8px">Video diputar di jendela mengambang</div>
-    <button type="button" class="vyr-btn-pip-back">Kembali ke player</button>
-  </div>
-</div>
-<div class="vyr-tap vyr-tap-left"></div>
-<div class="vyr-tap vyr-tap-right"></div>
-<div class="vyr-seek-toast vyr-seek-left"><div class="sec">«10</div></div>
-<div class="vyr-seek-toast vyr-seek-right"><div class="sec">10»</div></div>
-<div class="vyr-speed-badge">2x</div>
-<div class="vyr-vol-toast"><span class="vyr-vol-toast-text">100%</span></div>
-
-<div class="vyr-ui">
-  <div class="vyr-top">
-    <div class="vyr-top-left">
-      ${f.back !== false ? `<button class="vyr-icon-btn vyr-btn-back" title="Kembali">${ICONS.back}</button>` : ''}
-      <div class="vyr-title">${escapeHtml(title)}</div>
-    </div>
-    <div class="vyr-top-right">
-      ${f.pip !== false ? `<button class="vyr-icon-btn vyr-btn-pip" title="PiP">${ICONS.pip}</button>` : ''}
-      ${f.settings !== false ? `<button class="vyr-icon-btn vyr-btn-settings" title="Pengaturan">${ICONS.settings}</button>` : ''}
-      ${f.lockUi !== false ? `<button class="vyr-icon-btn vyr-btn-lock" title="Kunci UI">${ICONS.lockOpen}${ICONS.lockClosed}</button>` : ''}
-    </div>
-  </div>
-
-  <div class="vyr-center">
-    ${f.seekButtons !== false ? `
-    <button class="vyr-c-btn vyr-btn-rew" aria-label="Mundur">
-      ${ICONS.rew}<span class="seek-badge vyr-badge-rew">10</span>
-    </button>` : ''}
-    <button class="vyr-c-btn play vyr-btn-pp" aria-label="Play/Pause">
-      <div class="ring"></div>${ICONS.play}${ICONS.pause}
-    </button>
-    ${f.seekButtons !== false ? `
-    <button class="vyr-c-btn vyr-btn-ff" aria-label="Maju">
-      ${ICONS.ff}<span class="seek-badge vyr-badge-ff">10</span>
-    </button>` : ''}
-  </div>
-
-  <div class="vyr-bottom">
-    <div class="vyr-progress">
-      <div class="vyr-scrub-tip">0:00</div>
-      <div class="vyr-progress-track">
-        <div class="vyr-progress-fill"></div>
-        <div class="vyr-progress-thumb"></div>
-      </div>
-    </div>
-    <div class="vyr-meta">
-      <div class="vyr-time">0:00 / 0:00</div>
-      <div class="vyr-meta-right">
-        ${f.volume !== false ? `
-        <div class="vyr-vol-wrap">
-          <button type="button" class="vyr-vol-btn vyr-btn-vol" title="Mute">${ICONS.volOn}${ICONS.volOff}</button>
-          <input type="range" class="vyr-vol-slider" min="0" max="100" step="1" value="100" aria-label="Volume" />
-        </div>` : ''}
-        ${f.subtitles !== false ? `<button class="vyr-chip vyr-btn-cc" title="Subtitle">CC</button>` : ''}
-        ${f.quality !== false ? `<button class="vyr-chip vyr-btn-quality" title="Kualitas">HD</button>` : ''}
-        <button class="vyr-chip vyr-btn-fs" title="Fullscreen">${ICONS.fs}</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="vyr-backdrop"></div>
-<div class="vyr-sheet vyr-sheet-quality">
-  <div class="vyr-sheet-head">
-    <div class="vyr-sheet-title">Kualitas</div>
-    <button type="button" class="vyr-sheet-close" data-close>✕</button>
-  </div>
-  <div class="vyr-sheet-body vyr-quality-list"></div>
-</div>
-<div class="vyr-sheet vyr-sheet-settings">
-  <div class="vyr-sheet-head">
-    <div class="vyr-sheet-title">Pengaturan</div>
-    <button type="button" class="vyr-sheet-close" data-close>✕</button>
-  </div>
-  <div class="vyr-sheet-body">
-    <div class="vyr-set-row" data-set="seek">
-      <div class="vyr-set-ic"><svg viewBox="0 0 24 24"><path d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/></svg></div>
-      <div class="vyr-set-txt"><div class="vyr-set-title">Seek</div><div class="vyr-set-desc">Mundur / maju per ketukan</div></div>
-      <div class="vyr-set-val vyr-set-seek-val">10s</div>
-    </div>
-    <div class="vyr-set-row" data-set="speed">
-      <div class="vyr-set-ic"><svg viewBox="0 0 24 24"><path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7z"/></svg></div>
-      <div class="vyr-set-txt"><div class="vyr-set-title">Speed</div><div class="vyr-set-desc">Kecepatan putar normal</div></div>
-      <div class="vyr-set-val vyr-set-speed-val">1x</div>
-    </div>
-    <div class="vyr-set-row" data-set="hold">
-      <div class="vyr-set-ic"><svg viewBox="0 0 24 24"><path d="M13 2v8h3l-4 10v-8H9l4-10z"/></svg></div>
-      <div class="vyr-set-txt"><div class="vyr-set-title">Hold to speed</div><div class="vyr-set-desc">Tahan layar untuk percepat</div></div>
-      <div class="vyr-set-val vyr-set-hold-val">2x</div>
-    </div>
-    <div class="vyr-set-row" data-set="substyle">
-      <div class="vyr-set-ic"><svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"/></svg></div>
-      <div class="vyr-set-txt"><div class="vyr-set-title">Subtitle style</div><div class="vyr-set-desc">Posisi, warna, ukuran, background</div></div>
-      <div class="vyr-set-val">›</div>
-    </div>
-  </div>
-</div>
-<div class="vyr-sheet vyr-sheet-seek">
-  <div class="vyr-sheet-head">
-    <div class="vyr-sheet-title">Seek</div>
-    <button type="button" class="vyr-sheet-close" data-close>✕</button>
-  </div>
-  <div class="vyr-sheet-body vyr-seek-list"></div>
-</div>
-<div class="vyr-sheet vyr-sheet-speed">
-  <div class="vyr-sheet-head">
-    <div class="vyr-sheet-title">Speed</div>
-    <button type="button" class="vyr-sheet-close" data-close>✕</button>
-  </div>
-  <div class="vyr-sheet-body vyr-speed-list"></div>
-</div>
-<div class="vyr-sheet vyr-sheet-hold">
-  <div class="vyr-sheet-head">
-    <div class="vyr-sheet-title">Hold to speed</div>
-    <button type="button" class="vyr-sheet-close" data-close>✕</button>
-  </div>
-  <div class="vyr-sheet-body">
-    <div class="vyr-set-row" data-hold-toggle style="margin-bottom:8px">
-      <div class="vyr-set-txt"><div class="vyr-set-title">Aktifkan</div><div class="vyr-set-desc">Tahan layar = putar lebih cepat</div></div>
-      <div class="vyr-set-val"><span class="vyr-tog on" data-tog-hold></span></div>
-    </div>
-    <div style="font-size:12px;font-weight:700;opacity:.55;padding:8px 4px 6px;letter-spacing:.04em;text-transform:uppercase">Saat ditahan</div>
-    <div class="vyr-hold-list"></div>
-  </div>
-</div>
-
-<div class="vyr-sheet vyr-sheet-subs">
-  <div class="vyr-sheet-head">
-    <div class="vyr-sheet-title">Subtitle</div>
-    <button type="button" class="vyr-sheet-close" data-close>✕</button>
-  </div>
-  <div class="vyr-sheet-body">
-    <div class="vyr-set-row" data-sub-toggle style="margin-bottom:8px">
-      <div class="vyr-set-txt">
-        <div class="vyr-set-title">Tampilkan subtitle</div>
-        <div class="vyr-set-desc">On / off teks di layar</div>
-      </div>
-      <div class="vyr-set-val"><span class="vyr-tog on" data-tog-sub></span></div>
-    </div>
-    <div style="font-size:12px;font-weight:700;opacity:.55;padding:8px 4px 6px;letter-spacing:.04em;text-transform:uppercase">Bahasa / track</div>
-    <div class="vyr-subs-list"></div>
-  </div>
-</div>
-<div class="vyr-sheet vyr-sheet-substyle">
-  <div class="vyr-sheet-head">
-    <div class="vyr-sheet-title">Subtitle style</div>
-    <button type="button" class="vyr-sheet-close" data-close>✕</button>
-  </div>
-  <div class="vyr-sheet-body">
-    <div class="vyr-sub-style-row">
-      <label>Posisi Y</label>
-      <input type="range" class="vyr-sub-y" min="0" max="80" step="1" value="12" />
-      <span class="vyr-sub-y-val" style="font-size:12px;font-weight:800;min-width:36px;font-family:var(--vyr-font)">12%</span>
-    </div>
-    <div class="vyr-sub-style-row">
-      <label>Warna</label>
-      <input type="color" class="vyr-sub-color" value="#ffffff" />
-    </div>
-    <div class="vyr-sub-style-row">
-      <label>Ukuran</label>
-      <input type="range" class="vyr-sub-size" min="14" max="42" step="1" value="20" />
-      <span class="vyr-sub-size-val" style="font-size:12px;font-weight:800;min-width:36px">20px</span>
-    </div>
-    <div class="vyr-sub-style-row">
-      <label>Background</label>
-      <input type="range" class="vyr-sub-bg" min="0" max="100" step="5" value="55" />
-      <span class="vyr-sub-bg-val" style="font-size:12px;font-weight:800;min-width:36px">55%</span>
-    </div>
-  </div>
-</div>
-`;
-}
-
-function escapeHtml(s) {
-  return String(s)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}

package/src/utils/events.js

@@ -1,25 +0,0 @@
-/** Tiny event emitter */
-export class Emitter {
-  constructor() {
-    this._map = new Map();
-  }
-  on(event, fn) {
-    if (!this._map.has(event)) this._map.set(event, new Set());
-    this._map.get(event).add(fn);
-    return () => this.off(event, fn);
-  }
-  off(event, fn) {
-    const set = this._map.get(event);
-    if (set) set.delete(fn);
-  }
-  emit(event, payload) {
-    const set = this._map.get(event);
-    if (!set) return;
-    set.forEach((fn) => {
-      try { fn(payload); } catch (e) { console.error('[VyrPlay]', e); }
-    });
-  }
-  destroy() {
-    this._map.clear();
-  }
-}

package/src/utils/format.js

@@ -1,20 +0,0 @@
-/** Format seconds → m:ss or h:mm:ss */
-export function fmtTime(s) {
-  if (!isFinite(s) || s < 0) return '0:00';
-  s = Math.floor(s);
-  const h = Math.floor(s / 3600);
-  const m = Math.floor((s % 3600) / 60);
-  const sec = s % 60;
-  if (h > 0) {
-    return h + ':' + String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
-  }
-  return m + ':' + String(sec).padStart(2, '0');
-}
-
-export function fmtRate(r) {
-  return (Number.isInteger(r) ? r : r) + 'x';
-}
-
-export function clamp(n, min, max) {
-  return Math.max(min, Math.min(max, n));
-}