Add randdom room name generation

4 files changed, 146 insertions, 18 deletions

diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js
index 373075c..4a04661 100644
--- a/app/features/welcome/components/Welcome.js
+++ b/app/features/welcome/components/Welcome.js
@@ -6,6 +6,7 @@ import { SpotlightTarget } from '@atlaskit/onboarding';
 import Page from '@atlaskit/page';
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
 
+import { generateRoomWithoutSeparator } from 'js-utils/random';
 import React, { Component } from 'react';
 import type { Dispatch } from 'redux';
 import { connect } from 'react-redux';
@@ -16,7 +17,7 @@ import { Onboarding, startOnboarding } from '../../onboarding';
 import { RecentList } from '../../recent-list';
 import { normalizeServerURL } from '../../utils';
 
-import { Body, Form, Header, Wrapper } from '../styled';
+import { Body, FieldWrapper, Form, Header, Label, Wrapper } from '../styled';
 
 
 type Props = {
@@ -35,6 +36,26 @@ type Props = {
 type State = {
 
     /**
+     * Timer for animating the room name geneeration.
+     */
+    animateTimeoutId: ?TimeoutID,
+
+    /**
+     * Generated room name.
+     */
+    generatedRoomname: string,
+
+    /**
+     * Current room name placeholder.
+     */
+    roomPlaceholder: string,
+
+    /**
+     * Timer for re-generating a new room name.
+     */
+    updateTimeoutId: ?TimeoutID,
+
+    /**
      * URL of the room to join.
      * If this is not a url it will be treated as room name for default domain.
      */
@@ -65,16 +86,25 @@ class Welcome extends Component<Props, State> {
             }
         }
 
-        this.state = { url };
+        this.state = {
+            animateTimeoutId: undefined,
+            generatedRoomname: '',
+            roomPlaceholder: '',
+            updateTimeoutId: undefined,
+            url
+        };
 
         // Bind event handlers.
+        this._animateRoomnameChanging = this._animateRoomnameChanging.bind(this);
         this._onURLChange = this._onURLChange.bind(this);
         this._onFormSubmit = this._onFormSubmit.bind(this);
         this._onJoin = this._onJoin.bind(this);
+        this._updateRoomname = this._updateRoomname.bind(this);
     }
 
     /**
      * Start Onboarding once component is mounted.
+     * Start generating randdom room names.
      *
      * NOTE: It autonatically checks if the onboarding is shown or not.
      *
@@ -82,6 +112,17 @@ class Welcome extends Component<Props, State> {
      */
     componentDidMount() {
         this.props.dispatch(startOnboarding('welcome-page'));
+
+        this._updateRoomname();
+    }
+
+    /**
+     * Stop all timers when unmounting.
+     *
+     * @returns {voidd}
+     */
+    componentWillUnmount() {
+        this._clearTimeouts();
     }
 
     /**
@@ -103,6 +144,46 @@ class Welcome extends Component<Props, State> {
         );
     }
 
+    _animateRoomnameChanging: (string) => void;
+
+    /**
+     * Animates the changing of the room name.
+     *
+     * @param {string} word - The part of room name that should be added to
+     * placeholder.
+     * @private
+     * @returns {void}
+     */
+    _animateRoomnameChanging(word: string) {
+        let animateTimeoutId;
+        const roomPlaceholder = this.state.roomPlaceholder + word.substr(0, 1);
+
+        if (word.length > 1) {
+            animateTimeoutId
+                = setTimeout(
+                    () => {
+                        this._animateRoomnameChanging(
+                            word.substring(1, word.length));
+                    },
+                    70);
+        }
+        this.setState({
+            animateTimeoutId,
+            roomPlaceholder
+        });
+    }
+
+    /**
+     * Method that clears timeouts for animations and updates of room name.
+     *
+     * @private
+     * @returns {void}
+     */
+    _clearTimeouts() {
+        clearTimeout(this.state.animateTimeoutId);
+        clearTimeout(this.state.updateTimeoutId);
+    }
+
     _onFormSubmit: (*) => void;
 
     /**
@@ -124,7 +205,7 @@ class Welcome extends Component<Props, State> {
      * @returns {void}
      */
     _onJoin() {
-        const inputURL = this.state.url;
+        const inputURL = this.state.url || this.state.generatedRoomname;
         const lastIndexOfSlash = inputURL.lastIndexOf('/');
         let room;
         let serverURL;
@@ -195,26 +276,53 @@ class Welcome extends Component<Props, State> {
             <Header>
                 <SpotlightTarget name = 'conference-url'>
                     <Form onSubmit = { this._onFormSubmit }>
-                        <FieldTextStateless
-                            autoFocus = { true }
-                            isInvalid = { locationError }
-                            isLabelHidden = { true }
-                            onChange = { this._onURLChange }
-                            placeholder = 'Enter a name for your conference or a Jitsi URL'
-                            shouldFitContainer = { true }
-                            type = 'text'
-                            value = { this.state.url } />
+                        <Label>{ 'Enter a name for your conference or a Jitsi URL' } </Label>
+                        <FieldWrapper>
+                            <FieldTextStateless
+                                autoFocus = { true }
+                                isInvalid = { locationError }
+                                isLabelHidden = { true }
+                                onChange = { this._onURLChange }
+                                placeholder = { this.state.roomPlaceholder }
+                                shouldFitContainer = { true }
+                                type = 'text'
+                                value = { this.state.url } />
+                            <Button
+                                appearance = 'primary'
+                                onClick = { this._onJoin }
+                                type = 'button'>
+                                GO
+                            </Button>
+                        </FieldWrapper>
                     </Form>
                 </SpotlightTarget>
-                <Button
-                    appearance = 'primary'
-                    onClick = { this._onJoin }
-                    type = 'button'>
-                    GO
-                </Button>
             </Header>
         );
     }
+
+    _updateRoomname: () => void;
+
+    /**
+     * Triggers the generation of a new room name and initiates an animation of
+     * its changing.
+     *
+     * @protected
+     * @returns {void}
+     */
+    _updateRoomname() {
+        const generatedRoomname = generateRoomWithoutSeparator();
+        const roomPlaceholder = '';
+        const updateTimeoutId = setTimeout(this._updateRoomname, 10000);
+
+        this._clearTimeouts();
+        this.setState(
+            {
+                generatedRoomname,
+                roomPlaceholder,
+                updateTimeoutId
+            },
+            () => this._animateRoomnameChanging(generatedRoomname));
+    }
 }
 
 export default connect()(Welcome);
