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

package/README.md

@@ -2,6 +2,10 @@
 
 ## Changelog
 * Unreleased
+* v2.4.0
+  * patch: improved Player wrapper types
+  * minor: added Tivio DOM events `tivio_key_input_handling_change`, `tivio_context_switch` and `tivio_request_goto`
+  * patch: added support for remote code on browsers that do not implement [indexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
   * patch: added support for browsers that do not implement [indexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
 * v2.3.4
   * patch: fix of usePurchaseSubscription not reactive
@@ -179,6 +183,41 @@ function CustomPlayer() {
 }
 ```
 
+## Tivio DOM events
+
+`TivioWidget` triggers these events on `window.document`.
+
+1. To instruct the parent app to navigate to and focus a specific TivioWidget (e.g. after going back from a Tivio screen)
+
+```typescript
+document.addEventListener("tivio_request_goto", e => {
+    e.detail.widgetId; // string - Tivio widget ID to go navigate to in UI
+});
+```
+2. To notify the parent app about context switch, i.e. where is the user located or what is he focusing
+
+```typescript
+document.addEventListener("tivio_context_switch", e => {
+    e.detail.context; // 'tivio' | 'parent' - where is the user located? - in Tivio or in parent app
+
+    // For context Tivio there are additional fields
+    e.detail.context; // 'tivio'
+    e.detail.contextLocation; // 'route' | 'overlay' | 'widget' - where in Tivio is the user located?
+    // - on a Tivio route, in parent app but looking at a full screen Tivio overlay,
+    // or in parent app and focus is on a Tivio widget
+
+    // For context Tivio contextLocation 'widget' there is an additional field of widget ID
+    e.detail.widgetId; // string - which Tivio widget is focused right now
+});
+```
+3. To notify the parent app about whether it should be handling key input from RC (TV remote) or not. When inputHandler is 'tivio', the parent app should stop reacting to key input, when inputHandler is 'parent' the parent app should start reacting again.
+
+```typescript
+document.addEventListener("tivio_key_input_handling_change", e => {
+    e.detail.inputHandler; // 'tivio' | 'parent' - who should be handling RC input? - Tivio or parent app
+});
+```
+
 ## Data hooks
 
 If you don't want to use TivioWidget, you can implement your own UI using React data hooks.

package/dist/components/ContextProvider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ContextProvider: React.FC;
+export { ContextProvider, };

package/dist/components/PlayerProvider.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2021, nangu.TV, a.s. All rights reserved.
+ * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
+ */
+import React, { FunctionComponentElement } from 'react';
+import type { PlayerWrapper } from '../types/customPlayer.types';
+export declare type PlayerProviderProps = {
+    children: React.ReactNode;
+    playerWrapperId?: string;
+};
+/**
+ * value
+ *  - undefined - you are trying to access this context but are not inside <PlayerContext /> that is a bug
+ *  - null - we are waiting for remote code
+ *  - Player - player is ready
+ */
+export declare const PlayerContext: React.Context<PlayerWrapper | null | undefined>;
+export declare const PlayerProvider: ({ children, playerWrapperId, }: PlayerProviderProps) => FunctionComponentElement<PlayerProviderProps>;
+export declare function withPlayerContext(id: string): <P>(WrappedComponent: React.ComponentType<P>) => (props: P) => JSX.Element;

package/dist/components/TivioProvider.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2021, nangu.TV, a.s. All rights reserved.
+ * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
+ */
+import React from 'react';
+import { RemoteBundleState } from '../services/bundleLoader';
+import { Config } from '../types/bundle.types';
+export declare type TivioProviderProps = {
+    /**
+     * This prop must be set only once and not change value afterwards
+     */
+    conf?: Config;
+    children: React.ReactNode;
+};
+declare const TivioContext: React.Context<RemoteBundleState | null>;
+export declare const TivioProvider: React.FC<TivioProviderProps>;
+export { TivioContext, };

package/dist/components/TivioWidget.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2021, nangu.TV, a.s. All rights reserved.
+ * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
+ */
+import React from 'react';
+import type { TivioWidgetProps, TivioWidgetRef } from '../types/types';
+export declare const TivioWidget: React.ForwardRefExoticComponent<Pick<TivioWidgetProps, "id" | "onEnabled" | "onBlur"> & React.RefAttributes<TivioWidgetRef>>;

package/dist/components/TivioWidgetError.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2021, nangu.TV, a.s. All rights reserved.
+ * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
+ */
+import React from 'react';
+declare type TivioWidgetErrorProps = {
+    error: string | null;
+};
+export declare const TivioWidgetError: React.FC<TivioWidgetErrorProps>;
+export {};

package/dist/components/TivioWidgetLoader.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2021, nangu.TV, a.s. All rights reserved.
+ * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
+ */
+import React from 'react';
+export declare const TivioWidgetLoader: React.FC;

package/dist/components/TvTivioProvider.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2021, nangu.TV, a.s. All rights reserved.
+ * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
+ */
+import React from 'react';
+import { TivioProviderProps } from './TivioProvider';
+export declare const TvTivioProvider: React.FC<TivioProviderProps>;

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

@@ -0,0 +1,6 @@
+import { Channel } from '@tivio/common';
+import React from 'react';
+import type { DataState } from './types';
+declare const ChannelsContext: React.Context<DataState<Channel>>;
+declare const ChannelsContextProvider: React.FC;
+export { ChannelsContext, ChannelsContextProvider, };

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+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/RowItemsContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { DataState } from './types';
+import type { Tag, Video } from '@tivio/common';
+declare type Item = Video | Tag;
+declare const RowItemsContext: React.Context<DataState<Item> | null>;
+declare const RowItemsContextProvider: React.FC;
+export { RowItemsContext, RowItemsContextProvider, };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SingleDataState } from './types';
+import type { Screen } from '@tivio/common';
+declare const ScreensContext: React.Context<SingleDataState<Screen> | null>;
+declare const ScreensContextProvider: React.FC;
+export { ScreensContext, ScreensContextProvider, };

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

@@ -0,0 +1,6 @@
+import { Section } from '@tivio/common';
+import React from 'react';
+import { DataState } from './types';
+declare const SectionsContext: React.Context<DataState<Section>>;
+declare const SectionsContextProvider: React.FC;
+export { SectionsContext, SectionsContextProvider, };

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

@@ -0,0 +1,9 @@
+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, };

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

@@ -0,0 +1,6 @@
+import { Video } from '@tivio/common';
+import React from 'react';
+import { DataState } from './types';
+declare const VideosContext: React.Context<DataState<Video>>;
+declare const VideosContextProvider: React.FC;
+export { VideosContext, VideosContextProvider, };

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

@@ -0,0 +1,8 @@
+export * from './ChannelsContext';
+export * from './OrganizationSubscriptionsContext';
+export * from './PurchasesWithVideosContext';
+export * from './ScreensContext';
+export * from './SectionsContext';
+export * from './UserContext';
+export * from './VideosContext';
+export * from './RowItemsContext';

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

@@ -0,0 +1,27 @@
+export interface SingleHookData<T> {
+    data: T | null;
+    error: Error | null;
+    isLoading: boolean;
+}
+export interface SingleDataState<T> {
+    data: {
+        [key: string]: SingleHookData<T>;
+    };
+    setData: (key: string, data: SingleHookData<T>) => void;
+}
+export declare type PaginationData<T> = {
+    items: T[];
+    hasNextPage: boolean;
+    fetchMore: Function;
+};
+export interface HookData<T> {
+    data: PaginationData<T> | null;
+    error: Error | null;
+    isLoading: boolean;
+}
+export interface DataState<T> {
+    data: {
+        [key: string]: HookData<T>;
+    };
+    setData: (key: string, data: HookData<T>) => void;
+}

package/dist/components/hooks/contentHooks.d.ts

@@ -0,0 +1,68 @@
+import { Channel, Section, Video, Widget } from '../..';
+import { ChannelsContext, SectionsContext, VideosContext } from '../context';
+/**
+ * Use widget
+ * @param widgetId - widget id
+ */
+declare const useWidget: (widgetId: string) => {
+    error: string;
+    widget: Widget | null;
+};
+/**
+ * Use channel
+ * @param channelId - channel id
+ */
+declare const useChannel: (channelId: string) => {
+    error: string | null;
+    data: Channel | null;
+};
+/**
+ * Use section
+ * @param sectionId - section id
+ */
+declare const useSection: (sectionId: string) => {
+    error: string | null;
+    data: Section | null;
+};
+/**
+ * Use video
+ * @param videoId - video id
+ */
+declare const useVideo: (videoId?: string | undefined) => {
+    error: string | null;
+    data: Video | null;
+};
+/**
+ * Use videos in section
+ * @param sectionId - section id
+ * @param [limit] - videos count, defaults to 10
+ */
+declare const useVideosInSection: (sectionId?: string | undefined, limit?: number) => {
+    error: Error | null;
+    data: import("../context/types").PaginationData<Video> | null;
+    isLoading: boolean;
+};
+/**
+ * Use section in channel
+ * @param channelId - channel id
+ * @param [limit] - sections count, defaults to 10
+ */
+declare const useSectionsInChannel: (channelId: string, limit?: number) => {
+    error: Error | null;
+    data: import("../context/types").PaginationData<import("@tivio/common/dist/types/externalTypes/section").Section> | null;
+    isLoading: boolean;
+};
+/**
+ * Use channels in widget
+ * @param widgetId - widget id
+ * @param [limit] - channels count, defaults to 10
+ */
+declare const useChannelsInWidget: (widgetId: string, limit?: number) => {
+    error: Error | null;
+    data: import("../context/types").PaginationData<import("@tivio/common/dist/types/externalTypes/channel").Channel> | null;
+    isLoading: boolean;
+};
+declare const useIsLoaded: () => {
+    isTivioLoaded: boolean;
+};
+export { useWidget, useChannel, useIsLoaded, useSection, useVideo, useVideosInSection, useSectionsInChannel, useChannelsInWidget, VideosContext, SectionsContext, ChannelsContext, };

package/dist/components/hooks/index.d.ts

@@ -0,0 +1,18 @@
+export * from './useUser';
+export * from './useTaggedVideos';
+export * from './useScreens';
+export * from './useScreen';
+export * from './useSearch';
+export * from './useItemsInRow';
+export * from './useCancelSubscription';
+export * from './useTransactionPayment';
+export * from './usePurchaseSubscription';
+export * from './contentHooks';
+export * from './playerHooks';
+export * from './useOrganizationSubscriptions';
+export * from './usePurchasesWithVideos';
+export * from './useFreePurchase';
+export * from './useRowsInScreen';
+export * from './useTivio';
+export * from './useOverlay';
+export * from './useWatchWithoutAds';

package/dist/components/hooks/playerHooks.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2021, nangu.TV, a.s. All rights reserved.
+ * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
+ */
+import type { AdSource, UsePlayerEvent } from '../../types/customPlayer.types';
+import type { BetOffer, Marker } from '../../types/types';
+export declare const usePlayerEvent: UsePlayerEvent;
+export declare const useMarkers: () => Marker[] | null;
+export declare const useBetOffer: () => BetOffer | null;
+interface IntroMarker {
+    marker: Marker;
+    skip: () => void;
+}
+export declare const useIntro: () => IntroMarker | null;
+export declare const useAd: () => AdSource | null;
+export declare const useCurrentMarker: () => Marker | null;
+export declare const useSeekState: () => boolean | null;
+interface AdSegment {
+    remainingMs: number;
+    canSeek: boolean;
+}
+export declare const useAdSegment: () => AdSegment | null;
+export {};

package/dist/components/hooks/useCancelSubscription.d.ts

@@ -0,0 +1,2 @@
+import { UseCancelSubscription } from '@tivio/common';
+export declare const useCancelSubscription: UseCancelSubscription;

package/dist/components/hooks/useError.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook for displaying errors in UI components
+ */
+declare const useError: () => {
+    error: Error | null;
+    raiseError: (error: Error) => void;
+    resetError: () => void;
+};
+export { useError, };

package/dist/components/hooks/useFreePurchase.d.ts

@@ -0,0 +1,4 @@
+declare const useFreePurchase: () => {
+    purchase: (monetizationId: string) => Promise<void>;
+};
+export { useFreePurchase, };

package/dist/components/hooks/useItemsInRow.d.ts

@@ -0,0 +1,11 @@
+import { PaginationInterface, SubscribeToItemsInRowOptions, Tag, Video } from '@tivio/common';
+/**
+ * Use row items
+ * @param rowId - row ID
+ * @param options - subscription options
+ */
+declare const useItemsInRow: (rowId: string, options?: SubscribeToItemsInRowOptions) => {
+    pagination: PaginationInterface<Video | Tag> | null;
+    error: Error | null;
+};
+export { useItemsInRow, };

package/dist/components/hooks/useOrganizationSubscriptions.d.ts

@@ -0,0 +1,4 @@
+declare const useOrganizationSubscriptions: () => {
+    subscriptions: import("@tivio/common").Monetization[];
+};
+export { useOrganizationSubscriptions, };

package/dist/components/hooks/useOverlay.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Displays overlay to purchase "watch without ads mode" if available.
+ * This overlay can be hidden by pressing BACK button on RC.
+ */
+export declare const useOverlayToPurchaseWatchWithoutAds: () => {
+    showOverlay: () => void;
+};
+interface Callbacks {
+    onShow: () => void;
+    onHide: () => void;
+}
+export declare const useRegisterOverlayCallbacks: (callbacks: Callbacks) => void;
+export {};

package/dist/components/hooks/usePurchaseSubscription.d.ts

@@ -0,0 +1,3 @@
+import { QerkoTransaction } from '@tivio/common';
+declare const usePurchaseSubscription: (monetizationId: string) => QerkoTransaction;
+export { usePurchaseSubscription, };

package/dist/components/hooks/usePurchasesWithVideos.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Return purchases with initialized video (purchases[i].video not null)
+ */
+declare const usePurchasesWithVideos: () => {
+    purchases: import("@tivio/common/dist/types/externalTypes/user").Purchase[];
+};
+export { usePurchasesWithVideos, };

package/dist/components/hooks/useRowsInScreen.d.ts

@@ -0,0 +1,6 @@
+import { PaginationInterface, PaginationOptions, Row } from '@tivio/common';
+declare const useRowsInScreen: (screenId: string, options?: PaginationOptions) => {
+    pagination: PaginationInterface<Row> | null;
+    error: Error | null;
+};
+export { useRowsInScreen, };

package/dist/components/hooks/useScreen.d.ts

@@ -0,0 +1,12 @@
+import { ScreenOptions } from '@tivio/common';
+/**
+ * Use app screen
+ * @param screenId - screen ID
+ * @param options - subscribe to screen options
+ */
+declare const useScreen: (screenId: string, options?: ScreenOptions | undefined) => {
+    error: Error | null;
+    data: import("@tivio/common").Screen | null;
+    isLoading: boolean;
+};
+export { useScreen, };

package/dist/components/hooks/useScreens.d.ts

@@ -0,0 +1,5 @@
+import { Screen } from '@tivio/common';
+declare const useScreens: () => {
+    screens: Screen[];
+};
+export { useScreens, };

package/dist/components/hooks/useSearch.d.ts

@@ -0,0 +1,8 @@
+import { ALGOLIA_INDEX_NAME, UseSearch } from '@tivio/common';
+/**
+ * Full text search that returns entities based on search query.
+ * @param indexName - index that search would be performed on ('videos', 'tags', etc.)
+ * @param options - pagination options
+ */
+export declare const useSearch: UseSearch;
+export { ALGOLIA_INDEX_NAME };

package/dist/components/hooks/useTaggedVideos.d.ts

@@ -0,0 +1,11 @@
+import { PaginationInterface, SubscribeToItemsInRowOptions, Video } from '@tivio/common';
+/**
+ * Returns videos with given tag ids
+ * @param tagIds - tag ids
+ * @param options - subscription options
+ */
+declare const useTaggedVideos: (tagIds: string[], options?: SubscribeToItemsInRowOptions) => {
+    pagination: PaginationInterface<Video> | null;
+    error: Error | null;
+};
+export { useTaggedVideos, };

package/dist/components/hooks/useTivio.d.ts

@@ -0,0 +1,3 @@
+declare const useTivioData: () => import("../../types/bundle.types").RemoteBundleState;
+declare const useTivioReadyData: () => import("../../types/bundle.types").RemoteBundleState | null;
+export { useTivioData, useTivioReadyData, };

package/dist/components/hooks/useTransactionPayment.d.ts

@@ -0,0 +1,3 @@
+import { QerkoTransaction } from '@tivio/common';
+declare const useTransactionPayment: (videoId: string, monetizationId: string) => QerkoTransaction;
+export { useTransactionPayment, };

package/dist/components/hooks/useUser.d.ts

@@ -0,0 +1,5 @@
+declare const useUser: () => {
+    user: import("@tivio/common/dist/types/externalTypes/user").User | null;
+    error: string | null;
+};
+export { useUser, };

package/dist/components/hooks/useWatchWithoutAds.d.ts

@@ -0,0 +1,5 @@
+export declare const useCanPurchaseWatchWithoutAds: () => boolean;
+export declare const useWatchWithoutAds: () => {
+    canPurchaseWatchWithoutAds: boolean;
+    showOverlay: () => void;
+};

package/dist/config.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2021, nangu.TV, a.s. All rights reserved.
+ * nangu.TV, a.s PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
+ */
+import { Config as ExternalConfig, InternalConfig } from './types/bundle.types';
+export declare const defaultConf: {
+    secret: null;
+    resolverUrl: string;
+    disableUnmounting: boolean;
+    fetchPackage: import("./services/packageLoader").FetchPackage;
+    pubSub: import("./types/bundle.types").PubSub;
+    LoaderComponent: import("react").FC<{}>;
+    ErrorComponent: import("react").FC<{
+        error: string | null;
+    }>;
+};
+export declare const createInternalConf: (conf: ExternalConfig | null) => InternalConfig;

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+export { PlayerProvider, withPlayerContext } from './components/PlayerProvider';
+export type { PlayerProviderProps } from './components/PlayerProvider';
+export { bundlePromise } from './services/bundlePromise';
+export * from './components/hooks';
+export * from './components/TivioProvider';
+export * from './components/TivioWidget';
+export * from './components/TivioWidgetError';
+export * from './components/TvTivioProvider';
+export * from './components/TivioWidgetLoader';
+export * from './types/customPlayer.types';
+export * from './services/bundleLoader';
+export * from './services/pubSub';
+export * from './types/types';
+export { Disposer } from './types/common';
+export { Empty } from './types/common';
+export { Nullable } from './types/common';
+export { Config } from './types/bundle.types';
+export { TivioBundle } from './types/bundle.types';
+export { TivioHooks } from './types/bundle.types';
+export { TivioComponents } from './types/bundle.types';
+export { TivioAuth } from './types/bundle.types';
+export { TivioGetters } from './types/bundle.types';
+export { TivioSubscriptions } from './types/bundle.types';