@applicaster/quick-brick-player 14.0.0-alpha.5621117258 → 14.0.0-alpha.5810348423

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.5621117258",
+  "version": "14.0.0-alpha.5810348423",
   "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.5621117258",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.7",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.5621117258",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5621117258",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5621117258",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.56",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.60",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.5810348423",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5810348423",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5810348423",
     "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",
@@ -58,15 +57,11 @@
     "@applicaster/zapp-react-native-tvos-ui-components": "*",
     "@babel/runtime": "*",
     "@react-native-community/netinfo": "*",
-    "immer": "*",
     "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/Layout/Controls/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 import {
@@ -12,11 +12,6 @@ import {
 } from "@applicaster/quick-brick-mobile-transport-controls";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
-import {
-  AnimationComponent,
-  ComponentAnimationType,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
 import { AudioDescription } from "../../AudioDescription";
 import { isValidDate } from "../../../Utils";
 import { VerticalGutter } from "./VerticalGutter";
@@ -103,8 +98,6 @@ export const Controls = (props: Props) => {
     onSkipLive,
     onSpeedButtonPress,
     maxWidth = 320,
-
-    docked,
   } = props;
 
   const configuration = useZStore("playerConfiguration");
@@ -229,15 +222,8 @@ export const Controls = (props: Props) => {
     isLiveShowFullControls,
   ]);
 
-  if (docked) {
-    return null;
-  }
-
   return (
-    <AnimationComponent
-      animationType={ComponentAnimationType.componentFade}
-      style={isTablet ? styles.nonFlex : styles.flex}
-    >
+    <View style={isTablet ? styles.nonFlex : styles.flex}>
       <VerticalGutter />
 
       <AudioDescription
@@ -257,7 +243,11 @@ export const Controls = (props: Props) => {
             content={entry}
             value={value}
             visible
-            layoutState={layoutState}
+            layoutState={{
+              ...layoutState,
+              docked: false, // always use non-docked layout for audio (to show time labels
+              inline: true, // always use inline layout for audio (to show time labels)
+            }}
             onPlayerSeek={onPlayerSeek}
             playerState={playerState}
             disableFullscreen
@@ -286,6 +276,6 @@ export const Controls = (props: Props) => {
         }}
         playerState={playerState}
       />
-    </AnimationComponent>
+    </View>
   );
 };

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

@@ -18,10 +18,15 @@ import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Compo
 
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 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";
+import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -38,7 +43,6 @@ type Props = {
   ImageComponent?: React.ReactNode;
   isActiveGesture?: boolean;
   minimisedHeight: number;
-  progressBarHeight: number;
   aspectRatio?: number;
 };
 
@@ -47,7 +51,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "column",
     alignItems: "stretch",
