@24i/bigscreen-sdk 1.0.34 → 1.0.35-alpha.2578

package/packages/player-ui/README.md

@@ -1,207 +1,207 @@
----
-id: README
-title: PlayerUI
-hide_title: true
-sidebar_label: PlayerUI
----
-
-# Player UI
-This packages contains a set of components to build Player UI with ease.
-
-!!!Warning!!! Since version 0.9.0 only PlayerBase v4.x is supported.
-Please, make sure all dependencies are at the correct version.
-## Components - Buttons
-
-### PlayButton
-Button to trigger PLAY action.
-#### Props
-- `className` - optional className to add to default one
-
-### PauseButton
-Button to trigger PAUSE action.
-#### Props
-- `className` - optional className to add to default one
-
-### PlayPauseButton
-Combination of PlayButton and PauseButton. Displays PlayButton if not playing and PauseButton otherwise
-#### Props
-- `className` - optional className to add to default one
-
-### StopButton
-Button to trigger STOP action.
-#### Props
-- `className` - optional className to add to default one
-
-### ForwardButton
-Button to trigger FORWARD action.
-#### Props
-- `className` - optional className to add to default one
-- `offset` - optional number of ms to jump forward (defaults to 20000)
-
-### BackwardButton
-Button to trigger BACKWARD action.
-#### Props
-- `className` - optional className to add to default one
-- `offset` - optional number of ms to jump backward (defaults to 20000)
-
-## Components - Time
-
-### Time formats
-All components use this formula to define format of time displayed. Use string variables like this:
-```
-Time in ms: 123456089
-Format: '#{D} day #{H}:#{2M}:#{2S}.#{3MS}'
-Will display: '1 day 10:17:36.089'
-```
-
-### Current Time
-Displays the current playing time.
-#### Props
-- `className` - optional className to add to default one
-- `longTreshold` - time in ms when it switches from short format to long one (defaults to 1 hour)
-- `longFormat` - long format of a displayed time (defaults to h:mm:ss)
-- `shortFormat` - short format of a displayed time (defaults to m:ss)
-
-### Remaining Time
-Displays the current remaining time.
-#### Props
-- `className` - optional className to add to default one
-- `longTreshold` - time in ms when it switches from short format to long one (defaults to 1 hour)
-- `longFormat` - long format of a displayed time (defaults to h:mm:ss)
-- `shortFormat` - short format of a displayed time (defaults to m:ss)
-
-### Duration
-Displays the duration.
-#### Props
-- `className` - optional className to add to default one
-- `longTreshold` - time in ms when it switches from short format to long one (defaults to 1 hour)
-- `longFormat` - long format of a displayed time (defaults to h:mm:ss)
-- `shortFormat` - short format of a displayed time (defaults to m:ss)
-
-## Components - Seekbar
-Seekbar component renders progress/seek bar. When focused, it also displays seektime and seek point.
-When the seeking is in progress. The seekbar displays current time of seeking.
-#### Props
-- `className` - optional className to add to default one
-
-## Components - Subtitle
-Subtitle component processes and renders external subtitles.
-#### Props
-- `player` - player instance
-- `className` - optional className to add to default one
-
-## Complete example
-```tsx
-export class Player extends Component<Props> {
-    playerContainer = createRef<HTMLDivElement>();
-
-    playerUIContainer = createRef<HTMLDivElement>();
-
-    player: HTML5Video = null;
-
-    playerUI = createRef<PlayerUI>();
-
-    playerUINavigation = createRef<InstanceType<typeof Vertical>>();
-
-    controlsNavigation = createRef<InstanceType<typeof Horizontal>>();
-
-    seekBar = createRef<Seekbar>();
-
-    controlsDiv = createRef<HTMLDivElement>();
-
-    playPauseButton = createRef<PlayPauseButton>();
-
-    backwardButton = createRef<BackwardButton>();
-
-    forwardButton = createRef<ForwardButton>();
-
-    subtitles = createRef<Subtitles>();
-
-    activate() {
-        this.buildPlayer();
-    }
-
-    reactivate() {
-        this.buildPlayer();
-    }
-
-    deactivate() {
-        this.player.destroy();
-        clearNode(this.playerUIContainer);
-    }
-
-    buildPlayer() {
-        this.player = new HTML5Video({
-            source: SOURCE,
-        }, this.playerContainer.current);
-        this.player.init().then(() => {
-            this.player.build();
-            this.player.play();
-            this.renderUI();
-            runAsync(() => { // Needs to be async to allow play/pause button to be displayed first
-                this.playPauseButton.current.focus();
-                this.playerUINavigation.current.index = 1;
-                this.controlsNavigation.current.index = 1;
-            });
-        });
-    }
-
-    clearPlayer() {
-        clearNode(this.playerUIContainer);
-        this.playerUI.current = null;
-        this.player.destroy();
-        this.player = null;
-    }
-
-    renderUI() {
-        this.appendMount(
-            <>
-                <PlayerUI ref={this.playerUI} player={this.player}>
-                    {({ ui }: PlayerUIState) => (
-                        <div className="ui">
-                            <Vertical
-                                ref={this.playerUINavigation}
-                                domRef={this.playerUIContainer}
-                                focusableChildren={[this.seekBar, this.controlsNavigation]}
-                            >
-                                <div className="seekbar-and-times">
-                                    <CurrentTime ui={ui} />
-                                    <Seekbar ui={ui} ref={this.seekBar} />
-                                    <Duration ui={ui} />
-                                </div>
-                                <div className="controls" ref={this.controlsDiv}>
-                                    <Horizontal
-                                        ref={this.controlsNavigation}
-                                        domRef={this.controlsDiv}
-                                        focusableChildren={[
-                                            this.backwardButton,
-                                            this.playPauseButton,
-                                            this.forwardButton,
-                                        ]}
-                                    >
-                                        <BackwardButton ui={ui} ref={this.backwardButton} />
-                                        <PlayPauseButton ui={ui} ref={this.playPauseButton} />
-                                        <ForwardButton ui={ui} ref={this.forwardButton} />
-                                    </Horizontal>
-                                </div>
-                            </Vertical>
-                        </div>
-                    )}
-                </PlayerUI>
-                <Subtitles ref={this.subtitles} player={this.player} />
-            </>,
-            this.playerUIContainer,
-        );
-    }
-
-
-    render() {
-        return (
-            <div className="scene player">
-                <div className="player-container" ref={this.playerContainer} />
-                <div className="player-ui-container" ref={this.playerUIContainer} />
-            </div>
-        );
-    }
-}
-```
+---
+id: README
+title: PlayerUI
+hide_title: true
+sidebar_label: PlayerUI
+---
+
+# Player UI
+This packages contains a set of components to build Player UI with ease.
+
+!!!Warning!!! Since version 0.9.0 only PlayerBase v4.x is supported.
+Please, make sure all dependencies are at the correct version.
+## Components - Buttons
+
+### PlayButton
+Button to trigger PLAY action.
+#### Props
+- `className` - optional className to add to default one
+
+### PauseButton
+Button to trigger PAUSE action.
+#### Props
+- `className` - optional className to add to default one
+
+### PlayPauseButton
+Combination of PlayButton and PauseButton. Displays PlayButton if not playing and PauseButton otherwise
+#### Props
+- `className` - optional className to add to default one
+
+### StopButton
+Button to trigger STOP action.
+#### Props
+- `className` - optional className to add to default one
+
+### ForwardButton
+Button to trigger FORWARD action.
+#### Props
+- `className` - optional className to add to default one
+- `offset` - optional number of ms to jump forward (defaults to 20000)
+
+### BackwardButton
+Button to trigger BACKWARD action.
+#### Props
+- `className` - optional className to add to default one
+- `offset` - optional number of ms to jump backward (defaults to 20000)
+
+## Components - Time
+
+### Time formats
+All components use this formula to define format of time displayed. Use string variables like this:
+```
+Time in ms: 123456089
+Format: '#{D} day #{H}:#{2M}:#{2S}.#{3MS}'
+Will display: '1 day 10:17:36.089'
+```
+
+### Current Time
+Displays the current playing time.
+#### Props
+- `className` - optional className to add to default one
+- `longTreshold` - time in ms when it switches from short format to long one (defaults to 1 hour)
+- `longFormat` - long format of a displayed time (defaults to h:mm:ss)
+- `shortFormat` - short format of a displayed time (defaults to m:ss)
+
+### Remaining Time
+Displays the current remaining time.
+#### Props
+- `className` - optional className to add to default one
+- `longTreshold` - time in ms when it switches from short format to long one (defaults to 1 hour)
+- `longFormat` - long format of a displayed time (defaults to h:mm:ss)
+- `shortFormat` - short format of a displayed time (defaults to m:ss)
+
+### Duration
+Displays the duration.
+#### Props
+- `className` - optional className to add to default one
+- `longTreshold` - time in ms when it switches from short format to long one (defaults to 1 hour)
+- `longFormat` - long format of a displayed time (defaults to h:mm:ss)
+- `shortFormat` - short format of a displayed time (defaults to m:ss)
+
+## Components - Seekbar
+Seekbar component renders progress/seek bar. When focused, it also displays seektime and seek point.
+When the seeking is in progress. The seekbar displays current time of seeking.
+#### Props
+- `className` - optional className to add to default one
+
+## Components - Subtitle
+Subtitle component processes and renders external subtitles.
+#### Props
+- `player` - player instance
+- `className` - optional className to add to default one
+
+## Complete example
+```tsx
+export class Player extends Component<Props> {
+    playerContainer = createRef<HTMLDivElement>();
+
+    playerUIContainer = createRef<HTMLDivElement>();
+
+    player: HTML5Video = null;
+
+    playerUI = createRef<PlayerUI>();
+
+    playerUINavigation = createRef<InstanceType<typeof Vertical>>();
+
+    controlsNavigation = createRef<InstanceType<typeof Horizontal>>();
+
+    seekBar = createRef<Seekbar>();
+
+    controlsDiv = createRef<HTMLDivElement>();
+
+    playPauseButton = createRef<PlayPauseButton>();
+
+    backwardButton = createRef<BackwardButton>();
+
+    forwardButton = createRef<ForwardButton>();
+
+    subtitles = createRef<Subtitles>();
+
+    activate() {
+        this.buildPlayer();
+    }
+
+    reactivate() {
+        this.buildPlayer();
+    }
+
+    deactivate() {
+        this.player.destroy();
+        clearNode(this.playerUIContainer);
+    }
+
+    buildPlayer() {
+        this.player = new HTML5Video({
+            source: SOURCE,
+        }, this.playerContainer.current);
+        this.player.init().then(() => {
+            this.player.build();
+            this.player.play();
+            this.renderUI();
+            runAsync(() => { // Needs to be async to allow play/pause button to be displayed first
+                this.playPauseButton.current.focus();
+                this.playerUINavigation.current.index = 1;
+                this.controlsNavigation.current.index = 1;
+            });
+        });
+    }
+
+    clearPlayer() {
+        clearNode(this.playerUIContainer);
+        this.playerUI.current = null;
+        this.player.destroy();
+        this.player = null;
+    }
+
+    renderUI() {
+        this.appendMount(
+            <>
+                <PlayerUI ref={this.playerUI} player={this.player}>
+                    {({ ui }: PlayerUIState) => (
+                        <div className="ui">
+                            <Vertical
+                                ref={this.playerUINavigation}
+                                domRef={this.playerUIContainer}
+                                focusableChildren={[this.seekBar, this.controlsNavigation]}
+                            >
+                                <div className="seekbar-and-times">
+                                    <CurrentTime ui={ui} />
+                                    <Seekbar ui={ui} ref={this.seekBar} />
+                                    <Duration ui={ui} />
+                                </div>
+                                <div className="controls" ref={this.controlsDiv}>
+                                    <Horizontal
+                                        ref={this.controlsNavigation}
+                                        domRef={this.controlsDiv}
+                                        focusableChildren={[
+                                            this.backwardButton,
+                                            this.playPauseButton,
+                                            this.forwardButton,
+                                        ]}
+                                    >
+                                        <BackwardButton ui={ui} ref={this.backwardButton} />
+                                        <PlayPauseButton ui={ui} ref={this.playPauseButton} />
+                                        <ForwardButton ui={ui} ref={this.forwardButton} />
+                                    </Horizontal>
+                                </div>
+                            </Vertical>
+                        </div>
+                    )}
+                </PlayerUI>
+                <Subtitles ref={this.subtitles} player={this.player} />
+            </>,
+            this.playerUIContainer,
+        );
+    }
+
+
+    render() {
+        return (
+            <div className="scene player">
+                <div className="player-container" ref={this.playerContainer} />
+                <div className="player-ui-container" ref={this.playerUIContainer} />
+            </div>
+        );
+    }
+}
+```

