@applicaster/quick-brick-player 16.0.0-alpha.1334507601 → 16.0.0-alpha.1444784746

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "16.0.0-alpha.1334507601",
+  "version": "16.0.0-alpha.1444784746",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "16.0.0-rc.73",
+    "@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-alpha.1334507601",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1334507601",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1334507601",
+    "@applicaster/zapp-react-native-tvos-app": "16.0.0-alpha.1444784746",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1444784746",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1444784746",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/PlaylistNavigationController.ts

@@ -129,7 +129,17 @@ export class PlaylistNavigationController {
     try {
       const plugins = appStore?.get?.("plugins") || [];
       const queuePlugin = findPluginByIdentifier("queue-action", plugins, true);
-      const QueueManager = (queuePlugin as any)?.module?.QueueManager;
+      const module = (queuePlugin as any)?.module;
+      const QueueManager = module?.QueueManager;
+      const setupQuickBrickQueue = module?.setupQuickBrickQueue;
+
+      if (
+        QueueManager &&
+        !QueueManager.isInitialized?.() &&
+        typeof setupQuickBrickQueue === "function"
+      ) {
+        setupQuickBrickQueue();
+      }
 
       if (QueueManager?.isInitialized?.()) {
         return QueueManager.instance;
@@ -192,19 +202,15 @@ export class PlaylistNavigationController {
       return;
     }
 
-    const isPlayingFromQueue = Boolean(this.entry?.extensions?.queueItemId);
     const staticNextUrl = this.entry?.extensions?.play_next_feed_url;
     const staticPrevUrl = this.entry?.extensions?.play_previous_feed_url;
 
-    const hasNext = isPlayingFromQueue
-      ? upcoming.length > 0 || Boolean(staticNextUrl)
-      : Boolean(staticNextUrl) || upcoming.length > 0;
+    const hasNext = upcoming.length > 0 || Boolean(staticNextUrl);
 
     const canRestart = (this.playerState?.seekableDuration ?? 0) > 0;
 
-    const hasPrevious = isPlayingFromQueue
-      ? history.length > 0 || Boolean(staticPrevUrl) || canRestart
-      : Boolean(staticPrevUrl) || history.length > 0 || canRestart;
+    const hasPrevious =
+      history.length > 0 || Boolean(staticPrevUrl) || canRestart;
 
     if (this.hasNext$.getValue() !== hasNext) {
       this.hasNext$.next(hasNext);
@@ -227,9 +233,7 @@ export class PlaylistNavigationController {
 
       if (this.isDestroyed) return;
 
-      const isPlayingFromQueue = Boolean(this.entry?.extensions?.queueItemId);
-
-      if (isPlayingFromQueue && upcoming.length > 0) {
+      if (upcoming.length > 0) {
         const nextItem = upcoming[0];
 
         log_info(
@@ -259,20 +263,6 @@ export class PlaylistNavigationController {
         );
 
         this.navigator?.replaceTop?.(target);
-
-        return;
-      }
-
-      if (upcoming.length > 0) {
-        const nextItem = upcoming[0];
-
-        log_info(
-          `goNext: playing next item from queue "${nextItem.title}", id: ${nextItem.id}`,
-          { targetId: nextItem.id }
-        );
-
-        if (this.isDestroyed) return;
-        this.navigator?.replaceTop?.(nextItem);
       }
     } catch (error) {
       log_error("goNext: could not navigate to next entry", { error });
@@ -293,7 +283,6 @@ export class PlaylistNavigationController {
 
       if (this.isDestroyed) return;
 
-      const isPlayingFromQueue = Boolean(this.entry?.extensions?.queueItemId);
       const staticPrevUrl = this.entry?.extensions?.play_previous_feed_url;
 
       const currentTime = this.playerState?.currentTime ?? 0;
@@ -302,9 +291,7 @@ export class PlaylistNavigationController {
       const hasQueueHistory = history.length > 0;
       const hasStaticPrev = Boolean(staticPrevUrl);
 
-      const hasTarget = isPlayingFromQueue
-        ? hasQueueHistory || hasStaticPrev
-        : hasStaticPrev || hasQueueHistory;
+      const hasTarget = hasQueueHistory || hasStaticPrev;
 
       const shouldRestart =
         canRestart && (currentTime > RESTART_THRESHOLD_SECONDS || !hasTarget);
@@ -316,7 +303,7 @@ export class PlaylistNavigationController {
         return;
       }
 
-      if (isPlayingFromQueue && hasQueueHistory) {
+      if (hasQueueHistory) {
         const prevItem = history[history.length - 1];
 
         log_info(
@@ -344,20 +331,6 @@ export class PlaylistNavigationController {
         );
 
         this.navigator?.replaceTop?.(target);
-
-        return;
-      }
-
-      if (hasQueueHistory) {
-        const prevItem = history[history.length - 1];
-
-        log_info(
-          `goPrevious: playing previous item from queue "${prevItem.title}", id: ${prevItem.id}`,
-          { targetId: prevItem.id }
-        );
-
-        if (this.isDestroyed) return;
-        this.navigator?.replaceTop?.(prevItem);
       }
     } catch (error) {
       log_error("goPrevious: could not navigate to previous entry", { error });

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

@@ -380,7 +380,7 @@ describe("PlaylistNavigationController", () => {
       controller.destroy();
     });
 
-    it("prioritizes static feed URLs when entry is not from queue", async () => {
+    it("prioritizes queue navigation over static feed URLs even when entry is not from queue", async () => {
       const queueNextItem = { id: "queue_next" } as ZappEntry;
       const queuePrevItem = { id: "queue_prev" } as ZappEntry;
       const staticNextTarget = { id: "static_next" } as ZappEntry;
@@ -411,30 +411,28 @@ describe("PlaylistNavigationController", () => {
       });
 
       await controller.goNext();
-      expect(loadFeedEntryMock).toHaveBeenCalledWith(NEXT_URL, entry);
-      expect(navigator.replaceTop).toHaveBeenCalledWith(staticNextTarget);
+      expect(loadFeedEntryMock).not.toHaveBeenCalled();
+      expect(navigator.replaceTop).toHaveBeenCalledWith(queueNextItem);
 
       await controller.goPrevious();
-      expect(loadFeedEntryMock).toHaveBeenCalledWith(PREV_URL, entry);
-      expect(navigator.replaceTop).toHaveBeenCalledWith(staticPrevTarget);
+      expect(loadFeedEntryMock).not.toHaveBeenCalled();
+      expect(navigator.replaceTop).toHaveBeenCalledWith(queuePrevItem);
 
       controller.destroy();
     });
 
-    it("prioritizes queue navigation when entry is from queue (has queueItemId)", async () => {
-      const queueNextItem = { id: "queue_next" } as ZappEntry;
-      const queuePrevItem = { id: "queue_prev" } as ZappEntry;
+    it("falls back to static feed URLs when queue is empty", async () => {
+      const staticNextTarget = { id: "static_next" } as ZappEntry;
+      const staticPrevTarget = { id: "static_prev" } as ZappEntry;
 
-      mockQueueManager.instance.getUpcomingQueue.mockResolvedValue([
-        queueNextItem,
-      ]);
+      mockQueueManager.instance.getUpcomingQueue.mockResolvedValue([]);
+      mockQueueManager.instance.getHistoryQueue.mockResolvedValue([]);
 
-      mockQueueManager.instance.getHistoryQueue.mockResolvedValue([
-        queuePrevItem,
-      ]);
+      loadFeedEntryMock.mockImplementation((url) =>
+        Promise.resolve(url === NEXT_URL ? staticNextTarget : staticPrevTarget)
+      );
 
       const entry = entryWith({
-        queueItemId: "current_queue_slot",
         play_next_feed_url: NEXT_URL,
         play_previous_feed_url: PREV_URL,
       });
@@ -447,11 +445,12 @@ describe("PlaylistNavigationController", () => {
       });
 
       await controller.goNext();
-      expect(loadFeedEntryMock).not.toHaveBeenCalled();
-      expect(navigator.replaceTop).toHaveBeenCalledWith(queueNextItem);
+      expect(loadFeedEntryMock).toHaveBeenCalledWith(NEXT_URL, entry);
+      expect(navigator.replaceTop).toHaveBeenCalledWith(staticNextTarget);
 
       await controller.goPrevious();
-      expect(navigator.replaceTop).toHaveBeenCalledWith(queuePrevItem);
+      expect(loadFeedEntryMock).toHaveBeenCalledWith(PREV_URL, entry);
+      expect(navigator.replaceTop).toHaveBeenCalledWith(staticPrevTarget);
 
       controller.destroy();
     });

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 = {