@applicaster/quick-brick-player 13.0.0-rc.11 → 13.0.0-rc.111

package/src/Player/AudioLayer/SleepTimerManager.ts

@@ -0,0 +1,119 @@
+import { BehaviorSubject } from "rxjs";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { hasDatePassed, NAMESPACE } from "./utils";
+
+const { log_debug, log_error } = createLogger({
+  subsystem: "Player",
+  category: "SleepTimerManager",
+});
+
+export type SleepTimer = {
+  label: string;
+  // interval in minutes for UI at the moment when timer was first started
+  value: number;
+};
+
+export const SLEEP_TIMER_OFF: SleepTimer = {
+  label: "playback_sleep_off_label",
+  value: 0,
+};
+
+export class SleepTimerState {
+  constructor(
+    public timer: SleepTimer,
+    public timerDate: number
+  ) {}
+}
+
+const SLEEP_PREFERENCE_KEY = "sleep";
+
+export class SleepTimerController {
+  private sleepTimerStateSubject = new BehaviorSubject<SleepTimerState>(
+    new SleepTimerState(SLEEP_TIMER_OFF, 0)
+  );
+
+  constructor(private player: Player) {}
+
+  get sleepTimerState$() {
+    return this.sleepTimerStateSubject.asObservable();
+  }
+
+  private async scheduleSleep(sleepDate): Promise<boolean> {
+    log_debug(`Setting sleep interval to ${sleepDate}`);
+
+    try {
+      this.player.cancelSleepTimer?.();
+      this.player.startSleepTimer?.(sleepDate);
+
+      return true;
+    } catch (e) {
+      log_error("Failed to start sleep timer", { error: e.message });
+
+      return false;
+    }
+  }
+
+  async setSleepTimer(item: SleepTimer) {
+    // User has selected Off state
+    if (item.value === 0) {
+      log_debug("Cancelling sleep timer");
+      this.player.cancelSleepTimer?.();
+
+      return this.onTimerExpired();
+    }
+
+    log_debug(`Starting sleep timer in ${item.value} minutes`);
+
+    const futureSleepDate = Date.now() + item.value * 60000;
+
+    if (await this.scheduleSleep(futureSleepDate)) {
+      await localStorage.setItem(
+        SLEEP_PREFERENCE_KEY,
+        { ...item, futureSleepDate },
+        NAMESPACE
+      );
+
+      this.sleepTimerStateSubject.next(
+        new SleepTimerState(item, futureSleepDate)
+      );
+    }
+  }
+
+  async onTimerExpired() {
+    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+    this.sleepTimerStateSubject.next(new SleepTimerState(SLEEP_TIMER_OFF, 0));
+  }
+
+  async loadSleep() {
+    const sleep = await localStorage.getItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+    if (!sleep) return;
+
+    const { futureSleepDate, ...rest } = sleep;
+
+    if (!futureSleepDate || hasDatePassed(futureSleepDate)) {
+      log_debug("Sleep date has already passed");
+      await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+      return;
+    }
+
+    if (await this.scheduleSleep(futureSleepDate)) {
+      log_debug(`Sleep state restored, will go to sleep at ${futureSleepDate}`);
+
+      this.sleepTimerStateSubject.next(
+        new SleepTimerState(rest as SleepTimer, futureSleepDate)
+      );
+    }
+  }
+
+  // Will be called if user closed the player explicitly.
+  // TODO: check if it will be called on Android when we need.
+  //  Probably we will have to handle it on native instead.
+  public static async onPlayerDestroy() {
+    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+  }
+}

package/src/Player/AudioLayer/SpeedManager.ts

