@tivio/sdk-react 2.4.0-alpha → 2.4.3

package/dist/services/bundleLoader.d.ts

@@ -3,6 +3,9 @@
  * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
  */
 import { InternalConfig, RemoteBundleState, TivioBundle } from 'src/types/bundle.types';
+/**
+ * @throws if fetch fails
+ */
 declare const fetchBundle: (secret: string, conf: InternalConfig) => Promise<string>;
 /**
  * Fetch & load CommonJS remote module.

package/dist/services/bundlePromise.d.ts

@@ -1,2 +1,4 @@
+import { TivioBundle } from '../types/bundle.types';
 import type { RemoteBundleState } from './bundleLoader';
+export declare let tivioBundle: TivioBundle | null;
 export declare const bundlePromise: Promise<RemoteBundleState>;

package/dist/services/localFetch/coreReactDomDist.d.ts

@@ -0,0 +1 @@
+export declare const loadBundleFromDist: () => import("../../types/bundle.types").TivioBundle;

package/dist/services/localFetch/none.d.ts

@@ -0,0 +1 @@
+export declare const loadBundleFromDist: () => void;

package/dist/types/bundle.types.d.ts

@@ -1,11 +1,11 @@
-import { SubscribeToTaggedVideos, UseCancelSubscription } from '@tivio/common';
+import { SubscribeToTaggedVideos, TileProps, UseCancelSubscription } from '@tivio/common';
 import { ComponentType } from 'react';
 import { Logger } from '../services/logger';
 import { FetchPackage } from '../services/packageLoader';
 import { Disposer, Empty, Nullable } from './common';
 import { Channel, Language, RemoteProviderProps, Section, TivioSources, TivioWidgetProps, UserData, WebPlayerProps, Widget } from './types';
 import type { AdSource, PlayerWrapper } from './customPlayer.types';
-import type { Monetization, QerkoPaymentInfo, Screen, SubscribeToItemsInRow, SubscribeToRowsInScreen, SubscribeToScreen, TvAppProps, Video, User, Purchase } from '@tivio/common';
+import type { Monetization, QerkoPaymentInfo, Screen, SubscribeToItemsInRow, SubscribeToRowsInScreen, SubscribeToScreen, TvAppProps, Video, User, Purchase, UseSearch } from '@tivio/common';
 import type React from 'react';
 declare type Settings = {
     onSetUser: (handler: (userId: string, userPayload: unknown) => void) => void;
@@ -15,7 +15,13 @@ declare type InternalConfig = {
     enable?: boolean;
     secret: string | null;
     verbose?: boolean;
+    /**
+     * @private URL of resolver. Resolver is a script used to fetch remove code bundle
+     */
     resolverUrl: string;
+    /**
+     * @private URL of remote code bundle to be fetched directly (without using resolver)
+     */
     bundleUrlOverride?: string;
     disableUnmounting?: boolean;
     logger?: Logger | null;
