feat(FEC-10527): add RW/FF controls to live preset (#560)

kaltura · Nov 24, 2020 · 3c3b157 · 3c3b157
1 parent f4c1a1e
commit 3c3b157
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 5 deletions.
diff --git a/src/components/forward/forward.js b/src/components/forward/forward.js
@@ -9,6 +9,7 @@ import {withEventDispatcher} from 'components/event-dispatcher';
 import {withLogger} from 'components/logger';
 import {Tooltip} from 'components/tooltip';
 import {Button} from 'components/button';
+import {connect} from 'react-redux';
 
 const COMPONENT_NAME = 'Forward';
 
@@ -19,13 +20,23 @@ const COMPONENT_NAME = 'Forward';
  */
 export const FORWARD_DEFAULT_STEP = 10;
 
+/**
+ * mapping state to props
+ * @param {*} state - redux store state
+ * @returns {Object} - mapped state to this component
+ */
+const mapStateToProps = state => ({
+  isDvr: state.engine.isDvr,
+  isLive: state.engine.isLive
+});
 /**
  * Forward component
  *
  * @class Forward
  * @example <Forward step={5} />
  * @extends {Component}
  */
+@connect(mapStateToProps)
 @withPlayer
 @withLogger(COMPONENT_NAME)
 @withEventDispatcher(COMPONENT_NAME)
@@ -45,7 +56,10 @@ class Forward extends Component {
     const step = this.props.step || FORWARD_DEFAULT_STEP;
     const from = player.currentTime;
     if (player.currentTime + step > player.duration) {
-      to = player.duration;
+      // if user is already on live edge then dont even attempt to move forward in time
+      if (!player.isOnLiveEdge()) {
+        to = player.duration;
+      }
     } else {
       to = player.currentTime + step;
     }
@@ -64,7 +78,7 @@ class Forward extends Component {
    * @memberof Forward
    */
   render(props: any): React$Element<any> | void {
-    return (
+    return props.isLive && !props.isDvr ? undefined : (
       <div className={[style.controlButtonContainer, style.noIdleControl].join(' ')}>
         <Tooltip label={this.props.forwardText}>
           <Button

diff --git a/src/components/rewind/rewind.js b/src/components/rewind/rewind.js
@@ -9,6 +9,7 @@ import {withEventDispatcher} from 'components/event-dispatcher';
 import {withLogger} from 'components/logger';
 import {Tooltip} from 'components/tooltip';
 import {Button} from 'components/button';
+import {connect} from 'react-redux';
 
 const COMPONENT_NAME = 'Rewind';
 
@@ -19,13 +20,24 @@ const COMPONENT_NAME = 'Rewind';
  */
 export const REWIND_DEFAULT_STEP = 10;
 
+/**
+ * mapping state to props
+ * @param {*} state - redux store state
+ * @returns {Object} - mapped state to this component
+ */
+const mapStateToProps = state => ({
+  isDvr: state.engine.isDvr,
+  isLive: state.engine.isLive
+});
+
 /**
  * Rewind component
  *
  * @class Rewind
  * @example <Rewind step={5} />
  * @extends {Component}
  */
+@connect(mapStateToProps)
 @withPlayer
 @withLogger(COMPONENT_NAME)
 @withEventDispatcher(COMPONENT_NAME)
@@ -44,7 +56,10 @@ class Rewind extends Component {
     const step = this.props.step || REWIND_DEFAULT_STEP;
     const from = this.props.player.currentTime;
     if (this.props.player.currentTime - step < 0) {
-      to = 0;
+      // In dvr when close to beginning dont rewind
+      if (!this.props.isDvr) {
+        to = 0;
+      }
     } else {
       to = this.props.player.currentTime - step;
     }
@@ -63,7 +78,7 @@ class Rewind extends Component {
    * @memberof Rewind
    */
   render(props: any): React$Element<any> | void {
-    return (
+    return props.isLive && !props.isDvr ? undefined : (
       <div className={[style.controlButtonContainer, style.noIdleControl].join(' ')}>
         <Tooltip label={this.props.rewindText}>
           <Button

diff --git a/src/ui-presets/live.js b/src/ui-presets/live.js
@@ -29,7 +29,8 @@ import {InteractiveArea} from 'components/interactive-area';
 import {withKeyboardEvent} from 'components/keyboard';
 import {VideoArea} from 'components/video-area';
 import {GuiArea} from 'components/gui-area';
-
+import {Rewind} from 'components/rewind';
+import {Forward} from 'components/forward';
 const PRESET_NAME = 'Live';
 
 /**
@@ -86,6 +87,8 @@ class LiveUI extends Component {
                     leftControls={
                       <Fragment>
                         <PlaybackControls />
+                        <Rewind step={10} />
+                        <Forward step={10} />
                         <LiveTag />
                       </Fragment>
                     }

diff --git a/src/utils/with-animation.js b/src/utils/with-animation.js
@@ -18,6 +18,7 @@ export const withAnimation: Function = (cssClass: string) => (WrappedComponent:
        * @memberof AnimationComponent
        */
       componentDidMount(): void {
+        if (!this.ref.current) return;
         this.props.eventManager.listen(this.ref.current, 'animationend', () => {
           this.ref.current.classList.remove(cssClass);
         });