// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useEffect, useState } from 'react';
import { MiniPlayer, PlayerState } from './MiniPlayer';
import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';
const i18n = setupI18n('en', enMessages);
const audio = new Audio();
audio.src = '/fixtures/incompetech-com-Agnus-Dei-X.mp3';
export default {
title: 'components/MiniPlayer',
component: MiniPlayer,
};
export function Default(): JSX.Element {
const [active, setActive] = useState(false);
const [playerState, setPlayerState] = useState(PlayerState.loading);
const [playbackRate, setPlaybackRate] = useState(1);
const [currentTime, setCurrentTime] = useState(0);
const activate = () => {
setActive(true);
setTimeout(() => {
setPlayerState(PlayerState.playing);
void audio.play();
}, 2000);
};
const deactivate = () => {
setActive(false);
setPlayerState(PlayerState.loading);
audio.pause();
audio.currentTime = 0;
};
useEffect(() => {
const handleUpdateTime = () => {
setCurrentTime(audio.currentTime);
};
const handleEnded = () => {
deactivate();
};
audio.addEventListener('timeupdate', handleUpdateTime);
audio.addEventListener('ended', handleEnded);
return () => {
audio.removeEventListener('timeupdate', handleUpdateTime);
audio.removeEventListener('ended', handleEnded);
};
}, [setCurrentTime]);
const playAction = () => {
setPlayerState(PlayerState.playing);
void audio.play();
};
const pauseAction = () => {
setPlayerState(PlayerState.paused);
audio.pause();
};
const setPlaybackRateAction = (rate: number) => {
setPlaybackRate(rate);
audio.playbackRate = rate;
};
return (
<>
{active && (
)}
{!active && (
)}
>
);
}