@@ -98,6 +104,10 @@ declare type TivioSubscriptions = {
     subscribeToItemsInRow: SubscribeToItemsInRow;
     subscribeToRowsInScreen: SubscribeToRowsInScreen;
     subscribeToTaggedVideos: SubscribeToTaggedVideos;
+    registerOverlayCallbacks: (callbacks: {
+        onShow: () => void;
+        onHide: () => void;
+    }) => void;
 };
 declare type TivioGetters = {
     isTivioLoaded: (cb: (isLoaded: boolean) => void) => boolean;
@@ -136,22 +146,6 @@ declare type TivioGetters = {
      * @returns {Promise<Widget | null>} widget or null if widget does not exists
      */
     getWidgetById: (widgetId: string) => Promise<Widget | null>;
-    /**
-     * Search channels by its name.
-     * Returns array of channels.
-     * @param query - channel name query
-     * @param limit - max count of returned channels
-     * @returns {Promise<Channel[] | null>} channels array
-     */
-    searchChannels: (query: string, limit?: number) => Promise<Channel[]>;
-    /**
-     * Search videos by its name.
-     * Returns array of videos. Video section will be always null
-     * @param query - video name query
-     * @param limit - max count of returned videos
-     * @returns {Promise<Video[] | null>} videos array
-     */
-    searchVideos: (query: string, limit?: number) => Promise<Video[]>;
 };
 interface TivioAuth {
     changePassword: (newPassword: string) => Promise<void>;
@@ -173,11 +167,16 @@ interface TivioAuth {
     signOut: () => Promise<void>;
     createFreePurchase: (monetizationId: string) => Promise<void>;
 }
+interface TileActionProps {
+    goToPlayer?: (videoId: string, rowId?: string) => void;
+    goToLoginScreen?: () => void;
+}
 declare type TivioComponents = {
     AdIndicationButtonWeb: React.ReactNode;
     Markers: React.ReactNode;
     PlayerDataContext: React.ReactNode;
     Provider: React.ComponentType<RemoteProviderProps>;
+    Recommendation: React.ReactNode;
     SkipButtonWeb: React.ReactNode;
     VideoAdBanner: React.ReactNode;
     WebPlayer: React.ComponentType<WebPlayerProps>;
@@ -194,10 +193,16 @@ declare type TivioComponents = {
         onEnded?: () => any;
     }>;
     TvApp: React.ComponentType<TvAppProps>;
+    CustomerScreen: React.ComponentType<{
+        screenId: string;
+    } & TileActionProps>;
+    Row: React.ReactNode;
+    AppTile: React.ComponentType<TileProps>;
 };
 declare type TivioHooks = {
     useAd: () => [(AdSource | null)];
     useCancelSubscription: UseCancelSubscription;
+    useSearch: UseSearch;
 };
 declare type TivioBundle = {
     components: TivioComponents;
@@ -211,11 +216,62 @@ declare type TivioBundle = {
     setUser: (userId: string, userPayload?: unknown) => void;
     sources: TivioSources;
     subscriptions: TivioSubscriptions;
+    internal: {
+        hooks: TivioInternalHooks;
+        providers: TivioInternalProviders;
+    };
 };
+declare type TivioInternalHooks = {
+    useSubscriptionsOverlay: () => SubscriptionOverlayState;
+    useQerkoOverlay: () => QerkoOverlayState;
+    usePurchasesWithVideos: () => {
+        purchases: Purchase[];
+    };
+    useOrganizationSubscriptions: () => {
+        subscriptions: Monetization[];
+    };
+    useUser: () => {
+        user: User | null;
+        error: string | null;
+    };
+};
+declare type TivioInternalProviders = {
+    AppThemeProvider: React.ComponentType;
+    CustomerProvider: React.ComponentType;
+    UserContextProvider: React.ComponentType;
+    SubscriptionOverlayContextProvider: React.ComponentType;
+    QerkoOverlayContextProvider: React.ComponentType;
+    PurchasesWithVideosContextProvider: React.ComponentType;
+    OrganizationSubscriptionsContextProvider: React.ComponentType;
+};
+declare type TivioBundleFile = {
+    Tivio: TivioBundle;
+};
+interface SubscriptionOverlayData {
+    subscriptions?: Monetization[];
+    onPurchase?: () => void;
+    onClose?: () => void;
+}
+declare type SubscriptionOverlayState = {
+    data: SubscriptionOverlayData | null;
+    closeSubscriptionOverlay: () => void;
+    openSubscriptionOverlay: (data: SubscriptionOverlayData) => void;
+};
+interface QerkoData {
+    monetization: Monetization;
+    video?: Video;
+    onPurchase?: () => void;
+    onClose?: () => void;
+}
+interface QerkoOverlayState {
+    data: QerkoData | null;
+    openQerkoOverlay: ((data: QerkoData) => void);
+    closeQerkoOverlay: () => void;
+}
 declare type RemoteBundleState = {
     config: InternalConfig;
     error: string | null;
     settings: Settings;
     state: 'loading' | 'error' | 'ready';
 } & Nullable<TivioBundle>;
-export type { RemoteBundleState, Config, Settings, InternalConfig, TivioBundle, TivioHooks, TivioComponents, TivioAuth, TivioGetters, TivioSubscriptions, Events, PubSub, };
+export type { RemoteBundleState, Config, Settings, InternalConfig, TivioBundle, TivioBundleFile, TivioHooks, TivioComponents, TivioAuth, TivioGetters, TivioSubscriptions, Events, PubSub, };

package/dist/types/customPlayer.types.d.ts

@@ -1,38 +1,171 @@
 import { Empty } from './common';
-export interface BasicSource {
+export declare type ChannelSource = {
+    new (uri: string, originalOptions: Record<string, any>, channelName: string, programName: string, programDescription: string, from: Date, to: Date): ChannelSource;
     description: string;
     name: string;
     uri: string;
-    type: 'AD' | 'VOD' | 'CHANNEL';
-}
-export interface ChannelSource extends BasicSource {
     from: Date;
     channelName: string;
     to: Date;
-    type: 'CHANNEL';
-}
-export interface AdSource extends BasicSource {
+    type: 'channel';
+    watchWithoutAdsRecommendation: {
+        purchase: () => void;
+    } | null;
+};
+export declare type AdSource = {
+    new (uri: string, name: string, description: string, skipDelayMs: number | null, adDurationMs: number, trackingContext?: any, // internal Tivio types
+    adMarker?: any, // internal Tivio types
+    packInfo?: any, // internal Tivio types
+    provider?: any): AdSource;
+    description: string;
+    name: string;
+    uri: string;
     durationMs: number;
     skipDelayMs: number | null;
-    type: 'AD';
-    canSkip?: boolean;
-    skip?: () => void;
-}
-export interface VodSource extends BasicSource {
-    type: 'VOD';
-}
-export declare type InputSource = AdSource | ChannelSource | VodSource;
-export declare type PlayerInterface = {
-    play: () => Empty;
-    pause: () => Empty;
-    seekTo: (positionMs: number) => Empty;
-    setSource: (source: InputSource | null) => Empty;
-    setVolume: (volume: number) => Empty;
+    type: 'ad';
+    /**
+     * true if is skippable and skip countdown has passed
+     */
+    canSkip: boolean;
+    /**
+     * true ad if is skippable after some skipDelayMs (if it is skippable, skipDelayMs is defined)
+     */
+    isSkippable: boolean;
+    /**
+     * Skip ad. Only works when canSkip is true
+     */
+    skip: () => void;
+    /**
+     * Order in ad break (ad break is a group of ads played right after each other)
+     */
+    order: number;
+    /**
+     * Total number of ads in ad break (ad break is a group of ads played right after each other)
+     */
+    totalCount: number;
+    secondsToEnd: number;
+    secondsToSkippable: number | null;
 };
+export declare type VodTivioSource = {
+    new (uri: string, videoId: string, name: string, description: string, adMonetizationId?: string): VodTivioSource;
+    type: 'vod_tivio';
+    description: string;
+    name: string;
+    uri: string;
+};
+export declare type VodExternalSource = {
+    new (uri: string, monetizationId: string, name: string, description: string, originalOptions: Record<string, any>): VodTivioSource;
+    type: 'vod_external';
+    description: string;
+    name: string;
+    uri: string;
+};
+export declare type InputSource = AdSource | ChannelSource | VodTivioSource | VodExternalSource;
+declare type PlayerState = 'playing' | 'paused' | 'idle';
+export interface PlayerInterface {
+    pause: () => void;
+    /**
+     * unpause
+     */
+    play: () => void;
+    /**
+     * @param {number} ms - milliseconds relative to start of video (relative to 0 ms)
+     *  or in case of TV programs relative to start of the program (relative to source.from ms)
+     */
+    seekTo: (ms: number) => void;
+    /**
+     * Source to be passed to player.
+     *
+     * Depending on autoplay settings it should either start playing
+     * immediately or just be loaded by player and stay paused.
+     */
+    setSource: (source: InputSource | null) => void;
+    /**
+     * volume in [0,1]
+     */
+    setVolume?: (volume: number) => void;
+    mute?: () => void;
+    /**
+     * restore volume to previous value
+     */
+    unmute?: () => void;
+}
 export declare type PlayerWrapper = {
+    /**
+     * Report that playback of video has finished
+     */
+    onPlaybackEnded: () => void;
+    /**
+     * Report video progress in milliseconds
+     */
+    onTimeChanged: (ms: number) => void;
+    /**
+     * Report that video state changed
+     */
+    onStateChanged: (state: PlayerState) => void;
+    /**
+     * Send source to Tivio
+     */
+    onSourceChanged: (source: InputSource | null) => void;
+    /**
+     * Report that video failed to load (never started playing)
+     */
+    onLoadError: (error: Error) => void;
+    /**
+     * Report that video failed during playback (successfully loaded and then failed, e.g. part of stream is invalid)
+     */
+    onError: (error: Error) => void;
+    /**
+     * Unpause video
+     */
+    play: () => void;
+    /**
+     * Pause video
+     */
+    pause: () => void;
+    /**
+     * Currently playing source
+     */
+    source: InputSource | null;
     events: {
-        addListener: <T = any>(event: string, cb: (value: T) => Empty) => Empty;
-        removeAllListeners: () => Empty;
+        isSupported: (even: string) => boolean;
+        addListener: <T = any>(event: string, cb: (value: T) => Empty) => void;
+        removeListener: <T = any>(event: string, cb: (value: T) => Empty) => void;
+        removeAllListeners: () => void;
     };
+    /**
+     * Register a low level player that implements player methods, like play video, change volume, etc.
+     */
+    register: (playerInterface: PlayerInterface) => void;
+    /**
+     * duration of current source in ms (both setter and getter)
+     */
+    durationMs: number | null;
+    isPlaybackStarted: boolean;
+    isPaused: boolean;
+    isPlaying: boolean;
+    isIdle: boolean;
+    error: Error | null;
+    /**
+     * Replay the video that finished playback
+     */
+    replay: () => void;
+    /**
+     * Retry to play a video that failed to start playing (e.g. due to a network error)
+     */
+    retry: () => void;
+    togglePlayPause: () => void;
+    seekTo: (ms: number) => void;
+    /**
+     * set volume to value between 0,1
+     */
+    setVolume: (volume: number) => void;
+    /**
+     * change volume by value between -1,1
+     */
+    changeVolumeBy: (volume: number) => void;
+    setMuted: (muted: boolean) => void;
+    toggleMuted: () => void;
 };
 export declare type UsePlayerEvent = <T = any>(eventName: string) => T | null;
+export {};

package/dist/types/types.d.ts

@@ -51,7 +51,7 @@ declare type Section = {
     channel: Channel;
     videos: Video[];
 };
-declare type Chapter = object;
+declare type Chapter = any;
 declare type Purchase = {
     isPurchased: boolean;
     monetizationId: string;
@@ -102,7 +102,7 @@ export interface TivioWidgetRef {
         x: number;
     });
 }
-interface VodTivioSource {
+interface VodTivioSourcePojo {
     type: 'VodTivioSource';
     description: string;
     path: string;
@@ -111,7 +111,7 @@ interface VodTivioSource {
     poster?: string;
     adMonetizationId?: string;
 }
-interface ChannelSource {
+interface ChannelSourcePojo {
     type: 'ChannelSource';
     uri: string;
     originalOptions: any;
@@ -125,7 +125,7 @@ interface ChannelSource {
 declare type VideoPath = string;
 interface WebPlayerProps {
     id: string;
-    source?: VodTivioSource | ChannelSource | VideoPath | null;
+    source?: VodTivioSourcePojo | ChannelSourcePojo | VideoPath | null;
     onEnded?: () => any;
     className?: string;
     /**
@@ -173,4 +173,4 @@ declare type TivioSources = {
     VodExternalSource: any;
     VodTivioSource: any;
 };
-export type { RemoteProviderProps, WebPlayerProps, Marker, BetOffer, Purchase, Chapter, Language, Widget, Channel, Section, Video, TivioSources, UserData, User, Monetization, VodTivioSource, };
+export type { RemoteProviderProps, WebPlayerProps, Marker, BetOffer, Purchase, Chapter, Language, Widget, Channel, Section, Video, TivioSources, UserData, User, Monetization, VodTivioSourcePojo, ChannelSourcePojo, };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tivio/sdk-react",
-    "version": "2.4.0-alpha",
+    "version": "2.4.3",
     "main": "dist/index.js",
     "typings": "dist/index.d.ts",
     "source": "src/index.ts",
@@ -11,23 +11,22 @@
     "scripts": {
         "build": "bash ./scripts/build_prod.sh",
         "build:dev": "bash ./scripts/build_dev.sh",
-        "start": "bash ./scripts/start.sh",
+        "start": "yarn ts-node ./scripts/start.ts",
         "test": "jest --config=./jest.config.js --coverage",
         "clean": "rm -rf dist",
-        "prepublishOnly": "yarn && yarn ts-node ./scripts/prepublish.ts && yarn run build",
         "postpublish": "yarn ts-node ./scripts/postpublish.ts",
         "publish:alpha": "npm publish --tag alpha",
         "check:cycles   ": "npx madge --circular src/**/*"
     },
     "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0"
     },
     "dependencies": {
         "@material-ui/core": "^4.11.2",
         "@material-ui/icons": "^4.11.2",
         "@sentry/browser": "^6.1.0",
-        "@tivio/common": "1.1.40",
+        "@tivio/common": "1.1.65",
         "firebase": "^8.2.3",
         "formik": "^2.2.7",
         "i18next": "^19.8.4",
@@ -36,7 +35,6 @@
         "react-dom": "^17.0.2",
         "react-i18next": "^9.0.10",
         "react-router-dom": "^5.2.0",
-        "react-scripts": "4.0.3",
         "react-spring": "^9.2.4",
         "react-virtualized": "^9.22.3",
         "react": "^17.0.2",
@@ -44,19 +42,17 @@
         "yup": "^0.32.9"
     },
     "devDependencies": {
-        "web-vitals": "^1.0.1",
-        "madge": "^5.0.1",
-        "@testing-library/user-event": "^12.1.10",
         "@testing-library/jest-dom": "^5.11.9",
         "@testing-library/react": "^11.2.3",
         "@testing-library/react-hooks": "^5.0.3",
+        "@testing-library/user-event": "^12.1.10",
         "@types/jest": "^26.0.15",
         "@types/node": "^12.0.0",
+        "@types/node-fetch": "^2.5.8",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
         "@types/react-router-dom": "^5.1.6",
         "@types/react-virtualized": "^9.21.13",
-        "@types/node-fetch": "^2.5.8",
         "@types/styled-components": "^5.1.7",
         "@typescript-eslint/eslint-plugin": "^4.14.0",
         "@typescript-eslint/parser": "^4.14.2",
@@ -65,13 +61,16 @@
         "jest": "^27.0.1",
         "jest-cli": "^26.6.3",
         "jest-fetch-mock": "^3.0.3",
+        "madge": "^5.0.1",
         "node-fetch": "^2.6.1",
         "stream-browserify": "^3.0.0",
         "timers-browserify": "^2.0.12",
         "ts-jest": "^26.4.4",
         "typescript": "^4.1.3",
+        "web-vitals": "^1.0.1",
         "webpack": "^5.15.0",
         "webpack-cli": "^4.4.0",
-        "webpack-merge": "^5.7.3"
+        "webpack-merge": "^5.7.3",
+        "yargs": "17"
     }
 }

package/dist/components/context/OrganizationSubscriptionsContext.d.ts

@@ -1,9 +0,0 @@
-import { Monetization } from '@tivio/common';
-import React from 'react';
-interface OrganizationSubscriptionsContextState {
-    subscriptions: Monetization[];
-    setSubscriptions: (subscriptions: Monetization[]) => void;
-}
-declare const OrganizationSubscriptionsContext: React.Context<OrganizationSubscriptionsContextState>;
-declare const OrganizationSubscriptionsContextProvider: React.FC;
-export { OrganizationSubscriptionsContextProvider, OrganizationSubscriptionsContext, };

package/dist/components/context/PurchasesWithVideosContext.d.ts

@@ -1,9 +0,0 @@
-import { Purchase } from '@tivio/common';
-import React from 'react';
-interface PurchasesWithVideosContextState {
-    purchases: Purchase[];
-    setPurchases: (purchases: Purchase[]) => void;
-}
-declare const PurchasesWithVideosContext: React.Context<PurchasesWithVideosContextState>;
-declare const PurchasesWithVideosContextProvider: React.FC;
-export { PurchasesWithVideosContext, PurchasesWithVideosContextProvider, };

package/dist/components/context/UserContext.d.ts

@@ -1,9 +0,0 @@
-import { User } from '@tivio/common';
-import React from 'react';
-interface UserContextState {
-    user: User | null;
-    setUser: (user: User) => void;
-}
-declare const UserContext: React.Context<UserContextState>;
-declare const UserContextProvider: React.FC;
-export { UserContextProvider, UserContext, };