@applicaster/quick-brick-player 13.0.0-alpha.5771418585 → 13.0.0-alpha.5928753399

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.5771418585",
+  "version": "13.0.0-alpha.5928753399",
   "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.42",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.42",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.5771418585",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.5771418585",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5771418585",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.5928753399",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.5928753399",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.5928753399",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5928753399",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
@@ -61,12 +60,9 @@
     "@applicaster/zapp-react-native-tvos-ui-components": "*",
     "@babel/runtime": "*",
     "@react-native-community/netinfo": "*",
-    "@types/node": "*",
-    "@types/react-native": "0.69.6",
     "immer": "*",
-    "react": "17.0.2",
-    "react-hot-loader": "*",
-    "react-native": "0.68.6",
+    "react": "*",
+    "react-native": "*",
     "react-native-fs": "*",
     "react-native-gesture-handler": "*",
     "react-native-linear-gradient": "*",

package/src/CellPlayer/Assets/AssetsComponent.tsx

@@ -55,6 +55,11 @@ const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
       return;
     }
 
+    // initial state setup - show correct mute/unmute icon based on current state
+    if (player?.playerState?.isReadyToPlay) {
+      setImageUri(player.getIsMuted() ? asset.active : asset.inactive);
+    }
+
     // active action = muted, inactive = unmuted
     return player.addListener({
       id: liveImageButtonsListenerKey,
@@ -73,10 +78,17 @@ const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
           setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
         },
         onPlayerClose: () => {
-          setImageUri(null);
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(null);
+          }
         },
         onVideoEnd: () => {
-          setImageUri(null);
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(null);
+          }
+        },
+        onPlayerResume: () => {
+          setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
         },
       },
     });
