85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
// Copyright 2023 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import React, { useState } from 'react';
|
|
import { action } from '@storybook/addon-actions';
|
|
import { CompositionRecordingDraft } from './CompositionRecordingDraft';
|
|
|
|
import { setupI18n } from '../util/setupI18n';
|
|
import enMessages from '../../_locales/en/messages.json';
|
|
|
|
const i18n = setupI18n('en', enMessages);
|
|
|
|
export default {
|
|
title: 'components/CompositionRecordingDraft',
|
|
component: CompositionRecordingDraft,
|
|
};
|
|
|
|
export function Default(): JSX.Element {
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [currentTime, setCurrentTime] = React.useState<number>(0);
|
|
const [duration, setDuration] = React.useState<number | undefined>(undefined);
|
|
|
|
const audio = React.useMemo(() => {
|
|
const a = new Audio();
|
|
|
|
a.addEventListener('loadedmetadata', () => {
|
|
setDuration(duration);
|
|
});
|
|
|
|
a.src = '/fixtures/incompetech-com-Agnus-Dei-X.mp3';
|
|
|
|
a.addEventListener('timeupdate', () => {
|
|
setCurrentTime(a.currentTime);
|
|
});
|
|
|
|
a.addEventListener('ended', () => {
|
|
setIsPlaying(false);
|
|
setCurrentTime(0);
|
|
});
|
|
|
|
a.addEventListener('loadeddata', () => {
|
|
a.currentTime = currentTime;
|
|
});
|
|
|
|
return a;
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const handlePlay = (positionAsRatio?: number) => {
|
|
if (positionAsRatio !== undefined) {
|
|
audio.currentTime = positionAsRatio * audio.duration;
|
|
}
|
|
void audio.play();
|
|
setCurrentTime(audio.currentTime);
|
|
setIsPlaying(true);
|
|
};
|
|
|
|
const handlePause = () => {
|
|
audio.pause();
|
|
setIsPlaying(false);
|
|
};
|
|
|
|
const handleScrub = (newPosition: number) => {
|
|
if (duration !== undefined) {
|
|
audio.currentTime = newPosition * duration;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<CompositionRecordingDraft
|
|
i18n={i18n}
|
|
audioUrl={audio.src}
|
|
active={{
|
|
playing: isPlaying,
|
|
currentTime,
|
|
duration,
|
|
}}
|
|
onCancel={action('cancel')}
|
|
onSend={action('send')}
|
|
onPlay={handlePlay}
|
|
onPause={handlePause}
|
|
onScrub={handleScrub}
|
|
/>
|
|
);
|
|
}
|