@applicaster/quick-brick-player 12.0.0-alpha.7101461483 → 12.0.0-alpha.7254207052

package/package.json

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

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/AudioDescription.tsx

@@ -3,7 +3,8 @@ import { Text, TextStyle, View } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type AudioDescriptionProps = {
-  content: ZappEntry;
+  title: string | number;
+  summary: string | number;
   layoutState: {
     inline: boolean;
     docked: boolean;
@@ -78,8 +79,7 @@ const summaryStyles = (value: GetValue, prefix: string): TextStyle => ({
 });
 
 export const AudioDescription = (props: AudioDescriptionProps) => {
-  const { content, layoutState, value } = props;
-  const { title, summary } = content;
+  const { title, summary, layoutState, value } = props;
   const prefix = layoutState.docked ? "docked_player_" : "";
 
   return (

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -24,6 +24,8 @@ import {
   NAMESPACE,
 } from "./utils";
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { addQueryParam, getLiveUrl } from "../Utils";
+import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -40,6 +42,7 @@ type Dimensions = {
 type Configuration = {
   [key: string]: any;
   magic_background?: boolean;
+  audio_player_background_image_query?: string;
   tablet_landscape_sidebar_width?: string;
   tablet_landscape_player_container_background_color?: string;
 };
@@ -142,6 +145,17 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   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(
+    feedUrl,
+    entry,
+    playerState?.isLive,
+    configuration?.audio_live_player_update_interval
+  );
+
   const [playbackSpeed, setPlaybackSpeed] = useState({
     asset: configuration["speed_1"],
     value: 1.0,
@@ -181,7 +195,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
 
     setSleepTimerDate(0);
-    player?.pause();
 
     await localStorage.removeItem("sleep", NAMESPACE);
   };
@@ -400,6 +413,8 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
             configuration={configuration}
             dimensions={dimensions}
             playNextData={playNextData}
+            title={title}
+            summary={summary}
           />
           {children}
           {!docked && (
@@ -438,9 +453,20 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   ]);
 
   if (configuration.magic_background) {
+    const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
+
+    const queryParamName =
+      configuration.audio_player_background_image_query || "width";
+
+    const queryParamValue = 15;
+
+    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+
     return (
       <MagicBG
-        image={entry?.extensions?.audio_player_background_image}
+        image={url}
+        fallbackUrl={baseUrl}
+        colors={entry?.extensions?.backgroundColors}
         defaultColor="#000000"
       >
         {MainContent}

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

@@ -61,6 +61,8 @@ type LayoutProps = {
   onSkipLive: () => void;
   onSkipStart: () => void;
   dimensions: Dimensions;
+  title: string | number;
+  summary: string | number;
 };
 
 const Styles = {
@@ -83,8 +85,8 @@ const Styles = {
   }),
   backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
     return {
-      width: isTablet ? 463 : dimensions.width,
-      height: isTablet ? 463 : dimensions.width,
+      width: isTablet ? 463 : dimensions.width || 330,
+      height: isTablet ? 463 : dimensions.width || 330,
     };
   },
   backgroundImageContainerImageStyle: (isTablet) => ({
@@ -135,6 +137,8 @@ export default function DefaultLayout(props: LayoutProps) {
     dimensions,
     cancelSleepTimer,
     sleepTimerDate,
+    title,
+    summary,
   } = props;
 
   const isTablet = useIsTablet();
@@ -154,8 +158,7 @@ export default function DefaultLayout(props: LayoutProps) {
     sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
   );
 
-  let showFullControls =
-    controller?.hasContentDuration?.() && !controller?.isAd();
+  let showFullControls = !controller?.isAd();
 
   if (isLiveContent) {
     const seekEnabled = Boolean(value("liveSeekingEnabled"));
@@ -186,8 +189,15 @@ export default function DefaultLayout(props: LayoutProps) {
       return [play];
     }
 
-    const rewind = rewindButton({ isTablet, onPress: onRewindButtonPress });
-    const forward = forwardButton({ isTablet, onPress: onForwardButtonPress });
+    const rewind = rewindButton({
+      isTablet,
+      onPress: controller?.hasContentDuration?.() ? onRewindButtonPress : null,
+    });
+
+    const forward = forwardButton({
+      isTablet,
+      onPress: controller?.hasContentDuration?.() ? onForwardButtonPress : null,
+    });
 
     const speed = speedButton({
       isTablet,
@@ -231,6 +241,7 @@ export default function DefaultLayout(props: LayoutProps) {
     isLiveContent,
     playbackSpeedName,
     playbackSleepName,
+    controller,
   ]);
 
   useEffect(() => {
@@ -298,7 +309,8 @@ export default function DefaultLayout(props: LayoutProps) {
             imageStyle={Styles.backgroundImageContainerImageStyle(isTablet)}
           />
           <AudioDescription
-            content={entry}
+            title={title}
+            summary={summary}
             value={value}
             layoutState={layoutState}
           />

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

@@ -48,6 +48,8 @@ type LayoutProps = {
   maximiseVideoModal: () => void;
   dimensions: Dimensions;
   playNextData: PlayNextData;
+  title: string | number;
+  summary: string | number;
 };
 
 const styles = StyleSheet.create({
@@ -196,6 +198,8 @@ export default function DockedLayout(props: LayoutProps) {
     playerState,
     configuration,
     playNextData,
+    title,
+    summary,
   } = props;
 
   const isTablet = useIsTablet();
@@ -232,7 +236,11 @@ export default function DockedLayout(props: LayoutProps) {
                 !configuration.magic_background && backgroundColorStyle(value),
               ]}
             >
-              <ContentInfo content={entry} value={value} docked />
+              <ContentInfo
+                content={{ ...entry, title, summary }}
+                value={value}
+                docked
+              />
             </View>
           </View>
         </TouchableWithoutFeedback>

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

@@ -41,6 +41,8 @@ type LayoutProps = {
   maximiseVideoModal: () => void;
   dimensions: Dimensions;
   playNextData: PlayNextData;
+  title: string | number;
+  summary: string | number;
 };
 
 export default function Layout(

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

@@ -4,14 +4,17 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 import LinearGradient from "../LinearGradient";
 import { getDominantColor, getPalettes } from "../../../utils/utils";
+import { useEffect } from "react";
 
 type MagicBGProps = {
   children: React.ReactNode;
   image: string;
+  fallbackUrl?: string;
   defaultColor: string;
+  colors: string[]; // Updated to type string[] as it holds hex values
 };
 
-const colors = {
+const defaultColors = {
   overlay: "rgba(0, 0, 0, 0.35)",
   defaultGradientStart: "rgba(0, 0, 0, 0.25)",
   defaultGradientEnd: "rgba(0, 0, 0, 0)",
@@ -23,7 +26,7 @@ const styles = StyleSheet.create({
   },
   fullScreenOverlay: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: colors.overlay,
+    backgroundColor: defaultColors.overlay,
   },
   gradientOverlay: {
     position: "absolute",
@@ -34,47 +37,81 @@ const styles = StyleSheet.create({
   },
 });
 
+const fetchPaletteAndDominantColor = async (imageUrl: string) => {
+  const palette = await getPalettes(imageUrl);
+
+  const colors = palette.map(
+    (color: { r: number; g: number; b: number }) =>
+      `rgb(${color.r}, ${color.g}, ${color.b})`
+  );
+
+  const dominant = await getDominantColor(imageUrl);
+  const dominantColor = `rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`;
+
+  return { gradientColors: colors.slice(0, 2), dominantColor };
+};
+
 export const MagicBG: React.FC<MagicBGProps> = ({
   children,
   image,
+  fallbackUrl = "",
+  colors = [],
   defaultColor,
 }) => {
   const [dominantColor, setDominantColor] =
     React.useState<string>(defaultColor);
 
   const [gradientColors, setGradientColors] = React.useState<string[]>([
-    colors.defaultGradientStart,
-    colors.defaultGradientEnd,
+    defaultColors.defaultGradientStart,
+    defaultColors.defaultGradientEnd,
   ]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const fetchColors = async () => {
-      if (image) {
+      // Check if colors are provided and not empty
+      if (colors && colors.length > 0) {
+        // Use provided colors for gradient and dominant color
+        setGradientColors(colors.slice(0, 2)); // First 2 colors for gradient
+        setDominantColor(colors[0]); // First color as dominant
+      } else if (image) {
+        // If no colors, try fetching from image
         try {
-          const palette = await getPalettes(image);
-
-          const colors = palette.map(
-            (color: { r: number; g: number; b: number }) =>
-              `rgb(${color.r}, ${color.g}, ${color.b})`
-          );
-
-          setGradientColors(colors.slice(0, 2));
+          const { gradientColors, dominantColor } =
+            await fetchPaletteAndDominantColor(image);
 
-          const dominant = await getDominantColor(image);
-          setDominantColor(`rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`);
+          setGradientColors(gradientColors);
+          setDominantColor(dominantColor);
         } catch (error) {
-          setGradientColors([
-            colors.defaultGradientStart,
-            colors.defaultGradientEnd,
-          ]);
+          // If image fetch fails, try fallback URL
+          try {
+            const { gradientColors, dominantColor } =
+              await fetchPaletteAndDominantColor(fallbackUrl);
 
-          setDominantColor(defaultColor);
+            setGradientColors(gradientColors);
+            setDominantColor(dominantColor);
+          } catch {
+            // If everything fails, use default color
+            setGradientColors([
+              defaultColors.defaultGradientStart,
+              defaultColors.defaultGradientEnd,
+            ]);
+
+            setDominantColor(defaultColor);
+          }
         }
+      } else {
+        // If no image or colors, use default color
+        setGradientColors([
+          defaultColors.defaultGradientStart,
+          defaultColors.defaultGradientEnd,
+        ]);
+
+        setDominantColor(defaultColor);
       }
     };
 
     fetchColors();
-  }, [image, defaultColor]);
+  }, []);
 
   return (
     <View style={[styles.container, { backgroundColor: dominantColor }]}>

package/src/Player/Utils/Utils.ts

@@ -1,3 +1,5 @@
+import queryString from "query-string";
+
 export const toTypeString = (obj) => {
   switch (typeof obj) {
     case "object":
@@ -19,3 +21,24 @@ export const stringsOnlyObject = (obj) => {
 
   return strObj;
 };
+
+export const getLiveUrl = (url: string) => {
+  // Use the replace method with a regular expression to replace all instances of subClass with livePage
+  return url.replace(new RegExp("subClass", "g"), "livePage");
+};
+
+export const addQueryParam = (
+  baseUrl: string,
+  paramName: string,
+  paramValue: string | number
+) => {
+  const [urlWithoutQuery, query] = baseUrl.split("?");
+
+  const parsedQuery = queryString.parse(query);
+
+  parsedQuery[paramName] = paramValue.toString();
+
+  const updatedQueryString = queryString.stringify(parsedQuery);
+
+  return `${urlWithoutQuery}?${updatedQueryString}`;
+};

package/src/Player/Utils/index.tsx

@@ -1,3 +1 @@
-export * from "./AssetsHelper";
-
 export * from "./Utils";

package/src/Player/index.tsx

@@ -36,6 +36,8 @@ import { AudioPlayerWrapper } from "./AudioLayer/AudioPlayerWrapper";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/configurationUtils";
 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";
 
 const RNPlayerManager = {
   QuickBrickPlayerPlugin: isApplePlatform()
@@ -555,6 +557,26 @@ export default class VideoPlayer extends React.Component<
     this.props.listener?.onPlayerDetached?.(nativeEvent);
   };
 
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidDismiss?.();
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidPresent?.();
+  };
+
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillDismiss?.();
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillPresent?.();
+  };
+
+  onPlayerClose = () => {
+    this.props.listener?.onPlayerClose?.();
+  };
+
   onPiPEnter = () => {
     this.setState({ piped: true });
     this.props.openPiP();
@@ -759,7 +781,6 @@ export default class VideoPlayer extends React.Component<
   render() {
     const {
       castAction,
-      controls,
       docked,
       entry,
       fullscreen,
@@ -817,17 +838,31 @@ export default class VideoPlayer extends React.Component<
     const liveCatchUpEnabled =
       this.props.pluginConfiguration?.liveCatchUpEnabled;
 
-    const hideNativeControls = isTV()
-      ? { controls: !this.getPlayNextData() }
-      : {};
+    // TODO: Get screen data more reliable way useCurrentScreenData
+    const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
 
-    const platformSpecificProps = isApplePlatform()
+    const isInlineTV = screenData?.ui_components?.length > 0 && isTV();
+
+    let platformSpecificProps: any = isApplePlatform()
       ? {
-          ...hideNativeControls,
           resizeMode: nativeResizeMode,
         }
       : {};
 
+    const supportsNativeControls =
+      !!this.props.controller?.supportsNativeControls?.();
+
+    const controls = isAppleTV()
+      ? supportsNativeControls && !isInlineTV && !this.getPlayNextData()
+      : supportsNativeControls && !this.getPlayNextData();
+
+    const shouldUseNativeControls = controls && !docked;
+
+    platformSpecificProps = {
+      ...platformSpecificProps,
+      controls: shouldUseNativeControls,
+    };
+
     const pictureInPictureEnabled =
       this.props.pluginConfiguration?.pictureInPictureEnabled;
 
@@ -835,7 +870,6 @@ export default class VideoPlayer extends React.Component<
       entry, // Must be passed first in list
       ...platformSpecificProps,
       audioTrackId,
-      controls,
       docked,
       enableAutoAudioTrackSelection,
       fullscreen, // TODO: Check fullscreen params not crash
@@ -890,22 +924,17 @@ export default class VideoPlayer extends React.Component<
       onVideoEnd: this.onVideoEnd, // complete
       onVideoError: this.onVideoError, // error
       onVideoProgress: this.onVideoProgress,
-      onVideoFullscreenPlayerDidDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerDidPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerWillDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillDismiss"
-      ),
-      onVideoFullscreenPlayerWillPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillPresent"
-      ),
+      onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+      onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+      onVideoFullscreenPlayerWillDismiss:
+        this.onVideoFullscreenPlayerWillDismiss,
+      onVideoFullscreenPlayerWillPresent:
+        this.onVideoFullscreenPlayerWillPresent,
       onVideoLoad: this.onVideoLoad,
       onVideoLoadStart: this.unHandledEvent("onVideoLoadStart"),
       onVideoBuffer: this.onVideoBuffer,
       onPlaybackStalled: this.onPlaybackStalled,
+      onPlayerClose: this.onPlayerClose,
       onPlayerAttached: this.onPlayerAttached,
       onPlayerDetached: this.onPlayerDetached,
     };
@@ -979,7 +1008,7 @@ export default class VideoPlayer extends React.Component<
         !needToShowPlayNextOverlay &&
         this.props.mode !== "PIP";
 
-      if (controls === true) {
+      if (shouldUseNativeControls) {
         return null;
       }