@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/social/features/chat/features/shared/components/FailedToShow/FailedToShow.tsx

@@ -0,0 +1,44 @@
+// FailedToShow — ported from AmityUiKitWeb features/shared/components/FailedToShow.
+// A centered icon + title + description shown when content can't be displayed.
+// Web `className` (CSS-module override) → RN `style` prop, applied after the base
+// container style. `flex: 1 1 auto` → flex:1 fill + center.
+
+// 1. React / RN imports
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+// 3. Types
+type FailedToShowProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+// 4. Named function component
+export function FailedToShow({ style }: FailedToShowProps) {
+  const { styles } = useStyles();
+  const title = useString('amity_social_label_livestream_deleted_page_title');
+  const description = useString(
+    'amity_social_button_livestream_unavailable_desc'
+  );
+
+  return (
+    <View style={[styles.failedToShow, style]}>
+      <AmityIcon
+        name="newspaper-question-l"
+        size={64}
+        tokenColor={AmityColorToken.IconEmptyStateIconDefault}
+      />
+      <Typography variant="titleBold" style={styles.title}>
+        {title}
+      </Typography>
+      <Typography variant="body" style={styles.desc}>
+        {description}
+      </Typography>
+    </View>
+  );
+}

package/src/social/features/chat/features/shared/components/FailedToShow/index.ts

@@ -0,0 +1 @@
+export { FailedToShow } from './FailedToShow';

package/src/social/features/chat/features/shared/components/FailedToShow/styles.ts

@@ -0,0 +1,32 @@
+// Styles for FailedToShow — ported from FailedToShow.module.css.
+// Geometry: gap 0.5rem→8, padding 1.5rem→24, icon 4rem→64. `flex: 1 1 auto`
+// fill → flex:1 + center. Colours via tokens.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    failedToShow: {
+      flex: 1,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+      padding: 24,
+    },
+    title: {
+      textAlign: 'center',
+      color: token(AmityColorToken.TextEmptyStateTitleDefault),
+    },
+    desc: {
+      textAlign: 'center',
+      color: token(AmityColorToken.TextEmptyStateDescriptionDefault),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/shared/components/ImageViewer/ImageViewer.tsx

@@ -0,0 +1,130 @@
+// ImageViewer — ported from AmityUiKitWeb chat/features/shared/components/ImageViewer.
+// Web wrapped MediaViewer around an <img>; RN uses react-native-image-viewing, which
+// provides its own pan/zoom full-screen viewer. We layer the same chrome via its
+// HeaderComponent (close) and FooterComponent (delete/save) props so the surface
+// matches VideoPlayer/MediaViewer.
+
+// 1. React / RN imports
+import { Pressable, View } from 'react-native';
+
+// 2. Third-party imports
+import ImageView from 'react-native-image-viewing';
+
+// 3. Internal imports
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import Toast from '../../../../../../components/Toast';
+import { useStyles } from './styles';
+
+// 4. Types
+type ImageViewerProps = {
+  src: string;
+  onClose: () => void;
+  isOwn?: boolean;
+  onDelete?: () => void;
+  onSave?: () => void;
+};
+
+// 5. Named function component
+export function ImageViewer({
+  src,
+  onClose,
+  isOwn = false,
+  onDelete,
+  onSave,
+}: ImageViewerProps) {
+  const { styles } = useStyles();
+  const deleteLabel = useString('amity_chat_option_delete');
+  const saveLabel = useString('amity_chat_action_save');
+
+  const canDelete = isOwn && !!onDelete;
+  const canSave = !!onSave;
+
+  return (
+    <ImageView
+      images={[{ uri: src }]}
+      imageIndex={0}
+      visible
+      onRequestClose={onClose}
+      // Web MediaViewer overlay is solid black (.mediaViewer__overlay background);
+      // rgb() (no hex) keeps the repo's no-hex gate happy.
+      backgroundColor="rgb(0, 0, 0)"
+      HeaderComponent={() => (
+        <View style={styles.topBar}>
+          <Pressable
+            style={styles.closeButton}
+            onPress={onClose}
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+          >
+            <AmityIcon
+              name="cross-r"
+              size={24}
+              tokenColor={
+                AmityColorToken.IconIconButtonTransparentPrimaryDefault
+              }
+            />
+          </Pressable>
+        </View>
+      )}
+      // Always rendered: besides the action bar it hosts the chat toast. Save
+      // success/failure toasts fire while this Modal is open, and the global
+      // <Toast /> is mounted outside it (RN renders it beneath the native Modal
+      // layer), so a second instance lives here — it reads the same redux toast
+      // state, so only one pill is ever visible. It sits in the library's footer
+      // container, which slides away with the bars on tap-to-toggle; that is
+      // intended (bars hidden = "show me the image unobstructed"). Not a sibling
+      // <Modal>: stacked RN modals are unreliable on iOS.
+      FooterComponent={() => (
+        <>
+          <View pointerEvents="box-none" style={styles.toastLayer}>
+            <Toast />
+          </View>
+
+          {canDelete || canSave ? (
+            <View style={styles.bottomBar}>
+              {canDelete ? (
+                <Pressable
+                  style={styles.bottomIconButton}
+                  onPress={onDelete}
+                  accessibilityRole="button"
+                  accessibilityLabel={deleteLabel}
+                >
+                  <AmityIcon
+                    name="trash-r"
+                    size={24}
+                    tokenColor={
+                      AmityColorToken.IconIconButtonTransparentPrimaryDefault
+                    }
+                  />
+                </Pressable>
+              ) : (
+                <View />
+              )}
+
+              {canSave ? (
+                <Pressable
+                  style={styles.bottomIconButton}
+                  onPress={onSave}
+                  accessibilityRole="button"
+                  accessibilityLabel={saveLabel}
+                >
+                  <AmityIcon
+                    name="arrow-down-to-bracket-r"
+                    size={24}
+                    tokenColor={
+                      AmityColorToken.IconIconButtonTransparentPrimaryDefault
+                    }
+                  />
+                </Pressable>
+              ) : (
+                <View />
+              )}
+            </View>
+          ) : null}
+        </>
+      )}
+    />
+  );
+}

package/src/social/features/chat/features/shared/components/ImageViewer/index.ts

@@ -0,0 +1 @@
+export { ImageViewer } from './ImageViewer';

package/src/social/features/chat/features/shared/components/ImageViewer/styles.ts

@@ -0,0 +1,69 @@
+// Styles for ImageViewer — the header/footer chrome layered over
+// react-native-image-viewing. Mirrors MediaViewer's bars (padding 1rem→16, buttons
+// 32/40, radius 9999). SafeArea top/bottom padding keeps the bars clear of the notch
+// and home indicator since the viewer renders edge-to-edge.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    topBar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      paddingHorizontal: 16,
+      paddingTop: 44,
+      paddingBottom: 16,
+      // Web MediaViewer bars: rgb(0 0 0 / 50%) (.mediaViewer__topBar/__bottomBar).
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    bottomBar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      paddingBottom: 32,
+      // Web MediaViewer bars: rgb(0 0 0 / 50%) (.mediaViewer__topBar/__bottomBar).
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    // Host for the chat toast mounted inside react-native-image-viewing's Modal
+    // (the global <Toast /> is outside it and renders beneath the native Modal
+    // layer). Anchored above the bottom bar (40 icon + 16 top + 32 bottom = 88).
+    toastLayer: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 88,
+      zIndex: 4,
+    },
+    closeButton: {
+      width: 32,
+      height: 32,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 4,
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
+      ),
+    },
+    bottomIconButton: {
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 8,
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
+      ),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/shared/components/MediaViewer/MediaViewer.tsx

