feat(FEC-8721): playlist - next screen (#309)

implement the playlist next screen

src/components/index.js

@@ -43,5 +43,6 @@ export {CastOverlay} from './cast-overlay';
 export {VrStereoToggleControl} from './vr-stereo-toggle';
 export {CastBeforePlay} from './cast-on-tv';
 export {PlaylistButton} from './playlist-button';
+export {PlaylistNextScreen} from './playlist-next-screen';
 export {PictureInPicture} from './picture-in-picture';
 export {PlaybackControls} from './playback-controls';

src/components/playback-controls/_playback-controls.scss

@@ -1,6 +1,5 @@
 .player-gui > .playback-controls {
   display: none;
-
   position: absolute;
   top: 50%;
   left: 50%;
@@ -18,28 +17,36 @@
   display: inline;
 }
 
-.player.size-sm, .player.touch {
-
-  .bottom-bar .playback-controls {
-    display: none;
-  }
-
-  &.hover {
-    .player-gui > .playback-controls {
-      display: block;
+.player {
+  &.size-sm,
+  &.touch {
+    &.state-idle .control-playlist-button {
+      display: none;
+    }
 
-      .control-button {
-        width: auto;
-        height: auto;
-        padding: 0 16px;
-      }
-      .icon {
-        width: 64px;
-        height: 64px;
+    &:not(.state-idle) {
+      .bottom-bar .playback-controls {
+        display: none;
       }
 
-      .poster-preview {
-        opacity: 0;
+      &.hover {
+        .player-gui > .playback-controls {
+          display: block;
+
+          .control-button {
+            width: auto;
+            height: auto;
+            padding: 0 16px;
+          }
+          .icon {
+            width: 64px;
+            height: 64px;
+          }
+
+          .poster-preview {
+            opacity: 0;
+          }
+        }
       }
     }
   }

src/components/playlist-button/playlist-button.js

@@ -60,7 +60,7 @@ class PlaylistButton extends BaseComponent {
             <div className={style.posterPreviewText}>
               <Localizer>
                 <div className={style.posterPreviewTextTitle}>
-                  <Text id={props.type === 'prev' ? 'playlist.prev' : 'playlist.next'} />
+                  <Text id={props.type === 'prev' ? 'playlist.prev' : 'playlist.up_next'} />
                 </div>
               </Localizer>
               <div className={style.posterPreviewTextName}>{`${item.sources.metadata ? item.sources.metadata.name : ''}`}</div>

src/components/playlist-countdown/playlist-countdown.js

@@ -30,6 +30,22 @@ const mapStateToProps = state => ({
  * @extends {BaseComponent}
  */
 class PlaylistCountdown extends BaseComponent {
+  /**
+   * should render component
+   * @param {*} props - component props
+   * @returns {boolean} - component element
+   * @static
+   */
+  static shouldRender(props: any): boolean {
+    return (
+      props.state.engine.playlist &&
+      props.state.engine.playlist.next &&
+      props.state.engine.playlist.next.sources &&
+      props.player.playlist.options.autoContinue &&
+      props.player.playlist.countdown.showing
+    );
+  }
+
   /**
    * Creates an instance of PlaylistCountdown.
    * @param {Object} obj obj
@@ -135,9 +151,6 @@ class PlaylistCountdown extends BaseComponent {
    */
   render(props: any): React$Element<any> | void {
     const next = props.playlist.next;
-    if (!(next && next.sources)) {
-      return undefined;
-    }
     const countdown = this.player.playlist.countdown;
     const timeToShow = this._getTimeToShow();
     const progressTime = props.currentTime - timeToShow;
@@ -159,7 +172,7 @@ class PlaylistCountdown extends BaseComponent {
               <Localizer>
                 <div className={style.playlistCountdownText}>
                   <div className={style.playlistCountdownTextTitle}>
-                    <Text id="playlist.next" />
+                    <Text id="playlist.up_next" />
                   </div>
                   <div className={style.playlistCountdownTextName}>{`${next.sources.metadata ? next.sources.metadata.name : ''}`}</div>
                 </div>

src/components/playlist-next-screen/_playlist-next-screen.scss

@@ -0,0 +1,125 @@
+.player.state-idle {
+
+  .playlist-next-screen-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(black, 0.5);
+
+    .playlist-next-screen-content {
+      position: relative;
+      top: calc(50% - 107.5px);
+
+      .playlist-next-screen-text {
+        position: absolute;
+        width: 100%;
+        top: -90px;
+        font-size: 15px;
+        color: #fff;
+        padding: 4px 8px 12px 8px;
+
+        .playlist-next-screen-text-title {
+          padding: 4px;
+          font-weight: 100;
+        }
+
+        .playlist-next-screen-text-name {
+          padding: 16px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .playlist-next-screen-poster-placeholder {
+        position: relative;
+        margin: auto;
+        width: 384px;
+
+        .playlist-next-screen-poster-aspect-ratio {
+          width: 100%;
+          padding-top: 56%;
+
+          .playlist-next-screen-poster {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            cursor: pointer;
+
+            .playlist-next-screen-poster-img {
+              height: 100%;
+              border-radius: 3px;
+              background-size: contain;
+              background-repeat: round;
+            }
+
+            .icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              width: 64px;
+              height: 64px;
+              margin: -32px 0 0 -32px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.size-lg {
+    .playlist-next-screen-content {
+      top: 31.25%;
+
+      .playlist-next-screen-poster-placeholder {
+        width: 37.5%;
+      }
+    }
+  }
+
+  &.size-md {
+    .playlist-next-screen-content {
+      top: 29%;
+
+      .playlist-next-screen-text {
+        top: -58px;
+
+        .playlist-next-screen-text-name {
+          padding: 0;
+        }
+      }
+
+      .playlist-next-screen-poster-placeholder {
+        width: 42%;
+      }
+    }
+  }
+
+  &.size-sm {
+    .playlist-next-screen-content {
+      top: calc(50% - 16px);
+
+      .playlist-next-screen-poster-placeholder {
+        width: 32px;
+
+        .playlist-next-screen-poster-aspect-ratio .playlist-next-screen-poster {
+          border: 0;
+
+          .playlist-next-screen-poster-img {
+            display: none;
+          }
+
+          .icon {
+            width: 32px;
+            height: 32px;
+            margin: -16px 0 0 -16px;
+          }
+        }
+      }
+    }
+  }
+}

src/components/playlist-next-screen/index.js

@@ -0,0 +1 @@
+export {PlaylistNextScreen} from './playlist-next-screen';

src/components/playlist-next-screen/playlist-next-screen.js

@@ -0,0 +1,93 @@
+//@flow
+import style from '../../styles/style.scss';
+import {h} from 'preact';
+import {Localizer, Text} from 'preact-i18n';
+import BaseComponent from '../base';
+import {connect} from 'preact-redux';
+import {default as Icon, IconType} from '../icon';
+
+/**
+ * mapping state to props
+ * @param {*} state - redux store state
+ * @returns {Object} - mapped state to this component
+ */
+const mapStateToProps = state => ({
+  playlist: state.engine.playlist,
+  isPlaybackEnded: state.engine.isPlaybackEnded
+});
+
+@connect(mapStateToProps)
+/**
+ * PlaylistNextScreen component
+ *
+ * @class PlaylistNextScreen
+ * @example <PlaylistNextScreen player={this.player} type="next"/>
+ * @extends {BaseComponent}
+ */
+class PlaylistNextScreen extends BaseComponent {
+  /**
+   * should render component
+   * @param {*} props - component props
+   * @returns {boolean} - component element
+   * @static
+   */
+  static shouldRender(props: any): boolean {
+    return props.state.engine.playlist && props.state.engine.playlist.next && props.state.engine.playlist.next.sources;
+  }
+
+  /**
+   * Creates an instance of PlaylistNextScreen.
+   * @param {Object} obj obj
+   * @memberof PlaylistNextScreen
+   */
+  constructor(obj: Object) {
+    super({name: 'PlaylistNextScreen', player: obj.player});
+  }
+
+  /**
+   * next poster click handler
+   *
+   * @returns {void}
+   * @memberof PlaylistNextScreen
+   */
+  onPosterClick() {
+    this.player.playlist.playNext();
+  }
+
+  /**
+   * render component
+   *
+   * @param {*} props - component props
+   * @returns {React$Element} - component element
+   * @memberof PlaylistNextScreen
+   */
+  render(props: any): React$Element<any> | void {
+    const next = props.playlist.next;
+    return props.isPlaybackEnded ? (
+      <div className={style.playlistNextScreenOverlay}>
+        <div className={style.playlistNextScreenContent}>
+          <div className={style.playlistNextScreenText}>
+            <Localizer>
+              <div className={style.playlistNextScreenTextTitle}>
+                <Text id="playlist.next" />
+              </div>
+            </Localizer>
+            <div className={style.playlistNextScreenTextName}>{`${next.sources.metadata ? next.sources.metadata.name : ''}`}</div>
+          </div>
+          <div className={style.playlistNextScreenPosterPlaceholder}>
+            <div className={style.playlistNextScreenPosterAspectRatio}>
+              <div className={style.playlistNextScreenPoster} onClick={() => this.onPosterClick()}>
+                <div className={style.playlistNextScreenPosterImg} style={`background-image: url(${next.sources.poster || ''});`} />
+                <Icon type={IconType.Play} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    ) : (
+      undefined
+    );
+  }
+}
+
+export {PlaylistNextScreen};

src/components/pre-playback-play-overlay/pre-playback-play-overlay.js

@@ -16,6 +16,7 @@ import {actions as loadingActions} from '../../reducers/loading';
 const mapStateToProps = state => ({
   prePlayback: state.engine.prePlayback,
   isPlaybackEnded: state.engine.isPlaybackEnded,
+  playlist: state.engine.playlist,
   loading: state.loading.show
 });
 
@@ -60,7 +61,7 @@ class PrePlaybackPlayOverlay extends BaseComponent {
    * @memberof PrePlaybackPlayOverlay
    */
   render(props: any): React$Element<any> | void {
-    if (!(props.prePlayback || props.isPlaybackEnded) || props.loading) {
+    if ((!props.prePlayback && (!props.isPlaybackEnded || (props.playlist && props.playlist.next))) || props.loading) {
       return undefined;
     }
     return (

src/components/shell/shell.js

@@ -312,6 +312,7 @@ class Shell extends BaseComponent {
     if (this.props.playlist) playerClasses.push(style.playlist);
     if (this.props.playerClientRect && this.props.playerClientRect.width <= 480) playerClasses.push(style.sizeSm);
     else if (this.props.playerClientRect && this.props.playerClientRect.width <= 768) playerClasses.push(style.sizeMd);
+    else if (this.props.playerClientRect && this.props.playerClientRect.width <= 1024) playerClasses.push(style.sizeLg);
 
     playerClasses = playerClasses.join(' ');
 

src/styles/style.scss

@@ -45,3 +45,4 @@
 @import '../components/picture-in-picture/picture-in-picture';
 @import '../components/playback-controls/playback-controls';
 @import '../components/playlist-countdown/playlist-countdown';
+@import '../components/playlist-next-screen/playlist-next-screen';

src/translations/en.json

@@ -69,7 +69,8 @@
   },
   "playlist": {
     "prev": "Previous",
-    "next": "Up Next",
+    "next": "Next",
+    "up_next": "Up Next",
     "cancel": "Cancel"
   }
 }