@syra.fm/sdk 0.4.0 → 0.6.0

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

@@ -0,0 +1,816 @@
+"use strict";
+
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, TextInput, Image, ActivityIndicator, Platform, ScrollView } from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import * as ImagePicker from 'expo-image-picker';
+import { useLiveConfig } from "../context/LiveConfigContext.js";
+import { PanelHeader } from "./PanelHeader.js";
+import { PodcastStreamPicker, MusicPicker } from "./PodcastStreamPicker.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function appendNativeFile(formData, file) {
+  const nativeFormData = formData;
+  nativeFormData.append('file', file);
+}
+export function StreamConfigPanel({
+  roomId,
+  roomStatus,
+  initialStreamUrl,
+  initialRtmpUrl,
+  initialStreamKey,
+  onClose,
+  onStreamStarted
+}) {
+  const {
+    useTheme,
+    roomsService,
+    toast,
+    onRoomChanged
+  } = useLiveConfig();
+  const theme = useTheme();
+  const initialUrl = initialStreamUrl?.trim() ?? '';
+  const hasExistingKey = !!initialStreamKey;
+  const isEditingUrlStream = roomStatus === 'live' && initialUrl.length > 0;
+  const [mode, setMode] = useState(hasExistingKey ? 'rtmp' : 'url');
+  const [loading, setLoading] = useState(false);
+  const [streamUrl, setStreamUrl] = useState(initialUrl);
+  const [rtmpUrl, setRtmpUrl] = useState(initialRtmpUrl || null);
+  const [streamKey, setStreamKey] = useState(initialStreamKey || null);
+  const [generatingKey, setGeneratingKey] = useState(false);
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [imageCdnUrl, setImageCdnUrl] = useState(null);
+  const [imagePreviewUri, setImagePreviewUri] = useState(null);
+  const [uploadingImage, setUploadingImage] = useState(false);
+  const resetState = () => {
+    setStreamUrl('');
+    setRtmpUrl(null);
+    setStreamKey(null);
+    setTitle('');
+    setDescription('');
+    setImageCdnUrl(null);
+    setImagePreviewUri(null);
+    setMode('url');
+  };
+  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 {
+        const formData = new FormData();
+        if (Platform.OS === 'web') {
+          const response = await fetch(asset.uri);
+          const blob = await response.blob();
+          formData.append('file', new File([blob], 'stream-cover.jpg', {
+            type: asset.mimeType || 'image/jpeg'
+          }));
+        } else {
+          const nativeFile = {
+            uri: asset.uri,
+            name: 'stream-cover.jpg',
+            type: asset.mimeType || 'image/jpeg'
+          };
+          appendNativeFile(formData, nativeFile);
+        }
+        const cdnUrl = await roomsService.uploadRoomImage(roomId, formData);
+        if (cdnUrl) {
+          setImageCdnUrl(cdnUrl);
+        } else {
+          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 ensureRoomLive = async () => {
+    if (roomStatus === 'live') return true;
+    if (roomStatus === 'scheduled') {
+      const started = await roomsService.startRoom(roomId);
+      if (!started) {
+        toast.error('Failed to start room');
+        return false;
+      }
+      onRoomChanged?.(roomId);
+      return true;
+    }
+    toast.error('Room cannot be started');
+    return false;
+  };
+  const handleStartUrlStream = async () => {
+    if (!streamUrl.trim() || loading) return;
+    setLoading(true);
+    try {
+      if (!(await ensureRoomLive())) return;
+      const result = await roomsService.startStream(roomId, {
+        url: streamUrl.trim(),
+        title: title.trim() || undefined,
+        image: imageCdnUrl || 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 handleStartPodcast = async (syraPodcastId, episodeId) => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      if (!(await ensureRoomLive())) return;
+      const result = await roomsService.startPodcastStream(roomId, {
+        syraPodcastId,
+        episodeId
+      });
+      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);
+    }
+  };
+
+  // Start a multi-episode session: the first episode plays now, the rest are
+  // persisted as the room's up-next queue.
+  const handleStartPodcastQueue = async items => {
+    if (loading || items.length === 0) return;
+    const [first, ...rest] = items;
+    setLoading(true);
+    try {
+      if (!(await ensureRoomLive())) return;
+      const result = await roomsService.startPodcastStream(roomId, {
+        syraPodcastId: first.syraPodcastId,
+        episodeId: first.episodeId,
+        queue: rest
+      });
+      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);
+    }
+  };
+
+  // Stream a single Syra track into the room (a "listening party").
+  const handleStartTrack = async trackId => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      if (!(await ensureRoomLive())) return;
+      const result = await roomsService.startTrackStream(roomId, {
+        trackId
+      });
+      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);
+    }
+  };
+
+  // Start a multi-track session: the first track plays now, the rest are
+  // persisted as the room's up-next queue.
+  const handleStartTrackQueue = async trackIds => {
+    if (loading || trackIds.length === 0) return;
+    const [first, ...rest] = trackIds;
+    setLoading(true);
+    try {
+      if (!(await ensureRoomLive())) return;
+      const result = await roomsService.startTrackStream(roomId, {
+        trackId: first,
+        queue: rest.map(trackId => ({
+          trackId
+        }))
+      });
+      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 generatingRef = useRef(false);
+  const generateKey = async () => {
+    if (generatingRef.current) return;
+    generatingRef.current = true;
+    setGeneratingKey(true);
+    try {
+      if (!(await ensureRoomLive())) return;
+      const result = await roomsService.generateStreamKey(roomId, {
+        title: title.trim() || undefined,
+        image: imageCdnUrl || undefined,
+        description: description.trim() || undefined
+      });
+      if (result?.streamKey) {
+        setRtmpUrl(result.rtmpUrl || '');
+        setStreamKey(result.streamKey);
+      } 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);
+      generatingRef.current = false;
+    }
+  };
+
+  // Auto-generate RTMP credentials when switching to the External App tab
+  useEffect(() => {
+    if (mode === 'rtmp' && !streamKey && !generatingRef.current) {
+      generateKey();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode]);
+  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: imageCdnUrl || 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__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(PanelHeader, {
+      title: "Stream Setup",
+      theme: theme,
+      onBack: onClose
+    }), /*#__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"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.modeTab, {
+          borderColor: theme.colors.border
+        }, mode === 'podcast' && {
+          backgroundColor: theme.colors.primary,
+          borderColor: theme.colors.primary
+        }],
+        onPress: () => setMode('podcast'),
+        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "podcast",
+          size: 16,
+          color: mode === 'podcast' ? '#FFFFFF' : theme.colors.text
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.modeTabText, {
+            color: mode === 'podcast' ? '#FFFFFF' : theme.colors.text
+          }],
+          children: "Podcast"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.modeTab, {
+          borderColor: theme.colors.border
+        }, mode === 'music' && {
+          backgroundColor: theme.colors.primary,
+          borderColor: theme.colors.primary
+        }],
+        onPress: () => setMode('music'),
+        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "music",
+          size: 16,
+          color: mode === 'music' ? '#FFFFFF' : theme.colors.text
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.modeTabText, {
+            color: mode === 'music' ? '#FFFFFF' : theme.colors.text
+          }],
+          children: "Music"
+        })]
+      })]
+    }), mode === 'podcast' ? /*#__PURE__*/_jsx(PodcastStreamPicker, {
+      onSelectEpisode: handleStartPodcast,
+      onStartQueue: handleStartPodcastQueue
+    }) : mode === 'music' ? /*#__PURE__*/_jsx(MusicPicker, {
+      onSelectTrack: handleStartTrack,
+      onStartQueue: handleStartTrackQueue
+    }) : /*#__PURE__*/_jsxs(ScrollView, {
+      style: {
+        flex: 1
+      },
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: [mode === 'url' && /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsx(TextInput, {
+          style: [styles.input, {
+            backgroundColor: `${theme.colors.card}80`,
+            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: !streamKey ? /*#__PURE__*/_jsxs(View, {
+          style: styles.loadingBox,
+          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: theme.colors.primary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.loadingText, {
+              color: theme.colors.textSecondary
+            }],
+            children: "Generating 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}80`,
+              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}80`,
+              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(TouchableOpacity, {
+            style: styles.regenerateBtn,
+            onPress: () => {
+              setStreamKey(null);
+              setRtmpUrl(null);
+              generateKey();
+            },
+            disabled: generatingKey,
+            children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "refresh",
+              size: 16,
+              color: theme.colors.textSecondary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.regenerateText, {
+                color: theme.colors.textSecondary
+              }],
+              children: "Regenerate key"
+            })]
+          })]
+        })
+      }), /*#__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}80`,
+            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}80`,
+            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}80`,
+            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' && streamKey && /*#__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: {
+    paddingBottom: 32
+  },
+  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'
+  },
+  loadingBox: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+    paddingVertical: 24
+  },
+  loadingText: {
+    fontSize: 14
+  },
+  credentialsBox: {
+    gap: 4
+  },
+  regenerateBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    marginTop: 12,
+    paddingVertical: 8
+  },
+  regenerateText: {
+    fontSize: 13,
+    fontWeight: '500'
+  },
+  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=StreamConfigPanel.js.map