-    marginTop: 3, // from plugins/mobile-transport-controls/src/ProgressBar/layouts/DockedLayout.tsx
+    marginTop: PROGRESS_BAR_HEIGHT,
   },
   content: {
     flex: 1,
@@ -160,7 +164,7 @@ export const DockedControls = (props: Props) => {
   const {
     entry,
     layoutState,
-    onPlayerSeek,
+    onPlayerSeek = noop,
     playNextData,
     ImageComponent,
     isActiveGesture = true,
@@ -171,13 +175,20 @@ export const DockedControls = (props: Props) => {
     playerManager.close();
   }, []);
 
+  const { currentRoute, screenData } = useNavigation();
+
+  const plugins = usePlugins();
+  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+
   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 getValue = React.useCallback(
+    (key: string, stylesObj: {}) => R.propOr(null, key, stylesObj),
+    []
+  );
 
   const value = React.useCallback(
     (key: string) => {
@@ -197,7 +208,7 @@ export const DockedControls = (props: Props) => {
 
       return retVal;
     },
-    [...Object.values(configuration), playerState]
+    [...Object.values(configuration), playerState.seekableDuration, getValue]
   );
 
   const { title, summary } = useTitleSummaryOverlay(
@@ -210,96 +221,99 @@ export const DockedControls = (props: Props) => {
 
   const liveButton = Boolean(value("live_badge_enabled"));
 
-  const startComponentsAnimation = () => {};
-
   const dockedBackgroundColor = value("docked_player_background_color");
 
   const insets = useSafeAreaInsets();
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
-        },
-      ]}
-    >
-      {!playerState.isLive ? (
-        <ProgressBar
-          name={"shared-docked-layout"}
-          content={entry}
-          value={value}
-          visible
-          layoutState={layoutState}
-          onPlayerSeek={onPlayerSeek}
-          playerState={playerState}
-          startComponentsAnimation={startComponentsAnimation}
-          docked
-        />
-      ) : null}
+    <>
+      <View
+        style={[
+          styles.container,
+          {
+            height: minimisedHeight,
+            maxHeight: minimisedHeight,
+          },
+        ]}
+      >
+        {!playerState.isLive ? (
+          <ProgressBar
+            name={"shared-docked-layout"}
+            content={entry}
+            value={value}
+            visible
+            layoutState={layoutState}
+            onPlayerSeek={onPlayerSeek}
+            playerState={playerState}
+            startComponentsAnimation={noop}
+            docked
+          />
+        ) : null}
 
-      <View style={styles.content}>
-        <View style={styles.touchableArea}>
-          {isActiveGesture || layoutState.docked ? (
-            <View style={{ aspectRatio: aspectRatio, height: minimisedHeight }}>
-              {ImageComponent || null}
-            </View>
-          ) : (
+        <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={playerDimensionsStyle(
-                minimisedHeight,
-                isActiveGesture || layoutState.docked
-              )}
-            />
-          )}
+              testID="content-info"
+              style={[
+                styles.contentInfo,
+                { backgroundColor: dockedBackgroundColor },
+              ]}
+            >
+              <ContentInfo
+                content={{ ...entry, title, summary }}
+                value={value}
+                docked
+              />
+            </View>
+          </View>
           <View
-            testID="content-info"
             style={[
-              styles.contentInfo,
+              isTablet
+                ? styles.controlsContainerForTablet
+                : styles.controlsContainerForMobile,
               { backgroundColor: dockedBackgroundColor },
             ]}
           >
-            <ContentInfo
-              content={{ ...entry, title, summary }}
+            <Controls
+              value={value}
+              visible
+              buttons={R.partial(controlButtons, [
+                playerState.isLive && liveButton,
+              ])}
+              style={styles.playPauseButton}
+              playNextData={playNextData}
+              playerState={playerState}
+            />
+            <Button
+              icon={"close_mini"}
+              size={"medium"}
               value={value}
-              docked
+              onPress={onCloseVideoModal}
+              style={styles.buttons}
             />
           </View>
         </View>
-        <View
-          style={[
-            isTablet
-              ? styles.controlsContainerForTablet
-              : styles.controlsContainerForMobile,
-            { backgroundColor: dockedBackgroundColor },
-          ]}
-        >
-          <Controls
-            value={value}
-            visible
-            buttons={R.partial(controlButtons, [
-              playerState.isLive && liveButton,
-            ])}
-            style={styles.playPauseButton}
-            playNextData={playNextData}
-            playerState={playerState}
-          />
-          <Button
-            icon={"close_mini"}
-            size={"medium"}
-            value={value}
-            onPress={onCloseVideoModal}
-            style={styles.buttons}
-          />
-        </View>
       </View>
       <View
         style={{
-          height: insets.bottom + bottomTabBarHeight,
+          height: insets.bottom + (menuVisible ? bottomTabBarHeight : 0),
           backgroundColor: dockedBackgroundColor,
         }}
       />
-    </View>
+    </>
   );
 };

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

@@ -4,7 +4,6 @@ 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";
@@ -17,7 +16,7 @@ import {
   BottomDebugSquare,
   LeftDebugSquare,
   RightDebugSquare,
-} from "./Debug/index";
+} from "./DebugComponent";
 
 import { Props } from "./types";
 
