@applicaster/quick-brick-player 13.0.0-alpha.1244047241 → 13.0.0-alpha.1290120403

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.1244047241",
+  "version": "13.0.0-alpha.1290120403",
   "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.0-rc.120",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.112",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.1244047241",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.1244047241",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.1244047241",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.1290120403",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.1290120403",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.1290120403",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -113,7 +113,7 @@ export const AudioDescription = (props: AudioDescriptionProps) => {
       style={[
         styles.wrapper,
         {
-          maxWidth: Math.max(maxWidth, 320),
+          maxWidth,
           height,
         },
       ]}

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -43,11 +43,7 @@ import {
   SleepTimerState,
 } from "./SleepTimerManager";
 import { DEFAULT_SPEED, PlaybackSpeed, SpeedController } from "./SpeedManager";
-import {
-  dismissModal as dismissBottomSheetModal,
-  openBottomSheetModal,
-  useModalStoreState,
-} from "@applicaster/zapp-react-native-utils/modalState";
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
 import { getSleepTimerOptions } from "../Const/sleepTimerOptions";
 import { speedOptions } from "../Const/speedOptions";
 
@@ -65,6 +61,7 @@ type Dimensions = {
 
 type Configuration = {
   [key: string]: any;
+  audio_player_background_image_query?: string;
   audio_player_background_image_default_color?: string;
   tablet_landscape_sidebar_width?: string;
   tablet_landscape_player_container_background_color?: string;
@@ -106,8 +103,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
 
-  const modalBottomSheetState = useModalStoreState();
-
   const {
     configuration,
     style,
@@ -145,31 +140,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     }
   }, [player]);
 
-  useEffect(() => {
-    if (!player) return;
-
-    const unsubscribe = player.addListener({
-      id: "audio-player-wrapper-bottom-sheet-modal",
-      listener: {
-        onVideoEnd: () => {
-          // Dismiss the bottom sheet modal when the video ends to avoid audio breaks and app freeze
-          if (modalBottomSheetState.visible) {
-            dismissBottomSheetModal();
-          }
-        },
-      },
-    });
-
-    return () => unsubscribe?.();
-  }, [player, modalBottomSheetState.visible, sleepTimerManager]);
-
-  React.useEffect(() => {
-    if (playerState?.isLive) {
-      // Resetting a sleep timer when audio content is live (Timer not supported on live video)
-      sleepTimerManager.setSleepTimer(SLEEP_TIMER_OFF).catch();
-    }
-  }, [playerState?.isLive]);
-
   const [playbackSpeed, setPlaybackSpeed] =
     useState<PlaybackSpeed>(DEFAULT_SPEED);
 

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

@@ -24,7 +24,6 @@ import {
   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";
 
 type Props = {
   entry: ZappEntry;
@@ -89,6 +88,10 @@ const styles = StyleSheet.create({
   },
 });
 
+const backgroundColorStyle = (value: GetValue): ViewStyle => ({
+  backgroundColor: value("docked_player_background_color"),
+});
+
 const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
@@ -205,10 +208,6 @@ export const DockedControls = (props: Props) => {
     []
   );
 
-  const dockedBackgroundColor = value("docked_player_background_color");
-
-  const insets = useSafeAreaInsets();
-
   if (!layoutState.docked && !startComponentsAnimation) return null;
 
   return (
@@ -220,9 +219,7 @@ export const DockedControls = (props: Props) => {
           isActiveGesture || layoutState.docked,
           progressBarHeight
         ),
-        {
-          height: minimisedHeight + insets.bottom,
-        },
+        { height: minimisedHeight },
       ]}
     >
       {!playerState.isLive &&
@@ -264,12 +261,7 @@ export const DockedControls = (props: Props) => {
                 )}
               />
             )}
-            <View
-              style={[
-                styles.contentInfo,
-                { backgroundColor: dockedBackgroundColor },
-              ]}
-            >
+            <View style={[styles.contentInfo, backgroundColorStyle(value)]}>
               <ContentInfo
                 content={{ ...entry, title, summary }}
                 value={value}
@@ -283,7 +275,7 @@ export const DockedControls = (props: Props) => {
             isTablet
               ? styles.controlsContainerForTablet
               : styles.controlsContainerForMobile,
-            { backgroundColor: dockedBackgroundColor },
+            backgroundColorStyle(value),
           ]}
         >
           <Controls
@@ -305,12 +297,6 @@ export const DockedControls = (props: Props) => {
           />
         </View>
       </View>
-      <View
-        style={{
-          height: insets.bottom,
-          backgroundColor: dockedBackgroundColor,
-        }}
-      />
     </AnimationComponent>
   );
 };

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

@@ -1,5 +1,11 @@
 import React, { PropsWithChildren } from "react";
