fix(share-video): Hide element when not shown on large. (jitsi#15507)

* fix(share-video): Hide element when not shown on large.

Fixes two issues:
- disabling mouse for all large video types, including local shared desktop that prevents clicking the link to show content
- as shared-video z-index is on top of everything, it local shared desktop to be seen when the thumbnail is clicked

* squash: Drop the video shared component from the dom when not playing.

react/features/shared-video/components/web/SharedVideo.tsx

@@ -4,9 +4,11 @@ import { connect } from 'react-redux';
 // @ts-expect-error
 import Filmstrip from '../../../../../modules/UI/videolayout/Filmstrip';
 import { IReduxState } from '../../../app/types';
+import { FakeParticipant } from '../../../base/participants/types';
 import { getVerticalViewMaxWidth } from '../../../filmstrip/functions.web';
+import { getLargeVideoParticipant } from '../../../large-video/functions';
 import { getToolboxHeight } from '../../../toolbox/functions.web';
-import { isSharedVideoEnabled } from '../../functions';
+import { isSharedVideoEnabled, isVideoPlaying } from '../../functions';
 
 import VideoManager from './VideoManager';
 import YoutubeVideoManager from './YoutubeVideoManager';
@@ -39,10 +41,20 @@ interface IProps {
     isEnabled: boolean;
 
     /**
-     * Whether or not the user is actively resizing the filmstrip.
+     * Whether the user is actively resizing the filmstrip.
      */
     isResizing: boolean;
 
+    /**
+     * Whether the shared video is currently playing.
+     */
+    isVideoShared: boolean;
+
+    /**
+     * Whether the shared video should be shown on stage.
+     */
+    onStage: boolean;
+
     /**
      * The shared video url.
      */
@@ -118,17 +130,23 @@ class SharedVideo extends Component<IProps> {
      * @returns {React$Element}
      */
     render() {
-        const { isEnabled, isResizing } = this.props;
+        const { isEnabled, isResizing, isVideoShared, onStage } = this.props;
 
-        if (!isEnabled) {
+        if (!isEnabled || !isVideoShared) {
             return null;
         }
 
+        const style: any = this.getDimensions();
+
+        if (!onStage) {
+            style.display = 'none';
+        }
+
         return (
             <div
                 className = { (isResizing && 'disable-pointer') || '' }
                 id = 'sharedVideo'
-                style = { this.getDimensions() }>
+                style = { style }>
                 {this.getManager()}
             </div>
         );
@@ -147,6 +165,8 @@ function _mapStateToProps(state: IReduxState) {
     const { videoUrl } = state['features/shared-video'];
     const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
     const { visible, isResizing } = state['features/filmstrip'];
+    const onStage = getLargeVideoParticipant(state)?.fakeParticipant === FakeParticipant.SharedVideo;
+    const isVideoShared = isVideoPlaying(state);
 
     return {
         clientHeight,
@@ -155,6 +175,8 @@ function _mapStateToProps(state: IReduxState) {
         filmstripWidth: getVerticalViewMaxWidth(state),
         isEnabled: isSharedVideoEnabled(state),
         isResizing,
+        isVideoShared,
+        onStage,
         videoUrl
     };
 }

react/features/shared-video/functions.ts

@@ -111,16 +111,6 @@ export function isSharedVideoEnabled(stateful: IStateful) {
     return !disableThirdPartyRequests;
 }
 
-/**
- * Checks if you youtube URLs should be allowed for shared videos.
- *
- * @param {Array<string>} allowedUrlDomains - The allowed URL domains for shared video.
- * @returns {boolean}
- */
-export function areYoutubeURLsAllowedForSharedVideo(allowedUrlDomains?: Array<string>) {
-    return Boolean(allowedUrlDomains?.includes(YOUTUBE_URL_DOMAIN));
-}
-
 /**
  * Returns true if the passed url is allowed to be used for shared video or not.
  *