@applicaster/quick-brick-player 13.0.6-alpha.4390983410 → 14.0.0-alpha.1015356256

package/package.json

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

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

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

@@ -46,6 +46,7 @@ import {
   isInlineTV as isInlineTVUtil,
 } from "@applicaster/zapp-react-native-utils/playerUtils";
 
+import { TVPlayerView } from "./PlayerView/TVPlayerView";
 import PlayerModal, { VideoPlayerModal } from "./PlayerModal";
 import { DockedControls } from "./AudioLayer/Layout/DockedControls";
 import { FlexImage } from "./AudioLayer/Layout/PlayerImage/FlexImage";
@@ -59,7 +60,6 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
-  audioPlayerSize: { width: "100%", height: "100%" },
   playerSize: { width: "100%", height: "100%" },
   flexImage: { height: "100%", aspectRatio: 1, flex: -1 },
 });
@@ -71,8 +71,6 @@ const logger = createLogger({
 
 const isTvOS = isTvOSPlatform();
 
-const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
-
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
 
 const getScreenAspectRatio = () => {
@@ -702,53 +700,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();
   }
@@ -1197,39 +1148,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>
       );
     };