BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added recording status and matching icons

Browse Source
This commit is contained in:
perroned 2014-08-14 10:26:15 -07:00
parent a83e2fb947
commit 753ec4dd1b
8 changed files with 115 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
labs/meteor-client/client/globals.coffee
View File

@ -65,6 +65,9 @@ Handlebars.registerHelper "getUsersInMeeting", ->
Handlebars.registerHelper "isCurrentUser", (id) ->
id is getInSession("userId")
Handlebars.registerHelper "meetingIsRecording", ->
Meteor.Meetings.findOne()?.recorded # Should only ever have one meeting, so we dont need any filter and can trust result #1
Handlebars.registerHelper "isUserSharingAudio", (u) ->
if u?
user = Meteor.Users.findOne({userId:u.userid})

7
labs/meteor-client/client/main.coffee
View File

@ -33,9 +33,12 @@ Template.header.events
"click .whiteboardIcon": (event) ->
toggleWhiteBoard()
Template.recordingStatus.rendered = ->
$('button[rel=tooltip]').tooltip()
Template.makeButton.rendered = ->
$('button[rel=tooltip]').tooltip()
$('button[rel=tooltip]').tooltip()
# Gets called last in main template, just an easy place to print stuff out
Handlebars.registerHelper "doFinalStuff", ->
console.log "-----Doing Final Stuff-----"

103
labs/meteor-client/client/main.html
View File

