@applicaster/quick-brick-player 12.0.9-rc.0 → 12.0.9-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.9-rc.0",
+  "version": "12.0.9-rc.2",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -38,9 +38,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "12.0.7",
     "@applicaster/quick-brick-tv-transport-controls": "12.0.4",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.9-rc.0",
-    "@applicaster/zapp-react-native-ui-components": "12.0.9-rc.0",
-    "@applicaster/zapp-react-native-utils": "12.0.9-rc.0",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.9-rc.2",
+    "@applicaster/zapp-react-native-ui-components": "12.0.9-rc.2",
+    "@applicaster/zapp-react-native-utils": "12.0.9-rc.2",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/Player/AnimationPlayerWrapper/index.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+type AnimationPlayerWrapperProps = {
+  isAudioItem: number;
+  children: React.ReactNode;
+  playerDimensions: PlayerDimensionsProp;
+  style?: { [K: string]: any };
+};
+
+export const AnimationPlayerWrapper = ({
+  isAudioItem,
+  children,
+  playerDimensions,
+  style,
+}: AnimationPlayerWrapperProps) => {
+  if (!isAudioItem) {
+    return (
+      <AnimationComponent
+        animationType={ComponentAnimationType.player}
+        additionalData={playerDimensions}
+        style={style}
+      >
+        {children}
+      </AnimationComponent>
+    );
+  }
+
+  return <>{children}</>;
+};

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,7 @@ import {
   SLEEP_TIMER_OFF,
 } from "./SleepTimerManager";
 import { SpeedController, PlaybackSpeed, DEFAULT_SPEED } from "./SpeedManager";
+import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -78,8 +79,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 +105,11 @@ const Styles = {
     height: 96,
     marginHorizontal: 24,
   },
-  playerDetails: { marginTop: 60 },
+  playerDetails: {
+    marginTop: 60,
+    alignSelf: "center",
+    width: SCREEN_WIDTH - PADDING_HORIZONTAL * 2,
+  },
 
   linearGradient: {
     flex: 1,
@@ -442,7 +446,7 @@ 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";

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

@@ -375,6 +375,7 @@ export default function DefaultLayout(props: LayoutProps) {
         >
           <PlayerImageBackground
             entry={entry}
+            docked={docked}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
             imageStyle={Styles.backgroundImageContainerImageStyle(
               isTablet,

package/src/Player/index.tsx

@@ -40,6 +40,7 @@ import { PlayerAnalyticsManager } from "@applicaster/zapp-react-native-utils/ana
 import { PlayerAnalyticsTrackerI } from "@applicaster/zapp-react-native-utils/analyticsUtils/playerAnalyticsTracker";
 
 import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
+import { AnimationPlayerWrapper } from "./AnimationPlayerWrapper";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -1049,9 +1050,9 @@ export default class VideoPlayer extends React.Component<
                   )}
 
                   {(!castAction?.state?.connected || supportNativeCast) && (
-                    <AnimationComponent
-                      animationType={ComponentAnimationType.player}
-                      additionalData={playerDimensions}
+                    <AnimationPlayerWrapper
+                      playerDimensions={playerDimensions}
+                      isAudioItem={isAudioItem}
                       style={getStyle(playerDimensions)}
                     >
                       <this.props.PlayerComponent
@@ -1069,7 +1070,7 @@ export default class VideoPlayer extends React.Component<
                       >
                         {this.childrenWithPlayNext()}
                       </this.props.PlayerComponent>
-                    </AnimationComponent>
+                    </AnimationPlayerWrapper>
                   )}
                 </View>