@syra.fm/sdk 0.3.0 → 0.5.0

package/src/live/components/RecordingCard.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, StyleProp, ViewStyle } from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { useAuth } from '@oxyhq/services';
+
+import { useLiveConfig } from '../context/LiveConfigContext';
+import { getAvatarUrl, getDisplayName } from '../hooks/useRoomUsers';
+import type { Recording } from '../validation';
+
+// --- Helpers ---
+
+const MONTH_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function formatDate(dateStr: string): string {
+  const d = new Date(dateStr);
+  return `${d.getDate()} ${MONTH_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+}
+
+function formatDurationMs(ms: number): string {
+  const totalMin = Math.round(ms / 60_000);
+  if (totalMin < 60) return `${totalMin}m`;
+  const h = Math.floor(totalMin / 60);
+  const m = totalMin % 60;
+  return m > 0 ? `${h}h ${m}m` : `${h}h`;
+}
+
+// --- Types ---
+
+interface RecordingCardProps {
+  recording: Recording;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+// --- Component ---
+
+export const RecordingCard: React.FC<RecordingCardProps> = ({ recording, onPress, style }) => {
+  const { useTheme, useUserById, AvatarComponent, getCachedFileDownloadUrlSync } = useLiveConfig();
+  const theme = useTheme();
+  const { oxyServices } = useAuth();
+  const hostProfile = useUserById(recording.host);
+  const hostAvatarUri = getAvatarUrl(hostProfile, oxyServices, getCachedFileDownloadUrlSync);
+  const hostName = getDisplayName(hostProfile, recording.host);
+
+  const duration = recording.durationMs ? formatDurationMs(recording.durationMs) : null;
+  const date = formatDate(recording.createdAt);
+  const listeners = recording.participantIds?.length || 0;
+
+  return (
+    <TouchableOpacity
+      style={[styles.card, { backgroundColor: theme.colors.card, borderColor: theme.colors.border }, style]}
+      onPress={onPress}
+      activeOpacity={onPress ? 0.7 : 1}
+      disabled={!onPress}
+    >
+      <View style={styles.row}>
+        {/* Play icon */}
+        <View style={[styles.playIcon, { backgroundColor: theme.colors.primary + '15' }]}>
+          <MaterialCommunityIcons name="play-circle" size={28} color={theme.colors.primary} />
+        </View>
+
+        {/* Content */}
+        <View style={styles.content}>
+          <Text style={[styles.title, { color: theme.colors.text }]} numberOfLines={1}>
+            {recording.roomTitle}
+          </Text>
+          <View style={styles.meta}>
+            {hostAvatarUri && (
+              <AvatarComponent size={16} source={hostAvatarUri} shape="squircle" style={{ marginRight: 4 }} />
+            )}
+            <Text style={[styles.metaText, { color: theme.colors.textSecondary }]} numberOfLines={1}>
+              {hostName}
+            </Text>
+            <Text style={[styles.dot, { color: theme.colors.textSecondary }]}>·</Text>
+            <Text style={[styles.metaText, { color: theme.colors.textSecondary }]}>{date}</Text>
+          </View>
+        </View>
+
+        {/* Duration / Stats */}
+        <View style={styles.rightCol}>
+          {duration && (
+            <Text style={[styles.duration, { color: theme.colors.text }]}>{duration}</Text>
+          )}
+          {listeners > 0 && (
+            <View style={styles.listenersRow}>
+              <MaterialCommunityIcons name="account-group" size={12} color={theme.colors.textSecondary} />
+              <Text style={[styles.listenersText, { color: theme.colors.textSecondary }]}>{listeners}</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+// --- Styles ---
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 12,
+    width: 280,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  playIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+    gap: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  meta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  metaText: {
+    fontSize: 12,
+  },
+  dot: {
+    fontSize: 10,
+    marginHorizontal: 4,
+  },
+  rightCol: {
+    alignItems: 'flex-end',
+    gap: 4,
+  },
+  duration: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  listenersRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+  },
+  listenersText: {
+    fontSize: 11,
+  },
+});
+
+export default RecordingCard;

package/src/live/components/RecordingsPanel.tsx

@@ -0,0 +1,251 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator } from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+
+import { PanelHeader } from './PanelHeader';
+import { useLiveConfig } from '../context/LiveConfigContext';
+import type { Recording, LiveTheme } from '../types';
+
+interface RecordingsPanelProps {
+  roomId: string;
+  isHost: boolean;
+  theme: LiveTheme;
+  onClose: () => void;
+  onPlay?: (playbackUrl: string, recording: Recording) => void;
+}
+
+function formatDurationMs(ms: number | null | undefined): string {
+  if (!ms) return '—';
+  const totalSecs = Math.floor(ms / 1000);
+  const hours = Math.floor(totalSecs / 3600);
+  const mins = Math.floor((totalSecs % 3600) / 60);
+  const secs = totalSecs % 60;
+  if (hours > 0) return `${hours}h ${mins}m ${secs}s`;
+  if (mins > 0) return `${mins}m ${secs}s`;
+  return `${secs}s`;
+}
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export function RecordingsPanel({ roomId, isHost, theme, onClose, onPlay }: RecordingsPanelProps) {
+  const { roomsService, toast } = useLiveConfig();
+  const [recordings, setRecordings] = useState<Recording[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [playingId, setPlayingId] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadRecordings();
+  }, [roomId]);
+
+  const loadRecordings = async () => {
+    setLoading(true);
+    const data = await roomsService.getRoomRecordings(roomId);
+    setRecordings(data);
+    setLoading(false);
+  };
+
+  const handlePlay = async (recording: Recording) => {
+    setPlayingId(recording._id);
+    try {
+      const result = await roomsService.getRecording(recording._id);
+      if (result?.playbackUrl) {
+        onPlay?.(result.playbackUrl, recording);
+      } else {
+        toast.error('Failed to load playback URL');
+      }
+    } catch {
+      toast.error('Failed to load recording');
+    } finally {
+      setPlayingId(null);
+    }
+  };
+
+  const handleToggleAccess = async (recording: Recording) => {
+    const newAccess = recording.access === 'public' ? 'participants' as const : 'public' as const;
+    const success = await roomsService.updateRecordingAccess(recording._id, newAccess);
+    if (success) {
+      setRecordings((prev) =>
+        prev.map((r) => r._id === recording._id ? { ...r, access: newAccess } : r)
+      );
+      toast.success(`Recording is now ${newAccess}`);
+    } else {
+      toast.error('Failed to update access');
+    }
+  };
+
+  const handleDelete = async (recording: Recording) => {
+    const success = await roomsService.deleteRecording(recording._id);
+    if (success) {
+      setRecordings((prev) => prev.filter((r) => r._id !== recording._id));
+      toast.success('Recording deleted');
+    } else {
+      toast.error('Failed to delete recording');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <PanelHeader title="Recordings" theme={theme} onBack={onClose} />
+
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {loading ? (
+          <View style={styles.centered}>
+            <ActivityIndicator color={theme.colors.primary} />
+          </View>
+        ) : recordings.length === 0 ? (
+          <View style={styles.centered}>
+            <MaterialCommunityIcons name="record-circle-outline" size={40} color={theme.colors.textSecondary} />
+            <Text style={[styles.emptyText, { color: theme.colors.textSecondary }]}>
+              No recordings yet
+            </Text>
+          </View>
+        ) : (
+          recordings.map((recording) => (
+            <View
+              key={recording._id}
+              style={[styles.recordingCard, { backgroundColor: `${theme.colors.card}80`, borderColor: theme.colors.border }]}
+            >
+              <View style={styles.recordingHeader}>
+                <View style={styles.recordingInfo}>
+                  <Text style={[styles.recordingTitle, { color: theme.colors.text }]} numberOfLines={1}>
+                    {recording.roomTitle}
+                  </Text>
+                  <View style={styles.recordingMeta}>
+                    <Text style={[styles.recordingDate, { color: theme.colors.textSecondary }]}>
+                      {formatDate(recording.startedAt)}
+                    </Text>
+                    <Text style={[styles.recordingDuration, { color: theme.colors.textSecondary }]}>
+                      {formatDurationMs(recording.durationMs)}
+                    </Text>
+                    <View style={[styles.accessBadge, {
+                      backgroundColor: recording.access === 'public' ? `${theme.colors.primary}1A` : '#FF98001A',
+                    }]}>
+                      <MaterialCommunityIcons
+                        name={recording.access === 'public' ? 'earth' : 'lock'}
+                        size={10}
+                        color={recording.access === 'public' ? theme.colors.primary : '#FF9800'}
+                      />
+                      <Text style={[styles.accessBadgeText, {
+                        color: recording.access === 'public' ? theme.colors.primary : '#FF9800',
+                      }]}>
+                        {recording.access === 'public' ? 'Public' : 'Participants'}
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+
+                <TouchableOpacity
+                  onPress={() => handlePlay(recording)}
+                  disabled={playingId === recording._id}
+                  style={[styles.playButton, { backgroundColor: theme.colors.primary }]}
+                >
+                  {playingId === recording._id ? (
+                    <ActivityIndicator size="small" color="#FFFFFF" />
+                  ) : (
+                    <MaterialCommunityIcons name="play" size={22} color="#FFFFFF" />
+                  )}
+                </TouchableOpacity>
+              </View>
+
+              {isHost && (
+                <View style={[styles.recordingActions, { borderTopColor: theme.colors.border }]}>
+                  <TouchableOpacity
+                    style={styles.actionButton}
+                    onPress={() => handleToggleAccess(recording)}
+                  >
+                    <MaterialCommunityIcons
+                      name={recording.access === 'public' ? 'lock' : 'earth'}
+                      size={16}
+                      color={theme.colors.textSecondary}
+                    />
+                    <Text style={[styles.actionText, { color: theme.colors.textSecondary }]}>
+                      {recording.access === 'public' ? 'Make private' : 'Make public'}
+                    </Text>
+                  </TouchableOpacity>
+
+                  <TouchableOpacity
+                    style={styles.actionButton}
+                    onPress={() => handleDelete(recording)}
+                  >
+                    <MaterialCommunityIcons name="delete-outline" size={16} color="#FF4458" />
+                    <Text style={[styles.actionText, { color: '#FF4458' }]}>Delete</Text>
+                  </TouchableOpacity>
+                </View>
+              )}
+            </View>
+          ))
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  scrollContent: { padding: 16, paddingBottom: 32 },
+  centered: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 60,
+    gap: 12,
+  },
+  emptyText: { fontSize: 15, fontWeight: '500' },
+  recordingCard: {
+    borderRadius: 12,
+    borderWidth: 1,
+    marginBottom: 10,
+    overflow: 'hidden',
+  },
+  recordingHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 14,
+    gap: 12,
+  },
+  recordingInfo: { flex: 1, gap: 4 },
+  recordingTitle: { fontSize: 15, fontWeight: '600' },
+  recordingMeta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flexWrap: 'wrap',
+  },
+  recordingDate: { fontSize: 12, fontWeight: '500' },
+  recordingDuration: { fontSize: 12, fontWeight: '500' },
+  accessBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 8,
+  },
+  accessBadgeText: { fontSize: 10, fontWeight: '600' },
+  playButton: {
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  recordingActions: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    gap: 16,
+  },
+  actionButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  actionText: { fontSize: 12, fontWeight: '500' },
+});