Updating an Existing Application with the iOS Skin

You can use the new iOS skin to update an existing application. Below is a walkthrough that illustrates how to integrate the iOS skin into the BasicPlaybackSampleApp.

  1. If you have not already done so, download and unzip the latest version of the Ooyala mobile SDK for iOS. Also download the Ooyala Skin SDK for iOS which contains a necessary framework. Finally, clone the ios-sample-apps repository by entering the following command: 
    git clone https://github.com/ooyala/ios-sample-apps.git
  2. From the cloned ios-sample-apps directory, go into the BasicPlaybackSampleApp subdirectory. Open the BasicPlaybackSampleApp.xcodeproj file in XCode.
  3. Add the JavascriptCore, Social, and MessageUI frameworks. For example, to do this for JavascriptCore, click on the BasicPlaybackSampleApp project (blue icon) in the top-lefthand corner. Go to the Linked Frameworks and Libraries section. Click the + plus button to add a new framework. Scroll down to find and add the JavascriptCore.framework framework.
  4. Add libz.tbd, a zip compression library. To do this, in the project, go to the Build Phases tab. Under the Link Binary With Libraries section, press the + plus button. Search for and add libz.tbd.
  5. Add the OoyalaSkinSDK.framework framework. The easiest way to do this is by dragging the framework into a suitable folder in the lefthand column. Make sure that the "Copy items if needed" box is checked. If necessary, add the folder's path to the Framework Search Paths slot under Build Settings in the Search Paths Settings. To add a new framework search path, click on the slot, add a colon : (separated by spaces) after the existing paths, and then insert the new path.
  6. Go to the Build Settings tab. Under the Linking section, add -ObjC to the slot that says "Other Linker Flags".
  7. Drag the main.jsbundle file from the OoyalaSkinSDK-iOS directory into the BasicPlaybackSampleApp > Players directory structure on the lefthand column of the Xcode project. Make sure that the "Copy items if needed" box is checked.
  8. You can make your own skin configuration files. Alternately, there is a skin-config subdirectory in the OoyalaSkinSDK-iOS folder. From your skin configuration files, drag the en.json, es.json, zh.json, and skin.json files into the Players directory. Make sure that the "Copy items if needed" box is checked.
  9. In BasicPlaybackSampleApp > Players > BasicSimplePlaybackViewController.m, change #import <OoyalaSDK/OOOoyalaPlayerViewController.h> to #import <OoyalaSkinSDK/OOSkinViewController.h>.
  10. Add #import <OoyalaSDK/OODiscoveryOptions.h> and #import <OoyalaSkinSDK/OOSkinOptions.h> to the list of imports.
  11. In the same file, replace all instances of OOOoyalaPlayerViewController with OOSkinViewController. This can be done by pressing CMD + F and performing find and replace.
  12. Since OOSkinViewController needs more information than just a player to be initialized, replace the line 
    self.ooyalaPlayerViewController = [[OOSkinViewController alloc] initWithPlayer:player];
    in the -(void) viewDidLoad method with
    OODiscoveryOptions *discoveryOptions = [[OODiscoveryOptions alloc] initWithType:OODiscoveryTypePopular limit:10 timeout:60];
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
OOSkinOptions *skinOptions = [[OOSkinOptions alloc] initWithDiscoveryOptions:discoveryOptions jsCodeLocation:jsCodeLocation configFileName:@"skin" overrideConfigs:nil];
self.ooyalaPlayerViewController = [[OOSkinViewController alloc] initWithPlayer:player skinOptions:skinOptions parent:self.playerView  launchOptions:nil];
  13. Drag the Fonts folder inside of the OoyalaSkinSDK-iOS directory into the root of the BasicPlaybackSampleApp XCode project. Make sure that the "Copy items if needed" box is checked. Also make sure that it is being copied as a group (not just a folder reference).
  14. Open Supporting Files > Info.plist. Press the + plus button by the Information Property List slot to add a new field. Add a field with the key 'Fonts provided by application' (this can be found in the drop-down menu). Set the array elements to be the ttf file names inside the Fonts folder (i.e., alice.ttf and fontawesome-webfont.ttf).
  15. Press the PLAY button to build and run the app.

To summarize, the following is the list of requirements for Ooyala Skin SDK to work in your application:

  • Ooyala SDK, JavascriptCore, Social, and MessageUI should be linked.
  • Ooyala Skin SDK
    • Should be linked.
    • SDK version in the skin package's VERSION file should match the VERSION file in the Ooyala SDK.
  • Fonts
    • Should be bundled.
    • Should be part of Info.plist.
  • Localization Files (en.json, zh.json, etc.), skin-config.json, and main.jsbundle should be bundled.
  • Objective-C code should use the OOSkinViewController, and it should use main.jsbundle as the jsCodeLocation.
  • Other Linker Flags should be set to -ObjC.
Parent topic: Player Skin for iOS

해당 내용이 도움 되었습니까?

해당 내용 평가하기.
AAA