fix: cast ui (#304)

Fix cast sender ui after update sender with new player events and components.
kaltura/playkit-js-cast-sender#7

src/components/cast-on-tv/cast-after-play.js

@@ -13,7 +13,7 @@ import {Localizer, Text} from 'preact-i18n';
  * @returns {Object} - mapped state to this component
  */
 const mapStateToProps = state => ({
-  isEnded: state.engine.isEnded,
+  isPlaybackEnded: state.engine.isPlaybackEnded,
   isCasting: state.engine.isCasting
 });
 
@@ -78,7 +78,7 @@ class CastAfterPlay extends BaseComponent {
    * @memberof CastAfterPlay
    */
   render(props: any): ?React$Element<any> {
-    if (!props.isCasting || !props.isEnded) return undefined;
+    if (!props.isCasting || !props.isPlaybackEnded) return undefined;
     const rootStyle = [style.castOnTvButtonContainer];
     if (this.state.show) {
       rootStyle.push(style.showCastOnTv);

src/components/cast-on-tv/cast-before-play.js

@@ -14,7 +14,7 @@ import {Localizer, Text} from 'preact-i18n';
  * @returns {Object} - mapped state to this component
  */
 const mapStateToProps = state => ({
-  isEnded: state.engine.isEnded,
+  isPlaybackEnded: state.engine.isPlaybackEnded,
   prePlayback: state.shell.prePlayback,
   loading: state.loading.show,
   isCastAvailable: state.engine.isCastAvailable
@@ -81,7 +81,7 @@ class CastBeforePlay extends BaseComponent {
    */
   render(props: any): ?React$Element<any> {
     if (!props.isCastAvailable || props.loading) return undefined;
-    if (props.prePlayback || props.isEnded) {
+    if (props.prePlayback || props.isPlaybackEnded) {
       const rootStyle = [style.castOnTvButtonContainer];
       if (this.state.show) {
         rootStyle.push(style.showCastOnTv);

src/components/cast-overlay/cast-overlay.js

@@ -17,7 +17,7 @@ const mapStateToProps = state => ({
   castSession: state.engine.castSession,
   isIdle: state.engine.isIdle,
   isPlaying: state.engine.isPlaying,
-  isEnded: state.engine.isEnded,
+  isPlaybackEnded: state.engine.isPlaybackEnded,
   isPaused: state.engine.isPaused,
   isChangingSource: state.engine.isChangingSource
 });
@@ -57,7 +57,7 @@ class CastOverlay extends BaseComponent {
     if (this.props.isPlaying || this.props.isPaused) {
       return <Text id="cast.status.playing_on" />;
     }
-    if (this.props.isEnded || this.props.isChangingSource || this.props.castSession.resuming) {
+    if (this.props.isPlaybackEnded || this.props.isChangingSource || this.props.castSession.resuming) {
       return <Text id="cast.status.connected_to" />;
     }
     return <Text id="cast.status.connecting_to" />;
@@ -69,7 +69,7 @@ class CastOverlay extends BaseComponent {
    * @memberof CastOverlay
    */
   getIcon(): React$Element<any> {
-    if (this.props.isPlaying || this.props.isPaused || this.props.isEnded || this.props.isChangingSource || this.props.castSession.resuming) {
+    if (this.props.isPlaying || this.props.isPaused || this.props.isPlaybackEnded || this.props.isChangingSource || this.props.castSession.resuming) {
       return <Icon type={this.props.icon} />;
     }
     return <div className={style.castConnectingSpinner} />;

src/components/engine-connector/engine-connector.js

@@ -60,6 +60,7 @@ class EngineConnector extends BaseComponent {
       this.props.updateIsEnded(false);
       this.props.updateIsPlaybackEnded(false);
       this.props.updateLastSeekPoint(0);
+      this.props.updateIsPaused(false);
       if (this.props.engine.isCasting) {
         this.props.updateLoadingSpinnerState(true);
       }
@@ -110,6 +111,7 @@ class EngineConnector extends BaseComponent {
     this.eventManager.listen(this.player, this.player.Event.PLAY, () => {
       this.props.updateIsPlaying(true);
       this.props.updateIsEnded(false);
+      this.props.updateIsPaused(false);
       this.props.updateIsPlaybackEnded(false);
     });
 
@@ -187,6 +189,7 @@ class EngineConnector extends BaseComponent {
     });
 
     this.eventManager.listen(this.player, this.player.Event.AD_STARTED, () => {
+      this.props.updateLoadingSpinnerState(false);
       this.props.updateAdIsPlaying(true);
     });
 

src/components/index.js

@@ -44,3 +44,4 @@ export {VrStereoToggleControl} from './vr-stereo-toggle';
 export {CastBeforePlay, CastAfterPlay} from './cast-on-tv';
 export {PlaylistButton} from './playlist-button';
 export {PictureInPicture} from './picture-in-picture';
+export {PlaybackControls} from './playback-controls';

src/components/play-pause/play-pause.js

@@ -17,7 +17,7 @@ const mapStateToProps = state => ({
   isPlayingAdOrPlayback: isPlayingAdOrPlayback(state.engine),
   isPlaying: state.engine.isPlaying,
   adBreak: state.engine.adBreak,
-  isEnded: state.engine.isEnded
+  isPlaybackEnded: state.engine.isPlaybackEnded
 });
 
 @connect(mapStateToProps)
@@ -72,7 +72,7 @@ class PlayPauseControl extends BaseComponent {
                 this.togglePlayPause();
               }
             }}>
-            {props.isEnded && !props.adBreak ? (
+            {props.isPlaybackEnded && !props.adBreak ? (
               <Icon type={IconType.StartOver} />
             ) : (
               <div>

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

@@ -19,7 +19,7 @@ const mapStateToProps = state => ({
   prePlayback: state.shell.prePlayback,
   poster: state.engine.poster,
   isMobile: state.shell.isMobile,
-  isEnded: state.engine.isEnded,
+  isPlaybackEnded: state.engine.isPlaybackEnded,
   loading: state.loading.show
 });
 
@@ -103,7 +103,7 @@ class PrePlaybackPlayOverlay extends BaseComponent {
    * @memberof PrePlaybackPlayOverlay
    */
   shouldComponentUpdate(nextProps: Object): boolean {
-    if (nextProps.isEnded) {
+    if (nextProps.isPlaybackEnded) {
       this.props.addPlayerClass(style.prePlayback);
     }
     return true;
@@ -133,7 +133,7 @@ class PrePlaybackPlayOverlay extends BaseComponent {
    * @memberof PrePlaybackPlayOverlay
    */
   render(props: any): React$Element<any> | void {
-    if ((!props.isEnded && !props.prePlayback) || (!props.isEnded && this.autoplay) || props.loading) {
+    if ((!props.isPlaybackEnded && !props.prePlayback) || (!props.isPlaybackEnded && this.autoplay) || props.loading) {
       return undefined;
     }
     let rootStyle = {},
@@ -155,7 +155,7 @@ class PrePlaybackPlayOverlay extends BaseComponent {
                 this.handleClick();
               }
             }}>
-            {props.isEnded ? <Icon type={IconType.StartOver} /> : <Icon type={IconType.Play} />}
+            {props.isPlaybackEnded ? <Icon type={IconType.StartOver} /> : <Icon type={IconType.Play} />}
           </a>
         }
       </div>