fix(FEC-12154): Playlist - Active Prev and Next buttons have no toolt…

…ip when player width <= 480px Always show tooltip on overlay playback controls instead of showing preview
kaltura · Apr 11, 2022 · fb1a4c1 · fb1a4c1
1 parent 9f1ec16
commit fb1a4c1
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 11 deletions.
diff --git a/src/components/playback-controls/_playback-controls.scss b/src/components/playback-controls/_playback-controls.scss
@@ -43,10 +43,6 @@
             width: 64px;
             height: 64px;
           }
-
-          .poster-preview {
-            opacity: 0;
-          }
         }
       }
     }

diff --git a/src/components/playback-controls/playback-controls.js b/src/components/playback-controls/playback-controls.js
@@ -70,9 +70,9 @@ class PlaybackControls extends Component {
         <PlayerArea name={name} shouldUpdate={shouldUpdate}>
           {props.playlist ? (
             <Fragment>
-              <PlaylistButton type="prev" />
+              <PlaylistButton type="prev" showPreview={props.showPreview} />
               <PlayPause />
-              <PlaylistButton type="next" />
+              <PlaylistButton type="next" showPreview={props.showPreview} />
             </Fragment>
           ) : (
             <PlayPause />

diff --git a/src/components/playlist-button/playlist-button.js b/src/components/playlist-button/playlist-button.js
@@ -44,7 +44,7 @@ class PlaylistButton extends Component {
    */
   render(props: any): React$Element<any> | void {
     const item = props.playlist[props.type];
-    return <PrevNext type={props.type} item={item} onClick={this.onClick.bind(this)} />;
+    return <PrevNext type={props.type} item={item} onClick={this.onClick.bind(this)} showPreview={props.showPreview} />;
   }
 }
 

diff --git a/src/components/playlist-button/prev-next.js b/src/components/playlist-button/prev-next.js
@@ -34,7 +34,7 @@ class PrevNext extends Component {
 
     return (
       <div className={[style.controlButtonContainer, style.controlPlaylistButton].join(' ')}>
-        {previewImage || previewText ? (
+        {props.showPreview && (previewImage || previewText) ? (
           <Fragment>
             <div className={style.posterPreview}>
               <div className={style.posterPreviewText}>

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 name={'BottomBarPlaybackControls'} />
+          <PlaybackControls name={'BottomBarPlaybackControls'} showPreview={true} />
           <TimeDisplayAdsContainer />
         </Fragment>
       }

diff --git a/src/ui-presets/live.js b/src/ui-presets/live.js
@@ -83,7 +83,7 @@ class LiveUI extends Component {
                   <BottomBar
                     leftControls={
                       <Fragment>
-                        <PlaybackControls name={'BottomBarPlaybackControls'} />
+                        <PlaybackControls name={'BottomBarPlaybackControls'} showPreview={true} />
                         <Rewind step={10} />
                         <Forward step={10} />
                         <LiveTag />

diff --git a/src/ui-presets/playback.js b/src/ui-presets/playback.js
@@ -89,7 +89,7 @@ class PlaybackUI extends Component {
                   <BottomBar
                     leftControls={
                       <Fragment>
-                        <PlaybackControls name={'BottomBarPlaybackControls'} />
+                        <PlaybackControls name={'BottomBarPlaybackControls'} showPreview={true} />
                         <Rewind step={10} />
                         <Forward step={10} />
                         <TimeDisplayPlaybackContainer format="current / total" />