@applicaster/quick-brick-player 16.0.0-rc.59 → 16.0.0-rc.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "16.0.0-rc.59",
+  "version": "16.0.0-rc.60",
   "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.52",
-    "@applicaster/quick-brick-tv-transport-controls": "16.0.0-rc.52",
-    "@applicaster/zapp-react-native-tvos-app": "16.0.0-rc.59",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.59",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.59",
+    "@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-rc.60",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.60",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.60",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { StyleSheet, Text, TextStyle, View } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { usePlayerContent } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent";
 
 type AudioDescriptionProps = {
-  title: string | number;
-  summary: string | number;
   layoutState: {
     inline: boolean;
     docked: boolean;
@@ -96,17 +95,48 @@ const getSummaryStyles = (value: GetValue, prefix: string): TextStyle =>
     }),
   }) as const;
 
-const getHeight = (titleLineHeight: number, subtitleLineHeight) =>
-  titleLineHeight * TITLE_LINES + subtitleLineHeight + TITLE_PADDING_BOTTOM;
+const getHeight = ({
+  showTitle,
+  showSummary,
+  titleLineHeight,
+  subtitleLineHeight,
+}: {
+  showTitle: boolean;
+  showSummary: boolean;
+  titleLineHeight: number;
+  subtitleLineHeight: number;
+}) => {
+  const titleHeight = showTitle
+    ? titleLineHeight * TITLE_LINES + TITLE_PADDING_BOTTOM
+    : 0;
+
+  const summaryHeight = showSummary ? subtitleLineHeight : 0;
+
+  return titleHeight + summaryHeight;
+};
 
 export const AudioDescription = (props: AudioDescriptionProps) => {
-  const { title, summary, layoutState, value, maxWidth } = props;
+  const { layoutState, value, maxWidth } = props;
+  const { title, summary } = usePlayerContent();
   const prefix = layoutState.docked ? "docked_player_" : "";
 
   const summaryStyles = getSummaryStyles(value, prefix);
   const titleStyles = getTitleStyles(value, prefix);
 
-  const height = getHeight(titleStyles.lineHeight, summaryStyles.lineHeight);
+  // Both depend on the Studio toggle alone, never on whether the text has
+  // arrived yet. Live audio resolves its title/summary asynchronously (the
+  // channel feed is polled after playback starts), so gating on the value
+  // would collapse the row on first render and expand it a second later -
+  // the control has to hold its place and render an empty line instead.
+  const showTitle = Boolean(value(`${prefix}title`));
+  const showSummary = Boolean(value(`${prefix}subtitle`));
+
+  const height = getHeight({
+    showTitle,
+    showSummary,
+    titleLineHeight: titleStyles.lineHeight,
+    subtitleLineHeight: summaryStyles.lineHeight,
+  });
 
   return (
     <View
@@ -118,15 +148,20 @@ export const AudioDescription = (props: AudioDescriptionProps) => {
         },
       ]}
     >
