As you probably recall, in chapter 2 we started building the AirTube application, which allows users to search YouTube and play back videos. We made tremendous progress with the application in that chapter. But we’ve yet to implement one of the key features of the application: allowing the user to download videos for offline play- back. We didn’t build that functionality in chapter 2 for good reason: we didn’t yet know how to do it. But with the knowledge we’ve gained in this chapter, we’re ready to tackle the job.
Although we’ve seen the theory behind what we’re about to do, we haven’t yet seen a practical example of it. Thus far in the chapter, we’ve seen practical examples of how to read from and write to local files, but not how to read from an internet resource and write that to a local file. That’s what we’re going to do here. We need to download an .flv file from the internet and save it to a file locally on the user’s com- puter. We’ll also use the same process to download the thumbnail image for the video.
149 Writing to files with AirTube
To implement this new feature in the AirTube application, complete the following steps:
1 Open the ApplicationData class for the AirTube project and update the code to add a downloadProgress property as shown in listing 3.20. (Changes are shown in bold.) We’ll use this property to monitor download progress for the video. On its own it doesn’t do much. But we’ll update the value from the ser- vice class, as you’ll see in just a minute.
package com.manning.airtube.data { import flash.events.Event;
import flash.events.EventDispatcher;
public class ApplicationData extends EventDispatcher { static private var _instance:ApplicationData;
private var _videos:Array;
private var _currentVideo:AirTubeVideo;
private var _downloadProgress:Number;
[Bindable(event="videosChanged")]
public function set videos(value:Array):void { _videos = value;
dispatchEvent(new Event("videosChanged"));
}
public function get videos():Array { return _videos;
}
[Bindable(event="currentVideoChanged")]
public function set currentVideo(value:AirTubeVideo):void { _currentVideo = value;
dispatchEvent(new Event("currentVideoChanged"));
}
public function get currentVideo():AirTubeVideo { return _currentVideo;
}
[Bindable(event="downloadProgressChanged")]
public function set downloadProgress(value:Number):void { _downloadProgress = value;
dispatchEvent(new Event("downloadProgressChanged"));
}
public function get downloadProgress():Number { return _downloadProgress;
}
public function ApplicationData() { }
static public function getInstance():ApplicationData {
Listing 3.20 Adding the downloadProgress to the ApplicationData class
if(_instance == null) {
_instance = new ApplicationData();
}
return _instance;
} } }
2 Open the AirTubeService class, and add the code shown in listing 3.21. The changes are shown in bold. We’re adding one public method called saveToOff- line(), which initiates the download of the thumbnail and video files, and then we’re adding the necessary handler methods.
package com.manning.airtube.services {
import com.adobe.webapis.youtube.YouTubeService;
import com.adobe.webapis.youtube.events.YouTubeServiceEvent;
import com.manning.airtube.data.AirTubeVideo;
import com.manning.airtube.data.ApplicationData;
import com.manning.airtube.utilities.YouTubeFlvUrlRetriever;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.filesystem.File;
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;
import flash.net.URLRequest;
import flash.net.URLStream;
import flash.utils.ByteArray;
public class AirTubeService {
static private var _instance:AirTubeService;
private var _proxied:YouTubeService;
private var _flvFile:File;
private var _imageFile:File;
private var _downloadingVideo:AirTubeVideo;
public function set key(value:String):void { _proxied.apiKey = value;
}
public function AirTubeService() { _proxied = new YouTubeService();
_proxied.addEventListener(
➥YouTubeServiceEvent.VIDEOS_LIST_BY_TAG,
➥getVideosByTagsResultHandler);
}
static public function getInstance():AirTubeService { if(_instance == null) {
_instance = new AirTubeService();
}
return _instance;
Listing 3.21 Adding the saveToOffline() to the AirTubeService class
151 Writing to files with AirTube
}
public function getVideosByTags(tags:String):void { if(_proxied.apiKey.length == 0) {
throw Error("YouTube API key not set");
}
_proxied.videos.listByTag(tags);
}
private function getVideosByTagsResultHandler(
➥event:YouTubeServiceEvent):void {
var videos:Array = event.data.videoList as Array;
for(var i:Number = 0; i < videos.length; i++) { videos[i] = new AirTubeVideo(videos[i]);
}
ApplicationData.getInstance().videos = videos;
}
public function configureVideoForPlayback(video:AirTubeVideo):
➥void {
ApplicationData.getInstance().currentVideo = video;
if(video.flvUrl == null) {
new YouTubeFlvUrlRetriever().getUrl(video);
} }
public function saveToOffline(video:AirTubeVideo):void { _downloadingVideo = video;
_flvFile = File.applicationStorageDirectory.resolvePath(
➥"videos/" + video.video.id + ".flv");
var videoLoader:URLStream = new URLStream();
videoLoader.load(new URLRequest(video.flvUrl));
videoLoader.addEventListener(Event.COMPLETE, videoDownloadCompleteHandler);
videoLoader.addEventListener(ProgressEvent.PROGRESS,
➥videoDownloadProgressHandler);
_imageFile = File.applicationStorageDirectory.resolvePath(
➥"thumbnails/" + video.video.id + ".jpg");
var imageLoader:URLStream = new URLStream();
imageLoader.load(new URLRequest(video.video.thumbnailUrl));
imageLoader.addEventListener(ProgressEvent.PROGRESS,
➥imageDownloadProgressHandler);
}
private function videoDownloadProgressHandler(event:
➥ProgressEvent):void {
var loader:URLStream = event.target as URLStream;
var bytes:ByteArray = new ByteArray();
loader.readBytes(bytes);
var writer:FileStream = new FileStream();
writer.open(_flvFile, FileMode.APPEND);
writer.writeBytes(bytes);
writer.close();
var ratio:Number = event.bytesLoaded / event.bytesTotal;
ApplicationData.getInstance().downloadProgress = ratio;
Pass in video to save B
Create destination video path
C
Create destination image path D
Read available bytes
E
Write to video file
F
}
private function videoDownloadCompleteHandler(event:Event):void { _downloadingVideo.offline = true;
ApplicationData.getInstance().downloadProgress = 0;
}
private function imageDownloadProgressHandler(event:
➥ProgressEvent):void {
var loader:URLStream = event.target as URLStream;
var bytes:ByteArray = new ByteArray();
loader.readBytes(bytes);
var writer:FileStream = new FileStream();
writer.open(_imageFile, FileMode.APPEND);
writer.writeBytes(bytes);
writer.close();
} } }
The saveToOffline() method B uses URLStream objects to start downloading the video file and the thumbnail, and creates the paths to the destination files
C D using the video’s ID to create unique file names. As the video and thumb- nail download, the progress events get handled by the videoDownloadPro- gressHandler() and imageDownloadProgressHandler() methods, respectively.
Each of these methods does the same basic thing: uses the readBytes() method of the URLStream object to read all the available bytes E G and then writes those bytes to the end of the destination file F H.
3 Update the video window with a few minor changes. You can do this by opening VideoWindow.mxml and adding the code shown in bold from listing 3.22.
<?xml version="1.0" encoding="utf-8"?>
<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="400" type="utility" closing="closingHandler(event);"
creationComplete="creationCompleteHandler();">
<mx:Script>
<![CDATA[
import com.manning.airtube.services.AirTubeService;
import com.manning.airtube.data.ApplicationData;
[Bindable]
private var _applicationData:ApplicationData;
private function creationCompleteHandler():void { _applicationData = ApplicationData.getInstance();
}
private function closingHandler(event:Event):void { event.preventDefault();
visible = false;
}
private function saveOffline():void {
Listing 3.22 Updating VideoWindow.mxml to support downloading videos Read the available
G
Write to image file
H
153 Summary
AirTubeService.getInstance().saveToOffline(
➥_applicationData.currentVideo);
} ]]>
</mx:Script>
<mx:VBox>
<mx:Label text="{_applicationData.currentVideo.video.title}" />
<mx:VideoDisplay id="videoDisplay"
source="{_applicationData.currentVideo.flvUrl}"
width="400" height="300" />
<mx:HBox id="progressContainer" width="100%"
visible="{_applicationData.downloadProgress > 0}"
includeInLayout="{progressContainer.visible}">#1 <mx:Label text="download progress" />
<mx:HSlider id="progressIndicator" enabled="false" width="100%"
minimum="0" maximum="1"
value="{_applicationData.downloadProgress}" />
</mx:HBox>
<mx:HBox>
<mx:Button id="playPauseButton" label="Pause"
click="togglePlayback();" />
<mx:Button id="saveOfflineButton" label="Save Offline"
visible="{!_applicationData.currentVideo.offline}"
enabled="{!(_applicationData.downloadProgress > 0)}"
click="saveOffline();" />
</mx:HBox>
</mx:VBox>
</mx:Window>
The changes to the code in VideoWindow.mxml are fairly modest. All we’ve done is add a slider to show download progress B and a button to save the video C. The components are data bound to properties in ApplicationData, and when the user clicks to save the video, we just call the service method to save the video.
And that wraps up this stage of the AirTube application. Of course, we haven’t yet cre- ated a way to view videos the user has saved offline. For that, we’ll be using a local data- base, which is covered in chapter 5. If you run the AirTube application now, you can see the button to save a video for offline playback; if you click it, you'll see the down- load progress indicator update in the window. Also, if you look in the application stor- age directory for the AirTube application, you’ll see the saved .flv and .jpg files.