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