@applicaster/quick-brick-player 12.0.0-rc.10 → 12.0.0-rc.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-rc.10",
+  "version": "12.0.0-rc.100",
   "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-rc.10",
-    "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.10",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.10",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.10",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.96",
+    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.100",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.100",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.100",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.100",
     "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,74 +1,85 @@
 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;
 
 const isCurrentPlayer = (playerId) =>
   LiveImageManager.instance.getCurrentlyPlaying()?.playerId === playerId;
 
+const liveImageButtonsListenerKey = "live-image-buttons";
+
 const usePlayPauseListeners = (playerId, player, asset, setImageUri) =>
   useEffect(() => {
     if (playerId && player) {
-      if (player.playerState.isReadyToPlay) {
-        if (player.playerState.isPaused) {
-          setImageUri(asset.active);
-        } else {
-          setImageUri(asset.inactive);
-        }
+      setImageUri(null);
+
+      return;
+    }
+
+    if (player.playerState.isReadyToPlay) {
+      if (player.playerState.isPaused) {
+        setImageUri(asset.active);
+      } else {
+        setImageUri(asset.inactive);
       }
+    }
 
-      return player.addListener({
-        id: "live-image-buttons",
-        listener: {
-          onPlayerResume: () => {
-            setImageUri(asset.inactive);
-          },
-          onPlayerPause: () => {
-            setImageUri(asset.active);
-          },
-          onPlayerClose: () => {
-            setImageUri(null);
-          },
-          onLoad() {
-            setImageUri(asset.inactive);
-          },
+    return player.addListener({
+      id: liveImageButtonsListenerKey,
+      listener: {
+        onPlayerResume: () => {
+          setImageUri(asset.inactive);
         },
-      });
-    }
+        onPlayerPause: () => {
+          setImageUri(asset.active);
+        },
+        onPlayerClose: () => {
+          setImageUri(null);
+        },
+        onLoad() {
+          setImageUri(asset.inactive);
+        },
+      },
+    });
   }, [player, playerId, asset]);
 
 const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
   useEffect(() => {
-    if (playerId && player) {
-      // active action = muted, inactive = unmuted
-      return player.addListener({
-        id: "live-image-buttons",
-        listener: {
-          onPlayerMute: () => {
-            if (isCurrentPlayer(playerId)) {
-              setImageUri(asset.active);
-            }
-          },
-          onPlayerUnmute: () => {
-            if (isCurrentPlayer(playerId)) {
-              setImageUri(asset.inactive);
-            }
-          },
-          onLoad() {
-            setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
-          },
-          onPlayerClose: () => {
-            setImageUri(null);
-          },
-          onVideoEnd: () => {
-            setImageUri(null);
-          },
-        },
-      });
+    if (!player || !playerId) {
+      setImageUri(null);
+
+      return;
     }
+
+    // active action = muted, inactive = unmuted
+    return player.addListener({
+      id: liveImageButtonsListenerKey,
+      listener: {
+        onPlayerMute: () => {
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(asset.active);
+          }
+        },
+        onPlayerUnmute: () => {
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(asset.inactive);
+          }
+        },
+        onLoad() {
+          setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
+        },
+        onPlayerClose: () => {
+          setImageUri(null);
+        },
+        onVideoEnd: () => {
+          setImageUri(null);
+        },
+      },
+    });
   }, [player, playerId, asset]);
 
 const useListeners = MUTED_USAGE

package/src/CellPlayer/ContextProvider.tsx

@@ -21,7 +21,7 @@ const playActionCallback = (player) => {
   }
 };
 
