@aic-kits/react-native 0.0.2 → 0.0.4

package/lib/components/Text/types.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+import type { Color, FontSize, FontWeight, Scale } from '../../theme';
+export interface TextProps extends NativeTextProps {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Size of the text.
+     */
+    fontSize?: FontSize;
+    /**
+     * Font weight of the text.
+     */
+    fontWeight?: FontWeight;
+    /**
+     * Visual color to apply to the text.
+     */
+    color?: Color;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Specifies the alignment of the text.
+     */
+    textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;
+    /**
+     * Transform the text.
+     */
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
+    /**
+     * Specifies the decoration of the text.
+     */
+    textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through' | undefined;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * The typeface to render the text in:
+     * - `neutral`: The default typeface for the platform.
+     */
+    typeface?: keyof Scale['font'];
+    /**
+     * Whether to render the text with rich text formatting.
+     */
+    useRichText?: boolean;
+}
+export interface TagStyle {
+    pattern: RegExp;
+    props: Partial<TextProps>;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/Text/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Text/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,IAAI,eAAe,EAAG,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAExF,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEtE,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD;;OAEG;IACJ,QAAQ,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACJ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEnB;;OAEG;IACJ,UAAU,CAAC,EAAE,UAAU,CAAC;IAEvB;;OAEG;IACJ,KAAK,CAAC,EAAE,KAAK,CAAC;IAEb;;OAEG;IACJ,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE5B;;OAEG;IACJ,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAExE;;OAEG;IACJ,aAAa,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC;IAE9E;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,cAAc,GAAG,wBAAwB,GAAG,SAAS,CAAC;IAEjG;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACJ,QAAQ,CAAC,EAAE,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC;IAE/B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CAC3B"}

package/lib/components/Text/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Text/withRichText.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TextProps } from './types';
+export declare const withRichText: (BaseText: React.ComponentType<TextProps>) => (props: TextProps & {
+    useRichText?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=withRichText.d.ts.map

package/lib/components/Text/withRichText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withRichText.d.ts","sourceRoot":"","sources":["../../../src/components/Text/withRichText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAwCzC,eAAO,MAAM,YAAY,aAAc,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,aACnC,SAAS,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,4CAatE,CAAC"}

package/lib/components/Text/withRichText.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import isString from 'lodash/fp/isString';
+import React from 'react';
+import { SUPPORTED_RICH_TEXT_TAGS } from './constants';
+const processText = (text, BaseText, parentProps) => {
+    if (typeof text !== 'string') {
+        return text;
+    }
+    let lastIndex = 0;
+    const elements = [];
+    SUPPORTED_RICH_TEXT_TAGS.forEach(({ pattern, props }) => {
+        const matches = Array.from(text.matchAll(pattern));
+        matches.forEach(match => {
+            const [fullMatch, content] = match;
+            const startIndex = match.index;
+            if (startIndex > lastIndex) {
+                elements.push(text.slice(lastIndex, startIndex));
+            }
+            elements.push(_createElement(BaseText, { ...parentProps, ...props, key: startIndex }, content));
+            lastIndex = startIndex + fullMatch.length;
+        });
+    });
+    if (lastIndex < text.length) {
+        elements.push(text.slice(lastIndex));
+    }
+    return elements;
+};
+export const withRichText = (BaseText) => {
+    return function RichText(props) {
+        const { useRichText = false, children, } = props;
+        if (!useRichText || !isString(children)) {
+            return _jsx(BaseText, { ...props, children: children });
+        }
+        const processedChildren = processText(children.toString(), BaseText, props);
+        return _jsx(BaseText, { ...props, children: processedChildren });
+    };
+};

package/lib/components/Touchable/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TouchableProps } from './types';
+export declare const Touchable: React.FC<TouchableProps>;
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Touchable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Touchable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAWpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwE9C,CAAC;AAEF,cAAc,SAAS,CAAC"}

package/lib/components/Touchable/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNil } from 'lodash';
+import React, { useCallback, useMemo } from 'react';
+import { Pressable } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
+import { useTheme } from '../../theme';
+import { HapticFeedback } from '../../utils';
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+export const Touchable = ({ children, onPress, style, hapticFeedback = 'soft', ...props }) => {
+    const theme = useTheme();
+    const themeAnimation = useMemo(() => theme.__hd__.touchable.animation, [theme.__hd__.touchable.animation]);
+    const scale = useSharedValue(themeAnimation.maxScale);
+    const opacity = useSharedValue(themeAnimation.maxOpacity);
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ scale: scale.value }],
+            opacity: opacity.value,
+        };
+    });
+    const handlePressIn = useCallback(() => {
+        scale.value = withSpring(themeAnimation.minScale, {
+            mass: themeAnimation.springConfig.mass,
+        });
+        opacity.value = withSpring(themeAnimation.minOpacity, {
+            mass: themeAnimation.springConfig.mass,
+        });
+        const hapticFeedbackType = theme.__hd__.touchable.hapticFeedbackTypes[hapticFeedback];
+        if (!isNil(hapticFeedbackType)) {
+            HapticFeedback.trigger(hapticFeedbackType);
+        }
+    }, [
+        hapticFeedback,
+        opacity,
+        scale,
+        themeAnimation.minOpacity,
+        themeAnimation.minScale,
+        themeAnimation.springConfig.mass,
+        theme.__hd__.touchable.hapticFeedbackTypes,
+    ]);
+    const handlePressOut = useCallback(() => {
+        scale.value = withSpring(themeAnimation.maxScale, {
+            mass: themeAnimation.springConfig.mass,
+        });
+        opacity.value = withSpring(themeAnimation.maxOpacity, {
+            mass: themeAnimation.springConfig.mass,
+        });
+    }, [
+        opacity,
+        scale,
+        themeAnimation.maxOpacity,
+        themeAnimation.maxScale,
+        themeAnimation.springConfig.mass,
+    ]);
+    return (_jsx(AnimatedPressable, { onPress: onPress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [animatedStyle, style], ...props, children: children }));
+};
+export * from './types';

