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

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

@@ -28,6 +28,61 @@ 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 FetchLike = typeof globalThis.fetch;
 type RequestOptions = Parameters<typeof globalThis.fetch>[1];
 interface HttpClient {
@@ -47,28 +102,47 @@ type CollectionsResource = {
     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>;
 }
 
 /**
@@ -85,6 +159,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 */
@@ -137,7 +213,7 @@ type PlayerState = {
  * 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'>;
 
 type VideoPlayerHandle = {
     play: () => void;
@@ -167,6 +243,7 @@ type CollectionPlayerProps = {
     subscriptionId?: string;
     client?: JaaqClient;
     baseUrl?: string;
+    apiVersion?: string;
     autoplay?: boolean;
     showArrows?: boolean;
     showDots?: boolean;
@@ -176,7 +253,7 @@ type CollectionPlayerProps = {
     onError?: (_error: Error) => void;
     onSlideChange?: (_data: {
         index: number;
-        video: CollectionDTO['videos'][0];
+        video: CollectionDTO['videos'][0] | CollectionV2DTO['videoGroups'][0]['videos'][0];
     }) => void;
 };
 type CollectionPlayerHandle = {

package/dist/ui/react/index.mjs

@@ -11,16 +11,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.');
@@ -29,7 +35,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,
@@ -78,20 +84,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.
@@ -114,14 +151,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);
 }
 
 /**
@@ -992,6 +1030,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';
@@ -1011,6 +1050,7 @@ class JaaqVideoPlayerElement extends HTMLElement {
                 clientId: clientId ?? undefined,
                 client: this.clientInstance || undefined,
                 baseUrl,
+                apiVersion,
                 autoplay,
                 controls,
                 showLogo,
@@ -4388,6 +4428,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;
@@ -4414,6 +4469,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;
@@ -4425,9 +4481,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;
             }
@@ -4475,7 +4533,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');
@@ -4557,8 +4616,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,
             }));
@@ -4734,7 +4794,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 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, startMuted = false, onPlay, onPause, onError, onLoaded, onTimeUpdate, onVolumeChange, onEnded, onFullscreenChange, showInfo = false, }, ref) {
+function VideoPlayerComponent({ videoId, apiKey, clientId, client, baseUrl, apiVersion, autoplay = false, controls = true, width = '100%', height = 'auto', className = '', showLogo = true, showTitle = true, showAuthor = true, showDescription = true, showCaptions = true, startMuted = false, onPlay, onPause, onError, onLoaded, onTimeUpdate, onVolumeChange, onEnded, onFullscreenChange, showInfo = false, }, ref) {
     const playerRef = useRef(null);
     const videoDataRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -4803,7 +4863,7 @@ function VideoPlayerComponent({ videoId, apiKey, clientId, client, baseUrl, auto
         player.setAttribute('start-muted', startMuted ? 'true' : 'false');
     }, [startMuted]);
     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', "start-muted": startMuted ? 'true' : 'false', width: "100%", height: "auto" }),
+        React.createElement("jaaq-video-player", { ref: playerRef, "video-id": videoId, "api-key": apiKey, "client-id": clientId, "base-url": baseUrl, "api-version": apiVersion, 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', "start-muted": startMuted ? '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' } },
@@ -4822,7 +4882,7 @@ const VideoPlayer = forwardRef(VideoPlayerComponent);
 if (typeof window !== 'undefined') {
     registerJaaqComponents();
 }
-function CollectionPlayerComponent({ collectionId, apiKey, clientId, subscriptionId, client, baseUrl, autoplay = false, showArrows = true, showDots = true, className = '', videoSettings, onLoaded, onError, onSlideChange, }, ref) {
+function CollectionPlayerComponent({ collectionId, apiKey, clientId, subscriptionId, client, baseUrl, apiVersion, autoplay = false, showArrows = true, showDots = true, className = '', videoSettings, onLoaded, onError, onSlideChange, }, ref) {
     const playerRef = useRef(null);
     useImperativeHandle(ref, () => ({
         refresh: () => playerRef.current?.refresh(),
@@ -4867,7 +4927,7 @@ function CollectionPlayerComponent({ collectionId, apiKey, clientId, subscriptio
         };
     }, [client, videoSettings, 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' })));
+        React.createElement("jaaq-collection-player", { ref: playerRef, "collection-id": collectionId, "api-key": apiKey, "client-id": clientId, "subscription-id": subscriptionId, "base-url": baseUrl, "api-version": apiVersion, autoplay: autoplay ? 'true' : 'false', "show-arrows": showArrows ? 'true' : 'false', "show-dots": showDots ? 'true' : 'false' })));
 }
 CollectionPlayerComponent.displayName = 'CollectionPlayer';
 const CollectionPlayer = forwardRef(CollectionPlayerComponent);