Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@aigamo/nostalgic-diva

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@aigamo/nostalgic-diva

React function components for imperatively controlling embedded players (audio, Niconico, SoundCloud and YouTube) using refs.

  • 1.14.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
16
decreased by-54.29%
Maintainers
1
Weekly downloads
 
Created
Source

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';

// Callbacks
const handleError = React.useCallback(() => {}, []);
const handlePlay = React.useCallback(() => {}, []);
const handlePause = React.useCallback(() => {}, []);
const handleEnded = React.useCallback(() => {}, []);
const handleTimeUpdate = React.useCallback(() => {}, []);

// Options
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();

// Play
await diva.play();

// Pause
await diva.pause();

// Mute
await diva.setMuted(true);

// Unmute
await diva.setMuted(false);

// Seek
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');

// Event listeners
diva.addEventListener('error', (e) => {});
diva.addEventListener('play', (e) => {});
diva.addEventListener('pause', (e) => {});
diva.addEventListener('ended', (e) => {});
diva.addEventListener('timeupdate', (e) => {});

// Play
await diva.play();

// Pause
await diva.pause();

// Mute
await diva.setMuted(true);

// Unmute
await diva.setMuted(false);

// Seek
await diva.setCurrentTime(seconds);

Imperative functions

FunctionDescription
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

EventDescription
onError(event: any): voidFired when the player experiences some sort of error.
onPlay(): voidFired when the video plays.
onPause(): voidFired when the video is paused.
onEnded(): voidFired when playback reaches the end of a video.
onTimeUpdate(event: TimeEvent): voidFired when the playback position of the video changes.

Lifecycle

  1. PlayerController.attach
  2. IPlayerController.loadVideo
  3. PlayerOptions.onLoaded
  4. IPlayerController.play
  5. PlayerOptions.onPlay
  6. PlayerOptions.onTimeUpdate
  7. IPlayerController.pause
  8. PlayerOptions.onPause
  9. PlayerOptions.onEnded
  10. 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

Keywords

FAQs

Package last updated on 26 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc