@tivio/sdk-react 2.3.4-beta.1 → 2.4.0

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

@@ -0,0 +1,220 @@
+import { SubscribeToTaggedVideos, 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, UseSearch } from '@tivio/common';
+import type React from 'react';
+declare type Settings = {
+    onSetUser: (handler: (userId: string, userPayload: unknown) => void) => void;
+    setUser: (userId: string, userPayload: unknown) => void;
+};
+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;
+    fetchPackage: FetchPackage;
+    pubSub: PubSub;
+    LoaderComponent?: ComponentType;
+    ErrorComponent?: ComponentType<{
+        error: string | null;
+    }>;
+    language?: string;
+    sdkVersion: string;
+    enableSentry?: boolean;
+};
+declare type Events = {
+    'on-ready': RemoteBundleState;
+    'on-error': Error;
+};
+interface PubSub {
+    publish: <K extends keyof Events>(triggerName: K, payload: Events[K]) => Empty;
+    subscribe: <K extends keyof Events>(triggerName: K, onMessage: (data: Events[K]) => Empty) => Disposer;
+}
+declare type Config = Pick<InternalConfig, 'enable' | 'secret' | 'verbose' | 'logger' | 'disableUnmounting' | 'bundleUrlOverride' | 'LoaderComponent' | 'ErrorComponent' | 'language' | 'enableSentry'>;
+declare type TivioSubscriptions = {
+    subscribeToUser: (cb: (error: string | null, user: User | null) => void) => void;
+    /**
+     * Listen to widget changes.
+     * @param widgetId - widget id
+     * @param cb - callback on widget updates or on error
+     */
+    subscribeToWidget: (widgetId: string, cb: (error: Error | null, data: Widget | null, disposer?: Disposer) => void) => void;
+    /**
+     * Listen to channel changes.
+     * @param channelId - channel id
+     * @param cb - callback on channel updates or on error
+     */
+    subscribeToChannel: (channelId: string, cb: (error: Error | null, data: Channel | null) => void) => void;
+    /**
+     * Listen to section changes.
+     * @param sectionId - section id
+     * @param cb - callback on section updates or on error
+     */
+    subscribeToSection: (sectionId: string, cb: (error: Error | null, data: Section | null) => void) => void;
+    /**
+     * Listen to video changes.
+     * @param videoId - video id
+     * @param cb - callback on video updates or on error
+     */
+    subscribeToVideo: (videoId: string, cb: (error: Error | null, data: Video | null, disposer?: Disposer) => void) => void;
+    /**
+     * Listen to videos in section changes.
+     * @param sectionId - section id
+     * @param cb - callback on videos change or error
+     * @param limit - videos count
+     */
+    subscribeToVideosInSection: (sectionId: string, cb: (error: null | Error, data: null | {
+        videos: Video[];
+        hasNextPage: boolean;
+    }, fetchMore: null | ((count?: number) => void), isLoading: boolean) => void, limit?: number) => void;
+    /**
+     * Listen to section in channel changes
+     * @param channelId - channel id
+     * @param cb - callback on sections change or error
+     * @param limit - sections count
+     */
+    subscribeToSectionsInChannel: (channelId: string, cb: (error: null | Error, data: null | {
+        sections: Section[];
+        hasNextPage: boolean;
+    }, fetchMore: null | ((count?: number) => void), isLoading: boolean) => void, limit?: number) => void;
+    /**
+     * Listen to channels in widget changes
+     * @param widgetId - widget id
+     * @param cb - callback on channels change or error
+     * @param limit - channels count
+     */
+    subscribeToChannelsInWidget: (widgetId: string, cb: (error: null | Error, data: null | {
+        channels: Channel[];
+        hasNextPage: boolean;
+    }, fetchMore: null | ((count?: number) => void), isLoading: boolean) => void, limit?: number) => void;
+    subscribeToScreen: SubscribeToScreen;
+    subscribeToItemsInRow: SubscribeToItemsInRow;
+    subscribeToRowsInScreen: SubscribeToRowsInScreen;
+    subscribeToTaggedVideos: SubscribeToTaggedVideos;
+    registerOverlayCallbacks: (callbacks: {
+        onShow: () => void;
+        onHide: () => void;
+    }) => void;
+};
+declare type TivioGetters = {
+    isTivioLoaded: (cb: (isLoaded: boolean) => void) => boolean;
+    isSignedIn: () => boolean;
+    /**
+     * Get channel by its id.
+     * @param channelId - channel id
+     * @returns {Promise<Channel | null>} channel or null if channel does not exists
+     */
+    getChannelById: (channelId: string) => Promise<Channel | null>;
+    /**
+     * Get (or create) player wrapper instance
+     * @param opt - player getter options
+     * @returns {PlayerWrapper} player wrapper instance
+     */
+    getPlayerWrapper: (opt: {
+        playerWrapperId?: string;
+    }) => PlayerWrapper;
+    getOrganizationScreens: () => Promise<Screen[]>;
+    getOrganizationSubscriptions: () => Promise<Monetization[] | undefined>;
+    /**
+     * Get section by its id.
+     * @param sectionId - section id
+     * @returns {Promise<{section: Section, channel: Channel} | null>} section and channel or null if channel or section does not exists
+     */
+    getSectionById: (sectionId: string) => Promise<Section | null>;
+    /**
+     * Get video by its id.
+     * @param videoId - video id
+     * @returns {Promise<Video | null>} video or null if video does not exists
+     */
+    getVideoById: (videoId: string) => Promise<Video | null>;
+    /**
+     * Get widget by its id.
+     * @param widgetId - widget id
+     * @returns {Promise<Widget | null>} widget or null if widget does not exists
+     */
+    getWidgetById: (widgetId: string) => Promise<Widget | null>;
+};
+interface TivioAuth {
+    changePassword: (newPassword: string) => Promise<void>;
+    changeUserPhoto(file: File): Promise<void>;
+    removeUserPhoto(): Promise<void>;
+    getPurchasedVodsWithInitializedVideos: () => Promise<Purchase[]>;
+    /**
+     * @param email
+     * @param password
+     */
+    createUserWithEmailAndPassword: (email: string, password: string, userData?: UserData) => Promise<void>;
+    /**
+     * Sign in the user and starts listening on his purchases
+     * @param email
+     * @param password
+     */
+    signInWithEmailAndPassword: (email: string, password: string) => Promise<void>;
+    initializeUser: () => Promise<void>;
+    signOut: () => Promise<void>;
+    createFreePurchase: (monetizationId: string) => Promise<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>;
+    Widget: React.ComponentType<TivioWidgetProps>;
+    TvPlayer: React.ComponentType<WebPlayerProps>;
+    PlayerDataContextProvider: React.ComponentType<{
+        id: string;
+    }>;
+    SkipButtonTv: React.ComponentType<{
+        Button: React.ComponentType;
+        Label: React.ComponentType;
+        Container: React.ComponentType;
+        onStarted?: () => any;
+        onEnded?: () => any;
+    }>;
+    TvApp: React.ComponentType<TvAppProps>;
+};
+declare type TivioHooks = {
+    useAd: () => [(AdSource | null)];
+    useCancelSubscription: UseCancelSubscription;
+    useSearch: UseSearch;
+};
+declare type TivioBundle = {
+    components: TivioComponents;
+    getters: TivioGetters;
+    auth: TivioAuth;
+    hooks: TivioHooks;
+    init: (config: Config) => void | Promise<void>;
+    purchaseVideoWithQerko: (videoId: string, monetizationId: string) => Promise<QerkoPaymentInfo>;
+    purchaseSubscriptionWithQerko: (monetizationId: string) => Promise<QerkoPaymentInfo>;
+    setLanguage: (language: Language) => void;
+    setUser: (userId: string, userPayload?: unknown) => void;
+    sources: TivioSources;
+    subscriptions: TivioSubscriptions;
+};
+declare type TivioBundleFile = {
+    Tivio: TivioBundle;
+};
+declare type RemoteBundleState = {
+    config: InternalConfig;
+    error: string | null;
+    settings: Settings;
+    state: 'loading' | 'error' | 'ready';
+} & Nullable<TivioBundle>;
+export type { RemoteBundleState, Config, Settings, InternalConfig, TivioBundle, TivioBundleFile, TivioHooks, TivioComponents, TivioAuth, TivioGetters, TivioSubscriptions, Events, PubSub, };

