Merge pull request #26 from mconf/develop

chore: update from develop

README.md

@@ -56,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

@@ -1,18 +1,18 @@
 {
   "name": "bbb-playback",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "homepage": "/playback/presentation/2.3",
   "dependencies": {
     "classnames": "^2.3.1",
     "linkifyjs": "^2.1.9",
-    "node-sass": "^6.0.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-intl": "^5.20.12",
+    "react-intl": "^5.24.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
-    "video.js": "^7.15.4",
+    "sass": "^1.49.9",
+    "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/chat/index.scss

@@ -10,7 +10,7 @@
     font-size: small;
     height: 100%;
     position: relative;
-    width: 100%
+    width: 100%;
   }
 }
 

src/components/chat/messages/index.js

@@ -38,8 +38,10 @@ const Messages = ({
                 <span ref={node => setRef(node, index)}>
                   <UserMessage
                     active={active}
+                    emphasized={item.emphasized}
                     hyperlink={item.hyperlink}
                     initials={item.initials}
+                    moderator={item.moderator}
                     name={item.name}
                     text={item.message}
                     timestamp={timestamp}

src/components/chat/messages/index.scss

@@ -106,6 +106,10 @@
   .inactive {
     opacity: .5;
   }
+
+  .emphasized {
+    font-weight: var(--font-weight-semi-bold);
+  }
 }
 
 .poll-wrapper {

src/components/chat/messages/message.js

@@ -13,6 +13,7 @@ const propTypes = {
     PropTypes.node,
   ]),
   circle: PropTypes.bool,
+  emphasized: PropTypes.bool,
   icon: PropTypes.string,
   initials: PropTypes.string,
   name: PropTypes.string,
@@ -23,6 +24,7 @@ const defaultProps = {
   active: false,
   children: null,
   circle: false,
+  emphasized: false,
   icon: '',
   initials: '',
   name: '',
@@ -33,6 +35,7 @@ const Message = ({
   active,
   children,
   circle,
+  emphasized,
   icon,
   initials,
   name,
@@ -58,7 +61,7 @@ const Message = ({
           name={name}
           timestamp={timestamp}
         />
-        <div className={cx('text', { inactive: !active })}>
+        <div className={cx('text', { inactive: !active, emphasized })}>
           {children}
         </div>
       </div>

src/components/chat/messages/user/index.js

@@ -5,35 +5,42 @@ import Message from 'components/chat/messages/message';
 
 const propTypes = {
   active: PropTypes.bool,
+  emphasized: PropTypes.bool,
   hyperlink: PropTypes.bool,
   initials: PropTypes.string,
   name: PropTypes.string,
+  moderator: PropTypes.bool,
   text: PropTypes.string,
   timestamp: PropTypes.timestamp,
 };
 
 const defaultProps = {
   active: false,
+  emphasized: false,
   hyperlink: false,
   initials: '',
   name: '',
+  moderator: false,
   text: '',
   timestamp: 0,
 };
 
 const User = ({
   active,
+  emphasized,
   hyperlink,
   initials,
   name,
+  moderator,
   text,
   timestamp,
 }) => {
 
   return (
     <Message
       active={active}
-      circle
+      circle={!moderator}
+      emphasized={emphasized}
       initials={initials}
       name={name}
       timestamp={timestamp}

src/components/chat/messages/user/text.js

@@ -32,11 +32,7 @@ const Text = ({
     );
   }
 
-  return (
-    <React.Fragment>
-      {text}
-    </React.Fragment>
-  );
+  return <>{text}</>;
 };
 
 Text.propTypes = propTypes;

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,110 @@
+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="list">
+        <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>
+    </div>
+  );
+};
+
+export default Shortcuts;