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