code review

lang/main.json

@@ -294,7 +294,7 @@
         "sessionRestarted": "Call restarted by the bridge",
         "Share": "Share",
         "shareVideoLinkError": "Please provide a correct youtube link.",
-        "shareVideoTitle": "Share a video",
+        "shareVideoTitle": "Share video",
         "shareYourScreen": "Share your screen",
         "shareYourScreenDisabled": "Screen sharing disabled.",
         "startLiveStreaming": "Start live stream",
@@ -828,7 +828,7 @@
         "security": "Security options",
         "Settings": "Settings",
         "shareaudio": "Share audio",
-        "sharedvideo": "Share a video",
+        "sharedvideo": "Share video",
         "shareRoom": "Invite someone",
         "shortcuts": "View shortcuts",
         "speakerStats": "Speaker stats",
@@ -836,7 +836,7 @@
         "startSubtitles": "Start subtitles",
         "stopScreenSharing": "Stop screen sharing",
         "stopSubtitles": "Stop subtitles",
-        "stopSharedVideo": "Stop YouTube video",
+        "stopSharedVideo": "Stop video",
         "talkWhileMutedPopup": "Trying to speak? You are muted.",
         "tileViewToggle": "Toggle tile view",
         "toggleCamera": "Toggle camera",

modules/API/API.js

