diff --git a/bigbluebutton-html5/app/client/globals.coffee b/bigbluebutton-html5/app/client/globals.coffee
index d8d520acb2d40622c53a93241a0a79ae5ef21586..b09fb6657395df6b6b22df54249b9f35ea4db52a 100755
--- a/bigbluebutton-html5/app/client/globals.coffee
+++ b/bigbluebutton-html5/app/client/globals.coffee
@@ -210,6 +210,49 @@ Handlebars.registerHelper 'whiteboardSize', (section) ->
@toggleMenu = ->
setInSession 'display_menu', !getInSession 'display_menu'
+@removeFullscreenStyles = ->
+ $('#whiteboard-paper').removeClass('verticallyCentered')
+ $('#chat').removeClass('invisible')
+ $('#users').removeClass('invisible')
+ $('#navbar').removeClass('invisible')
+ $('.fullscreenButton').removeClass('exitFullscreenButton')
+ $('.fullscreenButton').addClass('whiteboardFullscreenButton')
+ $('.fullscreenButton i').removeClass('ion-arrow-shrink')
+ $('.fullscreenButton i').addClass('ion-arrow-expand')
+
+@enterWhiteboardFullscreen = ->
+ element = document.getElementById('whiteboard')
+ if element.requestFullscreen
+ element.requestFullscreen()
+ else if element.mozRequestFullScreen
+ element.mozRequestFullScreen()
+ $('.fullscreenButton').addClass('iconFirefox') # browser-specific icon sizing
+ else if element.webkitRequestFullscreen
+ element.webkitRequestFullscreen()
+ $('.fullscreenButton').addClass('iconChrome') # browser-specific icon sizing
+ else if element.msRequestFullscreen
+ element.msRequestFullscreen()
+ $('#chat').addClass('invisible')
+ $('#users').addClass('invisible')
+ $('#navbar').addClass('invisible')
+ $('.fullscreenButton').removeClass('whiteboardFullscreenButton')
+ $('.fullscreenButton').addClass('exitFullscreenButton')
+ $('.fullscreenButton i').removeClass('ion-arrow-expand')
+ $('.fullscreenButton i').addClass('ion-arrow-shrink')
+ $('#whiteboard-paper').addClass('verticallyCentered')
+ $('#whiteboard').bind 'webkitfullscreenchange', (e) ->
+ if document.webkitFullscreenElement is null
+ $('#whiteboard').unbind('webkitfullscreenchange')
+ $('.fullscreenButton').removeClass('iconChrome')
+ removeFullscreenStyles()
+ redrawWhiteboard()
+ $(document).bind 'mozfullscreenchange', (e) -> # target is always the document in Firefox
+ if document.mozFullScreenElement is null
+ $(document).unbind('mozfullscreenchange')
+ $('.fullscreenButton').removeClass('iconFirefox')
+ removeFullscreenStyles()
+ redrawWhiteboard()
+
@closePushMenus = ->
setInSession 'display_usersList', false
setInSession 'display_menu', false
diff --git a/bigbluebutton-html5/app/client/stylesheets/style.less b/bigbluebutton-html5/app/client/stylesheets/style.less
index b9e54ddcc90a3ad7de9fa6ede23e53f109176a61..c97d0e5a91b49b0de363df7fc102bd705e1c8a4c 100755
--- a/bigbluebutton-html5/app/client/stylesheets/style.less
+++ b/bigbluebutton-html5/app/client/stylesheets/style.less
@@ -473,3 +473,24 @@ body {
.top-bar {
line-height: 0;
}
+
+.btn {
+ @media @mobile-portrait-with-keyboard, @mobile-portrait {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ i {
+ @media @desktop-portrait, @landscape {
+ font-size: 30px;
+ }
+ @media @mobile-portrait-with-keyboard, @mobile-portrait {
+ font-size: 80px;
+ }
+ }
+}
+
+.verticallyCentered {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+}
diff --git a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less
index 392b3ac1da9826921f34f6c7565dd94213a4c540..48fbf53f94c8191a597e62131f49b703885660ec 100755
--- a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less
+++ b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less
@@ -66,6 +66,7 @@
}
#whiteboard-container {
+ position: relative; // makes the fullscreen button's absolute position work
@media @landscape {
display: -moz-flex;
display: -ms-flexbox;
@@ -165,3 +166,59 @@
#presentationProgress {
font-size: 25px;
}
+
+.whiteboardFullscreenButton {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin-bottom: 0;
+ padding: 0;
+ &, &:hover {
+ background-color: transparent;
+ }
+ i {
+ color: black;
+ }
+ @media @landscape {
+ height: 50px;
+ width: 50px;
+ }
+ @media @mobile-portrait-with-keyboard, @mobile-portrait {
+ height: 100px;
+ width: 10%;
+ }
+}
+
+.exitFullscreenButton {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin-bottom: 0;
+ padding: 0;
+ &, &:hover {
+ background-color: transparent;
+ }
+ i {
+ color: black;
+ }
+ @media @landscape {
+ height: 50px;
+ width: 50px;
+ }
+ @media @mobile-portrait-with-keyboard, @mobile-portrait {
+ height: 5%;
+ width: 10%;
+ }
+}
+
+.iconChrome {
+ i {
+ font-size: 200%;
+ }
+}
+
+.iconFirefox {
+ i {
+ font-size: 500%;
+ }
+}
diff --git a/bigbluebutton-html5/app/client/views/sharedTemplates.html b/bigbluebutton-html5/app/client/views/sharedTemplates.html
index 48a9005bd57960a35c197f21cc57c8f562d568a9..33901af70805311e7ed04c1a4750394af7d4f5ae 100755
--- a/bigbluebutton-html5/app/client/views/sharedTemplates.html
+++ b/bigbluebutton-html5/app/client/views/sharedTemplates.html
@@ -4,7 +4,7 @@
<span>{{text}}</span>
{{else}}
{{#if i_class}}
- <i class="{{i_class}}" style="font-size:30px"></i><span>{{label}}</span>
+ <i class="{{i_class}}"></i><span>{{label}}</span>
{{/if}}
{{/if}}
</button>
diff --git a/bigbluebutton-html5/app/client/views/whiteboard/whiteboard.coffee b/bigbluebutton-html5/app/client/views/whiteboard/whiteboard.coffee
index a09de921d90c10deedacf1fbb7b49c614c023f86..a07c3cf59635500644ed3b18c7e581f392a0598c 100755
--- a/bigbluebutton-html5/app/client/views/whiteboard/whiteboard.coffee
+++ b/bigbluebutton-html5/app/client/views/whiteboard/whiteboard.coffee
@@ -21,76 +21,22 @@ Template.whiteboard.helpers
return ''
Template.whiteboard.events
- "click .previousSlide":(event) ->
+ 'click .previousSlide':(event) ->
BBB.goToPreviousPage()
- "click .nextSlide":(event) ->
+ 'click .nextSlide':(event) ->
BBB.goToNextPage()
'click .switchSlideButton': (event) ->
$('.tooltip').hide()
- "click .fullscreenWhiteboardButton": (event, template) ->
- elem = document.getElementById("whiteboard")
- if elem.requestFullscreen
- elem.requestFullscreen()
- else if elem.msRequestFullscreen
- elem.msRequestFullscreen()
- else if elem.mozRequestFullScreen
- elem.mozRequestFullScreen()
- else if elem.webkitRequestFullscreen
- elem.webkitRequestFullscreen()
- $('#whiteboard-paper').addClass('invisible')
- $('#chat').addClass('invisible')
- $('#users').addClass('invisible')
- $('#footer').addClass('invisible')
- $('#navbar').addClass('invisible')
- $('#main').css('padding-top', '0px')
- $('html').css('height', '100%')
- $('html').css('width', '100%')
- $('html').css('overflow', 'hidden')
- $('body').css('height', '100%')
- $('body').css('width', '100%')
- $('body').css('overflow', 'hidden')
- setTimeout () ->
- redrawWhiteboard () ->
- $('#whiteboard-paper').removeClass('invisible')
- $('#whiteboard-paper').addClass('vertically-centered')
- , 100
+ 'click .whiteboardFullscreenButton': (event, template) ->
+ enterWhiteboardFullscreen()
- # Listens for the fullscreen state change (user leaves fullscreen mode)
-
- # Chrome
- $('#whiteboard').bind 'webkitfullscreenchange', (e) ->
- if document.webkitFullscreenElement is null
- $('#whiteboard').unbind('webkitfullscreenchange')
- $('#whiteboard-paper').removeClass('vertically-centered')
- $('#chat').removeClass('invisible')
- $('#users').removeClass('invisible')
- $('#footer').removeClass('invisible')
- $('#navbar').removeClass('invisible')
- $('html').css('height', '')
- $('html').css('width', '')
- $('html').css('overflow', '')
- $('body').css('height', '')
- $('body').css('width', '')
- $('body').css('overflow', '')
- $('#main').css('padding-top', '')
- redrawWhiteboard()
- # Firefox
- $(document).bind 'mozfullscreenchange', (e) -> # target is always the document in Firefox
- if document.mozFullScreenElement is null
- $(document).unbind('mozfullscreenchange')
- $('#whiteboard-paper').removeClass('vertically-centered')
- $('#chat').removeClass('invisible')
- $('#users').removeClass('invisible')
- $('#footer').removeClass('invisible')
- $('#navbar').removeClass('invisible')
- $('html').css('height', '')
- $('html').css('width', '')
- $('html').css('overflow', '')
- $('body').css('height', '')
- $('body').css('width', '')
- $('body').css('overflow', '')
- $('#main').css('padding-top', '')
- redrawWhiteboard()
+ 'click .exitFullscreenButton': (event, template) ->
+ if document.exitFullscreen
+ document.exitFullscreen()
+ else if document.mozCancelFullScreen
+ document.mozCancelFullScreen()
+ else if document.webkitExitFullscreen
+ document.webkitExitFullscreen()
diff --git a/bigbluebutton-html5/app/client/views/whiteboard/whiteboard.html b/bigbluebutton-html5/app/client/views/whiteboard/whiteboard.html
index 330aa39dc6f2777067934b2393803c9ea481b781..8acdbb59b248d0180ec089107b0e57ff5e2e775e 100755
--- a/bigbluebutton-html5/app/client/views/whiteboard/whiteboard.html
+++ b/bigbluebutton-html5/app/client/views/whiteboard/whiteboard.html
@@ -6,6 +6,9 @@
<div id="whiteboard-container" class="{{whiteboardSize}}">
<div id="whiteboard-paper">
</div>
+ {{#if isMobile}}
+ {{> makeButton btn_class="fullscreenButton whiteboardFullscreenButton" i_class="ion-arrow-expand"}}
+ {{/if}}
</div>
{{#if isCurrentUserPresenter}}
<div id="controllers">