55 lines
1.4 KiB
React
55 lines
1.4 KiB
React
|
import React from "react";
|
||
|
|
import { animated } from "@react-spring/web";
|
||
|
|
import classNames from "classnames";
|
||
|
|
import styles from "./VideoTile.module.css";
|
||
|
|
import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
|
||
|
|
import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
|
||
|
|
|
||
|
|
export function VideoTile({
|
||
|
|
className,
|
||
|
|
isLocal,
|
||
|
|
speaking,
|
||
|
|
audioMuted,
|
||
|
|
noVideo,
|
||
|
|
videoMuted,
|
||
|
|
screenshare,
|
||
|
|
avatar,
|
||
|
|
name,
|
||
|
|
showName,
|
||
|
|
mediaRef,
|
||
|
|
...rest
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<animated.div
|
||
|
|
className={classNames(styles.videoTile, className, {
|
||
|
|
[styles.isLocal]: isLocal,
|
||
|
|
[styles.speaking]: speaking,
|
||
|
|
[styles.muted]: audioMuted,
|
||
|
|
[styles.screenshare]: screenshare,
|
||
|
|
})}
|
||
|
|
{...rest}
|
||
|
|
>
|
||
|
|
{(videoMuted || noVideo) && (
|
||
|
|
<>
|
||
|
|
<div className={styles.videoMutedOverlay} />
|
||
|
|
{avatar}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
{screenshare ? (
|
||
|
|
<div className={styles.presenterLabel}>
|
||
|
|
<span>{`${name} is presenting`}</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
(showName || audioMuted || (videoMuted && !noVideo)) && (
|
||
|
|
<div className={styles.memberName}>
|
||
|
|
{audioMuted && !(videoMuted && !noVideo) && <MicMutedIcon />}
|
||
|
|
{videoMuted && !noVideo && <VideoMutedIcon />}
|
||
|
|
{showName && <span title={name}>{name}</span>}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
)}
|
||
|
|
<video ref={mediaRef} playsInline disablePictureInPicture />
|
||
|
|
</animated.div>
|
||
|
|
);
|
||
|
|
}
|