-const invokeAction = () => {
+const invokeAction = (_item: ZappEntry, _object) => {
   const actionCallback = MUTED_USAGE ? muteActionCallback : playActionCallback;
   // We only allow one player to be present at a time
   const player = LiveImageManager.instance.getCurrentlyPlaying()?.player;
@@ -29,6 +29,54 @@ const invokeAction = () => {
   actionCallback(player);
 };
 
+// Not exported because currently the is no way
+// to subscribe to the action availability change.
+// We currently return a null state to disable the action.
+// eslint-disable-next-line unused-imports/no-unused-vars
+const isActionAvailable = (item: ZappEntry) => {
+  return (
+    LiveImageManager.instance.getCurrentlyPlaying()?.getPlayer().entry.id ===
+    item.id
+  );
+};
+
+const addListener = (
+  entryId: string,
+  listener: CellActionStateListenerFunction
+) => {
+  const callback = (event: Record<string, any>) => {
+    if (event.entry?.id !== entryId) {
+      return;
+    }
+
+    const player = LiveImageManager.instance.getCurrentlyPlaying()?.getPlayer();
+
+    if (!player || player.entry?.id !== entryId) {
+      listener(null);
+
+      return;
+    }
+
+    const actionState = MUTED_USAGE ? player.getIsMuted() : player.isPaused();
+
+    listener({
+      state: actionState ? 1 : 0,
+      label: "",
+      asset: AssetComponent,
+    });
+  };
+
+  return LiveImageManager.instance.addListener({
+    id: `cell-player-${entryId}`,
+    listener: {
+      onEnd: callback,
+      onStart: callback,
+      onError: callback,
+      onDestroy: callback,
+    },
+  });
+};
+
 const emptyState = [];
 
 const initialEntryState = () => ({
@@ -46,6 +94,7 @@ export function ContextProvider(Component: ReactComponent<any>) {
         state: emptyState,
         invokeAction,
         initialEntryState,
+        addListener,
       }),
       [invokeAction, initialEntryState]
     );

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

@@ -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";
@@ -15,7 +15,24 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/PlayerDetails";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useEffect, useState } from "react";
 import { MagicBG } from "./MagicBG";
+import {
+  formatSpeed,
+  hasDatePassed,
+  loadItemsFromStorage,
+  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";
+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",
@@ -32,6 +49,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;
 };
@@ -57,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,
@@ -96,6 +105,17 @@ const Styles = {
   },
 };
 
+const sleeps = [
+  // { label: "End of episode", value: "episode" },
+  { label: "5 minutes", value: 5 },
+  { label: "10 minutes", value: 10 },
+  { label: "15 minutes", value: 15 },
+  { label: "30 minutes", value: 30 },
+  { label: "45 minutes", value: 45 },
+  { label: "1 hour", value: 60 },
+  { label: "2 hours", value: 120 },
+];
+
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
@@ -111,26 +131,141 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     isTabletPortrait,
   } = props;
 
+  const speeds = [
+    { asset: configuration["speed_0_8"], value: 0.8 },
+    { asset: configuration["speed_1"], value: 1.0 },
+    { asset: configuration["speed_1_2"], value: 1.2 },
+    { asset: configuration["speed_1_5"], value: 1.5 },
+    { asset: configuration["speed_2"], value: 2.0 },
+  ];
+
   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(
+    feedUrl,
+    entry,
+    playerState?.isLive,
+    configuration?.audio_live_player_update_interval
+  );
+
+  const [playbackSpeed, setPlaybackSpeed] = useState({
+    asset: configuration["speed_1"],
+    value: 1.0,
+  });
+
+  const [sleepTimer, setSleepTimer] = useState({
+    label: "playback_sleep_off_label",
+    value: 0,
+  });
+
+  const [sleepTimerDate, setSleepTimerDate] = useState(0);
+
+  const [defaultDimensions, setDefaultDimensions] =
+    React.useState<Dimensions>(undefined);
+
   const [dimensions, setDimensions] = React.useState<Dimensions>({
     width: 0,
     height: 0,
   });
 
+  const navigator = useNavigation();
+
   const { maximiseVideoModal } = useNavigation();
 
   const onLayout = (event: any) => {
     const { width, height } = event.nativeEvent.layout;
 
     setDimensions({
-      width: docked ? defaultAspectRatioWidth(height) : width,
+      width,
       height,
     });
+
+    if (!defaultDimensions) setDefaultDimensions({ width, height });
+  };
+
+  const cancelSleepTimer = async () => {
+    player?.cancelSleepTimer();
+
+    setSleepTimer({
+      label: "playback_sleep_off_label",
+      value: 0,
+    });
+
+    setSleepTimerDate(0);
+
+    await localStorage.removeItem("sleep", NAMESPACE);
+  };
+
+  const startSleepTimer = (timerValue: number) => {
+    try {
+      const currentDate = new Date();
+      const futureDate = new Date(currentDate.getTime() + timerValue * 60000);
+      const futureSleepDate = futureDate.getTime();
+
+      player?.cancelSleepTimer();
+
+      player?.startSleepTimer(futureSleepDate);
+
+      return futureSleepDate;
+    } catch (e) {
+      return 0;
+    }
   };
 
