@applicaster/quick-brick-player 12.0.0-alpha.3021004521 → 12.0.0-alpha.3436326335

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.3021004521",
+  "version": "12.0.0-alpha.3436326335",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,11 +36,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.3",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.11",
     "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.3021004521",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3021004521",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3021004521",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.3436326335",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3436326335",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3436326335",
     "keymirror": "^0.1.1",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

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

@@ -10,7 +10,7 @@ import {
 
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   forwardButton,
   playbackButton,

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import {
   StyleSheet,
   TouchableWithoutFeedback,
@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from "react-native";
 import * as R from "ramda";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
   ContentInfo,
@@ -198,9 +198,7 @@ export default function DockedLayout(props: LayoutProps) {
     playNextData,
   } = props;
 
-  const {
-    deviceInfo: { isTablet },
-  } = useDimensions("screen", { deviceInfo: true });
+  const isTablet = useIsTablet();
 
   const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));

package/src/Player/index.tsx

@@ -36,6 +36,10 @@ import { AudioPlayerWrapper } from "./AudioLayer/AudioPlayerWrapper";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import {
+  getTargetScreenDataFromEntry
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
+import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 
 const RNPlayerManager = {
   QuickBrickPlayerPlugin: isApplePlatform()
@@ -551,6 +555,28 @@ export default class VideoPlayer extends React.Component<
     this.props.listener?.onPlayerDetached?.(nativeEvent);
   };
 
+  onVideoFullscreenPlayerDidDismiss = () => {
+    console.log("Anton onVideoFullscreenPlayerDidDismiss");
+    this.props.listener?.onVideoFullscreenPlayerDidDismiss?.();
+  }
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    console.log("Anton onVideoFullscreenPlayerDidPresent");
+    this.props.listener?.onVideoFullscreenPlayerDidPresent?.();
+  }
+
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillDismiss?.();
+  }
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillPresent?.();
+  }
+
+  onPlayerClose = () => {
+    this.props.listener?.onPlayerClose?.();
+  }
+
   onPiPEnter = () => {
     this.setState({ piped: true });
     this.props.openPiP();
@@ -755,7 +781,6 @@ export default class VideoPlayer extends React.Component<
   render() {
     const {
       castAction,
-      controls,
       docked,
       entry,
       fullscreen,
@@ -812,16 +837,32 @@ export default class VideoPlayer extends React.Component<
     const liveCatchUpEnabled =
       this.props.pluginConfiguration?.liveCatchUpEnabled;
 
-    const hideNativeControls = isTV()
-      ? { controls: !this.getPlayNextData() }
-      : {};
+    // TODO: Get screen data more reliable way useCurrentScreenData
+    const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
+
+    const isInlineTV = screenData?.ui_components?.length > 0 && isTV();
 
-    const platformSpecificProps = isApplePlatform()
+    let platformSpecificProps: any = isApplePlatform()
       ? {
-          ...hideNativeControls,
-          resizeMode: nativeResizeMode,
-        }
-      : {};
+        resizeMode: nativeResizeMode,
+      } : {};
+
+    const supportsNativeControls = !!this.props.controller?.supportsNativeControls?.();
+
+    const controls = isAppleTV()
+      ? supportsNativeControls && isInlineTV && !this.getPlayNextData()
+      : supportsNativeControls && !this.getPlayNextData();
+
+    platformSpecificProps = {
+      ...platformSpecificProps,
+      controls
+    };
+
+    console.log("Anton Player render2 ", {
+      platformSpecificProps,
+      isNotInlineTv: !isInlineTV,
+      hasNoPlayNextData: !this.getPlayNextData()
+    });
 
     const pictureInPictureEnabled =
       this.props.pluginConfiguration?.pictureInPictureEnabled;
@@ -830,7 +871,6 @@ export default class VideoPlayer extends React.Component<
       entry, // Must be passed first in list
       ...platformSpecificProps,
       audioTrackId,
-      controls,
       docked,
       enableAutoAudioTrackSelection,
       fullscreen, // TODO: Check fullscreen params not crash
@@ -884,22 +924,15 @@ export default class VideoPlayer extends React.Component<
       onVideoEnd: this.onVideoEnd, // complete
       onVideoError: this.onVideoError, // error
       onVideoProgress: this.onVideoProgress,
-      onVideoFullscreenPlayerDidDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerDidPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerWillDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillDismiss"
-      ),
-      onVideoFullscreenPlayerWillPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillPresent"
-      ),
+      onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+      onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+      onVideoFullscreenPlayerWillDismiss: this.onVideoFullscreenPlayerWillDismiss,
+      onVideoFullscreenPlayerWillPresent: this.onVideoFullscreenPlayerWillPresent,
       onVideoLoad: this.onVideoLoad,
       onVideoLoadStart: this.unHandledEvent("onVideoLoadStart"),
       onVideoBuffer: this.onVideoBuffer,
       onPlaybackStalled: this.onPlaybackStalled,
