@jaaq/jaaq-sdk-js 1.0.1 → 1.1.0

package/dist/ui/react/index.mjs

@@ -0,0 +1,4735 @@
+import * as React from 'react';
+import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import Hls from 'hls.js';
+
+async function parseJson(res) {
+    if (!res.ok) {
+        const text = await res.text().catch(() => '');
+        throw new Error(`HTTP ${res.status}: ${text || res.statusText}`);
+    }
+    if (res.status === 204)
+        return undefined;
+    return res.json();
+}
+function joinUrl(baseUrl, clientId, path) {
+    // return path if it is an absolute URL
+    if (/^https?:\/\//i.test(path))
+        return path;
+    const base = baseUrl.replace(/\/+$/, '');
+    const relative = path.replace(/^\/+/, '');
+    return `${base}/b2b/v1/subscription/${encodeURIComponent(clientId)}${relative.startsWith('/') ? relative : `/${relative}`}`;
+}
+function createHttpClient(config) {
+    const { baseUrl, apiKey, clientId, fetch: fetchImpl } = config;
+    const f = fetchImpl ?? globalThis.fetch;
+    if (!f) {
+        throw new Error('No fetch implementation found. Provide one in SDKConfig.fetch for Node or custom environments.');
+    }
+    const baseHeaders = {
+        'Content-Type': 'application/json',
+        'x-api-key': apiKey,
+    };
+    const fullUrl = (path) => joinUrl(baseUrl, clientId, path);
+    const request = async (method, path, init, body) => {
+        const reqInit = {
+            method,
+            headers: {
+                ...baseHeaders,
+                ...init?.headers,
+            },
+            ...init,
+        };
+        if (body !== undefined)
+            reqInit.body = JSON.stringify(body);
+        const res = await f(fullUrl(path), reqInit);
+        return parseJson(res);
+    };
+    return {
+        get: (path, init) => request('GET', path, init),
+        post: (path, body, init) => request('POST', path, init, body),
+        put: (path, body, init) => request('PUT', path, init, body),
+        patch: (path, body, init) => request('PATCH', path, init, body),
+        delete: (path, init) => request('DELETE', path, init),
+    };
+}
+
+function createVideosResource(http) {
+    return {
+        async getById(id) {
+            const path = `/videos/${encodeURIComponent(id)}`;
+            const response = await http.get(path);
+            return response.video;
+        },
+    };
+}
+
+function createCollectionsResource(http) {
+    return {
+        async list() {
+            const path = '/collections';
+            const response = await http.get(path);
+            return response.collections;
+        },
+        async getById(id) {
+            const path = `/collections/${encodeURIComponent(id)}`;
+            const response = await http.get(path);
+            return response.collection;
+        },
+    };
+}
+
+const BASE_URL = "https://api.jaaq.app";
+class JaaqClient {
+    // Keep constructor private to enforce controlled instantiation.
+    constructor(http) {
+        this.videos = createVideosResource(http);
+        this.collections = createCollectionsResource(http);
+    }
+    /**
+     * Public "friend" constructor that remains inside the class boundary.
+     * This method is callable from the module-level build function
+     * without exposing `new JaaqClient(...)` to consumers.
+     */
+    static fromHttp(http) {
+        return new JaaqClient(http);
+    }
+    /**
+     * OO-friendly static initializer.
+     * Delegates to the single source of truth: `buildClient`.
+     */
+    static init(config) {
+        return buildClient(config);
+    }
+}
+/**
+ * Canonical factory (idiomatic for JS/TS).
+ * Delegates to the single source of truth: `buildClient`.
+ */
+function createJaaqClient(config) {
+    return buildClient(config);
+}
+/**
+ * Single source of truth for constructing the client.
+ * Both `createJaaqClient` and `JaaqClient.init` call this function.
+ * The constructor stays private; instantiation is funneled via `JaaqClient.fromHttp`.
+ */
+function buildClient(config) {
+    const { baseUrl = BASE_URL, apiKey, clientId, fetch: fetchImpl } = config;
+    const http = createHttpClient({
+        baseUrl,
+        apiKey,
+        clientId,
+        fetch: fetchImpl ?? globalThis.fetch,
+    });
+    return JaaqClient.fromHttp(http);
+}
+
+/**
+ * Formats a time value in seconds to a human-readable string (M:SS format)
+ * @param seconds - Time in seconds to format
+ * @returns Formatted time string in M:SS format, or "0:00" if invalid
+ * @example
+ * formatTime(65) // "1:05"
+ * formatTime(0) // "0:00"
+ * formatTime(125) // "2:05"
+ */
+/**
+ * Checks if a video URL is an HLS (HTTP Live Streaming) source
+ * @param url - Video URL to check
+ * @returns True if the URL contains .m3u8 extension, false otherwise
+ */
+function isHLSSource(url) {
+    return url.includes('.m3u8');
+}
+/**
+ * Toggles fullscreen mode for the given element
+ * If not in fullscreen, requests fullscreen for the element
+ * If already in fullscreen, exits fullscreen mode
+ * @param element - HTML element to toggle fullscreen for
+ * @returns Promise that resolves when fullscreen state changes
+ */
+function toggleFullscreen(element) {
+    if (!document.fullscreenElement) {
+        return element.requestFullscreen();
+    }
+    else {
+        return document.exitFullscreen();
+    }
+}
+/**
+ * Clamps a numeric value between a minimum and maximum value
+ * @param value - Value to clamp
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns The clamped value
+ * @example
+ * clamp(5, 0, 10) // 5
+ * clamp(-5, 0, 10) // 0
+ * clamp(15, 0, 10) // 10
+ */
+function clamp$1(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+
+var sharedStyles = ".jaaq-video-player {\n  position: relative;\n  width: 100%;\n  max-width: none;\n  margin: 0;\n  background: #000;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  aspect-ratio: 9 / 16;\n}\n\n.jaaq-video-player video {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  background: #000;\n  object-fit: cover;\n}\n\n.jaaq-video-player.fullscreen {\n  max-width: 100%;\n  border-radius: 0;\n  aspect-ratio: auto;\n}\n\n.jaaq-controls {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);\n  padding: 40px 16px 16px;\n  opacity: 1;\n  z-index: 5;\n}\n\n.jaaq-progress-bar {\n  width: 100%;\n  flex: 1 1 0;\n  min-width: 80px;\n  height: 4px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 2px;\n  cursor: pointer;\n  position: relative;\n}\n\n.jaaq-progress-filled {\n  height: 100%;\n  background: #007bff;\n  border-radius: 2px;\n  width: 0%;\n  transition: width 0.1s linear;\n}\n\n.jaaq-progress-bar:hover .jaaq-progress-filled {\n  background: #0056b3;\n}\n\n.jaaq-controls-bottom {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  color: white;\n}\n\n.jaaq-control-btn {\n  background: transparent;\n  border: none;\n  color: white;\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s;\n  font-size: 20px;\n  line-height: 1;\n}\n\n.jaaq-control-btn:hover {\n  transform: scale(1.1);\n}\n\n.jaaq-control-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.jaaq-loading {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  height: 50px;\n  border: 4px solid rgba(255, 255, 255, 0.3);\n  border-top-color: #007bff;\n  border-radius: 50%;\n  animation: jaaq-spin 1s linear infinite;\n}\n\n@keyframes jaaq-spin {\n  to {\n    transform: translate(-50%, -50%) rotate(360deg);\n  }\n}\n\n.jaaq-error {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: rgba(220, 53, 69, 0.9);\n  color: white;\n  padding: 16px 24px;\n  border-radius: 8px;\n  max-width: 80%;\n  text-align: center;\n  font-size: 14px;\n}\n\n.jaaq-video-info {\n  padding: 16px;\n  background: #f8f9fa;\n  border-radius: 0 0 12px 12px;\n  margin-top: -12px;\n}\n\n.jaaq-video-info h3 {\n  margin: 0 0 8px 0;\n  color: #333;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.jaaq-video-info p {\n  margin: 4px 0;\n  color: #666;\n  font-size: 14px;\n}\n\n.jaaq-video-info strong {\n  color: #333;\n}\n\n.jaaq-logo {\n  position: absolute;\n  top: 20px;\n  left: 22px;\n  color: white;\n  font-size: 16px;\n  font-weight: 600;\n  z-index: 10;\n  font-family:\n    'Archivo',\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    sans-serif;\n  letter-spacing: 0.5px;\n  pointer-events: none;\n}\n\n.jaaq-center-play-btn {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 84px;\n  height: 84px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  z-index: 15;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s;\n  padding: 0;\n}\n\n.jaaq-center-play-btn:hover {\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n.jaaq-center-play-btn svg {\n  width: 100%;\n  height: 100%;\n  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));\n}\n\n.jaaq-video-player.is-playing .jaaq-center-play-btn {\n  display: none;\n}\n\n.jaaq-gradient-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: linear-gradient(180deg, transparent 0%, #0f0f0f 100%);\n  padding: 80px 22px 85px;\n  pointer-events: none;\n  z-index: 5;\n}\n\n.jaaq-caption-display {\n  font-family:\n    'Archivo',\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    sans-serif;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 20px;\n  color: white;\n  background: rgba(0, 0, 0, 0.8);\n  padding: 8px 16px;\n  margin-bottom: 12px;\n  border-radius: 4px;\n  text-align: center;\n  max-width: 90%;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.jaaq-video-title {\n  font-family:\n    'Archivo',\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    sans-serif;\n  font-weight: 600;\n  font-size: 18.695px;\n  line-height: 21.5px;\n  color: white;\n  margin-bottom: 8px;\n  letter-spacing: 0.37px;\n}\n\n.jaaq-video-author {\n  font-family:\n    'Archivo',\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    sans-serif;\n  font-weight: 500;\n  font-size: 14.021px;\n  line-height: 16.825px;\n  color: white;\n  opacity: 0.7;\n  margin-bottom: 8px;\n  letter-spacing: -0.14px;\n}\n\n.jaaq-video-description {\n  font-family:\n    'Archivo',\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    sans-serif;\n  font-weight: 400;\n  font-size: 11px;\n  line-height: 16px;\n  color: #aaa8aa;\n  letter-spacing: -0.11px;\n}\n\n.jaaq-description-text {\n  color: #aaa8aa;\n}\n\n.jaaq-read-more {\n  color: white;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.jaaq-read-more:hover {\n  text-decoration: underline;\n}\n\n.jaaq-progress-bar {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.jaaq-progress-filled {\n  background: white;\n}\n\n.jaaq-captions-btn {\n  font-size: 14px;\n  font-weight: 600;\n  border: 1.5px solid white;\n  border-radius: 3px;\n  padding: 4px 6px;\n  line-height: 1;\n}\n\n.jaaq-captions-btn.active {\n  background: white;\n  color: #000;\n}\n";
+
+var vanillaStyles = ".jaaq-vanilla-player {\n  user-select: none;\n}\n\n.jaaq-vanilla-player video {\n  outline: none;\n}\n\n.jaaq-collection-player {\n  width: 100%;\n  max-width: 1400px;\n  margin: 0 auto;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n}\n\n.jaaq-collection-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 400px;\n}\n\n.jaaq-collection-spinner {\n  width: 50px;\n  height: 50px;\n  border: 4px solid rgba(0, 123, 255, 0.3);\n  border-top-color: #007bff;\n  border-radius: 50%;\n  animation: jaaq-collection-spin 1s linear infinite;\n}\n\n@keyframes jaaq-collection-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.jaaq-collection-error {\n  background: rgba(220, 53, 69, 0.9);\n  color: white;\n  padding: 16px 24px;\n  border-radius: 8px;\n  text-align: center;\n  font-size: 14px;\n  margin: 20px;\n}\n\n.jaaq-collection-carousel .splide__track {\n  padding: 40px 0;\n}\n\n.jaaq-collection-carousel .splide__slide {\n  opacity: 0.7;\n  transition: all 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.jaaq-collection-carousel .splide__slide.is-active {\n  opacity: 1;\n}\n\n.jaaq-collection-carousel .splide__slide jaaq-video-player {\n  width: 100%;\n  max-width: 600px;\n  transition: all 0.3s ease;\n}\n\n.jaaq-collection-carousel .splide__slide.is-active jaaq-video-player {\n  max-width: 800px;\n}\n\n.jaaq-collection-carousel .splide__arrow {\n  background: rgba(0, 0, 0, 0.5);\n  border: none;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  color: white;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n}\n\n.jaaq-collection-carousel .splide__arrow:hover {\n  background: rgba(0, 0, 0, 0.8);\n  transform: scale(1.1);\n}\n\n.jaaq-collection-carousel .splide__arrow:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.jaaq-collection-carousel .splide__arrow svg {\n  fill: white;\n  width: 20px;\n  height: 20px;\n}\n\n.jaaq-collection-carousel .splide__pagination {\n  bottom: -30px;\n}\n\n.jaaq-collection-carousel .splide__pagination__page {\n  background: #ccc;\n  border: none;\n  width: 10px;\n  height: 10px;\n  margin: 0 4px;\n  border-radius: 50%;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n\n.jaaq-collection-carousel .splide__pagination__page.is-active {\n  background: #007bff;\n  transform: scale(1.3);\n}\n\n@media (max-width: 1024px) {\n  .jaaq-collection-carousel .splide__slide jaaq-video-player {\n    max-width: 500px;\n  }\n\n  .jaaq-collection-carousel .splide__slide.is-active jaaq-video-player {\n    max-width: 650px;\n  }\n}\n\n@media (max-width: 768px) {\n  .jaaq-collection-carousel .splide__track {\n    padding: 20px 0;\n  }\n\n  .jaaq-collection-carousel .splide__slide jaaq-video-player {\n    max-width: 400px;\n  }\n\n  .jaaq-collection-carousel .splide__slide.is-active jaaq-video-player {\n    max-width: 500px;\n  }\n\n  .jaaq-collection-carousel .splide__arrow {\n    width: 40px;\n    height: 40px;\n  }\n}\n\n@media (max-width: 480px) {\n  .jaaq-collection-carousel .splide__slide jaaq-video-player {\n    max-width: 100%;\n  }\n\n  .jaaq-collection-carousel .splide__slide.is-active jaaq-video-player {\n    max-width: 100%;\n  }\n}\n";
+
+class JaaqVideoPlayer {
+    /**
+     * Creates a new video player instance
+     * @param container - HTML element or CSS selector to render the player into
+     * @param config - Player configuration options
+     * @throws {Error} If container element is not found or if authentication credentials are missing
+     */
+    constructor(container, config) {
+        this.client = null;
+        this.hls = null;
+        this.videoElement = null;
+        this.listeners = new Map();
+        this.captionCues = [];
+        this.elements = {};
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        if (!this.container) {
+            throw new Error('Container element not found');
+        }
+        this.config = config;
+        this.state = {
+            isPlaying: false,
+            currentTime: 0,
+            duration: 0,
+            volume: 1,
+            isMuted: false,
+            isFullscreen: false,
+            isLoading: true,
+            error: null,
+            videoData: null,
+            captionsEnabled: false,
+        };
+        if (config.client) {
+            this.client = config.client;
+        }
+        else if (config.apiKey && config.clientId) {
+            this.client = createJaaqClient({
+                apiKey: config.apiKey,
+                clientId: config.clientId,
+                baseUrl: config.baseUrl,
+            });
+        }
+        else {
+            throw new Error('Please provide either a client instance or apiKey and clientId');
+        }
+        this.init();
+    }
+    async init() {
+        this.createDOM();
+        await this.loadVideo();
+        this.attachEventListeners();
+    }
+    createDOM() {
+        this.container.innerHTML = '';
+        const wrapper = document.createElement('div');
+        wrapper.style.width = this.config.width || '100%';
+        wrapper.style.height = this.config.height || 'auto';
+        const player = document.createElement('div');
+        player.className = `jaaq-video-player jaaq-vanilla-player ${this.config.className || ''}`;
+        this.elements.player = player;
+        const video = document.createElement('video');
+        this.videoElement = video;
+        player.appendChild(video);
+        const logo = document.createElement('div');
+        logo.className = 'jaaq-logo';
+        logo.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="50" height="15" viewBox="0 0 50 15" fill="none">
+        <path d="M48.0329 10.7826C48.7578 9.6622 49.1402 8.37108 49.1402 7.02322C49.1402 3.19784 46.0283 0.0859375 42.2029 0.0859375C38.3775 0.0859375 35.2656 3.19784 35.2656 7.02322C35.2656 10.8486 38.3753 13.9578 42.1985 13.9605C42.1991 13.9605 42.2002 13.9605 42.2007 13.9605H42.2029C43.8475 13.9605 45.4305 13.3687 46.6698 12.3285L49.9971 14.56V12.0999L48.0334 10.7826H48.0329ZM37.309 7.02322C37.309 4.32479 39.5045 2.12927 42.2035 2.12927C44.9024 2.12927 47.0974 4.32479 47.0974 7.02322C47.0974 7.96252 46.8345 8.862 46.3359 9.64475L43.9817 8.06561C43.4531 7.71378 42.8373 7.52778 42.2002 7.52778C40.4394 7.52778 39.0054 8.95036 38.9846 10.7062C37.9586 9.80839 37.3084 8.49053 37.3084 7.02322H37.309ZM42.2035 11.9172C42.2035 11.9172 42.2002 11.9172 42.1985 11.9172C41.5527 11.9161 41.0274 11.3903 41.0274 10.7439C41.0274 10.0975 41.5538 9.57056 42.2007 9.57056C42.4331 9.57056 42.6578 9.6382 42.8493 9.76584L44.8714 11.1224C44.0853 11.633 43.1586 11.9172 42.2029 11.9172H42.2035Z" fill="white"/>
+        <path d="M31.0751 0.686201C30.9856 0.579834 30.8858 0.483286 30.7767 0.39983C30.4374 0.138004 30.0283 0 29.5946 0C29.161 0 28.7524 0.138549 28.4126 0.39983C28.2304 0.540561 28.0755 0.711838 27.9533 0.909844C27.8835 1.02276 27.8257 1.14003 27.7815 1.25785L23.1172 13.7317H25.4551L29.5946 2.66135L33.7342 13.7317H36.0721L31.4078 1.25785C31.3303 1.05003 31.218 0.858024 31.0745 0.686746L31.0751 0.686201Z" fill="white"/>
+        <path d="M17.4969 0.686201C17.4075 0.579834 17.3076 0.483286 17.1986 0.39983C16.8593 0.138004 16.4502 0 16.0165 0C15.5829 0 15.1743 0.138549 14.8345 0.39983C14.6523 0.540561 14.4974 0.711838 14.3752 0.909844C14.3054 1.02276 14.2476 1.14003 14.2034 1.25785L9.53906 13.7317H11.8769L16.0165 2.66135L20.1561 13.7317H22.494L17.8302 1.25731C17.7527 1.04948 17.6404 0.857478 17.4969 0.686201Z" fill="white"/>
+        <path d="M9.86046 0.511825V0.371094H7.82204V9.02333C7.82204 10.6248 6.51891 11.928 4.91741 11.928C3.47028 11.928 2.23261 10.849 2.03897 9.41771L2.01988 9.27807L1.88024 9.29716L0.13964 9.5328L0 9.5519L0.0190914 9.69154C0.348555 12.1292 2.45462 13.9669 4.91741 13.9669C7.64313 13.9669 9.86046 11.7496 9.86046 9.02388V0.511825Z" fill="white"/>
+      </svg>
+    `;
+        this.elements.logo = logo;
+        player.appendChild(logo);
+        const centerPlayBtn = document.createElement('button');
+        centerPlayBtn.className = 'jaaq-center-play-btn';
+        centerPlayBtn.innerHTML = `
+      <svg viewBox="0 0 84 84" fill="none">
+        <circle cx="42" cy="42" r="42" fill="white" fill-opacity="0.9"/>
+        <path d="M33 28L56 42L33 56V28Z" fill="#000"/>
+      </svg>
+    `;
+        centerPlayBtn.setAttribute('aria-label', 'Play video');
+        this.elements.centerPlayBtn = centerPlayBtn;
+        player.appendChild(centerPlayBtn);
+        const gradientOverlay = document.createElement('div');
+        gradientOverlay.className = 'jaaq-gradient-overlay';
+        this.elements.gradientOverlay = gradientOverlay;
+        const captionDisplay = document.createElement('div');
+        captionDisplay.className = 'jaaq-caption-display';
+        captionDisplay.style.display = 'none';
+        this.elements.captionDisplay = captionDisplay;
+        gradientOverlay.appendChild(captionDisplay);
+        const videoTitle = document.createElement('div');
+        videoTitle.className = 'jaaq-video-title';
+        this.elements.videoTitle = videoTitle;
+        gradientOverlay.appendChild(videoTitle);
+        const videoAuthor = document.createElement('div');
+        videoAuthor.className = 'jaaq-video-author';
+        this.elements.videoAuthor = videoAuthor;
+        gradientOverlay.appendChild(videoAuthor);
+        const videoDescription = document.createElement('div');
+        videoDescription.className = 'jaaq-video-description';
+        this.elements.videoDescription = videoDescription;
+        gradientOverlay.appendChild(videoDescription);
+        player.appendChild(gradientOverlay);
+        const loading = document.createElement('div');
+        loading.className = 'jaaq-loading';
+        this.elements.loading = loading;
+        player.appendChild(loading);
+        const error = document.createElement('div');
+        error.className = 'jaaq-error';
+        error.style.display = 'none';
+        this.elements.error = error;
+        player.appendChild(error);
+        const controls = document.createElement('div');
+        controls.className = 'jaaq-controls';
+        this.elements.controls = controls;
+        const controlsBottom = document.createElement('div');
+        controlsBottom.className = 'jaaq-controls-bottom';
+        const playPauseBtn = document.createElement('button');
+        playPauseBtn.className = 'jaaq-control-btn';
+        playPauseBtn.textContent = '▶';
+        playPauseBtn.setAttribute('aria-label', 'Play');
+        this.elements.playPauseBtn = playPauseBtn;
+        controlsBottom.appendChild(playPauseBtn);
+        const volumeBtn = document.createElement('button');
+        volumeBtn.className = 'jaaq-control-btn';
+        volumeBtn.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20" fill="none">
+        <path d="M11.2168 19.9287L4.20801 13.7031H0V6.22559H4.20898L11.2168 0V19.9287ZM14.0215 0.150391C16.2405 0.150468 18.1409 1.39074 19.4385 3.17676C20.7365 4.9634 21.499 7.36811 21.499 9.96484C21.499 12.5613 20.7363 14.9654 19.4385 16.752C18.1409 18.538 16.2405 19.7792 14.0215 19.7793V17.1025C15.2032 17.1025 16.3824 16.4464 17.3135 15.165C18.2442 13.8839 18.8593 12.0493 18.8594 9.96484C18.8594 7.88034 18.2442 6.04581 17.3135 4.76465C16.3824 3.4832 15.2033 2.82723 14.0215 2.82715V0.150391ZM14.0215 5.75879C15.5701 5.75896 16.8252 7.64189 16.8252 9.96484C16.8251 12.2877 15.57 14.1707 14.0215 14.1709V5.75879Z" fill="white"/>
+      </svg>
+    `;
+        volumeBtn.setAttribute('aria-label', 'Mute');
+        this.elements.volumeBtn = volumeBtn;
+        controlsBottom.appendChild(volumeBtn);
+        const progressBar = document.createElement('div');
+        progressBar.className = 'jaaq-progress-bar';
+        this.elements.progressBar = progressBar;
+        const progressFilled = document.createElement('div');
+        progressFilled.className = 'jaaq-progress-filled';
+        this.elements.progressFilled = progressFilled;
+        progressBar.appendChild(progressFilled);
+        controlsBottom.appendChild(progressBar);
+        const captionsBtn = document.createElement('button');
+        captionsBtn.className = 'jaaq-control-btn jaaq-captions-btn';
+        captionsBtn.innerHTML = 'CC';
+        captionsBtn.setAttribute('aria-label', 'Captions');
+        this.elements.captionsBtn = captionsBtn;
+        controlsBottom.appendChild(captionsBtn);
+        const fullscreenBtn = document.createElement('button');
+        fullscreenBtn.className = 'jaaq-control-btn';
+        fullscreenBtn.textContent = '⛶';
+        fullscreenBtn.setAttribute('aria-label', 'Fullscreen');
+        this.elements.fullscreenBtn = fullscreenBtn;
+        controlsBottom.appendChild(fullscreenBtn);
+        controls.appendChild(controlsBottom);
+        player.appendChild(controls);
+        wrapper.appendChild(player);
+        this.container.appendChild(wrapper);
+        this.updateControlsVisibility();
+    }
+    updateControlsVisibility() {
+        const showControls = this.config.controls !== false;
+        if (this.elements.controls) {
+            this.elements.controls.style.display = showControls ? '' : 'none';
+        }
+    }
+    async loadVideo() {
+        if (!this.client || !this.videoElement)
+            return;
+        try {
+            this.setState({ isLoading: true, error: null });
+            const video = await this.client.videos.getById(this.config.videoId);
+            this.setState({ videoData: video });
+            if (video.subtitle) {
+                this.captionCues = this.parseWebVTT(video.subtitle);
+            }
+            this.updateOverlayContent(video);
+            this.emit('loaded', video);
+            const videoUrl = video.videoUrl;
+            if (isHLSSource(videoUrl)) {
+                if (Hls.isSupported()) {
+                    if (this.hls) {
+                        this.hls.destroy();
+                    }
+                    const hls = new Hls({
+                        enableWorker: true,
+                        lowLatencyMode: true,
+                    });
+                    hls.loadSource(videoUrl);
+                    hls.attachMedia(this.videoElement);
+                    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                        this.setState({ isLoading: false });
+                        if (this.elements.loading) {
+                            this.elements.loading.style.display = 'none';
+                        }
+                        if (this.config.autoplay) {
+                            this.play();
+                        }
+                    });
+                    hls.on(Hls.Events.ERROR, (_event, data) => {
+                        if (data.fatal) {
+                            const errorMsg = `HLS Error: ${data.type} - ${data.details}`;
+                            this.showError(errorMsg);
+                            this.emit('error', new Error(errorMsg));
+                        }
+                    });
+                    this.hls = hls;
+                }
+                else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
+                    this.videoElement.src = videoUrl;
+                    this.setState({ isLoading: false });
+                    if (this.elements.loading) {
+                        this.elements.loading.style.display = 'none';
+                    }
+                    if (this.config.autoplay) {
+                        this.play();
+                    }
+                }
+                else {
+                    throw new Error('HLS is not supported in this browser');
+                }
+            }
+            else {
+                this.videoElement.src = videoUrl;
+                this.setState({ isLoading: false });
+                if (this.elements.loading) {
+                    this.elements.loading.style.display = 'none';
+                }
+                if (this.config.autoplay) {
+                    this.play();
+                }
+            }
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : 'Failed to load video';
+            this.showError(errorMsg);
+            this.setState({ isLoading: false });
+            this.emit('error', err instanceof Error ? err : new Error(errorMsg));
+        }
+    }
+    parseWebVTT(webvtt) {
+        const cues = [];
+        const lines = webvtt.split('\n');
+        let i = 0;
+        while (i < lines.length) {
+            const line = lines[i].trim();
+            if (line.includes('-->')) {
+                const [startTime, endTime] = line.split('-->').map((t) => t.trim());
+                const parseTimestamp = (timestamp) => {
+                    const parts = timestamp.split(':');
+                    if (parts.length === 3) {
+                        const hours = parseFloat(parts[0]);
+                        const minutes = parseFloat(parts[1]);
+                        const seconds = parseFloat(parts[2]);
+                        return hours * 3600 + minutes * 60 + seconds;
+                    }
+                    else if (parts.length === 2) {
+                        const minutes = parseFloat(parts[0]);
+                        const seconds = parseFloat(parts[1]);
+                        return minutes * 60 + seconds;
+                    }
+                    return 0;
+                };
+                const start = parseTimestamp(startTime);
+                const end = parseTimestamp(endTime);
+                i++;
+                const textLines = [];
+                while (i < lines.length && lines[i].trim() !== '') {
+                    textLines.push(lines[i].trim());
+                    i++;
+                }
+                if (textLines.length > 0) {
+                    cues.push({
+                        start,
+                        end,
+                        text: textLines.join(' '),
+                    });
+                }
+            }
+            i++;
+        }
+        return cues;
+    }
+    updateOverlayContent(video) {
+        const showLogo = this.config.showLogo !== false;
+        const showTitle = this.config.showTitle !== false;
+        const showAuthor = this.config.showAuthor !== false;
+        const showDescription = this.config.showDescription !== false;
+        const showCaptions = this.config.showCaptions !== false;
+        if (this.elements.logo) {
+            this.elements.logo.style.display = showLogo ? 'block' : 'none';
+        }
+        if (this.elements.videoTitle) {
+            this.elements.videoTitle.textContent = video.question || '';
+            this.elements.videoTitle.style.display = showTitle && video.question ? 'block' : 'none';
+        }
+        if (this.elements.videoAuthor) {
+            const authorData = video.author || video.creator || video.userName || '';
+            this.elements.videoAuthor.textContent = authorData;
+            this.elements.videoAuthor.style.display = showAuthor && authorData ? 'block' : 'none';
+        }
+        if (this.elements.videoDescription) {
+            if (video.description) {
+                const maxLength = 150;
+                const truncated = video.description.length > maxLength ? video.description.substring(0, maxLength) + '...' : video.description;
+                this.elements.videoDescription.innerHTML = `
+          <span class="jaaq-description-text">${truncated}</span>
+          ${video.description.length > maxLength ? '<span class="jaaq-read-more">  Read more</span>' : ''}
+        `;
+            }
+            this.elements.videoDescription.style.display = showDescription && video.description ? 'block' : 'none';
+        }
+        if (this.elements.captionsBtn) {
+            this.elements.captionsBtn.style.display = showCaptions ? 'flex' : 'none';
+        }
+    }
+    attachEventListeners() {
+        if (!this.videoElement)
+            return;
+        this.videoElement.addEventListener('play', () => {
+            this.setState({ isPlaying: true });
+            this.updatePlayPauseButton();
+            if (this.elements.centerPlayBtn) {
+                this.elements.centerPlayBtn.style.display = 'none';
+            }
+            this.emit('play', undefined);
+        });
+        this.videoElement.addEventListener('pause', () => {
+            this.setState({ isPlaying: false });
+            this.updatePlayPauseButton();
+            if (this.elements.centerPlayBtn) {
+                this.elements.centerPlayBtn.style.display = 'flex';
+            }
+            this.emit('pause', undefined);
+        });
+        this.videoElement.addEventListener('timeupdate', () => {
+            this.setState({ currentTime: this.videoElement.currentTime });
+            this.updateProgress();
+            this.updateCaptions();
+            this.emit('timeupdate', this.videoElement.currentTime);
+        });
+        this.videoElement.addEventListener('durationchange', () => {
+            this.setState({ duration: this.videoElement.duration });
+        });
+        this.videoElement.addEventListener('volumechange', () => {
+            this.setState({
+                volume: this.videoElement.volume,
+                isMuted: this.videoElement.muted,
+            });
+            this.updateVolumeUI();
+            this.emit('volumechange', this.videoElement.volume);
+        });
+        this.videoElement.addEventListener('ended', () => {
+            this.emit('ended', undefined);
+        });
+        this.elements.playPauseBtn?.addEventListener('click', () => {
+            this.togglePlayPause();
+        });
+        this.elements.centerPlayBtn?.addEventListener('click', () => {
+            this.play();
+            if (this.elements.centerPlayBtn) {
+                this.elements.centerPlayBtn.style.display = 'none';
+            }
+        });
+        this.elements.progressBar?.addEventListener('click', (e) => {
+            this.handleSeek(e);
+        });
+        this.elements.volumeBtn?.addEventListener('click', () => {
+            this.toggleMute();
+        });
+        this.elements.captionsBtn?.addEventListener('click', () => {
+            this.toggleCaptions();
+        });
+        this.elements.fullscreenBtn?.addEventListener('click', () => {
+            this.toggleFullscreen();
+        });
+        document.addEventListener('fullscreenchange', () => {
+            const isFullscreen = !!document.fullscreenElement;
+            this.setState({ isFullscreen });
+            this.elements.player?.classList.toggle('fullscreen', isFullscreen);
+            this.emit('fullscreenchange', isFullscreen);
+        });
+        this.elements.player?.addEventListener('mousemove', () => {
+            this.elements.player?.classList.remove('is-paused');
+        });
+        this.videoElement.addEventListener('pause', () => {
+            this.elements.player?.classList.add('is-paused');
+        });
+        this.videoElement.addEventListener('play', () => {
+            this.elements.player?.classList.remove('is-paused');
+        });
+    }
+    setState(newState) {
+        this.state = { ...this.state, ...newState };
+    }
+    updatePlayPauseButton() {
+        if (this.elements.playPauseBtn) {
+            this.elements.playPauseBtn.textContent = this.state.isPlaying ? '⏸' : '▶';
+            this.elements.playPauseBtn.setAttribute('aria-label', this.state.isPlaying ? 'Pause' : 'Play');
+        }
+    }
+    updateProgress() {
+        if (this.elements.progressFilled && this.state.duration > 0) {
+            const progress = (this.state.currentTime / this.state.duration) * 100;
+            this.elements.progressFilled.style.width = `${progress}%`;
+        }
+    }
+    updateVolumeUI() {
+        if (this.elements.volumeBtn) {
+            const { isMuted, volume } = this.state;
+            if (isMuted || volume === 0) {
+                this.elements.volumeBtn.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20" fill="none">
+            <path d="M11.2168 19.9287L4.20801 13.7031H0V6.22559H4.20898L11.2168 0V19.9287Z" fill="white"/>
+          </svg>
+        `;
+            }
+            else {
+                this.elements.volumeBtn.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20" fill="none">
+            <path d="M11.2168 19.9287L4.20801 13.7031H0V6.22559H4.20898L11.2168 0V19.9287ZM14.0215 0.150391C16.2405 0.150468 18.1409 1.39074 19.4385 3.17676C20.7365 4.9634 21.499 7.36811 21.499 9.96484C21.499 12.5613 20.7363 14.9654 19.4385 16.752C18.1409 18.538 16.2405 19.7792 14.0215 19.7793V17.1025C15.2032 17.1025 16.3824 16.4464 17.3135 15.165C18.2442 13.8839 18.8593 12.0493 18.8594 9.96484C18.8594 7.88034 18.2442 6.04581 17.3135 4.76465C16.3824 3.4832 15.2033 2.82723 14.0215 2.82715V0.150391ZM14.0215 5.75879C15.5701 5.75896 16.8252 7.64189 16.8252 9.96484C16.8251 12.2877 15.57 14.1707 14.0215 14.1709V5.75879Z" fill="white"/>
+          </svg>
+        `;
+            }
+        }
+    }
+    updateCaptions() {
+        if (!this.elements.captionDisplay || !this.state.captionsEnabled) {
+            if (this.elements.captionDisplay) {
+                this.elements.captionDisplay.style.display = 'none';
+            }
+            return;
+        }
+        const currentTime = this.state.currentTime;
+        const currentCue = this.captionCues.find((cue) => currentTime >= cue.start && currentTime <= cue.end);
+        if (currentCue) {
+            this.elements.captionDisplay.textContent = currentCue.text;
+            this.elements.captionDisplay.style.display = 'block';
+        }
+        else {
+            this.elements.captionDisplay.style.display = 'none';
+        }
+    }
+    handleSeek(e) {
+        if (!this.videoElement || !this.state.duration || !this.elements.progressBar)
+            return;
+        const rect = this.elements.progressBar.getBoundingClientRect();
+        const percent = (e.clientX - rect.left) / rect.width;
+        this.videoElement.currentTime = this.state.duration * clamp$1(percent, 0, 1);
+    }
+    showError(message) {
+        this.setState({ error: message, isLoading: false });
+        if (this.elements.error) {
+            this.elements.error.textContent = message;
+            this.elements.error.style.display = 'block';
+        }
+        if (this.elements.loading) {
+            this.elements.loading.style.display = 'none';
+        }
+    }
+    togglePlayPause() {
+        if (this.state.isPlaying) {
+            this.pause();
+        }
+        else {
+            this.play();
+        }
+    }
+    toggleCaptions() {
+        this.setState({ captionsEnabled: !this.state.captionsEnabled });
+        this.updateCaptionsButton();
+        this.updateCaptions();
+    }
+    updateCaptionsButton() {
+        if (this.elements.captionsBtn) {
+            if (this.state.captionsEnabled) {
+                this.elements.captionsBtn.classList.add('active');
+            }
+            else {
+                this.elements.captionsBtn.classList.remove('active');
+            }
+        }
+    }
+    toggleFullscreen() {
+        if (this.elements.player) {
+            toggleFullscreen(this.elements.player);
+        }
+    }
+    /**
+     * Starts or resumes video playback
+     */
+    play() {
+        this.videoElement?.play();
+    }
+    /**
+     * Pauses video playback
+     */
+    pause() {
+        this.videoElement?.pause();
+    }
+    /**
+     * Sets the playback volume
+     * @param volume - Volume level between 0 (silent) and 1 (maximum)
+     */
+    setVolume(volume) {
+        if (this.videoElement) {
+            this.videoElement.volume = clamp$1(volume, 0, 1);
+            this.videoElement.muted = volume === 0;
+        }
+    }
+    /**
+     * Toggles audio mute state
+     */
+    toggleMute() {
+        if (this.videoElement) {
+            this.videoElement.muted = !this.videoElement.muted;
+        }
+    }
+    /**
+     * Seeks to a specific time in the video
+     * @param time - Target time in seconds
+     */
+    seek(time) {
+        if (this.videoElement) {
+            this.videoElement.currentTime = clamp$1(time, 0, this.state.duration);
+        }
+    }
+    setFeatures(features) {
+        this.config = { ...this.config, ...features };
+        if (features.controls !== undefined) {
+            this.updateControlsVisibility();
+        }
+        if (this.state.videoData) {
+            this.updateOverlayContent(this.state.videoData);
+        }
+        else {
+            if (features.showLogo !== undefined && this.elements.logo) {
+                this.elements.logo.style.display = features.showLogo ? 'block' : 'none';
+            }
+            if (features.showCaptions !== undefined && this.elements.captionsBtn) {
+                this.elements.captionsBtn.style.display = features.showCaptions ? 'flex' : 'none';
+            }
+        }
+    }
+    /**
+     * Returns a copy of the current player state
+     * @returns Current player state object
+     */
+    getState() {
+        return { ...this.state };
+    }
+    /**
+     * Registers an event listener for player events
+     * @param event - Event name to listen for
+     * @param callback - Function to call when event fires
+     */
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(callback);
+    }
+    /**
+     * Removes an event listener for player events
+     * @param event - Event name to stop listening for
+     * @param callback - Function to remove from listeners
+     */
+    off(event, callback) {
+        const callbacks = this.listeners.get(event);
+        if (callbacks) {
+            callbacks.delete(callback);
+        }
+    }
+    emit(event, data) {
+        const callbacks = this.listeners.get(event);
+        if (callbacks) {
+            callbacks.forEach((callback) => callback(data));
+        }
+    }
+    /**
+     * Destroys the player instance and cleans up resources
+     * Removes all event listeners, stops playback, and clears the DOM
+     */
+    destroy() {
+        if (this.hls) {
+            this.hls.destroy();
+            this.hls = null;
+        }
+        if (this.videoElement) {
+            this.videoElement.pause();
+            this.videoElement.src = '';
+            this.videoElement = null;
+        }
+        this.listeners.clear();
+        this.container.innerHTML = '';
+    }
+}
+
+const COMPONENT_STYLES$1 = `
+:host {
+  display: block;
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+/**
+ * Custom web component for JAAQ video player with Shadow DOM encapsulation
+ * Provides a framework-agnostic video player with custom controls and HLS support
+ *
+ * @example
+ * // Declarative usage
+ * <jaaq-video-player
+ *   video-id="video-123"
+ *   api-key="key"
+ *   client-id="client"
+ *   autoplay="false">
+ * </jaaq-video-player>
+ *
+ * @example
+ * // Programmatic usage
+ * const player = document.createElement('jaaq-video-player');
+ * player.setAttribute('video-id', 'video-123');
+ * player.addEventListener('jaaq:play', () => console.log('Playing'));
+ * document.body.appendChild(player);
+ */
+class JaaqVideoPlayerElement extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            'video-id',
+            'api-key',
+            'client-id',
+            'autoplay',
+            'base-url',
+            'width',
+            'height',
+            'controls',
+            'show-logo',
+            'show-title',
+            'show-author',
+            'show-description',
+            'show-captions',
+        ];
+    }
+    constructor() {
+        super();
+        this.player = null;
+        this.container = null;
+        this.clientInstance = null;
+        this.connected = false;
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this.connected = true;
+        this.render();
+        this.initPlayer();
+    }
+    disconnectedCallback() {
+        this.connected = false;
+        this.destroyPlayer();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (!this.connected || oldValue === newValue)
+            return;
+        if (name === 'video-id' && this.player) {
+            this.destroyPlayer();
+            this.initPlayer();
+        }
+        else if (name === 'width' || name === 'height') {
+            this.updateContainerStyles();
+        }
+        else if (name === 'controls' ||
+            name === 'show-logo' ||
+            name === 'show-title' ||
+            name === 'show-author' ||
+            name === 'show-description' ||
+            name === 'show-captions') {
+            if (this.player) {
+                const features = {};
+                if (name === 'controls') {
+                    features.controls = !this.hasAttribute('controls') || this.getAttribute('controls') !== 'false';
+                }
+                else if (name === 'show-logo') {
+                    features.showLogo = !this.hasAttribute('show-logo') || this.getAttribute('show-logo') !== 'false';
+                }
+                else if (name === 'show-title') {
+                    features.showTitle = !this.hasAttribute('show-title') || this.getAttribute('show-title') !== 'false';
+                }
+                else if (name === 'show-author') {
+                    features.showAuthor = !this.hasAttribute('show-author') || this.getAttribute('show-author') !== 'false';
+                }
+                else if (name === 'show-description') {
+                    features.showDescription = !this.hasAttribute('show-description') || this.getAttribute('show-description') !== 'false';
+                }
+                else if (name === 'show-captions') {
+                    features.showCaptions = !this.hasAttribute('show-captions') || this.getAttribute('show-captions') !== 'false';
+                }
+                this.player.setFeatures(features);
+            }
+        }
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const styleSheet = document.createElement('style');
+        styleSheet.textContent = `
+      ${sharedStyles}
+      ${vanillaStyles}
+      ${COMPONENT_STYLES$1}
+    `;
+        this.container = document.createElement('div');
+        this.container.className = 'jaaq-webcomponent-container';
+        this.shadowRoot.appendChild(styleSheet);
+        this.shadowRoot.appendChild(this.container);
+        this.updateContainerStyles();
+    }
+    updateContainerStyles() {
+        if (!this.container)
+            return;
+        const width = this.getAttribute('width') || '100%';
+        const height = this.getAttribute('height') || 'auto';
+        this.container.style.width = width;
+        this.container.style.height = height;
+    }
+    async initPlayer() {
+        if (!this.container || this.player)
+            return;
+        const videoId = this.getAttribute('video-id');
+        if (!videoId) {
+            this.emitError(new Error('video-id attribute is required'));
+            return;
+        }
+        const apiKey = this.getAttribute('api-key');
+        const clientId = this.getAttribute('client-id');
+        const baseUrl = this.getAttribute('base-url') || undefined;
+        const autoplay = this.hasAttribute('autoplay') && this.getAttribute('autoplay') !== 'false';
+        const controls = !this.hasAttribute('controls') || this.getAttribute('controls') !== 'false';
+        const showLogo = !this.hasAttribute('show-logo') || this.getAttribute('show-logo') !== 'false';
+        const showTitle = !this.hasAttribute('show-title') || this.getAttribute('show-title') !== 'false';
+        const showAuthor = !this.hasAttribute('show-author') || this.getAttribute('show-author') !== 'false';
+        const showDescription = !this.hasAttribute('show-description') || this.getAttribute('show-description') !== 'false';
+        const showCaptions = !this.hasAttribute('show-captions') || this.getAttribute('show-captions') !== 'false';
+        if (!this.clientInstance && !apiKey && !clientId) {
+            this.emitError(new Error('Either client property or api-key and client-id attributes are required'));
+            return;
+        }
+        try {
+            this.player = new JaaqVideoPlayer(this.container, {
+                videoId: videoId ?? undefined,
+                apiKey: apiKey ?? undefined,
+                clientId: clientId ?? undefined,
+                client: this.clientInstance || undefined,
+                baseUrl,
+                autoplay,
+                controls,
+                showLogo,
+                showTitle,
+                showAuthor,
+                showDescription,
+                showCaptions,
+            });
+            this.attachPlayerEvents();
+        }
+        catch (error) {
+            this.emitError(error instanceof Error ? error : new Error('Failed to initialize player'));
+        }
+    }
+    attachPlayerEvents() {
+        if (!this.player)
+            return;
+        this.player.on('loaded', (video) => {
+            this.dispatchEvent(new CustomEvent('jaaq:loaded', {
+                detail: video,
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        this.player.on('play', () => {
+            this.dispatchEvent(new CustomEvent('jaaq:play', {
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        this.player.on('pause', () => {
+            this.dispatchEvent(new CustomEvent('jaaq:pause', {
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        this.player.on('timeupdate', (time) => {
+            this.dispatchEvent(new CustomEvent('jaaq:timeupdate', {
+                detail: time,
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        this.player.on('volumechange', (volume) => {
+            this.dispatchEvent(new CustomEvent('jaaq:volumechange', {
+                detail: volume,
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        this.player.on('ended', () => {
+            this.dispatchEvent(new CustomEvent('jaaq:ended', {
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        this.player.on('error', (error) => {
+            this.emitError(error);
+        });
+        this.player.on('fullscreenchange', (isFullscreen) => {
+            this.dispatchEvent(new CustomEvent('jaaq:fullscreenchange', {
+                detail: isFullscreen,
+                bubbles: true,
+                composed: true,
+            }));
+        });
+    }
+    emitError(error) {
+        this.dispatchEvent(new CustomEvent('jaaq:error', {
+            detail: error,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    destroyPlayer() {
+        if (this.player) {
+            this.player.destroy();
+            this.player = null;
+        }
+    }
+    /**
+     * Gets the current JaaqClient instance
+     */
+    get client() {
+        return this.clientInstance;
+    }
+    /**
+     * Sets a JaaqClient instance for the player to use
+     * Reinitializes the player if already connected
+     */
+    set client(value) {
+        this.clientInstance = value;
+        if (this.connected) {
+            this.destroyPlayer();
+            this.initPlayer();
+        }
+    }
+    /**
+     * Gets the current video ID
+     */
+    get videoId() {
+        return this.getAttribute('video-id');
+    }
+    /**
+     * Sets the video ID
+     * Updates the video-id attribute and triggers player reinitialization
+     */
+    set videoId(value) {
+        if (value) {
+            this.setAttribute('video-id', value);
+        }
+        else {
+            this.removeAttribute('video-id');
+        }
+    }
+    /**
+     * Starts or resumes video playback
+     */
+    play() {
+        this.player?.play();
+    }
+    /**
+     * Pauses video playback
+     */
+    pause() {
+        this.player?.pause();
+    }
+    /**
+     * Sets the playback volume
+     * @param volume - Volume level between 0 (silent) and 1 (maximum)
+     */
+    setVolume(volume) {
+        this.player?.setVolume(volume);
+    }
+    /**
+     * Toggles audio mute state
+     */
+    toggleMute() {
+        this.player?.toggleMute();
+    }
+    /**
+     * Seeks to a specific time in the video
+     * @param time - Target time in seconds
+     */
+    seek(time) {
+        this.player?.seek(time);
+    }
+    /**
+     * Returns the current player state
+     * @returns Current player state object or null if player not initialized
+     */
+    getState() {
+        return this.player?.getState() || null;
+    }
+    /**
+     * Destroys the player instance and cleans up resources
+     */
+    destroy() {
+        this.destroyPlayer();
+    }
+}
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+/*!
+ * Splide.js
+ * Version  : 4.1.4
+ * License  : MIT
+ * Copyright: 2022 Naotoshi Fujita
+ */
+var MEDIA_PREFERS_REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+var CREATED = 1;
+var MOUNTED = 2;
+var IDLE = 3;
+var MOVING = 4;
+var SCROLLING = 5;
+var DRAGGING = 6;
+var DESTROYED = 7;
+var STATES = {
+  CREATED: CREATED,
+  MOUNTED: MOUNTED,
+  IDLE: IDLE,
+  MOVING: MOVING,
+  SCROLLING: SCROLLING,
+  DRAGGING: DRAGGING,
+  DESTROYED: DESTROYED
+};
+
+function empty(array) {
+  array.length = 0;
+}
+
+function slice(arrayLike, start, end) {
+  return Array.prototype.slice.call(arrayLike, start, end);
+}
+
+function apply(func) {
+  return func.bind.apply(func, [null].concat(slice(arguments, 1)));
+}
+
+var nextTick = setTimeout;
+
+var noop = function noop() {};
+
+function raf(func) {
+  return requestAnimationFrame(func);
+}
+
+function typeOf(type, subject) {
+  return typeof subject === type;
+}
+
+function isObject(subject) {
+  return !isNull(subject) && typeOf("object", subject);
+}
+
+var isArray = Array.isArray;
+var isFunction = apply(typeOf, "function");
+var isString = apply(typeOf, "string");
+var isUndefined = apply(typeOf, "undefined");
+
+function isNull(subject) {
+  return subject === null;
+}
+
+function isHTMLElement(subject) {
+  try {
+    return subject instanceof (subject.ownerDocument.defaultView || window).HTMLElement;
+  } catch (e) {
+    return false;
+  }
+}
+
+function toArray(value) {
+  return isArray(value) ? value : [value];
+}
+
+function forEach(values, iteratee) {
+  toArray(values).forEach(iteratee);
+}
+
+function includes(array, value) {
+  return array.indexOf(value) > -1;
+}
+
+function push(array, items) {
+  array.push.apply(array, toArray(items));
+  return array;
+}
+
+function toggleClass(elm, classes, add) {
+  if (elm) {
+    forEach(classes, function (name) {
+      if (name) {
+        elm.classList[add ? "add" : "remove"](name);
+      }
+    });
+  }
+}
+
+function addClass(elm, classes) {
+  toggleClass(elm, isString(classes) ? classes.split(" ") : classes, true);
+}
+
+function append(parent, children) {
+  forEach(children, parent.appendChild.bind(parent));
+}
+
+function before(nodes, ref) {
+  forEach(nodes, function (node) {
+    var parent = (ref || node).parentNode;
+
+    if (parent) {
+      parent.insertBefore(node, ref);
+    }
+  });
+}
+
+function matches(elm, selector) {
+  return isHTMLElement(elm) && (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
+}
+
+function children(parent, selector) {
+  var children2 = parent ? slice(parent.children) : [];
+  return selector ? children2.filter(function (child) {
+    return matches(child, selector);
+  }) : children2;
+}
+
+function child(parent, selector) {
+  return selector ? children(parent, selector)[0] : parent.firstElementChild;
+}
+
+var ownKeys = Object.keys;
+
+function forOwn(object, iteratee, right) {
+  if (object) {
+    (right ? ownKeys(object).reverse() : ownKeys(object)).forEach(function (key) {
+      key !== "__proto__" && iteratee(object[key], key);
+    });
+  }
+
+  return object;
+}
+
+function assign(object) {
+  slice(arguments, 1).forEach(function (source) {
+    forOwn(source, function (value, key) {
+      object[key] = source[key];
+    });
+  });
+  return object;
+}
+
+function merge(object) {
+  slice(arguments, 1).forEach(function (source) {
+    forOwn(source, function (value, key) {
+      if (isArray(value)) {
+        object[key] = value.slice();
+      } else if (isObject(value)) {
+        object[key] = merge({}, isObject(object[key]) ? object[key] : {}, value);
+      } else {
+        object[key] = value;
+      }
+    });
+  });
+  return object;
+}
+
+function omit(object, keys) {
+  forEach(keys || ownKeys(object), function (key) {
+    delete object[key];
+  });
+}
+
+function removeAttribute(elms, attrs) {
+  forEach(elms, function (elm) {
+    forEach(attrs, function (attr) {
+      elm && elm.removeAttribute(attr);
+    });
+  });
+}
+
+function setAttribute(elms, attrs, value) {
+  if (isObject(attrs)) {
+    forOwn(attrs, function (value2, name) {
+      setAttribute(elms, name, value2);
+    });
+  } else {
+    forEach(elms, function (elm) {
+      isNull(value) || value === "" ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+    });
+  }
+}
+
+function create(tag, attrs, parent) {
+  var elm = document.createElement(tag);
+
+  if (attrs) {
+    isString(attrs) ? addClass(elm, attrs) : setAttribute(elm, attrs);
+  }
+
+  parent && append(parent, elm);
+  return elm;
+}
+
+function style(elm, prop, value) {
+  if (isUndefined(value)) {
+    return getComputedStyle(elm)[prop];
+  }
+
+  if (!isNull(value)) {
+    elm.style[prop] = "" + value;
+  }
+}
+
+function display(elm, display2) {
+  style(elm, "display", display2);
+}
+
+function focus(elm) {
+  elm["setActive"] && elm["setActive"]() || elm.focus({
+    preventScroll: true
+  });
+}
+
+function getAttribute(elm, attr) {
+  return elm.getAttribute(attr);
+}
+
+function hasClass(elm, className) {
+  return elm && elm.classList.contains(className);
+}
+
+function rect(target) {
+  return target.getBoundingClientRect();
+}
+
+function remove(nodes) {
+  forEach(nodes, function (node) {
+    if (node && node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+  });
+}
+
+function parseHtml(html) {
+  return child(new DOMParser().parseFromString(html, "text/html").body);
+}
+
+function prevent(e, stopPropagation) {
+  e.preventDefault();
+
+  if (stopPropagation) {
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+  }
+}
+
+function query(parent, selector) {
+  return parent && parent.querySelector(selector);
+}
+
+function queryAll(parent, selector) {
+  return selector ? slice(parent.querySelectorAll(selector)) : [];
+}
+
+function removeClass(elm, classes) {
+  toggleClass(elm, classes, false);
+}
+
+function timeOf(e) {
+  return e.timeStamp;
+}
+
+function unit(value) {
+  return isString(value) ? value : value ? value + "px" : "";
+}
+
+var PROJECT_CODE = "splide";
+var DATA_ATTRIBUTE = "data-" + PROJECT_CODE;
+
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error("[" + PROJECT_CODE + "] " + (message || ""));
+  }
+}
+
+var min = Math.min,
+    max = Math.max,
+    floor = Math.floor,
+    ceil = Math.ceil,
+    abs = Math.abs;
+
+function approximatelyEqual(x, y, epsilon) {
+  return abs(x - y) < epsilon;
+}
+
+function between(number, x, y, exclusive) {
+  var minimum = min(x, y);
+  var maximum = max(x, y);
+  return exclusive ? minimum < number && number < maximum : minimum <= number && number <= maximum;
+}
+
+function clamp(number, x, y) {
+  var minimum = min(x, y);
+  var maximum = max(x, y);
+  return min(max(minimum, number), maximum);
+}
+
+function sign(x) {
+  return +(x > 0) - +(x < 0);
+}
+
+function format(string, replacements) {
+  forEach(replacements, function (replacement) {
+    string = string.replace("%s", "" + replacement);
+  });
+  return string;
+}
+
+function pad(number) {
+  return number < 10 ? "0" + number : "" + number;
+}
+
+var ids = {};
+
+function uniqueId(prefix) {
+  return "" + prefix + pad(ids[prefix] = (ids[prefix] || 0) + 1);
+}
+
+function EventBinder() {
+  var listeners = [];
+
+  function bind(targets, events, callback, options) {
+    forEachEvent(targets, events, function (target, event, namespace) {
+      var isEventTarget = ("addEventListener" in target);
+      var remover = isEventTarget ? target.removeEventListener.bind(target, event, callback, options) : target["removeListener"].bind(target, callback);
+      isEventTarget ? target.addEventListener(event, callback, options) : target["addListener"](callback);
+      listeners.push([target, event, namespace, callback, remover]);
+    });
+  }
+
+  function unbind(targets, events, callback) {
+    forEachEvent(targets, events, function (target, event, namespace) {
+      listeners = listeners.filter(function (listener) {
+        if (listener[0] === target && listener[1] === event && listener[2] === namespace && (!callback || listener[3] === callback)) {
+          listener[4]();
+          return false;
+        }
+
+        return true;
+      });
+    });
+  }
+
+  function dispatch(target, type, detail) {
+    var e;
+    var bubbles = true;
+
+    if (typeof CustomEvent === "function") {
+      e = new CustomEvent(type, {
+        bubbles: bubbles,
+        detail: detail
+      });
+    } else {
+      e = document.createEvent("CustomEvent");
+      e.initCustomEvent(type, bubbles, false, detail);
+    }
+
+    target.dispatchEvent(e);
+    return e;
+  }
+
+  function forEachEvent(targets, events, iteratee) {
+    forEach(targets, function (target) {
+      target && forEach(events, function (events2) {
+        events2.split(" ").forEach(function (eventNS) {
+          var fragment = eventNS.split(".");
+          iteratee(target, fragment[0], fragment[1]);
+        });
+      });
+    });
+  }
+
+  function destroy() {
+    listeners.forEach(function (data) {
+      data[4]();
+    });
+    empty(listeners);
+  }
+
+  return {
+    bind: bind,
+    unbind: unbind,
+    dispatch: dispatch,
+    destroy: destroy
+  };
+}
+
+var EVENT_MOUNTED = "mounted";
+var EVENT_READY = "ready";
+var EVENT_MOVE = "move";
+var EVENT_MOVED = "moved";
+var EVENT_CLICK = "click";
+var EVENT_ACTIVE = "active";
+var EVENT_INACTIVE = "inactive";
+var EVENT_VISIBLE = "visible";
+var EVENT_HIDDEN = "hidden";
+var EVENT_REFRESH = "refresh";
+var EVENT_UPDATED = "updated";
+var EVENT_RESIZE = "resize";
+var EVENT_RESIZED = "resized";
+var EVENT_DRAG = "drag";
+var EVENT_DRAGGING = "dragging";
+var EVENT_DRAGGED = "dragged";
+var EVENT_SCROLL = "scroll";
+var EVENT_SCROLLED = "scrolled";
+var EVENT_OVERFLOW = "overflow";
+var EVENT_DESTROY = "destroy";
+var EVENT_ARROWS_MOUNTED = "arrows:mounted";
+var EVENT_ARROWS_UPDATED = "arrows:updated";
+var EVENT_PAGINATION_MOUNTED = "pagination:mounted";
+var EVENT_PAGINATION_UPDATED = "pagination:updated";
+var EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
+var EVENT_AUTOPLAY_PLAY = "autoplay:play";
+var EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
+var EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
+var EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
+var EVENT_SLIDE_KEYDOWN = "sk";
+var EVENT_SHIFTED = "sh";
+var EVENT_END_INDEX_CHANGED = "ei";
+
+function EventInterface(Splide2) {
+  var bus = Splide2 ? Splide2.event.bus : document.createDocumentFragment();
+  var binder = EventBinder();
+
+  function on(events, callback) {
+    binder.bind(bus, toArray(events).join(" "), function (e) {
+      callback.apply(callback, isArray(e.detail) ? e.detail : []);
+    });
+  }
+
+  function emit(event) {
+    binder.dispatch(bus, event, slice(arguments, 1));
+  }
+
+  if (Splide2) {
+    Splide2.event.on(EVENT_DESTROY, binder.destroy);
+  }
+
+  return assign(binder, {
+    bus: bus,
+    on: on,
+    off: apply(binder.unbind, bus),
+    emit: emit
+  });
+}
+
+function RequestInterval(interval, onInterval, onUpdate, limit) {
+  var now = Date.now;
+  var startTime;
+  var rate = 0;
+  var id;
+  var paused = true;
+  var count = 0;
+
+  function update() {
+    if (!paused) {
+      rate = interval ? min((now() - startTime) / interval, 1) : 1;
+      onUpdate && onUpdate(rate);
+
+      if (rate >= 1) {
+        onInterval();
+        startTime = now();
+
+        if (limit && ++count >= limit) {
+          return pause();
+        }
+      }
+
+      id = raf(update);
+    }
+  }
+
+  function start(resume) {
+    resume || cancel();
+    startTime = now() - (resume ? rate * interval : 0);
+    paused = false;
+    id = raf(update);
+  }
+
+  function pause() {
+    paused = true;
+  }
+
+  function rewind() {
+    startTime = now();
+    rate = 0;
+
+    if (onUpdate) {
+      onUpdate(rate);
+    }
+  }
+
+  function cancel() {
+    id && cancelAnimationFrame(id);
+    rate = 0;
+    id = 0;
+    paused = true;
+  }
+
+  function set(time) {
+    interval = time;
+  }
+
+  function isPaused() {
+    return paused;
+  }
+
+  return {
+    start: start,
+    rewind: rewind,
+    pause: pause,
+    cancel: cancel,
+    set: set,
+    isPaused: isPaused
+  };
+}
+
+function State(initialState) {
+  var state = initialState;
+
+  function set(value) {
+    state = value;
+  }
+
+  function is(states) {
+    return includes(toArray(states), state);
+  }
+
+  return {
+    set: set,
+    is: is
+  };
+}
+
+function Throttle(func, duration) {
+  var interval = RequestInterval(0, func, null, 1);
+  return function () {
+    interval.isPaused() && interval.start();
+  };
+}
+
+function Media(Splide2, Components2, options) {
+  var state = Splide2.state;
+  var breakpoints = options.breakpoints || {};
+  var reducedMotion = options.reducedMotion || {};
+  var binder = EventBinder();
+  var queries = [];
+
+  function setup() {
+    var isMin = options.mediaQuery === "min";
+    ownKeys(breakpoints).sort(function (n, m) {
+      return isMin ? +n - +m : +m - +n;
+    }).forEach(function (key) {
+      register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
+    });
+    register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);
+    update();
+  }
+
+  function destroy(completely) {
+    if (completely) {
+      binder.destroy();
+    }
+  }
+
+  function register(options2, query) {
+    var queryList = matchMedia(query);
+    binder.bind(queryList, "change", update);
+    queries.push([options2, queryList]);
+  }
+
+  function update() {
+    var destroyed = state.is(DESTROYED);
+    var direction = options.direction;
+    var merged = queries.reduce(function (merged2, entry) {
+      return merge(merged2, entry[1].matches ? entry[0] : {});
+    }, {});
+    omit(options);
+    set(merged);
+
+    if (options.destroy) {
+      Splide2.destroy(options.destroy === "completely");
+    } else if (destroyed) {
+      destroy(true);
+      Splide2.mount();
+    } else {
+      direction !== options.direction && Splide2.refresh();
+    }
+  }
+
+  function reduce(enable) {
+    if (matchMedia(MEDIA_PREFERS_REDUCED_MOTION).matches) {
+      enable ? merge(options, reducedMotion) : omit(options, ownKeys(reducedMotion));
+    }
+  }
+
+  function set(opts, base, notify) {
+    merge(options, opts);
+    base && merge(Object.getPrototypeOf(options), opts);
+
+    if (notify || !state.is(CREATED)) {
+      Splide2.emit(EVENT_UPDATED, options);
+    }
+  }
+
+  return {
+    setup: setup,
+    destroy: destroy,
+    reduce: reduce,
+    set: set
+  };
+}
+
+var ARROW = "Arrow";
+var ARROW_LEFT = ARROW + "Left";
+var ARROW_RIGHT = ARROW + "Right";
+var ARROW_UP = ARROW + "Up";
+var ARROW_DOWN = ARROW + "Down";
+var RTL = "rtl";
+var TTB = "ttb";
+var ORIENTATION_MAP = {
+  width: ["height"],
+  left: ["top", "right"],
+  right: ["bottom", "left"],
+  x: ["y"],
+  X: ["Y"],
+  Y: ["X"],
+  ArrowLeft: [ARROW_UP, ARROW_RIGHT],
+  ArrowRight: [ARROW_DOWN, ARROW_LEFT]
+};
+
+function Direction(Splide2, Components2, options) {
+  function resolve(prop, axisOnly, direction) {
+    direction = direction || options.direction;
+    var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
+    return ORIENTATION_MAP[prop] && ORIENTATION_MAP[prop][index] || prop.replace(/width|left|right/i, function (match, offset) {
+      var replacement = ORIENTATION_MAP[match.toLowerCase()][index] || match;
+      return offset > 0 ? replacement.charAt(0).toUpperCase() + replacement.slice(1) : replacement;
+    });
+  }
+
+  function orient(value) {
+    return value * (options.direction === RTL ? 1 : -1);
+  }
+
+  return {
+    resolve: resolve,
+    orient: orient
+  };
+}
+
+var ROLE = "role";
+var TAB_INDEX = "tabindex";
+var DISABLED = "disabled";
+var ARIA_PREFIX = "aria-";
+var ARIA_CONTROLS = ARIA_PREFIX + "controls";
+var ARIA_CURRENT = ARIA_PREFIX + "current";
+var ARIA_SELECTED = ARIA_PREFIX + "selected";
+var ARIA_LABEL = ARIA_PREFIX + "label";
+var ARIA_LABELLEDBY = ARIA_PREFIX + "labelledby";
+var ARIA_HIDDEN = ARIA_PREFIX + "hidden";
+var ARIA_ORIENTATION = ARIA_PREFIX + "orientation";
+var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
+var ARIA_LIVE = ARIA_PREFIX + "live";
+var ARIA_BUSY = ARIA_PREFIX + "busy";
+var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
+var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
+var CLASS_PREFIX = PROJECT_CODE + "__";
+var STATUS_CLASS_PREFIX = "is-";
+var CLASS_ROOT = PROJECT_CODE;
+var CLASS_TRACK = CLASS_PREFIX + "track";
+var CLASS_LIST = CLASS_PREFIX + "list";
+var CLASS_SLIDE = CLASS_PREFIX + "slide";
+var CLASS_CLONE = CLASS_SLIDE + "--clone";
+var CLASS_CONTAINER = CLASS_SLIDE + "__container";
+var CLASS_ARROWS = CLASS_PREFIX + "arrows";
+var CLASS_ARROW = CLASS_PREFIX + "arrow";
+var CLASS_ARROW_PREV = CLASS_ARROW + "--prev";
+var CLASS_ARROW_NEXT = CLASS_ARROW + "--next";
+var CLASS_PAGINATION = CLASS_PREFIX + "pagination";
+var CLASS_PAGINATION_PAGE = CLASS_PAGINATION + "__page";
+var CLASS_PROGRESS = CLASS_PREFIX + "progress";
+var CLASS_PROGRESS_BAR = CLASS_PROGRESS + "__bar";
+var CLASS_TOGGLE = CLASS_PREFIX + "toggle";
+var CLASS_SPINNER = CLASS_PREFIX + "spinner";
+var CLASS_SR = CLASS_PREFIX + "sr";
+var CLASS_INITIALIZED = STATUS_CLASS_PREFIX + "initialized";
+var CLASS_ACTIVE = STATUS_CLASS_PREFIX + "active";
+var CLASS_PREV = STATUS_CLASS_PREFIX + "prev";
+var CLASS_NEXT = STATUS_CLASS_PREFIX + "next";
+var CLASS_VISIBLE = STATUS_CLASS_PREFIX + "visible";
+var CLASS_LOADING = STATUS_CLASS_PREFIX + "loading";
+var CLASS_FOCUS_IN = STATUS_CLASS_PREFIX + "focus-in";
+var CLASS_OVERFLOW = STATUS_CLASS_PREFIX + "overflow";
+var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN, CLASS_OVERFLOW];
+var CLASSES = {
+  slide: CLASS_SLIDE,
+  clone: CLASS_CLONE,
+  arrows: CLASS_ARROWS,
+  arrow: CLASS_ARROW,
+  prev: CLASS_ARROW_PREV,
+  next: CLASS_ARROW_NEXT,
+  pagination: CLASS_PAGINATION,
+  page: CLASS_PAGINATION_PAGE,
+  spinner: CLASS_SPINNER
+};
+
+function closest(from, selector) {
+  if (isFunction(from.closest)) {
+    return from.closest(selector);
+  }
+
+  var elm = from;
+
+  while (elm && elm.nodeType === 1) {
+    if (matches(elm, selector)) {
+      break;
+    }
+
+    elm = elm.parentElement;
+  }
+
+  return elm;
+}
+
+var FRICTION = 5;
+var LOG_INTERVAL = 200;
+var POINTER_DOWN_EVENTS = "touchstart mousedown";
+var POINTER_MOVE_EVENTS = "touchmove mousemove";
+var POINTER_UP_EVENTS = "touchend touchcancel mouseup click";
+
+function Elements(Splide2, Components2, options) {
+  var _EventInterface = EventInterface(Splide2),
+      on = _EventInterface.on,
+      bind = _EventInterface.bind;
+
+  var root = Splide2.root;
+  var i18n = options.i18n;
+  var elements = {};
+  var slides = [];
+  var rootClasses = [];
+  var trackClasses = [];
+  var track;
+  var list;
+  var isUsingKey;
+
+  function setup() {
+    collect();
+    init();
+    update();
+  }
+
+  function mount() {
+    on(EVENT_REFRESH, destroy);
+    on(EVENT_REFRESH, setup);
+    on(EVENT_UPDATED, update);
+    bind(document, POINTER_DOWN_EVENTS + " keydown", function (e) {
+      isUsingKey = e.type === "keydown";
+    }, {
+      capture: true
+    });
+    bind(root, "focusin", function () {
+      toggleClass(root, CLASS_FOCUS_IN, !!isUsingKey);
+    });
+  }
+
+  function destroy(completely) {
+    var attrs = ALL_ATTRIBUTES.concat("style");
+    empty(slides);
+    removeClass(root, rootClasses);
+    removeClass(track, trackClasses);
+    removeAttribute([track, list], attrs);
+    removeAttribute(root, completely ? attrs : ["style", ARIA_ROLEDESCRIPTION]);
+  }
+
+  function update() {
+    removeClass(root, rootClasses);
+    removeClass(track, trackClasses);
+    rootClasses = getClasses(CLASS_ROOT);
+    trackClasses = getClasses(CLASS_TRACK);
+    addClass(root, rootClasses);
+    addClass(track, trackClasses);
+    setAttribute(root, ARIA_LABEL, options.label);
+    setAttribute(root, ARIA_LABELLEDBY, options.labelledby);
+  }
+
+  function collect() {
+    track = find("." + CLASS_TRACK);
+    list = child(track, "." + CLASS_LIST);
+    assert(track && list, "A track/list element is missing.");
+    push(slides, children(list, "." + CLASS_SLIDE + ":not(." + CLASS_CLONE + ")"));
+    forOwn({
+      arrows: CLASS_ARROWS,
+      pagination: CLASS_PAGINATION,
+      prev: CLASS_ARROW_PREV,
+      next: CLASS_ARROW_NEXT,
+      bar: CLASS_PROGRESS_BAR,
+      toggle: CLASS_TOGGLE
+    }, function (className, key) {
+      elements[key] = find("." + className);
+    });
+    assign(elements, {
+      root: root,
+      track: track,
+      list: list,
+      slides: slides
+    });
+  }
+
+  function init() {
+    var id = root.id || uniqueId(PROJECT_CODE);
+    var role = options.role;
+    root.id = id;
+    track.id = track.id || id + "-track";
+    list.id = list.id || id + "-list";
+
+    if (!getAttribute(root, ROLE) && root.tagName !== "SECTION" && role) {
+      setAttribute(root, ROLE, role);
+    }
+
+    setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
+    setAttribute(list, ROLE, "presentation");
+  }
+
+  function find(selector) {
+    var elm = query(root, selector);
+    return elm && closest(elm, "." + CLASS_ROOT) === root ? elm : void 0;
+  }
+
+  function getClasses(base) {
+    return [base + "--" + options.type, base + "--" + options.direction, options.drag && base + "--draggable", options.isNavigation && base + "--nav", base === CLASS_ROOT && CLASS_ACTIVE];
+  }
+
+  return assign(elements, {
+    setup: setup,
+    mount: mount,
+    destroy: destroy
+  });
+}
+
+var SLIDE = "slide";
+var LOOP = "loop";
+var FADE = "fade";
+
+function Slide$1(Splide2, index, slideIndex, slide) {
+  var event = EventInterface(Splide2);
+  var on = event.on,
+      emit = event.emit,
+      bind = event.bind;
+  var Components = Splide2.Components,
+      root = Splide2.root,
+      options = Splide2.options;
+  var isNavigation = options.isNavigation,
+      updateOnMove = options.updateOnMove,
+      i18n = options.i18n,
+      pagination = options.pagination,
+      slideFocus = options.slideFocus;
+  var resolve = Components.Direction.resolve;
+  var styles = getAttribute(slide, "style");
+  var label = getAttribute(slide, ARIA_LABEL);
+  var isClone = slideIndex > -1;
+  var container = child(slide, "." + CLASS_CONTAINER);
+  var destroyed;
+
+  function mount() {
+    if (!isClone) {
+      slide.id = root.id + "-slide" + pad(index + 1);
+      setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
+      setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide);
+      setAttribute(slide, ARIA_LABEL, label || format(i18n.slideLabel, [index + 1, Splide2.length]));
+    }
+
+    listen();
+  }
+
+  function listen() {
+    bind(slide, "click", apply(emit, EVENT_CLICK, self));
+    bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
+    on([EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED], update);
+    on(EVENT_NAVIGATION_MOUNTED, initNavigation);
+
+    if (updateOnMove) {
+      on(EVENT_MOVE, onMove);
+    }
+  }
+
+  function destroy() {
+    destroyed = true;
+    event.destroy();
+    removeClass(slide, STATUS_CLASSES);
+    removeAttribute(slide, ALL_ATTRIBUTES);
+    setAttribute(slide, "style", styles);
+    setAttribute(slide, ARIA_LABEL, label || "");
+  }
+
+  function initNavigation() {
+    var controls = Splide2.splides.map(function (target) {
+      var Slide2 = target.splide.Components.Slides.getAt(index);
+      return Slide2 ? Slide2.slide.id : "";
+    }).join(" ");
+    setAttribute(slide, ARIA_LABEL, format(i18n.slideX, (isClone ? slideIndex : index) + 1));
+    setAttribute(slide, ARIA_CONTROLS, controls);
+    setAttribute(slide, ROLE, slideFocus ? "button" : "");
+    slideFocus && removeAttribute(slide, ARIA_ROLEDESCRIPTION);
+  }
+
+  function onMove() {
+    if (!destroyed) {
+      update();
+    }
+  }
+
+  function update() {
+    if (!destroyed) {
+      var curr = Splide2.index;
+      updateActivity();
+      updateVisibility();
+      toggleClass(slide, CLASS_PREV, index === curr - 1);
+      toggleClass(slide, CLASS_NEXT, index === curr + 1);
+    }
+  }
+
+  function updateActivity() {
+    var active = isActive();
+
+    if (active !== hasClass(slide, CLASS_ACTIVE)) {
+      toggleClass(slide, CLASS_ACTIVE, active);
+      setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
+      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
+    }
+  }
+
+  function updateVisibility() {
+    var visible = isVisible();
+    var hidden = !visible && (!isActive() || isClone);
+
+    if (!Splide2.state.is([MOVING, SCROLLING])) {
+      setAttribute(slide, ARIA_HIDDEN, hidden || "");
+    }
+
+    setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
+
+    if (slideFocus) {
+      setAttribute(slide, TAB_INDEX, hidden ? -1 : 0);
+    }
+
+    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+      toggleClass(slide, CLASS_VISIBLE, visible);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
+    }
+
+    if (!visible && document.activeElement === slide) {
+      var Slide2 = Components.Slides.getAt(Splide2.index);
+      Slide2 && focus(Slide2.slide);
+    }
+  }
+
+  function style$1(prop, value, useContainer) {
+    style(useContainer && container || slide, prop, value);
+  }
+
+  function isActive() {
+    var curr = Splide2.index;
+    return curr === index || options.cloneStatus && curr === slideIndex;
+  }
+
+  function isVisible() {
+    if (Splide2.is(FADE)) {
+      return isActive();
+    }
+
+    var trackRect = rect(Components.Elements.track);
+    var slideRect = rect(slide);
+    var left = resolve("left", true);
+    var right = resolve("right", true);
+    return floor(trackRect[left]) <= ceil(slideRect[left]) && floor(slideRect[right]) <= ceil(trackRect[right]);
+  }
+
+  function isWithin(from, distance) {
+    var diff = abs(from - index);
+
+    if (!isClone && (options.rewind || Splide2.is(LOOP))) {
+      diff = min(diff, Splide2.length - diff);
+    }
+
+    return diff <= distance;
+  }
+
+  var self = {
+    index: index,
+    slideIndex: slideIndex,
+    slide: slide,
+    container: container,
+    isClone: isClone,
+    mount: mount,
+    destroy: destroy,
+    update: update,
+    style: style$1,
+    isWithin: isWithin
+  };
+  return self;
+}
+
+function Slides(Splide2, Components2, options) {
+  var _EventInterface2 = EventInterface(Splide2),
+      on = _EventInterface2.on,
+      emit = _EventInterface2.emit,
+      bind = _EventInterface2.bind;
+
+  var _Components2$Elements = Components2.Elements,
+      slides = _Components2$Elements.slides,
+      list = _Components2$Elements.list;
+  var Slides2 = [];
+
+  function mount() {
+    init();
+    on(EVENT_REFRESH, destroy);
+    on(EVENT_REFRESH, init);
+  }
+
+  function init() {
+    slides.forEach(function (slide, index) {
+      register(slide, index, -1);
+    });
+  }
+
+  function destroy() {
+    forEach$1(function (Slide2) {
+      Slide2.destroy();
+    });
+    empty(Slides2);
+  }
+
+  function update() {
+    forEach$1(function (Slide2) {
+      Slide2.update();
+    });
+  }
+
+  function register(slide, index, slideIndex) {
+    var object = Slide$1(Splide2, index, slideIndex, slide);
+    object.mount();
+    Slides2.push(object);
+    Slides2.sort(function (Slide1, Slide2) {
+      return Slide1.index - Slide2.index;
+    });
+  }
+
+  function get(excludeClones) {
+    return excludeClones ? filter(function (Slide2) {
+      return !Slide2.isClone;
+    }) : Slides2;
+  }
+
+  function getIn(page) {
+    var Controller = Components2.Controller;
+    var index = Controller.toIndex(page);
+    var max = Controller.hasFocus() ? 1 : options.perPage;
+    return filter(function (Slide2) {
+      return between(Slide2.index, index, index + max - 1);
+    });
+  }
+
+  function getAt(index) {
+    return filter(index)[0];
+  }
+
+  function add(items, index) {
+    forEach(items, function (slide) {
+      if (isString(slide)) {
+        slide = parseHtml(slide);
+      }
+
+      if (isHTMLElement(slide)) {
+        var ref = slides[index];
+        ref ? before(slide, ref) : append(list, slide);
+        addClass(slide, options.classes.slide);
+        observeImages(slide, apply(emit, EVENT_RESIZE));
+      }
+    });
+    emit(EVENT_REFRESH);
+  }
+
+  function remove$1(matcher) {
+    remove(filter(matcher).map(function (Slide2) {
+      return Slide2.slide;
+    }));
+    emit(EVENT_REFRESH);
+  }
+
+  function forEach$1(iteratee, excludeClones) {
+    get(excludeClones).forEach(iteratee);
+  }
+
+  function filter(matcher) {
+    return Slides2.filter(isFunction(matcher) ? matcher : function (Slide2) {
+      return isString(matcher) ? matches(Slide2.slide, matcher) : includes(toArray(matcher), Slide2.index);
+    });
+  }
+
+  function style(prop, value, useContainer) {
+    forEach$1(function (Slide2) {
+      Slide2.style(prop, value, useContainer);
+    });
+  }
+
+  function observeImages(elm, callback) {
+    var images = queryAll(elm, "img");
+    var length = images.length;
+
+    if (length) {
+      images.forEach(function (img) {
+        bind(img, "load error", function () {
+          if (! --length) {
+            callback();
+          }
+        });
+      });
+    } else {
+      callback();
+    }
+  }
+
+  function getLength(excludeClones) {
+    return excludeClones ? slides.length : Slides2.length;
+  }
+
+  function isEnough() {
+    return Slides2.length > options.perPage;
+  }
+
+  return {
+    mount: mount,
+    destroy: destroy,
+    update: update,
+    register: register,
+    get: get,
+    getIn: getIn,
+    getAt: getAt,
+    add: add,
+    remove: remove$1,
+    forEach: forEach$1,
+    filter: filter,
+    style: style,
+    getLength: getLength,
+    isEnough: isEnough
+  };
+}
+
+function Layout(Splide2, Components2, options) {
+  var _EventInterface3 = EventInterface(Splide2),
+      on = _EventInterface3.on,
+      bind = _EventInterface3.bind,
+      emit = _EventInterface3.emit;
+
+  var Slides = Components2.Slides;
+  var resolve = Components2.Direction.resolve;
+  var _Components2$Elements2 = Components2.Elements,
+      root = _Components2$Elements2.root,
+      track = _Components2$Elements2.track,
+      list = _Components2$Elements2.list;
+  var getAt = Slides.getAt,
+      styleSlides = Slides.style;
+  var vertical;
+  var rootRect;
+  var overflow;
+
+  function mount() {
+    init();
+    bind(window, "resize load", Throttle(apply(emit, EVENT_RESIZE)));
+    on([EVENT_UPDATED, EVENT_REFRESH], init);
+    on(EVENT_RESIZE, resize);
+  }
+
+  function init() {
+    vertical = options.direction === TTB;
+    style(root, "maxWidth", unit(options.width));
+    style(track, resolve("paddingLeft"), cssPadding(false));
+    style(track, resolve("paddingRight"), cssPadding(true));
+    resize(true);
+  }
+
+  function resize(force) {
+    var newRect = rect(root);
+
+    if (force || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+      style(track, "height", cssTrackHeight());
+      styleSlides(resolve("marginRight"), unit(options.gap));
+      styleSlides("width", cssSlideWidth());
+      styleSlides("height", cssSlideHeight(), true);
+      rootRect = newRect;
+      emit(EVENT_RESIZED);
+
+      if (overflow !== (overflow = isOverflow())) {
+        toggleClass(root, CLASS_OVERFLOW, overflow);
+        emit(EVENT_OVERFLOW, overflow);
+      }
+    }
+  }
+
+  function cssPadding(right) {
+    var padding = options.padding;
+    var prop = resolve(right ? "right" : "left");
+    return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
+  }
+
+  function cssTrackHeight() {
+    var height = "";
+
+    if (vertical) {
+      height = cssHeight();
+      assert(height, "height or heightRatio is missing.");
+      height = "calc(" + height + " - " + cssPadding(false) + " - " + cssPadding(true) + ")";
+    }
+
+    return height;
+  }
+
+  function cssHeight() {
+    return unit(options.height || rect(list).width * options.heightRatio);
+  }
+
+  function cssSlideWidth() {
+    return options.autoWidth ? null : unit(options.fixedWidth) || (vertical ? "" : cssSlideSize());
+  }
+
+  function cssSlideHeight() {
+    return unit(options.fixedHeight) || (vertical ? options.autoHeight ? null : cssSlideSize() : cssHeight());
+  }
+
+  function cssSlideSize() {
+    var gap = unit(options.gap);
+    return "calc((100%" + (gap && " + " + gap) + ")/" + (options.perPage || 1) + (gap && " - " + gap) + ")";
+  }
+
+  function listSize() {
+    return rect(list)[resolve("width")];
+  }
+
+  function slideSize(index, withoutGap) {
+    var Slide = getAt(index || 0);
+    return Slide ? rect(Slide.slide)[resolve("width")] + (withoutGap ? 0 : getGap()) : 0;
+  }
+
+  function totalSize(index, withoutGap) {
+    var Slide = getAt(index);
+
+    if (Slide) {
+      var right = rect(Slide.slide)[resolve("right")];
+      var left = rect(list)[resolve("left")];
+      return abs(right - left) + (withoutGap ? 0 : getGap());
+    }
+
+    return 0;
+  }
+
+  function sliderSize(withoutGap) {
+    return totalSize(Splide2.length - 1) - totalSize(0) + slideSize(0, withoutGap);
+  }
+
+  function getGap() {
+    var Slide = getAt(0);
+    return Slide && parseFloat(style(Slide.slide, resolve("marginRight"))) || 0;
+  }
+
+  function getPadding(right) {
+    return parseFloat(style(track, resolve("padding" + (right ? "Right" : "Left")))) || 0;
+  }
+
+  function isOverflow() {
+    return Splide2.is(FADE) || sliderSize(true) > listSize();
+  }
+
+  return {
+    mount: mount,
+    resize: resize,
+    listSize: listSize,
+    slideSize: slideSize,
+    sliderSize: sliderSize,
+    totalSize: totalSize,
+    getPadding: getPadding,
+    isOverflow: isOverflow
+  };
+}
+
+var MULTIPLIER = 2;
+
+function Clones(Splide2, Components2, options) {
+  var event = EventInterface(Splide2);
+  var on = event.on;
+  var Elements = Components2.Elements,
+      Slides = Components2.Slides;
+  var resolve = Components2.Direction.resolve;
+  var clones = [];
+  var cloneCount;
+
+  function mount() {
+    on(EVENT_REFRESH, remount);
+    on([EVENT_UPDATED, EVENT_RESIZE], observe);
+
+    if (cloneCount = computeCloneCount()) {
+      generate(cloneCount);
+      Components2.Layout.resize(true);
+    }
+  }
+
+  function remount() {
+    destroy();
+    mount();
+  }
+
+  function destroy() {
+    remove(clones);
+    empty(clones);
+    event.destroy();
+  }
+
+  function observe() {
+    var count = computeCloneCount();
+
+    if (cloneCount !== count) {
+      if (cloneCount < count || !count) {
+        event.emit(EVENT_REFRESH);
+      }
+    }
+  }
+
+  function generate(count) {
+    var slides = Slides.get().slice();
+    var length = slides.length;
+
+    if (length) {
+      while (slides.length < count) {
+        push(slides, slides);
+      }
+
+      push(slides.slice(-count), slides.slice(0, count)).forEach(function (Slide, index) {
+        var isHead = index < count;
+        var clone = cloneDeep(Slide.slide, index);
+        isHead ? before(clone, slides[0].slide) : append(Elements.list, clone);
+        push(clones, clone);
+        Slides.register(clone, index - count + (isHead ? 0 : length), Slide.index);
+      });
+    }
+  }
+
+  function cloneDeep(elm, index) {
+    var clone = elm.cloneNode(true);
+    addClass(clone, options.classes.clone);
+    clone.id = Splide2.root.id + "-clone" + pad(index + 1);
+    return clone;
+  }
+
+  function computeCloneCount() {
+    var clones2 = options.clones;
+
+    if (!Splide2.is(LOOP)) {
+      clones2 = 0;
+    } else if (isUndefined(clones2)) {
+      var fixedSize = options[resolve("fixedWidth")] && Components2.Layout.slideSize(0);
+      var fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
+      clones2 = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage * MULTIPLIER;
+    }
+
+    return clones2;
+  }
+
+  return {
+    mount: mount,
+    destroy: destroy
+  };
+}
+
+function Move(Splide2, Components2, options) {
+  var _EventInterface4 = EventInterface(Splide2),
+      on = _EventInterface4.on,
+      emit = _EventInterface4.emit;
+
+  var set = Splide2.state.set;
+  var _Components2$Layout = Components2.Layout,
+      slideSize = _Components2$Layout.slideSize,
+      getPadding = _Components2$Layout.getPadding,
+      totalSize = _Components2$Layout.totalSize,
+      listSize = _Components2$Layout.listSize,
+      sliderSize = _Components2$Layout.sliderSize;
+  var _Components2$Directio = Components2.Direction,
+      resolve = _Components2$Directio.resolve,
+      orient = _Components2$Directio.orient;
+  var _Components2$Elements3 = Components2.Elements,
+      list = _Components2$Elements3.list,
+      track = _Components2$Elements3.track;
+  var Transition;
+
+  function mount() {
+    Transition = Components2.Transition;
+    on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
+  }
+
+  function reposition() {
+    if (!Components2.Controller.isBusy()) {
+      Components2.Scroll.cancel();
+      jump(Splide2.index);
+      Components2.Slides.update();
+    }
+  }
+
+  function move(dest, index, prev, callback) {
+    if (dest !== index && canShift(dest > prev)) {
+      cancel();
+      translate(shift(getPosition(), dest > prev), true);
+    }
+
+    set(MOVING);
+    emit(EVENT_MOVE, index, prev, dest);
+    Transition.start(index, function () {
+      set(IDLE);
+      emit(EVENT_MOVED, index, prev, dest);
+      callback && callback();
+    });
+  }
+
+  function jump(index) {
+    translate(toPosition(index, true));
+  }
+
+  function translate(position, preventLoop) {
+    if (!Splide2.is(FADE)) {
+      var destination = preventLoop ? position : loop(position);
+      style(list, "transform", "translate" + resolve("X") + "(" + destination + "px)");
+      position !== destination && emit(EVENT_SHIFTED);
+    }
+  }
+
+  function loop(position) {
+    if (Splide2.is(LOOP)) {
+      var index = toIndex(position);
+      var exceededMax = index > Components2.Controller.getEnd();
+      var exceededMin = index < 0;
+
+      if (exceededMin || exceededMax) {
+        position = shift(position, exceededMax);
+      }
+    }
+
+    return position;
+  }
+
+  function shift(position, backwards) {
+    var excess = position - getLimit(backwards);
+    var size = sliderSize();
+    position -= orient(size * (ceil(abs(excess) / size) || 1)) * (backwards ? 1 : -1);
+    return position;
+  }
+
+  function cancel() {
+    translate(getPosition(), true);
+    Transition.cancel();
+  }
+
+  function toIndex(position) {
+    var Slides = Components2.Slides.get();
+    var index = 0;
+    var minDistance = Infinity;
+
+    for (var i = 0; i < Slides.length; i++) {
+      var slideIndex = Slides[i].index;
+      var distance = abs(toPosition(slideIndex, true) - position);
+
+      if (distance <= minDistance) {
+        minDistance = distance;
+        index = slideIndex;
+      } else {
+        break;
+      }
+    }
+
+    return index;
+  }
+
+  function toPosition(index, trimming) {
+    var position = orient(totalSize(index - 1) - offset(index));
+    return trimming ? trim(position) : position;
+  }
+
+  function getPosition() {
+    var left = resolve("left");
+    return rect(list)[left] - rect(track)[left] + orient(getPadding(false));
+  }
+
+  function trim(position) {
+    if (options.trimSpace && Splide2.is(SLIDE)) {
+      position = clamp(position, 0, orient(sliderSize(true) - listSize()));
+    }
+
+    return position;
+  }
+
+  function offset(index) {
+    var focus = options.focus;
+    return focus === "center" ? (listSize() - slideSize(index, true)) / 2 : +focus * slideSize(index) || 0;
+  }
+
+  function getLimit(max) {
+    return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
+  }
+
+  function canShift(backwards) {
+    var shifted = orient(shift(getPosition(), backwards));
+    return backwards ? shifted >= 0 : shifted <= list[resolve("scrollWidth")] - rect(track)[resolve("width")];
+  }
+
+  function exceededLimit(max, position) {
+    position = isUndefined(position) ? getPosition() : position;
+    var exceededMin = max !== true && orient(position) < orient(getLimit(false));
+    var exceededMax = max !== false && orient(position) > orient(getLimit(true));
+    return exceededMin || exceededMax;
+  }
+
+  return {
+    mount: mount,
+    move: move,
+    jump: jump,
+    translate: translate,
+    shift: shift,
+    cancel: cancel,
+    toIndex: toIndex,
+    toPosition: toPosition,
+    getPosition: getPosition,
+    getLimit: getLimit,
+    exceededLimit: exceededLimit,
+    reposition: reposition
+  };
+}
+
+function Controller(Splide2, Components2, options) {
+  var _EventInterface5 = EventInterface(Splide2),
+      on = _EventInterface5.on,
+      emit = _EventInterface5.emit;
+
+  var Move = Components2.Move;
+  var getPosition = Move.getPosition,
+      getLimit = Move.getLimit,
+      toPosition = Move.toPosition;
+  var _Components2$Slides = Components2.Slides,
+      isEnough = _Components2$Slides.isEnough,
+      getLength = _Components2$Slides.getLength;
+  var omitEnd = options.omitEnd;
+  var isLoop = Splide2.is(LOOP);
+  var isSlide = Splide2.is(SLIDE);
+  var getNext = apply(getAdjacent, false);
+  var getPrev = apply(getAdjacent, true);
+  var currIndex = options.start || 0;
+  var endIndex;
+  var prevIndex = currIndex;
+  var slideCount;
+  var perMove;
+  var perPage;
+
+  function mount() {
+    init();
+    on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], init);
+    on(EVENT_RESIZED, onResized);
+  }
+
+  function init() {
+    slideCount = getLength(true);
+    perMove = options.perMove;
+    perPage = options.perPage;
+    endIndex = getEnd();
+    var index = clamp(currIndex, 0, omitEnd ? endIndex : slideCount - 1);
+
+    if (index !== currIndex) {
+      currIndex = index;
+      Move.reposition();
+    }
+  }
+
+  function onResized() {
+    if (endIndex !== getEnd()) {
+      emit(EVENT_END_INDEX_CHANGED);
+    }
+  }
+
+  function go(control, allowSameIndex, callback) {
+    if (!isBusy()) {
+      var dest = parse(control);
+      var index = loop(dest);
+
+      if (index > -1 && (allowSameIndex || index !== currIndex)) {
+        setIndex(index);
+        Move.move(dest, index, prevIndex, callback);
+      }
+    }
+  }
+
+  function scroll(destination, duration, snap, callback) {
+    Components2.Scroll.scroll(destination, duration, snap, function () {
+      var index = loop(Move.toIndex(getPosition()));
+      setIndex(omitEnd ? min(index, endIndex) : index);
+      callback && callback();
+    });
+  }
+
+  function parse(control) {
+    var index = currIndex;
+
+    if (isString(control)) {
+      var _ref = control.match(/([+\-<>])(\d+)?/) || [],
+          indicator = _ref[1],
+          number = _ref[2];
+
+      if (indicator === "+" || indicator === "-") {
+        index = computeDestIndex(currIndex + +("" + indicator + (+number || 1)), currIndex);
+      } else if (indicator === ">") {
+        index = number ? toIndex(+number) : getNext(true);
+      } else if (indicator === "<") {
+        index = getPrev(true);
+      }
+    } else {
+      index = isLoop ? control : clamp(control, 0, endIndex);
+    }
+
+    return index;
+  }
+
+  function getAdjacent(prev, destination) {
+    var number = perMove || (hasFocus() ? 1 : perPage);
+    var dest = computeDestIndex(currIndex + number * (prev ? -1 : 1), currIndex, !(perMove || hasFocus()));
+
+    if (dest === -1 && isSlide) {
+      if (!approximatelyEqual(getPosition(), getLimit(!prev), 1)) {
+        return prev ? 0 : endIndex;
+      }
+    }
+
+    return destination ? dest : loop(dest);
+  }
+
+  function computeDestIndex(dest, from, snapPage) {
+    if (isEnough() || hasFocus()) {
+      var index = computeMovableDestIndex(dest);
+
+      if (index !== dest) {
+        from = dest;
+        dest = index;
+        snapPage = false;
+      }
+
+      if (dest < 0 || dest > endIndex) {
+        if (!perMove && (between(0, dest, from, true) || between(endIndex, from, dest, true))) {
+          dest = toIndex(toPage(dest));
+        } else {
+          if (isLoop) {
+            dest = snapPage ? dest < 0 ? -(slideCount % perPage || perPage) : slideCount : dest;
+          } else if (options.rewind) {
+            dest = dest < 0 ? endIndex : 0;
+          } else {
+            dest = -1;
+          }
+        }
+      } else {
+        if (snapPage && dest !== from) {
+          dest = toIndex(toPage(from) + (dest < from ? -1 : 1));
+        }
+      }
+    } else {
+      dest = -1;
+    }
+
+    return dest;
+  }
+
+  function computeMovableDestIndex(dest) {
+    if (isSlide && options.trimSpace === "move" && dest !== currIndex) {
+      var position = getPosition();
+
+      while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1, !options.rewind)) {
+        dest < currIndex ? --dest : ++dest;
+      }
+    }
+
+    return dest;
+  }
+
+  function loop(index) {
+    return isLoop ? (index + slideCount) % slideCount || 0 : index;
+  }
+
+  function getEnd() {
+    var end = slideCount - (hasFocus() || isLoop && perMove ? 1 : perPage);
+
+    while (omitEnd && end-- > 0) {
+      if (toPosition(slideCount - 1, true) !== toPosition(end, true)) {
+        end++;
+        break;
+      }
+    }
+
+    return clamp(end, 0, slideCount - 1);
+  }
+
+  function toIndex(page) {
+    return clamp(hasFocus() ? page : perPage * page, 0, endIndex);
+  }
+
+  function toPage(index) {
+    return hasFocus() ? min(index, endIndex) : floor((index >= endIndex ? slideCount - 1 : index) / perPage);
+  }
+
+  function toDest(destination) {
+    var closest = Move.toIndex(destination);
+    return isSlide ? clamp(closest, 0, endIndex) : closest;
+  }
+
+  function setIndex(index) {
+    if (index !== currIndex) {
+      prevIndex = currIndex;
+      currIndex = index;
+    }
+  }
+
+  function getIndex(prev) {
+    return prev ? prevIndex : currIndex;
+  }
+
+  function hasFocus() {
+    return !isUndefined(options.focus) || options.isNavigation;
+  }
+
+  function isBusy() {
+    return Splide2.state.is([MOVING, SCROLLING]) && !!options.waitForTransition;
+  }
+
+  return {
+    mount: mount,
+    go: go,
+    scroll: scroll,
+    getNext: getNext,
+    getPrev: getPrev,
+    getAdjacent: getAdjacent,
+    getEnd: getEnd,
+    setIndex: setIndex,
+    getIndex: getIndex,
+    toIndex: toIndex,
+    toPage: toPage,
+    toDest: toDest,
+    hasFocus: hasFocus,
+    isBusy: isBusy
+  };
+}
+
+var XML_NAME_SPACE = "http://www.w3.org/2000/svg";
+var PATH = "m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z";
+var SIZE = 40;
+
+function Arrows(Splide2, Components2, options) {
+  var event = EventInterface(Splide2);
+  var on = event.on,
+      bind = event.bind,
+      emit = event.emit;
+  var classes = options.classes,
+      i18n = options.i18n;
+  var Elements = Components2.Elements,
+      Controller = Components2.Controller;
+  var placeholder = Elements.arrows,
+      track = Elements.track;
+  var wrapper = placeholder;
+  var prev = Elements.prev;
+  var next = Elements.next;
+  var created;
+  var wrapperClasses;
+  var arrows = {};
+
+  function mount() {
+    init();
+    on(EVENT_UPDATED, remount);
+  }
+
+  function remount() {
+    destroy();
+    mount();
+  }
+
+  function init() {
+    var enabled = options.arrows;
+
+    if (enabled && !(prev && next)) {
+      createArrows();
+    }
+
+    if (prev && next) {
+      assign(arrows, {
+        prev: prev,
+        next: next
+      });
+      display(wrapper, enabled ? "" : "none");
+      addClass(wrapper, wrapperClasses = CLASS_ARROWS + "--" + options.direction);
+
+      if (enabled) {
+        listen();
+        update();
+        setAttribute([prev, next], ARIA_CONTROLS, track.id);
+        emit(EVENT_ARROWS_MOUNTED, prev, next);
+      }
+    }
+  }
+
+  function destroy() {
+    event.destroy();
+    removeClass(wrapper, wrapperClasses);
+
+    if (created) {
+      remove(placeholder ? [prev, next] : wrapper);
+      prev = next = null;
+    } else {
+      removeAttribute([prev, next], ALL_ATTRIBUTES);
+    }
+  }
+
+  function listen() {
+    on([EVENT_MOUNTED, EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED], update);
+    bind(next, "click", apply(go, ">"));
+    bind(prev, "click", apply(go, "<"));
+  }
+
+  function go(control) {
+    Controller.go(control, true);
+  }
+
+  function createArrows() {
+    wrapper = placeholder || create("div", classes.arrows);
+    prev = createArrow(true);
+    next = createArrow(false);
+    created = true;
+    append(wrapper, [prev, next]);
+    !placeholder && before(wrapper, track);
+  }
+
+  function createArrow(prev2) {
+    var arrow = "<button class=\"" + classes.arrow + " " + (prev2 ? classes.prev : classes.next) + "\" type=\"button\"><svg xmlns=\"" + XML_NAME_SPACE + "\" viewBox=\"0 0 " + SIZE + " " + SIZE + "\" width=\"" + SIZE + "\" height=\"" + SIZE + "\" focusable=\"false\"><path d=\"" + (options.arrowPath || PATH) + "\" />";
+    return parseHtml(arrow);
+  }
+
+  function update() {
+    if (prev && next) {
+      var index = Splide2.index;
+      var prevIndex = Controller.getPrev();
+      var nextIndex = Controller.getNext();
+      var prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
+      var nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;
+      prev.disabled = prevIndex < 0;
+      next.disabled = nextIndex < 0;
+      setAttribute(prev, ARIA_LABEL, prevLabel);
+      setAttribute(next, ARIA_LABEL, nextLabel);
+      emit(EVENT_ARROWS_UPDATED, prev, next, prevIndex, nextIndex);
+    }
+  }
+
+  return {
+    arrows: arrows,
+    mount: mount,
+    destroy: destroy,
+    update: update
+  };
+}
+
+var INTERVAL_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-interval";
+
+function Autoplay(Splide2, Components2, options) {
+  var _EventInterface6 = EventInterface(Splide2),
+      on = _EventInterface6.on,
+      bind = _EventInterface6.bind,
+      emit = _EventInterface6.emit;
+
+  var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), onAnimationFrame);
+  var isPaused = interval.isPaused;
+  var Elements = Components2.Elements,
+      _Components2$Elements4 = Components2.Elements,
+      root = _Components2$Elements4.root,
+      toggle = _Components2$Elements4.toggle;
+  var autoplay = options.autoplay;
+  var hovered;
+  var focused;
+  var stopped = autoplay === "pause";
+
+  function mount() {
+    if (autoplay) {
+      listen();
+      toggle && setAttribute(toggle, ARIA_CONTROLS, Elements.track.id);
+      stopped || play();
+      update();
+    }
+  }
+
+  function listen() {
+    if (options.pauseOnHover) {
+      bind(root, "mouseenter mouseleave", function (e) {
+        hovered = e.type === "mouseenter";
+        autoToggle();
+      });
+    }
+
+    if (options.pauseOnFocus) {
+      bind(root, "focusin focusout", function (e) {
+        focused = e.type === "focusin";
+        autoToggle();
+      });
+    }
+
+    if (toggle) {
+      bind(toggle, "click", function () {
+        stopped ? play() : pause(true);
+      });
+    }
+
+    on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
+    on(EVENT_MOVE, onMove);
+  }
+
+  function play() {
+    if (isPaused() && Components2.Slides.isEnough()) {
+      interval.start(!options.resetProgress);
+      focused = hovered = stopped = false;
+      update();
+      emit(EVENT_AUTOPLAY_PLAY);
+    }
+  }
+
+  function pause(stop) {
+    if (stop === void 0) {
+      stop = true;
+    }
+
+    stopped = !!stop;
+    update();
+
+    if (!isPaused()) {
+      interval.pause();
+      emit(EVENT_AUTOPLAY_PAUSE);
+    }
+  }
+
+  function autoToggle() {
+    if (!stopped) {
+      hovered || focused ? pause(false) : play();
+    }
+  }
+
+  function update() {
+    if (toggle) {
+      toggleClass(toggle, CLASS_ACTIVE, !stopped);
+      setAttribute(toggle, ARIA_LABEL, options.i18n[stopped ? "play" : "pause"]);
+    }
+  }
+
+  function onAnimationFrame(rate) {
+    var bar = Elements.bar;
+    bar && style(bar, "width", rate * 100 + "%");
+    emit(EVENT_AUTOPLAY_PLAYING, rate);
+  }
+
+  function onMove(index) {
+    var Slide = Components2.Slides.getAt(index);
+    interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
+  }
+
+  return {
+    mount: mount,
+    destroy: interval.cancel,
+    play: play,
+    pause: pause,
+    isPaused: isPaused
+  };
+}
+
+function Cover(Splide2, Components2, options) {
+  var _EventInterface7 = EventInterface(Splide2),
+      on = _EventInterface7.on;
+
+  function mount() {
+    if (options.cover) {
+      on(EVENT_LAZYLOAD_LOADED, apply(toggle, true));
+      on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply(cover, true));
+    }
+  }
+
+  function cover(cover2) {
+    Components2.Slides.forEach(function (Slide) {
+      var img = child(Slide.container || Slide.slide, "img");
+
+      if (img && img.src) {
+        toggle(cover2, img, Slide);
+      }
+    });
+  }
+
+  function toggle(cover2, img, Slide) {
+    Slide.style("background", cover2 ? "center/cover no-repeat url(\"" + img.src + "\")" : "", true);
+    display(img, cover2 ? "none" : "");
+  }
+
+  return {
+    mount: mount,
+    destroy: apply(cover, false)
+  };
+}
+
+var BOUNCE_DIFF_THRESHOLD = 10;
+var BOUNCE_DURATION = 600;
+var FRICTION_FACTOR = 0.6;
+var BASE_VELOCITY = 1.5;
+var MIN_DURATION = 800;
+
+function Scroll(Splide2, Components2, options) {
+  var _EventInterface8 = EventInterface(Splide2),
+      on = _EventInterface8.on,
+      emit = _EventInterface8.emit;
+
+  var set = Splide2.state.set;
+  var Move = Components2.Move;
+  var getPosition = Move.getPosition,
+      getLimit = Move.getLimit,
+      exceededLimit = Move.exceededLimit,
+      translate = Move.translate;
+  var isSlide = Splide2.is(SLIDE);
+  var interval;
+  var callback;
+  var friction = 1;
+
+  function mount() {
+    on(EVENT_MOVE, clear);
+    on([EVENT_UPDATED, EVENT_REFRESH], cancel);
+  }
+
+  function scroll(destination, duration, snap, onScrolled, noConstrain) {
+    var from = getPosition();
+    clear();
+
+    if (snap && (!isSlide || !exceededLimit())) {
+      var size = Components2.Layout.sliderSize();
+      var offset = sign(destination) * size * floor(abs(destination) / size) || 0;
+      destination = Move.toPosition(Components2.Controller.toDest(destination % size)) + offset;
+    }
+
+    var noDistance = approximatelyEqual(from, destination, 1);
+    friction = 1;
+    duration = noDistance ? 0 : duration || max(abs(destination - from) / BASE_VELOCITY, MIN_DURATION);
+    callback = onScrolled;
+    interval = RequestInterval(duration, onEnd, apply(update, from, destination, noConstrain), 1);
+    set(SCROLLING);
+    emit(EVENT_SCROLL);
+    interval.start();
+  }
+
+  function onEnd() {
+    set(IDLE);
+    callback && callback();
+    emit(EVENT_SCROLLED);
+  }
+
+  function update(from, to, noConstrain, rate) {
+    var position = getPosition();
+    var target = from + (to - from) * easing(rate);
+    var diff = (target - position) * friction;
+    translate(position + diff);
+
+    if (isSlide && !noConstrain && exceededLimit()) {
+      friction *= FRICTION_FACTOR;
+
+      if (abs(diff) < BOUNCE_DIFF_THRESHOLD) {
+        scroll(getLimit(exceededLimit(true)), BOUNCE_DURATION, false, callback, true);
+      }
+    }
+  }
+
+  function clear() {
+    if (interval) {
+      interval.cancel();
+    }
+  }
+
+  function cancel() {
+    if (interval && !interval.isPaused()) {
+      clear();
+      onEnd();
+    }
+  }
+
+  function easing(t) {
+    var easingFunc = options.easingFunc;
+    return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4);
+  }
+
+  return {
+    mount: mount,
+    destroy: clear,
+    scroll: scroll,
+    cancel: cancel
+  };
+}
+
+var SCROLL_LISTENER_OPTIONS = {
+  passive: false,
+  capture: true
+};
+
+function Drag(Splide2, Components2, options) {
+  var _EventInterface9 = EventInterface(Splide2),
+      on = _EventInterface9.on,
+      emit = _EventInterface9.emit,
+      bind = _EventInterface9.bind,
+      unbind = _EventInterface9.unbind;
+
+  var state = Splide2.state;
+  var Move = Components2.Move,
+      Scroll = Components2.Scroll,
+      Controller = Components2.Controller,
+      track = Components2.Elements.track,
+      reduce = Components2.Media.reduce;
+  var _Components2$Directio2 = Components2.Direction,
+      resolve = _Components2$Directio2.resolve,
+      orient = _Components2$Directio2.orient;
+  var getPosition = Move.getPosition,
+      exceededLimit = Move.exceededLimit;
+  var basePosition;
+  var baseEvent;
+  var prevBaseEvent;
+  var isFree;
+  var dragging;
+  var exceeded = false;
+  var clickPrevented;
+  var disabled;
+  var target;
+
+  function mount() {
+    bind(track, POINTER_MOVE_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+    bind(track, POINTER_UP_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+    bind(track, POINTER_DOWN_EVENTS, onPointerDown, SCROLL_LISTENER_OPTIONS);
+    bind(track, "click", onClick, {
+      capture: true
+    });
+    bind(track, "dragstart", prevent);
+    on([EVENT_MOUNTED, EVENT_UPDATED], init);
+  }
+
+  function init() {
+    var drag = options.drag;
+    disable(!drag);
+    isFree = drag === "free";
+  }
+
+  function onPointerDown(e) {
+    clickPrevented = false;
+
+    if (!disabled) {
+      var isTouch = isTouchEvent(e);
+
+      if (isDraggable(e.target) && (isTouch || !e.button)) {
+        if (!Controller.isBusy()) {
+          target = isTouch ? track : window;
+          dragging = state.is([MOVING, SCROLLING]);
+          prevBaseEvent = null;
+          bind(target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS);
+          bind(target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS);
+          Move.cancel();
+          Scroll.cancel();
+          save(e);
+        } else {
+          prevent(e, true);
+        }
+      }
+    }
+  }
+
+  function onPointerMove(e) {
+    if (!state.is(DRAGGING)) {
+      state.set(DRAGGING);
+      emit(EVENT_DRAG);
+    }
+
+    if (e.cancelable) {
+      if (dragging) {
+        Move.translate(basePosition + constrain(diffCoord(e)));
+        var expired = diffTime(e) > LOG_INTERVAL;
+        var hasExceeded = exceeded !== (exceeded = exceededLimit());
+
+        if (expired || hasExceeded) {
+          save(e);
+        }
+
+        clickPrevented = true;
+        emit(EVENT_DRAGGING);
+        prevent(e);
+      } else if (isSliderDirection(e)) {
+        dragging = shouldStart(e);
+        prevent(e);
+      }
+    }
+  }
+
+  function onPointerUp(e) {
+    if (state.is(DRAGGING)) {
+      state.set(IDLE);
+      emit(EVENT_DRAGGED);
+    }
+
+    if (dragging) {
+      move(e);
+      prevent(e);
+    }
+
+    unbind(target, POINTER_MOVE_EVENTS, onPointerMove);
+    unbind(target, POINTER_UP_EVENTS, onPointerUp);
+    dragging = false;
+  }
+
+  function onClick(e) {
+    if (!disabled && clickPrevented) {
+      prevent(e, true);
+    }
+  }
+
+  function save(e) {
+    prevBaseEvent = baseEvent;
+    baseEvent = e;
+    basePosition = getPosition();
+  }
+
+  function move(e) {
+    var velocity = computeVelocity(e);
+    var destination = computeDestination(velocity);
+    var rewind = options.rewind && options.rewindByDrag;
+    reduce(false);
+
+    if (isFree) {
+      Controller.scroll(destination, 0, options.snap);
+    } else if (Splide2.is(FADE)) {
+      Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
+    } else if (Splide2.is(SLIDE) && exceeded && rewind) {
+      Controller.go(exceededLimit(true) ? ">" : "<");
+    } else {
+      Controller.go(Controller.toDest(destination), true);
+    }
+
+    reduce(true);
+  }
+
+  function shouldStart(e) {
+    var thresholds = options.dragMinThreshold;
+    var isObj = isObject(thresholds);
+    var mouse = isObj && thresholds.mouse || 0;
+    var touch = (isObj ? thresholds.touch : +thresholds) || 10;
+    return abs(diffCoord(e)) > (isTouchEvent(e) ? touch : mouse);
+  }
+
+  function isSliderDirection(e) {
+    return abs(diffCoord(e)) > abs(diffCoord(e, true));
+  }
+
+  function computeVelocity(e) {
+    if (Splide2.is(LOOP) || !exceeded) {
+      var time = diffTime(e);
+
+      if (time && time < LOG_INTERVAL) {
+        return diffCoord(e) / time;
+      }
+    }
+
+    return 0;
+  }
+
+  function computeDestination(velocity) {
+    return getPosition() + sign(velocity) * min(abs(velocity) * (options.flickPower || 600), isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1));
+  }
+
+  function diffCoord(e, orthogonal) {
+    return coordOf(e, orthogonal) - coordOf(getBaseEvent(e), orthogonal);
+  }
+
+  function diffTime(e) {
+    return timeOf(e) - timeOf(getBaseEvent(e));
+  }
+
+  function getBaseEvent(e) {
+    return baseEvent === e && prevBaseEvent || baseEvent;
+  }
+
+  function coordOf(e, orthogonal) {
+    return (isTouchEvent(e) ? e.changedTouches[0] : e)["page" + resolve(orthogonal ? "Y" : "X")];
+  }
+
+  function constrain(diff) {
+    return diff / (exceeded && Splide2.is(SLIDE) ? FRICTION : 1);
+  }
+
+  function isDraggable(target2) {
+    var noDrag = options.noDrag;
+    return !matches(target2, "." + CLASS_PAGINATION_PAGE + ", ." + CLASS_ARROW) && (!noDrag || !matches(target2, noDrag));
+  }
+
+  function isTouchEvent(e) {
+    return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
+  }
+
+  function isDragging() {
+    return dragging;
+  }
+
+  function disable(value) {
+    disabled = value;
+  }
+
+  return {
+    mount: mount,
+    disable: disable,
+    isDragging: isDragging
+  };
+}
+
+var NORMALIZATION_MAP = {
+  Spacebar: " ",
+  Right: ARROW_RIGHT,
+  Left: ARROW_LEFT,
+  Up: ARROW_UP,
+  Down: ARROW_DOWN
+};
+
+function normalizeKey(key) {
+  key = isString(key) ? key : key.key;
+  return NORMALIZATION_MAP[key] || key;
+}
+
+var KEYBOARD_EVENT = "keydown";
+
+function Keyboard(Splide2, Components2, options) {
+  var _EventInterface10 = EventInterface(Splide2),
+      on = _EventInterface10.on,
+      bind = _EventInterface10.bind,
+      unbind = _EventInterface10.unbind;
+
+  var root = Splide2.root;
+  var resolve = Components2.Direction.resolve;
+  var target;
+  var disabled;
+
+  function mount() {
+    init();
+    on(EVENT_UPDATED, destroy);
+    on(EVENT_UPDATED, init);
+    on(EVENT_MOVE, onMove);
+  }
+
+  function init() {
+    var keyboard = options.keyboard;
+
+    if (keyboard) {
+      target = keyboard === "global" ? window : root;
+      bind(target, KEYBOARD_EVENT, onKeydown);
+    }
+  }
+
+  function destroy() {
+    unbind(target, KEYBOARD_EVENT);
+  }
+
+  function disable(value) {
+    disabled = value;
+  }
+
+  function onMove() {
+    var _disabled = disabled;
+    disabled = true;
+    nextTick(function () {
+      disabled = _disabled;
+    });
+  }
+
+  function onKeydown(e) {
+    if (!disabled) {
+      var key = normalizeKey(e);
+
+      if (key === resolve(ARROW_LEFT)) {
+        Splide2.go("<");
+      } else if (key === resolve(ARROW_RIGHT)) {
+        Splide2.go(">");
+      }
+    }
+  }
+
+  return {
+    mount: mount,
+    destroy: destroy,
+    disable: disable
+  };
+}
+
+var SRC_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-lazy";
+var SRCSET_DATA_ATTRIBUTE = SRC_DATA_ATTRIBUTE + "-srcset";
+var IMAGE_SELECTOR = "[" + SRC_DATA_ATTRIBUTE + "], [" + SRCSET_DATA_ATTRIBUTE + "]";
+
+function LazyLoad(Splide2, Components2, options) {
+  var _EventInterface11 = EventInterface(Splide2),
+      on = _EventInterface11.on,
+      off = _EventInterface11.off,
+      bind = _EventInterface11.bind,
+      emit = _EventInterface11.emit;
+
+  var isSequential = options.lazyLoad === "sequential";
+  var events = [EVENT_MOVED, EVENT_SCROLLED];
+  var entries = [];
+
+  function mount() {
+    if (options.lazyLoad) {
+      init();
+      on(EVENT_REFRESH, init);
+    }
+  }
+
+  function init() {
+    empty(entries);
+    register();
+
+    if (isSequential) {
+      loadNext();
+    } else {
+      off(events);
+      on(events, check);
+      check();
+    }
+  }
+
+  function register() {
+    Components2.Slides.forEach(function (Slide) {
+      queryAll(Slide.slide, IMAGE_SELECTOR).forEach(function (img) {
+        var src = getAttribute(img, SRC_DATA_ATTRIBUTE);
+        var srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
+
+        if (src !== img.src || srcset !== img.srcset) {
+          var className = options.classes.spinner;
+          var parent = img.parentElement;
+          var spinner = child(parent, "." + className) || create("span", className, parent);
+          entries.push([img, Slide, spinner]);
+          img.src || display(img, "none");
+        }
+      });
+    });
+  }
+
+  function check() {
+    entries = entries.filter(function (data) {
+      var distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
+      return data[1].isWithin(Splide2.index, distance) ? load(data) : true;
+    });
+    entries.length || off(events);
+  }
+
+  function load(data) {
+    var img = data[0];
+    addClass(data[1].slide, CLASS_LOADING);
+    bind(img, "load error", apply(onLoad, data));
+    setAttribute(img, "src", getAttribute(img, SRC_DATA_ATTRIBUTE));
+    setAttribute(img, "srcset", getAttribute(img, SRCSET_DATA_ATTRIBUTE));
+    removeAttribute(img, SRC_DATA_ATTRIBUTE);
+    removeAttribute(img, SRCSET_DATA_ATTRIBUTE);
+  }
+
+  function onLoad(data, e) {
+    var img = data[0],
+        Slide = data[1];
+    removeClass(Slide.slide, CLASS_LOADING);
+
+    if (e.type !== "error") {
+      remove(data[2]);
+      display(img, "");
+      emit(EVENT_LAZYLOAD_LOADED, img, Slide);
+      emit(EVENT_RESIZE);
+    }
+
+    isSequential && loadNext();
+  }
+
+  function loadNext() {
+    entries.length && load(entries.shift());
+  }
+
+  return {
+    mount: mount,
+    destroy: apply(empty, entries),
+    check: check
+  };
+}
+
+function Pagination(Splide2, Components2, options) {
+  var event = EventInterface(Splide2);
+  var on = event.on,
+      emit = event.emit,
+      bind = event.bind;
+  var Slides = Components2.Slides,
+      Elements = Components2.Elements,
+      Controller = Components2.Controller;
+  var hasFocus = Controller.hasFocus,
+      getIndex = Controller.getIndex,
+      go = Controller.go;
+  var resolve = Components2.Direction.resolve;
+  var placeholder = Elements.pagination;
+  var items = [];
+  var list;
+  var paginationClasses;
+
+  function mount() {
+    destroy();
+    on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount);
+    var enabled = options.pagination;
+    placeholder && display(placeholder, enabled ? "" : "none");
+
+    if (enabled) {
+      on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
+      createPagination();
+      update();
+      emit(EVENT_PAGINATION_MOUNTED, {
+        list: list,
+        items: items
+      }, getAt(Splide2.index));
+    }
+  }
+
+  function destroy() {
+    if (list) {
+      remove(placeholder ? slice(list.children) : list);
+      removeClass(list, paginationClasses);
+      empty(items);
+      list = null;
+    }
+
+    event.destroy();
+  }
+
+  function createPagination() {
+    var length = Splide2.length;
+    var classes = options.classes,
+        i18n = options.i18n,
+        perPage = options.perPage;
+    var max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
+    list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
+    addClass(list, paginationClasses = CLASS_PAGINATION + "--" + getDirection());
+    setAttribute(list, ROLE, "tablist");
+    setAttribute(list, ARIA_LABEL, i18n.select);
+    setAttribute(list, ARIA_ORIENTATION, getDirection() === TTB ? "vertical" : "");
+
+    for (var i = 0; i < max; i++) {
+      var li = create("li", null, list);
+      var button = create("button", {
+        class: classes.page,
+        type: "button"
+      }, li);
+      var controls = Slides.getIn(i).map(function (Slide) {
+        return Slide.slide.id;
+      });
+      var text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
+      bind(button, "click", apply(onClick, i));
+
+      if (options.paginationKeyboard) {
+        bind(button, "keydown", apply(onKeydown, i));
+      }
+
+      setAttribute(li, ROLE, "presentation");
+      setAttribute(button, ROLE, "tab");
+      setAttribute(button, ARIA_CONTROLS, controls.join(" "));
+      setAttribute(button, ARIA_LABEL, format(text, i + 1));
+      setAttribute(button, TAB_INDEX, -1);
+      items.push({
+        li: li,
+        button: button,
+        page: i
+      });
+    }
+  }
+
+  function onClick(page) {
+    go(">" + page, true);
+  }
+
+  function onKeydown(page, e) {
+    var length = items.length;
+    var key = normalizeKey(e);
+    var dir = getDirection();
+    var nextPage = -1;
+
+    if (key === resolve(ARROW_RIGHT, false, dir)) {
+      nextPage = ++page % length;
+    } else if (key === resolve(ARROW_LEFT, false, dir)) {
+      nextPage = (--page + length) % length;
+    } else if (key === "Home") {
+      nextPage = 0;
+    } else if (key === "End") {
+      nextPage = length - 1;
+    }
+
+    var item = items[nextPage];
+
+    if (item) {
+      focus(item.button);
+      go(">" + nextPage);
+      prevent(e, true);
+    }
+  }
+
+  function getDirection() {
+    return options.paginationDirection || options.direction;
+  }
+
+  function getAt(index) {
+    return items[Controller.toPage(index)];
+  }
+
+  function update() {
+    var prev = getAt(getIndex(true));
+    var curr = getAt(getIndex());
+
+    if (prev) {
+      var button = prev.button;
+      removeClass(button, CLASS_ACTIVE);
+      removeAttribute(button, ARIA_SELECTED);
+      setAttribute(button, TAB_INDEX, -1);
+    }
+
+    if (curr) {
+      var _button = curr.button;
+      addClass(_button, CLASS_ACTIVE);
+      setAttribute(_button, ARIA_SELECTED, true);
+      setAttribute(_button, TAB_INDEX, "");
+    }
+
+    emit(EVENT_PAGINATION_UPDATED, {
+      list: list,
+      items: items
+    }, prev, curr);
+  }
+
+  return {
+    items: items,
+    mount: mount,
+    destroy: destroy,
+    getAt: getAt,
+    update: update
+  };
+}
+
+var TRIGGER_KEYS = [" ", "Enter"];
+
+function Sync(Splide2, Components2, options) {
+  var isNavigation = options.isNavigation,
+      slideFocus = options.slideFocus;
+  var events = [];
+
+  function mount() {
+    Splide2.splides.forEach(function (target) {
+      if (!target.isParent) {
+        sync(Splide2, target.splide);
+        sync(target.splide, Splide2);
+      }
+    });
+
+    if (isNavigation) {
+      navigate();
+    }
+  }
+
+  function destroy() {
+    events.forEach(function (event) {
+      event.destroy();
+    });
+    empty(events);
+  }
+
+  function remount() {
+    destroy();
+    mount();
+  }
+
+  function sync(splide, target) {
+    var event = EventInterface(splide);
+    event.on(EVENT_MOVE, function (index, prev, dest) {
+      target.go(target.is(LOOP) ? dest : index);
+    });
+    events.push(event);
+  }
+
+  function navigate() {
+    var event = EventInterface(Splide2);
+    var on = event.on;
+    on(EVENT_CLICK, onClick);
+    on(EVENT_SLIDE_KEYDOWN, onKeydown);
+    on([EVENT_MOUNTED, EVENT_UPDATED], update);
+    events.push(event);
+    event.emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+  }
+
+  function update() {
+    setAttribute(Components2.Elements.list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
+  }
+
+  function onClick(Slide) {
+    Splide2.go(Slide.index);
+  }
+
+  function onKeydown(Slide, e) {
+    if (includes(TRIGGER_KEYS, normalizeKey(e))) {
+      onClick(Slide);
+      prevent(e);
+    }
+  }
+
+  return {
+    setup: apply(Components2.Media.set, {
+      slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus
+    }, true),
+    mount: mount,
+    destroy: destroy,
+    remount: remount
+  };
+}
+
+function Wheel(Splide2, Components2, options) {
+  var _EventInterface12 = EventInterface(Splide2),
+      bind = _EventInterface12.bind;
+
+  var lastTime = 0;
+
+  function mount() {
+    if (options.wheel) {
+      bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
+    }
+  }
+
+  function onWheel(e) {
+    if (e.cancelable) {
+      var deltaY = e.deltaY;
+      var backwards = deltaY < 0;
+      var timeStamp = timeOf(e);
+
+      var _min = options.wheelMinThreshold || 0;
+
+      var sleep = options.wheelSleep || 0;
+
+      if (abs(deltaY) > _min && timeStamp - lastTime > sleep) {
+        Splide2.go(backwards ? "<" : ">");
+        lastTime = timeStamp;
+      }
+
+      shouldPrevent(backwards) && prevent(e);
+    }
+  }
+
+  function shouldPrevent(backwards) {
+    return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;
+  }
+
+  return {
+    mount: mount
+  };
+}
+
+var SR_REMOVAL_DELAY = 90;
+
+function Live(Splide2, Components2, options) {
+  var _EventInterface13 = EventInterface(Splide2),
+      on = _EventInterface13.on;
+
+  var track = Components2.Elements.track;
+  var enabled = options.live && !options.isNavigation;
+  var sr = create("span", CLASS_SR);
+  var interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));
+
+  function mount() {
+    if (enabled) {
+      disable(!Components2.Autoplay.isPaused());
+      setAttribute(track, ARIA_ATOMIC, true);
+      sr.textContent = "\u2026";
+      on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
+      on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
+      on([EVENT_MOVED, EVENT_SCROLLED], apply(toggle, true));
+    }
+  }
+
+  function toggle(active) {
+    setAttribute(track, ARIA_BUSY, active);
+
+    if (active) {
+      append(track, sr);
+      interval.start();
+    } else {
+      remove(sr);
+      interval.cancel();
+    }
+  }
+
+  function destroy() {
+    removeAttribute(track, [ARIA_LIVE, ARIA_ATOMIC, ARIA_BUSY]);
+    remove(sr);
+  }
+
+  function disable(disabled) {
+    if (enabled) {
+      setAttribute(track, ARIA_LIVE, disabled ? "off" : "polite");
+    }
+  }
+
+  return {
+    mount: mount,
+    disable: disable,
+    destroy: destroy
+  };
+}
+
+var ComponentConstructors = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Media: Media,
+  Direction: Direction,
+  Elements: Elements,
+  Slides: Slides,
+  Layout: Layout,
+  Clones: Clones,
+  Move: Move,
+  Controller: Controller,
+  Arrows: Arrows,
+  Autoplay: Autoplay,
+  Cover: Cover,
+  Scroll: Scroll,
+  Drag: Drag,
+  Keyboard: Keyboard,
+  LazyLoad: LazyLoad,
+  Pagination: Pagination,
+  Sync: Sync,
+  Wheel: Wheel,
+  Live: Live
+});
+var I18N = {
+  prev: "Previous slide",
+  next: "Next slide",
+  first: "Go to first slide",
+  last: "Go to last slide",
+  slideX: "Go to slide %s",
+  pageX: "Go to page %s",
+  play: "Start autoplay",
+  pause: "Pause autoplay",
+  carousel: "carousel",
+  slide: "slide",
+  select: "Select a slide to show",
+  slideLabel: "%s of %s"
+};
+var DEFAULTS = {
+  type: "slide",
+  role: "region",
+  speed: 400,
+  perPage: 1,
+  cloneStatus: true,
+  arrows: true,
+  pagination: true,
+  paginationKeyboard: true,
+  interval: 5e3,
+  pauseOnHover: true,
+  pauseOnFocus: true,
+  resetProgress: true,
+  easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+  drag: true,
+  direction: "ltr",
+  trimSpace: true,
+  focusableNodes: "a, button, textarea, input, select, iframe",
+  live: true,
+  classes: CLASSES,
+  i18n: I18N,
+  reducedMotion: {
+    speed: 0,
+    rewindSpeed: 0,
+    autoplay: "pause"
+  }
+};
+
+function Fade(Splide2, Components2, options) {
+  var Slides = Components2.Slides;
+
+  function mount() {
+    EventInterface(Splide2).on([EVENT_MOUNTED, EVENT_REFRESH], init);
+  }
+
+  function init() {
+    Slides.forEach(function (Slide) {
+      Slide.style("transform", "translateX(-" + 100 * Slide.index + "%)");
+    });
+  }
+
+  function start(index, done) {
+    Slides.style("transition", "opacity " + options.speed + "ms " + options.easing);
+    nextTick(done);
+  }
+
+  return {
+    mount: mount,
+    start: start,
+    cancel: noop
+  };
+}
+
+function Slide(Splide2, Components2, options) {
+  var Move = Components2.Move,
+      Controller = Components2.Controller,
+      Scroll = Components2.Scroll;
+  var list = Components2.Elements.list;
+  var transition = apply(style, list, "transition");
+  var endCallback;
+
+  function mount() {
+    EventInterface(Splide2).bind(list, "transitionend", function (e) {
+      if (e.target === list && endCallback) {
+        cancel();
+        endCallback();
+      }
+    });
+  }
+
+  function start(index, done) {
+    var destination = Move.toPosition(index, true);
+    var position = Move.getPosition();
+    var speed = getSpeed(index);
+
+    if (abs(destination - position) >= 1 && speed >= 1) {
+      if (options.useScroll) {
+        Scroll.scroll(destination, speed, false, done);
+      } else {
+        transition("transform " + speed + "ms " + options.easing);
+        Move.translate(destination, true);
+        endCallback = done;
+      }
+    } else {
+      Move.jump(index);
+      done();
+    }
+  }
+
+  function cancel() {
+    transition("");
+    Scroll.cancel();
+  }
+
+  function getSpeed(index) {
+    var rewindSpeed = options.rewindSpeed;
+
+    if (Splide2.is(SLIDE) && rewindSpeed) {
+      var prev = Controller.getIndex(true);
+      var end = Controller.getEnd();
+
+      if (prev === 0 && index >= end || prev >= end && index === 0) {
+        return rewindSpeed;
+      }
+    }
+
+    return options.speed;
+  }
+
+  return {
+    mount: mount,
+    start: start,
+    cancel: cancel
+  };
+}
+
+var _Splide = /*#__PURE__*/function () {
+  function _Splide(target, options) {
+    this.event = EventInterface();
+    this.Components = {};
+    this.state = State(CREATED);
+    this.splides = [];
+    this._o = {};
+    this._E = {};
+    var root = isString(target) ? query(document, target) : target;
+    assert(root, root + " is invalid.");
+    this.root = root;
+    options = merge({
+      label: getAttribute(root, ARIA_LABEL) || "",
+      labelledby: getAttribute(root, ARIA_LABELLEDBY) || ""
+    }, DEFAULTS, _Splide.defaults, options || {});
+
+    try {
+      merge(options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));
+    } catch (e) {
+      assert(false, "Invalid JSON");
+    }
+
+    this._o = Object.create(merge({}, options));
+  }
+
+  var _proto = _Splide.prototype;
+
+  _proto.mount = function mount(Extensions, Transition) {
+    var _this = this;
+
+    var state = this.state,
+        Components2 = this.Components;
+    assert(state.is([CREATED, DESTROYED]), "Already mounted!");
+    state.set(CREATED);
+    this._C = Components2;
+    this._T = Transition || this._T || (this.is(FADE) ? Fade : Slide);
+    this._E = Extensions || this._E;
+    var Constructors = assign({}, ComponentConstructors, this._E, {
+      Transition: this._T
+    });
+    forOwn(Constructors, function (Component, key) {
+      var component = Component(_this, Components2, _this._o);
+      Components2[key] = component;
+      component.setup && component.setup();
+    });
+    forOwn(Components2, function (component) {
+      component.mount && component.mount();
+    });
+    this.emit(EVENT_MOUNTED);
+    addClass(this.root, CLASS_INITIALIZED);
+    state.set(IDLE);
+    this.emit(EVENT_READY);
+    return this;
+  };
+
+  _proto.sync = function sync(splide) {
+    this.splides.push({
+      splide: splide
+    });
+    splide.splides.push({
+      splide: this,
+      isParent: true
+    });
+
+    if (this.state.is(IDLE)) {
+      this._C.Sync.remount();
+
+      splide.Components.Sync.remount();
+    }
+
+    return this;
+  };
+
+  _proto.go = function go(control) {
+    this._C.Controller.go(control);
+
+    return this;
+  };
+
+  _proto.on = function on(events, callback) {
+    this.event.on(events, callback);
+    return this;
+  };
+
+  _proto.off = function off(events) {
+    this.event.off(events);
+    return this;
+  };
+
+  _proto.emit = function emit(event) {
+    var _this$event;
+
+    (_this$event = this.event).emit.apply(_this$event, [event].concat(slice(arguments, 1)));
+
+    return this;
+  };
+
+  _proto.add = function add(slides, index) {
+    this._C.Slides.add(slides, index);
+
+    return this;
+  };
+
+  _proto.remove = function remove(matcher) {
+    this._C.Slides.remove(matcher);
+
+    return this;
+  };
+
+  _proto.is = function is(type) {
+    return this._o.type === type;
+  };
+
+  _proto.refresh = function refresh() {
+    this.emit(EVENT_REFRESH);
+    return this;
+  };
+
+  _proto.destroy = function destroy(completely) {
+    if (completely === void 0) {
+      completely = true;
+    }
+
+    var event = this.event,
+        state = this.state;
+
+    if (state.is(CREATED)) {
+      EventInterface(this).on(EVENT_READY, this.destroy.bind(this, completely));
+    } else {
+      forOwn(this._C, function (component) {
+        component.destroy && component.destroy(completely);
+      }, true);
+      event.emit(EVENT_DESTROY);
+      event.destroy();
+      completely && empty(this.splides);
+      state.set(DESTROYED);
+    }
+
+    return this;
+  };
+
+  _createClass(_Splide, [{
+    key: "options",
+    get: function get() {
+      return this._o;
+    },
+    set: function set(options) {
+      this._C.Media.set(options, true, true);
+    }
+  }, {
+    key: "length",
+    get: function get() {
+      return this._C.Slides.getLength(true);
+    }
+  }, {
+    key: "index",
+    get: function get() {
+      return this._C.Controller.getIndex();
+    }
+  }]);
+
+  return _Splide;
+}();
+
+var Splide = _Splide;
+Splide.defaults = {};
+Splide.STATES = STATES;
+
+var collectionStyles = ".jaaq-collection-player {\n  width: 100%;\n  max-width: 1400px;\n  margin: 0 auto;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n}\n\n.jaaq-collection-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 400px;\n}\n\n.jaaq-collection-spinner {\n  width: 50px;\n  height: 50px;\n  border: 4px solid rgba(0, 123, 255, 0.3);\n  border-top-color: #007bff;\n  border-radius: 50%;\n  animation: jaaq-collection-spin 1s linear infinite;\n}\n\n@keyframes jaaq-collection-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.jaaq-collection-error {\n  background: rgba(220, 53, 69, 0.9);\n  color: white;\n  padding: 16px 24px;\n  border-radius: 8px;\n  text-align: center;\n  font-size: 14px;\n  margin: 20px;\n}\n\n.jaaq-collection-carousel .splide__track {\n  padding: 40px 0;\n}\n\n.jaaq-collection-carousel .splide__slide {\n  opacity: 0.7;\n  transition: all 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.jaaq-collection-carousel .splide__slide.is-active {\n  opacity: 1;\n}\n\n.jaaq-collection-carousel .splide__slide jaaq-video-player {\n  width: 100%;\n  max-width: 600px;\n  transition: all 0.3s ease;\n}\n\n.jaaq-collection-carousel .splide__slide.is-active jaaq-video-player {\n  max-width: 800px;\n}\n\n.jaaq-collection-carousel .splide__arrow {\n  background: rgba(0, 0, 0, 0.5);\n  border: none;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  color: white;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n}\n\n.jaaq-collection-carousel .splide__arrow:hover {\n  background: rgba(0, 0, 0, 0.8);\n  transform: scale(1.1);\n}\n\n.jaaq-collection-carousel .splide__arrow:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.jaaq-collection-carousel .splide__arrow svg {\n  fill: white;\n  width: 20px;\n  height: 20px;\n}\n\n.jaaq-collection-carousel .splide__pagination {\n  bottom: -30px;\n}\n\n.jaaq-collection-carousel .splide__pagination__page {\n  background: #ccc;\n  border: none;\n  width: 10px;\n  height: 10px;\n  margin: 0 4px;\n  border-radius: 50%;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n\n.jaaq-collection-carousel .splide__pagination__page.is-active {\n  background: white;\n  transform: scale(1.3);\n}\n\n@media (max-width: 1024px) {\n  .jaaq-collection-carousel .splide__slide jaaq-video-player {\n    max-width: 500px;\n  }\n\n  .jaaq-collection-carousel .splide__slide.is-active jaaq-video-player {\n    max-width: 650px;\n  }\n}\n\n@media (max-width: 768px) {\n  .jaaq-collection-carousel .splide__track {\n    padding: 20px 0;\n  }\n\n  .jaaq-collection-carousel .splide__slide jaaq-video-player {\n    max-width: 400px;\n  }\n\n  .jaaq-collection-carousel .splide__slide.is-active jaaq-video-player {\n    max-width: 500px;\n  }\n\n  .jaaq-collection-carousel .splide__arrow {\n    width: 40px;\n    height: 40px;\n  }\n}\n\n@media (max-width: 480px) {\n  .jaaq-collection-carousel .splide__slide jaaq-video-player {\n    max-width: 100%;\n  }\n\n  .jaaq-collection-carousel .splide__slide.is-active jaaq-video-player {\n    max-width: 100%;\n  }\n}\n";
+
+var splideStyles = ".splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}";
+
+const COMPONENT_STYLES = `
+:host {
+  display: block;
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+class JaaqCollectionPlayerElement extends HTMLElement {
+    static get observedAttributes() {
+        return ['collection-id', 'api-key', 'client-id', 'subscription-id', 'base-url', 'autoplay', 'show-arrows', 'show-dots'];
+    }
+    constructor() {
+        super();
+        this.splide = null;
+        this.container = null;
+        this.carouselElement = null;
+        this.clientInstance = null;
+        this.connected = false;
+        this.collectionData = null;
+        this.autoplayTimeoutId = null;
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this.connected = true;
+        this.render();
+        this.initCarousel();
+    }
+    disconnectedCallback() {
+        this.connected = false;
+        this.destroyCarousel();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (!this.connected || oldValue === newValue)
+            return;
+        if (name === 'collection-id') {
+            this.destroyCarousel();
+            this.initCarousel();
+        }
+        if (name === 'show-arrows' || name === 'show-dots') {
+            this.destroyCarousel();
+            this.initCarousel();
+        }
+    }
+    getBooleanAttr(name, defaultValue) {
+        const v = this.getAttribute(name);
+        if (v === null)
+            return defaultValue;
+        return v !== 'false';
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const styleSheet = document.createElement('style');
+        styleSheet.textContent = `
+      ${sharedStyles}
+      ${collectionStyles}
+      ${splideStyles}
+      ${COMPONENT_STYLES}
+    `;
+        this.container = document.createElement('div');
+        this.container.className = 'jaaq-collection-player';
+        this.shadowRoot.appendChild(styleSheet);
+        this.shadowRoot.appendChild(this.container);
+    }
+    async initCarousel() {
+        if (!this.container)
+            return;
+        const collectionId = this.getAttribute('collection-id');
+        if (!collectionId) {
+            this.emitError(new Error('collection-id attribute is required'));
+            return;
+        }
+        const apiKey = this.getAttribute('api-key');
+        const clientId = this.getAttribute('client-id');
+        const baseUrl = this.getAttribute('base-url') || undefined;
+        if (!this.clientInstance && !apiKey && !clientId) {
+            this.emitError(new Error('Either client property or api-key and client-id attributes are required'));
+            return;
+        }
+        this.showLoading();
+        try {
+            const client = this.clientInstance ||
+                JaaqClient.init({
+                    apiKey: apiKey,
+                    clientId: clientId,
+                    baseUrl: baseUrl || BASE_URL,
+                });
+            this.collectionData = await client.collections.getById(collectionId);
+            if (!this.collectionData.videos || this.collectionData.videos.length === 0) {
+                this.emitError(new Error('No videos found in collection'));
+                return;
+            }
+            this.renderCarousel();
+            this.initSplide();
+            this.dispatchEvent(new CustomEvent('jaaq:collection:loaded', {
+                detail: this.collectionData,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.emitError(error instanceof Error ? error : new Error('Failed to load collection'));
+        }
+    }
+    showLoading() {
+        if (!this.container)
+            return;
+        this.container.innerHTML = `
+      <div class="jaaq-collection-loading">
+        <div class="jaaq-collection-spinner"></div>
+      </div>
+    `;
+    }
+    renderCarousel() {
+        if (!this.container || !this.collectionData)
+            return;
+        this.container.innerHTML = '';
+        this.carouselElement = document.createElement('div');
+        this.carouselElement.className = 'splide jaaq-collection-carousel';
+        const track = document.createElement('div');
+        track.className = 'splide__track';
+        const list = document.createElement('ul');
+        list.className = 'splide__list';
+        const apiKey = this.getAttribute('api-key');
+        const clientId = this.getAttribute('client-id');
+        const baseUrl = this.getAttribute('base-url');
+        this.collectionData.videos.forEach((video) => {
+            const slide = document.createElement('li');
+            slide.className = 'splide__slide';
+            const player = document.createElement('jaaq-video-player');
+            player.setAttribute('video-id', video.videoId);
+            if (apiKey)
+                player.setAttribute('api-key', apiKey);
+            if (clientId)
+                player.setAttribute('client-id', clientId);
+            if (baseUrl)
+                player.setAttribute('base-url', baseUrl);
+            player.setAttribute('autoplay', 'false');
+            player.setAttribute('width', '100%');
+            slide.appendChild(player);
+            list.appendChild(slide);
+        });
+        track.appendChild(list);
+        this.carouselElement.appendChild(track);
+        this.container.appendChild(this.carouselElement);
+    }
+    initSplide() {
+        if (!this.carouselElement)
+            return;
+        const showArrows = this.getBooleanAttr('show-arrows', true);
+        const showDots = this.getBooleanAttr('show-dots', true);
+        this.splide = new Splide(this.carouselElement, {
+            type: 'loop',
+            perPage: 3,
+            focus: 'center',
+            gap: '0.5rem',
+            perMove: 1,
+            autoHeight: true,
+            updateOnMove: true,
+            padding: '5 rem',
+            breakpoints: {
+                768: {
+                    perPage: 1,
+                },
+                1024: {
+                    perPage: 2,
+                },
+            },
+            arrows: showArrows,
+            pagination: showDots,
+            autoplay: false,
+        });
+        this.splide.on('moved', (newIndex) => {
+            console.log('[CollectionPlayer] Splide moved event', {
+                newIndex,
+                splideIndex: this.splide?.index,
+                Components: this.splide?.Components,
+            });
+            this.handleSlideChange(newIndex);
+            this.dispatchEvent(new CustomEvent('jaaq:collection:slidechange', {
+                detail: { index: newIndex, video: this.collectionData?.videos[newIndex] },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+        this.splide.mount();
+        console.log('[CollectionPlayer] After mount', {
+            splideIndex: this.splide.index,
+            length: this.splide.length,
+        });
+        setTimeout(() => {
+            if (this.splide) {
+                console.log('[CollectionPlayer] Initial handleSlideChange after DOM update');
+                this.handleSlideChange(this.splide.index);
+            }
+        }, 100);
+    }
+    handleSlideChange(activeIndex) {
+        if (!this.carouselElement)
+            return;
+        const isAutoplayEnabled = this.hasAttribute('autoplay') && this.getAttribute('autoplay') !== 'false';
+        console.log('[CollectionPlayer] handleSlideChange called', { activeIndex, isAutoplayEnabled });
+        if (this.autoplayTimeoutId !== null) {
+            console.log('[CollectionPlayer] Clearing existing autoplay timeout', { timeoutId: this.autoplayTimeoutId });
+            clearTimeout(this.autoplayTimeoutId);
+            this.autoplayTimeoutId = null;
+        }
+        const activeSlide = this.carouselElement.querySelector('.splide__slide.is-active:not(.splide__slide--clone)');
+        const activePlayer = activeSlide?.querySelector('jaaq-video-player');
+        const activeVideoId = activePlayer?.getAttribute('video-id');
+        console.log('[CollectionPlayer] Active slide from DOM:', {
+            activeIndex,
+            activeVideoId,
+            foundActiveSlide: !!activeSlide,
+        });
+        const originalSlides = this.carouselElement.querySelectorAll('.splide__slide:not(.splide__slide--clone)');
+        Array.from(originalSlides).map((slide, idx) => {
+            const player = slide.querySelector('jaaq-video-player');
+            const videoId = player?.getAttribute('video-id') || 'unknown';
+            const isActive = slide.classList.contains('is-active');
+            return {
+                index: idx,
+                videoId,
+                isActive,
+            };
+        });
+        originalSlides.forEach((slide, index) => {
+            const player = slide.querySelector('jaaq-video-player');
+            if (!player)
+                return;
+            const videoId = player.getAttribute('video-id');
+            const isActive = slide.classList.contains('is-active');
+            if (isActive) {
+                if (isAutoplayEnabled) {
+                    this.autoplayTimeoutId = window.setTimeout(() => {
+                        console.log('[CollectionPlayer] 1s delay complete, playing video', {
+                            index,
+                            videoId,
+                        });
+                        player.play?.();
+                    }, 1000);
+                }
+            }
+            else {
+                player.pause?.();
+            }
+        });
+    }
+    destroyCarousel() {
+        if (this.autoplayTimeoutId !== null) {
+            clearTimeout(this.autoplayTimeoutId);
+            this.autoplayTimeoutId = null;
+        }
+        if (this.splide) {
+            this.splide.destroy();
+            this.splide = null;
+        }
+        if (this.container) {
+            this.container.innerHTML = '';
+        }
+        this.collectionData = null;
+    }
+    emitError(error) {
+        if (this.container) {
+            this.container.innerHTML = `
+        <div class="jaaq-collection-error">
+          ${error.message}
+        </div>
+      `;
+        }
+        this.dispatchEvent(new CustomEvent('jaaq:collection:error', {
+            detail: error,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    get client() {
+        return this.clientInstance;
+    }
+    set client(value) {
+        this.clientInstance = value;
+        if (this.connected) {
+            this.destroyCarousel();
+            this.initCarousel();
+        }
+    }
+    get collectionId() {
+        return this.getAttribute('collection-id');
+    }
+    set collectionId(value) {
+        if (value) {
+            this.setAttribute('collection-id', value);
+        }
+        else {
+            this.removeAttribute('collection-id');
+        }
+    }
+    refresh() {
+        this.destroyCarousel();
+        this.initCarousel();
+    }
+    next() {
+        this.splide?.go('+1');
+    }
+    prev() {
+        this.splide?.go('-1');
+    }
+    go(index) {
+        this.splide?.go(index);
+    }
+    destroy() {
+        this.destroyCarousel();
+    }
+    getCollection() {
+        return this.collectionData;
+    }
+}
+
+const COMPONENT_TAGS = {
+    VIDEO_PLAYER: 'jaaq-video-player',
+    COLLECTION_PLAYER: 'jaaq-collection-player',
+};
+/**
+ * Registers JAAQ custom elements (<jaaq-video-player> and <jaaq-collection-player>)
+ * Safe to call multiple times - only registers if not already registered
+ *
+ * @example
+ * import { registerJaaqComponents } from '@jaaq/jaaq-sdk-js/ui/webcomponents';
+ * registerJaaqComponents();
+ */
+function registerJaaqComponents() {
+    if (typeof window === 'undefined' || typeof customElements === 'undefined') {
+        console.warn('Custom Elements API is not available. Web components cannot be registered.');
+        return;
+    }
+    if (!customElements.get(COMPONENT_TAGS.VIDEO_PLAYER)) {
+        customElements.define(COMPONENT_TAGS.VIDEO_PLAYER, JaaqVideoPlayerElement);
+    }
+    if (!customElements.get(COMPONENT_TAGS.COLLECTION_PLAYER)) {
+        customElements.define(COMPONENT_TAGS.COLLECTION_PLAYER, JaaqCollectionPlayerElement);
+    }
+}
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            registerJaaqComponents();
+        });
+    }
+    else {
+        registerJaaqComponents();
+    }
+}
+
+if (typeof window !== 'undefined') {
+    registerJaaqComponents();
+}
+function VideoPlayerComponent({ videoId, apiKey, clientId, client, baseUrl, autoplay = false, controls = true, width = '100%', height = 'auto', className = '', showLogo = true, showTitle = true, showAuthor = true, showDescription = true, showCaptions = true, onPlay, onPause, onError, onLoaded, onTimeUpdate, onVolumeChange, onEnded, onFullscreenChange, showInfo = false, }, ref) {
+    const playerRef = useRef(null);
+    const videoDataRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        play: () => playerRef.current?.play(),
+        pause: () => playerRef.current?.pause(),
+        setVolume: (volume) => playerRef.current?.setVolume(volume),
+        toggleMute: () => playerRef.current?.toggleMute(),
+        seek: (time) => playerRef.current?.seek(time),
+        getState: () => playerRef.current?.getState() || null,
+        destroy: () => playerRef.current?.destroy(),
+    }));
+    const handleLoaded = (e) => {
+        const detail = e.detail;
+        videoDataRef.current = detail;
+        onLoaded?.(detail);
+    };
+    const handlePlay = () => onPlay?.();
+    const handlePause = () => onPause?.();
+    const handleTimeUpdate = (e) => {
+        const time = e.detail;
+        onTimeUpdate?.(time);
+    };
+    const handleVolumeChange = (e) => {
+        const volume = e.detail;
+        onVolumeChange?.(volume);
+    };
+    const handleEnded = () => onEnded?.();
+    const handleError = (e) => {
+        const error = e.detail;
+        onError?.(error);
+    };
+    const handleFullscreenChange = (e) => {
+        const isFullscreen = e.detail;
+        onFullscreenChange?.(isFullscreen);
+    };
+    useEffect(() => {
+        const player = playerRef.current;
+        if (!player)
+            return;
+        if (client) {
+            player.client = client;
+        }
+        player.addEventListener('jaaq:loaded', handleLoaded);
+        player.addEventListener('jaaq:play', handlePlay);
+        player.addEventListener('jaaq:pause', handlePause);
+        player.addEventListener('jaaq:timeupdate', handleTimeUpdate);
+        player.addEventListener('jaaq:volumechange', handleVolumeChange);
+        player.addEventListener('jaaq:ended', handleEnded);
+        player.addEventListener('jaaq:error', handleError);
+        player.addEventListener('jaaq:fullscreenchange', handleFullscreenChange);
+        return () => {
+            player.removeEventListener('jaaq:loaded', handleLoaded);
+            player.removeEventListener('jaaq:play', handlePlay);
+            player.removeEventListener('jaaq:pause', handlePause);
+            player.removeEventListener('jaaq:timeupdate', handleTimeUpdate);
+            player.removeEventListener('jaaq:volumechange', handleVolumeChange);
+            player.removeEventListener('jaaq:ended', handleEnded);
+            player.removeEventListener('jaaq:error', handleError);
+            player.removeEventListener('jaaq:fullscreenchange', handleFullscreenChange);
+        };
+    }, [client, onPlay, onPause, onError, onLoaded, onTimeUpdate, onVolumeChange, onEnded, onFullscreenChange]);
+    return (React.createElement("div", { style: { width, height }, className: className },
+        React.createElement("jaaq-video-player", { ref: playerRef, "video-id": videoId, "api-key": apiKey, "client-id": clientId, "base-url": baseUrl, autoplay: autoplay ? 'true' : 'false', controls: controls ? 'true' : 'false', "show-logo": showLogo ? 'true' : 'false', "show-title": showTitle ? 'true' : 'false', "show-author": showAuthor ? 'true' : 'false', "show-description": showDescription ? 'true' : 'false', "show-captions": showCaptions ? 'true' : 'false', width: "100%", height: "auto" }),
+        showInfo && videoDataRef.current && (React.createElement("div", { className: "jaaq-video-info", style: { marginTop: '16px', padding: '16px', background: '#f8f9fa', borderRadius: '8px' } },
+            React.createElement("h3", { style: { margin: '0 0 12px 0', fontSize: '18px' } }, videoDataRef.current.question || videoDataRef.current.description || 'Untitled Video'),
+            React.createElement("p", { style: { margin: '0 0 8px 0' } },
+                React.createElement("strong", null, "Video ID:"),
+                " ",
+                videoDataRef.current.id),
+            React.createElement("p", { style: { margin: '0 0 8px 0' } },
+                React.createElement("strong", null, "Duration:"),
+                " ",
+                videoDataRef.current.duration || 'Unknown',
+                " seconds")))));
+}
+VideoPlayerComponent.displayName = 'VideoPlayer';
+const VideoPlayer = forwardRef(VideoPlayerComponent);
+
+if (typeof window !== 'undefined') {
+    registerJaaqComponents();
+}
+function CollectionPlayerComponent({ collectionId, apiKey, clientId, subscriptionId, client, baseUrl, autoplay = false, showArrows = true, showDots = true, className = '', onLoaded, onError, onSlideChange, }, ref) {
+    const playerRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        refresh: () => playerRef.current?.refresh(),
+        next: () => playerRef.current?.next(),
+        prev: () => playerRef.current?.prev(),
+        go: (index) => playerRef.current?.go(index),
+        destroy: () => playerRef.current?.destroy(),
+        getCollection: () => playerRef.current?.getCollection() || null,
+    }));
+    const handleLoaded = (e) => {
+        const collection = e.detail;
+        onLoaded?.(collection);
+    };
+    const handleError = (e) => {
+        const error = e.detail;
+        onError?.(error);
+    };
+    const handleSlideChange = (e) => {
+        const data = e.detail;
+        onSlideChange?.(data);
+    };
+    useEffect(() => {
+        const player = playerRef.current;
+        if (!player)
+            return;
+        if (client) {
+            player.client = client;
+        }
+        player.addEventListener('jaaq:collection:loaded', handleLoaded);
+        player.addEventListener('jaaq:collection:error', handleError);
+        player.addEventListener('jaaq:collection:slidechange', handleSlideChange);
+        return () => {
+            player.removeEventListener('jaaq:collection:loaded', handleLoaded);
+            player.removeEventListener('jaaq:collection:error', handleError);
+            player.removeEventListener('jaaq:collection:slidechange', handleSlideChange);
+        };
+    }, [client, onLoaded, onError, onSlideChange]);
+    return (React.createElement("div", { className: className },
+        React.createElement("jaaq-collection-player", { ref: playerRef, "collection-id": collectionId, "api-key": apiKey, "client-id": clientId, "subscription-id": subscriptionId, "base-url": baseUrl, autoplay: autoplay ? 'true' : 'false', "show-arrows": showArrows ? 'true' : 'false', "show-dots": showDots ? 'true' : 'false' })));
+}
+CollectionPlayerComponent.displayName = 'CollectionPlayer';
+const CollectionPlayer = forwardRef(CollectionPlayerComponent);
+
+export { CollectionPlayer, VideoPlayer };
+//# sourceMappingURL=index.mjs.map