@applicaster/zapp-react-native-ui-components 15.1.16-rc.0 → 15.1.16

package/Components/ModalComponent/AudioPlayer/Components/NowPlayingHeaderSection.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import {
   AudioPlayerTrackItem,
@@ -7,8 +7,9 @@ import {
 } from "./Item";
 import { AudioPlayerHeader, VARIANT_SECTION_HEADER } from "./Header";
 import type { MenuItem } from "@applicaster/zapp-react-native-utils/modalState/types";
-import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
+import type { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
 
 const DEFAULT_EMPTY_MESSAGE = "Queued items will be added here";
 
@@ -30,6 +31,27 @@ const styles = StyleSheet.create({
   },
 });
 
+const isPrimaryOrCastingPlayer = (player?: Player | null): boolean => {
+  if (!player) {
+    return false;
+  }
+
+  return (
+    player.playerRole === PlayerRole.Primary ||
+    player.playerRole === PlayerRole.Chromecast
+  );
+};
+
+const getTargetPlayer = (): Player | null => {
+  if (playerManager.isCasting()) {
+    return playerManager.getCastingReceiver() || null;
+  }
+
+  const active = playerManager.getActivePlayer();
+
+  return isPrimaryOrCastingPlayer(active) ? active : null;
+};
+
 type NowPlayingHeaderSectionProps = {
   onClear?: () => void;
   nextUpTitle?: string;
@@ -47,18 +69,100 @@ export function NowPlayingHeaderSection({
   emptyMessage = DEFAULT_EMPTY_MESSAGE,
   clearLabel,
 }: NowPlayingHeaderSectionProps) {
-  const player = usePlayer();
-  const playerState = usePlayerState("queue-now-playing-section");
+  const [activePlayer, setActivePlayer] = useState<Player | null>(
+    getTargetPlayer
+  );
+
+  const [currentEntry, setCurrentEntry] = useState<ZappEntry | null>(
+    () => getTargetPlayer()?.entry || null
+  );
+
+  const [isPaused, setIsPaused] = useState<boolean>(() =>
+    Boolean(getTargetPlayer()?.isPaused())
+  );
+
+  useEffect(() => {
+    const handleActivePlayerUpdate = () => {
+      const player = getTargetPlayer();
+
+      if (player) {
+        setActivePlayer(player);
+
+        if (player.entry) {
+          setCurrentEntry(player.entry);
+        }
+
+        setIsPaused(Boolean(player.isPaused()));
+      }
+    };
+
+    handleActivePlayerUpdate();
+
+    const removeLifecycle = playerManager.addLifecycleListener({
+      onRegistered: (registeredPlayer) => {
+        if (isPrimaryOrCastingPlayer(registeredPlayer)) {
+          handleActivePlayerUpdate();
+        }
+      },
+      onCastingChanged: handleActivePlayerUpdate,
+    });
+
+    return () => {
+      removeLifecycle?.();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!activePlayer) {
+      return;
+    }
+
+    const syncPlayerState = () => {
+      if (activePlayer.entry) {
+        setCurrentEntry(activePlayer.entry);
+      }
+
+      setIsPaused(Boolean(activePlayer.isPaused()));
+    };
+
+    syncPlayerState();
+
+    const removeListener = activePlayer.addListener({
+      id: "queue-now-playing-header",
+      listener: {
+        onPlayerPause: () => setIsPaused(true),
+        onPlayerResume: () => setIsPaused(false),
+        onVideoLoad: syncPlayerState,
+        onLoad: syncPlayerState,
+      },
+    });
+
+    return () => {
+      removeListener?.();
+    };
+  }, [activePlayer]);
+
+  const handlePlayPause = () => {
+    if (!activePlayer) {
+      return;
+    }
+
+    if (isPaused) {
+      activePlayer.play();
+      setIsPaused(false);
+    } else {
+      activePlayer.pause();
+      setIsPaused(true);
+    }
+  };
 
   const renderNowPlayingTrack = () => {
-    if (!player?.entry) {
+    if (!currentEntry) {
       return null;
     }
 
-    const mediaGroup = player.entry.media_group;
-
-    const imageGroup = Array.isArray(mediaGroup)
-      ? mediaGroup.find((g: any) => g.type === "image")
+    const imageGroup = Array.isArray(currentEntry.media_group)
+      ? currentEntry.media_group.find((g: any) => g.type === "image")
       : null;
 
     const firstImage = Array.isArray(imageGroup?.media_item)
@@ -66,26 +170,18 @@ export function NowPlayingHeaderSection({
       : imageGroup?.media_item?.src;
 
     const nowPlayingItem: MenuItem = {
-      id: String(player.entry.id ?? "now_playing"),
-      title: (player.entry.title as string) || String(player.entry.id),
-      summary: (player.entry.summary as string) ?? "",
+      id: String(currentEntry.id ?? "now_playing"),
+      title: (currentEntry.title as string) || String(currentEntry.id),
+      summary: (currentEntry.summary as string) ?? "",
       icon: firstImage,
     };
 
     const data = mapMenuItemToNowPlayingData(
       nowPlayingItem,
-      playerState?.isPaused,
+      isPaused,
       nowPlayingTitle
     );
 
-    const handlePlayPause = () => {
-      if (playerState?.isPaused) {
-        player?.play();
-      } else {
-        player?.pause();
-      }
-    };
-
     return (
       <AudioPlayerTrackItem
         configuration={VARIANT_NOW_PLAYING}

package/Components/ModalComponent/SortableList.tsx

@@ -87,9 +87,7 @@ export const SortableList = ({
   const [localData, setLocalData] = useState(sortableData);
 
   useEffect(() => {
-    setLocalData((localData) =>
-      localData !== sortableData ? sortableData : localData
-    );
+    setLocalData(sortableData);
   }, [sortableData]);
 
   const handleDragEnd = useCallback(
@@ -142,6 +140,7 @@ export const SortableList = ({
     >
       {renderHeader}
       <Sortable.Grid
+        key={`sortable-grid-${localData.length}`}
         scrollableRef={scrollableRef}
         customHandle
         columns={columns}

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -403,10 +403,17 @@ const PlayerContainerComponent = (props: Props) => {
         const { eventType } = event;
 
         if (!isLanguageOverlayVisible && eventType === "menu") {
+          // First Back dismisses Play Next, the next one closes the player
+          if (playNextOverlayState) {
+            playNextOverlayState.handleUserCancelPlayNext();
+
+            return;
+          }
+
           close();
         }
       },
-    [close]
+    [close, playNextOverlayState]
   );
 
   // Effects

package/Components/River/TV/withTVEventHandler.tsx

@@ -12,6 +12,12 @@ export const withTvEventHandler = (Component) => {
     const isStandaloneFullscreen = useIsStandaloneFullscreen();
 
     const remoteHandler = (event) => {
+      // A nested River (e.g. a ScreenPicker tab) shares the screen with its parent
+      // River, which already handles Back. Handling it here too would go back twice.
+      if (props.isInsideContainer) {
+        return;
+      }
+
       const { eventType } = event;
 
       const canGoBack = navigator.canGoBack();

package/Components/Transitioner/Transitioner.tsx

@@ -129,8 +129,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
    * The last scene in the array is removed in the "backTransitionEnd" callback,
    * only after the animation is complete.
    */
-  backTransitionStart() {
-    const previousRoute = this.props.navigator?.currentRoute;
+  backTransitionStart(previousRoute: string) {
     const currentRoute = this.props.navigator?.currentRoute;
 
     const diffLengthRoutes =
@@ -242,7 +241,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           break;
 
         case NAV_ACTION_BACK: {
-          this.backTransitionStart();
+          this.backTransitionStart(previousRoute);
           break;
         }
 

package/Components/Transitioner/__tests__/transitioner.test.js

@@ -1,8 +1,13 @@
 import React from "react";
 import { Text, View } from "react-native";
 
-import { TransitionerComponent } from "../Transitioner";
-import { render } from "@testing-library/react-native";
+import { AnimationManager } from "../AnimationManager";
+import {
+  NAV_ACTION_BACK,
+  NAV_ACTION_PUSH,
+  TransitionerComponent,
+} from "../Transitioner";
+import { act, render } from "@testing-library/react-native";
 
 jest.mock("../Scene", () => {
   const View = jest.requireActual("react-native").View;
@@ -40,6 +45,27 @@ const transitionerComponentProps = {
 
 jest.mock("uuid");
 
+const sceneTransitionConfig = () => ({
+  push: {
+    duration: 0,
+    easing: jest.fn(),
+    from: { style: {} },
+    to: { style: {} },
+  },
+  back: {
+    duration: 0,
+    easing: jest.fn(),
+    from: { style: {} },
+    to: { style: {} },
+  },
+});
+
+const sceneFor = (route) => (
+  <View pathname={route}>
+    <Text>{route}</Text>
+  </View>
+);
+
 describe("<TransitionerComponent />", () => {
   it("renders correctly", () => {
     const wrapper = render(
@@ -50,4 +76,59 @@ describe("<TransitionerComponent />", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it("removes both intermediate scenes when backing out to the tab root", () => {
+    jest
+      .spyOn(AnimationManager.prototype, "animate")
+      .mockImplementation((_, done) => done());
+
+    const ref = React.createRef();
+    const root = "/river/root";
+    const child = `${root}/river/child`;
+    const grandchild = `${child}/river/grandchild`;
+
+    const propsFor = (route, previousAction) => ({
+      navigator: {
+        previousAction,
+        currentRoute: route,
+        screenData: {},
+      },
+      transitionConfig: sceneTransitionConfig,
+      layoutData: {
+        isTablet: false,
+        isTabletPortrait: false,
+      },
+      children: sceneFor(route),
+    });
+
+    const { rerender } = render(
+      <TransitionerComponent ref={ref} {...propsFor(root, "REPLACE")} />
+    );
+
+    act(() => {
+      rerender(
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(child, NAV_ACTION_PUSH)}
+        />
+      );
+    });
+
+    act(() => {
+      rerender(
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(grandchild, NAV_ACTION_PUSH)}
+        />
+      );
+    });
+
+    act(() => {
+      rerender(
+        <TransitionerComponent ref={ref} {...propsFor(root, NAV_ACTION_BACK)} />
+      );
+    });
+
+    expect(ref.current.state.scenes.map((scene) => scene.key)).toEqual([root]);
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.1.16-rc.0",
+  "version": "15.1.16",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.1.16-rc.0",
-    "@applicaster/zapp-react-native-bridge": "15.1.16-rc.0",
-    "@applicaster/zapp-react-native-redux": "15.1.16-rc.0",
-    "@applicaster/zapp-react-native-utils": "15.1.16-rc.0",
+    "@applicaster/applicaster-types": "15.1.16",
+    "@applicaster/zapp-react-native-bridge": "15.1.16",
+    "@applicaster/zapp-react-native-redux": "15.1.16",
+    "@applicaster/zapp-react-native-utils": "15.1.16",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",