double-player-dream

React component <Player />: JW Player untuk content, video.js + IMA untuk ads (player ads sekali pakai per ad break). Layout ads overlay atau split 50/50, session single atau multi, semua lewat props.

Instalasi

npm i double-player-dream   # React 17 / 18 / 19

Pemakaian

import { useMemo, useRef, useState } from 'react';
import { CompanionAdSlot, Player, type CompanionAd, type PlayerHandle } from 'double-player-dream';
import 'double-player-dream/style.css';
import 'double-player-dream/themes/rplus.css'; // skin RCTI+ (opsional, pasangan setup.skin di bawah)

export function Watch() {
  const player = useRef<PlayerHandle>(null);
  const [companion, setCompanion] = useState<CompanionAd | null>(null);
  // buat objek props sekali, supaya player tidak di-restart tiap render
  const source = useMemo(() => ({ url: 'https://.../index.m3u8' }), []);
  const jwplayer = useMemo(() => ({
    libraryUrl: 'https://.../jwplayer.js',
    licenseKey: '...',
    setup: { skin: { name: 'rplus_player' }, logo: { hide: true } },
  }), []);
  const ads = useMemo(() => ({
    vmapUrl: 'https://.../vmap',
    hostUrl: 'https://.../bumper.mp4',
    companion: { width: 120, height: 30 },
  }), []);
  const ui = useMemo(() => ({ progressBar: true, backButton: false, nextButton: false, unmuteButton: true }), []);

  return (
    <>
      <Player
        ref={player}
        source={source}
        jwplayer={jwplayer}
        ads={ads}
        adLayout="split"        // 'overlay' (default) | 'split'
        sessionMode="single"    // 'single' (default) | 'multi'
        muted
        ui={ui}
        events={{
          onAdBreakStart: (info) => console.log('ad break', info),
          content: { onPlay: (e) => console.log('play', e.position) },
          ads: {
            onStart: (e) => console.log('ad', e.duration),
            onCompanions: (e) => setCompanion(e.companions?.[0] ?? null), // [] = sembunyikan
          },
        }}
      >
        {/* di atas content & ads, ikut fullscreen stage; seperti videoplus-webm */}
        <CompanionAdSlot companion={companion} />
      </Player>
      <button onClick={() => player.current?.triggerLai('https://.../vast.xml')}>LAI</button>
    </>
  );
}

Contoh lengkap yang bisa dijalankan: src/examples/ExamplePage.tsx (tab "Contoh implementasi" di npm run dev).

Next.js / SSR

Aman di-render di server: server hanya mengeluarkan markup stage kosong, dan player baru jalan di browser setelah hydrate. ssr: false tidak diperlukan. Bundle sudah bertanda "use client". Taruh <Player /> di komponen pembungkus 'use client' karena events berisi fungsi. Detail: docs/PLAYER_API.md.

Props

Referensi lengkap props dan semua event (di mana ditaruh, kapan dipanggil, payload, urutan dalam satu ad break): docs/PLAYER_API.md. Ringkasan:

| Prop | Tipe | Default | Keterangan | |---|---|---|---| | source | { url, poster?, subtitles?, drm? } | wajib | Content (JW Player). | | jwplayer | { libraryUrl, licenseKey?, setup? } | wajib | Library JW self-hosted; setup = opsi JW tambahan (skin, logo, ...). Skin RCTI+: import 'double-player-dream/themes/rplus.css'. | | ads | { vmapUrl?, adTagUrl?, laiUrl?, hostUrl?, requestDelayMs?, readyTimeoutMs?, companion?, controls? } | {} | Jadwal, tag ads, slot companion, dan control bar player iklan (controls, default mati: hanya UI IMA). | | adLayout | 'overlay' \| 'split' | 'overlay' | Layout midroll. Preroll/postroll selalu overlay. | | sessionMode | 'single' \| 'multi' | 'single' | LAI (stream langsung diganti ke URL dari push): single = split 50/50; multi = overlay. Content tetap jalan (mute); ads yang macet disembunyikan dan content ditampilkan. | | muted | boolean | true | Mute content: nilai awal, dan nilai baru diterapkan saat jalan. Penonton tetap bisa mengubahnya. | | fullscreen | 'stage' \| 'native' | 'stage' | stage: fullscreen mencakup content + ads (tombol JW diganti). | | LAI | { isLAI, collection, firestore, platform? } | - | Push / break LAI dari Firestore (collection + collection_abort). Lihat docs. | | hideContentControlsDuringAd | boolean | true | Sembunyikan kontrol content dan blokir ketukan selama split. | | autoStart | boolean \| 'viewable' | true | Mulai saat mount ('viewable' = autostart JW saat terlihat). source.url baru = ganti episode di player JW yang sama. | | ui | PlayerUi | - | Tampil/sembunyi UI content (progressBar, volume, ...) tombol backButton / nextButton (disabled, href, onClick), dan badge unmuteButton ("Tap to unmute"). Lihat docs. | | children | ReactNode | - | Elemen di atas player, di dalam stage (ikut fullscreen): cover ad pod, companion, header judul. | | events | PlayerEvents | - | content.*, ads.*, onStatusChange, onViewChange, onAdBreakStart/End, onAdVisibilityChange, onAdMuteChange, onSessionStart, onLaiPush, onLaiBreak. | | onLog | (entry) => void | - | Log diagnostik lengkap. |

ref (PlayerHandle): start(), stop(), triggerLai(url?), pushLai({ vmapUrl, url? }), breakLai(), unmuteAds(), enterFullscreen(), exitFullscreen(), toggleFullscreen(), isFullscreen(), getPlayers(), getStatus().

Companion ads: ads.companion + events.ads.onCompanions, dirender dengan <CompanionAdSlot companion={...} /> di children (markup, posisi, dan OMID seperti videoplus-webm). Lihat docs/PLAYER_API.md §9.

Kustomisasi tampilan JW (padanan useElementPlayer vod-webm): jwControls(players.content), lihat docs/PLAYER_API.md §10.

Ukuran bundle & versi JW

• video.js + plugin IMA di-lazy-load: entry paket ±30 kB (±10 kB gzip), dan chunk video.js (±970 kB) baru dimuat saat player start dengan ads. sideEffects di package.json sengaja mencantumkan ./dist-lib/video*.js, karena chunk plugin hanya di-import untuk efek sampingnya. Jangan dihapus: bundler pemakai akan membuang plugin IMA.
• JW Player: tidak terikat versi. API dan class-nya dicocokkan dengan 8.25.1, 8.46.2, dan 8.51.4 (jwplayer-latest, default di demo). Untuk versi lain cukup ganti jwplayer.libraryUrl.

Konfigurasi demo (.env)

Demo dan contoh membaca nilai internal (URL library JW, license key, URL VMAP, klip host ads) dari .env, bukan dari kode. Salin .env.example ke .env lalu isi. .env ada di .gitignore dan tidak ikut paket npm. Komponen <Player /> sendiri tidak membaca env: semua nilai masuk lewat props.

Variabel VITE_* tetap ditanam ke bundle demo saat build. Jadi kalau demo di-deploy, nilainya terlihat di browser. .env menjaga nilai itu keluar dari kode sumber dan paket npm, bukan dari demo yang di-deploy.

Script

• npm run dev: halaman demo (konfigurasi, log, contoh implementasi).
• npm run build: typecheck + build demo.
• npm run build:lib: build paket ke dist-lib/.