feat(shared-video): show invalid URL error.

css/modals/_dialog.scss

@@ -140,3 +140,12 @@
         margin: 16px auto 0 auto;
     }
 }
+
+/**
+ * Styling shared video dialog errors.
+ */
+.shared-video-dialog-error {
+    color: #E04757;
+    margin-top: 2px;
+    display: block;
+}

lang/main.json

@@ -365,6 +365,7 @@
         "shareVideoTitle": "Share video",
         "shareYourScreen": "Share your screen",
         "shareYourScreenDisabled": "Screen sharing disabled.",
+        "sharedVideoDialogError": "Error: Invalid URL",
         "sharedVideoLinkPlaceholder": "YouTube link or direct video link",
         "startLiveStreaming": "Start live stream",
         "startRecording": "Start recording",

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

@@ -20,6 +20,10 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
     constructor(props) {
         super(props);
 
+        this.state = {
+            error: false
+        };
+
         this._onSubmitValue = this._onSubmitValue.bind(this);
     }
 
@@ -32,7 +36,13 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
      * @returns {boolean}
      */
     _onSubmitValue(value) {
-        return super._onSetVideoLink(value);
+        const result = super._onSetVideoLink(value);
+
+        if (!result) {
+            this.setState({ error: true });
+        }
+
+        return result;
     }
 
     /**
@@ -42,10 +52,12 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
      */
     render() {
         const { t } = this.props;
+        const { error } = this.state;
 
         return (
             <InputDialog
                 contentKey = 'dialog.shareVideoTitle'
+                messageKey = { error ? 'dialog.sharedVideoDialogError' : undefined }
                 onSubmit = { this._onSubmitValue }
                 textInputProps = {{
                     autoCapitalize: 'none',

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

@@ -26,7 +26,8 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
 
         this.state = {
             value: '',
-            okDisabled: true
+            okDisabled: true,
+            error: false
         };
 
         this._onChange = this._onChange.bind(this);
@@ -58,7 +59,15 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
      * @returns {boolean}
      */
     _onSubmitValue() {
-        return super._onSetVideoLink(this.state.value);
+        const result = super._onSetVideoLink(this.state.value);
+
+        if (!result) {
+            this.setState({
+                error: true
+            });
+        }
+
+        return result;
     }
 
     /**
@@ -68,6 +77,7 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
      */
     render() {
         const { t } = this.props;
+        const { error } = this.state;
 
         return (
             <Dialog
@@ -81,6 +91,7 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
                     autoFocus = { true }
                     className = 'input-control'
                     compact = { false }
+                    isInvalid = { error }
                     label = { t('dialog.videoLink') }
                     name = 'sharedVideoUrl'
                     onChange = { this._onChange }
@@ -88,6 +99,7 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
                     shouldFitContainer = { true }
                     type = 'text'
                     value = { this.state.value } />
+                { error && <span className = 'shared-video-dialog-error'>{ t('dialog.sharedVideoDialogError') }</span> }
             </Dialog>
         );
     }