BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switched to a different way of scaling the slide

Browse Source
This commit is contained in:
Oleksandr Zhurbenko 2017-03-23 14:52:36 -07:00
parent 583ec9c404
commit a50a883bf9
9 changed files with 164 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
bigbluebutton-html5/imports/ui/components/chat/component.jsx
View File

@ -13,6 +13,16 @@ export default class Chat extends Component {
super(props);
}
componentDidMount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
componentWillUnmount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
render() {
const {
chatID,

11
bigbluebutton-html5/imports/ui/components/closed-captions/component.jsx
View File

@ -20,11 +20,14 @@ export default class ClosedCaptions extends React.Component {
);
}
componentDidUpdate() {
const { ccScrollArea } = this.refs;
componentDidMount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
var node = findDOMNode(ccScrollArea);
node.scrollTop = node.scrollHeight;
componentWillUnmount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
componentWillUpdate() {

4
bigbluebutton-html5/imports/ui/components/media/styles.scss
View File

@ -4,7 +4,9 @@
position: relative;
display: flex;
flex: 2;
overflow: hidden;
align-items: center;
justify-content: center;
overflow: auto;
}
%ratio {

10
bigbluebutton-html5/imports/ui/components/polling/component.jsx
View File

@ -7,6 +7,16 @@ export default class PollingComponent extends React.Component {
super(props);
}
componentDidMount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
componentWillUnmount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
getStyles() {
const number = this.props.poll.answers.length + 1;
const buttonStyle =

113
bigbluebutton-html5/imports/ui/components/presentation/component.jsx
View File

@ -12,18 +12,91 @@ import WhiteboardOverlayContainer from '/imports/ui/components/whiteboard/whiteb
export default class PresentationArea extends React.Component {
constructor(props) {
super(props);
this.state = {
paperWidth: 0,
paperHeight: 0,
showSlide: false,
};
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
componentDidMount() {
var fn = setTimeout(this.handleResize.bind(this), 0);
window.addEventListener('resize', () => {
setTimeout(this.handleResize.bind(this), 0);
});
this.setState({
paperHeight: this.refs.presentationPaper.parentNode.clientHeight,
paperWidth: this.refs.presentationPaper.parentNode.clientWidth,
showSlide: true,
});
}
calculateSize() {
let originalWidth;
let originalHeight;
let adjustedWidth;
let adjustedHeight;
originalWidth = this.props.currentSlide.slide.width;
originalHeight = this.props.currentSlide.slide.height;
//Slide has a portrait orientation
if (originalWidth <= originalHeight) {
adjustedWidth = this.state.paperHeight * originalWidth / originalHeight;
if (this.state.paperWidth < adjustedWidth) {
adjustedHeight = this.state.paperHeight * this.state.paperWidth / adjustedWidth;
adjustedWidth = this.state.paperWidth;
} else {
adjustedHeight = this.state.paperHeight;
}
//Slide has a landscape orientation
} else {
adjustedHeight = this.state.paperWidth * originalHeight / originalWidth;
if (this.state.paperHeight < adjustedHeight) {
adjustedWidth = this.state.paperWidth * this.state.paperHeight / adjustedHeight;
adjustedHeight = this.state.paperHeight;
} else {
adjustedWidth = this.state.paperWidth;
}
}
return {
width: adjustedWidth,
height: adjustedHeight,
};
}
handleResize() {
this.setState({
paperHeight: this.refs.presentationPaper.clientHeight,
paperWidth: this.refs.presentationPaper.clientWidth,
});
}
renderPresentationArea() {
let slideObj = this.props.currentSlide;
if (this.props.currentSlide) {
slideObj = this.props.currentSlide.slide;
let x = -slideObj.x_offset * 2 * slideObj.width / 100;
let y = -slideObj.y_offset * 2 * slideObj.height / 100;
let viewBoxWidth = slideObj.width * slideObj.width_ratio / 100;
let viewBoxHeight = slideObj.height * slideObj.height_ratio / 100;
let adjustedSizes = this.calculateSize();
let slideObj = this.props.currentSlide.slide;
let x = -slideObj.x_offset * 2 * adjustedSizes.width / 100;
let y = -slideObj.y_offset * 2 * adjustedSizes.height / 100;
let viewBoxWidth = adjustedSizes.width * slideObj.width_ratio / 100;
let viewBoxHeight = adjustedSizes.height * slideObj.height_ratio / 100;
return (
<div
style={{
width: adjustedSizes.width,
height: adjustedSizes.height,
WebkitTransition: 'width 0.2s', /* Safari */
transition: 'width 0.2s',
WebkitTransition: 'height 0.2s', /* Safari */
transition: 'height 0.2s',
}}
>
<ReactCSSTransitionGroup
transitionName={ {
enter: styles.enter,
@ -41,10 +114,7 @@ export default class PresentationArea extends React.Component {
<svg
viewBox={`${x} ${y} ${viewBoxWidth} ${viewBoxHeight}`}
version="1.1"
//it's supposed to be here in theory
//but now it's ignored by all the browsers and it's not supported by React
//xmlNS="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
className={styles.svgStyles}
key={slideObj.id}
>
@ -54,10 +124,15 @@ export default class PresentationArea extends React.Component {
</clipPath>
</defs>
<g clipPath="url(#viewBox)">
<Slide id="slideComponent" currentSlide={this.props.currentSlide}/>
<Slide
id="slideComponent"
currentSlide={this.props.currentSlide}
paperWidth={adjustedSizes.width}
paperHeight={adjustedSizes.height}
/>
<ShapeGroupContainer
width = {slideObj.width}
height = {slideObj.height}
width = {adjustedSizes.width}
height = {adjustedSizes.height}
whiteboardId = {slideObj.id}
/>
{this.props.cursor ?
@ -84,6 +159,7 @@ export default class PresentationArea extends React.Component {
: null }
</svg>
</ReactCSSTransitionGroup>
</div>
);
} else {
return null;
@ -106,11 +182,14 @@ export default class PresentationArea extends React.Component {
render() {
return (
<div className={styles.presentationContainer}>
<div className={styles.presentationWrapper}>
<div className={styles.presentationPaper}>
{this.renderPresentationArea()}
<div
ref="presentationPaper"
className={styles.presentationPaper}
>
{this.state.showSlide ?
this.renderPresentationArea()
: null }
</div>
</div>
<PollingContainer />
{this.renderPresentationToolbar()}
</div>

10
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
View File

@ -21,6 +21,16 @@ class PresentationToolbar extends Component {
this.handleValuesChange = this.handleValuesChange.bind(this);
}
componentDidMount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
componentWillUnmount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
handleValuesChange(event) {
this.setState({ sliderValue: event.target.value });
}

16
bigbluebutton-html5/imports/ui/components/presentation/slide/component.jsx
View File

@ -9,20 +9,24 @@ export default class Slide extends React.Component {
return (
<g>
{this.props.currentSlide ?
//some pdfs lose a white background color during the conversion to svg
//their background color is transparent
//that's why we have a white rectangle covering the whole slide area by default
<g>
<rect
x="0"
y="0"
width={this.props.currentSlide.slide.width}
height={this.props.currentSlide.slide.height}
x="1"
y="1"
width={this.props.paperWidth-2}
height={this.props.paperHeight-2}
fill="white"
>
</rect>
<image x="0" y="0"
width={this.props.currentSlide.slide.width}
height={this.props.currentSlide.slide.height}
width={this.props.paperWidth}
height={this.props.paperHeight}
xlinkHref={this.props.currentSlide.slide.img_uri}
strokeWidth="0.8"
style={{ WebkitTapHighlightColor: 'transparent' }}
>
</image>
</g>

20
bigbluebutton-html5/imports/ui/components/presentation/styles.scss
View File

@ -19,10 +19,14 @@
}
.presentationPaper {
position: absolute;
display: block;
width: 100%;
height: 100%;
order: 1;
display: flex;
align-items: center;
justify-content: center;
height: calc(100% - 1px);
width:100%;
overflow: hidden;
position: relative;
}
.svgStyles {
@ -39,11 +43,3 @@
height: 100%;
width: 100%;
}
.presentationWrapper {
order: 1;
width: 100%;
height: 100%;
display: block;
position: relative;
}

10
bigbluebutton-html5/imports/ui/components/user-list/component.jsx
View File

@ -33,6 +33,16 @@ class UserList extends Component {
};
}
componentDidMount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
componentWillUnmount() {
//to let the whiteboard know that the presentation area's size has changed
window.dispatchEvent(new Event('resize'));
}
render() {
return (
<div className={styles.userList}>