@tivio/sdk-react 2.3.4 → 2.4.2-beta1

package/README.md

@@ -1,6 +1,16 @@
 # @tivio/sdk-react
 
 ## Changelog
+* Unreleased
+* v2.4.2
+  * patch: added back changelog
+* v2.4.1
+  * patch: improved doc about player wrapper
+* 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
 * v2.3.3
@@ -20,7 +30,7 @@
 * v2.1.5
   * patch fix of `useVideosInSection` hook (fetching video's monetizations)
 * v2.1.4
-  * patch: fix re-rendering of `useAd` during non-skippable ads (requires core-react@2.1.9)
+  * patch: fix re-rendering of `useAd` during non-skippable ads (requires core-react-dom@2.1.9)
 * v2.1.3
   * patch: fix changelog
 * v2.1.2
@@ -52,16 +62,14 @@
 * v1.3.4
   * ...
 
-## Installation
 
-Check/install peer dependencies
-``` sh
-npm install --save mobx@6.0.4 styled-components@5.2.1 firebase@8.2.3 react@17.0.2 react-dom@17.0.2
-```
+## Installation
 
-Install SDK itself
-``` sh
-npm install --save @tivio/sdk-react
+Install @tivio/sdk-react along with its peer dependencies
+```sh
+npm i react@17 react-dom@17 @tivio/sdk-react
+# or
+yarn add react@17 react-dom@17 @tivio/sdk-react
 ```
 
 ## Initialization
@@ -71,13 +79,13 @@ Put Tivio Provider at the top level of your application:
 ``` javascript
 import { TivioProvider } from '@tivio/sdk-react'
 
-const tivioConf = {
+const config = {
     secret: 'XXXXXXXXXX',
 }
 
 function App({children}) {
     return (
-        <TivioProvider conf={tivioConf}>
+        <TivioProvider conf={config}>
            {children}
         </TivioProvider>
     )
@@ -89,7 +97,7 @@ function App({children}) {
 ``` javascript
 import { TivioProvider, setUser } from '@tivio/sdk-react'
 
-const tivioConf = {
+const config = {
     secret: 'XXXXXXXXXX',
 }
 
@@ -97,7 +105,7 @@ setUser('user-id', { some: 'payload' })
 
 function App({children}) {
     return (
-        <TivioProvider conf={tivioConf}>
+        <TivioProvider conf={config}>
            {children}
         </TivioProvider>
     )
@@ -106,7 +114,7 @@ function App({children}) {
 ## Tivio widget
 
 Tivio widget is the main Tivio component which shows the widget and provides access to its channels, sections and videos.
-Usage is very simple (be sure to set `id` to the widget ID you have configured in Tivio Studio):
+Usage is very simple (be sure to set `id` to the widget ID you have configured in [Tivio Studio](https://studio.tiv.io/)):
 
 ``` javascript
 import { TivioWidget } from '@tivio/sdk-react'
@@ -135,48 +143,146 @@ function Screen() {
     )
 }
 ```
+
 ## Player wrapper
 
-Player wrapper is the way how you can enhance your video player with Tivio features (e.g. inserting of ads).
+Player wrapper is the way how you can enhance your video player with Tivio features, such Tivio Ads. In order to start using Tivio player wrapper, wrap your player methods with PlayerWrapper, start using PlayerWrapper's methods instead of them to control your playback and start sending player events to Tivio PlayerWrapper.
+
+### Wrap your player methods with Tivio player wrapper
 
 ``` javascript
-import { useTivioData } from '@tivio/sdk-react'
+import { useTivioReadyData } from '@tivio/sdk-react'
 
 function CustomPlayer() {
-    const tivio = useTivioData()
-    const [isPlaying, setIsPlaying] = useState()
+    const tivioData = useTivioReadyData()
 
     useEffect(() => {
-        (async () => {
-            if (tivio.getPlayerWrapper) {
-                const playerWrapper = await tivio.getPlayerWrapper(
-                    { playerWrapperId: 'default' }
-                )
-
-                playerWrapper.register({
-                    play: () => {
-                        setIsPlaying(true)
-                        // start playback using your player here
-                    },
-                    pause: () => {
-                        setIsPlaying(false)
-                        // pause playback using your player here
-                    },
-                    seekTo: (ms: number) => {
-                        // seek using your player here
-                    },
-                    setSource: (videoSource: InputSource) => {
-                        // play videoSource using your player here
-                    },
-                })
-            }
-        })()
-    }, [])
-
-    return (<div>Example is {isPlaying ? null : 'not '}playing.</div>)
+        if (tivioData) {
+            // If your app uses multiple player instances, use different Tivio player wrapper for each
+            // distinguished by playerWrapperId
+            const playerWrapper = tivio.getPlayerWrapper({ playerWrapperId: 'PLAYER_1' })
+
+            // Pass your player methods to Tivio player wrapper
+            playerWrapper.register({
+                play: () => {
+                    // Un-pause your player
+                },
+                pause: () => {
+                    // Pause your player
+                },
+                seekTo: (ms: number) => {
+                    // Seek to position in milliseconds using your player
+                },
+                setSource: (videoSource: InputSource) => {
+                    // Send this video source to your player to load it
+                },
+            })
+        }
+    }, [tivioData])
+}
+```
+
+### Start using Tivio player wrapper methods to control playback
+
+``` javascript
+    // Channel source metadata, such as channel name, epg start and epg end are necessary
+    // for TV ad segment detection and application of ad strategies
+    const source = new ChannelSource(
+        'https://channel_prima_hd.m3u8',
+        {
+            // here put any additional metadata, for your use.
+            // This object will not be touched by Tivio
+        },
+        // channel name
+        // can also be prima hd, prima_hd, prima, Prima, PRIMA, etc.
+        // we will normalize it to snake case and add '_hd' if necessary
+        'Prima HD',
+        // program name
+        'Dr. House',
+        // description (optional)
+        'Episode about Dr. House being awesome',
+        // EPG start
+        new Date('2021-12-10T12:00:00'),
+        // EPG end
+        new Date('2021-12-10T13:40:00'),
+    )
+
+    // Send source to player
+    playerWrapper.onSourceChanged(source)
+
+    // Un-pause player
+    playerWrapper.play()
+
+    // Pause player
+    playerWrapper.pause()
 }
 ```
 
+### Start reporting player events to Tivio
+
+``` javascript
+    // Report that source is playing
+    playerWrapper.onStateChanged('playing')
+
+    // Report that source is paused
+    playerWrapper.onStateChanged('paused')
+
+    // Report that source stopped playing
+    playerWrapper.onPlaybackEnded()
+    playerWrapper.onStateChanged('idle')
+
+    // Report video progress
+    playerWrapper.onTimeChanged(ms)
+}
+```
+
+### Start reporting playback-related errors to Tivio
+
+``` javascript
+    // Report that video failed to load (e.g. due to a wrong URI)
+    playerWrapper.onLoadError(new Error('video failed to load'))
+
+    // Report that video failed during playback (e.g. due to bad connection, corrupted chunks of stream video etc.)
+    // This type of error may be auto-recoverable
+    playerWrapper.onError(new Error('playback error'))
+}
+```
+
+## 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/PlayerProvider.d.ts

@@ -3,11 +3,17 @@
  * 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;
 };
-export declare type Player = any;
-export declare const PlayerContext: React.Context<any>;
+/**
+ * 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/hooks/index.d.ts

@@ -2,7 +2,9 @@ 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';
@@ -12,3 +14,5 @@ export * from './usePurchasesWithVideos';
 export * from './useFreePurchase';
 export * from './useRowsInScreen';
 export * from './useTivio';
+export * from './useOverlay';
+export * from './useWatchWithoutAds';

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/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/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/useWatchWithoutAds.d.ts

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