fix(FEC-8683): playlist by config, no ui for the second entry and onw…

…ards (#298) * `NULL` protection * Do not render next/prev/countdown when relevant data is missing
kaltura · Nov 13, 2018 · 3745803 · 3745803
1 parent a95fc64
commit 3745803
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/playlist-button/playlist-button.js b/src/components/playlist-button/playlist-button.js
@@ -52,26 +52,27 @@ class PlaylistButton extends BaseComponent {
    * @memberof PlaylistButton
    */
   render(props: any): React$Element<any> | void {
+    const item = props.playlist[props.type];
     return (
       <div className={[style.controlButtonContainer, style.controlPlaylistButton].join(' ')}>
-        {props.playlist[props.type] ? (
+        {item && item.sources && (item.sources.poster || (item.sources.metadata && item.sources.metadata.name)) ? (
           <div className={style.posterPreview}>
             <div className={style.posterPreviewText}>
               <Localizer>
                 <div className={style.posterPreviewTextTitle}>
                   <Text id={props.type === 'prev' ? 'playlist.prev' : 'playlist.next'} />
                 </div>
               </Localizer>
-              <div className={style.posterPreviewTextName}>{`${props.playlist[props.type].sources.metadata.name}`}</div>
+              <div className={style.posterPreviewTextName}>{`${item.sources.metadata ? item.sources.metadata.name : ''}`}</div>
             </div>
-            <div className={style.posterPreviewImg} style={`background-image: url(${props.playlist[props.type].sources.poster});`} />
+            <div className={style.posterPreviewImg} style={`background-image: url(${item.sources.poster});`} />
           </div>
         ) : (
           undefined
         )}
         <Localizer>
           <button
-            disabled={!props.playlist[props.type]}
+            disabled={!item}
             tabIndex="0"
             aria-label={<Text id={`controls.${props.type}`} />}
             className={`${style.controlButton}`}

diff --git a/src/components/playlist-countdown/playlist-countdown.js b/src/components/playlist-countdown/playlist-countdown.js
@@ -134,7 +134,8 @@ class PlaylistCountdown extends BaseComponent {
    * @memberof PlaylistCountdown
    */
   render(props: any): React$Element<any> | void {
-    if (!props.playlist.next) {
+    const next = props.playlist.next;
+    if (!(next && next.sources)) {
       return undefined;
     }
     const countdown = this.player.playlist.countdown;
@@ -151,7 +152,7 @@ class PlaylistCountdown extends BaseComponent {
 
     return (
       <div className={className.join(' ')} onClick={() => this.onClick()}>
-        <div className={style.playlistCountdownPoster} style={`background-image: url(${props.playlist.next.sources.poster});`} />
+        <div className={style.playlistCountdownPoster} style={`background-image: url(${next.sources.poster});`} />
         <div className={style.playlistCountdownContentPlaceholder}>
           <div className={style.playlistCountdownContentBackground}>
             <div className={style.playlistCountdownContent}>
@@ -160,7 +161,7 @@ class PlaylistCountdown extends BaseComponent {
                   <div className={style.playlistCountdownTextTitle}>
                     <Text id="playlist.next" />
                   </div>
-                  <div className={style.playlistCountdownTextName}>{`${props.playlist.next.sources.metadata.name}`}</div>
+                  <div className={style.playlistCountdownTextName}>{`${next.sources.metadata ? next.sources.metadata.name : ''}`}</div>
                 </div>
               </Localizer>
               <div className={[style.controlButtonContainer, style.playlistCountdownCancel].join(' ')}>