@applicaster/quick-brick-player 14.0.0-rc.10 → 14.0.0-rc.12

package/package.json

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

package/src/Player/PlayerView/GenericTVPlayerView.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { PlayNextOverlay } from "../PlayNextOverlay";
+import { GenericTVPlayerViewProps } from "./types";
+import { AudioPlayer } from "@applicaster/zapp-react-native-ui-components/Components/AudioPlayer";
+
+export const GenericTVPlayerView: React.FC<GenericTVPlayerViewProps> = ({
+  children,
+  type,
+  PlayerComponent,
+  pluginConfiguration,
+  playerProps,
+  playNextProps,
+  audioPlayerProps,
+  transportControls,
+  entry,
+  inline,
+}) => {
+  return (
+    <>
+      {type === "audio" && inline ? (
+        <AudioPlayer
+          audio_item={entry}
+          plugin_configuration={pluginConfiguration}
+          {...audioPlayerProps}
+        />
+      ) : null}
+      <PlayerComponent
+        pluginConfiguration={pluginConfiguration}
+        {...playerProps}
+      >
+        {children}
+      </PlayerComponent>
+      {transportControls}
+      {playNextProps.playNextData ? (
+        <PlayNextOverlay
+          item={entry}
+          pluginConfiguration={pluginConfiguration}
+          {...playNextProps}
+        />
+      ) : null}
+    </>
+  );
+};

package/src/Player/PlayerView/TVPlayerView.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { TvOSPlayerView } from "./TvOSPlayerView";
+import { GenericTVPlayerView } from "./GenericTVPlayerView";
+import {
+  GenericTVPlayerViewProps,
+  TvOSPlayerViewProps,
+  TVPlayerViewProps,
+} from "./types";
+
+const isTvOS = isTvOSPlatform();
+
+const shouldRenderTvOSPlayerView = (
+  isTvOS: boolean,
+  inline: boolean
+): boolean => {
+  return isTvOS && !inline;
+};
+
+export const TVPlayerView: React.FC<TVPlayerViewProps> = (props) => {
+  return shouldRenderTvOSPlayerView(isTvOS, props.inline) ? (
+    <TvOSPlayerView {...(props as TvOSPlayerViewProps)} />
+  ) : (
+    <GenericTVPlayerView {...(props as GenericTVPlayerViewProps)} />
+  );
+};

package/src/Player/PlayerView/TvOSPlayerView.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { View } from "react-native";
+import { PlayNextOverlay } from "../PlayNextOverlay";
+import { TvOSPlayerViewProps } from "./types";
+
+const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
+
+export const TvOSPlayerView: React.FC<TvOSPlayerViewProps> = ({
+  children,
+  type,
+  PlayerComponent,
+  pluginConfiguration,
+  playerProps,
+  playNextProps,
+  nativePlayerIsReady,
+  transportControls,
+  entry,
+  inline,
+}) => {
+  return (
+    <>
+      <PlayerComponent
+        pluginConfiguration={pluginConfiguration}
+        {...playerProps}
+      >
+        {!inline ? (
+          <>
+            {type === "audio" && nativePlayerIsReady ? (
+              <View
+                nativeID={AUDIO_PLAYER_NATIVE_ID}
+                key={AUDIO_PLAYER_NATIVE_ID}
+              >
+                {children}
+              </View>
+            ) : (
+              children
+            )}
+            {playNextProps.playNextData ? (
+              <PlayNextOverlay
+                item={entry}
+                pluginConfiguration={pluginConfiguration}
+                {...playNextProps}
+              />
+            ) : null}
+          </>
+        ) : null}
+      </PlayerComponent>
+      {transportControls}
+    </>
+  );
+};

package/src/Player/PlayerView/types.ts

@@ -0,0 +1,42 @@
+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;
+  playerId?: string;
+  playNextData: PlayNextData;
+  setNextVideoPreloadThresholdPercentage: (percentage: number) => void;
+}
+
+export interface PlayerComponentProps {
+  ref: React.RefObject<any>;
+  listener: Record<string, any>;
+  configuration: Record<string, any>;
+  style: ViewStyle;
+}
+
+export interface AudioPlayerProps {
+  style: ViewStyle;
+}
+
+export interface PlayerViewBaseProps {
+  children?: ReactNode;
+  type: "audio" | "video";
+  entry: ZappEntry;
+  pluginConfiguration: Record<string, any>;
+  PlayerComponent: ComponentType<any>;
+  playerProps: PlayerComponentProps;
+  playNextProps: PlayNextOverlayProps;
+  audioPlayerProps: AudioPlayerProps;
+  transportControls?: ReactNode;
+  inline?: boolean;
+}
+
+export interface TvOSPlayerViewProps extends PlayerViewBaseProps {
+  nativePlayerIsReady: boolean;
+}
+
+export type GenericTVPlayerViewProps = PlayerViewBaseProps;
+
+export type TVPlayerViewProps = TvOSPlayerViewProps | GenericTVPlayerViewProps;

package/src/Player/index.tsx