@@ -0,0 +1,52 @@
+import { BehaviorSubject } from "rxjs";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { NAMESPACE } from "./utils";
+
+const { log_debug } = createLogger({
+  subsystem: "Player",
+  category: "PlaybackSpeedManager",
+});
+
+export type PlaybackSpeed = {
+  asset: string;
+  value: number;
+};
+
+const SPEED_PREFERENCE_KEY = "speed";
+
+export const DEFAULT_SPEED: PlaybackSpeed = {
+  asset: "speed_1",
+  value: 1.0,
+};
+
+// todo: should not be applied to live streams
+export class SpeedController {
+  private playbackSpeedSubject = new BehaviorSubject<PlaybackSpeed>(
+    DEFAULT_SPEED
+  );
+
+  constructor(private player: Player) {}
+
+  get playbackSpeed$() {
+    return this.playbackSpeedSubject.asObservable();
+  }
+
+  async loadSpeed() {
+    const speed = await localStorage.getItem(SPEED_PREFERENCE_KEY, NAMESPACE);
+
+    // checking for value in case we will pull empty or broken object
+    if (speed && speed.value) {
+      this.playbackSpeedSubject.next(speed);
+      this.player.setPlaybackRate?.(speed.value);
+      log_debug(`Speed loaded: ${speed}`);
+    }
+  }
+
+  async setPlaybackSpeed(speed: PlaybackSpeed) {
+    await localStorage.setItem(SPEED_PREFERENCE_KEY, speed, NAMESPACE);
+    this.playbackSpeedSubject.next(speed);
+    this.player.setPlaybackRate?.(speed.value);
+  }
+}

package/src/Player/AudioLayer/utils.ts

