Nostalgic Diva
React function components for imperatively controlling embedded players (audio, Dailymotion, Niconico, SoundCloud, Twitch, Vimeo and YouTube) using refs.
This was originally developed in VocaDB/vocadb#1101 as a part of VocaDB.
NOTE: This is an independent fork of VocaDB/nostalgic-diva.
Installation
yarn add @aigamo/nostalgic-diva
or npm i @aigamo/nostalgic-diva
Usage
import {
NostalgicDiva,
NostalgicDivaProvider,
PlayerOptions,
} from '@aigamo/nostalgic-diva';
const handleError = React.useCallback(() => {}, []);
const handlePlay = React.useCallback(() => {}, []);
const handlePause = React.useCallback(() => {}, []);
const handleEnded = React.useCallback(() => {}, []);
const handleTimeUpdate = React.useCallback(() => {}, []);
const options = React.useMemo(
(): PlayerOptions => ({
onError: handleError,
onPlay: handlePlay,
onPause: handlePause,
onEnded: handleEnded,
onTimeUpdate: handleTimeUpdate,
}),
[handleError, handlePlay, handlePause, handleEnded, handleTimeUpdate],
);
<NostalgicDivaProvider>
<NostalgicDiva
// Supported media types:
// - "Audio"
// - "Niconico"
// - "SoundCloud"
// - "Vimeo"
// - "YouTube"
src="https://www.youtube.com/watch?v=bGdtvUQ9OAs"
options={options}
/>
;
</NostalgicDivaProvider>;
import { useNostalgicDiva } from '@aigamo/nostalgic-diva';
const diva = useNostalgicDiva();
await diva.play();
await diva.pause();
await diva.setMuted(true);
await diva.setMuted(false);
await diva.setCurrentTime(seconds);
or by using a Web Component
import { defineNostalgicDiva } from '@aigamo/nostalgic-diva';
defineNostalgicDiva();
<nostalgic-diva
src="https://www.youtube.com/watch?v=bGdtvUQ9OAs"
id="nostalgic-diva"
/>
import { NostalgicDivaElement } from '@aigamo/nostalgic-diva';
const diva = document.querySelector<NostalgicDivaElement>('#nostalgic-diva');
diva.addEventListener('error', (e) => {});
diva.addEventListener('play', (e) => {});
diva.addEventListener('pause', (e) => {});
diva.addEventListener('ended', (e) => {});
diva.addEventListener('timeupdate', (e) => {});
await diva.play();
await diva.pause();
await diva.setMuted(true);
await diva.setMuted(false);
await diva.setCurrentTime(seconds);
Imperative functions
Function | Description |
---|
loadVideo(id: string): Promise<void> | Loads a new video into an existing player. |
play(): Promise<void> | Plays a video. |
pause(): Promise<void> | Pauses the playback of a video. |
setCurrentTime(seconds: number): Promise<void> | Sets the current playback position in seconds. |
setVolume(volume: number): Promise<void> | Sets the volume level of the player on a scale from 0 to 1. |
setMuted(muted: boolean): Promise<void> | Sets the muted state of the player. |
getDuration(): Promise<number | undefined> | Gets the duration of the video in seconds. |
getCurrentTime(): Promise<number | undefined> | Gets the current playback position of a video, measured in seconds. |
Events
Event | Description |
---|
onError(event: any): void | Fired when the player experiences some sort of error. |
onPlay(): void | Fired when the video plays. |
onPause(): void | Fired when the video is paused. |
onEnded(): void | Fired when playback reaches the end of a video. |
onTimeUpdate(event: TimeEvent): void | Fired when the playback position of the video changes. |
Lifecycle
- PlayerController.attach
- IPlayerController.loadVideo
- PlayerOptions.onLoaded
- IPlayerController.play
- PlayerOptions.onPlay
- PlayerOptions.onTimeUpdate
- IPlayerController.pause
- PlayerOptions.onPause
- PlayerOptions.onEnded
- PlayerController.detach
The attach
function is called when switching from another player (Audio, Niconico, SoundCloud and YouTube), and the detach
function is called when switching to another player. After the detach
function is called, you cannot use any imperative functions like loadVideo
, play
, pause
and etc.
References