gitea/nas
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 17

Refactor <Video> to TypeScript (#34284)

Browse source
This commit is contained in:
Eugen Rochko 2025-03-28 13:15:43 +01:00 • committed by GitHub
parent e28b64ac2d
commit e5fd61a84e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 1219 additions and 756 deletions
Download patch file Download diff file Expand all files Collapse all files

43
app/javascript/mastodon/features/video/components/hotkey_indicator.tsx Normal file
View file

@ -0,0 +1,43 @@
import { useIntl } from 'react-intl';
import type { MessageDescriptor } from 'react-intl';
import { useTransition, animated } from '@react-spring/web';
import { Icon } from 'mastodon/components/icon';
import type { IconProp } from 'mastodon/components/icon';
export interface HotkeyEvent {
key: number;
icon: IconProp;
label: MessageDescriptor;
}
export const HotkeyIndicator: React.FC<{
events: HotkeyEvent[];
onDismiss: (e: HotkeyEvent) => void;
}> = ({ events, onDismiss }) => {
const intl = useIntl();
const transitions = useTransition(events, {
from: { opacity: 0 },
keys: (item) => item.key,
enter: [{ opacity: 1 }],
leave: [{ opacity: 0 }],
onRest: (_result, _ctrl, item) => {
onDismiss(item);
},
});
return (
<>
{transitions((style, item) => (
<animated.div className='video-player__hotkey-indicator' style={style}>
<Icon id='' icon={item.icon} />
<span className='video-player__hotkey-indicator__label'>
{intl.formatMessage(item.label)}
</span>
</animated.div>
))}
</>
);
};