package/dist/types/common.d.ts

@@ -0,0 +1,6 @@
+declare type Nullable<T> = {
+    [P in keyof T]: T[P] | null;
+};
+declare type Empty = void | Promise<void> | undefined | Promise<undefined>;
+declare type Disposer = () => void;
+export { Disposer, Empty, Nullable, };

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

@@ -0,0 +1,171 @@
+import { Empty } from './common';
+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;
+    from: Date;
+    channelName: string;
+    to: Date;
+    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';
+    /**
+     * 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: {
+        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

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2021, nangu.TV, a.s. All rights reserved.
+ * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
+ */
+/**
+ * Export public client side API
+ */
+import { USER_TYPE } from '@tivio/common';
+import type { Monetization, Video } from '@tivio/common';
+import type React from 'react';
+declare type RemoteProviderProps = {
+    disableUnmounting?: boolean;
+    language?: string;
+};
+declare type Language = 'cs' | 'en' | 'sk' | 'de' | 'pl';
+declare type User = {
+    purchases: Purchase[];
+    purchasedVods: Purchase[];
+    purchasedSubscriptions: Purchase[];
+    getPurchasedVodsWithInitializedVideos: () => Promise<Purchase[]>;
+    isPurchasesInitialized: boolean;
+    isSignedIn: boolean;
+    email: string;
+    type?: USER_TYPE;
+    photoURL: string | null;
+    name?: string;
+    authUserId?: string;
+};
+interface UserData {
+    name?: string;
+}
+declare type Widget = {
+    id: string;
+    channels: Channel[];
+    isEnabled: boolean | null;
+    name: string | null;
+    recentVideos: Video[] | null;
+    widgetId: string | null;
+    lastVideo: Video | null;
+};
+declare type Channel = {
+    id: string;
+    name: string;
+    header: string;
+    headerLogo: string;
+    recentVideos: Video[];
+};
+declare type Section = {
+    id: string;
+    name: string;
+    channel: Channel;
+    videos: Video[];
+};
+declare type Chapter = any;
+declare type Purchase = {
+    isPurchased: boolean;
+    monetizationId: string;
+    videoId: string;
+    status: string;
+    video: Video | null;
+};
+declare type Marker = {
+    id: string;
+    type: string;
+    from: Date;
+    to: Date;
+    count?: number;
+    fromMs?: number;
+    toMs?: number;
+};
+declare type BetOffer = {
+    betService: string;
+    league: string;
+    odds: {
+        winner: string;
+        rate: number;
+    }[];
+    sport: string;
+    opponent1: string;
+    opponent2: string;
+    time: Date;
+};
+export interface TivioWidgetProps {
+    id: string;
+    ref: React.MutableRefObject<TivioWidgetRef>;
+    onEnabled?: (enabled: boolean) => any;
+    onBlur?: (event: {
+        key: string;
+        width: number;
+        x: number;
+    }) => any;
+}
+export interface TivioWidgetRef {
+    focus: (args: {
+        x?: number;
+    }) => void;
+    handleKey: (key: string) => ({
+        handled: boolean;
+        x: number;
+    });
+    unfocus: () => ({
+        x: number;
+    });
+}
+interface VodTivioSourcePojo {
+    type: 'VodTivioSource';
+    description: string;
+    path: string;
+    name: string;
+    uri: string;
+    poster?: string;
+    adMonetizationId?: string;
+}
+interface ChannelSourcePojo {
+    type: 'ChannelSource';
+    uri: string;
+    originalOptions: any;
+    channelName: string;
+    programName: string;
+    programDescription: string;
+    from: Date;
+    to: Date;
+    poster?: string;
+}
+declare type VideoPath = string;
+interface WebPlayerProps {
+    id: string;
+    source?: VodTivioSourcePojo | ChannelSourcePojo | VideoPath | null;
+    onEnded?: () => any;
+    className?: string;
+    /**
+     * default false
+     *
+     * If you choose `autoplay` make sure that autoplay is allowed in the specific situation.
+     * In some cases it may not be allowed, e.g. before the user interacted with the site, and the video
+     * will stay paused.
+     *
+     * Source: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
+     */
+    autoplay?: boolean;
+    /**
+     * default false
+     */
+    canReplay?: boolean;
+    /**
+     * default false
+     */
+    showMarkers?: boolean;
+    /**
+     * number[] is array of keyboard event.which numeric codes
+     * (see https://keycode.info/)
+     */
+    customShortcuts?: Partial<{
+        toggleFullscreen: number[];
+        togglePause: number[];
+        toggleMute: number[];
+        jumpForward: number[];
+        jumpBack: number[];
+        volumeUp: number[];
+        volumeDown: number[];
+    }>;
+    /**
+     * default true
+     */
+    enableKeyboardShortcuts?: boolean;
+    onProgress?: (event: React.ChangeEvent<HTMLVideoElement>) => void;
+    onLoadedMetadata?: (event: React.ChangeEvent<HTMLVideoElement>) => void;
+    onPlayerControllerCreated?: (playerController: any) => void;
+}
+declare type TivioSources = {
+    AdSource: any;
+    ChannelSource: any;
+    VodExternalSource: any;
+    VodTivioSource: any;
+};
+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.3.4-beta.1",
+    "version": "2.4.0",
     "main": "dist/index.js",
     "typings": "dist/index.d.ts",
     "source": "src/index.ts",
@@ -11,9 +11,10 @@
     "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/**/*"
@@ -26,18 +27,18 @@
         "@material-ui/core": "^4.11.2",
         "@material-ui/icons": "^4.11.2",
         "@sentry/browser": "^6.1.0",
-        "@tivio/common": "1.1.53",
+        "@tivio/common": "1.1.61",
         "firebase": "^8.2.3",
         "formik": "^2.2.7",
         "i18next": "^19.8.4",
-        "mobx": "^6.0.4",
         "mobx-react": "^7.1.0",
-        "react": "^17.0.2",
+        "mobx": "^6.0.4",
         "react-dom": "^17.0.2",
         "react-i18next": "^9.0.10",
         "react-router-dom": "^5.2.0",
         "react-spring": "^9.2.4",
         "react-virtualized": "^9.22.3",
+        "react": "^17.0.2",
         "styled-components": "^5.2.1",
         "yup": "^0.32.9"
     },
@@ -70,6 +71,7 @@
         "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"
     }
 }