@tivio/sdk-react 9.5.0 → 9.6.0

package/README.md

@@ -799,6 +799,56 @@ The `sourcePlayMode` property determines how the content is played:
 - **LIVE** - Live stream mode with no seeking
 - **HYBRID** - Combines LIVE with seeking
 
+#### User Authentication Callbacks
+
+The `userAuthCallbacks` property allows you to handle user authentication flows when the player requires user login or registration. This is particularly useful for content that requires authentication (e.g., premium content).
+
+```typescript
+interface UserAuthCallbacks {
+    onGoToLogin: () => void
+    onGoToRegistration: () => void
+}
+```
+
+**Example Implementation:**
+
+```typescript
+// Usage with renderWebPlayer
+const videoController = await renderWebPlayer(
+    document.getElementById('video-player'),
+    {
+        id: 'player-main',
+        source: 'videos/PREMIUM_VIDEO_ID',
+        userAuthCallbacks: {
+            onGoToLogin: () => {
+                // Show your login modal
+                setShowLoginModal(true)
+            },
+            onGoToRegistration: () => {
+                // Show your registration modal
+                setShowRegistrationModal(true)
+            },
+        },
+    }
+)
+
+// Handle login in your modal
+const handleLogin = async (email: string, password: string) => {
+    try {
+        await tivio.signInWithEmailAndPassword(email, password)
+        console.log('Login successful')
+    } catch (error) {
+        console.error('Login failed:', error)
+        throw error
+    }
+}
+```
+
+**When are these callbacks triggered?**
+
+- **`onGoToLogin`**: Called when the player is trying to play content behind a paywall and user clicks on the login button in the overlay
+- **`onGoToRegistration`**: Called when the player is trying to play content behind a paywall and user clicks on the registration button in the overlay
+
 #### Using setSource with VideoController
 
 The `setSource` method allows you to dynamically change what's playing:
@@ -870,7 +920,7 @@ The VideoController emits various events that you can listen to:
 #### Ad events
 
 ```typescript
-videoController.addEventListener('ad_started', (adMetadata: AdMetadata | null) => {
+videoController.addEventListener('ad-started', (adMetadata: AdMetadata | null) => {
     if (!adMetadata) {
         console.log('Ad started playing (no metadata available)')
         return
@@ -960,7 +1010,7 @@ videoController.addEventListener('ad_started', (adMetadata: AdMetadata | null) =
     // Update UI, show ad overlay, etc.
 })
 
-videoController.addEventListener('ad_ended', () => {
+videoController.addEventListener('ad-ended', () => {
     console.log('Ad finished playing')
 })
 ```
@@ -1040,4 +1090,105 @@ The `WebPlayerProps` interface defines the properties that can be passed to the
 
 ### Visual Properties
 
-- **`showMarkers`
+- **`showMarkers`** (optional, default: `false`): Whether to show video markers
+- **`markerColor`** (optional): Color for video markers (CSS color value)
+- **`showTvStreamType`** (optional): Whether to show TV stream type indicator
+- **`showCookiesSettings`** (optional): Whether to show cookies settings
+- **`showOsd`** (optional, default: `true`): Whether to show the On-Screen Display (OSD)
+- **`showBufferingSpinner`** (optional, default: `true`): Whether to show buffering spinner
+
+### Audio Properties
+
+- **`isMutedByDefault`** (optional): If `true`, the player starts muted but can be unmuted
+
+### Keyboard Shortcuts Properties
+
+- **`enableKeyboardShortcuts`** (optional, default: `true`): Whether to enable keyboard shortcuts
+- **`customShortcuts`** (optional): Custom keyboard shortcuts configuration:
+```typescript
+  {
+    toggleFullscreen: number[],    // Array of key codes
+    togglePause: number[],
+    toggleMute: number[],
+    jumpForward: number[],
+    jumpBack: number[],
+    volumeUp: number[],
+    volumeDown: number[]
+  }
+```
+
+### Ad Block Properties
+
+- **`checkAdBlock`** (optional, default: `false`): Whether to check for ad blockers and show warnings
+
+## Data hooks
+Gets information about current user.
+
+```ts
+useUser: () => {
+    user: User | null
+    error: string | null
+    isInitialized: boolean
+}
+```
+
+### useRowsInScreen hook
+Gets array of Rows objects of specific screen and subscribes to its changes.
+
+```ts
+/**
+ * Use rows in screen
+ * @param screenId - screen id (from studio.tiv.io)
+ * @param options - subscription options
+ */
+useRowsInScreen: (screenId: string, options?: PaginationOptions) => {
+    pagination: PaginationInterface<Row> | null
+    error: Error | null
+}
+```
+
+### useItemsInRow hook
+Gets array of row items objects of specific row and subscribes to its changes.
+
+```ts
+/**
+ * Use row items
+ * @param rowId - row ID
+ * @param options - subscription options
+ */
+useItemsInRow: (rowId: string, options?: SubscribeToItemsInRowOptions) => {
+    pagination: PaginationInterface<ItemInRow> | null
+    error: Error | null
+}
+```
+
+### useVideo hook
+
+Gets Video object and subscribes to its changes.
+
+```ts
+/**
+ * Use video
+ * @param videoId - video id
+ */
+useVideo: (videoId: string) => {
+    error: string | null;
+    data: Video | null;
+}
+```
+
+### useTaggedVideos hook
+Gets videos with given tag IDs.
+
+```ts
+/**
+ * Use tagged videos
+ * @param tagIds - tag ids
+ * @param options - subscription options
+ * @public
+ */
+useTaggedVideos: (tagIds: string[], options?: SubscribeToItemsInRowOptions) => {
+    pagination: PaginationInterface<Video> | null
+    error: Error | null
+}
+```

