first commit

common/resources/client/player/ui/controls/seeking/seek-button.tsx

@@ -0,0 +1,46 @@
+import {usePlayerStore} from '@common/player/hooks/use-player-store';
+import {useTrans} from '@common/i18n/use-trans';
+import {message} from '@common/i18n/message';
+import {usePlayerActions} from '@common/player/hooks/use-player-actions';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {ButtonProps} from '@common/ui/buttons/button';
+import {ReactElement} from 'react';
+import {SvgIconProps} from '@common/icons/svg-icon';
+import {MediaSeekForward15Icon} from '@common/icons/media/media-seek-forward15';
+
+interface Props {
+  color?: ButtonProps['color'];
+  size?: ButtonProps['size'];
+  iconSize?: ButtonProps['size'];
+  className?: string;
+  seconds?: number | string;
+  children?: ReactElement<SvgIconProps>;
+}
+export function SeekButton({
+  size = 'md',
+  iconSize,
+  color,
+  className,
+  seconds = '+15',
+  children,
+}: Props) {
+  const {trans} = useTrans();
+  const player = usePlayerActions();
+  const playerReady = usePlayerStore(s => s.providerReady);
+
+  return (
+    <IconButton
+      disabled={!playerReady}
+      aria-label={trans(message('Next'))}
+      size={size}
+      color={color}
+      iconSize={iconSize}
+      className={className}
+      onClick={() => {
+        player.seek(seconds);
+      }}
+    >
+      {children || <MediaSeekForward15Icon />}
+    </IconButton>
+  );
+}