Like/Dislike
Description
When we hover over a danmaku, we might need to perform some actions. This section will guide you through implementing a toolbar that pops up when the mouse hovers over the danmaku, featuring like and dislike functionalities.
Hint
The components in this section are demonstrated using React.
Developing the Danmaku Component
tsx
import { useState } from 'react';
import { Tool } from './Tool';
export function Danmaku({ danmaku }) {
const [visible, setVisible] = useState(false);
return (
<div
// Pause the danmaku's movement when the mouse enters
onMouseEnter={() => {
danmaku.pause();
setVisible(true);
}}
// Resume the danmaku's movement when the mouse leaves
onMouseLeave={() => {
// When in a frozen state, do not resume movement
// tip: (but this depends on your business requirements)
if (manager.isFreeze()) return;
danmaku.resume();
setVisible(false);
}}
>
{danmaku.data}
{visible ? <Tool /> : null}
</div>
);
}
Developing the Toolbar Component
tsx
export function Tool() {
// Send `like/dislike` request and store the result in the database
const send = (type: string) => {
fetch('http://abc.com/like', {
method: 'POST',
body: JSON.stringify({ type }),
});
};
return (
<div>
<button onClick={() => send('good')}>like</button>
<button onClick={() => send('not-good')}>dislike</button>
</div>
);
}
Render Danmaku
tsx
import ReactDOM from 'react-dom/client';
import { create } from 'danmu';
import { Danmaku } from './Danmaku';
const manager = create<string>({
plugin: {
// Render the component onto the built-in node of the danmaku
$createNode(danmaku) {
ReactDOM.createRoot(danmaku.node).render(<Danmaku danmaku={danmaku} />);
},
},
});