package/lib/components/Touchable/types.d.ts

@@ -0,0 +1,22 @@
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { TouchableHapticFeedbackType } from '../../theme';
+import type { BoxProps } from '../Box';
+export interface TouchableProps extends PressableProps, Omit<BoxProps, 'hitSlop'> {
+    /**
+     * Haptic feedback type.
+     */
+    hapticFeedback?: TouchableHapticFeedbackType;
+    /**
+     * Touchable's content.
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Additional styles.
+     */
+    style?: StyleProp<ViewStyle> | undefined;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string | undefined;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/Touchable/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Touchable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,cACf,SAAQ,cAAc,EACpB,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B"}

package/lib/components/Touchable/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Video/StyledVideoControlManager.d.ts

@@ -0,0 +1,49 @@
+import { View } from 'react-native';
+declare const StyledControlContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    mode: "fullscreen" | "standard";
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledControlWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    mode: "fullscreen" | "standard";
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledActionButtons: import("@emotion/native").StyledComponent<import("..").BoxProps & {
+    ref?: import("react").ForwardedRef<View>;
+} & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    mode: "fullscreen" | "standard";
+}, {}, {}>;
+declare const StyledSeekBarWrapper: import("@emotion/native").StyledComponent<import("react-native").PressableProps & import("react").RefAttributes<View> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    mode: "fullscreen" | "standard";
+}, {}, {}>;
+declare const StyledSeekBar: import("@emotion/native").StyledComponent<import("..").BoxProps & {
+    ref?: import("react").ForwardedRef<View>;
+} & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    mode: "fullscreen" | "standard";
+}, {}, {}>;
+declare const StyledTextContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    mode: "fullscreen" | "standard";
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledControlContainer, StyledControlWrapper, StyledActionButtons, StyledSeekBarWrapper, StyledSeekBar, StyledTextContainer, };
+//# sourceMappingURL=StyledVideoControlManager.d.ts.map