diff --git a/app/features/welcome/styled/FieldWrapper.js b/app/features/welcome/styled/FieldWrapper.js
new file mode 100644
index 0000000..bfbe3e2
--- /dev/null
+++ b/app/features/welcome/styled/FieldWrapper.js
@@ -0,0 +1,10 @@
+// @flow
+
+import styled from 'styled-components';
+
+export default styled.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    magin: auto;
+`;
diff --git a/app/features/welcome/styled/Label.js b/app/features/welcome/styled/Label.js
new file mode 100644
index 0000000..ed588d2
--- /dev/null
+++ b/app/features/welcome/styled/Label.js
@@ -0,0 +1,8 @@
+// @flow
+
+import styled from 'styled-components';
+
+export default styled.span`
+    color: white;
+    font-weight: bold;
+`;
diff --git a/app/features/welcome/styled/index.js b/app/features/welcome/styled/index.js
index 191461c..df8f02c 100644
--- a/app/features/welcome/styled/index.js
+++ b/app/features/welcome/styled/index.js
@@ -1,4 +1,6 @@
 export { default as Body } from './Body';
+export { default as FieldWrapper } from './FieldWrapper';
 export { default as Form } from './Form';
 export { default as Header } from './Header';
+export { default as Label } from './Label';
 export { default as Wrapper } from './Wrapper';