@draftbit/core 54.0.4-6c949a.2 → 54.0.4-982952.2

package/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx

@@ -1,136 +1,233 @@
 import React from "react";
-import { ImageResizeMode, Platform } from "react-native";
 import {
-  Video as VideoPlayerComponent,
-  VideoProps as ExpoVideoProps,
-  ResizeMode as ExpoResizeMode,
-  AVPlaybackStatus,
-  VideoFullscreenUpdate,
-  AVPlaybackSource,
-  Audio,
-} from "expo-av";
+  Image,
+  ImageProps,
+  ImageResizeMode,
+  StyleSheet,
+  View,
+} from "react-native";
+import {
+  VideoView as VideoPlayerComponent,
+  VideoViewProps as ExpoVideoProps,
+  VideoContentFit,
+  useVideoPlayer,
+  TimeUpdateEventPayload,
+  VideoPlayer as VideoPlayerType,
+  VideoSource,
+} from "expo-video";
+import { setAudioModeAsync } from "expo-audio";
 import { extractSizeStyles } from "../../../utilities";
 import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
-import type { Playback } from "expo-av/src/AV";
 import {
-  mapToMediaPlayerStatus,
   normalizeBase64Source,
   useSourceDeepCompareEffect,
+  useSourceDeepCompareMemoize,
+} from "../MediaPlayerCommon";
+import type {
+  MediaPlayerRef,
+  MediaPlayerProps,
+  MediaPlayerStatus,
 } from "../MediaPlayerCommon";
-import type { MediaPlayerRef, MediaPlayerProps } from "../MediaPlayerCommon";
 
 type ResizeMode = "contain" | "cover" | "stretch";
-type ExpoVideoPropsOmitted = Omit<
-  ExpoVideoProps,
-  "videoStyle" | "resizeMode" | "onPlaybackStatusUpdate" | "source"
->;
+type ExpoVideoPropsOmitted = Omit<ExpoVideoProps, "player" | "nativeControls">;
 
 interface VideoPlayerProps extends ExpoVideoPropsOmitted, MediaPlayerProps {
   resizeMode?: ResizeMode;
   posterResizeMode?: ImageResizeMode;
+  posterSource?: ImageProps["source"];
+  usePoster?: boolean;
   playsInSilentModeIOS?: boolean;
+  isMuted?: boolean;
+  useNativeControls?: boolean;
+  shouldPlay?: boolean;
+  isLooping?: boolean;
+  positionMillis?: number;
+  rate?: number;
+  volume?: number;
 }
 
 export interface VideoPlayerRef extends MediaPlayerRef {
   toggleFullscreen: () => void;
 }
 
