fix(share-youtube-video): Validate youtube url.

lang/main.json

@@ -311,7 +311,7 @@
         "shareAudioWarningD1": "you need to stop screen sharing before sharing your audio.",
         "shareAudioWarningD2": "you need to restart your screen sharing and check the \"share audio\" option.",
         "shareMediaWarningGenericH2": "If you want to share your screen and audio",
-        "shareVideoLinkError": "Please provide a correct youtube link.",
+        "shareVideoLinkError": "Please provide a correct video link.",
         "shareVideoTitle": "Share video",
         "shareYourScreen": "Share your screen",
         "shareYourScreenDisabled": "Screen sharing disabled.",

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

@@ -1,6 +1,6 @@
 /* @flow */
 /* eslint-disable no-invalid-this */
-
+import Logger from 'jitsi-meet-logger';
 import throttle from 'lodash/throttle';
 import { Component } from 'react';
 
@@ -9,16 +9,18 @@ import { getCurrentConference } from '../../../base/conference';
 import { MEDIA_TYPE } from '../../../base/media';
 import { getLocalParticipant } from '../../../base/participants';
 import { isLocalTrackMuted } from '../../../base/tracks';
+import { showWarningNotification } from '../../../notifications/actions';
 import { dockToolbox } from '../../../toolbox/actions.web';
 import { muteLocal } from '../../../video-menu/actions.any';
-import { setSharedVideoStatus } from '../../actions.any';
+import { setSharedVideoStatus, stopSharedVideo } from '../../actions.any';
-
 export const PLAYBACK_STATES = {
     PLAYING: 'playing',
     PAUSED: 'pause',
     STOPPED: 'stop'
 };
 
+const logger = Logger.getLogger(__filename);
+
 /**
  * Return true if the diffenrece between the two timees is larger than 5.
  *
@@ -41,11 +43,21 @@ export type Props = {
      */
     _conference: Object,
 
+    /**
+     * Warning that indicates an incorect video url
+     */
+    _displayWarning: Function,
+
     /**
      * Docks the toolbox
      */
     _dockToolbox: Function,
 
+    /**
+     * Action to stop video sharing
+    */
+    _stopSharedVideo: Function,
+
     /**
      * Indicates whether the local audio is muted
     */
@@ -197,6 +209,17 @@ class AbstractVideoManager extends Component<Props> {
         }
     }
 
+    /**
+     * Handle video error.
+     *
+     * @returns {void}
+     */
+    onError() {
+        logger.error('Error in the video player');
+        this.props._stopSharedVideo();
+        this.props._displayWarning();
+    }
+
     /**
      * Handle video playing.
      *
@@ -406,9 +429,17 @@ export function _mapStateToProps(state: Object): $Shape<Props> {
  */
 export function _mapDispatchToProps(dispatch: Function): $Shape<Props> {
     return {
+        _displayWarning: () => {
+            dispatch(showWarningNotification({
+                titleKey: 'dialog.shareVideoLinkError'
+            }));
+        },
         _dockToolbox: value => {
             dispatch(dockToolbox(value));
         },
+        _stopSharedVideo: () => {
+            dispatch(stopSharedVideo());
+        },
         _muteLocal: value => {
             dispatch(muteLocal(value, MEDIA_TYPE.AUDIO));
         },

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

@@ -1,4 +1,3 @@
-import Logger from 'jitsi-meet-logger';
 import React from 'react';
 
 import { connect } from '../../../base/redux';
@@ -10,7 +9,6 @@ import AbstractVideoManager, {
     Props
 } from './AbstractVideoManager';
 
-const logger = Logger.getLogger(__filename);
 
 /**
  * Manager of shared video.
@@ -162,9 +160,7 @@ class VideoManager extends AbstractVideoManager<Props> {
             autoPlay: true,
             src: videoId,
             controls: _isOwner,
-            onError: event => {
+            onError: () => this.onError(),
-                logger.error('Error in the player:', event);
-            },
             onPlay: () => this.onPlay(),
             onVolumeChange: () => this.onVolumeChange()
         };

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

@@ -1,5 +1,4 @@
 /* eslint-disable no-invalid-this */
-import Logger from 'jitsi-meet-logger';
 import React from 'react';
 import YouTube from 'react-youtube';
 
@@ -11,8 +10,6 @@ import AbstractVideoManager, {
     PLAYBACK_STATES
 } from './AbstractVideoManager';
 
-const logger = Logger.getLogger(__filename);
-
 /**
  * Manager of shared video.
  *
@@ -152,11 +149,6 @@ class YoutubeVideoManager extends AbstractVideoManager<Props> {
             this.player.destroy();
             this.player = null;
         }
-
-        if (this.errorInPlayer) {
-            this.errorInPlayer.destroy();
-            this.errorInPlayer = null;
-        }
     }
 
     /**
@@ -203,20 +195,6 @@ class YoutubeVideoManager extends AbstractVideoManager<Props> {
         }
     };
 
-    /**
-     * Fired when youtube player throws an error.
-     *
-     * @param {Object} event - Youtube player error event.
-     *
-     * @returns {void}
-     */
-    onPlayerError = event => {
-        logger.error('Error in the player:', event.data);
-
-        // store the error player, so we can remove it
-        this.errorInPlayer = event.target;
-    };
-
     getPlayerOptions = () => {
         const { _isOwner, videoId } = this.props;
         const showControls = _isOwner ? 1 : 0;
@@ -234,7 +212,7 @@ class YoutubeVideoManager extends AbstractVideoManager<Props> {
                     'rel': 0
                 }
             },
-            onError: this.onPlayerError,
+            onError: () => this.onError(),
             onReady: this.onPlayerReady,
             onStateChange: this.onPlayerStateChange,
             videoId

react/features/shared-video/functions.js

@@ -53,3 +53,4 @@ export function isVideoPlaying(stateful: Object | Function): boolean {
 
     return videoPlaying;
 }
+