+  const handleSleep = async (
+    timerValue: number,
+    currentFutureSleepDate = null
+  ) => {
+    if (currentFutureSleepDate) {
+      if (hasDatePassed(currentFutureSleepDate)) {
+        await cancelSleepTimer();
+
+        return 0;
+      }
+
+      return currentFutureSleepDate;
+    }
+
+    if (timerValue === 0) {
+      await cancelSleepTimer();
+
+      return timerValue;
+    }
+
+    return startSleepTimer(timerValue);
+  };
+
+  useEffect(() => {
+    const loadSpeed = async () => {
+      const speed = await loadItemsFromStorage("speed");
+
+      if (playerState.isReadyToPlay && speed) {
+        setPlaybackSpeed(speed);
+        player?.setPlaybackRate(speed.value);
+      }
+    };
+
+    const loadSleep = async () => {
+      const sleep = await loadItemsFromStorage("sleep");
+
+      if (playerState.isReadyToPlay && sleep) {
+        const { futureSleepDate, ...rest } = sleep;
+        setSleepTimer(rest);
+        const sleepTimerDate = await handleSleep(sleep.value, futureSleepDate);
+        setSleepTimerDate(sleepTimerDate);
+      }
+    };
+
+    loadSpeed().then();
+    loadSleep().then();
+  }, [playerState.isReadyToPlay]);
+
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
 
@@ -160,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);
@@ -170,6 +305,60 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.forward(seekDuration);
   }, [seekDuration, player]);
 
+  const onSpeedSelect = React.useCallback(
+    async (item) => {
+      setPlaybackSpeed(item);
+      player.setPlaybackRate(item.value);
+      await localStorage.setItem("speed", item, NAMESPACE);
+    },
+    [player, setPlaybackSpeed]
+  );
+
+  const onSleepSelect = React.useCallback(
+    async (item) => {
+      setSleepTimer(item);
+      const futureSleepDate = await handleSleep(item.value);
+      setSleepTimerDate(futureSleepDate);
+
+      await localStorage.setItem(
+        "sleep",
+        { ...item, futureSleepDate },
+        NAMESPACE
+      );
+    },
+    [player, setSleepTimer]
+  );
+
+  const onSpeedButtonPress = React.useCallback(() => {
+    navigator.openModalBottomSheet({
+      modalBottomSheetContentProps: {
+        items: speeds,
+        current_selection: playbackSpeed,
+        onPress: onSpeedSelect,
+        title: configuration["playback_speed_title"],
+      },
+      options: {
+        supportedOrientations: ["portrait"],
+      },
+    });
+  }, [playbackSpeed, setPlaybackSpeed]);
+
+  const onSleepButtonPress = React.useCallback(() => {
+    navigator.openModalBottomSheet({
+      modalBottomSheetContentProps: {
+        items: [
+          { label: configuration["playback_sleep_off_label"], value: 0 },
+        ].concat(sleeps),
+        current_selection: sleepTimer,
+        onPress: onSleepSelect,
+        title: configuration["playback_sleep_title"],
+      },
+      options: {
+        supportedOrientations: ["portrait"],
+      },
+    });
+  }, [sleepTimer, setSleepTimer, configuration]);
+
   const onCloseVideoModal = React.useCallback(() => {
     playerManager.close();
   }, [playerManager]);
@@ -189,48 +378,65 @@ 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 }}
+          style={Styles.playerContainer}
         >
-          <Layout
-            entry={entry}
-            playerState={playerState}
-            layoutState={layoutState}
-            value={value}
-            onPlaybackButtonPress={onPlaybackButtonPress}
-            onRewindButtonPress={onRewindButtonPress}
-            onForwardButtonPress={onForwardButtonPress}
-            onPlayerSeek={onPlayerSeek}
-            onSkipStart={onSkipStart}
-            onSkipLive={onSkipLive}
-            onCloseVideoModal={onCloseVideoModal}
-            maximiseVideoModal={maximiseVideoModal}
-            configuration={configuration}
-            dimensions={dimensions}
-            playNextData={playNextData}
-          />
-          {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>
     );
   }, [
@@ -252,12 +458,25 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playNextData,
     onSkipStart,
     onSkipLive,
+    sleepTimer.value,
+    sleepTimerDate,
   ]);
 
   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}