From d1cb48768ad7cb886f9beb8aa4a47ece096563c4 Mon Sep 17 00:00:00 2001 From: Gabriel Carvalho de Campes Date: Mon, 4 Jul 2016 20:44:29 +0000 Subject: [PATCH 01/10] Adds colored avatars to the userlist --- .../components/user-avatar/color-generator.js | 107 ++++++++++++++++++ .../ui/components/user-avatar/component.jsx | 13 ++- .../ui/components/user-avatar/styles.scss | 46 +++++--- 3 files changed, 148 insertions(+), 18 deletions(-) create mode 100644 bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js b/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js new file mode 100644 index 0000000000..b6304a5c99 --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js @@ -0,0 +1,107 @@ +//This is the code to generate the colors for the user avatar when no image is provided + +const stringToPastelColour = (str) => { + str = str.trim().toLowerCase(); + + let baseRed = 128; + let baseGreen = 128; + let baseBlue = 128; + + let seed = 0; + for (let i = 0; i < str.length; seed = str.charCodeAt(i++) + ((seed << 5) - seed)); + let a = Math.abs((Math.sin(seed++) * 10000)) % 256; + let b = Math.abs((Math.sin(seed++) * 10000)) % 256; + let c = Math.abs((Math.sin(seed++) * 10000)) % 256; + + //build colour + let red = Math.round((a + baseRed) / 2); + let green = Math.round((b + baseGreen) / 2); + let blue = Math.round((c + baseBlue) / 2); + + return { + r: red, + g: green, + b: blue, + }; +}; + +// https://www.w3.org/TR/WCAG20/#relativeluminancedef +const relativeLuminance = (rgb) => { + let tmp = {}; + + Object.keys(rgb).forEach((i) => { + let c = rgb[i] / 255; + if (c <= 0.03928) { + tmp[i] = c / 12.92; + } else { + tmp[i] = Math.pow(((c + 0.055) / 1.055), 2.4); + } + }); + + return (0.2126 * tmp.r + 0.7152 * tmp.g + 0.0722 * tmp.b); +}; + +/** + * Calculate contrast ratio acording to WCAG 2.0 formula + * Will return a value between 1 (no contrast) and 21 (max contrast) + * @link http://www.w3.org/TR/WCAG20/#contrast-ratiodef + */ +const contrastRatio = (a, b) => { + let c; + + a = relativeLuminance(a); + b = relativeLuminance(b); + + //Arrange so a is lightest + if (a < b) { + c = a; + a = b; + b = c; + } + + return (a + 0.05) / (b + 0.05); +}; + +const shadeColor = (rgb, amt) => { + let r = rgb.r + amt; + if (r > 255) r = 255; + else if (r < 0) r = 0; + + let b = rgb.b + amt; + if (b > 255) b = 255; + else if (b < 0) b = 0; + + let g = rgb.g + amt; + if (g > 255) g = 255; + else if (g < 0) g = 0; + + return { + r: r, + g: g, + b: b, + }; +}; + +const addShadeIfNoContrast = (rgb) => { + let base = { + r: 255, + g: 255, + b: 255, + }; // white + + let cr = contrastRatio(base, rgb); + + if (cr > 4.5) { + return rgb; + } + + return addShadeIfNoContrast(shadeColor(rgb, -25)); +}; + +const getColor = (username) => { + let rgb = stringToPastelColour(username); + rgb = addShadeIfNoContrast(rgb); + return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')'; +}; + +export default getColor; diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx index 7ff8cf8aa0..f84a154b4b 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx @@ -1,6 +1,7 @@ import React, { Component, PropTypes } from 'react'; import styles from './styles.scss'; import cx from 'classnames'; +import getColor from './color-generator'; const propTypes = { user: React.PropTypes.shape({ @@ -20,15 +21,21 @@ export default class UserAvatar extends Component { let user = this.props.user; let avatarClasses = {}; - avatarClasses[styles.presenter] = user.isPresenter; - avatarClasses[styles.voiceUser] = user.isVoiceUser; avatarClasses[styles.moderator] = user.isModerator; + avatarClasses[styles.presenter] = user.isPresenter; + // avatarClasses[styles.guest] = user.isVoiceUser; + + let avatarStyles = { + 'background-color': getColor(user.name), + }; return ( -
+
{user.name.slice(0, 2)} + +
); } diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss index b88a81a721..28a49263fb 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss @@ -13,34 +13,50 @@ $moderator-text: $color-white; $moderator-bg: $color-primary; .userAvatar { - @extend .flex-column; - transition: all 0.3s; - flex-basis: 1.7rem; + // @extend .flex-column; + flex-basis: 2.2rem; + height: 2.2rem; flex-shrink: 0; - height: 1.7rem; + line-height: 2.2rem; justify-content: center; + position: relative; display: flex; flex-flow: column; font-size: 1rem; text-align: center; border-radius: 50%; - border: 2px solid $user-avatar-border; - color: $user-avatar-text; + color: $color-white; text-transform: capitalize; } -.voiceUser { - background-color: $voice-user-bg; - color: $voice-user-text; - border: none; -} - -.presenter { - border-radius: 2px; +.userStatus { + position: absolute; + background-color: $color-white; + width: 0.75rem; + height: 0.75rem; + border-radius: 50%; + top: 1.5rem; + left: 1.5rem; + -webkit-box-shadow: 0 0 0 1px $color-white; + -moz-box-shadow: 0 0 0 1px $color-white; + box-shadow: 0 0 0 1px $color-white; + background-color: $color-success; + transition: all 0.3s; } .moderator { + border: 1px solid $color-gray-light; + border-radius: 2px; + background-color: $color-white; +} + +.presenter { background-color: $moderator-bg; - color: $moderator-text; + border-radius: 2px; border: none; } + +.guest { + background-color: $color-white; + border: 1px solid $color-gray-light; +} From 5bb53547a9f50cacdab398e78e9559d8b52774d8 Mon Sep 17 00:00:00 2001 From: Gabriel Carvalho de Campes Date: Tue, 5 Jul 2016 16:54:45 +0000 Subject: [PATCH 02/10] Changes the avatar component --- .../ui/components/user-avatar/component.jsx | 20 ++++++++++++++++++- .../ui/components/user-avatar/styles.scss | 2 +- .../ui/components/user-list/service.js | 8 +++----- .../user-list/user-list-item/component.jsx | 6 ++++-- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx index f84a154b4b..7e325eae53 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx @@ -1,4 +1,5 @@ import React, { Component, PropTypes } from 'react'; +import Icon from '/imports/ui/components/icon/component'; import styles from './styles.scss'; import cx from 'classnames'; import getColor from './color-generator'; @@ -19,6 +20,7 @@ const defaultProps = { export default class UserAvatar extends Component { render() { let user = this.props.user; + // console.log('batata'); let avatarClasses = {}; avatarClasses[styles.moderator] = user.isModerator; @@ -29,16 +31,32 @@ export default class UserAvatar extends Component { 'background-color': getColor(user.name), }; + // console.log(user.emoji.status); + return (
- {user.name.slice(0, 2)} + {this.renderAvatarContent()}
); } + + renderAvatarContent() { + const { + user + } = this.props; + + let content = user.name.slice(0, 2); + + if (user.emoji.status !== "none") { + content = + } + + return content; + } } UserAvatar.propTypes = propTypes; diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss index 28a49263fb..f30f203d21 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss @@ -22,7 +22,7 @@ $moderator-bg: $color-primary; position: relative; display: flex; flex-flow: column; - font-size: 1rem; + font-size: 1.1rem; text-align: center; border-radius: 50%; color: $color-white; diff --git a/bigbluebutton-html5/imports/ui/components/user-list/service.js b/bigbluebutton-html5/imports/ui/components/user-list/service.js index 79f72aa893..de345531b7 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/service.js +++ b/bigbluebutton-html5/imports/ui/components/user-list/service.js @@ -154,6 +154,7 @@ const userFindSorting = { }; const getUsers = () => { + console.log(Users); let users = Users .find({}, userFindSorting) .fetch(); @@ -196,12 +197,9 @@ const getOpenChats = chatID => { getCurrentUser = () => { let currentUserId = auth.getUser(); + let currentUser = Users.findOne({ 'user.userid': currentUserId }); - return mapUser( - Users - .findOne({ 'user.userid': currentUserId }) - .user - ); + return (currentUser) ? mapUser(currentUser.user) : null; }; const userActions = { diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx index fdf017fd7d..3bce572f4b 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx @@ -83,8 +83,10 @@ class UserListItem extends Component { handleClickOutsideDropdown(e) { const node = findDOMNode(this); - - if (e.target !== node && !node.contains(e.target)) { + const shouldUpdateState = e.target !== node && + !node.contains(e.target) && + this.state.visibleActions; + if (shouldUpdateState) { this.setState({ visibleActions: false }); } } From 0dd7f3811c0b898bdcd8031aa576c9f02acd753e Mon Sep 17 00:00:00 2001 From: Gabriel Carvalho de Campes Date: Fri, 8 Jul 2016 19:09:16 +0000 Subject: [PATCH 03/10] Separates user status in avatar --- .../message-list-item/styles.scss | 2 +- .../imports/ui/components/chat/service.js | 4 ++ .../components/user-avatar/color-generator.js | 2 +- .../ui/components/user-avatar/component.jsx | 59 ++++++++++++++----- .../ui/components/user-avatar/styles.scss | 45 ++++++++++---- .../user-list/chat-list-item/component.jsx | 4 +- .../user-list/chat-list-item/styles.scss | 10 +++- .../ui/components/user-list/service.js | 1 - .../user-list/user-list-item/component.jsx | 13 +--- 9 files changed, 97 insertions(+), 43 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss index 2fb5592ee6..4448f6ba44 100644 --- a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss @@ -18,7 +18,7 @@ } .avatar { - flex-basis: 1.7rem; + flex-basis: 2.2rem; flex-shrink: 0; flex-grow: 0; } diff --git a/bigbluebutton-html5/imports/ui/components/chat/service.js b/bigbluebutton-html5/imports/ui/components/chat/service.js index 38b1f1e93d..14fe7f1fc0 100644 --- a/bigbluebutton-html5/imports/ui/components/chat/service.js +++ b/bigbluebutton-html5/imports/ui/components/chat/service.js @@ -19,6 +19,10 @@ const PUBLIC_CHAT_ID = 'public'; const mapUser = (user) => ({ id: user.userid, name: user.name, + emoji: { + status: user.emoji_status, + changedAt: user.set_emoji_time, + }, isPresenter: user.presenter, isModerator: user.role === 'MODERATOR', isCurrent: user.userid === Auth.getUser(), diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js b/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js index b6304a5c99..8551a2302e 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js @@ -91,7 +91,7 @@ const addShadeIfNoContrast = (rgb) => { let cr = contrastRatio(base, rgb); - if (cr > 4.5) { + if (cr > 2.5) { return rgb; } diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx index 7e325eae53..7b5c14dadf 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx @@ -19,35 +19,27 @@ const defaultProps = { export default class UserAvatar extends Component { render() { - let user = this.props.user; - // console.log('batata'); - - let avatarClasses = {}; - avatarClasses[styles.moderator] = user.isModerator; - avatarClasses[styles.presenter] = user.isPresenter; - // avatarClasses[styles.guest] = user.isVoiceUser; + const { + user + } = this.props; let avatarStyles = { - 'background-color': getColor(user.name), + 'backgroundColor': getColor(user.name), }; - // console.log(user.emoji.status); - return (
{this.renderAvatarContent()} - - + {this.renderUserStatus()} + {this.renderUserMediaStatus()}
); } renderAvatarContent() { - const { - user - } = this.props; + const user = this.props.user; let content = user.name.slice(0, 2); @@ -57,6 +49,43 @@ export default class UserAvatar extends Component { return content; } + + renderUserStatus() { + const user = this.props.user; + let userStatus; + + let userStatusClasses = {}; + userStatusClasses[styles.moderator] = user.isModerator; + userStatusClasses[styles.presenter] = user.isPresenter; + + if (user.isModerator || user.isPresenter) { + userStatus = ( + + + ); + } + + return userStatus; + } + + renderUserMediaStatus() { + const user = this.props.user; + let userMediaStatus; + + let userMediaClasses = {}; + userMediaClasses[styles.voiceOnly] = user.isListenOnly; + userMediaClasses[styles.microphone] = user.isVoiceUser; + + if (user.isListenOnly || user.isVoiceUser) { + userMediaStatus = ( + + {user.isMuted ?
: null} + + ); + } + + return userMediaStatus; + } } UserAvatar.propTypes = propTypes; diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss index f30f203d21..f623c36762 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss @@ -32,31 +32,54 @@ $moderator-bg: $color-primary; .userStatus { position: absolute; background-color: $color-white; - width: 0.75rem; - height: 0.75rem; - border-radius: 50%; - top: 1.5rem; - left: 1.5rem; + width: 0.70rem; + height: 0.70rem; + border-radius: 2px; + top: 0; + left: 0; -webkit-box-shadow: 0 0 0 1px $color-white; -moz-box-shadow: 0 0 0 1px $color-white; box-shadow: 0 0 0 1px $color-white; - background-color: $color-success; transition: all 0.3s; } .moderator { border: 1px solid $color-gray-light; - border-radius: 2px; background-color: $color-white; } .presenter { background-color: $moderator-bg; - border-radius: 2px; border: none; } -.guest { - background-color: $color-white; - border: 1px solid $color-gray-light; +.userMediaStatus { + display: flex; + justify-content: center; + position: absolute; + border-radius: 50%; + width: 0.70rem; + height: 0.70rem; + top: 1.5rem; + left: 1.5rem; + -webkit-box-shadow: 0 0 0 1px $color-white; + -moz-box-shadow: 0 0 0 1px $color-white; + box-shadow: 0 0 0 1px $color-white; + transition: all 0.3s; + background-color: $color-success; +} + +.voiceOnly { + border: 1px solid $color-gray-light; + background-color: $color-white; +} + +.microphone { +} + +.microphoneMuted { + width: 2px; + transform: rotate(45deg); + height: 0.7rem; + background-color: $color-white; } diff --git a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx index 5934300358..0cb2394c4a 100755 --- a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx @@ -31,8 +31,8 @@ class ChatListItem extends Component { let linkClasses = {}; linkClasses[styles.active] = chat.id === openChat; return ( -
  • - +
  • + {chat.icon ? this.renderChatIcon() : this.renderChatAvatar()}

    {chat.name}

    diff --git a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss index 4d08c11ac0..5afb4ac6b5 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss @@ -2,9 +2,17 @@ .chatListItem { @extend %list-item; - padding-right: 1.2rem; + padding: 0; cursor: pointer; +} + +.chatListItemLink { + display: flex; + flex-grow: 1; text-decoration: none; + padding: 0.3rem; + padding-left: 0.5rem; + padding-right: 0.3rem; } .unreadMessages { diff --git a/bigbluebutton-html5/imports/ui/components/user-list/service.js b/bigbluebutton-html5/imports/ui/components/user-list/service.js index de345531b7..582a83ed2c 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/service.js +++ b/bigbluebutton-html5/imports/ui/components/user-list/service.js @@ -154,7 +154,6 @@ const userFindSorting = { }; const getUsers = () => { - console.log(Users); let users = Users .find({}, userFindSorting) .fetch(); diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx index 3bce572f4b..eba7a52507 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx @@ -131,23 +131,14 @@ class UserListItem extends Component { userNameSub = userNameSub.join(' '); return ( - +

    {user.name}

    {userNameSub}

    - +
    ); } From 7948571525851249b7aec10b523c77eccf6f1097 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Fri, 8 Jul 2016 16:11:52 -0700 Subject: [PATCH 04/10] Added support for png and check to see if the image is ready resolves #3206 --- .../server/modifiers/addSlideToCollection.js | 65 ++++++++++--------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/bigbluebutton-html5/imports/api/slides/server/modifiers/addSlideToCollection.js b/bigbluebutton-html5/imports/api/slides/server/modifiers/addSlideToCollection.js index db44861a2e..427030d7a9 100755 --- a/bigbluebutton-html5/imports/api/slides/server/modifiers/addSlideToCollection.js +++ b/bigbluebutton-html5/imports/api/slides/server/modifiers/addSlideToCollection.js @@ -4,41 +4,48 @@ import Slides from '/imports/api/slides'; export function addSlideToCollection(meetingId, presentationId, slideObject) { const url = Npm.require('url'); const http = Npm.require('http'); - + const imageUri = slideObject.svg_uri != null ? slideObject.svg_uri : slideObject.png_uri; if (Slides.findOne({ meetingId: meetingId, 'slide.id': slideObject.id, }) == null) { - const options = url.parse(slideObject.svg_uri); + const options = url.parse(imageUri); http.get(options, Meteor.bindEnvironment(function (response) { - let chunks = []; - response.on('data', Meteor.bindEnvironment(function (chunk) { - chunks.push(chunk); - })).on('end', Meteor.bindEnvironment(function () { - let buffer = Buffer.concat(chunks); - const dimensions = sizeOf(buffer); - const entry = { - meetingId: meetingId, - presentationId: presentationId, - slide: { - height_ratio: slideObject.height_ratio, - y_offset: slideObject.y_offset, - num: slideObject.num, - x_offset: slideObject.x_offset, - current: slideObject.current, - img_uri: slideObject.svg_uri != null ? slideObject.svg_uri : slideObject.png_uri, - txt_uri: slideObject.txt_uri, - id: slideObject.id, - width_ratio: slideObject.width_ratio, - swf_uri: slideObject.swf_uri, - thumb_uri: slideObject.thumb_uri, - width: dimensions.width, - height: dimensions.height, - }, - }; - Slides.insert(entry); + let contentType = response.headers['content-type']; + if (!contentType.match(/svg/gi) && !contentType.match(/png/gi)) { + console.log(`Slide file is not accessible or not ready yet`); + console.log(`response content-type`, response.headers['content-type']); + return; + } + + let chunks = []; + response.on('data', Meteor.bindEnvironment(function (chunk) { + chunks.push(chunk); + })).on('end', Meteor.bindEnvironment(function () { + let buffer = Buffer.concat(chunks); + const dimensions = sizeOf(buffer); + const entry = { + meetingId: meetingId, + presentationId: presentationId, + slide: { + height_ratio: slideObject.height_ratio, + y_offset: slideObject.y_offset, + num: slideObject.num, + x_offset: slideObject.x_offset, + current: slideObject.current, + img_uri: slideObject.svg_uri != null ? slideObject.svg_uri : slideObject.png_uri, + txt_uri: slideObject.txt_uri, + id: slideObject.id, + width_ratio: slideObject.width_ratio, + swf_uri: slideObject.swf_uri, + thumb_uri: slideObject.thumb_uri, + width: dimensions.width, + height: dimensions.height, + }, + }; + Slides.insert(entry); + })); })); - })); //logger.info "added slide id =[#{id}]:#{slideObject.id} in #{meetingId}. Now there // are #{Slides.find({meetingId: meetingId}).count()} slides in the meeting" From bcfa3d41ecc32577eb9124c254cd05ed6c8bec8c Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Fri, 8 Jul 2016 16:13:26 -0700 Subject: [PATCH 05/10] Linting --- .../imports/api/common/server/helpers.js | 2 +- .../imports/startup/client/routes.js | 5 +++-- .../imports/ui/components/app/component.jsx | 2 +- .../imports/ui/components/app/container.jsx | 4 ++-- .../imports/ui/components/app/service.js | 20 +++++++++++-------- 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/bigbluebutton-html5/imports/api/common/server/helpers.js b/bigbluebutton-html5/imports/api/common/server/helpers.js index 22897e07d6..c9d9e93d49 100755 --- a/bigbluebutton-html5/imports/api/common/server/helpers.js +++ b/bigbluebutton-html5/imports/api/common/server/helpers.js @@ -29,7 +29,7 @@ export function clearCollections() { refreshes. Related to: https://github.com/meteor/meteor/issues/6576 */ - if (process.env.NODE_ENV === "development") { + if (process.env.NODE_ENV === 'development') { return; } diff --git a/bigbluebutton-html5/imports/startup/client/routes.js b/bigbluebutton-html5/imports/startup/client/routes.js index db74455a07..5ec4ec2e38 100755 --- a/bigbluebutton-html5/imports/startup/client/routes.js +++ b/bigbluebutton-html5/imports/startup/client/routes.js @@ -18,8 +18,9 @@ export const renderRoutes = () => ( { - subscribeToCollections() - }} + subscribeToCollections(); + }} + getComponent={(nextState, cb) => { subscribeToCollections(() => cb(null, AppContainer)); }}> diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index f0c50c201e..b34b9312d7 100755 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -117,7 +117,7 @@ export default class App extends Component { } render() { - if(this.props.isLoading) { + if (this.props.isLoading) { return ; } diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx index c9911a30b1..9029aad162 100755 --- a/bigbluebutton-html5/imports/ui/components/app/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx @@ -40,7 +40,7 @@ let loading = true; const loadingDep = new Tracker.Dependency; const getLoading = () => { - loadingDep.depend() + loadingDep.depend(); return loading; }; @@ -60,7 +60,7 @@ export default createContainer(() => { return { isLoading: getLoading(), - actionsbar: + actionsbar: , }; }, AppContainer); diff --git a/bigbluebutton-html5/imports/ui/components/app/service.js b/bigbluebutton-html5/imports/ui/components/app/service.js index 86c033f7d1..930534759e 100755 --- a/bigbluebutton-html5/imports/ui/components/app/service.js +++ b/bigbluebutton-html5/imports/ui/components/app/service.js @@ -11,19 +11,23 @@ function setCredentials(nextState, replace) { const { meetingID, userID, authToken } = nextState.params; Auth.setCredentials(meetingID, userID, authToken); replace({ - pathname: '/' + pathname: '/', }); } }; let dataSubscriptions = null; function subscribeForData() { - if(dataSubscriptions) { + if (dataSubscriptions) { return dataSubscriptions; } - const subNames = ['users', 'chat', 'cursor', 'deskshare', 'meetings', - 'polls', 'presentations', 'shapes', 'slides']; + const subNames = [ + 'users', 'chat', 'cursor', + 'deskshare', 'meetings', + 'polls', 'presentations', + 'shapes', 'slides', + ]; let subs = []; subNames.forEach(name => subs.push(subscribeFor(name))); @@ -47,11 +51,11 @@ function subscribeFor(collectionName) { function subscribeToCollections(cb) { subscribeFor('users').then(() => { Promise.all(subscribeForData()).then(() => { - if(cb) { + if (cb) { cb(); } - }) - }) + }); + }); }; function onStop(error, result) { @@ -59,7 +63,7 @@ function onStop(error, result) { }; function onReady() { - console.log("OnReady"); + console.log('OnReady'); }; export { From 87c4ee98eade740cd72d03f5183c492b6d311fd4 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Sat, 9 Jul 2016 14:42:33 -0700 Subject: [PATCH 06/10] Added a white background for the slide Since it is transparent for some SVG files --- .../components/whiteboard/slide/component.jsx | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/slide/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/slide/component.jsx index 7df77561ce..44015bb177 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/slide/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/slide/component.jsx @@ -9,13 +9,23 @@ export default class Slide extends React.Component { return ( {this.props.currentSlide ? - - + + + + + + : null } ); From 8947f732b38a78a2322429426b2a05f1bac39464 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Mon, 11 Jul 2016 08:49:26 -0700 Subject: [PATCH 07/10] Restructuring --- .../server/modifiers/addSlideToCollection.js | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/bigbluebutton-html5/imports/api/slides/server/modifiers/addSlideToCollection.js b/bigbluebutton-html5/imports/api/slides/server/modifiers/addSlideToCollection.js index 427030d7a9..6bf4c8e397 100755 --- a/bigbluebutton-html5/imports/api/slides/server/modifiers/addSlideToCollection.js +++ b/bigbluebutton-html5/imports/api/slides/server/modifiers/addSlideToCollection.js @@ -12,39 +12,39 @@ export function addSlideToCollection(meetingId, presentationId, slideObject) { const options = url.parse(imageUri); http.get(options, Meteor.bindEnvironment(function (response) { let contentType = response.headers['content-type']; - if (!contentType.match(/svg/gi) && !contentType.match(/png/gi)) { + + if (contentType.match(/svg/gi) || contentType.match(/png/gi)) { + let chunks = []; + response.on('data', Meteor.bindEnvironment(function (chunk) { + chunks.push(chunk); + })).on('end', Meteor.bindEnvironment(function () { + let buffer = Buffer.concat(chunks); + const dimensions = sizeOf(buffer); + const entry = { + meetingId: meetingId, + presentationId: presentationId, + slide: { + height_ratio: slideObject.height_ratio, + y_offset: slideObject.y_offset, + num: slideObject.num, + x_offset: slideObject.x_offset, + current: slideObject.current, + img_uri: slideObject.svg_uri != null ? slideObject.svg_uri : slideObject.png_uri, + txt_uri: slideObject.txt_uri, + id: slideObject.id, + width_ratio: slideObject.width_ratio, + swf_uri: slideObject.swf_uri, + thumb_uri: slideObject.thumb_uri, + width: dimensions.width, + height: dimensions.height, + }, + }; + Slides.insert(entry); + })); + } else { console.log(`Slide file is not accessible or not ready yet`); console.log(`response content-type`, response.headers['content-type']); - return; } - - let chunks = []; - response.on('data', Meteor.bindEnvironment(function (chunk) { - chunks.push(chunk); - })).on('end', Meteor.bindEnvironment(function () { - let buffer = Buffer.concat(chunks); - const dimensions = sizeOf(buffer); - const entry = { - meetingId: meetingId, - presentationId: presentationId, - slide: { - height_ratio: slideObject.height_ratio, - y_offset: slideObject.y_offset, - num: slideObject.num, - x_offset: slideObject.x_offset, - current: slideObject.current, - img_uri: slideObject.svg_uri != null ? slideObject.svg_uri : slideObject.png_uri, - txt_uri: slideObject.txt_uri, - id: slideObject.id, - width_ratio: slideObject.width_ratio, - swf_uri: slideObject.swf_uri, - thumb_uri: slideObject.thumb_uri, - width: dimensions.width, - height: dimensions.height, - }, - }; - Slides.insert(entry); - })); })); //logger.info "added slide id =[#{id}]:#{slideObject.id} in #{meetingId}. Now there From 262212648220d53b8b025ee294e12edddbfcbd42 Mon Sep 17 00:00:00 2001 From: Gabriel Carvalho de Campes Date: Mon, 11 Jul 2016 17:25:16 +0000 Subject: [PATCH 08/10] change the size of the avatar status indicators --- .../components/user-avatar/color-generator.js | 3 ++- .../ui/components/user-avatar/styles.scss | 18 +++++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js b/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js index 8551a2302e..a17174de8d 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js @@ -26,6 +26,7 @@ const stringToPastelColour = (str) => { }; // https://www.w3.org/TR/WCAG20/#relativeluminancedef +// http://entropymine.com/imageworsener/srgbformula/ const relativeLuminance = (rgb) => { let tmp = {}; @@ -91,7 +92,7 @@ const addShadeIfNoContrast = (rgb) => { let cr = contrastRatio(base, rgb); - if (cr > 2.5) { + if (cr > 4.5) { return rgb; } diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss index f623c36762..88c341a277 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss @@ -32,8 +32,8 @@ $moderator-bg: $color-primary; .userStatus { position: absolute; background-color: $color-white; - width: 0.70rem; - height: 0.70rem; + width: 0.625rem; + height: 0.625rem; border-radius: 2px; top: 0; left: 0; @@ -58,10 +58,10 @@ $moderator-bg: $color-primary; justify-content: center; position: absolute; border-radius: 50%; - width: 0.70rem; - height: 0.70rem; - top: 1.5rem; - left: 1.5rem; + width: 0.625rem; + height: 0.625rem; + top: 1.575rem; + left: 1.575rem; -webkit-box-shadow: 0 0 0 1px $color-white; -moz-box-shadow: 0 0 0 1px $color-white; box-shadow: 0 0 0 1px $color-white; @@ -78,8 +78,12 @@ $moderator-bg: $color-primary; } .microphoneMuted { + margin-top: 0.05rem; width: 2px; transform: rotate(45deg); - height: 0.7rem; + height: 0.60rem; background-color: $color-white; } + +// 10px x +// 16px 1 From 94c10c9ed0c212efec197ff6aeff9fc2449b4989 Mon Sep 17 00:00:00 2001 From: Gabriel Carvalho de Campes Date: Mon, 11 Jul 2016 18:20:24 +0000 Subject: [PATCH 09/10] Fix muted status dash sizing --- .../imports/ui/components/user-avatar/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss index 88c341a277..e380a48f41 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss @@ -81,7 +81,7 @@ $moderator-bg: $color-primary; margin-top: 0.05rem; width: 2px; transform: rotate(45deg); - height: 0.60rem; + height: 0.5rem; background-color: $color-white; } From 8c37e10ee0927462cfc54da0cb13b1fc8c3685c3 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Mon, 11 Jul 2016 12:10:30 -0700 Subject: [PATCH 10/10] Set a viewport --- bigbluebutton-html5/client/main.html | 1 + 1 file changed, 1 insertion(+) mode change 100644 => 100755 bigbluebutton-html5/client/main.html diff --git a/bigbluebutton-html5/client/main.html b/bigbluebutton-html5/client/main.html old mode 100644 new mode 100755 index 915f8346cd..d884eda644 --- a/bigbluebutton-html5/client/main.html +++ b/bigbluebutton-html5/client/main.html @@ -1,4 +1,5 @@ + BBB - HTML5 Client