@applicaster/quick-brick-player 13.0.0-rc.127 → 13.0.0-rc.128

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.127",
+  "version": "13.0.0-rc.128",
   "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.127",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.127",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.127",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.128",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.128",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.128",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/index.tsx

@@ -50,6 +50,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
+  audioPlayerSize: { width: "100%", height: "100%" },
   playerSize: { width: "100%", height: "100%" },
 });
 
@@ -58,6 +59,10 @@ const logger = createLogger({
   subsystem: Subsystem,
 });
 
+const isTvOS = isTvOSPlatform();
+
+const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
+
 export default class VideoPlayer extends React.Component<
   QuickBrickPlayer.PlayerProps,
   QuickBrickPlayer.NativePlayerState
@@ -93,6 +98,8 @@ export default class VideoPlayer extends React.Component<
     // Player state
     currentTime: 0,
     duration: 0,
+
+    nativePlayerIsReady: false,
   };
 
   private _tracker: PlayerAnalyticsTrackerI;
@@ -488,6 +495,9 @@ export default class VideoPlayer extends React.Component<
 
   onVideoFullscreenPlayerDidPresent = () => {
     this.props.listener?.onVideoFullscreenPlayerDidPresent?.();
+
+    // we have to have a signal that player is ready, in order to show audio_player(for example)
+    this.setState({ nativePlayerIsReady: true });
   };
 
   onVideoFullscreenPlayerWillDismiss = () => {
@@ -674,7 +684,7 @@ export default class VideoPlayer extends React.Component<
   };
 
   childrenWithPlayNext = () => {
-    if (!isTvOSPlatform() || !this.getPlayNextData()) {
+    if (!isTvOS || !this.getPlayNextData()) {
       return this.props.children;
     }
 
@@ -699,6 +709,32 @@ export default class VideoPlayer extends React.Component<
     ];
   };
 
+  childrenWithAudioPlayer = () => {
+    if (!isTvOS) {
+      return this.props.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 { entry, children = [] } = this.props;
+
+    return [
+      ...children,
+      <View nativeID={AUDIO_PLAYER_NATIVE_ID} key={AUDIO_PLAYER_NATIVE_ID}>
+        <AudioPlayer
+          style={styles.audioPlayerSize}
+          audio_item={entry}
+          plugin_configuration={this.getPluginConfiguration()}
+        />
+      </View>,
+    ];
+  };
+
   get supportNativeCast() {
     return this.props.controller.supportNativeCast();
   }
@@ -723,7 +759,8 @@ export default class VideoPlayer extends React.Component<
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
-      entry?.type?.value?.includes?.("audio");
+      entry?.type?.value?.includes?.("audio") ||
+      entry?.content?.src?.includes?.("type=audio");
 
     const getStyle = (dimensions) => {
       const generalStyles = isAudioItem ? styles.audio : styles.video;
@@ -1107,6 +1144,14 @@ export default class VideoPlayer extends React.Component<
     const renderTVPlayer = () => {
       return (
         <View style={this.takeParentStyle} testID={"player-view"}>
+          {!isTvOS && isAudioItem ? (
+            <AudioPlayer
+              style={getStyle(styles.audioPlayerSize)}
+              audio_item={entry}
+              plugin_configuration={this.getPluginConfiguration()}
+            />
+          ) : null}
+
           <this.props.PlayerComponent
             ref={this._assignRoot}
             {...nativeEvents}
@@ -1116,11 +1161,12 @@ export default class VideoPlayer extends React.Component<
             pluginConfiguration={this.getPluginConfiguration()}
             controller={this.props.controller}
           >
+            {this.childrenWithAudioPlayer()}
             {this.childrenWithPlayNext()}
           </this.props.PlayerComponent>
 
           {renderTransportControls(this.takeParentStyle)}
-          {!isTvOSPlatform() && (
+          {!isTvOS && (
             <PlayNextOverlay
               item={entry}
               playerIsDocked={docked}