@applicaster/quick-brick-player 12.0.0-alpha.5040434238 → 12.0.0-alpha.5061452310

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.5040434238",
+  "version": "12.0.0-alpha.5061452310",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,11 +36,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-alpha.5040434238",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.49",
     "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.5040434238",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5040434238",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5040434238",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.5061452310",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5061452310",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5061452310",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -54,7 +54,7 @@ type Configuration = {
 };
 
 type Props = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   inline?: boolean;
   docked?: boolean;
   configuration: Configuration;
@@ -377,10 +377,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const edges = React.useMemo<Edge[]>(
-    () => (["right", "left", "top"]),
-    [docked]
-  );
+  const edges = React.useMemo<Edge[]>(() => ["right", "left", "top"], [docked]);
 
   const ContainerView = SafeAreaView;
 
@@ -392,10 +389,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
           additionalData={{ saveArea: true }}
         >
           <AnimatedScrollModal>
-            <View
-              style={Styles.playerContainer}
-              onLayout={onLayout}
-            >
+            <View style={Styles.playerContainer} onLayout={onLayout}>
               <Layout
                 entry={entry}
                 playerState={playerState}
@@ -426,7 +420,9 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
               />
               <View style={Styles.paddingHorizontal}>
                 {children}
-                <AnimationComponent animationType={ComponentAnimationType.componentFade}>
+                <AnimationComponent
+                  animationType={ComponentAnimationType.componentFade}
+                >
                   <PlayerDetails
                     configuration={configuration}
                     style={Styles.playerDetails}

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

@@ -27,7 +27,11 @@ import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-compone
 import { useLanguageData } from "@applicaster/zapp-react-native-utils/reactHooks/player";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { useEffect, useMemo, useState } from "react";
-import { useModalAnimationContext, AnimationComponent, ComponentAnimationType } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import {
+  useModalAnimationContext,
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import DockedLayout from "./DockedLayout";
 
 type Dimensions = {
@@ -95,19 +99,31 @@ const Styles = {
     justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
   }),
   backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
-    const mobileValue = dimensions.width ? dimensions.width - (PADDING_HORIZONTAL * 2) : 330;
+    const mobileValue = dimensions.width
+      ? dimensions.width - PADDING_HORIZONTAL * 2
+      : 330;
 
     return {
       width: isTablet ? 463 : mobileValue,
       height: isTablet ? 463 : mobileValue,
     };
   },
