diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 83e3697c..97c6166f 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -30,6 +30,7 @@ import { ReactComponent as SettingsIcon } from "../icons/Settings.svg"; import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg"; import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg"; import { TooltipTrigger } from "../Tooltip"; +import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg"; export type ButtonVariant = | "default" @@ -237,3 +238,20 @@ export function InviteButton({ ); } + +export function OptionsButton({ + className, + ...rest +}: { + className?: string; + [index: string]: unknown; +}) { + return ( + + + {() => "Options"} + + ); +} diff --git a/src/video-grid/VideoTile.jsx b/src/video-grid/VideoTile.jsx index 2dd41921..206f8a46 100644 --- a/src/video-grid/VideoTile.jsx +++ b/src/video-grid/VideoTile.jsx @@ -20,6 +20,7 @@ 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"; +import { OptionsButton } from "../button/Button"; export const VideoTile = forwardRef( ( @@ -35,6 +36,8 @@ export const VideoTile = forwardRef( name, showName, mediaRef, + onOptionsPress, + showOptions, ...rest }, ref @@ -62,13 +65,18 @@ export const VideoTile = forwardRef( ) : ( (showName || audioMuted || (videoMuted && !noVideo)) && ( -
+
{audioMuted && !(videoMuted && !noVideo) && } {videoMuted && !noVideo && } {showName && {name}}
) )} + {showOptions && ( +
+ +
+ )}