@applicaster/quick-brick-player 13.0.0-alpha.3322736490 → 13.0.0-alpha.3332871333

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.3322736490",
+  "version": "13.0.0-alpha.3332871333",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,12 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.3322736490",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.99",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.3322736490",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3322736490",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3322736490",
-    "keymirror": "^0.1.1",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.3332871333",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3332871333",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3332871333",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -82,7 +82,7 @@ export const AudioDescription = (props: AudioDescriptionProps) => {
 
   return (
     <>
-      <Text style={titleStyles(value, prefix)} numberOfLines={1}>
+      <Text style={titleStyles(value, prefix)} numberOfLines={2}>
         {title}
       </Text>
       <Text style={summaryStyles(value, prefix)} numberOfLines={1}>

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { ViewStyle, View, Dimensions as ScreenDimensions } from "react-native";
+import {
+  StyleSheet,
+  ViewStyle,
+  View,
+  Dimensions as ScreenDimensions,
+} from "react-native";
 
 import { SafeAreaView, Edge } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
@@ -18,7 +23,14 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useEffect, useState } from "react";
 import { MagicBG } from "./MagicBG";
 import { formatSpeed } from "./utils";
-import { addQueryParam, getLiveUrl } from "../Utils";
+import {
+  addQueryParam,
+  getBottomSheetModalDefaultItemIcon,
+  getBottomSheetModalIconProps,
+  getBottomSheetModalItemProps,
+  getBottomSheetModalLabelProps,
+  getBottomSheetModalSelectedItemIcon,
+} from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import {
   AnimationComponent,
@@ -27,7 +39,6 @@ import {
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PADDING_HORIZONTAL } from "./Layout/const";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
-
 import {
   SleepTimerController,
   SleepTimerState,
@@ -37,6 +48,8 @@ import { SpeedController, PlaybackSpeed, DEFAULT_SPEED } from "./SpeedManager";
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { getSleepTimerOptions } from "../Const/sleepTimerOptions";
+import { speedOptions } from "../Const/speedOptions";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -78,59 +91,17 @@ type Props = {
 
 const { width: SCREEN_WIDTH } = ScreenDimensions.get("screen");
 
-const Styles = {
-  mainContainer: (style: ViewStyle) => {
-    const combinedStyle: ViewStyle = {
-      flex: 1,
-    };
-
-    return {
-      ...combinedStyle,
-      ...style,
-    };
-  },
+const Styles = StyleSheet.create({
   playerContainer: {
     flex: 1,
   },
   paddingHorizontal: { paddingTop: 0, paddingHorizontal: PADDING_HORIZONTAL },
-
-  controlsMobile: {
-    height: 50,
-    marginHorizontal: 24,
-  },
-  controlsTablet: {
-    height: 96,
-    marginHorizontal: 24,
-  },
   playerDetails: {
     marginTop: 60,
     alignSelf: "center",
     width: SCREEN_WIDTH - PADDING_HORIZONTAL * 2,
   },
-
-  linearGradient: {
-    flex: 1,
-  },
-};
-
-const sleeps = [
-  // { label: "End of episode", value: "episode" },
-  { label: "5 minutes", value: 5 },
-  { label: "10 minutes", value: 10 },
-  { label: "15 minutes", value: 15 },
-  { label: "30 minutes", value: 30 },
-  { label: "45 minutes", value: 45 },
-  { label: "1 hour", value: 60 },
-  { label: "2 hours", value: 120 },
-];
-
-const speeds = [
-  { label: "0.8x", value: 0.8 },
-  { label: "1x", value: 1.0 },
-  { label: "1.2x", value: 1.2 },
-  { label: "1.5x", value: 1.5 },
-  { label: "2x", value: 2.0 },
-];
+});
 
 const edges: Edge[] = ["right", "left", "top"];
 
@@ -154,12 +125,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
-  // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
-
-  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
-
   const { title, summary } = useTitleSummaryOverlay(
-    feedUrl,
     entry,
     playerState?.isLive,
     configuration?.audio_live_player_update_interval
@@ -288,37 +254,46 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const onSpeedButtonPress = React.useCallback(() => {
     openBottomSheetModal({
       modalBottomSheetContentProps: {
-        items: speeds,
+        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"],
+        supportedOrientations: [
+          "portrait",
+          "landscape",
+          "portrait-upside-down",
+        ],
       },
     });
-  }, [
-    playbackSpeed,
-    setPlaybackSpeed,
-    onSpeedSelect,
-    configuration["playback_speed_title"],
-  ]);
+  }, [playbackSpeed, onSpeedSelect, configuration["playback_speed_title"]]);
 
   const onSleepButtonPress = React.useCallback(() => {
     openBottomSheetModal({
       modalBottomSheetContentProps: {
-        items: [
-          {
-            label: configuration["playback_sleep_off_label"],
-            value: 0,
-          },
-        ].concat(sleeps),
+        items: getSleepTimerOptions(configuration),
         current_selection: sleepTimerState.timer,
         onPress: onSleepSelect,
         title: configuration["playback_sleep_title"],
+        itemProps: getBottomSheetModalItemProps,
+        iconProps: getBottomSheetModalIconProps,
+        labelProps: getBottomSheetModalLabelProps,
+        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
+        iconPlacement: "right",
       },
       options: {
-        supportedOrientations: ["portrait"],
+        supportedOrientations: [
+          "portrait",
+          "landscape",
+          "portrait-upside-down",
+        ],
       },
     });
   }, [
@@ -357,7 +332,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const MainContent = React.useMemo(() => {
     return (
-      <SafeAreaView style={Styles.mainContainer(style)} edges={edges}>
+      <SafeAreaView style={[style, Styles.playerContainer]} edges={edges}>
         <AnimationComponent
           animationType={ComponentAnimationType.moveUpComponent}
           additionalData={{ saveArea: true }}
@@ -401,11 +376,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
                   animationType={ComponentAnimationType.componentFade}
                 >
                   <PlayerDetails
+                    isAudioPlayer
                     configuration={configuration}
                     style={Styles.playerDetails}
                     entry={entry}
                     isTabletLandscape={isTabletLandscape}
-                    isAudioPlayer={true}
                   />
                 </AnimationComponent>
               </View>

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

@@ -5,7 +5,6 @@ import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   Controls as MobileTransportControls,
-  CountDown,
   ProgressBar,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
@@ -39,19 +38,24 @@ const styles = StyleSheet.create({
   progressBar: {
     flex: 0,
   },
+  progressBarTrackStyles: {
+    borderRadius: 3,
+    height: 6,
+  },
+  progressBarThumbStyles: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+  },
+  progressBarThumbStyles_pressed: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+  },
 });
 
-const controlsStyles = ({
-  isTablet,
-  isLiveShowFullControls,
-}: {
-  isTablet: boolean;
-  isLiveShowFullControls: boolean;
-}) => ({
-  height: isTablet ? undefined : 50,
-  marginHorizontal: isTablet ? undefined : 10,
-  justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
-});
+const getControlJustifyContent = (countOfButtons: number) =>
+  countOfButtons <= 1 ? "center" : "space-between";
 
 type Props = {
   entry: ZappEntry;
@@ -117,14 +121,19 @@ export const Controls = (props: Props) => {
     showFullControls = !!(controller?.hasSeekableDuration?.() && seekEnabled);
   }
 
-  const sleepTitle = value("playback_sleep_countdown_label");
-
   const [timeLeft, setTimeLeft] = React.useState(
     sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
   );
 
   const showCounter = React.useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
 
+  const countDownOptions = React.useMemo(() => {
+    return {
+      showCounter: showCounter && timeLeft >= 0,
+      timeLeft,
+    };
+  }, [showCounter, timeLeft]);
+
   React.useEffect(() => {
     if (showCounter && sleepTimerDate !== 0) {
       setTimeLeft(sleepTimerDate - Date.now());
@@ -282,12 +291,12 @@ export const Controls = (props: Props) => {
             isDateBasedLiveContent={isDateBasedLiveContent}
             onSkipLive={onSkipLive}
             progressBarStyles={styles.progressBar}
+            countDownOptions={countDownOptions}
+            thumbStyles={styles.progressBarThumbStyles}
+            thumbStylesPressed={styles.progressBarThumbStyles_pressed}
+            trackStyles={styles.progressBarTrackStyles}
           />
 
-          {showCounter && timeLeft >= 0 ? (
-            <CountDown timeLeft={timeLeft} value={value} title={sleepTitle} />
-          ) : null}
-
           <VerticalGutter />
         </>
       ) : null}
@@ -297,7 +306,9 @@ export const Controls = (props: Props) => {
         visible={true}
         keepAlive={null}
         buttons={controlButtons}
-        style={controlsStyles({ isTablet, isLiveShowFullControls })}
+        style={{
+          justifyContent: getControlJustifyContent(controlButtons().length),
+        }}
         playerState={playerState}
       />
     </AnimationComponent>

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

@@ -1,14 +1,7 @@
-const rewindButtonSize = (isTablet: boolean): keyof ButtonSizeStyles =>
-  isTablet ? "big" : "smallMargins";
-
-const playbackButtonSize = (isTablet: boolean): keyof ButtonSizeStyles =>
-  isTablet ? "bigExtended" : "mediumExtended";
-
 const playbackButtonMargins = (
   isTablet: boolean,
   isLiveShowFullControls: boolean
-): number =>
-  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? undefined : 40;
+): number => (isLiveShowFullControls ? (isTablet ? 65 : 10) : undefined);
 
 export const playbackButton = ({
   playerState,
@@ -30,7 +23,7 @@ export const playbackButton = ({
       : "pause";
 
   return {
-    size: playbackButtonSize(isTablet),
+    size: "bigExtended",
     icon: playerState.isBuffering ? "buffering" : icon,
     preferredFocus: true,
     onPress,
@@ -52,10 +45,9 @@ type ButtonsByNameProps = ButtonsProps & { name?: string };
 const rewindButtonByName = ({
   name,
   onPress,
-  isTablet,
   style,
 }: ButtonsByNameProps): ControlsButton => ({
-  size: rewindButtonSize(isTablet),
+  size: "big",
   icon: name,
   onPress,
   style,

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

@@ -0,0 +1,55 @@
+/* eslint react-native/no-color-literals: off */
+/* eslint react-native/no-inline-styles: off */
+
+import * as React from "react";
+import { View } from "react-native";
+
+import { MOBILE } from "../const";
+
+export const LeftDebugSquare = () => (
+  <View
+    style={{
+      position: "absolute",
+      top: 200,
+      left: 0,
+      width: MOBILE.MARGIN_HORIZONTAL,
+      height: MOBILE.MARGIN_HORIZONTAL,
+      backgroundColor: "blue",
+
+      borderWidth: 1,
+      borderColor: "yellow",
+    }}
+  />
+);
+
+export const RightDebugSquare = () => (
+  <View
+    style={{
+      position: "absolute",
+      top: 200,
+      right: 0,
+      width: MOBILE.MARGIN_HORIZONTAL,
+      height: MOBILE.MARGIN_HORIZONTAL,
+      backgroundColor: "blue",
+
+      borderWidth: 1,
+      borderColor: "yellow",
+    }}
+  />
+);
+
+export const BottomDebugSquare = () => (
+  <View
+    style={{
+      position: "absolute",
+      left: 170,
+      bottom: 0,
+      width: MOBILE.MARGIN_BOTTOM,
+      height: MOBILE.MARGIN_BOTTOM,
+      backgroundColor: "blue",
+
+      borderWidth: 1,
+      borderColor: "yellow",
+    }}
+  />
+);

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

@@ -218,6 +218,7 @@ export const DockedControls = (props: Props) => {
           isActiveGesture || layoutState.docked,
           progressBarHeight
         ),
+        { height: minimisedHeight },
       ]}
     >
       {!playerState.isLive &&

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

@@ -6,14 +6,19 @@ import {
 } from "react-native-safe-area-context";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
-import { MOBILE } from "./const";
+import { MOBILE, NAVBAR_HEIGHT } from "./const";
 import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
-import { useImageSize, useTransportInfoHeight } from "./hooks";
+import { useMobileLayoutImageSize, useTransportInfoHeight } from "./hooks";
 import { DockedControls } from "./DockedControls";
-import { withDebug } from "./debug";
+import { withDebug, DEBUG } from "./debug";
+import {
+  LeftDebugSquare,
+  RightDebugSquare,
+  BottomDebugSquare,
+} from "./Debug/index";
 
 import { Props } from "./types";
 
@@ -90,11 +95,27 @@ export function MobileLayout({
   const { height: screenHeight } = useSafeAreaFrame();
   const { progressBarHeight } = useModalAnimationContext();
 
-  const { imageSize, onLayout } = useImageSize({ isPortraitMode: true });
+  const { imageSize } = useMobileLayoutImageSize();
 
   const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
     useTransportInfoHeight();
 
+  const controlsContainerHeight = React.useMemo(() => {
+    return (
+      screenHeight -
+      topInset -
+      imageSize -
+      NAVBAR_HEIGHT -
+      MOBILE.MARGIN_BOTTOM -
+      MOBILE.MARGIN_TOP -
+      bottomInset
+    );
+  }, [screenHeight, topInset, imageSize, bottomInset]);
+
+  const verticalOffsetForImage = React.useMemo(() => {
+    return transportInfoHeight + MOBILE.MARGIN_TOP - progressBarHeight;
+  }, [transportInfoHeight, progressBarHeight]);
+
   return (
     <View
       style={[
@@ -107,6 +128,10 @@ export function MobileLayout({
         }),
       ]}
     >
+      {DEBUG ? <LeftDebugSquare /> : null}
+      {DEBUG ? <RightDebugSquare /> : null}
+      {DEBUG ? <BottomDebugSquare /> : null}
+
       {/* TransportInfo */}
       <TransportInfo
         entry={entry}
@@ -139,7 +164,6 @@ export function MobileLayout({
               }),
             },
           ]}
-          onLayout={onLayout}
         >
           <PlayerImage
             entry={entry}
@@ -155,20 +179,15 @@ export function MobileLayout({
             summary={summary}
             docked={docked}
             imageWidth={imageSize}
-            verticalOffset={
-              transportInfoHeight + MOBILE.MARGIN_TOP - progressBarHeight
-            }
+            verticalOffset={verticalOffsetForImage}
           />
         </View>
         {/* PlayerImage */}
 
         <View
-          style={[
-            styles.flex,
-            {
-              marginBottom: MOBILE.MARGIN_BOTTOM,
-            },
-          ]}
+          style={{
+            height: controlsContainerHeight,
+          }}
         >
           <Controls
             entry={entry}

package/src/Player/AudioLayer/Layout/PlayerImage/AnimatedImage.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { ImageBackground, Animated, StyleSheet } from "react-native";
+import { Image, Animated, StyleSheet, ViewStyle } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import {
@@ -14,6 +14,7 @@ const styles = StyleSheet.create({
     // we have to specify flex:0 and dimensions to make animation work
     flex: 0,
     aspectRatio: 1,
+    overflow: "hidden",
   },
 });
 
@@ -21,6 +22,7 @@ type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
   imageStyle?: { [K: string]: any };
+  wrapperViewStyle?: ViewStyle;
   imageWidth: number;
 }>;
 
@@ -28,6 +30,7 @@ export const AnimatedImage = ({
   entry,
   style,
   imageStyle,
+  wrapperViewStyle,
   imageWidth,
 }: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
@@ -65,19 +68,16 @@ export const AnimatedImage = ({
     <Animated.View
       style={[
         styles.container,
+        wrapperViewStyle,
+        imageStyle,
         {
           width: heightAnim,
         },
       ]}
     >
-      <ImageBackground
-        resizeMode="cover"
-        style={style}
-        imageStyle={imageStyle}
-        source={source}
-      >
+      <Image resizeMode="cover" style={style} source={source}>
         {null}
-      </ImageBackground>
+      </Image>
     </Animated.View>
   );
 };

package/src/Player/AudioLayer/Layout/PlayerImage/FlexImage.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ImageBackground } from "react-native";
+import { Image } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
@@ -20,13 +20,6 @@ export const FlexImage = ({ entry, imageStyle }: Props) => {
   if (!source) return null;
 
   return (
-    <ImageBackground
-      resizeMode="cover"
-      style={style}
-      source={source}
-      imageStyle={imageStyle}
-    >
-      {null}
-    </ImageBackground>
+    <Image resizeMode="cover" style={[style, imageStyle]} source={source} />
   );
 };

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

@@ -1,7 +1,5 @@
 import * as React from "react";
 
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-
 import {
   AnimationComponent,
   ComponentAnimationType,
@@ -13,6 +11,7 @@ import { FlexImage } from "./FlexImage";
 
 import { styles } from "./styles";
 import { calculateBorderRadius } from "../../utils";
+import { PlayNextData } from "../types";
 
 type Props = {
   entry: ZappEntry;
@@ -23,7 +22,7 @@ type Props = {
   dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"];
   onCloseVideoModal: Callback;
   onPlayerSeek: (targetTime: number) => void;
-  playNextData: QuickBrickPlayer.AudioPlayerProps["playNextData"];
+  playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
   docked: boolean;
@@ -32,9 +31,14 @@ type Props = {
 };
 
 export const PlayerImage = (props: Props) => {
-  const { entry, dimensions, docked, imageWidth, verticalOffset } = props;
-
-  const isTablet = useIsTablet();
+  const {
+    entry,
+    dimensions,
+    docked,
+    imageWidth,
+    verticalOffset,
+    configuration,
+  } = props;
 
   const {
     isActiveGesture,
@@ -43,12 +47,17 @@ export const PlayerImage = (props: Props) => {
     minimisedHeight,
   } = useModalAnimationContext();
 
+  const isShadowEnabled =
+    configuration?.audio_player_artwork_shadow_enabled ?? true;
+
+  const shouldShowShadow = !docked && isShadowEnabled;
+
   const borderRadius = calculateBorderRadius(
-    isTablet,
     docked,
     startComponentsAnimation,
     isActiveGesture,
-    playerAnimationState
+    playerAnimationState,
+    configuration
   );
 
   return (
@@ -83,6 +92,7 @@ export const PlayerImage = (props: Props) => {
             style={styles.backgroundImageContainer}
             imageStyle={{ borderRadius }}
             imageWidth={imageWidth}
+            wrapperViewStyle={shouldShowShadow ? styles.shadow : undefined}
           />
         ) : null}
       </AnimationComponent>

package/src/Player/AudioLayer/Layout/PlayerImage/styles.ts

@@ -1,5 +1,7 @@
 import { StyleSheet } from "react-native";
 
+const SHADOW_COLOR = "rgba(0, 0, 0, 1)";
+
 export const styles = StyleSheet.create({
   backgroundImageContainer: {
     flex: 1,
@@ -14,4 +16,11 @@ export const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
+  shadow: {
+    shadowColor: SHADOW_COLOR,
+    shadowOffset: { width: 0, height: 24 },
+    shadowOpacity: 0.2,
+    shadowRadius: 32,
+    elevation: 12,
+  },
 });

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

@@ -12,7 +12,7 @@ import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
-import { useImageSize, useTransportInfoHeight } from "./hooks";
+import { useTabletLayoutImageSize, useTransportInfoHeight } from "./hooks";
 import { DockedControls } from "./DockedControls";
 import { withDebug } from "./debug";
 
@@ -71,7 +71,7 @@ const withAdditionalOffset = ({ progressBarHeight, bottomInset }) => {
   }
 
   // android
-  return progressBarHeight === 0 ? 4 : 2;
+  return progressBarHeight === 0 ? 4 : 0.5;
 };
 
 export function TabletLandscapeLayout({
@@ -104,7 +104,9 @@ export function TabletLandscapeLayout({
   const { height: screenHeight } = useSafeAreaFrame();
   const { progressBarHeight } = useModalAnimationContext();
 
-  const { imageSize, onLayout } = useImageSize({ isPortraitMode: false });
+  const { imageSize, onLayout } = useTabletLayoutImageSize({
+    isPortraitMode: false,
+  });
 
   const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
     useTransportInfoHeight();

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

@@ -14,7 +14,7 @@ import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
-import { useImageSize } from "./hooks";
+import { useTabletLayoutImageSize } from "./hooks";
 import { DockedControls } from "./DockedControls";
 import { VerticalGutter } from "./VerticalGutter";
 
@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
 
   fillContainer: {
     ...StyleSheet.absoluteFillObject,
-
+    alignItems: "center",
     ...withDebug({
       borderWidth: 2,
       borderColor: "red",
@@ -104,7 +104,7 @@ export function TabletPortraitLayout({
     imageSize,
     offsetY: topOffset,
     onLayout,
-  } = useImageSize({ isPortraitMode: true });
+  } = useTabletLayoutImageSize({ isPortraitMode: true });
 
   return (
     <View

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

@@ -12,14 +12,23 @@ import {
 import { toPositiveNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-import { TABLET_LANDSCAPE } from "../const";
+import { TABLET_LANDSCAPE, NAVBAR_HEIGHT } from "../const";
 import { withDebug } from "../debug";
 
 const styles = StyleSheet.create({
   container: {
+    height: NAVBAR_HEIGHT,
+    justifyContent: "center",
+  },
+  animatedContainer: {
     width: "100%",
     alignItems: "center",
     justifyContent: "space-between",
+
+    ...withDebug({
+      borderWidth: 2,
+      borderColor: "yellow",
+    }),
   },
 });
 
@@ -74,19 +83,22 @@ export const TransportInfo = ({
 
   return (
     <View
-      style={{
-        marginBottom: applyMarginBottom({ isTablet, marginBottom }),
+      style={[
+        styles.container,
+        {
+          marginBottom: applyMarginBottom({ isTablet, marginBottom }),
 
-        ...withDebug({
-          borderWidth: 2,
-          borderColor: "red",
-        }),
-      }}
+          ...withDebug({
+            borderWidth: 2,
+            borderColor: "red",
+          }),
+        },
+      ]}
       onLayout={handleLayout}
     >
       <AnimationComponent
         animationType={ComponentAnimationType.componentFade}
-        style={styles.container}
+        style={styles.animatedContainer}
       >
         <MobileTransportInfo
           content={entry}

package/src/Player/AudioLayer/Layout/const.ts

@@ -18,3 +18,5 @@ export const MOBILE = {
   MARGIN_TOP: 10,
   MIN_HEIGHT: 458,
 };
+
+export const NAVBAR_HEIGHT = 60;

package/src/Player/AudioLayer/Layout/debug.ts

@@ -1,5 +1,5 @@
 // use this variable to activate borders on AudioPlayer. It will help you to fix layout if needed.
-const DEBUG = false;
+export const DEBUG = false;
 
 export const withDebug = (style) => {
   return DEBUG ? style : {};

package/src/Player/AudioLayer/Layout/hooks/index.ts

@@ -1,3 +1,5 @@
-export { useImageSize } from "./useImageSize";
+export { useTabletLayoutImageSize } from "./useTabletLayoutImageSize";
+
+export { useMobileLayoutImageSize } from "./useMobileLayoutImageSize";
 
 export { useTransportInfoHeight } from "./useTransportInfoHeight";

package/src/Player/AudioLayer/Layout/hooks/useMobileLayoutImageSize.ts

@@ -0,0 +1,14 @@
+import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
+import { MOBILE } from "../const";
+
+type Return = {
+  imageSize: Option<number>;
+};
+
+export const useMobileLayoutImageSize = (): Return => {
+  const { width } = useDimensions("screen");
+
+  return {
+    imageSize: width - 2 * MOBILE.MARGIN_HORIZONTAL,
+  };
+};

package/src/Player/AudioLayer/Layout/hooks/{useImageSize.ts → useTabletLayoutImageSize.ts}

@@ -3,9 +3,11 @@ import { LayoutChangeEvent } from "react-native";
 
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { Subject } from "rxjs";
-import { take, last } from "rxjs/operators";
+import { first, debounceTime, filter } from "rxjs/operators";
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
 
+const TIMEOUT = 200; // ms
+
 type Layout = {
   x: number;
   y: number;
@@ -36,7 +38,7 @@ type Return = {
   onLayout: (event: LayoutChangeEvent) => void;
 };
 
-export const useImageSize = ({ isPortraitMode }: Props): Return => {
+export const useTabletLayoutImageSize = ({ isPortraitMode }: Props): Return => {
   const [imageSize, setImageSize] = React.useState(undefined);
   const [offsetY, setOffsetY] = React.useState(undefined);
 
@@ -45,7 +47,7 @@ export const useImageSize = ({ isPortraitMode }: Props): Return => {
   React.useEffect(() => {
     const subscription = layoutRef.current.layoutChange$
       // for landscape layout we need to wait the second layout change in order to get proper size of image
-      .pipe(take(isPortraitMode ? 1 : 2), last())
+      .pipe(debounceTime(TIMEOUT), first())
       .subscribe({
         next: (layout: Layout) => {
           const size = isPortraitMode
@@ -63,8 +65,11 @@ export const useImageSize = ({ isPortraitMode }: Props): Return => {
 
   React.useEffect(() => {
     const subscription = layoutRef.current.layoutChange$
-      // wait the second layout change in order to get proper offsetY
-      .pipe(take(2), last())
+      .pipe(
+        filter((layout: Layout) => layout.y > 0),
+        debounceTime(TIMEOUT),
+        first()
+      )
       .subscribe({
         next: (layout: Layout) => {
           setOffsetY(layout.y);

package/src/Player/AudioLayer/Layout/types.ts

@@ -3,3 +3,5 @@ import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Compo
 export type Props = QuickBrickPlayer.AudioPlayerProps & {
   playNextData: PlayNextData;
 };
+
+export { PlayNextData };

package/src/Player/AudioLayer/utils.ts

@@ -4,6 +4,7 @@ import {
   PlayerAnimationStateT,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 export const NAMESPACE = "audio-player";
 
@@ -37,11 +38,11 @@ export const formatSpeed = (value: number) => {
 };
 
 export const calculateBorderRadius = (
-  isTablet: boolean,
   docked: boolean,
   startComponentsAnimation: boolean,
   isActiveGesture: boolean,
-  playerAnimationState: PlayerAnimationStateT
+  playerAnimationState: PlayerAnimationStateT,
+  configuration: Record<string, any>
 ): number => {
   const shouldRemoveBorderRadius =
     (startComponentsAnimation &&
@@ -53,5 +54,7 @@ export const calculateBorderRadius = (
     return 0;
   }
 
-  return isTablet ? 24 : 10;
+  return toNumberWithDefaultZero(
+    configuration.audio_player_artwork_border_radius
+  );
 };

package/src/Player/Const/sleepTimerOptions.ts

@@ -0,0 +1,39 @@
+import { toDayJSLocaleMap } from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
+import { getUILanguage } from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+const createTimerOptions = (value) => {
+  let label = "";
+
+  const str = dayjs
+    .duration(value, "minute")
+    .locale(toDayJSLocaleMap(getUILanguage()))
+    .humanize();
+
+  if (value === 60) {
+    /** Skipping prefix "an"/"un"/"una" for 1 hour */
+
+    if (str.includes(" ")) {
+      label = `1 ${str.split(" ")[1]}`; // Combine "1" with second part of the string
+    } else {
+      label = `1 ${str}`; // Use dayjs provided translation
+    }
+  } else {
+    label = str;
+  }
+
+  return {
+    label,
+    value,
+  };
+};
+
+export const getSleepTimerOptions = (configuration) => {
+  return [
+    {
+      label: configuration["playback_sleep_off_label"],
+      value: 0,
+    },
+    ...[5, 10, 15, 30, 45, 60, 120].map(createTimerOptions),
+  ];
+};

package/src/Player/Const/speedOptions.ts

@@ -0,0 +1,4 @@
+export const speedOptions = [0.8, 1, 1.2, 1.5, 2].map((v) => ({
+  label: v + "x",
+  value: v,
+}));

package/src/Player/Utils/Utils.ts

@@ -1,11 +1,6 @@
 import queryString from "query-string";
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
-export const getLiveUrl = (url: string) => {
-  // Use the replace method with a regular expression to replace all instances of subClass with livePage
-  return url.replace(new RegExp("subClass", "g"), "livePage");
-};
-
 export const addQueryParam = (
   baseUrl: string,
   paramName: string,

package/src/Player/Utils/index.tsx

@@ -1 +1,118 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 export * from "./Utils";
+
+export const getBottomSheetModalIconProps = (theme) => ({
+  height: theme["audio_modal_bottom_sheet_item_icon_height"],
+  width: theme["audio_modal_bottom_sheet_item_icon_width"],
+  marginBottom: theme["audio_modal_bottom_sheet_item_icon_margin_bottom"],
+  marginLeft: theme["audio_modal_bottom_sheet_item_icon_margin_left"],
+  marginRight: theme["audio_modal_bottom_sheet_item_icon_margin_right"],
+  marginTop: theme["audio_modal_bottom_sheet_item_icon_margin_top"],
+  flavour: theme["modal_bottom_sheet_item_icon_flavour"],
+});
+
+export const getBottomSheetModalLabelProps = (theme, width: number) => {
+  const {
+    audio_modal_bottom_sheet_item_label_android_letter_spacing,
+    audio_modal_bottom_sheet_item_label_ios_letter_spacing,
+    audio_modal_bottom_sheet_item_label_family_ios_font_selector,
+    audio_modal_bottom_sheet_item_label_family_android_font_selector,
+    audio_modal_bottom_sheet_item_label_focus_font_color,
+    audio_modal_bottom_sheet_item_label_font_color,
+    audio_modal_bottom_sheet_item_label_selected_font_color,
+    audio_modal_bottom_sheet_item_label_hover_selected_font_color,
+    audio_modal_bottom_sheet_item_label_font_size,
+    audio_modal_bottom_sheet_item_label_line_height,
+    audio_modal_bottom_sheet_item_label_margin_bottom,
+    audio_modal_bottom_sheet_item_label_margin_top,
+    audio_modal_bottom_sheet_item_label_margin_left,
+    audio_modal_bottom_sheet_item_label_margin_right,
+    audio_modal_bottom_sheet_item_label_transform,
+    audio_modal_bottom_sheet_item_icon_width,
+    audio_modal_bottom_sheet_item_icon_margin_left,
+    audio_modal_bottom_sheet_item_icon_margin_right,
+    audio_modal_bottom_sheet_item_margin_left,
+    audio_modal_bottom_sheet_item_margin_right,
+    audio_modal_bottom_sheet_item_padding_left,
+    audio_modal_bottom_sheet_item_padding_right,
+  } = theme;
+
+  const maxWidth =
+    width -
+    (audio_modal_bottom_sheet_item_icon_width +
+      audio_modal_bottom_sheet_item_icon_margin_left +
+      audio_modal_bottom_sheet_item_icon_margin_right +
+      audio_modal_bottom_sheet_item_margin_left +
+      audio_modal_bottom_sheet_item_margin_right +
+      audio_modal_bottom_sheet_item_padding_left +
+      audio_modal_bottom_sheet_item_padding_right);
+
+  return {
+    fontFamily: platformSelect({
+      ios: audio_modal_bottom_sheet_item_label_family_ios_font_selector,
+      android: audio_modal_bottom_sheet_item_label_family_android_font_selector,
+    }),
+    letterSpacing: platformSelect({
+      ios: audio_modal_bottom_sheet_item_label_ios_letter_spacing,
+      android: audio_modal_bottom_sheet_item_label_android_letter_spacing,
+    }),
+    fontSize: audio_modal_bottom_sheet_item_label_font_size,
+    color: audio_modal_bottom_sheet_item_label_font_color,
+    focusColor: audio_modal_bottom_sheet_item_label_focus_font_color,
+    hoverSelectedColor:
+      audio_modal_bottom_sheet_item_label_hover_selected_font_color,
+    selectedColor: audio_modal_bottom_sheet_item_label_selected_font_color,
+    lineHeight: audio_modal_bottom_sheet_item_label_line_height,
+    marginBottom: audio_modal_bottom_sheet_item_label_margin_bottom,
+    marginTop: audio_modal_bottom_sheet_item_label_margin_top,
+    marginLeft: audio_modal_bottom_sheet_item_label_margin_left,
+    marginRight: audio_modal_bottom_sheet_item_label_margin_right,
+    transform: audio_modal_bottom_sheet_item_label_transform,
+    maxWidth,
+  };
+};
+
+export const getBottomSheetModalItemProps = (theme, width: number) => {
+  const {
+    audio_modal_bottom_sheet_item_background_color,
+    audio_modal_bottom_sheet_item_focus_background_color,
+    audio_modal_bottom_sheet_item_selected_background_color,
+    audio_modal_bottom_sheet_item_focused_selected_background_color,
+    audio_modal_bottom_sheet_item_corner_radius,
+    audio_modal_bottom_sheet_item_margin_bottom,
+    audio_modal_bottom_sheet_item_margin_left,
+    audio_modal_bottom_sheet_item_margin_right,
+    audio_modal_bottom_sheet_item_margin_top,
+    audio_modal_bottom_sheet_item_padding_bottom,
+    audio_modal_bottom_sheet_item_padding_left,
+    audio_modal_bottom_sheet_item_padding_right,
+    audio_modal_bottom_sheet_item_padding_top,
+  } = theme;
+
+  return {
+    backgroundColor: audio_modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor:
+      audio_modal_bottom_sheet_item_focus_background_color,
+    selectedBackgroundColor:
+      audio_modal_bottom_sheet_item_selected_background_color,
+    focusedSelectedBackgroundColor:
+      audio_modal_bottom_sheet_item_focused_selected_background_color,
+    borderRadius: audio_modal_bottom_sheet_item_corner_radius,
+    marginBottom: audio_modal_bottom_sheet_item_margin_bottom,
+    marginTop: audio_modal_bottom_sheet_item_margin_top,
+    marginLeft: audio_modal_bottom_sheet_item_margin_left,
+    marginRight: audio_modal_bottom_sheet_item_margin_right,
+    paddingTop: audio_modal_bottom_sheet_item_padding_top,
+    paddingBottom: audio_modal_bottom_sheet_item_padding_bottom,
+    paddingRight: audio_modal_bottom_sheet_item_padding_right,
+    paddingLeft: audio_modal_bottom_sheet_item_padding_left,
+    maxWidth: width,
+  };
+};
+
+export const getBottomSheetModalSelectedItemIcon = (theme) =>
+  theme["audio_modal_bottom_sheet_item_selected_icon"] || null;
+
+export const getBottomSheetModalDefaultItemIcon = (theme) =>
+  theme["audio_modal_bottom_sheet_item_default_icon"] || null;

package/src/Player/Helpers/VideoResizeMode.ts

@@ -1,7 +0,0 @@
-import keyMirror from "keymirror";
-
-export default keyMirror({
-  contain: null,
-  cover: null,
-  stretch: null,
-});