package/packages/player-ui/src/BackwardButton.tsx

@@ -1,41 +1,41 @@
-import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { IFocusable } from '@24i/bigscreen-sdk/focus';
-import { PlayerInteractable } from './PlayerInteractable';
-import { PlayerUICommonProps, PlayerAction } from './types';
-
-type Props = PlayerUICommonProps & {
-    offset?: number,
-};
-
-export class BackwardButton extends Component<Props> implements IFocusable {
-    button = createRef<PlayerInteractable>();
-
-    static defaultProps = {
-        // eslint-disable-next-line react/default-props-match-prop-types
-        className: '',
-        offset: 20000,
-    };
-
-    declare props: DeclareProps<Props, typeof BackwardButton.defaultProps>;
-
-    onPress = () => {
-        const { ui, offset } = this.props;
-        ui.trigger(PlayerAction.BACKWARD, offset);
-    };
-
-    focus(options?: FocusOptions) {
-        this.button.current!.focus(options);
-    }
-
-    render() {
-        const { className, ui } = this.props;
-        return (
-            <PlayerInteractable
-                ui={ui}
-                ref={this.button}
-                className={`backward-button ${className}`}
-                onPress={this.onPress}
-            />
-        );
-    }
-}
+import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { PlayerInteractable } from './PlayerInteractable';
+import { PlayerUICommonProps, PlayerAction } from './types';
+
+type Props = PlayerUICommonProps & {
+    offset?: number,
+};
+
+export class BackwardButton extends Component<Props> implements IFocusable {
+    button = createRef<PlayerInteractable>();
+
+    static defaultProps = {
+        // eslint-disable-next-line react/default-props-match-prop-types
+        className: '',
+        offset: 20000,
+    };
+
+    declare props: DeclareProps<Props, typeof BackwardButton.defaultProps>;
+
+    onPress = () => {
+        const { ui, offset } = this.props;
+        ui.trigger(PlayerAction.BACKWARD, offset);
+    };
+
+    focus(options?: FocusOptions) {
+        this.button.current!.focus(options);
+    }
+
+    render() {
+        const { className, ui } = this.props;
+        return (
+            <PlayerInteractable
+                ui={ui}
+                ref={this.button}
+                className={`backward-button ${className}`}
+                onPress={this.onPress}
+            />
+        );
+    }
+}

