@applicaster/quick-brick-player 13.0.0-rc.13 → 13.0.0-rc.131

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

@@ -1,452 +0,0 @@
-import * as React 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,
-} 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,
-  playbackButton,
-  rewindButton,
-  skipToStartButton,
-  skipToLiveButton,
-  PADDING_HORIZONTAL,
-  speedButton,
-  sleepButton,
-} 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,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import DockedLayout from "./DockedLayout";
-import { isValidDate } from "../../Utils";
-
-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 Styles = {
-  container: { flex: 1 },
-  tabletContainer: (isPortraitMode: boolean) => ({
-    flex: 1,
-    alignItems: "center",
-    justifyContent: isPortraitMode ? "center" : "flex-start",
-  }),
-  playerImageWrapper: {
-    width: "100%",
-    maxHeight: 750,
-    marginTop: 80,
-  },
-  tabletLayout: {
-    width: 463,
-    marginBottom: 80,
-  },
-  controls: (isTablet: boolean, isLiveShowFullControls: boolean) => ({
-    height: isTablet ? 64 : 50,
-    marginHorizontal: 10,
-    justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
-  }),
-  backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
-    const mobileValue = dimensions.width
-      ? dimensions.width - PADDING_HORIZONTAL * 2
-      : 330;
-
-    return {
-      width: isTablet ? 463 : mobileValue,
-      height: isTablet ? 463 : mobileValue,
-    };
-  },
-  backgroundImageContainerImageStyle: (
-    isTablet: boolean,
-    docked: boolean,
-    startComponentsAnimation: boolean,
-    isActiveGesture: boolean
-  ) => ({
-    borderRadius:
-      (startComponentsAnimation && isActiveGesture) || docked
-        ? 0
-        : isTablet
-        ? 24
-        : 10,
-  }),
-
-  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 { width, height } = dimensions;
-  const isPortraitMode = width < 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(
-    () =>
-      defaultDimensions &&
-      Styles.backgroundImageContainer(defaultDimensions, isTablet),
-    [defaultDimensions, isTablet]
-  );
-
-  const { isActiveGesture, startComponentsAnimation } =
-    useModalAnimationContext();
-
-  return (
-    <View
-      style={
-        isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
-      }
-    >
-      <AnimationComponent animationType={ComponentAnimationType.componentFade}>
-        <TransportInfo
-          content={entry}
-          value={value}
-          visible={true}
-          languageData={languageData}
-          layoutState={layoutState}
-          actionButtons={actionButtons}
-        />
-      </AnimationComponent>
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveUpComponent}
-        style={isTablet ? Styles.playerImageWrapper : undefined}
-      >
-        <AnimationComponent
-          animationType={ComponentAnimationType.moveComponentHorizontal}
-          additionalData={{
-            disableAnimatedComponent: !isTablet,
-            moveValue: (dimensions.width - 463) / 2,
-            extraAnimation: !isTablet
-              ? {
-                  [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
-                    style: Styles.paddingHorizontal,
-                  },
-                }
-              : null,
-          }}
-          style={isTablet ? Styles.alignItemsCenter : undefined}
-        >
-          <PlayerImageBackground
-            entry={entry}
-            style={Styles.backgroundImageContainer(dimensions, isTablet)}
-            imageStyle={Styles.backgroundImageContainerImageStyle(
-              isTablet,
-              docked,
-              startComponentsAnimation,
-              isActiveGesture
-            )}
-            defaultImageDimensions={defaultImageDimensions}
-          />
-        </AnimationComponent>
-
-        <DockedLayout {...props} />
-      </AnimationComponent>
-      <View
-        style={[
-          Styles.paddingHorizontal,
-          isTablet ? Styles.tabletLayout : undefined,
-        ]}
-      >
-        {!docked && (
-          <AnimationComponent
-            animationType={ComponentAnimationType.componentFade}
-          >
-            <AudioDescription
-              title={title}
-              summary={summary}
-              value={value}
-              layoutState={layoutState}
-            />
-            <Separator />
-            {needsToShowProgressBar && (
-              <View>
-                <ProgressBar
-                  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}
-                  />
-                )}
-
-                <Separator />
-              </View>
-            )}
-            <Controls
-              value={value}
-              visible={true}
-              keepAlive={null}
-              buttons={controlButtons}
-              style={Styles.controls(
-                isTablet,
-                isLiveContent && showFullControls
-              )}
-              playerState={playerState}
-            />
-          </AnimationComponent>
-        )}
-      </View>
-    </View>
-  );
-}

package/src/Player/AudioLayer/LinearGradient/LinearGradientProxy.ts

@@ -1,3 +0,0 @@
-import LinearGradient from "react-native-linear-gradient";
-
-export default LinearGradient;

package/src/Player/AudioLayer/LinearGradient/LinearGradientProxy.web.ts

@@ -1,3 +0,0 @@
-const WebLinearGradient = require("react-native-web-linear-gradient").default;
-
-export default WebLinearGradient;