@@ -79,8 +78,6 @@ export function MobileLayout({
   onSpeedButtonPress,
   playbackSpeedName,
   configuration,
-  dimensions,
-  playNextData,
   title,
   summary,
 }: Props) {
@@ -88,12 +85,10 @@ export function MobileLayout({
 
   const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
-  const { progressBarHeight } = useModalAnimationContext();
 
   const { imageSize } = useMobileLayoutImageSize();
 
-  const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
-    useTransportInfoHeight();
+  const { onLayout: onTransportInfoLayout } = useTransportInfoHeight();
 
   const controlsContainerHeight = React.useMemo(() => {
     return (
@@ -107,10 +102,6 @@ export function MobileLayout({
     );
   }, [screenHeight, topInset, imageSize, bottomInset]);
 
-  const verticalOffsetForImage = React.useMemo(() => {
-    return transportInfoHeight + MOBILE.MARGIN_TOP - progressBarHeight;
-  }, [transportInfoHeight, progressBarHeight]);
-
   return (
     <View
       style={[
@@ -162,18 +153,9 @@ export function MobileLayout({
         >
           <PlayerImage
             entry={entry}
-            layoutState={layoutState}
-            playerState={playerState}
-            value={value}
-            configuration={configuration}
-            onPlayerSeek={onPlayerSeek}
-            dimensions={dimensions}
-            playNextData={playNextData}
-            title={title}
-            summary={summary}
-            docked={docked}
+            docked={false}
             imageWidth={imageSize}
-            verticalOffset={verticalOffsetForImage}
+            configuration={configuration}
           />
         </View>
         {/* PlayerImage */}

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} />
+  );
 };

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

@@ -53,6 +53,7 @@ export const PlayerImage = (props: Props) => {
             entry={entry}
             style={[styles.backgroundImageContainer, { borderRadius }]}
             imageWidth={imageWidth}
+            docked={docked}
           />
         )}
       </View>

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

@@ -1,11 +1,6 @@
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
@@ -17,8 +12,6 @@ import { Props } from "./types";
 import { isSmallTabletHeight as getIsSmallTabletHeight } from "./utils";
 import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "./const";
 
-const isIOS = isApplePlatform();
-
 const MIN_WIDTH = TABLET_LANDSCAPE.MIN_WIDTH; // Minimum width for the audio player container
 const MAX_SPACING = TABLET_LANDSCAPE.MARGIN_VERTICAL; // Maximum spacing for the audio player container
 const MIN_SPACING = TABLET_LANDSCAPE.MARGIN_VERTICAL_S; // Minimum spacing for the audio player container
@@ -68,22 +61,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const isTabletWithHomeButton = (bottomInset: number): boolean =>
-  bottomInset === 0;
-
-const withAdditionalOffset = ({ progressBarHeight, bottomInset }) => {
-  if (isIOS && isTabletWithHomeButton(bottomInset)) {
-    return progressBarHeight === 0 ? 8 : progressBarHeight + 2;
-  }
-
-  if (isIOS && !isTabletWithHomeButton(bottomInset)) {
-    return progressBarHeight === 0 ? 4 : 1;
-  }
-
-  // android
-  return progressBarHeight === 0 ? 4 : 0.5;
-};
-
 export function TabletLandscapeLayout({
   entry,
   layoutState,
@@ -96,21 +73,16 @@ export function TabletLandscapeLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onCloseVideoModal,
   playbackSpeedName,
   configuration,
-  dimensions,
-  playNextData,
   title,
   summary,
 }: Props) {
   const [imageWidth, setImageWidth] = React.useState(0);
   const { docked } = layoutState;
 
-  const { bottom: bottomInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
   const isSmallScreen = getIsSmallTabletHeight(screenHeight);
-  const { progressBarHeight } = useModalAnimationContext();
 
   const onLayoutImage = React.useCallback((e) => {
     setImageWidth(e.nativeEvent.layout.width);
@@ -149,20 +121,7 @@ export function TabletLandscapeLayout({
               <PlayerImage
                 docked={false}
                 entry={entry}
-                layoutState={layoutState}
-                playerState={playerState}
-                value={value}
                 configuration={configuration}
-                onPlayerSeek={onPlayerSeek}
-                onCloseVideoModal={onCloseVideoModal}
-                dimensions={dimensions}
-                playNextData={playNextData}
-                title={title}
-                summary={summary}
-                verticalOffset={withAdditionalOffset({
-                  progressBarHeight,
-                  bottomInset,
-                })}
                 onLayoutImage={onLayoutImage}
               />
             ) : null}