Danmaku API

Danmaku instances have several methods available for you to use. You can use them to perform actions or retrieve some state data of the current danmaku. Here is an example:

// Destroy the danmaku when it is clicked
function DanmakuComponent(props: { danmaku: Danmaku<unknown> }) {
  return (
    <div
      onClick={() => {
        props.danmaku.destroy();
      }}
    >
      {props.danmaku.data.value}
    </div>
  );
}

// Render the component onto the built-in node of the danmaku
manager.use({
  $createNode(danmaku) {
    ReactDOM.createRoot(danmaku.node).render(
      <DanmakuComponent danmaku={danmaku} />,
    );
  },
});

danmaku.hide()

Type: () => void

Set the current danmaku instance to a hidden state, which essentially sets visibility: hidden and triggers the hide hook.

danmaku.show()

Type: () => void

Restore the current danmaku instance from a hidden state to visible, which will trigger the show hook.

danmaku.pause()

Type: () => void

Pause the current moving danmaku instance, which will trigger the pause hook.

danmaku.resume()

Type: () => void

Resume the current paused danmaku instance, which will trigger the resume hook.

danmaku.setloop()

Type: () => void

Set the danmaku instance to loop playback mode.

danmaku.unloop()

Type: () => void

Cancel the loop playback mode for the danmaku instance.

danmaku.destroy()

Type: (mark?: unknown) => Promise<void>

Destroy the current danmaku instance from the container and remove it from memory, which will trigger the beforeDestroy and destroyed hook. You can also try passing a mark identifier. The built-in destroy behavior of the engine does not pass an identifier.

const manager = create({
  plugin: {
    $moved(danmaku) {
      danmaku.destroy('mark');
    },

    $beforeDestroy(danmaku, mark) {
      if (mark === 'mark') {
        // .
      }
    },

    $destroyed(danmaku, mark) {
      if (mark === 'mark') {
        // .
      }
    },
  },
});

danmaku.setStyle()

Type: (key: StyleKey, val: CSSStyleDeclaration[StyleKey]) => void

Set the CSS styles of the built-in node for the current danmaku instance.

// Change the background color of the built-in danmaku node to red
danmaku.setStyle('background', 'red');

danmaku.getWidth()

Type: () => number

getWidth() will return the width of the danmaku instance itself, which can also be very useful when sending advanced danmaku.

danmaku.getHeight()

Type: () => number

getHeight() will return the height of the danmaku instance itself, which can be very useful when calculating the position for advanced danmaku.

danmaku.updateDuration()

Type: (duration: number) => void

updateDuration() is used to update the movement duration of the danmaku instance. Generally, this method is intended for use by the internal rendering engine.

danmaku.remove()

Type: (pluginName: string) => void

Remove a specific plugin from the current danmaku instance, but you must specify the plugin name.

danmaku.use()

Type: (plugin: DanmakuPlugin<T> | ((d: this) => DanmakuPlugin<T>)) => DanmakuPlugin<T>

Register a plugin for the current danmaku instance and return the plugin instance. If you need to remove the plugin later, you can save the plugin's name. If not provided, a uuid-formatted name will be generated by default.

If name is provided:

const plugin = danmaku.use({
  name: 'test-plugin',
  // .
});
console.log(plugin.name); // 'test-plugin'

If name is not provided:

const plugin = danmaku.use({
  // .
});
console.log(plugin.name); // uuid