@applicaster/quick-brick-player 15.1.13-alpha.1034774223 → 15.1.13

package/package.json

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

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -12,18 +12,23 @@ 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 { 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 { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
-import {
-  PLAYER_ACTION_IDENTIFIERS,
-  registerPlayerActions,
-} from "./playerActions";
+import { speedOptions } from "../Const/speedOptions";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -113,14 +118,6 @@ 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;
 
@@ -219,11 +216,36 @@ 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(() => {
-    uiActionsRegistry
-      .getAction(PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED)
-      ?.invokeAction(entry);
-  }, [entry]);
+    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]);
 
   const onPlayerSeek = React.useCallback(
     (targetTime: number) => {

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

@@ -1,16 +1,14 @@
 import {
-  controlsRowActionIdentifiers,
   nextTrackButton,
   previousTrackButton,
   usesPlaylistControls,
 } from "../utils";
-import { PLAYER_ACTION_IDENTIFIERS } from "../../../playerActions";
-
-const configuredAs = (layout?: unknown): GetValue =>
-  ((key: string) =>
-    key === "player_controls_layout" ? layout : null) as unknown as GetValue;
 
 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);
   });
@@ -31,25 +29,6 @@ describe("usesPlaylistControls", () => {
   });
 });
 
-describe("controlsRowActionIdentifiers", () => {
-  it("claims playback speed and sleep timer on the default layout", () => {
-    expect(
-      controlsRowActionIdentifiers(
-        configuredAs("playback_speed_and_sleep_timer")
-      )
-    ).toEqual([
-      PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED,
-      PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER,
-    ]);
-  });
-
-  it("claims nothing when the row shows playlist controls", () => {
-    expect(
-      controlsRowActionIdentifiers(configuredAs("playlist_controls"))
-    ).toEqual([]);
-  });
-});
-
 describe("track control buttons", () => {
   it("builds a previous button using the previous_track icon", () => {
     const onPress = jest.fn();

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

@@ -2,7 +2,10 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useIsTablet,
+  useZStore,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   Controls as MobileTransportControls,
   ProgressBar,
@@ -97,8 +100,11 @@ export const Controls = (props: Props) => {
     maxWidth = 320,
   } = props;
 
+  const configuration = useZStore("playerConfiguration");
+
   const { sleepTimerState, onSleepButtonPress } = useSleepTimerModal(
-    playerManager.getActivePlayer()
+    playerManager.getActivePlayer(),
+    configuration
   );
 
   const { hasNext, hasPrevious, goNext, goPrevious } = usePlaylistNavigation(

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

@@ -1,5 +1,3 @@
-import { PLAYER_ACTION_IDENTIFIERS } from "../../playerActions";
-
 const playbackButtonMargins = (
   isTablet: boolean,
   isLiveShowFullControls: boolean
@@ -111,18 +109,6 @@ export const sleepButton = (props: ButtonsProps): ControlsButton =>
 export const usesPlaylistControls = (value: GetValue): boolean =>
   value("player_controls_layout") === "playlist_controls";
 
-/**
- * Player actions this row renders as its own buttons. Consumers of the shared
- * player action list have to filter these out to avoid showing them twice.
- */
-export const controlsRowActionIdentifiers = (value: GetValue): string[] =>
-  usesPlaylistControls(value)
-    ? []
-    : [
-        PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED,
-        PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER,
-      ];
-
 type TrackButtonProps = ButtonsProps & { disabled?: boolean };
 
 const trackButtonByName = ({

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

@@ -3,8 +3,7 @@ import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { TransportInfo as MobileTransportInfo } from "@applicaster/quick-brick-mobile-transport-controls";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useRegistryRevision } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import { useEntryActionsExpander } from "@applicaster/zapp-react-native-ui-components/Hooks/useEntryActionsExpander";
+import { useLanguageData } from "@applicaster/zapp-react-native-utils/reactHooks/player";
 
 import { toPositiveNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
@@ -13,22 +12,7 @@ import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "../const";
 import { withDebug } from "../debug";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { isSmallTabletHeight } from "../utils";
-import {
-  ActionButtonDescriptor,
-  resolvePlayerActions,
-} from "@applicaster/zapp-react-native-utils/playerUtils";
-import {
-  RegisteredAction,
-  uiActionsRegistry,
-} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
-
-import { PLAYER_ACTION_IDENTIFIERS } from "../../playerActions";
-import { controlsRowActionIdentifiers } from "../Controls/utils";
-
-/** Player-owned actions that join the shared action list of the overlay. */
-const AUDIO_PLAYER_ACTION_IDENTIFIERS: string[] = Object.values(
-  PLAYER_ACTION_IDENTIFIERS
-);
+import { getPlayerActionButtons } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 const styles = StyleSheet.create({
   container: {
@@ -68,8 +52,7 @@ export const TransportInfo = ({
 }: Props) => {
   const isTablet = useIsTablet();
   const safeAreaFrame = useSafeAreaFrame();
-  const registryRevision = useRegistryRevision();
-  const expandEntryActions = useEntryActionsExpander();
+  const languageData = useLanguageData("audio-player");
 
   const [marginBottom, setMarginBottom] = React.useState(0);
 
@@ -98,56 +81,11 @@ export const TransportInfo = ({
     [onLayout]
   );
 
-  // Joined so the memo below is not invalidated on every render.
-  const controlsRowIdentifiersKey =
-    controlsRowActionIdentifiers(value).join(",");
-
-  const overlayActionIdentifiers = React.useMemo(() => {
-    const renderedByControlsRow = controlsRowIdentifiersKey.split(",");
-
-    return AUDIO_PLAYER_ACTION_IDENTIFIERS.filter(
-      (identifier) => !renderedByControlsRow.includes(identifier)
-    );
-  }, [controlsRowIdentifiersKey]);
-
-  const readOwnPlayerActions = React.useCallback(
-    (): RegisteredAction[] =>
-      overlayActionIdentifiers.flatMap((identifier) =>
-        uiActionsRegistry.getActions(identifier, entry)
-      ),
-    [entry, overlayActionIdentifiers]
-  );
-
-  // Playback speed and the sleep timer register in a later effect than our
-  // first render - speed waits for SpeedController state - so re-read whenever
-  // the registry changes instead of guessing when they will be there.
-  const playerActions = React.useMemo(
-    () => readOwnPlayerActions(),
-    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
-    [readOwnPlayerActions, registryRevision]
+  const actionButtons = React.useMemo(
+    () => getPlayerActionButtons(configuration),
+    [configuration]
   );
 
-  const actionButtonDescriptors = React.useMemo<
-    ActionButtonDescriptor[]
-  >(() => {
-    const content = resolvePlayerActions({
-      configuration,
-      entry,
-      expandEntryActions,
-    });
-
-    const seen = new Set(content.map((action) => action.identifier));
-
-    const extras = playerActions.filter(
-      (action) => action?.identifier && !seen.has(action.identifier)
-    );
-
-    return [...content, ...extras].map((action) => ({
-      kind: "action" as const,
-      action,
-    }));
-  }, [configuration, entry, playerActions, expandEntryActions]);
-
   return (
     <View
       style={[
@@ -168,8 +106,9 @@ export const TransportInfo = ({
           content={entry}
           value={value}
           visible
+          languageData={languageData}
           layoutState={layoutState}
-          actionButtonDescriptors={actionButtonDescriptors}
+          actionButtons={actionButtons}
         />
       </View>
     </View>

package/src/Player/AudioLayer/SleepTimerManager.ts

@@ -41,10 +41,6 @@ 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}`);
 
@@ -122,7 +118,7 @@ export class SleepTimerController {
 
     log_debug("Sleep state restored");
 
-    await this.setSleepTimer(item as SleepTimer, futureSleepDate);
+    this.setSleepTimer(item as SleepTimer, futureSleepDate);
   }
 
   // Will be called if user closed the player explicitly.

package/src/Player/AudioLayer/SpeedManager.ts

@@ -33,10 +33,6 @@ 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);
 

package/src/Player/AudioLayer/components/SleepTimerModalHeader/SleepTimerModalHeader.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { ModalHeader } from "@applicaster/zapp-react-native-ui-components/Components/ModalComponent/Header";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+
+const formatTime = (milliseconds: number) => {
+  const totalSeconds = Math.floor(milliseconds / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (milliseconds < 3600000) {
+    return `${minutes.toString().padStart(2, "0")}:${seconds
+      .toString()
+      .padStart(2, "0")}`;
+  }
+
+  return `${hours.toString().padStart(2, "0")}:${minutes
+    .toString()
+    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+};
+
+export const SleepTimerModalHeader = ({
+  summary,
+  ...props
+}: {
+  summary?: string;
+}) => {
+  const sleepTimerDate = +summary;
+
+  const [timeLeft, setTimeLeft] = React.useState(
+    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
+  );
+
+  const showCounter = React.useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
+
+  React.useLayoutEffect(() => {
+    if (showCounter && sleepTimerDate !== 0) {
+      setTimeLeft(sleepTimerDate - Date.now());
+
+      const intervalId = setInterval(() => {
+        setTimeLeft(() => {
+          const newTimeLeft = sleepTimerDate - Date.now();
+
+          if (newTimeLeft <= 0) {
+            clearInterval(intervalId);
+
+            return 0;
+          } else {
+            return newTimeLeft;
+          }
+        });
+      }, 1000);
+
+      return () => clearInterval(intervalId);
+    } else {
+      setTimeLeft(0);
+    }
+  }, [sleepTimerDate, showCounter]);
+
+  return (
+    <ModalHeader
+      summary={!isNil(summary) ? formatTime(timeLeft) : summary}
+      {...(props as any)}
+    />
+  );
+};

package/src/Player/AudioLayer/components/SleepTimerModalHeader/index.ts

@@ -0,0 +1 @@
+export * from "./SleepTimerModalHeader";

package/src/Player/AudioLayer/useSleepTimerModal.ts

@@ -1,19 +1,30 @@
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
-import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   SLEEP_TIMER_OFF,
   SleepTimerController,
   SleepTimerState,
 } from "./SleepTimerManager";
+
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+
+import { SleepTimerModalHeader } from "./components/SleepTimerModalHeader";
+import { getSleepTimerOptions } from "../Const/sleepTimerOptions";
 import {
-  PLAYER_ACTION_IDENTIFIERS,
-  registerPlayerActions,
-} from "./playerActions";
+  getBottomSheetModalLabelProps,
+  getBottomSheetModalIconProps,
+  getBottomSheetModalItemProps,
+  getBottomSheetModalSelectedItemIcon,
+  selectSleepTitle,
+  selectSleepOffLabel,
+} from "../Utils";
 
-export const useSleepTimerModal = (player) => {
+export const useSleepTimerModal = (player, configuration) => {
   const playerState = usePlayerState("audio-player-sleep-timer-modal");
 
+  const title = configuration(selectSleepTitle);
+  const offLabel = configuration(selectSleepOffLabel);
+
   const [sleepTimerManager, setSleepTimerManager] =
     useState<SleepTimerController | null>(null);
 
@@ -22,22 +33,19 @@ export const useSleepTimerModal = (player) => {
   );
 
   useEffect(() => {
-    setSleepTimerManager(player ? new SleepTimerController(player) : null);
+    if (player) {
+      setSleepTimerManager(new SleepTimerController(player));
+    } else {
+      setSleepTimerManager(null);
+    }
   }, [player]);
 
   useEffect(() => {
     if (playerState?.isLive) {
-      sleepTimerManager?.setSleepTimer(SLEEP_TIMER_OFF).catch(() => undefined);
-    }
-  }, [playerState?.isLive, sleepTimerManager]);
-
-  useEffect(() => {
-    if (!sleepTimerManager || playerState.isLive) {
-      return;
+      // Resetting a sleep timer when audio content is live (Timer not supported on live video)
+      sleepTimerManager.setSleepTimer(SLEEP_TIMER_OFF).catch();
     }
-
-    return registerPlayerActions({ sleepController: sleepTimerManager });
-  }, [sleepTimerManager, playerState.isLive]);
+  }, [playerState?.isLive]);
 
   useEffect(() => {
     if (!playerState.isReadyToPlay) {
@@ -56,11 +64,40 @@ export const useSleepTimerModal = (player) => {
     };
   }, [sleepTimerManager]);
 
+  const onSleepSelect = useCallback(
+    async (item) => {
+      await sleepTimerManager?.setSleepTimer(item);
+    },
+    [sleepTimerManager]
+  );
+
   const onSleepButtonPress = useCallback(() => {
-    uiActionsRegistry
-      .getAction(PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER)
-      ?.invokeAction(player?.entry);
-  }, [player]);
+    const timerDate = sleepTimerState.timerDate;
+
+    const timerRemaining =
+      timerDate !== 0 && +timerDate > Date.now() ? timerDate : null;
+
+    openBottomSheetModal({
+      modalBottomSheetContentProps: {
+        headerComponent: SleepTimerModalHeader,
+        items: getSleepTimerOptions(offLabel, timerRemaining),
+        onPress: onSleepSelect,
+        title,
+        summary: timerRemaining,
+        itemProps: getBottomSheetModalItemProps,
+        iconProps: getBottomSheetModalIconProps,
+        labelProps: getBottomSheetModalLabelProps,
+        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
+      },
+      options: {
+        supportedOrientations: [
+          "portrait",
+          "landscape",
+          "portrait-upside-down",
+        ],
+      },
+    });
+  }, [sleepTimerState.timerDate, sleepTimerState.timer, title, onSleepSelect]);
 
   return useMemo(
     () => ({