package/README.md.bak

@@ -799,6 +799,56 @@ The `sourcePlayMode` property determines how the content is played:
 - **LIVE** - Live stream mode with no seeking
 - **HYBRID** - Combines LIVE with seeking
 
+#### User Authentication Callbacks
+
+The `userAuthCallbacks` property allows you to handle user authentication flows when the player requires user login or registration. This is particularly useful for content that requires authentication (e.g., premium content).
+
+```typescript
+interface UserAuthCallbacks {
+    onGoToLogin: () => void
+    onGoToRegistration: () => void
+}
+```
+
+**Example Implementation:**
+
+```typescript
+// Usage with renderWebPlayer
+const videoController = await renderWebPlayer(
+    document.getElementById('video-player'),
+    {
+        id: 'player-main',
+        source: 'videos/PREMIUM_VIDEO_ID',
+        userAuthCallbacks: {
+            onGoToLogin: () => {
+                // Show your login modal
+                setShowLoginModal(true)
+            },
+            onGoToRegistration: () => {
+                // Show your registration modal
+                setShowRegistrationModal(true)
+            },
+        },
+    }
+)
+
+// Handle login in your modal
+const handleLogin = async (email: string, password: string) => {
+    try {
+        await tivio.signInWithEmailAndPassword(email, password)
+        console.log('Login successful')
+    } catch (error) {
+        console.error('Login failed:', error)
+        throw error
+    }
+}
+```
+
+**When are these callbacks triggered?**
+
+- **`onGoToLogin`**: Called when the player is trying to play content behind a paywall and user clicks on the login button in the overlay
+- **`onGoToRegistration`**: Called when the player is trying to play content behind a paywall and user clicks on the registration button in the overlay
+
 #### Using setSource with VideoController
 
 The `setSource` method allows you to dynamically change what's playing:
@@ -870,7 +920,7 @@ The VideoController emits various events that you can listen to:
 #### Ad events
 
 ```typescript
-videoController.addEventListener('ad_started', (adMetadata: AdMetadata | null) => {
+videoController.addEventListener('ad-started', (adMetadata: AdMetadata | null) => {
     if (!adMetadata) {
         console.log('Ad started playing (no metadata available)')
         return
@@ -960,7 +1010,7 @@ videoController.addEventListener('ad_started', (adMetadata: AdMetadata | null) =
     // Update UI, show ad overlay, etc.
 })
 
-videoController.addEventListener('ad_ended', () => {
+videoController.addEventListener('ad-ended', () => {
     console.log('Ad finished playing')
 })
 ```
@@ -1040,4 +1090,105 @@ The `WebPlayerProps` interface defines the properties that can be passed to the
 
 ### Visual Properties
 
