@applicaster/quick-brick-player 16.0.0-alpha.1151561937 → 16.0.0-alpha.1212303401

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "16.0.0-alpha.1151561937",
+  "version": "16.0.0-alpha.1212303401",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,10 +36,10 @@
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "16.0.0-rc.60",
-    "@applicaster/quick-brick-tv-transport-controls": "16.0.0-rc.60",
-    "@applicaster/zapp-react-native-tvos-app": "16.0.0-alpha.1151561937",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1151561937",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1151561937",
+    "@applicaster/quick-brick-tv-transport-controls": "16.0.0-rc.69",
+    "@applicaster/zapp-react-native-tvos-app": "16.0.0-alpha.1212303401",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1212303401",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1212303401",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/__tests__/onTracksChanged.test.ts

@@ -0,0 +1,192 @@
+import VideoPlayer from "../index";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+
+/**
+ * Tests for the track-selection reconciliation logic in `onTracksChanged`.
+ *
+ * The handler uses `resolveReportedTrackId` to prevent an infinite feedback
+ * loop: a transient native "nothing selected" (reported id === undefined)
+ * must NOT clear controlled state when the previous track is still available,
+ * while genuine track changes must still propagate.
+ *
+ * Instances are constructed directly (no render) to keep these tests fast and
+ * focused on the instance method, mirroring the pattern used in
+ * `getNativeProps.test.ts`.
+ */
+
+jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/appUtils"),
+  playerManager: {
+    getPlayerWithId: jest.fn(),
+  },
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/playerUtils/configurationUtils",
+  () => ({
+    parseLanguageTracks: jest.fn(),
+  })
+);
+
+import { parseLanguageTracks } from "@applicaster/zapp-react-native-utils/playerUtils/configurationUtils";
+
+const baseProps = {
+  entry: { id: "1", title: "Entry Title", summary: "Entry Summary" },
+  pluginConfiguration: {},
+  docked: false,
+  fullscreen: false,
+  inline: false,
+  isModal: false,
+  isTabletPortrait: false,
+  muted: false,
+  playerId: "player-1",
+  PlayerComponent: "QuickBrickDefaultPlayerView",
+} as unknown as ConstructorParameters<typeof VideoPlayer>[0];
+
+const audioTrack = { id: "en-audio", type: "audio" };
+const textTrack = { id: "en-text", type: "text" };
+
+/** Helper: call onTracksChanged with a mocked parseLanguageTracks result. */
+function callOnTracksChanged(
+  instance: VideoPlayer,
+  parsed: {
+    audioTracks?: { id: string; type: string }[];
+    textTracks?: { id: string; type: string }[];
+    audioTrackId?: string | undefined;
+    textTrackId?: string | undefined;
+  }
+) {
+  (parseLanguageTracks as jest.Mock).mockReturnValue({
+    audioTracks: [],
+    textTracks: [],
+    audioTrackId: undefined,
+    textTrackId: undefined,
+    ...parsed,
+  });
+
+  instance.onTracksChanged({ nativeEvent: {} });
+}
+
+describe("onTracksChanged — resolveReportedTrackId reconciliation", () => {
+  beforeEach(() => {
+    (playerManager.getPlayerWithId as jest.Mock).mockReturnValue(null);
+  });
+
+  it("sets audioTrackId and textTrackId when native reports real selections", () => {
+    const instance = new VideoPlayer(baseProps);
+    const setState = jest.spyOn(instance, "setState");
+
+    callOnTracksChanged(instance, {
+      audioTracks: [audioTrack],
+      textTracks: [textTrack],
+      audioTrackId: audioTrack.id,
+      textTrackId: textTrack.id,
+    });
+
+    expect(setState).toHaveBeenCalledWith(
+      expect.objectContaining({
+        audioTrackId: audioTrack.id,
+        textTrackId: textTrack.id,
+      }),
+      expect.any(Function)
+    );
+  });
+
+  it("does NOT clear audioTrackId when native transiently reports undefined and the track is still in the list", () => {
+    const instance = new VideoPlayer(baseProps);
+    // Establish prior selection state without a React reconciler.
+    instance.state = { ...instance.state, audioTrackId: audioTrack.id };
+
+    const setState = jest.spyOn(instance, "setState");
+
+    callOnTracksChanged(instance, {
+      audioTracks: [audioTrack],
+      textTracks: [],
+      audioTrackId: undefined, // transient native blip — nothing selected
+      textTrackId: undefined,
+    });
+
+    // State must NOT change because the resolved id equals the current id.
+    expect(setState).not.toHaveBeenCalled();
+  });
+
+  it("does NOT clear textTrackId when native transiently reports undefined and the track is still in the list", () => {
+    const instance = new VideoPlayer(baseProps);
+    instance.state = { ...instance.state, textTrackId: textTrack.id };
+
+    const setState = jest.spyOn(instance, "setState");
+
+    callOnTracksChanged(instance, {
+      audioTracks: [],
+      textTracks: [textTrack],
+      audioTrackId: undefined,
+      textTrackId: undefined,
+    });
+
+    expect(setState).not.toHaveBeenCalled();
+  });
+
+  it("clears the id when the previously-selected track is no longer present in the list", () => {
+    const instance = new VideoPlayer(baseProps);
+    instance.state = { ...instance.state, audioTrackId: audioTrack.id };
+
+    const setState = jest.spyOn(instance, "setState");
+
+    // Track is gone from the available list.
+    callOnTracksChanged(instance, {
+      audioTracks: [], // track not available anymore
+      textTracks: [],
+      audioTrackId: undefined,
+      textTrackId: undefined,
+    });
+
+    expect(setState).toHaveBeenCalledWith(
+      expect.objectContaining({ audioTrackId: null }),
+      expect.any(Function)
+    );
+  });
+
+  it("propagates a genuine track change to a different id", () => {
+    const newTrack = { id: "fr-audio", type: "audio" };
+    const instance = new VideoPlayer(baseProps);
+    instance.state = { ...instance.state, audioTrackId: audioTrack.id };
+
+    const setState = jest.spyOn(instance, "setState");
+
+    callOnTracksChanged(instance, {
+      audioTracks: [audioTrack, newTrack],
+      textTracks: [],
+      audioTrackId: newTrack.id,
+      textTrackId: undefined,
+    });
+
+    expect(setState).toHaveBeenCalledWith(
+      expect.objectContaining({ audioTrackId: newTrack.id }),
+      expect.any(Function)
+    );
+  });
+
+  it("calls the listener with resolved ids even when state does not change", () => {
+    const instance = new VideoPlayer(baseProps);
+    instance.state = { ...instance.state, audioTrackId: audioTrack.id };
+
+    const onTracksChangedListener = jest.fn();
+
+    (instance as any).props = {
+      ...instance.props,
+      listener: { onTracksChanged: onTracksChangedListener },
+    };
+
+    callOnTracksChanged(instance, {
+      audioTracks: [audioTrack],
+      textTracks: [],
+      audioTrackId: undefined, // transient blip
+      textTrackId: undefined,
+    });
+
+    // notifyListener is called with the resolved (non-null) audioTrackId
+    expect(onTracksChangedListener).toHaveBeenCalledWith(
+      expect.objectContaining({ audioTrackId: audioTrack.id })
+    );
+  });
+});

package/src/Player/index.tsx

@@ -148,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 & {
@@ -697,20 +729,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 }) => {