Add support for screen-sharing

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/video-grid/VideoTile.jsx

@@ -20,7 +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 { AudioButton } from "../button/Button";
+import { AudioButton, FullscreenButton } from "../button/Button";
 
 export const VideoTile = forwardRef(
   (
@@ -39,6 +39,8 @@ export const VideoTile = forwardRef(
       onOptionsPress,
       showOptions,
       localVolume,
+      isFullscreen,
+      onFullscreen,
       ...rest
     },
     ref
@@ -50,17 +52,27 @@ export const VideoTile = forwardRef(
           [styles.speaking]: speaking,
           [styles.muted]: audioMuted,
           [styles.screenshare]: screenshare,
+          [styles.fullscreen]: isFullscreen,
         })}
         ref={ref}
         {...rest}
       >
-        {showOptions && (
+        {(!isLocal || screenshare) && (
           <div className={classNames(styles.toolbar)}>
-            <AudioButton
-              className={styles.button}
-              volume={localVolume}
-              onPress={onOptionsPress}
-            />
+            {!isLocal && (
+              <AudioButton
+                className={styles.button}
+                volume={localVolume}
+                onPress={onOptionsPress}
+              />
+            )}
+            {screenshare && (
+              <FullscreenButton
+                className={styles.button}
+                fullscreen={isFullscreen}
+                onPress={onFullscreen}
+              />
+            )}
           </div>
         )}
         {(videoMuted || noVideo) && (

src/video-grid/VideoTile.module.css

@@ -40,6 +40,11 @@
   box-shadow: inset 0 0 0 4px var(--accent) !important;
 }
 
+.videoTile.fullscreen {
+  position: relative;
+  border-radius: 0;
+}
+
 .videoTile.screenshare > video {
   object-fit: contain;
 }
@@ -79,10 +84,11 @@
   z-index: 1;
 }
 
-.videoTile:not(.isLocal):not(:hover) .toolbar {
+.videoTile:not(:hover) .toolbar {
   display: none;
 }
 
+.videoTile:not(.fullscreen):hover .presenterLabel,
 .videoTile:not(.isLocal):hover .presenterLabel {
   top: calc(42px + 20px); /* toolbar + margin */
 }

src/video-grid/VideoTileContainer.jsx

@@ -33,6 +33,8 @@ export function VideoTileContainer({
   audioContext,
   audioDestination,
   disableSpeakingIndicator,
+  isFullscreen,
+  onFullscreen,
   ...rest
 }) {
   const {
@@ -81,8 +83,9 @@ export function VideoTileContainer({
         mediaRef={mediaRef}
         avatar={getAvatar && getAvatar(member, width, height)}
         onOptionsPress={onOptionsPress}
-        showOptions={!item.callFeed.isLocal()}
         localVolume={localVolume}
+        isFullscreen={isFullscreen}
+        onFullscreen={() => onFullscreen(item)}
         {...rest}
       />
       {videoTileSettingsModalState.isOpen && (