@applicaster/quick-brick-player 14.0.0-rc.3 → 14.0.0-rc.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-rc.3",
+  "version": "14.0.0-rc.31",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,13 +35,12 @@
   },
   "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.3",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.3",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.3",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.3",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.25",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.31",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.31",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.31",
+    "@applicaster/zapp-react-native-utils": "14.0.0-rc.31",
     "query-string": "7.1.3",
-    "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",
@@ -62,11 +61,9 @@
     "react": "*",
     "react-native": "*",
     "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": "*",
     "uglify-js": "*",
     "validate-color": "*",

package/src/Player/AudioLayer/Layout/MobileLayout.tsx

@@ -18,7 +18,7 @@ import {
   BottomDebugSquare,
   LeftDebugSquare,
   RightDebugSquare,
-} from "./Debug/index";
+} from "./DebugComponent";
 
 import { Props } from "./types";
 

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/AudioLayer/components/SleepTimerModalHeader/SleepTimerModalHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ModalHeader } from "@applicaster/zapp-react-native-ui-components/Components/ModalComponent/Header";
-import { isNil } from "lodash";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
 
 const formatTime = (milliseconds: number) => {
   const totalSeconds = Math.floor(milliseconds / 1000);

package/src/Player/PlayerView/GenericTVPlayerView.tsx

@@ -0,0 +1,42 @@
+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,
+}) => {
+  return (
+    <>
+      {type === "audio" ? (
+        <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>
       );
     };