@streamslice/widget 1.0.0

package/dist/streamslice.esm.js

@@ -0,0 +1,1655 @@
+/*!
+ * Widget v1.0.0
+ * Floating video player with Amazon IVS support
+ * Released under the MIT License
+ */
+/**
+ * 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
+ */
+
+export { StreamSlice, StreamSlice as default };
+//# sourceMappingURL=streamslice.esm.js.map