@applicaster/quick-brick-player 13.0.0-alpha.6179233127 → 13.0.0-alpha.6400875052

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.6179233127",
+  "version": "13.0.0-alpha.6400875052",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo 'skipping ts build for core packages'"
   },
   "files": [
@@ -36,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.66",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.88",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.6179233127",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.6179233127",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6179233127",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.6400875052",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.6400875052",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6400875052",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

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,15 @@ 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,
+  getLiveUrl,
+} from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import {
   AnimationComponent,
@@ -27,13 +40,6 @@ import {
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PADDING_HORIZONTAL } from "./Layout/defaultLayoutsConts";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
-import {
-  speed_0_8,
-  speed_1,
-  speed_1_2,
-  speed_1_5,
-  speed_2,
-} from "@applicaster/quick-brick-mobile-transport-controls";
 import {
   SleepTimerController,
   SleepTimerState,
@@ -42,6 +48,9 @@ import {
 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 { sleepTimerOptions } from "../Const/sleepTimerOptions";
+import { speedOptions } from "../Const/speedOptions";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -83,51 +92,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 edges: Edge[] = ["right", "left", "top"];
 
@@ -147,14 +122,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     isTabletPortrait,
   } = props;
 
-  const speeds = [
-    { asset: configuration["speed_0_8"] || speed_0_8, value: 0.8 },
-    { asset: configuration["speed_1"] || speed_1, value: 1.0 },
-    { asset: configuration["speed_1_2"] || speed_1_2, value: 1.2 },
-    { asset: configuration["speed_1_5"] || speed_1_5, value: 1.5 },
-    { asset: configuration["speed_2"] || speed_2, value: 2.0 },
-  ];
-
   const isTablet = useIsTablet();
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
@@ -202,8 +169,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     height: 0,
   });
 
-  const navigator = useNavigation();
-
   const { maximiseVideoModal } = useNavigation();
 
   const onLayout = (event: any) => {
@@ -293,44 +258,48 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   );
 
   const onSpeedButtonPress = React.useCallback(() => {
-    navigator.openModalBottomSheet({
+    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"],
       },
     });
-  }, [
-    playbackSpeed,
-    setPlaybackSpeed,
-    navigator,
-    onSpeedSelect,
-    configuration["playback_speed_title"],
-  ]);
+  }, [playbackSpeed, onSpeedSelect, configuration["playback_speed_title"]]);
 
   const onSleepButtonPress = React.useCallback(() => {
-    navigator.openModalBottomSheet({
+    openBottomSheetModal({
       modalBottomSheetContentProps: {
         items: [
           {
             label: configuration["playback_sleep_off_label"],
             value: 0,
           },
-        ].concat(sleeps),
+        ].concat(sleepTimerOptions),
         current_selection: sleepTimerState.timer,
         onPress: onSleepSelect,
         title: configuration["playback_sleep_title"],
+        itemProps: getBottomSheetModalItemProps,
+        iconProps: getBottomSheetModalIconProps,
+        labelProps: getBottomSheetModalLabelProps,
+        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
+        iconPlacement: "right",
       },
       options: {
         supportedOrientations: ["portrait"],
       },
     });
   }, [
-    navigator,
     sleepTimerState.timer,
     configuration["playback_sleep_title"],
     configuration["playback_sleep_off_label"],
@@ -368,7 +337,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const MainContent = React.useMemo(() => {
     return (
-      <ContainerView style={Styles.mainContainer(style)} edges={edges}>
+      <ContainerView style={[style, Styles.playerContainer]} edges={edges}>
         <AnimationComponent
           animationType={ComponentAnimationType.moveUpComponent}
           additionalData={{ saveArea: true }}
@@ -412,11 +381,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/DockedLayout.tsx

@@ -19,6 +19,7 @@ import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Compo
 import {
   AnimationComponent,
   ComponentAnimationType,
+  defaultAspectRatioWidth,
   PlayerAnimationStateEnum,
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
@@ -113,7 +114,7 @@ const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
 ): ViewStyle => ({
-  paddingLeft: addPadding ? minimisedHeight || 100 : 0,
+  paddingLeft: addPadding ? defaultAspectRatioWidth(minimisedHeight) || 100 : 0,
 });
 
 const animatedContainerStyle = (docked: boolean): ViewStyle => ({
@@ -133,24 +134,11 @@ const backgroundImageStyle = (
 });
 
 const controlButtons = (
-  isPlayNextEnabled: boolean,
   live: boolean,
   paused: boolean,
   buffering: boolean,
   playerId: string
 ): Array<ControlsButton> => {
-  if (isPlayNextEnabled) {
-    return [
-      {
-        size: "medium",
-        name: "play_next",
-        icon: "play_next",
-        preferredFocus: true,
-        style: styles.buttons,
-      },
-    ];
-  }
-
   if (buffering) {
     return [
       {
@@ -303,7 +291,6 @@ export default function DockedLayout(props: LayoutProps) {
             value={value}
             visible={visible}
             buttons={R.partial(controlButtons, [
-              playNextData,
               playerState.isLive && liveButton,
             ])}
             style={styles.playPauseButton}

package/src/Player/Const/sleepTimerOptions.ts

@@ -0,0 +1,10 @@
+export const sleepTimerOptions = [
+  // { 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 },
+];

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/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_focusected_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,
+    focusectedBackgroundColor:
+      audio_modal_bottom_sheet_item_focusected_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/index.tsx

@@ -791,8 +791,13 @@ export default class VideoPlayer extends React.Component<
       controls: shouldUseNativeControls,
     };
 
+    const isFullScreenAudioPlayer =
+      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
+
+    const isAudioPlayer = isFullScreenAudioPlayer && isAudioItem;
+
     const pictureInPictureEnabled =
-      this.props.pluginConfiguration?.pictureInPictureEnabled;
+      this.props.pluginConfiguration?.pictureInPictureEnabled && !isAudioPlayer;
 
     const nativeProps = {
       entry, // Must be passed first in list
@@ -966,9 +971,6 @@ export default class VideoPlayer extends React.Component<
       ) : null;
     };
 
-    const isFullScreenAudioPlayer =
-      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
-
     const sharedWrapperViewProps = {
       style,
       entry,
@@ -995,7 +997,8 @@ export default class VideoPlayer extends React.Component<
 
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
-        <View style={containerStyle}>
+        // Ensure the View remains in the native hierarchy for proper rendering and interaction
+        <View collapsable={false} style={containerStyle}>
           {!castAction?.state?.connected || supportNativeCast ? (
             <this.props.PlayerComponent
               ref={this._assignRoot}
@@ -1051,7 +1054,10 @@ export default class VideoPlayer extends React.Component<
                   {!castAction?.state?.connected || supportNativeCast ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
-                      additionalData={playerDimensions}
+                      additionalData={{
+                        ...playerDimensions,
+                        disableAnimatedComponent: isAudioItem,
+                      }}
                       style={getStyle(playerDimensions)}
                     >
                       <this.props.PlayerComponent