@@ -93,7 +105,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export function AssetComponent(props: CellActionAssetComponentProps) {
+function AssetImage(props: CellActionAssetComponentProps) {
   const { cellUUID: playerId, asset } = props;
   const [imageUri, setImageUri] = useState<Asset>(null);
 
@@ -108,3 +120,5 @@ export function AssetComponent(props: CellActionAssetComponentProps) {
 
   return <View />;
 }
+
+export const AssetComponent = React.memo(AssetImage);

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ViewStyle, View } from "react-native";
+import { 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";
@@ -40,6 +40,8 @@ import {
   SLEEP_TIMER_OFF,
 } from "./SleepTimerManager";
 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";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -57,6 +59,7 @@ type Configuration = {
   [key: string]: any;
   magic_background?: boolean;
   audio_player_background_image_query?: string;
+  audio_player_background_image_default_color?: string;
   tablet_landscape_sidebar_width?: string;
   tablet_landscape_player_container_background_color?: string;
 };
@@ -78,8 +81,7 @@ type Props = {
   isTabletPortrait?: boolean;
 };
 
-export const defaultAspectRatioWidth = (height: number): number =>
-  (height / 9) * 16;
+const { width: SCREEN_WIDTH } = ScreenDimensions.get("screen");
 
 const Styles = {
   mainContainer: (style: ViewStyle) => {
@@ -105,7 +107,11 @@ const Styles = {
     height: 96,
     marginHorizontal: 24,
   },
-  playerDetails: { marginTop: 60 },
+  playerDetails: {
+    marginTop: 60,
+    alignSelf: "center",
+    width: SCREEN_WIDTH - PADDING_HORIZONTAL * 2,
+  },
 
   linearGradient: {
     flex: 1,
@@ -123,9 +129,12 @@ const sleeps = [
   { label: "2 hours", value: 120 },
 ];
 
+const edges: Edge[] = ["right", "left", "top"];
+
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
+  const theme = useTheme();
 
   const {
     docked,
@@ -355,8 +364,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const edges = React.useMemo<Edge[]>(() => ["right", "left", "top"], [docked]);
-
   const ContainerView = SafeAreaView;
 
   const MainContent = React.useMemo(() => {
@@ -442,21 +449,26 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   ]);
 
   if (configuration.magic_background) {
-    const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
+    const baseUrl = imageSrcFromMediaItem(entry, null);
 
     const queryParamName =
       configuration.audio_player_background_image_query || "width";
 
+    const defaultBackgroundColor =
+      configuration.audio_player_background_image_default_color ||
+      theme?.app_background_color;
+
     const queryParamValue = 15;
 
-    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+    const url =
+      baseUrl && addQueryParam(baseUrl, queryParamName, queryParamValue);
 
     return (
       <MagicBG
         image={url}
         fallbackUrl={baseUrl}
         colors={entry?.extensions?.backgroundColors}
-        defaultColor="#000000"
+        defaultColor={defaultBackgroundColor}
       >
         {MainContent}
       </MagicBG>

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEffect, useMemo, useState } from "react";
 import * as R from "ramda";
-import { View } from "react-native";
+import { View, Dimensions as ScreenDimensions } from "react-native";
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
 import {
@@ -33,8 +33,13 @@ import {
   ComponentAnimationType,
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 import DockedLayout from "./DockedLayout";
 import { isValidDate } from "../../Utils";
+import { calculateBorderRadius } from "../utils";
+
+const getAudioPlayerWidthForTablet = (isPortraitMode: boolean) =>
+  isPortraitMode ? 463 : 350;
 
 type Dimensions = {
   width: number;
@@ -79,6 +84,9 @@ type LayoutProps = {
   defaultDimensions: Dimensions;
 };
 
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
+  ScreenDimensions.get("screen");
+
 const Styles = {
   container: { flex: 1 },
   tabletContainer: (isPortraitMode: boolean) => ({
@@ -86,42 +94,63 @@ const Styles = {
     alignItems: "center",
     justifyContent: isPortraitMode ? "center" : "flex-start",
   }),
-  playerImageWrapper: {
+  playerImageWrapper: (docked: boolean) => ({
     width: "100%",
     maxHeight: 750,
-    marginTop: 80,
+    marginTop: docked ? 80 : 20,
+  }),
+  playerInfoWrapper: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "space-between",
   },
-  tabletLayout: {
-    width: 463,
+  tabletLayout: (isPortraitMode: boolean) => ({
+    width: getAudioPlayerWidthForTablet(isPortraitMode),
     marginBottom: 80,
-  },
+    paddingHorizontal: undefined, // override paddingHorizontal
+  }),
   controls: (isTablet: boolean, isLiveShowFullControls: boolean) => ({
     height: isTablet ? 64 : 50,
-    marginHorizontal: 10,
+    marginHorizontal: isTablet ? undefined : 10,
     justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
   }),
-  backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
-    const mobileValue = dimensions.width
+  backgroundImageContainer: (
+    dimensions: Dimensions,
+    isTablet: boolean,
+    isPortraitMode: boolean
+  ) => {
+    if (isTablet) {
+      const size = getAudioPlayerWidthForTablet(isPortraitMode);
+
+      return {
+        width: size,
+        height: size,
+      };
+    }
+
+    const mobileValue = dimensions?.width
       ? dimensions.width - PADDING_HORIZONTAL * 2
-      : 330;
+      : SCREEN_WIDTH - PADDING_HORIZONTAL * 2;
 
     return {
-      width: isTablet ? 463 : mobileValue,
-      height: isTablet ? 463 : mobileValue,
+      width: mobileValue,
+      height: mobileValue,
     };
   },
   backgroundImageContainerImageStyle: (
     isTablet: boolean,
     docked: boolean,
     startComponentsAnimation: boolean,
-    isActiveGesture: boolean
+    isActiveGesture: boolean,
+    playerAnimationState: PlayerAnimationStateT
   ) => ({
-    borderRadius:
-      (startComponentsAnimation && isActiveGesture) || docked
-        ? 0
-        : isTablet
-          ? 24
-          : 10,
+    borderRadius: calculateBorderRadius(
+      isTablet,
+      docked,
+      startComponentsAnimation,
+      isActiveGesture,
+      playerAnimationState
+    ),
   }),
 
   paddingHorizontal: {
@@ -173,8 +202,7 @@ export default function DefaultLayout(props: LayoutProps) {
   } = props;
 
   const isTablet = useIsTablet();
-  const { width, height } = dimensions;
-  const isPortraitMode = width < height;
+  const isPortraitMode = SCREEN_WIDTH < SCREEN_HEIGHT;
   const isLiveContent = playerState.isLive;
   const docked = layoutState.docked;
 
@@ -330,12 +358,15 @@ export default function DefaultLayout(props: LayoutProps) {
 
   const defaultImageDimensions = React.useMemo(
     () =>
-      defaultDimensions &&
-      Styles.backgroundImageContainer(defaultDimensions, isTablet),
-    [defaultDimensions, isTablet]
+      Styles.backgroundImageContainer(
+        defaultDimensions,
+        isTablet,
+        isPortraitMode
+      ),
+    [defaultDimensions, isTablet, isPortraitMode]
   );
 
-  const { isActiveGesture, startComponentsAnimation } =
+  const { isActiveGesture, startComponentsAnimation, playerAnimationState } =
     useModalAnimationContext();
 
   return (
@@ -344,7 +375,10 @@ export default function DefaultLayout(props: LayoutProps) {
         isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
       }
     >
-      <AnimationComponent animationType={ComponentAnimationType.componentFade}>
+      <AnimationComponent
+        animationType={ComponentAnimationType.componentFade}
+        style={isTablet ? Styles.playerInfoWrapper : undefined}
+      >
         <TransportInfo
           content={entry}
           value={value}
@@ -356,13 +390,16 @@ export default function DefaultLayout(props: LayoutProps) {
       </AnimationComponent>
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}
-        style={isTablet ? Styles.playerImageWrapper : undefined}
+        style={isTablet ? Styles.playerImageWrapper(docked) : undefined}
       >
         <AnimationComponent
           animationType={ComponentAnimationType.moveComponentHorizontal}
           additionalData={{
             disableAnimatedComponent: !isTablet,
-            moveValue: (dimensions.width - 463) / 2,
+            moveValue:
+              (dimensions.width -
+                getAudioPlayerWidthForTablet(isPortraitMode)) /
+              2,
             extraAnimation: !isTablet
               ? {
                   [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
@@ -375,12 +412,17 @@ export default function DefaultLayout(props: LayoutProps) {
         >
           <PlayerImageBackground
             entry={entry}
-            style={Styles.backgroundImageContainer(dimensions, isTablet)}
+            style={Styles.backgroundImageContainer(
+              dimensions,
+              isTablet,
+              isPortraitMode
+            )}
             imageStyle={Styles.backgroundImageContainerImageStyle(
               isTablet,
               docked,
               startComponentsAnimation,
-              isActiveGesture
+              isActiveGesture,
+              playerAnimationState
             )}
             defaultImageDimensions={defaultImageDimensions}
           />
@@ -391,7 +433,7 @@ export default function DefaultLayout(props: LayoutProps) {
       <View
         style={[
           Styles.paddingHorizontal,
-          isTablet ? Styles.tabletLayout : undefined,
+          isTablet ? Styles.tabletLayout(isPortraitMode) : undefined,
         ]}
       >
         {!docked && (
@@ -408,6 +450,7 @@ export default function DefaultLayout(props: LayoutProps) {
             {needsToShowProgressBar ? (
               <View>
                 <ProgressBar
+                  name={"audio-default-layout"}
                   content={entry}
                   value={value}
                   visible={true}

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

@@ -133,24 +133,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 [
       {
@@ -230,7 +217,7 @@ export default function DockedLayout(props: LayoutProps) {
   } = useModalAnimationContext();
 
   const maximazeVideoModal = React.useCallback(
-    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximize),
     []
   );
 
@@ -247,6 +234,7 @@ export default function DockedLayout(props: LayoutProps) {
       {!playerState.isLive &&
       (layoutState.docked || startComponentsAnimation) ? (
         <ProgressBar
+          name={"audio-docked-layout"}
           content={entry}
           value={value}
           visible={visible}
@@ -302,7 +290,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/AudioLayer/Layout/defaultLayoutsConts.ts

@@ -17,7 +17,7 @@ const playbackButtonMargins = (
   isTablet: boolean,
   isLiveShowFullControls: boolean
 ): number =>
-  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? 95 : 40;
+  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? undefined : 40;
 
 export const PADDING_HORIZONTAL = 15;
 

package/src/Player/AudioLayer/MagicBG/index.tsx

@@ -47,7 +47,7 @@ const fetchPaletteAndDominantColor = async (imageUrl: string) => {
   const dominant = await getDominantColor(imageUrl);
   const dominantColor = `rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`;
 
-  return { gradientColors: colors.slice(0, 2), dominantColor };
+  return { gradientColors: colors.slice(0, 2).reverse(), dominantColor };
 };
 
 export const MagicBG: React.FC<MagicBGProps> = ({

package/src/Player/AudioLayer/utils.ts

@@ -1,4 +1,8 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import {
+  PlayerAnimationStateEnum,
+  PlayerAnimationStateT,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 export const NAMESPACE = "audio-player";
@@ -31,3 +35,23 @@ export const formatSpeed = (value: number) => {
   // Return the formatted string with "speed_" prefix
   return `speed_${formattedValue}`;
 };
+
+export const calculateBorderRadius = (
+  isTablet: boolean,
+  docked: boolean,
+  startComponentsAnimation: boolean,
+  isActiveGesture: boolean,
+  playerAnimationState: PlayerAnimationStateT
+): number => {
+  const shouldRemoveBorderRadius =
+    (startComponentsAnimation &&
+      isActiveGesture &&
+      playerAnimationState !== PlayerAnimationStateEnum.maximize) ||
+    docked;
+
+  if (shouldRemoveBorderRadius) {
+    return 0;
+  }
+
+  return isTablet ? 24 : 10;
+};

package/src/Player/index.tsx

@@ -721,7 +721,7 @@ export default class VideoPlayer extends React.Component<
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
-      entry?.type?.value === "audio";
+      entry?.type?.value?.includes?.("audio");
 
     const getStyle = (dimensions) => {
       const generalStyles = isAudioItem ? styles.audio : styles.video;
@@ -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
@@ -806,7 +811,6 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
-      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -817,7 +821,14 @@ export default class VideoPlayer extends React.Component<
       accessibilityProps: getAllAccessibilityProps(
         this.getPluginConfiguration()
       ),
-    }; // rate temporary removed, because of bug with subtitles
+    };
+
+    if (!isAppleTV()) {
+      // TODO: Move to RN method and remove from props.
+      // Causes tvOS bug: native player passes rate on fast seek,
+      // RN returns it and it breaks playback.
+      nativeProps.rate = rate;
+    }
 
     if (
       this.isReactNativeMethodsSupported() &&
@@ -960,9 +971,6 @@ export default class VideoPlayer extends React.Component<
       ) : null;
     };
 
-    const isFullScreenAudioPlayer =
-      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
-
     const sharedWrapperViewProps = {
       style,
       entry,
@@ -989,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}