From 6efad1348ac872fd98e5fbc8c5f5410a1e2894b4 Mon Sep 17 00:00:00 2001 From: Lyubomir Marinov Date: Tue, 17 Jan 2017 16:16:08 -0600 Subject: [PATCH] Fix the display of watermarks in film strip-only mode Recently, we reimplemented the watermarks in React. Unfortunately, we didn't take into account film strip-only mode. Additionally, we duplicated watermark-related source code on the Welcome and Conference pages. --- modules/UI/videolayout/LargeVideoManager.js | 33 +---- .../react/components/Watermarks.native.js | 0 .../base/react/components/Watermarks.web.js | 134 ++++++++++++++++++ react/features/base/react/components/index.js | 1 + .../conference/components/Conference.web.js | 106 +------------- .../welcome/components/WelcomePage.web.js | 131 +++-------------- 6 files changed, 159 insertions(+), 246 deletions(-) create mode 100644 react/features/base/react/components/Watermarks.native.js create mode 100644 react/features/base/react/components/Watermarks.web.js diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index d37cd0c79..225370ddf 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/modules/UI/videolayout/LargeVideoManager.js @@ -1,4 +1,4 @@ -/* global $, APP, interfaceConfig */ +/* global $, APP */ const logger = require("jitsi-meet-logger").getLogger(__filename); import Avatar from "../avatar/Avatar"; @@ -37,37 +37,6 @@ export default class LargeVideoManager { display: 'inline-block' }); - if (interfaceConfig.SHOW_JITSI_WATERMARK - && !interfaceConfig.filmStripOnly) { - let leftWatermarkDiv - = this.$container.find("div.watermark.leftwatermark"); - - leftWatermarkDiv.css({display: 'block'}); - - UIUtil.setLinkHref( - leftWatermarkDiv.parent(), - interfaceConfig.JITSI_WATERMARK_LINK); - } - - if (interfaceConfig.SHOW_BRAND_WATERMARK - && !interfaceConfig.filmStripOnly) { - let rightWatermarkDiv - = this.$container.find("div.watermark.rightwatermark"); - - rightWatermarkDiv.css({ - display: 'block', - backgroundImage: 'url(images/rightwatermark.png)' - }); - - UIUtil.setLinkHref( - rightWatermarkDiv.parent(), - interfaceConfig.BRAND_WATERMARK_LINK); - } - - if (interfaceConfig.SHOW_POWERED_BY) { - this.$container.children("a.poweredby").css({display: 'block'}); - } - this.$container.hover( e => this.onHoverIn(e), e => this.onHoverOut(e) diff --git a/react/features/base/react/components/Watermarks.native.js b/react/features/base/react/components/Watermarks.native.js new file mode 100644 index 000000000..e69de29bb diff --git a/react/features/base/react/components/Watermarks.web.js b/react/features/base/react/components/Watermarks.web.js new file mode 100644 index 000000000..b0f8e1612 --- /dev/null +++ b/react/features/base/react/components/Watermarks.web.js @@ -0,0 +1,134 @@ +/* global APP, interfaceConfig */ + +import React, { Component } from 'react'; + +/** + * The CSS style of the element with CSS class rightwatermark. + */ +const RIGHT_WATERMARK_STYLE = { + backgroundImage: 'url(images/rightwatermark.png)' +}; + +/** + * A Web Component which renders watermarks such as Jits, brand, powered by, + * etc. + */ +export class Watermarks extends Component { + /** + * Initializes a new Watermarks instance. + * + * @param {Object} props - The read-only properties with which the new + * instance is to be initialized. + */ + constructor(props) { + super(props); + + const showBrandWatermark + = interfaceConfig.SHOW_BRAND_WATERMARK + && !interfaceConfig.filmStripOnly; + const showJitsiWatermark + = interfaceConfig.SHOW_JITSI_WATERMARK + && !interfaceConfig.filmStripOnly; + const showJitsiWatermarkForGuests + = interfaceConfig.SHOW_WATERMARK_FOR_GUESTS; + + this.state = { + brandWatermarkLink: + showBrandWatermark ? interfaceConfig.BRAND_WATERMARK_LINK : '', + jitsiWatermarkLink: + showJitsiWatermark || showJitsiWatermarkForGuests + ? interfaceConfig.JITSI_WATERMARK_LINK : '', + showBrandWatermark, + showJitsiWatermark, + showJitsiWatermarkForGuests, + showPoweredBy: interfaceConfig.SHOW_POWERED_BY + }; + } + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + return ( +
+ { + this._renderJitsiWatermark() + } + { + this._renderBrandWatermark() + } + { + this._renderPoweredBy() + } +
+ ); + } + + /** + * Renders a brand watermark if it is enabled. + * + * @private + * @returns {ReactElement|null} Watermark element or null. + */ + _renderBrandWatermark() { + if (this.state.showBrandWatermark) { + return ( + +
+ + ); + } + + return null; + } + + /** + * Renders a Jitsi watermark if it is enabled. + * + * @private + * @returns {ReactElement|null} + */ + _renderJitsiWatermark() { + if (this.state.showJitsiWatermark + || (APP.tokenData.isGuest + && this.state.showJitsiWatermarkForGuests)) { + return ( + +
+ + ); + } + + return null; + } + + /** + * Renders a powered by block if it is enabled. + * + * @private + * @returns {ReactElement|null} + */ + _renderPoweredBy() { + if (this.state.showPoweredBy) { + return ( + + jitsi.org + + ); + } + + return null; + } +} diff --git a/react/features/base/react/components/index.js b/react/features/base/react/components/index.js index f90eb10f5..e3f8ed5bf 100644 --- a/react/features/base/react/components/index.js +++ b/react/features/base/react/components/index.js @@ -1,2 +1,3 @@ export * from './Container'; export * from './Link'; +export * from './Watermarks'; diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js index 93bd85606..e83c87c17 100644 --- a/react/features/conference/components/Conference.web.js +++ b/react/features/conference/components/Conference.web.js @@ -1,9 +1,10 @@ -/* global $, APP, interfaceConfig */ +/* global $, APP */ import React, { Component } from 'react'; import { connect as reactReduxConnect } from 'react-redux'; import { connect, disconnect } from '../../base/connection'; +import { Watermarks } from '../../base/react'; /** * For legacy reasons, inline style for display none. @@ -53,34 +54,6 @@ class Conference extends Component { this.props.dispatch(disconnect()); } - /** - * Initializes Conference component instance. - * - * @param {Object} props - The read-only properties with which the new - * instance is to be initialized. - */ - constructor(props) { - super(props); - - const showBrandWatermark = interfaceConfig.SHOW_BRAND_WATERMARK; - const showJitsiWatermark = interfaceConfig.SHOW_JITSI_WATERMARK; - const showJitsiWatermarkForGuest - = interfaceConfig.SHOW_WATERMARK_FOR_GUESTS; - - this.state = { - ...this.state, - showBrandWatermark, - showJitsiWatermark, - showJitsiWatermarkForGuest, - brandWatermarkLink: - showBrandWatermark ? interfaceConfig.BRAND_WATERMARK_LINK : '', - jitsiWatermarkLink: - showJitsiWatermark || showJitsiWatermarkForGuest - ? interfaceConfig.JITSI_WATERMARK_LINK : '', - showPoweredBy: interfaceConfig.SHOW_POWERED_BY - }; - } - /** * Implements React's {@link Component#render()}. * @@ -123,15 +96,9 @@ class Conference extends Component {
- { - this._renderJitsiWatermark() - } - { - this._renderBrandWatermark() - } - { - this._renderPoweredBy() - } + + +
); } - - /** - * Method that returns brand watermark element if it is enabled. - * - * @returns {ReactElement|null} - * @private - */ - _renderBrandWatermark() { - if (this.state.showBrandWatermark) { - return ( - -
- - ); - } - - return null; - } - - /** - * Method that returns jitsi watermark element if it is enabled. - * - * @returns {ReactElement|null} - * @private - */ - _renderJitsiWatermark() { - if (this.state.showJitsiWatermark - || (APP.tokenData.isGuest - && this.state.showJitsiWatermarkForGuest)) { - return ( - -
- - ); - } - - return null; - } - - /** - * Renders powered by block if it is enabled. - * - * @returns {ReactElement|null} - * @private - */ - _renderPoweredBy() { - if (this.state.showPoweredBy) { - return ( - - jitsi.org - - ); - } - - return null; - } } export default reactReduxConnect()(Conference); diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js index 9b287c8db..31a3ae661 100644 --- a/react/features/welcome/components/WelcomePage.web.js +++ b/react/features/welcome/components/WelcomePage.web.js @@ -3,14 +3,9 @@ import React from 'react'; import { connect } from 'react-redux'; -import { AbstractWelcomePage, mapStateToProps } from './AbstractWelcomePage'; +import { Watermarks } from '../../base/react'; -/** - * The CSS style of the element with CSS class rightwatermark. - */ -const RIGHT_WATERMARK_STYLE = { - backgroundImage: 'url(images/rightwatermark.png)' -}; +import { AbstractWelcomePage, mapStateToProps } from './AbstractWelcomePage'; /* eslint-disable require-jsdoc */ @@ -32,7 +27,13 @@ class WelcomePage extends AbstractWelcomePage { constructor(props) { super(props); - this._initState(); + this.state = { + ...this.state, + + enableWelcomePage: true, + generateRoomnames: + interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE + }; // Bind event handlers so they are only bound once for every instance. this._onDisableWelcomeChange = this._onDisableWelcomeChange.bind(this); @@ -63,15 +64,13 @@ class WelcomePage extends AbstractWelcomePage { */ render() { return ( -
-
- { - this._renderHeader() - } - { - this._renderMain() - } -
+
+ { + this._renderHeader() + } + { + this._renderMain() + }
); } @@ -86,30 +85,6 @@ class WelcomePage extends AbstractWelcomePage { return `${window.location.protocol}//${window.location.host}/`; } - /** - * Method that initializes state of the component. - * - * @returns {void} - */ - _initState() { - const showBrandWatermark = interfaceConfig.SHOW_BRAND_WATERMARK; - const showJitsiWatermark = interfaceConfig.SHOW_JITSI_WATERMARK; - - this.state = { - ...this.state, - brandWatermarkLink: - showBrandWatermark ? interfaceConfig.BRAND_WATERMARK_LINK : '', - enableWelcomePage: true, - generateRoomnames: - interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE, - jitsiWatermarkLink: - showJitsiWatermark ? interfaceConfig.JITSI_WATERMARK_LINK : '', - showBrandWatermark, - showJitsiWatermark, - showPoweredBy: interfaceConfig.SHOW_POWERED_BY - }; - } - /** * Handles change event of the checkbox which allows specifying * whether the WelcomePage is disabled. @@ -154,28 +129,6 @@ class WelcomePage extends AbstractWelcomePage { super._onRoomChange(event.target.value); } - /** - * Method that returns brand watermark element if it is enabled. - * - * @private - * @returns {ReactElement|null} Watermark element or null. - */ - _renderBrandWatermark() { - if (this.state.showBrandWatermark) { - return ( - -
- - ); - } - - return null; - } - /** * Renders a feature with a specific index. * @@ -239,15 +192,8 @@ class WelcomePage extends AbstractWelcomePage { return (
- { - this._renderJitsiWatermark() - } - { - this._renderBrandWatermark() - } - { - this._renderPoweredBy() - } + +
@@ -299,47 +245,6 @@ class WelcomePage extends AbstractWelcomePage { ); } - /** - * Method that returns jitsi watermark element if it is enabled. - * - * @private - * @returns {ReactElement|null} Watermark element or null. - */ - _renderJitsiWatermark() { - if (this.state.showJitsiWatermark) { - return ( - -
- - ); - } - - return null; - } - - /** - * Renders powered by block if it is enabled. - * - * @private - * @returns {ReactElement|null} - */ - _renderPoweredBy() { - if (this.state.showPoweredBy) { - return ( - - jitsi.org - - ); - } - - return null; - } - /** * Renders the main part of this WelcomePage. *