@applicaster/quick-brick-player 14.0.0-alpha.8387612031 → 14.0.0-alpha.9119252693

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.8387612031",
+  "version": "14.0.0-alpha.9119252693",
   "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": "14.0.0-alpha.8387612031",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.13",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.8387612031",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.8387612031",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.8387612031",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-alpha.9119252693",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.31",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.9119252693",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.9119252693",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.9119252693",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,11 +1,6 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
-import {
-  Dimensions as ScreenDimensions,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from "react-native";
+import { 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";
@@ -13,14 +8,9 @@ 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 {
-  useIsTablet,
-  useNavigation,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { 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,
@@ -30,12 +20,7 @@ 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";
@@ -81,18 +66,10 @@ 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"];
@@ -107,16 +84,10 @@ 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,
@@ -264,10 +235,6 @@ 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);
@@ -285,51 +252,28 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   return (
     <SafeAreaView style={[style, Styles.playerContainer]} edges={edges}>
-      <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>
+      <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>
     </SafeAreaView>
   );
 };

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

@@ -1,12 +1,11 @@
 import * as React from "react";
-import {
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-  ViewStyle,
-} from "react-native";
+import { StyleSheet, View, ViewStyle } from "react-native";
 import * as R from "ramda";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useIsTablet,
+  useZStore,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
 import {
   Button,
@@ -17,15 +16,13 @@ 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();
 
@@ -34,13 +31,15 @@ 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,6 +47,7 @@ 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,26 +99,6 @@ 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,
@@ -180,107 +160,111 @@ export const DockedControls = (props: Props) => {
   const {
     entry,
     layoutState,
-    playerState,
-    value,
-    dimensions,
-    onCloseVideoModal,
-    onPlayerSeek,
+    onPlayerSeek = noop,
     playNextData,
-    title,
-    summary,
     ImageComponent,
+    isActiveGesture = true,
+    aspectRatio,
   } = props;
 
-  const isTablet = useIsTablet();
+  const onCloseVideoModal = React.useCallback(() => {
+    playerManager.close();
+  }, []);
 
-  const liveButton = Boolean(value("live_badge_enabled"));
+  const { minimised_height: minimisedHeight } = useConfiguration();
 
-  const {
-    isActiveGesture,
-    setPlayerAnimationState,
-    startComponentsAnimation,
-    minimisedHeight,
-    progressBarHeight,
-  } = useModalAnimationContext();
+  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
+      );
+
+      if (key === "liveSeekingEnabled") {
+        return playerState.seekableDuration <
+          minimumAllowedSeekableDurationInSeconds || playerManager.isCasting()
+          ? false
+          : retVal;
+      }
 
-  const maximazeVideoModal = React.useCallback(
-    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximize),
-    []
+      return retVal;
+    },
+    [...Object.values(configuration), playerState]
+  );
+
+  const { title, summary } = useTitleSummaryOverlay(
+    entry,
+    playerState?.isLive,
+    configuration?.audio_live_player_update_interval
   );
 
+  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 (
-    <AnimationComponent
-      animationType={ComponentAnimationType.componentAppears}
+    <View
       style={[
         styles.container,
-        animatedContainerStyle(
-          isActiveGesture || layoutState.docked,
-          progressBarHeight
-        ),
         {
           height: minimisedHeight + bottomTabBarHeight + insets.bottom,
         },
       ]}
     >
-      {!playerState.isLive &&
-      (layoutState.docked || startComponentsAnimation) ? (
+      {!playerState.isLive ? (
         <ProgressBar
-          name={"audio-docked-layout"}
+          name={"shared-docked-layout"}
           content={entry}
           value={value}
           visible
           layoutState={layoutState}
           onPlayerSeek={onPlayerSeek}
           playerState={playerState}
-          startComponentsAnimation={startComponentsAnimation}
+          startComponentsAnimation={noop}
           docked
         />
       ) : null}
 
       <View style={styles.content}>
-        <View
-          style={backgroundImageStyle(
-            dimensions,
-            minimisedHeight,
-            isActiveGesture
-          )}
-        />
-        <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 style={styles.touchableArea}>
+          {isActiveGesture || layoutState.docked ? (
+            <View style={{ aspectRatio: aspectRatio, height: minimisedHeight }}>
+              {ImageComponent || null}
             </View>
+          ) : (
+            <View
+              style={playerDimensionsStyle(
+                minimisedHeight,
+                isActiveGesture || layoutState.docked
+              )}
+            />
+          )}
+          <View
+            testID="content-info"
+            style={[
+              styles.contentInfo,
+              { backgroundColor: dockedBackgroundColor },
+            ]}
+          >
+            <ContentInfo
+              content={{ ...entry, title, summary }}
+              value={value}
+              docked
+            />
           </View>
-        </TouchableWithoutFeedback>
+        </View>
         <View
           style={[
             isTablet
@@ -314,6 +298,6 @@ export const DockedControls = (props: Props) => {
           backgroundColor: dockedBackgroundColor,
         }}
       />
-    </AnimationComponent>
+    </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";
@@ -12,13 +11,12 @@ 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";
 
@@ -56,6 +54,7 @@ const mobileStyles = ({
   imageSize,
 }): ViewStyle => ({
   height: screenHeight - topInset - bottomInset,
+  width: "100%",
 
   opacity: imageSize ? 1 : 0, // hide content until imageSize is calculated
 
@@ -77,11 +76,8 @@ export function MobileLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onCloseVideoModal,
   playbackSpeedName,
   configuration,
-  dimensions,
-  playNextData,
   title,
   summary,
 }: Props) {
@@ -89,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 (
@@ -108,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={[
@@ -163,19 +153,9 @@ export function MobileLayout({
         >
           <PlayerImage
             entry={entry}
-            layoutState={layoutState}
-            playerState={playerState}
-            value={value}
-            configuration={configuration}
-            onPlayerSeek={onPlayerSeek}
-            onCloseVideoModal={onCloseVideoModal}
-            dimensions={dimensions}
-            playNextData={playNextData}
-            title={title}
-            summary={summary}
-            docked={docked}
+            docked={false}
             imageWidth={imageSize}
-            verticalOffset={verticalOffsetForImage}
+            configuration={configuration}
           />
         </View>
         {/* PlayerImage */}
@@ -204,19 +184,6 @@ 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

@@ -8,8 +8,9 @@ import {
   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, useBackgroundImage } from "./hooks";
+import { useChangePlayerState } from "./hooks";
 
 const styles = StyleSheet.create({
   container: {
@@ -29,7 +30,7 @@ type Props = PropsWithChildren<{
 export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
-  const source = useBackgroundImage({ entry });
+  const backgroundImageSource = useBackgroundImage(entry);
 
   const { minimisedHeight } = useModalAnimationContext();
 
@@ -66,8 +67,6 @@ export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
     };
   }, [changePlayerState$, minimisedHeight, imageWidth]);
 
-  if (!source) return null;
-
   return (
     <Animated.View
       style={[
@@ -77,7 +76,7 @@ export const AnimatedImage = ({ entry, style, imageWidth, docked }: 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 { useBackgroundImage } from "./hooks";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 type Props = {
   entry: ZappEntry;
@@ -9,9 +8,9 @@ type Props = {
 };
 
 export const FlexImage = ({ entry, style }: Props) => {
-  const source = useBackgroundImage({ entry });
-
-  if (!source) return null;
+  const backgroundImageSource = useBackgroundImage(entry);
 
-  return <Image resizeMode="cover" style={style} source={source} />;
+  return (
+    <Image resizeMode="cover" style={style} source={backgroundImageSource} />
+  );
 };

package/src/Player/AudioLayer/Layout/PlayerImage/hooks/index.ts

@@ -1,3 +1 @@
 export { useChangePlayerState } from "./useChangePlayerState";
-
-export { useBackgroundImage } from "./useBackgroundImage";