@jaaq/jaaq-sdk-js 1.1.0 → 1.1.1-dev-40aa96f-20251218

package/README.md

@@ -198,6 +198,7 @@ Declarative usage:
   autoplay="false"
   show-arrows="true"
   show-dots="true"
+  video-settings='{"controls":true,"showLogo":false,"showTitle":true,"showAuthor":true,"showDescription":false,"showCaptions":true}'
 ></jaaq-collection-player>
 ```
 
@@ -210,6 +211,17 @@ const player = document.createElement('jaaq-collection-player');
 player.setAttribute('collection-id', 'your-collection-id');
 player.setAttribute('api-key', 'your-api-key');
 player.setAttribute('client-id', 'your-client-id');
+player.setAttribute(
+  'video-settings',
+  JSON.stringify({
+    controls: true,
+    showLogo: false,
+    showTitle: true,
+    showAuthor: true,
+    showDescription: false,
+    showCaptions: true,
+  }),
+);
 
 player.addEventListener('jaaq:collection:loaded', (e) => {
   console.log(e.detail);
@@ -220,16 +232,17 @@ document.body.appendChild(player);
 
 #### Attributes
 
-| Attribute         | Type      | Required    | Default                | Notes                               |
-| ----------------- | --------- | ----------- | ---------------------- | ----------------------------------- |
-| `collection-id`   | `string`  | Yes         | -                      | Collection ID                       |
-| `api-key`         | `string`  | Conditional | -                      | Required if you don’t set `.client` |
-| `client-id`       | `string`  | Conditional | -                      | Required if you don’t set `.client` |
-| `subscription-id` | `string`  | No          | -                      | Accepted attribute                  |
-| `base-url`        | `string`  | No          | `https://api.jaaq.app` | API base URL                        |
-| `autoplay`        | `boolean` | No          | `false`                | Any value except `"false"` enables  |
-| `show-arrows`     | `boolean` | No          | `true`                 | Any value except `"false"` enables  |
-| `show-dots`       | `boolean` | No          | `true`                 | Any value except `"false"` enables  |
+| Attribute         | Type      | Required    | Default                | Notes                                         |
+| ----------------- | --------- | ----------- | ---------------------- | --------------------------------------------- |
+| `collection-id`   | `string`  | Yes         | -                      | Collection ID                                 |
+| `api-key`         | `string`  | Conditional | -                      | Required if you don’t set `.client`           |
+| `client-id`       | `string`  | Conditional | -                      | Required if you don’t set `.client`           |
+| `subscription-id` | `string`  | No          | -                      | Accepted attribute                            |
+| `base-url`        | `string`  | No          | `https://api.jaaq.app` | API base URL                                  |
+| `autoplay`        | `boolean` | No          | `false`                | Any value except `"false"` enables            |
+| `show-arrows`     | `boolean` | No          | `true`                 | Any value except `"false"` enables            |
+| `show-dots`       | `boolean` | No          | `true`                 | Any value except `"false"` enables            |
+| `video-settings`  | `string`  | No          | -                      | JSON stringified video player settings object |
 
 #### Properties / methods
 
