@jaaq/jaaq-sdk-js 1.1.1 → 1.2.0-dev-ec79f7e-20260605

package/dist/ui/vanilla/index.d.ts

@@ -27,10 +27,6 @@ type VideoDTO = {
     creatorBiography?: string;
 };
 
-type VideosResource = {
-    getById(_id: string): Promise<VideoDTO>;
-};
-
 type CollectionDTO = {
     id: string;
     name: string;
@@ -40,33 +36,111 @@ type CollectionDTO = {
     videos: VideoDTO[];
 };
 
+type CreatorV2DTO = {
+    id: string;
+    name: string;
+    biography: string;
+    imageUrl: string;
+    type: string;
+};
+
+type CtaV2DTO = {
+    url?: string;
+    label?: string;
+    labelColor?: string;
+};
+
+type SubtitleV2DTO = {
+    code: string;
+    url: string;
+    default?: boolean;
+};
+
+type VideoV2DTO = {
+    id: string;
+    videoId: string;
+    question: string;
+    transcription: string;
+    subtitles: SubtitleV2DTO[];
+    videoUrl: string;
+    tags: string[];
+    severity: number | null;
+    duration: number;
+    description: string;
+    creator?: CreatorV2DTO;
+    cta?: CtaV2DTO;
+    allowFeedbackWidget?: boolean;
+};
+
+type VideoGroupV2DTO = {
+    id: string;
+    title: string;
+    videos: VideoV2DTO[];
+};
+
+type CollectionV2DTO = {
+    id: string;
+    name: string;
+    description: string;
+    imageUrl: string;
+    idleVideo: {
+        id: string;
+        duration: number;
+        videoUrl: string;
+    } | null;
+    videoGroups: VideoGroupV2DTO[];
+};
+
+type VideosResource = {
+    getById(_id: string): Promise<VideoDTO>;
+};
+
 type CollectionsResource = {
     list(): Promise<CollectionDTO[]>;
     getById(_id: string): Promise<CollectionDTO>;
 };
 
+type VideosResourceV2 = {
+    getById(_id: string): Promise<VideoV2DTO>;
+};
+
+type CollectionsResourceV2 = {
+    list(): Promise<CollectionV2DTO[]>;
+    getById(_id: string): Promise<CollectionV2DTO>;
+};
+
 interface SDKConfig {
     baseUrl?: string;
+    apiVersion?: string;
     apiKey: string;
     clientId: string;
     fetch?: FetchLike;
     timeoutMs?: number;
 }
-declare class JaaqClient {
-    readonly videos: VideosResource;
-    readonly collections: CollectionsResource;
+type V1 = {
+    videos: VideosResource;
+    collections: CollectionsResource;
+};
+type V2 = {
+    videos: VideosResourceV2;
+    collections: CollectionsResourceV2;
+};
+type ClientVersion = V1 | V2;
+declare class JaaqClient<T extends ClientVersion = V1> {
+    readonly videos: T['videos'];
+    readonly collections: T['collections'];
     private constructor();
     /**
      * 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: HttpClient): JaaqClient;
+    static fromHttp<T extends ClientVersion = V1>(http: HttpClient, apiVersion: string): JaaqClient<T>;
     /**
      * OO-friendly static initializer.
      * Delegates to the single source of truth: `buildClient`.
      */
-    static init(config: SDKConfig): JaaqClient;
+    static init<T extends ClientVersion = V1>(config: SDKConfig): JaaqClient<T>;
 }
 
 /**
@@ -83,6 +157,8 @@ type PlayerConfig = {
     client?: JaaqClient;
     /** Custom API base URL */
     baseUrl?: string;
+    /** Custom API version */
+    apiVersion?: string;
     /** Whether to automatically start playback when video loads */
     autoplay?: boolean;
     /** Whether to show player controls */
@@ -161,7 +237,7 @@ type PlayerEventCallback<T> = (_data: T) => void;
  * Video settings that can be passed to carousel components
  * Excludes carousel-specific props that are handled separately
  */
-type VideoSettings = Omit<PlayerConfig, 'videoId' | 'apiKey' | 'clientId' | 'baseUrl' | 'client' | 'autoplay'>;
+type VideoSettings = Omit<PlayerConfig, 'videoId' | 'apiKey' | 'clientId' | 'baseUrl' | 'apiVersion' | 'client' | 'autoplay'>;
 
 declare class JaaqVideoPlayer {
     private container;
@@ -252,6 +328,7 @@ type CollectionPlayerConfig = {
     apiKey?: string;
     clientId?: string;
     baseUrl?: string;
+    apiVersion?: string;
     autoplay?: boolean;
     showArrows?: boolean;
     showDots?: boolean;
@@ -282,6 +359,7 @@ declare class JaaqCollectionPlayer {
     private render;
     private initCarousel;
     private showLoading;
+    private getVideosFromCollection;
     private renderCarousel;
     private initSplide;
     private handleSlideChange;
@@ -437,6 +515,7 @@ declare class JaaqCollectionPlayerElement extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private getBooleanAttr;
+    private getVideosFromCollection;
     private render;
     private initCarousel;
     private showLoading;

package/dist/ui/vanilla/index.mjs

@@ -9,16 +9,22 @@ async function parseJson(res) {
         return undefined;
     return res.json();
 }
-function joinUrl(baseUrl, clientId, path) {
+function joinUrl(baseUrl, apiVersion, 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}`}`;
+    return `${base}/b2b/${apiVersion}/subscription/${encodeURIComponent(clientId)}${relative.startsWith('/') ? relative : `/${relative}`}`;
+}
+function convertToValidAPIVersion(version) {
+    const v = version.toLowerCase();
+    if (v === 'v1' || v === 'v2')
+        return v;
+    return 'v1'; // default to v1 if invalid version provided
 }
 function createHttpClient(config) {
-    const { baseUrl, apiKey, clientId, fetch: fetchImpl } = config;
+    const { baseUrl, apiKey, clientId, fetch: fetchImpl, apiVersion } = 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.');
@@ -27,7 +33,7 @@ function createHttpClient(config) {
         'Content-Type': 'application/json',
         'x-api-key': apiKey,
     };
-    const fullUrl = (path) => joinUrl(baseUrl, clientId, path);
+    const fullUrl = (path) => joinUrl(baseUrl, convertToValidAPIVersion(apiVersion), clientId, path);
     const request = async (method, path, init, body) => {
         const reqInit = {
             method,
@@ -76,20 +82,51 @@ function createCollectionsResource(http) {
     };
 }
 
+function createVideosResourceV2(http) {
+    return {
+        async getById(id) {
+            const path = `/videos/${encodeURIComponent(id)}`;
+            const response = await http.get(path);
+            return response.video;
+        },
+    };
+}
+
+function createCollectionsResourceV2(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);
+    constructor(http, apiVersion) {
+        if (apiVersion === 'v2') {
+            this.videos = createVideosResourceV2(http);
+            this.collections = createCollectionsResourceV2(http);
+        }
+        else {
+            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);
+    static fromHttp(http, apiVersion) {
+        return new JaaqClient(http, apiVersion);
     }
     /**
      * OO-friendly static initializer.
@@ -112,14 +149,15 @@ function createJaaqClient(config) {
  * The constructor stays private; instantiation is funneled via `JaaqClient.fromHttp`.
  */
 function buildClient(config) {
-    const { baseUrl = BASE_URL, apiKey, clientId, fetch: fetchImpl } = config;
+    const { baseUrl = BASE_URL, apiKey, clientId, fetch: fetchImpl, apiVersion = 'v1' } = config;
     const http = createHttpClient({
         baseUrl,
         apiKey,
         clientId,
         fetch: fetchImpl ?? globalThis.fetch,
+        apiVersion,
     });
-    return JaaqClient.fromHttp(http);
+    return JaaqClient.fromHttp(http, apiVersion);
 }
 
 /**
@@ -4051,6 +4089,7 @@ class JaaqCollectionPlayer {
                 apiKey: config.apiKey,
                 clientId: config.clientId,
                 baseUrl: config.baseUrl || BASE_URL,
+                apiVersion: config.apiVersion,
             });
         }
         else {
@@ -4082,7 +4121,8 @@ class JaaqCollectionPlayer {
                 throw new Error('Client is not initialized');
             }
             this.collectionData = await this.client.collections.getById(collectionId);
-            if (!this.collectionData.videos || this.collectionData.videos.length === 0) {
+            const videos = this.getVideosFromCollection(this.collectionData);
+            if (videos.length === 0) {
                 this.emitError(new Error('No videos found in collection'));
                 return;
             }
@@ -4103,6 +4143,21 @@ class JaaqCollectionPlayer {
       </div>
     `;
     }
+    getVideosFromCollection(collection) {
+        if (collection.videos && collection.videos.length > 0) {
+            return collection.videos;
+        }
+        if (collection.videoGroups && collection.videoGroups.length > 0) {
+            const videos = [];
+            collection.videoGroups.forEach((group) => {
+                if (group.videos && group.videos.length > 0) {
+                    videos.push(...group.videos);
+                }
+            });
+            return videos;
+        }
+        return [];
+    }
     renderCarousel() {
         if (!this.playerElement || !this.collectionData)
             return;
@@ -4113,7 +4168,8 @@ class JaaqCollectionPlayer {
         track.className = 'splide__track';
         const list = document.createElement('ul');
         list.className = 'splide__list';
-        this.collectionData.videos.forEach((video) => {
+        const videos = this.getVideosFromCollection(this.collectionData);
+        videos.forEach((video) => {
             const slide = document.createElement('li');
             slide.className = 'splide__slide';
             const player = document.createElement('jaaq-video-player');
@@ -4124,6 +4180,8 @@ class JaaqCollectionPlayer {
                 player.setAttribute('client-id', this.config.clientId);
             if (this.config.baseUrl)
                 player.setAttribute('base-url', this.config.baseUrl);
+            if (this.config.apiVersion)
+                player.setAttribute('api-version', this.config.apiVersion);
             player.setAttribute('autoplay', 'false');
             player.setAttribute('width', '100%');
             if (this.config.videoSettings) {
@@ -4193,7 +4251,8 @@ class JaaqCollectionPlayer {
         this.splide.on('moved', (newIndex) => {
             this.handleSlideChange(newIndex);
             if (this.collectionData) {
-                this.emit('slidechange', { index: newIndex, video: this.collectionData.videos[newIndex] });
+                const videos = this.getVideosFromCollection(this.collectionData);
+                this.emit('slidechange', { index: newIndex, video: videos[newIndex] });
             }
         });
         this.splide.mount();
@@ -4338,6 +4397,10 @@ function parseDataAttributes(element) {
     if (baseUrl) {
         config.baseUrl = baseUrl;
     }
+    const apiVersion = element.getAttribute('data-api-version');
+    if (apiVersion) {
+        config.apiVersion = apiVersion;
+    }
     const className = element.getAttribute('data-class-name');
     if (className) {
         config.className = className;
@@ -4589,6 +4652,7 @@ class JaaqVideoPlayerElement extends HTMLElement {
         const apiKey = this.getAttribute('api-key');
         const clientId = this.getAttribute('client-id');
         const baseUrl = this.getAttribute('base-url') || undefined;
+        const apiVersion = this.getAttribute('api-version') || 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';
@@ -4608,6 +4672,7 @@ class JaaqVideoPlayerElement extends HTMLElement {
                 clientId: clientId ?? undefined,
                 client: this.clientInstance || undefined,
                 baseUrl,
+                apiVersion,
                 autoplay,
                 controls,
                 showLogo,
@@ -4846,6 +4911,21 @@ class JaaqCollectionPlayerElement extends HTMLElement {
             return defaultValue;
         return v !== 'false';
     }
+    getVideosFromCollection(collection) {
+        if (collection.videos && collection.videos.length > 0) {
+            return collection.videos;
+        }
+        if (collection.videoGroups && collection.videoGroups.length > 0) {
+            const videos = [];
+            collection.videoGroups.forEach((group) => {
+                if (group.videos && group.videos.length > 0) {
+                    videos.push(...group.videos);
+                }
+            });
+            return videos;
+        }
+        return [];
+    }
     render() {
         if (!this.shadowRoot)
             return;
@@ -4872,6 +4952,7 @@ class JaaqCollectionPlayerElement extends HTMLElement {
         const apiKey = this.getAttribute('api-key');
         const clientId = this.getAttribute('client-id');
         const baseUrl = this.getAttribute('base-url') || undefined;
+        const apiVersion = this.getAttribute('api-version') || undefined;
         if (!this.clientInstance && !apiKey && !clientId) {
             this.emitError(new Error('Either client property or api-key and client-id attributes are required'));
             return;
@@ -4883,9 +4964,11 @@ class JaaqCollectionPlayerElement extends HTMLElement {
                     apiKey: apiKey,
                     clientId: clientId,
                     baseUrl: baseUrl || BASE_URL,
+                    apiVersion: apiVersion,
                 });
             this.collectionData = await client.collections.getById(collectionId);
-            if (!this.collectionData.videos || this.collectionData.videos.length === 0) {
+            const videos = this.getVideosFromCollection(this.collectionData);
+            if (videos.length === 0) {
                 this.emitError(new Error('No videos found in collection'));
                 return;
             }
@@ -4933,7 +5016,8 @@ class JaaqCollectionPlayerElement extends HTMLElement {
                 console.warn('[CollectionPlayer] Failed to parse video-settings attribute', e);
             }
         }
-        this.collectionData.videos.forEach((video) => {
+        const videos = this.getVideosFromCollection(this.collectionData);
+        videos.forEach((video) => {
             const slide = document.createElement('li');
             slide.className = 'splide__slide';
             const player = document.createElement('jaaq-video-player');
@@ -5015,8 +5099,9 @@ class JaaqCollectionPlayerElement extends HTMLElement {
                 Components: this.splide?.Components,
             });
             this.handleSlideChange(newIndex);
+            const videos = this.collectionData ? this.getVideosFromCollection(this.collectionData) : [];
             this.dispatchEvent(new CustomEvent('jaaq:collection:slidechange', {
-                detail: { index: newIndex, video: this.collectionData?.videos[newIndex] },
+                detail: { index: newIndex, video: videos[newIndex] },
                 bubbles: true,
                 composed: true,
             }));