@tivio/sdk-react 9.8.0 → 10.1.0

package/README.md

@@ -8,9 +8,9 @@ settings in the administration of Tivio Studio while having the freedom to build
 
 Install @tivio/sdk-react along with its peer dependencies
 ```sh
-npm i react@17 react-dom@17 @tivio/sdk-react
+npm i react@18 react-dom@18 @tivio/sdk-react
 # or
-yarn add react@17 react-dom@17 @tivio/sdk-react
+yarn add react@18 react-dom@18 @tivio/sdk-react
 ```
 
 ## Initialization
@@ -63,337 +63,6 @@ const config: Config = {
 };
 ```
 
-### Create user with email and password
-
-Returns user's firebase uid or null if error occurs
-
-```typescript
-tivio.createUserWithEmailAndPassword(email: string, password: string, username: string, phoneNumber?: string | undefined): Promise<string | null>
-```
-**Example**
-```typescript
-await tivio.createUserWithEmailAndPassword('test@example.com', 'password', 'Fist & Last Name', '+420777123456')
-```
-
-### Sign in with email and password
-
-Returns user's firebase uid or null if error occurs
-
-```typescript
-tivio.signInWithEmailAndPassword(email: string, password: string): Promise<string | null>
-```
-**Example**
-```typescript
-await tivio.signInWithEmailAndPassword('test@example.com', 'password')
-```
-
-### Sign out
-
-```typescript
-tivio.signOut(): Promise<void>
-```
-
-### Reset password
-
-Send email with password reset link to the user with given email address
-
-```typescript
-tivio.resetPassword(email: string): Promise<void>
-```
-
-## User entity
-
-### Get user
-
-Returns user object or null if user is not authenticated
-
-```typescript
-tivio.getUser(): Promise<User | null>
-```
-
-### Essential Properties
-
-#### Basic Information
-- `id: string` - Unique Tivio user ID
-- `email?: string` - Email address
-- `name?: string` - Display name - could be nickname, first name and last name, etc.
-
-#### Authentication Status
-- `isSignedIn: boolean` - Whether the user is currently signed in
-- `isReady: boolean` - Whether user data is fully loaded
-- `isAnonymous: boolean` - Whether this is an anonymous user
-
-#### Content & Preferences
-- `purchases: Purchase[]` - Active purchases (excluding vouchers)
-
-#### User Profiles
-- `profiles: UserProfile[]` - Available user profiles (e.g. multiple people can use the same user account with different preferences)
-- `activeUserProfileId: string | null` - Currently active profile
-
-### Essential Methods
-
-#### Authentication
-```typescript
-changePassword(oldPassword: string, newPassword: string): Promise<void>
-```
-
-#### Profile Management
-
-#### Create user profile
-
-```typescript
-interface CreateUserProfileRequest {
-    /**
-     * Profile name - typically first name and last name, but users can fill in whatever they want.
-     */
-    name: string
-    /**
-     * Filled in values for user profile survey. See {@link OrganizationDocument} its configuration.
-     */
-    survey?: ProfileSurvey
-}
-interface ProfileSurvey {
-    gender?: Translation
-    age?: AgeRange
-}
-interface AgeRange {
-    from: number
-    /**
-     * If not set, we assume the range is not closed and {@property to} is set to infinity
-     * (there are no values to represent {@link Infinity} in firestore, so we use undefined instead).
-     */
-    to?: number
-    /**
-     * If set, we assume that this is a profile for kids only (e.g. 0-12).
-     * This value can only be `true` or not specified (undefined).
-     */
-    kidsOnly?: true
-}
-createUserProfile(request: CreateUserProfileRequest): Promise<void>
-```
-**Example**
-```typescript
-await user.createUserProfile({
-    name: 'John Doe',
-    survey: {
-        gender: {
-            cs: "Žena",
-            en: "Female",
-            sk: "Žena"
-        },
-        age: {
-            from: 18,
-            to: 24
-        }
-    }
-})
-```
-
-#### Set active user profile
-
-```typescript
-user.setActiveUserProfileId(profileId: string): void
-```
-
-#### Delete user profile
-
-```typescript
-user.deleteUserProfile(profileId: string): Promise<void>
-```
-
-## Content
-
-### Tiles and assets
-
-A **tile** is a single item rendered inside a content row. The tile is the
-same entity the row points to (a `Video`, `Tag`, `TvChannel`, `Series`,
-`Article` or `Application`), so anything you can read off the entity (name,
-description, ids, monetization flags, …) is also available directly on the
-tile returned by `useItemsInRow` / `row.tiles`.
-
-Each tile carries several named image **assets** so the same entity can be
-rendered in different shapes without an extra fetch. Every named getter is a
-shortcut into the underlying `tile.assets` map — use the map directly if you
-need a custom asset that does not have a dedicated getter.
-
-**Shared across all entity types**
-
-- `tile.landscape` — 16:9 thumbnail (standard rows)
-- `tile.portrait` — 2:3 poster (portrait rows)
-- `tile.circled` — 1:1 circular crop (e.g. creators)
-- `tile.square` — 1:1 square (square rows)
-- `tile.banner` — 16:9 hero banner (banner rows / top of screens)
-- `tile.bannerMobile` — narrow 16:9 banner variant for phones
-- `tile.assets` — raw `{ [assetName]: ScalableAsset }` map behind the getters
-
-**Extras by entity type (on top of the shared set above)**
-
-- `Video` — `detailBanner` (backdrop above the player), `image`, `cover`
-  (deprecated, kept for compatibility), `backgroundBlurBannerMobile`
-- `Tag` / `Article` / `Series` — `detailBanner`, `cover`
-- `TvChannel` — `logo`, `logoPendingOverlayWidth`, `cover`
-- `Application` — read via `tile.application`: `logo`, `logoLandscape`,
-  `profilePhoto`
-
-If an asset is not set on the entity, the getter returns `null` rather than
-throwing, so it's safe to fall back from a specific variant to a more
-generic one (for example `tile.landscape ?? tile.banner ?? tile.cover`).
-
-A live example that renders the same video through every getter is included
-in `examples/sdk-react/src/index.tsx` (`createAssetsShowcaseDemo`).
-
-### Get content based on user profile
-
-```typescript
-interface GetUserProfileDataOptions {
-    /**
-     * If true, the data will be returned for all user profiles.
-     * If false, the data will be returned only for the active user profile.
-     */
-    ignoreActiveUserProfile?: boolean
-}
-
-getFavorites(options?: GetUserProfileDataOptions): Promise<FavoriteWithData[]>
-getWatchPositions(options?: GetUserProfileDataOptions): Promise<WatchPositionWithData[]>
-getWatchHistory(options?: GetUserProfileDataOptions): Promise<WatchPositionWithData[]>
-```
-
-### Get user favorites
-
-```typescript
-interface FavoriteWithData {
-    content: Video | Tag
-    type: 'video' | 'tag' // Filtering by this type will set the content type to be Video or Tag
-    profileId?: string
-}
-
-getFavorites(options?: GetUserProfileDataOptions): Promise<FavoriteWithData[]>
-```
-**Example**
-```typescript
-const favorites = await user.getFavorites()
-favorites.forEach(favorite => {
-    console.log({
-        name: favorite.name,
-        cover: favorite.cover, // cover image (landscape)
-        portrait: favorite.portrait, // portrait image (portrait)
-    })
-})
-```
-
-### Get user watch positions
-
-```typescript
-interface WatchPositionWithData {
-    position: number
-    video: Video
-    tag?: Tag
-    episodeNumber?: number
-    seasonNumber?: number
-    videoDuration?: number
-}
-
-getWatchPositions(options?: GetUserProfileDataOptions): Promise<WatchPositionWithData[]>
-```
-**Example**
-```typescript
-const watchPositions = await user.getWatchPositions()
-watchPositions.forEach(watchPosition => {
-    console.log({
-        position: watchPosition.position, // watch position in milliseconds
-        videoName: watchPosition.video.name,
-        videoCover: watchPosition.video.cover,
-        tagName: watchPosition.tag?.name, // optional tag for series
-        episodeNumber: watchPosition.episodeNumber, // optional episode number
-        seasonNumber: watchPosition.seasonNumber, // optional season number
-        videoDuration: watchPosition.videoDuration, // optional video duration
-    })
-})
-```
-
-### Get user watch history
-
-```typescript
-getWatchHistory(options?: GetUserProfileDataOptions): Promise<WatchPositionWithData[]>
-```
-**Example**
-```typescript
-const watchHistory = await user.getWatchHistory()
-watchHistory.forEach(watchPosition => {
-    console.log({
-        position: watchPosition.position, // watch position in milliseconds
-        videoName: watchPosition.video.name,
-        videoCover: watchPosition.video.cover,
-        tagName: watchPosition.tag?.name, // optional tag for series
-        episodeNumber: watchPosition.episodeNumber, // optional episode number
-        seasonNumber: watchPosition.seasonNumber, // optional season number
-        videoDuration: watchPosition.videoDuration, // optional video duration
-    })
-})
-```
-
-### Add to/remove from favorites
-
-Simply call addToFavorites or removeFromFavorites on the Video or Tag.
-```typescript
-const video = await tivio.getVideoById('videoId')
-await video.addToFavorites()
-await video.removeFromFavorites()
-
-const tag = await tivio.getTagById('tagId')
-await tag.addToFavorites()
-await tag.removeFromFavorites()
-
-// Remove a favorite from favorites
-const favorites = await tivio.getUser()?.favorites
-favorites[0]?.removeFromFavorites()
-```
-
-### Add to/remove from favorites by path
-
-You can also add or remove favorites using content paths directly:
-```typescript
-// Add to favorites by path
-await tivio.addToFavoritesByPath('videos/videoId')
-await tivio.addToFavoritesByPath('tags/tagId')
-
-// Remove from favorites by path
-await tivio.removeFromFavoritesByPath('videos/videoId')
-await tivio.removeFromFavoritesByPath('tags/tagId')
-```
-
-> ℹ️ **_Note:_** When user saves favorite without profileId, it will only be shown if the app doesn't have any active user profile.
-
-### Get screen by ID
-
-```typescript
-getScreenById(screenId: string): Promise<Screen | null>
-```
-
-### Get row by ID
-
-```typescript
-getRowById(rowId: string): Promise<Row | null>
-```
-
-### Get video by ID
-
-```typescript
-getVideoById(videoId: string): Promise<Video | null>
-```
-
-### Get tag by ID
-
-```typescript
-getTagById(tagId: string): Promise<Tag | null>
-```
-
-### Get TV Channel by ID
-
-```typescript
-getTvChannelById(tvChannelId: string): Promise<TvChannel | null>
-```
-
 ## Player
 
 You can choose whether you will use complete player component provided by Tivio or you will wrap your existing player
@@ -629,64 +298,10 @@ The VideoController returned by `renderWebPlayer` provides the following methods
 
 The Tivio player supports different types of sources:
 
-**PathSourceParams** - Path-based sources with ad configuration
-- Used for playing Tivio-hosted videos and TV channels with custom VAST ad configurations
-- Supports both `videos/ID` and `tvChannels/ID` paths
-- Includes `staticAdsConfig` for custom VAST ad insertion 
-- Example usage:
-```typescript
-const sourceWithAds = {
-    path: 'videos/123', // or 'tvChannels/456'
-    staticAdsConfig: [
-        {
-            type: 'preroll',
-            url: 'https://example.com/vast-preroll-ad.xml',
-        },
-        {
-            type: 'midroll',
-            from: 30000, // 30 seconds
-            url: 'https://example.com/vast-midroll-ad.xml',
-        },
-        {
-            type: 'postroll',
-            url: 'https://example.com/vast-postroll-ad.xml',
-        },
-    ],
-}
-```
-
-**VOD_TIVIO** - Tivio-hosted video-on-demand content
-- Used for playing videos that are hosted within Tivio's infrastructure
-- Example usage:
-```typescript
-const vodSource = {
-    type: SourceType.VOD_TIVIO,
-    videoPath: 'videos/123', // Video path
-    sourcePlayMode: SourcePlayMode.ON_DEMAND,
-    name: 'Tivio Video',
-    autoplay: false,
-    continuePositionMs: 10000, // Start at 10 seconds (optional)
-}
-```
-
-**CHANNEL** - TV channel content (both classic and virtual channels)
-- Used for playing live TV channels
-- Example usage:
-```typescript
-const channelSource = {
-    type: SourceType.CHANNEL,
-    path: 'tvChannels/456', // TV channel path
-    sourcePlayMode: SourcePlayMode.LIVE,
-    name: 'TV Channel',
-    autoplay: true,
-}
-```
-
 **VOD_EXTERNAL** - External video-on-demand content from third-party URLs
 - Used for playing videos that are hosted outside of Tivio's infrastructure
 - Supports various streaming protocols (HLS, DASH, MP4)
-- Optionally, you can include `staticAdsConfig` for custom ad insertion
-- Example usage (single url):
+- Example usage:
 ```typescript
 const externalSource = {
     type: SourceType.VOD_EXTERNAL,
@@ -696,137 +311,9 @@ const externalSource = {
     name: 'External Video',
     autoplay: false,
     continuePositionMs: 10000, // Start at 10 seconds (optional)
-    staticAdsConfig: [
-        {
-            type: 'preroll',
-            url: 'https://example.com/preroll-ad.xml',
-        },
-        {
-            type: 'midroll',
-            from: 20000, // 20 seconds
-            url: 'https://example.com/midroll-ad.xml',
-        },
-    ],
-}
-```
-
-**Path-Based Sources**
-You can also use simple path strings for both video and TV channel sources:
-```typescript
-// Video path
-videoController.setSource('videos/123')
-
-// TV channel path  
-videoController.setSource('tvChannels/456')
-```
-
-#### Static Ads Configuration
-
-> ℹ️ **_Note:_** To enable ad functionality, you must configure the IMA ad service in your Tivio configuration:
-> ```typescript
-> import { AD_SERVICE_PROXY_NAME } from '@tivio/sdk-react'
-> 
-> const config = {
->     // ... other config properties
->     player: {
->         adService: {
->             name: AD_SERVICE_PROXY_NAME.IMA,
->         },
->     },
-> }
-> ```
-
-The `staticAdsConfig` property lets you specify custom ad insertion points within your content.
-If multiple ads are set for the same entry point, they will be played one after another in sequence. For example, if you have two preroll ads, the first will play, followed by the second. Similarly, midroll ads that share the same `from` time will be grouped and played sequentially.
-
-It supports the following ad types:
-
-**Preroll Ads** - Play before the main content starts
-```typescript
-{
-    type: 'preroll',
-    url: 'https://example.com/preroll-ad.xml',
 }
 ```
 
-**Midroll Ads** - Play during the main content at specified time
-```typescript
-{
-    type: 'midroll',
-    from: 30000, // Time in milliseconds (30 seconds)
-    url: 'https://example.com/midroll-ad.xml',
-}
-```
-
-**Postroll Ads** - Play after the main content ends
-```typescript
-{
-    type: 'postroll',
-    url: 'https://example.com/postroll-ad.xml',
-}
-```
-
-**Complete Example:**
-```typescript
-const sourceWithAds = {
-    path: 'videos/123',
-    name: 'Video with Multiple Ad Types',
-    staticAdsConfig: [
-        // multiple preroll ads
-        {
-            type: 'preroll',
-            url: 'https://vasterix.joj.sk/api/v1/creative?id=0c5d96fd-2ab9-4207-a325-4607437965e3&vast=4.0',
-        },
-        {
-            type: 'preroll',
-            url: 'https://example.com/preroll-ad.xml',
-        },
-        // multiple midroll ads (with same from time)
-        {
-            type: 'midroll',
-            from: 30000, // 30 seconds
-            url: 'https://example.com/midroll-ad-1.xml',
-        },
-        {
-            type: 'midroll',
-            from: 30000, // 30 seconds
-            url: 'https://example.com/midroll-ad-2.xml',
-        },
-        // one midroll ad with different from time
-        {
-            type: 'midroll',
-            from: 60000, // 1 minute
-            url: 'https://example.com/midroll-ad-2.xml',
-        },
-        // postroll ad
-        {
-            type: 'postroll',
-            url: 'https://example.com/postroll-ad.xml',
-        },
-    ],
-}
-```
-- It is also possible to set multiple urls for external source type, e.g. when you want to use both DASH and HLS formats. Player then automatically will pick most suitable format to play depending on device capabilities.
-- Example usage (multiple urls):
-```typescript
-const externalSource = {
-    type: SourceType.VOD_EXTERNAL,
-    urls: ['https://example.com/video.m3u8', 'https://example.com/video.mpd'],
-    sourcePlayMode: SourcePlayMode.ON_DEMAND,
-}
-```
-
-**VOD_TIVIO** - Internal source type for playing content managed by Tivio
-- Used for playing videos and tv channels managed by Tivio infrastructure, e.g. everything that is uploaded through Tivio Admin application
-- For convenience, it is recommended to use shortcut format and pass the source as string in `${'videos' | 'tvChannels'}/{id}` format
-- Ids of corresponding videos and tv channel could be found in Tivio admin application
-- Example usage:
-```typescript
-const tivioVideoSource = 'videos/2BzH4xsTXW8vqYKJegXj'
-const tivioTvChannelSource = 'tvChannels/Ct4UcK6ozX3VfxaL5yP5'
-```
-- Otherwise, it is also possible to pass internal tivio source as an object with `type: SourceType.VOD_TIVIO` and additional parameters, similarly to external source type.
-
 #### Source Play Modes
 
 The `sourcePlayMode` property determines how the content is played:
@@ -835,72 +322,6 @@ The `sourcePlayMode` property determines how the content is played:
 - **LIVE** - Live stream mode with no seeking
 - **HYBRID** - Combines LIVE with seeking
 
-#### Player Authentication Configuration
-
-Use `disableTvChannelsForAnonymousUsers` property to show overlay to sign in when user is anonymous and tries to play a TV channel (free or monetized).
-Set the property to `true` inside the `player` property in Tivio config.
-
-Tivio config:
-```typescript
-const config = {
-    // ... other config properties
-    player: {
-        // ... other player properties
-        disableTvChannelsForAnonymousUsers: true, // or false
-    },
-}
-```
-
-#### 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:
@@ -909,23 +330,6 @@ The `setSource` method allows you to dynamically change what's playing:
 // Change to a different video
 videoController.setSource('videos/newVideoId')
 
-// Change to a video with custom ads
-videoController.setSource({
-    path: 'videos/newVideoId',
-    name: 'Video with Ads',
-    staticAdsConfig: [
-        {
-            type: 'preroll',
-            url: 'https://example.com/preroll-ad.xml',
-        },
-        {
-            type: 'midroll',
-            from: 30000,
-            url: 'https://example.com/midroll-ad.xml',
-        },
-    ],
-})
-
 // Change to an external video
 videoController.setSource({
     type: SourceType.VOD_EXTERNAL,
@@ -937,18 +341,6 @@ videoController.setSource({
 // Change to a TV channel
 videoController.setSource('tvChannels/channelId')
 
-// Change to a TV channel with custom ads
-videoController.setSource({
-    path: 'tvChannels/channelId',
-    name: 'TV Channel with Ads',
-    staticAdsConfig: [
-        {
-            type: 'preroll',
-            url: 'https://example.com/tv-preroll-ad.xml',
-        },
-    ],
-})
-
 // Stop playback
 videoController.setSource(null)
 ```
@@ -958,238 +350,17 @@ The `setSource` method is particularly useful for:
 - Implementing playlists
 - Dynamic content loading
 
-#### Minimal OSD / Sticky Mini Player
-
-The player supports a minimal OSD mode designed for small or pinned containers such as a
-scroll-fixed "mini" player. When enabled, only the essential controls are rendered:
-
-- `play` / `pause` (small button in the bottom-left corner)
-- `volume`
-- `fullscreen`
-
-The mode can be toggled in two ways:
-
-1. Declaratively, via the `isMinimal` prop on `WebPlayerProps`.
-2. Imperatively, via the vanilla controller's `setIsMinimal(isMinimal: boolean)` method — useful
-   for switching on/off at runtime (e.g. when the player becomes pinned after the user scrolls
-   past it).
-
-**Example: scroll-pinned mini player**
-
-The layout is driven entirely by CSS — the JS only toggles an `is-floating` class and calls
-`setIsMinimal(true|false)` accordingly. Responsive behavior (desktop corner vs. mobile
-top-full-width) is handled with a media query, so there is no need to watch viewport size from
-React/JS.
-
-```html
-<section class="mini-player-demo">
-    <div class="mini-player-anchor">
-        <div class="mini-player" id="mini-player"></div>
-    </div>
-    <!-- ...page content... -->
-</section>
-```
-
-```css
-.mini-player-anchor {
-    position: relative;
-    width: 100%;
-    aspect-ratio: 16 / 9;
-}
-
-.mini-player {
-    position: absolute;
-    inset: 0;
-    background: #000;
-}
-
-/* Floating (desktop): pinned to bottom-right. */
-.mini-player.is-floating {
-    position: fixed;
-    inset: auto 24px 24px auto;
-    width: 360px;
-    aspect-ratio: 16 / 9;
-    z-index: 1000;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
-}
-
-/* Floating (narrow viewports): pinned to top, full width. */
-@media (max-width: 600px) {
-    .mini-player.is-floating {
-        inset: 0 0 auto 0;
-        width: 100%;
-        border-radius: 0;
-    }
-}
-```
-
-```ts
-import { renderWebPlayer } from '@tivio/sdk-react'
-
-const container = document.getElementById('mini-player')!
-const anchor = document.querySelector('.mini-player-anchor')!
-
-const controller = await renderWebPlayer(container, {
-    id: 'mini-player',
-    source: 'videos/YOUR_VIDEO_ID',
-    isSameSizeAsParent: true,
-    isMutedByDefault: true,
-    autoplay: true,
-})
-
-// Pop out of the flow once the inline anchor leaves the viewport,
-// and switch the OSD between minimal and default accordingly.
-new IntersectionObserver(
-    ([entry]) => {
-        const isFloating = !entry.isIntersecting
-        container.classList.toggle('is-floating', isFloating)
-        controller.setIsMinimal(isFloating)
-    },
-    { threshold: 0.1 },
-).observe(anchor)
-```
-
-Notes:
-- The anchor stays in the flow with its original 16:9 size, so the page layout does not jump
-  when the player detaches.
-- The desktop/mobile floating layout is fully CSS-driven; resizing the browser window
-  updates it live with no extra JS.
-
-You can see this pattern in action in `examples/sdk-react/src/index.tsx` (the
-`createStickyMiniPlayerDemo` function) with styles in `examples/sdk-react/src/index.css`.
-
 **Event Handling:**
 - `addEventListener(event: string, callback: (value: T) => void)` - Add event listener
 - `removeEventListener(event: string, callback: (value: T) => void)` - Remove event listener
 
 **Utility:**
-- `setIsMinimal(isMinimal: boolean)` - Toggle the minimal OSD mode at runtime (see
-  [Minimal OSD / Sticky Mini Player](#minimal-osd--sticky-mini-player))
 - `destroy()` - Destroy player and clean up resources
 
 #### Playback Events
 
 The VideoController emits various events that you can listen to:
 
-#### Ad events
-
-```typescript
-videoController.addEventListener('ad-started', (adMetadata: AdMetadata | null) => {
-    if (!adMetadata) {
-        console.log('Ad started playing (no metadata available)')
-        return
-    }
-
-    console.log('Ad started playing', adMetadata)
-
-    if ('customAdMetadata' in adMetadata && adMetadata.customAdMetadata) {
-        console.log('Ad custom metadata:', adMetadata.customAdMetadata)
-        // customAdMetadata contains VAST trafficking parameters (from VAST AdParameters tag)
-    }
-
-    // Access CTA element for rendering custom call-to-action buttons
-    const { ctaElement } = adMetadata
-    if (ctaElement) {
-        console.log('CTA element available for rendering custom buttons', ctaElement)
-
-        const { customAdMetadata } = adMetadata
-        if (!customAdMetadata) {
-            console.log('No custom ad metadata available')
-            return
-        }
-
-        const { extensions } = customAdMetadata
-        if (!extensions) {
-            console.log('No extensions available')
-            return
-        }
-
-        const { parameters } = extensions[0]
-        if (!parameters) {
-            console.log('No parameters available')
-            return
-        }
-
-        const metadataParameters = parameters as {
-            main_title?: string
-            subtitle?: string
-            image?: string
-            button_text: string
-            url: string
-        }
-
-        const buttonText = metadataParameters.button_text as string | undefined
-
-        if (!buttonText) {
-            console.log('No button text available')
-            return
-        }
-        
-        // Example: Create a custom CTA button using React portal
-        const CTAButton = () => (
-            <div style={{
-                position: 'absolute',
-                bottom: '20px',
-                right: '20px',
-                backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                color: 'white',
-                padding: '12px 24px',
-                borderRadius: '6px',
-                cursor: 'pointer',
-                fontSize: '16px',
-                fontWeight: 'bold',
-                pointerEvents: 'auto',
-            }}>
-                Learn More
-            </div>
-        )
-        
-        // Render the CTA button using React portal
-        const root = ReactDOM.createRoot(ctaElement)
-        root.render(<CTAButton />)
-    }
-
-    // adMetadata contains information like:
-    // - ctaElement?: HTMLElement (for rendering custom CTA buttons)
-    // - customAdMetadata?: Record<string, unknown> (for IMA ads with rich metadata)
-    // - type: 'ad'
-    // - subType: 'inserted' | 'original'
-    // - secondsToEnd: number
-    // - secondsToSkippable: number | null
-    // - canTriggerSkip: boolean
-    // - isSkippable: boolean
-    // - order: number | null
-    // - totalCount: number | null
-    // - skip: () => void
-    // Update UI, show ad overlay, etc.
-})
-
-videoController.addEventListener('ad-ended', () => {
-    console.log('Ad finished playing')
-})
-
-// Companion ads event - fires when companion ads are available for the current ad
-videoController.addEventListener('companion-ads', (companionAds) => {
-    console.log('Companion ads available:', companionAds)
-    
-    // Access companion ad properties using IMA methods
-    companionAds.forEach((companionAd, index) => {
-        console.log(`Companion Ad ${index + 1}:`, {
-            width: companionAd.getWidth(),
-            height: companionAd.getHeight(),
-            contentType: companionAd.getContentType(),
-            // HTML content as string
-            content: companionAd.getContent()
-        })
-    })
-})
-```
-
-> ℹ️ **_Note:_** The CTA overlay element is visible in the WebPlayer only while an ad is playing and is automatically cleaned up on source changes.
-
-#### Video state changes
 ```typescript
 // Video state changes
 videoController.addEventListener('statechange', (state) => {
@@ -1267,11 +438,6 @@ The `WebPlayerProps` interface defines the properties that can be passed to the
 - **`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)
-- **`isMinimal`** (optional, default: `false`): If `true`, the player uses a minimal OSD that
-  exposes only `play`/`pause`, `volume` and `fullscreen` controls. A small center play/pause
-  icon flashes briefly when the state toggles and then fades out.
-  Designed for small/pinned containers such as scroll-fixed mini players. See
-  [Minimal OSD / Sticky Mini Player](#minimal-osd--sticky-mini-player) for usage details.
 - **`showBufferingSpinner`** (optional, default: `true`): Whether to show buffering spinner
 
 ### Audio Properties
@@ -1282,7 +448,7 @@ The `WebPlayerProps` interface defines the properties that can be passed to the
 
 - **`enableKeyboardShortcuts`** (optional, default: `true`): Whether to enable keyboard shortcuts
 - **`customShortcuts`** (optional): Custom keyboard shortcuts configuration:
-```typescript
+  ```typescript
   {
     toggleFullscreen: number[],    // Array of key codes
     togglePause: number[],
@@ -1292,7 +458,7 @@ The `WebPlayerProps` interface defines the properties that can be passed to the
     volumeUp: number[],
     volumeDown: number[]
   }
-```
+  ```
 
 ### Ad Block Properties