package/lib/components/Video/StyledVideoControlManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledVideoControlManager.d.ts","sourceRoot":"","sources":["../../../src/components/Video/StyledVideoControlManager.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,IAAI,EAAE,MAAM,cAAc,CAAC;AAI/C,QAAA,MAAM,sBAAsB;;SAuFojF,MAAO,WAAW;;UAtF1lF,YAAY,GAAG,UAAU;;;EAa/B,CAAC;AAEH,QAAA,MAAM,oBAAoB;;SAuEsjF,MAAO,WAAW;;UAtE1lF,YAAY,GAAG,UAAU;;;EAW/B,CAAC;AAEH,QAAA,MAAM,mBAAmB;;;;SAyDk3G,MAAO,WAAW;;UAxDr5G,YAAY,GAAG,UAAU;UAa/B,CAAC;AAEH,QAAA,MAAM,oBAAoB;;SAyCi3G,MAAO,WAAW;;UAxCr5G,YAAY,GAAG,UAAU;UAO/B,CAAC;AAEH,QAAA,MAAM,aAAa;;;;SA+Bw3G,MAAO,WAAW;;UA9Br5G,YAAY,GAAG,UAAU;UAO/B,CAAC;AAGH,QAAA,MAAM,mBAAmB;;SAoBujF,MAAO,WAAW;;UAnB1lF,YAAY,GAAG,UAAU;;;EAS/B,CAAC;AAEH,OAAO,EACL,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,aAAa,EACb,mBAAmB,GACpB,CAAC"}

package/lib/components/Video/StyledVideoControlManager.js

@@ -0,0 +1,64 @@
+import styled from '@emotion/native';
+import { Pressable, View } from 'react-native';
+import { Box } from '../Box';
+const StyledControlContainer = styled(View)(({ theme, mode }) => {
+    return {
+        flex: 1,
+        paddingBottom: theme.__hd__.video.videoControlContainerPadding[mode],
+        paddingHorizontal: theme.__hd__.video.videoControlContainerPadding[mode],
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'flex-end',
+    };
+});
+const StyledControlWrapper = styled(View)(({ theme, mode }) => {
+    return {
+        height: mode === 'fullscreen' ? 'auto' : theme.__hd__.video.defaultHeight,
+        flex: mode === 'fullscreen' ? 1 : undefined,
+        display: 'flex',
+        flexDirection: mode === 'fullscreen' ? 'column' : 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        marginBottom: theme.__hd__.video.defaultSpace,
+    };
+});
+const StyledActionButtons = styled(Box)(({ theme, mode }) => {
+    return {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        position: mode === 'fullscreen' ? 'absolute' : 'relative',
+        top: mode === 'fullscreen' ? 0 : undefined,
+        left: mode === 'fullscreen' ? -theme.__hd__.video.defaultSpace : undefined,
+        right: mode === 'fullscreen' ? -theme.__hd__.video.defaultSpace : undefined,
+        bottom: mode === 'fullscreen' ? 0 : undefined,
+        justifyContent: 'space-evenly',
+    };
+});
+const StyledSeekBarWrapper = styled(Pressable)(({ theme, mode }) => {
+    return {
+        flex: mode === 'fullscreen' ? undefined : 1,
+        width: theme.__hd__.video.defaultWidth,
+        height: mode === 'fullscreen' ? theme.__hd__.video.defaultHeight : 'auto',
+    };
+});
+const StyledSeekBar = styled(Box)(({ theme }) => {
+    return {
+        marginVertical: 12,
+        backgroundColor: theme.colors.grey400,
+        borderRadius: 999,
+    };
+});
+const StyledTextContainer = styled(View)(({ theme, mode }) => {
+    return {
+        display: 'flex',
+        flexDirection: 'row',
+        marginHorizontal: 2,
+        marginBottom: mode === 'fullscreen' ? 40 : undefined,
+        width: mode === 'fullscreen' ? theme.__hd__.video.defaultWidth : undefined,
+    };
+});
+export { StyledControlContainer, StyledControlWrapper, StyledActionButtons, StyledSeekBarWrapper, StyledSeekBar, StyledTextContainer, };