@@ -341,6 +354,14 @@ export function App() {
       autoplay={false}
       showArrows={true}
       showDots={true}
+      videoSettings={{
+        controls: true,
+        showLogo: false,
+        showTitle: true,
+        showAuthor: true,
+        showDescription: false,
+        showCaptions: true,
+      }}
       onLoaded={(collection) => console.log(collection)}
       onSlideChange={(data) => console.log(data)}
       onError={(err) => console.error(err)}
@@ -363,6 +384,7 @@ export function App() {
 | `showArrows`     | `boolean`                                                              | No          | `true`  |
 | `showDots`       | `boolean`                                                              | No          | `true`  |
 | `className`      | `string`                                                               | No          | `''`    |
+| `videoSettings`  | `VideoSettings`                                                        | No          | -       |
 | `onLoaded`       | `(collection: CollectionDTO) => void`                                  | No          | -       |
 | `onSlideChange`  | `(data: { index: number; video: CollectionDTO['videos'][0] }) => void` | No          | -       |
 | `onError`        | `(error: Error) => void`                                               | No          | -       |
@@ -459,6 +481,14 @@ const player = new JaaqCollectionPlayer('#container', {
   autoplay: false,
   showArrows: true,
   showDots: true,
+  videoSettings: {
+    controls: true,
+    showLogo: false,
+    showTitle: true,
+    showAuthor: true,
+    showDescription: false,
+    showCaptions: true,
+  },
 });
 
 player.on('loaded', (collection) => console.log(collection));
@@ -468,17 +498,18 @@ player.on('error', (err) => console.error(err));
 
 #### Config
 
-| Option         | Type         | Required    | Default |
-| -------------- | ------------ | ----------- | ------- |
-| `collectionId` | `string`     | Yes         | -       |
-| `apiKey`       | `string`     | Conditional | -       |
-| `clientId`     | `string`     | Conditional | -       |
-| `client`       | `JaaqClient` | Conditional | -       |
-| `baseUrl`      | `string`     | No          | -       |
-| `autoplay`     | `boolean`    | No          | `false` |
-| `showArrows`   | `boolean`    | No          | `true`  |
-| `showDots`     | `boolean`    | No          | `true`  |
-| `className`    | `string`     | No          | `''`    |
+| Option          | Type            | Required    | Default |
+| --------------- | --------------- | ----------- | ------- |
+| `collectionId`  | `string`        | Yes         | -       |
+| `apiKey`        | `string`        | Conditional | -       |
+| `clientId`      | `string`        | Conditional | -       |
+| `client`        | `JaaqClient`    | Conditional | -       |
+| `baseUrl`       | `string`        | No          | -       |
+| `autoplay`      | `boolean`       | No          | `false` |
+| `showArrows`    | `boolean`       | No          | `true`  |
+| `showDots`      | `boolean`       | No          | `true`  |
+| `className`     | `string`        | No          | `''`    |
+| `videoSettings` | `VideoSettings` | No          | -       |
 
 #### Events
 
@@ -546,11 +577,11 @@ Optional:
 
 ## CDN Usage
 
-CI publishes files under the `jaaq-sdk-js/latest/` prefix. Embed HTML files are also available under `jaaq-sdk-js/latest/embed/` for compatibility.
+CI publishes files under the `latest/` prefix. Embed HTML files are available under `latest/embed/`.
 
 Base URL:
 
-- `https://cdn.jaaq.app/jaaq-sdk-js/latest/`
+- `https://cdn.jaaq.app/latest/`
 
 ### Available files (published by CI)
 
@@ -567,7 +598,7 @@ Base URL:
 ### Core SDK (UMD)
 
 ```html
-<script src="https://cdn.jaaq.app/jaaq-sdk-js/latest/jaaq-sdk.min.js"></script>
+<script src="https://cdn.jaaq.app/latest/jaaq-sdk.min.js"></script>
 <script>
   const client = JaaqSDK.createJaaqClient({
     apiKey: 'YOUR_API_KEY',
@@ -583,7 +614,7 @@ Base URL:
 Bundled (no external HLS dependency):
 
 ```html
-<script src="https://cdn.jaaq.app/jaaq-sdk-js/latest/jaaq-ui-bundled.min.js"></script>
+<script src="https://cdn.jaaq.app/latest/jaaq-ui-bundled.min.js"></script>
 <script>
   const player = new JaaqUI.JaaqVideoPlayer(document.getElementById('player'), {
     apiKey: 'YOUR_API_KEY',
@@ -597,7 +628,7 @@ Non-bundled (load hls.js separately):
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-<script src="https://cdn.jaaq.app/jaaq-sdk-js/latest/jaaq-ui.min.js"></script>
+<script src="https://cdn.jaaq.app/latest/jaaq-ui.min.js"></script>
 ```
 
 ### Web components (UMD)
@@ -605,7 +636,7 @@ Non-bundled (load hls.js separately):
 Bundled (no external HLS dependency):
 
 ```html
-<script src="https://cdn.jaaq.app/jaaq-sdk-js/latest/jaaq-webcomponents-bundled.min.js"></script>
+<script src="https://cdn.jaaq.app/latest/jaaq-webcomponents-bundled.min.js"></script>
 <jaaq-video-player video-id="YOUR_VIDEO_ID" api-key="YOUR_API_KEY" client-id="YOUR_CLIENT_ID"></jaaq-video-player>
 ```
 
@@ -613,12 +644,12 @@ Non-bundled (load hls.js separately):
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-<script src="https://cdn.jaaq.app/jaaq-sdk-js/latest/jaaq-webcomponents.min.js"></script>
+<script src="https://cdn.jaaq.app/latest/jaaq-webcomponents.min.js"></script>
 ```
 
 ### React from CDN
 
-The CI pipeline does not publish the React UMD bundle to `https://cdn.jaaq.app/jaaq-sdk-js/latest/`.
+The CI pipeline does not publish the React UMD bundle to `https://cdn.jaaq.app/latest/`.
 
 Use npm:
 
@@ -636,7 +667,7 @@ import { VideoPlayer } from '@jaaq/jaaq-sdk-js/ui/react';
 
 ```html
 <iframe
-  src="https://cdn.jaaq.app/jaaq-sdk-js/latest/embed.html?apiKey=YOUR_API_KEY&clientId=YOUR_CLIENT_ID&videoId=YOUR_VIDEO_ID&autoplay=false"
+  src="https://cdn.jaaq.app/latest/embed/embed.html?apiKey=YOUR_API_KEY&clientId=YOUR_CLIENT_ID&videoId=YOUR_VIDEO_ID&autoplay=false"
   width="800"
   height="450"
   frameborder="0"
@@ -713,7 +744,7 @@ Embed a collection of videos in a carousel format:
 
 ```html
 <iframe
-  src="https://cdn.jaaq.app/jaaq-sdk-js/latest/embed-collection.html?apiKey=YOUR_API_KEY&clientId=YOUR_CLIENT_ID&collectionId=YOUR_COLLECTION_ID&autoplay=false"
+  src="https://cdn.jaaq.app/latest/embed/embed-collection.html?apiKey=YOUR_API_KEY&clientId=YOUR_CLIENT_ID&collectionId=YOUR_COLLECTION_ID&autoplay=false&controls=true&showLogo=false&showTitle=true&showAuthor=true&showDescription=false&showCaptions=true"
   width="100%"
   height="600"
   frameborder="0"
@@ -723,13 +754,21 @@ Embed a collection of videos in a carousel format:
 
 ### URL parameters
 
-| Parameter      | Required | Notes                     |
-| -------------- | -------- | ------------------------- |
-| `apiKey`       | Yes      | API key                   |
-| `clientId`     | Yes      | Client ID                 |
-| `collectionId` | Yes      | Collection ID             |
-| `autoplay`     | No       | `true`, `false`, `1`, `0` |
-| `baseUrl`      | No       | API base URL              |
+| Parameter         | Required | Notes                     |
+| ----------------- | -------- | ------------------------- |
+| `apiKey`          | Yes      | API key                   |
+| `clientId`        | Yes      | Client ID                 |
+| `collectionId`    | Yes      | Collection ID             |
+| `autoplay`        | No       | `true`, `false`, `1`, `0` |
+| `baseUrl`         | No       | API base URL              |
+| `controls`        | No       | `true`, `false`, `1`, `0` |
+| `showLogo`        | No       | `true`, `false`, `1`, `0` |
+| `showTitle`       | No       | `true`, `false`, `1`, `0` |
+| `showAuthor`      | No       | `true`, `false`, `1`, `0` |
+| `showDescription` | No       | `true`, `false`, `1`, `0` |
+| `showCaptions`    | No       | `true`, `false`, `1`, `0` |
+| `width`           | No       | CSS width string          |
+| `height`          | No       | CSS height string         |
 
 ### postMessage protocol
 

package/dist/embed/embed-collection.html

@@ -118,6 +118,33 @@
           config.baseUrl = baseUrl;
         }
 
+        const showArrows = params.get('showArrows');
+        if (showArrows !== null) {
+          config.showArrows = showArrows === 'true' || showArrows === '1';
+        }
+
+        const showDots = params.get('showDots');
+        if (showDots !== null) {
+          config.showDots = showDots === 'true' || showDots === '1';
+        }
+
+        config.videoSettings = {};
+        const videoOptionKeys = ['controls', 'showLogo', 'showTitle', 'showAuthor', 'showDescription', 'showCaptions', 'width', 'height'];
+        videoOptionKeys.forEach((key) => {
+          const value = params.get(key);
+          if (value !== null) {
+            if (key === 'width' || key === 'height') {
+              config.videoSettings[key] = value;
+            } else {
+              config.videoSettings[key] = value === 'true' || value === '1';
+            }
+          }
+        });
+
+        if (Object.keys(config.videoSettings).length === 0) {
+          delete config.videoSettings;
+        }
+
         return config;
       }
 
@@ -155,6 +182,18 @@
             player.setAttribute('autoplay', 'true');
           }
 
+          if (config.showArrows !== undefined) {
+            player.setAttribute('show-arrows', config.showArrows ? 'true' : 'false');
+          }
+
+          if (config.showDots !== undefined) {
+            player.setAttribute('show-dots', config.showDots ? 'true' : 'false');
+          }
+
+          if (config.videoSettings && Object.keys(config.videoSettings).length > 0) {
+            player.setAttribute('video-settings', JSON.stringify(config.videoSettings));
+          }
+
           player.style.width = '100%';
           player.style.height = '100%';
           player.style.display = 'block';
@@ -267,7 +306,7 @@
     </script>
 
     <script
-      src="https://cdn.jaaq.app/jaaq-sdk-js/latest/jaaq-webcomponents-bundled.min.js"
+      src="https://cdn-dev.jaaq.app/latest/jaaq-webcomponents-bundled.min.js"
       onerror="console.error('[Embed Collection] Failed to load web component script'); showError('Failed to load collection player script');"
       onload="console.log('[Embed Collection] Web component script loaded');"
     ></script>

package/dist/embed/embed.html

@@ -118,6 +118,36 @@
           config.baseUrl = baseUrl;
         }
 
