From 76b9912be191aad94e09ae82e55ccdcfabd38e0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tor=20Erik=20Alr=C3=A6k?= Date: Tue, 19 Mar 2019 07:35:34 +0100 Subject: [PATCH] Docs improvements. --- doczrc.js | 10 +++- .../advanced-playback/adaptive-streaming.mdx | 8 ++-- .../docs/advanced-playback/bitrates.mdx | 2 +- .../custom-player/add-controls-components.mdx | 12 +++-- .../custom-player/custom-strings-graphics.mdx | 4 +- src/replay/docs/custom-player/overview.mdx | 8 ++-- .../docs/custom-replay/configuration.mdx | 4 +- .../docs/custom-replay/skins-styles.mdx | 8 ++-- .../docs/reference/replay-component.mdx | 9 ++++ .../using-replay/controlling-playback.mdx | 4 +- src/replay/docs/using-replay/insert.mdx | 16 +++---- src/replay/docs/using-replay/replay-api.mdx | 48 +++++++++---------- .../docs/using-replay/startup-options.mdx | 4 +- src/replay/index.mdx | 12 +++-- 14 files changed, 87 insertions(+), 62 deletions(-) create mode 100644 src/replay/docs/reference/replay-component.mdx diff --git a/doczrc.js b/doczrc.js index 721519c4..b1a5138a 100644 --- a/doczrc.js +++ b/doczrc.js @@ -73,8 +73,14 @@ export default { 'How to change graphics or texts' ] }, - - 'Reference', + { + name: 'Reference', + menu: [ + 'Stream state properties', + 'Settable properties', + 'Replay component reference' + ] + }, 'Controls reference', 'Containers/helpers reference', 'Generic controls reference' diff --git a/src/replay/docs/advanced-playback/adaptive-streaming.mdx b/src/replay/docs/advanced-playback/adaptive-streaming.mdx index 6386499a..815ad7da 100644 --- a/src/replay/docs/advanced-playback/adaptive-streaming.mdx +++ b/src/replay/docs/advanced-playback/adaptive-streaming.mdx @@ -72,7 +72,7 @@ const render = () => ( ### MPEG-DASH with Shaka Player -The Shaka Player video streamer component can be imported with the import statement added at the end: +The Shaka Player video streamer component can be inserted after adding this import statement at the end: ```javascript import { Replay } from 'vimond-replay'; @@ -122,7 +122,9 @@ const render = () => ( The helper component ``'s task is to select a compatible video streamer for Replay based on the stream type, and in a special case, also taking the browser into consideration. -For HLS, it inserts ``, for MPEG-DASH ``. A progressive video source resolves to ``. The mentioned special case is the combination of Safari and HLS streams. Safari and the Apple operating systems support HLS natively, and the HTML video element play these streams optimally without any third party library. For this combination, the compound video streamer then selects ``. It includes support for FairPlay DRM. +For HLS, it inserts ``, for MPEG-DASH ``. A progressive video source resolves to ``. + +The mentioned special case is the combination of Safari and HLS streams. Safari and the Apple operating systems support HLS natively, and the HTML video element play these streams optimally without any third party library. For this combination, the compound video streamer then selects ``. It includes support for FairPlay DRM. The mentioned third party player libraries are quite big, and adds several hundred kilobytes to the script bundle. Because of this, `` uses [React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy) and [dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports). It loads only one video streamer and its integrated third party library when needed. @@ -141,7 +143,7 @@ The recognised mime types are as follows: * HLS: `application/x-mpegurl`, alternatively `vnd.apple.mpegurl` * Progressive MP4 or WebM: `video/mp4`, `video/webm` -If the source is only specified as a string containing the URL to the manifest, playlist, or video file, the compound video streamer attempts detecting the stream type based on URL content. +If the source is only specified as a string containing the URL to the manifest, playlist, or video file, the compound video streamer attempts detecting the stream type based on URL content. If the stream doesn't play as expected, try adding the correct `contentType` to the `Replay` source in order to eliminate incorrect stream type detections from the URL. ```javascript import React from 'react'; diff --git a/src/replay/docs/advanced-playback/bitrates.mdx b/src/replay/docs/advanced-playback/bitrates.mdx index b8ddb99b..a2b2b974 100644 --- a/src/replay/docs/advanced-playback/bitrates.mdx +++ b/src/replay/docs/advanced-playback/bitrates.mdx @@ -4,6 +4,6 @@ route: /advanced-playback/bitrates menu: 'Advanced playback' --- -## Bitrates and adaptive quality selection +# Bitrates and adaptive quality selection This chapter is not written yet, but will discuss how an underlying adaptive streaming library's quality management is exposed in Replay. diff --git a/src/replay/docs/custom-player/add-controls-components.mdx b/src/replay/docs/custom-player/add-controls-components.mdx index abfbcb32..75ffd604 100644 --- a/src/replay/docs/custom-player/add-controls-components.mdx +++ b/src/replay/docs/custom-player/add-controls-components.mdx @@ -14,10 +14,14 @@ This chapter describes how to customise the player UI by bringing in new control ## The player composer -The easiest approach to building a custom player, is to use the composePlayer method. It produces a React component from what's typically being subject to customisation. +The easiest approach to building a custom player, is to use the `composePlayer()` method. It produces a React component from some parts that typically are being subject to customisation requirements. ## Adding a title overlay - step by step +In this example, the goal is to bring in a small overlay bar aligned at the top of the video area, presenting a video title with duration. This feature should be able for reuse every time the player is inserted, which is achieved by including the overlay as part of a custom Replay player component. + +The code blocks underneath are excerpts, while the full demo files are [available on GitHub](https://github.com/vimond/replay/tree/master/src/replay/docs/custom-player/example). + ### The overlay component A simple video title overlay can be created this way: @@ -135,7 +139,7 @@ The `TitleOverlay` component takes an `isUserActive` prop. This aligns good with `interactionState` and `isUserActive` comes from the [InteractionDetector](https://github.com/vimond/replay/blob/master/src/replay/components/player/containment-helpers/InteractionDetector.js) containment helper component. -If using CSS rules, passing this prop would have been unnecessary. Instead a style rule for the TitleOverlay with `.replay-is-user-active` as a parent selector, could have been used to make the overlay visible, with invisible as default. +A side note: If using CSS rules, passing this prop would have been unnecessary. Instead a style rule for the TitleOverlay with `.replay-is-user-active` as a parent selector, could have been used to make the overlay visible, with invisible as default. ### Connecting the control @@ -148,7 +152,7 @@ import UnconnectedTitleOverlay from './TitleOverlay'; const TitleOverlay = connectControl(UnconnectedTitleOverlay, ['duration', 'isPaused']); ``` -The array passed as the second parameter specifies from which [video state properties][/reference/observable-stream-state] the connected control should get updates. +The array passed as the second parameter specifies from which [video state properties](/reference/observable-stream-state) the connected control should get updates. `connectControl()` also supports retrieving the same information from the component's static property `streamStateKeysForObservation`, as shown for [this actual control code](https://github.com/vimond/replay/blob/master/src/replay/components/controls/TimeDisplay/TimeDisplay.js#L91). @@ -204,7 +208,7 @@ const renderPlayerUI = ({ configuration, externalProps }) => { }; ``` -Observe that the `TitleOverlay` element gets the `title` and `isUserActive` props set directly as part of the render method scope. On the other hand `isPaused` and `duration` is taken care of implictly within the now connected `TitleOverlay` component. +Observe that the `TitleOverlay` element gets the `title` and `isUserActive` props set directly as part of the render method scope. On the other hand, `isPaused` and `duration` is taken care of implicitly within the now connected `TitleOverlay` component. These props will be passed down through the controller context to the title overlay. ### Composing the custom player component diff --git a/src/replay/docs/custom-player/custom-strings-graphics.mdx b/src/replay/docs/custom-player/custom-strings-graphics.mdx index 15655ce4..302873d6 100644 --- a/src/replay/docs/custom-player/custom-strings-graphics.mdx +++ b/src/replay/docs/custom-player/custom-strings-graphics.mdx @@ -16,7 +16,7 @@ One or both of these sets can be combined when creating a custom player, and als The easiest approach to replace the set of strings/and or graphics, is to use the `composePlayer()` method. It produces a React component from what's typically being subject to customisation. -The [default Replay player](https://github.com/vimond/replay/blob/master/src/replay/default-player/Replay.js) is composed with these parameters: +As a starting point, this is how the [default Replay player](https://github.com/vimond/replay/blob/master/src/replay/default-player/Replay.js) is composed, with parameters specifying the strings and graphics to be part of the Replay component: ```javascript import composePlayer from '../playerComposer'; @@ -37,7 +37,7 @@ export default Replay; The [default strings](https://github.com/vimond/replay/blob/master/src/replay/default-player/strings.js), as referred by the composition of the Replay player, are grouped by controls. The properties for each controls correspond to actually prop types expected by the control. Most of the strings are tooltip texts, with some exceptions. -Similarly, for the [graphics for the default skin](https://github.com/vimond/replay/blob/master/src/replay/default-player/default-skin/graphics.js), the definitions are structured per control or component. Here, the property values are mainly SVG graphics from the Feather icon set, wrapped as React components, so that they can be rendered within the control directly. +Similarly, for the [graphics for the default skin](https://github.com/vimond/replay/blob/master/src/replay/default-player/default-skin/graphics.js), the definitions are structured per control or component. Here, the property values are mainly SVG graphics from the [Feather](https://feathericons.com/) icon set, wrapped as React components, so that they can be rendered within the control directly. Again, the property keys refer to prop names of the controls. Graphics can be added to all props with type `React.Node`, as listed in the controls reference. And as long as the property values are accepted by React and the browser, the graphics or content can be any element types. diff --git a/src/replay/docs/custom-player/overview.mdx b/src/replay/docs/custom-player/overview.mdx index c9a276cf..e86350c5 100644 --- a/src/replay/docs/custom-player/overview.mdx +++ b/src/replay/docs/custom-player/overview.mdx @@ -6,7 +6,7 @@ menu: 'Building a custom player' # Overview -Besides what can be achieved through [configuration overrides](/custom-replay/configuration) or [CSS rules](/custom-replay/skins-styles), some approaches exist for creating a custom Replay player component. +Besides what can be achieved through [configuration overrides](/custom-replay/configuration) or [CSS rules (skinning, layout)](/custom-replay/skins-styles), some approaches exist for creating a custom Replay player component. ## Strategies for customisation @@ -30,6 +30,8 @@ This might be an option if the architecture and patterns don't match the require ## The anatomy of Replay +These modules, components, and concepts are essential to the Replay architecture. + * The [main player component](https://github.com/vimond/replay/blob/master/src/replay/default-player/Replay.js), created from the playerComposer. A custom player means a new main player component. * The [player controller](https://github.com/vimond/replay/blob/master/src/replay/components/player/PlayerController/PlayerController.js). This is reused when creating a new, custom player. [More about the PlayerController](/architecture/player-controller). * The [player UI](https://github.com/vimond/replay/blob/master/src/replay/default-player/playerUI.js) with element tree, [graphics](https://github.com/vimond/replay/blob/master/src/replay/default-player/default-skin/graphics.js), and [strings](https://github.com/vimond/replay/blob/master/src/replay/default-player/strings.js). One or all of these might be reused or replaced when creating a custom player. @@ -42,6 +44,6 @@ This might be an option if the architecture and patterns don't match the require * Configuration. A custom player can replace the [base configuration](https://github.com/vimond/replay/blob/master/src/replay/default-player/baseConfiguration.js). Configuration [overrides can be specified](http://localhost:3000/#/custom-replay/configuration) when inserting Replay. * CSS. The [default skin](https://github.com/vimond/replay/blob/master/src/replay/default-player/default-skin/index.css) can be replaced or [rules can be overridden](/custom-replay/skins-styles). -## Creating a new video streamer +## Custom video streamers -The purpose of creating a new video streamer would be wrapping other streaming libraries or "headless" players into a React component, exposing the same API as those included in the Replay npm package. There is currently no specific documentation on doing this. +The purpose of creating a custom video streamer would be wrapping other streaming libraries or "headless" players into a React component, exposing the same API as those included in the Replay npm package. There is currently no specific documentation on doing this. diff --git a/src/replay/docs/custom-replay/configuration.mdx b/src/replay/docs/custom-replay/configuration.mdx index 03250eaa..381d459b 100644 --- a/src/replay/docs/custom-replay/configuration.mdx +++ b/src/replay/docs/custom-replay/configuration.mdx @@ -138,9 +138,9 @@ See [Skin toggling and CSS scoping with prefixed class names](/custom-replay/ski ## Including/excluding player controls -Replay components can be used to build a fully custom player with controls removed, replaced, and/or new controls added. +Replay components and custom components can be used to build a fully custom player with controls removed, replaced, and/or new controls added. -However, for simpler customisations, individual controls can be included or excluded by adding a configuration override. +However, for simpler customisations, individual controls from the default Replay user interface can be included or excluded by adding a configuration override. The array `{ controls: { includeControls: [] }}` can be used to specify what controls to include. If this configuration setting is omitted, all controls will be included. Otherwise, only the ones listed in the array will be listed. diff --git a/src/replay/docs/custom-replay/skins-styles.mdx b/src/replay/docs/custom-replay/skins-styles.mdx index dfcc9613..af4e726f 100644 --- a/src/replay/docs/custom-replay/skins-styles.mdx +++ b/src/replay/docs/custom-replay/skins-styles.mdx @@ -41,7 +41,7 @@ This would change the "primary colour" (icon and button surfaces) into green. ### Building a new stylesheet -The default stylesheet can be completely replaced. For this, either reuse individual modules from the Replay library and substitute others (like colors.css) with your own, or create a copy of the file found at the npm path `'vimond-replay/index.css'`. If reusing individual modules, they need to be referred individually by either a preprocessor (e.g. SASS, PostCSS, Webpack) or the browser. +The default stylesheet can be completely replaced. For this, either reuse some individual [CSS modules from the Replay library](https://github.com/vimond/replay/tree/master/src/replay/default-player/default-skin) and substitute some others (like `colors.css`) with your own. Another alternative is simply creating and modifying a copy of the file found at the npm path `'vimond-replay/index.css'`. If reusing individual modules, they need to be referred individually by either a preprocessor (e.g. SASS, PostCSS, Webpack), or the browser itself. Please see the chapter below, "CSS module organisation", and refer the source code, in order to look into individual CSS modules. @@ -93,11 +93,11 @@ In summary: ## CSS module organisation -For reference, in the Replay code base, the default stylesheet is built with several CSS files with the following setup. However, replacement stylesheets can be organised independently of the default one. +For reference, in the Replay code base, the [default stylesheet](https://github.com/vimond/replay/blob/master/src/replay/replay-default.css) is built with several CSS files with the following setup. However, replacement stylesheets can be organised independently of the default one. -* Some distinct, but general CSS files when there is a requirement for styles specifically for a component/control. These are located next to the components in the `components/` hierarchy, and contain no skin or layout styles. +* Some distinct, but general CSS files when there is a requirement for styles specifically for a component/control. These are located next to the components in the [`components/` hierarchy](https://github.com/vimond/replay/tree/master/src/replay/components), and contain no skin or layout styles. * There are no CSS or SASS variables used. -* Style rules for the default skin, are organised in different files, located in `default-player/default-skin/`: `sizesAndLayout.css`, `colors.css`, `animations.css`, and assembled with some more styles in `index.css`. This kind of separation makes it fairly easy to change e.g. only the colours on all controls while being DRY. +* Style rules for the default skin, are organised in different files, [located in `default-player/default-skin/`](https://github.com/vimond/replay/tree/master/src/replay/default-player/default-skin): `sizesAndLayout.css`, `colors.css`, `animations.css`, and assembled with some more styles in `index.css`. This kind of separation makes it fairly easy to change e.g. only the colours on all controls while being DRY. * `replay-default.css` includes all above and constitutes the full default stylesheet. diff --git a/src/replay/docs/reference/replay-component.mdx b/src/replay/docs/reference/replay-component.mdx new file mode 100644 index 00000000..371b687e --- /dev/null +++ b/src/replay/docs/reference/replay-component.mdx @@ -0,0 +1,9 @@ +--- +name: Replay component reference +route: /reference/replay-component +menu: 'Reference' +--- + +# Replay component reference + +The Replay component API docuentation is located in the menu [Using the Replay player](/replay/api). diff --git a/src/replay/docs/using-replay/controlling-playback.mdx b/src/replay/docs/using-replay/controlling-playback.mdx index 0fe8a73c..e7861fbd 100644 --- a/src/replay/docs/using-replay/controlling-playback.mdx +++ b/src/replay/docs/using-replay/controlling-playback.mdx @@ -111,9 +111,9 @@ this.handleStreamStateChange = stateProperties => { }; ``` -See the [full reference of state propertie](/reference/observable-stream-state) for all keys/value types passed in this callback. +See the [full reference of state properties](/reference/observable-stream-state) for all keys/value types passed in this callback. -## Full example showing operations on, and observation of the playback +## Full example showing operations on playback, and observations of the playback state {() => { diff --git a/src/replay/docs/using-replay/insert.mdx b/src/replay/docs/using-replay/insert.mdx index 4c30efc5..63511039 100644 --- a/src/replay/docs/using-replay/insert.mdx +++ b/src/replay/docs/using-replay/insert.mdx @@ -17,13 +17,13 @@ This and the following pages demonstrates how you can: * Applying some playback settings. * Control and observe the playback state. -*Note that all examples with actual video include the [`initialPlaybackProps={{ isPaused: true }}` property](/replay/api#initialplaybackprops-initialplaybackprops), so that the examples don't play wildly all over the pages. Please remove this prop when copying to real app code.* +*Note that all examples with actual video include the [`initialPlaybackProps={{ isPaused: true }}` property](/replay/api#initialplaybackprops-initialplaybackprops), so that the examples don't play wildly all over the pages. It might be desired to remove this prop when copying examples to real app code.* ## Prerequisites ### Requirements -Minimum React version for Replay is 16.3. If using the [compound video streamer](/advanced-playback/adaptive-streaming#enabling-playback-for-multiple-streaming-technologies-based-on-stream-technology-resolution), React 16.6 is required. In this case, a bundler supporting dynamic `import()` statements, is also required. +Minimum React version for Replay is 16.6. If using the [compound video streamer](/advanced-playback/adaptive-streaming#enabling-playback-for-multiple-streaming-technologies-based-on-stream-technology-resolution), a bundler supporting dynamic `import()` statements, is also required. ### Installing the Replay npm package @@ -35,7 +35,7 @@ npm install vimond-replay --save ### Importing dependencies -All code examples below need the following import statements: +All code examples on this and the following pages need the following import statements: ```javascript import React from 'react'; @@ -47,15 +47,15 @@ Or substitute the CSS `import` statement with your desired CSS inclusion mechani ### Video/stream technology support -Out of the box, Replay supports video files that can be played natively in the browser. That typically means MP4 or WebM videos progressively downloaded from a web server location. +With only the Replay component inserted to an app, Replay supports video files that can be played natively in the browser. That typically means MP4 or WebM videos progressively downloaded from a web server location. -The [Adaptive streaming](/advanced-playback/adaptive-streaming) chapter explains how to add support for adaptive streaming. +The [Adaptive streaming](/advanced-playback/adaptive-streaming) chapter explains how to add support for adaptive streaming by specifying a video streamer component as the Replay component's child. ## Inserting the player with a progressive video source -Please remember the import statements discussed above. Include the `source` prop in order to load a video. This prop can be a string with the video URL, or an object containing several pieces of technical details in order to play the video/stream appropriately. Essential is the `streamUrl` property, referring to the video file or adaptive stream URL (if applicable). The object variant is shown in later examples. +Please remember the import statements discussed above. When inserting the Replay component, include the `source` prop in order to load a video. This prop can be a string with the video URL, or an object containing several pieces of technical details in order to play the video/stream appropriately. Essential in this object is the `streamUrl` property, referring to the video file or adaptive stream URL (if applicable). The object variant is shown in later examples. -This example is live. Press play to test the playback: +This example is live and its code can be edited. Press play to test the playback: ` -## Props - -### Children - -Replay can take 0 or 1 child elements. If present, a child should implement the [video streamer](/architecture/video-streamers) component API, most commonly by using one of the alternatives provided by this library. - -When using basic HTML playback of video files, the child video streamer element can be omitted. Replay will then insert the ``. For advanced streaming playback, specify a video streamer component supporting the streaming technology the child element. This element should not have props specified that could interfere with the prop set passed down from the controller. One example is the `source` prop. - -When needing to toggle different video streamer components for different stream formats and/or browsers, a composite video streamer should be created and inserted as the only child. This could contain logic for selecting the video streamer implementation currently needed. Such a component should pass down props to the actual video streamer. - -```jsx - - - -``` +## Component props ### `source: PlaybackSource | null` @@ -54,7 +38,7 @@ type AdvancedPlaybackSource = { | Property | Description | |----------|-------------| | streamUrl | URL to a video file, or to a stream manifest/playlist when using adaptive streams. | -| contentType | The mime type of the stream. Only relevant if using a VideoStreamer broking/resolving correct playback technology based on stream technologies. | +| contentType | The mime type of the stream. Relevant if using the CompoundVideoStreamer broking/resolving correct playback technology based on stream technologies. | | licenseUrl | When the stream is DRM encrypted, specify the license acquisition URL through this property. | | startPosition | A number specifying the offset where playback should start upon loading the video. Given in seconds from the start of the stream. | | textTracks | An array with objects specifying any subtitle files to be side-loaded as text tracks. See the prop `textTracks` below for more information on the object shape. | @@ -157,11 +141,27 @@ type InitialPlaybackProps = { | bitrateCap | Only relevant for adaptive streaming. Specifies a maximum bitrate to be considered for adaptive bitrate switching. The number specifies the bitrate in kbps. | | bitrateFix | Only relevant for adaptive streaming. Deactivates adaptive bitrate switching and fixes the bitrate selection. The number is given as an integer of kbps, and must correspond exactly to one of the bitrates reported in the video stream state property `bitrates`. | +### Children + +Replay can take 0 or 1 child elements. If present, a child should implement the [video streamer](/architecture/video-streamers) component API, most commonly by using one of the alternatives provided by this library. + +When using basic HTML playback of video files, such a child video streamer element can be omitted. Replay will then insert the ``. For advanced streaming playback, specify a video streamer component supporting the streaming technology as the child element. This element should not have props specified that could interfere with the prop set passed down from the controller. One example is the `source` prop. Always set the `source` prop (see below) on the `Replay` component itself, and not the video streamer child. + +When needing to toggle different video streamer components for different stream formats and/or browsers, use the `CompoundVideoStreamer` component discussed in the [adaptive streaming](/advanced-playback/adaptive-streaming) chapter. Here is an example of specifying the HLS.js video streamer as the child component for HLS playback support. + +```jsx + + + +``` + ## Callback props ### `onExit: () => void` -If specified, displays a close button in the upper right corner of the player. When clicking the button, this callback will be invoked. It is the responsibility of the parent elements of the Replay element to remove the player from the rendered element hierarchy. +If specified, displays a close button in the upper right corner of the player. When clicking the button, this callback will be invoked. It is the responsibility of the parent elements of the Replay element to remove the player from the rendered element tree. ### `onError?: any => void` @@ -169,23 +169,23 @@ Invoked upon playback/stream errors and possibly other errors. ### `onPlaybackActionsReady?: PlaybackActions => void` -Provides the API for controlling the playback. Invoked when the player is ready to be controlled. The argument is an object with the methods listed in the "Methods" chapter below. +In order to get hold of methods for controlling playback, this callback must be specified. Invocations will provide the API for controlling the playback. Invoked when the player is ready to be controlled. The argument is an object with the methods listed in the "Methods" chapter below. -See +See the chapter [How to perform operations on the playback](/replay/controlling-playback#how-to-perform-operations-on-the-playback) for a dicusssion of the methods being made available in this callback, and the methods reference underneath. ### `onStreamStateChange?: VideoStreamState => void` -Through this callback, all aspects of the video playback state is reported. This includes volume changes, bitrate changes, position updates, durations, live stream states, audio and text track selections. Each state change to any property is reported by an individual invocation of this callback, with an argument containing the property (key and value) with an updated state. +Through this callback, all aspects of the video playback state is reported. This includes volume changes, bitrate changes, position updates, durations, live stream states, audio and text track selections. The list is not exhaustive. Each state change to any property is reported by an individual invocation of this callback, with an argument containing the property (key and value) with an updated state. ## Video stream state properties, reported through `onStreamStateChange` Please see the [Stream state properties reference](/reference/observable-stream-state). -## Methods, available through `onPlaybackActionsReady` +## Playback operation methods, available through `onPlaybackActionsReady` ### `inspect: () => VideoStreamState` -Returns all the current properties of the video stream state. The return value is one object combining all state property keys and values that are reported from the playback. +Returns all the current properties of the video stream state, valid only at the moment of invocation. The return value is one object combining all state property keys and values that are reported from the playback. ### `setProperties: PlaybackProps => void` diff --git a/src/replay/docs/using-replay/startup-options.mdx b/src/replay/docs/using-replay/startup-options.mdx index cd2d79cf..6dddea9e 100644 --- a/src/replay/docs/using-replay/startup-options.mdx +++ b/src/replay/docs/using-replay/startup-options.mdx @@ -16,9 +16,9 @@ For the following examples, the same prerequisites apply as in the [Inserting Re ## Starting playback from a different position than the beginning -By specifying the `startPosition` property in a source prop, any positive numbers will be cued as the initial playback position. It is given as a number of seconds offset from the beginning. +By specifying the `startPosition` property in a source prop, any positive numbers will be cued as the initial playback position, in seconds. It is given as a number of seconds offset from the beginning. -Note that for this purpose, specifying source as a string, like in the [basic example](/replay/insert#inserting-the-player-with-a-progressive-video-source), doesn't apply anymore. An object with the property `streamUrl` must be passed as the `source` prop, along with the `startPosition` property. The value `123` means that playback will start at 00:02:03. +Note that for this purpose, specifying source as a string, like in the [basic example](/replay/insert#inserting-the-player-with-a-progressive-video-source), doesn't apply anymore. An object with the property `streamUrl` must be passed as the `source` prop, along with the `startPosition` property. As the start position is specified as an absolute number of seconds, the value `123` would mean that playback would start at 00:02:03.