@applicaster/quick-brick-player 16.0.0-rc.10 → 16.0.0-rc.101

package/src/Player/index.tsx

@@ -31,7 +31,6 @@ import {
 import { PlayNextOverlay } from "./PlayNextOverlay";
 import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
 
-import { GENERAL_EVENT } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
 import { parseLanguageTracks } from "@applicaster/zapp-react-native-utils/playerUtils/configurationUtils";
 import { DEFAULT_COLORS, SEEK_TIME } from "../utils/const";
 import { logger, getScreenAspectRatio } from "../utils";
@@ -41,7 +40,6 @@ import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/c
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { getTargetScreenDataFromEntry } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
 import { PlayerAnalyticsManager } from "@applicaster/zapp-react-native-utils/analyticsUtils/PlayerAnalyticsManager";
-import { PlayerAnalyticsTrackerI } from "@applicaster/zapp-react-native-utils/analyticsUtils/playerAnalyticsTracker";
 
 import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 import {
@@ -54,7 +52,7 @@ import { TVPlayerView } from "./PlayerView/TVPlayerView";
 import PlayerModal, { VideoPlayerModal } from "./PlayerModal";
 import { DockedControls } from "./AudioLayer/Layout/DockedControls";
 import { FlexImage } from "./AudioLayer/Layout/PlayerImage/FlexImage";
-import { PlayerError } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
+import { PlayerError } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 
 const isTvOS = isTvOSPlatform();
 
@@ -71,6 +69,60 @@ const styles = StyleSheet.create({
   flexImage: { height: "100%", aspectRatio: 1, flex: -1 },
 });
 
+/**
+ * Coerces the resolver's `Option<string | number>` result into what the
+ * native bridge expects: a string, or `undefined` when there is nothing to
+ * send.
+ */
+const toNativeTextProp = (
+  value: Option<string | number>
+): string | undefined =>
+  value === null || value === undefined ? undefined : String(value);
+
+export type NativePlayerMetadata = {
+  title: string | undefined;
+  subtitle: string | undefined;
+  imageUrl: string | undefined;
+};
+
+/**
+ * Adapts the player's resolved Title/Subtitle into the `metadata` object the
+ * *native* view receives.
+ *
+ * The resolution itself (dot-path / key-set logic, entry fallback) does not
+ * happen here - the player manager resolves it and publishes it on its content
+ * channel (`player.getContent()`). This function only coerces that value's
+ * `Option<string | number>` shape into what the native bridge needs: a string,
+ * or `undefined` when there is nothing to send.
+ *
+ * Travels as one `metadata` object rather than two flat props so native has a
+ * single place to look for player-facing text, and so adding a field later
+ * does not widen the bridge's prop surface again.
+ *
+ * This intentionally does not touch `entry` - analytics and the downloads
+ * feature read `entry.title` / `entry.summary` directly and must keep
+ * seeing the original feed values (the downloads feature requires the
+ * original entry title). The resolved (possibly customer-configured) text
+ * travels in `metadata` instead.
+ *
+ * Exported as a plain function (rather than inlined as a class method) so
+ * it can be unit tested directly without rendering the ~37KB `VideoPlayer`
+ * class component.
+ */
+export const toNativeMetadata = (
+  content: Option<{
+    title: Option<string | number>;
+    summary: Option<string | number>;
+    imageUrl?: Option<string>;
+  }>
+): NativePlayerMetadata => ({
+  title: toNativeTextProp(content?.title),
+  subtitle: toNativeTextProp(content?.summary),
+  // Already a string when present; coerced through the same helper so an
+  // empty or nullish value reaches native as `undefined` rather than "".
+  imageUrl: toNativeTextProp(content?.imageUrl),
+});
+
 type VideoPlayerProps = QuickBrickPlayer.PlayerProps & {
   isCasting?: boolean;
   playNextData?: PlayNextData;
@@ -96,6 +148,38 @@ type VideoPlayerProps = QuickBrickPlayer.PlayerProps & {
   children?: React.ReactNode;
 };
 
+/**
+ * `textTrackId`/`audioTrackId` are both the value the native player *reports* as
+ * currently selected AND the *controlled prop* that drives native selection.
+ * Because of that dual role, reflecting a reported value straight back down turns
+ * a status update into a command.
+ *
+ * The native player can momentarily report "nothing selected" (index -1, which
+ * `parseLanguageTracks` maps to `undefined`) during normal fMP4/ABR segment
+ * transitions. Pushing that back down as a "disable"/"clear" command flips native
+ * state, which emits a fresh onTracksChanged, which we would echo again — an
+ * infinite feedback loop.
+ *
+ * Keep the current selection when the reported value is a transient drop and the
+ * chosen track is still available. A genuine user "Off"/change already updates the
+ * controlled state first, so this only ignores unsolicited native status blips.
+ */
+const resolveReportedTrackId = (
+  reportedId: string | null | undefined,
+  currentId: string | null,
+  tracks: { id: string }[] = []
+): string | null => {
+  if (reportedId) {
+    return reportedId;
+  }
+
+  if (currentId && tracks.some((track) => track?.id === currentId)) {
+    return currentId;
+  }
+
+  return null;
+};
+
 export default class VideoPlayer extends React.Component<
   VideoPlayerProps,
   QuickBrickPlayer.NativePlayerState & {
@@ -164,20 +248,10 @@ export default class VideoPlayer extends React.Component<
     nativePlayerIsReady: false,
   };
 
-  private _tracker: PlayerAnalyticsTrackerI;
-  get analyticsTracker() {
-    if (!this._tracker) {
-      this._tracker = PlayerAnalyticsManager.getInstance().getTracker(
-        this.props.playerId
-      );
-    }
-
-    return this._tracker;
-  }
-
   constructor(props) {
     super(props);
     this.onVideoLoadCalled = false; // android
+    PlayerAnalyticsManager.getInstance();
 
     this.takeParentStyle = isWeb()
       ? { width: "100%", flex: "1 1 auto", objectFit: "contain" }
@@ -191,9 +265,6 @@ export default class VideoPlayer extends React.Component<
   componentWillUnmount() {
     this.playbackStarted = false;
 
-    this.analyticsTracker.handleAnalyticEvent(GENERAL_EVENT.session_end);
-    this.onPlayerClosed();
-
     if (isAndroidPlatform()) {
       this.disablePiP();
     }
@@ -201,7 +272,6 @@ export default class VideoPlayer extends React.Component<
 
   componentDidMount() {
     this.playbackStarted = false;
-    this.onPlayerPresented();
   }
 
   shouldComponentUpdate(nextProps) {
@@ -328,6 +398,22 @@ export default class VideoPlayer extends React.Component<
     RNPlayerManager?.[this.playerPluginId]?.stopBackgroundPlayback?.();
   };
 
+  command = (command: string, userInfo?: Record<string, any>) => {
+    if (
+      this.isReactNativeMethodsSupported() &&
+      RNPlayerManager?.[this.playerPluginId]?.command &&
+      this._root
+    ) {
+      const node = findNodeHandle(this._root);
+
+      if (!node) {
+        return;
+      }
+
+      RNPlayerManager?.[this.playerPluginId]?.command(node, command, userInfo);
+    }
+  };
+
   forward = (seekTime = SEEK_TIME) => {
     const currentTime = this.state.currentTime;
 
@@ -445,14 +531,6 @@ export default class VideoPlayer extends React.Component<
     });
   };
 
-  onPlayerPresented = () => {
-    this.analyticsTracker?.handleAnalyticEvent(GENERAL_EVENT.player_presented);
-  };
-
-  onPlayerClosed = () => {
-    this.analyticsTracker?.handleAnalyticEvent(GENERAL_EVENT.player_closed);
-  };
-
   onVideoEnd = () => {
     this.setState({ displayOverlay: !this.state.displayOverlay }, () => {
       if (this.state?.displayOverlay) {
@@ -473,6 +551,10 @@ export default class VideoPlayer extends React.Component<
     return this.props?.listener?.onError(newError);
   };
 
+  onRemoteCommand = ({ nativeEvent = null }) => {
+    this.props?.listener?.onRemoteCommand?.(nativeEvent);
+  };
+
   onPlayerPause = ({ nativeEvent = null }) => {
     this.setState({ paused: true });
     this.props?.listener?.onPlayerPause(nativeEvent);
@@ -667,20 +749,50 @@ export default class VideoPlayer extends React.Component<
     const { textTracks, audioTracks, audioTrackId, textTrackId } =
       parseLanguageTracks(nativeEvent);
 
-    this.setState(
-      {
-        audioTrackId,
-        textTrackId,
-      },
-      () => {
-        this.props?.listener?.onTracksChanged?.({
-          textTracks,
-          audioTracks,
-          audioTrackId,
-          textTrackId,
-        });
-      }
+    // Resolve the reported selection against the current controlled state so a
+    // transient native "nothing selected" doesn't get echoed back as a command
+    // and re-trigger native selection (infinite loop, see resolveReportedTrackId).
+    const nextAudioTrackId = resolveReportedTrackId(
+      audioTrackId,
+      this.state.audioTrackId,
+      audioTracks
     );
+
+    const nextTextTrackId = resolveReportedTrackId(
+      textTrackId,
+      this.state.textTrackId,
+      textTracks
+    );
+
+    const notifyListener = () =>
+      this.props?.listener?.onTracksChanged?.({
+        textTracks,
+        audioTracks,
+        audioTrackId: nextAudioTrackId,
+        textTrackId: nextTextTrackId,
+      });
+
+    // Only update state (and thus re-send the controlled props) on a real change.
+    // Re-rendering with identical prop values would otherwise keep the native
+    // event/prop echo alive.
+    const stateChanges: {
+      audioTrackId?: string | null;
+      textTrackId?: string | null;
+    } = {};
+
+    if (nextAudioTrackId !== this.state.audioTrackId) {
+      stateChanges.audioTrackId = nextAudioTrackId;
+    }
+
+    if (nextTextTrackId !== this.state.textTrackId) {
+      stateChanges.textTrackId = nextTextTrackId;
+    }
+
+    if (Object.keys(stateChanges).length > 0) {
+      this.setState(stateChanges as any, notifyListener);
+    } else {
+      notifyListener();
+    }
   };
 
   onVideoProgress = ({ nativeEvent }) => {
@@ -977,6 +1089,7 @@ export default class VideoPlayer extends React.Component<
       onPlayerResume: this.onPlayerResume,
       onPlayerSeekComplete: this.onPlayerSeekComplete,
       onPlayerSeekStart: this.onPlayerSeekStart,
+      onRemoteCommand: this.onRemoteCommand,
     };
 
     const lifecycleEvents = {
@@ -1096,6 +1209,15 @@ export default class VideoPlayer extends React.Component<
     const liveCatchUpEnabled =
       this.props.pluginConfiguration?.liveCatchUpEnabled;
 
+    // Look the player up by id rather than using the active player: these
+    // props are handed to this component's own native player view, so they
+    // must describe that player's content even while a cast session is
+    // running (during which `usePlayer` swaps React consumers over to the
+    // casting receiver).
+    const metadata = toNativeMetadata(
+      playerManager.getPlayerWithId(this.props.playerId)?.getContent()
+    );
+
     const nativeProps = {
       rate: undefined,
       entry,
@@ -1114,6 +1236,7 @@ export default class VideoPlayer extends React.Component<
       liveCatchUpEnabled,
       playerId: this.props.playerId,
       pictureInPictureEnabled,
+      metadata,
       seekStep:
         (this.props.pluginConfiguration?.seek_duration || SEEK_TIME) * 1000,
       accessibilityProps: getAllAccessibilityProps(
@@ -1170,10 +1293,15 @@ export default class VideoPlayer extends React.Component<
       return null;
     }
 
-    const TransportControls = isTV()
+    const isTvPlatform = isTV();
+
+    const TransportControls = isTvPlatform
       ? TransportControlsTV
       : TransportControlsMobile;
 
+    // The mobile and TV transport controls read Title/Subtitle from the
+    // player manager's content channel (via `usePlayerContent`) instead of
+    // receiving them as props.
     const needToShowDefaultControls = !(
       (controls && !castAction?.state?.connected) ||
       this.getPlayNextData()

package/src/Player/AudioLayer/components/SleepTimerModalHeader/SleepTimerModalHeader.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { ModalHeader } from "@applicaster/zapp-react-native-ui-components/Components/ModalComponent/Header";
-import { isNil } from "@applicaster/zapp-react-native-utils/utils";
-
-const formatTime = (milliseconds: number) => {
-  const totalSeconds = Math.floor(milliseconds / 1000);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-
-  if (milliseconds < 3600000) {
-    return `${minutes.toString().padStart(2, "0")}:${seconds
-      .toString()
-      .padStart(2, "0")}`;
-  }
-
-  return `${hours.toString().padStart(2, "0")}:${minutes
-    .toString()
-    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-};
-
-export const SleepTimerModalHeader = ({
-  summary,
-  ...props
-}: {
-  summary?: string;
-}) => {
-  const sleepTimerDate = +summary;
-
-  const [timeLeft, setTimeLeft] = React.useState(
-    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
-  );
-
-  const showCounter = React.useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
-
-  React.useLayoutEffect(() => {
-    if (showCounter && sleepTimerDate !== 0) {
-      setTimeLeft(sleepTimerDate - Date.now());
-
-      const intervalId = setInterval(() => {
-        setTimeLeft(() => {
-          const newTimeLeft = sleepTimerDate - Date.now();
-
-          if (newTimeLeft <= 0) {
-            clearInterval(intervalId);
-
-            return 0;
-          } else {
-            return newTimeLeft;
-          }
-        });
-      }, 1000);
-
-      return () => clearInterval(intervalId);
-    } else {
-      setTimeLeft(0);
-    }
-  }, [sleepTimerDate, showCounter]);
-
-  return (
-    <ModalHeader
-      summary={!isNil(summary) ? formatTime(timeLeft) : summary}
-      {...(props as any)}
-    />
-  );
-};

package/src/Player/AudioLayer/components/SleepTimerModalHeader/index.ts

@@ -1 +0,0 @@
-export * from "./SleepTimerModalHeader";