-- **`showMarkers`
+- **`showMarkers`** (optional, default: `false`): Whether to show video markers
+- **`markerColor`** (optional): Color for video markers (CSS color value)
+- **`showTvStreamType`** (optional): Whether to show TV stream type indicator
+- **`showCookiesSettings`** (optional): Whether to show cookies settings
+- **`showOsd`** (optional, default: `true`): Whether to show the On-Screen Display (OSD)
+- **`showBufferingSpinner`** (optional, default: `true`): Whether to show buffering spinner
+
+### Audio Properties
+
+- **`isMutedByDefault`** (optional): If `true`, the player starts muted but can be unmuted
+
+### Keyboard Shortcuts Properties
+
+- **`enableKeyboardShortcuts`** (optional, default: `true`): Whether to enable keyboard shortcuts
+- **`customShortcuts`** (optional): Custom keyboard shortcuts configuration:
+```typescript
+  {
+    toggleFullscreen: number[],    // Array of key codes
+    togglePause: number[],
+    toggleMute: number[],
+    jumpForward: number[],
+    jumpBack: number[],
+    volumeUp: number[],
+    volumeDown: number[]
+  }
+```
+
+### Ad Block Properties
+
+- **`checkAdBlock`** (optional, default: `false`): Whether to check for ad blockers and show warnings
+
+## Data hooks
+Gets information about current user.
+
+```ts
+useUser: () => {
+    user: User | null
+    error: string | null
+    isInitialized: boolean
+}
+```
+
+### useRowsInScreen hook
+Gets array of Rows objects of specific screen and subscribes to its changes.
+
+```ts
+/**
+ * Use rows in screen
+ * @param screenId - screen id (from studio.tiv.io)
+ * @param options - subscription options
+ */
+useRowsInScreen: (screenId: string, options?: PaginationOptions) => {
+    pagination: PaginationInterface<Row> | null
+    error: Error | null
+}
+```
+
+### useItemsInRow hook
+Gets array of row items objects of specific row and subscribes to its changes.
+
+```ts
+/**
+ * Use row items
+ * @param rowId - row ID
+ * @param options - subscription options
+ */
+useItemsInRow: (rowId: string, options?: SubscribeToItemsInRowOptions) => {
+    pagination: PaginationInterface<ItemInRow> | null
+    error: Error | null
+}
+```
+
+### useVideo hook
+
+Gets Video object and subscribes to its changes.
+
+```ts
+/**
+ * Use video
+ * @param videoId - video id
+ */
+useVideo: (videoId: string) => {
+    error: string | null;
+    data: Video | null;
+}
+```
+
+### useTaggedVideos hook
+Gets videos with given tag IDs.
+
+```ts
+/**
+ * Use tagged videos
+ * @param tagIds - tag ids
+ * @param options - subscription options
+ * @public
+ */
+useTaggedVideos: (tagIds: string[], options?: SubscribeToItemsInRowOptions) => {
+    pagination: PaginationInterface<Video> | null
+    error: Error | null
+}
+```

package/dist/index.d.ts

