Voice notes drafts
This commit is contained in:
parent
356fb301e1
commit
99015d7b96
48 changed files with 2113 additions and 909 deletions
85
ts/components/CompositionRecordingDraft.stories.tsx
Normal file
85
ts/components/CompositionRecordingDraft.stories.tsx
Normal file
|
@ -0,0 +1,85 @@
|
|||
// 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}
|
||||
/>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue