support embedded video in help dialogue
[potlatch2.git] / net / systemeD / potlatch2 / help / VideoPlayer.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0">
3         <mx:ViewStack id="videoStack" width="100%" height="100%">
4                 <mx:Box id="previewContainer">
5                         <mx:Image id="preview" width="100%" height="100%" source="{previewImage}" 
6                                 click="playVideo()" />
7                 </mx:Box>
8                 <mx:Box id="videoContainer">
9                         <mx:VideoDisplay id="video" 
10                                 metadataReceived="prepareVideo()"
11                                 click="playVideo()"
12                                 autoPlay="false"
13                                 width="100%" height="100%" />
14                 </mx:Box>
15         </mx:ViewStack>
16         <mx:HBox backgroundColor="#6495ED" width="100%" height="16"> 
17                 <mx:Image id="playButton" width="16" height="16" source="{playImage}" click="playVideo()" />
18                 <mx:HSlider width="100%" id="progressBar" liveDragging="true" 
19                         allowTrackClick="false" 
20                         thumbPress="progressThumbPress(event);" 
21                         thumbRelease="progressThumbRelease(event);" />
22         </mx:HBox> 
23
24         <mx:Script> 
25                 <![CDATA[ 
26
27                         /** VideoPlayer component for P2 help dialog.
28                                 Embed like this:
29
30                                 <help:VideoPlayer width="400" height="300" 
31                                         file="videos/test.flv" 
32                                         previewImage="videos/test_preview.png" />
33                                         
34                                 previewImage is the image that will be shown in the video pane
35                                 before the user clicks 'play' - usually a still of the first frame
36                                 of the video. (This means the video file won't be downloaded unless 
37                                 the user actually wants it.)
38                         */
39
40                         [Bindable] public var file:String;
41                         [Bindable] public var previewImage:String; 
42
43                         [Bindable] [Embed(source="../../../../embedded/video_play.png" )] public var playImage:Class;
44                         [Bindable] [Embed(source="../../../../embedded/video_pause.png")] public var pauseImage:Class;
45
46                         public function playVideo():void {
47                                 if (videoStack.selectedChild==previewContainer) {
48                                         preview.alpha=0.5;
49                                         video.source=file;
50                                         video.play();
51                                         playButton.source=pauseImage;
52                                 } else if (video.playing) {
53                                         video.pause();
54                                         playButton.source=playImage;
55                                 } else {
56                                         video.play();
57                                         playButton.source=pauseImage;
58                                 }
59                         }
60                         public function prepareVideo():void {
61                                 videoStack.selectedChild=videoContainer;
62                                 progressBar.maximum=video.totalTime;
63                         }
64                         public function progressThumbPress(event:Event):void { 
65                                 video.pause();
66                                 playButton.source=playImage;
67                         }
68                         public function progressThumbRelease(event:Event):void { 
69                                 video.playheadTime = event.currentTarget.value; 
70                         } 
71
72                 ]]> 
73         </mx:Script>
74 </mx:VBox>