@ -9,57 +9,59 @@
<div id="navbar" class="myNavbar gradientBar navbar navbar-default navbar-static-top" role="navigation">
{{#with getCurrentUser}}
<div class="navbarUserButtons navbarSection">
{{#if getInSession "display_usersList"}}
{{> makeButton id=userId btn_class="navbarIconToggleActive usersListIcon navbarButton" i_class="user" _id=_id rel="tooltip" data_placement="bottom" title="Hide List of Users"}}
{{else}}
{{> makeButton id=userId btn_class="usersListIcon navbarButton" i_class="user" _id=_id rel="tooltip" data_placement="bottom" title="Show List of Users"}}
{{/if}}
{{#if getInSession "display_chatbar"}}
{{> makeButton id=userId btn_class="navbarIconToggleActive chatBarIcon navbarButton" i_class="comment" _id=_id rel="tooltip" data_placement="bottom" title="Hide Message Pane"}}
{{else}}
{{> makeButton id=userId btn_class="chatBarIcon navbarButton" i_class="comment" _id=_id rel="tooltip" data_placement="bottom" title="Show Message Pane"}}
{{/if}}
{{#if getInSession "display_usersList"}}
{{> makeButton id=userId btn_class="navbarIconToggleActive usersListIcon navbarButton" i_class="user" _id=_id rel="tooltip" data_placement="bottom" title="Hide List of Users"}}
{{else}}
{{> makeButton id=userId btn_class="usersListIcon navbarButton" i_class="user" _id=_id rel="tooltip" data_placement="bottom" title="Show List of Users"}}
{{/if}}
{{#if isUserSharingVideo user}}
{{> makeButton id=userId btn_class="navbarIconToggleActive videoFeedIcon navbarButton" i_class="stop" sharingVideo=true _id=_id rel="tooltip" data_placement="bottom" title="Hide Webcams"}}
{{else}}
{{> makeButton id=userId btn_class="videoFeedIcon navbarButton" i_class="facetime-video" sharingVideo=false _id=_id rel="tooltip" data_placement="bottom" title="Show Webcams"}}
{{/if}}
{{#if getInSession "display_chatbar"}}
{{> makeButton id=userId btn_class="navbarIconToggleActive chatBarIcon navbarButton" i_class="comment" _id=_id rel="tooltip" data_placement="bottom" title="Hide Message Pane"}}
{{else}}
{{> makeButton id=userId btn_class="chatBarIcon navbarButton" i_class="comment" _id=_id rel="tooltip" data_placement="bottom" title="Show Message Pane"}}
{{/if}}
<!-- Join/hang up audio call -->
{{#if isUserSharingAudio user}}
{{> makeButton id=userId btn_class="navbarIconToggleActive audioFeedIcon navbarButton" i_class="volume-off" sharingAudio=true _id=_id rel="tooltip" data_placement="bottom" title="Leave Audio Call"}}
{{else}}
{{> makeButton id=userId btn_class="audioFeedIcon navbarButton" i_class="headphones" sharingAudio=false _id=_id rel="tooltip" data_placement="bottom" title="Join Audio Call"}}
{{/if}}
<!-- whiteboard toggle -->
{{#if getInSession "display_whiteboard"}}
{{> makeButton btn_class="navbarIconToggleActive whiteboardIcon navbarButton" i_class="pencil" _id=_id rel="tooltip" data_placement="bottom" title="Hide Whiteboard"}}
{{else}}
{{> makeButton id=userId btn_class="whiteboardIcon navbarButton" i_class="pencil" _id=_id rel="tooltip" data_placement="bottom" title="Show Whiteboard"}}
{{/if}}
<!-- Mute/unmute user -->
{{#if isUserSharingAudio user}}
<!-- Should use much more noticeable icons than just bootstraps volume-up & volume-down to differentiate talking but it is good for now -->
{{#if isUserMuted user}}
{{> makeButton id=userid btn_class="muteIcon navbarButton" i_class="volume-off" sharingAudio=true _id=_id rel="tooltip" data_placement="bottom" title="Unute"}}
{{else}}
{{#if isUserTalking user}}
{{> makeButton id=userid btn_class="navbarIconToggleActive muteIcon navbarButton" i_class="volume-up" sharingAudio=true _id=_id rel="tooltip" data_placement="bottom" title="Mute"}}
{{else}}
{{> makeButton id=userId btn_class="navbarIconToggleActive muteIcon navbarButton" i_class="volume-down" sharingAudio=true _id=_id rel="tooltip" data_placement="bottom" title="Mute"}}
{{/if}}
{{/if}}
{{/if}}
{{#if isUserSharingVideo user}}
{{> makeButton id=userId btn_class="navbarIconToggleActive videoFeedIcon navbarButton" i_class="stop" sharingVideo=true _id=_id rel="tooltip" data_placement="bottom" title="Hide Webcams"}}
{{else}}
{{> makeButton id=userId btn_class="videoFeedIcon navbarButton" i_class="facetime-video" sharingVideo=false _id=_id rel="tooltip" data_placement="bottom" title="Show Webcams"}}
{{/if}}
<!-- whiteboard toggle -->
{{#if getInSession "display_whiteboard"}}
{{> makeButton btn_class="navbarIconToggleActive whiteboardIcon navbarButton" i_class="pencil" _id=_id rel="tooltip" data_placement="bottom" title="Hide Whiteboard"}}
{{else}}
{{> makeButton id=userId btn_class="whiteboardIcon navbarButton" i_class="pencil" _id=_id rel="tooltip" data_placement="bottom" title="Show Whiteboard"}}
{{/if}}
<!-- Join/hang up audio call -->
{{#if isUserSharingAudio user}}
{{> makeButton id=userId btn_class="navbarIconToggleActive audioFeedIcon navbarButton" i_class="volume-off" sharingAudio=true _id=_id rel="tooltip" data_placement="bottom" title="Leave Audio Call"}}
{{else}}
{{> makeButton id=userId btn_class="audioFeedIcon navbarButton" i_class="headphones" sharingAudio=false _id=_id rel="tooltip" data_placement="bottom" title="Join Audio Call"}}
{{/if}}
{{#if user.raise_hand}}
{{> makeButton id=userId btn_class="lowerHand navbarIconToggleActive navbarButton" i_class="hand-up" rel="tooltip" data_placement="bottom" title="Lower your hand"}}
{{else}}
{{> makeButton id=userId btn_class="raiseHand navbarButton" i_class="hand-up" rel="tooltip" data_placement="bottom" title="Raise your hand"}}
{{/if}}
<!-- Mute/unmute user -->
{{#if isUserSharingAudio user}}
<!-- Should use much more noticeable icons than just bootstraps volume-up & volume-down to differentiate talking but it is good for now -->
{{#if isUserMuted user}}
{{> makeButton id=userid btn_class="muteIcon navbarButton" i_class="volume-off" sharingAudio=true _id=_id rel="tooltip" data_placement="bottom" title="Unute"}}
{{else}}
{{#if isUserTalking user}}
{{> makeButton id=userid btn_class="navbarIconToggleActive muteIcon navbarButton" i_class="volume-up" sharingAudio=true _id=_id rel="tooltip" data_placement="bottom" title="Mute"}}
{{else}}
{{> makeButton id=userId btn_class="navbarIconToggleActive muteIcon navbarButton" i_class="volume-down" sharingAudio=true _id=_id rel="tooltip" data_placement="bottom" title="Mute"}}
{{/if}}
{{/if}}
{{/if}}
{{#if user.raise_hand}}
{{> makeButton id=userId btn_class="lowerHand navbarIconToggleActive navbarButton" i_class="hand-up" rel="tooltip" data_placement="bottom" title="Lower your hand"}}
{{else}}
{{> makeButton id=userId btn_class="raiseHand navbarButton" i_class="hand-up" rel="tooltip" data_placement="bottom" title="Raise your hand"}}
{{/if}}
{{> recordingStatus}}
</div>
<div class="navbarTitle navbarSection"><span>{{getMeetingName}}</span></div>
<div class="navbarSettingsButtons navbarSection">
@ -91,3 +93,12 @@
</div>
</body>
</template>
<template name="recordingStatus">
<!-- Recording status of the meeting -->
{{#if meetingIsRecording}}
<button class="recordingStatusTrue" rel="tooltip" data-placement="bottom" title="This Meeting is Being Recorded"><span class="glyphicon glyphicon-record"></span> Recording</button>
{{else}}
<button class="recordingStatusFalse" rel="tooltip" data-placement="bottom" title="This Meeting is Not Being Recorded"><span class="glyphicon glyphicon-record"></span> No</button>
{{/if}}
</template>

71
labs/meteor-client/client/stylesheets/chat.less
View File

@ -1,3 +1,8 @@
.chat{
list-style: none;
margin: 0px;
padding: 0px;
}
#chat {
background-color: #f5f5f5;
border: 1px solid #ccc;
@ -5,7 +10,31 @@
min-height:500px;
overflow: hidden;
width: 25%;
}
}
.chat li{
border-bottom: 1px dotted #B3A9A9;
margin: 0px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
}
.chat li:nth-child(even) {
background-color: rgb(245,245,245);
}
#chatbar-contents{
background-color: #fff;
height:90%;
padding-left: 0px;
padding-right: 0px;
width:100%;
}
#chatbody{
height:80%;
overflow-y: scroll;
padding-left: 0px;
padding-right: 0px;
}
.chatGreeting {
color: blue;
line-height: 14px;
@ -28,6 +57,11 @@
margin-top:6px;
}
.optionsChatTab{}
.panel-footer{
padding-top:0px;
position:relative;
bottom:0px;
}
.privateChatTab{}
.publicChatTab{}
.private-chat-user-box {
@ -50,38 +84,3 @@
margin-left: 10px;
}
.tab{}
#chatbar-contents{
background-color: #fff;
height:90%;
padding-left: 0px;
padding-right: 0px;
width:100%;
}
.chat{
list-style: none;
margin: 0px;
padding: 0px;
}
.chat li{
border-bottom: 1px dotted #B3A9A9;
margin: 0px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
}
.chat li:nth-child(even) {
background-color: rgb(245,245,245);
}
.panel-footer{
padding-top:0px;
position:relative;
bottom:0px;
}
#chatbody{
height:80%;
overflow-y: scroll;
padding-left: 0px;
padding-right: 0px;
}

13
labs/meteor-client/client/stylesheets/style.css
View File

@ -77,7 +77,18 @@ body {
padding-left:0.5%;
}
.raiseHand {}
.recordingStatusTrue{
color:green;
background:none!important;
border:none;
padding:0!important;
}
.recordingStatusFalse{
color:maroon;
background:none!important;
border:none;
padding:0!important;
}
.ScrollableWindow {
height: 100%;
overflow-y: scroll;

2
labs/meteor-client/client/views/chat/chat_bar.coffee
View File

@ -41,7 +41,7 @@ Template.chatbar.helpers
greeting =
"<div class='chatGreeting'>
<p>Welcome to #{getMeetingName()}!</p>
<p>For help on using BigBlueButton see these (short) <a href='http://bigbluebutton.org/videos/' target='_blank'>tutorial videos</a>.</p>
<p>For help on using BigBlueButton see these (short) <a href='http://www.bigbluebutton.org/videos/' target='_blank'>tutorial videos</a>.</p>
<p>To join the audio bridge click the headset icon (upper-left hand corner). Use a headset to avoid causing background noise for others.</p>
<br/>
<p>This server is running BigBlueButton #{getInSession 'bbbServerVersion'}.</p>

2
labs/meteor-client/client/views/users/users_list.html
View File

@ -1,6 +1,6 @@
<template name="usersList">
<div id="{{id}}" {{visibility name}} class="component">
<h3 class="title gradientBar">Participants: {{getMeetingSize}} Users</h3>
<h3 class="title gradientBar"><span class="glyphicon glyphicon-user"></span> Participants: {{getMeetingSize}} Users</h3>
<div id="user-contents">
{{#Layout template="scrollWindow" id="publicUserScrollWindow"}}
{{#contentFor region="scrollContents"}}

2
labs/meteor-client/client/views/whiteboard/whiteboard.html
View File

@ -1,6 +1,6 @@
<template name="whiteboard">
<div id="{{id}}" {{visibility name}} class="component">
<h3 class="title gradientBar">{{title}}</h3>
<h3 class="title gradientBar"><span class="glyphicon glyphicon-pencil"></span> {{title}}</h3>
<div id="whiteboard-contents">
<div id="whiteboard-paper" style="">
<!-- <p>{{png}}</p> -->