@syra.fm/sdk 0.13.1 → 0.14.1

package/src/live/components/CreateRoomSheet.tsx

@@ -7,12 +7,25 @@ import {
   TextInput,
   ScrollView,
   FlatList,
+  AccessibilityInfo,
 } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 
 import { useLiveConfig } from '../context/LiveConfigContext';
 import { useLiveRoom } from '../context/LiveRoomContext';
 import type { Room, House } from '../types';
+import { LIVE_COLOR, LIVE_TINT_COLOR } from '../colors';
+
+/**
+ * Failure copy the sheet shows INLINE. It used to go to the host `toast`, but
+ * the sheet is usually presented in a native modal window, and a toast renders
+ * in the main window underneath it: a failed create (a 401 from an expired
+ * session, a network drop) looked like a button that did nothing.
+ */
+export const CREATE_ROOM_ERRORS = {
+  createFailed: "Couldn't create the room. Check your connection and that you're signed in, then try again.",
+  scheduleMissing: 'Enter a scheduled start time to schedule the room.',
+} as const;
 
 const TOPICS = [
   'Technology',
@@ -82,6 +95,7 @@ export const CreateRoomSheet = forwardRef<CreateRoomSheetRef, CreateRoomSheetPro
   const [selectedHouse, setSelectedHouse] = useState<House | null>(null);
   const [recordingEnabled, setRecordingEnabled] = useState(true);
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   const isValid = title.trim().length > 0;
   const isBroadcast = roomType === 'broadcast';
@@ -101,9 +115,17 @@ export const CreateRoomSheet = forwardRef<CreateRoomSheetRef, CreateRoomSheetPro
     recordingEnabled,
   });
 
+  // Keep the sheet open and say what went wrong where the user is looking, so
+  // they can fix it and retry. Screen readers get it announced too.
+  const showError = (message: string) => {
+    setError(message);
+    AccessibilityInfo.announceForAccessibility?.(message);
+  };
+
   const handleCreateAndStart = async () => {
     if (!isValid || loading) return;
 
+    setError(null);
     setLoading(true);
     try {
       const room = await roomsService.createRoom(buildCreatePayload());
@@ -118,11 +140,11 @@ export const CreateRoomSheet = forwardRef<CreateRoomSheetRef, CreateRoomSheetPro
         }
         onRoomCreated?.(room);
       } else {
-        toast.error('Failed to create room');
+        showError(CREATE_ROOM_ERRORS.createFailed);
       }
-    } catch (error) {
-      console.error('Error creating room:', error);
-      toast.error('Failed to create room');
+    } catch (err) {
+      console.error('Error creating room:', err);
+      showError(CREATE_ROOM_ERRORS.createFailed);
     } finally {
       setLoading(false);
     }
@@ -132,10 +154,11 @@ export const CreateRoomSheet = forwardRef<CreateRoomSheetRef, CreateRoomSheetPro
     if (!isValid || loading) return;
 
     if (!scheduledStart.trim()) {
-      toast.error('Please enter a scheduled start time');
+      showError(CREATE_ROOM_ERRORS.scheduleMissing);
       return;
     }
 
