haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Lyubomir Marinov 2017-01-17 16:16:08 -06:00
parent eaed9db1e7
commit 6efad1348a
6 changed files with 159 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
modules/UI/videolayout/LargeVideoManager.js
View File

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

0
react/features/base/react/components/Watermarks.native.js Normal file
View File

134
react/features/base/react/components/Watermarks.web.js Normal file
View File

@ -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;
}
}

1
react/features/base/react/components/index.js
View File

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

106
react/features/conference/components/Conference.web.js
View File

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

131
react/features/welcome/components/WelcomePage.web.js
View File

@ -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.
*