@@ -0,0 +1,130 @@
+// MediaViewer — ported from AmityUiKitWeb chat/features/shared/components/MediaViewer.
+// Full-screen media shell: a dark backdrop, a top bar with a close button, a centered
+// stage for arbitrary media (children), and a bottom bar with optional delete (own
+// message only) + save actions. Web used react-aria ModalOverlay/Modal/Dialog; RN uses
+// the native Modal. Used by VideoPlayer; images use react-native-image-viewing instead.
+
+// 1. React / RN imports
+import type { ReactNode } from 'react';
+import { Modal, Pressable, View } from 'react-native';
+
+// 2. Internal imports
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import Toast from '../../../../../../components/Toast';
+import { useStyles } from './styles';
+
+// 3. Types
+type MediaViewerProps = {
+  accessibilityLabel: string;
+  onClose: () => void;
+  children: ReactNode;
+  isOwn?: boolean;
+  onDelete?: () => void;
+  deleteAccessibilityLabel?: string;
+  onSave?: () => void;
+  saveAccessibilityLabel?: string;
+};
+
+// 4. Named function component
+export function MediaViewer({
+  accessibilityLabel,
+  onClose,
+  children,
+  isOwn = false,
+  onDelete,
+  deleteAccessibilityLabel,
+  onSave,
+  saveAccessibilityLabel,
+}: MediaViewerProps) {
+  const { styles } = useStyles();
+  const deleteLabel = useString('amity_chat_option_delete');
+  const saveLabel = useString('amity_chat_action_save');
+
+  const canDelete = isOwn && !!onDelete;
+  const canSave = !!onSave;
+
+  return (
+    <Modal
+      visible
+      transparent={false}
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View
+        style={styles.overlay}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityViewIsModal
+      >
+        <View style={styles.stage}>{children}</View>
+
+        <View style={styles.topBar}>
+          <Pressable
+            style={styles.closeButton}
+            onPress={onClose}
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+          >
+            <AmityIcon
+              name="cross-r"
+              size={24}
+              tokenColor={
+                AmityColorToken.IconIconButtonTransparentPrimaryDefault
+              }
+            />
+          </Pressable>
+        </View>
+
+        <View style={styles.bottomBar}>
+          {canDelete ? (
+            <Pressable
+              style={styles.bottomIconButton}
+              onPress={onDelete}
+              accessibilityRole="button"
+              accessibilityLabel={deleteAccessibilityLabel ?? deleteLabel}
+            >
+              <AmityIcon
+                name="trash-r"
+                size={24}
+                tokenColor={
+                  AmityColorToken.IconIconButtonTransparentPrimaryDefault
+                }
+              />
+            </Pressable>
+          ) : (
+            <View />
+          )}
+
+          {canSave ? (
+            <Pressable
+              style={styles.bottomIconButton}
+              onPress={onSave}
+              accessibilityRole="button"
+              accessibilityLabel={saveAccessibilityLabel ?? saveLabel}
+            >
+              <AmityIcon
+                name="arrow-down-to-bracket-r"
+                size={24}
+                tokenColor={
+                  AmityColorToken.IconIconButtonTransparentPrimaryDefault
+                }
+              />
+            </Pressable>
+          ) : (
+            <View />
+          )}
+        </View>
+
+        {/* Save success/failure toasts fire while this Modal is open. The global
+            <Toast /> is mounted outside it, so RN would render it beneath the
+            native Modal layer; mount one inside too — it reads the same redux
+            toast state, so only one pill is ever visible. */}
+        <View pointerEvents="box-none" style={styles.toastLayer}>
+          <Toast />
+        </View>
+      </View>
+    </Modal>
+  );
+}

