@applicaster/quick-brick-player 12.0.0-alpha.3788876021 → 12.0.0-alpha.4374801485

package/package.json

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

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -294,7 +294,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 = Number(value("seek_duration")) ?? 10;
 
   const onRewindButtonPress = React.useCallback(() => {
     player?.rewind(seekDuration);

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

@@ -1,6 +1,10 @@
+// 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 {
   ProgressBar,
@@ -33,6 +37,9 @@ import {
   ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import DockedLayout from "./DockedLayout";
+import { isValidDate } from "../../Utils";
+
+dayjs.extend(utc);
 
 type Dimensions = {
   width: number;
@@ -79,7 +86,7 @@ type LayoutProps = {
 
 const Styles = {
   container: { flex: 1 },
-  tabletContainer: (isPortraitMode) => ({
+  tabletContainer: (isPortraitMode: boolean) => ({
     flex: 1,
     alignItems: "center",
     justifyContent: isPortraitMode ? "center" : "flex-start",
@@ -109,10 +116,10 @@ const Styles = {
     };
   },
   backgroundImageContainerImageStyle: (
-    isTablet,
-    docked,
-    startComponentsAnimation,
-    isActiveGesture
+    isTablet: boolean,
+    docked: boolean,
+    startComponentsAnimation: boolean,
+    isActiveGesture: boolean
   ) => ({
     borderRadius:
       (startComponentsAnimation && isActiveGesture) || docked
@@ -190,8 +197,35 @@ 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 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;
+
+  const endTimestamp = hasValidEndTime
+    ? dayjs.utc(endTime!).valueOf()
+    : undefined;
+
   if (isLiveContent) {
     const seekEnabled = Boolean(value("liveSeekingEnabled"));
+
     showFullControls = !!(controller?.hasSeekableDuration?.() && seekEnabled);
   }
 
@@ -221,12 +255,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({
@@ -298,7 +334,7 @@ export default function DefaultLayout(props: LayoutProps) {
         });
       }, 1000);
 
-      // Clearing the interval when the component unmounts or dependencies changea
+      // 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
@@ -308,20 +344,11 @@ export default function DefaultLayout(props: LayoutProps) {
 
   const Separator = () => <View style={Styles.separator} />;
 
-  const liveSeekingEnabled = value("liveSeekingEnabled");
-
-  const startTime = entry.extensions.start_time; // October 28, 2024, at 14:27 UTC
-  const endTime = entry.extensions.end_time; // October 28, 2024, at 16:27 UTC
-
-  const needsToShowProgressBar =
-    (isLiveContent && (liveSeekingEnabled || (startTime && endTime))) ||
-    !isLiveContent;
-
   const defaultImageDimensions = React.useMemo(
     () =>
       defaultDimensions &&
       Styles.backgroundImageContainer(defaultDimensions, isTablet),
-    [defaultDimensions]
+    [defaultDimensions, isTablet]
   );
 
   const { isActiveGesture, startComponentsAnimation } =
@@ -345,7 +372,7 @@ export default function DefaultLayout(props: LayoutProps) {
       </AnimationComponent>
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}
-        style={isTablet ? Styles.playerImageWrapper : null}
+        style={isTablet ? Styles.playerImageWrapper : undefined}
       >
         <AnimationComponent
           animationType={ComponentAnimationType.moveComponentHorizontal}
@@ -360,7 +387,7 @@ export default function DefaultLayout(props: LayoutProps) {
                 }
               : null,
           }}
-          style={isTablet ? Styles.alignItemsCenter : null}
+          style={isTablet ? Styles.alignItemsCenter : undefined}
         >
           <PlayerImageBackground
             entry={entry}
@@ -380,7 +407,7 @@ export default function DefaultLayout(props: LayoutProps) {
       <View
         style={[
           Styles.paddingHorizontal,
-          isTablet ? Styles.tabletLayout : null,
+          isTablet ? Styles.tabletLayout : undefined,
         ]}
       >
         {!docked && (
@@ -405,9 +432,9 @@ export default function DefaultLayout(props: LayoutProps) {
                   playerState={playerState}
                   disableFullscreen={true}
                   sliderStyle={2}
-                  startTime={startTime}
-                  endTime={endTime}
-                  isLive={isLiveContent}
+                  startTimestamp={startTimestamp}
+                  endTimestamp={endTimestamp}
+                  isDateBasedLiveContent={isDateBasedLiveContent}
                 />
 
                 {showCounter && timeLeft >= 0 && (

package/src/Player/Utils/Utils.ts

@@ -1,26 +1,8 @@
 import queryString from "query-string";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 
-export const toTypeString = (obj) => {
-  switch (typeof obj) {
-    case "object":
-      return obj instanceof Date ? obj.toISOString() : JSON.stringify(obj); // object, null
-    case "undefined":
-      return "";
-    default:
-      // boolean, number, string
-      return obj.toString();
-  }
-};
-
-export const stringsOnlyObject = (obj) => {
-  const strObj = {};
-
-  Object.keys(obj).forEach((x) => {
-    strObj[x] = toTypeString(obj[x]);
-  });
-
-  return strObj;
-};
+dayjs.extend(utc);
 
 export const getLiveUrl = (url: string) => {
   // Use the replace method with a regular expression to replace all instances of subClass with livePage
@@ -42,3 +24,7 @@ export const addQueryParam = (
 
   return `${urlWithoutQuery}?${updatedQueryString}`;
 };
+
+export const isValidDate = (dateString: string) => {
+  return dateString && dayjs.utc(dateString).isValid();
+};

package/src/Player/index.tsx

@@ -1073,9 +1073,7 @@ export default class VideoPlayer extends React.Component<
               {...nativeProps}
             />
           )}
-          <AudioPlayerWrapper {...sharedWrapperViewProps}>
-            <></>
-          </AudioPlayerWrapper>
+          <AudioPlayerWrapper {...sharedWrapperViewProps} />
         </View>
       ) : (
         <PlayerWrapper {...sharedWrapperViewProps}>