fix(FEC-11708): V3 - cast on multiple players - if try to cast when o…

…ther player are casting, the player will be disabled (#643)

Cast backdrop has issues with multiple players.
Since backdrop is no longer necessary it can be removed.
Also clear isCastInitiator if cast request failed.
Fixes FEC-11708.

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

@@ -3,7 +3,6 @@ import style from '../../styles/style.scss';
 import {h, Component} from 'preact';
 import {connect} from 'react-redux';
 import {IconType} from '../icon/index';
-import {actions} from '../../reducers/backdrop';
 import {Icon} from '../icon/icon';
 import {Localizer, Text} from 'preact-i18n';
 import {withPlayer} from '../player';
@@ -32,7 +31,7 @@ const COMPONENT_NAME = 'CastBeforePlay';
  * @example <CastBeforePlay />
  * @extends {Component}
  */
-@connect(mapStateToProps, actions)
+@connect(mapStateToProps)
 @withPlayer
 @withLogger(COMPONENT_NAME)
 class CastBeforePlay extends Component {
@@ -53,8 +52,7 @@ class CastBeforePlay extends Component {
    * @memberof CastBeforePlay
    */
   onClick = (): void => {
-    this.props.updateBackdropVisibility(true);
-    this.props.player.startCasting(RemotePlayerType.CHROMECAST).catch(() => this.props.updateBackdropVisibility(false));
+    this.props.player.startCasting(RemotePlayerType.CHROMECAST);
   };
 
   /**

src/components/cast/cast.js

@@ -2,7 +2,6 @@
 import style from '../../styles/style.scss';
 import {h, Component} from 'preact';
 import {connect} from 'react-redux';
-import {actions} from '../../reducers/backdrop';
 import {KeyMap} from '../../utils/key-map';
 import {withPlayer} from '../player';
 import {withEventManager} from 'event/with-event-manager';
@@ -30,23 +29,21 @@ const COMPONENT_NAME = 'Cast';
  * @example <Cast />
  * @extends {Component}
  */
-@connect(mapStateToProps, actions)
+@connect(mapStateToProps)
 @withPlayer
 @withEventManager
 @withLogger(COMPONENT_NAME)
 @withText({castText: 'cast.play_on_tv'})
 class Cast extends Component {
   /**
-   * On click set the backdrop to visible.
-   * If cast session start failed remove the backdrop.
+   * On click, mark the player which initiated the cast
    * @memberof Cast
    * @returns {void}
    */
   onClick = (): void => {
     this.props.player.setIsCastInitiator(RemotePlayerType.CHROMECAST, true);
-    this.props.updateBackdropVisibility(true);
     this.props.eventManager.listenOnce(this.props.player, this.props.player.Event.Cast.CAST_SESSION_START_FAILED, () =>
-      this.props.updateBackdropVisibility(false)
+      this.props.player.setIsCastInitiator(RemotePlayerType.CHROMECAST, false)
     );
   };
 
@@ -59,8 +56,7 @@ class Cast extends Component {
    */
   onKeyDown = (e: KeyboardEvent): void => {
     if (e.keyCode === KeyMap.ENTER) {
-      this.props.updateBackdropVisibility(true);
-      this.props.player.startCasting(RemotePlayerType.CHROMECAST).catch(() => this.props.updateBackdropVisibility(false));
+      this.props.player.startCasting(RemotePlayerType.CHROMECAST);
     }
   };
 

src/reducers/index.js

@@ -1,4 +1,3 @@
-export * as backdrop from './backdrop';
 export * as config from './config';
 export * as cvaa from './cvaa';
 export * as engine from './engine';

src/store.js

@@ -9,7 +9,6 @@ import loading from './reducers/loading';
 import cvaa from './reducers/cvaa';
 import settings from './reducers/settings';
 import overlayAction from './reducers/overlay-action';
-import backdrop from './reducers/backdrop';
 import playlist from 'reducers/playlist';
 import overlay from 'reducers/overlay';
 
@@ -23,7 +22,6 @@ const reducer = combineReducers({
   cvaa,
   settings,
   overlayAction,
-  backdrop,
   playlist,
   overlay
 });

src/styles/style.scss

@@ -39,7 +39,6 @@
 @import '../components/cast/cast';
 @import '../components/cast-overlay/cast-overlay';
 @import '../components/cast-on-tv/cast-on-tv';
-@import '../components/backdrop/backdrop';
 @import '../components/playlist-button/playlist-button';
 @import '../components/picture-in-picture/picture-in-picture';
 @import '../components/playback-controls/playback-controls';

src/ui-presets/live.js

@@ -17,7 +17,6 @@ import {Watermark} from '../components/watermark/watermark';
 import {VrStereo} from '../components/vr-stereo';
 import {Cast} from '../components/cast';
 import {CastBeforePlay} from '../components/cast-on-tv/cast-before-play';
-import {Backdrop} from '../components/backdrop/backdrop';
 import {PlaybackControls} from '../components/playback-controls';
 import {PictureInPicture} from '../components/picture-in-picture';
 import {PictureInPictureOverlay} from '../components/picture-in-picture-overlay';
@@ -73,7 +72,6 @@ class LiveUI extends Component {
                 <PlaybackControls className={style.centerPlaybackControls} />
                 <PrePlaybackPlayOverlay />
                 <CastBeforePlay />
-                <Backdrop />
               </Fragment>
               {({containerRef}) => (
                 <Fragment>

src/ui-presets/playback.js

@@ -20,7 +20,6 @@ import {UnmuteIndication} from '../components/unmute-indication';
 import {Watermark} from '../components/watermark/watermark';
 import {Cast} from '../components/cast';
 import {CastBeforePlay} from '../components/cast-on-tv/cast-before-play';
-import {Backdrop} from '../components/backdrop/backdrop';
 import {PlaybackControls} from '../components/playback-controls';
 import {PlaylistCountdown} from '../components/playlist-countdown';
 import {PlaylistNextScreen} from '../components/playlist-next-screen';
@@ -78,7 +77,6 @@ class PlaybackUI extends Component {
                 <PlaylistNextScreen />
                 <PrePlaybackPlayOverlay />
                 <CastBeforePlay />
-                <Backdrop />
               </Fragment>
               {({containerRef}) => (
                 <Fragment>