@syra.fm/sdk 0.4.0 → 0.5.0

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

@@ -0,0 +1,650 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { View, Text, Modal, StyleSheet, TouchableOpacity, TextInput, Image, ActivityIndicator, Platform, ScrollView, KeyboardAvoidingView } from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { useAuth } from '@oxyhq/services';
+import * as ImagePicker from 'expo-image-picker';
+import { useLiveConfig } from "../context/LiveConfigContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function StreamConfigModal({
+  visible,
+  onClose,
+  roomId,
+  initialStreamUrl,
+  onStreamStarted
+}) {
+  const {
+    useTheme,
+    roomsService,
+    toast
+  } = useLiveConfig();
+  const theme = useTheme();
+  const {
+    oxyServices
+  } = useAuth();
+  const initialUrl = initialStreamUrl?.trim() ?? '';
+  const isEditingUrlStream = initialUrl.length > 0;
+  const [mode, setMode] = useState('url');
+  const [loading, setLoading] = useState(false);
+  const [streamUrl, setStreamUrl] = useState(initialUrl);
+  const [rtmpUrl, setRtmpUrl] = useState(null);
+  const [streamKey, setStreamKey] = useState(null);
+  const [generatingKey, setGeneratingKey] = useState(false);
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [imageFileId, setImageFileId] = useState(null);
+  const [imagePreviewUri, setImagePreviewUri] = useState(null);
+  const [uploadingImage, setUploadingImage] = useState(false);
+  const resetState = () => {
+    setStreamUrl('');
+    setRtmpUrl(null);
+    setStreamKey(null);
+    setTitle('');
+    setDescription('');
+    setImageFileId(null);
+    setImagePreviewUri(null);
+    setMode('url');
+  };
+  const handleClose = () => {
+    onClose();
+  };
+  const handlePickImage = async () => {
+    try {
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ['images'],
+        quality: 0.8,
+        allowsEditing: true,
+        aspect: [16, 9]
+      });
+      if (result.canceled || !result.assets?.[0]) return;
+      const asset = result.assets[0];
+      setImagePreviewUri(asset.uri);
+      setUploadingImage(true);
+      try {
+        let file;
+        if (Platform.OS === 'web') {
+          const response = await fetch(asset.uri);
+          const blob = await response.blob();
+          file = new File([blob], 'stream-cover.jpg', {
+            type: asset.mimeType || 'image/jpeg'
+          });
+        } else {
+          const response = await fetch(asset.uri);
+          file = await response.blob();
+        }
+        if (!oxyServices) {
+          toast.error('File uploads are unavailable');
+          setImagePreviewUri(null);
+          return;
+        }
+        const uploadResponse = await oxyServices.uploadRawFile(file, 'public');
+        const fileId = uploadResponse?.file?.key || uploadResponse?.file?.id || uploadResponse?.id || uploadResponse?.fileId || uploadResponse?.data?.id;
+        if (fileId) {
+          setImageFileId(fileId);
+        } else {
+          console.error('Upload response missing file ID:', JSON.stringify(uploadResponse, null, 2));
+          toast.error('Failed to upload image');
+          setImagePreviewUri(null);
+        }
+      } catch (err) {
+        console.error('Image upload error:', err);
+        toast.error('Failed to upload image');
+        setImagePreviewUri(null);
+      } finally {
+        setUploadingImage(false);
+      }
+    } catch (err) {
+      console.error('Image picker error:', err);
+      toast.error('Could not open image picker');
+    }
+  };
+  const handleStartUrlStream = async () => {
+    if (!streamUrl.trim() || loading) return;
+    setLoading(true);
+    try {
+      const result = await roomsService.startStream(roomId, {
+        url: streamUrl.trim(),
+        title: title.trim() || undefined,
+        image: imageFileId || undefined,
+        description: description.trim() || undefined
+      });
+      if (result) {
+        toast.success('Stream started');
+        resetState();
+        onStreamStarted();
+        onClose();
+      } else {
+        toast.error('Failed to start stream');
+      }
+    } catch {
+      toast.error('Failed to start stream');
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleGenerateKey = async () => {
+    if (generatingKey) return;
+    setGeneratingKey(true);
+    try {
+      const result = await roomsService.generateStreamKey(roomId, {
+        title: title.trim() || undefined,
+        image: imageFileId || undefined,
+        description: description.trim() || undefined
+      });
+      if (result?.rtmpUrl && result?.streamKey) {
+        setRtmpUrl(result.rtmpUrl);
+        setStreamKey(result.streamKey);
+        toast.success('Stream key generated');
+        onStreamStarted();
+      } else {
+        console.error('Generate stream key response:', JSON.stringify(result, null, 2));
+        toast.error('Failed to generate stream key');
+      }
+    } catch (err) {
+      console.error('Generate stream key error:', err);
+      const msg = err instanceof Error ? err.message : 'Unknown error';
+      toast.error(`Stream key error: ${msg}`);
+    } finally {
+      setGeneratingKey(false);
+    }
+  };
+  const handleUpdateMetadata = async () => {
+    if (loading) return;
+    const trimmedUrl = streamUrl.trim();
+    if (mode === 'url' && !trimmedUrl) {
+      toast.error('Stream URL is required');
+      return;
+    }
+    setLoading(true);
+    try {
+      const success = await roomsService.updateStreamMetadata(roomId, {
+        ...(mode === 'url' ? {
+          url: trimmedUrl
+        } : {}),
+        title: title.trim() || undefined,
+        image: imageFileId || undefined,
+        description: description.trim() || undefined
+      });
+      if (success) {
+        toast.success('Stream info updated');
+        onStreamStarted();
+      } else {
+        toast.error('Failed to update stream info');
+      }
+    } catch {
+      toast.error('Failed to update stream info');
+    } finally {
+      setLoading(false);
+    }
+  };
+  const copyToClipboard = async (text, label) => {
+    try {
+      if (Platform.OS === 'web') {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const {
+          Clipboard
+        } = require('react-native');
+        Clipboard.setString(text);
+      }
+      toast.success(`${label} copied`);
+    } catch {
+      toast.error('Failed to copy');
+    }
+  };
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    animationType: "slide",
+    presentationStyle: "pageSheet",
+    onRequestClose: handleClose,
+    children: /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+      style: [styles.container, {
+        backgroundColor: theme.colors.background
+      }],
+      behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.header, {
+          borderBottomColor: theme.colors.border
+        }],
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleClose,
+          style: styles.closeBtn,
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "close",
+            size: 24,
+            color: theme.colors.text
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.headerTitle, {
+            color: theme.colors.text
+          }],
+          children: "Stream Setup"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.closeBtn
+        })]
+      }), /*#__PURE__*/_jsxs(ScrollView, {
+        style: styles.scrollContent,
+        keyboardShouldPersistTaps: "handled",
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.modeSelector,
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.modeTab, {
+              borderColor: theme.colors.border
+            }, mode === 'url' && {
+              backgroundColor: theme.colors.primary,
+              borderColor: theme.colors.primary
+            }],
+            onPress: () => setMode('url'),
+            children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "link",
+              size: 16,
+              color: mode === 'url' ? '#FFFFFF' : theme.colors.text
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.modeTabText, {
+                color: mode === 'url' ? '#FFFFFF' : theme.colors.text
+              }],
+              children: "Stream URL"
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.modeTab, {
+              borderColor: theme.colors.border
+            }, mode === 'rtmp' && {
+              backgroundColor: theme.colors.primary,
+              borderColor: theme.colors.primary
+            }],
+            onPress: () => setMode('rtmp'),
+            children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "key",
+              size: 16,
+              color: mode === 'rtmp' ? '#FFFFFF' : theme.colors.text
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.modeTabText, {
+                color: mode === 'rtmp' ? '#FFFFFF' : theme.colors.text
+              }],
+              children: "External App"
+            })]
+          })]
+        }), mode === 'url' && /*#__PURE__*/_jsx(View, {
+          style: styles.section,
+          children: /*#__PURE__*/_jsx(TextInput, {
+            style: [styles.input, {
+              backgroundColor: theme.colors.card,
+              borderColor: theme.colors.border,
+              color: theme.colors.text
+            }],
+            placeholder: "Stream URL (m3u8, Icecast, etc.)",
+            placeholderTextColor: theme.colors.textSecondary,
+            value: streamUrl,
+            onChangeText: setStreamUrl,
+            autoCapitalize: "none",
+            autoCorrect: false,
+            keyboardType: "url"
+          })
+        }), mode === 'rtmp' && /*#__PURE__*/_jsx(View, {
+          style: styles.section,
+          children: !rtmpUrl ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.generateBtn, {
+              backgroundColor: theme.colors.primary,
+              opacity: generatingKey ? 0.6 : 1
+            }],
+            onPress: handleGenerateKey,
+            disabled: generatingKey,
+            children: [generatingKey ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: "#FFFFFF"
+            }) : /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "key",
+              size: 18,
+              color: "#FFFFFF"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.generateBtnText,
+              children: generatingKey ? 'Generating...' : 'Generate Stream Key'
+            })]
+          }) : /*#__PURE__*/_jsxs(View, {
+            style: styles.credentialsBox,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.credLabel, {
+                color: theme.colors.textSecondary
+              }],
+              children: "RTMP URL"
+            }), /*#__PURE__*/_jsxs(View, {
+              style: [styles.credRow, {
+                backgroundColor: theme.colors.card,
+                borderColor: theme.colors.border
+              }],
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.credValue, {
+                  color: theme.colors.text
+                }],
+                numberOfLines: 1,
+                children: rtmpUrl
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: () => copyToClipboard(rtmpUrl, 'RTMP URL'),
+                style: styles.copyBtn,
+                children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                  name: "content-copy",
+                  size: 18,
+                  color: theme.colors.primary
+                })
+              })]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.credLabel, {
+                color: theme.colors.textSecondary,
+                marginTop: 12
+              }],
+              children: "Stream Key"
+            }), /*#__PURE__*/_jsxs(View, {
+              style: [styles.credRow, {
+                backgroundColor: theme.colors.card,
+                borderColor: theme.colors.border
+              }],
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.credValue, {
+                  color: theme.colors.text
+                }],
+                numberOfLines: 1,
+                children: streamKey
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: () => {
+                  if (streamKey) copyToClipboard(streamKey, 'Stream key');
+                },
+                style: styles.copyBtn,
+                children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                  name: "content-copy",
+                  size: 18,
+                  color: theme.colors.primary
+                })
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                name: "information",
+                size: 16,
+                color: theme.colors.textSecondary
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.infoText, {
+                  color: theme.colors.textSecondary
+                }],
+                children: "Use these in OBS or your streaming app. Audio will play in the room once you start streaming."
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.sectionLabel, {
+              color: theme.colors.textSecondary
+            }],
+            children: "Stream Info (optional)"
+          }), /*#__PURE__*/_jsx(TextInput, {
+            style: [styles.input, {
+              backgroundColor: theme.colors.card,
+              borderColor: theme.colors.border,
+              color: theme.colors.text
+            }],
+            placeholder: "Title",
+            placeholderTextColor: theme.colors.textSecondary,
+            value: title,
+            onChangeText: setTitle,
+            maxLength: 200
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.imagePicker, {
+              backgroundColor: theme.colors.card,
+              borderColor: theme.colors.border
+            }],
+            onPress: handlePickImage,
+            disabled: uploadingImage,
+            children: [imagePreviewUri ? /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: imagePreviewUri
+              },
+              style: styles.imagePreview
+            }) : /*#__PURE__*/_jsxs(View, {
+              style: styles.imagePickerPlaceholder,
+              children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                name: "image",
+                size: 24,
+                color: theme.colors.textSecondary
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.imagePickerText, {
+                  color: theme.colors.textSecondary
+                }],
+                children: "Cover image"
+              })]
+            }), uploadingImage && /*#__PURE__*/_jsx(View, {
+              style: styles.imageOverlay,
+              children: /*#__PURE__*/_jsx(ActivityIndicator, {
+                size: "small",
+                color: "#FFFFFF"
+              })
+            })]
+          }), /*#__PURE__*/_jsx(TextInput, {
+            style: [styles.input, styles.inputMultiline, {
+              backgroundColor: theme.colors.card,
+              borderColor: theme.colors.border,
+              color: theme.colors.text
+            }],
+            placeholder: "Description",
+            placeholderTextColor: theme.colors.textSecondary,
+            value: description,
+            onChangeText: setDescription,
+            maxLength: 500,
+            multiline: true,
+            numberOfLines: 2
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.footer,
+          children: [mode === 'url' && /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.startBtn, {
+              backgroundColor: streamUrl.trim() ? theme.colors.primary : theme.colors.backgroundSecondary,
+              opacity: loading ? 0.6 : 1
+            }],
+            onPress: isEditingUrlStream ? handleUpdateMetadata : handleStartUrlStream,
+            disabled: !streamUrl.trim() || loading,
+            children: [loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: "#FFFFFF"
+            }) : isEditingUrlStream ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "content-save",
+              size: 18,
+              color: streamUrl.trim() ? '#FFFFFF' : theme.colors.textSecondary
+            }) : /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "play",
+              size: 18,
+              color: streamUrl.trim() ? '#FFFFFF' : theme.colors.textSecondary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: {
+                color: streamUrl.trim() ? '#FFFFFF' : theme.colors.textSecondary,
+                fontWeight: '600',
+                fontSize: 16
+              },
+              children: isEditingUrlStream ? 'Save Stream Info' : 'Start Stream'
+            })]
+          }), mode === 'rtmp' && rtmpUrl && /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.startBtn, {
+              backgroundColor: theme.colors.primary,
+              opacity: loading ? 0.6 : 1
+            }],
+            onPress: handleUpdateMetadata,
+            disabled: loading,
+            children: [loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: "#FFFFFF"
+            }) : /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "content-save",
+              size: 18,
+              color: "#FFFFFF"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: {
+                color: '#FFFFFF',
+                fontWeight: '600',
+                fontSize: 16
+              },
+              children: "Save Stream Info"
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  scrollContent: {
+    flex: 1
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1
+  },
+  closeBtn: {
+    width: 40,
+    alignItems: 'center'
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: '600'
+  },
+  modeSelector: {
+    flexDirection: 'row',
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8
+  },
+  modeTab: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1
+  },
+  modeTabText: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  section: {
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    gap: 10
+  },
+  sectionLabel: {
+    fontSize: 13,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 2
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    fontSize: 15
+  },
+  inputMultiline: {
+    minHeight: 60,
+    textAlignVertical: 'top'
+  },
+  imagePicker: {
+    borderWidth: 1,
+    borderRadius: 10,
+    overflow: 'hidden',
+    height: 100
+  },
+  imagePreview: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover'
+  },
+  imagePickerPlaceholder: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4
+  },
+  imagePickerText: {
+    fontSize: 13,
+    fontWeight: '500'
+  },
+  imageOverlay: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  generateBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    paddingVertical: 14,
+    borderRadius: 10
+  },
+  generateBtnText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  credentialsBox: {
+    gap: 4
+  },
+  credLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5
+  },
+  credRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingLeft: 14,
+    paddingRight: 4,
+    paddingVertical: 4
+  },
+  credValue: {
+    flex: 1,
+    fontSize: 13,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace'
+  },
+  copyBtn: {
+    padding: 10
+  },
+  infoRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 6,
+    marginTop: 10
+  },
+  infoText: {
+    flex: 1,
+    fontSize: 13,
+    lineHeight: 18
+  },
+  footer: {
+    paddingHorizontal: 16,
+    paddingTop: 20,
+    paddingBottom: 40
+  },
+  startBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    paddingVertical: 14,
+    borderRadius: 12
+  }
+});
+//# sourceMappingURL=StreamConfigModal.js.map