@@ -1603,6 +1603,7 @@ export declare interface ForbiddenOnCallError extends GenericOnCallError {
 }
 
 export declare enum ForbiddenReason {
+    AD_BLOCKING = "AD_BLOCKING",
     MONETIZATION = "MONETIZATION",
     GEO_BLOCKING = "GEO_BLOCKING",
     EMAIL_ALREADY_EXISTS = "EMAIL_ALREADY_EXISTS",
@@ -3709,11 +3710,11 @@ export declare enum PlayerWrapperEvents {
     /**
      * Triggered when an ad starts playing
      */
-    'ad_started' = "ad_started",
+    'ad-started' = "ad-started",
     /**
      * Triggered when an ad finishes playing
      */
-    'ad_ended' = "ad_ended"
+    'ad-ended' = "ad-ended"
 }
 
 /**
@@ -5097,6 +5098,14 @@ export declare type SdkReactConfig = Omit<TivioConfig, 'language'> & {
     language?: LangCode;
 };
 
+/**
+ * @public
+ */
+export declare interface SDKUserAuthCallbacks {
+    onGoToLogin?: () => void;
+    onGoToRegistration?: () => void;
+}
+
 /**
  * @public
  * @deprecated sections are no longer used.
@@ -5402,19 +5411,19 @@ export declare interface SimplifiedVideoController {
     }) => void): void;
     /**
      * Add an event listener for ad started events
-     * @param event - Must be 'ad_started'
+     * @param event - Must be 'ad-started'
      * @param callback - Function called when an ad starts playing
      */
-    addEventListener(event: 'ad_started', callback: (adMetadata: AdMetadata & {
+    addEventListener(event: 'ad-started', callback: (adMetadata: AdMetadata & {
         customAdMetadata?: Record<string, unknown> | null;
         ctaElement: HTMLElement | null;
     }) => void): void;
     /**
      * Add an event listener for ad ended events
-     * @param event - Must be 'ad_ended'
+     * @param event - Must be 'ad-ended'
      * @param callback - Function called when an ad finishes playing
      */
-    addEventListener(event: 'ad_ended', callback: () => void): void;
+    addEventListener(event: 'ad-ended', callback: () => void): void;
     /**
      * Remove an event listener
      * @param event - The event name to stop listening for
@@ -5975,6 +5984,10 @@ export declare interface TivioComponents {
     ContentSortPicker: React_2.ComponentType<ContentSortPickerProps>;
     WebTivioProVideoScreen: React_2.ComponentType<WebTivioProVideoScreenProps>;
     RemoteController: React_2.ComponentType<RemoteControllerProps>;
+    MonetizationsSelectOverlay: React_2.ComponentType;
+    MonetizationsSelectOverlayContextProvider: React_2.ComponentType<{
+        children: React_2.ReactNode;
+    }>;
 }
 
 /**
@@ -6245,7 +6258,9 @@ export declare type TivioInternalProviders = {
     UserContextProvider: React_2.ComponentType<{
         children?: React_2.ReactNode;
     }>;
-    MonetizationsSelectOverlayContextProvider: React_2.ComponentType;
+    MonetizationsSelectOverlayContextProvider: React_2.ComponentType<{
+        children: React_2.ReactNode;
+    }>;
     QerkoOverlayContextProvider: React_2.ComponentType;
     /**
      * @deprecated do not use, this provider will be removed in the future
@@ -6480,7 +6495,7 @@ export declare interface TvAppProps {
 /**
  * @public
  */
-export declare interface TvChannel extends RowItem {
+export declare interface TvChannel extends RowItem, MonetizableItem {
     id: string;
     itemType: ROW_ITEM_TYPES.TV_CHANNEL;
     name: string;
@@ -6491,17 +6506,11 @@ export declare interface TvChannel extends RowItem {
     logoPendingOverlayWidth?: string;
     hls: string;
     dash: string;
-    /**
-     * Returns all transactions and subscriptions applied to this tv channel.
-     * Transactions before subscriptions, sorted by price ascending.
-     */
-    getPurchasableMonetizations(options?: GetPurchasableMonetizationsOptions): PurchasableMonetization[];
     getSourceUrl(options?: {
         language?: LangCode;
     }): Promise<GetSourceUrlResponse & {
         language?: LangCode;
     }>;
-    purchasableMonetization: any | null;
     price: number;
     cover: string;
     isPlayable: boolean;
@@ -7407,7 +7416,7 @@ export declare interface VideoController {
         muted: boolean;
         volume: number;
     }) => void): void;
-    addEventListener(event: 'ad_started', callback: (value: AdMetadata & {
+    addEventListener(event: 'ad-started', callback: (value: AdMetadata & {
         adCtaElement: HTMLElement | null;
     }) => void): void;
     /**
@@ -7911,6 +7920,7 @@ export declare interface Watermark {
 
 export declare interface WebConfig {
     customer: CustomerId;
+    customerName?: string;
     title?: string;
     description?: string;
     logo: string;
@@ -7926,16 +7936,35 @@ export declare interface WebConfig {
          * Text on buy voucher button, if not provided the default text will be used.
          */
         buyVoucherButtonText?: string;
+        /**
+         * If true, the voucher button will be shown in the header.
+         */
+        showVoucherButton?: boolean;
         allowSearch?: boolean;
         logoHeight?: string;
         mobileLogoHeight?: string;
         buySubscriptionButtonText?: string;
+        isHidden?: boolean;
+        /**
+         * Additional menu items to be shown in the rounded menu in the header (external or internal)
+         */
+        additionalMenuItems?: {
+            name: string;
+            href: string;
+            newTab?: boolean;
+        }[];
     };
     footer?: {
+        isHidden?: boolean;
         /**
          * If logo is different from logo in header
          */
         logo?: string;
+        /**
+         * @fixme https://app.clickup.com/t/90151157205/TIV-1515
+         * If multiple logos are provided, the multiple logos are prioritized over the single logo.
+         */
+        multipleLogos?: string[];
         showLogo?: boolean;
         /**
          * right panel - various type of contacts to owners of website
@@ -7978,6 +8007,19 @@ export declare interface WebConfig {
             email?: string;
         };
         cookieSettingsLabel?: string;
+        disclaimer?: string;
+        showDivider?: boolean;
+        /**
+         * Additional links to be shown in the footer
+         */
+        additionalLinks?: {
+            name: string;
+            href: string;
+        }[];
+        /**
+         * Hide footer on these paths
+         */
+        hideFooter?: string[];
         partners?: {
             name: string;
             logo: string;
@@ -7993,6 +8035,14 @@ export declare interface WebConfig {
      * so app requires authorization to see them.
      */
     securedContent?: boolean;
+    /**
+     * If true, then auth is required for all pages.
+     */
+    isAuthRequired?: boolean;
+    /**
+     * If true, then buy subscription button is hidden.
+     */
+    hideBuySubscriptionButton?: boolean;
     /**
      * CSS styles for application background.
      */
@@ -8011,6 +8061,10 @@ export declare interface WebConfig {
          * Default is TRUE (see {@link AppLoadingOverlay}
          */
         showProgressBar?: boolean;
+        /**
+         * URL to background image shown on loading screen.
+         */
+        backgroundUrl?: string;
     };
     /**
      * Slug of all pages where user will be forced to fill login form if he's not logged in.
@@ -8038,6 +8092,7 @@ export declare interface WebConfig {
      */
     showChooseSubscription?: boolean;
     registration?: {
+        logoMarginTop?: string;
         /**
          * Customization of auth form
          */
@@ -8057,6 +8112,7 @@ export declare interface WebConfig {
             showAcceptanceOfTermsAndConditions?: boolean;
         };
         registrationConsent?: string;
+        socialRegistrationConsent?: string;
     };
     payment?: {
         paymentConsent?: string;
@@ -8067,9 +8123,11 @@ export declare interface WebConfig {
      */
     supportVouchers?: boolean;
     /**
-     * Config for Google Tag Manager
+     * Config for Google Tag Manager with optional shouldWaitForDidomi flag
      */
-    googleTagManagerConfig?: TagManagerArgs;
+    googleTagManagerConfig?: TagManagerArgs & {
+        shouldWaitForDidomi?: boolean;
+    };
     customScripts?: CustomScript[];
     /**
      * Favicons config
@@ -8088,6 +8146,8 @@ export declare interface WebConfig {
     };
     monetizationSelectOverlay?: {
         title?: string;
+        benefitLeftIcon?: string;
+        showFullMonetizationOnMobile?: boolean;
     };
     /**
      * Google Analytics ID. If provided, Google Analytics will be enabled.
@@ -8099,6 +8159,7 @@ export declare interface WebConfig {
     centeredMenu?: boolean;
     /**
      * All values are considered as false if not provided.
+     * @deprecated - use settings.allowedSignInProviders inside OrganizationDocument
      */
     socialLogins?: {
         showAppleLogin?: boolean;
@@ -8113,11 +8174,24 @@ export declare interface WebConfig {
      * If true, robots.txt will prevent crawling of the website.
      */
     norobots?: boolean;
-    customTranslations?: {
-        [key: string]: {
-            [key: string]: string;
-        };
+    voucher?: {
+        voucherConsent: string;
     };
+    customTranslations?: Record<string, Record<string, string>>;
+    onPurchase?: (monetization: Purchase) => void;
+    facebookPixelConfig?: {
+        pixelId: string;
+        shouldWaitForDidomi?: boolean;
+    };
+    /**
+     * If true, the app will be locked in the "remote controller" mode.
+     * This means that the app will not be able to navigate to other pages and will only show the remote controller.
+     */
+    isRemoteControllerApp?: boolean;
+    /**
+     * Determines if application should check allowed URL handles when switching applications.
+     */
+    disableUrlHandleCheck?: boolean;
     /**
      * Map for all handlers
      */
@@ -8227,6 +8301,7 @@ export declare interface WebPlayerProps {
     hideOverlay?: boolean;
     sourcePlayMode?: SourcePlayMode;
     adsConfig?: StaticAdsBreak[];
+    userAuthCallbacks?: SDKUserAuthCallbacks;
 }
 
 /**