From d2f49288f13bfd9590d7968909b096353e87231b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Tue, 19 May 2020 11:43:55 +0200 Subject: [PATCH] Add randdom room name generation --- app/features/welcome/components/Welcome.js | 144 +++++++++++++++++--- app/features/welcome/styled/FieldWrapper.js | 10 ++ app/features/welcome/styled/Label.js | 8 ++ app/features/welcome/styled/index.js | 2 + package-lock.json | 15 +- package.json | 2 +- 6 files changed, 155 insertions(+), 26 deletions(-) create mode 100644 app/features/welcome/styled/FieldWrapper.js create mode 100644 app/features/welcome/styled/Label.js 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 = { @@ -34,6 +35,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 { } } - 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 { */ 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 { ); } + _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 { * @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 {
- + + + + +
-
); } + + _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'; diff --git a/package-lock.json b/package-lock.json index 6569991..51dc5d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4289,9 +4289,9 @@ "optional": true }, "bowser": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.1.tgz", - "integrity": "sha512-UXti1JB6oK8hO983AImunnV6j/fqAEeDlPXh99zhsP5g32oLbxJJ6qcOaUesR+tqqhnUVQHlRJyD0dfiV0Hxaw==" + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.7.0.tgz", + "integrity": "sha512-aIlMvstvu8x+34KEiOHD3AsBgdrzg6sxALYiukOWhFvGMbQI6TRP/iY0LMhUrHs56aD6P1G0Z7h45PUJaa5m9w==" }, "boxen": { "version": "4.2.0", @@ -8415,11 +8415,12 @@ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-utils": { - "version": "github:jitsi/js-utils#0c53500a5120be2aa3fc590f0f932a0d4771920f", - "from": "github:jitsi/js-utils#0c53500a5120be2aa3fc590f0f932a0d4771920f", + "version": "github:jitsi/js-utils#cf11996bd866fdb47326c59a5d3bc24be17282d4", + "from": "github:jitsi/js-utils#cf11996bd866fdb47326c59a5d3bc24be17282d4", "requires": { - "bowser": "1.9.1", - "js-md5": "0.7.3" + "bowser": "2.7.0", + "js-md5": "0.7.3", + "postis": "2.2.0" } }, "js-yaml": { diff --git a/package.json b/package.json index 485677a..5331adc 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "electron-window-state": "5.0.3", "history": "4.10.1", "jitsi-meet-electron-utils": "github:jitsi/jitsi-meet-electron-utils#v2.0.6", - "js-utils": "github:jitsi/js-utils#0c53500a5120be2aa3fc590f0f932a0d4771920f", + "js-utils": "github:jitsi/js-utils#cf11996bd866fdb47326c59a5d3bc24be17282d4", "moment": "2.23.0", "mousetrap": "1.6.2", "react": "16.6.3",