-// Setting playsInSilentModeIOS prop directly on Video component is unreliable,
-// so we need to set the audio mode globally before playing.
-// See:
-// https://github.com/expo/expo/issues/7485
-// https://stackoverflow.com/questions/57371543/how-to-fix-video-play-but-dont-have-sound-on-ios-with-expo
-const triggerAudio = async (ref: React.RefObject<MediaPlayerRef | null>) => {
-  if (ref && ref?.current && Platform.OS === "ios") {
-    await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });
-    ref.current.play();
-  }
-};
-
 const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
   (
     {
       style,
       resizeMode = "contain",
       posterResizeMode = "cover",
+      posterSource,
+      usePoster = false,
       onPlaybackStatusUpdate: onPlaybackStatusUpdateProp,
       onPlaybackFinish,
       source,
       playsInSilentModeIOS = false,
+      isMuted = false,
+      useNativeControls = true,
+      shouldPlay = false,
+      isLooping = false,
+      positionMillis,
+      allowsFullscreen = true,
+      rate = 1,
+      volume = 1,
       ...rest
     },
     ref
   ) => {
-    const [videoMediaObject, setVideoMediaObject] =
-      React.useState<VideoPlayerComponent | null>();
+    // @ts-ignore
+    const { className, ...videoPlayerProps } = rest;
+
+    const stableSource = useSourceDeepCompareMemoize(
+      normalizeBase64Source(source, "video")
+    );
+
+    const player = useVideoPlayer(stableSource, (p) => {
+      p.loop = isLooping;
+      p.muted = isMuted;
+      p.volume = volume;
+      p.playbackRate = rate;
+    });
+
+    const videoPlayerRef = React.useRef<VideoPlayerComponent>(null);
     const [isPlaying, setIsPlaying] = React.useState(false);
     const [isFullscreen, setIsFullscreen] = React.useState(false);
-    const [currentSource, setCurrentSource] =
-      React.useState<AVPlaybackSource>();
+    const [showPoster, setShowPoster] = React.useState(
+      usePoster && !!posterSource
+    );
+
     const mediaPlaybackWrapperRef = React.useRef<MediaPlayerRef>(null);
 
     const sizeStyles = extractSizeStyles(style);
 
-    let mappedResizeMode;
+    React.useEffect(() => {
+      player.muted = isMuted;
+    }, [player, isMuted]);
+
+    React.useEffect(() => {
+      player.loop = isLooping;
+    }, [player, isLooping]);
+
+    React.useEffect(() => {
+      player.volume = volume;
+    }, [player, volume]);
+
+    React.useEffect(() => {
+      player.playbackRate = rate;
+    }, [player, rate]);
+
+    // Refs so statusChange can read latest shouldPlay/positionMillis
+    const shouldPlayRef = React.useRef(shouldPlay);
+    const positionMillisRef = React.useRef(positionMillis);
+    shouldPlayRef.current = shouldPlay;
+    positionMillisRef.current = positionMillis;
+
+    const hasAppliedInitialState = React.useRef(false);
+
+    React.useEffect(() => {
+      const timeUpdateSub = player.addListener("timeUpdate", (status) => {
+        onPlaybackStatusUpdateProp?.(mapToMediaPlayerStatus(status, player));
+      });
+
+      const playingChangeSub = player.addListener(
+        "playingChange",
+        ({ isPlaying: playing }) => {
+          setIsPlaying(playing);
+          onPlaybackStatusUpdateProp?.(mapPlayerToMediaPlayerStatus(player));
+        }
+      );
+
+      const playToEndSub = player.addListener("playToEnd", () => {
+        onPlaybackFinish?.();
+      });
+
+      const statusChangeSub = player.addListener(
+        "statusChange",
+        ({ status, error }) => {
+          if (status === "readyToPlay") {
+            setShowPoster(false);
+            if (!hasAppliedInitialState.current) {
+              hasAppliedInitialState.current = true;
+              if (positionMillisRef.current) {
+                player.currentTime = positionMillisRef.current / 1000;
+              }
+              if (shouldPlayRef.current) {
+                player.play();
+              }
+            }
+          }
+          const mappedStatus = mapPlayerToMediaPlayerStatus(player);
+          onPlaybackStatusUpdateProp?.(
+            status === "error" && error
+              ? { ...mappedStatus, isError: true, error: error.message }
+              : mappedStatus
+          );
+        }
+      );
+
+      return () => {
+        timeUpdateSub.remove();
+        playingChangeSub.remove();
+        playToEndSub.remove();
+        statusChangeSub.remove();
+      };
+    }, []);
+
+    // Replace video source when it changes (deep comparison on URI to avoid unnecessary reloads)
+    const isFirstSourceRender = React.useRef(true);
+    useSourceDeepCompareEffect(() => {
+      if (isFirstSourceRender.current) {
+        isFirstSourceRender.current = false;
+        return;
+      }
+      hasAppliedInitialState.current = false;
+      player.replace(normalizeBase64Source(source, "video") as VideoSource);
+    }, [source]);
+
+    let mappedVideoContentFit: VideoContentFit;
     switch (resizeMode) {
       case "contain":
-        mappedResizeMode = ExpoResizeMode.CONTAIN;
+        mappedVideoContentFit = "contain";
         break;
       case "cover":
-        mappedResizeMode = ExpoResizeMode.COVER;
+        mappedVideoContentFit = "cover";
         break;
       case "stretch":
-        mappedResizeMode = ExpoResizeMode.STRETCH;
+        mappedVideoContentFit = "fill";
         break;
     }
 
-    const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
-      const mappedStatus = mapToMediaPlayerStatus(status);
-      onPlaybackStatusUpdateProp?.(mappedStatus);
-
-      if (status.isLoaded) {
-        if (status.didJustFinish) {
-          onPlaybackFinish?.();
-        }
-        setIsPlaying(status.isPlaying);
-      }
-    };
-
-    const onFullscreenUpdate = (fullscreenUpdate: VideoFullscreenUpdate) => {
-      switch (fullscreenUpdate) {
-        case VideoFullscreenUpdate.PLAYER_DID_PRESENT:
-        case VideoFullscreenUpdate.PLAYER_WILL_PRESENT:
+    const onFullscreenUpdate = (type: "entered" | "exited") => {
+      switch (type) {
+        case "entered":
           setIsFullscreen(true);
           break;
-        case VideoFullscreenUpdate.PLAYER_DID_DISMISS:
-        case VideoFullscreenUpdate.PLAYER_WILL_DISMISS:
+        case "exited":
           setIsFullscreen(false);
           break;
       }
     };
 
     const toggleFullscreen = React.useCallback(async () => {
-      if (isFullscreen) {
-        await videoMediaObject?.dismissFullscreenPlayer();
-      } else {
-        await videoMediaObject?.presentFullscreenPlayer();
+      if (videoPlayerRef) {
+        if (isFullscreen) {
+          await videoPlayerRef.current?.exitFullscreen();
+        } else {
+          await videoPlayerRef.current?.enterFullscreen();
+        }
       }
-    }, [isFullscreen, videoMediaObject]);
+    }, [isFullscreen]);
 
     const updateAudioMode = React.useCallback(async () => {
       try {
-        await Audio.setAudioModeAsync({
-          playsInSilentModeIOS,
+        await setAudioModeAsync({
+          playsInSilentMode: playsInSilentModeIOS,
         });
       } catch (e) {
         console.error("Failed to set audio mode. Error details:", e);
       }
     }, [playsInSilentModeIOS]);
 
-    React.useEffect(() => {
-      if (isPlaying) triggerAudio(mediaPlaybackWrapperRef);
-    }, [mediaPlaybackWrapperRef, isPlaying]);
-
     React.useImperativeHandle(
       ref,
       () => ({
@@ -147,36 +244,73 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
       [toggleFullscreen, isPlaying]
     );
 
-    useSourceDeepCompareEffect(() => {
-      const updateSource = async () => {
-        const finalSource = await normalizeBase64Source(source, "video");
-        setCurrentSource(finalSource);
-      };
-      updateSource();
-    }, [source]);
-
     return (
       <MediaPlaybackWrapper
-        media={videoMediaObject as Playback | undefined}
+        player={player}
         isPlaying={isPlaying}
         ref={mediaPlaybackWrapperRef}
         onTogglePlayback={updateAudioMode}
       >
-        <VideoPlayerComponent
-          // https://docs.expo.dev/versions/latest/sdk/av/#example-video to see why ref is handled this way
-          ref={(component) => setVideoMediaObject(component)}
-          style={style}
-          videoStyle={sizeStyles}
-          resizeMode={mappedResizeMode}
-          posterStyle={[sizeStyles, { resizeMode: posterResizeMode }]}
-          onPlaybackStatusUpdate={onPlaybackStatusUpdate}
-          onFullscreenUpdate={(e) => onFullscreenUpdate(e.fullscreenUpdate)}
-          source={currentSource}
-          {...rest}
-        />
+        <View
+          style={[style, styles.container]}
+          // @ts-ignore
+          className={className}
+        >
+          <VideoPlayerComponent
+            ref={videoPlayerRef}
+            player={player}
+            nativeControls={useNativeControls}
+            style={sizeStyles}
+            contentFit={mappedVideoContentFit}
+            onFullscreenEnter={() => onFullscreenUpdate("entered")}
+            onFullscreenExit={() => onFullscreenUpdate("exited")}
+            allowsFullscreen={allowsFullscreen}
+            {...videoPlayerProps}
+          />
+          {showPoster && posterSource && (
+            <View style={StyleSheet.absoluteFill} pointerEvents="none">
+              <Image
+                source={posterSource}
+                resizeMode={posterResizeMode}
+                style={[StyleSheet.absoluteFill, sizeStyles]}
+              />
+            </View>
+          )}
+        </View>
       </MediaPlaybackWrapper>
     );
   }
 );
 
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+  },
+});
+
+function mapPlayerToMediaPlayerStatus(
+  player: VideoPlayerType
+): MediaPlayerStatus {
+  return {
+    isPlaying: player.playing,
+    isLoading: player.status === "loading",
+    isBuffering: player.status === "loading",
+    currentPositionMillis: player.currentTime * 1000,
+    durationMillis: player.duration * 1000,
+    bufferedDurationMillis: player.bufferedPosition * 1000,
+    isError: player.status === "error",
+  };
+}
+
+export function mapToMediaPlayerStatus(
+  status: TimeUpdateEventPayload,
+  player: VideoPlayerType
+): MediaPlayerStatus {
+  return {
+    ...mapPlayerToMediaPlayerStatus(player),
+    currentPositionMillis: status.currentTime * 1000,
+    bufferedDurationMillis: status.bufferedPosition * 1000,
+  };
+}
+
 export default VideoPlayer;