+    setError(null);
     setLoading(true);
     try {
       const room = await roomsService.createRoom({
@@ -147,11 +170,11 @@ export const CreateRoomSheet = forwardRef<CreateRoomSheetRef, CreateRoomSheetPro
         onClose();
         onRoomCreated?.(room);
       } else {
-        toast.error('Failed to create room');
+        showError(CREATE_ROOM_ERRORS.createFailed);
       }
-    } catch (error) {
-      console.error('Error creating room:', error);
-      toast.error('Failed to create room');
+    } catch (err) {
+      console.error('Error creating room:', err);
+      showError(CREATE_ROOM_ERRORS.createFailed);
     } finally {
       setLoading(false);
     }
@@ -160,6 +183,7 @@ export const CreateRoomSheet = forwardRef<CreateRoomSheetRef, CreateRoomSheetPro
   const handleCreateForEmbed = async () => {
     if (!isValid || loading) return;
 
+    setError(null);
     setLoading(true);
     try {
       const room = await roomsService.createRoom(buildCreatePayload());
@@ -168,11 +192,11 @@ export const CreateRoomSheet = forwardRef<CreateRoomSheetRef, CreateRoomSheetPro
         onClose();
         onRoomCreated?.(room);
       } else {
-        toast.error('Failed to create room');
+        showError(CREATE_ROOM_ERRORS.createFailed);
       }
-    } catch (error) {
-      console.error('Error creating room:', error);
-      toast.error('Failed to create room');
+    } catch (err) {
+      console.error('Error creating room:', err);
+      showError(CREATE_ROOM_ERRORS.createFailed);
     } finally {
       setLoading(false);
     }
@@ -260,7 +284,12 @@ export const CreateRoomSheet = forwardRef<CreateRoomSheetRef, CreateRoomSheetPro
   return (
     <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
       <View style={[styles.header, { borderBottomColor: theme.colors.border }]}>
-        <TouchableOpacity onPress={onClose} style={styles.headerCloseBtn}>
+        <TouchableOpacity
+          onPress={onClose}
+          style={styles.headerCloseBtn}
+          accessibilityRole="button"
+          accessibilityLabel="Close"
+        >
           <MaterialCommunityIcons name="close" size={20} color={theme.colors.text} />
         </TouchableOpacity>
         <Text style={[styles.headerTitle, { color: theme.colors.text }]}>
@@ -269,6 +298,18 @@ export const CreateRoomSheet = forwardRef<CreateRoomSheetRef, CreateRoomSheetPro
         <View style={{ width: 28 }} />
       </View>
 
+      {error && (
+        <View
+          testID="create-room-error"
+          accessibilityRole="alert"
+          accessibilityLiveRegion="assertive"
+          style={[styles.errorBanner, { backgroundColor: LIVE_TINT_COLOR, borderColor: LIVE_COLOR }]}
+        >
+          <MaterialCommunityIcons name="alert-circle-outline" size={18} color={LIVE_COLOR} />
+          <Text style={[styles.errorText, { color: theme.colors.text }]}>{error}</Text>
+        </View>
+      )}
+
       <Scroll
         style={{ flex: 1 }}
         contentContainerStyle={[styles.scrollContent, hideFooter && { paddingBottom: 72 }]}
@@ -532,6 +573,18 @@ const styles = StyleSheet.create({
   },
   headerCloseBtn: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },
   headerTitle: { fontSize: 16, fontWeight: '600' },
+  errorBanner: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+    marginHorizontal: 16,
+    marginTop: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  errorText: { flex: 1, fontSize: 13, lineHeight: 18 },
   scrollContent: { paddingVertical: 16, paddingBottom: 12 },
   sectionPadded: { paddingHorizontal: 16 },
   inputSection: { marginBottom: 16 },

package/src/live/components/InsightsPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { View, Text, StyleSheet, ScrollView } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 
 import { PanelHeader } from './PanelHeader';
 import type { Room, RoomParticipant, LiveTheme } from '../types';

package/src/live/components/LiveRoomSheet.tsx

@@ -8,7 +8,7 @@ import {
   ScrollView,
   type ViewStyle,
 } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 import { useAuth } from '@oxy.so/services';
 
 import { useLiveConfig } from '../context/LiveConfigContext';

package/src/live/components/MiniRoomBar.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,

package/src/live/components/PanelHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 
 import type { LiveTheme } from '../types';
 

package/src/live/components/PodcastStreamPicker.tsx

@@ -10,7 +10,7 @@ import {
   Linking,
 } from 'react-native';
 import type { ViewStyle } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 
 import { useLiveConfig, type PinnedPodcast } from '../context/LiveConfigContext';
 import type { LiveTheme } from '../types';

package/src/live/components/RecordingCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, StyleProp, ViewStyle } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 import { useAuth } from '@oxy.so/services';
 
 import { useLiveConfig } from '../context/LiveConfigContext';

package/src/live/components/RecordingsPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 
 import { PanelHeader } from './PanelHeader';
 import { useLiveConfig } from '../context/LiveConfigContext';

package/src/live/components/RoomCard.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { View, Text, TouchableOpacity, StyleProp, ViewStyle } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 import { useAuth } from '@oxy.so/services';
 
 import { useLiveConfig } from '../context/LiveConfigContext';

package/src/live/components/StreamConfigModal.tsx

@@ -12,7 +12,7 @@ import {
   ScrollView,
   KeyboardAvoidingView,
 } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 import { useAuth } from '@oxy.so/services';
 import * as ImagePicker from 'expo-image-picker';
 

package/src/live/components/StreamConfigPanel.tsx

@@ -10,7 +10,7 @@ import {
   Platform,
   ScrollView,
 } from 'react-native';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 import * as ImagePicker from 'expo-image-picker';
 
 import { useLiveConfig } from '../context/LiveConfigContext';

package/src/live/icons/MaterialCommunityIcons.tsx

@@ -0,0 +1,33 @@
+import React, { type ComponentProps } from 'react';
+// The SUBPATH, never the `@expo/vector-icons` barrel: the barrel re-exports every
+// icon family, so one glyph through it drags every family's font into a web
+// bundle.
+import BaseMaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+
+export type MaterialCommunityIconsProps = ComponentProps<typeof BaseMaterialCommunityIcons>;
+
+/**
+ * The live-rooms UI's one entry to the MaterialCommunityIcons glyph font. SDK
+ * components import this, never `@expo/vector-icons/MaterialCommunityIcons`
+ * directly — `src/live/icons/glyphImports.test.ts` fails the suite if one does.
+ *
+ * A vector-icons glyph is a `Text` node whose content is a private-use code
+ * point. A screen reader reads it like any other text, so the Create Room sheet
+ * announced its options as "\U000f036c, Talk, Open conversation" and its button
+ * as "\U000f040a, Start Now": on Android RN builds an unlabelled pressable's
+ * description from its children's text, code point included.
+ *
+ * Every glyph in the SDK is decorative — the control around it carries the
+ * words, or an `accessibilityLabel` — so the glyph is hidden from assistive
+ * technology here, once, rather than at each call site where the next icon
+ * would forget it. `aria-hidden` is `importantForAccessibility=
+ * "no-hide-descendants"` on Android, `accessibilityElementsHidden` on iOS and
+ * `aria-hidden` on web. It is applied AFTER the caller's props so a call site
+ * cannot switch it back on: a glyph that needs a name belongs inside a control
+ * that has one.
+ */
+export function MaterialCommunityIcons(props: MaterialCommunityIconsProps) {
+  return <BaseMaterialCommunityIcons {...props} aria-hidden />;
+}
+
+export default MaterialCommunityIcons;

package/src/schema.ts

@@ -82,6 +82,17 @@ export const podcastSummarySchema = z.object({
 });
 export type PodcastSummary = z.infer<typeof podcastSummarySchema>;
 
+/**
+ * One show the caller is subscribed to, from `GET /api/podcasts/subscriptions`.
+ * `lastEpisodeAt` is the newest episode's publish time — what a client compares
+ * against its own last visit to badge a show with new episodes.
+ */
+export const podcastSubscriptionSchema = z.object({
+  podcast: podcastSummarySchema,
+  lastEpisodeAt: z.string().optional(),
+});
+export type PodcastSubscription = z.infer<typeof podcastSubscriptionSchema>;
+
 /**
  * The summary view of a podcast EPISODE returned by the public podcast endpoints
  * (`GET /api/podcasts/:id/episodes`, `GET /api/episodes/:id`) — just enough to