@applicaster/quick-brick-player 13.0.0-rc.129 → 13.0.0-rc.130

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.129",
+  "version": "13.0.0-rc.130",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.124",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.129",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.129",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.129",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.130",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.130",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.130",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/index.tsx

@@ -4,6 +4,8 @@
 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";
@@ -40,6 +42,7 @@ import { PlayerAnalyticsManager } from "@applicaster/zapp-react-native-utils/ana
 import { PlayerAnalyticsTrackerI } from "@applicaster/zapp-react-native-utils/analyticsUtils/playerAnalyticsTracker";
 
 import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
+import { isAudioItem as isAudioItemUtil } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -683,56 +686,51 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
-  childrenWithPlayNext = () => {
-    if (!isTvOS || !this.getPlayNextData()) {
-      return this.props.children;
-    }
+  childrenWithExtensions = () => {
+    const { docked, entry, children } = this.props;
 
-    // tvos only
-    const { docked, entry } = this.props;
-
-    const children = R.pathOr([], "children", this.props);
-
-    return [
-      ...children,
-      <PlayNextOverlay
-        key="play-next-overlay"
-        item={entry}
-        playerIsDocked={docked}
-        pluginConfiguration={this.getPluginConfiguration()}
-        playerId={this.props.playerId}
-        playNextData={this.getPlayNextData()}
-        setNextVideoPreloadThresholdPercentage={
-          this.props.setNextVideoPreloadThresholdPercentage
-        }
-      />,
-    ];
-  };
-
-  childrenWithAudioPlayer = () => {
     if (!isTvOS) {
-      return this.props.children;
+      return children;
     }
 
-    const { nativePlayerIsReady } = this.state;
-
-    // we have to wait ready status of native player view, before showing audio_player
-    if (!nativePlayerIsReady) {
-      return this.props.children;
-    }
+    const output = [];
 
-    const { entry, children = [] } = this.props;
+    // audio-player
+    if (isAudioItemUtil(entry)) {
+      const { nativePlayerIsReady } = this.state;
 
-    return [
-      ...children,
-      <View nativeID={AUDIO_PLAYER_NATIVE_ID} key={AUDIO_PLAYER_NATIVE_ID}>
-        <AudioPlayer
-          style={styles.audioPlayerSize}
-          audio_item={entry}
-          plugin_configuration={this.getPluginConfiguration()}
+      // 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
+          }
         />
-      </View>,
-    ];
+      );
+    }
+    // play-next
+
+    return flatten(output); // prevent possible case with nested array
   };
 
   get supportNativeCast() {
@@ -757,10 +755,7 @@ export default class VideoPlayer extends React.Component<
     const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
       this.state;
 
-    const isAudioItem =
-      entry?.content?.type?.includes?.("audio") ||
-      entry?.type?.value?.includes?.("audio") ||
-      entry?.content?.src?.includes?.("type=audio");
+    const isAudioItem = isAudioItemUtil(entry);
 
     const getStyle = (dimensions) => {
       const generalStyles = isAudioItem ? styles.audio : styles.video;
@@ -1115,7 +1110,7 @@ export default class VideoPlayer extends React.Component<
                         pluginConfiguration={this.getPluginConfiguration()}
                         controller={this.props.controller}
                       >
-                        {this.childrenWithPlayNext()}
+                        {this.props.children}
                       </this.props.PlayerComponent>
                     </AnimationComponent>
                   ) : null}
@@ -1161,8 +1156,7 @@ export default class VideoPlayer extends React.Component<
             pluginConfiguration={this.getPluginConfiguration()}
             controller={this.props.controller}
           >
-            {this.childrenWithAudioPlayer()}
-            {this.childrenWithPlayNext()}
+            {this.childrenWithExtensions()}
           </this.props.PlayerComponent>
 
           {renderTransportControls(this.takeParentStyle)}