Skip to content

Dev2.5.18 limit caption lines to 2 #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hiroshisuga wants to merge 3 commits into
base: test_showdiff_limitCaptionHeight
Choose a base branch
from
Open

Dev2.5.18 limit caption lines to 2 #212

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1aff1fe
Update component.jsx
hiroshisuga Jun 14, 2023
13f0eee
add comment why 1.3
hiroshisuga Jun 14, 2023
dcaeb67
set clippath at componentDidUpdate
hiroshisuga Jun 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion bigbluebutton-html5/imports/ui/components/captions/live/component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 //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 {
Expand All @@ -23,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);
}
Expand Down Expand Up @@ -56,6 +74,8 @@ class LiveCaptions extends PureComponent {
fontSize,
background: backgroundColor,
color: fontColor,
//clipPath: inset, -> set later at componentDidUpdate
lineHeight: LINEHEIGHT,
};

const visuallyHidden = {
Expand All @@ -71,7 +91,7 @@ class LiveCaptions extends PureComponent {

return (
<div>
<div style={captionStyles}>
<div style={captionStyles} id='caption-window'>
{clear ? '' : data}
</div>
<div
Expand Down