<?xml version="1.0" encoding="utf-8"?>
<s:List xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="de.dtele.ui.components.*"
borderVisible="true"
contentBackgroundAlpha="0"
width="100%"
height="60%"
skinClass="de.dtele.ui.components.skins.ResourceViewerSkin"
addedToStage="onAddedToStage(event)"
keyDown="onKeyDown(event)">
<fx:Script>
<![CDATA[
import de.dtele.control.MediaManager;
import de.dtele.data.KeyCode;
/**
* Stores information about the state before switching to fullscreen
*
* Inspired by spark.components.VideoPlayer
*/
protected var beforeFullScreenInfo:Object = {};
/**
* Sets up a listener to watch for fullscreen state changes of the stage
*/
protected function onAddedToStage(event:Event):void {
this.stage.addEventListener(FullScreenEvent.FULL_SCREEN, this.onFullScreen);
}
/**
* Changes the appearance of the viewer in regular and fullscreen view
*
* @see spark.components.VideoPlayer#fullScreenButton_clickHandler
*/
protected function onFullScreen(e:FullScreenEvent):void {
if (e.fullScreen) {
this.beforeFullScreenInfo = {
x: this.x,
y: this.y,
explicitWidth: this.explicitWidth,
explicitHeight: this.explicitHeight,
percentWidth: this.percentWidth,
percentHeight: this.percentHeight
};
this.setLayoutBoundsSize(this.stage.fullScreenWidth, this.stage.fullScreenHeight, true);
this.explicitWidth = this.width;
this.explicitHeight = this.height;
this.setLayoutBoundsPosition(0, 0, true);
} else {
this.x = this.beforeFullScreenInfo.x;
this.y = this.beforeFullScreenInfo.y;
this.explicitWidth = this.beforeFullScreenInfo.explicitWidth;
this.explicitHeight = this.beforeFullScreenInfo.explicitHeight;
this.percentWidth = this.beforeFullScreenInfo.percentWidth;
this.percentHeight = this.beforeFullScreenInfo.percentHeight;
}
}
/**
* Triggers actions based on user input like switching to other
* resources, toggling fullscreen and closing the viewer
*/
protected function onKeyDown(e:KeyboardEvent):void {
e.preventDefault();
switch (e.keyCode) {
case KeyCode.F:
this.stage.displayState = (
this.stage.displayState == StageDisplayState.NORMAL
? StageDisplayState.FULL_SCREEN
: StageDisplayState.NORMAL
);
break;
case Keyboard.ESCAPE:
case KeyCode.Q:
case KeyCode.X:
MediaManager.instance.selectedResource = null;
break;
}
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout gap="50"/>
</s:layout>
</s:List>