Merge pull request #5729 from capilkey/screenshare-loadingbar

Add a loading bar for WebRTC screenshare start up in the Flash client
This commit is contained in:
Fred Dixon 2018-06-20 18:29:26 -04:00 committed by GitHub
commit 83e40c83c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 3 deletions

View File

@ -447,6 +447,7 @@ bbb.screensharePublish.WebRTCRetryExtensionInstallation.label = After you have i
bbb.screensharePublish.WebRTCExtensionFailFallback.label = Unable to detect screen sharing extension. Click here to try installing again.
bbb.screensharePublish.WebRTCPrivateBrowsingWarning.label = It seems you may be Incognito or using private browsing. Make sure under your extension settings you allow the extension the run in Incognito/private browsing.
bbb.screensharePublish.WebRTCExtensionInstallButton.label = Click here to install
bbb.screensharePublish.WebRTC.starting = Starting Screen Sharing
bbb.screensharePublish.sharingMessage= This is your screen being shared
bbb.screenshareView.title = Screen Sharing
bbb.screenshareView.fitToWindow = Fit to Window

View File

@ -0,0 +1,69 @@
package org.bigbluebutton.modules.screenshare.view.components {
import flash.events.TimerEvent;
import flash.text.TextLineMetrics;
import flash.utils.Timer;
import mx.controls.ProgressBar;
import mx.controls.ProgressBarLabelPlacement;
import mx.controls.ProgressBarMode;
import mx.core.UITextField;
import mx.core.mx_internal;
use namespace mx_internal;
public class AnimatedProgressBar extends ProgressBar {
private const TOTAL_LENGTH:uint = 15;
private const UPDATES_PER_SECOND:uint = 4;
private var timer:Timer;
private var totalProgress:Number;
private var currentProgress:Number;
public function AnimatedProgressBar() {
super();
timer = new Timer(1000/UPDATES_PER_SECOND, 0);
timer.addEventListener(TimerEvent.TIMER, onTimer);
totalProgress = TOTAL_LENGTH * UPDATES_PER_SECOND;
mode = ProgressBarMode.MANUAL;
minimum = 0;
maximum = totalProgress;
labelPlacement = ProgressBarLabelPlacement.TOP;
}
public function startAnimation():void {
timer.start();
visible = includeInLayout = true;
currentProgress = 0;
}
public function endAnimation():void {
timer.stop();
visible = includeInLayout = false;
}
private function onTimer(e:TimerEvent):void {
setProgress(++currentProgress, totalProgress);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
// There's no TOP_CENTER label placement so we need to create one
var labelWidth:Number = getStyle("labelWidth");
var top:Number = getStyle("paddingTop");
var lineMetrics:TextLineMetrics = measureText(label);
var textWidth:Number = isNaN(labelWidth) ?
lineMetrics.width + UITextField.TEXT_WIDTH_PADDING :
labelWidth;
_labelField.move((unscaledWidth - textWidth) / 2, top);
}
}
}

View File

@ -397,7 +397,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
btnClosePublish.enabled = true;
connectingDots.startAnimation();
connectingProgress.startAnimation();
videoHolder.includeInLayout = videoHolder.visible = false;
}
@ -455,7 +455,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
if (info.hasOwnProperty("encoder")) {
// The encoder is sent to the client when the stream has actually started sending data. We can use
// it to know when the video is actually playing
connectingDots.endAnimation();
connectingProgress.endAnimation();
videoHolder.includeInLayout = videoHolder.visible = true;
if (info.hasOwnProperty("width")) {
@ -534,7 +534,9 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
<mx:VBox id="mainContainer" width="100%" height="100%" paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2">
<mx:HBox width="100%" height="90%" id="mainElement" verticalAlign="middle" horizontalAlign="center">
<ss:AnimatedDots id="connectingDots" styleName="animatedDotsStyle" />
<ss:AnimatedProgressBar id="connectingProgress" width="260" visible="false"
horizontalCenter="0" verticalCenter="0"
label="{ResourceUtil.getInstance().getString('bbb.screensharePublish.WebRTC.starting')}"/>
</mx:HBox>
<mx:HBox includeIn="dispFullRegionControlBar" width="100%" horizontalAlign="center">
<mx:Button id="btnClosePublish"