From 582dda57272cc5ea4bb141c3c16ca033cd673196 Mon Sep 17 00:00:00 2001
From: Yuki MIZUNO <mizuyuu0904@gmail.com>
Date: Thu, 4 Dec 2014 18:41:01 +0900
Subject: [PATCH] Update UI theme

* new dark UI
* new app lists
---
 .../Logo.imageset/Contents.json               |  12 +++
 .../Logo.imageset/Limelight-logo.pdf          | Bin 0 -> 3890 bytes
 Limelight/UIAppView.m                         |   9 ++-
 Limelight/UIComputerView.m                    |   2 +
 .../ViewControllers/MainFrameViewController.h |   4 +-
 .../ViewControllers/MainFrameViewController.m |  75 +++++++++---------
 iPad.storyboard                               |  62 +++++++++++----
 iPhone.storyboard                             |  68 ++++++++++++----
 8 files changed, 162 insertions(+), 70 deletions(-)
 create mode 100644 Limelight/Images.xcassets/Logo.imageset/Contents.json
 create mode 100644 Limelight/Images.xcassets/Logo.imageset/Limelight-logo.pdf

diff --git a/Limelight/Images.xcassets/Logo.imageset/Contents.json b/Limelight/Images.xcassets/Logo.imageset/Contents.json
new file mode 100644
index 00000000..a87a79d7
--- /dev/null
+++ b/Limelight/Images.xcassets/Logo.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "Limelight-logo.pdf"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/Limelight/Images.xcassets/Logo.imageset/Limelight-logo.pdf b/Limelight/Images.xcassets/Logo.imageset/Limelight-logo.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..dd841bdaa4cfd6007e1f3f790ca193bc50fee9fc
GIT binary patch
literal 3890
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
DYC04+

literal 0
HcmV?d00001

diff --git a/Limelight/UIAppView.m b/Limelight/UIAppView.m
index 645d65db..de9cfa92 100644
--- a/Limelight/UIAppView.m
+++ b/Limelight/UIAppView.m
@@ -26,6 +26,9 @@ static int LABEL_DY = 20;
     [_appButton setBackgroundImage:[UIImage imageNamed:@"NoAppImage"] forState:UIControlStateNormal];
     [_appButton sizeToFit];
     [_appButton addTarget:self action:@selector(appClicked) forControlEvents:UIControlEventTouchUpInside];
+    
+    // Remove Shadow and label
+    /*
     _appButton.layer.shadowColor = [[UIColor blackColor] CGColor];
     _appButton.layer.shadowOffset = CGSizeMake(5,8);
     _appButton.layer.shadowOpacity = 0.7;
@@ -36,9 +39,11 @@ static int LABEL_DY = 20;
     _appLabel.center = CGPointMake(_appButton.bounds.origin.x + (_appButton.bounds.size.width / 2), _appButton.bounds.origin.y + _appButton.bounds.size.height + LABEL_DY);
     
     [self updateBounds];
-    [self addSubview:_appButton];
     [self addSubview:_appLabel];
+     */
     
+    [self addSubview:_appButton];
+    [self sizeToFit];
     
     return self;
 }
