Merge pull request #4647 from Tainan404/translate-slide-option

Add localization for slides options

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

@@ -14,6 +14,10 @@ const intlMessages = defineMessages({
     id: 'app.presentation.presentationToolbar.nextSlideLabel',
     description: 'Next slide button label',
   },
+  goToSlide: {
+    id: 'app.presentation.presentationToolbar.goToSlide',
+    description: 'button for slide select',
+  },
 });
 
 class PresentationToolbar extends Component {
@@ -114,22 +118,6 @@ class PresentationToolbar extends Component {
     );
   }
 
-  static renderSkipSlideOpts(numberOfSlides) {
-    // Fill drop down menu with all the slides in presentation
-    const optionList = [];
-    for (let i = 1; i <= numberOfSlides; i += 1) {
-      optionList.push(
-        <option
-          value={i}
-          key={i}
-        >
-        Slide {i}
-        </option>,
-      );
-    }
-
-    return optionList;
-  }
 
   constructor(props) {
     super(props);
@@ -153,6 +141,24 @@ class PresentationToolbar extends Component {
       fitToScreenValue: 'not_implemented_yet',
     });
   }
+  renderSkipSlideOpts(numberOfSlides) {
+    // Fill drop down menu with all the slides in presentation
+    const { intl } = this.props;
+    const optionList = [];
+    for (let i = 1; i <= numberOfSlides; i += 1) {
+      optionList.push((
+        <option
+          value={i}
+          key={i}
+        >
+          {
+            intl.formatMessage(intlMessages.goToSlide, { 0: i })
+          }
+        </option>));
+    }
+
+    return optionList;
+  }
 
   render() {
     const {
@@ -170,9 +176,9 @@ class PresentationToolbar extends Component {
           aria-labelledby="prevSlideLabel"
           aria-describedby="prevSlideDesc"
           disabled={!(currentSlideNum > 1)}
-          color={'default'}
+          color="default"
-          icon={'left_arrow'}
+          icon="left_arrow"
-          size={'md'}
+          size="md"
           onClick={actions.previousSlideHandler}
           label={intl.formatMessage(intlMessages.previousSlideLabel)}
           hideLabel
@@ -189,16 +195,16 @@ class PresentationToolbar extends Component {
           onChange={actions.skipToSlideHandler}
           className={styles.skipSlide}
         >
-          {PresentationToolbar.renderSkipSlideOpts(numberOfSlides)}
+          {this.renderSkipSlideOpts(numberOfSlides)}
         </select>
         <Button
           role="button"
           aria-labelledby="nextSlideLabel"
           aria-describedby="nextSlideDesc"
           disabled={!(currentSlideNum < numberOfSlides)}
-          color={'default'}
+          color="default"
-          icon={'right_arrow'}
+          icon="right_arrow"
-          size={'md'}
+          size="md"
           onClick={actions.nextSlideHandler}
           label={intl.formatMessage(intlMessages.nextSlideLabel)}
           hideLabel
@@ -256,7 +262,6 @@ class PresentationToolbar extends Component {
       </div>
     );
   }
-
 }
 
 PresentationToolbar.propTypes = {

bigbluebutton-html5/private/locales/en.json

@@ -49,6 +49,7 @@
     "app.presentation.presentationToolbar.fitScreenDesc": "Display the whole slide",
     "app.presentation.presentationToolbar.zoomLabel": "Zoom",
     "app.presentation.presentationToolbar.zoomDesc": "Change the zoom level of the presentation",
+    "app.presentation.presentationToolbar.goToSlide":"Slide {0}",
     "app.presentationUploder.title": "Presentation",
     "app.presentationUploder.message": "As a presenter in BigBlueButton, you have the ability of uploading any office document or PDF file. We recommend for the best results, to please upload a PDF file.",
     "app.presentationUploder.confirmLabel": "Start",