Rendering a Playlist with the Brightcove App SDK for iOS (part 1)

This is part 1 of a two part article about rendering playlists in apps built using the Brightcove App SDK for iOS. In this part 1, we will render a playlist in its simplest form: a UITableView will be populated with the names of the videos in the playlist and a UINavigationBar will display the playlist name. You can download a zip file that includes the source code for this project.

The main elements we'll cover in this article are:

• Creating the project in Xcode
• The PlaylistAppDelegate class
• The PlaylistViewController class
  

Creating the project in Xcode

First we need to create a new project in Xcode. Open the new project dialog and select Window-based Application from the iPhone OS category as a template for the new project.

Name the project MyPlaylist, then click Save.

 

After our project is created, we need a new view to display a playlist's contents. Open the new file dialog and select the Cocoa Touch Class category. Once there, you want to create a UITableViewController subclass. Do this by clicking the UIViewController subclass file type, then in the Options section, make sure the UITableViewController subclass checkbox is checked.

 Click Next and name the UITableViewController subclass MyPlaylistViewController.m.

 

PlaylistAppDelegate class

Now that we have all of the files needed, open MyPlaylistAppDelegate.h. A UINavigationController is going to provide the base UI for our app, so we need to add an instance variable to store the UINavigationController. Under the window instance variable, add the navigationController variable.

UIWindow *window;
UINavigationController *navigationController;

Save MyPlaylistAppDelegate.h and open MyPlaylistAppDelegate.m. First, we want to observe good memory management and release the navigationController variable in the MyPlaylistAppDelegate dealloc method:

- (void)dealloc {
    [navigationController release];
    [window release];
    [super dealloc];
}

Next, we import the MyPlaylistViewController header file:

#import "MyPlaylistAppDelegate.h"
#import "MyPlaylistViewController.h"
@implementation MyPlaylistAppDelegate

In the applicationDidFinishLaunching method, we want to create the UINavigationController instance and add a MyPlaylistViewController.h instance to it:

- (void)applicationDidFinishLaunching:(UIApplication *)application {
    // Override point for customization after application launch
    MyPlaylistViewController *playlistViewController =
       [[MyPlaylistViewController alloc] init];
    navigationController = [[UINavigationController alloc]
        initWithRootViewController:playlistViewController];
    [playlistViewController release];

    [window addSubview:[navigationController view]];
    [window makeKeyAndVisible];
}

The PlaylistViewController class

Now we can move on to our view class. Open MyPlaylistViewController.h. When we make a call to the Brightcove API, we want to store the resulting playlist, so let's add a property to this class to store the data. The property type is BCPlaylist, so we'll need to import that first:

#import <UIKit/UIKit.h>
#import "BCPlaylist.h"
@interface MyPlaylistViewController : UITableViewController {

Accessor methods can be auto-generated for you in Objective C 2.0. We'll take advantage of this to write less code for our playlist instance variable. Define the variable in the interface, then add the property directive:

@interface MyPlaylistViewController : UITableViewController {
BCPlaylist *playlist;
}
@property (nonatomic, retain) BCPlaylist *playlist;

Only one more file to go. Open MyPlaylistViewController.m. You will notice that Xcode has generated a lot of code for us when we created the file. We'll be working with the BCMediaAPI class in this file as well, so we need to import it. 

#import "MyPlaylistViewController.h"
#import "BCMediaAPI.h"
@implementation MyPlaylistViewController

Now we finish the synthesized accessor method for the playlist instance variable. In the implementation section, add the synthesize directive:

@implementation MyPlaylistViewController
@synthesize playlist;

In the dealloc method, we'll add a release for the playlist instance variable to maintain good memory management.

- (void)dealloc {
    [playlist release];
    [super dealloc];
}

Loading the playlist data is easy with the BCMediaAPI class. Scroll to the viewDidLoad method and add a new instance of the BCMediaAPI class as a local variable. Then assign the results to our playlist property and set the MyPlaylistViewController title property to the playlist property name value.

- (void)viewDidLoad {
    [super viewDidLoad];

    NSError *error;
    BCMediaAPI *api = [[BCMediaAPI alloc] initWithReadToken:@"YOUR API KEY HERE"];
    self.playlist = [api findPlaylistById:YOUR PLAYLIST ID HERE error:&error];
    self.title = playlist.name;

    [api release];

Edit the (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section method to return the number of videos in the playlist property. This sets the number of rows that will render in the view.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return [playlist.videos count];
}

Finally, we want to tell the row cells what text to display. In the (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath method you will find a lot of code setup for us already. All we need to do is set the cells' textLabel.text value to the video names in the playlist.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                    reuseIdentifier:CellIdentifier] autorelease];
    }

    // Set up the cell...
    BCVideo *video = [playlist.videos objectAtIndex:indexPath.row];
    cell.textLabel.text = video.name;

    return cell;
} 

Now if we compile our app, we should see the rows of video names and the playlist title. If you ran into an error, don't worry. You can download a zip file that includes the source code for this project and input your own Brightcove Media API key and playlist id.

What's next?

Did you notice that the app seems to hang until the playlist data comes back? How could we improve on this app and make it better: Display video thumbnails? Display a loading animation? We'll be tackling these problems in part 2.