@streamplace/components 0.8.17 → 0.8.18

package/dist/livestream-store/websocket-consumer.js

@@ -9,87 +9,109 @@ const problems_1 = require("./problems");
 const MAX_RECENT_SEGMENTS = 10;
 const handleWebSocketMessages = (state, messages) => {
     for (let message of messages) {
-        if (streamplace_1.PlaceStreamLivestream.isLivestreamView(message)) {
-            const newLivestream = message;
-            const oldLivestream = state.livestream;
-            // check if this is actually new
-            if (!oldLivestream || oldLivestream.uri !== newLivestream.uri) {
-                const streamTitle = newLivestream.record.title || "something cool!";
-                const systemMessage = system_messages_1.SystemMessages.streamStart(streamTitle);
-                // set proper times
-                systemMessage.indexedAt = newLivestream.indexedAt;
-                systemMessage.record.createdAt = newLivestream.record.createdAt;
-                state = (0, chat_1.reduceChat)(state, [systemMessage], []);
-            }
-            state = {
-                ...state,
-                livestream: newLivestream,
-            };
-        }
-        else if (streamplace_1.PlaceStreamLivestream.isViewerCount(message)) {
-            message = message;
+        if (message.$type === "place.stream.error") {
             state = {
                 ...state,
-                viewers: message.count,
-            };
-        }
-        else if (streamplace_1.PlaceStreamChatDefs.isMessageView(message)) {
-            message = message;
-            // Explicitly map MessageView to MessageViewHydrated
-            const hydrated = {
-                uri: message.uri,
-                cid: message.cid,
-                author: message.author,
-                record: message.record,
-                indexedAt: message.indexedAt,
-                chatProfile: message.chatProfile,
-                replyTo: message.replyTo,
-                deleted: message.deleted,
+                problems: [
+                    ...state.problems,
+                    {
+                        code: message.code,
+                        message: message.message,
+                        severity: "error",
+                    },
+                ],
             };
-            state = (0, chat_1.reduceChat)(state, [hydrated], [], []);
         }
-        else if (streamplace_1.PlaceStreamSegment.isRecord(message)) {
-            const newRecentSegments = [...state.recentSegments];
-            newRecentSegments.unshift(message);
-            if (newRecentSegments.length > MAX_RECENT_SEGMENTS) {
-                newRecentSegments.pop();
+        else {
+            if (!state.websocketConnected) {
+                state = {
+                    ...state,
+                    websocketConnected: true,
+                };
             }
-            state = {
-                ...state,
-                segment: message,
-                recentSegments: newRecentSegments,
-                problems: (0, problems_1.findProblems)(newRecentSegments),
-            };
-        }
-        else if (streamplace_1.PlaceStreamDefs.isBlockView(message)) {
-            const block = message;
-            state = (0, chat_1.reduceChat)(state, [], [block], []);
-        }
-        else if (streamplace_1.PlaceStreamDefs.isRenditions(message)) {
-            message = message;
-            state = {
-                ...state,
-                renditions: message.renditions,
-            };
-        }
-        else if (api_1.AppBskyActorDefs.isProfileViewBasic(message)) {
-            state = {
-                ...state,
-                profile: message,
-            };
-        }
-        else if (streamplace_1.PlaceStreamChatGate.isRecord(message)) {
-            const hideRecord = message;
-            const hiddenMessageUri = hideRecord.hiddenMessage;
-            const newPendingHides = [...state.pendingHides];
-            if (!newPendingHides.includes(hiddenMessageUri)) {
-                newPendingHides.push(hiddenMessageUri);
+            if (streamplace_1.PlaceStreamLivestream.isLivestreamView(message)) {
+                const newLivestream = message;
+                const oldLivestream = state.livestream;
+                // check if this is actually new
+                if (!oldLivestream || oldLivestream.uri !== newLivestream.uri) {
+                    const streamTitle = newLivestream.record.title || "something cool!";
+                    const systemMessage = system_messages_1.SystemMessages.streamStart(streamTitle);
+                    // set proper times
+                    systemMessage.indexedAt = newLivestream.indexedAt;
+                    systemMessage.record.createdAt = newLivestream.record.createdAt;
+                    state = (0, chat_1.reduceChat)(state, [systemMessage], []);
+                }
+                state = {
+                    ...state,
+                    livestream: newLivestream,
+                };
+            }
+            else if (streamplace_1.PlaceStreamLivestream.isViewerCount(message)) {
+                message = message;
+                state = {
+                    ...state,
+                    viewers: message.count,
+                };
+            }
+            else if (streamplace_1.PlaceStreamChatDefs.isMessageView(message)) {
+                message = message;
+                // Explicitly map MessageView to MessageViewHydrated
+                const hydrated = {
+                    uri: message.uri,
+                    cid: message.cid,
+                    author: message.author,
+                    record: message.record,
+                    indexedAt: message.indexedAt,
+                    chatProfile: message.chatProfile,
+                    replyTo: message.replyTo,
+                    deleted: message.deleted,
+                };
+                state = (0, chat_1.reduceChat)(state, [hydrated], [], []);
+            }
+            else if (streamplace_1.PlaceStreamSegment.isRecord(message)) {
+                const newRecentSegments = [...state.recentSegments];
+                newRecentSegments.unshift(message);
+                if (newRecentSegments.length > MAX_RECENT_SEGMENTS) {
+                    newRecentSegments.pop();
+                }
+                state = {
+                    ...state,
+                    segment: message,
+                    recentSegments: newRecentSegments,
+                    problems: (0, problems_1.findProblems)(newRecentSegments),
+                    hasReceivedSegment: true,
+                };
+            }
+            else if (streamplace_1.PlaceStreamDefs.isBlockView(message)) {
+                const block = message;
+                state = (0, chat_1.reduceChat)(state, [], [block], []);
+            }
+            else if (streamplace_1.PlaceStreamDefs.isRenditions(message)) {
+                message = message;
+                state = {
+                    ...state,
+                    renditions: message.renditions,
+                };
+            }
+            else if (api_1.AppBskyActorDefs.isProfileViewBasic(message)) {
+                state = {
+                    ...state,
+                    profile: message,
+                };
+            }
+            else if (streamplace_1.PlaceStreamChatGate.isRecord(message)) {
+                const hideRecord = message;
+                const hiddenMessageUri = hideRecord.hiddenMessage;
+                const newPendingHides = [...state.pendingHides];
+                if (!newPendingHides.includes(hiddenMessageUri)) {
+                    newPendingHides.push(hiddenMessageUri);
+                }
+                state = {
+                    ...state,
+                    pendingHides: newPendingHides,
+                };
+                state = (0, chat_1.reduceChat)(state, [], [], [hiddenMessageUri]);
             }
-            state = {
-                ...state,
-                pendingHides: newPendingHides,
-            };
-            state = (0, chat_1.reduceChat)(state, [], [], [hiddenMessageUri]);
         }
     }
     return (0, chat_1.reduceChat)(state, [], [], []);

package/dist/livestream-store/websocket-consumer.js.map

@@ -1 +1 @@
-{"version":3,"file":"websocket-consumer.js","sourceRoot":"","sources":["../../src/livestream-store/websocket-consumer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"websocket-consumer.js","sourceRoot":"","sources":["../../src/livestream-store/websocket-consumer.tsx"],"names":[],"mappings":"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"}

package/locales/en-US/common.ftl

@@ -44,3 +44,19 @@ notification-count = { $count ->
     [1] One notification
    *[other] { $count } notifications
 }
+
+## Offline User
+user-offline = user is offline
+user-offline-message = { $source ->
+    [streamer] Looks like <1>@{ $handle } is offline</1>, but they recommend checking out:
+   *[default] Looks like <1>@{ $handle } is offline</1>, but we recommend checking out:
+}
+user-offline-no-recommendations = 
+  Looks like <1>@{ $handle } is offline</1> right now.
+  Check back later.
+streaming-title = streaming { $title }
+viewer-count = { $count ->
+    [0] 0 viewers
+    [1] 1 viewer
+   *[other] { $count } viewers
+}

package/locales/en-US/settings.ftl

@@ -80,6 +80,19 @@ keys-count = { $count ->
    *[other] { $count } keys
 }
 
+## Recommendations
+recommendations = Recommendations
+manage-recommendations = Manage Recommendations
+recommendations-to-others = Recommendations to Others
+recommendations-description = Share up to 8 streamers you recommend to your viewers
+no-recommendations-yet = No recommendations configured yet
+add-recommendation = Add Recommendation
+streamer-did = Streamer DID
+recommendations-count = { $count ->
+    [one] { $count } recommendation
+   *[other] { $count } recommendations
+}
+
 ## Webhook Management
 webhooks = Webhooks
 webhook-integrations = Webhook Integrations

package/locales/es-ES/common.ftl

@@ -44,3 +44,19 @@ notification-count = { $count ->
     [1] Una notificación
    *[other] { $count } notificaciones
 }
+
+## Offline User
+user-offline = usuario desconectado
+user-offline-message = { $source ->
+    [streamer] Parece que <1>@{ $handle } está desconectado</1>, pero ellos recomiendan ver:
+   *[default] Parece que <1>@{ $handle } está desconectado</1>, pero te recomendamos ver:
+}
+user-offline-no-recommendations = 
+  Parece que <1>@{ $handle } está desconectado</1> ahora mismo.
+  Vuelve más tarde.
+streaming-title = transmitiendo { $title }
+viewer-count = { $count ->
+    [0] 0 espectadores
+    [1] 1 espectador
+   *[other] { $count } espectadores
+}

package/locales/es-ES/settings.ftl

@@ -113,7 +113,7 @@ key-manager = Gestor de Claves
 manage-keys = Gestionar Claves
 your-stream-pubkeys = Tus Claves Públicas de Transmisión
 no-keys = No hay claves configuradas
-pubkey-description = Las claves públicas se emparejan con claves de transmisión (usadas en software de streaming) para firmar y verificar tu transmisión
+pubkey-description = Las claves públicas se emparejan con claves de transmisión (usadas en software de transmitiendo) para firmar y verificar tu transmisión
 
 keys-count = { $count ->
     [one] { $count } clave

package/locales/fr-FR/common.ftl

@@ -44,3 +44,19 @@ notification-count = { $count ->
     [1] Une notification
    *[other] { $count } notifications
 }
+
+## Offline User
+user-offline = utilisateur hors ligne
+user-offline-message = { $source ->
+    [streamer] On dirait que <1>@{ $handle } est hors ligne</1>, mais ils recommandent de regarder :
+   *[default] On dirait que <1>@{ $handle } est hors ligne</1>, mais nous recommandons de regarder :
+}
+user-offline-no-recommendations = 
+  On dirait que <1>@{ $handle } est hors ligne</1> maintenant.
+  Revenez plus tard.
+streaming-title = diffusion de { $title }
+viewer-count = { $count ->
+    [0] 0 spectateurs
+    [1] 1 spectateur
+   *[other] { $count } spectateurs
+}

package/locales/pt-BR/common.ftl

@@ -44,3 +44,19 @@ notification-count = { $count ->
     [1] Uma notificação
    *[other] { $count } notificações
 }
+
+## Offline User
+user-offline = usuário offline
+user-offline-message = { $source ->
+    [streamer] Parece que <1>@{ $handle } está offline</1>, mas eles recomendam assistir:
+   *[default] Parece que <1>@{ $handle } está offline</1>, mas recomendamos assistir:
+}
+user-offline-no-recommendations = 
+  Parece que <1>@{ $handle } está offline</1> agora.
+  Volte mais tarde.
+streaming-title = transmitindo { $title }
+viewer-count = { $count ->
+    [0] 0 espectadores
+    [1] 1 espectador
+   *[other] { $count } espectadores
+}

package/locales/pt-BR/settings.ftl

@@ -111,7 +111,7 @@ key-manager = Gerenciador de Chaves
 manage-keys = Gerenciar Chaves
 your-stream-pubkeys = Suas Chaves Públicas de Transmissão
 no-keys = Nenhuma chave configurada
-pubkey-description = Chaves públicas são emparelhadas com chaves de transmissão (usadas em software de streaming) para assinar e verificar sua transmissão
+pubkey-description = Chaves públicas são emparelhadas com chaves de transmissão (usadas em software de transmitindo) para assinar e verificar sua transmissão
 
 keys-count = { $count ->
     [one] { $count } chave

package/locales/zh-Hant/common.ftl

@@ -44,3 +44,19 @@ notification-count = { $count ->
     [1] 一則通知
    *[other] { $count } 則通知
 }
+
+## Offline User
+user-offline = 使用者離線
+user-offline-message = { $source ->
+    [streamer] 看起來 <1>@{ $handle } 離線</1> 了，但他們推薦觀看：
+   *[default] 看起來 <1>@{ $handle } 離線</1> 了，但我們推薦觀看：
+}
+user-offline-no-recommendations = 
+  看起來 <1>@{ $handle } 離線</1> 了。
+  請稍後再來看看。
+streaming-title = 正在直播 { $title }
+viewer-count = { $count ->
+    [0] 0 位觀眾
+    [1] 1 位觀眾
+   *[other] { $count } 位觀眾
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.8.17",
+  "version": "0.8.18",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -78,5 +78,5 @@
     "i18n:watch": "nodemon --watch 'locales/**/*.ftl' --exec 'node scripts/compile-translations.js'",
     "i18n:extract": "i18next-cli extract && node scripts/migrate-i18n.js"
   },
-  "gitHead": "80f92d685c83c1065486e447b05a365d0cfc4d01"
+  "gitHead": "d9cde37cadad4b378cbdc00c640edcaa4717b005"
 }

package/src/components/mobile-player/video-async.native.tsx

@@ -414,7 +414,8 @@ export function NativeIngestPlayer(props?: {
             variant="secondary"
           >
             <View style={[layout.flex.row, gap.all[1]]}>
-              <Text>Open Settings</Text> <ArrowRight color="white" size="18" />
+              <Text>Open Settings</Text>
+              <ArrowRight color="white" size="18" />
             </View>
           </Button>
         )}

package/src/components/ui/menu.tsx

@@ -1,5 +1,18 @@
-import { forwardRef, ReactNode } from "react";
-import { Platform, View, ViewStyle } from "react-native";
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  ReactNode,
+} from "react";
+import { Animated, Platform, View, ViewStyle } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
 import {
   a,
   borderRadius,
@@ -64,11 +77,114 @@ export interface MenuItemProps {
   disabled?: boolean;
   style?: ViewStyle;
   onPress?: () => void;
+  draggable?: boolean;
+  dragHandle?: ReactNode;
+  _dragIndex?: number;
+  _dragTotalItems?: number;
+  _onDragMove?: (fromIndex: number, toIndex: number) => void;
+  _onDragEnd?: (fromIndex: number, toIndex: number) => void;
 }
 
 export const MenuItem = forwardRef<View, MenuItemProps>(
-  ({ children, disabled, style }, ref) => {
+  (
+    {
+      children,
+      disabled,
+      style,
+      draggable,
+      dragHandle,
+      _dragIndex,
+      _dragTotalItems,
+      _onDragMove,
+      _onDragEnd,
+    },
+    ref,
+  ) => {
     const { theme } = useTheme();
+
+    if (
+      draggable &&
+      _dragIndex !== undefined &&
+      _dragTotalItems !== undefined &&
+      _onDragMove &&
+      _onDragEnd
+    ) {
+      const translateY = useSharedValue(0);
+      const isDragging = useSharedValue(false);
+      const ITEM_HEIGHT = 60;
+
+      const panGesture = Gesture.Pan()
+        .onStart(() => {
+          isDragging.value = true;
+        })
+        .onUpdate((event) => {
+          translateY.value = event.translationY;
+
+          const newIndex = Math.round(
+            _dragIndex + translateY.value / ITEM_HEIGHT,
+          );
+          const clampedIndex = Math.max(
+            0,
+            Math.min(_dragTotalItems - 1, newIndex),
+          );
+
+          if (clampedIndex !== _dragIndex) {
+            runOnJS(_onDragMove)(_dragIndex, clampedIndex);
+          }
+        })
+        .onEnd(() => {
+          const newIndex = Math.round(
+            _dragIndex + translateY.value / ITEM_HEIGHT,
+          );
+          const clampedIndex = Math.max(
+            0,
+            Math.min(_dragTotalItems - 1, newIndex),
+          );
+
+          runOnJS(_onDragEnd)(_dragIndex, clampedIndex);
+
+          translateY.value = withSpring(0);
+          isDragging.value = false;
+        });
+
+      const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+        zIndex: isDragging.value ? 100 : 1,
+        opacity: isDragging.value ? 0.8 : 1,
+      }));
+
+      return (
+        <Animated.View style={animatedStyle}>
+          <View
+            ref={ref}
+            style={[
+              a.layout.flex.row,
+              a.layout.flex.alignCenter,
+              a.radius.all.sm,
+              py[1],
+              pl[3],
+              pr[2],
+              disabled && { opacity: 0.5 },
+              style,
+            ]}
+          >
+            {dragHandle && (
+              <GestureDetector gesture={panGesture}>
+                <View style={{ marginRight: 8 }}>{dragHandle}</View>
+              </GestureDetector>
+            )}
+            {typeof children === "string" ? (
+              <Text style={{ color: theme.colors.popoverForeground }}>
+                {children}
+              </Text>
+            ) : (
+              children
+            )}
+          </View>
+        </Animated.View>
+      );
+    }
+
     return (
       <View
         ref={ref}
@@ -169,3 +285,64 @@ export const MenuInfo = forwardRef<View, MenuInfoProps>(
     );
   },
 );
+
+export interface MenuDraggableGroupProps {
+  children: ReactNode;
+  onMove: (fromIndex: number, toIndex: number) => void;
+  onDragEnd: (fromIndex: number, toIndex: number) => void;
+  dragHandle?: ReactNode;
+  style?: ViewStyle;
+}
+
+export const MenuDraggableGroup = forwardRef<View, MenuDraggableGroupProps>(
+  ({ children, onMove, onDragEnd, dragHandle, style }, ref) => {
+    const { theme } = useTheme();
+
+    const childrenArray = Children.toArray(children);
+    const draggableItems = childrenArray.filter(
+      (child) =>
+        isValidElement(child) &&
+        (child.type === MenuItem || child.type === MenuSeparator),
+    );
+
+    let itemIndex = 0;
+    const enhancedChildren = Children.map(children, (child) => {
+      if (isValidElement(child)) {
+        if (child.type === MenuItem) {
+          const currentIndex = itemIndex;
+          itemIndex++;
+
+          return cloneElement(child, {
+            draggable: true,
+            dragHandle: dragHandle || child.props.dragHandle,
+            _dragIndex: currentIndex,
+            _dragTotalItems: draggableItems.filter(
+              (c) => isValidElement(c) && c.type === MenuItem,
+            ).length,
+            _onDragMove: onMove,
+            _onDragEnd: onDragEnd,
+          } as any);
+        }
+        if (child.type === MenuSeparator) {
+          return child;
+        }
+      }
+      return child;
+    });
+
+    return (
+      <View
+        ref={ref}
+        style={[
+          { backgroundColor: theme.colors.muted + "c0" },
+          Platform.OS === "web" ? [px[1], py[1]] : p[1],
+          gap.all[1],
+          { borderRadius: borderRadius.lg },
+          style,
+        ]}
+      >
+        {enhancedChildren}
+      </View>
+    );
+  },
+);

package/src/lib/theme/tokens.ts

@@ -595,7 +595,7 @@ export const typography = {
     xs: {
       fontSize: 12,
       lineHeight: 16,
-      marginBottom: -0.7,
+      marginBottom: -0.3,
       fontWeight: "400" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Regular",
     },

package/src/livestream-provider/index.tsx

@@ -5,9 +5,11 @@ import { useLivestreamWebsocket } from "./websocket";
 export function LivestreamProvider({
   children,
   src,
+  ignoreOuterContext = false,
 }: {
   children: React.ReactNode;
   src: string;
+  ignoreOuterContext?: boolean;
 }) {
   const context = useContext(LivestreamContext);
   const store = useRef(makeLivestreamStore()).current;
@@ -15,7 +17,9 @@ export function LivestreamProvider({
     // this is ok, there's use cases for having one in another
     // like having a player component that's independently usable
     // but can also be embedded within an entire livestream page
-    return <>{children}</>;
+    if (!ignoreOuterContext) {
+      return <>{children}</>;
+    }
   }
   (window as any).livestreamStore = store;
   return (

package/src/livestream-provider/websocket.tsx

@@ -12,17 +12,30 @@ export function useLivestreamWebsocket(src: string) {
 
   const ref = useRef<any[]>([]);
   const handle = useRef<NodeJS.Timeout | null>(null);
+  const hasReceivedMessage = useRef(false);
+  const hasErrored = useRef(false);
 
   const { readyState } = useWebSocket(`${wsUrl}/api/websocket/${src}`, {
     reconnectInterval: 1000,
-    shouldReconnect: () => true,
+    shouldReconnect: () => !hasErrored.current,
 
     onOpen: () => {
       ref.current = [];
+      hasReceivedMessage.current = false;
     },
 
     onError: (e) => {
       console.log("onError", e);
+      if (!hasReceivedMessage.current) {
+        hasErrored.current = true;
+        handleWebSocketMessages([
+          {
+            $type: "place.stream.error",
+            code: "user_not_found",
+            message: "this stream doesn't exist or is unavailable",
+          },
+        ]);
+      }
     },
 
     // spamming the redux store with messages causes a zillion re-renders,
@@ -30,6 +43,7 @@ export function useLivestreamWebsocket(src: string) {
     onMessage: (msg) => {
       try {
         const data = JSON.parse(msg.data);
+        hasReceivedMessage.current = true;
         ref.current.push(data);
         if (handle.current) {
           return;

package/src/livestream-store/livestream-state.tsx

@@ -21,6 +21,8 @@ export interface LivestreamState {
   replyToMessage: ChatMessageViewHydrated | null;
   streamKey: string | null;
   setStreamKey: (key: string | null) => void;
+  websocketConnected: boolean;
+  hasReceivedSegment: boolean;
 }
 
 export interface LivestreamProblem {