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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "16.0.0-rc.6",
+  "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.2",
-    "@applicaster/quick-brick-tv-transport-controls": "16.0.0-rc.2",
-    "@applicaster/zapp-react-native-tvos-app": "16.0.0-rc.6",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.6",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.6",
+    "@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,24 +12,17 @@ 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 {
-  getBottomSheetModalDefaultItemIcon,
-  getBottomSheetModalIconProps,
-  getBottomSheetModalItemProps,
-  getBottomSheetModalLabelProps,
-  getBottomSheetModalSelectedItemIcon,
-} 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 {
   dismissModal as dismissBottomSheetModal,
-  openBottomSheetModal,
   useModalStoreState,
 } from "@applicaster/zapp-react-native-utils/modalState";
-import { speedOptions } from "../Const/speedOptions";
+import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+import {
+  PLAYER_ACTION_IDENTIFIERS,
+  registerPlayerActions,
+} from "./playerActions";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -89,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
@@ -103,6 +112,14 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     setSpeedManager(player ? new SpeedController(player) : null);
   }, [player]);
 
+  useEffect(() => {
+    if (!speedManager || playerState.isLive) {
+      return;
+    }
+
+    return registerPlayerActions({ speedController: speedManager });
+  }, [speedManager, playerState.isLive]);
+
   useEffect(() => {
     if (!player) return;
 
@@ -201,36 +218,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.forward(seekDuration);
   }, [seekDuration, player]);
 
-  const onSpeedSelect = React.useCallback(
-    async (item) => {
-      await speedManager?.setPlaybackSpeed(item);
-    },
-    [speedManager]
-  );
-
   const onSpeedButtonPress = React.useCallback(() => {
-    openBottomSheetModal({
-      modalBottomSheetContentProps: {
-        items: speedOptions,
-        current_selection: playbackSpeed,
-        onPress: onSpeedSelect,
-        title: configuration.playback_speed_title,
-        itemProps: getBottomSheetModalItemProps,
-        iconProps: getBottomSheetModalIconProps,
-        labelProps: getBottomSheetModalLabelProps,
-        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
-        getDefaultItemIcon: getBottomSheetModalDefaultItemIcon,
-        iconPlacement: "right",
-      },
-      options: {
-        supportedOrientations: [
-          "portrait",
-          "landscape",
-          "portrait-upside-down",
-        ],
-      },
-    });
-  }, [playbackSpeed, onSpeedSelect, configuration.playback_speed_title]);
+    uiActionsRegistry
+      .getAction(PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED)
+      ?.invokeAction(entry);
+  }, [entry]);
 
   const onPlayerSeek = React.useCallback(
     (targetTime: number) => {
@@ -282,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

@@ -2,10 +2,7 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
-import {
-  useIsTablet,
-  useZStore,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   Controls as MobileTransportControls,
   ProgressBar,
@@ -18,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: {
@@ -61,8 +62,6 @@ type Props = {
   layoutState: QuickBrickPlayer.LayoutState;
   playerState: QuickBrickPlayer.PlayerState;
   value: GetValue;
-  title: string | number;
-  summary: string | number;
 
   playbackSpeedName: string;
 
@@ -85,8 +84,6 @@ export const Controls = (props: Props) => {
     layoutState,
     playerState,
     value,
-    title,
-    summary,
 
     playbackSpeedName,
 
@@ -100,13 +97,17 @@ export const Controls = (props: Props) => {
     maxWidth = 320,
   } = props;
 
-  const configuration = useZStore("playerConfiguration");
-
   const { sleepTimerState, onSleepButtonPress } = useSleepTimerModal(
-    playerManager.getActivePlayer(),
-    configuration
+    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
@@ -203,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,
@@ -220,6 +237,11 @@ export const Controls = (props: Props) => {
     playbackSleepName,
     controller,
     isLiveShowFullControls,
+    isPlaylistControlsLayout,
+    hasNext,
+    hasPrevious,
+    goNext,
+    goPrevious,
   ]);
 
   return (
@@ -227,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/SleepTimerManager.ts

@@ -41,6 +41,10 @@ export class SleepTimerController {
     return this.sleepTimerStateSubject.asObservable();
   }
 
+  get currentState(): SleepTimerState {
+    return this.sleepTimerStateSubject.getValue();
+  }
+
   private async scheduleSleep(sleepDate): Promise<boolean> {
     log_debug(`Setting sleep interval to ${sleepDate}`);
 
@@ -118,7 +122,7 @@ export class SleepTimerController {
 
     log_debug("Sleep state restored");
 
-    this.setSleepTimer(item as SleepTimer, futureSleepDate);
+    await this.setSleepTimer(item as SleepTimer, futureSleepDate);
   }
 
   // Will be called if user closed the player explicitly.

package/src/Player/AudioLayer/SpeedManager.ts

@@ -33,6 +33,10 @@ export class SpeedController {
     return this.playbackSpeedSubject.asObservable();
   }
 
+  get currentSpeed(): PlaybackSpeed {
+    return this.playbackSpeedSubject.getValue();
+  }
+
   async loadSpeed() {
     const speed = await localStorage.getItem(SPEED_PREFERENCE_KEY, NAMESPACE);