@tivio/sdk-react 3.1.3 → 3.1.4-alpha

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,4 +1,4 @@
1
- import { Currency, QerkoCancellationInfo, SubscribeToTaggedVideos, UseCancelSubscription } from '@tivio/common';
1
+ import { Currency, QerkoCancellationInfo, ROW_ITEM_TYPES, SubscribeToTaggedVideos, Tag, TilePropsPartial, UseCancelSubscription } from '@tivio/common';
2
2
  import { ComponentType } from 'react';
3
3
  import { Logger } from '../services/logger';
4
4
  import { FetchPackage } from '../services/packageLoader';
@@ -25,6 +25,17 @@ declare type InternalConfig = {
25
25
  bundleUrlOverride?: string;
26
26
  currency: Currency;
27
27
  deviceCapabilities: PlayerCapability[];
28
+ /**
29
+ * Additional options for deviceCapabilities
30
+ */
31
+ capabilitiesOptions?: {
32
+ /**
33
+ * Should the player prefer HTTP sources instead HTTPs if they are available.
34
+ * This can be used on platforms that support mixed content but do not support
35
+ * specific HTTPS certificates. (e.g. certificates from Letsencrypt not supported on LG TVs)
36
+ */
37
+ preferHttp?: boolean;
38
+ };
28
39
  disableUnmounting?: boolean;
29
40
  enable?: boolean;
30
41
  enableSentry?: boolean;
@@ -52,12 +63,11 @@ interface PubSub {
52
63
  publish: <K extends keyof Events>(triggerName: K, payload: Events[K]) => Empty;
53
64
  subscribe: <K extends keyof Events>(triggerName: K, onMessage: (data: Events[K]) => Empty) => Disposer;
54
65
  }
55
- declare type Config = Pick<InternalConfig, 'bundleUrlOverride' | 'currency' | 'disableUnmounting' | 'enable' | 'enableSentry' | 'ErrorComponent' | 'language' | 'LoaderComponent' | 'logger' | 'secret' | 'verbose'> & {
66
+ declare type Config = Pick<InternalConfig, 'bundleUrlOverride' | 'currency' | 'disableUnmounting' | 'capabilitiesOptions' | 'enable' | 'enableSentry' | 'ErrorComponent' | 'language' | 'LoaderComponent' | 'logger' | 'secret' | 'verbose'> & {
56
67
  deviceCapabilities: PlayerCapability[] | 'auto';
57
68
  /**
58
69
  * @private
59
70
  * Run HTML, CSS and JS feature support check
60
- * TODO TIV-1030 use this config in core-react-dom
61
71
  */
62
72
  runFeatureSupportCheck?: boolean;
63
73
  };
@@ -184,6 +194,11 @@ interface TivioAuth {
184
194
  signOut: () => Promise<void>;
185
195
  createFreePurchase: (monetizationId: string) => Promise<void>;
186
196
  }
197
+ interface RouterOverridesContextState {
198
+ goToPlayer: (videoId: string, type: ROW_ITEM_TYPES, rowId?: string) => void;
199
+ goToTagPage: (tagId: string) => void;
200
+ goToLoginScreen: () => void;
201
+ }
187
202
  declare type TivioComponents = {
188
203
  AdIndicationButtonWeb: React.ReactNode;
189
204
  Markers: React.ReactNode;
@@ -206,6 +221,15 @@ declare type TivioComponents = {
206
221
  onEnded?: () => any;
207
222
  }>;
208
223
  TvApp: React.ComponentType<TvAppProps>;
224
+ CustomerScreen: React.ComponentType<{
225
+ screenId: string;
226
+ }>;
227
+ WebTagScreen: React.ReactNode;
228
+ WebRow: React.ReactNode;
229
+ WebTile: React.ComponentType<{
230
+ item?: Video | Tag;
231
+ } & TilePropsPartial>;
232
+ FeatureSupportCheck: React.ComponentType<{}>;
209
233
  };
210
234
  declare type AdSegment = {
211
235
  id: string;
@@ -256,14 +280,63 @@ declare type TivioBundle = {
256
280
  setUser: (userId: string, userPayload: UserPayload | null) => Promise<void>;
257
281
  sources: TivioSources;
258
282
  subscriptions: TivioSubscriptions;
283
+ internal: {
284
+ hooks: TivioInternalHooks;
285
+ providers: TivioInternalProviders;
286
+ };
287
+ };
288
+ declare type TivioInternalHooks = {
289
+ useSubscriptionsOverlay: () => SubscriptionOverlayState;
290
+ useQerkoOverlay: () => QerkoOverlayState;
291
+ usePurchasesWithVideos: () => {
292
+ purchases: Purchase[];
293
+ };
294
+ useOrganizationSubscriptions: () => {
295
+ subscriptions: Monetization[];
296
+ };
297
+ useUser: () => {
298
+ user: User | null;
299
+ error: string | null;
300
+ };
301
+ };
302
+ declare type TivioInternalProviders = {
303
+ AppThemeProvider: React.ComponentType;
304
+ CustomerProvider: React.ComponentType;
305
+ UserContextProvider: React.ComponentType;
306
+ SubscriptionOverlayContextProvider: React.ComponentType;
307
+ QerkoOverlayContextProvider: React.ComponentType;
308
+ PurchasesWithVideosContextProvider: React.ComponentType;
309
+ OrganizationSubscriptionsContextProvider: React.ComponentType;
310
+ RouterOverridesContextProvider: React.ComponentType<RouterOverridesContextState>;
259
311
  };
260
312
  declare type TivioBundleFile = {
261
313
  Tivio: TivioBundle;
262
314
  };
315
+ interface SubscriptionOverlayData {
316
+ subscriptions?: Monetization[];
317
+ onPurchase?: () => void;
318
+ onClose?: () => void;
319
+ }
320
+ declare type SubscriptionOverlayState = {
321
+ data: SubscriptionOverlayData | null;
322
+ closeSubscriptionOverlay: () => void;
323
+ openSubscriptionOverlay: (data: SubscriptionOverlayData) => void;
324
+ };
325
+ interface QerkoData {
326
+ monetization: Monetization;
327
+ video?: Video;
328
+ onPurchase?: () => void;
329
+ onClose?: () => void;
330
+ }
331
+ interface QerkoOverlayState {
332
+ data: QerkoData | null;
333
+ openQerkoOverlay: ((data: QerkoData) => void);
334
+ closeQerkoOverlay: () => void;
335
+ }
263
336
  declare type RemoteBundleState = {
264
337
  config: InternalConfig;
265
338
  error: string | null;
266
339
  settings: Settings;
267
340
  state: 'loading' | 'error' | 'ready';
268
341
  } & Nullable<TivioBundle>;
269
- export type { RemoteBundleState, Config, Settings, InternalConfig, TivioBundle, TivioBundleFile, TivioHooks, TivioComponents, TivioAuth, TivioGetters, TivioSubscriptions, Events, PubSub, PlayerCapability, Currency, };
342
+ export type { RemoteBundleState, Config, Settings, InternalConfig, TivioBundle, TivioBundleFile, TivioHooks, TivioComponents, TivioAuth, TivioGetters, TivioSubscriptions, TivioInternalHooks, TivioInternalProviders, Events, PubSub, PlayerCapability, Currency, };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tivio/sdk-react",
3
- "version": "3.1.3",
3
+ "version": "3.1.4-alpha",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
6
6
  "source": "src/index.ts",
@@ -14,8 +14,6 @@
14
14
  "start": "yarn ts-node ./scripts/start.ts",
15
15
  "test": "jest --config=./jest.config.js --coverage",
16
16
  "clean": "rm -rf dist",
17
- "prepublishOnly": "yarn && yarn run build && yarn ts-node ./scripts/prepublish.ts",
18
- "postpublish": "yarn ts-node ./scripts/postpublish.ts",
19
17
  "publish:alpha": "npm publish --tag alpha",
20
18
  "check:cycles": "npx madge --circular src/**/*"
21
19
  },
@@ -27,7 +25,7 @@
27
25
  "@material-ui/core": "^4.11.2",
28
26
  "@material-ui/icons": "^4.11.2",
29
27
  "@sentry/browser": "^6.1.0",
30
- "@tivio/common": "1.1.75",
28
+ "@tivio/common": "*",
31
29
  "firebase": "^8.2.3",
32
30
  "formik": "^2.2.7",
33
31
  "i18next": "^19.8.4",
package/README.md.bak DELETED
@@ -1,515 +0,0 @@
1
- # @tivio/sdk-react
2
-
3
- ## Changelog
4
-
5
- * UNRELEASED
6
- * v3.1.3
7
- * patch: Hotfix made sure disabled Tivio does not break React Native
8
- * internal: Fixed conf.bundleUrlOverride error handling
9
- * v3.1.2
10
- * patch: Allow `conf` prop of `TivioProvider` to be `null` or `undefined` in order to turn off Tivio
11
- * internal: Added `runFeatureSupportCheck` to `TivioProvider`
12
- * v3.1.1
13
- * patch: fixed `setUser()` crash when bundle fails to load
14
- * v3.1.0
15
- * internal: refactored `useAd`, `useAdSegment`
16
- * patch: `useAdSegment()` now returns null if no monetization is configured, ad segments are not managed in that situation
17
- * internal: fixed refactored `setUser()`
18
- * minor: enriched `AdSegment` type from `useAdSegment()`
19
- * minor: Added `setUser()` function for login and logout
20
- * v3.0.0
21
- * minor: Added hook `useWatchWithoutAdsOffer` to trigger purchase dialog to "watch without ads", if available
22
- * patch: fix peerDependency declaration for react, react-dom
23
- * major: TivioProvider requires deviceCapabilities
24
- * major: TivioProvider requires currency
25
- * minor: add voucher support (see usePurchaseSubscription and useTransactionPayment hooks)
26
- * minor: device limit support
27
- * minor: drm (Widevine, PlayReady) support
28
- * minor: watermarking support
29
- * minor: add useSearch hook
30
- * patch: price on video is 0 when purchased
31
- * v2.4.2
32
- * patch: added back changelog
33
- * v2.4.1
34
- * patch: improved doc about player wrapper
35
- * v2.4.0
36
- * patch: improved Player wrapper types
37
- * minor: added Tivio DOM events `tivio_key_input_handling_change`, `tivio_context_switch` and `tivio_request_goto`
38
- * 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)
39
- * patch: added support for browsers that do not implement [indexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
40
- * v2.3.4
41
- * patch: fix of usePurchaseSubscription not reactive
42
- * v2.3.3
43
- * patch: fix of useUser not updating
44
- * v2.3.2
45
- * patch: next app doesn't fail anymore due to "self is not defined"
46
- * v2.3.1
47
- * patch: fix of @tivio/common dependency
48
- * v2.3.0
49
- * minor: add useTaggedVideos that allows to fetch videos with given tags
50
- * minor: add option to fetch tags (on hook useItemsInRow), useVideo always fetching videos tags
51
- * v2.2.1
52
- * patch: disable Sentry when no config is supplied to `TivioProvider`
53
- * v2.2.0
54
- * patch: reduced bundle size
55
- * minor: disable Sentry when no config is supplied to `TivioProvider` or when Tivio is disabled `{ enable: false }`, or when Sentry is disabled via config `{ enableSentry: false }`
56
- * v2.1.5
57
- * patch fix of `useVideosInSection` hook (fetching video's monetizations)
58
- * v2.1.4
59
- * patch: fix re-rendering of `useAd` during non-skippable ads (requires core-react-dom@2.1.9)
60
- * v2.1.3
61
- * patch: fix changelog
62
- * v2.1.2
63
- * patch: Fixed exported types
64
- * v2.1.1
65
- * patch: TivioWidget now correctly reports `false` via `onEnabled` callback when in invalid internal state
66
- * v2.1.0
67
- * patch: fix of useItemsInRow hook
68
- * patch: fix of useScreen hook
69
- * add: useRowsInScreen hook
70
- * v2.0.3
71
- * patch: fix of useItemsInRow hook
72
- * v2.0.2
73
- * patch: screen and row IDs fixed
74
- * `TivioBundle.subscriptions.subscribeToItemsInRow` now accepts user-defined ID via studio.tiv.io
75
- * `TivioBundle.subscriptions.subscribeToScreen` now accepts user-defined ID via studio.tiv.io
76
- * `Screen` and `Row` types returned by `useScreen()` return their user-defined IDs (`.id`) correctly
77
- * v2.0.1
78
- * no changes
79
- * v2.0.0
80
- * major: video.channelId can now be `string | null` used to be `string`
81
- * minor: added data API and hooks for screens (screens, rows of screen and row items)
82
- * hooks: `useScreen()`, `useItemsInRow()`
83
- * api: `TivioBundle.subscriptions.subscribeToScreen`, `TivioBundle.subscriptions.subscribeToItemsInRow`
84
- * v1.3.6
85
- * ?
86
- * v1.3.5
87
- * minor: added WebPlayer props (canReplay, showMarkers, customShortcuts, enableKeyboardShortcuts, source.poster)
88
- * v1.3.4
89
- * ...
90
-
91
-
92
- ## Installation
93
-
94
- Install @tivio/sdk-react along with its peer dependencies
95
- ```sh
96
- npm i react@17 react-dom@17 @tivio/sdk-react
97
- # or
98
- yarn add react@17 react-dom@17 @tivio/sdk-react
99
- ```
100
-
101
- ## Initialization
102
-
103
- Put Tivio Provider at the top level of your application:
104
-
105
- ``` javascript
106
- import { TivioProvider } from '@tivio/sdk-react'
107
-
108
- const config = {
109
- secret: 'XXXXXXXXXX',
110
- }
111
-
112
- function App({children}) {
113
- return (
114
- <TivioProvider conf={config}>
115
- {children}
116
- </TivioProvider>
117
- )
118
- }
119
- ```
120
-
121
- ## Authentication
122
-
123
- A logged-in user can access more features, such as making purchases. In order to authenticate a user with Tivio, use the `setUser()` method.
124
-
125
- Verification of the user against 3rd party auth servers is implemented per customer.
126
-
127
- ```typescript
128
- import { setUser } from '@tivio/sdk-react'
129
-
130
- // Log in
131
-
132
- // Payload is specific per customer
133
- // A common use-case is sending an auth token inside the payload, which Tivio can use to verify the user
134
- await setUser('userId', { token: 'xxx'})
135
-
136
- // Log out
137
- await setUser('userId', null)
138
- ```
139
-
140
- ## Tivio widget
141
-
142
- Tivio widget is the main Tivio component which shows the widget and provides access to its channels, sections and videos.
143
- Usage is very simple (be sure to set `id` to the widget ID you have configured in [Tivio Studio](https://studio.tiv.io/)):
144
-
145
- ``` javascript
146
- import { TivioWidget } from '@tivio/sdk-react'
147
-
148
- function Screen() {
149
- return (
150
- <TivioWidget id="theWidgetId" />
151
- )
152
- }
153
- ```
154
-
155
- ### Usage with smart TV navigation (focus control)
156
-
157
- ``` javascript
158
- import { TivioWidget, TivioWidgetRef } from '@tivio/sdk-react'
159
-
160
- function Screen() {
161
- const ref = useRef<TivioWidgetRef>(null)
162
-
163
- return (
164
- <TivioWidget id="theWidgetId" ref={ref} onBlur={() => {/* widget lost focus */}}/>
165
- <div>
166
- <button onClick={() => ref.current?.focus({ x: 100 })}>Focus</button>
167
- <button onClick={() => ref.current?.unfocus()}>Unfocus</button>
168
- </div>
169
- )
170
- }
171
- ```
172
-
173
- ## Player wrapper
174
-
175
- 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.
176
-
177
- ### Wrap your player methods with Tivio player wrapper
178
-
179
- ``` javascript
180
- import { useTivioReadyData } from '@tivio/sdk-react'
181
-
182
- function CustomPlayer() {
183
- const tivioData = useTivioReadyData()
184
-
185
- useEffect(() => {
186
- if (tivioData) {
187
- // If your app uses multiple player instances, use different Tivio player wrapper for each
188
- // distinguished by playerWrapperId
189
- const playerWrapper = tivio.getPlayerWrapper({ playerWrapperId: 'PLAYER_1' })
190
-
191
- // Pass your player methods to Tivio player wrapper
192
- playerWrapper.register({
193
- play: () => {
194
- // Un-pause your player
195
- },
196
- pause: () => {
197
- // Pause your player
198
- },
199
- seekTo: (ms: number) => {
200
- // Seek to position in milliseconds using your player
201
- },
202
- setSource: (videoSource: InputSource) => {
203
- // Send this video source to your player to load it
204
- },
205
- })
206
- }
207
- }, [tivioData])
208
- }
209
- ```
210
-
211
- ### Start using Tivio player wrapper methods to control playback
212
-
213
- ``` javascript
214
- // Channel source metadata, such as channel name, epg start and epg end are necessary
215
- // for TV ad segment detection and application of ad strategies
216
- const source = new ChannelSource(
217
- 'https://channel_prima_hd.m3u8',
218
- {
219
- // here put any additional metadata, for your use.
220
- // This object will not be touched by Tivio
221
- },
222
- // channel name
223
- // can also be prima hd, prima_hd, prima, Prima, PRIMA, etc.
224
- // we will normalize it to snake case and add '_hd' if necessary
225
- 'Prima HD',
226
- // program name
227
- 'Dr. House',
228
- // description (optional)
229
- 'Episode about Dr. House being awesome',
230
- // EPG start
231
- new Date('2021-12-10T12:00:00'),
232
- // EPG end
233
- new Date('2021-12-10T13:40:00'),
234
- )
235
-
236
- // Send source to player
237
- playerWrapper.onSourceChanged(source)
238
-
239
- // Un-pause player
240
- playerWrapper.play()
241
-
242
- // Pause player
243
- playerWrapper.pause()
244
- }
245
- ```
246
-
247
- ### Start reporting player events to Tivio
248
-
249
- ``` javascript
250
- // Report that source is playing
251
- playerWrapper.onStateChanged('playing')
252
-
253
- // Report that source is paused
254
- playerWrapper.onStateChanged('paused')
255
-
256
- // Report that source stopped playing
257
- playerWrapper.onPlaybackEnded()
258
- playerWrapper.onStateChanged('idle')
259
-
260
- // Report video progress
261
- playerWrapper.onTimeChanged(ms)
262
- }
263
- ```
264
-
265
- ### Start reporting playback-related errors to Tivio
266
-
267
- ``` javascript
268
- // Report that video failed to load (e.g. due to a wrong URI)
269
- playerWrapper.onLoadError(new Error('video failed to load'))
270
-
271
- // Report that video failed during playback (e.g. due to bad connection, corrupted chunks of stream video etc.)
272
- // This type of error may be auto-recoverable
273
- playerWrapper.onError(new Error('playback error'))
274
- }
275
- ```
276
-
277
- ## Tivio DOM events
278
-
279
- `TivioWidget` triggers these events on `window.document`.
280
-
281
- 1. To instruct the parent app to navigate to and focus a specific TivioWidget (e.g. after going back from a Tivio screen)
282
-
283
- ```typescript
284
- document.addEventListener("tivio_request_goto", e => {
285
- e.detail.widgetId; // string - Tivio widget ID to go navigate to in UI
286
- });
287
- ```
288
- 2. To notify the parent app about context switch, i.e. where is the user located or what is he focusing
289
-
290
- ```typescript
291
- document.addEventListener("tivio_context_switch", e => {
292
- e.detail.context; // 'tivio' | 'parent' - where is the user located? - in Tivio or in parent app
293
-
294
- // For context Tivio there are additional fields
295
- e.detail.context; // 'tivio'
296
- e.detail.contextLocation; // 'route' | 'overlay' | 'widget' - where in Tivio is the user located?
297
- // - on a Tivio route, in parent app but looking at a full screen Tivio overlay,
298
- // or in parent app and focus is on a Tivio widget
299
-
300
- // For context Tivio contextLocation 'widget' there is an additional field of widget ID
301
- e.detail.widgetId; // string - which Tivio widget is focused right now
302
- });
303
- ```
304
- 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.
305
-
306
- ```typescript
307
- document.addEventListener("tivio_key_input_handling_change", e => {
308
- e.detail.inputHandler; // 'tivio' | 'parent' - who should be handling RC input? - Tivio or parent app
309
- });
310
- ```
311
-
312
- ## Data hooks
313
-
314
- If you don't want to use TivioWidget, you can implement your own UI using React data hooks.
315
-
316
- ### useWidget hook
317
-
318
- Gets Widget object and subscribes to its changes.
319
-
320
- ``` javascript
321
- /**
322
- * Use widget
323
- * @param widgetId - widget id
324
- */
325
- useWidget: (widgetId: string) => {
326
- error: string | null;
327
- data: Widget | null;
328
- }
329
- ```
330
-
331
- ### useChannel hook
332
-
333
- Gets Channel object and subscribes to its changes.
334
-
335
- ``` javascript
336
- /**
337
- * Use channel
338
- * @param channelId - channel id
339
- */
340
- useChannel: (channelId: string) => {
341
- error: string | null;
342
- data: Channel | null;
343
- }
344
- ```
345
-
346
- ### useSection hook
347
-
348
- Gets Section object and subscribes to its changes.
349
-
350
- ``` javascript
351
- /**
352
- * Use section
353
- * @param sectionId - section id
354
- */
355
- useSection: (sectionId: string) => {
356
- error: string | null;
357
- data: Section | null;
358
- }
359
- ```
360
-
361
- ### useVideo hook
362
-
363
- Gets Video object and subscribes to its changes.
364
-
365
- ``` javascript
366
- /**
367
- * Use video
368
- * @param videoId - video id
369
- */
370
- useVideo: (videoId: string) => {
371
- error: string | null;
372
- data: Video | null;
373
- }
374
- ```
375
-
376
- ### useChannelsInWidget hook
377
-
378
- Gets array of Channel objects and subscribes to their changes. It is possible to use `hasNextPage` and `fetchMore`
379
- for pagination (returned in `data` object).
380
-
381
- ``` javascript
382
- /**
383
- * Use channels in widget
384
- * @param widgetId - widget id
385
- * @param [limit] - channels count, defaults to 10
386
- */
387
- useChannelsInWidget: (widgetId: string, limit?: number) => {
388
- error: string | null;
389
- data: PaginationData<Channel> | null;
390
- }
391
- ```
392
-
393
- ### useSectionsInChannel hook
394
-
395
- Gets array of Section objects and subscribes to their changes. It is possible to use `hasNextPage` and `fetchMore`
396
- for pagination (returned in `data` object).
397
-
398
- ``` javascript
399
- /**
400
- * Use section in channel
401
- * @param channelId - channel id
402
- * @param [limit] - sections count, defaults to 10
403
- */
404
- useSectionsInChannel: (channelId: string, limit?: number) => {
405
- error: string | null;
406
- data: PaginationData<Section> | null;
407
- }
408
- ```
409
-
410
- ### useVideosInSection hook
411
-
412
- Gets array of Video objects and subscribes to their changes. It is possible to use `hasNextPage` and `fetchMore`
413
- for pagination (returned in `data` object).
414
-
415
- ``` javascript
416
- /**
417
- * Use videos in section
418
- * @param sectionId - section id
419
- * @param [limit] - videos count, defaults to 10
420
- */
421
- useVideosInSection: (sectionId: string, limit?: number) => {
422
- error: string | null;
423
- data: PaginationData<Video> | null;
424
- }
425
- ```
426
-
427
- ### useScreen hook
428
- Gets Screen object and subscribes to its changes.
429
-
430
- ```ts
431
- /**
432
- * Hook to fetch an app screen
433
- * @param screenId - screen ID configured via studio.tiv.io
434
- */
435
- useScreen: (screenId: string) => {
436
- error: Error | null
437
- data: Screen | null
438
- }
439
-
440
- // Example:
441
- // Screens with their screenIds are configured via studio.tiv.io
442
- const screenId = '890sdfvxoi'
443
- const { error, data } = useScreen(screenId)
444
-
445
- if (data) {
446
- const screenName = data.name
447
- const screenRows = data.rows
448
- // ...
449
- }
450
- ```
451
-
452
- ### useItemsInRow hook
453
-
454
- Gets array of Video or Tag objects for a specified row. It is possible to use
455
- `hasNextPage` and `fetchMore` for pagination (returned in `data` object).
456
-
457
- *(Note: Does not subscribe to changes in video objects, in order to refresh data it is necessary to reload the app.)*
458
-
459
- ```ts
460
- /**
461
- * Hook to fetch row items for rows received from `useScreen()`
462
- * @param id - row ID configured via studio.tiv.io
463
- * @param options.limit - items limit
464
- * @param options.noLimit - disable/enable pagination (will fetch all items)
465
- * @param options.fecthTags - disable/enable tags fetching
466
- */
467
- useItemsInRow: (id: string, options: {limit?: number, noLimit?: boolean, fecthTags?: boolean}) => {
468
- error: Error | null
469
- data: PaginationData<Video | Tag> | null
470
- isLoading: boolean
471
- }
472
-
473
- // Example:
474
- // Rows and their row ID can be loaded using useScreen() hook
475
- const Row = ({ id }: { id: string}) => {
476
- const rowData = useItemsInRow(id, 10)
477
-
478
- return <div>
479
- <div>Row id: {id}</div>
480
- Count: ({rowData.data?.items.length})
481
- <div>
482
- {rowData.isLoading && <div>Loading...</div>}
483
- {rowData.data?.items.map(item => (
484
- <div>
485
- <div>{item.name}</div>
486
- <img src={item.cover} alt={item.name} />
487
- </div>
488
- ))}
489
- </div>
490
- <button onClick={() => rowData.data?.fetchMore()}>more</button>
491
- </div>
492
- }
493
- ```
494
-
495
- ### useTaggedItems hook
496
-
497
- Allows to fetch videos with given tags.
498
-
499
- ```ts
500
- /**
501
- * Hook to fetch row items for rows received from `useScreen()`
502
- * @param id - row ID configured via studio.tiv.io
503
- * @param options.limit - items limit
504
- * @param options.noLimit - disable/enable pagination (will fetch all items)
505
- * @param options.fecthTags - disable/enable tags fetching
506
- */
507
- useTaggedItems: (tagIds: string[], {limit?: number, noLimit?: boolean, fecthTags?: boolean}) => {
508
- error: Error | null
509
- data: PaginationData<Video> | null
510
- }
511
-
512
-
513
- # Deprecations
514
- - Video.url will be removed in version 3.0.0, use Video.uri attribute instead
515
- - Video.cover will be removed in version 3.0.0, use Video.assets attribute instead
@@ -1,9 +0,0 @@
1
- import { Monetization } from '@tivio/common';
2
- import React from 'react';
3
- interface OrganizationSubscriptionsContextState {
4
- subscriptions: Monetization[];
5
- setSubscriptions: (subscriptions: Monetization[]) => void;
6
- }
7
- declare const OrganizationSubscriptionsContext: React.Context<OrganizationSubscriptionsContextState>;
8
- declare const OrganizationSubscriptionsContextProvider: React.FC;
9
- export { OrganizationSubscriptionsContextProvider, OrganizationSubscriptionsContext, };
@@ -1,9 +0,0 @@
1
- import { Purchase } from '@tivio/common';
2
- import React from 'react';
3
- interface PurchasesWithVideosContextState {
4
- purchases: Purchase[];
5
- setPurchases: (purchases: Purchase[]) => void;
6
- }
7
- declare const PurchasesWithVideosContext: React.Context<PurchasesWithVideosContextState>;
8
- declare const PurchasesWithVideosContextProvider: React.FC;
9
- export { PurchasesWithVideosContext, PurchasesWithVideosContextProvider, };
@@ -1,9 +0,0 @@
1
- import { User } from '@tivio/common';
2
- import React from 'react';
3
- interface UserContextState {
4
- user: User | null;
5
- setUser: (user: User) => void;
6
- }
7
- declare const UserContext: React.Context<UserContextState>;
8
- declare const UserContextProvider: React.FC;
9
- export { UserContextProvider, UserContext, };