package/packages/player-ui/src/CurrentTime.tsx

@@ -1,56 +1,56 @@
-import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { ITimeUpdateEvent } from '@24i/bigscreen-players-engine-base';
-import { PlayerTime } from './PlayerTime';
-import { PlayerUICommonProps, PlayerUITimeProps } from './types';
-
-type Props = PlayerUICommonProps & PlayerUITimeProps;
-
-export class CurrentTime extends Component<Props> {
-    time = createRef<PlayerTime>();
-
-    liveStartTime = NaN;
-
-    isLive = false;
-
-    static defaultProps = {
-        className: '',
-        longTreshold: PlayerTime.defaultProps.longTreshold,
-        longFormat: PlayerTime.defaultProps.longFormat,
-        shortFormat: PlayerTime.defaultProps.shortFormat,
-    };
-
-    declare props: DeclareProps<Props, typeof CurrentTime.defaultProps>;
-
-    componentDidMount() {
-        const { ui } = this.props;
-        const playerInstance = ui.getPlayer();
-        this.isLive = playerInstance.live;
-        playerInstance.addEventListener('timeupdate', this.onTimeUpdate);
-        const { programStart = 0 } = playerInstance.metadata || {};
-        this.liveStartTime = programStart || Date.now();
-    }
-
-    componentWillUnmount() {
-        const { ui } = this.props;
-        const playerInstance = ui.getPlayer();
-        playerInstance.removeEventListener('timeupdate', this.onTimeUpdate);
-    }
-
-    onTimeUpdate = ({ currentTime }: ITimeUpdateEvent) => {
-        this.time.current!.updateTime(currentTime);
-    };
-
-    render() {
-        const { className, shortFormat, longFormat, longTreshold } = this.props;
-        return (
-            <PlayerTime
-                ref={this.time}
-                className={`current-time ${className}`}
-                time={0}
-                shortFormat={shortFormat}
-                longFormat={longFormat}
-                longTreshold={longTreshold}
-            />
-        );
-    }
-}
+import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { ITimeUpdateEvent } from '@24i/bigscreen-players-engine-base';
+import { PlayerTime } from './PlayerTime';
+import { PlayerUICommonProps, PlayerUITimeProps } from './types';
+
+type Props = PlayerUICommonProps & PlayerUITimeProps;
+
+export class CurrentTime extends Component<Props> {
+    time = createRef<PlayerTime>();
+
+    liveStartTime = NaN;
+
+    isLive = false;
+
+    static defaultProps = {
+        className: '',
+        longTreshold: PlayerTime.defaultProps.longTreshold,
+        longFormat: PlayerTime.defaultProps.longFormat,
+        shortFormat: PlayerTime.defaultProps.shortFormat,
+    };
+
+    declare props: DeclareProps<Props, typeof CurrentTime.defaultProps>;
+
+    componentDidMount() {
+        const { ui } = this.props;
+        const playerInstance = ui.getPlayer();
+        this.isLive = playerInstance.live;
+        playerInstance.addEventListener('timeupdate', this.onTimeUpdate);
+        const { programStart = 0 } = playerInstance.metadata || {};
+        this.liveStartTime = programStart || Date.now();
+    }
+
+    componentWillUnmount() {
+        const { ui } = this.props;
+        const playerInstance = ui.getPlayer();
+        playerInstance.removeEventListener('timeupdate', this.onTimeUpdate);
+    }
+
+    onTimeUpdate = ({ currentTime }: ITimeUpdateEvent) => {
+        this.time.current!.updateTime(currentTime);
+    };
+
+    render() {
+        const { className, shortFormat, longFormat, longTreshold } = this.props;
+        return (
+            <PlayerTime
+                ref={this.time}
+                className={`current-time ${className}`}
+                time={0}
+                shortFormat={shortFormat}
+                longFormat={longFormat}
+                longTreshold={longTreshold}
+            />
+        );
+    }
+}