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

Merge pull request #3743 from riadvice/black-video-chat-layout

Browse Source 
Make "Video Chat" layout background dark
This commit is contained in:
Chad Pilkey 2017-03-22 15:57:38 -04:00 committed by GitHub
commit e9258c77bf
6 changed files with 89 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
bigbluebutton-client/branding/default/style/css/BBBDefault.css
View File

@ -755,6 +755,16 @@ MDIWindow { /*None of the following properties are overridden by the MDIWindow c
borderThicknessRight: 3; borderThicknessRight: 3;
} }
.videoDockStyleFocusChatLayout {
borderColor: #42444c;
backgroundColor: #42444c;
}
.videoDockStyleNoFocusChatLayout {
borderColor: #32343b;
backgroundColor: #42444c;
}
.presentationSlideViewStyle { .presentationSlideViewStyle {
backgroundColor: #b9babc; backgroundColor: #b9babc;
} }

2
bigbluebutton-client/src/org/bigbluebutton/common/CustomMdiWindow.as
View File

@ -23,8 +23,6 @@ package org.bigbluebutton.common
import flexlib.mdi.containers.MDIWindow; import flexlib.mdi.containers.MDIWindow;
import flexlib.mdi.managers.MDIManager; import flexlib.mdi.managers.MDIManager;
import mx.utils.ObjectUtil;
/** /**
* This class exists so we can properly handle context menus on MDIWindow * This class exists so we can properly handle context menus on MDIWindow
* instances. Also, we'll be able in the future to properly handle shortcuts * instances. Also, we'll be able in the future to properly handle shortcuts

17
bigbluebutton-client/src/org/bigbluebutton/modules/layout/events/LayoutChangedEvent.as
View File

@ -1,17 +0,0 @@
package org.bigbluebutton.modules.layout.events
{
import flash.events.Event;
public class LayoutChangedEvent extends Event
{
public static const LAYOUT_CHANGED:String = "layout changed event";
public var layoutName:String;
public function LayoutChangedEvent(layoutName:String)
{
super(LAYOUT_CHANGED, true, false);
this.layoutName = layoutName;
}
}
}

3
bigbluebutton-client/src/org/bigbluebutton/modules/layout/managers/LayoutManager.as
View File

@ -313,7 +313,8 @@ package org.bigbluebutton.modules.layout.managers
private function updateCurrentLayout(layout:LayoutDefinition):LayoutDefinition { private function updateCurrentLayout(layout:LayoutDefinition):LayoutDefinition {
//trace(LOG + "updateCurrentLayout"); //trace(LOG + "updateCurrentLayout");
if (layout != null) { if (layout != null) {
if (_currentLayout) _currentLayout.currentLayout = false; if (_currentLayout)
_currentLayout.currentLayout = false;
_currentLayout = layout; _currentLayout = layout;
//trace(LOG + "updateCurrentLayout - currentLayout = [" + layout.name + "]"); //trace(LOG + "updateCurrentLayout - currentLayout = [" + layout.name + "]");
layout.currentLayout = true; layout.currentLayout = true;

260
bigbluebutton-client/src/org/bigbluebutton/modules/videoconf/views/AvatarWindow.mxml
View File

@ -1,260 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
BigBlueButton open source conferencing system - http://www.bigbluebutton.org/
Copyright (c) 2012 BigBlueButton Inc. and by respective authors (see below).
This program is free software; you can redistribute it and/or modify it under the
terms of the GNU Lesser General Public License as published by the Free Software
Foundation; either version 3.0 of the License, or (at your option) any later
version.
BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License along
with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
-->
<pubVid:VideoWindowItf
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:pubVid="org.bigbluebutton.modules.videoconf.business.*"
implements="org.bigbluebutton.common.IBbbModuleWindow"
styleNameFocus="videoAvatarStyleFocus"
styleNameNoFocus="videoAvatarStyleNoFocus"
creationComplete="onCreationComplete()"
width="{defaultWidth + 6}" height="{defaultHeight + 6}"
xmlns:mate="http://mate.asfusion.com/"
resize="onResize()"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
layout="absolute">
<mate:Listener type="{BBBEvent.USER_VOICE_MUTED}" method="handleUserVoiceMutedEvent" />
<mate:Listener type="{EventConstants.USER_TALKING}" method="handleUserTalkingEvent" />
<mate:Listener type="{SwitchedPresenterEvent.SWITCHED_PRESENTER}" method="handleSwitchedPresenterEvent" />
<mate:Listener type="{MadePresenterEvent.SWITCH_TO_PRESENTER_MODE}" method="handleMadePresenterEvent" />
<mate:Listener type="{BBBEvent.USER_VOICE_JOINED}" method="handleNewRoleEvent" />
<mate:Listener type="{BBBEvent.USER_VOICE_LEFT}" method="handleNewRoleEvent" />
<mate:Listener type="{CloseAllWindowsEvent.CLOSE_ALL_WINDOWS}" method="closeWindow" />
<mx:Script>
<![CDATA[
import org.as3commons.logging.api.getClassLogger;
import org.as3commons.logging.api.ILogger;
import org.bigbluebutton.modules.users.views.UsersWindow;
import flexlib.mdi.events.MDIWindowEvent;
import mx.core.UIComponent;
import mx.events.ResizeEvent;
import org.bigbluebutton.common.Images;
import org.bigbluebutton.common.Role;
import org.bigbluebutton.common.events.CloseWindowEvent;
import org.bigbluebutton.common.events.LocaleChangeEvent;
import org.bigbluebutton.core.EventConstants;
import org.bigbluebutton.core.UsersUtil;
import org.bigbluebutton.core.events.CoreEvent;
import org.bigbluebutton.core.events.SwitchedLayoutEvent;
import org.bigbluebutton.core.managers.UserManager;
import org.bigbluebutton.main.events.BBBEvent;
import org.bigbluebutton.main.events.MadePresenterEvent;
import org.bigbluebutton.main.events.SwitchedPresenterEvent;
import org.bigbluebutton.main.views.MainCanvas;
import org.bigbluebutton.modules.videoconf.business.TalkingButtonOverlay;
import org.bigbluebutton.modules.videoconf.events.CloseAllWindowsEvent;
import org.bigbluebutton.modules.videoconf.events.OpenVideoWindowEvent;
import org.bigbluebutton.modules.videoconf.events.StartBroadcastEvent;
import org.bigbluebutton.modules.videoconf.model.VideoConfOptions;
import org.bigbluebutton.util.i18n.ResourceUtil;
private static const LOGGER:ILogger = getClassLogger(AvatarWindow);
[Bindable] private var defaultWidth:Number = 320;
[Bindable] private var defaultHeight:Number = 240;
[Bindable] public var glowColor:String = "";
[Bindable] public var glowBlurSize:Number = 0;
private var avatarWidth:Number = 320;
private var avatarHeight:Number = 240;
private var videoconfOptions:VideoConfOptions = new VideoConfOptions();
private var windowType:String = "AvatarWindowType";
override public function getWindowType():String {
return windowType;
}
private var loader:Loader;
private var request:URLRequest;
private function loadAvatar():void {
request = new URLRequest(UsersUtil.getAvatarURL());
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadingComplete);
loader.load(request);
}
private function onLoadingComplete(event:Event):void {
// Save the size of the avatar image.
avatarWidth = loader.content.width;
avatarHeight = loader.content.height;
onResize();
}
private function onCreationComplete():void {
this.glowColor = videoconfOptions.glowColor;
this.glowBlurSize = videoconfOptions.glowBlurSize;
loader = new Loader();
_videoHolder = new UIComponent();
_videoHolder.width = avatarWidth;
_videoHolder.height = avatarHeight;
this.addChild(_videoHolder);
_videoHolder.addChild(loader);
_video = new Video();
_video.width = avatarWidth;
_video.height = avatarHeight;
this.minWidth = _minWidth;
this.minHeight = _minHeight;
maximizeRestoreBtn.visible = false;
this.showCloseButton = videoconfOptions.showCloseButton;
this.resizable = false;
setAspectRatio(avatarWidth, avatarHeight);
addEventListener(MDIWindowEvent.RESIZE_START, onResizeStart);
addEventListener(MDIWindowEvent.RESIZE_END, onResizeEnd);
addEventListener(MouseEvent.MOUSE_OVER, showButtons);
addEventListener(MouseEvent.MOUSE_OUT, hideButtons);
startPublishing();
loadAvatar();
}
override protected function onResize():void {
super.onResize();
if (loader != null && _videoHolder != null) {
if (avatarIsSmallerThanWindow()) {
// The avatar image is smaller than the window. Just center the image.
_video.width = loader.width = avatarWidth;
_video.height = loader.height = avatarHeight;
} else {
// The avatar is bigger than the window. Fit into the window maintaining aspect ratio.
fitAvatarToWindow();
}
_video.x = loader.x = (this.width - PADDING_HORIZONTAL - loader.width) / 2;
_video.y = loader.y = (this.height - PADDING_VERTICAL - loader.height) / 2;
}
}
private function fitAvatarToWindow():void {
if (_videoHolder.width - PADDING_HORIZONTAL < _videoHolder.height - PADDING_VERTICAL) {
fitToHeightAndAdjustWidthToMaintainAspectRatio();
} else {
fitToWidthAndAdjustHeightToMaintainAspectRatio();
}
}
private function avatarIsSmallerThanWindow():Boolean {
return (avatarWidth < _videoHolder.width - PADDING_HORIZONTAL) && (avatarHeight < _videoHolder.height - PADDING_VERTICAL);
}
private function fitToWidthAndAdjustHeightToMaintainAspectRatio():void {
var aspect:Number = avatarHeight / avatarWidth;
_video.width = loader.width = _videoHolder.width - PADDING_HORIZONTAL;
// Maintain aspect-ratio
_video.height = loader.height = loader.width * aspect;
}
private function fitToHeightAndAdjustWidthToMaintainAspectRatio():void {
var aspect:Number = avatarWidth / avatarHeight;
_video.height = loader.height = _videoHolder.height - PADDING_VERTICAL;
// Maintain aspect-ratio
_video.width = loader.width = loader.height * aspect;
}
private function handleMadePresenterEvent(event:MadePresenterEvent):void {
LOGGER.debug("******** Avatar: HandleMadePresenter event *********");
updateControlButtons();
}
private function handleSwitchedPresenterEvent(event:SwitchedPresenterEvent):void {
LOGGER.debug("******** Avatar: handleSwitchedPresenterEvent event *********");
updateControlButtons();
}
private function handleNewRoleEvent(event:Event):void {
updateControlButtons();
}
private function handleUserVoiceMutedEvent(event:BBBEvent):void {
if (event.payload.userID == userID) {
userMuted(event.payload.muted);
}
}
private function handleUserTalkingEvent(event:CoreEvent):void {
if (event.message.userID == userID) {
if (event.message.talking) {
notTalkingEffect.end();
talkingEffect.play([this]);
simulateClick();
} else {
talkingEffect.end();
notTalkingEffect.play([this]);
}
}
}
private function startPublishing():void{
this.resizable = true;
onResize();
createButtons();
addControlButtons();
updateButtonsPosition();
}
override public function close(event:MouseEvent=null):void{
closeThisWindow();
super.close(event);
}
private function closeWindow(e:CloseAllWindowsEvent):void{
closeThisWindow();
}
private function closeThisWindow():void {
LOGGER.debug("* Closing avatar window for user [{0}] *", [userID]);
}
]]>
</mx:Script>
<mx:Glow id="talkingEffect" duration="500" alphaFrom="1.0" alphaTo="0.3"
blurXFrom="0.0" blurXTo="{glowBlurSize}" blurYFrom="0.0" blurYTo="{glowBlurSize}" color="{glowColor}"/>
<mx:Glow id="notTalkingEffect" duration="500" alphaFrom="0.3" alphaTo="1.0"
blurXFrom="{glowBlurSize}" blurXTo="0.0" blurYFrom="{glowBlurSize}" blurYTo="0.0" color="{glowColor}"/>
</pubVid:VideoWindowItf>

23
bigbluebutton-client/src/org/bigbluebutton/modules/videoconf/views/VideoDock.mxml
View File

@ -33,6 +33,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
creationComplete="onCreationComplete()"> creationComplete="onCreationComplete()">
<mate:Listener type="{ShortcutEvent.FOCUS_VIDEO_WINDOW}" method="focusWindow" /> <mate:Listener type="{ShortcutEvent.FOCUS_VIDEO_WINDOW}" method="focusWindow" />
<mate:Listener type="{SwitchedLayoutEvent.SWITCHED_LAYOUT_EVENT}" method="onLayoutChanged" />
<mx:Script> <mx:Script>
<![CDATA[ <![CDATA[
@ -41,6 +42,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
import mx.core.UIComponent; import mx.core.UIComponent;
import org.bigbluebutton.core.KeyboardUtil; import org.bigbluebutton.core.KeyboardUtil;
import org.bigbluebutton.core.events.SwitchedLayoutEvent;
import org.bigbluebutton.main.events.ShortcutEvent; import org.bigbluebutton.main.events.ShortcutEvent;
import org.bigbluebutton.main.views.MainCanvas; import org.bigbluebutton.main.views.MainCanvas;
import org.bigbluebutton.modules.videoconf.model.VideoConfOptions; import org.bigbluebutton.modules.videoconf.model.VideoConfOptions;
@ -50,6 +52,8 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
private var keyCombos:Object; private var keyCombos:Object;
private var disp:Dispatcher = new Dispatcher(); private var disp:Dispatcher = new Dispatcher();
private var darkMode:Boolean;
private function onCreationComplete():void { private function onCreationComplete():void {
hotkeyCapture(); hotkeyCapture();
titleBarOverlay.tabIndex = videoOptions.baseTabIndex; titleBarOverlay.tabIndex = videoOptions.baseTabIndex;
@ -89,7 +93,11 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
override protected function resourcesChanged():void { override protected function resourcesChanged():void {
super.resourcesChanged(); super.resourcesChanged();
if (!darkMode) {
this.title = ResourceUtil.getInstance().getString("bbb.videodock.title"); this.title = ResourceUtil.getInstance().getString("bbb.videodock.title");
} else {
this.title = "";
}
if (titleBarOverlay != null) { if (titleBarOverlay != null) {
titleBarOverlay.accessibilityName = ResourceUtil.getInstance().getString('bbb.videoDock.titleBar'); titleBarOverlay.accessibilityName = ResourceUtil.getInstance().getString('bbb.videoDock.titleBar');
@ -115,6 +123,21 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
focusManager.setFocus(titleBarOverlay); focusManager.setFocus(titleBarOverlay);
} }
private function onLayoutChanged(e:SwitchedLayoutEvent):void {
if(e.layoutID != "bbb.layout.name.videochat"){
setStyle("styleNameFocus", "videoDockStyleFocus");
setStyle("styleNameNoFocus", "videoDockStyleNoFocus");
showControls = true;
this.title = ResourceUtil.getInstance().getString("bbb.videodock.title");
} else {
setStyle("styleNameFocus", "videoDockStyleFocusChatLayout");
setStyle("styleNameNoFocus", "videoDockStyleNoFocusChatLayout");
showControls = false;
this.title = "";
}
styleChanged("styleName");
}
private function remoteMinimize(e:ShortcutEvent):void { private function remoteMinimize(e:ShortcutEvent):void {
if (!minimized) { if (!minimized) {
this.minimize(); this.minimize();