@applicaster/quick-brick-player 14.0.0-alpha.1615413083 → 14.0.0-alpha.2247415563

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.1615413083",
+  "version": "14.0.0-alpha.2247415563",
   "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-tv-transport-controls": "14.0.0-rc.7",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.1615413083",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.1615413083",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1615413083",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-alpha.2247415563",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-alpha.2247415563",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.2247415563",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.2247415563",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.2247415563",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
@@ -64,7 +64,6 @@
     "react-native-fs": "*",
     "react-native-gesture-handler": "*",
     "react-native-linear-gradient": "*",
-    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "react-native-web": "*",
     "react-native-webview": "*",

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,
@@ -9,6 +8,7 @@ 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 } from "./hooks";
 
@@ -30,10 +30,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 backgroundImageSource = useBackgroundImage(entry);
 
   const { minimisedHeight } = useModalAnimationContext();
 
@@ -70,8 +67,6 @@ export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
     };
   }, [changePlayerState$, minimisedHeight, imageWidth]);
 
-  if (!source) return null;
-
   return (
     <Animated.View
       style={[
@@ -81,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 { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 type Props = {
   entry: ZappEntry;
@@ -9,12 +8,9 @@ type Props = {
 };
 
 export const FlexImage = ({ entry, style }: Props) => {
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const backgroundImageSource = useBackgroundImage(entry);
 
-  if (!source) return null;
-
-  return <Image resizeMode="cover" style={style} source={source} />;
+  return (
+    <Image resizeMode="cover" style={style} source={backgroundImageSource} />
+  );
 };

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/PlayerView/TVPlayerView.tsx

@@ -10,8 +10,15 @@ import {
 
 const isTvOS = isTvOSPlatform();
 
+const shouldRenderTvOSPlayerView = (
+  isTvOS: boolean,
+  inline: boolean
+): boolean => {
+  return isTvOS && !inline;
+};
+
 export const TVPlayerView: React.FC<TVPlayerViewProps> = (props) => {
-  return isTvOS && !props.inline ? (
+  return shouldRenderTvOSPlayerView(isTvOS, props.inline) ? (
     <TvOSPlayerView {...(props as TvOSPlayerViewProps)} />
   ) : (
     <GenericTVPlayerView {...(props as GenericTVPlayerViewProps)} />

package/src/Player/PlayerView/types.ts

@@ -1,5 +1,6 @@
 import { ReactNode, ComponentType } from "react";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { ViewStyle } from "react-native";
 
 export interface PlayNextOverlayProps {
   playerIsDocked: boolean;
@@ -9,11 +10,14 @@ export interface PlayNextOverlayProps {
 }
 
 export interface PlayerComponentProps {
-  [key: string]: any;
+  ref: React.RefObject<any>;
+  listener: Record<string, any>;
+  configuration: Record<string, any>;
+  style: ViewStyle;
 }
 
 export interface AudioPlayerProps {
-  [key: string]: any;
+  style: ViewStyle;
 }
 
 export interface PlayerViewBaseProps {
@@ -24,7 +28,6 @@ export interface PlayerViewBaseProps {
   PlayerComponent: ComponentType<any>;
   playerProps: PlayerComponentProps;
   playNextProps: PlayNextOverlayProps;
-  AudioPlayer: ComponentType<any>;
   audioPlayerProps: AudioPlayerProps;
   transportControls?: ReactNode;
   inline?: boolean;

package/src/Player/index.tsx

@@ -1107,6 +1107,7 @@ export default class VideoPlayer extends React.Component<
               style: this.takeParentStyle,
               controller: this.props.controller,
             }}
+            audioPlayerProps={{ style: getStyle(styles.playerSize) }}
             playNextProps={{
               playerIsDocked: docked,
               playerId: this.props.playerId,