fix(share-video) fix backwards compatibility issue

react/features/base/participants/components/ParticipantView.native.js

@@ -224,7 +224,7 @@ class ParticipantView extends Component<Props> {
                     onPress = { renderYoutubeLargeVideo ? undefined : onPress }
                     value = '' />
 
-                { renderYoutubeLargeVideo && <YoutubeLargeVideo youtubeUrl = { this.props.participantId } /> }
+                { renderYoutubeLargeVideo && <YoutubeLargeVideo youtubeId = { this.props.participantId } /> }
 
                 { !_isFakeParticipant && renderVideo
                     && <VideoTrack

react/features/shared-video/components/native/SharedVideoDialog.js

@@ -49,7 +49,7 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
         if (videoId) {
             const { onPostSubmit } = this.props;
 
-            onPostSubmit && onPostSubmit(link);
+            onPostSubmit && onPostSubmit(videoId);
 
             return true;
         }

react/features/shared-video/components/native/YoutubeLargeVideo.js

@@ -9,7 +9,6 @@ import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui';
 import { setToolboxVisible } from '../../../toolbox/actions';
 import { setSharedVideoStatus } from '../../actions.native';
-import { getYoutubeId } from '../../functions';
 
 import styles from './styles';
 
@@ -101,11 +100,11 @@ type Props = {
     dispatch: Function,
 
     /**
-     * Youtube url of the video to be played.
+     * Youtube id of the video to be played.
      *
      * @private
      */
-    youtubeUrl: string
+     youtubeId: string
 };
 
 /**
@@ -200,7 +199,7 @@ class YoutubeLargeVideo extends Component<Props, *> {
             _isPlaying,
             _playerHeight,
             _playerWidth,
-            youtubeUrl
+            youtubeId
         } = this.props;
 
         return (
@@ -221,7 +220,7 @@ class YoutubeLargeVideo extends Component<Props, *> {
                     play = { _isPlaying }
                     playbackRate = { 1 }
                     ref = { this.playerRef }
-                    videoId = { getYoutubeId(youtubeUrl) }
+                    videoId = { youtubeId }
                     volume = { 50 }
                     webViewProps = {{
                         bounces: false,
@@ -244,7 +243,7 @@ class YoutubeLargeVideo extends Component<Props, *> {
     _onReady() {
         if (this.props?._isOwner) {
             this.onVideoReady(
-                this.props.youtubeUrl,
+                this.props.youtubeId,
                 this.playerRef.current && this.playerRef.current.getCurrentTime(),
                 this.props._ownerId);
         }
@@ -267,11 +266,11 @@ class YoutubeLargeVideo extends Component<Props, *> {
                 _isStopped,
                 _ownerId,
                 _seek,
-                youtubeUrl
+                youtubeId
             } = this.props;
 
             if (shouldSetNewStatus(_isStopped, _isOwner, status, _isPlaying, time, _seek)) {
-                this.onVideoChangeEvent(youtubeUrl, status, time, _ownerId);
+                this.onVideoChangeEvent(youtubeId, status, time, _ownerId);
             }
         });
     }
@@ -283,10 +282,10 @@ class YoutubeLargeVideo extends Component<Props, *> {
      * @returns {void}
     */
     saveRefTime() {
-        const { youtubeUrl, _status, _ownerId } = this.props;
+        const { youtubeId, _status, _ownerId } = this.props;
 
         this.playerRef.current && this.playerRef.current.getCurrentTime().then(time => {
-            this.onVideoChangeEvent(youtubeUrl, _status, time, _ownerId);
+            this.onVideoChangeEvent(youtubeId, _status, time, _ownerId);
         });
     }
 

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

@@ -6,7 +6,6 @@ import Filmstrip from '../../../../../modules/UI/videolayout/Filmstrip';
 import { getLocalParticipant } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { getToolboxHeight } from '../../../toolbox/functions.web';
-import { getYoutubeId } from '../../functions';
 
 import VideoManager from './VideoManager';
 import YoutubeVideoManager from './YoutubeVideoManager';
@@ -38,14 +37,9 @@ type Props = {
      isOwner: boolean,
 
     /**
-     * The shared video id
+     * The shared video url
      */
-     sharedVideoId: string,
-
-    /**
-     * The shared youtube video id
-     */
-     sharedYoutubeVideoId: string,
+     videoUrl: string,
 }
 
 /**
@@ -97,20 +91,17 @@ class SharedVideo extends Component<Props> {
      * @returns {Component}
      */
     getManager() {
-        const {
-            sharedVideoId,
-            sharedYoutubeVideoId
-        } = this.props;
+        const { videoUrl } = this.props;
 
-        if (!sharedVideoId) {
+        if (!videoUrl) {
             return null;
         }
 
-        if (sharedYoutubeVideoId) {
-            return <YoutubeVideoManager videoId = { sharedYoutubeVideoId } />;
+        if (videoUrl.match(/http/)) {
+            return <VideoManager videoId = { videoUrl } />;
         }
 
-        return <VideoManager videoId = { sharedVideoId } />;
+        return <YoutubeVideoManager videoId = { videoUrl } />;
     }
 
     /**
@@ -154,8 +145,7 @@ function _mapStateToProps(state) {
         clientWidth,
         filmstripVisible: visible,
         isOwner: ownerId === localParticipant.id,
-        sharedVideoId: videoUrl,
-        sharedYoutubeVideoId: getYoutubeId(videoUrl)
+        videoUrl
     };
 }
 

react/features/shared-video/components/web/SharedVideoDialog.js

@@ -8,6 +8,7 @@ import { translate } from '../../../base/i18n';
 import { getFieldValue } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { defaultSharedVideoLink } from '../../constants';
+import { getYoutubeId } from '../../functions';
 import AbstractSharedVideoDialog from '../AbstractSharedVideoDialog';
 
 /**
@@ -108,9 +109,10 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
             return false;
         }
 
+        const youtubeId = getYoutubeId(link);
         const { onPostSubmit } = this.props;
 
-        onPostSubmit(link);
+        onPostSubmit(youtubeId || link);
 
         return true;
     }

react/features/shared-video/middleware.any.js

@@ -18,7 +18,7 @@ import {
     setSharedVideoStatus
 } from './actions.any';
 import { SHARED_VIDEO, VIDEO_PLAYER_PARTICIPANT_NAME } from './constants';
-import { getYoutubeId, isSharingStatus } from './functions';
+import { isSharingStatus } from './functions';
 
 /**
  * Middleware that captures actions related to video sharing and updates
@@ -126,7 +126,7 @@ function handleSharingVideoStatus(store, videoUrl, { state, time, from, muted },
     const oldStatus = getState()['features/shared-video']?.status;
 
     if (state === 'start' || ![ 'playing', 'pause', 'start' ].includes(oldStatus)) {
-        const youtubeId = getYoutubeId(videoUrl);
+        const youtubeId = videoUrl.match(/http/) ? false : videoUrl;
         const avatarURL = youtubeId ? `https://img.youtube.com/vi/${youtubeId}/0.jpg` : '';
 
         dispatch(participantJoined({