diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx index 123b2fda29413bd9f3caf5bb893863c9c2c1ce19..19857d5c69b799fd6ad70a4fbbcd9021ea555574 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx @@ -31,7 +31,7 @@ const intlMessages = defineMessages({ class PresentationToolbar extends Component { static renderAriaLabelsDescs() { return ( - <div hidden > + <div hidden> {/* Previous Slide button aria */} <div id="prevSlideLabel"> <FormattedMessage @@ -140,25 +140,22 @@ class PresentationToolbar extends Component { } handleSkipToSlideChange(event) { - const requestedSlideNum = parseInt(event.target.value, 10); - this.props.actions.skipToSlideHandler(requestedSlideNum); + const { actions } = this.props; + const requestedSlideNum = Number.parseInt(event.target.value, 10); + actions.skipToSlideHandler(requestedSlideNum); } handleValuesChange(event) { + const { sliderValue } = this.state; this.setState( { sliderValue: event.target.value }, - () => this.handleZoom(this.state.sliderValue), + () => this.handleZoom(sliderValue), ); } - fitToScreenClickHandler() { - this.setState({ - fitToScreenValue: 'not_implemented_yet', - }); - } - change(value) { - this.props.zoomChanger(value); + const { zoomChanger } = this.props; + zoomChanger(value); } renderSkipSlideOpts(numberOfSlides) { @@ -184,14 +181,15 @@ class PresentationToolbar extends Component { const { currentSlideNum, numberOfSlides, + fitToWidthHandler, actions, intl, zoom, } = this.props; const BROWSER_RESULTS = browser(); - const isMobileBrowser = BROWSER_RESULTS.mobile || - BROWSER_RESULTS.os.includes('Android'); + const isMobileBrowser = BROWSER_RESULTS.mobile + || BROWSER_RESULTS.os.includes('Android'); return ( <div id="presentationToolbarWrapper" className={styles.presentationToolbarWrapper}> {PresentationToolbar.renderAriaLabelsDescs()} @@ -211,14 +209,17 @@ class PresentationToolbar extends Component { className={styles.prevSlide} /> <select - // <select> has an implicit role of listbox, no need to define role="listbox" explicitly + /* + <select> has an implicit role of listbox, no need to define + role="listbox" explicitly + */ id="skipSlide" aria-labelledby="skipSlideLabel" aria-describedby="skipSlideDesc" aria-live="polite" aria-relevant="all" value={currentSlideNum} - onChange={actions.skipToSlideHandler} + onChange={this.handleSkipToSlideChange} className={styles.skipSlideSelect} > {this.renderSkipSlideOpts(numberOfSlides)} @@ -239,16 +240,18 @@ class PresentationToolbar extends Component { </span> } { - !isMobileBrowser ? - <span className={styles.zoomWrapper}> - <ZoomTool - value={zoom} - change={this.change} - minBound={HUNDRED_PERCENT} - maxBound={MAX_PERCENT} - step={STEP} - /> - </span> + !isMobileBrowser + ? ( + <span className={styles.zoomWrapper}> + <ZoomTool + value={zoom} + change={this.change} + minBound={HUNDRED_PERCENT} + maxBound={MAX_PERCENT} + step={STEP} + /> + </span> + ) : null } <span className={styles.presentationControls}> @@ -260,7 +263,7 @@ class PresentationToolbar extends Component { icon="fit_to_width" size="md" circle={false} - onClick={this.props.fitToWidthHandler} + onClick={fitToWidthHandler} label={intl.formatMessage(intlMessages.fitToWidth)} hideLabel className={styles.skipSlide} diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx index f8a335a64c6edb005dcc31051fbfd86ca66fdcc4..62f9b0a5112775def5efe6d0c63ac4a89c2014c9 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx @@ -15,7 +15,7 @@ const PresentationToolbarContainer = (props) => { zoom, zoomChanger, fitToWidthHandler, - getSwapLayout + getSwapLayout, } = props; if (userIsPresenter && !getSwapLayout) { @@ -53,14 +53,24 @@ export default withTracker((params) => { zoom: params.zoom, zoomChanger: params.zoomChanger, actions: { - nextSlideHandler: () => - PresentationToolbarService.nextSlide(params.currentSlideNum, numberOfSlides, podId), - previousSlideHandler: () => - PresentationToolbarService.previousSlide(params.currentSlideNum, podId), - skipToSlideHandler: requestedSlideNum => - PresentationToolbarService.skipToSlide(requestedSlideNum, podId), - zoomSlideHandler: value => - PresentationToolbarService.zoomSlide(params.currentSlideNum, podId, value), + nextSlideHandler: () => PresentationToolbarService.nextSlide( + params.currentSlideNum, + numberOfSlides, + podId, + ), + previousSlideHandler: () => PresentationToolbarService.previousSlide( + params.currentSlideNum, + podId, + ), + skipToSlideHandler: requestedSlideNum => PresentationToolbarService.skipToSlide( + requestedSlideNum, + podId, + ), + zoomSlideHandler: value => PresentationToolbarService.zoomSlide( + params.currentSlideNum, + podId, + value, + ), }, }; })(PresentationToolbarContainer); diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/service.js b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/service.js index 6fade29e30d47e6014e8df0011bd18ff4a4d3852..4eccf1a01fc0a9c5d803bb7a1103f649af5c3b5c 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/service.js +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/service.js @@ -1,4 +1,3 @@ -import PresentationPods from '/imports/api/presentation-pods'; import Auth from '/imports/ui/services/auth'; import Slides from '/imports/api/slides'; import { makeCall } from '/imports/ui/services/api';