feat(FEC-11738): Related Entries - Phase 1 (#645)

Changes to support related entries grid: Refactor next and prev buttons. Add PlayerArea for playback controls. Export components for use by related plugin. Fixes FEC-11738.
kaltura · Jan 16, 2022 · 6a18a35 · 6a18a35
1 parent e491c28
commit 6a18a35
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 71 deletions.
diff --git a/src/components/index.js b/src/components/index.js
@@ -47,7 +47,7 @@ export {Watermark} from './watermark';
 export {Logo} from './logo';
 export {CastOverlay} from './cast-overlay';
 export {CastBeforePlay, CastAfterPlay} from './cast-on-tv';
-export {PlaylistButton} from './playlist-button';
+export {PlaylistButton, PrevNext} from './playlist-button';
 export {PlaylistNextScreen} from './playlist-next-screen';
 export {PictureInPicture} from './picture-in-picture';
 export {PlaybackControls} from './playback-controls';

diff --git a/src/components/playback-controls/playback-controls.js b/src/components/playback-controls/playback-controls.js
@@ -1,9 +1,10 @@
 //@flow
 import style from '../../styles/style.scss';
-import {h, Component} from 'preact';
+import {h, Component, Fragment} from 'preact';
 import {connect} from 'react-redux';
 import {PlaylistButton} from '../playlist-button';
 import {PlayPause} from '../play-pause';
+import {PlayerArea} from 'components/player-area';
 
 /**
  * mapping state to props
@@ -25,6 +26,29 @@ const COMPONENT_NAME = 'PlaybackControls';
  */
 @connect(mapStateToProps)
 class PlaybackControls extends Component {
+  /**
+   * component did mount
+   * @return {void}
+   */
+  componentDidMount(): void {
+    this.setState({
+      shouldUpdate: false
+    });
+  }
+
+  /**
+   * component will update
+   * @param {Object} prevProps - the next props
+   * @return {void}
+   */
+  componentDidUpdate(prevProps: any) {
+    if (!!prevProps.playlist !== !!this.props.playlist) {
+      this.setState({
+        shouldUpdate: true
+      });
+    }
+  }
+
   /**
    * render component
    *
@@ -33,12 +57,27 @@ class PlaybackControls extends Component {
    * @memberof PlaybackControls
    */
   render(props: any): React$Element<any> {
-    const {className} = props;
+    const {name, className} = props;
+    const shouldUpdate = this.state.shouldUpdate;
+    if (shouldUpdate) {
+      this.setState({
+        shouldUpdate: false
+      });
+    }
+
     return (
       <div className={[style.playbackControls, className].join(' ')}>
-        {props.playlist ? <PlaylistButton type="prev" /> : undefined}
-        <PlayPause />
-        {props.playlist ? <PlaylistButton type="next" /> : undefined}
+        <PlayerArea name={name} shouldUpdate={shouldUpdate}>
+          {props.playlist ? (
+            <Fragment>
+              <PlaylistButton type="prev" />
+              <PlayPause />
+              <PlaylistButton type="next" />
+            </Fragment>
+          ) : (
+            <PlayPause />
+          )}
+        </PlayerArea>
       </div>
     );
   }

diff --git a/src/components/playlist-button/index.js b/src/components/playlist-button/index.js
@@ -1 +1,2 @@
 export {PlaylistButton} from './playlist-button';
+export {PrevNext} from './prev-next';
diff --git a/src/components/playlist-button/playlist-button.js b/src/components/playlist-button/playlist-button.js
@@ -1,12 +1,9 @@
 //@flow
-import style from '../../styles/style.scss';
 import {h, Component} from 'preact';
-import {withText} from 'preact-i18n';
-import {default as Icon, IconType} from '../icon';
 import {connect} from 'react-redux';
 import {withPlayer} from '../player';
-import {Tooltip} from 'components/tooltip';
-import {Button} from 'components/button';
+import {PrevNext} from './prev-next';
+
 /**
  * mapping state to props
  * @param {*} state - redux store state
@@ -27,12 +24,6 @@ const COMPONENT_NAME = 'PlaylistButton';
  */
 @connect(mapStateToProps)
 @withPlayer
-@withText({
-  prevControlsText: 'controls.prev',
-  nextControlsText: 'controls.next',
-  playlistPrevText: 'playlist.prev',
-  playlistUpNextText: 'playlist.up_next'
-})
 class PlaylistButton extends Component {
   /**
    * playlist button click handler
@@ -53,54 +44,7 @@ class PlaylistButton extends Component {
    */
   render(props: any): React$Element<any> | void {
     const item = props.playlist[props.type];
-    const showPreview = item && item.sources && (item.sources.poster || (item.sources.metadata && item.sources.metadata.name));
-    return (
-      <div className={[style.controlButtonContainer, style.controlPlaylistButton].join(' ')}>
-        {showPreview ? (
-          <div className={style.posterPreview}>
-            <div className={style.posterPreviewText}>
-              <div className={style.posterPreviewTextTitle}>
-                {props.type === 'prev' ? this.props.playlistPrevText : this.props.playlistUpNextText}
-              </div>
-              <div className={style.posterPreviewTextName}>{`${item.sources.metadata ? item.sources.metadata.name : ''}`}</div>
-            </div>
-            <div className={style.posterPreviewImg} style={`background-image: url(${item.sources.poster});`} />
-          </div>
-        ) : undefined}
-        {showPreview ? (
-          this.bottomBarButton(item, props.type)
-        ) : (
-          <Tooltip label={this.props[`${props.type}ControlsText`]}>{this.bottomBarButton(item, props.type)}</Tooltip>
-        )}
-      </div>
-    );
-  }
-
-  /**
-   * bottom bar button jsx
-   * @param {any} item - the playlist item
-   * @param {string }type - the type of the button (prev / next)
-   * @returns {React$Element} - the button jsx
-   */
-  bottomBarButton(item: any, type: string): React$Element<any> {
-    return (
-      <Button
-        disabled={!item}
-        tabIndex="0"
-        aria-label={this.props[`${type}ControlsText`]}
-        className={`${style.controlButton}`}
-        onClick={this.onClick}>
-        {type === 'prev' ? (
-          <div>
-            <Icon type={IconType.Prev} />
-          </div>
-        ) : (
-          <div>
-            <Icon type={IconType.Next} />
-          </div>
-        )}
-      </Button>
-    );
+    return <PrevNext type={props.type} item={item} onClick={this.onClick.bind(this)} />;
   }
 }
 

diff --git a/src/components/playlist-button/prev-next.js b/src/components/playlist-button/prev-next.js
@@ -0,0 +1,56 @@
+/* eslint-disable require-jsdoc */
+//@flow
+import style from '../../styles/style.scss';
+import {h, Component, Fragment} from 'preact';
+import {withText} from 'preact-i18n';
+import {Button} from 'components/button';
+import {Tooltip} from 'components/tooltip';
+import {default as Icon, IconType} from '../icon';
+
+@withText({
+  prevControlsText: 'controls.prev',
+  nextControlsText: 'controls.next',
+  playlistPrevText: 'playlist.prev',
+  playlistUpNextText: 'playlist.up_next'
+})
+class PrevNext extends Component {
+  render(props: any): React$Element<any> {
+    const {type, item, onClick} = props;
+
+    const iconType = type === 'next' ? IconType.Next : IconType.Prev;
+    const tooltipText = props[`${props.type}ControlsText`];
+    const previewTitle = type === 'prev' ? this.props.playlistPrevText : this.props.playlistUpNextText;
+
+    const previewImage = item?.sources?.poster;
+    const previewText = item.sources?.metadata ? item.sources.metadata.name : '';
+
+    const button = (
+      <Button disabled={!item} tabIndex="0" aria-label={tooltipText} className={`${style.controlButton}`} onClick={onClick}>
+        <div>
+          <Icon type={iconType} />
+        </div>
+      </Button>
+    );
+
+    return (
+      <div className={[style.controlButtonContainer, style.controlPlaylistButton].join(' ')}>
+        {previewImage || previewText ? (
+          <Fragment>
+            <div className={style.posterPreview}>
+              <div className={style.posterPreviewText}>
+                <div className={style.posterPreviewTextTitle}>{previewTitle}</div>
+                <div className={style.posterPreviewTextName}>{`${previewText ? previewText : ''}`}</div>
+              </div>
+              {previewImage ? <div className={style.posterPreviewImg} style={`background-image: url(${previewImage});`} /> : undefined}
+            </div>
+            {button}
+          </Fragment>
+        ) : (
+          <Tooltip label={tooltipText}>{button}</Tooltip>
+        )}
+      </div>
+    );
+  }
+}
+
+export {PrevNext};
diff --git a/src/ui-presets/ads.js b/src/ui-presets/ads.js
@@ -52,7 +52,7 @@ function AdsUI(props: any, context: any): ?React$Element<any> {
     <BottomBar
       leftControls={
         <Fragment>
-          <PlaybackControls />
+          <PlaybackControls name={'BottomBarPlaybackControls'} />
           <TimeDisplayAdsContainer />
         </Fragment>
       }
@@ -83,7 +83,7 @@ function AdsUI(props: any, context: any): ?React$Element<any> {
               <Loading />
               <UnmuteIndication hasTopBar />
               {adsUiCustomization.skipButton ? <AdSkip /> : undefined}
-              <PlaybackControls className={style.centerPlaybackControls} />
+              <PlaybackControls name={'OverlayPlaybackControls'} className={style.centerPlaybackControls} />
             </Fragment>
             <Fragment>
               <TopBar

diff --git a/src/ui-presets/live.js b/src/ui-presets/live.js
@@ -69,7 +69,7 @@ class LiveUI extends Component {
                 <Loading />
                 <OverlayPortal />
                 <PictureInPictureOverlay />
-                <PlaybackControls className={style.centerPlaybackControls} />
+                <PlaybackControls name={'OverlayPlaybackControls'} className={style.centerPlaybackControls} />
                 <PrePlaybackPlayOverlay />
                 <CastBeforePlay />
               </Fragment>
@@ -83,7 +83,7 @@ class LiveUI extends Component {
                   <BottomBar
                     leftControls={
                       <Fragment>
-                        <PlaybackControls />
+                        <PlaybackControls name={'BottomBarPlaybackControls'} />
                         <Rewind step={10} />
                         <Forward step={10} />
                         <LiveTag />

diff --git a/src/ui-presets/playback.js b/src/ui-presets/playback.js
@@ -73,7 +73,7 @@ class PlaybackUI extends Component {
                 <Loading />
                 <OverlayPortal />
                 <PictureInPictureOverlay />
-                <PlaybackControls className={style.centerPlaybackControls} />
+                <PlaybackControls name={'OverlayPlaybackControls'} className={style.centerPlaybackControls} />
                 <PlaylistNextScreen />
                 <PrePlaybackPlayOverlay />
                 <CastBeforePlay />
@@ -89,7 +89,7 @@ class PlaybackUI extends Component {
                   <BottomBar
                     leftControls={
                       <Fragment>
-                        <PlaybackControls />
+                        <PlaybackControls name={'BottomBarPlaybackControls'} />
                         <Rewind step={10} />
                         <Forward step={10} />
                         <TimeDisplayPlaybackContainer format="current / total" />