+27 -5

js/app/components/mobile/desktop-ui/bottom-controls.tsx

··· 2 2 Button, 3 3 PlayerUI, 4 4 View, 5 5 + useDanmuEnabled, 6 6 + useDanmuUnlocked, 5 7 usePlayerStore, 8 8 + useSetDanmuEnabled, 6 9 useTheme, 7 10 zero, 8 11 } from "@streamplace/components"; ··· 16 19 import { Platform, Pressable } from "react-native"; 17 20 import { VolumeSlider } from "./volume-slider"; 18 21 19 19 - const { gap, layout, p, r } = zero; 22 22 + import { Mu } from "./mu"; 23 23 + 24 24 + const { gap, layout, p, r, py, px } = zero; 20 25 21 26 interface BottomControlBarProps { 22 27 ingest: string | null; ··· 40 45 let { theme } = useTheme(); 41 46 const fullscreen = usePlayerStore((state) => state.fullscreen); 42 47 const setFullscreen = usePlayerStore((state) => state.setFullscreen); 48 48 + const danmuUnlocked = useDanmuUnlocked(); 49 49 + const danmuEnabled = useDanmuEnabled(); 50 50 + const setDanmuEnabled = useSetDanmuEnabled(); 43 51 44 52 return ( 45 53 <View ··· 61 69 </View> 62 70 </Pressable> 63 71 )} 64 64 - {ingest === null && ( 65 65 - <PlayerUI.ContextMenu 66 66 - dropdownPortalContainer={dropdownPortalContainer} 67 67 - /> 72 72 + {danmuUnlocked && ( 73 73 + <Pressable 74 74 + onPress={() => { 75 75 + setDanmuEnabled(!danmuEnabled); 76 76 + }} 77 77 + style={[px[0], r[1]]} 78 78 + > 79 79 + <Mu 80 80 + size={22} 81 81 + color={theme.colors.text} 82 82 + style={{ opacity: danmuEnabled ? 1 : 0.5 }} 83 83 + /> 84 84 + </Pressable> 68 85 )} 69 86 {Platform.OS === "web" && ( 70 87 <Pressable ··· 79 96 <Fullscreen color={theme.colors.text} /> 80 97 )} 81 98 </Pressable> 99 99 + )} 100 100 + {ingest === null && ( 101 101 + <PlayerUI.ContextMenu 102 102 + dropdownPortalContainer={dropdownPortalContainer} 103 103 + /> 82 104 )} 83 105 {/* if not web, then add the collapse chat controls here */} 84 106 {Platform.OS !== "web" && (

+28

js/app/components/mobile/desktop-ui/mu.tsx

··· 1 1 + import { G, Path, Svg, SvgProps } from "react-native-svg"; 2 2 + 3 3 + export interface MuProps extends SvgProps { 4 4 + size?: number | string; 5 5 + color?: string; 6 6 + strokeWidth?: number | string; 7 7 + } 8 8 + 9 9 + export const Mu = ({ 10 10 + size = 24, 11 11 + color = "#000000", 12 12 + strokeWidth = 10.9, 13 13 + ...props 14 14 + }: MuProps) => ( 15 15 + <Svg width={size} height={size} viewBox="0 0 230 220" {...props}> 16 16 + <G 17 17 + strokeLinecap="round" 18 18 + fillRule="evenodd" 19 19 + stroke={color} 20 20 + strokeWidth={strokeWidth} 21 21 + fill={color} 22 22 + > 23 23 + <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" /> 24 24 + </G> 25 25 + </Svg> 26 26 + ); 27 27 + 28 28 + export default Mu;

+434 -3

js/app/components/settings/settings.tsx

··· 1 1 - import { Button, Input, Text, View, zero } from "@streamplace/components"; 1 1 + import { 2 2 + Button, 3 3 + Input, 4 4 + Slider, 5 5 + Text, 6 6 + useDanmuSettings, 7 7 + View, 8 8 + zero, 9 9 + } from "@streamplace/components"; 2 10 import AQLink from "components/aqlink"; 3 11 import { 4 12 createServerSettingsRecord, ··· 10 18 import useStreamplaceNode from "hooks/useStreamplaceNode"; 11 19 import { useEffect, useState } from "react"; 12 20 import { useTranslation } from "react-i18next"; 13 13 - import { ScrollView, Switch } from "react-native"; 21 21 + import { 22 22 + Platform, 23 23 + ScrollView, 24 24 + Switch, 25 25 + useWindowDimensions, 26 26 + } from "react-native"; 14 27 import { useAppDispatch, useAppSelector } from "store/hooks"; 15 28 import { Updates } from "./updates"; 16 29 import WebhookManager from "./webhook-manager"; ··· 73 86 { alignItems: "stretch" }, 74 87 zero.layout.flex.justify.start, 75 88 zero.w.percent[100], 76 76 - zero.gap.all[4], 89 89 + zero.gap.all[6], 77 90 ]} 78 91 > 79 92 <View ··· 193 206 <Text style={[{ fontSize: 16 }]}>→</Text> 194 207 </View> 195 208 </AQLink> 209 209 + 210 210 + <DanmuSettings /> 196 211 </View> 197 212 </View> 198 213 </ScrollView> ··· 259 274 </View> 260 275 ); 261 276 }; 277 277 + 278 278 + const DanmuSettings = () => { 279 279 + const { 280 280 + danmuUnlocked, 281 281 + danmuEnabled, 282 282 + danmuOpacity, 283 283 + danmuSpeed, 284 284 + danmuLaneCount, 285 285 + danmuMaxMessages, 286 286 + setDanmuEnabled, 287 287 + setDanmuOpacity, 288 288 + setDanmuSpeed, 289 289 + setDanmuLaneCount, 290 290 + setDanmuMaxMessages, 291 291 + } = useDanmuSettings(); 292 292 + 293 293 + const { width } = useWindowDimensions(); 294 294 + const isNarrowScreen = width < 550; 295 295 + 296 296 + if (!danmuUnlocked) return null; 297 297 + 298 298 + return ( 299 299 + <View style={[{ alignItems: "stretch" }, zero.gap.all[4]]}> 300 300 + <View 301 301 + style={[ 302 302 + { flexDirection: "row" }, 303 303 + { alignItems: "flex-start" }, 304 304 + { justifyContent: "flex-start" }, 305 305 + ]} 306 306 + > 307 307 + <View style={[{ flex: 1 }, { paddingRight: 12 }]}> 308 308 + <Text size="xl">Enable Danmu</Text> 309 309 + <Text size="lg" color="muted"> 310 310 + Show "bullet comments" flying across the video. 311 311 + </Text> 312 312 + </View> 313 313 + <Switch value={danmuEnabled} onValueChange={setDanmuEnabled} /> 314 314 + </View> 315 315 + 316 316 + {danmuEnabled && ( 317 317 + <> 318 318 + <View style={[zero.gap.all[6]]}> 319 319 + <View 320 320 + style={[ 321 321 + { 322 322 + flexDirection: isNarrowScreen ? "column" : "row", 323 323 + justifyContent: "space-between", 324 324 + alignItems: "flex-start", 325 325 + }, 326 326 + zero.gap.all[2], 327 327 + ]} 328 328 + > 329 329 + <View 330 330 + style={[ 331 331 + { 332 332 + flexDirection: "row", 333 333 + alignItems: "center", 334 334 + justifyContent: "flex-start", 335 335 + }, 336 336 + zero.gap.all[2], 337 337 + ]} 338 338 + > 339 339 + <Text size="lg">Opacity:</Text> 340 340 + <Input 341 341 + value={String(danmuOpacity)} 342 342 + onChangeText={(text) => { 343 343 + const val = parseInt(text) || 0; 344 344 + setDanmuOpacity(Math.min(100, Math.max(0, val))); 345 345 + }} 346 346 + containerStyle={{ width: 60 }} 347 347 + keyboardType="number-pad" 348 348 + /> 349 349 + <Text size="lg">%</Text> 350 350 + </View> 351 351 + <View 352 352 + style={[ 353 353 + { 354 354 + flexDirection: "row", 355 355 + alignItems: "center", 356 356 + }, 357 357 + zero.gap.all[2], 358 358 + ]} 359 359 + > 360 360 + {[0, 25, 50, 75, 100].map((value) => ( 361 361 + <Button 362 362 + key={value} 363 363 + onPress={() => setDanmuOpacity(value)} 364 364 + variant={danmuOpacity === value ? "primary" : "secondary"} 365 365 + size="pill" 366 366 + > 367 367 + <Text size="lg">{value}</Text> 368 368 + </Button> 369 369 + ))} 370 370 + </View> 371 371 + </View> 372 372 + {Platform.OS === "web" && ( 373 373 + <Slider.Root 374 374 + // i think they typed this wrong in the lib? 375 375 + value={[danmuOpacity] as any} 376 376 + min={0} 377 377 + max={100} 378 378 + step={5} 379 379 + onValueChange={(vals) => setDanmuOpacity(vals[0])} 380 380 + style={{ width: "100%", height: 40 }} 381 381 + > 382 382 + <Slider.Track 383 383 + style={{ 384 384 + height: 4, 385 385 + backgroundColor: "#374151", 386 386 + borderRadius: 2, 387 387 + width: "100%", 388 388 + }} 389 389 + > 390 390 + <Slider.Range 391 391 + style={{ 392 392 + height: 4, 393 393 + backgroundColor: "#3b82f6", 394 394 + borderRadius: 2, 395 395 + }} 396 396 + /> 397 397 + <Slider.Thumb 398 398 + style={{ 399 399 + width: 20, 400 400 + height: 20, 401 401 + borderRadius: 10, 402 402 + backgroundColor: "#3b82f6", 403 403 + transform: [{ translateY: -8 }], 404 404 + }} 405 405 + /> 406 406 + </Slider.Track> 407 407 + </Slider.Root> 408 408 + )} 409 409 + </View> 410 410 + 411 411 + <View style={[zero.gap.all[6]]}> 412 412 + <View 413 413 + style={[ 414 414 + { 415 415 + flexDirection: isNarrowScreen ? "column" : "row", 416 416 + justifyContent: "space-between", 417 417 + alignItems: "flex-start", 418 418 + }, 419 419 + zero.gap.all[2], 420 420 + ]} 421 421 + > 422 422 + <View 423 423 + style={[ 424 424 + { 425 425 + flexDirection: "row", 426 426 + alignItems: "center", 427 427 + }, 428 428 + zero.gap.all[2], 429 429 + ]} 430 430 + > 431 431 + <Text size="lg">Speed: </Text> 432 432 + <Input 433 433 + value={String(danmuSpeed)} 434 434 + onChangeText={(text) => { 435 435 + const val = parseFloat(text) || 0; 436 436 + setDanmuSpeed(Math.min(3, Math.max(0.1, val))); 437 437 + }} 438 438 + containerStyle={{ width: 60 }} 439 439 + keyboardType="numeric" 440 440 + /> 441 441 + <Text size="lg">×</Text> 442 442 + </View> 443 443 + <View 444 444 + style={[ 445 445 + { 446 446 + flexDirection: "row", 447 447 + alignItems: "center", 448 448 + }, 449 449 + zero.gap.all[2], 450 450 + ]} 451 451 + > 452 452 + {[ 453 453 + { label: "0.5×", value: 0.5 }, 454 454 + { label: "1×", value: 1 }, 455 455 + { label: "1.5×", value: 1.5 }, 456 456 + { label: "2×", value: 2 }, 457 457 + ].map(({ label, value }) => ( 458 458 + <Button 459 459 + key={value} 460 460 + onPress={() => setDanmuSpeed(value)} 461 461 + variant={danmuSpeed === value ? "primary" : "secondary"} 462 462 + size="pill" 463 463 + > 464 464 + <Text size="lg">{label}</Text> 465 465 + </Button> 466 466 + ))} 467 467 + </View> 468 468 + </View> 469 469 + {Platform.OS === "web" && ( 470 470 + <Slider.Root 471 471 + value={[danmuSpeed] as any} 472 472 + min={0.5} 473 473 + max={2} 474 474 + step={0.1} 475 475 + onValueChange={(vals) => setDanmuSpeed(vals[0])} 476 476 + style={{ width: "100%", height: 40 }} 477 477 + > 478 478 + <Slider.Track 479 479 + style={{ 480 480 + height: 4, 481 481 + backgroundColor: "#374151", 482 482 + borderRadius: 2, 483 483 + width: "100%", 484 484 + }} 485 485 + > 486 486 + <Slider.Range 487 487 + style={{ 488 488 + height: 4, 489 489 + backgroundColor: "#3b82f6", 490 490 + borderRadius: 2, 491 491 + }} 492 492 + /> 493 493 + <Slider.Thumb 494 494 + style={{ 495 495 + width: 20, 496 496 + height: 20, 497 497 + borderRadius: 10, 498 498 + backgroundColor: "#3b82f6", 499 499 + transform: [{ translateY: -8 }], 500 500 + }} 501 501 + /> 502 502 + </Slider.Track> 503 503 + </Slider.Root> 504 504 + )} 505 505 + </View> 506 506 + 507 507 + <View style={[zero.gap.all[6]]}> 508 508 + <View 509 509 + style={[ 510 510 + { 511 511 + flexDirection: isNarrowScreen ? "column" : "row", 512 512 + justifyContent: "space-between", 513 513 + alignItems: "flex-start", 514 514 + }, 515 515 + zero.gap.all[2], 516 516 + ]} 517 517 + > 518 518 + <View 519 519 + style={[ 520 520 + { 521 521 + flexDirection: "row", 522 522 + alignItems: "center", 523 523 + }, 524 524 + zero.gap.all[2], 525 525 + ]} 526 526 + > 527 527 + <Text size="lg">Lanes: </Text> 528 528 + <Input 529 529 + value={String(danmuLaneCount)} 530 530 + onChangeText={(text) => { 531 531 + const val = parseInt(text) || 0; 532 532 + setDanmuLaneCount(Math.min(20, Math.max(4, val))); 533 533 + }} 534 534 + containerStyle={{ width: 60 }} 535 535 + keyboardType="number-pad" 536 536 + /> 537 537 + </View> 538 538 + <View 539 539 + style={[ 540 540 + { 541 541 + flexDirection: "row", 542 542 + alignItems: "center", 543 543 + }, 544 544 + zero.gap.all[2], 545 545 + ]} 546 546 + > 547 547 + {[6, 8, 10, 12, 15].map((value) => ( 548 548 + <Button 549 549 + key={value} 550 550 + onPress={() => setDanmuLaneCount(value)} 551 551 + variant={danmuLaneCount === value ? "primary" : "secondary"} 552 552 + size="pill" 553 553 + > 554 554 + <Text size="lg">{value}</Text> 555 555 + </Button> 556 556 + ))} 557 557 + </View> 558 558 + </View> 559 559 + {Platform.OS === "web" && ( 560 560 + <Slider.Root 561 561 + value={[danmuLaneCount] as any} 562 562 + min={4} 563 563 + max={20} 564 564 + step={1} 565 565 + onValueChange={(vals) => setDanmuLaneCount(vals[0])} 566 566 + style={{ width: "100%", height: 40 }} 567 567 + > 568 568 + <Slider.Track 569 569 + style={{ 570 570 + height: 4, 571 571 + backgroundColor: "#374151", 572 572 + borderRadius: 2, 573 573 + width: "100%", 574 574 + }} 575 575 + > 576 576 + <Slider.Range 577 577 + style={{ 578 578 + height: 4, 579 579 + backgroundColor: "#3b82f6", 580 580 + borderRadius: 2, 581 581 + }} 582 582 + /> 583 583 + <Slider.Thumb 584 584 + style={{ 585 585 + width: 20, 586 586 + height: 20, 587 587 + borderRadius: 10, 588 588 + backgroundColor: "#3b82f6", 589 589 + transform: [{ translateY: -8 }], 590 590 + }} 591 591 + /> 592 592 + </Slider.Track> 593 593 + </Slider.Root> 594 594 + )} 595 595 + </View> 596 596 + 597 597 + <View style={[zero.gap.all[6]]}> 598 598 + <View 599 599 + style={[ 600 600 + { 601 601 + flexDirection: isNarrowScreen ? "column" : "row", 602 602 + justifyContent: "space-between", 603 603 + alignItems: "flex-start", 604 604 + }, 605 605 + zero.gap.all[2], 606 606 + ]} 607 607 + > 608 608 + <View 609 609 + style={[ 610 610 + { 611 611 + flexDirection: "row", 612 612 + alignItems: "center", 613 613 + }, 614 614 + zero.gap.all[2], 615 615 + ]} 616 616 + > 617 617 + <Text size="lg">Max Messages: </Text> 618 618 + <Input 619 619 + value={String(danmuMaxMessages)} 620 620 + onChangeText={(text) => { 621 621 + const val = parseInt(text) || 0; 622 622 + setDanmuMaxMessages(Math.min(200, Math.max(5, val))); 623 623 + }} 624 624 + containerStyle={{ width: 60 }} 625 625 + keyboardType="number-pad" 626 626 + /> 627 627 + </View> 628 628 + <View 629 629 + style={[ 630 630 + { 631 631 + flexDirection: "row", 632 632 + alignItems: "center", 633 633 + }, 634 634 + zero.gap.all[2], 635 635 + ]} 636 636 + > 637 637 + {[10, 25, 50, 100].map((value) => ( 638 638 + <Button 639 639 + key={value} 640 640 + onPress={() => setDanmuMaxMessages(value)} 641 641 + variant={ 642 642 + danmuMaxMessages === value ? "primary" : "secondary" 643 643 + } 644 644 + size="pill" 645 645 + > 646 646 + <Text size="lg">{value}</Text> 647 647 + </Button> 648 648 + ))} 649 649 + </View> 650 650 + </View> 651 651 + {Platform.OS === "web" && ( 652 652 + <Slider.Root 653 653 + value={[danmuMaxMessages] as any} 654 654 + min={5} 655 655 + max={200} 656 656 + step={5} 657 657 + onValueChange={(vals) => setDanmuMaxMessages(vals[0])} 658 658 + style={{ width: "100%", height: 40 }} 659 659 + > 660 660 + <Slider.Track 661 661 + style={{ 662 662 + height: 4, 663 663 + backgroundColor: "#374151", 664 664 + borderRadius: 2, 665 665 + width: "100%", 666 666 + }} 667 667 + > 668 668 + <Slider.Range 669 669 + style={{ 670 670 + height: 4, 671 671 + backgroundColor: "#3b82f6", 672 672 + borderRadius: 2, 673 673 + }} 674 674 + /> 675 675 + <Slider.Thumb 676 676 + style={{ 677 677 + width: 20, 678 678 + height: 20, 679 679 + borderRadius: 10, 680 680 + backgroundColor: "#3b82f6", 681 681 + transform: [{ translateY: -8 }], 682 682 + }} 683 683 + /> 684 684 + </Slider.Track> 685 685 + </Slider.Root> 686 686 + )} 687 687 + </View> 688 688 + </> 689 689 + )} 690 690 + </View> 691 691 + ); 692 692 + };

+37

js/app/components/settings/updates.native.tsx

··· 1 1 import { 2 2 Button, 3 3 Text, 4 4 + useDanmuUnlocked, 5 5 + useSetDanmuUnlocked, 4 6 useTheme, 5 7 useToast, 6 8 zero, ··· 11 13 import { Platform, TouchableOpacity, View } from "react-native"; 12 14 import pkg from "../../package.json"; 13 15 16 16 + const UNLOCK_TAP_COUNT = 5; 17 17 + 14 18 export function Updates() { 15 19 const theme = useTheme(); 16 20 const version = pkg.version; ··· 22 26 console.log(`updateInfo: ${JSON.stringify(updateInfo)}`); 23 27 24 28 const [checked, setChecked] = useState(false); 29 29 + const [tapCount, setTapCount] = useState(0); 30 30 + const danmuUnlocked = useDanmuUnlocked(); 31 31 + const setDanmuUnlocked = useSetDanmuUnlocked(); 25 32 26 33 useEffect(() => { 27 34 if (isUpdateAvailable && checked) { 28 35 ExpoUpdates.fetchUpdateAsync(); 29 36 } 30 37 }, [isUpdateAvailable, checked]); 38 38 + 39 39 + const handleVersionPress = () => { 40 40 + if (danmuUnlocked) { 41 41 + toast.show("You are already a developer", undefined, { 42 42 + duration: 2, 43 43 + variant: "info", 44 44 + actionLabel: "Stop being a developer", 45 45 + onAction: () => { 46 46 + setDanmuUnlocked(false); 47 47 + toast.show("You are no longer a developer", undefined, { 48 48 + duration: 2, 49 49 + variant: "info", 50 50 + }); 51 51 + }, 52 52 + }); 53 53 + return; 54 54 + } 55 55 + 56 56 + const newCount = tapCount + 1; 57 57 + setTapCount(newCount); 58 58 + 59 59 + if (newCount >= UNLOCK_TAP_COUNT) { 60 60 + setDanmuUnlocked(true); 61 61 + toast.show("You are now a developer", "have fun! lol", { 62 62 + duration: 20, 63 63 + variant: "success", 64 64 + }); 65 65 + setTapCount(0); 66 66 + } 67 67 + }; 31 68 32 69 // If true, we show the button to download and run the update 33 70 const buttonText = isUpdateAvailable

+38 -5

js/app/components/settings/updates.tsx

··· 1 1 - import { Text } from "@streamplace/components"; 2 2 - import { useTranslation } from "react-i18next"; 3 3 - import { View } from "react-native"; 1 1 + import { 2 2 + Text, 3 3 + useDanmuUnlocked, 4 4 + useSetDanmuUnlocked, 5 5 + useToast, 6 6 + useTranslation, 7 7 + } from "@streamplace/components"; 8 8 + import { useState } from "react"; 9 9 + import { Pressable, View } from "react-native"; 4 10 import pkg from "../../package.json"; 11 11 + 12 12 + const UNLOCK_TAP_COUNT = 5; 5 13 6 14 // maybe someday some PWA update stuff will live here 7 15 export function Updates() { 8 16 const { t } = useTranslation("settings"); 17 17 + const [tapCount, setTapCount] = useState(0); 18 18 + const danmuUnlocked = useDanmuUnlocked(); 19 19 + const setDanmuUnlocked = useSetDanmuUnlocked(); 20 20 + const toast = useToast(); 21 21 + 22 22 + const handlePress = () => { 23 23 + if (danmuUnlocked) { 24 24 + toast.show("You are already a developer", "what are you doing???"); 25 25 + return; 26 26 + } 27 27 + 28 28 + const newCount = tapCount + 1; 29 29 + console.log("new tap count"); 30 30 + setTapCount(newCount); 31 31 + 32 32 + if (newCount >= UNLOCK_TAP_COUNT) { 33 33 + setDanmuUnlocked(true); 34 34 + toast.show("You are now a developer", "have fun! lol", { 35 35 + duration: 20, 36 36 + variant: "success", 37 37 + }); 38 38 + setTapCount(0); 39 39 + } 40 40 + }; 41 41 + 9 42 return ( 10 43 <View 11 44 style={[ ··· 14 47 { paddingVertical: 24 }, 15 48 ]} 16 49 > 17 17 - <View> 50 50 + <Pressable onPress={handlePress}> 18 51 <Text 19 52 size="2xl" 20 53 style={[ ··· 27 60 > 28 61 {t("app-version", { version: pkg.version })} 29 62 </Text> 30 30 - </View> 63 63 + </Pressable> 31 64 </View> 32 65 ); 33 66 }

+12

js/app/src/router.tsx

··· 84 84 ReanimatedLogLevel, 85 85 useAnimatedStyle, 86 86 } from "react-native-reanimated"; 87 87 + import DanmuOBSScreen from "./screens/danmu-obs"; 87 88 import MobileGoLive from "./screens/mobile-go-live"; 88 89 import MobileStream from "./screens/mobile-stream"; 89 90 store.dispatch(loadStateFromStorage()); ··· 125 126 InfoWidgetEmbed: undefined; 126 127 LegacyStream: { user: string }; 127 128 MobileGoLive: undefined; 129 129 + DanmuOBS: { user: string }; 128 130 }; 129 131 130 132 declare global { ··· 166 168 InfoWidgetEmbed: "info-widget", 167 169 LegacyStream: "legacy/:user", 168 170 MobileGoLive: "mobile-golive", 171 171 + DanmuOBS: "widgets/:user/danmu", 169 172 }, 170 173 }, 171 174 }; ··· 592 595 <Drawer.Screen 593 596 name="InfoWidgetEmbed" 594 597 component={InfoWidgetEmbed} 598 598 + options={{ 599 599 + drawerLabel: () => null, 600 600 + drawerItemStyle: { display: "none" }, 601 601 + headerShown: false, 602 602 + }} 603 603 + /> 604 604 + <Drawer.Screen 605 605 + name="DanmuOBS" 606 606 + component={DanmuOBSScreen} 595 607 options={{ 596 608 drawerLabel: () => null, 597 609 drawerItemStyle: { display: "none" },

+92

js/app/src/screens/danmu-obs.tsx

··· 1 1 + import { 2 2 + DanmuOverlayOBS, 3 3 + LivestreamProvider, 4 4 + PlayerProvider, 5 5 + usePlayerStore, 6 6 + } from "@streamplace/components"; 7 7 + import { 8 8 + setSidebarHidden, 9 9 + setSidebarUnhidden, 10 10 + } from "features/base/sidebarSlice"; 11 11 + import { useEffect } from "react"; 12 12 + import { Platform, View } from "react-native"; 13 13 + import { useAppDispatch } from "store/hooks"; 14 14 + 15 15 + const isWeb = Platform.OS === "web"; 16 16 + 17 17 + interface DanmuParams { 18 18 + opacity?: number; 19 19 + speed?: number; 20 20 + laneCount?: number; 21 21 + maxMessages?: number; 22 22 + enabled?: boolean; 23 23 + } 24 24 + 25 25 + const parseDanmuParams = (query: URLSearchParams): DanmuParams => { 26 26 + const params: DanmuParams = {}; 27 27 + 28 28 + const opacity = query.get("opacity"); 29 29 + if (opacity) params.opacity = parseInt(opacity); 30 30 + 31 31 + const speed = query.get("speed"); 32 32 + if (speed) params.speed = parseFloat(speed); 33 33 + 34 34 + const laneCount = query.get("laneCount"); 35 35 + if (laneCount) params.laneCount = parseInt(laneCount); 36 36 + 37 37 + const maxMessages = query.get("maxMessages"); 38 38 + if (maxMessages) params.maxMessages = parseInt(maxMessages); 39 39 + 40 40 + const enabled = query.get("enabled"); 41 41 + if (enabled !== null) params.enabled = enabled !== "false"; 42 42 + 43 43 + return params; 44 44 + }; 45 45 + 46 46 + export default function DanmuOBSScreen({ route }) { 47 47 + const user = route.params?.user; 48 48 + const dispatch = useAppDispatch(); 49 49 + 50 50 + let danmuParams: DanmuParams = {}; 51 51 + if (isWeb) { 52 52 + danmuParams = parseDanmuParams(new URLSearchParams(window.location.search)); 53 53 + } 54 54 + 55 55 + if (typeof user !== "string") { 56 56 + return <View />; 57 57 + } 58 58 + 59 59 + useEffect(() => { 60 60 + dispatch(setSidebarHidden()); 61 61 + () => { 62 62 + // on unmount, unhide the sidebar 63 63 + dispatch(setSidebarUnhidden()); 64 64 + }; 65 65 + }, []); 66 66 + 67 67 + return ( 68 68 + <LivestreamProvider src={user}> 69 69 + <PlayerProvider> 70 70 + <DanmuOBSInner user={user} {...danmuParams} /> 71 71 + </PlayerProvider> 72 72 + </LivestreamProvider> 73 73 + ); 74 74 + } 75 75 + 76 76 + export function DanmuOBSInner({ 77 77 + user, 78 78 + ...danmuParams 79 79 + }: { 80 80 + user: string; 81 81 + } & DanmuParams) { 82 82 + const setSrc = usePlayerStore((x) => x.setSrc); 83 83 + useEffect(() => { 84 84 + setSrc(user); 85 85 + }, [user]); 86 86 + 87 87 + return ( 88 88 + <View style={{ position: "absolute", width: "100%", height: "100%" }}> 89 89 + <DanmuOverlayOBS channelDid={user} {...danmuParams} /> 90 90 + </View> 91 91 + ); 92 92 + }

+182

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

··· 1 1 + import { memo, useEffect, useState } from "react"; 2 2 + import { LayoutChangeEvent, StyleSheet } from "react-native"; 3 3 + import Animated, { 4 4 + Easing, 5 5 + runOnJS, 6 6 + useAnimatedStyle, 7 7 + useSharedValue, 8 8 + withTiming, 9 9 + } from "react-native-reanimated"; 10 10 + import { ChatMessageViewHydrated } from "streamplace"; 11 11 + import { Text } from "../ui"; 12 12 + import { baseDuration, mapRange, MAX_DURATION, MIN_DURATION } from "./math"; 13 13 + 14 14 + interface DanmuMessageProps { 15 15 + message: ChatMessageViewHydrated; 16 16 + lane: number; 17 17 + laneHeight: number; 18 18 + videoTop: number; 19 19 + opacity: number; 20 20 + fontSize: number; 21 21 + speed: number; 22 22 + containerWidth: number; 23 23 + containerHeight: number; 24 24 + onComplete: (messageId: string) => void; 25 25 + onWidthMeasured?: (messageId: string, width: number) => void; 26 26 + } 27 27 + 28 28 + export const DanmuMessage = memo( 29 29 + ({ 30 30 + message, 31 31 + lane, 32 32 + laneHeight, 33 33 + videoTop, 34 34 + opacity, 35 35 + fontSize, 36 36 + speed, 37 37 + containerWidth, 38 38 + containerHeight, 39 39 + onComplete, 40 40 + onWidthMeasured, 41 41 + }: DanmuMessageProps) => { 42 42 + const translateX = useSharedValue(containerWidth); 43 43 + const [messageWidth, setMessageWidth] = useState(0); 44 44 + const [animationStartTime, setAnimationStartTime] = useState<number | null>( 45 45 + null, 46 46 + ); 47 47 + const [totalDuration, setTotalDuration] = useState(0); 48 48 + 49 49 + const getRgbColor = ( 50 50 + color: { 51 51 + red: number; 52 52 + green: number; 53 53 + blue: number; 54 54 + } = { red: 123, green: 123, blue: 123 }, 55 55 + ) => { 56 56 + const red = mapRange(color.red, 0, 255, 100, 230); 57 57 + const green = mapRange(color.green, 0, 255, 100, 230); 58 58 + const blue = mapRange(color.blue, 0, 255, 100, 230); 59 59 + 60 60 + return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`; 61 61 + }; 62 62 + 63 63 + const handleLayout = (event: LayoutChangeEvent) => { 64 64 + const width = event.nativeEvent.layout.width; 65 65 + if (width > 0) { 66 66 + setMessageWidth(width); 67 67 + if (onWidthMeasured) { 68 68 + onWidthMeasured(message.uri, width); 69 69 + } 70 70 + } 71 71 + }; 72 72 + 73 73 + useEffect(() => { 74 74 + if (messageWidth === 0) return; // Wait for layout measurement 75 75 + 76 76 + const duration = baseDuration(message, MAX_DURATION, MIN_DURATION); 77 77 + 78 78 + // Calculate how much time has elapsed if animation already started 79 79 + let remainingDuration = duration; 80 80 + let startPosition = containerWidth; 81 81 + 82 82 + if (animationStartTime !== null) { 83 83 + const elapsed = Date.now() - animationStartTime; 84 84 + const progress = Math.min(elapsed / totalDuration, 1); 85 85 + remainingDuration = duration * (1 - progress); 86 86 + startPosition = 87 87 + containerWidth + progress * (-messageWidth - containerWidth); 88 88 + } else { 89 89 + setAnimationStartTime(Date.now()); 90 90 + setTotalDuration(duration); 91 91 + } 92 92 + 93 93 + if (__DEV__) 94 94 + console.log( 95 95 + `[danmu] animation started: "${message.record.text}" (duration: ${duration.toFixed(0)}ms, remaining: ${remainingDuration.toFixed(0)}ms, speed: ${speed}x)`, 96 96 + ); 97 97 + 98 98 + translateX.value = startPosition; 99 99 + 100 100 + translateX.value = withTiming( 101 101 + -messageWidth, 102 102 + { 103 103 + duration: remainingDuration, 104 104 + easing: Easing.linear, 105 105 + }, 106 106 + (finished) => { 107 107 + if (finished) { 108 108 + runOnJS(onComplete)(message.uri); 109 109 + } 110 110 + }, 111 111 + ); 112 112 + }, [ 113 113 + messageWidth, 114 114 + containerWidth, 115 115 + speed, 116 116 + message.uri, 117 117 + message.record.text.length, 118 118 + lane, 119 119 + onComplete, 120 120 + ]); 121 121 + 122 122 + const animatedStyle = useAnimatedStyle(() => { 123 123 + return { 124 124 + transform: [{ translateX: translateX.value }], 125 125 + }; 126 126 + }); 127 127 + 128 128 + return ( 129 129 + <Animated.View 130 130 + style={[ 131 131 + styles.container, 132 132 + { 133 133 + top: videoTop + lane * laneHeight, 134 134 + opacity: opacity / 100, 135 135 + }, 136 136 + animatedStyle, 137 137 + ]} 138 138 + onLayout={handleLayout} 139 139 + > 140 140 + <Text 141 141 + style={[ 142 142 + styles.text, 143 143 + { 144 144 + fontSize, 145 145 + color: getRgbColor(message.chatProfile?.color), 146 146 + }, 147 147 + ]} 148 148 + numberOfLines={1} 149 149 + > 150 150 + {message.record.text} 151 151 + </Text> 152 152 + </Animated.View> 153 153 + ); 154 154 + }, 155 155 + (prevProps, nextProps) => { 156 156 + return ( 157 157 + prevProps.message.uri === nextProps.message.uri && 158 158 + prevProps.lane === nextProps.lane && 159 159 + prevProps.laneHeight === nextProps.laneHeight && 160 160 + prevProps.videoTop === nextProps.videoTop && 161 161 + prevProps.opacity === nextProps.opacity && 162 162 + prevProps.fontSize === nextProps.fontSize && 163 163 + prevProps.speed === nextProps.speed && 164 164 + prevProps.containerWidth === nextProps.containerWidth && 165 165 + prevProps.containerHeight === nextProps.containerHeight 166 166 + ); 167 167 + }, 168 168 + ); 169 169 + 170 170 + const styles = StyleSheet.create({ 171 171 + container: { 172 172 + position: "absolute", 173 173 + left: 0, 174 174 + }, 175 175 + text: { 176 176 + color: "white", 177 177 + textShadowColor: "rgba(0, 0, 0, 0.8)", 178 178 + textShadowOffset: { width: 1, height: 1 }, 179 179 + textShadowRadius: 64, 180 180 + fontWeight: "600", 181 181 + }, 182 182 + });

+44

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

··· 1 1 + import { StyleSheet } from "react-native"; 2 2 + import { View } from "../ui"; 3 3 + import { DanmuOverlay } from "./danmu-overlay"; 4 4 + 5 5 + interface DanmuOverlayOBSProps { 6 6 + channelDid?: string; 7 7 + enabled?: boolean; 8 8 + opacity?: number; 9 9 + speed?: number; 10 10 + laneCount?: number; 11 11 + maxMessages?: number; 12 12 + } 13 13 + 14 14 + export function DanmuOverlayOBS({ 15 15 + channelDid, 16 16 + enabled = true, 17 17 + opacity = 80, 18 18 + speed = 1, 19 19 + laneCount = 12, 20 20 + maxMessages = 50, 21 21 + }: DanmuOverlayOBSProps) { 22 22 + return ( 23 23 + <View style={styles.container}> 24 24 + <DanmuOverlay 25 25 + enabled={enabled} 26 26 + opacity={opacity} 27 27 + speed={speed} 28 28 + laneCount={laneCount} 29 29 + maxMessages={maxMessages} 30 30 + /> 31 31 + </View> 32 32 + ); 33 33 + } 34 34 + 35 35 + const styles = StyleSheet.create({ 36 36 + container: { 37 37 + position: "absolute", 38 38 + top: 0, 39 39 + left: 0, 40 40 + right: 0, 41 41 + bottom: 0, 42 42 + backgroundColor: "transparent", 43 43 + }, 44 44 + });

+225

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

··· 1 1 + import { useCallback, useEffect, useRef, useState } from "react"; 2 2 + import { LayoutChangeEvent, StyleSheet } from "react-native"; 3 3 + import { ChatMessageViewHydrated } from "streamplace"; 4 4 + import { useChat, useLivestreamStore } from "../../livestream-store"; 5 5 + import { View } from "../ui"; 6 6 + import { DanmuMessage } from "./danmu-message"; 7 7 + import { baseDuration, MAX_DURATION, MIN_DURATION } from "./math"; 8 8 + import { useDanmuLanes } from "./use-danmu-lanes"; 9 9 + 10 10 + interface DanmuOverlayProps { 11 11 + enabled?: boolean; 12 12 + opacity?: number; 13 13 + speed?: number; 14 14 + laneCount?: number; 15 15 + maxMessages?: number; 16 16 + } 17 17 + 18 18 + interface ActiveDanmuMessage { 19 19 + message: ChatMessageViewHydrated; 20 20 + lane: number; 21 21 + } 22 22 + 23 23 + const DEFAULT_LANE_COUNT = 12; 24 24 + const DEFAULT_OPACITY = 80; 25 25 + const DEFAULT_SPEED = 1; 26 26 + const DEFAULT_MAX_MESSAGES = 50; 27 27 + const FONT_SIZE_PERCENTAGE = 0.7; 28 28 + const MAX_PROCESSED_MESSAGES = 10; 29 29 + 30 30 + // px from top of video where danmu won't appear (avoid overlapping with title) 31 31 + const TOP_GAP = 20; 32 32 + // px from bottom of video (avoid overlapping with controls) 33 33 + const BOTTOM_GAP = 20; 34 34 + 35 35 + export function DanmuOverlay({ 36 36 + enabled = true, 37 37 + opacity = DEFAULT_OPACITY, 38 38 + speed = DEFAULT_SPEED, 39 39 + laneCount = DEFAULT_LANE_COUNT, 40 40 + maxMessages = DEFAULT_MAX_MESSAGES, 41 41 + }: DanmuOverlayProps) { 42 42 + const chat = useChat(); 43 43 + const segment = useLivestreamStore((x) => x.segment); 44 44 + 45 45 + const [containerWidth, setContainerWidth] = useState(0); 46 46 + const [containerHeight, setContainerHeight] = useState(0); 47 47 + const [activeDanmu, setActiveDanmu] = useState< 48 48 + Map<string, ActiveDanmuMessage> 49 49 + >(new Map()); 50 50 + const processedMessages = useRef(new Set<string>()); 51 51 + const mountTime = useRef(Date.now()); 52 52 + const lastChatLength = useRef(0); 53 53 + const { assignLane, updateDanmuWidth, releaseLane, cleanup } = useDanmuLanes( 54 54 + laneCount, 55 55 + containerWidth, 56 56 + ); 57 57 + 58 58 + const handleLayout = useCallback((event: LayoutChangeEvent) => { 59 59 + const { width, height } = event.nativeEvent.layout; 60 60 + setContainerWidth(width); 61 61 + setContainerHeight(height); 62 62 + }, []); 63 63 + 64 64 + const handleMessageComplete = useCallback( 65 65 + (messageId: string) => { 66 66 + releaseLane(messageId); 67 67 + setActiveDanmu((prev) => { 68 68 + const next = new Map(prev); 69 69 + next.delete(messageId); 70 70 + return next; 71 71 + }); 72 72 + }, 73 73 + [releaseLane], 74 74 + ); 75 75 + 76 76 + const handleWidthMeasured = useCallback( 77 77 + (messageId: string, width: number) => { 78 78 + updateDanmuWidth(messageId, width); 79 79 + }, 80 80 + [updateDanmuWidth], 81 81 + ); 82 82 + 83 83 + useEffect(() => { 84 84 + if (!enabled || !chat || containerWidth === 0) return; 85 85 + 86 86 + // only check new messages since last render (chat is sorted newest first) 87 87 + const newMessageCount = chat.length - lastChatLength.current; 88 88 + if (newMessageCount <= 0) return; 89 89 + 90 90 + const messagesToCheck = chat.slice(0, newMessageCount); 91 91 + lastChatLength.current = chat.length; 92 92 + 93 93 + const newMessages = messagesToCheck.filter((msg) => { 94 94 + const hasProcessed = processedMessages.current.has(msg.uri); 95 95 + const isSystem = msg.author.did === "did:sys:system"; 96 96 + const msgTime = new Date(msg.record.createdAt).getTime(); 97 97 + const isAfterMount = msgTime >= mountTime.current; 98 98 + 99 99 + return !hasProcessed && !isSystem && isAfterMount; 100 100 + }); 101 101 + 102 102 + if (newMessages.length === 0) return; 103 103 + 104 104 + const messagesToAdd: ActiveDanmuMessage[] = []; 105 105 + 106 106 + for (const message of newMessages.slice(0, maxMessages)) { 107 107 + // mark as processed FIRST to prevent duplicate processing if effect runs twice 108 108 + if (processedMessages.current.has(message.uri)) { 109 109 + continue; 110 110 + } 111 111 + processedMessages.current.add(message.uri); 112 112 + 113 113 + if (processedMessages.current.size > MAX_PROCESSED_MESSAGES) { 114 114 + const toRemove = Array.from(processedMessages.current).slice( 115 115 + 0, 116 116 + processedMessages.current.size - MAX_PROCESSED_MESSAGES, 117 117 + ); 118 118 + toRemove.forEach((uri) => processedMessages.current.delete(uri)); 119 119 + } 120 120 + 121 121 + const duration = baseDuration(message, MAX_DURATION, MIN_DURATION); 122 122 + if (__DEV__) 123 123 + console.log("[danmu] message", message.record.text, { 124 124 + duration, 125 125 + speed, 126 126 + }); 127 127 + const lane = assignLane(message.uri, duration); 128 128 + 129 129 + if (lane !== null) { 130 130 + messagesToAdd.push({ message, lane }); 131 131 + } 132 132 + } 133 133 + 134 134 + if (messagesToAdd.length > 0) { 135 135 + setActiveDanmu((prev) => { 136 136 + const next = new Map(prev); 137 137 + for (const danmu of messagesToAdd) { 138 138 + next.set(danmu.message.uri, danmu); 139 139 + } 140 140 + return next; 141 141 + }); 142 142 + } 143 143 + }, [chat, enabled, speed, maxMessages]); 144 144 + 145 145 + useEffect(() => { 146 146 + const interval = setInterval(() => { 147 147 + cleanup(); 148 148 + }, 1000); 149 149 + 150 150 + return () => clearInterval(interval); 151 151 + }, [cleanup]); 152 152 + 153 153 + if (!enabled || containerWidth === 0 || containerHeight === 0) { 154 154 + return <View style={styles.container} onLayout={handleLayout} />; 155 155 + } 156 156 + 157 157 + // Calculate video bounds based on actual video dimensions from segment 158 158 + const segmentVideoWidth = segment?.video?.[0]?.width; 159 159 + const segmentVideoHeight = segment?.video?.[0]?.height; 160 160 + 161 161 + // Fall back to 16:9 if no segment dimensions available 162 162 + const videoAspectRatio = 163 163 + segmentVideoWidth && segmentVideoHeight 164 164 + ? segmentVideoWidth / segmentVideoHeight 165 165 + : 16 / 9; 166 166 + 167 167 + const containerAspectRatio = containerWidth / containerHeight; 168 168 + 169 169 + let videoWidth: number; 170 170 + let videoHeight: number; 171 171 + let videoTop: number; 172 172 + let videoLeft: number; 173 173 + 174 174 + if (containerAspectRatio > videoAspectRatio) { 175 175 + // Container is wider than video - letterbox on sides 176 176 + videoHeight = containerHeight; 177 177 + videoWidth = videoHeight * videoAspectRatio; 178 178 + videoTop = 0; 179 179 + videoLeft = (containerWidth - videoWidth) / 2; 180 180 + // Adjust for top/bottom gaps iff we don't have top letterboxing 181 181 + videoTop += TOP_GAP; 182 182 + videoHeight -= TOP_GAP + BOTTOM_GAP; 183 183 + } else { 184 184 + // Container is taller than video - letterbox on top/bottom 185 185 + videoWidth = containerWidth; 186 186 + videoHeight = videoWidth / videoAspectRatio; 187 187 + videoTop = (containerHeight - videoHeight) / 2; 188 188 + videoLeft = 0; 189 189 + } 190 190 + 191 191 + const laneHeight = videoHeight / laneCount; 192 192 + const fontSize = laneHeight * FONT_SIZE_PERCENTAGE; 193 193 + 194 194 + return ( 195 195 + <View style={styles.container} onLayout={handleLayout} pointerEvents="none"> 196 196 + {Array.from(activeDanmu.values()).map(({ message, lane }) => ( 197 197 + <DanmuMessage 198 198 + key={message.uri} 199 199 + message={message} 200 200 + lane={lane} 201 201 + laneHeight={laneHeight} 202 202 + videoTop={videoTop} 203 203 + opacity={opacity} 204 204 + fontSize={fontSize} 205 205 + speed={speed} 206 206 + containerWidth={containerWidth} 207 207 + containerHeight={containerHeight} 208 208 + onComplete={handleMessageComplete} 209 209 + onWidthMeasured={handleWidthMeasured} 210 210 + /> 211 211 + ))} 212 212 + </View> 213 213 + ); 214 214 + } 215 215 + 216 216 + const styles = StyleSheet.create({ 217 217 + container: { 218 218 + position: "absolute", 219 219 + top: 0, 220 220 + left: 0, 221 221 + right: 0, 222 222 + bottom: 0, 223 223 + overflow: "hidden", 224 224 + }, 225 225 + });

+27

js/components/src/components/danmu/math.ts

··· 1 1 + export const mapRange = ( 2 2 + num: number, 3 3 + inMin: number, 4 4 + inMax: number, 5 5 + outMin: number, 6 6 + outMax: number, 7 7 + ) => { 8 8 + return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; 9 9 + }; 10 10 + 11 11 + export const between = (num: number, min: number, max: number) => { 12 12 + return Math.min(Math.max(num, min), max); 13 13 + }; 14 14 + 15 15 + export const baseDuration = ( 16 16 + message: { record: { text: string | any[] } }, 17 17 + min: number, 18 18 + max: number, 19 19 + ) => 20 20 + between( 21 21 + mapRange(Math.log(message.record.text.length) * 8, 1, 16, min, max), 22 22 + min, 23 23 + max, 24 24 + ); 25 25 + 26 26 + export const MIN_DURATION = 6000; 27 27 + export const MAX_DURATION = 12000;

+28

js/components/src/components/danmu/mu.tsx

··· 1 1 + import { G, Path, Svg, SvgProps } from "react-native-svg"; 2 2 + 3 3 + export interface MuProps extends SvgProps { 4 4 + size?: number | string; 5 5 + color?: string; 6 6 + strokeWidth?: number | string; 7 7 + } 8 8 + 9 9 + export const Mu = ({ 10 10 + size = 24, 11 11 + color = "#000000", 12 12 + strokeWidth = 10.9, 13 13 + ...props 14 14 + }: MuProps) => ( 15 15 + <Svg width={size} height={size} viewBox="0 0 230 220" {...props}> 16 16 + <G 17 17 + strokeLinecap="round" 18 18 + fillRule="evenodd" 19 19 + stroke={color} 20 20 + strokeWidth={strokeWidth} 21 21 + fill={color} 22 22 + > 23 23 + <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" /> 24 24 + </G> 25 25 + </Svg> 26 26 + ); 27 27 + 28 28 + export default Mu;

+114

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

··· 1 1 + import { useCallback, useRef } from "react"; 2 2 + 3 3 + export interface DanmuLane { 4 4 + index: number; 5 5 + occupiedUntil: number; 6 6 + } 7 7 + 8 8 + export interface ActiveDanmu { 9 9 + id: string; 10 10 + lane: number; 11 11 + endTime: number; 12 12 + startTime: number; 13 13 + duration: number; 14 14 + width?: number; 15 15 + } 16 16 + 17 17 + const LANE_GAP = 4; 18 18 + 19 19 + export const useDanmuLanes = (laneCount: number, containerWidth: number) => { 20 20 + const activeDanmu = useRef<Map<string, ActiveDanmu>>(new Map()); 21 21 + const lanes = useRef<DanmuLane[]>( 22 22 + Array.from({ length: laneCount }, (_, i) => ({ 23 23 + index: i, 24 24 + occupiedUntil: 0, 25 25 + })), 26 26 + ); 27 27 + 28 28 + const canFitInLane = useCallback( 29 29 + (laneIndex: number): boolean => { 30 30 + const now = Date.now(); 31 31 + 32 32 + // find all active danmu in this lane 33 33 + const danmuInLane = Array.from(activeDanmu.current.values()).filter( 34 34 + (d) => d.lane === laneIndex && d.endTime > now, 35 35 + ); 36 36 + 37 37 + if (danmuInLane.length === 0) return true; 38 38 + 39 39 + // check the most recent danmu in this lane 40 40 + const mostRecent = danmuInLane.reduce((latest, current) => 41 41 + current.startTime > latest.startTime ? current : latest, 42 42 + ); 43 43 + 44 44 + // calculate how far it has traveled 45 45 + const elapsed = now - mostRecent.startTime; 46 46 + const progress = elapsed / mostRecent.duration; 47 47 + const traveled = containerWidth * progress; 48 48 + 49 49 + // estimate width (assume ~8px per char, will be updated with actual width later) 50 50 + const estimatedWidth = mostRecent.width || 200; 51 51 + 52 52 + // check if there's enough space 53 53 + const spaceNeeded = estimatedWidth + LANE_GAP; 54 54 + const hasSpace = traveled >= spaceNeeded; 55 55 + 56 56 + return hasSpace; 57 57 + }, 58 58 + [containerWidth], 59 59 + ); 60 60 + 61 61 + const assignLane = useCallback( 62 62 + (messageId: string, duration: number, width?: number): number | null => { 63 63 + const now = Date.now(); 64 64 + 65 65 + for (const lane of lanes.current) { 66 66 + if (canFitInLane(lane.index)) { 67 67 + const endTime = now + duration; 68 68 + activeDanmu.current.set(messageId, { 69 69 + id: messageId, 70 70 + lane: lane.index, 71 71 + endTime, 72 72 + startTime: now, 73 73 + duration, 74 74 + width, 75 75 + }); 76 76 + return lane.index; 77 77 + } 78 78 + } 79 79 + 80 80 + return null; 81 81 + }, 82 82 + [lanes, canFitInLane], 83 83 + ); 84 84 + 85 85 + const updateDanmuWidth = useCallback((messageId: string, width: number) => { 86 86 + const danmu = activeDanmu.current.get(messageId); 87 87 + if (danmu) { 88 88 + danmu.width = width; 89 89 + } 90 90 + }, []); 91 91 + 92 92 + const releaseLane = useCallback((messageId: string) => { 93 93 + const danmu = activeDanmu.current.get(messageId); 94 94 + if (danmu) { 95 95 + activeDanmu.current.delete(messageId); 96 96 + } 97 97 + }, []); 98 98 + 99 99 + const cleanup = useCallback(() => { 100 100 + const now = Date.now(); 101 101 + for (const [id, danmu] of activeDanmu.current.entries()) { 102 102 + if (danmu.endTime <= now) { 103 103 + activeDanmu.current.delete(id); 104 104 + } 105 105 + } 106 106 + }, []); 107 107 + 108 108 + return { 109 109 + assignLane, 110 110 + updateDanmuWidth, 111 111 + releaseLane, 112 112 + cleanup, 113 113 + }; 114 114 + };

+26

js/components/src/components/mobile-player/fullscreen.native.tsx

··· 4 4 import { SystemBars } from "react-native-edge-to-edge"; 5 5 import { useSafeAreaInsets } from "react-native-safe-area-context"; 6 6 import { 7 7 + DanmuOverlay, 7 8 PlayerProtocol, 9 9 + useDanmuEnabled, 10 10 + useDanmuLaneCount, 11 11 + useDanmuMaxMessages, 12 12 + useDanmuOpacity, 13 13 + useDanmuSpeed, 8 14 useLivestreamStore, 9 15 usePlayerStore, 10 16 VideoRetry, ··· 29 35 const fullscreen = usePlayerStore((x) => x.fullscreen); 30 36 const setFullscreen = usePlayerStore((x) => x.setFullscreen); 31 37 const handle = useLivestreamStore((x) => x.profile?.handle); 38 38 + 39 39 + const danmuEnabled = useDanmuEnabled(); 40 40 + const danmuOpacity = useDanmuOpacity(); 41 41 + const danmuSpeed = useDanmuSpeed(); 42 42 + const danmuLaneCount = useDanmuLaneCount(); 43 43 + const danmuMaxMessages = useDanmuMaxMessages(); 32 44 33 45 const setSrc = usePlayerStore((x) => x.setSrc); 34 46 ··· 154 166 objectFit={props.objectFit} 155 167 pictureInPictureEnabled={props.pictureInPictureEnabled} 156 168 /> 169 169 + <DanmuOverlay 170 170 + enabled={danmuEnabled} 171 171 + opacity={danmuOpacity} 172 172 + speed={danmuSpeed} 173 173 + laneCount={danmuLaneCount} 174 174 + maxMessages={danmuMaxMessages} 175 175 + /> 157 176 {props.children} 158 177 </View> 159 178 </View> ··· 169 188 pictureInPictureEnabled={props.pictureInPictureEnabled} 170 189 /> 171 190 </VideoRetry> 191 191 + <DanmuOverlay 192 192 + enabled={danmuEnabled} 193 193 + opacity={danmuOpacity} 194 194 + speed={danmuSpeed} 195 195 + laneCount={danmuLaneCount} 196 196 + maxMessages={danmuMaxMessages} 197 197 + /> 172 198 {props.children} 173 199 </> 174 200 );

+23 -1

js/components/src/components/mobile-player/fullscreen.tsx

··· 1 1 import { useEffect, useRef } from "react"; 2 2 import { View as RNView } from "react-native"; 3 3 - import { getFirstPlayerID, usePlayerStore } from "../.."; 3 3 + import { 4 4 + DanmuOverlay, 5 5 + getFirstPlayerID, 6 6 + useDanmuEnabled, 7 7 + useDanmuLaneCount, 8 8 + useDanmuMaxMessages, 9 9 + useDanmuOpacity, 10 10 + useDanmuSpeed, 11 11 + usePlayerStore, 12 12 + } from "../.."; 4 13 import { View } from "../../components/ui"; 5 14 import Video from "./video"; 6 15 import VideoRetry from "./video-retry"; ··· 17 26 const setFullscreen = usePlayerStore((x) => x.setFullscreen, playerId); 18 27 const setSrc = usePlayerStore((x) => x.setSrc); 19 28 const setAutoplayFailed = usePlayerStore((x) => x.setAutoplayFailed); 29 29 + 30 30 + const danmuEnabled = useDanmuEnabled(); 31 31 + const danmuOpacity = useDanmuOpacity(); 32 32 + const danmuSpeed = useDanmuSpeed(); 33 33 + const danmuLaneCount = useDanmuLaneCount(); 34 34 + const danmuMaxMessages = useDanmuMaxMessages(); 20 35 21 36 const divRef = useRef<RNView>(null); 22 37 const videoRef = useRef<HTMLVideoElement | null>(null); ··· 90 105 pictureInPictureEnabled={props.pictureInPictureEnabled} 91 106 /> 92 107 </VideoRetry> 108 108 + <DanmuOverlay 109 109 + enabled={danmuEnabled} 110 110 + opacity={danmuOpacity} 111 111 + speed={danmuSpeed} 112 112 + laneCount={danmuLaneCount} 113 113 + maxMessages={danmuMaxMessages} 114 114 + /> 93 115 {props.children} 94 116 </View> 95 117 );

+3

js/components/src/index.tsx

··· 37 37 export { default as VideoRetry } from "./components/mobile-player/video-retry"; 38 38 export * from "./lib/system-messages"; 39 39 40 40 + export { DanmuOverlay } from "./components/danmu/danmu-overlay"; 41 41 + export { DanmuOverlayOBS } from "./components/danmu/danmu-overlay-obs"; 42 42 + 40 43 // Rotation lock system exports 41 44 export { 42 45 RotationProvider,

+184 -2

js/components/src/streamplace-store/streamplace-store.tsx

··· 54 54 muted: boolean; 55 55 setVolume: (volume: number) => void; 56 56 setMuted: (muted: boolean) => void; 57 57 + 58 58 + // Danmu settings 59 59 + danmuUnlocked: boolean; 60 60 + danmuEnabled: boolean; 61 61 + danmuOpacity: number; 62 62 + danmuSpeed: number; 63 63 + danmuLaneCount: number; 64 64 + danmuMaxMessages: number; 65 65 + setDanmuUnlocked: (unlocked: boolean) => void; 66 66 + setDanmuEnabled: (enabled: boolean) => void; 67 67 + setDanmuOpacity: (opacity: number) => void; 68 68 + setDanmuSpeed: (speed: number) => void; 69 69 + setDanmuLaneCount: (laneCount: number) => void; 70 70 + setDanmuMaxMessages: (maxMessages: number) => void; 57 71 } 58 72 59 73 export type StreamplaceStore = StoreApi<StreamplaceState>; ··· 65 79 }): StoreApi<StreamplaceState> => { 66 80 const VOLUME_STORAGE_KEY = "globalVolume"; 67 81 const MUTED_STORAGE_KEY = "globalMuted"; 82 82 + const DANMU_UNLOCKED_KEY = "danmuUnlocked"; 83 83 + const DANMU_ENABLED_KEY = "danmuEnabled"; 84 84 + const DANMU_OPACITY_KEY = "danmuOpacity"; 85 85 + const DANMU_SPEED_KEY = "danmuSpeed"; 86 86 + const DANMU_LANE_COUNT_KEY = "danmuLaneCount"; 87 87 + const DANMU_MAX_MESSAGES_KEY = "danmuMaxMessages"; 68 88 69 89 const store = createStore<StreamplaceState>()((set) => ({ 70 90 url, ··· 125 145 set({ muted }); 126 146 storage.setItem(MUTED_STORAGE_KEY, muted.toString()).catch(console.error); 127 147 }, 148 148 + 149 149 + // Danmu settings - start with defaults 150 150 + danmuUnlocked: false, 151 151 + danmuEnabled: false, 152 152 + danmuOpacity: 80, 153 153 + danmuSpeed: 1, 154 154 + danmuLaneCount: 12, 155 155 + danmuMaxMessages: 50, 156 156 + 157 157 + setDanmuUnlocked: (unlocked: boolean) => { 158 158 + set({ danmuUnlocked: unlocked }); 159 159 + storage 160 160 + .setItem(DANMU_UNLOCKED_KEY, unlocked.toString()) 161 161 + .catch(console.error); 162 162 + }, 163 163 + 164 164 + setDanmuEnabled: (enabled: boolean) => { 165 165 + set({ danmuEnabled: enabled }); 166 166 + storage 167 167 + .setItem(DANMU_ENABLED_KEY, enabled.toString()) 168 168 + .catch(console.error); 169 169 + }, 170 170 + 171 171 + setDanmuOpacity: (opacity: number) => { 172 172 + const clamped = Math.max(0, Math.min(100, opacity)); 173 173 + set({ danmuOpacity: clamped }); 174 174 + storage 175 175 + .setItem(DANMU_OPACITY_KEY, clamped.toString()) 176 176 + .catch(console.error); 177 177 + }, 178 178 + 179 179 + setDanmuSpeed: (speed: number) => { 180 180 + const clamped = Math.max(0.1, Math.min(3, speed)); 181 181 + set({ danmuSpeed: clamped }); 182 182 + storage.setItem(DANMU_SPEED_KEY, clamped.toString()).catch(console.error); 183 183 + }, 184 184 + 185 185 + setDanmuLaneCount: (laneCount: number) => { 186 186 + const clamped = Math.max(4, Math.min(20, laneCount)); 187 187 + set({ danmuLaneCount: clamped }); 188 188 + storage 189 189 + .setItem(DANMU_LANE_COUNT_KEY, clamped.toString()) 190 190 + .catch(console.error); 191 191 + }, 192 192 + 193 193 + setDanmuMaxMessages: (maxMessages: number) => { 194 194 + const clamped = Math.max(5, Math.min(200, maxMessages)); 195 195 + set({ danmuMaxMessages: clamped }); 196 196 + storage 197 197 + .setItem(DANMU_MAX_MESSAGES_KEY, clamped.toString()) 198 198 + .catch(console.error); 199 199 + }, 128 200 })); 129 201 130 130 - // Load initial volume state from storage asynchronously 202 202 + // Load initial volume and danmu state from storage asynchronously 131 203 (async () => { 132 204 try { 133 205 const storedVolume = await storage.getItem(VOLUME_STORAGE_KEY); 134 206 const storedMuted = await storage.getItem(MUTED_STORAGE_KEY); 207 207 + const storedDanmuUnlocked = await storage.getItem(DANMU_UNLOCKED_KEY); 208 208 + const storedDanmuEnabled = await storage.getItem(DANMU_ENABLED_KEY); 209 209 + const storedDanmuOpacity = await storage.getItem(DANMU_OPACITY_KEY); 210 210 + const storedDanmuSpeed = await storage.getItem(DANMU_SPEED_KEY); 211 211 + const storedDanmuLaneCount = await storage.getItem(DANMU_LANE_COUNT_KEY); 212 212 + const storedDanmuMaxMessages = await storage.getItem( 213 213 + DANMU_MAX_MESSAGES_KEY, 214 214 + ); 135 215 136 216 let initialVolume = 1.0; 137 217 let initialMuted = false; 218 218 + let initialDanmuUnlocked = false; 219 219 + let initialDanmuEnabled = false; 220 220 + let initialDanmuOpacity = 80; 221 221 + let initialDanmuSpeed = 1; 222 222 + let initialDanmuLaneCount = 12; 223 223 + let initialDanmuMaxMessages = 50; 138 224 139 225 if (storedVolume) { 140 226 const parsedVolume = parseFloat(storedVolume); ··· 151 237 initialMuted = storedMuted === "true"; 152 238 } 153 239 240 240 + if (storedDanmuUnlocked) { 241 241 + initialDanmuUnlocked = storedDanmuUnlocked === "true"; 242 242 + } 243 243 + 244 244 + if (storedDanmuEnabled) { 245 245 + initialDanmuEnabled = storedDanmuEnabled === "true"; 246 246 + } 247 247 + 248 248 + if (storedDanmuOpacity) { 249 249 + const parsed = parseInt(storedDanmuOpacity); 250 250 + if (Number.isFinite(parsed) && parsed >= 0 && parsed <= 100) { 251 251 + initialDanmuOpacity = parsed; 252 252 + } 253 253 + } 254 254 + 255 255 + if (storedDanmuSpeed) { 256 256 + const parsed = parseFloat(storedDanmuSpeed); 257 257 + if (Number.isFinite(parsed) && parsed >= 0.1 && parsed <= 3) { 258 258 + initialDanmuSpeed = parsed; 259 259 + } 260 260 + } 261 261 + 262 262 + if (storedDanmuLaneCount) { 263 263 + const parsed = parseInt(storedDanmuLaneCount); 264 264 + if (Number.isFinite(parsed) && parsed >= 4 && parsed <= 20) { 265 265 + initialDanmuLaneCount = parsed; 266 266 + } 267 267 + } 268 268 + 269 269 + if (storedDanmuMaxMessages) { 270 270 + const parsed = parseInt(storedDanmuMaxMessages); 271 271 + if (Number.isFinite(parsed) && parsed >= 5 && parsed <= 200) { 272 272 + initialDanmuMaxMessages = parsed; 273 273 + } 274 274 + } 275 275 + 154 276 store.setState({ 155 277 volume: initialVolume, 156 278 muted: initialMuted, 279 279 + danmuUnlocked: initialDanmuUnlocked, 280 280 + danmuEnabled: initialDanmuEnabled, 281 281 + danmuOpacity: initialDanmuOpacity, 282 282 + danmuSpeed: initialDanmuSpeed, 283 283 + danmuLaneCount: initialDanmuLaneCount, 284 284 + danmuMaxMessages: initialDanmuMaxMessages, 157 285 }); 158 286 } catch (error) { 159 159 - console.error("Failed to load volume state from storage:", error); 287 287 + console.error("Failed to load state from storage:", error); 160 288 } 161 289 })(); 162 290 ··· 212 340 // Ensure we always return a finite number for HTMLMediaElement.volume 213 341 return Number.isFinite(effectiveVolume) ? effectiveVolume : 1.0; 214 342 }); 343 343 + 344 344 + // Danmu convenience hooks 345 345 + export const useDanmuUnlocked = () => 346 346 + useStreamplaceStore((x) => x.danmuUnlocked); 347 347 + export const useDanmuEnabled = () => useStreamplaceStore((x) => x.danmuEnabled); 348 348 + export const useDanmuOpacity = () => useStreamplaceStore((x) => x.danmuOpacity); 349 349 + export const useDanmuSpeed = () => useStreamplaceStore((x) => x.danmuSpeed); 350 350 + export const useDanmuLaneCount = () => 351 351 + useStreamplaceStore((x) => x.danmuLaneCount); 352 352 + export const useDanmuMaxMessages = () => 353 353 + useStreamplaceStore((x) => x.danmuMaxMessages); 354 354 + export const useSetDanmuUnlocked = () => 355 355 + useStreamplaceStore((x) => x.setDanmuUnlocked); 356 356 + export const useSetDanmuEnabled = () => 357 357 + useStreamplaceStore((x) => x.setDanmuEnabled); 358 358 + export const useSetDanmuOpacity = () => 359 359 + useStreamplaceStore((x) => x.setDanmuOpacity); 360 360 + export const useSetDanmuSpeed = () => 361 361 + useStreamplaceStore((x) => x.setDanmuSpeed); 362 362 + export const useSetDanmuLaneCount = () => 363 363 + useStreamplaceStore((x) => x.setDanmuLaneCount); 364 364 + export const useSetDanmuMaxMessages = () => 365 365 + useStreamplaceStore((x) => x.setDanmuMaxMessages); 366 366 + 367 367 + // Composite hook that calls all individual hooks 368 368 + export const useDanmuSettings = () => { 369 369 + const danmuUnlocked = useDanmuUnlocked(); 370 370 + const danmuEnabled = useDanmuEnabled(); 371 371 + const danmuOpacity = useDanmuOpacity(); 372 372 + const danmuSpeed = useDanmuSpeed(); 373 373 + const danmuLaneCount = useDanmuLaneCount(); 374 374 + const danmuMaxMessages = useDanmuMaxMessages(); 375 375 + const setDanmuUnlocked = useSetDanmuUnlocked(); 376 376 + const setDanmuEnabled = useSetDanmuEnabled(); 377 377 + const setDanmuOpacity = useSetDanmuOpacity(); 378 378 + const setDanmuSpeed = useSetDanmuSpeed(); 379 379 + const setDanmuLaneCount = useSetDanmuLaneCount(); 380 380 + const setDanmuMaxMessages = useSetDanmuMaxMessages(); 381 381 + 382 382 + return { 383 383 + danmuUnlocked, 384 384 + danmuEnabled, 385 385 + danmuOpacity, 386 386 + danmuSpeed, 387 387 + danmuLaneCount, 388 388 + danmuMaxMessages, 389 389 + setDanmuUnlocked, 390 390 + setDanmuEnabled, 391 391 + setDanmuOpacity, 392 392 + setDanmuSpeed, 393 393 + setDanmuLaneCount, 394 394 + setDanmuMaxMessages, 395 395 + }; 396 396 + }; 215 397 216 398 export { useCreateStreamRecord, useUpdateStreamRecord } from "./stream";

+4 -4

js/docs/astro.config.mjs

··· 66 66 }, 67 67 ], 68 68 }, 69 69 - // { 70 70 - // label: "Reference", 71 71 - // autogenerate: { directory: "reference" }, 72 72 - // }, 69 69 + { 70 70 + label: "Features", 71 71 + autogenerate: { directory: "features" }, 72 72 + }, 73 73 { 74 74 label: "Video Metadata", 75 75 autogenerate: { directory: "video-metadata" },

+62

js/docs/src/content/docs/features/danmu.md

··· 1 1 + --- 2 2 + title: Danmu Overlay 3 3 + description: Add flying bullet-style chat comments to the player, or your stream 4 4 + --- 5 5 + 6 6 + [Danmu (or Danmaku)](https://en.wikipedia.org/wiki/Danmaku_subtitling) (弹幕, 7 7 + "bullet curtain") is a comment style where messages fly across the video 8 8 + horizontally. Originating from Niconico and Bilibili, it's a fun way to display 9 9 + chat that feels more integrated with the content. Use it in your live streams to 10 10 + create a more engaging viewer experience. 11 11 + 12 12 + ## What It Does 13 13 + 14 14 + Displays chat messages as animated text that scrolls across your stream. 15 15 + Messages appear in lanes and move right-to-left at configurable speeds. The 16 16 + overlay is transparent so you can layer it over your video in OBS. 17 17 + 18 18 + ## Enabling Danmu in the player 19 19 + 20 20 + In-player danmu is currently an experimental feature. To unlock it: 21 21 + 22 22 + 1. Open Settings in Streamplace 23 23 + 2. Tap the version number 5 times 24 24 + 3. You'll see "You are now a developer". congrats! 25 25 + 4. Scroll down to see the Danmu settings 26 26 + 27 27 + From there you can: 28 28 + 29 29 + - Toggle Danmu on/off 30 30 + - Adjust opacity (0–100%) 31 31 + - Change scroll speed (0.5× to 2×) 32 32 + - Set number of lanes (4–20) 33 33 + - Limit max simultaneous messages (5–200) 34 34 + 35 35 + You can then enable Danmu in the player by clicking the Danmu (弹) icon in the 36 36 + bottom right controls row. 37 37 + 38 38 + ## Using It in OBS 39 39 + 40 40 + The Danmu overlay can be used as a browser source in OBS: 41 41 + 42 42 + 1. Add a Browser Source to your scene 43 43 + 2. Set the URL to `https://stream.place/widgets/USERNAME/danmu` 44 44 + - Replace `USERNAME` with your Bluesky handle (without the @) 45 45 + 3. Set width/height to match your canvas (e.g., 1920×1080) 46 46 + 4. Check "Shutdown source when not visible" 47 47 + 5. Optionally check "Refresh browser when scene becomes active" 48 48 + 49 49 + ### Customization via URL Parameters 50 50 + 51 51 + You can customize the overlay by adding URL parameters: 52 52 + 53 53 + - `opacity` — transparency (0–100, default 80) 54 54 + - `speed` — scroll speed multiplier (default 1) 55 55 + - `laneCount` — number of message lanes (default 12) 56 56 + - `maxMessages` — max simultaneous messages (default 50) 57 57 + 58 58 + Example with custom settings: 59 59 + 60 60 + ``` 61 61 + https://stream.place/widgets/USERNAME/danmu?opacity=90&speed=1.5&laneCount=10 62 62 + ```