-      <Text style={[styles.titleText, titleStyles]} numberOfLines={TITLE_LINES}>
-        {title}
-      </Text>
-      {summary ? (
+      {showTitle ? (
+        <Text
+          style={[styles.titleText, titleStyles]}
+          numberOfLines={TITLE_LINES}
+        >
+          {title ?? ""}
+        </Text>
+      ) : null}
+      {showSummary ? (
         <Text
           style={[styles.summaryText, summaryStyles]}
           numberOfLines={SUBTITLE_LINES}
         >
-          {summary}
+          {summary ?? ""}
         </Text>
       ) : null}
     </View>

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -12,7 +12,6 @@ import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { formatSpeed } from "./utils";
-import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { DEFAULT_SPEED, PlaybackSpeed, SpeedController } from "./SpeedManager";
 import {
@@ -83,11 +82,27 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playNextData = null,
   } = props;
 
-  const { title, summary } = useTitleSummaryOverlay(
-    entry,
-    playerState?.isLive,
-    configuration?.audio_live_player_update_interval
-  );
+  // For live audio the programme changes while the entry stays the same, so
+  // the player polls the channel's programme feed and republishes its content.
+  // Everything about that - whether the content is live at all, where the feed
+  // lives, how often to poll - is decided by `OverlaysObserver`, which loads
+  // the feed without React. This effect owns only the lifecycle: keep the
+  // metadata fresh while this player is mounted. Consumers read the result
+  // through `usePlayerContent` like any other player content.
+  React.useEffect(() => {
+    if (!player) {
+      return;
+    }
+
+    const observer = player.getOverlayObservable();
+
+    observer.startLiveContentUpdates();
+
+    return () => observer.stopLiveContentUpdates();
+    // Keyed on the entry's id rather than the object: starting the updates
+    // fires an immediate request, so a re-created `entry` prop with identical
+    // contents would re-fetch the feed on every render.
+  }, [player, playerState?.isLive, entry?.id]);
 
   const [speedManager, setSpeedManager] = useState<SpeedController | null>(
     null
@@ -259,8 +274,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
           configuration={configuration}
           dimensions={dimensions}
           playNextData={playNextData}
-          title={title}
-          summary={summary}
         />
       </View>
     </SafeAreaView>

package/src/Player/AudioLayer/Layout/Controls/__tests__/utils.test.ts

@@ -0,0 +1,66 @@
+import {
+  nextTrackButton,
+  previousTrackButton,
+  usesPlaylistControls,
+} from "../utils";
+
+describe("usesPlaylistControls", () => {
+  const configuredAs = (layout?: unknown): GetValue =>
+    ((key: string) =>
+      key === "player_controls_layout" ? layout : null) as unknown as GetValue;
+
+  it("opts in only for the playlist controls value", () => {
+    expect(usesPlaylistControls(configuredAs("playlist_controls"))).toBe(true);
+  });
+
+  it("keeps the original controls for the default value", () => {
+    expect(
+      usesPlaylistControls(configuredAs("playback_speed_and_sleep_timer"))
+    ).toBe(false);
+  });
+
+  it.each([
+    ["an undeclared key", undefined],
+    ["a null value", null],
+    ["an empty string", ""],
+    ["an unrecognised value", "something_else"],
+  ])("keeps the original controls for %s", (_label, layout) => {
+    expect(usesPlaylistControls(configuredAs(layout))).toBe(false);
+  });
+});
+
+describe("track control buttons", () => {
+  it("builds a previous button using the previous_track icon", () => {
+    const onPress = jest.fn();
+
+    expect(previousTrackButton({ isTablet: false, onPress })).toMatchObject({
+      size: "small",
+      icon: "previous_track",
+      onPress,
+    });
+  });
+
+  it("builds a next button using the next_track icon", () => {
+    const onPress = jest.fn();
+
+    expect(nextTrackButton({ isTablet: false, onPress })).toMatchObject({
+      size: "small",
+      icon: "next_track",
+      onPress,
+    });
+  });
+
+  it("propagates the disabled flag", () => {
+    expect(
+      nextTrackButton({ isTablet: false, onPress: jest.fn(), disabled: true })
+    ).toMatchObject({ disabled: true });
+
+    expect(
+      previousTrackButton({
+        isTablet: false,
+        onPress: jest.fn(),
+        disabled: true,
+      })
+    ).toMatchObject({ disabled: true });
+  });
+});

package/src/Player/AudioLayer/Layout/Controls/index.tsx

@@ -15,14 +15,18 @@ import { VerticalGutter } from "./VerticalGutter";
 
 import {
   forwardButton,
+  nextTrackButton,
   playbackButton,
+  previousTrackButton,
   rewindButton,
   skipToLiveButton,
   skipToStartButton,
   sleepButton,
   speedButton,
+  usesPlaylistControls,
 } from "./utils";
 import { useSleepTimerModal } from "../../useSleepTimerModal";
+import { usePlaylistNavigation } from "../../usePlaylistNavigation";
 
 const styles = StyleSheet.create({
   flex: {
@@ -58,8 +62,6 @@ type Props = {
   layoutState: QuickBrickPlayer.LayoutState;
   playerState: QuickBrickPlayer.PlayerState;
   value: GetValue;
-  title: string | number;
-  summary: string | number;
 
   playbackSpeedName: string;
 
@@ -82,8 +84,6 @@ export const Controls = (props: Props) => {
     layoutState,
     playerState,
     value,
-    title,
-    summary,
 
     playbackSpeedName,
 
@@ -101,6 +101,13 @@ export const Controls = (props: Props) => {
     playerManager.getActivePlayer()
   );
 
+  const { hasNext, hasPrevious, goNext, goPrevious } = usePlaylistNavigation(
+    entry,
+    playerState
+  );
+
+  const isPlaylistControlsLayout = usesPlaylistControls(value);
+
   const timerRemaining =
     sleepTimerState.timerDate !== 0 && +sleepTimerState.timerDate > Date.now()
       ? sleepTimerState.timerDate
@@ -197,6 +204,22 @@ export const Controls = (props: Props) => {
       return [skipToStart, rewind, play, forward, skipToLive];
     }
 
+    if (isPlaylistControlsLayout) {
+      const previous = previousTrackButton({
+        isTablet,
+        onPress: goPrevious,
+        disabled: !hasPrevious,
+      });
+
+      const next = nextTrackButton({
+        isTablet,
+        onPress: goNext,
+        disabled: !hasNext,
+      });
+
+      return [previous, rewind, play, forward, next];
+    }
+
     return [speed, rewind, play, forward, sleep];
   }, [
     playerState,
@@ -214,6 +237,11 @@ export const Controls = (props: Props) => {
     playbackSleepName,
     controller,
     isLiveShowFullControls,
+    isPlaylistControlsLayout,
+    hasNext,
+    hasPrevious,
+    goNext,
+    goPrevious,
   ]);
 
   return (
@@ -221,8 +249,6 @@ export const Controls = (props: Props) => {
       <VerticalGutter />
 
       <AudioDescription
-        title={title}
-        summary={summary}
         value={value}
         layoutState={layoutState}
         maxWidth={maxWidth}

package/src/Player/AudioLayer/Layout/Controls/utils.ts

@@ -103,3 +103,29 @@ export const speedButton = (props: ButtonsProps): ControlsButton =>
 
 export const sleepButton = (props: ButtonsProps): ControlsButton =>
   sleepButtonByName(props);
+
+// Opt-in: a player plugin that does not declare this key returns undefined,
+// which has to read as the default rather than as an opt-in.
+export const usesPlaylistControls = (value: GetValue): boolean =>
+  value("player_controls_layout") === "playlist_controls";
+
+type TrackButtonProps = ButtonsProps & { disabled?: boolean };
+
+const trackButtonByName = ({
+  name,
+  onPress,
+  style,
+  disabled,
+}: TrackButtonProps & { name: string }): ControlsButton => ({
+  size: "small",
+  icon: name,
+  onPress,
+  style,
+  disabled,
+});
+
+export const previousTrackButton = (props: TrackButtonProps): ControlsButton =>
+  trackButtonByName({ ...props, name: "previous_track" });
+
+export const nextTrackButton = (props: TrackButtonProps): ControlsButton =>
+  trackButtonByName({ ...props, name: "next_track" });

package/src/Player/AudioLayer/Layout/DockedControls/index.tsx

@@ -18,7 +18,6 @@ import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Compo
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
-import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
@@ -200,12 +199,6 @@ export const DockedControls = (props: Props) => {
     [...Object.values(configuration), playerState.seekableDuration]
   );
 
-  const { title, summary } = useTitleSummaryOverlay(
-    entry,
-    playerState?.isLive,
-    configuration?.audio_live_player_update_interval
-  );
-
   const isTablet = useIsTablet();
 
   const liveButton = Boolean(value("live_badge_enabled"));
@@ -261,11 +254,6 @@ export const DockedControls = (props: Props) => {
     };
   }, [bottomTabsVisible, insets.bottom]);
 
-  const contentInfoContent = React.useMemo(
-    () => ({ ...entry, title, summary }),
-    [title, summary, entry]
-  );
-
   return (
     <>
       <View
@@ -297,7 +285,7 @@ export const DockedControls = (props: Props) => {
               testID="content-info"
               style={[styles.contentInfo, backgroundColorStyle]}
             >
-              <ContentInfo content={contentInfoContent} value={value} docked />
+              <ContentInfo value={value} docked />
             </View>
           </View>
           <View

package/src/Player/AudioLayer/Layout/MobileLayout.tsx

@@ -78,8 +78,6 @@ export function MobileLayout({
   onSpeedButtonPress,
   playbackSpeedName,
   configuration,
-  title,
-  summary,
 }: Props) {
   const { docked } = layoutState;
 
@@ -165,8 +163,6 @@ export function MobileLayout({
             layoutState={layoutState}
             playerState={playerState}
             value={value}
-            title={title}
-            summary={summary}
             playbackSpeedName={playbackSpeedName}
             onPlaybackButtonPress={onPlaybackButtonPress}
             onRewindButtonPress={onRewindButtonPress}

package/src/Player/AudioLayer/Layout/TabletLandscapeLayout.tsx

@@ -75,8 +75,6 @@ export function TabletLandscapeLayout({
   onSpeedButtonPress,
   playbackSpeedName,
   configuration,
-  title,
-  summary,
 }: Props) {
   const [imageWidth, setImageWidth] = React.useState(0);
   const { docked } = layoutState;
@@ -132,8 +130,6 @@ export function TabletLandscapeLayout({
               layoutState={layoutState}
               playerState={playerState}
               value={value}
-              title={title}
-              summary={summary}
               playbackSpeedName={playbackSpeedName}
               onPlaybackButtonPress={onPlaybackButtonPress}
               onRewindButtonPress={onRewindButtonPress}

package/src/Player/AudioLayer/Layout/TabletPortraitLayout.tsx

@@ -81,8 +81,6 @@ export function TabletPortraitLayout({
   onSpeedButtonPress,
   playbackSpeedName,
   configuration,
-  title,
-  summary,
 }: Props) {
   const { docked } = layoutState;
 
@@ -157,8 +155,6 @@ export function TabletPortraitLayout({
               layoutState={layoutState}
               playerState={playerState}
               value={value}
-              title={title}
-              summary={summary}
               playbackSpeedName={playbackSpeedName}
               onPlaybackButtonPress={onPlaybackButtonPress}
               onRewindButtonPress={onRewindButtonPress}

package/src/Player/AudioLayer/__tests__/AudioDescription.test.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { AudioDescription } from "../AudioDescription";
+
+// `title`/`summary` come from the player manager's content channel rather than
+// from props or context, so the hook is mocked here. Read lazily inside the
+// factory: `jest.mock` is hoisted above the `let`, so capturing eagerly would
+// freeze it at `undefined`.
+let mockContent: {
+  title: Option<string | number>;
+  summary: Option<string | number>;
+} = { title: "A Title", summary: "A Summary" };
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent",
+  () => ({ usePlayerContent: () => mockContent })
+);
+
+beforeEach(() => {
+  mockContent = { title: "A Title", summary: "A Summary" };
+});
+
+const layoutState = { inline: false, docked: false, isModal: true };
+
+const valueFrom =
+  (config: Record<string, unknown>): GetValue =>
+  (key: string) =>
+    (config[key] ?? null) as never;
+
+const renderDescription = (
+  config: Record<string, unknown>,
+  state = layoutState
+) =>
+  render(
+    <AudioDescription
+      layoutState={state}
+      value={valueFrom(config)}
+      maxWidth={400}
+    />
+  );
+
+// The wrapper's style prop is an array, so flatten before reading height.
+const wrapperHeight = (tree) =>
+  StyleSheet.flatten(tree.toJSON().props.style).height;
+
+describe("AudioDescription", () => {
+  it("renders both texts when both toggles are on", () => {
+    const { queryByText } = renderDescription({ title: true, subtitle: true });
+
+    expect(queryByText("A Title")).toBeTruthy();
+    expect(queryByText("A Summary")).toBeTruthy();
+  });
+
+  it("hides the title when the title toggle is off", () => {
+    const { queryByText } = renderDescription({ title: false, subtitle: true });
+
+    expect(queryByText("A Title")).toBeNull();
+    expect(queryByText("A Summary")).toBeTruthy();
+  });
+
+  it("hides the summary when the subtitle toggle is off", () => {
+    const { queryByText } = renderDescription({ title: true, subtitle: false });
+
+    expect(queryByText("A Title")).toBeTruthy();
+    expect(queryByText("A Summary")).toBeNull();
+  });
+
+  it("renders neither text when both toggles are off", () => {
+    const { queryByText } = renderDescription({
+      title: false,
+      subtitle: false,
+    });
+
+    expect(queryByText("A Title")).toBeNull();
+    expect(queryByText("A Summary")).toBeNull();
+  });
+
+  it("reserves no height when both toggles are off", () => {
+    const tree = renderDescription({ title: false, subtitle: false });
+
+    expect(wrapperHeight(tree)).toBe(0);
+  });
+
+  it("reserves less height when the title is hidden than when it is shown", () => {
+    const withTitle = renderDescription({ title: true, subtitle: true });
+    const withoutTitle = renderDescription({ title: false, subtitle: true });
+
+    expect(wrapperHeight(withoutTitle)).toBeLessThan(wrapperHeight(withTitle));
+  });
+
+  it("reserves less height when the subtitle is hidden than when it is shown", () => {
+    const withSubtitle = renderDescription({ title: true, subtitle: true });
+    const withoutSubtitle = renderDescription({ title: true, subtitle: false });
+
+    expect(wrapperHeight(withoutSubtitle)).toBeLessThan(
+      wrapperHeight(withSubtitle)
+    );
+  });
+
+  it("reads the docked toggle keys when docked", () => {
+    const { queryByText } = renderDescription(
+      { docked_player_title: true, docked_player_subtitle: false },
+      { ...layoutState, docked: true }
+    );
+
+    expect(queryByText("A Title")).toBeTruthy();
+    expect(queryByText("A Summary")).toBeNull();
+  });
+
+  /**
+   * Live audio resolves its text asynchronously: the channel feed is polled
+   * after playback starts, so the first render has no programme title yet. The
+   * row must hold its place across that transition instead of collapsing and
+   * expanding a second later.
+   */
+  describe("layout stability while the text is still missing", () => {
+    it("reserves the same height with and without text", () => {
+      const withText = renderDescription({ title: true, subtitle: true });
+
+      mockContent = { title: null, summary: null };
+
+      const withoutText = renderDescription({ title: true, subtitle: true });
+
+      expect(wrapperHeight(withoutText)).toBe(wrapperHeight(withText));
+    });
+
+    it("still renders both rows when the text has not arrived", () => {
+      mockContent = { title: null, summary: null };
+
+      const tree = renderDescription({ title: true, subtitle: true });
+
+      expect(wrapperHeight(tree)).toBeGreaterThan(0);
+    });
+
+    it("reserves height for the summary even when only the summary is missing", () => {
+      const withSummary = renderDescription({ title: true, subtitle: true });
+
+      mockContent = { title: "A Title", summary: null };
+
+      const withoutSummary = renderDescription({ title: true, subtitle: true });
+
+      expect(wrapperHeight(withoutSummary)).toBe(wrapperHeight(withSummary));
+    });
+  });
+});