@applicaster/quick-brick-player 14.0.0-alpha.1661204539 → 14.0.0-alpha.2332850672

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.1661204539",
+  "version": "14.0.0-alpha.2332850672",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,10 +36,10 @@
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.124",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.1661204539",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.1661204539",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1661204539",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.7",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.2332850672",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.2332850672",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.2332850672",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

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

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { getBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -25,14 +25,23 @@ type Props = PropsWithChildren<{
   style?: ImageStyle | ImageStyle[];
   imageWidth: number;
   docked: boolean;
+  configuration: QuickBrickPlayer.AudioPlayerProps["configuration"];
 }>;
 
-export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
+export const AnimatedImage = ({
+  entry,
+  style,
+  imageWidth,
+  docked,
+  configuration,
+}: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
   const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
+    () => ({
+      uri: getBackgroundImage({ entry, plugin_configuration: configuration }),
+    }),
+    [entry, configuration]
   );
 
   const { minimisedHeight } = useModalAnimationContext();

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

@@ -1,17 +1,19 @@
 import * as React from "react";
 import { Image, ImageStyle } from "react-native";
-
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { getBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 type Props = {
   entry: ZappEntry;
   style?: ImageStyle;
+  configuration: QuickBrickPlayer.AudioPlayerProps["configuration"];
 };
 
-export const FlexImage = ({ entry, style }: Props) => {
+export const FlexImage = ({ entry, style, configuration }: Props) => {
   const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
+    () => ({
+      uri: getBackgroundImage({ entry, plugin_configuration: configuration }),
+    }),
+    [entry, configuration]
   );
 
   if (!source) return null;

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

@@ -94,6 +94,7 @@ export const PlayerImage = (props: Props) => {
               <FlexImage
                 entry={entry}
                 style={styles.backgroundImageContainer}
+                configuration={configuration}
               />
             </View>
           ) : (
@@ -103,6 +104,7 @@ export const PlayerImage = (props: Props) => {
               style={[styles.backgroundImageContainer, { borderRadius }]}
               imageWidth={imageWidth}
               docked={docked}
+              configuration={configuration}
             />
           )}
         </View>

package/src/Player/index.tsx

@@ -33,7 +33,6 @@ import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { getTargetScreenDataFromEntry } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
-import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 import {
   AnimationComponent,
   ComponentAnimationType,
@@ -42,7 +41,10 @@ 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 { isAudioItem as isAudioItemUtil } from "@applicaster/zapp-react-native-utils/playerUtils";
+import {
+  isAudioItem as isAudioItemUtil,
+  isInlineTV as isInlineTVUtil,
+} from "@applicaster/zapp-react-native-utils/playerUtils";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -799,7 +801,7 @@ export default class VideoPlayer extends React.Component<
     // TODO: Get screen data more reliable way useCurrentScreenData
     const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
 
-    const isInlineTV = screenData?.ui_components?.length > 0 && isTV();
+    const isInlineTV = isInlineTVUtil(screenData);
 
     let platformSpecificProps: any = isApplePlatform()
       ? {
@@ -810,7 +812,7 @@ export default class VideoPlayer extends React.Component<
     const supportsNativeControls =
       !!this.props.controller?.supportsNativeControls?.();
 
-    const controls = isAppleTV()
+    const controls = isTvOS
       ? (supportsNativeControls && !isInlineTV) || !!this.getPlayNextData()
       : supportsNativeControls && !this.getPlayNextData();
 
@@ -857,7 +859,7 @@ export default class VideoPlayer extends React.Component<
       ),
     };
 
-    if (!isAppleTV()) {
+    if (!isTvOS) {
       // 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.
@@ -1139,7 +1141,7 @@ export default class VideoPlayer extends React.Component<
     const renderTVPlayer = () => {
       return (
         <View style={this.takeParentStyle} testID={"player-view"}>
-          {!isTvOS && isAudioItem ? (
+          {isAudioItem && (isInlineTV || !isTvOS) ? (
             <AudioPlayer
               style={getStyle(styles.audioPlayerSize)}
               audio_item={entry}
@@ -1156,7 +1158,7 @@ export default class VideoPlayer extends React.Component<
             pluginConfiguration={this.getPluginConfiguration()}
             controller={this.props.controller}
           >
-            {this.childrenWithExtensions()}
+            {!isInlineTV && this.childrenWithExtensions()}
           </this.props.PlayerComponent>
 
           {renderTransportControls(this.takeParentStyle)}