@streamplace/components 0.8.9 → 0.8.13

package/src/components/chat/mod-view.tsx

@@ -12,6 +12,7 @@ import { Linking } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { useDeleteChatMessage } from "../../livestream-store";
 import { useStreamplaceStore } from "../../streamplace-store";
+import { formatHandle, formatHandleWithAt } from "../../utils/format-handle";
 import {
   atoms,
   DropdownMenu,
@@ -113,7 +114,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
                       minute: "2-digit",
                       hour12: false,
                     })}{" "}
-                    @{message.author.handle}: {message.record.text}
+                    {formatHandleWithAt(message.author)}: {message.record.text}
                   </Text>
                 </View>
               </DropdownMenuItem>
@@ -159,7 +160,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
                     <Text color="destructive">
                       {isBlockLoading
                         ? "Blocking..."
-                        : `Block user @${message.author.handle} from this channel`}
+                        : `Block user ${formatHandleWithAt(message.author)} from this channel`}
                     </Text>
                   )}
                 </DropdownMenuItem>
@@ -170,7 +171,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
               <DropdownMenuItem
                 onPress={() => {
                   Linking.openURL(
-                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`,
+                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${formatHandle(message.author)}`,
                   );
                 }}
               >

package/src/components/content-metadata/content-metadata-form.tsx

@@ -684,17 +684,19 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                       ]}
                     >
                       <Text
+                        leading="tight"
                         style={[
                           text.neutral[300],
                           {
                             minWidth: 100,
+                            maxWidth: 100,
                             textAlign: "left",
                             paddingBottom: 8,
                             fontSize: 14,
                           },
                         ]}
                       >
-                        Allowed<br></br>Broadcasters
+                        Allowed Broadcasters
                       </Text>
                       <View style={[flex.values[1]]}>
                         <Text

package/src/components/danmu/danmu-message.tsx

@@ -0,0 +1,182 @@
+import { memo, useEffect, useState } from "react";
+import { LayoutChangeEvent, StyleSheet } from "react-native";
+import Animated, {
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { ChatMessageViewHydrated } from "streamplace";
+import { Text } from "../ui";
+import { baseDuration, mapRange, MAX_DURATION, MIN_DURATION } from "./math";
+
+interface DanmuMessageProps {
+  message: ChatMessageViewHydrated;
+  lane: number;
+  laneHeight: number;
+  videoTop: number;
+  opacity: number;
+  fontSize: number;
+  speed: number;
+  containerWidth: number;
+  containerHeight: number;
+  onComplete: (messageId: string) => void;
+  onWidthMeasured?: (messageId: string, width: number) => void;
+}
+
+export const DanmuMessage = memo(
+  ({
+    message,
+    lane,
+    laneHeight,
+    videoTop,
+    opacity,
+    fontSize,
+    speed,
+    containerWidth,
+    containerHeight,
+    onComplete,
+    onWidthMeasured,
+  }: DanmuMessageProps) => {
+    const translateX = useSharedValue(containerWidth);
+    const [messageWidth, setMessageWidth] = useState(0);
+    const [animationStartTime, setAnimationStartTime] = useState<number | null>(
+      null,
+    );
+    const [totalDuration, setTotalDuration] = useState(0);
+
+    const getRgbColor = (
+      color: {
+        red: number;
+        green: number;
+        blue: number;
+      } = { red: 123, green: 123, blue: 123 },
+    ) => {
+      const red = mapRange(color.red, 0, 255, 100, 230);
+      const green = mapRange(color.green, 0, 255, 100, 230);
+      const blue = mapRange(color.blue, 0, 255, 100, 230);
+
+      return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
+    };
+
+    const handleLayout = (event: LayoutChangeEvent) => {
+      const width = event.nativeEvent.layout.width;
+      if (width > 0) {
+        setMessageWidth(width);
+        if (onWidthMeasured) {
+          onWidthMeasured(message.uri, width);
+        }
+      }
+    };
+
+    useEffect(() => {
+      if (messageWidth === 0) return; // Wait for layout measurement
+
+      const duration = baseDuration(message, MAX_DURATION, MIN_DURATION);
+
+      // Calculate how much time has elapsed if animation already started
+      let remainingDuration = duration;
+      let startPosition = containerWidth;
+
+      if (animationStartTime !== null) {
+        const elapsed = Date.now() - animationStartTime;
+        const progress = Math.min(elapsed / totalDuration, 1);
+        remainingDuration = duration * (1 - progress);
+        startPosition =
+          containerWidth + progress * (-messageWidth - containerWidth);
+      } else {
+        setAnimationStartTime(Date.now());
+        setTotalDuration(duration);
+      }
+
+      if (__DEV__)
+        console.log(
+          `[danmu] animation started: "${message.record.text}" (duration: ${duration.toFixed(0)}ms, remaining: ${remainingDuration.toFixed(0)}ms, speed: ${speed}x)`,
+        );
+
+      translateX.value = startPosition;
+
+      translateX.value = withTiming(
+        -messageWidth,
+        {
+          duration: remainingDuration,
+          easing: Easing.linear,
+        },
+        (finished) => {
+          if (finished) {
+            runOnJS(onComplete)(message.uri);
+          }
+        },
+      );
+    }, [
+      messageWidth,
+      containerWidth,
+      speed,
+      message.uri,
+      message.record.text.length,
+      lane,
+      onComplete,
+    ]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        transform: [{ translateX: translateX.value }],
+      };
+    });
+
+    return (
+      <Animated.View
+        style={[
+          styles.container,
+          {
+            top: videoTop + lane * laneHeight,
+            opacity: opacity / 100,
+          },
+          animatedStyle,
+        ]}
+        onLayout={handleLayout}
+      >
+        <Text
+          style={[
+            styles.text,
+            {
+              fontSize,
+              color: getRgbColor(message.chatProfile?.color),
+            },
+          ]}
+          numberOfLines={1}
+        >
+          {message.record.text}
+        </Text>
+      </Animated.View>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.message.uri === nextProps.message.uri &&
+      prevProps.lane === nextProps.lane &&
+      prevProps.laneHeight === nextProps.laneHeight &&
+      prevProps.videoTop === nextProps.videoTop &&
+      prevProps.opacity === nextProps.opacity &&
+      prevProps.fontSize === nextProps.fontSize &&
+      prevProps.speed === nextProps.speed &&
+      prevProps.containerWidth === nextProps.containerWidth &&
+      prevProps.containerHeight === nextProps.containerHeight
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 0,
+  },
+  text: {
+    color: "white",
+    textShadowColor: "rgba(0, 0, 0, 0.8)",
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 64,
+    fontWeight: "600",
+  },
+});