@@ -56,6 +61,8 @@ static int LABEL_DY = 20;
 
 - (void) updateAppImage {
     if (_app.appImage != nil) {
+        _appButton.frame = CGRectMake(0, 0, _app.appImage.size.width / 2, _app.appImage.size.height / 2);
+        self.frame = CGRectMake(0, 0, _app.appImage.size.width / 2, _app.appImage.size.height / 2);
         [_appButton setBackgroundImage:_app.appImage forState:UIControlStateNormal];
         [self setNeedsDisplay];
     }
diff --git a/Limelight/UIComputerView.m b/Limelight/UIComputerView.m
index b97b91ef..7cc72450 100644
--- a/Limelight/UIComputerView.m
+++ b/Limelight/UIComputerView.m
@@ -40,6 +40,7 @@ static int LABEL_DY = 20;
 
     [_hostLabel setText:[_computer displayName]];
     [_hostLabel sizeToFit];
+    _hostLabel.textColor = [UIColor whiteColor];
     [_hostButton addTarget:self action:@selector(hostClicked) forControlEvents:UIControlEventTouchUpInside];
     _hostLabel.center = CGPointMake(_hostButton.frame.origin.x + (_hostButton.frame.size.width / 2), _hostButton.frame.origin.y + _hostButton.frame.size.height + LABEL_DY);
     [self updateBounds];
@@ -66,6 +67,7 @@ static int LABEL_DY = 20;
     
     [_hostLabel setText:@"Add Host"];
     [_hostLabel sizeToFit];
+    _hostLabel.textColor = [UIColor whiteColor];
     _hostLabel.center = CGPointMake(_hostButton.frame.origin.x + (_hostButton.frame.size.width / 2), _hostButton.frame.origin.y + _hostButton.frame.size.height + LABEL_DY);
     
     UIImageView* addIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AddComputerIcon"]];
diff --git a/Limelight/ViewControllers/MainFrameViewController.h b/Limelight/ViewControllers/MainFrameViewController.h
index cc8a15b6..43d1df88 100644
--- a/Limelight/ViewControllers/MainFrameViewController.h
+++ b/Limelight/ViewControllers/MainFrameViewController.h
@@ -15,8 +15,8 @@
 #import "AppManager.h"
 #import "SWRevealViewController.h"
 
-@interface MainFrameViewController : UIViewController <MDNSCallback, PairCallback, HostCallback, AppCallback, AppAssetCallback, NSURLConnectionDelegate, SWRevealViewControllerDelegate>
-@property (strong, nonatomic) IBOutlet UIBarButtonItem *settingsSidebarButton;
+@interface MainFrameViewController : UICollectionViewController <MDNSCallback, PairCallback, HostCallback, AppCallback, AppAssetCallback, NSURLConnectionDelegate, SWRevealViewControllerDelegate>
+@property (strong, nonatomic) IBOutlet UIButton *limelightLogoButton;
 
 + (StreamConfiguration*) getStreamConfiguration;
 
diff --git a/Limelight/ViewControllers/MainFrameViewController.m b/Limelight/ViewControllers/MainFrameViewController.m
index 9c992e6f..3cf3a9a3 100644
--- a/Limelight/ViewControllers/MainFrameViewController.m
+++ b/Limelight/ViewControllers/MainFrameViewController.m
@@ -29,10 +29,10 @@
     
     UIAlertView* _pairAlert;
     UIScrollView* hostScrollView;
-    UIScrollView* appScrollView;
 }
 static NSString* deviceName = @"roth";
 static NSMutableSet* hostList;
+static NSArray* appList;
 static StreamConfiguration* streamConfig;
 
 + (StreamConfiguration*) getStreamConfiguration {
@@ -67,19 +67,16 @@ static StreamConfiguration* streamConfig;
         
         HttpManager* hMan = [[HttpManager alloc] initWithHost:_selectedHost.hostName uniqueId:_uniqueId deviceName:deviceName cert:_cert];
         NSData* appListResp = [hMan executeRequestSynchronously:[hMan newAppListRequest]];
-        NSArray* appList = [HttpManager getAppListFromXML:appListResp];
+        appList = [HttpManager getAppListFromXML:appListResp];
         dispatch_async(dispatch_get_main_queue(), ^{
-            [self updateApps:appList];
+            [self updateApps];
         });
         [AppManager retrieveAppAssets:appList withManager:hMan andCallback:self];
     });
 }
 
 - (void) receivedAssetForApp:(App*)app {
-    NSArray* subviews = [appScrollView subviews];
-    for (UIAppView* appView in subviews) {
-        [appView updateAppImage];
-    }
+    [self.collectionView reloadData];
 }
 
 - (void)displayDnsFailedDialog {
@@ -161,12 +158,8 @@ static StreamConfiguration* streamConfig;
 {
     [super viewDidLoad];
     
-    // Change button color
-    _settingsSidebarButton.tintColor = [UIColor colorWithRed:.2 green:.9 blue:0.f alpha:1.f];
-    
     // Set the side bar button action. When it's tapped, it'll show up the sidebar.
-    _settingsSidebarButton.target = self.revealViewController;
-    _settingsSidebarButton.action = @selector(revealToggle:);
+    [_limelightLogoButton addTarget:self.revealViewController action:@selector(revealToggle:) forControlEvents:UIControlEventTouchDown];
     
     // Set the gesture
     [self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];
@@ -191,20 +184,21 @@ static StreamConfiguration* streamConfig;
     hostScrollView.frame = CGRectMake(0, self.navigationController.navigationBar.frame.origin.y + self.navigationController.navigationBar.frame.size.height, self.view.frame.size.width, self.view.frame.size.height / 2);
     [hostScrollView setShowsHorizontalScrollIndicator:NO];
     
-    appScrollView = [[UIScrollView alloc] init];
-    appScrollView.frame = CGRectMake(0, hostScrollView.frame.size.height, self.view.frame.size.width, self.view.frame.size.height / 2);
-    [appScrollView setShowsHorizontalScrollIndicator:NO];
-    
     [self retrieveSavedHosts];
     [self updateHosts:[hostList allObjects]];
     [self.view addSubview:hostScrollView];
-    [self.view addSubview:appScrollView];
 }
 
 - (void)viewDidAppear:(BOOL)animated
 {
     [super viewDidAppear:animated];
     [self.navigationController setNavigationBarHidden:NO animated:YES];
+    
+    // Hide 1px border line
+    UIImage* fakeImage = [[UIImage alloc] init];
+    [self.navigationController.navigationBar setShadowImage:fakeImage];
+    [self.navigationController.navigationBar setBackgroundImage:fakeImage forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
+    
     _mDNSManager = [[MDNSManager alloc] initWithCallback:self];
     [_mDNSManager searchForHosts];
 }
@@ -255,29 +249,36 @@ static StreamConfiguration* streamConfig;
     }
 }
 