@@ -4,8 +4,6 @@
 import React from "react";
 import * as R from "ramda";
 
-import { flatten } from "@applicaster/zapp-react-native-utils/utils";
-
 import { findNodeHandle, StyleSheet, View } from "react-native";
 import TransportControlsMobile from "@applicaster/quick-brick-mobile-transport-controls";
 import TransportControlsTV from "@applicaster/quick-brick-tv-transport-controls";
@@ -46,6 +44,8 @@ import {
   isInlineTV as isInlineTVUtil,
 } from "@applicaster/zapp-react-native-utils/playerUtils";
 
+import { TVPlayerView } from "./PlayerView/TVPlayerView";
+
 const styles = StyleSheet.create({
   container: { flex: 1 },
   playerContainerBlack: { backgroundColor: DEFAULT_COLORS.black },
@@ -55,7 +55,6 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
-  audioPlayerSize: { width: "100%", height: "100%" },
   playerSize: { width: "100%", height: "100%" },
 });
 
@@ -66,8 +65,6 @@ const logger = createLogger({
 
 const isTvOS = isTvOSPlatform();
 
-const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
-
 export default class VideoPlayer extends React.Component<
   QuickBrickPlayer.PlayerProps,
   QuickBrickPlayer.NativePlayerState
@@ -688,53 +685,6 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
-  childrenWithExtensions = () => {
-    const { docked, entry, children } = this.props;
-
-    if (!isTvOS) {
-      return children;
-    }
-
-    const output = [];
-
-    // audio-player
-    if (isAudioItemUtil(entry)) {
-      const { nativePlayerIsReady } = this.state;
-
-      // we have to wait ready status of native player view, before showing audio_player
-      if (nativePlayerIsReady) {
-        output.push(
-          <View nativeID={AUDIO_PLAYER_NATIVE_ID} key={AUDIO_PLAYER_NATIVE_ID}>
-            {children}
-          </View>
-        );
-      }
-    } else {
-      output.push(children);
-    }
-    // audio-player
-
-    // play-next
-    if (this.getPlayNextData()) {
-      output.push(
-        <PlayNextOverlay
-          key="play-next-overlay"
-          item={entry}
-          playerIsDocked={docked}
-          pluginConfiguration={this.getPluginConfiguration()}
-          playerId={this.props.playerId}
-          playNextData={this.getPlayNextData()}
-          setNextVideoPreloadThresholdPercentage={
-            this.props.setNextVideoPreloadThresholdPercentage
-          }
-        />
-      );
-    }
-    // play-next
-
-    return flatten(output); // prevent possible case with nested array
-  };
-
   get supportNativeCast() {
     return this.props.controller.supportNativeCast();
   }
@@ -1141,39 +1091,33 @@ export default class VideoPlayer extends React.Component<
     const renderTVPlayer = () => {
       return (
         <View style={this.takeParentStyle} testID={"player-view"}>
-          {isAudioItem && (isInlineTV || !isTvOS) ? (
-            <AudioPlayer
-              style={getStyle(styles.audioPlayerSize)}
-              audio_item={entry}
-              plugin_configuration={this.getPluginConfiguration()}
-            />
-          ) : null}
-
-          <this.props.PlayerComponent
-            ref={this._assignRoot}
-            {...nativeEvents}
-            {...nativeProps}
-            listener={this.props.listener}
-            style={this.takeParentStyle}
+          <TVPlayerView
+            type={isAudioItem ? "audio" : "video"}
+            entry={entry}
+            inline={isInlineTV}
+            transportControls={renderTransportControls(this.takeParentStyle)}
+            PlayerComponent={this.props.PlayerComponent}
+            nativePlayerIsReady={this.state.nativePlayerIsReady}
             pluginConfiguration={this.getPluginConfiguration()}
-            controller={this.props.controller}
+            playerProps={{
+              ref: this._assignRoot,
+              ...nativeEvents,
+              ...nativeProps,
+              listener: this.props.listener,
+              style: this.takeParentStyle,
+              controller: this.props.controller,
+            }}
+            audioPlayerProps={{ style: getStyle(styles.playerSize) }}
+            playNextProps={{
+              playerIsDocked: docked,
+              playerId: this.props.playerId,
+              playNextData: this.getPlayNextData(),
+              setNextVideoPreloadThresholdPercentage:
+                this.props.setNextVideoPreloadThresholdPercentage,
+            }}
           >
-            {!isInlineTV && this.childrenWithExtensions()}
-          </this.props.PlayerComponent>
-
-          {renderTransportControls(this.takeParentStyle)}
-          {!isTvOS && (
-            <PlayNextOverlay
-              item={entry}
-              playerIsDocked={docked}
-              pluginConfiguration={this.getPluginConfiguration()}
-              playerId={this.props.playerId}
-              playNextData={this.getPlayNextData()}
-              setNextVideoPreloadThresholdPercentage={
-                this.props.setNextVideoPreloadThresholdPercentage
-              }
-            />
-          )}
+            {this.props.children}
+          </TVPlayerView>
         </View>
       );
     };