package/src/components/Picker/PickerCommon.ts

@@ -12,6 +12,7 @@ export interface PickerOption {
 }
 
 export interface PickerInputContainerProps extends IconSlot {
+  className?: string;
   error?: boolean;
   placeholder?: string;
   disabled?: boolean;

package/src/components/Picker/PickerInputContainer.tsx

@@ -33,6 +33,7 @@ const PickerInputContainer: React.FC<
   options = [],
   onPress,
   Icon,
+  className,
   style,
   selectedValue,
   disabled = false,
@@ -70,7 +71,12 @@ const PickerInputContainer: React.FC<
   }
 
   return (
-    <View testID={testID} style={[containerStyle, { zIndex }]}>
+    <View
+      testID={testID}
+      style={[containerStyle, { zIndex }]}
+      // @ts-ignore
+      className={className}
+    >
       <TextField
         Icon={Icon}
         numberOfLines={1}

package/src/components/Progress/CircularProgress/CircularProgress.tsx

@@ -41,6 +41,7 @@ export const CircularProgress: React.FC<
   trackCustomDashArray,
   onFullPathWidth,
   startPosition = "top",
+  className,
   style,
   testID,
 }) => {
@@ -128,6 +129,8 @@ export const CircularProgress: React.FC<
         },
         style,
       ]}
