@streamslice/widget 1.0.0

package/README.md

@@ -0,0 +1,234 @@
+# Widget
+
+A floating video player library with Amazon IVS support for embedding live streams on any website.
+
+## Features
+
+- Draggable and resizable floating window
+- Amazon IVS Player integration for HLS streams
+- Automatic playlist fetching by page URL
+- Playback controls (play/pause, volume, quality, fullscreen)
+- Dark and light themes
+- TypeScript support
+- Lightweight with no external dependencies (except IVS SDK)
+
+## Installation
+
+### NPM
+
+```bash
+npm install @streamslice/widget
+```
+
+### CDN
+
+```html
+<!-- Minified (recommended for production) -->
+<script src="https://unpkg.com/@streamslice/widget"></script>
+
+<!-- Or via jsDelivr -->
+<script src="https://cdn.jsdelivr.net/npm/@streamslice/widget"></script>
+```
+
+## Usage
+
+### ES Modules
+
+```typescript
+import { StreamSlice } from '@streamslice/widget';
+
+const widget = new StreamSlice({
+  apiUrl: 'https://api.your-backend.com',
+  autoPlay: true,
+  muted: false,
+  theme: 'dark',
+  onReady: () => console.log('Widget ready'),
+  onError: (error) => console.error('Error:', error),
+});
+
+// Initialize widget
+widget.init();
+```
+
+### UMD (Browser)
+
+```html
+<script src="https://unpkg.com/streamslice-widget"></script>
+<script>
+  const widget = new StreamSlice.StreamSlice({
+    apiUrl: 'https://api.your-backend.com',
+    autoPlay: true,
+  });
+  
+  widget.init();
+</script>
+```
+
+## Configuration
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `apiUrl` | `string` | **required** | API server URL |
+| `position` | `{ x: number, y: number }` | `{ x: 20, y: 20 }` | Initial window position |
+| `size` | `{ width: number, height: number }` | `{ width: 400, height: 280 }` | Initial window size |
+| `minSize` | `{ width: number, height: number }` | `{ width: 320, height: 220 }` | Minimum window size |
+| `maxSize` | `{ width: number, height: number }` | `{ width: 800, height: 600 }` | Maximum window size |
+| `autoPlay` | `boolean` | `true` | Auto-play when stream loads |
+| `muted` | `boolean` | `false` | Start muted |
+| `volume` | `number` | `1` | Initial volume (0-1) |
+| `showControls` | `boolean` | `true` | Show player controls |
+| `zIndex` | `number` | `999999` | Window z-index |
+| `theme` | `'dark' \| 'light'` | `'dark'` | Color theme |
+| `className` | `string` | - | Additional CSS class |
+
+### Callbacks
+
+| Callback | Parameters | Description |
+|----------|-----------|-------------|
+| `onReady` | - | Called when widget is ready for playback |
+| `onPlay` | - | Called when playback starts |
+| `onPause` | - | Called when playback pauses |
+| `onError` | `{ code: string, message: string }` | Called on error |
+| `onClose` | - | Called when widget is closed |
+| `onResize` | `{ width: number, height: number }` | Called when window is resized |
+| `onMove` | `{ x: number, y: number }` | Called when window is moved |
+
+## API
+
+### Methods
+
+```typescript
+// Playback control
+widget.play();
+widget.pause();
+widget.togglePlayPause();
+
+// Volume
+widget.setVolume(0.5); // 0-1
+widget.getVolume();
+widget.mute();
+widget.unmute();
+widget.toggleMute();
+
+// Quality
+widget.setQuality('720p');
+widget.getQualities(); // ['Auto', '1080p', '720p', '480p', ...]
+
+// Fullscreen
+widget.toggleFullscreen();
+
+// Window position and size
+widget.setPosition({ x: 100, y: 100 });
+widget.setSize({ width: 500, height: 350 });
+
+// Visibility
+widget.show();
+widget.hide();
+widget.close();
+
+// State
+widget.isReady(); // boolean
+widget.getState(); // PlayerState
+
+// Cleanup
+widget.destroy();
+
+// Static method to remove injected styles
+StreamSlice.removeStyles();
+```
+
+### PlayerState
+
+```typescript
+interface PlayerState {
+  isPlaying: boolean;
+  isMuted: boolean;
+  volume: number;
+  isFullscreen: boolean;
+  isLoading: boolean;
+  duration: number;
+  currentTime: number;
+  isLive: boolean;
+  quality: string;
+  availableQualities: string[];
+}
+```
+
+## Backend API
+
+The library expects the following API endpoint:
+
+### GET /api/event/getPlaylist
+
+**Query Parameters:**
+- `link` (string, required) - Page URL
+
+**Response:**
+```json
+{
+  "data": {
+    "link": "https://ivs.stream.url/playlist.m3u8"
+  },
+  "error": null
+}
+```
+
+**Error Response:**
+```json
+{
+  "data": null,
+  "error": {
+    "code": "ERROR_CODE",
+    "error_message_message": "Error description"
+  }
+}
+```
+
+## Build
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run build
+
+# Build with watch mode
+npm run dev
+
+# Run example server
+npm run serve
+```
+
+## Output Files
+
+| File | Size | Description |
+|------|------|-------------|
+| `streamslice.js` | ~55 KB | UMD, development |
+| `streamslice.min.js` | ~33 KB | UMD, minified (production) |
+| `streamslice.esm.js` | ~50 KB | ES Modules |
+| `streamslice.esm.min.js` | ~33 KB | ES Modules, minified |
+
+## Project Structure
+
+```
+src/
+├── index.ts           # Entry point
+├── StreamSlice.ts     # Main class
+├── api/
+│   └── client.ts      # API client
+├── player/
+│   └── IVSPlayer.ts   # Amazon IVS Player wrapper
+├── ui/
+│   ├── FloatingWindow.ts  # Floating window
+│   ├── PlayerControls.ts  # Player controls
+│   └── icons.ts           # SVG icons
+├── styles/
+│   └── index.ts       # CSS styles
+└── types/
+    └── index.ts       # TypeScript types
+```
+
+## License
+
+MIT

package/dist/StreamSlice.d.ts

@@ -0,0 +1,104 @@
+/**
+ * StreamSlice - Main Widget Class
+ */
+import type { StreamSliceConfig, WindowPosition, WindowSize, PlayerState } from './types';
+export declare class StreamSlice {
+    private config;
+    private apiClient;
+    private floatingWindow;
+    private playerControls;
+    private player;
+    private isInitialized;
+    private playlistUrl;
+    private playerState;
+    constructor(config: StreamSliceConfig);
+    /**
+     * Initialize and show the widget
+     */
+    init(): Promise<void>;
+    private createWidget;
+    private loadStream;
+    private showNoStreamState;
+    private handlePlayerStateChange;
+    private handleClose;
+    /**
+     * Play the stream
+     */
+    play(): void;
+    /**
+     * Pause the stream
+     */
+    pause(): void;
+    /**
+     * Toggle play/pause
+     */
+    togglePlayPause(): void;
+    /**
+     * Set volume (0-1)
+     */
+    setVolume(volume: number): void;
+    /**
+     * Get current volume
+     */
+    getVolume(): number;
+    /**
+     * Mute the player
+     */
+    mute(): void;
+    /**
+     * Unmute the player
+     */
+    unmute(): void;
+    /**
+     * Toggle mute
+     */
+    toggleMute(): void;
+    /**
+     * Set quality
+     */
+    setQuality(quality: string): void;
+    /**
+     * Get available qualities
+     */
+    getQualities(): string[];
+    /**
+     * Toggle fullscreen
+     */
+    toggleFullscreen(): void;
+    /**
+     * Set window position
+     */
+    setPosition(position: WindowPosition): void;
+    /**
+     * Set window size
+     */
+    setSize(size: WindowSize): void;
+    /**
+     * Check if widget is initialized
+     */
+    isReady(): boolean;
+    /**
+     * Get current player state
+     */
+    getState(): PlayerState;
+    /**
+     * Show the widget
+     */
+    show(): void;
+    /**
+     * Hide the widget
+     */
+    hide(): void;
+    /**
+     * Close and destroy the widget
+     */
+    close(): void;
+    /**
+     * Destroy the widget and clean up resources
+     */
+    destroy(): void;
+    /**
+     * Static method to remove all injected styles
+     */
+    static removeStyles(): void;
+}

package/dist/api/client.d.ts

@@ -0,0 +1,12 @@
+/**
+ * StreamSlice API Client
+ */
+import type { PlaylistResponse } from '../types';
+export declare class ApiClient {
+    private baseUrl;
+    constructor(baseUrl: string);
+    /**
+     * Get playlist URL for a page link
+     */
+    getPlaylist(pageLink: string): Promise<PlaylistResponse>;
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * StreamSlice Widget Library
+ *
+ * A floating video player widget with Amazon IVS support
+ */
+export { StreamSlice } from './StreamSlice';
+export type { StreamSliceConfig, StreamSliceError, WindowPosition, WindowSize, PlayerState, PlaylistResponse, } from './types';
+import { StreamSlice } from './StreamSlice';
+export default StreamSlice;

package/dist/player/IVSPlayer.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Amazon IVS Player Wrapper
+ */
+import type { PlayerState } from '../types';
+declare global {
+    interface Window {
+        IVSPlayer?: any;
+    }
+}
+export interface IVSPlayerOptions {
+    container: HTMLElement;
+    autoPlay?: boolean;
+    muted?: boolean;
+    volume?: number;
+    onStateChange?: (state: Partial<PlayerState>) => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+    onReady?: () => void;
+}
+export declare class IVSPlayerWrapper {
+    private container;
+    private videoElement;
+    private player;
+    private options;
+    private isPlayerReady;
+    private loadingOverlay;
+    private errorOverlay;
+    private currentPlaybackUrl;
+    constructor(options: IVSPlayerOptions);
+    private init;
+    private loadIVSPlayerSDK;
+    private createVideoElement;
+    private initializePlayer;
+    load(playbackUrl: string): Promise<void>;
+    play(): Promise<void>;
+    pause(): void;
+    togglePlayPause(): void;
+    setVolume(volume: number): void;
+    getVolume(): number;
+    setMuted(muted: boolean): void;
+    toggleMute(): void;
+    setQuality(quality: string): void;
+    getQualities(): string[];
+    private updateQualities;
+    enterFullscreen(): Promise<void>;
+    exitFullscreen(): Promise<void>;
+    toggleFullscreen(): void;
+    isPlaying(): boolean;
+    isMuted(): boolean;
+    private showLoading;
+    private hideLoading;
+    private showError;
+    private hideError;
+    showNoStream(): void;
+    destroy(): void;
+}