@applicaster/quick-brick-player 14.0.0-alpha.5431459455 → 14.0.0-alpha.5533663133

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.5431459455",
+  "version": "14.0.0-alpha.5533663133",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,13 +35,12 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-alpha.5431459455",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.7",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.5431459455",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5431459455",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5431459455",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.25",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.13",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.5533663133",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5533663133",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5533663133",
     "query-string": "7.1.3",
-    "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",
@@ -62,11 +61,9 @@
     "react": "*",
     "react-native": "*",
     "react-native-fs": "*",
-    "react-native-gesture-handler": "*",
     "react-native-linear-gradient": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-web": "*",
     "react-native-webview": "*",
     "uglify-js": "*",
     "validate-color": "*",

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,13 +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";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -31,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({
@@ -47,7 +48,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "column",
     alignItems: "stretch",
-    marginTop: 3, // from plugins/mobile-transport-controls/src/ProgressBar/layouts/DockedLayout.tsx
   },
   content: {
     flex: 1,
@@ -99,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,
@@ -160,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
@@ -298,6 +314,6 @@ export const DockedControls = (props: Props) => {
           backgroundColor: dockedBackgroundColor,
         }}
       />
-    </View>
+    </AnimationComponent>
   );
 };

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

@@ -12,12 +12,13 @@ import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
 import { useMobileLayoutImageSize, useTransportInfoHeight } from "./hooks";
+import { DockedControls } from "./DockedControls";
 import { DEBUG, withDebug } from "./debug";
 import {
   BottomDebugSquare,
   LeftDebugSquare,
   RightDebugSquare,
-} from "./Debug/index";
+} from "./DebugComponent";
 
 import { Props } from "./types";
 
@@ -55,7 +56,6 @@ const mobileStyles = ({
   imageSize,
 }): ViewStyle => ({
   height: screenHeight - topInset - bottomInset,
-  width: "100%",
 
   opacity: imageSize ? 1 : 0, // hide content until imageSize is calculated
 
@@ -77,6 +77,7 @@ export function MobileLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
+  onCloseVideoModal,
   playbackSpeedName,
   configuration,
   dimensions,
@@ -167,6 +168,7 @@ export function MobileLayout({
             value={value}
             configuration={configuration}
             onPlayerSeek={onPlayerSeek}
+            onCloseVideoModal={onCloseVideoModal}
             dimensions={dimensions}
             playNextData={playNextData}
             title={title}
@@ -202,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>
   );
 }

package/src/Player/AudioLayer/Layout/PlayerImage/AnimatedImage.tsx

@@ -1,7 +1,16 @@
 import React, { PropsWithChildren } from "react";
 import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+  DURATION_TO_MINIMIZE,
+  DURATION_TO_MAXIMIZE,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
+
+import { useChangePlayerState } from "./hooks";
 
 const styles = StyleSheet.create({
   container: {
@@ -15,17 +24,48 @@ type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: ImageStyle | ImageStyle[];
   imageWidth: number;
+  docked: boolean;
 }>;
 
-export const AnimatedImage = ({ entry, style, imageWidth }: Props) => {
+export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const backgroundImageSource = useBackgroundImage(entry);
+
+  const { minimisedHeight } = useModalAnimationContext();
+
+  const changePlayerState$ = useChangePlayerState({ docked });
+
+  React.useEffect(() => {
+    const subscription = changePlayerState$.subscribe({
+      next: (nextPlayerState: PlayerAnimationStateT) => {
+        if (nextPlayerState === PlayerAnimationStateEnum.minimize) {
+          Animated.timing(heightAnim, {
+            toValue: minimisedHeight,
+            duration: DURATION_TO_MINIMIZE,
+            useNativeDriver: false, // width/height can't use native driver
+          }).start();
+        }
+
+        if (nextPlayerState === PlayerAnimationStateEnum.maximize) {
+          Animated.timing(heightAnim, {
+            toValue: imageWidth,
+            duration: DURATION_TO_MAXIMIZE,
+            useNativeDriver: false, // width/height can't use native driver
+          }).start();
+        }
+
+        if (nextPlayerState === PlayerAnimationStateEnum.appear_as_docked) {
+          // minimize image immediatly
+          heightAnim.setValue(minimisedHeight);
+        }
+      },
+    });
 
-  if (!source) return null;
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [changePlayerState$, minimisedHeight, imageWidth]);
 
   return (
     <Animated.View
@@ -36,7 +76,7 @@ export const AnimatedImage = ({ entry, style, imageWidth }: Props) => {
         },
       ]}
     >
-      <Image resizeMode="cover" style={style} source={source} />
+      <Image resizeMode="cover" style={style} source={backgroundImageSource} />
     </Animated.View>
   );
 };

package/src/Player/AudioLayer/Layout/PlayerImage/FlexImage.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Image, ImageStyle } from "react-native";
-
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 type Props = {
   entry: ZappEntry;
@@ -9,12 +8,9 @@ type Props = {
 };
 
 export const FlexImage = ({ entry, style }: Props) => {
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const backgroundImageSource = useBackgroundImage(entry);
 
-  if (!source) return null;
-
-  return <Image resizeMode="cover" style={style} source={source} />;
+  return (
+    <Image resizeMode="cover" style={style} source={backgroundImageSource} />
+  );
 };