+      // @ts-ignore
+      className={className}
     >
       <Svg testID={testID ?? "circular-progress-component"} style={{ flex: 1 }}>
         {showTrack && (

package/src/components/Progress/LinearProgress/LinearProgress.tsx

@@ -37,6 +37,7 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
   customDashArray,
   trackCustomDashArray,
   onFullPathWidth,
+  className,
   style,
   testID,
 }) => {
@@ -101,6 +102,8 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
         },
         style,
       ]}
+      // @ts-ignore
+      className={className}
     >
       <Svg testID={testID ?? "linear-progress-component"} style={{ flex: 1 }}>
         {showTrack && (

package/src/components/Progress/ProgressCommon.ts

@@ -25,6 +25,7 @@ export interface BaseProgressProps {
   customDashArray?: string;
   trackCustomDashArray?: string;
   onFullPathWidth?: (width: number) => void;
+  className?: string;
   style?: StyleProp<ViewStyle>;
   theme: ReadTheme;
   testID?: string;

package/src/components/SVG.native.tsx

@@ -7,14 +7,20 @@ import Config from "./Config";
 type SVGComponentProps = {
   source: string;
   style?: StyleProp<ImageStyle>;
+  className?: string;
 };
 
 const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
   source = Config.placeholderSvgURL,
   style,
+  className,
 }) => {
   return (
-    <View style={style as StyleProp<ViewStyle>}>
+    <View
+      style={style as StyleProp<ViewStyle>}
+      // @ts-ignore
+      className={className}
+    >
       <SvgUri width="100%" height="100%" uri={source} />
     </View>
   );

package/src/components/SVG.tsx

@@ -6,13 +6,22 @@ import Config from "./Config";
 type SVGComponentProps = {
   source: string;
   style?: StyleProp<ImageStyle>;
+  className?: string;
 };
 
 const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
   source = Config.placeholderSvgURL,
   style,
+  className,
 }) => {
-  return <Image style={style} source={{ uri: source }} />;
+  return (
+    <Image
+      style={style}
+      source={{ uri: source }}
+      // @ts-ignore
+      className={className}
+    />
+  );
 };
 
 export default SVG;

package/src/components/SectionList/SectionHeader.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-import { View, StyleProp, ViewStyle, Text } from "react-native";
+import { View, ViewProps, StyleProp, ViewStyle, Text } from "react-native";
 import { withTheme } from "@draftbit/theme";
 import type { ReadTheme } from "@draftbit/theme";
 