package/src/social/features/chat/features/shared/components/MediaViewer/index.ts

@@ -0,0 +1 @@
+export { MediaViewer } from './MediaViewer';

package/src/social/features/chat/features/shared/components/MediaViewer/styles.ts

@@ -0,0 +1,93 @@
+// Styles for MediaViewer — ported from AmityUiKitWeb MediaViewer.module.css.
+// Geometry: bars padding 1rem→16; close button 2rem→32; bottom icon button 2.5rem→40;
+// icons 1.5rem→24; radius 9999→9999. Backdrop and bars follow web's literals rather
+// than tokens (web hardcodes them too, and the token set ships no opaque black):
+// overlay rgb(0,0,0), bars rgba(0,0,0,0.5). rgb()/rgba() not hex, per the no-hex gate.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    overlay: {
+      flex: 1,
+      // Web .mediaViewer__overlay is solid black, so no chat content shows
+      // through. This used to be SurfaceBadgeSemanticBadgeGeneralDuration, an
+      // unrelated badge token at 60% black that left the backdrop translucent.
+      backgroundColor: 'rgb(0, 0, 0)',
+    },
+    stage: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+    },
+    topBar: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      padding: 16,
+      // Web .mediaViewer__topBar/__bottomBar: rgb(0 0 0 / 50%). The previous
+      // badge token resolved to the same 50%, but expressing it as a literal
+      // matches ImageViewer (3b2e546c) and drops the unrelated token.
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      zIndex: 3,
+    },
+    bottomBar: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: 16,
+      // Web .mediaViewer__topBar/__bottomBar: rgb(0 0 0 / 50%). The previous
+      // badge token resolved to the same 50%, but expressing it as a literal
+      // matches ImageViewer (3b2e546c) and drops the unrelated token.
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      zIndex: 3,
+    },
+    // Host for the chat toast mounted inside this Modal (the global <Toast /> is
+    // outside it and would render beneath the native Modal layer). Sits above the
+    // bottom bar (40 icon + 16*2 padding = 72) so save success/failure stays readable.
+    toastLayer: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 72,
+      zIndex: 4,
+    },
+    closeButton: {
+      width: 32,
+      height: 32,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 4,
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
+      ),
+    },
+    bottomIconButton: {
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 8,
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
+      ),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/shared/components/MessageFullTextScreen/MessageFullTextScreen.tsx

