@streamslice/widget 1.0.0

package/dist/streamslice.js

@@ -0,0 +1,1666 @@
+/*!
+ * Widget v1.0.0
+ * Floating video player with Amazon IVS support
+ * Released under the MIT License
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.StreamSlice = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * StreamSlice API Client
+     */
+    class ApiClient {
+        constructor(baseUrl) {
+            this.baseUrl = baseUrl.replace(/\/$/, '');
+        }
+        /**
+         * Get playlist URL for a page link
+         */
+        async getPlaylist(pageLink) {
+            const url = new URL(`${this.baseUrl}/api/event/getPlaylist`);
+            url.searchParams.set('link', pageLink);
+            try {
+                const response = await fetch(url.toString(), {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                return data;
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                return {
+                    error: {
+                        code: 'FETCH_ERROR',
+                        error_message_message: errorMessage,
+                    },
+                };
+            }
+        }
+    }
+
+    /**
+     * SVG Icons
+     */
+    const Icons = {
+        play: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`,
+        pause: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`,
+        volumeHigh: `<svg viewBox="0 0 24 24" fill="currentColor"><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>`,
+        volumeLow: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/></svg>`,
+        volumeMute: `<svg viewBox="0 0 24 24" fill="currentColor"><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>`,
+        fullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>`,
+        fullscreenExit: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>`,
+        close: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`,
+        video: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>`,
+        error: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`,
+        chevronDown: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>`,
+    };
+
+    /**
+     * Floating Window Component
+     */
+    class FloatingWindow {
+        constructor(options) {
+            this.isDragging = false;
+            this.isResizing = false;
+            this.resizeDirection = null;
+            this.dragOffset = { x: 0, y: 0 };
+            this.startPos = { x: 0, y: 0 };
+            this.startSize = { width: 0, height: 0 };
+            this.options = options;
+            this.currentPosition = { ...options.position };
+            this.currentSize = { ...options.size };
+            this.container = this.createContainer();
+            this.header = this.createHeader();
+            this.videoContainer = this.createVideoContainer();
+            this.controlsContainer = this.createControlsContainer();
+            this.container.appendChild(this.header);
+            this.container.appendChild(this.videoContainer);
+            this.container.appendChild(this.controlsContainer);
+            this.createResizeHandles();
+            this.attachEventListeners();
+            document.body.appendChild(this.container);
+            // Trigger enter animation
+            requestAnimationFrame(() => {
+                this.container.classList.add('ss-entering');
+                setTimeout(() => this.container.classList.remove('ss-entering'), 300);
+            });
+        }
+        createContainer() {
+            const container = document.createElement('div');
+            container.className = `ss-widget ss-theme-${this.options.theme}`;
+            if (this.options.className) {
+                container.classList.add(this.options.className);
+            }
+            container.style.cssText = `
+      left: ${this.currentPosition.x}px;
+      top: ${this.currentPosition.y}px;
+      width: ${this.currentSize.width}px;
+      height: ${this.currentSize.height}px;
+      z-index: ${this.options.zIndex};
+    `;
+            return container;
+        }
+        createHeader() {
+            const header = document.createElement('div');
+            header.className = 'ss-header';
+            const titleWrapper = document.createElement('div');
+            titleWrapper.className = 'ss-header-title';
+            const liveBadge = document.createElement('span');
+            liveBadge.className = 'ss-live-badge';
+            liveBadge.innerHTML = `<span class="ss-live-dot"></span>LIVE`;
+            titleWrapper.appendChild(liveBadge);
+            const actions = document.createElement('div');
+            actions.className = 'ss-header-actions';
+            const closeBtn = document.createElement('button');
+            closeBtn.className = 'ss-btn ss-btn-close';
+            closeBtn.innerHTML = Icons.close;
+            closeBtn.title = 'Close';
+            closeBtn.addEventListener('click', () => this.close());
+            actions.appendChild(closeBtn);
+            header.appendChild(titleWrapper);
+            header.appendChild(actions);
+            return header;
+        }
+        createVideoContainer() {
+            const container = document.createElement('div');
+            container.className = 'ss-video-container';
+            return container;
+        }
+        createControlsContainer() {
+            const container = document.createElement('div');
+            container.className = 'ss-controls';
+            return container;
+        }
+        createResizeHandles() {
+            const directions = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
+            directions.forEach(dir => {
+                const handle = document.createElement('div');
+                handle.className = `ss-resize-handle ss-resize-${dir}`;
+                handle.dataset.direction = dir;
+                this.container.appendChild(handle);
+            });
+        }
+        attachEventListeners() {
+            // Drag handling
+            this.header.addEventListener('mousedown', this.onDragStart.bind(this));
+            document.addEventListener('mousemove', this.onDrag.bind(this));
+            document.addEventListener('mouseup', this.onDragEnd.bind(this));
+            // Touch support for drag
+            this.header.addEventListener('touchstart', this.onTouchDragStart.bind(this), { passive: false });
+            document.addEventListener('touchmove', this.onTouchDrag.bind(this), { passive: false });
+            document.addEventListener('touchend', this.onDragEnd.bind(this));
+            // Resize handling
+            this.container.querySelectorAll('.ss-resize-handle').forEach(handle => {
+                handle.addEventListener('mousedown', this.onResizeStart.bind(this));
+            });
+            document.addEventListener('mousemove', this.onResize.bind(this));
+            document.addEventListener('mouseup', this.onResizeEnd.bind(this));
+        }
+        onDragStart(e) {
+            if (e.target.closest('.ss-btn'))
+                return;
+            this.isDragging = true;
+            this.dragOffset = {
+                x: e.clientX - this.currentPosition.x,
+                y: e.clientY - this.currentPosition.y,
+            };
+            this.container.style.transition = 'none';
+        }
+        onTouchDragStart(e) {
+            if (e.target.closest('.ss-btn'))
+                return;
+            const touch = e.touches[0];
+            this.isDragging = true;
+            this.dragOffset = {
+                x: touch.clientX - this.currentPosition.x,
+                y: touch.clientY - this.currentPosition.y,
+            };
+            this.container.style.transition = 'none';
+        }
+        onDrag(e) {
+            if (!this.isDragging)
+                return;
+            e.preventDefault();
+            this.updatePosition(e.clientX - this.dragOffset.x, e.clientY - this.dragOffset.y);
+        }
+        onTouchDrag(e) {
+            if (!this.isDragging)
+                return;
+            e.preventDefault();
+            const touch = e.touches[0];
+            this.updatePosition(touch.clientX - this.dragOffset.x, touch.clientY - this.dragOffset.y);
+        }
+        onDragEnd() {
+            if (this.isDragging) {
+                this.isDragging = false;
+                this.container.style.transition = '';
+                this.options.onMove?.(this.currentPosition);
+            }
+        }
+        updatePosition(x, y) {
+            // Keep window within viewport
+            const maxX = window.innerWidth - this.currentSize.width;
+            const maxY = window.innerHeight - this.currentSize.height;
+            this.currentPosition = {
+                x: Math.max(0, Math.min(x, maxX)),
+                y: Math.max(0, Math.min(y, maxY)),
+            };
+            this.container.style.left = `${this.currentPosition.x}px`;
+            this.container.style.top = `${this.currentPosition.y}px`;
+        }
+        onResizeStart(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const handle = e.target;
+            this.resizeDirection = handle.dataset.direction;
+            this.isResizing = true;
+            this.startPos = { x: e.clientX, y: e.clientY };
+            this.startSize = { ...this.currentSize };
+            this.container.style.transition = 'none';
+        }
+        onResize(e) {
+            if (!this.isResizing || !this.resizeDirection)
+                return;
+            e.preventDefault();
+            const deltaX = e.clientX - this.startPos.x;
+            const deltaY = e.clientY - this.startPos.y;
+            let newWidth = this.startSize.width;
+            let newHeight = this.startSize.height;
+            let newX = this.currentPosition.x;
+            let newY = this.currentPosition.y;
+            // Calculate new dimensions based on resize direction
+            if (this.resizeDirection.includes('e')) {
+                newWidth = this.startSize.width + deltaX;
+            }
+            if (this.resizeDirection.includes('w')) {
+                newWidth = this.startSize.width - deltaX;
+                newX = this.currentPosition.x + deltaX;
+            }
+            if (this.resizeDirection.includes('s')) {
+                newHeight = this.startSize.height + deltaY;
+            }
+            if (this.resizeDirection.includes('n')) {
+                newHeight = this.startSize.height - deltaY;
+                newY = this.currentPosition.y + deltaY;
+            }
+            // Apply constraints
+            newWidth = Math.max(this.options.minSize.width, Math.min(newWidth, this.options.maxSize.width));
+            newHeight = Math.max(this.options.minSize.height, Math.min(newHeight, this.options.maxSize.height));
+            // Adjust position if resizing from left or top
+            if (this.resizeDirection.includes('w') && newWidth !== this.currentSize.width) {
+                newX = this.currentPosition.x + (this.currentSize.width - newWidth);
+            }
+            if (this.resizeDirection.includes('n') && newHeight !== this.currentSize.height) {
+                newY = this.currentPosition.y + (this.currentSize.height - newHeight);
+            }
+            this.currentSize = { width: newWidth, height: newHeight };
+            this.currentPosition = { x: newX, y: newY };
+            this.container.style.width = `${newWidth}px`;
+            this.container.style.height = `${newHeight}px`;
+            this.container.style.left = `${newX}px`;
+            this.container.style.top = `${newY}px`;
+        }
+        onResizeEnd() {
+            if (this.isResizing) {
+                this.isResizing = false;
+                this.resizeDirection = null;
+                this.container.style.transition = '';
+                this.options.onResize?.(this.currentSize);
+            }
+        }
+        getVideoContainer() {
+            return this.videoContainer;
+        }
+        getControlsContainer() {
+            return this.controlsContainer;
+        }
+        getContainer() {
+            return this.container;
+        }
+        setSize(size) {
+            this.currentSize = size;
+            this.container.style.width = `${size.width}px`;
+            this.container.style.height = `${size.height}px`;
+        }
+        setPosition(position) {
+            this.currentPosition = position;
+            this.container.style.left = `${position.x}px`;
+            this.container.style.top = `${position.y}px`;
+        }
+        showLiveBadge(show) {
+            const badge = this.header.querySelector('.ss-live-badge');
+            if (badge) {
+                badge.style.display = show ? 'inline-flex' : 'none';
+            }
+        }
+        close() {
+            this.container.classList.add('ss-leaving');
+            setTimeout(() => {
+                this.destroy();
+                this.options.onClose?.();
+            }, 200);
+        }
+        destroy() {
+            document.removeEventListener('mousemove', this.onDrag.bind(this));
+            document.removeEventListener('mouseup', this.onDragEnd.bind(this));
+            document.removeEventListener('mousemove', this.onResize.bind(this));
+            document.removeEventListener('mouseup', this.onResizeEnd.bind(this));
+            this.container.remove();
+        }
+    }
+
+    /**
+     * Player Controls Component
+     */
+    class PlayerControls {
+        constructor(container, options) {
+            this.container = container;
+            this.options = options;
+            this.state = {
+                isPlaying: false,
+                isMuted: false,
+                volume: 1,
+                isFullscreen: false,
+                isLoading: true,
+                duration: 0,
+                currentTime: 0,
+                isLive: true,
+                quality: 'auto',
+                availableQualities: [],
+            };
+            this.render();
+        }
+        render() {
+            this.container.innerHTML = '';
+            // Left controls
+            const leftControls = document.createElement('div');
+            leftControls.className = 'ss-controls-left';
+            // Play/Pause button
+            this.playBtn = this.createButton('ss-control-btn ss-play-btn', Icons.play, 'Play');
+            this.playBtn.addEventListener('click', () => this.options.onPlayPause?.());
+            leftControls.appendChild(this.playBtn);
+            // Volume controls
+            const volumeWrapper = document.createElement('div');
+            volumeWrapper.className = 'ss-volume-wrapper';
+            this.muteBtn = this.createButton('ss-control-btn ss-mute-btn', Icons.volumeHigh, 'Mute');
+            this.muteBtn.addEventListener('click', () => this.options.onMuteToggle?.());
+            this.volumeSlider = document.createElement('input');
+            this.volumeSlider.type = 'range';
+            this.volumeSlider.className = 'ss-volume-slider';
+            this.volumeSlider.min = '0';
+            this.volumeSlider.max = '1';
+            this.volumeSlider.step = '0.1';
+            this.volumeSlider.value = '1';
+            this.volumeSlider.addEventListener('input', (e) => {
+                const target = e.target;
+                this.options.onVolumeChange?.(parseFloat(target.value));
+            });
+            volumeWrapper.appendChild(this.muteBtn);
+            volumeWrapper.appendChild(this.volumeSlider);
+            leftControls.appendChild(volumeWrapper);
+            // Right controls
+            const rightControls = document.createElement('div');
+            rightControls.className = 'ss-controls-right';
+            // Quality selector
+            const qualityWrapper = document.createElement('div');
+            qualityWrapper.className = 'ss-quality-wrapper';
+            this.qualityBtn = document.createElement('button');
+            this.qualityBtn.className = 'ss-quality-btn';
+            this.qualityBtn.innerHTML = `Auto ${Icons.chevronDown}`;
+            this.qualityBtn.addEventListener('click', () => this.toggleQualityMenu());
+            this.qualityMenu = document.createElement('div');
+            this.qualityMenu.className = 'ss-quality-menu';
+            qualityWrapper.appendChild(this.qualityBtn);
+            qualityWrapper.appendChild(this.qualityMenu);
+            rightControls.appendChild(qualityWrapper);
+            // Fullscreen button
+            this.fullscreenBtn = this.createButton('ss-control-btn ss-fullscreen-btn', Icons.fullscreen, 'Fullscreen');
+            this.fullscreenBtn.addEventListener('click', () => this.options.onFullscreenToggle?.());
+            rightControls.appendChild(this.fullscreenBtn);
+            this.container.appendChild(leftControls);
+            this.container.appendChild(rightControls);
+            // Close quality menu when clicking outside
+            document.addEventListener('click', (e) => {
+                if (!qualityWrapper.contains(e.target)) {
+                    this.qualityMenu.classList.remove('ss-open');
+                }
+            });
+        }
+        createButton(className, icon, title) {
+            const btn = document.createElement('button');
+            btn.className = className;
+            btn.innerHTML = icon;
+            btn.title = title;
+            return btn;
+        }
+        toggleQualityMenu() {
+            this.qualityMenu.classList.toggle('ss-open');
+        }
+        updateState(newState) {
+            this.state = { ...this.state, ...newState };
+            this.updateUI();
+        }
+        updateUI() {
+            // Update play button
+            this.playBtn.innerHTML = this.state.isPlaying ? Icons.pause : Icons.play;
+            this.playBtn.title = this.state.isPlaying ? 'Pause' : 'Play';
+            // Update mute button and volume
+            if (this.state.isMuted || this.state.volume === 0) {
+                this.muteBtn.innerHTML = Icons.volumeMute;
+                this.muteBtn.title = 'Unmute';
+            }
+            else if (this.state.volume < 0.5) {
+                this.muteBtn.innerHTML = Icons.volumeLow;
+                this.muteBtn.title = 'Mute';
+            }
+            else {
+                this.muteBtn.innerHTML = Icons.volumeHigh;
+                this.muteBtn.title = 'Mute';
+            }
+            this.volumeSlider.value = this.state.isMuted ? '0' : String(this.state.volume);
+            // Update fullscreen button
+            this.fullscreenBtn.innerHTML = this.state.isFullscreen ? Icons.fullscreenExit : Icons.fullscreen;
+            this.fullscreenBtn.title = this.state.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen';
+            // Update quality button
+            this.qualityBtn.innerHTML = `${this.state.quality} ${Icons.chevronDown}`;
+        }
+        setAvailableQualities(qualities) {
+            this.state.availableQualities = qualities;
+            this.renderQualityMenu();
+        }
+        renderQualityMenu() {
+            this.qualityMenu.innerHTML = '';
+            this.state.availableQualities.forEach(quality => {
+                const option = document.createElement('button');
+                option.className = 'ss-quality-option';
+                if (quality === this.state.quality) {
+                    option.classList.add('ss-active');
+                }
+                option.textContent = quality;
+                option.addEventListener('click', () => {
+                    this.state.quality = quality;
+                    this.options.onQualityChange?.(quality);
+                    this.qualityMenu.classList.remove('ss-open');
+                    this.updateUI();
+                    this.renderQualityMenu();
+                });
+                this.qualityMenu.appendChild(option);
+            });
+        }
+        setEnabled(enabled) {
+            this.playBtn.disabled = !enabled;
+            this.muteBtn.disabled = !enabled;
+            this.volumeSlider.disabled = !enabled;
+            this.fullscreenBtn.disabled = !enabled;
+            this.qualityBtn.disabled = !enabled;
+        }
+        destroy() {
+            this.container.innerHTML = '';
+        }
+    }
+
+    /**
+     * Amazon IVS Player Wrapper
+     */
+    class IVSPlayerWrapper {
+        constructor(options) {
+            this.videoElement = null;
+            this.player = null;
+            this.isPlayerReady = false;
+            this.loadingOverlay = null;
+            this.errorOverlay = null;
+            this.currentPlaybackUrl = null;
+            this.options = options;
+            this.container = options.container;
+            this.init();
+        }
+        async init() {
+            this.showLoading('Initializing player...');
+            try {
+                // Check if IVS Player SDK is loaded
+                if (!window.IVSPlayer) {
+                    // Try to load the IVS Player SDK dynamically
+                    await this.loadIVSPlayerSDK();
+                }
+                if (!window.IVSPlayer?.isPlayerSupported) {
+                    throw new Error('IVS Player is not supported in this browser');
+                }
+                this.createVideoElement();
+                this.initializePlayer();
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to initialize player';
+                this.showError(errorMessage);
+                this.options.onError?.({ code: 'INIT_ERROR', message: errorMessage });
+            }
+        }
+        loadIVSPlayerSDK() {
+            return new Promise((resolve, reject) => {
+                // Check if already loaded
+                if (window.IVSPlayer) {
+                    resolve();
+                    return;
+                }
+                const script = document.createElement('script');
+                script.src = 'https://player.live-video.net/1.24.0/amazon-ivs-player.min.js';
+                script.async = true;
+                script.onload = () => {
+                    if (window.IVSPlayer) {
+                        resolve();
+                    }
+                    else {
+                        reject(new Error('IVS Player SDK loaded but not available'));
+                    }
+                };
+                script.onerror = () => reject(new Error('Failed to load IVS Player SDK'));
+                document.head.appendChild(script);
+            });
+        }
+        createVideoElement() {
+            this.videoElement = document.createElement('video');
+            this.videoElement.playsInline = true;
+            this.videoElement.muted = this.options.muted ?? false;
+            this.container.appendChild(this.videoElement);
+        }
+        initializePlayer() {
+            if (!window.IVSPlayer || !this.videoElement)
+                return;
+            const { create, PlayerState, PlayerEventType } = window.IVSPlayer;
+            this.player = create({
+                wasmWorker: 'https://player.live-video.net/1.24.0/amazon-ivs-wasmworker.min.js',
+                wasmBinary: 'https://player.live-video.net/1.24.0/amazon-ivs-wasmworker.min.wasm',
+            });
+            this.player.attachHTMLVideoElement(this.videoElement);
+            // Set initial volume
+            this.player.setVolume(this.options.volume ?? 1);
+            this.player.setMuted(this.options.muted ?? false);
+            // Event listeners
+            this.player.addEventListener(PlayerState.READY, () => {
+                this.isPlayerReady = true;
+                this.hideLoading();
+                this.hideError();
+                this.updateQualities();
+                this.options.onReady?.();
+                this.options.onStateChange?.({ isLoading: false });
+            });
+            this.player.addEventListener(PlayerState.PLAYING, () => {
+                this.hideLoading();
+                this.options.onStateChange?.({ isPlaying: true, isLoading: false });
+            });
+            this.player.addEventListener(PlayerState.ENDED, () => {
+                this.options.onStateChange?.({ isPlaying: false });
+            });
+            this.player.addEventListener(PlayerState.IDLE, () => {
+                this.options.onStateChange?.({ isPlaying: false });
+            });
+            this.player.addEventListener(PlayerState.BUFFERING, () => {
+                this.showLoading('Buffering...');
+                this.options.onStateChange?.({ isLoading: true });
+            });
+            this.player.addEventListener(PlayerEventType.ERROR, (error) => {
+                const errorMessage = error?.message || 'Playback error';
+                this.showError(errorMessage);
+                this.options.onError?.({ code: 'PLAYBACK_ERROR', message: errorMessage });
+            });
+            this.player.addEventListener(PlayerEventType.QUALITY_CHANGED, () => {
+                const quality = this.player.getQuality();
+                this.options.onStateChange?.({ quality: quality?.name || 'auto' });
+            });
+        }
+        async load(playbackUrl) {
+            this.currentPlaybackUrl = playbackUrl;
+            this.showLoading('Loading stream...');
+            if (!this.player) {
+                // Wait for player to initialize
+                await new Promise((resolve) => {
+                    const checkPlayer = setInterval(() => {
+                        if (this.player) {
+                            clearInterval(checkPlayer);
+                            resolve();
+                        }
+                    }, 100);
+                    // Timeout after 10 seconds
+                    setTimeout(() => {
+                        clearInterval(checkPlayer);
+                        resolve();
+                    }, 10000);
+                });
+            }
+            if (!this.player) {
+                this.showError('Player not initialized');
+                return;
+            }
+            try {
+                this.player.load(playbackUrl);
+                if (this.options.autoPlay) {
+                    await this.play();
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to load stream';
+                this.showError(errorMessage);
+                this.options.onError?.({ code: 'LOAD_ERROR', message: errorMessage });
+            }
+        }
+        async play() {
+            if (!this.player)
+                return;
+            try {
+                await this.player.play();
+            }
+            catch (error) {
+                // Auto-play might be blocked, try muted
+                if (this.player) {
+                    this.player.setMuted(true);
+                    await this.player.play();
+                    this.options.onStateChange?.({ isMuted: true });
+                }
+            }
+        }
+        pause() {
+            if (!this.player)
+                return;
+            this.player.pause();
+            this.options.onStateChange?.({ isPlaying: false });
+        }
+        togglePlayPause() {
+            if (!this.player)
+                return;
+            if (this.player.isPaused()) {
+                this.play();
+            }
+            else {
+                this.pause();
+            }
+        }
+        setVolume(volume) {
+            if (!this.player)
+                return;
+            this.player.setVolume(Math.max(0, Math.min(1, volume)));
+            this.options.onStateChange?.({ volume, isMuted: volume === 0 });
+        }
+        getVolume() {
+            return this.player?.getVolume() ?? 1;
+        }
+        setMuted(muted) {
+            if (!this.player)
+                return;
+            this.player.setMuted(muted);
+            this.options.onStateChange?.({ isMuted: muted });
+        }
+        toggleMute() {
+            if (!this.player)
+                return;
+            const isMuted = this.player.isMuted();
+            this.setMuted(!isMuted);
+        }
+        setQuality(quality) {
+            if (!this.player)
+                return;
+            const qualities = this.player.getQualities();
+            const selectedQuality = qualities.find((q) => q.name === quality);
+            if (selectedQuality) {
+                this.player.setQuality(selectedQuality);
+            }
+            else if (quality === 'auto' || quality === 'Auto') {
+                this.player.setAutoQualityMode(true);
+            }
+        }
+        getQualities() {
+            if (!this.player)
+                return ['Auto'];
+            const qualities = this.player.getQualities();
+            return ['Auto', ...qualities.map((q) => q.name)];
+        }
+        updateQualities() {
+            const qualities = this.getQualities();
+            this.options.onStateChange?.({ availableQualities: qualities });
+        }
+        async enterFullscreen() {
+            try {
+                if (this.container.requestFullscreen) {
+                    await this.container.requestFullscreen();
+                }
+                else if (this.container.webkitRequestFullscreen) {
+                    await this.container.webkitRequestFullscreen();
+                }
+                this.options.onStateChange?.({ isFullscreen: true });
+            }
+            catch (error) {
+                console.warn('Fullscreen not supported or denied');
+            }
+        }
+        async exitFullscreen() {
+            try {
+                if (document.exitFullscreen) {
+                    await document.exitFullscreen();
+                }
+                else if (document.webkitExitFullscreen) {
+                    await document.webkitExitFullscreen();
+                }
+                this.options.onStateChange?.({ isFullscreen: false });
+            }
+            catch (error) {
+                console.warn('Exit fullscreen failed');
+            }
+        }
+        toggleFullscreen() {
+            if (document.fullscreenElement) {
+                this.exitFullscreen();
+            }
+            else {
+                this.enterFullscreen();
+            }
+        }
+        isPlaying() {
+            return this.player ? !this.player.isPaused() : false;
+        }
+        isMuted() {
+            return this.player?.isMuted() ?? false;
+        }
+        showLoading(text = 'Loading...') {
+            this.hideError();
+            if (!this.loadingOverlay) {
+                this.loadingOverlay = document.createElement('div');
+                this.loadingOverlay.className = 'ss-loading';
+                this.container.appendChild(this.loadingOverlay);
+            }
+            this.loadingOverlay.innerHTML = `
+      <div class="ss-spinner"></div>
+      <div class="ss-loading-text">${text}</div>
+    `;
+            this.loadingOverlay.style.display = 'flex';
+        }
+        hideLoading() {
+            if (this.loadingOverlay) {
+                this.loadingOverlay.style.display = 'none';
+            }
+        }
+        showError(message) {
+            this.hideLoading();
+            if (!this.errorOverlay) {
+                this.errorOverlay = document.createElement('div');
+                this.errorOverlay.className = 'ss-error';
+                this.container.appendChild(this.errorOverlay);
+            }
+            this.errorOverlay.innerHTML = `
+      <div class="ss-error-icon">${Icons.error}</div>
+      <div class="ss-error-message">${message}</div>
+      <button class="ss-error-retry">Retry</button>
+    `;
+            this.errorOverlay.style.display = 'flex';
+            const retryBtn = this.errorOverlay.querySelector('.ss-error-retry');
+            retryBtn?.addEventListener('click', () => {
+                if (this.currentPlaybackUrl) {
+                    this.load(this.currentPlaybackUrl);
+                }
+            });
+        }
+        hideError() {
+            if (this.errorOverlay) {
+                this.errorOverlay.style.display = 'none';
+            }
+        }
+        showNoStream() {
+            this.hideLoading();
+            this.hideError();
+            const noStreamOverlay = document.createElement('div');
+            noStreamOverlay.className = 'ss-no-stream';
+            noStreamOverlay.innerHTML = `
+      <div class="ss-no-stream-icon">${Icons.video}</div>
+      <div class="ss-no-stream-text">No stream available</div>
+      <div class="ss-no-stream-subtext">Stream has not started yet</div>
+    `;
+            this.container.appendChild(noStreamOverlay);
+        }
+        destroy() {
+            if (this.player) {
+                this.player.pause();
+                this.player.delete();
+                this.player = null;
+            }
+            if (this.videoElement) {
+                this.videoElement.remove();
+                this.videoElement = null;
+            }
+            this.loadingOverlay?.remove();
+            this.errorOverlay?.remove();
+        }
+    }
+
+    /**
+     * StreamSlice Widget Styles
+     */
+    const STYLES = `
+/* StreamSlice Widget Styles */
+.ss-widget {
+  --ss-primary: #6366f1;
+  --ss-primary-hover: #4f46e5;
+  --ss-bg: #1a1a2e;
+  --ss-bg-secondary: #16213e;
+  --ss-text: #ffffff;
+  --ss-text-secondary: #a0aec0;
+  --ss-border: #2d3748;
+  --ss-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  --ss-radius: 12px;
+  --ss-transition: all 0.2s ease;
+
+  position: fixed;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--ss-bg);
+  border-radius: var(--ss-radius);
+  box-shadow: var(--ss-shadow);
+  overflow: hidden;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.ss-widget.ss-theme-light {
+  --ss-bg: #ffffff;
+  --ss-bg-secondary: #f7fafc;
+  --ss-text: #1a202c;
+  --ss-text-secondary: #718096;
+  --ss-border: #e2e8f0;
+  --ss-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+}
+
+/* Header / Drag Handle */
+.ss-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--ss-bg-secondary);
+  cursor: grab;
+  border-bottom: 1px solid var(--ss-border);
+}
+
+.ss-header:active {
+  cursor: grabbing;
+}
+
+.ss-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--ss-text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.ss-live-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: #ef4444;
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  border-radius: 4px;
+  animation: ss-pulse 2s infinite;
+}
+
+@keyframes ss-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.ss-live-dot {
+  width: 6px;
+  height: 6px;
+  background: white;
+  border-radius: 50%;
+}
+
+.ss-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ss-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--ss-text-secondary);
+  cursor: pointer;
+  transition: var(--ss-transition);
+}
+
+.ss-btn:hover {
+  background: var(--ss-border);
+  color: var(--ss-text);
+}
+
+.ss-btn-close:hover {
+  background: #ef4444;
+  color: white;
+}
+
+/* Video Container */
+.ss-video-container {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  background: #000;
+  overflow: hidden;
+}
+
+.ss-video-container video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Loading Overlay */
+.ss-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.8);
+  color: var(--ss-text);
+  gap: 12px;
+}
+
+.ss-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--ss-border);
+  border-top-color: var(--ss-primary);
+  border-radius: 50%;
+  animation: ss-spin 1s linear infinite;
+}
+
+@keyframes ss-spin {
+  to { transform: rotate(360deg); }
+}
+
+.ss-loading-text {
+  font-size: 13px;
+  color: var(--ss-text-secondary);
+}
+
+/* Error Overlay */
+.ss-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.9);
+  color: var(--ss-text);
+  padding: 20px;
+  text-align: center;
+  gap: 12px;
+}
+
+.ss-error-icon {
+  width: 48px;
+  height: 48px;
+  color: #ef4444;
+}
+
+.ss-error-message {
+  font-size: 14px;
+  color: var(--ss-text-secondary);
+  max-width: 280px;
+}
+
+.ss-error-retry {
+  padding: 8px 16px;
+  background: var(--ss-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--ss-transition);
+}
+
+.ss-error-retry:hover {
+  background: var(--ss-primary-hover);
+}
+
+/* Player Controls */
+.ss-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: var(--ss-bg-secondary);
+  border-top: 1px solid var(--ss-border);
+}
+
+.ss-controls-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ss-controls-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.ss-control-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--ss-text);
+  cursor: pointer;
+  transition: var(--ss-transition);
+}
+
+.ss-control-btn:hover {
+  background: var(--ss-border);
+}
+
+.ss-control-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ss-control-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* Volume Control */
+.ss-volume-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ss-volume-slider {
+  width: 60px;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--ss-border);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: var(--ss-transition);
+}
+
+.ss-volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  background: var(--ss-primary);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: var(--ss-transition);
+}
+
+.ss-volume-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+.ss-volume-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  background: var(--ss-primary);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Quality Selector */
+.ss-quality-wrapper {
+  position: relative;
+}
+
+.ss-quality-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--ss-border);
+  border: none;
+  border-radius: 4px;
+  color: var(--ss-text);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--ss-transition);
+}
+
+.ss-quality-btn:hover {
+  background: var(--ss-primary);
+}
+
+.ss-quality-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 4px;
+  min-width: 100px;
+  background: var(--ss-bg);
+  border: 1px solid var(--ss-border);
+  border-radius: 6px;
+  box-shadow: var(--ss-shadow);
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  transition: var(--ss-transition);
+}
+
+.ss-quality-menu.ss-open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.ss-quality-option {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  color: var(--ss-text);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  transition: var(--ss-transition);
+}
+
+.ss-quality-option:hover {
+  background: var(--ss-border);
+}
+
+.ss-quality-option.ss-active {
+  color: var(--ss-primary);
+  font-weight: 600;
+}
+
+/* Resize Handles */
+.ss-resize-handle {
+  position: absolute;
+  background: transparent;
+  z-index: 10;
+}
+
+.ss-resize-n {
+  top: 0;
+  left: 10px;
+  right: 10px;
+  height: 6px;
+  cursor: n-resize;
+}
+
+.ss-resize-s {
+  bottom: 0;
+  left: 10px;
+  right: 10px;
+  height: 6px;
+  cursor: s-resize;
+}
+
+.ss-resize-e {
+  top: 10px;
+  right: 0;
+  bottom: 10px;
+  width: 6px;
+  cursor: e-resize;
+}
+
+.ss-resize-w {
+  top: 10px;
+  left: 0;
+  bottom: 10px;
+  width: 6px;
+  cursor: w-resize;
+}
+
+.ss-resize-ne {
+  top: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  cursor: ne-resize;
+}
+
+.ss-resize-nw {
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  cursor: nw-resize;
+}
+
+.ss-resize-se {
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  cursor: se-resize;
+}
+
+.ss-resize-sw {
+  bottom: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  cursor: sw-resize;
+}
+
+/* Animations */
+.ss-widget.ss-entering {
+  animation: ss-enter 0.3s ease-out;
+}
+
+.ss-widget.ss-leaving {
+  animation: ss-leave 0.2s ease-in forwards;
+}
+
+@keyframes ss-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes ss-leave {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+/* No Stream State */
+.ss-no-stream {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--ss-bg);
+  color: var(--ss-text);
+  padding: 20px;
+  text-align: center;
+  gap: 8px;
+}
+
+.ss-no-stream-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--ss-text-secondary);
+  opacity: 0.5;
+}
+
+.ss-no-stream-text {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.ss-no-stream-subtext {
+  font-size: 12px;
+  color: var(--ss-text-secondary);
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .ss-widget {
+    --ss-radius: 0;
+  }
+}
+`;
+    function injectStyles() {
+        if (document.getElementById('streamslice-styles')) {
+            return;
+        }
+        const styleElement = document.createElement('style');
+        styleElement.id = 'streamslice-styles';
+        styleElement.textContent = STYLES;
+        document.head.appendChild(styleElement);
+    }
+    function removeStyles() {
+        const styleElement = document.getElementById('streamslice-styles');
+        if (styleElement) {
+            styleElement.remove();
+        }
+    }
+
+    /**
+     * StreamSlice - Main Widget Class
+     */
+    const DEFAULT_CONFIG = {
+        position: { x: 20, y: 20 },
+        size: { width: 400, height: 280 },
+        minSize: { width: 320, height: 220 },
+        maxSize: { width: 800, height: 600 },
+        autoPlay: true,
+        muted: false,
+        volume: 1,
+        showControls: true,
+        zIndex: 999999,
+        theme: 'dark',
+    };
+    class StreamSlice {
+        constructor(config) {
+            this.floatingWindow = null;
+            this.playerControls = null;
+            this.player = null;
+            this.isInitialized = false;
+            this.playlistUrl = null;
+            this.playerState = {
+                isPlaying: false,
+                isMuted: false,
+                volume: 1,
+                isFullscreen: false,
+                isLoading: true,
+                duration: 0,
+                currentTime: 0,
+                isLive: true,
+                quality: 'Auto',
+                availableQualities: ['Auto'],
+            };
+            if (!config.apiUrl) {
+                throw new Error('StreamSlice: apiUrl is required');
+            }
+            this.config = {
+                ...DEFAULT_CONFIG,
+                ...config,
+                onReady: config.onReady,
+                onPlay: config.onPlay,
+                onPause: config.onPause,
+                onError: config.onError,
+                onClose: config.onClose,
+                onResize: config.onResize,
+                onMove: config.onMove,
+                className: config.className,
+            };
+            this.apiClient = new ApiClient(config.apiUrl);
+            // Set initial player state from config
+            this.playerState.volume = this.config.volume;
+            this.playerState.isMuted = this.config.muted;
+        }
+        /**
+         * Initialize and show the widget
+         */
+        async init() {
+            if (this.isInitialized) {
+                console.warn('StreamSlice: Widget is already initialized');
+                return;
+            }
+            // Inject styles
+            injectStyles();
+            // Get current page URL
+            const pageUrl = window.location.href;
+            // Fetch playlist from API
+            try {
+                const response = await this.apiClient.getPlaylist(pageUrl);
+                if (response.error) {
+                    this.config.onError?.({
+                        code: response.error.code,
+                        message: response.error.error_message_message,
+                    });
+                    // Still show the widget but with error state
+                    this.createWidget();
+                    this.showNoStreamState();
+                    return;
+                }
+                if (response.data?.link) {
+                    this.playlistUrl = response.data.link;
+                }
+                this.createWidget();
+                if (this.playlistUrl) {
+                    await this.loadStream(this.playlistUrl);
+                }
+                else {
+                    this.showNoStreamState();
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                this.config.onError?.({
+                    code: 'INIT_ERROR',
+                    message: errorMessage,
+                });
+                // Show widget with error
+                this.createWidget();
+                this.showNoStreamState();
+            }
+            this.isInitialized = true;
+        }
+        createWidget() {
+            // Create floating window
+            this.floatingWindow = new FloatingWindow({
+                position: this.config.position,
+                size: this.config.size,
+                minSize: this.config.minSize,
+                maxSize: this.config.maxSize,
+                zIndex: this.config.zIndex,
+                theme: this.config.theme,
+                className: this.config.className,
+                onClose: () => this.handleClose(),
+                onResize: (size) => this.config.onResize?.(size),
+                onMove: (position) => this.config.onMove?.(position),
+            });
+            // Create player controls
+            if (this.config.showControls) {
+                this.playerControls = new PlayerControls(this.floatingWindow.getControlsContainer(), {
+                    onPlayPause: () => this.togglePlayPause(),
+                    onMuteToggle: () => this.toggleMute(),
+                    onVolumeChange: (volume) => this.setVolume(volume),
+                    onFullscreenToggle: () => this.toggleFullscreen(),
+                    onQualityChange: (quality) => this.setQuality(quality),
+                });
+                // Update controls with initial state
+                this.playerControls.updateState(this.playerState);
+                this.playerControls.setEnabled(false); // Disabled until stream loads
+            }
+        }
+        async loadStream(url) {
+            if (!this.floatingWindow)
+                return;
+            // Create IVS player
+            this.player = new IVSPlayerWrapper({
+                container: this.floatingWindow.getVideoContainer(),
+                autoPlay: this.config.autoPlay,
+                muted: this.config.muted,
+                volume: this.config.volume,
+                onStateChange: (state) => this.handlePlayerStateChange(state),
+                onError: (error) => this.config.onError?.(error),
+                onReady: () => {
+                    this.playerControls?.setEnabled(true);
+                    this.config.onReady?.();
+                },
+            });
+            // Load the stream
+            await this.player.load(url);
+        }
+        showNoStreamState() {
+            if (!this.floatingWindow)
+                return;
+            this.floatingWindow.showLiveBadge(false);
+            // Show no stream message in video container
+            const videoContainer = this.floatingWindow.getVideoContainer();
+            videoContainer.innerHTML = `
+      <div class="ss-no-stream">
+        <svg class="ss-no-stream-icon" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
+        </svg>
+        <div class="ss-no-stream-text">No stream available</div>
+        <div class="ss-no-stream-subtext">Stream is not active for this page</div>
+      </div>
+    `;
+        }
+        handlePlayerStateChange(state) {
+            this.playerState = { ...this.playerState, ...state };
+            // Update controls
+            this.playerControls?.updateState(this.playerState);
+            // Update live badge
+            if (state.isLive !== undefined) {
+                this.floatingWindow?.showLiveBadge(state.isLive);
+            }
+            // Update available qualities
+            if (state.availableQualities) {
+                this.playerControls?.setAvailableQualities(state.availableQualities);
+            }
+            // Trigger callbacks
+            if (state.isPlaying !== undefined) {
+                if (state.isPlaying) {
+                    this.config.onPlay?.();
+                }
+                else {
+                    this.config.onPause?.();
+                }
+            }
+        }
+        handleClose() {
+            this.destroy();
+            this.config.onClose?.();
+        }
+        /**
+         * Play the stream
+         */
+        play() {
+            this.player?.play();
+        }
+        /**
+         * Pause the stream
+         */
+        pause() {
+            this.player?.pause();
+        }
+        /**
+         * Toggle play/pause
+         */
+        togglePlayPause() {
+            this.player?.togglePlayPause();
+        }
+        /**
+         * Set volume (0-1)
+         */
+        setVolume(volume) {
+            this.player?.setVolume(volume);
+            this.playerState.volume = volume;
+            this.playerControls?.updateState({ volume });
+        }
+        /**
+         * Get current volume
+         */
+        getVolume() {
+            return this.player?.getVolume() ?? this.playerState.volume;
+        }
+        /**
+         * Mute the player
+         */
+        mute() {
+            this.player?.setMuted(true);
+        }
+        /**
+         * Unmute the player
+         */
+        unmute() {
+            this.player?.setMuted(false);
+        }
+        /**
+         * Toggle mute
+         */
+        toggleMute() {
+            this.player?.toggleMute();
+        }
+        /**
+         * Set quality
+         */
+        setQuality(quality) {
+            this.player?.setQuality(quality);
+            this.playerState.quality = quality;
+            this.playerControls?.updateState({ quality });
+        }
+        /**
+         * Get available qualities
+         */
+        getQualities() {
+            return this.player?.getQualities() ?? ['Auto'];
+        }
+        /**
+         * Toggle fullscreen
+         */
+        toggleFullscreen() {
+            this.player?.toggleFullscreen();
+        }
+        /**
+         * Set window position
+         */
+        setPosition(position) {
+            this.floatingWindow?.setPosition(position);
+        }
+        /**
+         * Set window size
+         */
+        setSize(size) {
+            this.floatingWindow?.setSize(size);
+        }
+        /**
+         * Check if widget is initialized
+         */
+        isReady() {
+            return this.isInitialized;
+        }
+        /**
+         * Get current player state
+         */
+        getState() {
+            return { ...this.playerState };
+        }
+        /**
+         * Show the widget
+         */
+        show() {
+            if (this.floatingWindow) {
+                this.floatingWindow.getContainer().style.display = 'flex';
+            }
+        }
+        /**
+         * Hide the widget
+         */
+        hide() {
+            if (this.floatingWindow) {
+                this.floatingWindow.getContainer().style.display = 'none';
+            }
+        }
+        /**
+         * Close and destroy the widget
+         */
+        close() {
+            this.floatingWindow?.close();
+        }
+        /**
+         * Destroy the widget and clean up resources
+         */
+        destroy() {
+            this.player?.destroy();
+            this.playerControls?.destroy();
+            this.floatingWindow?.destroy();
+            this.player = null;
+            this.playerControls = null;
+            this.floatingWindow = null;
+            this.isInitialized = false;
+            // Note: We don't remove styles as other instances might use them
+        }
+        /**
+         * Static method to remove all injected styles
+         */
+        static removeStyles() {
+            removeStyles();
+        }
+    }
+
+    /**
+     * StreamSlice Widget Library
+     *
+     * A floating video player widget with Amazon IVS support
+     */
+
+    exports.StreamSlice = StreamSlice;
+    exports.default = StreamSlice;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=streamslice.js.map