@ethora/chat-component-rn 26.10.9 → 26.10.11

package/src/components/Booking/ScheduledCallPreJoin.tsx

@@ -0,0 +1,230 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../roomStore';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useT, useUiLocale } from '../../i18n/useT';
+import {
+  scheduledCallUi,
+  useScheduledCallUi,
+  type PreJoinState,
+} from '../../booking/scheduledCallStore';
+import {
+  JOIN_WINDOW_BEFORE_MS,
+  chatNameOfRoom,
+  type ScheduledCallCardData,
+} from '../../booking/scheduledCall';
+import {
+  canManageScheduledCall,
+  confirmAndCancelScheduledCall,
+  joinScheduledCall,
+} from '../../booking/scheduledCallActions';
+import { formatClock } from '../../booking/scheduleForm';
+import {
+  BookingSheet,
+  CalendarButtons,
+  PrimaryButton,
+  StatePill,
+  describeWhen,
+  stateLabelKey,
+  useBookingStyles,
+  useScheduledCallState,
+} from './bookingShared';
+
+const ERROR_KEYS = {
+  'not-a-member': 'booking.error.notMember',
+  'not-found': 'booking.error.notFound',
+  cancelled: 'booking.error.cancelled',
+  network: 'booking.error.failed',
+} as const;
+
+const Ready: React.FC<{
+  detail: Extract<PreJoinState, { phase: 'ready' }>['detail'];
+}> = ({ detail }) => {
+  const t = useT();
+  const locale = useUiLocale();
+  const { theme } = useBookingStyles();
+  const { user, config } = useChatSettingState();
+  const scheduledCalls = config?.scheduledCalls;
+  const call = detail.scheduledCall;
+  const roomJid = detail.chat?.jid || call.chatName;
+  const roomRole = useSelector(
+    (state: RootState) =>
+      Object.values(state.rooms.rooms).find(
+        (room) => chatNameOfRoom(room?.jid || '') === chatNameOfRoom(roomJid)
+      )?.role
+  );
+
+  const card: ScheduledCallCardData = {
+    slug: call.slug,
+    title: call.title,
+    startAt: call.startAt,
+    startMs: Date.parse(call.startAt),
+    durationMinutes: call.durationMinutes,
+    kind: call.kind === 'audio' ? 'audio' : 'video',
+    status: call.status === 'cancelled' ? 'cancelled' : 'scheduled',
+    joinUrl: detail.links.join,
+    icsUrl: detail.links.ics || '',
+    googleUrl: detail.links.google || '',
+    outlookUrl: detail.links.outlook || '',
+    createdBy: call.createdBy || '',
+  };
+  const { state, now } = useScheduledCallState(card);
+  const [joining, setJoining] = useState(false);
+  const joinAllowed = scheduledCalls?.enabled !== false;
+
+  const canManage =
+    (state === 'upcoming' || state === 'joinable') &&
+    canManageScheduledCall({
+      createdBy: call.createdBy,
+      userId: user?._id,
+      roomRole,
+    });
+
+  return (
+    <>
+      <View style={styles.row}>
+        <Text
+          testID="prejoin-title"
+          style={[styles.callTitle, { color: theme.text }]}
+          numberOfLines={3}
+        >
+          {call.title || t('call.title')}
+        </Text>
+        <StatePill
+          label={t(stateLabelKey(state, card.startMs, now))}
+          tone={state === 'joinable' ? 'active' : 'neutral'}
+        />
+      </View>
+      <Text testID="prejoin-when" style={{ color: theme.textSecondary, fontSize: 14 }}>
+        {describeWhen(card, t, locale)}
+      </Text>
+      <Text style={{ color: theme.textSecondary, fontSize: 12 }}>
+        {card.kind === 'audio' ? t('call.audioCall') : t('call.videoCall')}
+      </Text>
+      {!!call.description && (
+        <Text style={{ color: theme.text, fontSize: 14 }}>{call.description}</Text>
+      )}
+
+      {joinAllowed && (
+        <PrimaryButton
+          testID="prejoin-join"
+          label={t('booking.action.join')}
+          disabled={state !== 'joinable'}
+          busy={joining}
+          onPress={() => {
+            setJoining(true);
+            joinScheduledCall(roomJid, card.kind)
+              .then((started) => {
+                if (started) {scheduledCallUi.closePreJoin();}
+              })
+              .finally(() => setJoining(false));
+          }}
+        />
+      )}
+      <Text style={{ color: theme.textMuted, fontSize: 12, textAlign: 'center' }}>
+        {state === 'upcoming'
+          ? t('booking.prejoin.joinFrom', {
+              time: formatClock(card.startMs - JOIN_WINDOW_BEFORE_MS, locale),
+            })
+          : t('booking.prejoin.hint')}
+      </Text>
+
+      {(state === 'upcoming' || state === 'joinable') && (
+        <CalendarButtons
+          t={t}
+          googleUrl={card.googleUrl}
+          outlookUrl={card.outlookUrl}
+          icsUrl={card.icsUrl}
+          testIDPrefix="prejoin"
+        />
+      )}
+
+      {canManage && (
+        <View style={styles.row}>
+          <View style={styles.half}>
+            <PrimaryButton
+              testID="prejoin-edit"
+              tone="plain"
+              label={t('booking.action.edit')}
+              onPress={() => {
+                scheduledCallUi.closePreJoin();
+                scheduledCallUi.openEdit(roomJid, detail);
+              }}
+            />
+          </View>
+          <View style={styles.half}>
+            <PrimaryButton
+              testID="prejoin-cancel"
+              tone="plain"
+              label={t('booking.action.cancelCall')}
+              onPress={() => {
+                void confirmAndCancelScheduledCall(call.slug).then((done) => {
+                  if (done) {scheduledCallUi.closePreJoin();}
+                });
+              }}
+            />
+          </View>
+        </View>
+      )}
+    </>
+  );
+};
+
+/**
+ * The pre-join screen of a call opened from a link or a reminder: what the
+ * call is, and a Join button. Nothing is started until Join is tapped.
+ */
+export const ScheduledCallPreJoin: React.FC = () => {
+  const { preJoin } = useScheduledCallUi();
+  const t = useT();
+  const { theme } = useBookingStyles();
+  // Hold the last content while the modal fades out.
+  const [shown, setShown] = useState<PreJoinState | null>(preJoin);
+  useEffect(() => {
+    if (preJoin) {setShown(preJoin);}
+  }, [preJoin]);
+  if (!shown) {return null;}
+
+  return (
+    <BookingSheet
+      visible={!!preJoin}
+      onClose={scheduledCallUi.closePreJoin}
+      title={t('booking.prejoin.title')}
+      testID="prejoin-sheet"
+    >
+      {shown.phase === 'loading' && (
+        <Text testID="prejoin-loading" style={{ color: theme.textSecondary }}>
+          {t('call.connecting')}
+        </Text>
+      )}
+      {shown.phase === 'error' && (
+        <>
+          {shown.title ? (
+            <Text style={{ color: theme.text, fontWeight: '600', fontSize: 16 }}>
+              {shown.title}
+            </Text>
+          ) : null}
+          <Text testID="prejoin-error" style={{ color: theme.danger, fontSize: 15 }}>
+            {t(ERROR_KEYS[shown.reason])}
+          </Text>
+          <PrimaryButton
+            testID="prejoin-close"
+            tone="plain"
+            label={t('booking.action.close')}
+            onPress={scheduledCallUi.closePreJoin}
+          />
+        </>
+      )}
+      {shown.phase === 'ready' && <Ready detail={shown.detail} />}
+    </BookingSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  callTitle: { flex: 1, fontSize: 18, fontWeight: '600' },
+  half: { flex: 1 },
+});
+
+export default ScheduledCallPreJoin;

