Added showDefaultOverlayOptions prop for videoTile

#489

Author: yogikatba

src/components/VideoList/VideoList.tsx

@@ -147,6 +147,11 @@ export interface VideoListProps {
     peer: HMSPeer,
     track?: HMSTrack,
   ) => AdditionalVideoTileProps;
+
+  /**
+   * Boolean variable to specify if default overlay and controls should be shown
+   */
+  showDefaultOverlayOptions?: boolean;
 }
 
 const defaultClasses: VideoListClasses = {
@@ -181,6 +186,7 @@ export const VideoList = ({
   compact = false,
   showTileForAllPeers = false,
   videoTileProps,
+  showDefaultOverlayOptions = true,
 }: VideoListProps) => {
   const { tw, appBuilder, tailwindConfig } = useHMSTheme();
   const styler = useMemo(
@@ -326,6 +332,7 @@ export const VideoList = ({
                           }
                           avatarType={avatarType}
                           compact={compact}
+                          showDefaultOverlayOptions={showDefaultOverlayOptions}
                           {...additionalProps}
                         />
                       </div>

src/components/VideoTile/VideoTile.tsx

@@ -115,6 +115,12 @@ export interface VideoTileProps
    * Boolean variable to specify if stats overlay should be shown
    */
   showStats?: boolean;
+
+  /**
+   * Boolean variable to specify if default overlay and controls should be shown
+   */
+  showDefaultOverlayOptions?: boolean;
+
 }
 
 export interface VideoTileClasses extends VideoClasses {
@@ -187,6 +193,7 @@ const Tile = ({
   showStats = false,
   compact,
   children,
+  showDefaultOverlayOptions = true,
 }: VideoTileProps) => {
   const { appBuilder, tw, tailwindConfig, toast } = useHMSTheme();
   const hmsActions = useHMSActions();
@@ -441,7 +448,7 @@ const Tile = ({
         }}
         ref={rootRef}
       >
-        {!peer.isLocal && (showMenu || showTrigger) && (
+        {!peer.isLocal && (showMenu || showTrigger) && showDefaultOverlayOptions && (
           <ContextMenu
             menuOpen={showMenu}
             onTrigger={value => setShowMenu(value)}
@@ -467,14 +474,14 @@ const Tile = ({
                 : { objectFit: 'contain', width: '100%', height: '100%' }
             }
           >
-            {isHandRaised && !showScreen && (
+            {isHandRaised && !showScreen && showDefaultOverlayOptions && (
               <HandFilledIcon
                 className={`${styler('raiseHand')}`}
                 width="40"
                 height="40"
               />
             )}
-            {showStats && (
+            {showStats && showDefaultOverlayOptions && (
               <VideoTileStats
                 audioTrackID={storeHmsAudioTrack?.id}
                 videoTrackID={hmsVideoTrack?.id || storeHmsVideoTrack?.id}
@@ -512,14 +519,14 @@ const Tile = ({
                     : ''
                 }`}
               >
-                {isHandRaised && !showScreen && (
+                {isHandRaised && !showScreen && showDefaultOverlayOptions && (
                   <HandFilledIcon
                     className={`${styler('raiseHand')}`}
                     width="40"
                     height="40"
                   />
                 )}
-                {showStats && (
+                {showStats && showDefaultOverlayOptions && (
                   <VideoTileStats
                     audioTrackID={storeHmsAudioTrack?.id}
                     videoTrackID={hmsVideoTrack?.id || storeHmsVideoTrack?.id}
@@ -531,7 +538,7 @@ const Tile = ({
             )}
             {controlsComponent ? (
               controlsComponent
-            ) : (
+            ) : showDefaultOverlayOptions && (
               // TODO circle controls are broken now
               <VideoTileControls
                 isLocal={peer.isLocal}
@@ -541,7 +548,7 @@ const Tile = ({
                 showGradient={displayShape === 'circle'}
               />
             )}
-            {showScreen && showTrigger && (
+            {showScreen && showTrigger && showDefaultOverlayOptions && (
               <div className={styler('fullScreenControl')}>
                 <Button
                   key="fullscreen"