first commit

common/resources/client/player/ui/controls/pip-button.tsx

@@ -0,0 +1,60 @@
+import {ButtonProps} from '@common/ui/buttons/button';
+import {useTrans} from '@common/i18n/use-trans';
+import {usePlayerActions} from '@common/player/hooks/use-player-actions';
+import {usePlayerStore} from '@common/player/hooks/use-player-store';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {message} from '@common/i18n/message';
+import {Tooltip} from '@common/ui/tooltip/tooltip';
+import {Trans} from '@common/i18n/trans';
+import {MediaPictureInPictureExitIcon} from '@common/icons/media/media-picture-in-picture-exit';
+import {MediaPictureInPictureIcon} from '@common/icons/media/media-picture-in-picture';
+
+interface Props {
+  color?: ButtonProps['color'];
+  size?: ButtonProps['size'];
+  iconSize?: ButtonProps['size'];
+  className?: string;
+}
+export function PipButton({size = 'md', iconSize, color, className}: Props) {
+  const {trans} = useTrans();
+  const player = usePlayerActions();
+  const playerReady = usePlayerStore(s => s.providerReady);
+  const isPip = usePlayerStore(s => s.isPip);
+  const canPip = usePlayerStore(s => s.canPip);
+
+  if (!canPip) {
+    return null;
+  }
+
+  const labelMessage = trans(
+    isPip
+      ? message('Exit picture-in-picture (p)')
+      : message('Enter picture-in-picture (p)')
+  );
+
+  return (
+    <Tooltip label={<Trans message={labelMessage} />} usePortal={false}>
+      <IconButton
+        disabled={!playerReady}
+        aria-label={labelMessage}
+        size={size}
+        color={color}
+        iconSize={iconSize}
+        className={className}
+        onClick={() => {
+          if (isPip) {
+            player.exitPip();
+          } else {
+            player.enterPip();
+          }
+        }}
+      >
+        {isPip ? (
+          <MediaPictureInPictureExitIcon />
+        ) : (
+          <MediaPictureInPictureIcon />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+}