npm - @frameset/plex-player - Versions diffs - 1.0.0 - Mend

@frameset/plex-player 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/LICENSE +21 -0
package/README.md +601 -0
package/dist/plex-player.cjs.js +879 -0
package/dist/plex-player.cjs.js.map +1 -0
package/dist/plex-player.css +1943 -0
package/dist/plex-player.css.map +1 -0
package/dist/plex-player.d.ts +457 -0
package/dist/plex-player.esm.js +873 -0
package/dist/plex-player.esm.js.map +1 -0
package/dist/plex-player.js +885 -0
package/dist/plex-player.js.map +1 -0
package/dist/plex-player.min.js +9 -0
package/dist/plex-player.min.js.map +1 -0
package/dist/react/index.esm.js +257 -0
package/dist/react/index.esm.js.map +1 -0
package/dist/react/index.js +265 -0
package/dist/react/index.js.map +1 -0
package/dist/styles.tmp.js +1 -0
package/dist/vue/index.esm.js +283 -0
package/dist/vue/index.esm.js.map +1 -0
package/dist/vue/index.js +291 -0
package/dist/vue/index.js.map +1 -0
package/package.json +132 -0
package/src/core/index.js +924 -0
package/src/core/player-core.js +225 -0
package/src/react/index.jsx +277 -0
package/src/styles.js +8 -0
package/src/types/index.d.ts +457 -0
package/src/vue/index.js +304 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2024 FRAMESET Studio
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,601 @@
+<p align="center">
+  <img src="https://frameset.dev/favicon.svg" alt="FRAMESET" width="180" />
+</p>
+<h1 align="center">@frameset/plex-player</h1>
+<p align="center">
+  <strong>🎬 Professional HTML5 Video Player for Modern Web Applications</strong>
+</p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/@frameset/plex-player">
+    <img src="https://img.shields.io/npm/v/@frameset/plex-player.svg?style=flat-square" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/@frameset/plex-player">
+    <img src="https://img.shields.io/npm/dm/@frameset/plex-player.svg?style=flat-square" alt="npm downloads" />
+  </a>
+  <a href="https://github.com/deadseti/plex-player/blob/main/LICENSE">
+    <img src="https://img.shields.io/npm/l/@frameset/plex-player.svg?style=flat-square" alt="license" />
+  </a>
+  <a href="https://bundlephobia.com/package/@frameset/plex-player">
+    <img src="https://img.shields.io/bundlephobia/minzip/@frameset/plex-player?style=flat-square" alt="bundle size" />
+  </a>
+</p>
+<p align="center">
+  <a href="#features">Features</a> •
+  <a href="#installation">Installation</a> •
+  <a href="#quick-start">Quick Start</a> •
+  <a href="#api">API</a> •
+  <a href="#frameworks">Frameworks</a> •
+  <a href="#ads">Ads</a> •
+  <a href="#chromecast">Chromecast</a> •
+  <a href="#license">License</a>
+</p>
+---
+## ✨ Features
+- 🎥 **Full-Featured Player** — Play, pause, seek, volume, playback rate, and more
+- 📺 **Chromecast Support** — Cast videos to any Chromecast-enabled device
+- 📋 **Playlist Management** — Queue management with thumbnail preview
+- 🎨 **Customizable UI** — Fully themeable with CSS variables
+- 📱 **Responsive Design** — Works perfectly on desktop, tablet, and mobile
+- ⌨️ **Keyboard Shortcuts** — Full keyboard navigation support
+- 👆 **Touch Gestures** — Swipe to seek, double-tap to skip
+- 🖼️ **Picture-in-Picture** — Native PiP support
+- 📺 **Fullscreen Mode** — True fullscreen with controls
+- 📝 **Subtitles/Captions** — Multi-track subtitle support
+- 💰 **VAST Ads** — VAST 2.0/3.0/4.0 video advertising
+- 🔌 **Framework Support** — React, Vue 3, and Vanilla JS
+- 📦 **TypeScript** — Full type definitions included
+- 🌍 **i18n Ready** — Easy localization support
+---
+## 📦 Installation
+### NPM / Yarn / PNPM
+```bash
+# npm
+npm install @frameset/plex-player
+# yarn
+yarn add @frameset/plex-player
+# pnpm
+pnpm add @frameset/plex-player
+```
+### CDN
+```html
+<!-- CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@frameset/plex-player/dist/plex-player.min.css">
+<!-- JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/@frameset/plex-player/dist/plex-player.min.js"></script>
+```
+---
+## 🚀 Quick Start
+### Vanilla JavaScript
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="@frameset/plex-player/dist/plex-player.css">
+</head>
+<body>
+  <div id="player"></div>
+  <script src="@frameset/plex-player/dist/plex-player.min.js"></script>
+  <script>
+    const player = new PlexPlayer({
+      container: '#player',
+      autoplay: false,
+      muted: false,
+    });
+    player.load('https://example.com/video.mp4');
+  </script>
+</body>
+</html>
+```
+### ES Modules
+```javascript
+import PlexPlayer from '@frameset/plex-player';
+import '@frameset/plex-player/css';
+const player = new PlexPlayer({
+  container: '#player',
+  autoplay: true,
+});
+player.load('https://example.com/video.mp4');
+```
+---
+## ⚛️ React
+```bash
+npm install @frameset/plex-player react
+```
+```jsx
+import { PlexPlayerReact, usePlexPlayer } from '@frameset/plex-player/react';
+import '@frameset/plex-player/css';
+function App() {
+  const playerRef = useRef(null);
+  const handlePlay = () => {
+    console.log('Video started playing');
+  };
+  const handleTimeUpdate = (currentTime) => {
+    console.log('Current time:', currentTime);
+  };
+  return (
+    <PlexPlayerReact
+      ref={playerRef}
+      src="https://example.com/video.mp4"
+      autoplay={false}
+      onPlay={handlePlay}
+      onTimeUpdate={handleTimeUpdate}
+    />
+  );
+}
+```
+### Hooks
+```jsx
+import {
+  PlexPlayerReact,
+  PlexPlayerProvider,
+  usePlexPlayer,
+  usePlexPlayerState,
+  usePlexPlayerTime
+} from '@frameset/plex-player/react';
+function Controls() {
+  const player = usePlexPlayer();
+  const state = usePlexPlayerState();
+  const { current, duration } = usePlexPlayerTime();
+  return (
+    <div>
+      <button onClick={() => player?.togglePlay()}>
+        {state?.isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <span>{current}s / {duration}s</span>
+    </div>
+  );
+}
+function App() {
+  return (
+    <PlexPlayerProvider>
+      <PlexPlayerReact src="video.mp4" />
+      <Controls />
+    </PlexPlayerProvider>
+  );
+}
+```
+---
+## 💚 Vue 3
+```bash
+npm install @frameset/plex-player vue
+```
+```vue
+<template>
+  <PlexPlayerVue
+    ref="player"
+    src="https://example.com/video.mp4"
+    :autoplay="false"
+    @play="onPlay"
+    @timeupdate="onTimeUpdate"
+  />
+</template>
+<script setup>
+import { ref } from 'vue';
+import { PlexPlayerVue } from '@frameset/plex-player/vue';
+import '@frameset/plex-player/css';
+const player = ref(null);
+const onPlay = () => {
+  console.log('Video started playing');
+};
+const onTimeUpdate = (currentTime) => {
+  console.log('Current time:', currentTime);
+};
+// Control player
+const togglePlay = () => {
+  player.value?.togglePlay();
+};
+</script>
+```
+### Composables
+```vue
+<script setup>
+import { PlexPlayerVue, usePlexPlayer, usePlexPlayerTime } from '@frameset/plex-player/vue';
+const player = usePlexPlayer();
+const time = usePlexPlayerTime();
+</script>
+<template>
+  <PlexPlayerVue src="video.mp4" />
+  <div>{{ time.current }} / {{ time.duration }}</div>
+</template>
+```
+---
+## 📖 API Reference
+### Constructor Options
+```typescript
+interface PlexPlayerOptions {
+  container: string | HTMLElement;  // Required: container selector or element
+  autoplay?: boolean;               // Auto-play video (default: false)
+  muted?: boolean;                  // Start muted (default: false)
+  loop?: boolean;                   // Loop video (default: false)
+  volume?: number;                  // Initial volume 0-1 (default: 1)
+  poster?: string;                  // Poster image URL
+  preload?: 'none' | 'metadata' | 'auto'; // Preload behavior (default: 'metadata')
+  keyboard?: boolean;               // Enable keyboard shortcuts (default: true)
+  touch?: boolean;                  // Enable touch gestures (default: true)
+  pip?: boolean;                    // Enable PiP button (default: true)
+  cast?: boolean;                   // Enable Chromecast (default: true)
+  fullscreen?: boolean;             // Enable fullscreen (default: true)
+  controlsHideDelay?: number;       // Hide controls after ms (default: 3000)
+  theme?: ThemeOptions;             // Custom theme colors
+  subtitles?: SubtitleOptions;      // Subtitle configuration
+  ads?: AdsOptions;                 // VAST ads configuration
+  i18n?: I18nOptions;               // Localization strings
+}
+```
+### Methods
+| Method | Description | Returns |
+|--------|-------------|---------|
+| `load(src)` | Load a video URL | `void` |
+| `loadPlaylist(items)` | Load a playlist | `void` |
+| `play()` | Start playback | `Promise<void>` |
+| `pause()` | Pause playback | `void` |
+| `togglePlay()` | Toggle play/pause | `void` |
+| `seek(time)` | Seek to time in seconds | `void` |
+| `seekPercent(percent)` | Seek to percentage (0-100) | `void` |
+| `setVolume(level)` | Set volume (0-1) | `void` |
+| `getVolume()` | Get current volume | `number` |
+| `mute()` | Mute audio | `void` |
+| `unmute()` | Unmute audio | `void` |
+| `toggleMute()` | Toggle mute | `void` |
+| `setPlaybackRate(rate)` | Set playback speed | `void` |
+| `enterFullscreen()` | Enter fullscreen | `Promise<void>` |
+| `exitFullscreen()` | Exit fullscreen | `Promise<void>` |
+| `toggleFullscreen()` | Toggle fullscreen | `void` |
+| `enterPiP()` | Enter Picture-in-Picture | `Promise<void>` |
+| `exitPiP()` | Exit Picture-in-Picture | `Promise<void>` |
+| `togglePiP()` | Toggle PiP | `void` |
+| `cast()` | Start Chromecast | `void` |
+| `next()` | Play next in playlist | `void` |
+| `previous()` | Play previous in playlist | `void` |
+| `playAt(index)` | Play specific playlist item | `void` |
+| `getState()` | Get current player state | `PlayerState` |
+| `destroy()` | Destroy player instance | `void` |
+### Events
+```javascript
+player.on('play', () => { /* Video started */ });
+player.on('pause', () => { /* Video paused */ });
+player.on('ended', () => { /* Video ended */ });
+player.on('timeupdate', ({ currentTime, duration }) => { /* Time changed */ });
+player.on('progress', ({ buffered }) => { /* Buffer progress */ });
+player.on('volumechange', ({ volume, muted }) => { /* Volume changed */ });
+player.on('fullscreenchange', ({ isFullscreen }) => { /* Fullscreen toggled */ });
+player.on('error', (error) => { /* Error occurred */ });
+player.on('ready', () => { /* Player ready */ });
+player.on('trackchange', ({ index, item }) => { /* Playlist track changed */ });
+```
+---
+## 💰 VAST Ads
+Plex Player supports VAST 2.0, 3.0, and 4.0 video advertising standards.
+```javascript
+const player = new PlexPlayer({
+  container: '#player',
+  ads: {
+    enabled: true,
+    tagUrl: 'https://your-ad-server.com/vast.xml',
+    skipOffset: 5, // Allow skip after 5 seconds
+    timeout: 10000, // Ad request timeout in ms
+  },
+});
+// Listen to ad events
+player.on('adstart', (ad) => {
+  console.log('Ad started:', ad);
+});
+player.on('adend', () => {
+  console.log('Ad finished');
+});
+player.on('adskip', () => {
+  console.log('Ad skipped');
+});
+player.on('aderror', (error) => {
+  console.log('Ad error:', error);
+});
+```
+### Ad Options
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `enabled` | `boolean` | `false` | Enable ads |
+| `tagUrl` | `string` | — | VAST tag URL |
+| `skipOffset` | `number` | `5` | Seconds before skip allowed |
+| `timeout` | `number` | `10000` | Request timeout in ms |
+| `maxRedirects` | `number` | `5` | Maximum VAST redirects |
+---
+## 📺 Chromecast
+Chromecast is enabled by default. The cast button appears automatically when a Chromecast device is available on the network.
+```javascript
+const player = new PlexPlayer({
+  container: '#player',
+  cast: true, // Enable Chromecast (default)
+});
+// Manual cast
+player.cast();
+// Listen to cast events
+player.on('castconnected', ({ deviceName }) => {
+  console.log('Connected to:', deviceName);
+});
+player.on('castdisconnected', () => {
+  console.log('Disconnected from Chromecast');
+});
+player.on('caststatechange', ({ state }) => {
+  console.log('Cast state:', state);
+});
+```
+### Requirements
+- Chromecast requires HTTPS in production
+- Works in Chrome and Edge browsers
+- Cast SDK is loaded automatically
+---
+## 🎨 Theming
+Customize the player appearance using CSS variables:
+```css
+:root {
+  --plex-primary: #e5a00d;           /* Primary accent color */
+  --plex-bg: rgba(0, 0, 0, 0.8);     /* Background color */
+  --plex-text: #ffffff;               /* Text color */
+  --plex-progress-bg: #3a3a3a;        /* Progress bar background */
+  --plex-progress: #e5a00d;           /* Progress bar fill */
+  --plex-buffered: #6a6a6a;           /* Buffered area color */
+  --plex-control-size: 40px;          /* Control button size */
+  --plex-border-radius: 4px;          /* Border radius */
+}
+```
+Or via JavaScript:
+```javascript
+const player = new PlexPlayer({
+  container: '#player',
+  theme: {
+    primary: '#e5a00d',
+    background: 'rgba(0, 0, 0, 0.8)',
+    text: '#ffffff',
+    borderRadius: '8px',
+  },
+});
+```
+---
+## ⌨️ Keyboard Shortcuts
+| Key | Action |
+|-----|--------|
+| `Space` / `K` | Toggle play/pause |
+| `←` | Rewind 10 seconds |
+| `→` | Forward 10 seconds |
+| `↑` | Volume up |
+| `↓` | Volume down |
+| `M` | Toggle mute |
+| `F` | Toggle fullscreen |
+| `P` | Toggle Picture-in-Picture |
+| `C` | Toggle captions |
+| `N` | Next track |
+| `Shift + N` | Previous track |
+| `0-9` | Seek to 0%-90% |
+| `Home` | Go to beginning |
+| `End` | Go to end |
+---
+## 🌍 Localization (i18n)
+```javascript
+const player = new PlexPlayer({
+  container: '#player',
+  i18n: {
+    play: 'Play',
+    pause: 'Pause',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    fullscreen: 'Fullscreen',
+    exitFullscreen: 'Exit Fullscreen',
+    pip: 'Picture-in-Picture',
+    cast: 'Cast',
+    settings: 'Settings',
+    speed: 'Speed',
+    quality: 'Quality',
+    subtitles: 'Subtitles',
+    off: 'Off',
+  },
+});
+```
+---
+## 📋 Playlist
+```javascript
+const player = new PlexPlayer({
+  container: '#player',
+});
+// Load playlist
+player.loadPlaylist([
+  {
+    src: 'video1.mp4',
+    title: 'Episode 1',
+    poster: 'thumb1.jpg',
+    duration: 3600,
+  },
+  {
+    src: 'video2.mp4',
+    title: 'Episode 2',
+    poster: 'thumb2.jpg',
+    duration: 3540,
+  },
+]);
+// Navigation
+player.next();
+player.previous();
+player.playAt(2);
+```
+---
+## 📝 Subtitles
+```javascript
+const player = new PlexPlayer({
+  container: '#player',
+  subtitles: {
+    default: 'en',
+    tracks: [
+      { label: 'English', srclang: 'en', src: 'subs/en.vtt' },
+      { label: 'Spanish', srclang: 'es', src: 'subs/es.vtt' },
+      { label: 'French', srclang: 'fr', src: 'subs/fr.vtt' },
+    ],
+    style: {
+      fontSize: '20px',
+      color: '#ffffff',
+      background: 'rgba(0, 0, 0, 0.75)',
+    },
+  },
+});
+```
+---
+## 📊 Browser Support
+| Browser | Version |
+|---------|---------|
+| Chrome | 60+ |
+| Firefox | 55+ |
+| Safari | 11+ |
+| Edge | 79+ |
+| Opera | 47+ |
+| iOS Safari | 11+ |
+| Chrome Android | 60+ |
+---
+## 🔧 Development
+```bash
+# Clone repository
+git clone https://github.com/frameset-studio/plex-player.git
+cd plex-player
+# Install dependencies
+npm install
+# Start development server
+npm run dev
+# Build for production
+npm run build
+# Run tests
+npm test
+# Lint code
+npm run lint
+```
+---
+## 📄 License
+MIT © [FRAMESET Studio](https://frameset.dev)
+---
+<p align="center">
+  <a href="https://frameset.dev">
+    <img src="https://frameset.dev/logo-dark.svg" alt="FRAMESET" width="120" />
+  </a>
+</p>
+<p align="center">
+  Made with ❤️ by <a href="https://frameset.dev">FRAMESET Studio</a>
+</p>
+<p align="center">
+  <a href="https://www.linkedin.com/company/framesetdev/">LinkedIn</a> •
+  <a href="https://github.com/deadseti">GitHub</a> •
+  <a href="https://frameset.dev">Website</a>
+</p>