package/lib/components/Video/StyledVideoDetail.d.ts

@@ -0,0 +1,16 @@
+declare const StyledVideoContainer: import("@emotion/native").StyledComponent<import("..").BoxProps & {
+    ref?: import("react").ForwardedRef<import("react-native").View>;
+} & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    mode: "fullscreen" | "standard";
+}, {}, {}>;
+declare const StyledVideoOverlay: import("@emotion/native").StyledComponent<import("..").BoxProps & {
+    ref?: import("react").ForwardedRef<import("react-native").View>;
+} & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+export { StyledVideoContainer, StyledVideoOverlay };
+//# sourceMappingURL=StyledVideoDetail.d.ts.map

package/lib/components/Video/StyledVideoDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledVideoDetail.d.ts","sourceRoot":"","sources":["../../../src/components/Video/StyledVideoDetail.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,oBAAoB;;;;SA2BguK,MAAO,WAAW;;UA1BpwK,YAAY,GAAG,UAAU;UAQ/B,CAAC;AAEH,QAAA,MAAM,kBAAkB;;;;SAgBkuK,MAAO,WAAW;UAJ1wK,CAAC;AAGH,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/components/Video/StyledVideoDetail.js

@@ -0,0 +1,23 @@
+import styled from '@emotion/native';
+import { Box } from '../Box';
+const StyledVideoContainer = styled(Box)(({ theme, mode }) => {
+    return {
+        flex: 1,
+        backgroundColor: theme.__hd__.video.videoDetailBackgroundColor[mode],
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+});
+const StyledVideoOverlay = styled(Box)(() => {
+    return {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'black',
+        opacity: 0.4,
+        display: 'flex',
+    };
+});
+export { StyledVideoContainer, StyledVideoOverlay };

package/lib/components/Video/VideoControlManager.d.ts

@@ -0,0 +1,10 @@
+import type { PlaySwitchProps } from '../PlaySwitch/types';
+interface VideoControlManagerProps extends PlaySwitchProps {
+    onSeek: (position: number) => void;
+    currentPosition?: number;
+    duration?: number;
+    mode: 'fullscreen' | 'standard';
+}
+declare const VideoControlManager: ({ onSeek, currentPosition, duration, mode, status, onChange, }: VideoControlManagerProps) => import("react/jsx-runtime").JSX.Element;
+export default VideoControlManager;
+//# sourceMappingURL=VideoControlManager.d.ts.map

package/lib/components/Video/VideoControlManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoControlManager.d.ts","sourceRoot":"","sources":["../../../src/components/Video/VideoControlManager.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAY3D,UAAU,wBAAyB,SAAQ,eAAe;IACxD,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;CACjC;AAED,QAAA,MAAM,mBAAmB,mEAOtB,wBAAwB,4CAkJ1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/Video/VideoControlManager.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTheme } from '@emotion/react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { PlaySwitch } from '../PlaySwitch';
+import { Text } from '../Text';
+import { Touchable } from '../Touchable';
+import { StyledActionButtons, StyledControlContainer, StyledControlWrapper, StyledSeekBarWrapper, StyledTextContainer, } from './StyledVideoControlManager';
+const VideoControlManager = ({ onSeek, currentPosition, duration, mode, status, onChange, }) => {
+    const theme = useTheme();
+    const themeVideo = theme.__hd__.video;
+    const [position, setPosition] = useState(0);
+    const pressableRef = useRef(null);
+    const [width, setWidth] = useState(0);
+    const innerSeekWidth = useSharedValue(position);
+    useEffect(() => {
+        if (currentPosition !== undefined &&
+            duration !== undefined &&
+            duration > 0) {
+            const newPosition = width * currentPosition / duration;
+            setPosition(newPosition);
+            innerSeekWidth.value = withTiming(newPosition, {
+                duration: 200,
+                easing: Easing.out(Easing.poly(8)),
+            });
+        }
+    }, [currentPosition, duration, innerSeekWidth, width]);
+    const onPressSeekBar = useCallback((event) => {
+        if (width === 0) {
+            return;
+        }
+        const touchX = event.nativeEvent.locationX;
+        if (duration !== undefined && duration > 0) {
+            onSeek(touchX / width * duration);
+        }
+    }, [width, duration, onSeek]);
+    const onForward = useCallback(() => {
+        if (duration !== undefined && duration > 0) {
+            onSeek(Math.min(currentPosition ? currentPosition + 5 : duration, duration));
+        }
+    }, [currentPosition, duration, onSeek]);
+    const onBackward = useCallback(() => {
+        if (duration !== undefined && duration > 0) {
+            onSeek(Math.max(currentPosition ? currentPosition - 5 : duration, 0));
+        }
+    }, [currentPosition, duration, onSeek]);
+    const onLayout = useCallback((event) => {
+        const { width: newWidth } = event.nativeEvent.layout;
+        setWidth(newWidth);
+    }, []);
+    const innerSeekAnimatedStyle = useAnimatedStyle(() => ({
+        width: innerSeekWidth.value,
+    }));
+    const parseTime = (time) => {
+        return time ?
+            `${Math.floor(time / 60)}:${('0' + Math.floor(time % 60)).slice(-2)}`
+            : '0:00';
+    };
+    return (_jsx(StyledControlContainer, { mode: mode, children: _jsxs(StyledControlWrapper, { mode: mode, children: [_jsxs(StyledActionButtons, { mode: mode, children: [mode === 'fullscreen' &&
+                            _jsx(Touchable, { onPress: onBackward, children: _jsx(Icon, { icon: "arrow-left-bold", color: themeVideo.actionColor[mode], size: themeVideo.actionButtonsSize[mode] }) }), _jsx(PlaySwitch, { marginHorizontal: "xxsmall", size: themeVideo.actionButtonsSize[mode], color: themeVideo.actionColor[mode], onChange: onChange, status: status }), mode === 'fullscreen' &&
+                            _jsx(Touchable, { onPress: onForward, children: _jsx(Icon, { icon: "arrow-right-bold", color: themeVideo.actionColor[mode], size: themeVideo.actionButtonsSize[mode] }) })] }), _jsx(StyledSeekBarWrapper, { ref: pressableRef, onPress: onPressSeekBar, onLayout: onLayout, mode: mode, children: _jsx(Box, { marginVertical: "smallMedium", backgroundColor: "grey400", borderRadius: "rounded", children: _jsx(Animated.View, { style: [innerSeekAnimatedStyle], children: _jsx(Box, { height: "100%", width: "100%", backgroundColor: themeVideo.actionColor[mode], borderRadius: "rounded" }) }) }) }), _jsxs(StyledTextContainer, { mode: mode, children: [_jsx(Text, { color: "grey700", fontSize: "xlarge", fontWeight: "medium", children: parseTime(currentPosition) }), mode !== 'fullscreen' ||
+                            _jsxs(_Fragment, { children: [_jsx(Box, { flex: 1 }), _jsx(Text, { color: "grey700", fontSize: "xlarge", fontWeight: "medium", children: `-${parseTime((duration ?? 0) - (currentPosition ?? 0))}` })] })] })] }) }));
+};
+export default VideoControlManager;