package/src/components/Booking/bookingShared.tsx

@@ -0,0 +1,295 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import type { ChatTheme } from '../../theme/theme';
+import {
+  MAX_TIMER_MS,
+  getScheduledCallCardState,
+  nextScheduledCallTransition,
+  type ScheduledCallCardData,
+  type ScheduledCallCardState,
+} from '../../booking/scheduledCall';
+import { openBackendLink } from '../../booking/scheduledCallActions';
+import { formatClock, formatDay } from '../../booking/scheduleForm';
+
+type T = (key: string, vars?: Record<string, string | number>) => string;
+
+/**
+ * The card's state, re-evaluated when it changes on its own (the join
+ * window opens, the call ends) instead of on a poll.
+ */
+export const useScheduledCallState = (
+  card: Pick<
+    ScheduledCallCardData,
+    'startMs' | 'durationMinutes' | 'status'
+  >
+): { state: ScheduledCallCardState; now: number } => {
+  const [now, setNow] = useState(() => Date.now());
+  const { startMs, durationMinutes, status } = card;
+
+  useEffect(() => {
+    setNow(Date.now());
+  }, [startMs, durationMinutes, status]);
+
+  useEffect(() => {
+    const at = nextScheduledCallTransition(
+      { startMs, durationMinutes, status },
+      now
+    );
+    if (at === null) {return undefined;}
+    // A timer can fire a hair early; the +50 ms keeps the re-check past it.
+    const wait = Math.min(MAX_TIMER_MS, Math.max(1000, at - Date.now() + 50));
+    const timer = setTimeout(() => setNow(Date.now()), wait);
+    return () => clearTimeout(timer);
+  }, [startMs, durationMinutes, status, now]);
+
+  return { state: getScheduledCallCardState(card, now), now };
+};
+
+export const stateLabelKey = (
+  state: ScheduledCallCardState,
+  startMs: number,
+  now: number
+): string => {
+  switch (state) {
+    case 'cancelled':
+      return 'booking.state.cancelled';
+    case 'ended':
+      return 'booking.state.ended';
+    case 'joinable':
+      return now >= startMs
+        ? 'booking.state.inProgress'
+        : 'booking.state.startingSoon';
+    default:
+      return 'booking.state.upcoming';
+  }
+};
+
+export const describeWhen = (
+  card: Pick<ScheduledCallCardData, 'startMs' | 'durationMinutes'>,
+  t: T,
+  locale?: string
+): string =>
+  `${t('booking.card.starts', {
+    date: formatDay(card.startMs, locale),
+    time: formatClock(card.startMs, locale),
+  })} · ${t('booking.duration.minutes', { n: card.durationMinutes })}`;
+
+export const useBookingStyles = () => {
+  const theme = useTheme();
+  return useMemo(() => ({ theme, styles: createStyles(theme) }), [theme]);
+};
+
+export const StatePill: React.FC<{
+  label: string;
+  tone: 'neutral' | 'active' | 'danger';
+}> = ({ label, tone }) => {
+  const { theme, styles } = useBookingStyles();
+  const color =
+    tone === 'active'
+      ? theme.success
+      : tone === 'danger'
+        ? theme.danger
+        : theme.textSecondary;
+  return (
+    <View style={[styles.pill, { borderColor: color }]}>
+      <Text style={[styles.pillText, { color }]}>{label}</Text>
+    </View>
+  );
+};
+
+/** Add to Google / Outlook / .ics: the backend's links, opened as they are. */
+export const CalendarButtons: React.FC<{
+  t: T;
+  googleUrl?: string;
+  outlookUrl?: string;
+  icsUrl?: string;
+  testIDPrefix?: string;
+}> = ({ t, googleUrl, outlookUrl, icsUrl, testIDPrefix = 'booking' }) => {
+  const { theme, styles } = useBookingStyles();
+  const items: Array<[string, string, string | undefined]> = [
+    ['google', 'booking.calendar.google', googleUrl],
+    ['outlook', 'booking.calendar.outlook', outlookUrl],
+    ['ics', 'booking.calendar.ics', icsUrl],
+  ];
+  const available = items.filter(([, , url]) => !!url);
+  if (available.length === 0) {return null;}
+  return (
+    <View>
+      <Text style={styles.sectionLabel}>{t('booking.calendar.add')}</Text>
+      <View style={styles.calendarRow}>
+        {available.map(([id, labelKey, url]) => (
+          <TouchableOpacity
+            key={id}
+            testID={`${testIDPrefix}-calendar-${id}`}
+            accessibilityRole="link"
+            activeOpacity={0.7}
+            onPress={() => {
+              void openBackendLink(url);
+            }}
+            style={[styles.calendarButton, { borderColor: theme.border }]}
+          >
+            <Text style={[styles.calendarLabel, { color: theme.primary }]}>
+              {t(labelKey)}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+/** Bottom sheet shell shared by the editor and the pre-join sheet. */
+export const BookingSheet: React.FC<{
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  testID?: string;
+  children: React.ReactNode;
+}> = ({ visible, onClose, title, testID, children }) => {
+  const { styles } = useBookingStyles();
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <KeyboardAvoidingView
+        style={styles.backdrop}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <TouchableOpacity
+          testID={testID ? `${testID}-backdrop` : undefined}
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={onClose}
+        />
+        <View style={styles.sheet} testID={testID}>
+          <View style={styles.grabber} />
+          <Text style={styles.sheetTitle} accessibilityRole="header">
+            {title}
+          </Text>
+          <ScrollView
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.sheetBody}
+          >
+            {children}
+          </ScrollView>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+export const PrimaryButton: React.FC<{
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  busy?: boolean;
+  tone?: 'primary' | 'danger' | 'plain';
+  testID?: string;
+}> = ({ label, onPress, disabled, busy, tone = 'primary', testID }) => {
+  const { theme, styles } = useBookingStyles();
+  const background =
+    tone === 'primary'
+      ? theme.primary
+      : tone === 'danger'
+        ? theme.danger
+        : theme.surfaceSecondary;
+  const color = tone === 'plain' ? theme.text : theme.textOnPrimary;
+  return (
+    <TouchableOpacity
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!disabled }}
+      activeOpacity={0.8}
+      disabled={disabled || busy}
+      onPress={onPress}
+      style={[
+        styles.button,
+        { backgroundColor: background, opacity: disabled ? 0.45 : 1 },
+      ]}
+    >
+      {busy ? (
+        <ActivityIndicator color={color} />
+      ) : (
+        <Text style={[styles.buttonText, { color }]}>{label}</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export const createStyles = (theme: ChatTheme) =>
+  StyleSheet.create({
+    pill: {
+      borderWidth: 1,
+      borderRadius: 10,
+      paddingHorizontal: 8,
+      paddingVertical: 2,
+    },
+    pillText: { fontSize: 11, fontWeight: '600' },
+    sectionLabel: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: theme.textSecondary,
+      marginBottom: 6,
+    },
+    calendarRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+    calendarButton: {
+      borderWidth: 1,
+      borderRadius: 16,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    },
+    calendarLabel: { fontSize: 13, fontWeight: '500' },
+    backdrop: {
+      flex: 1,
+      backgroundColor: theme.overlay,
+      justifyContent: 'flex-end',
+    },
+    sheet: {
+      backgroundColor: theme.surface,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      paddingHorizontal: 20,
+      paddingTop: 8,
+      paddingBottom: 24,
+      maxHeight: '90%',
+    },
+    grabber: {
+      alignSelf: 'center',
+      width: 40,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: theme.divider,
+      marginBottom: 12,
+    },
+    sheetTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: theme.text,
+      marginBottom: 12,
+    },
+    sheetBody: { gap: 14, paddingBottom: 8 },
+    button: {
+      minHeight: 44,
+      borderRadius: 12,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 16,
+    },
+    buttonText: { fontSize: 15, fontWeight: '600' },
+  });

package/src/components/MainComponents/AlbumGrid.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import MediaUploadOverlay from './MediaUploadOverlay';
+import { useMediaSource } from '../../context/MediaSourceContext';
 
 interface AlbumGridProps {
   /** The pictures and videos of one message, in order. */
@@ -43,6 +44,7 @@ const AlbumGrid: React.FC<AlbumGridProps> = ({
   const t = useT();
   const dispatch = useDispatch();
   const fileToken = useFileToken();
+  const source = useMediaSource();
 
   const layout = useMemo(
     () => getAlbumLayout(attachments.length),
@@ -58,8 +60,10 @@ const AlbumGrid: React.FC<AlbumGridProps> = ({
         fileURL: appendFileToken(attachment.location, fileToken) || '',
         mimetype: attachment.mimetype || '',
         duration: attachment.duration,
+        previewURL: appendFileToken(attachment.locationPreview, fileToken),
+        source,
       })),
-    [attachments, fileToken]
+    [attachments, fileToken, source]
   );
 
   const openAt = useCallback(

package/src/components/MainComponents/ChatHeader.tsx

@@ -1,6 +1,6 @@
 /** @format */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   CenterContainer,
@@ -15,6 +15,7 @@ import { ProfileImagePlaceholder } from './ProfileImagePlaceholder';
 import Button from '../styled/Button';
 import { BackIcon, BurgerMenuIcon, LockIcon } from '../../assets/icons';
 import { CallButtons } from '../VideoCalls/CallButtons';
+import { ScheduleCallButton } from '../Booking/ScheduleCallButton';
 import { HeaderCallBar } from '../VideoCalls/ActiveCallBar';
 import { LanguageSelectorButton } from './LanguageSelectorButton';
 import { MessageSearchButton } from './MessageSearchButton';
@@ -25,14 +26,14 @@ import {
   setCurrentRoom,
   setIsLoading,
 } from '../../roomStore/roomsSlice';
-import { useLeaveRoom } from '../../hooks/useLeaveRoom';
+import LeaveChatModal from '../Modals/ChatProfileModal/LeaveChatModal';
 import { setActiveModal } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { RoomMenu } from '../MenuRoom/MenuRoom';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useFileToken } from '../../hooks/useFileToken';
 import { appendFileToken } from '../../helpers/secureFileUrl';
-import { Alert, View, StyleSheet, Text, Keyboard } from 'react-native';
+import { View, StyleSheet, Text, Keyboard } from 'react-native';
 import { getIconColor } from '../../helpers/getIconColor';
 import { useTheme } from '../../hooks/useTheme';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
@@ -52,7 +53,8 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
 }) => {
   const fileToken = useFileToken();
   const dispatch = useDispatch();
-  const leaveRoom = useLeaveRoom();
+  // The room the menu's Leave is asking about.
+  const [leaveJid, setLeaveJid] = useState<string | null>(null);
 
   const reduxStore = useStore<RootState>();
   const activeRoomJID = useSelector(
@@ -79,19 +81,18 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
     dispatch(setIsLoading({ chatJID: chat.jid, loading: true }));
   };
 
-  const handleLeaveClick = useCallback(async () => {
-    if (!activeRoomJID) {return;}
-    if (!(await leaveRoom(activeRoomJID))) {
-      Alert.alert(t('toast.error'), t('toast.leaveFailed'));
-      return;
-    }
+  const handleLeaveClick = useCallback(() => {
+    if (activeRoomJID) {setLeaveJid(activeRoomJID);}
+  }, [activeRoomJID]);
 
+  // After the confirmation took us out: on to the first chat still left.
+  const handleLeft = useCallback(() => {
     const nextRoomJID =
       Object.keys(reduxStore.getState().rooms.rooms || {})[0] || null;
     if (nextRoomJID) {
       dispatch(setCurrentRoom({ roomJID: nextRoomJID }));
     }
-  }, [activeRoomJID, reduxStore, dispatch, leaveRoom, t]);
+  }, [reduxStore, dispatch]);
 
   const handleHeaderChatMenu = () => {
     Keyboard.dismiss();
@@ -258,6 +259,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
               1:1 room, so it costs non-call hosts nothing. */}
           <MessageSearchButton />
           <LanguageSelectorButton />
+          <ScheduleCallButton />
           <CallButtons />
           {!config?.disableChatInfo?.disableRoomMenu && (
             <RoomMenu handleLeaveClick={handleLeaveClick} />
@@ -268,6 +270,11 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
       <HeaderCallBar />
       {config?.chatHeaderAdditional?.enabled &&
           config.chatHeaderAdditional.element()}
+      <LeaveChatModal
+        roomJid={leaveJid}
+        onClose={() => setLeaveJid(null)}
+        onLeft={handleLeft}
+      />
     </>
   );
 };

package/src/components/MainComponents/LanguageSelectorButton.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { getIconColor } from '../../helpers/getIconColor';
 import { useT } from '../../i18n/useT';
+import { installTranslateLanguages } from '../../services/languageSettings';
 import { GlobeIcon, LanguageSelectorModal } from './LanguageSelectorModal';
 
 /**
@@ -11,7 +12,9 @@ import { GlobeIcon, LanguageSelectorModal } from './LanguageSelectorModal';
  * Renders only when translation is on. A host that drives the reader's
  * language from its own settings screen (via `config.translates
  * .readerLocale`) can hide this with `showLanguageSelector: false` rather
- * than shipping two competing controls.
+ * than shipping two competing controls. An install whose get-config
+ * reports no translate languages (`translates.languages: []`) has no
+ * translation server, so there is nothing to pick either.
  */
 export const LanguageSelectorButton: FC = () => {
   const { config } = useChatSettingState();
@@ -20,7 +23,11 @@ export const LanguageSelectorButton: FC = () => {
 
   const translates = config?.translates;
   const enabled = Boolean(translates?.enabled || config?.enableTranslates);
-  if (!enabled || translates?.showLanguageSelector === false) {
+  if (
+    !enabled ||
+    translates?.showLanguageSelector === false ||
+    installTranslateLanguages(config)?.length === 0
+  ) {
     return null;
   }