@applicaster/quick-brick-player 13.0.0-rc.93 → 13.0.0-rc.95

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

@@ -1,495 +0,0 @@
-import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
-import * as R from "ramda";
-import { View, Dimensions as ScreenDimensions } from "react-native";
-import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
-
-import {
-  Controls,
-  CountDown,
-  ProgressBar,
-  TransportInfo,
-} from "@applicaster/quick-brick-mobile-transport-controls";
-
-import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import {
-  forwardButton,
-  PADDING_HORIZONTAL,
-  playbackButton,
-  rewindButton,
-  skipToLiveButton,
-  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 {
-  AnimationComponent,
-  ComponentAnimationType,
-  useModalAnimationContext,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
-import DockedLayout from "./DockedLayout";
-import { isValidDate } from "../../Utils";
-import { calculateBorderRadius } from "../utils";
-
-const getAudioPlayerWidthForTablet = (isPortraitMode: boolean) =>
-  isPortraitMode ? 463 : 350;
-
-type Dimensions = {
-  width: number;
-  height: number;
-};
-
-type LayoutProps = {
-  entry: ZappEntry;
-  layoutState: {
-    inline: boolean;
-    docked: boolean;
-    isModal: boolean;
-  };
-  playerState: {
-    currentTime: number;
-    duration: number;
-    seekableDuration: number;
-    isLive: boolean;
-    isPaused: boolean;
-    isBuffering: boolean;
-  };
-  sleepTimerDate: number;
-  value: GetValue;
-  playbackSpeedName: string;
-  playbackSleepName: string;
-  configuration: { [key: string]: any };
-  onPlaybackButtonPress: () => void;
-  onRewindButtonPress: () => void;
-  onForwardButtonPress: () => void;
-  onSpeedButtonPress: () => void;
-  onSleepButtonPress: () => void;
-  cancelSleepTimer: () => void;
-  onPlayerSeek: (targetTime: number) => void;
-  onSkipLive: () => void;
-  onSkipStart: () => void;
-  onCloseVideoModal: () => void;
-  maximiseVideoModal: () => void;
-  dimensions: Dimensions;
-  playNextData: PlayNextData;
-  title: string | number;
-  summary: string | number;
-  defaultDimensions: Dimensions;
-};
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
-  ScreenDimensions.get("screen");
-
-const Styles = {
-  container: { flex: 1 },
-  tabletContainer: (isPortraitMode: boolean) => ({
-    flex: 1,
-    alignItems: "center",
-    justifyContent: isPortraitMode ? "center" : "flex-start",
-  }),
-  playerImageWrapper: (docked: boolean) => ({
-    width: "100%",
-    maxHeight: 750,
-    marginTop: docked ? 80 : 20,
-  }),
-  playerInfoWrapper: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  tabletLayout: (isPortraitMode: boolean) => ({
-    width: getAudioPlayerWidthForTablet(isPortraitMode),
-    marginBottom: 80,
-    paddingHorizontal: undefined, // override paddingHorizontal
-  }),
-  controls: (isTablet: boolean, isLiveShowFullControls: boolean) => ({
-    height: isTablet ? 64 : 50,
-    marginHorizontal: isTablet ? undefined : 10,
-    justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
-  }),
-  backgroundImageContainer: (
-    dimensions: Dimensions,
-    isTablet: boolean,
-    isPortraitMode: boolean
-  ) => {
-    if (isTablet) {
-      const size = getAudioPlayerWidthForTablet(isPortraitMode);
-
-      return {
-        width: size,
-        height: size,
-      };
-    }
-
-    const mobileValue = dimensions?.width
-      ? dimensions.width - PADDING_HORIZONTAL * 2
-      : SCREEN_WIDTH - PADDING_HORIZONTAL * 2;
-
-    return {
-      width: mobileValue,
-      height: mobileValue,
-    };
-  },
-  backgroundImageContainerImageStyle: (
-    isTablet: boolean,
-    docked: boolean,
-    startComponentsAnimation: boolean,
-    isActiveGesture: boolean,
-    playerAnimationState: PlayerAnimationStateT
-  ) => ({
-    borderRadius: calculateBorderRadius(
-      isTablet,
-      docked,
-      startComponentsAnimation,
-      isActiveGesture,
-      playerAnimationState
-    ),
-  }),
-
-  paddingHorizontal: {
-    paddingHorizontal: PADDING_HORIZONTAL,
-  },
-
-  controlsMobile: {
-    height: 50,
-    marginHorizontal: 24,
-  },
-  controlsTablet: {
-    height: 96,
-    marginHorizontal: 24,
-  },
-  separator: {
-    height: 20,
-  },
-  flexDirectionRow: {
-    flexDirection: "row",
-  },
-  alignItemsCenter: {
-    alignItems: "center",
-  },
-};
-
-export default function DefaultLayout(props: LayoutProps) {
-  const {
-    entry,
-    layoutState,
-    playerState,
-    value,
-    onPlaybackButtonPress,
-    onRewindButtonPress,
-    onForwardButtonPress,
-    onPlayerSeek,
-    onSkipStart,
-    onSkipLive,
-    onSpeedButtonPress,
-    onSleepButtonPress,
-    playbackSpeedName,
-    playbackSleepName,
-    configuration,
-    dimensions,
-    cancelSleepTimer,
-    sleepTimerDate,
-    title,
-    summary,
-    defaultDimensions,
-  } = props;
-
-  const isTablet = useIsTablet();
-  const isPortraitMode = SCREEN_WIDTH < SCREEN_HEIGHT;
-  const isLiveContent = playerState.isLive;
-  const docked = layoutState.docked;
-
-  const languageData = useLanguageData("audio-player");
-
-  const showCounter = useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
-
-  const controller = playerManager.getActivePlayer();
-  const liveButton = Boolean(value("live_badge_enabled"));
-  const sleepTitle = value("playback_sleep_countdown_label");
-
-  const [timeLeft, setTimeLeft] = useState(
-    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
-  );
-
-  let showFullControls = !controller?.isAd();
-
-  const startTime = entry.extensions?.live?.start_time;
-  const endTime = entry.extensions?.live?.end_time;
-
-  const hasValidStartTime = isValidDate(startTime);
-  const hasValidEndTime = isValidDate(endTime);
-
-  const isDateBasedLiveContent =
-    isLiveContent && hasValidStartTime && hasValidEndTime;
-
-  const needsToShowProgressBar =
-    (isLiveContent &&
-      (Boolean(value("liveSeekingEnabled")) || isDateBasedLiveContent)) ||
-    !isLiveContent;
-
-  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);
-  }
-
-  const actionButtons = React.useMemo(
-    () =>
-      R.compose(
-        R.take(2),
-        R.map(R.trim),
-        R.split(","),
-        R.propOr("", "player_action_buttons")
-      )(configuration),
-    [configuration.player_action_buttons]
-  );
-
-  const controlButtons = React.useCallback((): Array<ControlsButton> => {
-    const play = playbackButton({
-      playerState,
-      liveButton,
-      isTablet,
-      isLiveShowFullControls: showFullControls && isLiveContent,
-      onPress: onPlaybackButtonPress,
-    });
-
-    if (!showFullControls) {
-      return [play];
-    }
-
-    const rewind = rewindButton({
-      isTablet,
-      onPress: controller?.hasSeekableDuration?.() ? onRewindButtonPress : null,
-    });
-
-    const forward = forwardButton({
-      isTablet,
-      onPress: controller?.hasSeekableDuration?.()
-        ? onForwardButtonPress
-        : null,
-    });
-
-    const speed = speedButton({
-      isTablet,
-      onPress: onSpeedButtonPress,
-      name: playbackSpeedName,
-    });
-
-    const sleep = sleepButton({
-      isTablet,
-      onPress: onSleepButtonPress,
-      name: playbackSleepName,
-    });
-
-    if (isLiveContent) {
-      const skipToStart = skipToStartButton({
-        isTablet,
-        onPress: onSkipStart,
-      });
-
-      const skipToLive = skipToLiveButton({
-        isTablet,
-        onPress: onSkipLive,
-      });
-
-      return [skipToStart, rewind, play, forward, skipToLive];
-    }
-
-    return [speed, rewind, play, forward, sleep];
-  }, [
-    playerState,
-    liveButton,
-    isTablet,
-    onPlaybackButtonPress,
-    onRewindButtonPress,
-    onForwardButtonPress,
-    onSpeedButtonPress,
-    showFullControls,
-    onSkipStart,
-    onSkipLive,
-    isLiveContent,
-    playbackSpeedName,
-    playbackSleepName,
-    controller,
-  ]);
-
-  useEffect(() => {
-    if (showCounter && sleepTimerDate !== 0) {
-      setTimeLeft(sleepTimerDate - Date.now());
-
-      const intervalId = setInterval(() => {
-        setTimeLeft(() => {
-          const newTimeLeft = sleepTimerDate - Date.now();
-
-          if (newTimeLeft <= 0) {
-            clearInterval(intervalId);
-
-            cancelSleepTimer();
-
-            return 0;
-          } else {
-            return newTimeLeft;
-          }
-        });
-      }, 1000);
-
-      return () => clearInterval(intervalId);
-    } else {
-      setTimeLeft(0);
-    }
-  }, [sleepTimerDate, showCounter, cancelSleepTimer]);
-
-  const Separator = () => <View style={Styles.separator} />;
-
-  const defaultImageDimensions = React.useMemo(
-    () =>
-      Styles.backgroundImageContainer(
-        defaultDimensions,
-        isTablet,
-        isPortraitMode
-      ),
-    [defaultDimensions, isTablet, isPortraitMode]
-  );
-
-  const { isActiveGesture, startComponentsAnimation, playerAnimationState } =
-    useModalAnimationContext();
-
-  return (
-    <View
-      style={
-        isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
-      }
-    >
-      <AnimationComponent
-        animationType={ComponentAnimationType.componentFade}
-        style={isTablet ? Styles.playerInfoWrapper : undefined}
-      >
-        <TransportInfo
-          content={entry}
-          value={value}
-          visible={true}
-          languageData={languageData}
-          layoutState={layoutState}
-          actionButtons={actionButtons}
-        />
-      </AnimationComponent>
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveUpComponent}
-        style={isTablet ? Styles.playerImageWrapper(docked) : undefined}
-      >
-        <AnimationComponent
-          animationType={ComponentAnimationType.moveComponentHorizontal}
-          additionalData={{
-            disableAnimatedComponent: !isTablet,
-            moveValue:
-              (dimensions.width -
-                getAudioPlayerWidthForTablet(isPortraitMode)) /
-              2,
-            extraAnimation: !isTablet
-              ? {
-                  [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
-                    style: Styles.paddingHorizontal,
-                  },
-                }
-              : null,
-          }}
-          style={isTablet ? Styles.alignItemsCenter : undefined}
-        >
-          <PlayerImageBackground
-            entry={entry}
-            style={Styles.backgroundImageContainer(
-              dimensions,
-              isTablet,
-              isPortraitMode
-            )}
-            imageStyle={Styles.backgroundImageContainerImageStyle(
-              isTablet,
-              docked,
-              startComponentsAnimation,
-              isActiveGesture,
-              playerAnimationState
-            )}
-            defaultImageDimensions={defaultImageDimensions}
-          />
-        </AnimationComponent>
-
-        <DockedLayout {...props} />
-      </AnimationComponent>
-      <View
-        style={[
-          Styles.paddingHorizontal,
-          isTablet ? Styles.tabletLayout(isPortraitMode) : undefined,
-        ]}
-      >
-        {!docked && (
-          <AnimationComponent
-            animationType={ComponentAnimationType.componentFade}
-          >
-            <AudioDescription
-              title={title}
-              summary={summary}
-              value={value}
-              layoutState={layoutState}
-            />
-            <Separator />
-            {needsToShowProgressBar ? (
-              <View>
-                <ProgressBar
-                  name={"audio-default-layout"}
-                  content={entry}
-                  value={value}
-                  visible={true}
-                  layoutState={layoutState}
-                  onPlayerSeek={onPlayerSeek}
-                  playerState={playerState}
-                  disableFullscreen={true}
-                  sliderStyle={2}
-                  startTimestamp={startTimestamp}
-                  endTimestamp={endTimestamp}
-                  isDateBasedLiveContent={isDateBasedLiveContent}
-                  onSkipLive={onSkipLive}
-                />
-
-                {showCounter && timeLeft >= 0 ? (
-                  <CountDown
-                    timeLeft={timeLeft}
-                    value={value}
-                    title={sleepTitle}
-                  />
-                ) : null}
-
-                <Separator />
-              </View>
-            ) : null}
-            <Controls
-              value={value}
-              visible={true}
-              keepAlive={null}
-              buttons={controlButtons}
-              style={Styles.controls(
-                isTablet,
-                isLiveContent && showFullControls
-              )}
-              playerState={playerState}
-            />
-          </AnimationComponent>
-        )}
-      </View>
-    </View>
-  );
-}

package/src/Player/Helpers/VideoResizeMode.ts

@@ -1,7 +0,0 @@
-import keyMirror from "keymirror";
-
-export default keyMirror({
-  contain: null,
-  cover: null,
-  stretch: null,
-});