package/src/components/danmu/danmu-overlay-obs.tsx

@@ -0,0 +1,44 @@
+import { StyleSheet } from "react-native";
+import { View } from "../ui";
+import { DanmuOverlay } from "./danmu-overlay";
+
+interface DanmuOverlayOBSProps {
+  channelDid?: string;
+  enabled?: boolean;
+  opacity?: number;
+  speed?: number;
+  laneCount?: number;
+  maxMessages?: number;
+}
+
+export function DanmuOverlayOBS({
+  channelDid,
+  enabled = true,
+  opacity = 80,
+  speed = 1,
+  laneCount = 12,
+  maxMessages = 50,
+}: DanmuOverlayOBSProps) {
+  return (
+    <View style={styles.container}>
+      <DanmuOverlay
+        enabled={enabled}
+        opacity={opacity}
+        speed={speed}
+        laneCount={laneCount}
+        maxMessages={maxMessages}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "transparent",
+  },
+});

package/src/components/danmu/danmu-overlay.tsx

@@ -0,0 +1,225 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { LayoutChangeEvent, StyleSheet } from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+import { useChat, useLivestreamStore } from "../../livestream-store";
+import { View } from "../ui";
+import { DanmuMessage } from "./danmu-message";
+import { baseDuration, MAX_DURATION, MIN_DURATION } from "./math";
+import { useDanmuLanes } from "./use-danmu-lanes";
+
+interface DanmuOverlayProps {
+  enabled?: boolean;
+  opacity?: number;
+  speed?: number;
+  laneCount?: number;
+  maxMessages?: number;
+}
+
+interface ActiveDanmuMessage {
+  message: ChatMessageViewHydrated;
+  lane: number;
+}
+
+const DEFAULT_LANE_COUNT = 12;
+const DEFAULT_OPACITY = 80;
+const DEFAULT_SPEED = 1;
+const DEFAULT_MAX_MESSAGES = 50;
+const FONT_SIZE_PERCENTAGE = 0.7;
+const MAX_PROCESSED_MESSAGES = 10;
+
+// px from top of video where danmu won't appear (avoid overlapping with title)
+const TOP_GAP = 20;
+// px from bottom of video (avoid overlapping with controls)
+const BOTTOM_GAP = 20;
+
+export function DanmuOverlay({
+  enabled = true,
+  opacity = DEFAULT_OPACITY,
+  speed = DEFAULT_SPEED,
+  laneCount = DEFAULT_LANE_COUNT,
+  maxMessages = DEFAULT_MAX_MESSAGES,
+}: DanmuOverlayProps) {
+  const chat = useChat();
+  const segment = useLivestreamStore((x) => x.segment);
+
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const [activeDanmu, setActiveDanmu] = useState<
+    Map<string, ActiveDanmuMessage>
+  >(new Map());
+  const processedMessages = useRef(new Set<string>());
+  const mountTime = useRef(Date.now());
+  const lastChatLength = useRef(0);
+  const { assignLane, updateDanmuWidth, releaseLane, cleanup } = useDanmuLanes(
+    laneCount,
+    containerWidth,
+  );
+
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setContainerWidth(width);
+    setContainerHeight(height);
+  }, []);
+
+  const handleMessageComplete = useCallback(
+    (messageId: string) => {
+      releaseLane(messageId);
+      setActiveDanmu((prev) => {
+        const next = new Map(prev);
+        next.delete(messageId);
+        return next;
+      });
+    },
+    [releaseLane],
+  );
+
+  const handleWidthMeasured = useCallback(
+    (messageId: string, width: number) => {
+      updateDanmuWidth(messageId, width);
+    },
+    [updateDanmuWidth],
+  );
+
+  useEffect(() => {
+    if (!enabled || !chat || containerWidth === 0) return;
+
+    // only check new messages since last render (chat is sorted newest first)
+    const newMessageCount = chat.length - lastChatLength.current;
+    if (newMessageCount <= 0) return;
+
+    const messagesToCheck = chat.slice(0, newMessageCount);
+    lastChatLength.current = chat.length;
+
+    const newMessages = messagesToCheck.filter((msg) => {
+      const hasProcessed = processedMessages.current.has(msg.uri);
+      const isSystem = msg.author.did === "did:sys:system";
+      const msgTime = new Date(msg.record.createdAt).getTime();
+      const isAfterMount = msgTime >= mountTime.current;
+
+      return !hasProcessed && !isSystem && isAfterMount;
+    });
+
+    if (newMessages.length === 0) return;
+
+    const messagesToAdd: ActiveDanmuMessage[] = [];
+
+    for (const message of newMessages.slice(0, maxMessages)) {
+      // mark as processed FIRST to prevent duplicate processing if effect runs twice
+      if (processedMessages.current.has(message.uri)) {
+        continue;
+      }
+      processedMessages.current.add(message.uri);
+
+      if (processedMessages.current.size > MAX_PROCESSED_MESSAGES) {
+        const toRemove = Array.from(processedMessages.current).slice(
+          0,
+          processedMessages.current.size - MAX_PROCESSED_MESSAGES,
+        );
+        toRemove.forEach((uri) => processedMessages.current.delete(uri));
+      }
+
+      const duration = baseDuration(message, MAX_DURATION, MIN_DURATION);
+      if (__DEV__)
+        console.log("[danmu] message", message.record.text, {
+          duration,
+          speed,
+        });
+      const lane = assignLane(message.uri, duration);
+
+      if (lane !== null) {
+        messagesToAdd.push({ message, lane });
+      }
+    }
+
+    if (messagesToAdd.length > 0) {
+      setActiveDanmu((prev) => {
+        const next = new Map(prev);
+        for (const danmu of messagesToAdd) {
+          next.set(danmu.message.uri, danmu);
+        }
+        return next;
+      });
+    }
+  }, [chat, enabled, speed, maxMessages]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      cleanup();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [cleanup]);
+
+  if (!enabled || containerWidth === 0 || containerHeight === 0) {
+    return <View style={styles.container} onLayout={handleLayout} />;
+  }
+
+  // Calculate video bounds based on actual video dimensions from segment
+  const segmentVideoWidth = segment?.video?.[0]?.width;
+  const segmentVideoHeight = segment?.video?.[0]?.height;
+
+  // Fall back to 16:9 if no segment dimensions available
+  const videoAspectRatio =
+    segmentVideoWidth && segmentVideoHeight
+      ? segmentVideoWidth / segmentVideoHeight
+      : 16 / 9;
+
+  const containerAspectRatio = containerWidth / containerHeight;
+
+  let videoWidth: number;
+  let videoHeight: number;
+  let videoTop: number;
+  let videoLeft: number;
+
+  if (containerAspectRatio > videoAspectRatio) {
+    // Container is wider than video - letterbox on sides
+    videoHeight = containerHeight;
+    videoWidth = videoHeight * videoAspectRatio;
+    videoTop = 0;
+    videoLeft = (containerWidth - videoWidth) / 2;
+    // Adjust for top/bottom gaps iff we don't have top letterboxing
+    videoTop += TOP_GAP;
+    videoHeight -= TOP_GAP + BOTTOM_GAP;
+  } else {
+    // Container is taller than video - letterbox on top/bottom
+    videoWidth = containerWidth;
+    videoHeight = videoWidth / videoAspectRatio;
+    videoTop = (containerHeight - videoHeight) / 2;
+    videoLeft = 0;
+  }
+
+  const laneHeight = videoHeight / laneCount;
+  const fontSize = laneHeight * FONT_SIZE_PERCENTAGE;
+
+  return (
+    <View style={styles.container} onLayout={handleLayout} pointerEvents="none">
+      {Array.from(activeDanmu.values()).map(({ message, lane }) => (
+        <DanmuMessage
+          key={message.uri}
+          message={message}
+          lane={lane}
+          laneHeight={laneHeight}
+          videoTop={videoTop}
+          opacity={opacity}
+          fontSize={fontSize}
+          speed={speed}
+          containerWidth={containerWidth}
+          containerHeight={containerHeight}
+          onComplete={handleMessageComplete}
+          onWidthMeasured={handleWidthMeasured}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: "hidden",
+  },
+});

package/src/components/danmu/math.ts

@@ -0,0 +1,27 @@
+export const mapRange = (
+  num: number,
+  inMin: number,
+  inMax: number,
+  outMin: number,
+  outMax: number,
+) => {
+  return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+};
+
+export const between = (num: number, min: number, max: number) => {
+  return Math.min(Math.max(num, min), max);
+};
+
+export const baseDuration = (
+  message: { record: { text: string | any[] } },
+  min: number,
+  max: number,
+) =>
+  between(
+    mapRange(Math.log(message.record.text.length) * 8, 1, 16, min, max),
+    min,
+    max,
+  );
+
+export const MIN_DURATION = 6000;
+export const MAX_DURATION = 12000;

package/src/components/danmu/mu.tsx

@@ -0,0 +1,28 @@
+import { G, Path, Svg, SvgProps } from "react-native-svg";
+
+export interface MuProps extends SvgProps {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+}
+
+export const Mu = ({
+  size = 24,
+  color = "#000000",
+  strokeWidth = 10.9,
+  ...props
+}: MuProps) => (
+  <Svg width={size} height={size} viewBox="0 0 230 220" {...props}>
+    <G
+      strokeLinecap="round"
+      fillRule="evenodd"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      fill={color}
+    >
+      <Path d="M 13.756 65.7 L 53.756 65.7 Q 55.756 65.7 57.256 64.2 Q 58.756 62.7 58.756 60.7 L 58.756 22.2 Q 58.756 20.2 57.256 18.7 Q 55.756 17.2 53.756 17.2 L 3.506 17.2 Q 2.006 17.2 1.006 16.2 Q 0.006 15.2 0.006 13.45 Q 0.006 11.95 1.006 10.95 Q 2.006 9.95 3.506 9.95 L 56.506 9.95 Q 60.756 9.95 63.506 12.7 Q 66.256 15.45 66.256 19.7 L 66.256 63.45 Q 66.256 67.45 63.506 70.325 Q 60.756 73.2 56.506 73.2 L 16.256 73.2 Q 14.006 73.2 12.506 74.7 Q 11.006 76.2 11.006 78.2 Q 10.756 89.7 10.506 98.575 Q 10.256 107.45 9.756 117.45 A 4.864 4.864 0 0 0 9.717 118.054 A 4.167 4.167 0 0 0 10.881 120.95 Q 12.256 122.45 14.506 122.45 L 60.256 122.45 Q 63.006 122.45 64.881 124.325 Q 66.756 126.2 66.756 129.7 A 1579.753 1579.753 0 0 1 65.295 155.188 Q 64.543 166.519 63.737 175.256 A 494.991 494.991 0 0 1 63.506 177.7 Q 61.756 195.7 59.506 204.7 A 39.785 39.785 0 0 1 55.486 215.384 A 14.939 14.939 0 0 1 54.006 217.45 Q 51.506 220.2 48.506 221.075 Q 45.506 221.95 40.506 222.2 Q 36.006 222.45 28.506 222.2 Q 21.006 221.95 11.756 221.45 A 5.389 5.389 0 0 1 10.79 221.197 A 5.13 5.13 0 0 1 9.131 220.2 Q 8.006 219.2 7.506 217.45 A 3.871 3.871 0 0 1 7.45 216.814 A 2.355 2.355 0 0 1 8.131 215.075 Q 9.006 214.2 10.506 214.2 Q 20.006 214.95 27.881 215.2 Q 35.756 215.45 39.006 215.45 Q 42.506 215.45 44.381 215.075 Q 46.256 214.7 47.756 212.95 A 17.691 17.691 0 0 0 51.389 205.661 A 55.6 55.6 0 0 0 52.381 201.825 A 144.371 144.371 0 0 0 54.411 189.832 A 374.249 374.249 0 0 0 55.881 176.95 A 735.769 735.769 0 0 0 57.475 157.825 A 1519.1 1519.1 0 0 0 59.006 133.45 A 5.968 5.968 0 0 0 59.061 132.663 A 2.91 2.91 0 0 0 55.506 129.7 L 11.506 129.7 Q 7.506 129.7 4.881 126.825 A 8.876 8.876 0 0 1 2.484 120.637 A 11.015 11.015 0 0 1 2.506 119.95 Q 2.756 113.95 3.006 108.7 Q 3.256 103.45 3.506 98.45 Q 3.756 93.45 3.881 87.95 Q 4.006 82.45 4.006 75.45 Q 4.006 71.2 6.881 68.45 Q 9.756 65.7 13.756 65.7 Z M 99.006 49.95 L 200.256 49.95 Q 204.506 49.95 207.256 52.7 Q 210.006 55.45 210.006 59.7 L 210.006 127.95 Q 210.006 131.95 207.256 134.825 Q 204.506 137.7 200.256 137.7 L 99.006 137.7 Q 95.006 137.7 92.131 134.825 Q 89.256 131.95 89.256 127.95 L 89.256 59.7 Q 89.256 55.45 92.131 52.7 Q 95.006 49.95 99.006 49.95 Z M 145.506 53.95 L 153.006 53.95 L 153.006 218.95 Q 153.006 220.7 152.006 221.7 Q 151.006 222.7 149.256 222.7 Q 147.506 222.7 146.506 221.7 Q 145.506 220.7 145.506 218.95 L 145.506 53.95 Z M 77.506 163.95 L 219.006 163.95 Q 220.756 163.95 221.756 164.95 Q 222.756 165.95 222.756 167.7 Q 222.756 169.45 221.756 170.45 Q 220.756 171.45 219.006 171.45 L 77.506 171.45 Q 75.756 171.45 74.756 170.45 Q 73.756 169.45 73.756 167.7 Q 73.756 165.95 74.756 164.95 Q 75.756 163.95 77.506 163.95 Z M 96.506 97.45 L 96.506 125.45 Q 96.506 127.45 98.006 128.95 Q 99.506 130.45 101.506 130.45 L 197.506 130.45 Q 199.506 130.45 201.006 128.95 Q 202.506 127.45 202.506 125.45 L 202.506 97.45 L 96.506 97.45 Z M 96.506 62.45 L 96.506 89.95 L 202.506 89.95 L 202.506 62.45 Q 202.506 60.45 201.006 58.95 Q 199.506 57.45 197.506 57.45 L 101.506 57.45 Q 99.506 57.45 98.006 58.95 Q 96.506 60.45 96.506 62.45 Z M 166.506 55.2 L 161.006 51.95 Q 168.756 41.7 176.881 27.7 A 383.321 383.321 0 0 0 189.09 5.114 A 264.812 264.812 0 0 0 190.506 2.2 Q 191.006 0.7 192.506 0.2 Q 194.006 -0.3 195.756 0.45 Q 197.256 0.95 197.756 2.45 Q 198.256 3.95 197.506 5.2 Q 190.506 17.95 182.506 31.45 Q 174.506 44.95 166.506 55.2 Z M 107.672 1.117 A 4.458 4.458 0 0 0 106.006 1.45 Q 104.756 1.95 104.381 2.95 Q 104.006 3.95 104.756 4.95 Q 111.756 13.95 117.006 22.825 Q 122.256 31.7 126.006 39.95 Q 126.506 41.2 127.756 41.7 Q 129.006 42.2 130.256 41.45 Q 132.006 40.7 132.506 39.2 Q 133.006 37.7 132.256 36.45 Q 128.506 28.45 123.256 19.95 Q 118.006 11.45 110.756 2.45 Q 109.756 1.45 108.506 1.2 A 4.24 4.24 0 0 0 107.672 1.117 Z" />
+    </G>
+  </Svg>
+);
+
+export default Mu;

package/src/components/danmu/use-danmu-lanes.ts

@@ -0,0 +1,114 @@
+import { useCallback, useRef } from "react";
+
+export interface DanmuLane {
+  index: number;
+  occupiedUntil: number;
+}
+
+export interface ActiveDanmu {
+  id: string;
+  lane: number;
+  endTime: number;
+  startTime: number;
+  duration: number;
+  width?: number;
+}
+
+const LANE_GAP = 4;
+
+export const useDanmuLanes = (laneCount: number, containerWidth: number) => {
+  const activeDanmu = useRef<Map<string, ActiveDanmu>>(new Map());
+  const lanes = useRef<DanmuLane[]>(
+    Array.from({ length: laneCount }, (_, i) => ({
+      index: i,
+      occupiedUntil: 0,
+    })),
+  );
+
+  const canFitInLane = useCallback(
+    (laneIndex: number): boolean => {
+      const now = Date.now();
+
+      // find all active danmu in this lane
+      const danmuInLane = Array.from(activeDanmu.current.values()).filter(
+        (d) => d.lane === laneIndex && d.endTime > now,
+      );
+
+      if (danmuInLane.length === 0) return true;
+
+      // check the most recent danmu in this lane
+      const mostRecent = danmuInLane.reduce((latest, current) =>
+        current.startTime > latest.startTime ? current : latest,
+      );
+
+      // calculate how far it has traveled
+      const elapsed = now - mostRecent.startTime;
+      const progress = elapsed / mostRecent.duration;
+      const traveled = containerWidth * progress;
+
+      // estimate width (assume ~8px per char, will be updated with actual width later)
+      const estimatedWidth = mostRecent.width || 200;
+
+      // check if there's enough space
+      const spaceNeeded = estimatedWidth + LANE_GAP;
+      const hasSpace = traveled >= spaceNeeded;
+
+      return hasSpace;
+    },
+    [containerWidth],
+  );
+
+  const assignLane = useCallback(
+    (messageId: string, duration: number, width?: number): number | null => {
+      const now = Date.now();
+
+      for (const lane of lanes.current) {
+        if (canFitInLane(lane.index)) {
+          const endTime = now + duration;
+          activeDanmu.current.set(messageId, {
+            id: messageId,
+            lane: lane.index,
+            endTime,
+            startTime: now,
+            duration,
+            width,
+          });
+          return lane.index;
+        }
+      }
+
+      return null;
+    },
+    [lanes, canFitInLane],
+  );
+
+  const updateDanmuWidth = useCallback((messageId: string, width: number) => {
+    const danmu = activeDanmu.current.get(messageId);
+    if (danmu) {
+      danmu.width = width;
+    }
+  }, []);
+
+  const releaseLane = useCallback((messageId: string) => {
+    const danmu = activeDanmu.current.get(messageId);
+    if (danmu) {
+      activeDanmu.current.delete(messageId);
+    }
+  }, []);
+
+  const cleanup = useCallback(() => {
+    const now = Date.now();
+    for (const [id, danmu] of activeDanmu.current.entries()) {
+      if (danmu.endTime <= now) {
+        activeDanmu.current.delete(id);
+      }
+    }
+  }, []);
+
+  return {
+    assignLane,
+    updateDanmuWidth,
+    releaseLane,
+    cleanup,
+  };
+};