diff --git a/src/tile/GridTile.module.css b/src/tile/GridTile.module.css index 867c1cef..ee605e46 100644 --- a/src/tile/GridTile.module.css +++ b/src/tile/GridTile.module.css @@ -83,3 +83,25 @@ borders don't support gradients */ .volumeSlider { width: 100%; } + +.tile .switchCamera { + opacity: 1; + background: var(--cpd-color-bg-action-secondary-rest); + border: 1px solid var(--cpd-color-border-interactive-secondary); +} + +.tile .switchCamera > svg { + color: var(--cpd-color-icon-primary); +} + +@media (hover) { + .tile .switchCamera:hover { + background: var(--cpd-color-bg-subtle-secondary); + border-color: var(--cpd-color-border-interactive-hovered); + } +} + +.tile .switchCamera:active { + background: var(--cpd-color-bg-subtle-primary); + border-color: var(--cpd-color-border-interactive-hovered); +} diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx index 1e363b18..78534dae 100644 --- a/src/tile/GridTile.tsx +++ b/src/tile/GridTile.tsx @@ -28,6 +28,7 @@ import { UserProfileIcon, ExpandIcon, VolumeOffSolidIcon, + SwitchCameraSolidIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; import { ContextMenu, @@ -64,6 +65,7 @@ interface UserMediaTileProps extends TileProps { vm: UserMediaViewModel; mirror: boolean; locallyMuted: boolean; + primaryButton?: ReactNode; menuStart?: ReactNode; menuEnd?: ReactNode; } @@ -73,6 +75,7 @@ const UserMediaTile: FC = ({ vm, showSpeakingIndicators, locallyMuted, + primaryButton, menuStart, menuEnd, className, @@ -159,20 +162,22 @@ const UserMediaTile: FC = ({ } displayName={displayName} primaryButton={ - - - - } - side="left" - align="start" - > - {menu} - + primaryButton ?? ( + + + + } + side="left" + align="start" + > + {menu} + + ) } raisedHandTime={handRaised ?? undefined} currentReaction={reaction ?? undefined} @@ -207,6 +212,8 @@ const LocalUserMediaTile: FC = ({ const { t } = useTranslation(); const mirror = useObservableEagerState(vm.mirror$); const alwaysShow = useObservableEagerState(vm.alwaysShow$); + const switchCamera = useObservableEagerState(vm.switchCamera$); + const latestAlwaysShow = useLatest(alwaysShow); const onSelectAlwaysShow = useCallback( (e: Event) => { @@ -222,6 +229,17 @@ const LocalUserMediaTile: FC = ({ vm={vm} locallyMuted={false} mirror={mirror} + primaryButton={ + switchCamera === null ? undefined : ( + + ) + } menuStart={ button:active { - background: var(--cpd-color-bg-action-primary-pressed) !important; + background: var(--cpd-color-bg-action-primary-pressed); } .fg > button[data-state="open"] {