@applicaster/quick-brick-player 12.0.0-alpha.8417280639 → 12.0.0-alpha.8961274073

package/package.json

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

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -32,6 +32,7 @@ import {
   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",
@@ -54,7 +55,7 @@ type Configuration = {
 };
 
 type Props = {
-  children?: React.ReactNode;
+  children: React.ReactNode;
   inline?: boolean;
   docked?: boolean;
   configuration: Configuration;
@@ -294,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);

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

@@ -1,10 +1,7 @@
-// DefaultLayout.tsx
-
 import * as React from "react";
 import * as R from "ramda";
 import { View } from "react-native";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
 import {
   ProgressBar,
@@ -39,8 +36,6 @@ import {
 import DockedLayout from "./DockedLayout";
 import { isValidDate } from "../../Utils";
 
-dayjs.extend(utc);
-
 type Dimensions = {
   width: number;
   height: number;
@@ -197,24 +192,20 @@ export default function DefaultLayout(props: LayoutProps) {
 
   let showFullControls = !controller?.isAd();
 
-  // Safely access and validate start_time and end_time
-  const startTime = entry.extensions?.start_time;
-  const endTime = entry.extensions?.end_time;
+  const startTime = entry.extensions?.live?.start_time;
+  const endTime = entry.extensions?.live?.end_time;
 
   const hasValidStartTime = isValidDate(startTime);
   const hasValidEndTime = isValidDate(endTime);
 
-  // Abstracted condition
   const isDateBasedLiveContent =
     isLiveContent && hasValidStartTime && hasValidEndTime;
 
-  // Determine if progress bar should be shown
   const needsToShowProgressBar =
     (isLiveContent &&
       (Boolean(value("liveSeekingEnabled")) || isDateBasedLiveContent)) ||
     !isLiveContent;
 
-  // Convert valid date strings to timestamps
   const startTimestamp = hasValidStartTime
     ? dayjs.utc(startTime!).valueOf()
     : undefined;
@@ -255,12 +246,14 @@ export default function DefaultLayout(props: LayoutProps) {
 
     const rewind = rewindButton({
       isTablet,
-      onPress: controller?.hasContentDuration?.() ? onRewindButtonPress : null,
+      onPress: controller?.hasSeekableDuration?.() ? onRewindButtonPress : null,
     });
 
     const forward = forwardButton({
       isTablet,
-      onPress: controller?.hasContentDuration?.() ? onForwardButtonPress : null,
+      onPress: controller?.hasSeekableDuration?.()
+        ? onForwardButtonPress
+        : null,
     });
 
     const speed = speedButton({
@@ -289,7 +282,6 @@ export default function DefaultLayout(props: LayoutProps) {
       return [skipToStart, rewind, play, forward, skipToLive];
     }
 
-    // Temporary empty button until we add sleep button. It will ensure the buttons will not break in their position
     return [speed, rewind, play, forward, sleep];
   }, [
     playerState,
@@ -310,15 +302,12 @@ export default function DefaultLayout(props: LayoutProps) {
 
   useEffect(() => {
     if (showCounter && sleepTimerDate !== 0) {
-      // Setting the initial timeLeft based on sleepTimerDate
       setTimeLeft(sleepTimerDate - Date.now());
 
-      // Setting up an interval to update the remaining time every second
       const intervalId = setInterval(() => {
         setTimeLeft(() => {
           const newTimeLeft = sleepTimerDate - Date.now();
 
-          // If the new remaining time is less than or equal to 0, clear the interval and trigger the cancelSleepTimer function
           if (newTimeLeft <= 0) {
             clearInterval(intervalId);
 
@@ -326,16 +315,13 @@ export default function DefaultLayout(props: LayoutProps) {
 
             return 0;
           } else {
-            // Otherwise, update the state with the new remaining time
             return newTimeLeft;
           }
         });
       }, 1000);
 
-      // Clearing the interval when the component unmounts or dependencies change
       return () => clearInterval(intervalId);
     } else {
-      // Ensure the timeLeft state is set correctly if showCounter is false
       setTimeLeft(0);
     }
   }, [sleepTimerDate, showCounter, cancelSleepTimer]);
@@ -432,7 +418,7 @@ export default function DefaultLayout(props: LayoutProps) {
                   sliderStyle={2}
                   startTimestamp={startTimestamp}
                   endTimestamp={endTimestamp}
-                  isLive={isDateBasedLiveContent}
+                  isDateBasedLiveContent={isDateBasedLiveContent}
                 />
 
                 {showCounter && timeLeft >= 0 && (

package/src/Player/Utils/Utils.ts

@@ -1,8 +1,5 @@
 import queryString from "query-string";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-
-dayjs.extend(utc);
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
 export const getLiveUrl = (url: string) => {
   // Use the replace method with a regular expression to replace all instances of subClass with livePage
@@ -25,6 +22,6 @@ export const addQueryParam = (
   return `${urlWithoutQuery}?${updatedQueryString}`;
 };
 
-export const isValidDate = (dateString: string) => {
-  return dateString && dayjs.utc(dateString).isValid();
+export const isValidDate = (dateString: string): boolean => {
+  return dateString.trim() !== "" && dayjs.utc(dateString).isValid();
 };

package/src/Player/index.tsx

@@ -785,7 +785,6 @@ export default class VideoPlayer extends React.Component<
 
   render() {
     const {
-      castAction,
       docked,
       entry,
       fullscreen,
@@ -795,8 +794,13 @@ export default class VideoPlayer extends React.Component<
       isTabletPortrait,
       muted,
       style,
+      castAction,
+      controller,
+      startComponentsAnimation,
     } = this.props;
 
+    const supportNativeCast = controller.supportNativeCast();
+
     const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
       this.state;
 
@@ -861,7 +865,11 @@ export default class VideoPlayer extends React.Component<
       ? supportsNativeControls && !isInlineTV && !this.getPlayNextData()
       : supportsNativeControls && !this.getPlayNextData();
 
-    const shouldUseNativeControls = controls && !docked;
+    const shouldUseNativeControls =
+      controls &&
+      !startComponentsAnimation &&
+      !docked &&
+      !castAction?.state?.connected;
 
     platformSpecificProps = {
       ...platformSpecificProps,
@@ -1032,6 +1040,7 @@ export default class VideoPlayer extends React.Component<
           extraInfoText={castAction?.state?.friendlyStatus}
           controlsAlwaysVisible={castAction?.state?.connected}
           playNextData={this.getPlayNextData()}
+          nativeControls={!!controls}
         />
       ) : null;
     };
@@ -1066,7 +1075,7 @@ export default class VideoPlayer extends React.Component<
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
         <View style={containerStyle}>
-          {!castAction?.state?.connected && (
+          {(!castAction?.state?.connected || supportNativeCast) && (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
@@ -1117,7 +1126,7 @@ export default class VideoPlayer extends React.Component<
                     />
                   )}
 
-                  {!castAction?.state?.connected && (
+                  {(!castAction?.state?.connected || supportNativeCast) && (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={playerDimensions}