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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.6-alpha.4390983410",
+  "version": "13.0.6-alpha.5144834334",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "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": "13.0.2",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.4",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.6-alpha.5144834334",
+    "@applicaster/zapp-react-native-ui-components": "13.0.6-alpha.5144834334",
+    "@applicaster/zapp-react-native-utils": "13.0.6-alpha.5144834334",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,6 +1,11 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
+import {
+  Dimensions as ScreenDimensions,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
 
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
@@ -8,9 +13,14 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 import * as R from "ramda";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import Layout from "./Layout";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useIsTablet,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/PlayerDetails";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { formatSpeed } from "./utils";
 import {
   getBottomSheetModalDefaultItemIcon,
@@ -20,7 +30,12 @@ import {
   getBottomSheetModalSelectedItemIcon,
 } from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
-
+import {
+  AnimatedScrollModal,
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PADDING_HORIZONTAL } from "./Layout/const";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { DEFAULT_SPEED, PlaybackSpeed, SpeedController } from "./SpeedManager";
@@ -66,10 +81,18 @@ type Props = {
   isTabletPortrait?: boolean;
 };
 
+const { width: SCREEN_WIDTH } = ScreenDimensions.get("screen");
+
 const Styles = StyleSheet.create({
   playerContainer: {
     flex: 1,
   },
+  paddingHorizontal: { paddingTop: 0, paddingHorizontal: PADDING_HORIZONTAL },
+  playerDetails: {
+    marginTop: 60,
+    alignSelf: "center",
+    width: SCREEN_WIDTH - PADDING_HORIZONTAL * 2,
+  },
 });
 
 const edges: Edge[] = ["right", "left", "top"];
@@ -84,10 +107,16 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     configuration,
     style,
     entry,
+    children,
     layoutState,
     playNextData = null,
+    isTabletPortrait,
   } = props;
 
+  const isTablet = useIsTablet();
+
+  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+
   const { title, summary } = useTitleSummaryOverlay(
     entry,
     playerState?.isLive,
@@ -235,6 +264,10 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
   }, [playbackSpeed, onSpeedSelect, configuration["playback_speed_title"]]);
 
