Restyle UIComputerView to match other clients

2026-04-11 18:36:06 +00:00 · 2019-08-30 18:36:14 -07:00
parent 83479719a4
commit a065c78b5f
18 changed files with 386 additions and 92 deletions
--- a/Limelight/Images.xcassets/AddComputerIcon.imageset/Contents.json
+++ b/Limelight/Images.xcassets/AddComputerIcon.imageset/Contents.json
@@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "scale" : "1x",
-      "filename" : "limelight_computer_add_icon_1x.png"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x",
-      "filename" : "limelight_computer_add_icon_2x.png"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x",
-      "filename" : "limelight_computer_add_icon_3x.png"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}
--- a/Limelight/Images.xcassets/AddComputerIcon.imageset/limelight_computer_add_icon_1x.png
+++ b/Limelight/Images.xcassets/AddComputerIcon.imageset/limelight_computer_add_icon_1x.png
--- a/Limelight/Images.xcassets/AddComputerIcon.imageset/limelight_computer_add_icon_2x.png
+++ b/Limelight/Images.xcassets/AddComputerIcon.imageset/limelight_computer_add_icon_2x.png
--- a/Limelight/Images.xcassets/AddComputerIcon.imageset/limelight_computer_add_icon_3x.png
+++ b/Limelight/Images.xcassets/AddComputerIcon.imageset/limelight_computer_add_icon_3x.png
--- a/Limelight/Images.xcassets/AddOverlayIcon.imageset/Contents.json
+++ b/Limelight/Images.xcassets/AddOverlayIcon.imageset/Contents.json
@@ -2,18 +2,16 @@
  "images" : [
    {
      "idiom" : "universal",
-      "scale" : "1x",
-      "filename" : "limelight_computer_1x.png"
+      "scale" : "1x"
    },
    {
      "idiom" : "universal",
-      "scale" : "2x",
-      "filename" : "limelight_computer_2x.png"
+      "filename" : "add.pdf",
+      "scale" : "2x"
    },
    {
      "idiom" : "universal",
-      "scale" : "3x",
-      "filename" : "limelight_computer_3x.png"
+      "scale" : "3x"
    }
  ],
  "info" : {
--- a/Limelight/Images.xcassets/AddOverlayIcon.imageset/add.pdf
+++ b/Limelight/Images.xcassets/AddOverlayIcon.imageset/add.pdf
--- a/Limelight/Images.xcassets/Computer.imageset/limelight_computer_1x.png
+++ b/Limelight/Images.xcassets/Computer.imageset/limelight_computer_1x.png
--- a/Limelight/Images.xcassets/Computer.imageset/limelight_computer_2x.png
+++ b/Limelight/Images.xcassets/Computer.imageset/limelight_computer_2x.png
--- a/Limelight/Images.xcassets/Computer.imageset/limelight_computer_3x.png
+++ b/Limelight/Images.xcassets/Computer.imageset/limelight_computer_3x.png
--- a/Limelight/Images.xcassets/ErrorOverlayIcon.imageset/Contents.json
+++ b/Limelight/Images.xcassets/ErrorOverlayIcon.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "error.pdf",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/Limelight/Images.xcassets/ErrorOverlayIcon.imageset/error.pdf
+++ b/Limelight/Images.xcassets/ErrorOverlayIcon.imageset/error.pdf
@@ -0,0 +1,68 @@
+%PDF-1.5
+%<25><><EFBFBD><EFBFBD>
+4 0 obj
+<< /Length 5 0 R
+   /Filter /FlateDecode
+>>
+stream
+x<EFBFBD>e<EFBFBD><EFBFBD>	<09>0D<>5<EFBFBD>-U<><55>(kt<6B>Rh<52><><7F><1F>8<EFBFBD>	<04>t︓Bb<06><><19>B)<29><≯=<05><><EFBFBD><EFBFBD><EFBFBD>1f<1E><14><><EFBFBD><EFBFBD>W<EFBFBD>sW<>P<EFBFBD>j<EFBFBD>jXb<58><62>kG	ݒr<DD92>%c?<3F><0E>=<3D><><EFBFBD>?<3F><><EFBFBD>~Ӄ~<7E>L+<2B>
+endstream
+endobj
+5 0 obj
+   115
+endobj
+3 0 obj
+<<
+   /ExtGState <<
+      /a0 << /CA 1 /ca 1 >>
+   >>
+>>
+endobj
+2 0 obj
+<< /Type /Page % 1
+   /Parent 1 0 R
+   /MediaBox [ 0 0 75 75 ]
+   /Contents 4 0 R
+   /Group <<
+      /Type /Group
+      /S /Transparency
+      /I true
+      /CS /DeviceRGB
+   >>
+   /Resources 3 0 R
+>>
+endobj
+1 0 obj
+<< /Type /Pages
+   /Kids [ 2 0 R ]
+   /Count 1
+>>
+endobj
+6 0 obj
+<< /Producer (cairo 1.16.0 (https://cairographics.org))
+   /CreationDate (D:20190830180932-07'00)
+>>
+endobj
+7 0 obj
+<< /Type /Catalog
+   /Pages 1 0 R
+>>
+endobj
+xref
+0 8
+0000000000 65535 f 
+0000000517 00000 n 
+0000000301 00000 n 
+0000000229 00000 n 
+0000000015 00000 n 
+0000000207 00000 n 
+0000000582 00000 n 
+0000000698 00000 n 
+trailer
+<< /Size 8
+   /Root 7 0 R
+   /Info 6 0 R
+>>
+startxref
+750
+%%EOF
--- a/Limelight/Images.xcassets/LockedOverlayIcon.imageset/Contents.json
+++ b/Limelight/Images.xcassets/LockedOverlayIcon.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "lock.pdf",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/Limelight/Images.xcassets/LockedOverlayIcon.imageset/lock.pdf
+++ b/Limelight/Images.xcassets/LockedOverlayIcon.imageset/lock.pdf
@@ -0,0 +1,68 @@
+%PDF-1.5
+%<25><><EFBFBD><EFBFBD>
+4 0 obj
+<< /Length 5 0 R
+   /Filter /FlateDecode
+>>
+stream
+x<EFBFBD>UQKn<EFBFBD> <0C><><14>@]<5D><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>P!<21>u<EFBFBD>,<2C><>_*<2A><13>"<22><19><><EFBFBD>cZ<63><5A><EFBFBD><EFBFBD><1B><13><>q<EFBFBD><71><17>$|<7C>B<13>
+<EFBFBD>wb+Ć<><C486><<3C><>iң<69>vW:9<04><><07>O<><4F><EFBFBD>*<2A>ZΠ<5A>fwΰ	<09><><EFBFBD>;
+Ά<0B>Z<EFBFBD><11><><EFBFBD><EFBFBD>ѣע<><D7A2>y<EFBFBD>x<EFBFBD><78>)<29>σd<0C>r<EFBFBD><72><EFBFBD>z<EFBFBD>a<EFBFBD><61>2<EFBFBD>U<EFBFBD><55><EFBFBD>p<EFBFBD>o<EFBFBD><17>(|T'<27>JIrp<72>iI+4<><34>8<EFBFBD>6<EFBFBD><36><EFBFBD><EFBFBD><EFBFBD>d<EFBFBD>5<EFBFBD><35>x<1D>
+v<EFBFBD>Η<EFBFBD>_:'<27>i<EFBFBD><69> t<><74><EFBFBD><1C><>k'<27>v<EFBFBD><76>P{<7B><><EFBFBD>Ђ<EFBFBD><D082>$X2q|h<><68><08>Wv<57>Q<EFBFBD>?<3F><><EFBFBD><EFBFBD><EFBFBD>_<EFBFBD><5F><EFBFBD>	O<>p<1E>&
+endstream
+endobj
+5 0 obj
+   267
+endobj
+3 0 obj
+<<
+   /ExtGState <<
+      /a0 << /CA 1 /ca 1 >>
+   >>
+>>
+endobj
+2 0 obj
+<< /Type /Page % 1
+   /Parent 1 0 R
+   /MediaBox [ 0 0 75 75 ]
+   /Contents 4 0 R
+   /Group <<
+      /Type /Group
+      /S /Transparency
+      /I true
+      /CS /DeviceRGB
+   >>
+   /Resources 3 0 R
+>>
+endobj
+1 0 obj
+<< /Type /Pages
+   /Kids [ 2 0 R ]
+   /Count 1
+>>
+endobj
+6 0 obj
+<< /Producer (cairo 1.16.0 (https://cairographics.org))
+   /CreationDate (D:20190830180930-07'00)
+>>
+endobj
+7 0 obj
+<< /Type /Catalog
+   /Pages 1 0 R
+>>
+endobj
+xref
+0 8
+0000000000 65535 f 
+0000000669 00000 n 
+0000000453 00000 n 
+0000000381 00000 n 
+0000000015 00000 n 
+0000000359 00000 n 
+0000000734 00000 n 
+0000000850 00000 n 
+trailer
+<< /Size 8
+   /Root 7 0 R
+   /Info 6 0 R
+>>
--- a/Limelight/Images.xcassets/UpdatingOverlayIcon.imageset/Contents.json
+++ b/Limelight/Images.xcassets/UpdatingOverlayIcon.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "updating.pdf",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/Limelight/Images.xcassets/UpdatingOverlayIcon.imageset/updating.pdf
+++ b/Limelight/Images.xcassets/UpdatingOverlayIcon.imageset/updating.pdf
@@ -0,0 +1,68 @@
+%PDF-1.5
+%<25><><EFBFBD><EFBFBD>
+4 0 obj
+<< /Length 5 0 R
+   /Filter /FlateDecode
+>>
+stream
+x<EFBFBD>mQ<EFBFBD>m1<08><><EFBFBD>i <20>`<60><>e<EFBFBD><65><EFBFBD>R.<2E><>G<EFBFBD><47><EFBFBD>`|<7C><><EFBFBD>"K<>0<18><><EFBFBD>^<5E><>f{<7B>J<EFBFBD><4A><EFBFBD>ox}ϸ<>$<24>T<EFBFBD><13><0E><><.<19><>J<EFBFBD><07>FM<46>p<EFBFBD><70><06>RyR<79><52><EFBFBD><EFBFBD>i<><69>M)W<>JQ<4A><51>`<60><><EFBFBD>	N<>¨<<3C><>"d]Qݭ
+<EFBFBD><EFBFBD>dY(<28>5<11><1B>:<3A>w<EFBFBD>L<1C><>ݱ<EFBFBD>l<EFBFBD>Vw)X<><58>f<EFBFBD>'<27>e<EFBFBD><04>d<EFBFBD><64><EFBFBD><<3C><>K<EFBFBD>;ej<65><02>8<EFBFBD>}<7D><>s	^<5E>4{<7B>s<EFBFBD><19>[<5B>7<EFBFBD><11><>xH)<29><>O`<60>[Y^<5E>:<3A>4~<7E><><EFBFBD><0B>Hby
+endstream
+endobj
+5 0 obj
+   236
+endobj
+3 0 obj
+<<
+   /ExtGState <<
+      /a0 << /CA 1 /ca 1 >>
+   >>
+>>
+endobj
+2 0 obj
+<< /Type /Page % 1
+   /Parent 1 0 R
+   /MediaBox [ 0 0 75 75 ]
+   /Contents 4 0 R
+   /Group <<
+      /Type /Group
+      /S /Transparency
+      /I true
+      /CS /DeviceRGB
+   >>
+   /Resources 3 0 R
+>>
+endobj
+1 0 obj
+<< /Type /Pages
+   /Kids [ 2 0 R ]
+   /Count 1
+>>
+endobj
+6 0 obj
+<< /Producer (cairo 1.16.0 (https://cairographics.org))
+   /CreationDate (D:20190830182029-07'00)
+>>
+endobj
+7 0 obj
+<< /Type /Catalog
+   /Pages 1 0 R
+>>
+endobj
+xref
+0 8
+0000000000 65535 f 
+0000000638 00000 n 
+0000000422 00000 n 
+0000000350 00000 n 
+0000000015 00000 n 
+0000000328 00000 n 
+0000000703 00000 n 
+0000000819 00000 n 
+trailer
+<< /Size 8
+   /Root 7 0 R
+   /Info 6 0 R
+>>
+startxref
+871
--- a/Limelight/Images.xcassets/computer.imageset/Contents.json
+++ b/Limelight/Images.xcassets/computer.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "computer.pdf",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/Limelight/Images.xcassets/computer.imageset/computer.pdf
+++ b/Limelight/Images.xcassets/computer.imageset/computer.pdf
@@ -0,0 +1,69 @@
+%PDF-1.5
+%<25><><EFBFBD><EFBFBD>
+4 0 obj
+<< /Length 5 0 R
+   /Filter /FlateDecode
+>>
+stream
+x<EFBFBD>]<5D>]!<0C><>{<7B>^<5E>ʔ<EFBFBD><CA94>1<<3C><><EFBFBD><EFBFBD><EFBFBD><0F><><0B>E
+	<09><1F>N<EFBFBD>Yp<59><70><EFBFBD>m<EFBFBD><6D><EFBFBD>=)<29><>ו<EFBFBD><D795><EFBFBD><EFBFBD>7iط<>Hb<48>"<22>=<3D><06>3_\W<>F<EFBFBD><46>!K<>%<25><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>X<EFBFBD>@;$ڮ<><DAAE><EFBFBD>m<><6D>@<40><14>ǿ <07><><EFBFBD>+<2B><>!<21>d<EFBFBD><64><EFBFBD><EFBFBD>}<7D>#<23>T<EFBFBD>;7_۫<5F>,<2C>L٘E<>MHS~<7E><>8<EFBFBD><38><EFBFBD><19><>$<24><><EFBFBD><EFBFBD><EFBFBD>X<EFBFBD>F<><1F>ٴ<<3C><>\W<>ͤMl<4D><6C><12><>e<EFBFBD>e<EFBFBD><65><EFBFBD><1D><03>Lg7
+endstream
+endobj
+5 0 obj
+   212
+endobj
+3 0 obj
+<<
+   /ExtGState <<
+      /a0 << /CA 0.3 /ca 0.3 >>
+      /a1 << /CA 1 /ca 1 >>
+   >>
+>>
+endobj
+2 0 obj
+<< /Type /Page % 1
+   /Parent 1 0 R
+   /MediaBox [ 0 0 225 225 ]
+   /Contents 4 0 R
+   /Group <<
+      /Type /Group
+      /S /Transparency
+      /I true
+      /CS /DeviceRGB
+   >>
+   /Resources 3 0 R
+>>
+endobj
+1 0 obj
+<< /Type /Pages
+   /Kids [ 2 0 R ]
+   /Count 1
+>>
+endobj
+6 0 obj
+<< /Producer (cairo 1.16.0 (https://cairographics.org))
+   /CreationDate (D:20190830180928-07'00)
+>>
+endobj
+7 0 obj
+<< /Type /Catalog
+   /Pages 1 0 R
+>>
+endobj
+xref
+0 8
+0000000000 65535 f 
+0000000648 00000 n 
+0000000430 00000 n 
+0000000326 00000 n 
+0000000015 00000 n 
+0000000304 00000 n 
+0000000713 00000 n 
+0000000829 00000 n 
+trailer
+<< /Size 8
+   /Root 7 0 R
+   /Info 6 0 R
+>>
+startxref
+881
--- a/Limelight/UIComputerView.m
+++ b/Limelight/UIComputerView.m
@@ -12,8 +12,7 @@
    TemporaryHost* _host;
    UIButton* _hostButton;
    UILabel* _hostLabel;
-    UILabel* _hostStatus;
-    UILabel* _hostPairState;
+    UIImageView* _hostOverlay;
    id<HostCallback> _callback;
    CGSize _labelSize;
 }
@@ -32,14 +31,21 @@ static const int LABEL_DY = 20;
    [_hostButton setBackgroundImage:[UIImage imageNamed:@"Computer"] forState:UIControlStateNormal];
    [_hostButton sizeToFit];
    
-     _hostButton.layer.shadowColor = [[UIColor blackColor] CGColor];
+    _hostButton.layer.shadowColor = [[UIColor blackColor] CGColor];
    _hostButton.layer.shadowOffset = CGSizeMake(5,8);
    _hostButton.layer.shadowOpacity = 0.7;
    
    _hostLabel = [[UILabel alloc] init];
-    _hostStatus = [[UILabel alloc] init];
-    _hostPairState = [[UILabel alloc] init];
+#if !TARGET_OS_TV
+    _hostLabel.textColor = [UIColor whiteColor];
+#endif
+    
+    _hostOverlay = [[UIImageView alloc] initWithFrame:CGRectMake(_hostButton.frame.size.width / 4, _hostButton.frame.size.height / 6, _hostButton.frame.size.width / 2, _hostButton.frame.size.height / 2)];

+    [self addSubview:_hostButton];
+    [self addSubview:_hostLabel];
+    [self addSubview:_hostOverlay];
+    
    return self;
 }

@@ -47,38 +53,23 @@ static const int LABEL_DY = 20;
    self = [self init];
    _callback = callback;
    
-    [_hostButton setBackgroundImage:[UIImage imageNamed:@"Computer"] forState:UIControlStateNormal];
-    [_hostButton setContentEdgeInsets:UIEdgeInsetsMake(0, 4, 0, 4)];
    if (@available(iOS 9.0, tvOS 9.0, *)) {
        [_hostButton addTarget:self action:@selector(addClicked) forControlEvents:UIControlEventPrimaryActionTriggered];
    }
    else {
        [_hostButton addTarget:self action:@selector(addClicked) forControlEvents:UIControlEventTouchUpInside];
    }
-    [_hostButton sizeToFit];
    
    [_hostLabel setText:@"Add Host"];
    [_hostLabel sizeToFit];
-#if !TARGET_OS_TV
-    _hostLabel.textColor = [UIColor whiteColor];
-#endif
-    _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"]];
-    [addIcon sizeToFit];
-    addIcon.center = CGPointMake(_hostButton.frame.origin.x + _hostButton.frame.size.width, _hostButton.frame.origin.y);
+    float x = _hostButton.frame.origin.x + _hostButton.frame.size.width / 2;
+    _hostLabel.center = CGPointMake(x, _hostButton.frame.origin.y + _hostButton.frame.size.height + LABEL_DY);
    
-    // This is required to ensure this button is the same size as the others
-    _hostPairState.text = @"None";
-    _hostStatus.text = @"None";
-    [_hostPairState sizeToFit];
-    [_hostStatus sizeToFit];
+    [_hostOverlay setImage:[UIImage imageNamed:@"AddOverlayIcon"]];
    
    [self updateBounds];
-    [self addSubview:_hostButton];
-    [self addSubview:_hostLabel];
-    [self addSubview:addIcon];
-    
+        
    return self;
 }

@@ -99,10 +90,6 @@ static const int LABEL_DY = 20;
    
    [self updateContentsForHost:host];
    [self updateBounds];
-    [self addSubview:_hostButton];
-    [self addSubview:_hostLabel];
-    [self addSubview:_hostStatus];
-    [self addSubview:_hostPairState];
    [self startUpdateLoop];

    return self;
@@ -116,23 +103,15 @@ static const int LABEL_DY = 20;
    
    x = MIN(x, _hostButton.frame.origin.x);
    x = MIN(x, _hostLabel.frame.origin.x);
-    x = MIN(x, _hostStatus.frame.origin.x);
-    x = MIN(x, _hostPairState.frame.origin.x);
    
    y = MIN(y, _hostButton.frame.origin.y);
    y = MIN(y, _hostLabel.frame.origin.y);
-    y = MIN(y, _hostStatus.frame.origin.y);
-    y = MIN(y, _hostPairState.frame.origin.y);

    width = MAX(width, _hostButton.frame.size.width);
    width = MAX(width, _hostLabel.frame.size.width);
-    width = MAX(width, _hostStatus.frame.size.width);
-    width = MAX(width, _hostPairState.frame.size.width);
    
    height = _hostButton.frame.size.height +
        _hostLabel.frame.size.height +
-        _hostStatus.frame.size.height +
-        _hostPairState.frame.size.height +
        LABEL_DY / 2;
    
    self.bounds = CGRectMake(x, y, width, height);
@@ -141,40 +120,23 @@ static const int LABEL_DY = 20;

 - (void) updateContentsForHost:(TemporaryHost*)host {
    _hostLabel.text = _host.name;
-#if !TARGET_OS_TV
-    _hostLabel.textColor = [UIColor whiteColor];
-#endif
    [_hostLabel sizeToFit];
    
-    switch (host.pairState) {
-        case PairStateUnknown:
-            _hostPairState.text = @"Pair State Unknown";
-            break;
-        case PairStateUnpaired:
-            _hostPairState.text = @"Not Paired";
-            break;
-        case PairStatePaired:
-            _hostPairState.text = @"Paired";
-            break;
-    }
-#if !TARGET_OS_TV
-    _hostPairState.textColor = [UIColor whiteColor];
-#endif
-    [_hostPairState sizeToFit];
-    
    if (host.online) {
-        _hostStatus.text = @"Online";
-        _hostStatus.textColor = [UIColor greenColor];
-    } else {
-        _hostStatus.text = @"Offline";
-        _hostStatus.textColor = [UIColor grayColor];
+        if (host.pairState == PairStateUnpaired) {
+            [_hostOverlay setImage:[UIImage imageNamed:@"LockedOverlayIcon"]];
+        }
+        else {
+            [_hostOverlay setImage:nil];
+        }
+    }
+    else {
+        // TODO: Use updating icon if we've not determined online state yet
+        [_hostOverlay setImage:[UIImage imageNamed:@"ErrorOverlayIcon"]];
    }
-    [_hostStatus sizeToFit];
    
    float x = _hostButton.frame.origin.x + _hostButton.frame.size.width / 2;
    _hostLabel.center = CGPointMake(x, _hostButton.frame.origin.y + _hostButton.frame.size.height + LABEL_DY);
-    _hostPairState.center = CGPointMake(x, _hostLabel.center.y + LABEL_DY);
-    _hostStatus.center = CGPointMake(x, _hostPairState.center.y + LABEL_DY);
 }

 - (void) startUpdateLoop {