13 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/demo/src/assets/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imtaotao/danmu/9ca0f4e567526db43766fb2f522a155efe814ab6/demo/src/assets/avatar.jpg
--------------------------------------------------------------------------------
/demo/src/assets/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demo/src/assets/mask.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/demo/src/components/danmu/Container.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, memo } from 'react';
2 | import { Maximize } from 'lucide-react';
3 | import type { Manager } from 'danmu';
4 | import type { DanmakuValue } from '@/types';
5 |
6 | export const Container = memo(
7 | ({ manager }: { manager: Manager
19 | {isMobile ? null : (
20 |
41 |
21 |
23 | )}
24 |
25 |
40 |
31 |
34 | {isMobile ? null : (
35 |
36 |
38 | )}
39 |
37 | {
42 | if (!document.fullscreenElement) {
43 | if (ref.current) {
44 | manager.each((dm) => {
45 | dm.destroy();
46 | });
47 | ref.current.requestFullscreen();
48 | }
49 | } else {
50 | document.exitFullscreen();
51 | }
52 | }}
53 | />
54 |
55 | );
56 | },
57 | );
58 |
--------------------------------------------------------------------------------
/demo/src/components/danmu/Danmaku.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { ThumbsUp } from 'lucide-react';
3 | import { useTranslation } from 'react-i18next';
4 | import type { Danmaku, Manager } from 'danmu';
5 | import type { Statuses, DanmakuValue } from '@/types';
6 | import { cn } from '@/lib/utils';
7 | import avatarPath from '@/assets/avatar.jpg';
8 | import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
9 | import {
10 | Popover,
11 | PopoverContent,
12 | PopoverTrigger,
13 | } from '@/components/ui/popover';
14 |
15 | // Render file：demo/src/manager.tsx
16 | export const DanmakuComponent = ({
17 | manager,
18 | danmaku,
19 | }: {
20 | danmaku: Danmaku
54 |
55 |
56 |
84 |
85 | {t('thisIsA')}
86 |
87 | {danmaku.type === 'flexible'
88 | ? t('flexibleDanmaku')
89 | : t('facileDanmaku')}
90 | {danmaku.isFixedDuration ? ` (${t('correctedDuration')})` : ''}
91 |
92 |
93 |
94 |
95 | );
96 | };
97 |
--------------------------------------------------------------------------------
/demo/src/components/danmu/TopBar.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 | import { cn, isMobile } from '@/lib/utils';
3 | import githubLogo from '@/assets/github.svg';
4 | import {
5 | Select,
6 | SelectContent,
7 | SelectItem,
8 | SelectTrigger,
9 | SelectValue,
10 | } from '@/components/ui/select';
11 |
12 | export function TopBar() {
13 | const { t, i18n } = useTranslation();
14 |
15 | return (
16 | danmaku.pause()}
58 | onMouseLeave={() => {
59 | if (!manager.isFreeze()) {
60 | danmaku.resume();
61 | }
62 | }}
63 | onClick={() => {
64 | setOpen(false);
65 | setTimeout(() => danmaku.destroy('mark'), 100);
66 | }}
67 | className={cn(
68 | isSelf ? 'border-2 border-solid border-teal-500' : '',
69 | 'py-[5px] px-3 rounded-xl font-bold text-slate-900 text-center cursor-pointer bg-gray-300 hover:bg-gray-400 flex items-center',
70 | )}
71 | >
72 |
73 | CN
75 |
76 |
77 | {danmaku.type === 'flexible'
78 | ? `${t('flexibleDanmaku')} -- ${content}`
79 | : content}
80 |
81 |
83 |
17 |
22 | 
27 |
28 |
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarAreaX.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { Dog } from 'lucide-react';
3 | import { useTranslation } from 'react-i18next';
4 | import type { Manager } from 'danmu';
5 | import type { DanmakuValue } from '@/types';
6 | import { Label } from '@/components/ui/label';
7 | import { Slider } from '@/components/ui/slider';
8 |
9 | export const SidebarAreaX = memo(
10 | ({ manager }: { manager: Manager
15 |
19 | {
26 | manager.setArea({
27 | x: {
28 | end: `${v[1]}%`,
29 | start: `${v[0]}%`,
30 | },
31 | });
32 | }}
33 | />
34 |
35 | );
36 | },
37 | );
38 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarAreaY.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { Dog } from 'lucide-react';
3 | import { useTranslation } from 'react-i18next';
4 | import type { Manager } from 'danmu';
5 | import type { DanmakuValue } from '@/types';
6 | import { Label } from '@/components/ui/label';
7 | import { Slider } from '@/components/ui/slider';
8 |
9 | export const SidebarAreaY = memo(
10 | ({ manager }: { manager: Manager
15 |
19 | {
26 | manager.setArea({
27 | y: {
28 | end: `${v[1]}%`,
29 | start: `${v[0]}%`,
30 | },
31 | });
32 | }}
33 | />
34 |
35 | );
36 | },
37 | );
38 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarDirection.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { Bone } from 'lucide-react';
3 | import { useTranslation } from 'react-i18next';
4 | import type { Manager } from 'danmu';
5 | import type { DanmakuValue } from '@/types';
6 | import { Label } from '@/components/ui/label';
7 | import { Switch } from '@/components/ui/switch';
8 |
9 | export const SidebarDirection = memo(
10 | ({ manager }: { manager: Manager
15 |
22 |
26 | manager.updateOptions({
27 | direction: v ? 'right' : 'left',
28 | })
29 | }
30 | />
31 |
32 | );
33 | },
34 | );
35 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarFreeze.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { Shell } from 'lucide-react';
3 | import { useTranslation } from 'react-i18next';
4 | import type { Manager } from 'danmu';
5 | import type { DanmakuValue } from '@/types';
6 | import { Label } from '@/components/ui/label';
7 | import { Switch } from '@/components/ui/switch';
8 |
9 | export const SidebarFreeze = memo(
10 | ({ manager }: { manager: Manager
15 |
22 | {
25 | // Do not trigger the built-in `pause` and `resume` events
26 | const options = { preventEvents: ['pause', 'resume'] };
27 | v ? manager.freeze(options) : manager.unfreeze(options);
28 | }}
29 | />
30 |
31 | );
32 | },
33 | );
34 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarFrequency.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { throttle } from 'aidly';
3 | import { Fish, CircleAlert } from 'lucide-react';
4 | import { useTranslation } from 'react-i18next';
5 | import type { Manager } from 'danmu';
6 | import type { DanmakuValue } from '@/types';
7 | import { Label } from '@/components/ui/label';
8 | import { Input } from '@/components/ui/input';
9 | import {
10 | Tooltip,
11 | TooltipContent,
12 | TooltipProvider,
13 | TooltipTrigger,
14 | } from '@/components/ui/tooltip';
15 |
16 | export const SidebarFrequency = memo(
17 | ({ manager }: { manager: Manager
22 |
36 | {
42 | manager.updateOptions({ interval: Number(e.target.value) });
43 | })}
44 | />
45 |
46 | );
47 | },
48 | );
49 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarGap.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { throttle } from 'aidly';
3 | import { useTranslation } from 'react-i18next';
4 | import { Squirrel, CircleAlert } from 'lucide-react';
5 | import type { Manager } from 'danmu';
6 | import type { DanmakuValue } from '@/types';
7 | import { Label } from '@/components/ui/label';
8 | import { Input } from '@/components/ui/input';
9 | import {
10 | Tooltip,
11 | TooltipContent,
12 | TooltipProvider,
13 | TooltipTrigger,
14 | } from '@/components/ui/tooltip';
15 |
16 | export const SidebarGap = memo(
17 | ({ manager }: { manager: Manager
22 |
36 | {
42 | manager.updateOptions({ gap: Number(e.target.value) });
43 | })}
44 | />
45 |
46 | );
47 | },
48 | );
49 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarModeSelect.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { useTranslation } from 'react-i18next';
3 | import { Snail, CircleAlert } from 'lucide-react';
4 | import type { Mode, Manager } from 'danmu';
5 | import type { DanmakuValue } from '@/types';
6 | import { Label } from '@/components/ui/label';
7 | import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
8 | import {
9 | Tooltip,
10 | TooltipContent,
11 | TooltipProvider,
12 | TooltipTrigger,
13 | } from '@/components/ui/tooltip';
14 |
15 | export const SidebarModeSelect = memo(
16 | ({ manager }: { manager: Manager
21 |
43 |
46 | manager.updateOptions({
47 | mode: e.target.textContent?.trim() as Mode,
48 | })
49 | }
50 | >
51 |
52 |
53 | none
54 |
55 |
56 | strict
57 |
58 |
59 | adaptive
60 |
61 |
62 |
63 |
64 | );
65 | },
66 | );
67 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarMoveDuration.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { throttle } from 'aidly';
3 | import { useTranslation } from 'react-i18next';
4 | import { Rabbit, CircleAlert } from 'lucide-react';
5 | import type { Manager } from 'danmu';
6 | import type { DanmakuValue } from '@/types';
7 | import { Label } from '@/components/ui/label';
8 | import { Input } from '@/components/ui/input';
9 | import {
10 | Tooltip,
11 | TooltipContent,
12 | TooltipProvider,
13 | TooltipTrigger,
14 | } from '@/components/ui/tooltip';
15 |
16 | export const SidebarMoveDuration = memo(
17 | ({ manager }: { manager: Manager
22 |
36 | {
42 | manager.updateOptions({
43 | durationRange: [
44 | Number(e.target.value),
45 | manager.options.durationRange[1],
46 | ],
47 | });
48 | })}
49 | />
50 | {
56 | manager.setDurationRange([
57 | manager.options.durationRange[0],
58 | Number(e.target.value),
59 | ]);
60 | })}
61 | />
62 |
63 | );
64 | },
65 | );
66 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarNumbers.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useState, useEffect } from 'react';
2 | import { Asterisk } from 'lucide-react';
3 | import { useTranslation } from 'react-i18next';
4 | import type { Manager } from 'danmu';
5 | import type { DanmakuValue } from '@/types';
6 | import { Label } from '@/components/ui/label';
7 | import { Badge } from '@/components/ui/badge';
8 |
9 | export const SidebarNumbers = memo(
10 | ({ manager }: { manager: Manager
39 |
43 | {renderNumber}
44 |
45 |
46 |
50 | {stashNumber}
51 |
52 |
53 |
57 | {allNumber}
58 |
59 |
60 | );
61 | },
62 | );
63 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarOcclusion.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { VenetianMask } from 'lucide-react';
3 | import { useTranslation } from 'react-i18next';
4 | import type { Manager } from 'danmu';
5 | import type { DanmakuValue } from '@/types';
6 | import { Label } from '@/components/ui/label';
7 | import { Switch } from '@/components/ui/switch';
8 | import maskPath from '@/assets/mask.svg';
9 |
10 | export const SidebarOcclusion = memo(
11 | ({ manager }: { manager: Manager
16 |
23 | {
26 | // The second parameter is optional, If not passed, the default is the built-in danmaku container.
27 | // But it should be noted that the danmaku container will change with the display area, so the second parameter may be required.
28 | manager.updateOccludedUrl(v ? maskPath : '', '#RenderContainer');
29 | }}
30 | />
31 |
32 | );
33 | },
34 | );
35 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarOpacity.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { throttle } from 'aidly';
3 | import { PawPrint } from 'lucide-react';
4 | import { useTranslation } from 'react-i18next';
5 | import type { Manager } from 'danmu';
6 | import type { DanmakuValue } from '@/types';
7 | import { Label } from '@/components/ui/label';
8 | import { Slider } from '@/components/ui/slider';
9 |
10 | export const SidebarOpacity = memo(
11 | ({ manager }: { manager: Manager
16 |
20 | {
26 | manager.setOpacity(v[0] / 100);
27 | })}
28 | />
29 |
30 | );
31 | },
32 | );
33 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarRate.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { throttle } from 'aidly';
3 | import { useTranslation } from 'react-i18next';
4 | import { Squirrel, CircleAlert } from 'lucide-react';
5 | import type { Manager } from 'danmu';
6 | import type { DanmakuValue } from '@/types';
7 | import { Label } from '@/components/ui/label';
8 | import { Input } from '@/components/ui/input';
9 | import {
10 | Tooltip,
11 | TooltipContent,
12 | TooltipProvider,
13 | TooltipTrigger,
14 | } from '@/components/ui/tooltip';
15 |
16 | export const SidebarRate = memo(
17 | ({ manager }: { manager: Manager
22 |
36 | {
42 | manager.setRate(Number(e.target.value));
43 | })}
44 | />
45 |
46 | );
47 | },
48 | );
49 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarShowAndHide.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { Turtle } from 'lucide-react';
3 | import { useTranslation } from 'react-i18next';
4 | import type { Manager } from 'danmu';
5 | import type { DanmakuValue } from '@/types';
6 | import { Label } from '@/components/ui/label';
7 | import { Switch } from '@/components/ui/switch';
8 |
9 | export const SidebarShowAndHide = memo(
10 | ({ manager }: { manager: Manager
15 |
22 | {
26 | v ? manager.show() : manager.hide();
27 | }}
28 | />
29 |
30 | );
31 | },
32 | );
33 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarSpeed.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { throttle } from 'aidly';
3 | import { useTranslation } from 'react-i18next';
4 | import { Squirrel, CircleAlert } from 'lucide-react';
5 | import type { Manager } from 'danmu';
6 | import type { DanmakuValue } from '@/types';
7 | import { Label } from '@/components/ui/label';
8 | import { Input } from '@/components/ui/input';
9 | import {
10 | Tooltip,
11 | TooltipContent,
12 | TooltipProvider,
13 | TooltipTrigger,
14 | } from '@/components/ui/tooltip';
15 |
16 | export const SidebarSpeed = memo(
17 | ({ manager }: { manager: Manager
22 |
36 | {
42 | manager.setSpeed(Number(e.target.value));
43 | })}
44 | />
45 |
46 | );
47 | },
48 | );
49 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/SidebarStartAndStop.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useState, useEffect } from 'react';
2 | import { Bird } from 'lucide-react';
3 | import { useTranslation } from 'react-i18next';
4 | import type { Manager } from 'danmu';
5 | import type { DanmakuValue } from '@/types';
6 | import { Label } from '@/components/ui/label';
7 | import { Switch } from '@/components/ui/switch';
8 |
9 | export const SidebarStartAndStop = memo(
10 | ({ manager }: { manager: Manager
23 |
30 |
34 | v ? manager.startPlaying() : manager.stopPlaying()
35 | }
36 | />
37 |
38 | );
39 | },
40 | );
41 |
--------------------------------------------------------------------------------
/demo/src/components/sidebar/index.tsx:
--------------------------------------------------------------------------------
1 | import type { Manager } from 'danmu';
2 | import type { DanmakuValue } from '@/types';
3 | import { SidebarGap } from '@/components/sidebar/SidebarGap';
4 | import { SidebarRate } from '@/components/sidebar/SidebarRate';
5 | import { SidebarSpeed } from '@/components/sidebar/SidebarSpeed';
6 | import { SidebarAreaX } from '@/components/sidebar/SidebarAreaX';
7 | import { SidebarAreaY } from '@/components/sidebar/SidebarAreaY';
8 | import { SidebarFreeze } from '@/components/sidebar/SidebarFreeze';
9 | import { SidebarOpacity } from '@/components/sidebar/SidebarOpacity';
10 | import { SidebarNumbers } from '@/components/sidebar/SidebarNumbers';
11 | import { SidebarDirection } from '@/components/sidebar/SidebarDirection';
12 | import { SidebarFrequency } from '@/components/sidebar/SidebarFrequency';
13 | import { SidebarOcclusion } from '@/components/sidebar/SidebarOcclusion';
14 | import { SidebarModeSelect } from '@/components/sidebar/SidebarModeSelect';
15 | import { SidebarShowAndHide } from '@/components/sidebar/SidebarShowAndHide';
16 | import { SidebarMoveDuration } from '@/components/sidebar/SidebarMoveDuration';
17 | import { SidebarStartAndStop } from '@/components/sidebar/SidebarStartAndStop';
18 |
19 | export const Sidebar = ({ manager }: { manager: Manager
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
16 | 
17 | {danmaku.data}
18 |
19 | );
20 | }
21 | ```
22 |
23 | ## Render Danmaku
24 |
25 | ```tsx title="init.tsx" {9}
26 | import ReactDOM from 'react-dom/client';
27 | import { create } from 'danmu';
28 | import { Danmaku } from './Danmaku';
29 |
30 | const manager = create
17 | {danmaku.data}
18 | {
23 | danmaku.pause();
24 | setVisible(true);
25 | }}
26 | // Resume the danmaku's movement when the mouse leaves
27 | onMouseLeave={() => {
28 | // When in a frozen state, do not resume movement
29 | // tip: (but this depends on your business requirements)
30 | if (manager.isFreeze()) return;
31 | danmaku.resume();
32 | setVisible(false);
33 | }}
34 | >
35 | {danmaku.data}
36 | {visible ?
38 | );
39 | }
40 | ```
41 |
42 | ## Developing the Toolbar Component
43 |
44 | ```tsx {11-12}
45 | export function Tool() {
46 | // Send `like/dislike` request and store the result in the database
47 | const send = (type: string) => {
48 | fetch('http://abc.com/like', {
49 | method: 'POST',
50 | body: JSON.stringify({ type }),
51 | });
52 | };
53 | return (
54 |
55 |
56 |
57 |
58 | );
59 | }
60 | ```
61 |
62 | ## Render Danmaku
63 |
64 | ```tsx {9}
65 | import ReactDOM from 'react-dom/client';
66 | import { create } from 'danmu';
67 | import { Danmaku } from './Danmaku';
68 |
69 | const manager = create21 | **Default Value: `0`** 22 | 23 | The width of the container, this value may change after calling `manager.format()`. 24 | 25 | ## container.height 26 | 27 | **Type: `number`**
28 | **Default Value: `0`** 29 | 30 | The height of the container, this value may change after calling `manager.format()`. 31 | 32 | ## container.node 33 | 34 | **Type: `HTMLDivElement`**
35 | **Default Value: `div`** 36 | 37 | The DOM node of the container. 38 | 39 | ## container.parentNode 40 | 41 | **Type: `HTMLElement | null`**
42 | **Default Value: `null`** 43 | 44 | The parent node of the container, which can be accessed through this property after setting with `manager.mount()`. 45 | 46 | ## container.setStyle() 47 | 48 | **Type: `setStyle
{
11 | props.danmaku.destroy();
12 | }}
13 | >
14 | {props.danmaku.data.value}
15 |
16 | );
17 | }
18 |
19 | // Render the component onto the built-in node of the danmaku
20 | manager.use({
21 | $createNode(danmaku) {
22 | ReactDOM.createRoot(danmaku.node).render(
23 | {props.danmaku.data.value}
;
89 | }
90 |
91 | manager.use({
92 | $createNode(danmaku) {
93 | // Render the component onto the built-in node of the danmaku
94 | ReactDOM.createRoot(danmaku.node).render(
95 | 36 | **Default: `0`** 37 | 38 | The playback count of the danmaku, which automatically increments by `+1` after the danmaku finishes moving. You may need this property if you have looping danmaku requirements. 39 | 40 | ## `danmaku.duration` 41 | 42 | **Type: `number`** 43 | 44 | The duration of the danmaku's movement. 45 | 46 | ## `danmaku.direction` 47 | 48 | **Type: `'right' | 'left' | 'none'`** 49 | 50 | The direction of the danmaku's movement. 51 | 52 | ## `danmaku.isFixedDuration` 53 | 54 | **Type: `boolean`** 55 | 56 | Used to determine whether the movement duration of the current danmaku instance has been adjusted. 57 | 58 | ## `danmaku.pluginSystem` 59 | 60 | **Type: `PluginSystem`** 61 | 62 | The plugin system instance for the danmaku. For its API, refer to the **hooks-plugin** documentation. 63 | 64 | https://github.com/imtaotao/hooks-plugin?tab=readme-ov-file#apis 65 | -------------------------------------------------------------------------------- /docs/en/reference/manager-properties.md: -------------------------------------------------------------------------------- 1 | # Manager Properties 2 | 3 | > [!NOTE] Unit Hint 4 | > All units involved in the calculation can be computed through expressions, similar to CSS `calc`. 5 | > 6 | > 1. **`number`**: The default unit is `px`. 7 | > 2. **`string`**: Expression calculation. Supports mathematical operations (`+`, `-`, `*`, `/`), and only `%` and `px` units are supported. 8 | > 9 | > ```ts 10 | > manager.setGap('(100% - 10px) / 5'); 11 | > ``` 12 | 13 | ## `manager.version` 14 | 15 | **Type: `string`** 16 | 17 | The current version of the `danmu` library. 18 | 19 | ## `manager.options` 20 | 21 | **Type: `ManagerOptions`** 22 | 23 | [**`manager.options`**](./manager-configuration), you can get some initial values from here and use them. 24 | 25 | ```ts 26 | console.log(manager.options.durationRange); // [number, number] 27 | ``` 28 | 29 | ## `manager.statuses` 30 | 31 | **Type: `Record
29 | 30 | The width of the track, which may change after you call `manager.format()`. 31 | 32 | ## track.height 33 | 34 | **Type: `number`**
35 | 36 | The height of the track, which may change after you call `manager.format()`. 37 | 38 | ## track.index 39 | 40 | **Type: `number`**
41 | 42 | The position of this track in the track list of the current container. For example, if index is 1, it represents the second track in the list. 43 | 44 | ## track.isLock 45 | 46 | **Type: `boolean`**
47 | **Default Value: `false`** 48 | 49 | Used to determine if the current track is locked. 50 | 51 | ## track.list 52 | 53 | **Type: `Array
16 |
17 | {danmaku.data}
18 |
19 | );
20 | }
21 | ```
22 |
23 | ## 渲染弹幕
24 |
25 | ```tsx title="init.tsx" {9}
26 | import ReactDOM from 'react-dom/client';
27 | import { create } from 'danmu';
28 | import { Danmaku } from './Danmaku';
29 |
30 | const manager = create
17 | {danmaku.data}
18 | {
23 | danmaku.pause();
24 | setVisible(true);
25 | }}
26 | // 鼠标离开弹幕时，恢复运动
27 | onMouseLeave={() => {
28 | // 当处于冻结状态时，不要给恢复运动了（不过也视你的业务情况而定）
29 | if (manager.isFreeze()) return;
30 | danmaku.resume();
31 | setVisible(false);
32 | }}
33 | >
34 | {danmaku.data}
35 | {visible ?
37 | );
38 | }
39 | ```
40 |
41 | ## 开发工具栏组件
42 |
43 | ```tsx {11-12}
44 | export function Tool() {
45 | // 发送 `点赞/点踩` 的请求，将结果存储在数据库
46 | const send = (type: string) => {
47 | fetch('http://abc.com/like', {
48 | method: 'POST',
49 | body: JSON.stringify({ type }),
50 | });
51 | };
52 | return (
53 |
54 |
55 |
56 |
57 | );
58 | }
59 | ```
60 |
61 | ## 渲染弹幕
62 |
63 | ```tsx {9}
64 | import ReactDOM from 'react-dom/client';
65 | import { create } from 'danmu';
66 | import { Danmaku } from './Danmaku';
67 |
68 | const manager = create21 | **默认值：`0`** 22 | 23 | 容器的宽度，当你调用 `manager.format()` 后，这个值可能会有变化。 24 | 25 | ## container.height 26 | 27 | **类型：`number`**
28 | **默认值：`0`** 29 | 30 | 容器的高度，当你调用 `manager.format()` 后，这个值可能会有变化。 31 | 32 | ## container.node 33 | 34 | **类型：`HTMLDivElement`**
35 | **默认值：`div`** 36 | 37 | 容器的 DOM 节点。 38 | 39 | ## container.parentNode 40 | 41 | **类型：`HTMLElement | null`**
42 | **默认值：`null`** 43 | 44 | 容器的父节点，通过 `manager.mount()` 设置后，可以通过此属性拿到。 45 | 46 | ## container.setStyle() 47 | 48 | **类型：`setStyle
{
11 | props.danmaku.destroy();
12 | }}
13 | >
14 | {props.danmaku.data.value}
15 |
16 | );
17 | }
18 |
19 | // 将组件渲染到弹幕的内置节点上
20 | manager.use({
21 | $createNode(danmaku) {
22 | ReactDOM.createRoot(danmaku.node).render(
23 | {props.danmaku.data.value}
;
89 | }
90 |
91 | manager.use({
92 | $createNode(danmaku) {
93 | // 将组件渲染到弹幕的内置节点上
94 | ReactDOM.createRoot(danmaku.node).render(
95 | 36 | **默认值：`0`** 37 | 38 | 弹幕的播放次数，弹幕运动结束后会自动 `+1`，如果你有循环弹幕的需求，可能需要此属性。 39 | 40 | ## `danmaku.duration` 41 | 42 | **类型：`number`** 43 | 44 | 弹幕的运动时长。 45 | 46 | ## `danmaku.direction` 47 | 48 | **类型：`'right' | 'left' | 'none'`** 49 | 50 | 弹幕的运动方向。 51 | 52 | ## `danmaku.isFixedDuration` 53 | 54 | **类型：`boolean`** 55 | 56 | 用于判断当前弹幕实例是否被修正过运动时间。 57 | 58 | ## `danmaku.pluginSystem` 59 | 60 | **类型：`PluginSystem`** 61 | 62 | 弹幕的插件系统实例，其 api 可以见 **hooks-plugin** 的文档。 63 | 64 | https://github.com/imtaotao/hooks-plugin?tab=readme-ov-file#apis 65 | -------------------------------------------------------------------------------- /docs/zh/reference/manager-configuration.md: -------------------------------------------------------------------------------- 1 | # manager 配置 2 | 3 | 在初始化 `manager` 的时候，允许传递全局 options，替换默认的配置。以下所有的配置都是**可选的**。 4 | 5 | > [!NOTE] 注意 6 | > 这里的是全局属性，在发送弹幕的时候如果一些可选属性没有传递，**会默认取这里的全局属性**。 7 | 8 | **示例：** 9 | 10 | ```ts {17} 11 | interface CreateOption { 12 | rate?: number; 13 | interval?: number; 14 | gap?: number | string; 15 | speed?: number | string | null; // 优先级比 `durationRange` 高 16 | durationRange?: [number, number]; 17 | trackHeight?: number | string; 18 | plugin?: ManagerPlugin; 19 | limits?: { 20 | view?: number; 21 | stash?: number; 22 | }; 23 | direction?: 'right' | 'left'; 24 | mode?: 'none' | 'strict' | 'adaptive'; 25 | } 26 | 27 | export declare function create(options?: CreateOption): Manager; 28 | ``` 29 | 30 | 除了 `plugin`，所有的参数都可以通过在**创建 `manager` 的时候设置**或者**通过 api 来更改**。 31 | 32 | **示例：** 33 | 34 | ```ts 35 | import { create } from 'danmu'; 36 | 37 | // 1. 在初始化的时候设置 38 | const manager = create({ rate: 1 }); 39 | 40 | // 2. 通过 api 来更改 41 | manager.setRate(1); 42 | ``` 43 | 44 | ## `config.mode` 45 | 46 | **类型：`'none' | 'strict' | 'adaptive'`**
47 | **默认值：`'strict'`** 48 | 49 | > [!NOTE] 注意事项 50 | > 51 | > 当弹幕设置了具体的速度时（匀速模式）也会遵守以下行为。 52 | 53 | 用来确定内核的**碰撞检测算法**。**如果你的业务场景是直播或者视频播放，你应该设置为 `adaptive`，这样在满足实时渲染的前提下，尽可能的不发生弹幕碰撞。** 54 | 55 | - **`none`** 不会有任何碰撞检测，弹幕会立即渲染。 56 | - **`strict`** 会进行严格的碰撞检测，如果不满足条件则会推迟渲染。 57 | - **`adaptive`** 在满足立即渲染的前提下，会尽力进行碰撞检测（推荐）。 58 | 59 | ## `config.rate` 60 | 61 | **类型：`number`**
62 | **默认值：`1`** 63 | 64 | 用来设置设置弹幕的运动速率，弹幕的原始运动速度会乘以 `rate` 这个系数。 65 | 66 | ## `config.speed` 67 | 68 | **类型：`string | number | null | undefined`**
69 | **默认值：`undefined`** 70 | 71 | > [!NOTE] 说明 72 | > 73 | > 1. 当所有弹幕都以固定的速度运动时则会体现出**匀速运动**的特性。 74 | > 2. 和 `config.rate` 的区别是，`config.speed` 是运动的速度，而 `config.rate` 是速度的倍数，例如: 75 | > 76 | > ```js 77 | > rate = 1.5; 78 | > speed = 0.1; 79 | > 最终运动速度为 = `0.1 * 1.5`; 80 | > ``` 81 | 82 | 弹幕运动的速度，这个配置会和 `durationRange` 冲突，优先级会更高，如果设置了此配置则 `durationRange` 会失效。如果发送弹幕的时候有自己的 `speed`，则会取弹幕自身的配置。 83 | 84 | ## `config.gap` 85 | 86 | **类型：`number | string`**
87 | **默认值：`0`** 88 | 89 | 同一条轨道在碰撞检测的啥情况下，后一条弹幕与前一条弹幕最小相隔的距离。**不能设置一个小于 `0` 的值，如果传递的是 `string` 类型则代表是百分比，但是必须是 `10%` 这种语法**， 仅当弹幕命中了碰撞检测的时候才会生效。 90 | 91 | **示例：** 92 | 93 | ```ts 94 | manager.setGap(100); // 最小间距为 100px 95 | manager.setGap('10%'); // 最小间距为容器宽度的 10% 96 | ``` 97 | 98 | ## `config.interval` 99 | 100 | **类型：`number`**
101 | **默认值：`500`** 102 | 103 | 内核轮询渲染的频率，默认为 `500ms` 一次，你可以根据业务现实情况调整为一个合适的值。其实就是 `setTimeout` 的时间。 104 | 105 | ## `config.direction` 106 | 107 | **类型：`string`**
108 | **默认值：`'right'`** 109 | 110 | 弹幕的运动方向，默认从右往左运动，**普通弹幕没有 `none` 值，高级弹幕可以设置 `none` 值**。如果发送弹幕的时候有自己的 `direction`，则会取弹幕自身的配置。 111 | 112 | ## `config.trackHeight` 113 | 114 | **类型：`number | string`**
115 | **默认值：`'20%'`** 116 | 117 | 轨道高度，如果传入的值为 `number` 类型，则默认是 `px`，如果传递是 `string` 类型，必须是 `10%` 这种语法，代表基于容器的百分比高度。 118 | 119 | **示例：** 120 | 121 | ```ts 122 | manager.setTrackHeight(100); // 高度为 100px 123 | manager.setTrackHeight('33%'); // 高度为容器高度的 33% 124 | ``` 125 | 126 | ## `config.durationRange` 127 | 128 | **类型：`[number, number]`**
129 | **默认值：`[4000, 6000]`** 130 | 131 | 普通弹幕的运动时间，这是一个范围值，**普通弹幕会在这个范围内随机选择一个时间作为运动时间**，如果你希望所有的弹幕运动时间都一致（注意不是匀速），你可以将两个数设置为同样的数。如果发送弹幕的时候有自己的 `duration`，则会取弹幕自身的配置。 132 | 133 | ## `config.limits` 134 | 135 | **类型：`{ view?: number; stash?: number }`**
136 | **默认值：`{ stash: Infinity }`** 137 | 138 | > [!NOTE] 提示 139 | > 这个参数会限制弹幕渲染的数量，内存和视图的**默认值都是不限制**。 140 | 141 | - `view` 限制渲染在容器中的弹幕数量，如果超过了此限制，普通弹幕会放在内存中，等待合适的时机渲染，高级弹幕会直接丢弃。 142 | - `stash` 限制存放在内存中的弹幕数量，如果超过此限制则会被丢弃，并触发告警或调用插件钩子，你可以适当调整此参数。 143 | 144 | ## `config.plugin` 145 | 146 | **类型：`ManagerPlugin
147 | **默认值：`undefined`** 148 | 149 | 创建 `manager` 的时候默认的 `managerPlugin`，如果你需要注册新插件可以使用 `manager.use` 方法。详情可见 [**manager 钩子**](./manager-hooks) 和 [**编写插件**](../guide/create-plugin) 这两章。 150 | 151 | **示例：** 152 | 153 | ```ts 154 | import { create } from 'danmu'; 155 | 156 | const manager = create({ 157 | plugin: { 158 | // . 159 | start() {}, 160 | stop() {}, 161 | }, 162 | }); 163 | ``` 164 | 165 | **以数组类型传递：** 166 | 167 | ```ts 168 | // 你也可以传递为一个数组，方便你添加其他插件时控制顺序 169 | const manager = create({ 170 | plugin: [ 171 | // . 172 | { 173 | // . 174 | start() {}, 175 | stop() {}, 176 | }, 177 | ], 178 | }); 179 | ``` 180 | -------------------------------------------------------------------------------- /docs/zh/reference/manager-hooks.md: -------------------------------------------------------------------------------- 1 | # manager 钩子 2 | 3 | manager 的钩子包含 `manager` 自身的钩子和 `弹幕` 的钩子。 4 | 5 | > [!NOTE] 注意 6 | > 7 | > 1. 弹幕钩子和全局钩子以 **`$`** 前缀作为区分。 8 | > 2. 这里只会介绍 `manager` **自身的钩子**，因为弹幕钩子会在[**弹幕钩子章节**](./danmaku-hooks)介绍。 9 | 10 | ## 1. 创建 `manager` 时注册 11 | 12 | **示例：** 13 | 14 | ```ts 15 | import { create } from 'danmu'; 16 | 17 | const manager = create({ 18 | plugin: { 19 | start() {}, 20 | stop() {}, 21 | }, 22 | }); 23 | ``` 24 | 25 | ## 2. 通过 `manager.use` 来注册 26 | 27 | [**`manager.use()`**](./manager-api/#manager-use) 是用来注册插件的 api，如果你有外部插件或者自己编写的插件可用，也可以通过此方法来注册。 28 | 29 | **示例：** 30 | 31 | ```ts 32 | manager.use({ 33 | start() {}, 34 | stop() {}, 35 | }); 36 | ``` 37 | 38 | ## `hooks.init` 39 | 40 | **类型：`SyncHook<[manager: Manager
29 | 30 | 轨道的宽度，当你调用 `manager.format()` 后，这个值可能会有变化。 31 | 32 | ## track.height 33 | 34 | **类型：`number`**
35 | 36 | 轨道的高度，当你调用 `manager.format()` 后，这个值可能会有变化。 37 | 38 | ## track.index 39 | 40 | **类型：`number`**
41 | 42 | 再当前容器的轨道列表中，当前这条轨道所在的坐标，例如 index 为 1，则代表是当前容器轨道列表中的第 2 条轨道。 43 | 44 | ## track.isLock 45 | 46 | **类型：`boolean`**
47 | **默认值：`false`** 48 | 49 | 用来判断当前这条轨道是否被锁定。 50 | 51 | ## track.list 52 | 53 | **类型：`Array