-interface SectionHeaderProps {
+interface SectionHeaderProps extends Omit<ViewProps, "style" | "children"> {
   style?: StyleProp<ViewStyle>;
 }
 
 const SectionHeader: React.FC<React.PropsWithChildren<SectionHeaderProps>> = ({
   style,
   children,
-}) => <View style={style}>{children}</View>;
+  ...rest
+}) => (
+  <View style={style} {...rest}>
+    {children}
+  </View>
+);
 
 interface DefaultSectionHeaderProps {
   title: string;

package/src/components/SwipeableItem/SwipeableItem.tsx

@@ -50,6 +50,7 @@ import {
  */
 
 export interface SwipeableItemProps extends IconSlot {
+  className?: string;
   closeOnPress?: boolean;
   leftOpenValue?: number;
   rightOpenValue?: number;
@@ -74,6 +75,7 @@ type Props = SwipeableItemProps & RightSwipeProps & LeftSwipeProps;
 
 const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   theme,
+  className,
   style,
   children: childrenProp,
   Icon,
@@ -232,6 +234,8 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
         setComponentWidth(event.nativeEvent.layout.width);
       }}
       style={[styles.parentContainer, parentContainerStyles]}
+      // @ts-ignore
+      className={className}
     >
       {/*@ts-ignore*/}
       <SwipeRow

package/src/components/Swiper/Swiper.tsx

@@ -1,6 +1,6 @@
 import { ReadTheme, withTheme } from "@draftbit/theme";
 import React, { forwardRef, useImperativeHandle } from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, StyleProp, ViewStyle, ViewProps } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
 
 export interface SwiperRef {
@@ -9,7 +9,7 @@ export interface SwiperRef {
   swipePrev: () => void;
 }
 
-export interface SwiperProps<T> {
+export interface SwiperProps<T> extends Omit<ViewProps, "style" | "children"> {
   onSwipe?: (index: number) => void;
   onSwipedNext?: (index: number) => void;
   onSwipedPrevious?: (index: number) => void;
@@ -63,6 +63,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
       minDistanceToCapture,
       style,
       hideDots = false,
+      ...rest
     }: SwiperProps<any>,
     ref
   ) => {
@@ -141,7 +142,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
     }));
 
     return (
-      <View style={style}>
+      <View style={style} {...rest}>
         {/* @ts-ignore */}
         <SwiperComponent
           ref={swiperRef}

package/src/components/Swiper/SwiperItem.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+} from "react-native";
 
 const styles = StyleSheet.create({
   wrapper: {
@@ -7,13 +13,15 @@ const styles = StyleSheet.create({
   },
 });
 
-export interface SwiperProps {
+export interface SwiperProps extends Omit<ViewProps, "style" | "children"> {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 }
 
-const SwiperItem = ({ children, style }: SwiperProps) => (
-  <View style={[styles.wrapper, style]}>{children}</View>
+const SwiperItem = ({ children, style, ...rest }: SwiperProps) => (
+  <View style={[styles.wrapper, style]} {...rest}>
+    {children}
+  </View>
 );
 
 export default SwiperItem;

package/src/components/Table/TableCell.tsx

@@ -10,6 +10,7 @@ import Pressable from "../Pressable";
 export interface Props extends TableProps {
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
+  className?: string;
 }
 
 const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
@@ -24,6 +25,7 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
   cellHorizontalPadding,
   children,
   onPress,
+  className,
   style,
 }) => {
   const parentContextValue = React.useContext(TableStyleContext);
@@ -42,6 +44,8 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
   return (
     <ContainerComponent
       onPress={onPress}
+      // @ts-ignore
+      className={className}
       style={[
         styles.cellContainer,
         borderViewStyle,

package/src/components/Table/TableRow.tsx

@@ -14,6 +14,7 @@ export interface Props extends TableProps {
   onPress?: () => void;
   isTableHeader?: boolean;
   style?: StyleProp<ViewStyle>;
+  className?: string;
   theme: ReadTheme;
 }
 
@@ -30,6 +31,7 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
   isTableHeader = false,
   children,
   onPress,
+  className,
   style,
   theme,
 }) => {
@@ -61,6 +63,8 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
     <TableStyleContext.Provider value={contextValue}>
       <ContainerComponent
         onPress={onPress}
+        // @ts-ignore
+        className={className}
         style={[
           borderViewStyle,
           isTableHeader