@applicaster/quick-brick-player 13.0.0-alpha.8490438700 → 13.0.0-alpha.8541129242

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.8490438700",
+  "version": "13.0.0-alpha.8541129242",
   "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": "13.0.0-rc.28",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.26",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.8490438700",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.8490438700",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.8490438700",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.8541129242",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.46",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.8541129242",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.8541129242",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.8541129242",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
@@ -64,9 +64,9 @@
     "@types/node": "*",
     "@types/react-native": "0.69.6",
     "immer": "*",
-    "react": "17.0.2",
+    "react": "*",
     "react-hot-loader": "*",
-    "react-native": "0.68.6",
+    "react-native": "*",
     "react-native-fs": "*",
     "react-native-gesture-handler": "*",
     "react-native-linear-gradient": "*",

package/src/CellPlayer/Assets/AssetsComponent.tsx

@@ -55,6 +55,11 @@ const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
       return;
     }
 
+    // initial state setup - show correct mute/unmute icon based on current state
+    if (player?.playerState?.isReadyToPlay) {
+      setImageUri(player.getIsMuted() ? asset.active : asset.inactive);
+    }
+
     // active action = muted, inactive = unmuted
     return player.addListener({
       id: liveImageButtonsListenerKey,
@@ -73,10 +78,17 @@ const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
           setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
         },
         onPlayerClose: () => {
-          setImageUri(null);
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(null);
+          }
         },
         onVideoEnd: () => {
-          setImageUri(null);
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(null);
+          }
+        },
+        onPlayerResume: () => {
+          setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
         },
       },
     });