+        const controls = params.get('controls');
+        if (controls !== null) {
+          config.controls = controls === 'true' || controls === '1';
+        }
+
+        const showLogo = params.get('showLogo');
+        if (showLogo !== null) {
+          config.showLogo = showLogo === 'true' || showLogo === '1';
+        }
+
+        const showTitle = params.get('showTitle');
+        if (showTitle !== null) {
+          config.showTitle = showTitle === 'true' || showTitle === '1';
+        }
+
+        const showAuthor = params.get('showAuthor');
+        if (showAuthor !== null) {
+          config.showAuthor = showAuthor === 'true' || showAuthor === '1';
+        }
+
+        const showDescription = params.get('showDescription');
+        if (showDescription !== null) {
+          config.showDescription = showDescription === 'true' || showDescription === '1';
+        }
+
+        const showCaptions = params.get('showCaptions');
+        if (showCaptions !== null) {
+          config.showCaptions = showCaptions === 'true' || showCaptions === '1';
+        }
+
         return config;
       }
 
@@ -158,6 +188,30 @@
           player.setAttribute('width', config.width || '100%');
           player.setAttribute('height', config.height || '100%');
 
+          if (config.controls !== undefined) {
+            player.setAttribute('controls', config.controls ? 'true' : 'false');
+          }
+
+          if (config.showLogo !== undefined) {
+            player.setAttribute('show-logo', config.showLogo ? 'true' : 'false');
+          }
+
+          if (config.showTitle !== undefined) {
+            player.setAttribute('show-title', config.showTitle ? 'true' : 'false');
+          }
+
+          if (config.showAuthor !== undefined) {
+            player.setAttribute('show-author', config.showAuthor ? 'true' : 'false');
+          }
+
+          if (config.showDescription !== undefined) {
+            player.setAttribute('show-description', config.showDescription ? 'true' : 'false');
+          }
+
+          if (config.showCaptions !== undefined) {
+            player.setAttribute('show-captions', config.showCaptions ? 'true' : 'false');
+          }
+
           player.addEventListener('jaaq:loaded', (e) => {
             const video = e.detail;
             notifyParent('loaded', { id: video.id, title: video.title, question: video.question });
@@ -262,7 +316,7 @@
     </script>
 
     <script
-      src="https://cdn.jaaq.app/jaaq-sdk-js/latest/jaaq-webcomponents-bundled.min.js"
+      src="https://cdn-dev.jaaq.app/latest/jaaq-webcomponents-bundled.min.js"
       onerror="console.error('[Embed] Failed to load web component script'); showError('Failed to load player script');"
       onload="console.log('[Embed] Web component script loaded');"
     ></script>

package/dist/ui/index.cjs

@@ -4055,6 +4055,33 @@ class JaaqCollectionPlayer {
                 player.setAttribute('base-url', this.config.baseUrl);
             player.setAttribute('autoplay', 'false');
             player.setAttribute('width', '100%');
+            if (this.config.videoSettings) {
+                const settings = this.config.videoSettings;
+                if (settings.controls !== undefined) {
+                    player.setAttribute('controls', String(settings.controls));
+                }
+                if (settings.showLogo !== undefined) {
+                    player.setAttribute('show-logo', String(settings.showLogo));
+                }
+                if (settings.showTitle !== undefined) {
+                    player.setAttribute('show-title', String(settings.showTitle));
+                }
+                if (settings.showAuthor !== undefined) {
+                    player.setAttribute('show-author', String(settings.showAuthor));
+                }
+                if (settings.showDescription !== undefined) {
+                    player.setAttribute('show-description', String(settings.showDescription));
+                }
+                if (settings.showCaptions !== undefined) {
+                    player.setAttribute('show-captions', String(settings.showCaptions));
+                }
+                if (settings.width !== undefined) {
+                    player.setAttribute('width', String(settings.width));
+                }
+                if (settings.height !== undefined) {
+                    player.setAttribute('height', String(settings.height));
+                }
+            }
             if (this.client && player.client !== undefined) {
                 player.client = this.client;
             }
@@ -4369,7 +4396,17 @@ const COMPONENT_STYLES$1 = `
 `;
 class JaaqCollectionPlayerElement extends HTMLElement {
     static get observedAttributes() {
-        return ['collection-id', 'api-key', 'client-id', 'subscription-id', 'base-url', 'autoplay', 'show-arrows', 'show-dots'];
+        return [
+            'collection-id',
+            'api-key',
+            'client-id',
+            'subscription-id',
+            'base-url',
+            'autoplay',
+            'show-arrows',
+            'show-dots',
+            'video-settings',
+        ];
     }
     constructor() {
         super();
@@ -4394,7 +4431,7 @@ class JaaqCollectionPlayerElement extends HTMLElement {
     attributeChangedCallback(name, oldValue, newValue) {
         if (!this.connected || oldValue === newValue)
             return;
-        if (name === 'collection-id') {
+        if (name === 'collection-id' || name === 'video-settings') {
             this.destroyCarousel();
             this.initCarousel();
         }
@@ -4486,6 +4523,16 @@ class JaaqCollectionPlayerElement extends HTMLElement {
         const apiKey = this.getAttribute('api-key');
         const clientId = this.getAttribute('client-id');
         const baseUrl = this.getAttribute('base-url');
+        const videoSettingsAttr = this.getAttribute('video-settings');
+        let videoSettings = null;
+        if (videoSettingsAttr) {
+            try {
+                videoSettings = JSON.parse(videoSettingsAttr);
+            }
+            catch (e) {
+                console.warn('[CollectionPlayer] Failed to parse video-settings attribute', e);
+            }
+        }
         this.collectionData.videos.forEach((video) => {
             const slide = document.createElement('li');
             slide.className = 'splide__slide';
@@ -4499,6 +4546,32 @@ class JaaqCollectionPlayerElement extends HTMLElement {
                 player.setAttribute('base-url', baseUrl);
             player.setAttribute('autoplay', 'false');
             player.setAttribute('width', '100%');
+            if (videoSettings) {
+                if (videoSettings.controls !== undefined) {
+                    player.setAttribute('controls', String(videoSettings.controls));
+                }
+                if (videoSettings.showLogo !== undefined) {
+                    player.setAttribute('show-logo', String(videoSettings.showLogo));
+                }
+                if (videoSettings.showTitle !== undefined) {
+                    player.setAttribute('show-title', String(videoSettings.showTitle));
+                }
+                if (videoSettings.showAuthor !== undefined) {
+                    player.setAttribute('show-author', String(videoSettings.showAuthor));
+                }
+                if (videoSettings.showDescription !== undefined) {
+                    player.setAttribute('show-description', String(videoSettings.showDescription));
+                }
+                if (videoSettings.showCaptions !== undefined) {
+                    player.setAttribute('show-captions', String(videoSettings.showCaptions));
+                }
+                if (videoSettings.width !== undefined) {
+                    player.setAttribute('width', String(videoSettings.width));
+                }
+                if (videoSettings.height !== undefined) {
+                    player.setAttribute('height', String(videoSettings.height));
+                }
+            }
             slide.appendChild(player);
             list.appendChild(slide);
         });