diff --git a/bigbluebutton-html5/imports/locales/en.json b/bigbluebutton-html5/imports/locales/en.json
index 60ebcd92cb7bcae24acfb17e22cc6f8fb8f5ab96..79e379cfa176ff9fcdeae311bdd17d508f2a0893 100755
--- a/bigbluebutton-html5/imports/locales/en.json
+++ b/bigbluebutton-html5/imports/locales/en.json
@@ -13,18 +13,18 @@
"app.chat.partnerDisconnected": "{name} has left the meeting",
"app.chat.moreMessages": "More messages below",
"app.kickMessage": "You have been kicked out of the meeting",
- "app.whiteboard.slideControls.prevSlideLabel": "Previous slide",
- "app.whiteboard.slideControls.prevSlideDescrip": "Change the presentation to the previous slide",
- "app.whiteboard.slideControls.nextSlideLabel": "Next slide",
- "app.whiteboard.slideControls.nextSlideDescrip": "Change the presentation to the next slide",
- "app.whiteboard.slideControls.skipSlideLabel": "Skip slide",
- "app.whiteboard.slideControls.skipSlideDescrip": "Change the presentation to a specific slide",
- "app.whiteboard.slideControls.fitWidthLabel": "Fit to width",
- "app.whiteboard.slideControls.fitWidthDescrip": "Display the whole width of the slide",
- "app.whiteboard.slideControls.fitScreenLabel": "Fit to screen",
- "app.whiteboard.slideControls.fitScreenDescrip": "Display the whole slide",
- "app.whiteboard.slideControls.zoomLabel": "Zoom",
- "app.whiteboard.slideControls.zoomDescrip": "Change the zoom level of the presentation",
+ "app.presentation.presentationToolbar.prevSlideLabel": "Previous slide",
+ "app.presentation.presentationToolbar.prevSlideDescrip": "Change the presentation to the previous slide",
+ "app.presentation.presentationToolbar.nextSlideLabel": "Next slide",
+ "app.presentation.presentationToolbar.nextSlideDescrip": "Change the presentation to the next slide",
+ "app.presentation.presentationToolbar.skipSlideLabel": "Skip slide",
+ "app.presentation.presentationToolbar.skipSlideDescrip": "Change the presentation to a specific slide",
+ "app.presentation.presentationToolbar.fitWidthLabel": "Fit to width",
+ "app.presentation.presentationToolbar.fitWidthDescrip": "Display the whole width of the slide",
+ "app.presentation.presentationToolbar.fitScreenLabel": "Fit to screen",
+ "app.presentation.presentationToolbar.fitScreenDescrip": "Display the whole slide",
+ "app.presentation.presentationToolbar.zoomLabel": "Zoom",
+ "app.presentation.presentationToolbar.zoomDescrip": "Change the zoom level of the presentation",
"app.failedMessage": "Apologies, trouble connecting to the server.",
"app.connectingMessage": "Connecting...",
"app.waitingMessage": "Disconnected. Trying to reconnect in {seconds} seconds...",
@@ -109,8 +109,5 @@
"app.audio.audioSettings.speakerSourceLabel": "Speaker source",
"app.audio.audioSettings.microphoneStreamLabel": "Your audio stream volume",
"app.audio.listenOnly.backLabel": "Back",
- "app.audio.listenOnly.closeLabel": "Close",
- "app.presenterControls.previousSlideLabel": "Previous Slide",
- "app.presenterControls.nextSlideLabel": "Next Slide"
-
+ "app.audio.listenOnly.closeLabel": "Close"
}
diff --git a/bigbluebutton-html5/imports/ui/components/media/container.jsx b/bigbluebutton-html5/imports/ui/components/media/container.jsx
index 1b601a5fff773eaf50f9637e399d4ab42ff676fc..ff54d536f3b96858c9e8533f67ae77d83b60c0a7 100755
--- a/bigbluebutton-html5/imports/ui/components/media/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/container.jsx
@@ -3,13 +3,13 @@ import { createContainer } from 'meteor/react-meteor-data';
import Media from './component';
import MediaService from './service';
import Button from '../button/component';
-import WhiteboardContainer from '../whiteboard/container';
+import PresentationAreaContainer from '../presentation/container';
import VideoDockContainer from '../video-dock/container';
-import DefaultContent from '../whiteboard/default-content/component';
+import DefaultContent from '../presentation/default-content/component';
const defaultProps = {
overlay: null, //<VideoDockContainer/>,
- content: <WhiteboardContainer/>,
+ content: <PresentationAreaContainer/>,
defaultContent: <DefaultContent />,
};
diff --git a/bigbluebutton-html5/imports/ui/components/polling/component.jsx b/bigbluebutton-html5/imports/ui/components/polling/component.jsx
index 606ecd432b49bcf0e65d0361bfa9016e539cb9d2..210f03cf1561c11c66acba94831847b91137d4cd 100755
--- a/bigbluebutton-html5/imports/ui/components/polling/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/polling/component.jsx
@@ -31,13 +31,16 @@ export default class PollingComponent extends React.Component {
</p>
</div>
{poll.answers.map((pollAnswer, index) =>
- <div style={calculatedStyles} className={styles.pollButtonWrapper}>
+ <div
+ key={index}
+ style={calculatedStyles}
+ className={styles.pollButtonWrapper}
+ >
<Button
className={styles.pollingButton}
label={pollAnswer.key}
size="lg"
color="primary"
- key={index}
onClick={() => this.props.handleVote(poll.pollId, pollAnswer)}
aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
similarity index 72%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
rename to bigbluebutton-html5/imports/ui/components/presentation/component.jsx
index bde2509d8974d9588ab856ac988e3b20953390b4..3a0787884d7b1213f2b63ecd885823720da6d31d 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
@@ -1,19 +1,18 @@
import React, { PropTypes } from 'react';
-import WhiteboardShapeModel from './shape-factory/component.jsx';
+import ShapeGroupContainer from '../whiteboard/shape-group/container.jsx';
import Cursor from './cursor/component.jsx';
-import SlideControlsContainer from './slide-controls/container.jsx'; //I added
-import { createContainer } from 'meteor/react-meteor-data';
+import PresentationToolbarContainer from './presentation-toolbar/container.jsx';
import Slide from './slide/component.jsx';
import styles from './styles.scss';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import PollingContainer from '/imports/ui/components/polling/container';
-export default class Whiteboard extends React.Component {
+export default class PresentationArea extends React.Component {
constructor(props) {
super(props);
}
- renderWhiteboard() {
+ renderPresentationArea() {
let slideObj = this.props.currentSlide;
if (this.props.currentSlide) {
@@ -54,17 +53,11 @@ export default class Whiteboard extends React.Component {
</defs>
<g clipPath="url(#viewBox)">
<Slide id="slideComponent" currentSlide={this.props.currentSlide}/>
- {this.props.shapes ? this.props.shapes.map((shape) =>
- <WhiteboardShapeModel
- shape={shape.shape}
- key={shape.shape.id}
- slideWidth = {slideObj.width}
- slideHeight = {slideObj.height}
- widthRatio={slideObj.width_ratio}
- heightRatio={slideObj.height_ratio}
- />
- )
- : null }
+ <ShapeGroupContainer
+ width = {slideObj.width}
+ height = {slideObj.height}
+ whiteboardId = {slideObj.id}
+ />
{this.props.cursor ?
<Cursor
viewBoxWidth={viewBoxWidth}
@@ -85,10 +78,10 @@ export default class Whiteboard extends React.Component {
}
}
- renderSlideControlsContainer() {
+ renderPresentationToolbar() {
if (this.props.currentSlide) {
return (
- <SlideControlsContainer
+ <PresentationToolbarContainer
currentSlideNum={this.props.currentSlide.slide.num}
presentationId={this.props.currentSlide.presentationId}
/>
@@ -100,20 +93,20 @@ export default class Whiteboard extends React.Component {
render() {
return (
- <div className={styles.whiteboardContainer}>
- <div className={styles.whiteboardWrapper}>
- <div className={styles.whiteboardPaper}>
- {this.renderWhiteboard()}
+ <div className={styles.presentationContainer}>
+ <div className={styles.presentationWrapper}>
+ <div className={styles.presentationPaper}>
+ {this.renderPresentationArea()}
</div>
</div>
<PollingContainer />
- {this.renderSlideControlsContainer()}
+ {this.renderPresentationToolbar()}
</div>
);
}
}
-Whiteboard.defaultProps = {
+PresentationArea.defaultProps = {
svgProps: {
},
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx
new file mode 100755
index 0000000000000000000000000000000000000000..6c1e04b2da6226c3b9e523d280f13df9ac1b1dd3
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx
@@ -0,0 +1,24 @@
+import React, { Component, PropTypes } from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+import PresentationAreaService from './service';
+import PresentationArea from './component';
+
+class PresentationAreaContainer extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+ <PresentationArea {...this.props}>
+ {this.props.children}
+ </PresentationArea>
+ );
+ }
+}
+
+export default createContainer(() => ({
+ currentSlide: PresentationAreaService.getCurrentSlide(),
+ cursor: PresentationAreaService.getCurrentCursor(),
+ userIsPresenter: PresentationAreaService.isPresenter(),
+}), PresentationAreaContainer);
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/cursor/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx
similarity index 95%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/cursor/component.jsx
rename to bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx
index 7dff0c75f5093751d6d0ebfcec6d02cbea091e2c..6f843914778affa84afc398299386bb679b2671e 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/cursor/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx
@@ -1,5 +1,4 @@
import React, { Component, PropTypes } from 'react';
-import WhiteboardService from '/imports/ui/components/whiteboard/service.js';
const propTypes = {
//Width of the view box
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/default-content/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/default-content/component.jsx
similarity index 100%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/default-content/component.jsx
rename to bigbluebutton-html5/imports/ui/components/presentation/default-content/component.jsx
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/default-content/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss
similarity index 100%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/default-content/styles.scss
rename to bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
similarity index 86%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/component.jsx
rename to bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
index 2dbdec06bcba96c713737867bbb382a472ec1030..d418b8e583c5646f51c3a0a0fa7b233ced343873 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
@@ -6,14 +6,14 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
const intlMessages = defineMessages({
previousSlideLabel: {
- id: 'app.presenterControls.previousSlideLabel',
+ id: 'app.presentation.presentationToolbar.prevSlideLabel',
},
nextSlideLabel: {
- id: 'app.presenterControls.nextSlideLabel',
+ id: 'app.presentation.presentationToolbar.nextSlideLabel',
},
});
-class SlideControls extends Component {
+class PresentationToolbar extends Component {
constructor(props) {
super(props);
@@ -61,7 +61,7 @@ class SlideControls extends Component {
} = this.props;
return (
- <div id="slideControlsWrapper" className={styles.slideControlsWrapper}>
+ <div id="presentationToolbarWrapper" className={styles.presentationToolbarWrapper}>
{this.renderAriaLabelsDescs()}
{/*Previous Slide button*/}
@@ -167,14 +167,14 @@ class SlideControls extends Component {
{/*Previous Slide button aria*/}
<div id="prevSlideLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.prevSlideLabel"
+ id="app.presentation.presentationToolbar.prevSlideLabel"
description="Aria label for when switching to previous slide"
defaultMessage="Previous slide"
/>
</div>
<div id="prevSlideDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.prevSlideDescrip"
+ id="app.presentation.presentationToolbar.prevSlideDescrip"
description="Aria description for when switching to previous slide"
defaultMessage="Change the presentation to the previous slide"
/>
@@ -182,14 +182,14 @@ class SlideControls extends Component {
{/*Next Slide button aria*/}
<div id="nextSlideLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.nextSlideLabel"
+ id="app.presentation.presentationToolbar.nextSlideLabel"
description="Aria label for when switching to next slide"
defaultMessage="Next slide"
/>
</div>
<div id="nextSlideDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.nextSlideDescrip"
+ id="app.presentation.presentationToolbar.nextSlideDescrip"
description="Aria description for when switching to next slide"
defaultMessage="Change the presentation to the next slide"
/>
@@ -197,14 +197,14 @@ class SlideControls extends Component {
{/*Skip Slide drop down aria*/}
<div id="skipSlideLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.skipSlideLabel"
+ id="app.presentation.presentationToolbar.skipSlideLabel"
description="Aria label for when switching to a specific slide"
defaultMessage="Skip slide"
/>
</div>
<div id="skipSlideDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.skipSlideDescrip"
+ id="app.presentation.presentationToolbar.skipSlideDescrip"
description="Aria description for when switching to a specific slide"
defaultMessage="Change the presentation to a specific slide"
/>
@@ -212,14 +212,14 @@ class SlideControls extends Component {
{/*Fit to width button aria*/}
<div id="fitWidthLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.fitWidthLabel"
+ id="app.presentation.presentationToolbar.fitWidthLabel"
description="Aria description to display the whole width of the slide"
defaultMessage="Fit to width"
/>
</div>
<div id="fitWidthDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.fitWidthDescrip"
+ id="app.presentation.presentationToolbar.fitWidthDescrip"
description="Aria description to display the whole width of the slide"
defaultMessage="Display the whole width of the slide"
/>
@@ -227,14 +227,14 @@ class SlideControls extends Component {
{/*Fit to screen button aria*/}
<div id="fitScreenLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.fitScreenLabel"
+ id="app.presentation.presentationToolbar.fitScreenLabel"
description="Aria label to display the whole slide"
defaultMessage="Fit to screen"
/>
</div>
<div id="fitScreenDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.fitScreenDescrip"
+ id="app.presentation.presentationToolbar.fitScreenDescrip"
description="Aria label to display the whole slide"
defaultMessage="Display the whole slide"
/>
@@ -242,14 +242,14 @@ class SlideControls extends Component {
{/*Zoom slider aria*/}
<div id="zoomLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.zoomLabel"
+ id="app.presentation.presentationToolbar.zoomLabel"
description="Aria label to zoom presentation"
defaultMessage="Zoom"
/>
</div>
<div id="zoomDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.zoomDescrip"
+ id="app.presentation.presentationToolbar.zoomDescrip"
description="Aria label to zoom presentation"
defaultMessage="Change the zoom level of the presentation"
/>
@@ -259,4 +259,4 @@ class SlideControls extends Component {
}
}
-export default injectIntl(SlideControls);
+export default injectIntl(PresentationToolbar);
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx
similarity index 68%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/container.jsx
rename to bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx
index 43b31645e7e37eff4d588f25a8940b53df014d63..306b1a4194520751b131ee5c948850f38329c94a 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx
@@ -1,8 +1,8 @@
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
-import SlideControlsService from './service';
-import SlideControls from './component.jsx';
+import PresentationToolbarService from './service';
+import PresentationToolbar from './component.jsx';
const propTypes = {
// Number of current slide being displayed
@@ -18,7 +18,7 @@ const propTypes = {
numberOfSlides: PropTypes.number.isRequired,
};
-class SlideControlsContainer extends React.Component {
+class PresentationToolbarContainer extends React.Component {
constructor(props) {
super(props);
}
@@ -35,7 +35,7 @@ class SlideControlsContainer extends React.Component {
if (userIsPresenter) {
// Only show controls if user is presenter
return (
- <SlideControls
+ <PresentationToolbar
currentSlideNum={currentSlideNum}
numberOfSlides={numberOfSlides}
actions={actions}
@@ -48,7 +48,7 @@ class SlideControlsContainer extends React.Component {
}
export default createContainer((params) => {
- const data = SlideControlsService.getSlideData(params);
+ const data = PresentationToolbarService.getSlideData(params);
const {
userIsPresenter,
@@ -60,13 +60,13 @@ export default createContainer((params) => {
numberOfSlides,
actions: {
nextSlideHandler: () =>
- SlideControlsService.nextSlide(params.currentSlideNum, numberOfSlides),
+ PresentationToolbarService.nextSlide(params.currentSlideNum, numberOfSlides),
previousSlideHandler: () =>
- SlideControlsService.previousSlide(params.currentSlideNum, numberOfSlides),
+ PresentationToolbarService.previousSlide(params.currentSlideNum, numberOfSlides),
skipToSlideHandler: (event) =>
- SlideControlsService.skipToSlide(event),
+ PresentationToolbarService.skipToSlide(event),
},
};
-}, SlideControlsContainer);
+}, PresentationToolbarContainer);
-SlideControlsContainer.propTypes = propTypes;
+PresentationToolbarContainer.propTypes = propTypes;
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/service.js b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/service.js
similarity index 97%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/service.js
rename to bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/service.js
index 56c09c2153d103c44cbbacc3c13eb20301931665..83095e6a49fca5eab80b4d6703c0b08e8f751996 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/service.js
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/service.js
@@ -1,4 +1,3 @@
-import SlideControls from './component.jsx';
import AuthSingleton from '/imports/ui/services/auth/index.js';
import Users from '/imports/api/users';
import Slides from '/imports/api/slides';
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
similarity index 94%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/styles.scss
rename to bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
index 4beef39e92d7b62f635f195ab1523c0539c61557..3b961be57bbafd6d35dfb39ee9e52e823ddcf535 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/slide-controls/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
@@ -4,7 +4,7 @@
$controls-color: #212121 !default;
$controls-background: #F0F2F6 !default;
-.slideControlsWrapper,
+.presentationToolbarWrapper,
.zoomWrapper {
order: 2;
padding: $line-height-computed / 2;
@@ -13,7 +13,7 @@ $controls-background: #F0F2F6 !default;
align-items: center;
}
-.slideControlsWrapper {
+.presentationToolbarWrapper {
flex: 1;
justify-content: center;
width: 100%;
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/service.js b/bigbluebutton-html5/imports/ui/components/presentation/service.js
similarity index 77%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/service.js
rename to bigbluebutton-html5/imports/ui/components/presentation/service.js
index 3bad32391d5a9ae2f02d9dfc12f80e9c3d81e1d9..48ddef1c12f2092ef30b97031b1d088d8796da77 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/service.js
+++ b/bigbluebutton-html5/imports/ui/components/presentation/service.js
@@ -1,5 +1,4 @@
import Presentations from '/imports/api/presentations';
-import Shapes from '/imports/api/shapes';
import Slides from '/imports/api/slides';
import Cursor from '/imports/api/cursor';
import Users from '/imports/api/users';
@@ -22,18 +21,6 @@ const getCurrentSlide = () => {
});
};
-const getCurrentShapes = () => {
- const currentSlide = getCurrentSlide();
-
- if (!currentSlide) {
- return null;
- }
-
- return Shapes.find({
- whiteboardId: currentSlide.slide.id,
- }).fetch();
-};
-
const getCurrentCursor = () => Cursor.findOne({});
const isPresenter = () => {
@@ -49,7 +36,6 @@ const isPresenter = () => {
export default {
getCurrentPresentation,
getCurrentSlide,
- getCurrentShapes,
getCurrentCursor,
isPresenter,
};
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/slide/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/slide/component.jsx
similarity index 100%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/slide/component.jsx
rename to bigbluebutton-html5/imports/ui/components/presentation/slide/component.jsx
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/styles.scss
similarity index 89%
rename from bigbluebutton-html5/imports/ui/components/whiteboard/styles.scss
rename to bigbluebutton-html5/imports/ui/components/presentation/styles.scss
index f6befe50140fba2da4e81d3fef8cf9b0122856ba..3ef3a39e985273791b8411e22b86ec011c43a154 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/styles.scss
@@ -18,7 +18,7 @@
transition: opacity 400ms ease-in;
}
-.whiteboardPaper {
+.presentationPaper {
position: absolute;
display: block;
width: 100%;
@@ -33,14 +33,14 @@
max-height: 100%;
}
-.whiteboardContainer {
+.presentationContainer {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
-.whiteboardWrapper {
+.presentationWrapper {
order: 1;
width: 100%;
height: 100%;
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
deleted file mode 100755
index 3f26411e353f320913c7f3fcabfaf8bc6e23535d..0000000000000000000000000000000000000000
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import { createContainer } from 'meteor/react-meteor-data';
-import WhiteboardService from './service';
-import Whiteboard from './component';
-
-class WhiteboardContainer extends Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- return (
- <Whiteboard {...this.props}>
- {this.props.children}
- </Whiteboard>
- );
- }
-}
-
-export default createContainer(() => ({
- currentSlide: WhiteboardService.getCurrentSlide(),
- shapes: WhiteboardService.getCurrentShapes(),
- cursor: WhiteboardService.getCurrentCursor(),
- userIsPresenter: WhiteboardService.isPresenter(),
-}), WhiteboardContainer);
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/component.jsx
new file mode 100755
index 0000000000000000000000000000000000000000..e9fe7890104dcc30d93029b56225d9921cdff699
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/component.jsx
@@ -0,0 +1,41 @@
+import React, { Component, PropTypes } from 'react';
+import WhiteboardShapeModel from '../shape-factory/component';
+
+const propTypes = {
+ // initial width and height of the slide are required to calculate the coordinates for each shape
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+
+ //array of shapes, optional
+ shapes: React.PropTypes.array,
+};
+
+export default class ShapeGroup extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ const {
+ shapes,
+ width,
+ height,
+ } = this.props;
+
+ return (
+ <g>
+ {shapes ? shapes.map((shape) =>
+ <WhiteboardShapeModel
+ shape={shape.shape}
+ key={shape.shape.id}
+ slideWidth = {width}
+ slideHeight = {height}
+ />
+ )
+ : null }
+ </g>
+ );
+ }
+}
+
+ShapeGroup.propTypes = propTypes;
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/container.jsx
new file mode 100755
index 0000000000000000000000000000000000000000..dc3d226c139e6d5160ed547df23c854647978b68
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/container.jsx
@@ -0,0 +1,46 @@
+import React, { Component, PropTypes } from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+
+import ShapeGroupService from './service';
+import ShapeGroup from './component';
+
+const propTypes = {
+ // the id is required to fetch the shapes
+ whiteboardId: PropTypes.string.isRequired,
+
+ // initial width and height of the slide are required to calculate the coordinates for each shape
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+
+ //array of shapes, optional
+ shapes: React.PropTypes.array,
+};
+
+class ShapeGroupContainer extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+ <ShapeGroup
+ shapes={this.props.shapes}
+ width={this.props.width}
+ height={this.props.height}
+ />
+ );
+ }
+}
+
+export default createContainer((params) => {
+ const { whiteboardId, width, height } = params;
+ const shapes = ShapeGroupService.getCurrentShapes(whiteboardId);
+
+ return {
+ shapes,
+ width,
+ height,
+ };
+}, ShapeGroupContainer);
+
+ShapeGroupContainer.propTypes = propTypes;
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/service.js
new file mode 100755
index 0000000000000000000000000000000000000000..bc22b525c6792132060cd370721bdcbbc018de4c
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/service.js
@@ -0,0 +1,16 @@
+import Shapes from '/imports/api/shapes';
+
+const getCurrentShapes = (whiteboardId) => {
+
+ if (!whiteboardId) {
+ return null;
+ }
+
+ return Shapes.find({
+ whiteboardId: whiteboardId,
+ }).fetch();
+};
+
+export default {
+ getCurrentShapes,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx
new file mode 100755
index 0000000000000000000000000000000000000000..8b137891791fe96927ad78e64b0aad7bded08bdc
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx
@@ -0,0 +1 @@
+
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx
new file mode 100755
index 0000000000000000000000000000000000000000..8b137891791fe96927ad78e64b0aad7bded08bdc
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx
@@ -0,0 +1 @@
+