@applicaster/quick-brick-player 14.0.0-rc.13 → 14.0.0-rc.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-rc.13",
+  "version": "14.0.0-rc.15",
   "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": "14.0.0-rc.11",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.14",
     "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.13",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.13",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.13",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.13",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.15",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.15",
+    "@applicaster/zapp-react-native-utils": "14.0.0-rc.15",
     "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

@@ -8,8 +8,9 @@ import {
   DURATION_TO_MAXIMIZE,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
-import { useChangePlayerState, useBackgroundImage } from "./hooks";
+import { useChangePlayerState } from "./hooks";
 
 const styles = StyleSheet.create({
   container: {
@@ -29,7 +30,7 @@ type Props = PropsWithChildren<{
 export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
-  const source = useBackgroundImage({ entry });
+  const backgroundImageSource = useBackgroundImage(entry);
 
   const { minimisedHeight } = useModalAnimationContext();
 
@@ -66,8 +67,6 @@ export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
     };
   }, [changePlayerState$, minimisedHeight, imageWidth]);
 
-  if (!source) return null;
-
   return (
     <Animated.View
       style={[
@@ -77,7 +76,7 @@ export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
         },
       ]}
     >
-      <Image resizeMode="cover" style={style} source={source} />
+      <Image resizeMode="cover" style={style} source={backgroundImageSource} />
     </Animated.View>
   );
 };

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Image, ImageStyle } from "react-native";
-
-import { useBackgroundImage } from "./hooks";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 type Props = {
   entry: ZappEntry;
@@ -9,9 +8,9 @@ type Props = {
 };
 
 export const FlexImage = ({ entry, style }: Props) => {
-  const source = useBackgroundImage({ entry });
-
-  if (!source) return null;
+  const backgroundImageSource = useBackgroundImage(entry);
 
-  return <Image resizeMode="cover" style={style} source={source} />;
+  return (
+    <Image resizeMode="cover" style={style} source={backgroundImageSource} />
+  );
 };

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

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

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { compose, map, propOr, split, take, trim } from "ramda";
 import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { TransportInfo as MobileTransportInfo } from "@applicaster/quick-brick-mobile-transport-controls";
@@ -16,6 +15,7 @@ import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "../const";
 import { withDebug } from "../debug";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { isSmallTabletHeight } from "../utils";
+import { getPlayerActionButtons } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 const styles = StyleSheet.create({
   container: {
@@ -85,14 +85,8 @@ export const TransportInfo = ({
   );
 
   const actionButtons = React.useMemo(
-    () =>
-      compose(
-        take(2),
-        map(trim),
-        split(","),
-        propOr("", "player_action_buttons")
-      )(configuration),
-    [configuration.player_action_buttons]
+    () => getPlayerActionButtons(configuration),
+    [configuration]
   );
 
   return (

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

@@ -1,46 +0,0 @@
-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;
-};