@syra.fm/sdk 0.4.0 → 0.5.0

package/lib/module/live/components/CreateRoomSheet.js

@@ -0,0 +1,682 @@
+"use strict";
+
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, FlatList } from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { useLiveConfig } from "../context/LiveConfigContext.js";
+import { useLiveRoom } from "../context/LiveRoomContext.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TOPICS = ['Technology', 'Music', 'Sports', 'Gaming', 'News', 'Politics', 'Science', 'Art', 'Business', 'Education', 'Entertainment', 'Health', 'Culture', 'Crypto', 'AI'];
+const ROOM_TYPES = [{
+  value: 'talk',
+  label: 'Talk',
+  icon: 'microphone',
+  description: 'Open conversation'
+}, {
+  value: 'stage',
+  label: 'Stage',
+  icon: 'account-voice',
+  description: 'Panel discussion'
+}, {
+  value: 'broadcast',
+  label: 'Broadcast',
+  icon: 'broadcast',
+  description: 'One-to-many stream'
+}];
+export const CreateRoomSheet = /*#__PURE__*/forwardRef(({
+  onClose,
+  onRoomCreated,
+  mode = 'standalone',
+  ScrollViewComponent,
+  hideFooter = false,
+  onFormStateChange,
+  houses
+}, ref) => {
+  const Scroll = ScrollViewComponent || ScrollView;
+  const {
+    useTheme,
+    roomsService,
+    toast
+  } = useLiveConfig();
+  const theme = useTheme();
+  const {
+    joinLiveRoom
+  } = useLiveRoom();
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [topic, setTopic] = useState('');
+  const [scheduledStart, setScheduledStart] = useState('');
+  const [speakerPermission, setSpeakerPermission] = useState('invited');
+  const [roomType, setRoomType] = useState('talk');
+  const [selectedHouse, setSelectedHouse] = useState(null);
+  const [recordingEnabled, setRecordingEnabled] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const isValid = title.trim().length > 0;
+  const isBroadcast = roomType === 'broadcast';
+  useEffect(() => {
+    onFormStateChange?.({
+      isValid,
+      loading,
+      hasScheduledStart: !!scheduledStart.trim()
+    });
+  }, [isValid, loading, scheduledStart, onFormStateChange]);
+  const buildCreatePayload = () => ({
+    title: title.trim(),
+    description: description.trim() || undefined,
+    topic: topic.trim() || undefined,
+    speakerPermission: isBroadcast ? 'invited' : speakerPermission,
+    type: roomType,
+    ownerType: selectedHouse ? 'house' : 'profile',
+    houseId: selectedHouse?._id,
+    recordingEnabled
+  });
+  const handleCreateAndStart = async () => {
+    if (!isValid || loading) return;
+    setLoading(true);
+    try {
+      const room = await roomsService.createRoom(buildCreatePayload());
+      if (room) {
+        const started = await roomsService.startRoom(room._id);
+        onClose();
+        if (started) {
+          joinLiveRoom(room._id);
+        } else {
+          toast.error('Room created but failed to start');
+        }
+        onRoomCreated?.(room);
+      } else {
+        toast.error('Failed to create room');
+      }
+    } catch (error) {
+      console.error('Error creating room:', error);
+      toast.error('Failed to create room');
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSchedule = async () => {
+    if (!isValid || loading) return;
+    if (!scheduledStart.trim()) {
+      toast.error('Please enter a scheduled start time');
+      return;
+    }
+    setLoading(true);
+    try {
+      const room = await roomsService.createRoom({
+        ...buildCreatePayload(),
+        scheduledStart: scheduledStart.trim()
+      });
+      if (room) {
+        onClose();
+        onRoomCreated?.(room);
+      } else {
+        toast.error('Failed to create room');
+      }
+    } catch (error) {
+      console.error('Error creating room:', error);
+      toast.error('Failed to create room');
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleCreateForEmbed = async () => {
+    if (!isValid || loading) return;
+    setLoading(true);
+    try {
+      const room = await roomsService.createRoom(buildCreatePayload());
+      if (room) {
+        onClose();
+        onRoomCreated?.(room);
+      } else {
+        toast.error('Failed to create room');
+      }
+    } catch (error) {
+      console.error('Error creating room:', error);
+      toast.error('Failed to create room');
+    } finally {
+      setLoading(false);
+    }
+  };
+  useImperativeHandle(ref, () => ({
+    handleCreateAndStart,
+    handleSchedule,
+    handleCreateForEmbed
+  }), [handleCreateAndStart, handleSchedule, handleCreateForEmbed]);
+  const renderFooterContent = () => {
+    if (hideFooter) return null;
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.footer, {
+        borderTopColor: theme.colors.border,
+        backgroundColor: theme.colors.background
+      }],
+      children: mode === 'standalone' ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.primaryButton, {
+            backgroundColor: isValid ? theme.colors.primary : theme.colors.backgroundSecondary,
+            opacity: loading ? 0.6 : 1
+          }],
+          onPress: handleCreateAndStart,
+          disabled: !isValid || loading,
+          children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "play",
+            size: 20,
+            color: isValid ? theme.colors.card : theme.colors.textSecondary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.primaryButtonText, {
+              color: isValid ? theme.colors.card : theme.colors.textSecondary
+            }],
+            children: loading ? 'Creating...' : 'Start Now'
+          })]
+        }), scheduledStart.trim() && /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.secondaryButton, {
+            backgroundColor: theme.colors.backgroundSecondary,
+            borderColor: theme.colors.border,
+            opacity: loading ? 0.6 : 1
+          }],
+          onPress: handleSchedule,
+          disabled: !isValid || loading,
+          children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "calendar",
+            size: 20,
+            color: theme.colors.text
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.secondaryButtonText, {
+              color: theme.colors.text
+            }],
+            children: "Schedule Room"
+          })]
+        })]
+      }) : /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.primaryButton, {
+          backgroundColor: isValid ? theme.colors.primary : theme.colors.backgroundSecondary,
+          opacity: loading ? 0.6 : 1
+        }],
+        onPress: handleCreateForEmbed,
+        disabled: !isValid || loading,
+        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "radio",
+          size: 20,
+          color: isValid ? theme.colors.card : theme.colors.textSecondary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.primaryButtonText, {
+            color: isValid ? theme.colors.card : theme.colors.textSecondary
+          }],
+          children: loading ? 'Creating...' : 'Create Room'
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      backgroundColor: theme.colors.background
+    }],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.header, {
+        borderBottomColor: theme.colors.border
+      }],
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onClose,
+        style: styles.headerCloseBtn,
+        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "close",
+          size: 20,
+          color: theme.colors.text
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.headerTitle, {
+          color: theme.colors.text
+        }],
+        children: "Create Room"
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 28
+        }
+      })]
+    }), /*#__PURE__*/_jsxs(Scroll, {
+      style: {
+        flex: 1
+      },
+      contentContainerStyle: [styles.scrollContent, hideFooter && {
+        paddingBottom: 72
+      }],
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.inputSection, styles.sectionPadded],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, {
+            color: theme.colors.text
+          }],
+          children: "Room Type"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.typeSelector,
+          children: ROOM_TYPES.map(rt => {
+            const selected = roomType === rt.value;
+            return /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: [styles.typeCard, {
+                backgroundColor: selected ? theme.colors.primary : theme.colors.backgroundSecondary,
+                borderColor: selected ? theme.colors.primary : theme.colors.border
+              }],
+              onPress: () => setRoomType(rt.value),
+              children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                name: rt.icon,
+                size: 22,
+                color: selected ? '#FFFFFF' : theme.colors.textSecondary
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.typeCardLabel, {
+                  color: selected ? '#FFFFFF' : theme.colors.text
+                }],
+                children: rt.label
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.typeCardDesc, {
+                  color: selected ? 'rgba(255,255,255,0.8)' : theme.colors.textSecondary
+                }],
+                children: rt.description
+              })]
+            }, rt.value);
+          })
+        })]
+      }), houses && houses.length > 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.inputSection,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, styles.sectionPadded, {
+            color: theme.colors.text
+          }],
+          children: "Create for"
+        }), /*#__PURE__*/_jsx(FlatList, {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          data: [null, ...houses],
+          keyExtractor: item => item?._id ?? 'personal',
+          contentContainerStyle: styles.chipList,
+          renderItem: ({
+            item
+          }) => {
+            const selected = item === null ? !selectedHouse : selectedHouse?._id === item._id;
+            return /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: [styles.chip, {
+                backgroundColor: selected ? theme.colors.primary : theme.colors.backgroundSecondary
+              }],
+              onPress: () => setSelectedHouse(item),
+              children: [item && /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                name: "home-group",
+                size: 14,
+                color: selected ? '#FFFFFF' : theme.colors.textSecondary,
+                style: {
+                  marginRight: 4
+                }
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.chipText, {
+                  color: selected ? '#FFFFFF' : theme.colors.text
+                }],
+                children: item ? item.name : 'Personal'
+              })]
+            });
+          }
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [styles.inputSection, styles.sectionPadded],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, {
+            color: theme.colors.text
+          }],
+          children: "Title *"
+        }), /*#__PURE__*/_jsx(TextInput, {
+          style: [styles.input, {
+            backgroundColor: theme.colors.backgroundSecondary,
+            color: theme.colors.text
+          }],
+          placeholder: "What's your room about?",
+          placeholderTextColor: theme.colors.textTertiary,
+          value: title,
+          onChangeText: setTitle,
+          maxLength: 100
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.charCount, {
+            color: theme.colors.textTertiary
+          }],
+          children: [title.length, "/100"]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.inputSection,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, styles.sectionPadded, {
+            color: theme.colors.text
+          }],
+          children: "Topic"
+        }), /*#__PURE__*/_jsx(FlatList, {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          data: TOPICS,
+          keyExtractor: item => item,
+          contentContainerStyle: styles.chipList,
+          renderItem: ({
+            item
+          }) => {
+            const selected = topic === item;
+            return /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: [styles.chip, {
+                backgroundColor: selected ? theme.colors.primary : theme.colors.backgroundSecondary
+              }],
+              onPress: () => setTopic(selected ? '' : item),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.chipText, {
+                  color: selected ? '#FFFFFF' : theme.colors.text
+                }],
+                children: item
+              })
+            });
+          }
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [styles.inputSection, styles.sectionPadded],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, {
+            color: theme.colors.text
+          }],
+          children: "Description"
+        }), /*#__PURE__*/_jsx(TextInput, {
+          style: [styles.textArea, {
+            backgroundColor: theme.colors.backgroundSecondary,
+            color: theme.colors.text
+          }],
+          placeholder: "Tell people what to expect...",
+          placeholderTextColor: theme.colors.textTertiary,
+          value: description,
+          onChangeText: setDescription,
+          multiline: true,
+          numberOfLines: 3,
+          maxLength: 500
+        })]
+      }), !isBroadcast && /*#__PURE__*/_jsxs(View, {
+        style: [styles.inputSection, styles.sectionPadded],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, {
+            color: theme.colors.text
+          }],
+          children: "Who can speak?"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.radioGroup,
+          children: [{
+            value: 'everyone',
+            label: 'Everyone',
+            icon: 'earth'
+          }, {
+            value: 'followers',
+            label: 'People you follow',
+            icon: 'account-group'
+          }, {
+            value: 'invited',
+            label: 'Only invited speakers',
+            icon: 'account-plus'
+          }].map((option, index, arr) => {
+            const selected = speakerPermission === option.value;
+            const isFirst = index === 0;
+            const isLast = index === arr.length - 1;
+            return /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: [styles.radioRow, {
+                backgroundColor: theme.colors.backgroundSecondary,
+                borderTopLeftRadius: isFirst ? 12 : 0,
+                borderTopRightRadius: isFirst ? 12 : 0,
+                borderBottomLeftRadius: isLast ? 12 : 0,
+                borderBottomRightRadius: isLast ? 12 : 0
+              }],
+              onPress: () => setSpeakerPermission(option.value),
+              children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                name: option.icon,
+                size: 18,
+                color: selected ? theme.colors.primary : theme.colors.textSecondary
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.radioLabel, {
+                  color: selected ? theme.colors.primary : theme.colors.text
+                }],
+                children: option.label
+              }), /*#__PURE__*/_jsx(View, {
+                style: [styles.radioCircle, {
+                  borderColor: selected ? theme.colors.primary : theme.colors.border,
+                  backgroundColor: selected ? theme.colors.primary : 'transparent'
+                }],
+                children: selected && /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                  name: "check",
+                  size: 12,
+                  color: "#FFFFFF"
+                })
+              })]
+            }, option.value);
+          })
+        })]
+      }), mode === 'standalone' && /*#__PURE__*/_jsxs(View, {
+        style: [styles.inputSection, styles.sectionPadded],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, {
+            color: theme.colors.text
+          }],
+          children: "Schedule (Optional)"
+        }), /*#__PURE__*/_jsx(TextInput, {
+          style: [styles.input, {
+            backgroundColor: theme.colors.backgroundSecondary,
+            color: theme.colors.text
+          }],
+          placeholder: "e.g., 2024-03-20 14:00",
+          placeholderTextColor: theme.colors.textTertiary,
+          value: scheduledStart,
+          onChangeText: setScheduledStart
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.inputSection, styles.sectionPadded],
+        children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.toggleRow, {
+            backgroundColor: theme.colors.backgroundSecondary
+          }],
+          onPress: () => setRecordingEnabled(!recordingEnabled),
+          children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: recordingEnabled ? 'record-circle' : 'record-circle-outline',
+            size: 20,
+            color: recordingEnabled ? '#FF0000' : theme.colors.textSecondary
+          }), /*#__PURE__*/_jsxs(View, {
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.toggleLabel, {
+                color: theme.colors.text
+              }],
+              children: "Auto-record"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: {
+                fontSize: 11,
+                color: theme.colors.textSecondary
+              },
+              children: "Record audio when room goes live (max 1h, expires in 6 months)"
+            })]
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.toggleIndicator, {
+              backgroundColor: recordingEnabled ? theme.colors.primary : theme.colors.border
+            }],
+            children: /*#__PURE__*/_jsx(View, {
+              style: [styles.toggleDot, recordingEnabled && {
+                transform: [{
+                  translateX: 14
+                }]
+              }]
+            })
+          })]
+        })
+      })]
+    }), renderFooterContent()]
+  });
+});
+CreateRoomSheet.displayName = 'CreateRoomSheet';
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 0.5
+  },
+  headerCloseBtn: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  scrollContent: {
+    paddingVertical: 16,
+    paddingBottom: 12
+  },
+  sectionPadded: {
+    paddingHorizontal: 16
+  },
+  inputSection: {
+    marginBottom: 16
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 6
+  },
+  input: {
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    fontSize: 15
+  },
+  textArea: {
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    fontSize: 15,
+    minHeight: 72,
+    textAlignVertical: 'top'
+  },
+  charCount: {
+    fontSize: 11,
+    marginTop: 4
+  },
+  typeSelector: {
+    flexDirection: 'row',
+    gap: 10
+  },
+  typeCard: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 8,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 4
+  },
+  typeCardLabel: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginTop: 2
+  },
+  typeCardDesc: {
+    fontSize: 10,
+    textAlign: 'center'
+  },
+  chipList: {
+    gap: 8,
+    paddingHorizontal: 16
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 20
+  },
+  chipText: {
+    fontSize: 13,
+    fontWeight: '500'
+  },
+  radioGroup: {
+    gap: 3
+  },
+  radioRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 12
+  },
+  radioLabel: {
+    fontSize: 14,
+    flex: 1
+  },
+  radioCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  footer: {
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: 14,
+    borderTopWidth: 0.5
+  },
+  primaryButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    borderRadius: 22,
+    gap: 6
+  },
+  primaryButtonText: {
+    fontSize: 15,
+    fontWeight: '600'
+  },
+  secondaryButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    borderRadius: 22,
+    borderWidth: 1,
+    gap: 6
+  },
+  secondaryButtonText: {
+    fontSize: 15,
+    fontWeight: '600'
+  },
+  toggleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 12
+  },
+  toggleLabel: {
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  toggleIndicator: {
+    width: 36,
+    height: 22,
+    borderRadius: 11,
+    justifyContent: 'center',
+    paddingHorizontal: 2
+  },
+  toggleDot: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: '#FFFFFF'
+  }
+});
+export default CreateRoomSheet;
+//# sourceMappingURL=CreateRoomSheet.js.map