-  backgroundImageContainerImageStyle: (isTablet, docked, startComponentsAnimation, isActiveGesture) => ({
-    borderRadius: (startComponentsAnimation && isActiveGesture) || docked ? 0 : (isTablet ? 24 : 10),
+  backgroundImageContainerImageStyle: (
+    isTablet,
+    docked,
+    startComponentsAnimation,
+    isActiveGesture
+  ) => ({
+    borderRadius:
+      (startComponentsAnimation && isActiveGesture) || docked
+        ? 0
+        : isTablet
+        ? 24
+        : 10,
   }),
 
   paddingHorizontal: {
-    paddingHorizontal: PADDING_HORIZONTAL
+    paddingHorizontal: PADDING_HORIZONTAL,
   },
 
   controlsMobile: {
@@ -297,10 +313,15 @@ export default function DefaultLayout(props: LayoutProps) {
   const needsToShowProgressBar =
     (isLiveContent && liveSeekingEnabled) || !isLiveContent;
 
-  const defaultImageDimensions = React.useMemo(() =>
-    defaultDimensions && Styles.backgroundImageContainer(defaultDimensions, isTablet), [defaultDimensions]);
-  
-  const { isActiveGesture, startComponentsAnimation } = useModalAnimationContext();
+  const defaultImageDimensions = React.useMemo(
+    () =>
+      defaultDimensions &&
+      Styles.backgroundImageContainer(defaultDimensions, isTablet),
+    [defaultDimensions]
+  );
+
+  const { isActiveGesture, startComponentsAnimation } =
+    useModalAnimationContext();
 
   return (
     <View
@@ -318,34 +339,50 @@ export default function DefaultLayout(props: LayoutProps) {
           actionButtons={actionButtons}
         />
       </AnimationComponent>
-      <AnimationComponent animationType={ComponentAnimationType.moveUpComponent}
-        style={isTablet ? Styles.playerImageWrapper : null}>
-        <AnimationComponent animationType={ComponentAnimationType.moveComponentHorizontal}
-          additionalData={
-            {
-              disableAnimatedComponent: !isTablet,
-              moveValue: (dimensions.width - 463) / 2,
-              extraAnimation: !isTablet ? {
-                [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
-                  style: Styles.paddingHorizontal,
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        style={isTablet ? Styles.playerImageWrapper : null}
+      >
+        <AnimationComponent
+          animationType={ComponentAnimationType.moveComponentHorizontal}
+          additionalData={{
+            disableAnimatedComponent: !isTablet,
+            moveValue: (dimensions.width - 463) / 2,
+            extraAnimation: !isTablet
+              ? {
+                  [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
+                    style: Styles.paddingHorizontal,
+                  },
                 }
-              } : null
-            }
-          }
-          style={isTablet ? Styles.alignItemsCenter : null}>
+              : null,
+          }}
+          style={isTablet ? Styles.alignItemsCenter : null}
+        >
           <PlayerImageBackground
             entry={entry}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
-            imageStyle={Styles.backgroundImageContainerImageStyle(isTablet, docked, startComponentsAnimation, isActiveGesture)}
+            imageStyle={Styles.backgroundImageContainerImageStyle(
+              isTablet,
+              docked,
+              startComponentsAnimation,
+              isActiveGesture
+            )}
             defaultImageDimensions={defaultImageDimensions}
           />
         </AnimationComponent>
 
         <DockedLayout {...props} />
       </AnimationComponent>
-      <View style={[Styles.paddingHorizontal, isTablet ? Styles.tabletLayout : null]}>
-        {!docked &&
-          <AnimationComponent animationType={ComponentAnimationType.componentFade}>
+      <View
+        style={[
+          Styles.paddingHorizontal,
+          isTablet ? Styles.tabletLayout : null,
+        ]}
+      >
+        {!docked && (
+          <AnimationComponent
+            animationType={ComponentAnimationType.componentFade}
+          >
             <AudioDescription
               title={title}
               summary={summary}
@@ -382,11 +419,14 @@ export default function DefaultLayout(props: LayoutProps) {
               visible={true}
               keepAlive={null}
               buttons={controlButtons}
-              style={Styles.controls(isTablet, isLiveContent && showFullControls)}
+              style={Styles.controls(
+                isTablet,
+                isLiveContent && showFullControls
+              )}
               playerState={playerState}
             />
           </AnimationComponent>
-        }
+        )}
       </View>
     </View>
   );

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

@@ -109,8 +109,11 @@ const backgroundColorStyle = (value: GetValue): ViewStyle => ({
   backgroundColor: value("docked_player_background_color"),
 });
 
-const playerDimensionsStyle = (minimisedHeight: number, addPadding: boolean): ViewStyle => ({
-  paddingLeft: addPadding ? (minimisedHeight || 100) : 0,
+const playerDimensionsStyle = (
+  minimisedHeight: number,
+  addPadding: boolean
+): ViewStyle => ({
+  paddingLeft: addPadding ? minimisedHeight || 100 : 0,
 });
 
 const animatedContainerStyle = (docked: boolean): ViewStyle => ({
@@ -120,7 +123,11 @@ const animatedContainerStyle = (docked: boolean): ViewStyle => ({
   zIndex: docked ? 1 : -1,
 });
 
-const backgroundImageStyle = (dimensions: Dimensions, minimisedHeight: number, isActiveGesture: boolean): ViewStyle => ({
+const backgroundImageStyle = (
+  dimensions: Dimensions,
+  minimisedHeight: number,
+  isActiveGesture: boolean
+): ViewStyle => ({
   height: isActiveGesture ? minimisedHeight : dimensions.height,
   aspectRatio: 1,
   position: "absolute",
@@ -215,14 +222,28 @@ export default function DockedLayout(props: LayoutProps) {
 
   const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));
-  const { isActiveGesture, setPlayerAnimationState, startComponentsAnimation, minimisedHeight } = useModalAnimationContext();
-  const maximazeVideoModal = React.useCallback(() => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze), []);
+
+  const {
+    isActiveGesture,
+    setPlayerAnimationState,
+    startComponentsAnimation,
+    minimisedHeight,
+  } = useModalAnimationContext();
+
+  const maximazeVideoModal = React.useCallback(
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    []
+  );
 
   if (!layoutState.docked && !startComponentsAnimation) return null;
-  
+
   return (
-    <AnimationComponent animationType={ComponentAnimationType.componentAppears}
-      style={[styles.container, animatedContainerStyle(isActiveGesture || layoutState.docked)]}
+    <AnimationComponent
+      animationType={ComponentAnimationType.componentAppears}
+      style={[
+        styles.container,
+        animatedContainerStyle(isActiveGesture || layoutState.docked),
+      ]}
     >
       {!playerState.isLive && layoutState.docked && (
         <ProgressBar
@@ -237,10 +258,22 @@ export default function DockedLayout(props: LayoutProps) {
       )}
 
       <View style={styles.content}>
-        <View style={backgroundImageStyle(dimensions, minimisedHeight, isActiveGesture)}/>
+        <View
+          style={backgroundImageStyle(
+            dimensions,
+            minimisedHeight,
+            isActiveGesture
+          )}
+        />
         <TouchableWithoutFeedback onPress={maximazeVideoModal}>
           <View
-            style={[styles.touchableArea, playerDimensionsStyle(minimisedHeight, isActiveGesture || layoutState.docked)]}
+            style={[
+              styles.touchableArea,
+              playerDimensionsStyle(
+                minimisedHeight,
+                isActiveGesture || layoutState.docked
+              ),
+            ]}
           >
             <View
               style={[

package/src/Player/AudioLayer/MagicBG/index.tsx

@@ -111,7 +111,7 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     };
 
     fetchColors();
-  }, [image, fallbackUrl, colors, defaultColor]);
+  }, []);
 
   return (
     <View style={[styles.container, { backgroundColor: dominantColor }]}>

package/src/Player/index.tsx

@@ -38,7 +38,10 @@ import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/c
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { getTargetScreenDataFromEntry } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
-import { AnimationComponent, ComponentAnimationType } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 const RNPlayerManager = {
   QuickBrickPlayerPlugin: isApplePlatform()
@@ -1070,22 +1073,7 @@ export default class VideoPlayer extends React.Component<
               {...nativeProps}
             />
           )}
-          <AudioPlayerWrapper {...sharedWrapperViewProps}>
-            <View>
-              {
-                <PlayNextOverlay
-                  item={entry}
-                  playerIsDocked={docked}
-                  pluginConfiguration={this.getPluginConfiguration()}
-                  playerId={this.props.playerId}
-                  playNextData={this.getPlayNextData()}
-                  setNextVideoPreloadThresholdPercentage={
-                    this.props.setNextVideoPreloadThresholdPercentage
-                  }
-                />
-              }
-            </View>
-          </AudioPlayerWrapper>
+          <AudioPlayerWrapper {...sharedWrapperViewProps} />
         </View>
       ) : (
         <PlayerWrapper {...sharedWrapperViewProps}>
@@ -1100,11 +1088,24 @@ export default class VideoPlayer extends React.Component<
               <View style={styles.container}>
                 <View style={[playerContainerStyles, playerDimensions]}>
                   {isAudioItem && (
-                    <AudioPlayer
-                      style={playerDimensions}
-                      audio_item={entry}
-                      plugin_configuration={this.getPluginConfiguration()}
-                    />
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={{
+                        ...playerDimensions,
+                        inlineAudioPlayer: true,
+                      }}
+                      style={getStyle(playerDimensions)}
+                    >
+                      <AudioPlayer
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
+                        audio_item={entry}
+                        plugin_configuration={this.getPluginConfiguration()}
+                      />
+                    </AnimationComponent>
                   )}
 
                   {shouldRenderBackground && (
@@ -1127,7 +1128,11 @@ export default class VideoPlayer extends React.Component<
                         {...nativeEvents}
                         {...nativeProps}
                         listener={this.props.listener}
-                        style={isTV() ? getStyle(playerDimensions) : styles.playerSize}
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
                         pluginConfiguration={this.getPluginConfiguration()}
                         controller={this.props.controller}
                       >