From 1aff1feb55930aa744e270871baa9832daa0f20a Mon Sep 17 00:00:00 2001 From: hiroshisuga <45039819+hiroshisuga@users.noreply.github.com> Date: Wed, 14 Jun 2023 11:55:35 +0900 Subject: [PATCH 1/3] Update component.jsx --- .../ui/components/captions/live/component.jsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx b/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx index 2e7472717c5f..10692140f83b 100644 --- a/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import Service from '/imports/ui/components/captions/service'; +const LINEHEIGHT = 1.3 const CAPTIONS_CONFIG = Meteor.settings.public.captions; class LiveCaptions extends PureComponent { @@ -49,6 +50,17 @@ class LiveCaptions extends PureComponent { backgroundColor, } = this.settings; + const captionWindow = document.getElementById("caption-window"); + let regionHeight = 0; + let regionFontSize = 0; + if (captionWindow) { + const captionWindowStyle = window.getComputedStyle(captionWindow); + regionHeight = captionWindow.clientHeight; + regionFontSize = parseInt(captionWindowStyle.getPropertyValue("font-size")); + } + const regionMaxHeight = regionFontSize * LINEHEIGHT * 2; + const inset = `inset(${regionHeight > regionMaxHeight ? regionHeight-regionMaxHeight : 0}px 0px 0px 0px)`; + const captionStyles = { whiteSpace: 'pre-wrap', wordWrap: 'break-word', @@ -56,6 +68,8 @@ class LiveCaptions extends PureComponent { fontSize, background: backgroundColor, color: fontColor, + clipPath: inset, + lineHeight: LINEHEIGHT, }; const visuallyHidden = { @@ -71,7 +85,7 @@ class LiveCaptions extends PureComponent { return (
-
+
{clear ? '' : data}
Date: Wed, 14 Jun 2023 12:01:35 +0900 Subject: [PATCH 2/3] add comment why 1.3 After some search I've found that the line-height are set "normal", which seems 1.2 for western fonts but 1.5 for Japanese fonts. So I set 1.3. We need to set this anyway, otherwise the calculation of max-height of the caption window is not possible. --- .../imports/ui/components/captions/live/component.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx b/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx index 10692140f83b..056ea33b6a07 100644 --- a/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import Service from '/imports/ui/components/captions/service'; -const LINEHEIGHT = 1.3 +const LINEHEIGHT = 1.3 //1.2 - 1.5; when "line-height: normal", 1.2 for western fonts and 1.5 for Japanese fonts. const CAPTIONS_CONFIG = Meteor.settings.public.captions; class LiveCaptions extends PureComponent { From dcaeb67d5cf59707ccf92fb3eb24b3805df9962d Mon Sep 17 00:00:00 2001 From: hiroshisuga <45039819+hiroshisuga@users.noreply.github.com> Date: Sun, 18 Jun 2023 20:33:00 +0900 Subject: [PATCH 3/3] set clippath at componentDidUpdate --- .../ui/components/captions/live/component.jsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx b/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx index 056ea33b6a07..646f5c8700c4 100644 --- a/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx @@ -24,6 +24,23 @@ class LiveCaptions extends PureComponent { this.setState({ clear: false }); } } else { + // Set clip-path to limit max 2 lines + let regionHeight = 0; + let regionFontSize = 0; + const captionWindow = document.getElementById("caption-window"); + if (captionWindow) { + const captionWindowStyle = window.getComputedStyle(captionWindow); + regionHeight = captionWindow.clientHeight; + regionFontSize = parseInt(captionWindowStyle.getPropertyValue("font-size")); + const regionMaxHeight = regionFontSize * LINEHEIGHT * 2; + // The below line was necessary when the avatar size was defined in user/component; + // the number 46px seemed to have determinied by the avatar size. + // After the avatar size became not hard-coded, the regionHeight is regionFontSize * LINEHEIGHT * (number of lines) + //regionMaxHeight = regionMaxHeight < 46 ? 46 : regionMaxHeight; + const inset = `inset(${regionHeight > regionMaxHeight ? regionHeight-regionMaxHeight : 0}px 0px 0px 0px)`; + //console.log("CapRender", regionHeight, regionFontSize, regionMaxHeight, inset); + captionWindow.style.clipPath = inset; + } this.resetTimer(); this.timer = setTimeout(() => this.setState({ clear: true }), CAPTIONS_CONFIG.time); } @@ -50,17 +67,6 @@ class LiveCaptions extends PureComponent { backgroundColor, } = this.settings; - const captionWindow = document.getElementById("caption-window"); - let regionHeight = 0; - let regionFontSize = 0; - if (captionWindow) { - const captionWindowStyle = window.getComputedStyle(captionWindow); - regionHeight = captionWindow.clientHeight; - regionFontSize = parseInt(captionWindowStyle.getPropertyValue("font-size")); - } - const regionMaxHeight = regionFontSize * LINEHEIGHT * 2; - const inset = `inset(${regionHeight > regionMaxHeight ? regionHeight-regionMaxHeight : 0}px 0px 0px 0px)`; - const captionStyles = { whiteSpace: 'pre-wrap', wordWrap: 'break-word', @@ -68,7 +74,7 @@ class LiveCaptions extends PureComponent { fontSize, background: backgroundColor, color: fontColor, - clipPath: inset, + //clipPath: inset, -> set later at componentDidUpdate lineHeight: LINEHEIGHT, };