@@ -272,7 +272,7 @@ function initCommands() {
 
         'stop-share-video': () => {
             logger.debug('Share video command received');
-            sendAnalytics(createApiEvent('share.video.start'));
+            sendAnalytics(createApiEvent('share.video.stop'));
             APP.store.dispatch(stopSharedVideo());
         },
 

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

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 
 import { YoutubeLargeVideo } from '../../../shared-video/components';
-import { getYoutubeId } from '../../../shared-video/functions';
 import { Avatar } from '../../avatar';
 import { translate } from '../../i18n';
 import { JitsiParticipantConnectionStatus } from '../../lib-jitsi-meet';
@@ -209,8 +208,7 @@ class ParticipantView extends Component<Props> {
                 ? this.props.testHintId
                 : `org.jitsi.meet.Participant#${this.props.participantId}`;
 
-        const youtubeId = getYoutubeId(this.props.participantId);
-        const renderYoutubeLargeVideo = _isFakeParticipant && !disableVideo && Boolean(youtubeId);
+        const renderYoutubeLargeVideo = _isFakeParticipant && !disableVideo;
 
         return (
             <Container
@@ -226,7 +224,7 @@ class ParticipantView extends Component<Props> {
                     onPress = { renderYoutubeLargeVideo ? undefined : onPress }
                     value = '' />
 
-                { renderYoutubeLargeVideo && <YoutubeLargeVideo youtubeId = { youtubeId } /> }
+                { renderYoutubeLargeVideo && <YoutubeLargeVideo youtubeUrl = { this.props.participantId } /> }
 
                 { !_isFakeParticipant && renderVideo
                     && <VideoTrack

react/features/filmstrip/components/web/Thumbnail.js

@@ -549,8 +549,7 @@ class Thumbnail extends Component<Props, State> {
      * @returns {ReactElement}
      */
     _renderFakeParticipant() {
-        const { _participant } = this.props;
-        const { id, avatarURL } = _participant;
+        const { _participant: { avatarURL } } = this.props;
         const styles = this._getStyles();
         const containerClassName = this._getContainerClassName();
 
@@ -568,11 +567,6 @@ class Thumbnail extends Component<Props, State> {
                         src = { avatarURL } />
                 )
                     : this._renderAvatar(styles.avatar)}
-                <div className = 'displayNameContainer'>
-                    <DisplayName
-                        elementID = 'sharedVideoContainer_name'
-                        participantID = { id } />
-                </div>
             </span>
         );
     }

react/features/shared-video/components/AbstractSharedVideoDialog.js

@@ -29,6 +29,7 @@ export type Props = {
  * Implements an abstract class for {@code SharedVideoDialog}.
  */
 export default class AbstractSharedVideoDialog<S: *> extends Component < Props, S > {
+
     /**
      * Instantiates a new component.
      *
@@ -41,26 +42,4 @@ export default class AbstractSharedVideoDialog<S: *> extends Component < Props,
     }
 
     _onSetVideoLink: string => boolean;
-
-    /**
-     * Validates the entered video link by extracting the id and dispatches it.
-     *
-     * It returns a boolean to comply the Dialog behaviour:
-     *     {@code true} - the dialog should be closed.
-     *     {@code false} - the dialog should be left open.
-     *
-     * @param {string} link - The entered video link.
-     * @returns {boolean}
-     */
-    _onSetVideoLink(link: string) {
-        if (!link || !link.trim()) {
-            return false;
-        }
-
-        const { onPostSubmit } = this.props;
-
-        onPostSubmit(link);
-
-        return true;
-    }
 }

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

@@ -4,13 +4,15 @@ import React from 'react';
 
 import { InputDialog } from '../../../base/dialog';
 import { connect } from '../../../base/redux';
-import { defaultSharedVideoLink } from '../../constants';
+import { defaultMobileSharedVideoLink } from '../../constants';
+import { getYoutubeId } from '../../functions';
 import AbstractSharedVideoDialog from '../AbstractSharedVideoDialog';
 
 /**
  * Implements a component to render a display name prompt.
  */
 class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -22,12 +24,38 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
                 contentKey = 'dialog.shareVideoTitle'
                 onSubmit = { this._onSetVideoLink }
                 textInputProps = {{
-                    placeholder: defaultSharedVideoLink
+                    placeholder: defaultMobileSharedVideoLink
                 }} />
         );
     }
 
-    _onSetVideoLink: string => boolean;
+    /**
+     * Validates the entered video link by extracting the id and dispatches it.
+     *
+     * It returns a boolean to comply the Dialog behaviour:
+     *     {@code true} - the dialog should be closed.
+     *     {@code false} - the dialog should be left open.
+     *
+     * @param {string} link - The entered video link.
+     * @returns {boolean}
+     */
+    _onSetVideoLink(link: string) {
+        if (!link || !link.trim()) {
+            return false;
+        }
+
+        const videoId = getYoutubeId(link);
+
+        if (videoId) {
+            const { onPostSubmit } = this.props;
+
+            onPostSubmit && onPostSubmit(link);
+
+            return true;
+        }
+
+        return false;
+    }
 }
 
 export default connect()(SharedVideoDialog);

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

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

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

@@ -58,7 +58,7 @@ class SharedVideo extends Component<Props> {
      *  width: number
      * }}
      */
-    getDimmensions() {
+    getDimensions() {
         const { clientHeight, clientWidth } = this.props;
 
         let width;
@@ -114,7 +114,7 @@ class SharedVideo extends Component<Props> {
             <div
                 className = { className }
                 id = 'sharedVideo'
-                style = { this.getDimmensions() }>
+                style = { this.getDimensions() }>
                 {this.getManager()}
             </div>
         );

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

@@ -93,7 +93,27 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
         );
     }
 
-    _onSetVideoLink: string => boolean;
+    /**
+     * Validates the entered video link by extracting the id and dispatches it.
+     *
+     * It returns a boolean to comply the Dialog behaviour:
+     *     {@code true} - the dialog should be closed.
+     *     {@code false} - the dialog should be left open.
+     *
+    * @param {string} link - The entered video link.
+     * @returns {boolean}
+     */
+    _onSetVideoLink(link: string) {
+        if (!link || !link.trim()) {
+            return false;
+        }
+
+        const { onPostSubmit } = this.props;
+
+        onPostSubmit(link);
+
+        return true;
+    }
 
     _onChange: Object => void;
 }

react/features/shared-video/constants.js

@@ -1,11 +1,16 @@
 // @flow
 
 /**
- * Example shared video link.
+ * Placeholder for web share video input.
  * @type {string}
  */
 export const defaultSharedVideoLink = 'Youtube link or direct video link';
 
+/**
+ * Mobile example for a youtube video
+ */
+export const defaultMobileSharedVideoLink = 'https://youtu.be/TB7LlM4erx8';
+
 /**
  * Fixed name of the video player fake participant.
  * @type {string}