Merge pull request #14368 from vector-im/t3chguy/fix/14364

Fix welcomeBackgroundUrl array causing background to change during use
This commit is contained in:
Michael Telatynski 2020-07-08 13:23:35 +01:00 committed by GitHub
commit 5909725623
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 10 deletions

View File

@ -1,5 +1,5 @@
/* /*
Copyright 2019 New Vector Ltd Copyright 2019, 2020 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
'use strict';
import React from 'react'; import React from 'react';
import * as sdk from 'matrix-react-sdk/src/index'; import * as sdk from 'matrix-react-sdk/src/index';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig'; import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
@ -23,21 +21,31 @@ import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
export default class VectorAuthPage extends React.PureComponent { export default class VectorAuthPage extends React.PureComponent {
static replaces = 'AuthPage' static replaces = 'AuthPage'
static welcomeBackgroundUrl;
// cache the url as a static to prevent it changing without refreshing
static getWelcomeBackgroundUrl() {
if (VectorAuthPage.welcomeBackgroundUrl) return VectorAuthPage.welcomeBackgroundUrl;
const brandingConfig = SdkConfig.get().branding;
VectorAuthPage.welcomeBackgroundUrl = "themes/riot/img/backgrounds/valley.jpg";
if (brandingConfig && brandingConfig.welcomeBackgroundUrl) {
if (Array.isArray(brandingConfig.welcomeBackgroundUrl)) {
const index = Math.floor(Math.random() * brandingConfig.welcomeBackgroundUrl.length);
VectorAuthPage.welcomeBackgroundUrl = brandingConfig.welcomeBackgroundUrl[index];
} else {
VectorAuthPage.welcomeBackgroundUrl = brandingConfig.welcomeBackgroundUrl;
}
}
return VectorAuthPage.welcomeBackgroundUrl;
}
render() { render() {
const AuthFooter = sdk.getComponent('auth.AuthFooter'); const AuthFooter = sdk.getComponent('auth.AuthFooter');
const brandingConfig = SdkConfig.get().branding;
let backgroundUrl = "themes/riot/img/backgrounds/valley.jpg";
if (brandingConfig && brandingConfig.welcomeBackgroundUrl) {
if (Array.isArray(brandingConfig.welcomeBackgroundUrl)) {
backgroundUrl = brandingConfig.welcomeBackgroundUrl[Math.floor(Math.random() * brandingConfig.welcomeBackgroundUrl.length)];
} else {
backgroundUrl = brandingConfig.welcomeBackgroundUrl;
}
}
const pageStyle = { const pageStyle = {
background: `center/cover fixed url(${backgroundUrl})`, background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`,
}; };
const modalStyle = { const modalStyle = {
@ -65,7 +73,7 @@ export default class VectorAuthPage extends React.PureComponent {
return ( return (
<div className="mx_AuthPage" style={pageStyle}> <div className="mx_AuthPage" style={pageStyle}>
<div className="mx_AuthPage_modal" style={modalStyle}> <div className="mx_AuthPage_modal" style={modalStyle}>
<div className="mx_AuthPage_modalBlur" style={blurStyle}></div> <div className="mx_AuthPage_modalBlur" style={blurStyle} />
<div className="mx_AuthPage_modalContent" style={modalContentStyle}> <div className="mx_AuthPage_modalContent" style={modalContentStyle}>
{ this.props.children } { this.props.children }
</div> </div>