Voice notes drafts

ts/components/CompositionRecordingDraft.stories.tsx

@@ -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}
+    />
+  );
+}