@applicaster/quick-brick-player 13.0.0-rc.114 → 13.0.0-rc.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.114",
+  "version": "13.0.0-rc.116",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@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-rc.114",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.114",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.114",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.116",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.116",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.116",
     "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,
+          maxWidth: Math.max(maxWidth, 320),
           height,
         },
       ]}

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -43,7 +43,11 @@ import {
   SleepTimerState,
 } from "./SleepTimerManager";
 import { DEFAULT_SPEED, PlaybackSpeed, SpeedController } from "./SpeedManager";
-import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import {
+  openBottomSheetModal,
+  dismissModal as dismissBottomSheetModal,
+  useModalStoreState,
+} from "@applicaster/zapp-react-native-utils/modalState";
 import { getSleepTimerOptions } from "../Const/sleepTimerOptions";
 import { speedOptions } from "../Const/speedOptions";
 
@@ -61,7 +65,6 @@ 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;
@@ -103,6 +106,8 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
 
+  const modalBottomSheetState = useModalStoreState();
+
   const {
     configuration,
     style,
@@ -140,6 +145,24 @@ 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]);
+
   const [playbackSpeed, setPlaybackSpeed] =
     useState<PlaybackSpeed>(DEFAULT_SPEED);
 

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

@@ -1,5 +1,11 @@
 import React, { PropsWithChildren } from "react";
-import { Image, Animated, StyleSheet, ViewStyle } from "react-native";
+import {
+  Image,
+  Animated,
+  StyleSheet,
+  ViewStyle,
+  ImageStyle,
+} from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import {
@@ -14,14 +20,12 @@ const styles = StyleSheet.create({
     // we have to specify flex:0 and dimensions to make animation work
     flex: 0,
     aspectRatio: 1,
-    overflow: "hidden",
   },
 });
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
-  style?: { [K: string]: any };
-  imageStyle?: { [K: string]: any };
+  style?: ImageStyle | ImageStyle[];
   wrapperViewStyle?: ViewStyle;
   imageWidth: number;
 }>;
@@ -29,7 +33,6 @@ type Props = PropsWithChildren<{
 export const AnimatedImage = ({
   entry,
   style,
-  imageStyle,
   wrapperViewStyle,
   imageWidth,
 }: Props) => {
@@ -69,15 +72,12 @@ export const AnimatedImage = ({
       style={[
         styles.container,
         wrapperViewStyle,
-        imageStyle,
         {
           width: heightAnim,
         },
       ]}
     >
-      <Image resizeMode="cover" style={style} source={source}>
-        {null}
-      </Image>
+      <Image resizeMode="cover" style={style} source={source} />
     </Animated.View>
   );
 };

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

@@ -1,17 +1,14 @@
 import * as React from "react";
-import { Image } from "react-native";
+import { Image, ImageStyle } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
 type Props = {
   entry: ZappEntry;
-  style?: { [K: string]: any };
-  imageStyle?: { [K: string]: any };
+  style?: ImageStyle;
 };
 
-const style = { flex: 1, aspectRatio: 1 };
-
-export const FlexImage = ({ entry, imageStyle }: Props) => {
+export const FlexImage = ({ entry, style }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
     [entry]
@@ -19,7 +16,5 @@ export const FlexImage = ({ entry, imageStyle }: Props) => {
 
   if (!source) return null;
 
-  return (
-    <Image resizeMode="cover" style={[style, imageStyle]} source={source} />
-  );
+  return <Image resizeMode="cover" style={style} source={source} />;
 };

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

@@ -79,17 +79,12 @@ export const PlayerImage = (props: Props) => {
         }}
         style={styles.alignItemsCenter}
       >
-        <View onLayout={onLayoutImage}>
+        <View
+          onLayout={onLayoutImage}
+          style={shouldShowShadow ? styles.shadow : undefined}
+        >
           {!imageWidth ? (
-            <View
-              style={[
-                styles.defaultImageWrapperView,
-                shouldShowShadow ? styles.shadow : undefined,
-                {
-                  borderRadius,
-                },
-              ]}
-            >
+            <View style={[styles.defaultImageWrapperView, { borderRadius }]}>
               <FlexImage
                 entry={entry}
                 style={styles.backgroundImageContainer}
@@ -99,10 +94,8 @@ export const PlayerImage = (props: Props) => {
             // we have imageSize here and now we could animate resizing of this image
             <AnimatedImage
               entry={entry}
-              style={styles.backgroundImageContainer}
-              imageStyle={{ borderRadius }}
+              style={[styles.backgroundImageContainer, { borderRadius }]}
               imageWidth={imageWidth}
-              wrapperViewStyle={shouldShowShadow ? styles.shadow : undefined}
             />
           )}
         </View>

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-color-literals */
 import { StyleSheet } from "react-native";
 
 const SHADOW_COLOR = "rgba(0, 0, 0, 1)";
@@ -6,6 +7,7 @@ export const styles = StyleSheet.create({
   backgroundImageContainer: {
     flex: 1,
     aspectRatio: 1,
+    overflow: "hidden",
   },
 
   alignItemsCenter: {
@@ -20,6 +22,7 @@ export const styles = StyleSheet.create({
     overflow: "hidden",
   },
   shadow: {
+    borderColor: "transparent",
     shadowColor: SHADOW_COLOR,
     shadowOffset: { width: 0, height: 24 },
     shadowOpacity: 0.2,

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

@@ -42,6 +42,7 @@ const styles = StyleSheet.create({
   audioPlayerContainer: {
     flexDirection: "column",
     alignItems: "center",
+    justifyContent: "center",
     minWidth: MIN_WIDTH,
 
     ...withDebug({
@@ -49,6 +50,9 @@ const styles = StyleSheet.create({
       borderColor: "blue",
     }),
   },
+  audioPlayerContainerHeightLimit: {
+    maxHeight: 750,
+  },
   audioPlayerContainerPaddings: {
     paddingBottom: MAX_SPACING,
     paddingTop: MAX_SPACING,
@@ -144,55 +148,57 @@ export function TabletLandscapeLayout({
             : styles.audioPlayerContainerPaddings,
         ]}
       >
-        {/* PlayerImage non-docked */}
-        <View style={[styles.flex, withDebug(styles.debugYellow)]}>
-          {!docked ? (
-            <PlayerImage
-              docked={false}
+        <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}
               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}
+              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}
             />
-          ) : 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>
       </View>