package/lib/components/Video/VideoDetail.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { VideoChatProps } from '../../components/Chat/type';
+import type { VideoRef } from '../../components/Video';
+type VideoDetailProps = VideoChatProps & {
+    onBack: () => void;
+    initialPosition?: number;
+    videoRef: React.RefObject<VideoRef>;
+};
+declare const VideoDetail: React.FC<VideoDetailProps>;
+export default VideoDetail;
+//# sourceMappingURL=VideoDetail.d.ts.map

package/lib/components/Video/VideoDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoDetail.d.ts","sourceRoot":"","sources":["../../../src/components/Video/VideoDetail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAOvD,KAAK,gBAAgB,GAAG,cAAc,GAAG;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;CACrC,CAAC;AAmBF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8K3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Video/VideoDetail.js

@@ -0,0 +1,102 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/native';
+import { useTheme } from '@emotion/react';
+import React, { useState } from 'react';
+import { Pressable, useWindowDimensions } from 'react-native';
+import Orientation from 'react-native-orientation-locker';
+import { Base, Box, Icon, Touchable } from '../../components';
+import { calculateCanvasSize } from '../../components/Image/utils';
+import { Video } from '../../components/Video';
+import { StyledVideoContainer, StyledVideoOverlay } from './StyledVideoDetail';
+import VideoControlManager from './VideoControlManager';
+const StyledVideo = styled(Video)(({ theme, mode, fullscreenSize, canvasBox }) => {
+    return {
+        width: mode === 'fullscreen' ? fullscreenSize.width : canvasBox.width,
+        height: mode === 'fullscreen' ? fullscreenSize.height : canvasBox.height ?? -theme.spaces.xxlarge,
+    };
+});
+const VideoDetail = ({ source, width, height, videoRef, initialPosition, onBack, }) => {
+    const theme = useTheme();
+    const themeVideo = theme.__hd__.video;
+    const [boxWidth, setBoxWidth] = useState(0);
+    const [boxHeight, setBoxHeight] = useState(0);
+    const [mode, setMode] = useState('standard');
+    const [play, setPlay] = useState(true);
+    const [seeking, setSeeking] = useState(false);
+    const [currentPosition, setCurrentPosition] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [showControl, setShowControl] = useState(true);
+    const [canvasBox, setCanvasBox] = useState({
+        width: undefined,
+        height: undefined,
+    });
+    const windowDimension = useWindowDimensions();
+    if (!source) {
+        return _jsx(_Fragment, {});
+    }
+    const fullscreenSize = calculateCanvasSize(width, height, windowDimension.width, 1, windowDimension.width / windowDimension.height);
+    const onLayout = (event) => {
+        const { width: sWidth, height: sHeight } = event.nativeEvent.layout;
+        if (width !== boxWidth || height !== boxHeight) {
+            setBoxWidth(sWidth);
+            setBoxHeight(sHeight);
+            setCanvasBox(calculateCanvasSize(width, height, sWidth, 1, (sHeight > 0) ? sWidth / sHeight : undefined));
+        }
+    };
+    const handlePlaySwitchStatus = () => {
+        if (play) {
+            pauseAllStates();
+            return;
+        }
+        videoRef.current?.resume();
+        setPlay(true);
+        setTimeout(() => setShowControl(false), 2000);
+    };
+    const pauseAllStates = () => {
+        videoRef.current?.pause();
+        setPlay(false);
+        setShowControl(true);
+    };
+    const handleSeek = (position) => {
+        setSeeking(true);
+        setCurrentPosition(position);
+        videoRef.current?.seek(position);
+    };
+    const handleProgress = (position) => {
+        if (seeking) {
+            setSeeking(false);
+            return;
+        }
+        setCurrentPosition(position);
+    };
+    const handleControls = () => {
+        if (showControl) {
+            setShowControl(false);
+        }
+        else {
+            setShowControl(true);
+        }
+    };
+    const handleInit = (e) => {
+        setDuration(e.duration);
+    };
+    const changeToFullscreen = () => {
+        if (mode === 'standard') {
+            setMode('fullscreen');
+            setShowControl(true);
+            if (width && height && width > height) {
+                Orientation.lockToLandscape();
+            }
+        }
+    };
+    const exitFullscreen = () => {
+        if (mode === 'fullscreen') {
+            setMode('standard');
+            Orientation.lockToPortrait();
+        }
+    };
+    return (_jsxs(Base, { flex: 1, padding: themeVideo.videoDetailBasePadding[mode], children: [_jsxs(StyledVideoContainer, { mode: mode, onLayout: mode === 'fullscreen' ? undefined : onLayout, children: [_jsx(Pressable, { onPress: mode === 'fullscreen' ? handleControls : changeToFullscreen, children: _jsx(Box, { borderRadius: themeVideo.videoDetailBorderRadius[mode], width: mode === 'fullscreen' ? fullscreenSize.width : canvasBox.width, height: mode === 'fullscreen' ? fullscreenSize.height : canvasBox.height ?? -theme.spaces.xxlarge, overflow: "hidden", children: _jsx(StyledVideo, { ref: videoRef, source: source, initialPosition: initialPosition, initialPlay: true, mode: mode, fullscreenSize: fullscreenSize, canvasBox: canvasBox, theme: theme, tracking: handleProgress, onInit: handleInit }) }) }), (showControl && mode === 'fullscreen') &&
+                        _jsx(StyledVideoOverlay, { children: _jsx(Touchable, { onPress: handleControls, flex: 1 }) })] }), (showControl || mode !== 'fullscreen') &&
+                _jsx(VideoControlManager, { status: play ? 'pause' : 'play', onChange: handlePlaySwitchStatus, onSeek: handleSeek, currentPosition: currentPosition, duration: duration, mode: mode }), _jsx(Box, { position: "absolute", top: 0, left: 0, padding: "large", children: _jsx(Touchable, { onPress: mode === 'fullscreen' ? exitFullscreen : onBack, children: _jsx(Icon, { art: "arrow-left-light", size: themeVideo.defaultActionIconSize, color: themeVideo.videoDetailActionButtonColor[mode] }) }) })] }));
+};
+export default VideoDetail;