@@ -93,7 +105,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export function AssetComponent(props: CellActionAssetComponentProps) {
+function AssetImage(props: CellActionAssetComponentProps) {
   const { cellUUID: playerId, asset } = props;
   const [imageUri, setImageUri] = useState<Asset>(null);
 
@@ -108,3 +120,5 @@ export function AssetComponent(props: CellActionAssetComponentProps) {
 
   return <View />;
 }
+
+export const AssetComponent = React.memo(AssetImage);

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ViewStyle, View } from "react-native";
+import { ViewStyle, View, Dimensions as ScreenDimensions } from "react-native";
 
 import { SafeAreaView, Edge } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
@@ -40,6 +40,7 @@ import {
   SLEEP_TIMER_OFF,
 } from "./SleepTimerManager";
 import { SpeedController, PlaybackSpeed, DEFAULT_SPEED } from "./SpeedManager";
+import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -78,8 +79,7 @@ type Props = {
   isTabletPortrait?: boolean;
 };
 
-export const defaultAspectRatioWidth = (height: number): number =>
-  (height / 9) * 16;
+const { width: SCREEN_WIDTH } = ScreenDimensions.get("screen");
 
 const Styles = {
   mainContainer: (style: ViewStyle) => {
@@ -105,7 +105,11 @@ const Styles = {
     height: 96,
     marginHorizontal: 24,
   },
-  playerDetails: { marginTop: 60 },
+  playerDetails: {
+    marginTop: 60,
+    alignSelf: "center",
+    width: SCREEN_WIDTH - PADDING_HORIZONTAL * 2,
+  },
 
   linearGradient: {
     flex: 1,
@@ -328,8 +332,12 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     onSleepSelect,
   ]);
 
+  // This method does not actually cancel the sleep timer
+  // (and should not to avoid race condition),
+  // it just performs the cleanup when timer expires
+  // TODO: rename it in code above
   const cancelSleepTimer = React.useCallback(() => {
-    sleepTimerManager?.cancelSleepTimer();
+    sleepTimerManager?.onTimerExpired();
   }, [sleepTimerManager]);
 
   const onCloseVideoModal = React.useCallback(() => {
@@ -438,7 +446,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   ]);
 
   if (configuration.magic_background) {
-    const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
+    const baseUrl = imageSrcFromMediaItem(entry, null);
 
     const queryParamName =
       configuration.audio_player_background_image_query || "width";

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

@@ -1,13 +1,14 @@
 import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
 import * as R from "ramda";
 import { View } from "react-native";
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
 import {
-  ProgressBar,
   Controls,
-  TransportInfo,
   CountDown,
+  ProgressBar,
+  TransportInfo,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
@@ -15,23 +16,22 @@ import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   forwardButton,
+  PADDING_HORIZONTAL,
   playbackButton,
   rewindButton,
-  skipToStartButton,
   skipToLiveButton,
-  PADDING_HORIZONTAL,
-  speedButton,
+  skipToStartButton,
   sleepButton,
+  speedButton,
 } from "./defaultLayoutsConts";
 import { AudioDescription } from "../AudioDescription";
 import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
 import { useLanguageData } from "@applicaster/zapp-react-native-utils/reactHooks/player";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
-import { useEffect, useMemo, useState } from "react";
 import {
-  useModalAnimationContext,
   AnimationComponent,
   ComponentAnimationType,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import DockedLayout from "./DockedLayout";
 import { isValidDate } from "../../Utils";
@@ -375,6 +375,7 @@ export default function DefaultLayout(props: LayoutProps) {
         >
           <PlayerImageBackground
             entry={entry}
+            docked={docked}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
             imageStyle={Styles.backgroundImageContainerImageStyle(
               isTablet,
@@ -405,7 +406,7 @@ export default function DefaultLayout(props: LayoutProps) {
               layoutState={layoutState}
             />
             <Separator />
-            {needsToShowProgressBar && (
+            {needsToShowProgressBar ? (
               <View>
                 <ProgressBar
                   content={entry}
@@ -422,17 +423,17 @@ export default function DefaultLayout(props: LayoutProps) {
                   onSkipLive={onSkipLive}
                 />
 
-                {showCounter && timeLeft >= 0 && (
+                {showCounter && timeLeft >= 0 ? (
                   <CountDown
                     timeLeft={timeLeft}
                     value={value}
                     title={sleepTitle}
                   />
-                )}
+                ) : null}
 
                 <Separator />
               </View>
-            )}
+            ) : null}
             <Controls
               value={value}
               visible={true}

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

@@ -9,18 +9,18 @@ import * as R from "ramda";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
+  Button,
   ContentInfo,
-  ProgressBar,
   Controls,
-  Button,
+  ProgressBar,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import {
-  useModalAnimationContext,
   AnimationComponent,
   ComponentAnimationType,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Dimensions = {
@@ -245,18 +245,18 @@ export default function DockedLayout(props: LayoutProps) {
       ]}
     >
       {!playerState.isLive &&
-        (layoutState.docked || startComponentsAnimation) && (
-          <ProgressBar
-            content={entry}
-            value={value}
-            visible={visible}
-            layoutState={layoutState}
-            onPlayerSeek={onPlayerSeek}
-            playerState={playerState}
-            startComponentsAnimation={startComponentsAnimation}
-            docked
-          />
-        )}
+      (layoutState.docked || startComponentsAnimation) ? (
+        <ProgressBar
+          content={entry}
+          value={value}
+          visible={visible}
+          layoutState={layoutState}
+          onPlayerSeek={onPlayerSeek}
+          playerState={playerState}
+          startComponentsAnimation={startComponentsAnimation}
+          docked
+        />
+      ) : null}
 
       <View style={styles.content}>
         <View

package/src/Player/AudioLayer/SleepTimerManager.ts

@@ -40,94 +40,77 @@ export class SleepTimerController {
     return this.sleepTimerStateSubject.asObservable();
   }
 
-  async cancelSleepTimer() {
-    this.player.cancelSleepTimer?.();
+  private async scheduleSleep(sleepDate): Promise<boolean> {
+    log_debug(`Setting sleep interval to ${sleepDate}`);
 
-    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
-
-    this.sleepTimerStateSubject.next(new SleepTimerState(SLEEP_TIMER_OFF, 0));
-  }
-
-  private async startSleepTimer(futureSleepDate: number) {
     try {
-      log_debug(`Starting sleep timer at ${futureSleepDate}`);
       this.player.cancelSleepTimer?.();
-      this.player.startSleepTimer?.(futureSleepDate);
+      this.player.startSleepTimer?.(sleepDate);
 
-      return futureSleepDate;
+      return true;
     } catch (e) {
       log_error("Failed to start sleep timer", { error: e.message });
 
-      return 0;
+      return false;
     }
   }
 
-  private async handleSleep(timerValue: number, currentFutureSleepDate = null) {
-    log_debug("Handling sleep interval", {
-      timerValue,
-      currentFutureSleepDate,
-    });
-
-    if (timerValue === 0) {
-      await this.cancelSleepTimer();
+  async setSleepTimer(item: SleepTimer) {
+    // User has selected Off state
+    if (item.value === 0) {
+      log_debug("Cancelling sleep timer");
+      this.player.cancelSleepTimer?.();
 
-      return timerValue;
+      return this.onTimerExpired();
     }
 
-    // starting a new timer
-    if (currentFutureSleepDate == null) {
-      log_debug(`Starting sleep timer in ${timerValue} minutes`);
-      const futureSleepDate = Date.now() + timerValue * 60000;
+    log_debug(`Starting sleep timer in ${item.value} minutes`);
 
-      return this.startSleepTimer(futureSleepDate);
-    }
+    const futureSleepDate = Date.now() + item.value * 60000;
 
-    // restoring previous timer (leftover time interval)
-    if (hasDatePassed(currentFutureSleepDate)) {
-      log_debug("Sleep date has already passed");
-      await this.cancelSleepTimer();
+    if (await this.scheduleSleep(futureSleepDate)) {
+      await localStorage.setItem(
+        SLEEP_PREFERENCE_KEY,
+        { ...item, futureSleepDate },
+        NAMESPACE
+      );
 
-      return 0;
+      this.sleepTimerStateSubject.next(
+        new SleepTimerState(item, futureSleepDate)
+      );
     }
+  }
 
-    log_debug(`Starting sleep timer at ${timerValue}`);
+  async onTimerExpired() {
+    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
 
-    return this.startSleepTimer(currentFutureSleepDate);
+    this.sleepTimerStateSubject.next(new SleepTimerState(SLEEP_TIMER_OFF, 0));
   }
 
   async loadSleep() {
     const sleep = await localStorage.getItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
 
-    if (sleep) {
-      const { futureSleepDate, ...rest } = sleep;
+    if (!sleep) return;
 
-      const sleepTimerDate = await this.handleSleep(
-        sleep.value,
-        futureSleepDate
-      );
+    const { futureSleepDate, ...rest } = sleep;
 
-      this.sleepTimerStateSubject.next(
-        new SleepTimerState(rest as SleepTimer, sleepTimerDate)
-      );
+    if (!futureSleepDate || hasDatePassed(futureSleepDate)) {
+      log_debug("Sleep date has already passed");
+      await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
 
-      log_debug(`Sleep state restored, will go to sleep at ${futureSleepDate}`);
+      return;
     }
-  }
-
-  async setSleepTimer(item: SleepTimer) {
-    const futureSleepDate = await this.handleSleep(item.value);
 
-    await localStorage.setItem(
-      SLEEP_PREFERENCE_KEY,
-      { ...item, futureSleepDate },
-      NAMESPACE
-    );
+    if (await this.scheduleSleep(futureSleepDate)) {
+      log_debug(`Sleep state restored, will go to sleep at ${futureSleepDate}`);
 
-    this.sleepTimerStateSubject.next(
-      new SleepTimerState(item, futureSleepDate)
-    );
+      this.sleepTimerStateSubject.next(
+        new SleepTimerState(rest as SleepTimer, futureSleepDate)
+      );
+    }
   }
 
+  // Will be called if user closed the player explicitly.
   // TODO: check if it will be called on Android when we need.
   //  Probably we will have to handle it on native instead.
   public static async onPlayerDestroy() {

package/src/Player/AudioLayer/SpeedManager.ts

@@ -21,6 +21,7 @@ export const DEFAULT_SPEED: PlaybackSpeed = {
   value: 1.0,
 };
 
+// todo: should not be applied to live streams
 export class SpeedController {
   private playbackSpeedSubject = new BehaviorSubject<PlaybackSpeed>(
     DEFAULT_SPEED

package/src/Player/index.tsx

@@ -806,7 +806,6 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
-      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -817,7 +816,14 @@ export default class VideoPlayer extends React.Component<
       accessibilityProps: getAllAccessibilityProps(
         this.getPluginConfiguration()
       ),
-    }; // rate temporary removed, because of bug with subtitles
+    };
+
+    if (!isAppleTV()) {
+      // TODO: Move to RN method and remove from props.
+      // Causes tvOS bug: native player passes rate on fast seek,
+      // RN returns it and it breaks playback.
+      nativeProps.rate = rate;
+    }
 
     if (
       this.isReactNativeMethodsSupported() &&
@@ -990,14 +996,14 @@ export default class VideoPlayer extends React.Component<
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
         <View style={containerStyle}>
-          {(!castAction?.state?.connected || supportNativeCast) && (
+          {!castAction?.state?.connected || supportNativeCast ? (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
               {...nativeProps}
               listener={this.props.listener}
             />
-          )}
+          ) : null}
           <AudioPlayerWrapper {...sharedWrapperViewProps} />
         </View>
       ) : (
@@ -1012,7 +1018,7 @@ export default class VideoPlayer extends React.Component<
             return (
               <View style={styles.container}>
                 <View style={[playerContainerStyles, playerDimensions]}>
-                  {isAudioItem && (
+                  {isAudioItem ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={{
@@ -1031,18 +1037,18 @@ export default class VideoPlayer extends React.Component<
                         plugin_configuration={this.getPluginConfiguration()}
                       />
                     </AnimationComponent>
-                  )}
+                  ) : null}
 
-                  {shouldRenderBackground && (
+                  {shouldRenderBackground ? (
                     <PlayerImageBackground
                       imageKey={backgroundImageKey}
                       configuration={this.getPluginConfiguration()}
                       entry={entry}
                       style={getBackgroundImageStyle(playerDimensions)}
                     />
-                  )}
+                  ) : null}
 
-                  {(!castAction?.state?.connected || supportNativeCast) && (
+                  {!castAction?.state?.connected || supportNativeCast ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={playerDimensions}
@@ -1064,7 +1070,7 @@ export default class VideoPlayer extends React.Component<
                         {this.childrenWithPlayNext()}
                       </this.props.PlayerComponent>
                     </AnimationComponent>
-                  )}
+                  ) : null}
                 </View>
 
                 {renderTransportControls(playerDimensions)}