@@ -0,0 +1,100 @@
+// MessageFullTextScreen — ported from AmityUiKitWeb features/shared/components/
+// MessageFullTextScreen. The full-screen "see more" long-text view. Web renders a
+// fixed overlay dialog + `linkify-react`; RN uses a full-screen Modal (Android
+// back button === web Escape via onRequestClose) and a small local linkifier that
+// renders URL runs as tappable Text opening the system browser. Header carries a
+// ghost back button, a centered title, and a balancing spacer.
+
+// 1. React / RN imports
+import { Fragment } from 'react';
+import { Linking, Modal, Pressable, ScrollView, View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useStyles } from './styles';
+
+// 3. Types
+type MessageFullTextScreenProps = {
+  visible: boolean;
+  text: string;
+  title?: string;
+  onClose: () => void;
+};
+
+// Matches http(s) URLs and bare www.* runs; kept local so the component is
+// self-contained (no dependency on the legacy PreviewLink util module). The split
+// regex is global (capturing) so URL runs survive `String.split`; a separate
+// non-global regex is used for per-part testing to avoid stateful `lastIndex`.
+const URL_SPLIT_REGEX = /((?:https?:\/\/|www\.)[^\s]+)/gi;
+const URL_TEST_REGEX = /^(?:https?:\/\/|www\.)[^\s]+$/i;
+
+function openLink(raw: string) {
+  const href = raw.startsWith('http') ? raw : `https://${raw}`;
+  Linking.openURL(href).catch(() => undefined);
+}
+
+// 4. Named function component
+export function MessageFullTextScreen({
+  visible,
+  text,
+  title,
+  onClose,
+}: MessageFullTextScreenProps) {
+  const { styles } = useStyles();
+
+  const parts = text.split(URL_SPLIT_REGEX);
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      onRequestClose={onClose}
+      transparent={false}
+    >
+      <View style={styles.screen}>
+        <View style={styles.header}>
+          <Pressable
+            style={styles.backButton}
+            onPress={onClose}
+            accessibilityRole="button"
+            accessibilityLabel="Back"
+          >
+            <AmityIcon
+              name="chevron-left"
+              size={24}
+              tokenColor={AmityColorToken.IconIconButtonGhostSecondaryDefault}
+            />
+          </Pressable>
+          <Typography
+            variant="titleBold"
+            style={styles.title}
+            numberOfLines={1}
+          >
+            {title}
+          </Typography>
+          <View style={styles.headerSpacer} />
+        </View>
+        <ScrollView style={styles.body}>
+          <Typography variant="body" style={styles.text} selectable>
+            {parts.map((part, index) =>
+              URL_TEST_REGEX.test(part) ? (
+                <Typography
+                  key={`${part}-${index}`}
+                  variant="body"
+                  style={[styles.text, styles.link]}
+                  onPress={() => openLink(part)}
+                >
+                  {part}
+                </Typography>
+              ) : (
+                <Fragment key={`t-${index}`}>{part}</Fragment>
+              )
+            )}
+          </Typography>
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+}

package/src/social/features/chat/features/shared/components/MessageFullTextScreen/index.ts

@@ -0,0 +1 @@
+export { MessageFullTextScreen } from './MessageFullTextScreen';

package/src/social/features/chat/features/shared/components/MessageFullTextScreen/styles.ts

@@ -0,0 +1,59 @@
+// Styles for MessageFullTextScreen — ported from MessageFullTextScreen.module.css.
+// Web is a fixed full-viewport overlay; RN uses a full-screen Modal. Geometry:
+// header padding 1rem→16, gap 0.5rem→8; back button / spacer 2rem→32; body
+// padding 1rem→16. Body text is raw CSS in web (17px/24px) — replicated via the
+// Typography `style` override. Web `Surface/Sheets/Background/Default` maps to the
+// RN token `Surface/Sheets/Background/General`.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    screen: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      padding: 16,
+      backgroundColor: token(AmityColorToken.SurfaceSheetsBackgroundGeneral),
+    },
+    backButton: {
+      width: 32,
+      height: 32,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    title: {
+      flex: 1,
+      textAlign: 'center',
+      color: token(AmityColorToken.TextSheetsHeaderTitleDefault),
+    },
+    headerSpacer: {
+      width: 32,
+      height: 32,
+    },
+    body: {
+      flex: 1,
+      padding: 16,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    text: {
+      fontSize: 17,
+      lineHeight: 24,
+      color: token(AmityColorToken.TextChatBubbleInboundMessagesDefault),
+    },
+    link: {
+      color: token(AmityColorToken.TextChatBubbleInboundLinkDefault),
+      textDecorationLine: 'underline',
+    },
+  });
+
+  return { styles, token };
+};