package/lib/components/Video/index.d.ts

@@ -0,0 +1,25 @@
+import { type ForwardedRef } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { OnLoadData, ReactVideoSourceProperties, VideoRef as RNVideoRef } from 'react-native-video';
+export interface VideoProps {
+    source: Readonly<Omit<ReactVideoSourceProperties, 'uri'> & {
+        uri?: string | NodeRequire | undefined;
+    }> | undefined;
+    initialPosition?: number;
+    initialPlay?: boolean;
+    style?: StyleProp<ViewStyle>;
+    afterEnd?: () => void;
+    tracking?: (currentTime: number) => void;
+    onInit?: (e: OnLoadData) => void;
+}
+export interface VideoRef extends Pick<RNVideoRef, 'seek' | 'pause' | 'resume'> {
+    play: boolean;
+    currentTime: number;
+    duration: number;
+}
+declare const PlainVideo: ({ source, initialPosition, initialPlay, style, afterEnd, tracking, onInit, }: VideoProps, ref: React.Ref<VideoRef>) => import("react/jsx-runtime").JSX.Element;
+export declare const Video: (props: VideoProps & {
+    ref?: ForwardedRef<VideoRef>;
+}) => ReturnType<typeof PlainVideo>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,YAAY,EAMlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,UAAU,EAEV,0BAA0B,EAC1B,QAAQ,IAAI,UAAU,EACvB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,0BAA0B,EAAE,KAAK,CAAC,GAAG;QACzD,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;KACxC,CAAC,GAAG,SAAS,CAAC;IAEf,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC7E,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,UAAU,iFAQb,UAAU,OAAO,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,4CAiEtC,CAAC;AAEF,eAAO,MAAM,KAAK,EAA6B,CAC7C,KAAK,EAAE,UAAU,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAAE,KACjD,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}