+      onPlayerClose: this.onPlayerClose,
       onPlayerAttached: this.onPlayerAttached,
       onPlayerDetached: this.onPlayerDetached,
     };
@@ -958,6 +991,8 @@ export default class VideoPlayer extends React.Component<
       ? styles.playerContainerTransparent
       : styles.playerContainerBlack;
 
+    console.log("Anton Player render", {screenData, props: this.props, nativeProps});
+
     const isInline = () => {
       if (isTV()) {
         return inline;
@@ -1005,10 +1040,12 @@ export default class VideoPlayer extends React.Component<
       inline,
       docked,
       isModal,
+      pip: this.state.piped,
       layoutState: {
         inline,
         docked,
         isModal,
+        pip: this.state.piped,
       },
       configuration: this.getPluginConfiguration(),
       fullscreen: fullscreen,
@@ -1085,6 +1122,7 @@ export default class VideoPlayer extends React.Component<
                       listener={this.props.listener}
                       style={getStyle(playerDimensions)}
                       pluginConfiguration={this.getPluginConfiguration()}
+                      controller={this.props.controller}
                     >
                       {this.childrenWithPlayNext()}
                     </this.props.PlayerComponent>
@@ -1121,6 +1159,7 @@ export default class VideoPlayer extends React.Component<
             listener={this.props.listener}
             style={this.takeParentStyle}
             pluginConfiguration={this.getPluginConfiguration()}
+            controller={this.props.controller}
           >
             {this.childrenWithPlayNext()}
           </this.props.PlayerComponent>

package/src/QuickBrickPlayer.tsx

@@ -1,55 +1,13 @@
 import * as React from "react";
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { useOrientationEffect } from "@applicaster/zapp-react-native-utils/reactHooks/videoModal";
 import Player from "./Player";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { isEqual } from "@applicaster/zapp-react-native-utils/equalUtils";
-import { toNoopIfNil } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
 
-const MemoizedPlayer = React.memo(
-  Player,
-  isEqual({
-    byValue: [
-      "PlayerComponent",
-      "autoplay",
-      "controls",
-      "disableCastAction",
-      "docked",
-      "focused",
-      "fullscreen",
-      "inline",
-      "isModal",
-      "isTabletPortrait",
-      "muted",
-      "playerId",
-      "playerPluginIdentifier",
-      "mode",
-      "style",
-    ],
-    byReference: [
-      "controller",
-      "listener",
-      "playNextData",
-      "entry",
-      "playableItem",
-      "source",
-      "playerEvent",
-      "playerPluginManifest",
-      "pluginConfiguration",
-      "setNextVideoPreloadThresholdPercentage",
-      "toggleFullscreen",
-      "openPiP",
-      "closePiP",
-      "castAction",
-    ],
-  })
-);
-
 const QuickBrickPlayerComponent = (
   props: QuickBrickPlayer.PlayerProps,
   ref
@@ -67,7 +25,7 @@ const QuickBrickPlayerComponent = (
 
   const castAction = useActions(CHROMECAST_IDENTIFIER);
 
-  const isModal = toBooleanWithDefaultFalse(props?.isModal);
+  const isModal = Boolean(props?.isModal);
   const isScreenDisabled = !controller?.isFullScreenSupported() || !isModal;
 
   const {
@@ -77,24 +35,16 @@ const QuickBrickPlayerComponent = (
   } = useNavigation();
 
   useOrientationEffect({
-    isTabletPortrait: toBooleanWithDefaultFalse(props?.isTabletPortrait),
+    isTabletPortrait: props?.isTabletPortrait,
     docked: mode === "MINIMIZED",
-    toggleFullscreen: toNoopIfNil(props?.toggleFullscreen),
+    toggleFullscreen: props?.toggleFullscreen,
     disable: isScreenDisabled,
     skipInitialOrientationEffects: mode === "FULLSCREEN",
-    isRunningPlayNext: isNotNil(props?.playNextData),
+    isRunningPlayNext: !!props?.playNextData,
   });
 
-  // console.log("debug_2", "QuickBrickPlayerComponent - render", {
-  //   mode,
-  //   props,
-  //   disableCastAction: props?.disableCastAction,
-  //   castAction,
-  //   PlayerComponent: props.PlayerComponent,
-  // });
-
   return (
-    <MemoizedPlayer
+    <Player
       {...props}
       ref={ref}
       castAction={!props?.disableCastAction && castAction}