Voice notes drafts

ts/components/PlaybackButton.tsx

@@ -0,0 +1,86 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { animated, useSpring } from '@react-spring/web';
+import classNames from 'classnames';
+import React, { useCallback } from 'react';
+
+const SPRING_CONFIG = {
+  mass: 0.5,
+  tension: 350,
+  friction: 20,
+  velocity: 0.01,
+};
+
+type ButtonProps = {
+  context?: 'incoming' | 'outgoing';
+  variant: 'message' | 'mini' | 'draft';
+  mod: 'play' | 'pause' | 'download' | 'pending';
+  label: string;
+  visible?: boolean;
+  onClick: () => void;
+  onMouseDown?: () => void;
+  onMouseUp?: () => void;
+};
+
+/** Handles animations, key events, and stopping event propagation */
+export const PlaybackButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function ButtonInner(props, ref) {
+    const { mod, label, variant, onClick, context, visible = true } = props;
+    const [animProps] = useSpring(
+      {
+        config: SPRING_CONFIG,
+        to: { scale: visible ? 1 : 0 },
+      },
+      [visible]
+    );
+
+    // Clicking button toggle playback
+    const onButtonClick = useCallback(
+      (event: React.MouseEvent) => {
+        event.stopPropagation();
+        event.preventDefault();
+
+        onClick();
+      },
+      [onClick]
+    );
+
+    // Keyboard playback toggle
+    const onButtonKeyDown = useCallback(
+      (event: React.KeyboardEvent) => {
+        if (event.key !== 'Enter' && event.key !== 'Space') {
+          return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+
+        onClick();
+      },
+      [onClick]
+    );
+
+    const buttonComponent = (
+      <button
+        type="button"
+        ref={ref}
+        className={classNames(
+          'PlaybackButton',
+          `PlaybackButton--variant-${variant}`,
+          context && `PlaybackButton--context-${context}`,
+          mod ? `PlaybackButton--${mod}` : undefined
+        )}
+        onClick={onButtonClick}
+        onKeyDown={onButtonKeyDown}
+        tabIndex={0}
+        aria-label={label}
+      />
+    );
+
+    if (variant === 'message') {
+      return <animated.div style={animProps}>{buttonComponent}</animated.div>;
+    }
+
+    return buttonComponent;
+  }
+);