@applicaster/quick-brick-player 13.0.0-rc.138 → 13.0.0-rc.139

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.138",
+  "version": "13.0.0-rc.139",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.124",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.139",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.136",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.138",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.138",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.138",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.139",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.139",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.139",
     "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,6 @@
 import React, { PropsWithChildren } from "react";
 import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -10,7 +9,7 @@ import {
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 
-import { useChangePlayerState } from "./hooks";
+import { useChangePlayerState, useBackgroundImage } from "./hooks";
 
 const styles = StyleSheet.create({
   container: {
@@ -30,10 +29,7 @@ type Props = PropsWithChildren<{
 export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const source = useBackgroundImage({ entry });
 
   const { minimisedHeight } = useModalAnimationContext();
 

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Image, ImageStyle } from "react-native";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { useBackgroundImage } from "./hooks";
 
 type Props = {
   entry: ZappEntry;
@@ -9,10 +9,7 @@ type Props = {
 };
 
 export const FlexImage = ({ entry, style }: Props) => {
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const source = useBackgroundImage({ entry });
 
   if (!source) return null;
 

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

@@ -1 +1,3 @@
 export { useChangePlayerState } from "./useChangePlayerState";
+
+export { useBackgroundImage } from "./useBackgroundImage";

package/src/Player/AudioLayer/Layout/PlayerImage/hooks/useBackgroundImage.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { useZStore } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { getBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
+
+const audioPlayerImageKeySelector = (config) => config?.audio_player_image_key;
+
+const audioPlayerBackgroundImageSelector = (config) =>
+  config?.audio_player_background_image;
+
+type Props = {
+  entry: ZappEntry;
+};
+
+type Return = {
+  uri: string;
+};
+
+export const useBackgroundImage = ({ entry }: Props): Return => {
+  const configuration = useZStore("playerConfiguration");
+
+  const audio_player_image_key = configuration(audioPlayerImageKeySelector);
+
+  const audio_player_background_image = configuration(
+    audioPlayerBackgroundImageSelector
+  );
+
+  const pluginConfiguration = React.useMemo(
+    () => ({
+      audio_player_image_key,
+      audio_player_background_image,
+    }),
+    [audio_player_image_key, audio_player_background_image]
+  );
+
+  const source = React.useMemo(
+    () => ({
+      uri: getBackgroundImage({
+        entry,
+        plugin_configuration: pluginConfiguration,
+      }),
+    }),
+    [entry, pluginConfiguration]
+  );
+
+  return source;
+};