-import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
+import {
+  Image,
+  Animated,
+  StyleSheet,
+  ViewStyle,
+  ImageStyle,
+} from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import {
@@ -20,10 +26,16 @@ const styles = StyleSheet.create({
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: ImageStyle | ImageStyle[];
+  wrapperViewStyle?: ViewStyle;
   imageWidth: number;
 }>;
 
-export const AnimatedImage = ({ entry, style, imageWidth }: Props) => {
+export const AnimatedImage = ({
+  entry,
+  style,
+  wrapperViewStyle,
+  imageWidth,
+}: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
   const source = React.useMemo(
@@ -59,6 +71,7 @@ export const AnimatedImage = ({ entry, style, imageWidth }: Props) => {
     <Animated.View
       style={[
         styles.container,
+        wrapperViewStyle,
         {
           width: heightAnim,
         },

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

@@ -81,10 +81,7 @@ export const PlayerImage = (props: Props) => {
       >
         <View
           onLayout={onLayoutImage}
-          style={[
-            shouldShowShadow ? styles.shadow : undefined,
-            { borderRadius },
-          ]}
+          style={shouldShowShadow ? styles.shadow : undefined}
         >
           {!imageWidth ? (
             <View style={[styles.defaultImageWrapperView, { borderRadius }]}>

package/src/Player/AudioLayer/Layout/PlayerImage/styles.ts

@@ -1,6 +1,4 @@
-/* eslint-disable react-native/no-color-literals */
 import { StyleSheet } from "react-native";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const SHADOW_COLOR = "rgba(0, 0, 0, 1)";
 
@@ -23,13 +21,9 @@ export const styles = StyleSheet.create({
     overflow: "hidden",
   },
   shadow: {
-    borderColor: "transparent",
     shadowColor: SHADOW_COLOR,
     shadowOffset: { width: 0, height: 24 },
-    shadowOpacity: platformSelect({
-      ios: 0.35,
-      default: 0.2,
-    }),
+    shadowOpacity: 0.2,
     shadowRadius: 32,
     elevation: 12,
   },

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

@@ -42,7 +42,6 @@ const styles = StyleSheet.create({
   audioPlayerContainer: {
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "center",
     minWidth: MIN_WIDTH,
 
     ...withDebug({
@@ -50,9 +49,6 @@ const styles = StyleSheet.create({
       borderColor: "blue",
     }),
   },
-  audioPlayerContainerHeightLimit: {
-    maxHeight: 750,
-  },
   audioPlayerContainerPaddings: {
     paddingBottom: MAX_SPACING,
     paddingTop: MAX_SPACING,
@@ -148,57 +144,55 @@ export function TabletLandscapeLayout({
             : styles.audioPlayerContainerPaddings,
         ]}
       >
-        <View style={[styles.flex, styles.audioPlayerContainerHeightLimit]}>
-          {/* PlayerImage non-docked */}
-          <View style={[styles.flex, withDebug(styles.debugYellow)]}>
-            {!docked ? (
-              <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}
-          </View>
-          {/* PlayerImage */}
-
-          <View style={styles.controlsContainer}>
-            <Controls
-              maxWidth={imageWidth}
+        {/* PlayerImage non-docked */}
+        <View style={[styles.flex, withDebug(styles.debugYellow)]}>
+          {!docked ? (
+            <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}
-              sleepTimerDate={sleepTimerDate}
-              cancelSleepTimer={cancelSleepTimer}
-              playbackSpeedName={playbackSpeedName}
-              playbackSleepName={playbackSleepName}
-              onPlaybackButtonPress={onPlaybackButtonPress}
-              onRewindButtonPress={onRewindButtonPress}
-              onForwardButtonPress={onForwardButtonPress}
-              onPlayerSeek={onPlayerSeek}
-              onSkipStart={onSkipStart}
-              onSkipLive={onSkipLive}
-              onSpeedButtonPress={onSpeedButtonPress}
-              onSleepButtonPress={onSleepButtonPress}
-              docked={docked}
+              verticalOffset={withAdditionalOffset({
+                progressBarHeight,
+                bottomInset,
+              })}
+              onLayoutImage={onLayoutImage}
             />
-          </View>
+          ) : null}
+        </View>
+        {/* PlayerImage */}
+
+        <View style={styles.controlsContainer}>
+          <Controls
+            maxWidth={imageWidth}
+            entry={entry}
+            layoutState={layoutState}
+            playerState={playerState}
+            value={value}
+            title={title}
+            summary={summary}
+            sleepTimerDate={sleepTimerDate}
+            cancelSleepTimer={cancelSleepTimer}
+            playbackSpeedName={playbackSpeedName}
+            playbackSleepName={playbackSleepName}
+            onPlaybackButtonPress={onPlaybackButtonPress}
+            onRewindButtonPress={onRewindButtonPress}
+            onForwardButtonPress={onForwardButtonPress}
+            onPlayerSeek={onPlayerSeek}
+            onSkipStart={onSkipStart}
+            onSkipLive={onSkipLive}
+            onSpeedButtonPress={onSpeedButtonPress}
+            onSleepButtonPress={onSleepButtonPress}
+            docked={docked}
+          />
         </View>
       </View>
 

package/src/Player/hooks/useIsCasting.tsx

@@ -26,7 +26,7 @@ export const useIsCasting = () => {
 
   React.useEffect(() => {
     if (!shouldOnlyUpdateInForeground || isAppInForeground) {
-      if (actionContext && castActionState === null) {
+      if (!(!actionContext && castActionState !== null)) {
         setCastActionState(actionContext.initialEntryState(fakeEntry));
       }
     }