Merge pull request #172 from bigbluebutton/develop

chore: update from develop

README.md

@@ -15,6 +15,9 @@ https://<domain>/playback/presentation/2.3/<recordId>
 
 ## URL query strings
 
+- frequency:
+  - `f=<value>`: renders per second (e.g., 5)
+
 - layout:
   - `l=content`: focus on content
   - `l=disabled`: disabled interactive elements
@@ -53,14 +56,15 @@ https://<domain>/playback/presentation/2.3/<recordId>
   - `thumbnails`
 
 - locale:
-  - `default`: fallback [`ar`|`de`|`en`|`es`|`fr`|`it`|`ja`|`pt`|`ru`|`tr`]
+  - `default`: fallback [`en`]
 
 - player: primary media configuration
   - `rps`: renders per second
   - `rates`: speed rates
 
 - shortcuts: alt + shift
   - `fullscreen`: `K`
+  - `play/pause`: `Enter`
   - `section`: `L`
   - `seek`:
     - `backward`: `ArrowLeft`

package.json

@@ -5,14 +5,14 @@
   "dependencies": {
     "classnames": "^2.3.1",
     "linkifyjs": "^2.1.9",
-    "node-sass": "^6.0.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-intl": "^5.20.12",
+    "react-intl": "^5.23.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
-    "video.js": "^7.15.4",
+    "sass": "^1.49.0",
+    "video.js": "^7.17.0",
     "xml2js": "^0.4.23"
   },
   "scripts": {

src/components/bars/top/title.js

@@ -6,7 +6,10 @@ import {
   FormattedDate,
 } from 'react-intl';
 import cx from 'classnames';
-import { controls as config } from 'config';
+import {
+  controls as config,
+  date,
+} from 'config';
 import { handleOnEnterPress } from 'utils/data/handlers';
 import storage from 'utils/data/storage';
 import layout from 'utils/layout';
@@ -25,14 +28,17 @@ const defaultProps = { openAbout: () => {} };
 
 const Title = ({ openAbout }) => {
   const intl = useIntl();
-  const date = <FormattedDate value={new Date(storage.metadata.start)} />;
+  const start = <FormattedDate value={new Date(storage.metadata.start)} />;
 
   const interactive = layout.control && config.about;
   if (!interactive) {
 
     return (
       <span className="title">
-        {storage.metadata.name} - {date}
+        {storage.metadata.name}
+        {date.enabled ? (
+          <> - {start}</>
+        ) : null}
       </span>
     );
   }
@@ -45,7 +51,10 @@ const Title = ({ openAbout }) => {
       onKeyPress={event => handleOnEnterPress(event, openAbout)}
       tabIndex="0"
     >
-      {storage.metadata.name} - {date}
+      {storage.metadata.name}
+      {date.enabled ? (
+        <> - {start}</>
+      ) : null}
     </span>
   );
 };

src/components/modals/about/body.js → src/components/modals/about/body/data/index.js

@@ -7,10 +7,10 @@ import {
 import storage from 'utils/data/storage';
 import './index.scss';
 
-const Body = () => {
+const Data = () => {
 
   return (
-    <div className="about-body">
+    <div className="body-data">
       <Item
         icon={ID.USERS}
         key={ID.USERS}
@@ -27,4 +27,4 @@ const Body = () => {
   );
 };
 
-export default Body;
+export default Data;

src/components/modals/about/body/data/index.scss

@@ -0,0 +1,19 @@
+@import 'src/styles/sizes';
+
+.body-data {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+
+  .item {
+    box-sizing: border-box;
+    display: grid;
+    font-size: large;
+    font-weight: var(--font-weight-semi-bold);
+    grid-gap: $padding-extra-small;
+    padding: $padding-small $padding-extra-small;
+  }
+}

src/components/modals/about/item.js → src/components/modals/about/body/data/item.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from 'components/utils/icon';
-import './index.scss';
 
 const propTypes = {
   icon: PropTypes.string,

src/components/modals/about/body/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Data from './data';
+import Shortcuts from './shortcuts';
+import './index.scss';
+
+const Body = () => {
+
+  return (
+    <div className="about-body">
+      <Data />
+      <Shortcuts />
+    </div>
+  );
+};
+
+export default Body;

src/components/modals/about/body/index.scss

@@ -0,0 +1,11 @@
+.about-body {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.body-shortcuts {
+  display: flex;
+  width: 100%;
+}

src/components/modals/about/body/shortcuts/index.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  defineMessages,
+  useIntl,
+} from 'react-intl';
+import Key from './key';
+import { shortcuts as config } from 'config';
+import './index.scss';
+
+const SHORTCUTS = [
+  'fullscreen',
+  'play',
+  'section',
+  'seek.backward',
+  'seek.forward',
+  'skip.next',
+  'skip.previous',
+  'swap',
+];
+
+const getCode = (shortcut) => {
+  const path = shortcut.split('.');
+
+  let code = config[path[0]];
+  for (let i = 1; i < path.length; i++) {
+    code = code[path[i]];
+  }
+
+  return code;
+};
+
+const intlMessages = defineMessages({
+  title: {
+    id: 'player.about.modal.shortcuts.title',
+    description: 'Label for the about modal shortcuts title',
+  },
+  alt: {
+    id: 'player.about.modal.shortcuts.alt',
+    description: 'Label for the about modal shortcuts alt key',
+  },
+  shift: {
+    id: 'player.about.modal.shortcuts.shift',
+    description: 'Label for the about modal shortcuts shift key',
+  },
+  'fullscreen': {
+    id: 'player.about.modal.shortcuts.fullscreen',
+    description: 'Label for the about modal fullscreen shortcut',
+  },
+  'play': {
+    id: 'player.about.modal.shortcuts.play',
+    description: 'Label for the about modal play shortcut',
+  },
+  'section': {
+    id: 'player.about.modal.shortcuts.section',
+    description: 'Label for the about modal section shortcut',
+  },
+  'seek.backward': {
+    id: 'player.about.modal.shortcuts.seek.backward',
+    description: 'Label for the about modal seek backward shortcut',
+  },
+  'seek.forward': {
+    id: 'player.about.modal.shortcuts.seek.forward',
+    description: 'Label for the about modal seek forward shortcut',
+  },
+  'skip.next': {
+    id: 'player.about.modal.shortcuts.skip.next',
+    description: 'Label for the about modal skip next shortcut',
+  },
+  'skip.previous': {
+    id: 'player.about.modal.shortcuts.skip.previous',
+    description: 'Label for the about modal skip previous shortcut',
+  },
+  'swap': {
+    id: 'player.about.modal.shortcuts.swap',
+    description: 'Label for the about modal swap shortcut',
+  },
+});
+
+const Shortcuts = () => {
+  const intl = useIntl();
+
+  return (
+    <div className="body-shortcuts">
+      <div className="title">
+        {intl.formatMessage(intlMessages.title)}
+      </div>
+      <div className="content">
+        {SHORTCUTS.map(shortcut => {
+
+          return (
+            <div className="shortcut">
+              <div className="label">
+                {intl.formatMessage(intlMessages[shortcut])}
+              </div>
+              <div className="keys">
+                <Key code={intl.formatMessage(intlMessages.alt)} />
+                <Key code={intl.formatMessage(intlMessages.shift)} />
+                <Key code={getCode(shortcut)} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Shortcuts;

src/components/modals/about/body/shortcuts/index.scss

@@ -0,0 +1,50 @@
+@import 'src/styles/sizes';
+
+.body-shortcuts {
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    background-color: var(--secondary-highlight-color);
+    box-sizing: border-box;
+    display: flex;
+    font-weight: var(--font-weight-semi-bold);
+    justify-content: center;
+    padding: $padding-extra-small;
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  .content {
+    box-sizing: border-box;
+    display: flex;
+    font-size: small;
+    padding: $padding-extra-small;
+
+    .shortcut {
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      padding: $margin-extra-small 0;
+
+      .label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .keys {
+        display: flex;
+
+        .key {
+          background-color: var(--secondary-content-color);
+          color: var(--secondary-background-color);
+          font-size: xx-small;
+          margin: 0 $margin-extra-small;
+          padding: $border-width-extra-small $border-width;
+          text-transform: uppercase;
+        }
+      }
+    }
+  }
+}

src/components/modals/about/body/shortcuts/key.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './index.scss';
+
+const propTypes = { code: PropTypes.string };
+
+const defaultProps = { code: '' };
+
+const Key = ({ code }) => {
+
+  return (
+    <div className="key">
+      {code}
+    </div>
+  );
+};
+
+Key.propTypes = propTypes;
+Key.defaultProps = defaultProps;
+
+export default Key;

src/components/modals/about/header.js

@@ -3,6 +3,7 @@ import {
   FormattedDate,
   FormattedTime,
 } from 'react-intl';
+import { date } from 'config';
 import storage from 'utils/data/storage';
 import './index.scss';
 
@@ -14,17 +15,19 @@ const Header = () => {
   } = storage.metadata;
 
   const subtitle = [];
-  subtitle.push(
-    <FormattedDate
-      value={new Date(start)}
-      day="numeric"
-      month="long"
-      year="numeric"
-    />
-  );
+  if (date.enabled) {
+    subtitle.push(
+      <FormattedDate
+        value={new Date(start)}
+        day="numeric"
+        month="long"
+        year="numeric"
+      />
+    );
 
-  subtitle.push(<FormattedTime value={new Date(start)} />);
-  subtitle.push(<FormattedTime value={new Date(end)} />);
+    subtitle.push(<FormattedTime value={new Date(start)} />);
+    subtitle.push(<FormattedTime value={new Date(end)} />);
+  }
 
   return (
     <div className="about-header">