-- (void) updateApps:(NSArray*)apps {
-    [[appScrollView subviews] makeObjectsPerformSelector:@selector(removeFromSuperview)];
-    App* fakeApp = [[App alloc] init];
-    fakeApp.appName = @"No App Name";
-    UIAppView* noAppImage = [[UIAppView alloc] initWithApp:fakeApp andCallback:nil];
-    float prevEdge = -1;
-    UIAppView* appView;
-    for (App* app in apps) {
-        appView = [[UIAppView alloc] initWithApp:app andCallback:self];
-        prevEdge = [self getAppViewX:appView noApp:noAppImage prevEdge:prevEdge];
-        appView.center = CGPointMake(prevEdge, appScrollView.frame.size.height / 2);
-        prevEdge = appView.frame.origin.x + appView.frame.size.width;
-        [appScrollView addSubview:appView];
-    }
-    [appScrollView setContentSize:CGSizeMake(prevEdge + noAppImage.frame.size.width, appScrollView.frame.size.height)];
+- (void) updateApps {
+    [hostScrollView removeFromSuperview];
+    [self.collectionView reloadData];
 }
 
-- (float) getAppViewX:(UIAppView*)app noApp:(UIAppView*)noAppImage prevEdge:(float)prevEdge {
-    if (prevEdge == -1) {
-        return appScrollView.frame.origin.x + app.frame.size.width / 2 + noAppImage.frame.size.width / 2;
-    } else {
-        return prevEdge + app.frame.size.width / 2 + noAppImage.frame.size.width / 2;
+- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
+    UICollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"AppCell" forIndexPath:indexPath];
+    
+    App* app = appList[indexPath.row];
+    UIAppView* appView = [[UIAppView alloc] initWithApp:app andCallback:self];
+    [appView updateAppImage];
+
+    if (appView.bounds.size.width > 10.0) {
+        CGFloat scale = cell.bounds.size.width / appView.bounds.size.width;
+        [appView setCenter:CGPointMake(appView.bounds.size.width / 2 * scale, appView.bounds.size.height / 2 * scale)];
+        appView.transform = CGAffineTransformMakeScale(scale, scale);
     }
+
+    [cell.subviews.firstObject removeFromSuperview]; // Remove a view that was previously added
+    [cell addSubview:appView];
+
+    return cell;
+}
+
+- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
+    return 1; // App collection only
+}
+
+- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
+    return appList.count;
 }
 
 - (BOOL)validatePcSelected {
diff --git a/iPad.storyboard b/iPad.storyboard
index 6aeb9034..6e1f4392 100644
--- a/iPad.storyboard
+++ b/iPad.storyboard
@@ -8,17 +8,48 @@
         <scene sceneID="Me4-Nr-liz">
             <objects>
                 <viewController id="wb7-af-jn8" customClass="MainFrameViewController" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="Icf-Kt-Ai7">
-                        <rect key="frame" x="0.0" y="0.0" width="1024" height="768"/>
-                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
-                    </view>
-                    <navigationItem key="navigationItem" title="Limelight" id="pSu-bl-gL9">
-                        <barButtonItem key="leftBarButtonItem" image="Settings" id="pGu-Vp-WrR"/>
+                    <collectionView key="view" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" indicatorStyle="black" dataMode="prototypes" id="TZj-Lc-M9d">
+                        <rect key="frame" x="0.0" y="0.0" width="1024" height="704"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <inset key="contentInset" minX="40" minY="20" maxX="40" maxY="20"/>
+                        <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="20" minimumInteritemSpacing="20" id="f7l-kG-hJc">
+                            <size key="itemSize" width="150" height="200"/>
+                            <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                            <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                            <inset key="sectionInset" minX="20" minY="20" maxX="20" maxY="20"/>
+                        </collectionViewFlowLayout>
+                        <cells>
+                            <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="AppCell" id="fv6-NS-qsK">
+                                <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+                                <autoresizingMask key="autoresizingMask"/>
+                                <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                                    <rect key="frame" x="0.0" y="0.0" width="150" height="200"/>
+                                    <autoresizingMask key="autoresizingMask"/>
+                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
+                                </view>
+                            </collectionViewCell>
+                        </cells>
+                        <connections>
+                            <outlet property="dataSource" destination="wb7-af-jn8" id="rXt-E0-FUz"/>
+                            <outlet property="delegate" destination="wb7-af-jn8" id="FKP-UO-cQM"/>
+                        </connections>
+                    </collectionView>
+                    <navigationItem key="navigationItem" id="pSu-bl-gL9">
+                        <barButtonItem key="leftBarButtonItem" style="plain" id="mSL-ru-nRm">
+                            <button key="customView" opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" id="Tiq-VS-Ua5">
+                                <rect key="frame" x="101" y="236" width="109" height="46"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                <fontDescription key="fontDescription" name="DevanagariSangamMN" family="Devanagari Sangam MN" pointSize="16"/>
+                                <state key="normal" title="Limelight" image="Logo">
+                                    <color key="titleColor" red="0.3921568627" green="0.91372549020000005" blue="0.17254901959999999" alpha="1" colorSpace="calibratedRGB"/>
+                                    <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
+                                </state>
+                            </button>
+                        </barButtonItem>
                     </navigationItem>
                     <simulatedOrientationMetrics key="simulatedOrientationMetrics" orientation="landscapeRight"/>
                     <connections>
-                        <outlet property="settingsSidebarButton" destination="pGu-Vp-WrR" id="bIM-oj-LgU"/>
+                        <outlet property="limelightLogoButton" destination="Tiq-VS-Ua5" id="cue-NW-Hty"/>
                         <segue destination="OIm-0n-i9v" kind="push" identifier="createStreamFrame" id="7gN-E7-Ips"/>
                     </connections>
                 </viewController>
@@ -38,25 +69,26 @@
                                 <rect key="frame" x="16" y="58" width="151" height="21"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <slider opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" value="10000" minValue="0.0" maxValue="50000" id="JAY-nj-UNz">
                                 <rect key="frame" x="14" y="87" width="213" height="31"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                <color key="tintColor" red="0.3921568627" green="0.91372549020000005" blue="0.17254901959999999" alpha="1" colorSpace="calibratedRGB"/>
                             </slider>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Framerate:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="Aiv-r8-9k2">
                                 <rect key="frame" x="16" y="156" width="83" height="21"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Resolution:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="pYZ-GR-EwO">
                                 <rect key="frame" x="16" y="244" width="87" height="21"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="0" id="ckc-Dm-8ex">
@@ -66,6 +98,7 @@
                                     <segment title="720p"/>
                                     <segment title="1080p"/>
                                 </segments>
+                                <color key="tintColor" red="0.3921568627" green="0.91372549020000005" blue="0.17254901959999999" alpha="1" colorSpace="calibratedRGB"/>
                             </segmentedControl>
                             <segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="1" id="lGK-vl-pdw">
                                 <rect key="frame" x="16" y="185" width="123" height="29"/>
@@ -74,9 +107,10 @@
                                     <segment title="30 Hz"/>
                                     <segment title="60 Hz"/>
                                 </segments>
+                                <color key="tintColor" red="0.3921568627" green="0.91372549020000005" blue="0.17254901959999999" alpha="1" colorSpace="calibratedRGB"/>
                             </segmentedControl>
                         </subviews>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                        <color key="backgroundColor" cocoaTouchSystemColor="viewFlipsideBackgroundColor"/>
                     </view>
                     <simulatedOrientationMetrics key="simulatedOrientationMetrics" orientation="landscapeRight"/>
                     <connections>
@@ -114,7 +148,7 @@
             <objects>
                 <navigationController id="baW-rW-rBd" sceneMemberID="viewController">
                     <simulatedOrientationMetrics key="simulatedOrientationMetrics" orientation="landscapeRight"/>
-                    <navigationBar key="navigationBar" contentMode="scaleToFill" id="RUe-14-4Ya">
+                    <navigationBar key="navigationBar" contentMode="scaleToFill" barStyle="black" translucent="NO" id="RUe-14-4Ya">
                         <rect key="frame" x="0.0" y="0.0" width="768" height="44"/>
                         <autoresizingMask key="autoresizingMask"/>
                     </navigationBar>
@@ -165,7 +199,7 @@
         </scene>
     </scenes>
     <resources>
-        <image name="Settings" width="25" height="25"/>
+        <image name="Logo" width="36" height="36"/>
     </resources>
     <simulatedMetricsContainer key="defaultSimulatedMetrics">
         <simulatedStatusBarMetrics key="statusBar" statusBarStyle="lightContent"/>
diff --git a/iPhone.storyboard b/iPhone.storyboard
index 81d12511..b69acb14 100644
--- a/iPhone.storyboard
+++ b/iPhone.storyboard
@@ -8,19 +8,49 @@
         <scene sceneID="emz-kO-L7q">
             <objects>
                 <viewController id="dgh-JZ-Q7z" customClass="MainFrameViewController" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="RId-Pb-IBX">
-                        <rect key="frame" x="0.0" y="0.0" width="568" height="320"/>
-                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
-                    </view>
+                    <collectionView key="view" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" indicatorStyle="black" dataMode="prototypes" id="Rtu-AT-Alw">
+                        <rect key="frame" x="0.0" y="0.0" width="568" height="256"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <inset key="contentInset" minX="40" minY="20" maxX="40" maxY="20"/>
+                        <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="20" minimumInteritemSpacing="20" id="YcZ-cR-3tK">
+                            <size key="itemSize" width="90" height="120"/>
+                            <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                            <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                            <inset key="sectionInset" minX="20" minY="20" maxX="20" maxY="20"/>
+                        </collectionViewFlowLayout>
+                        <cells>
+                            <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="AppCell" id="Uqv-Di-fzX">
+                                <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+                                <autoresizingMask key="autoresizingMask"/>
+                                <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                                    <rect key="frame" x="0.0" y="0.0" width="90" height="120"/>
+                                    <autoresizingMask key="autoresizingMask"/>
+                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
+                                </view>
+                            </collectionViewCell>
+                        </cells>
+                        <connections>
+                            <outlet property="dataSource" destination="dgh-JZ-Q7z" id="w0a-4o-Htw"/>
+                            <outlet property="delegate" destination="dgh-JZ-Q7z" id="Fn8-LA-OLu"/>
+                        </connections>
+                    </collectionView>
                     <toolbarItems/>
-                    <navigationItem key="navigationItem" title="Limelight" id="1jn-Sf-Xky">
-                        <barButtonItem key="leftBarButtonItem" image="Settings" id="5gr-O1-slj"/>
+                    <navigationItem key="navigationItem" id="1jn-Sf-Xky">
+                        <barButtonItem key="leftBarButtonItem" style="plain" id="zAn-CM-7Yz">
+                            <button key="customView" opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" id="pZ9-ft-T24">
+                                <rect key="frame" x="0.0" y="0.0" width="109" height="46"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                <fontDescription key="fontDescription" name="DevanagariSangamMN" family="Devanagari Sangam MN" pointSize="16"/>
+                                <state key="normal" title="Limelight" image="Logo">
+                                    <color key="titleColor" red="0.3921568627" green="0.91372549020000005" blue="0.17254901959999999" alpha="1" colorSpace="calibratedRGB"/>
+                                    <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
+                                </state>
+                            </button>
+                        </barButtonItem>
                     </navigationItem>
-                    <simulatedToolbarMetrics key="simulatedBottomBarMetrics"/>
                     <simulatedOrientationMetrics key="simulatedOrientationMetrics" orientation="landscapeRight"/>
                     <connections>
-                        <outlet property="settingsSidebarButton" destination="5gr-O1-slj" id="vK6-bY-5h5"/>
+                        <outlet property="limelightLogoButton" destination="pZ9-ft-T24" id="yRw-rK-9lQ"/>
                         <segue destination="mI3-9F-XwU" kind="push" identifier="createStreamFrame" id="Vgc-B6-lvM"/>
                     </connections>
                 </viewController>
@@ -58,34 +88,36 @@
                             <slider opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" value="10000" minValue="0.0" maxValue="50000" id="3nn-MI-9Xu">
                                 <rect key="frame" x="14" y="72" width="204" height="31"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                <color key="tintColor" red="0.39215686274509803" green="0.9137254901960784" blue="0.17254901960784313" alpha="1" colorSpace="calibratedRGB"/>
                             </slider>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Bitrate: 10000 kbps" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="SBv-Wn-LB7">
                                 <rect key="frame" x="17" y="43" width="151" height="21"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <nil key="highlightedColor"/>
                             </label>
-                            <segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="1" id="dLF-qJ-2nY">
+                            <segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" id="dLF-qJ-2nY">
                                 <rect key="frame" x="16" y="156" width="123" height="29"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                 <segments>
                                     <segment title="30 Hz"/>
                                     <segment title="60 Hz"/>
                                 </segments>
+                                <color key="tintColor" red="0.39215686274509803" green="0.9137254901960784" blue="0.17254901960784313" alpha="1" colorSpace="calibratedRGB"/>
                             </segmentedControl>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Framerate:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="Kkv-DF-MAl">
                                 <rect key="frame" x="16" y="127" width="83" height="21"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Resolution:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="8zy-ri-Dqc">
                                 <rect key="frame" x="16" y="206" width="87" height="21"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="0" id="PCM-t4-Sha">
@@ -95,9 +127,10 @@
                                     <segment title="720p"/>
                                     <segment title="1080p"/>
                                 </segments>
+                                <color key="tintColor" red="0.39215686274509803" green="0.9137254901960784" blue="0.17254901960784313" alpha="1" colorSpace="calibratedRGB"/>
                             </segmentedControl>
                         </subviews>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                        <color key="backgroundColor" cocoaTouchSystemColor="viewFlipsideBackgroundColor"/>
                     </view>
                     <simulatedOrientationMetrics key="simulatedOrientationMetrics" orientation="landscapeRight"/>
                     <connections>
@@ -116,9 +149,12 @@
             <objects>
                 <navigationController id="ftZ-kC-fxI" sceneMemberID="viewController">
                     <simulatedOrientationMetrics key="simulatedOrientationMetrics" orientation="landscapeRight"/>
-                    <navigationBar key="navigationBar" contentMode="scaleToFill" id="0ZA-Ec-QgD">
+                    <navigationBar key="navigationBar" contentMode="scaleToFill" barStyle="black" translucent="NO" id="0ZA-Ec-QgD">
                         <rect key="frame" x="0.0" y="0.0" width="320" height="44"/>
                         <autoresizingMask key="autoresizingMask"/>
+                        <textAttributes key="titleTextAttributes">
+                            <offsetWrapper key="textShadowOffset" horizontal="0.0" vertical="0.0"/>
+                        </textAttributes>
                     </navigationBar>
                     <connections>
                         <segue destination="dgh-JZ-Q7z" kind="relationship" relationship="rootViewController" id="NhF-R8-8s3"/>
@@ -166,7 +202,7 @@
         </scene>
     </scenes>
     <resources>
-        <image name="Settings" width="25" height="25"/>
+        <image name="Logo" width="36" height="36"/>
     </resources>
     <simulatedMetricsContainer key="defaultSimulatedMetrics">
         <simulatedStatusBarMetrics key="statusBar"/>