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

@@ -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)

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 <tt>rightwatermark</tt>.
+ */
+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 (
+            <div>
+                {
+                    this._renderJitsiWatermark()
+                }
+                {
+                    this._renderBrandWatermark()
+                }
+                {
+                    this._renderPoweredBy()
+                }
+            </div>
+        );
+    }
+
+    /**
+     * Renders a brand watermark if it is enabled.
+     *
+     * @private
+     * @returns {ReactElement|null} Watermark element or null.
+     */
+    _renderBrandWatermark() {
+        if (this.state.showBrandWatermark) {
+            return (
+                <a
+                    href = { this.state.brandWatermarkLink }
+                    target = '_new'>
+                    <div
+                        className = 'watermark rightwatermark'
+                        style = { RIGHT_WATERMARK_STYLE } />
+                </a>
+            );
+        }
+
+        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 (
+                <a
+                    href = { this.state.jitsiWatermarkLink }
+                    target = '_new'>
+                    <div className = 'watermark leftwatermark' />
+                </a>
+            );
+        }
+
+        return null;
+    }
+
+    /**
+     * Renders a powered by block if it is enabled.
+     *
+     * @private
+     * @returns {ReactElement|null}
+     */
+    _renderPoweredBy() {
+        if (this.state.showPoweredBy) {
+            return (
+                <a
+                    className = 'poweredby'
+                    href = 'http://jitsi.org'
+                    target = '_new'>
+                    <span data-i18n = 'poweredby' /> jitsi.org
+                </a>
+            );
+        }
+
+        return null;
+    }
+}

react/features/base/react/components/index.js

@@ -1,2 +1,3 @@
 export * from './Container';
 export * from './Link';
+export * from './Watermarks';

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 {
                             <div id = 'sharedVideoIFrame' />
                         </div>
                         <div id = 'etherpad' />
-                        {
-                            this._renderJitsiWatermark()
-                        }
-                        {
-                            this._renderBrandWatermark()
-                        }
-                        {
-                            this._renderPoweredBy()
-                        }
+
+                        <Watermarks />
+
                         <div id = 'dominantSpeaker'>
                             <div className = 'dynamic-shadow' />
                             <img
@@ -195,69 +162,6 @@ class Conference extends Component {
             </div>
         );
     }
-
-    /**
-     * Method that returns brand watermark element if it is enabled.
-     *
-     * @returns {ReactElement|null}
-     * @private
-     */
-    _renderBrandWatermark() {
-        if (this.state.showBrandWatermark) {
-            return (
-                <a
-                    href = { this.state.brandWatermarkLink }
-                    target = '_new'>
-                    <div className = 'watermark rightwatermark' />
-                </a>
-            );
-        }
-
-        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 (
-                <a
-                    href = { this.state.jitsiWatermarkLink }
-                    target = '_new'>
-                    <div className = 'watermark leftwatermark' />
-                </a>
-            );
-        }
-
-        return null;
-    }
-
-    /**
-     * Renders powered by block if it is enabled.
-     *
-     * @returns {ReactElement|null}
-     * @private
-     */
-    _renderPoweredBy() {
-        if (this.state.showPoweredBy) {
-            return (
-                <a
-                    className = 'poweredby hide'
-                    href = 'http://jitsi.org'
-                    target = '_new'>
-                    <span data-i18n = 'poweredby' /> jitsi.org
-                </a>
-            );
-        }
-
-        return null;
-    }
 }
 
 export default reactReduxConnect()(Conference);

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 <tt>rightwatermark</tt>.
- */
-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 (
-            <div>
-                <div id = 'welcome_page'>
-                    {
-                        this._renderHeader()
-                    }
-                    {
-                        this._renderMain()
-                    }
-                </div>
+            <div id = 'welcome_page'>
+                {
+                    this._renderHeader()
+                }
+                {
+                    this._renderMain()
+                }
             </div>
         );
     }
@@ -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 <tt>change</tt> 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 (
-                <a
-                    href = { this.state.brandWatermarkLink }
-                    target = '_new'>
-                    <div
-                        className = 'watermark rightwatermark'
-                        style = { RIGHT_WATERMARK_STYLE } />
-                </a>
-            );
-        }
-
-        return null;
-    }
-
     /**
      * Renders a feature with a specific index.
      *
@@ -239,15 +192,8 @@ class WelcomePage extends AbstractWelcomePage {
 
         return (
             <div id = 'welcome_page_header'>
-                {
-                    this._renderJitsiWatermark()
-                }
-                {
-                    this._renderBrandWatermark()
-                }
-                {
-                    this._renderPoweredBy()
-                }
+                <Watermarks />
+
                 <div id = 'enter_room_container'>
                     <div id = 'enter_room_form'>
                         <div className = 'domain-name'>
@@ -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 (
-                <a
-                    href = { this.state.jitsiWatermarkLink }
-                    target = '_new'>
-                    <div className = 'watermark leftwatermark' />
-                </a>
-            );
-        }
-
-        return null;
-    }
-
-    /**
-     * Renders powered by block if it is enabled.
-     *
-     * @private
-     * @returns {ReactElement|null}
-     */
-    _renderPoweredBy() {
-        if (this.state.showPoweredBy) {
-            return (
-                <a
-                    className = 'poweredby'
-                    href = 'http://jitsi.org'
-                    target = '_new'>
-                    <span data-i18n = 'poweredby' /> jitsi.org
-                </a>
-            );
-        }
-
-        return null;
-    }
-
     /**
      * Renders the main part of this WelcomePage.
      *