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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.1430213104",
+  "version": "14.0.0-alpha.1615413083",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,10 +36,10 @@
   "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-alpha.1430213104",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.1430213104",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1430213104",
+    "@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",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

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,19 @@
+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();
+
+export const TVPlayerView: React.FC<TVPlayerViewProps> = (props) => {
+  return 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,39 @@
+import { ReactNode, ComponentType } from "react";
+import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+
+export interface PlayNextOverlayProps {
+  playerIsDocked: boolean;
+  playerId?: string;
+  playNextData: PlayNextData;
+  setNextVideoPreloadThresholdPercentage: (percentage: number) => void;
+}
+
+export interface PlayerComponentProps {
+  [key: string]: any;
+}
+
+export interface AudioPlayerProps {
+  [key: string]: any;
+}
+
+export interface PlayerViewBaseProps {
+  children?: ReactNode;
+  type: "audio" | "video";
+  entry: ZappEntry;
+  pluginConfiguration: Record<string, any>;
+  PlayerComponent: ComponentType<any>;
+  playerProps: PlayerComponentProps;
+  playNextProps: PlayNextOverlayProps;
+  AudioPlayer: ComponentType<any>;
+  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,32 @@ 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,
+            }}
+            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>
       );
     };