+  const onCloseVideoModal = React.useCallback(() => {
+    playerManager.close();
+  }, [playerManager]);
+
   const onPlayerSeek = React.useCallback(
     (targetTime: number) => {
       player?.seekTo(targetTime);
@@ -252,28 +285,51 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   return (
     <SafeAreaView style={[style, Styles.playerContainer]} edges={edges}>
-      <View style={Styles.playerContainer} onLayout={onLayout}>
-        <Layout
-          entry={entry}
-          playerState={playerState}
-          layoutState={layoutState}
-          value={value}
-          onPlaybackButtonPress={onPlaybackButtonPress}
-          onRewindButtonPress={onRewindButtonPress}
-          onForwardButtonPress={onForwardButtonPress}
-          onPlayerSeek={onPlayerSeek}
-          onSkipStart={onSkipStart}
-          onSpeedButtonPress={onSpeedButtonPress}
-          playbackSpeedName={formatSpeed(playbackSpeed.value)}
-          onSkipLive={onSkipLive}
-          maximiseVideoModal={maximiseVideoModal}
-          configuration={configuration}
-          dimensions={dimensions}
-          playNextData={playNextData}
-          title={title}
-          summary={summary}
-        />
-      </View>
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        additionalData={{ saveArea: true }}
+        style={Styles.playerContainer}
+      >
+        <AnimatedScrollModal>
+          <View style={Styles.playerContainer} onLayout={onLayout}>
+            <Layout
+              entry={entry}
+              playerState={playerState}
+              layoutState={layoutState}
+              value={value}
+              onPlaybackButtonPress={onPlaybackButtonPress}
+              onRewindButtonPress={onRewindButtonPress}
+              onForwardButtonPress={onForwardButtonPress}
+              onPlayerSeek={onPlayerSeek}
+              onSkipStart={onSkipStart}
+              onSpeedButtonPress={onSpeedButtonPress}
+              playbackSpeedName={formatSpeed(playbackSpeed.value)}
+              onSkipLive={onSkipLive}
+              onCloseVideoModal={onCloseVideoModal}
+              maximiseVideoModal={maximiseVideoModal}
+              configuration={configuration}
+              dimensions={dimensions}
+              playNextData={playNextData}
+              title={title}
+              summary={summary}
+            />
+            <View style={Styles.paddingHorizontal}>
+              {children}
+              <AnimationComponent
+                animationType={ComponentAnimationType.componentFade}
+              >
+                <PlayerDetails
+                  isAudioPlayer
+                  configuration={configuration}
+                  style={Styles.playerDetails}
+                  entry={entry}
+                  isTabletLandscape={isTabletLandscape}
+                />
+              </AnimationComponent>
+            </View>
+          </View>
+        </AnimatedScrollModal>
+      </AnimationComponent>
     </SafeAreaView>
   );
 };

package/src/Player/AudioLayer/Layout/DockedControls/index.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
-import * as R from "ramda";
 import {
-  useIsTablet,
-  useZStore,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
-import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from "react-native";
+import * as R from "ramda";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
   Button,
@@ -16,14 +17,15 @@ import {
 
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  PlayerAnimationStateEnum,
+  useModalAnimationContext,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
-import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
-import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
-import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -32,15 +34,13 @@ type Props = {
   layoutState: QuickBrickPlayer.LayoutState;
   playerState: QuickBrickPlayer.PlayerState;
   value: GetValue;
+  dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"];
   onCloseVideoModal: () => void;
   onPlayerSeek: (targetTime: number) => void;
   playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
   ImageComponent?: React.ReactNode;
-  isActiveGesture?: boolean;
-  minimisedHeight: number;
-  aspectRatio?: number;
 };
 
 const styles = StyleSheet.create({
@@ -48,7 +48,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "column",
     alignItems: "stretch",
-    marginTop: PROGRESS_BAR_HEIGHT,
   },
   content: {
     flex: 1,
@@ -100,6 +99,26 @@ const playerDimensionsStyle = (
   width: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
 });
 
+const animatedContainerStyle = (
+  docked: boolean,
+  progressBarHeight: number
+): ViewStyle => ({
+  top: progressBarHeight,
+  position: "absolute",
+  width: "100%",
+  zIndex: docked ? 1 : -1,
+});
+
+const backgroundImageStyle = (
+  dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"],
+  minimisedHeight: number,
+  isActiveGesture: boolean
+): ViewStyle => ({
+  height: isActiveGesture ? minimisedHeight : dimensions.height,
+  aspectRatio: 1,
+  position: "absolute",
+});
+
 const controlButtons = (
   live: boolean,
   paused: boolean,
@@ -161,111 +180,107 @@ export const DockedControls = (props: Props) => {
   const {
     entry,
     layoutState,
-    onPlayerSeek = noop,
+    playerState,
+    value,
+    dimensions,
+    onCloseVideoModal,
+    onPlayerSeek,
     playNextData,
+    title,
+    summary,
     ImageComponent,
-    isActiveGesture = true,
-    aspectRatio,
   } = props;
 
-  const onCloseVideoModal = React.useCallback(() => {
-    playerManager.close();
-  }, []);
-
-  const { minimised_height: minimisedHeight } = useConfiguration();
-
-  const configuration = useZStore("playerConfiguration")();
-  const playerState = usePlayerState("shared-player-wrapper-docked");
-
-  const getValue = (key: string, stylesObj: {}) =>
-    R.propOr(null, key, stylesObj);
-
-  const value = React.useCallback(
-    (key: string) => {
-      const retVal = getValue(key, configuration);
-
-      const minimumAllowedSeekableDurationInSeconds = getValue(
-        "minimumAllowedSeekableDurationInSeconds",
-        configuration
-      );
+  const isTablet = useIsTablet();
 
-      if (key === "liveSeekingEnabled") {
-        return playerState.seekableDuration <
-          minimumAllowedSeekableDurationInSeconds || playerManager.isCasting()
-          ? false
-          : retVal;
-      }
+  const liveButton = Boolean(value("live_badge_enabled"));
 
-      return retVal;
-    },
-    [...Object.values(configuration), playerState]
-  );
+  const {
+    isActiveGesture,
+    setPlayerAnimationState,
+    startComponentsAnimation,
+    minimisedHeight,
+    progressBarHeight,
+  } = useModalAnimationContext();
 
-  const { title, summary } = useTitleSummaryOverlay(
-    entry,
-    playerState?.isLive,
-    configuration?.audio_live_player_update_interval
+  const maximazeVideoModal = React.useCallback(
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximize),
+    []
   );
 
-  const isTablet = useIsTablet();
-
-  const liveButton = Boolean(value("live_badge_enabled"));
-
   const dockedBackgroundColor = value("docked_player_background_color");
 
   const insets = useSafeAreaInsets();
 
+  if (!layoutState.docked && !startComponentsAnimation) return null;
+
   return (
-    <View
+    <AnimationComponent
+      animationType={ComponentAnimationType.componentAppears}
       style={[
         styles.container,
+        animatedContainerStyle(
+          isActiveGesture || layoutState.docked,
+          progressBarHeight
+        ),
         {
           height: minimisedHeight + bottomTabBarHeight + insets.bottom,
         },
       ]}
     >
-      {!playerState.isLive ? (
+      {!playerState.isLive &&
+      (layoutState.docked || startComponentsAnimation) ? (
         <ProgressBar
-          name={"shared-docked-layout"}
+          name={"audio-docked-layout"}
           content={entry}
           value={value}
           visible
           layoutState={layoutState}
           onPlayerSeek={onPlayerSeek}
           playerState={playerState}
-          startComponentsAnimation={noop}
+          startComponentsAnimation={startComponentsAnimation}
           docked
         />
       ) : null}
 
       <View style={styles.content}>
-        <View style={styles.touchableArea}>
-          {isActiveGesture || layoutState.docked ? (
-            <View style={{ aspectRatio: aspectRatio, height: minimisedHeight }}>
-              {ImageComponent || null}
-            </View>
-          ) : (
-            <View
-              style={playerDimensionsStyle(
-                minimisedHeight,
-                isActiveGesture || layoutState.docked
-              )}
-            />
+        <View
+          style={backgroundImageStyle(
+            dimensions,
+            minimisedHeight,
+            isActiveGesture
           )}
-          <View
-            testID="content-info"
-            style={[
-              styles.contentInfo,
-              { backgroundColor: dockedBackgroundColor },
-            ]}
-          >
-            <ContentInfo
-              content={{ ...entry, title, summary }}
-              value={value}
-              docked
-            />
+        />
+        <TouchableWithoutFeedback onPress={maximazeVideoModal}>
+          <View style={styles.touchableArea}>
+            {isActiveGesture || layoutState.docked ? (
+              <View
+                style={{ width: toNumberWithDefault(100, minimisedHeight) }}
+              >
+                {ImageComponent || null}
+              </View>
+            ) : (
+              <View
+                style={playerDimensionsStyle(
+                  minimisedHeight,
+                  isActiveGesture || layoutState.docked
+                )}
+              />
+            )}
+            <View
+              style={[
+                styles.contentInfo,
+                { backgroundColor: dockedBackgroundColor },
+              ]}
+            >
+              <ContentInfo
+                content={{ ...entry, title, summary }}
+                value={value}
+                docked
+              />
+            </View>
           </View>
-        </View>
+        </TouchableWithoutFeedback>
         <View
           style={[
             isTablet
@@ -299,6 +314,6 @@ export const DockedControls = (props: Props) => {
           backgroundColor: dockedBackgroundColor,
         }}
       />
-    </View>
+    </AnimationComponent>
   );
 };

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

@@ -4,6 +4,7 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import { MOBILE, NAVBAR_HEIGHT } from "./const";
 import { TransportInfo } from "./TransportInfo";
@@ -11,6 +12,7 @@ import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
 import { useMobileLayoutImageSize, useTransportInfoHeight } from "./hooks";
+import { DockedControls } from "./DockedControls";
 import { DEBUG, withDebug } from "./debug";
 import {
   BottomDebugSquare,
@@ -54,7 +56,6 @@ const mobileStyles = ({
   imageSize,
 }): ViewStyle => ({
   height: screenHeight - topInset - bottomInset,
-  width: "100%",
 
   opacity: imageSize ? 1 : 0, // hide content until imageSize is calculated
 
@@ -76,8 +77,11 @@ export function MobileLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
+  onCloseVideoModal,
   playbackSpeedName,
   configuration,
+  dimensions,
+  playNextData,
   title,
   summary,
 }: Props) {
@@ -85,10 +89,12 @@ export function MobileLayout({
 
   const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
+  const { progressBarHeight } = useModalAnimationContext();
 
   const { imageSize } = useMobileLayoutImageSize();
 
-  const { onLayout: onTransportInfoLayout } = useTransportInfoHeight();
+  const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
+    useTransportInfoHeight();
 
   const controlsContainerHeight = React.useMemo(() => {
     return (
@@ -102,6 +108,10 @@ export function MobileLayout({
     );
   }, [screenHeight, topInset, imageSize, bottomInset]);
 
+  const verticalOffsetForImage = React.useMemo(() => {
+    return transportInfoHeight + MOBILE.MARGIN_TOP - progressBarHeight;
+  }, [transportInfoHeight, progressBarHeight]);
+
   return (
     <View
       style={[
@@ -153,9 +163,19 @@ export function MobileLayout({
         >
           <PlayerImage
             entry={entry}
-            docked={false}
-            imageWidth={imageSize}
+            layoutState={layoutState}
+            playerState={playerState}
+            value={value}
             configuration={configuration}
+            onPlayerSeek={onPlayerSeek}
+            onCloseVideoModal={onCloseVideoModal}
+            dimensions={dimensions}
+            playNextData={playNextData}
+            title={title}
+            summary={summary}
+            docked={docked}
+            imageWidth={imageSize}
+            verticalOffset={verticalOffsetForImage}
           />
         </View>
         {/* PlayerImage */}
@@ -184,6 +204,19 @@ export function MobileLayout({
           />
         </View>
       </View>
+
+      <DockedControls
+        entry={entry}
+        layoutState={layoutState}
+        playerState={playerState}
+        value={value}
+        dimensions={dimensions}
+        onCloseVideoModal={onCloseVideoModal}
+        onPlayerSeek={onPlayerSeek}
+        playNextData={playNextData}
+        title={title}
+        summary={summary}
+      />
     </View>
   );
 }