@@ -1,5 +1,10 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import {
+  PlayerAnimationStateEnum,
+  PlayerAnimationStateT,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 export const NAMESPACE = "audio-player";
 
@@ -31,3 +36,25 @@ export const formatSpeed = (value: number) => {
   // Return the formatted string with "speed_" prefix
   return `speed_${formattedValue}`;
 };
+
+export const calculateBorderRadius = (
+  docked: boolean,
+  startComponentsAnimation: boolean,
+  isActiveGesture: boolean,
+  playerAnimationState: PlayerAnimationStateT,
+  configuration: Record<string, any>
+): number => {
+  const shouldRemoveBorderRadius =
+    (startComponentsAnimation &&
+      isActiveGesture &&
+      playerAnimationState !== PlayerAnimationStateEnum.maximize) ||
+    docked;
+
+  if (shouldRemoveBorderRadius) {
+    return 0;
+  }
+
+  return toNumberWithDefaultZero(
+    configuration.audio_player_artwork_border_radius
+  );
+};

package/src/Player/Const/sleepTimerOptions.ts

@@ -0,0 +1,39 @@
+import { toDayJSLocaleMap } from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
+import { getUILanguage } from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+const createTimerOptions = (value) => {
+  let label = "";
+
+  const str = dayjs
+    .duration(value, "minute")
+    .locale(toDayJSLocaleMap(getUILanguage()))
+    .humanize();
+
+  if (value === 60) {
+    /** Skipping prefix "an"/"un"/"una" for 1 hour */
+
+    if (str.includes(" ")) {
+      label = `1 ${str.split(" ")[1]}`; // Combine "1" with second part of the string
+    } else {
+      label = `1 ${str}`; // Use dayjs provided translation
+    }
+  } else {
+    label = str;
+  }
+
+  return {
+    label,
+    value,
+  };
+};
+
+export const getSleepTimerOptions = (configuration) => {
+  return [
+    {
+      label: configuration["playback_sleep_off_label"],
+      value: 0,
+    },
+    ...[5, 10, 15, 30, 45, 60, 120].map(createTimerOptions),
+  ];
+};

package/src/Player/Const/speedOptions.ts

@@ -0,0 +1,4 @@
+export const speedOptions = [0.8, 1, 1.2, 1.5, 2].map((v) => ({
+  label: v + "x",
+  value: v,
+}));

package/src/Player/Utils/Utils.ts

@@ -1,11 +1,6 @@
 import queryString from "query-string";
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
-export const getLiveUrl = (url: string) => {
-  // Use the replace method with a regular expression to replace all instances of subClass with livePage
-  return url.replace(new RegExp("subClass", "g"), "livePage");
-};
-
 export const addQueryParam = (
   baseUrl: string,
   paramName: string,

package/src/Player/Utils/index.tsx

@@ -1 +1,118 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 export * from "./Utils";
+
+export const getBottomSheetModalIconProps = (theme) => ({
+  height: theme["audio_modal_bottom_sheet_item_icon_height"],
+  width: theme["audio_modal_bottom_sheet_item_icon_width"],
+  marginBottom: theme["audio_modal_bottom_sheet_item_icon_margin_bottom"],
+  marginLeft: theme["audio_modal_bottom_sheet_item_icon_margin_left"],
+  marginRight: theme["audio_modal_bottom_sheet_item_icon_margin_right"],
+  marginTop: theme["audio_modal_bottom_sheet_item_icon_margin_top"],
+  flavour: theme["modal_bottom_sheet_item_icon_flavour"],
+});
+
+export const getBottomSheetModalLabelProps = (theme, width: number) => {
+  const {
+    audio_modal_bottom_sheet_item_label_android_letter_spacing,
+    audio_modal_bottom_sheet_item_label_ios_letter_spacing,
+    audio_modal_bottom_sheet_item_label_family_ios_font_selector,
+    audio_modal_bottom_sheet_item_label_family_android_font_selector,
+    audio_modal_bottom_sheet_item_label_focus_font_color,
+    audio_modal_bottom_sheet_item_label_font_color,
+    audio_modal_bottom_sheet_item_label_selected_font_color,
+    audio_modal_bottom_sheet_item_label_hover_selected_font_color,
+    audio_modal_bottom_sheet_item_label_font_size,
+    audio_modal_bottom_sheet_item_label_line_height,
+    audio_modal_bottom_sheet_item_label_margin_bottom,
+    audio_modal_bottom_sheet_item_label_margin_top,
+    audio_modal_bottom_sheet_item_label_margin_left,
+    audio_modal_bottom_sheet_item_label_margin_right,
+    audio_modal_bottom_sheet_item_label_transform,
+    audio_modal_bottom_sheet_item_icon_width,
+    audio_modal_bottom_sheet_item_icon_margin_left,
+    audio_modal_bottom_sheet_item_icon_margin_right,
+    audio_modal_bottom_sheet_item_margin_left,
+    audio_modal_bottom_sheet_item_margin_right,
+    audio_modal_bottom_sheet_item_padding_left,
+    audio_modal_bottom_sheet_item_padding_right,
+  } = theme;
+
+  const maxWidth =
+    width -
+    (audio_modal_bottom_sheet_item_icon_width +
+      audio_modal_bottom_sheet_item_icon_margin_left +
+      audio_modal_bottom_sheet_item_icon_margin_right +
+      audio_modal_bottom_sheet_item_margin_left +
+      audio_modal_bottom_sheet_item_margin_right +
+      audio_modal_bottom_sheet_item_padding_left +
+      audio_modal_bottom_sheet_item_padding_right);
+
+  return {
+    fontFamily: platformSelect({
+      ios: audio_modal_bottom_sheet_item_label_family_ios_font_selector,
+      android: audio_modal_bottom_sheet_item_label_family_android_font_selector,
+    }),
+    letterSpacing: platformSelect({
+      ios: audio_modal_bottom_sheet_item_label_ios_letter_spacing,
+      android: audio_modal_bottom_sheet_item_label_android_letter_spacing,
+    }),
+    fontSize: audio_modal_bottom_sheet_item_label_font_size,
+    color: audio_modal_bottom_sheet_item_label_font_color,
+    focusColor: audio_modal_bottom_sheet_item_label_focus_font_color,
+    hoverSelectedColor:
+      audio_modal_bottom_sheet_item_label_hover_selected_font_color,
+    selectedColor: audio_modal_bottom_sheet_item_label_selected_font_color,
+    lineHeight: audio_modal_bottom_sheet_item_label_line_height,
+    marginBottom: audio_modal_bottom_sheet_item_label_margin_bottom,
+    marginTop: audio_modal_bottom_sheet_item_label_margin_top,
+    marginLeft: audio_modal_bottom_sheet_item_label_margin_left,
+    marginRight: audio_modal_bottom_sheet_item_label_margin_right,
+    transform: audio_modal_bottom_sheet_item_label_transform,
+    maxWidth,
+  };
+};
+
+export const getBottomSheetModalItemProps = (theme, width: number) => {
+  const {
+    audio_modal_bottom_sheet_item_background_color,
+    audio_modal_bottom_sheet_item_focus_background_color,
+    audio_modal_bottom_sheet_item_selected_background_color,
+    audio_modal_bottom_sheet_item_focused_selected_background_color,
+    audio_modal_bottom_sheet_item_corner_radius,
+    audio_modal_bottom_sheet_item_margin_bottom,
+    audio_modal_bottom_sheet_item_margin_left,
+    audio_modal_bottom_sheet_item_margin_right,
+    audio_modal_bottom_sheet_item_margin_top,
+    audio_modal_bottom_sheet_item_padding_bottom,
+    audio_modal_bottom_sheet_item_padding_left,
+    audio_modal_bottom_sheet_item_padding_right,
+    audio_modal_bottom_sheet_item_padding_top,
+  } = theme;
+
+  return {
+    backgroundColor: audio_modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor:
+      audio_modal_bottom_sheet_item_focus_background_color,
+    selectedBackgroundColor:
+      audio_modal_bottom_sheet_item_selected_background_color,
+    focusedSelectedBackgroundColor:
+      audio_modal_bottom_sheet_item_focused_selected_background_color,
+    borderRadius: audio_modal_bottom_sheet_item_corner_radius,
+    marginBottom: audio_modal_bottom_sheet_item_margin_bottom,
+    marginTop: audio_modal_bottom_sheet_item_margin_top,
+    marginLeft: audio_modal_bottom_sheet_item_margin_left,
+    marginRight: audio_modal_bottom_sheet_item_margin_right,
+    paddingTop: audio_modal_bottom_sheet_item_padding_top,
+    paddingBottom: audio_modal_bottom_sheet_item_padding_bottom,
+    paddingRight: audio_modal_bottom_sheet_item_padding_right,
+    paddingLeft: audio_modal_bottom_sheet_item_padding_left,
+    maxWidth: width,
+  };
+};
+
+export const getBottomSheetModalSelectedItemIcon = (theme) =>
+  theme["audio_modal_bottom_sheet_item_selected_icon"] || null;
+
+export const getBottomSheetModalDefaultItemIcon = (theme) =>
+  theme["audio_modal_bottom_sheet_item_default_icon"] || null;

package/src/Player/hooks/useIsCasting.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
+
+const fakeEntry: any = {
+  title: "Chromecast use is casting fake entry",
+  id: "quick-brick-use-is-casting-fake-entry",
+};
+
+/**
+ * Returns the cast action state connection status, does not update when app is in background on Apple platforms
+ * On other platforms, it continues to check the cast action state even when the app is in background
+ */
+export const useIsCasting = () => {
+  const actionContext = useActions(CHROMECAST_IDENTIFIER);
+  const appState = useAppState();
+  const isAppInForeground = appState === "active";
+  const shouldOnlyUpdateInForeground = isApplePlatform();
+
+  const [castActionState, setCastActionState] = React.useState(
+    !actionContext ? null : actionContext.initialEntryState(fakeEntry)
+  );
+
+  React.useEffect(() => {
+    if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+      if (!(!actionContext && castActionState !== null)) {
+        setCastActionState(actionContext.initialEntryState(fakeEntry));
+      }
+    }
+  }, [
+    actionContext,
+    setCastActionState,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  React.useEffect(() => {
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext?.addListener(String(fakeEntry.id), (state) => {
+        // Only check foreground state on Apple platforms
+        if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+          setCastActionState(state);
+        }
+      });
+    }
+  }, [
+    setCastActionState,
+    actionContext,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  return !!castActionState?.connected;
+};

package/src/Player/index.tsx

@@ -74,6 +74,7 @@ export default class VideoPlayer extends React.Component<
   state: QuickBrickPlayer.NativePlayerState = {
     audioTrackId: null,
     textTrackId: null,
+    isCasting: this.props.isCasting,
 
     // TODO: Can be deleted, on controller logic
     isAd: false,
@@ -698,6 +699,10 @@ export default class VideoPlayer extends React.Component<
     ];
   };
 
+  get supportNativeCast() {
+    return this.props.controller.supportNativeCast();
+  }
+
   render() {
     const {
       docked,
@@ -710,18 +715,15 @@ export default class VideoPlayer extends React.Component<
       muted,
       style,
       castAction,
-      controller,
       startComponentsAnimation,
     } = this.props;
 
-    const supportNativeCast = controller.supportNativeCast();
-
     const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
       this.state;
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
-      entry?.type?.value === "audio";
+      entry?.type?.value?.includes?.("audio");
 
     const getStyle = (dimensions) => {
       const generalStyles = isAudioItem ? styles.audio : styles.video;
@@ -791,8 +793,13 @@ export default class VideoPlayer extends React.Component<
       controls: shouldUseNativeControls,
     };
 
+    const isFullScreenAudioPlayer =
+      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
+
+    const isAudioPlayer = isFullScreenAudioPlayer && isAudioItem;
+
     const pictureInPictureEnabled =
-      this.props.pluginConfiguration?.pictureInPictureEnabled;
+      this.props.pluginConfiguration?.pictureInPictureEnabled && !isAudioPlayer;
 
     const nativeProps = {
       entry, // Must be passed first in list
@@ -806,7 +813,6 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
-      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -817,7 +823,14 @@ export default class VideoPlayer extends React.Component<
       accessibilityProps: getAllAccessibilityProps(
         this.getPluginConfiguration()
       ),
-    }; // rate temporary removed, because of bug with subtitles
+    };
+
+    if (!isAppleTV()) {
+      // TODO: Move to RN method and remove from props.
+      // Causes tvOS bug: native player passes rate on fast seek,
+      // RN returns it and it breaks playback.
+      nativeProps.rate = rate;
+    }
 
     if (
       this.isReactNativeMethodsSupported() &&
@@ -918,8 +931,8 @@ export default class VideoPlayer extends React.Component<
     const playerContainerStyles = isApplePlatform()
       ? styles.playerContainerBlack
       : isTV() && isAudioItem
-      ? styles.playerContainerTransparent
-      : styles.playerContainerBlack;
+        ? styles.playerContainerTransparent
+        : styles.playerContainerBlack;
 
     const isInline = () => {
       if (isTV()) {
@@ -960,9 +973,6 @@ export default class VideoPlayer extends React.Component<
       ) : null;
     };
 
-    const isFullScreenAudioPlayer =
-      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
-
     const sharedWrapperViewProps = {
       style,
       entry,
@@ -987,17 +997,21 @@ export default class VideoPlayer extends React.Component<
     const backgroundImageKey =
       this.getPluginConfiguration()?.player_preview_image_key;
 
+    const shouldRenderNativePlayer =
+      !this.props.isCasting || this.supportNativeCast;
+
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
-        <View style={containerStyle}>
-          {(!castAction?.state?.connected || supportNativeCast) && (
+        // Ensure the View remains in the native hierarchy for proper rendering and interaction
+        <View collapsable={false} style={containerStyle}>
+          {shouldRenderNativePlayer ? (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
               {...nativeProps}
               listener={this.props.listener}
             />
-          )}
+          ) : null}
           <AudioPlayerWrapper {...sharedWrapperViewProps} />
         </View>
       ) : (
@@ -1012,7 +1026,7 @@ export default class VideoPlayer extends React.Component<
             return (
               <View style={styles.container}>
                 <View style={[playerContainerStyles, playerDimensions]}>
-                  {isAudioItem && (
+                  {isAudioItem ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={{
@@ -1031,21 +1045,24 @@ export default class VideoPlayer extends React.Component<
                         plugin_configuration={this.getPluginConfiguration()}
                       />
                     </AnimationComponent>
-                  )}
+                  ) : null}
 
-                  {shouldRenderBackground && (
+                  {shouldRenderBackground ? (
                     <PlayerImageBackground
                       imageKey={backgroundImageKey}
                       configuration={this.getPluginConfiguration()}
                       entry={entry}
                       style={getBackgroundImageStyle(playerDimensions)}
                     />
-                  )}
+                  ) : null}
 
-                  {(!castAction?.state?.connected || supportNativeCast) && (
+                  {shouldRenderNativePlayer ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
-                      additionalData={playerDimensions}
+                      additionalData={{
+                        ...playerDimensions,
+                        disableAnimatedComponent: isAudioItem,
+                      }}
                       style={getStyle(playerDimensions)}
                     >
                       <this.props.PlayerComponent
@@ -1064,7 +1081,7 @@ export default class VideoPlayer extends React.Component<
                         {this.childrenWithPlayNext()}
                       </this.props.PlayerComponent>
                     </AnimationComponent>
-                  )}
+                  ) : null}
                 </View>
 
                 {renderTransportControls(playerDimensions)}

package/src/QuickBrickPlayer.tsx

@@ -5,6 +5,7 @@ import Player from "./Player";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsCasting } from "./Player/hooks/useIsCasting";
 
 const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
 
@@ -24,6 +25,7 @@ const QuickBrickPlayerComponent = (
   }, [props.PlayerComponent]);
 
   const castAction = useActions(CHROMECAST_IDENTIFIER);
+  const isCasting = useIsCasting();
 
   const isModal = Boolean(props?.isModal);
   const isScreenDisabled = !controller?.isFullScreenSupported() || !isModal;
@@ -48,6 +50,7 @@ const QuickBrickPlayerComponent = (
       {...props}
       ref={ref}
       castAction={!props?.disableCastAction && castAction}
+      isCasting={isCasting}
       PlayerComponent={props.PlayerComponent}
       openPiP={openPiP}
       closePiP={closePiP}