Added UI for listen only, cleaned up code, added new API methods
This commit is contained in:
perroned
parent
69bebce93d
commit
6dd0e13632
@ -61,6 +61,14 @@
|
||||
currentPresentation = Meteor.Presentations.findOne({"presentation.current": true})
|
||||
currentPresentation?.presentation?.name
|
||||
|
||||
# helper to determine whether user has joined any type of audio
|
||||
Handlebars.registerHelper "amIInAudio", ->
|
||||
BBB.amIInAudio()
|
||||
|
||||
# helper to determine whether the user is in the listen only audio stream
|
||||
Handlebars.registerHelper "amIListenOnlyAudio", ->
|
||||
BBB.amIListenOnlyAudio()
|
||||
|
||||
Handlebars.registerHelper "colourToHex", (value) =>
|
||||
@window.colourToHex(value)
|
||||
|
||||
@ -109,10 +117,6 @@ Handlebars.registerHelper "getWhiteboardTitle", ->
|
||||
Handlebars.registerHelper "isCurrentUser", (userId) ->
|
||||
userId is null or userId is BBB.getCurrentUser()?.userId
|
||||
|
||||
Handlebars.registerHelper "isCurrentUserListenOnly", ->
|
||||
user = BBB.getCurrentUser()
|
||||
user?.user?.listenOnly
|
||||
|
||||
Handlebars.registerHelper "isCurrentUserMuted", ->
|
||||
BBB.amIMuted()
|
||||
|
||||
@ -120,9 +124,6 @@ Handlebars.registerHelper "isCurrentUserRaisingHand", ->
|
||||
user = BBB.getCurrentUser()
|
||||
user?.user?.raise_hand
|
||||
|
||||
Handlebars.registerHelper "isCurrentUserSharingAudio", ->
|
||||
BBB.amISharingAudio()
|
||||
|
||||
Handlebars.registerHelper "isCurrentUserSharingVideo", ->
|
||||
BBB.amISharingVideo()
|
||||
|
||||
@ -132,16 +133,15 @@ Handlebars.registerHelper "isCurrentUserTalking", ->
|
||||
Handlebars.registerHelper "isDisconnected", ->
|
||||
return !Meteor.status().connected
|
||||
|
||||
Handlebars.registerHelper "isUserListenOnly", (userId) ->
|
||||
user = Meteor.Users.findOne({userId:userId})
|
||||
return user?.user?.listenOnly
|
||||
Handlebars.registerHelper "isUserInAudio", (userId) ->
|
||||
BBB.isUserInAudio(userId)
|
||||
|
||||
Handlebars.registerHelper "isUserListenOnlyAudio", (userId) ->
|
||||
BBB.isUserListenOnlyAudio(userId)
|
||||
|
||||
Handlebars.registerHelper "isUserMuted", (userId) ->
|
||||
BBB.isUserMuted(userId)
|
||||
|
||||
Handlebars.registerHelper "isUserSharingAudio", (userId) ->
|
||||
BBB.isUserSharingAudio(userId)
|
||||
|
||||
Handlebars.registerHelper "isUserSharingVideo", (userId) ->
|
||||
BBB.isUserSharingWebcam(userId)
|
||||
|
||||
@ -260,10 +260,14 @@ Handlebars.registerHelper "visibility", (section) ->
|
||||
# Sign the user out of listen only mode, the send the leave voice conference message to BBB
|
||||
@exitVoiceCall = (event) ->
|
||||
hangupCallback = ->
|
||||
console.log "left voice conference"
|
||||
BBB.leaveVoiceConference hangupCallback #TODO should we apply role permissions to this action?
|
||||
if isListenOnly
|
||||
console.log "Exiting Voice Conference"
|
||||
|
||||
if BBB.amIListenOnlyAudio()
|
||||
# notify BBB-apps we are leaving the call call if we are listen only
|
||||
Meteor.call('listenOnlyRequestToggle', getInSession("meetingId"), getInSession("userId"), getInSession("authToken"), false)
|
||||
# perform the hang up
|
||||
BBB.leaveVoiceConference hangupCallback #TODO should we apply role permissions to this action?
|
||||
|
||||
return false
|
||||
|
||||
# close the daudio UI, then join the conference. If listen only send the request to the server
|
||||
@ -273,11 +277,10 @@ Handlebars.registerHelper "visibility", (section) ->
|
||||
|
||||
# create voice call params
|
||||
joinCallback = (message) ->
|
||||
console.log "started webrtc_call"
|
||||
|
||||
if isListenOnly
|
||||
Meteor.call('listenOnlyRequestToggle', getInSession("meetingId"), getInSession("userId"), getInSession("authToken"), true)
|
||||
console.log "Beginning WebRTC Conference Call"
|
||||
|
||||
if isListenOnly
|
||||
Meteor.call('listenOnlyRequestToggle', getInSession("meetingId"), getInSession("userId"), getInSession("authToken"), true)
|
||||
BBB.joinVoiceConference joinCallback, isListenOnly # make the call #TODO should we apply role permissions to this action?
|
||||
|
||||
return false
|
||||
|
||||
@ -57,18 +57,36 @@ https://github.com/bigbluebutton/bigbluebutton/blob/master/bigbluebutton-client/
|
||||
BBB.isUserSharingWebcam = (userId, callback) ->
|
||||
BBB.getUser(userId)?.user?.webcam_stream?.length isnt 0
|
||||
|
||||
BBB.amITalking = (callback) ->
|
||||
BBB.isUserTalking BBB.getCurrentUser()?.userId
|
||||
# returns whether the user has joined any type of audio
|
||||
BBB.amIInAudio = (callback) ->
|
||||
user = BBB.getCurrentUser()
|
||||
user?.user?.listenOnly or user?.user?.voiceUser?.joined
|
||||
|
||||
BBB.isUserTalking = (userId, callback) ->
|
||||
BBB.getUser(userId)?.user?.voiceUser?.talking
|
||||
# returns true if the user has joined the listen only audio stream
|
||||
BBB.amIListenOnlyAudio = (callback) ->
|
||||
BBB.isUserListenOnlyAudio BBB.getCurrentUser()?.userId
|
||||
|
||||
# returns whether the user has joined the voice conference and is sharing audio through a microphone
|
||||
BBB.amISharingAudio = (callback) ->
|
||||
BBB.isUserSharingAudio BBB.getCurrentUser()?.userId
|
||||
|
||||
BBB.isUserSharingAudio = (userId) ->
|
||||
# returns whether the user is currently talking
|
||||
BBB.amITalking = (callback) ->
|
||||
BBB.isUserTalking BBB.getCurrentUser()?.userId
|
||||
|
||||
BBB.isUserInAudio = (userId, callback) ->
|
||||
user = BBB.getUser(userId)
|
||||
user?.user?.listenOnly or user?.user?.voiceUser?.joined
|
||||
|
||||
BBB.isUserListenOnlyAudio = (userId, callback) ->
|
||||
BBB.getUser(userId)?.user?.listenOnly
|
||||
|
||||
BBB.isUserSharingAudio = (userId, callback) ->
|
||||
BBB.getUser(userId)?.user?.voiceUser?.joined
|
||||
|
||||
BBB.isUserTalking = (userId, callback) ->
|
||||
BBB.getUser(userId)?.user?.voiceUser?.talking
|
||||
|
||||
###
|
||||
Raise user's hand.
|
||||
|
||||
|
||||
@ -7,6 +7,55 @@ safariIconPath = 'M16.154,5.135c-0.504,0-1,0.031-1.488,0.089l-0.036-0.18c-0.021-
|
||||
# RaphaelJS "Internet Explorer" icon
|
||||
ieIconPath = 'M27.998,2.266c-2.12-1.91-6.925,0.382-9.575,1.93c-0.76-0.12-1.557-0.185-2.388-0.185c-3.349,0-6.052,0.985-8.106,2.843c-2.336,2.139-3.631,4.94-3.631,8.177c0,0.028,0.001,0.056,0.001,0.084c3.287-5.15,8.342-7.79,9.682-8.487c0.212-0.099,0.338,0.155,0.141,0.253c-0.015,0.042-0.015,0,0,0c-2.254,1.35-6.434,5.259-9.146,10.886l-0.003-0.007c-1.717,3.547-3.167,8.529-0.267,10.358c2.197,1.382,6.13-0.248,9.295-2.318c0.764,0.108,1.567,0.165,2.415,0.165c5.84,0,9.937-3.223,11.399-7.924l-8.022-0.014c-0.337,1.661-1.464,2.548-3.223,2.548c-2.21,0-3.729-1.211-3.828-4.012l15.228-0.014c0.028-0.578-0.042-0.985-0.042-1.436c0-5.251-3.143-9.355-8.255-10.663c2.081-1.294,5.974-3.209,7.848-1.681c1.407,1.14,0.633,3.533,0.295,4.518c-0.056,0.254,0.24,0.296,0.296,0.057C28.814,5.573,29.026,3.194,27.998,2.266zM13.272,25.676c-2.469,1.475-5.873,2.539-7.539,1.289c-1.243-0.935-0.696-3.468,0.398-5.938c0.664,0.992,1.495,1.886,2.473,2.63C9.926,24.651,11.479,25.324,13.272,25.676zM12.714,13.046c0.042-2.435,1.787-3.49,3.617-3.49c1.928,0,3.49,1.112,3.49,3.49H12.714z'
|
||||
|
||||
displayWebRTCNotification = ->
|
||||
if getInSession('webrtc_notification_is_displayed') is false # prevents the notification from displaying until the previous one is hidden
|
||||
if !isWebRTCAvailable() # verifies if the browser supports WebRTC
|
||||
$('.notification').addClass('webrtc-support-notification')
|
||||
setInSession 'webrtc_notification_is_displayed', true
|
||||
pp = new Raphael('browser-icon-container', 35, 35)
|
||||
if getBrowserName() is 'Safari'
|
||||
pp.path(safariIconPath).attr({fill: "#000", stroke: "none"})
|
||||
$('#notification-text').html("Sorry,<br/>Safari doesn't support WebRTC")
|
||||
else if getBrowserName() is 'IE'
|
||||
pp.path(ieIconPath).attr({fill: "#000", stroke: "none"})
|
||||
$('#notification-text').html("Sorry,<br/>IE doesn't support WebRTC")
|
||||
else
|
||||
pp.path(settingsIconPath).attr({fill: "#000", stroke: "none"})
|
||||
$('.notification.ui-widget-content p').css('font-size', '11px') # to make sure the text fits the dialog box
|
||||
$('#notification-text').html("Sorry,<br/>your browser doesn't support WebRTC")
|
||||
$('#notification').dialog('open')
|
||||
setTimeout () -> # waits 2 sec, then hides the notification
|
||||
$('#notification').dialog('close')
|
||||
$('.joinAudioButton').blur()
|
||||
setTimeout () -> # waits 0.5 sec (time to hide the notification), then removes the icons
|
||||
pp.remove()
|
||||
$('.notification').removeClass('webrtc-support-notification')
|
||||
setInSession 'webrtc_notification_is_displayed', false
|
||||
, 500
|
||||
, 2000
|
||||
else
|
||||
if !BBB.amIInAudio()
|
||||
Tracker.autorun (comp) ->
|
||||
if BBB.amIInAudio() # display notification when you are in audio
|
||||
$('#notification').addClass('joined-audio-notification')
|
||||
$("#browser-icon-container").remove() # remove the space taken up by the unused icon
|
||||
setInSession 'webrtc_notification_is_displayed', true
|
||||
|
||||
if BBB.amIListenOnlyAudio() # notify the type of audio joined
|
||||
$('#notification-text').html("You've joined the Listen Only Audio")
|
||||
else
|
||||
$('#notification-text').html("You've joined the audio")
|
||||
|
||||
$('#notification').dialog('open')
|
||||
setTimeout () ->
|
||||
$('#notification').dialog('close') # close the entire notification
|
||||
$('.joinAudioButton').blur()
|
||||
setTimeout () ->
|
||||
setInSession 'webrtc_notification_is_displayed', false
|
||||
, 500
|
||||
, 3000
|
||||
comp.stop()
|
||||
|
||||
# this method gets called from either mobile or desktop UI
|
||||
# this method will adjust the UI to compensate for the new audio button
|
||||
introToAudio = ({isMobile} = {}) ->
|
||||
@ -71,48 +120,6 @@ Template.footer.helpers
|
||||
|
||||
Template.header.events
|
||||
"click .joinAudioButton": (event) ->
|
||||
if getInSession('webrtc_notification_is_displayed') is false # prevents the notification from displaying until the previous one is hidden
|
||||
if !isWebRTCAvailable() # verifies if the browser supports WebRTC
|
||||
$('.notification').addClass('webrtc-support-notification')
|
||||
setInSession 'webrtc_notification_is_displayed', true
|
||||
pp = new Raphael('browser-icon-container', 35, 35)
|
||||
if getBrowserName() is 'Safari'
|
||||
pp.path(safariIconPath).attr({fill: "#000", stroke: "none"})
|
||||
$('#notification-text').html("Sorry,<br/>Safari doesn't support WebRTC")
|
||||
else if getBrowserName() is 'IE'
|
||||
pp.path(ieIconPath).attr({fill: "#000", stroke: "none"})
|
||||
$('#notification-text').html("Sorry,<br/>IE doesn't support WebRTC")
|
||||
else
|
||||
pp.path(settingsIconPath).attr({fill: "#000", stroke: "none"})
|
||||
$('.notification.ui-widget-content p').css('font-size', '11px') # to make sure the text fits the dialog box
|
||||
$('#notification-text').html("Sorry,<br/>your browser doesn't support WebRTC")
|
||||
$('#notification').dialog('open')
|
||||
setTimeout () -> # waits 2 sec, then hides the notification
|
||||
$('#notification').dialog('close')
|
||||
$('.joinAudioButton').blur()
|
||||
setTimeout () -> # waits 0.5 sec (time to hide the notification), then removes the icons
|
||||
pp.remove()
|
||||
$('.notification').removeClass('webrtc-support-notification')
|
||||
setInSession 'webrtc_notification_is_displayed', false
|
||||
, 500
|
||||
, 2000
|
||||
else
|
||||
if !BBB.amISharingAudio()
|
||||
Tracker.autorun (comp) ->
|
||||
if BBB.amISharingAudio()
|
||||
$('.notification').addClass('joined-audio-notification')
|
||||
setInSession 'webrtc_notification_is_displayed', true
|
||||
$('#notification-text').html("You've joined the audio")
|
||||
$('#notification').dialog('open')
|
||||
setTimeout () ->
|
||||
$('#notification').dialog('close')
|
||||
$('.joinAudioButton').blur()
|
||||
setTimeout () ->
|
||||
$('.notification').removeClass('joined-audio-notification')
|
||||
setInSession 'webrtc_notification_is_displayed', false
|
||||
, 500
|
||||
, 2000
|
||||
comp.stop()
|
||||
introToAudio(isMobile: false)
|
||||
|
||||
"click .chatBarIcon": (event) ->
|
||||
@ -163,8 +170,6 @@ Template.header.events
|
||||
"click .hideNavbarIcon": (event) ->
|
||||
$(".tooltip").hide()
|
||||
toggleNavbar()
|
||||
# "click .settingsIcon": (event) ->
|
||||
# alert "settings"
|
||||
|
||||
"click .usersListIcon": (event) ->
|
||||
$(".tooltip").hide()
|
||||
@ -253,9 +258,11 @@ Template.main.rendered = ->
|
||||
# we pass in a named boolean parameter the whether we wish to join audio as listen only or not
|
||||
$("#microphone").click ->
|
||||
joinVoiceCall @, isListenOnly: false
|
||||
displayWebRTCNotification()
|
||||
|
||||
$("#listen_only").click ->
|
||||
joinVoiceCall @, isListenOnly: true
|
||||
displayWebRTCNotification()
|
||||
|
||||
$("#dialog").dialog(
|
||||
modal: true
|
||||
|
||||
@ -56,14 +56,13 @@
|
||||
{{/if}} -->
|
||||
</div>
|
||||
<div class='audioControllersSection'>
|
||||
<!-- Join/hang up audio call -->
|
||||
{{#if isCurrentUserSharingAudio}}
|
||||
<!-- This button is for leaving audio -->
|
||||
<!-- We are in a form of audio -->
|
||||
{{#if amIInAudio}}
|
||||
<div class='hiddenNavbarSection'>
|
||||
<!-- display the button for leaving audio -->
|
||||
{{> makeButton btn_class="navbarIconToggleActive audioFeedIcon navbarButton audioButton leaveAudioButton" i_class="ion-volume-mute" sharingAudio=true rel="tooltip" data_placement="bottom" title="Leave Audio Call"}}
|
||||
</div>
|
||||
{{#if isCurrentUserListenOnly}}
|
||||
{{#if amIListenOnlyAudio}}
|
||||
<!-- shows you are listen only. Will not handle clicks. Only for display -->
|
||||
<i class="icon ion-speakerphone btn navbarButton audioButton listenOnlyIcon" rel="tooltip" data-placement="bottom" title="Listen Only"></i>
|
||||
{{else}}
|
||||
@ -82,9 +81,7 @@
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<div class='hiddenNavbarSection'>
|
||||
<div id="shareMicrophonePanel">
|
||||
{{> makeButton btn_class="audioFeedIcon navbarButton audioButton joinAudioButton" i_class="glyphicon glyphicon-headphones" sharingAudio=false rel="tooltip" data_placement="bottom" title="Join Audio Call"}}
|
||||
</div>
|
||||
{{> makeButton btn_class="audioFeedIcon navbarButton audioButton joinAudioButton" i_class="glyphicon glyphicon-headphones" sharingAudio=false rel="tooltip" data_placement="bottom" title="Join Audio Call"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -102,7 +99,6 @@
|
||||
<div class="navbarTitle navbarSection"><span>{{getMeetingName}}</span></div>
|
||||
<div class="navbarSettingsButtons navbarSection">
|
||||
<!-- {{> makeButton id="userId" btn_class="settingsIcon navbarButton" i_class="glyphicon glyphicon-cog" rel="tooltip" data_placement="bottom" title="Settings"}} -->
|
||||
<!-- {{> makeButton btn_class="hideNavbarIcon navbarButton" i_class="glyphicon glyphicon-chevron-up" rel="tooltip" data_placement="bottom" title="Hide Navbar"}} -->
|
||||
{{> makeButton btn_class="signOutIcon navbarButton" i_class="glyphicon glyphicon-log-out" rel="tooltip" data_placement="bottom" title="Logout"}}
|
||||
</div>
|
||||
</div>
|
||||
@ -196,10 +192,35 @@
|
||||
{{> makeButton btn_class="chatBarIcon slideButton" i_class="glyphicon glyphicon-comment" rel="tooltip" data_placement="right" title="Show Message Pane"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if isCurrentUserSharingAudio}}
|
||||
{{> makeButton btn_class="navbarIconToggleActive audioFeedIcon slideButton" i_class="ion-volume-mute" sharingAudio=true rel="tooltip" data_placement="right" title="Leave Audio Call"}}
|
||||
{{#if amIInAudio}}
|
||||
<!-- This button is for leaving audio -->
|
||||
<div class='hiddenNavbarSection'>
|
||||
<!-- display the button for leaving audio -->
|
||||
{{> makeButton btn_class="navbarIconToggleActive audioFeedIcon navbarButton audioButton leaveAudioButton" i_class="ion-volume-mute" sharingAudio=true rel="tooltip" data_placement="bottom" title="Leave Audio Call"}}
|
||||
</div>
|
||||
{{#if amIListenOnlyAudio}}
|
||||
<!-- shows you are listen only. Will not handle clicks. Only for display -->
|
||||
<i class="icon ion-speakerphone btn navbarButton audioButton listenOnlyIcon" rel="tooltip" data-placement="bottom" title="Listen Only"></i>
|
||||
{{else}}
|
||||
{{#if isCurrentUserMuted}}
|
||||
<!-- if you are muted the button representing your status will show volume off -->
|
||||
{{> makeButton btn_class="muteIcon navbarButton audioButton" i_class="glyphicon glyphicon-volume-off" sharingAudio=true rel="tooltip" data_placement="bottom" title="Unmute"}}
|
||||
{{else}}
|
||||
{{#if isCurrentUserTalking}}
|
||||
<!-- you are talking. Display a high volume/volume up representing voice activity -->
|
||||
{{> makeButton btn_class="navbarIconToggleActive muteIcon navbarButton audioButton" i_class="glyphicon glyphicon-volume-up" sharingAudio=true rel="tooltip" data_placement="bottom" title="Mute"}}
|
||||
{{else}}
|
||||
<!-- you are not talking. Display low volume/volume down representing no voice activity -->
|
||||
{{> makeButton btn_class="navbarIconToggleActive muteIcon navbarButton audioButton" i_class="glyphicon glyphicon-volume-down" sharingAudio=true rel="tooltip" data_placement="bottom" title="Mute"}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{> makeButton btn_class="audioFeedIcon slideButton" i_class="glyphicon glyphicon-headphones" sharingAudio=false rel="tooltip" data_placement="right" title="Join Audio Call"}}
|
||||
<div class='hiddenNavbarSection'>
|
||||
<div id="shareMicrophonePanel">
|
||||
{{> makeButton btn_class="audioFeedIcon navbarButton audioButton joinAudioButton" i_class="glyphicon glyphicon-headphones" sharingAudio=false rel="tooltip" data_placement="bottom" title="Join Audio Call"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if isCurrentUserRaisingHand}}
|
||||
|
||||
@ -519,12 +519,11 @@ body {
|
||||
|
||||
background: grey;
|
||||
&.webrtc-support-notification {
|
||||
width: 300px !important;
|
||||
width: 500px !important;
|
||||
height: 50px !important;
|
||||
}
|
||||
&.joined-audio-notification {
|
||||
width: 200px !important;
|
||||
height: 32px !important;
|
||||
width: 500px !important;
|
||||
#browser-icon-container {
|
||||
display: none;
|
||||
}
|
||||
@ -537,7 +536,6 @@ body {
|
||||
&.ui-widget-content p {
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
height: 35px;
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
}
|
||||
@ -568,9 +566,7 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Custom alert box */
|
||||
|
||||
/* Logout menu's properties on mobile devices in landscape orientation */
|
||||
.landscape-mobile-logout-dialog {
|
||||
@media @landscape {
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<span class="userListSettingIcon glyphicon glyphicon-facetime-video" rel="tooltip" data-placement="bottom" title="{{user.name}} is sharing their webcam"></span>
|
||||
{{/if}}
|
||||
|
||||
{{#if isUserSharingAudio userId}}
|
||||
{{#if isUserInAudio userId}}
|
||||
<!-- if the user is listen only, only display the one icon -->
|
||||
{{#if isUserListenOnly userId}}
|
||||
{{#if isUserListenOnlyAudio userId}}
|
||||
<span class="userListSettingIcon glyphicon glyphicon-headphones" title="Listening only"></span>
|
||||
{{else}}
|
||||
{{#if isCurrentUser userId}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user