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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "16.0.0-rc.100",
+  "version": "16.0.0-rc.101",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "16.0.0-rc.93",
     "@applicaster/quick-brick-tv-transport-controls": "16.0.0-rc.69",
-    "@applicaster/zapp-react-native-tvos-app": "16.0.0-rc.100",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.100",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.100",
+    "@applicaster/zapp-react-native-tvos-app": "16.0.0-rc.101",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.101",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.101",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/__tests__/usePlaylistNavigation.test.ts

@@ -2,8 +2,12 @@ import { renderHook, act } from "@testing-library/react-native";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { loadFeedEntry } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/utils";
+import { RemoteCommand } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 
-import { usePlaylistNavigation } from "../usePlaylistNavigation";
+import {
+  getTransportControls,
+  usePlaylistNavigation,
+} from "../usePlaylistNavigation";
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useNavigation: jest.fn(),
@@ -24,6 +28,13 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand",
+  () => ({
+    PlayerNativeCommandTypes: { setPlayerControls: "setPlayerControls" },
+  })
+);
+
 const useNavigationMock = useNavigation as jest.Mock;
 const loadFeedEntryMock = loadFeedEntry as jest.Mock;
 const usePlayerMock = usePlayer as jest.Mock;
@@ -384,4 +395,145 @@ describe("usePlaylistNavigation", () => {
       expect(loadFeedEntryMock).not.toHaveBeenCalled();
     });
   });
+
+  describe("remote commands", () => {
+    let listeners: Record<string, QuickBrickPlayer.SharedPlayerCallBacks>;
+    const command = jest.fn();
+
+    const remote = (id: RemoteCommand) =>
+      act(async () => {
+        Object.values(listeners).forEach((l) => l.onRemoteCommand?.({ id }));
+      });
+
+    beforeEach(() => {
+      listeners = {};
+      command.mockClear();
+
+      usePlayerMock.mockReturnValue({
+        playerId: "player-1",
+        command,
+        seekTo,
+        addListener: ({ id, listener }) => {
+          listeners[id] = listener;
+
+          return () => delete listeners[id];
+        },
+      });
+    });
+
+    it("plays next when the lock screen / CarPlay next button is pressed", async () => {
+      const target = { id: "next" } as ZappEntry;
+      loadFeedEntryMock.mockResolvedValue(target);
+
+      await renderPlaylistNavigation(
+        entryWith({ play_next_feed_url: NEXT_URL }),
+        stateAt(0)
+      );
+
+      await remote(RemoteCommand.NextTrack);
+
+      expect(replaceTop).toHaveBeenCalledWith(target);
+    });
+
+    it("restarts the track on remote previous past the threshold", async () => {
+      await renderPlaylistNavigation(entryWith({}), stateAt(10));
+
+      await remote(RemoteCommand.PreviousTrack);
+
+      expect(seekTo).toHaveBeenCalledWith(0);
+    });
+
+    it("ignores commands native handles itself", async () => {
+      await renderPlaylistNavigation(
+        entryWith({ play_next_feed_url: NEXT_URL }),
+        stateAt(10)
+      );
+
+      await remote(RemoteCommand.Pause);
+
+      expect(replaceTop).not.toHaveBeenCalled();
+      expect(seekTo).not.toHaveBeenCalled();
+    });
+
+    it("sends native the controls snapshot to show", async () => {
+      await renderPlaylistNavigation(
+        entryWith({ play_next_feed_url: NEXT_URL }),
+        stateAt(0, NOT_SEEKABLE)
+      );
+
+      expect(command).toHaveBeenLastCalledWith("setPlayerControls", {
+        transport: [
+          RemoteCommand.Play,
+          RemoteCommand.Pause,
+          RemoteCommand.SkipBackward,
+          RemoteCommand.NextTrack,
+        ],
+      });
+    });
+
+    it("stops listening once unmounted", async () => {
+      const { unmount } = await renderPlaylistNavigation(
+        entryWith({ play_next_feed_url: NEXT_URL }),
+        stateAt(0)
+      );
+
+      unmount();
+
+      expect(listeners).toEqual({});
+    });
+  });
+});
+
+describe("getTransportControls", () => {
+  it("falls back to skip backward and leaves next out when there is no playlist", () => {
+    expect(
+      getTransportControls({
+        hasNext: false,
+        hasPrevious: false,
+        isLive: false,
+      })
+    ).toEqual([
+      RemoteCommand.Play,
+      RemoteCommand.Pause,
+      RemoteCommand.SkipBackward,
+    ]);
+  });
+
+  it("leaves next out without a next item, so it shows disabled", () => {
+    expect(
+      getTransportControls({ hasNext: false, hasPrevious: true, isLive: false })
+    ).toEqual([
+      RemoteCommand.Play,
+      RemoteCommand.Pause,
+      RemoteCommand.PreviousTrack,
+    ]);
+  });
+
+  it("puts track buttons in place of skip ones", () => {
+    expect(
+      getTransportControls({ hasNext: true, hasPrevious: true, isLive: false })
+    ).toEqual([
+      RemoteCommand.Play,
+      RemoteCommand.Pause,
+      RemoteCommand.PreviousTrack,
+      RemoteCommand.NextTrack,
+    ]);
+  });
+
+  it("uses stop and never skips on live", () => {
+    expect(
+      getTransportControls({ hasNext: false, hasPrevious: false, isLive: true })
+    ).toEqual([RemoteCommand.Play, RemoteCommand.Stop]);
+  });
+
+  it("keeps track buttons on live, e.g. a list of radio stations", () => {
+    expect(
+      getTransportControls({ hasNext: true, hasPrevious: true, isLive: true })
+    ).toEqual([
+      RemoteCommand.Play,
+      RemoteCommand.Stop,
+      RemoteCommand.PreviousTrack,
+      RemoteCommand.NextTrack,
+    ]);
+  });
 });

