Merge pull request bigbluebutton#48 from pedrobmarin/more-button

More button first version

src/components/bars/navigation.js

@@ -4,7 +4,18 @@ import Button from 'components/utils/button';
 import './index.scss';
 
 export default class NavigationBar extends PureComponent {
-  renderSectionToggle() {
+  renderMoreButton() {
+    const { toggleMore } = this.props;
+
+    return (
+      <Button
+        handleOnClick={toggleMore}
+        icon="vertical-more"
+      />
+    );
+  }
+
+  renderSectionButton() {
     const {
       section,
       toggleSection,
@@ -20,11 +31,11 @@ export default class NavigationBar extends PureComponent {
 
   renderTitle() {
     const {
-      epoch,
       name,
+      start,
     } = this.props;
 
-    const date = <FormattedDate value={new Date(epoch)} />;
+    const date = <FormattedDate value={new Date(start)} />;
 
     return (
       <span className="title">
@@ -39,12 +50,14 @@ export default class NavigationBar extends PureComponent {
     return (
       <div className="navigation-bar">
         <div className="left">
-          {control ? this.renderSectionToggle() : null}
+          {control ? this.renderSectionButton() : null}
         </div>
         <div className="center">
           {this.renderTitle()}
         </div>
-        <div className="right" />
+        <div className="right">
+          {control ? this.renderMoreButton() : null}
+        </div>
       </div>
     );
   }

src/components/more/index.js

@@ -0,0 +1,103 @@
+import React, { PureComponent } from 'react';
+import {
+  FormattedDate,
+  FormattedTime,
+} from 'react-intl';
+import Button from 'components/utils/button';
+import './index.scss';
+
+export default class More extends PureComponent {
+  renderDate(metadata) {
+    const date = <FormattedDate
+      value={new Date(metadata.start)}
+      day="numeric"
+      month="long"
+      year="numeric"
+    />;
+
+    const start = <FormattedTime value={new Date(metadata.start)} />
+    const end = <FormattedTime value={new Date(metadata.end)} />
+
+    return (
+      <div className="date">
+        <div className="item">
+          {date}
+        </div>
+        <div className="item">
+          {start}
+        </div>
+        <div className="item">
+          -
+        </div>
+        <div className="item">
+          {end}
+        </div>
+      </div>
+    );
+  }
+
+  renderItem(type, value) {
+    let element;
+    if (typeof value === 'boolean') {
+      element = <div className={value ? 'icon-checkmark' : 'icon-close'} />;
+    } else {
+      element = value;
+    }
+
+    return (
+      <div className="item">
+        <div className={`icon-${type}`} />
+        <div className="value">
+          {element}
+        </div>
+      </div>
+    );
+  }
+
+  renderBody(metadata) {
+    const {
+      captions,
+      chat,
+      screenshare,
+    } = this.props;
+
+    return (
+      <div className="body">
+        {this.renderItem('user', metadata.participants)}
+        {this.renderItem('group-chat', chat)}
+        {this.renderItem('desktop', screenshare)}
+        {this.renderItem('closed-caption', captions)}
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      metadata,
+      toggleMore,
+    } = this.props;
+
+    return (
+      <div className="more-wrapper">
+        <div className="more">
+          <div className="control">
+            <Button
+              handleOnClick={toggleMore}
+              icon="close"
+            />
+          </div>
+          <div className="header">
+            <div className="name">
+              {metadata.name}
+            </div>
+            {this.renderDate(metadata)}
+          </div>
+          {this.renderBody(metadata)}
+          <div className="footer">
+            {this.renderItem('settings', 'ddfgsdfg')}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/more/index.scss

@@ -0,0 +1,118 @@
+@import 'src/styles/colors';
+@import 'src/styles/fonts';
+@import 'src/styles/icons';
+@import 'src/styles/sizes';
+
+.more-wrapper {
+  align-items: center;
+  background-color: transparentize($main-background-color, .25);
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.more {
+  background-color: $section-background-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+  max-width: $modal-max-width;
+  max-height: 80%;
+  padding: 0 $padding-small;
+  width: 80%;
+
+  .control {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row-reverse;
+    height: $modal-bar-height;
+    padding: $padding-small;
+    width: 100%;
+
+    .button {
+      color: $gray-light;
+      font-weight: $font-weight-semi-bold;
+    }
+  }
+
+  .header {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    font-weight: $font-weight-regular;
+    padding: 0 0 $padding 0;
+    width: 100%;
+
+    .name {
+      box-sizing: border-box;
+      display: flex;
+      font-size: larger;
+      justify-content: center;
+      overflow: hidden;
+      padding: 0 0 $padding-extra-small 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .date {
+      box-sizing: border-box;
+      color: $gray-light;
+      display: flex;
+      font-size: small;
+      padding: 0 $padding-small;
+
+      .item {
+        box-sizing: border-box;
+        padding: 0 $padding-extra-small;
+      }
+    }
+  }
+
+  .body {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    padding: 0 $padding;
+    width: 100%;
+
+    .item {
+      box-sizing: border-box;
+      display: flex;
+      font-size: large;
+      padding: $padding-small 0;
+
+      .value {
+        box-sizing: border-box;
+        padding: 0 $padding;
+      }
+    }
+  }
+
+  .footer {
+    box-sizing: border-box;
+    align-items: center;
+    display: flex;
+    height: $modal-bar-height;
+    padding: 0 $padding;
+    width: 100%;
+
+    .item {
+      box-sizing: border-box;
+      color: $gray-light;
+      display: flex;
+      font-size: small;
+      padding: $padding-extra-small 0;
+      width: 100%;
+
+      .value {
+        box-sizing: border-box;
+        padding: 0 $padding-small;
+      }
+    }
+  }
+}

src/components/player.js

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import { defineMessages } from 'react-intl';
 import { files as config } from 'config';
 import Chat from './chat';
+import More from './more';
 import Presentation from './presentation';
 import Screenshare from './screenshare';
 import Thumbnails from './thumbnails';
@@ -20,6 +21,7 @@ import {
   getFileName,
   getSectionFromLayout,
   getSwapFromLayout,
+  isEmpty,
 } from 'utils/data';
 import logger from 'utils/logger';
 import Monitor from 'utils/monitor';
@@ -45,6 +47,7 @@ export default class Player extends PureComponent {
     this.state = {
       control: getControlFromLayout(layout),
       fullscreen: false,
+      more: false,
       section: getSectionFromLayout(layout),
       swap: getSwapFromLayout(layout),
       thumbnails: false,
@@ -123,6 +126,12 @@ export default class Player extends PureComponent {
     this.setState({ fullscreen: !fullscreen });
   }
 
+  toggleMore() {
+    const { more } = this.state;
+
+    this.setState({ more: !more });
+  }
+
   toggleSection() {
     const { section } = this.state;
 
@@ -175,6 +184,22 @@ export default class Player extends PureComponent {
     );
   }
 
+  renderMore() {
+    const { more } = this.state;
+
+    if (!more) return null;
+
+    return (
+      <More
+        captions={!isEmpty(this.captions)}
+        chat={!isEmpty(this.chat)}
+        metadata={this.metadata}
+        screenshare={!isEmpty(this.screenshare)}
+        toggleMore={() => this.toggleMore()}
+      />
+    );
+  }
+
   renderThumbnails() {
     const {
       time,
@@ -206,16 +231,17 @@ export default class Player extends PureComponent {
     } = this.state;
 
     const {
-      epoch,
       name,
+      start,
     } = this.metadata;
 
     return (
       <NavigationBar
         control={control}
-        epoch={epoch}
+        start={start}
         name={name}
         section={section}
+        toggleMore={() => this.toggleMore()}
         toggleSection={() => this.toggleSection()}
       />
     );
@@ -375,6 +401,7 @@ export default class Player extends PureComponent {
         {this.renderContent()}
         {this.renderActionBar()}
         {this.renderThumbnails()}
+        {this.renderMore()}
       </div>
     );
   }

src/styles/icons.scss

@@ -25,7 +25,7 @@
   content: "\e901";
 }
 
-.icon-more:before {
+.icon-horizontal-more:before {
   content: "\e902";
 }
 
@@ -369,7 +369,7 @@
   content: "\e957";
 }
 
-.icon-more:before {
+.icon-vertical-more:before {
   content: "\e902";
   transform: rotate(90deg);
 }

src/styles/sizes.scss

@@ -2,6 +2,8 @@ $control-bar-height: 30px;
 $media-min-width: 480px;
 $media-max-height: 400px;
 
+$modal-max-width: 320px;
+
 $video-height: 480px;
 $video-width: 640px;
 
@@ -12,6 +14,7 @@ $bar-height: 60px;
 
 $navigation-bar-height: $bar-height;
 $action-bar-height: $bar-height;
+$modal-bar-height: $bar-height;
 
 $media-fit-height: calc((#{$video-height} / 2) - #{$bar-height});
 $media-fit-height-small: calc(((#{$video-height} / 8) * 3) - #{$bar-height});