@applicaster/quick-brick-player 14.0.0-rc.9 → 15.0.0-alpha.1089439460

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-rc.9",
+  "version": "15.0.0-alpha.1089439460",
   "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": "13.0.0-rc.124",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.7",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.9",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.9",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.9",
+    "@applicaster/quick-brick-mobile-transport-controls": "15.0.0-alpha.1089439460",
+    "@applicaster/quick-brick-tv-transport-controls": "15.0.0-alpha.1089439460",
+    "@applicaster/zapp-react-native-tvos-app": "15.0.0-alpha.1089439460",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.1089439460",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.1089439460",
     "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/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";
@@ -76,23 +61,16 @@ type Props = {
     inline: boolean;
     docked: boolean;
     isModal: boolean;
+    pip: boolean;
   };
   playNextData: PlayNextData;
   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 +85,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,
@@ -128,11 +100,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   );
 
   useEffect(() => {
-    if (player) {
-      setSpeedManager(new SpeedController(player));
-    } else {
-      setSpeedManager(null);
-    }
+    setSpeedManager(player ? new SpeedController(player) : null);
   }, [player]);
 
   useEffect(() => {
@@ -246,7 +214,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         items: speedOptions,
         current_selection: playbackSpeed,
         onPress: onSpeedSelect,
-        title: configuration["playback_speed_title"],
+        title: configuration.playback_speed_title,
         itemProps: getBottomSheetModalItemProps,
         iconProps: getBottomSheetModalIconProps,
         labelProps: getBottomSheetModalLabelProps,
@@ -262,11 +230,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         ],
       },
     });
-  }, [playbackSpeed, onSpeedSelect, configuration["playback_speed_title"]]);
-
-  const onCloseVideoModal = React.useCallback(() => {
-    playerManager.close();
-  }, [playerManager]);
+  }, [playbackSpeed, onSpeedSelect, configuration.playback_speed_title]);
 
   const onPlayerSeek = React.useCallback(
     (targetTime: number) => {
@@ -283,53 +247,45 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
+  const layoutStateMemo = React.useMemo(
+    () => ({
+      inline: layoutState.inline,
+      docked: layoutState.docked,
+      isModal: layoutState.isModal,
+      pip: layoutState.pip,
+    }),
+    [
+      layoutState.inline,
+      layoutState.docked,
+      layoutState.isModal,
+      layoutState.pip,
+    ]
+  );
+
   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={layoutStateMemo}
+          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/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>
   );
 };