GoxPlayer 🚀

GoxPlayer adalah komponen video player Vue 3 yang powerful, ringan, dan modular. Dirancang khusus untuk ekosistem GoxStream namun cukup fleksibel untuk digunakan di project apa pun yang membutuhkan video player premium dengan fitur lengkap.

✨ Fitur Utama

• Modular & Stateless: Logika dan UI terpisah untuk performa optimal.
• HLS Support: Mendukung streaming HLS (.m3u8) menggunakan hls.js.
• Gesture Pintar:
  • Double-tap untuk skip forward/backward (10 detik).
  • Long-press untuk playback speed 2x.
• Kustomisasi Lengkap: Kontrol kualitas, kecepatan putar, dan subtitle.
• Auto-Extract Thumbnail: Menghasilkan thumbnail secara otomatis saat video diputar.
• Dynamic CSS: Menggunakan Tailwind CSS untuk tampilan premium dan responsif.

📦 Instalasi

pnpm add goxplayer

🚀 Cara Penggunaan

1. Registrasi Komponen

Import komponen dan filestyle CSS-nya di aplikasi Vue kamu:

<script setup>
import { GoxPlayer } from 'goxplayer'
import 'goxplayer/style.css'

const sources = [
  { quality: '1080p', url: 'https://example.com/1080.m3u8', format: 'hls' },
  { quality: '720p', url: 'https://example.com/720.mp4', format: 'mp4' }
]

const subtitles = [
  { id: 'en', label: 'English', language: 'en', url: '/subs/en.vtt' }
]
</script>

<template>
  <div class="aspect-video w-full">
    <GoxPlayer 
      :sources="sources"
      :subtitles="subtitles"
      title="Nama Video"
      sub-title="Deskripsi atau Episode"
    />
  </div>
</template>

🛠 API (Props & Events)

Props

| Prop | Tipe | Default | Deskripsi | |------|------|---------|-----------| | sources | VideoSource[] | (Wajib) | Daftar URL video dengan kualitas berbeda. | | subtitles | Subtitle[] | [] | Daftar subtitle (.vtt). | | initialQuality| string | '360p' | Kualitas default saat pertama dimuat. | | title | string | '' | Judul video yang muncul di overlay atas. | | subTitle | string | '' | Sub-judul/keterangan tambahan. | | autoPlay | boolean | false | Putar video otomatis saat siap. | | subtitleUrlPrefix| string | '' | Prefix URL jika menggunakan storage internal. |

Events

| Event | Payload | Deskripsi | |-------|---------|-----------| | @play | - | Dipicu saat video mulai diputar. | | @pause | - | Dipicu saat video di-pause. | | @progress-update| { currentTime, duration, percent } | Berguna untuk menyimpan watch history. | | @view-logged | - | Dipicu setelah video ditonton selama 30 detik (analytics). | | @quality-change | string | Dipicu saat user mengganti kualitas video. | | @thumbnail-generated | string (DataURL) | Mengirimkan gambar thumbnail JPEG hasil extract. |

🛠 Pengembangan (Development)

Jika ingin melakukan modifikasi pada package ini:

# Install dependensi
pnpm install

# Jalankan mode development
pnpm dev

# Build untuk produksi
pnpm build

📄 Lisensi

MIT