package/src/Player/AudioLayer/usePlaylistNavigation.ts

@@ -2,8 +2,45 @@ import * as React from "react";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
+import { PlayerNativeCommandTypes } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
+import { RemoteCommand } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 import { PlaylistNavigationController } from "./PlaylistNavigationController";
 
+const REMOTE_COMMANDS_LISTENER_ID = "playlist-navigation-remote-commands";
+
+/**
+ * Buttons native should expose on the lock screen / Control Center / CarPlay.
+ * Native enables exactly these and disables the rest. A track button takes its
+ * slot over the skip one, since the system shows only one of them per side.
+ * Without a next item next is left out, so the system shows it disabled.
+ */
+export const getTransportControls = ({
+  hasNext,
+  hasPrevious,
+  isLive,
+}: {
+  hasNext: boolean;
+  hasPrevious: boolean;
+  isLive: boolean;
+}): RemoteCommand[] => {
+  const commands = [
+    RemoteCommand.Play,
+    isLive ? RemoteCommand.Stop : RemoteCommand.Pause,
+  ];
+
+  if (hasPrevious) {
+    commands.push(RemoteCommand.PreviousTrack);
+  } else if (!isLive) {
+    commands.push(RemoteCommand.SkipBackward);
+  }
+
+  if (hasNext) {
+    commands.push(RemoteCommand.NextTrack);
+  }
+
+  return commands;
+};
+
 export type PlaylistNavigation = {
   hasNext: boolean;
   hasPrevious: boolean;
@@ -57,6 +94,41 @@ export const usePlaylistNavigation = (
     };
   }, [controller]);
 
+  // Lock screen / Control Center / CarPlay next & previous go through the same
+  // controller as the on-screen buttons, so JS stays the single source of truth.
+  React.useEffect(
+    () =>
+      player?.addListener?.({
+        id: REMOTE_COMMANDS_LISTENER_ID,
+        listener: {
+          onRemoteCommand: ({ id }) => {
+            if (id === RemoteCommand.NextTrack) {
+              controller.goNext();
+            } else if (id === RemoteCommand.PreviousTrack) {
+              controller.goPrevious();
+            }
+          },
+        },
+      }),
+    [player, controller]
+  );
+
+  const isLive = Boolean(playerState?.isLive);
+
+  // Full snapshot: native renders exactly this and drops the rest. Each key is
+  // one kind of buttons, so they stay separate lists rather than one flat list.
+  React.useEffect(() => {
+    const controls = {
+      transport: getTransportControls({ hasNext, hasPrevious, isLive }),
+      // TODO: other button kinds go in as their own keys next to `transport`,
+      // e.g. custom / native-drawn buttons ("play next", CarPlay / Android Auto
+      // row buttons). Add a composer on Player once more than this hook fills it.
+      // actions: [],
+    };
+
+    player?.command?.(PlayerNativeCommandTypes.setPlayerControls, controls);
+  }, [player, hasNext, hasPrevious, isLive]);
+
   const goNext = React.useCallback(
     async () => controller.goNext(),
     [controller]

package/src/Player/index.tsx

@@ -398,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;
 
@@ -535,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);
@@ -1069,6 +1089,7 @@ export default class VideoPlayer extends React.Component<
       onPlayerResume: this.onPlayerResume,
       onPlayerSeekComplete: this.onPlayerSeekComplete,
       onPlayerSeekStart: this.onPlayerSeekStart,
+      onRemoteCommand: this.onRemoteCommand,
     };
 
     const lifecycleEvents = {