@applicaster/quick-brick-player 12.0.0-alpha.3977160850 → 12.0.0-alpha.4054240460

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.3977160850",
+  "version": "12.0.0-alpha.4054240460",
   "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-rc.28",
-    "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.3977160850",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3977160850",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3977160850",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.79",
+    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-alpha.4054240460",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.4054240460",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4054240460",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4054240460",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/CellPlayer/Assets/AssetsComponent.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Image, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { MUTED_USAGE } from "../const";
 import { LiveImageManager } from "@applicaster/zapp-react-native-ui-components/Components/VideoLive/LiveImageManager";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
 type Asset = string | undefined;
 

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ViewStyle, View, ScrollView } from "react-native";
+import { ViewStyle, View } from "react-native";
 
 import { SafeAreaView, Edge } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
@@ -24,8 +24,15 @@ import {
   NAMESPACE,
 } from "./utils";
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-import { getLiveUrl } from "../Utils";
+import { addQueryParam, getLiveUrl } from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  AnimatedScrollModal,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PADDING_HORIZONTAL } from "./Layout/defaultLayoutsConts";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -68,29 +75,20 @@ export const defaultAspectRatioWidth = (height: number): number =>
   (height / 9) * 16;
 
 const Styles = {
-  mainContainer: (docked: boolean, style: ViewStyle) => {
+  mainContainer: (style: ViewStyle) => {
     const combinedStyle: ViewStyle = {
       flex: 1,
     };
 
-    if (!docked) {
-      style.paddingTop = 0;
-      style.paddingHorizontal = 15;
-    }
-
-    return { ...combinedStyle, ...style };
-  },
-  playerContainer: (docked: boolean, style: ViewStyle) => {
-    const combinedStyle: ViewStyle = {
-      flex: 1,
+    return {
+      ...combinedStyle,
+      ...style,
     };
-
-    if (docked) {
-      combinedStyle.height = style.height;
-    }
-
-    return combinedStyle;
   },
+  playerContainer: {
+    flex: 1,
+  },
+  paddingHorizontal: { paddingTop: 0, paddingHorizontal: PADDING_HORIZONTAL },
 
   controlsMobile: {
     height: 50,
@@ -144,9 +142,9 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const isTablet = useIsTablet();
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
-  
+
   // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
-  
+
   const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
 
   const { title, summary } = useTitleSummaryOverlay(
@@ -168,6 +166,9 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const [sleepTimerDate, setSleepTimerDate] = useState(0);
 
+  const [defaultDimensions, setDefaultDimensions] =
+    React.useState<Dimensions>(undefined);
+
   const [dimensions, setDimensions] = React.useState<Dimensions>({
     width: 0,
     height: 0,
@@ -181,9 +182,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     const { width, height } = event.nativeEvent.layout;
 
     setDimensions({
-      width: docked ? defaultAspectRatioWidth(height) : width,
+      width,
       height,
     });
+
+    if (!defaultDimensions) setDefaultDimensions({ width, height });
   };
 
   const cancelSleepTimer = async () => {
@@ -195,7 +198,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
 
     setSleepTimerDate(0);
-    player?.pause();
 
     await localStorage.removeItem("sleep", NAMESPACE);
   };
@@ -293,7 +295,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playerState.isPaused ? player?.play() : player.pause();
   }, [playerState, player]);
 
-  const seekDuration = Number(value("seek_duration"));
+  const seekDuration = toNumberWithDefault(10, value("seek_duration"));
 
   const onRewindButtonPress = React.useCallback(() => {
     player?.rewind(seekDuration);
@@ -376,58 +378,64 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const edges = React.useMemo<Edge[]>(
-    () => (docked ? [] : ["right", "left", "top"]),
-    [docked]
-  );
+  const edges = React.useMemo<Edge[]>(() => ["right", "left", "top"], [docked]);
 
-  const ContainerView = docked ? View : SafeAreaView;
+  const ContainerView = SafeAreaView;
 
   const MainContent = React.useMemo(() => {
     return (
-      <ContainerView style={Styles.mainContainer(docked, style)} edges={edges}>
-        <ScrollView
-          style={Styles.playerContainer(docked, style)}
-          onLayout={onLayout}
+      <ContainerView style={Styles.mainContainer(style)} edges={edges}>
+        <AnimationComponent
+          animationType={ComponentAnimationType.moveUpComponent}
+          additionalData={{ saveArea: true }}
         >
-          <Layout
-            entry={entry}
-            playerState={playerState}
-            layoutState={layoutState}
-            value={value}
-            onPlaybackButtonPress={onPlaybackButtonPress}
-            onRewindButtonPress={onRewindButtonPress}
-            onForwardButtonPress={onForwardButtonPress}
-            onPlayerSeek={onPlayerSeek}
-            onSkipStart={onSkipStart}
-            onSpeedButtonPress={onSpeedButtonPress}
-            onSleepButtonPress={onSleepButtonPress}
-            playbackSpeedName={formatSpeed(playbackSpeed.value)}
-            playbackSleepName={
-              sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
-            }
-            sleepTimerDate={sleepTimerDate}
-            cancelSleepTimer={cancelSleepTimer}
-            onSkipLive={onSkipLive}
-            onCloseVideoModal={onCloseVideoModal}
-            maximiseVideoModal={maximiseVideoModal}
-            configuration={configuration}
-            dimensions={dimensions}
-            playNextData={playNextData}
-            title={title}
-            summary={summary}
-          />
-          {children}
-          {!docked && (
-            <PlayerDetails
-              configuration={configuration}
-              style={Styles.playerDetails}
-              entry={entry}
-              isTabletLandscape={isTabletLandscape}
-              isAudioPlayer={true}
-            />
-          )}
-        </ScrollView>
+          <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}
+                onSleepButtonPress={onSleepButtonPress}
+                playbackSpeedName={formatSpeed(playbackSpeed.value)}
+                playbackSleepName={
+                  sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
+                }
+                sleepTimerDate={sleepTimerDate}
+                cancelSleepTimer={cancelSleepTimer}
+                onSkipLive={onSkipLive}
+                onCloseVideoModal={onCloseVideoModal}
+                maximiseVideoModal={maximiseVideoModal}
+                configuration={configuration}
+                dimensions={dimensions}
+                playNextData={playNextData}
+                title={title}
+                summary={summary}
+                defaultDimensions={defaultDimensions}
+              />
+              <View style={Styles.paddingHorizontal}>
+                {children}
+                <AnimationComponent
+                  animationType={ComponentAnimationType.componentFade}
+                >
+                  <PlayerDetails
+                    configuration={configuration}
+                    style={Styles.playerDetails}
+                    entry={entry}
+                    isTabletLandscape={isTabletLandscape}
+                    isAudioPlayer={true}
+                  />
+                </AnimationComponent>
+              </View>
+            </View>
+          </AnimatedScrollModal>
+        </AnimationComponent>
       </ContainerView>
     );
   }, [
@@ -456,17 +464,20 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   if (configuration.magic_background) {
     const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
 
-    // TODO: To be added when background is ready
+    const queryParamName =
+      configuration.audio_player_background_image_query || "width";
+
+    const queryParamValue = 15;
 
-    // const queryParamName =
-    //   configuration.audio_player_background_image_query || "width";
-    //
-    // const queryParamValue = 15;
-    //
-    // const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
 
     return (
-      <MagicBG image={baseUrl} fallbackUrl={baseUrl} defaultColor="#000000">
+      <MagicBG
+        image={url}
+        fallbackUrl={baseUrl}
+        colors={entry?.extensions?.backgroundColors}
+        defaultColor="#000000"
+      >
         {MainContent}
       </MagicBG>
     );