package/src/Player/AudioLayer/LinearGradient/index.ts

@@ -1 +0,0 @@
-export { default } from "./LinearGradientProxy";

package/src/Player/AudioLayer/MagicBG/index.tsx

@@ -1,155 +0,0 @@
-/* eslint-disable react/prop-types */
-import * as React from "react";
-import { Animated, StyleSheet, View } from "react-native";
-import LinearGradient from "../LinearGradient";
-import { getDominantColor, getPalettes } from "../../../utils/utils";
-import { useEffect } from "react";
-
-type MagicBGProps = {
-  children: React.ReactNode;
-  image: string;
-  fallbackUrl?: string;
-  defaultColor: string;
-  colors: string[];
-};
-
-const defaultColors = {
-  overlay: "rgba(0, 0, 0, 0.35)",
-  defaultGradientStart: "rgba(0, 0, 0, 0.25)",
-  defaultGradientEnd: "rgba(0, 0, 0, 0)",
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  fullScreenOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: defaultColors.overlay,
-  },
-  gradientOverlay: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: "100%",
-  },
-});
-
-const fetchPaletteAndDominantColor = async (imageUrl: string) => {
-  const palette = await getPalettes(imageUrl);
-
-  const colors = palette.map(
-    (color: { r: number; g: number; b: number }) =>
-      `rgb(${color.r}, ${color.g}, ${color.b})`
-  );
-
-  const dominant = await getDominantColor(imageUrl);
-  const dominantColor = `rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`;
-
-  return { gradientColors: colors.slice(0, 2), dominantColor };
-};
-
-export const MagicBG: React.FC<MagicBGProps> = ({
-  children,
-  image,
-  fallbackUrl = "",
-  colors = [],
-  defaultColor,
-}) => {
-  const [dominantColor, setDominantColor] =
-    React.useState<string>(defaultColor);
-
-  const [gradientColors, setGradientColors] = React.useState<string[]>([
-    defaultColors.defaultGradientStart,
-    defaultColors.defaultGradientEnd,
-  ]);
-
-  const [backgroundColorAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
-  const [gradientOpacityAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
-
-  useEffect(() => {
-    const animateColors = () => {
-      Animated.timing(backgroundColorAnim, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: false,
-      }).start();
-
-      Animated.timing(gradientOpacityAnim, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: false,
-      }).start();
-    };
-
-    const fetchColors = async () => {
-      if (colors && colors.length > 0) {
-        setGradientColors(colors.slice(0, 2));
-        setDominantColor(colors[0]);
-        animateColors();
-      } else if (image) {
-        try {
-          const { gradientColors, dominantColor } =
-            await fetchPaletteAndDominantColor(image);
-
-          setGradientColors(gradientColors);
-          setDominantColor(dominantColor);
-          animateColors();
-        } catch (error) {
-          try {
-            const { gradientColors, dominantColor } =
-              await fetchPaletteAndDominantColor(fallbackUrl);
-
-            setGradientColors(gradientColors);
-            setDominantColor(dominantColor);
-            animateColors();
-          } catch {
-            setGradientColors([
-              defaultColors.defaultGradientStart,
-              defaultColors.defaultGradientEnd,
-            ]);
-
-            setDominantColor(defaultColor);
-          }
-        }
-      } else {
-        setGradientColors([
-          defaultColors.defaultGradientStart,
-          defaultColors.defaultGradientEnd,
-        ]);
-
-        setDominantColor(defaultColor);
-      }
-    };
-
-    fetchColors();
-  }, []);
-
-  const interpolatedBackgroundColor = backgroundColorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["black", dominantColor],
-  });
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        { backgroundColor: interpolatedBackgroundColor },
-      ]}
-    >
-      <View style={styles.fullScreenOverlay} />
-
-      <Animated.View
-        style={[styles.gradientOverlay, { opacity: gradientOpacityAnim }]}
-      >
-        <LinearGradient
-          colors={gradientColors}
-          style={StyleSheet.absoluteFill}
-        />
-      </Animated.View>
-
-      {children}
-    </Animated.View>
-  );
-};

package/src/Player/Helpers/VideoResizeMode.ts

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

package/src/utils/utils.ts

@@ -1,25 +0,0 @@
-import RNColorThief from "@applicaster/react-native-color-thief";
-import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
-
-const { log_error } = createLogger({
-  subsystem: "UIComponent",
-  category: "MagicBackground",
-});
-
-export const getDominantColor = async (imageUrl: string): Promise<any> => {
-  try {
-    return await RNColorThief.getColor(imageUrl, 1, false);
-  } catch (error) {
-    log_error("Failed to get the dominant color", { error });
-    throw error;
-  }
-};
-
-export const getPalettes = async (imageUrl: string): Promise<any> => {
-  try {
-    return await RNColorThief.getPalette(imageUrl, 3, 1, true);
-  } catch (error) {
-    log_error("Failed to get the palette", { error });
-    throw error;
-  }
-};