How to customize the Airplay button when airplay is active

Question

Been trying to solve this issue for 2 days now and I give up. Im trying to implement a customized airplay button (I have to beacuse the background is white and the button must be black). Ive added a view in interfacebuilder and chose mpVolumeView for it. Then I made the connections and wrote the following code;

viewDidLoad.. {
    .....

    [_volumeView setShowsVolumeSlider:NO];
    for (UIButton *button in _volumeView.subviews) {
        if ([button isKindOfClass:[UIButton class]]) {
            [button setImage:[UIImage imageNamed:@"airplay_icon.png"] forState:UIControlStateNormal];
            [button addObserver:self forKeyPath:@"alpha" options:NSKeyValueObservingOptionNew context:nil];
            [button addTarget:self action:@selector(switchAirplayButton) forControlEvents:UIControlEventTouchUpInside];
            [button sizeToFit];
        }
    }
    [_volumeView sizeToFit];

}

-(void)switchAirplayButton {

    for (UIButton *button in _volumeView.subviews) {
        if ([button isKindOfClass:[UIButton class]]) {

            NSLog(@"%d", _controlBar.player.airPlayVideoActive);

            if(_controlBar.player.airPlayVideoActive) {
                [button setImage:[UIImage imageNamed:@"airplay_icon_pressed.png"] forState:UIControlStateNormal];
            } else  [button setImage:[UIImage imageNamed:@"airplay_icon.png"] forState:UIControlStateNormal];

            [button sizeToFit];
        }
    }


}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if ([object isKindOfClass:[UIButton class]] && [[change valueForKey:NSKeyValueChangeNewKey] intValue] == 1) {
        [(UIButton *)object setImage:[UIImage imageNamed:@"airplay_icon.png"] forState:UIControlStateNormal];
        [(UIButton *)object sizeToFit];
    }
}

The "player" is a singelton based on AVPLayer. However, it always returns false when checking if airPlay is active. Maybe it's just beacuse im using sound, not video.

So my question is, how could I change the button to... lets say an orange one (just to match the rest of the interface) when airplay is streaming (just like apple is making it blue). I have tried everything and it's just not working at all. Please help me.

chikuba, how u handle this issue, im facing same issue in my voip call iOS app, could u give suggestions? Thanks! — Anilkumar iOS - ReactNative, Sep 24 '15 at 11:28

avf · Accepted Answer · 2012-11-27T22:40:45.633

Edit:

Though the code below works on both iOS 5 and 6, starting with iOS 6.0 there is an official way to do this, which is much much easier. Just look at the documentation of MPVolumeView, specifically – setRouteButtonImage:forState:.

==== Old answer: ====

This is pretty hard to accomplish, but I found a way for iOS 5.0+. First of all, add the following line to your ViewController:

#import <AudioToolbox/AudioToolbox.h>

In your viewDidLoad, you're already doing most of the things right, this is my code:

for (id current in self.volumeView.subviews){
    if([current isKindOfClass:[UIButton class]]) {
        UIButton *airPlayButton = (UIButton*)current;
        self.airPlayButton = airPlayButton;
        [self setAirPlayButtonSelected:[self isAirPlayActive]];
        [airPlayButton addObserver:self forKeyPath:@"alpha" options:NSKeyValueObservingOptionNew context:nil];
    }
}

Here's the helper setAirPlayButtonSelected method, it just sets the image:

- (void)setAirPlayButtonSelected:(BOOL)selected {
    UIImage* image;
    if (selected) {
        image = [UIImage imageNamed:@"button-airplay-selected"];
    }else {
        image = [UIImage imageNamed:@"button-airplay"];
    }
    [self.airPlayButton setImage:image forState:UIControlStateNormal];
    [self.airPlayButton setImage:image forState:UIControlStateHighlighted];
    [self.airPlayButton setImage:image forState:UIControlStateSelected];
}

For completion's sake, the observeValueForKeyPath:

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {

    if (object == self.airPlayButton && [[change valueForKey:NSKeyValueChangeNewKey] intValue] == 1) {
        [self setAirPlayButtonSelected:[self isAirPlayActive]];
    }
}

And now comes the interesting part. Here's the isAirPlayActive helper method. It uses the AudioSession framework to determine the currently playing audioSource.

- (BOOL)isAirPlayActive{
    CFDictionaryRef currentRouteDescriptionDictionary = nil;
    UInt32 dataSize = sizeof(currentRouteDescriptionDictionary);
    AudioSessionGetProperty(kAudioSessionProperty_AudioRouteDescription, &dataSize, &currentRouteDescriptionDictionary);
    if (currentRouteDescriptionDictionary) {
        CFArrayRef outputs = CFDictionaryGetValue(currentRouteDescriptionDictionary, kAudioSession_AudioRouteKey_Outputs);
        if(CFArrayGetCount(outputs) > 0) {
            CFDictionaryRef currentOutput = CFArrayGetValueAtIndex(outputs, 0);
            CFStringRef outputType = CFDictionaryGetValue(currentOutput, kAudioSession_AudioRouteKey_Type);
            return (CFStringCompare(outputType, kAudioSessionOutputRoute_AirPlay, 0) == kCFCompareEqualTo);
        }
    }

    return NO;
}

So all this code changes the AirPlay Button correctly on app launch. What about updates? We need to listen for AudioSource changes. Add the following line to your viewDidLoad:

    AudioSessionAddPropertyListener (kAudioSessionProperty_AudioRouteChange, audioRouteChangeCallback, (__bridge void*)self);

Don't forget to unregister in dealloc:

- (void)dealloc {
    [self.airPlayButton removeObserver:self forKeyPath:@"alpha"];

    AudioSessionRemovePropertyListenerWithUserData(kAudioSessionProperty_AudioRouteChange, audioRouteChangeCallback, (__bridge void*)self);

}

And add this C function above your ViewController's @implementation:

void audioRouteChangeCallback (void                   *inUserData,
                                       AudioSessionPropertyID inPropertyID,
                                       UInt32                 inPropertyValueSize,
                                       const void             *inPropertyValue) {

    if (inPropertyID != kAudioSessionProperty_AudioRouteChange) {
        return;
    }

    CFDictionaryRef routeChangeDictionary = inPropertyValue;

    CFDictionaryRef currentRouteDescriptionDictionary = CFDictionaryGetValue(routeChangeDictionary, kAudioSession_AudioRouteChangeKey_CurrentRouteDescription);
    CFArrayRef outputs = CFDictionaryGetValue(currentRouteDescriptionDictionary, kAudioSession_AudioRouteKey_Outputs);
    if(CFArrayGetCount(outputs) > 0) {
        CFDictionaryRef currentOutput = CFArrayGetValueAtIndex(outputs, 0);
        CFStringRef outputType = CFDictionaryGetValue(currentOutput, kAudioSession_AudioRouteKey_Type);

        [(__bridge SettingsViewController*)inUserData setAirPlayButtonSelected:CFStringCompare(outputType, kAudioSessionOutputRoute_AirPlay, 0) == kCFCompareEqualTo];
    }

}

As you can see, all it does is determine whether or not an AirPlay output source is active and calls the setAirPlayButtonSelected method accordingly.

See Apple's Audio Session Programming Guide, specifically this section for detailed information on how the callbacks exactly work, etc.

you just earner yourself a real rep-boost :) i came to almost the same solution yesterday but you pointed out some really nice things that i have to keep inmind (remove listener for example). thank your very much! — chikuba, Sep 12 '12 at 08:15
The alpha observer is what I needed for my solution. Great stuff! :D — Dev Kanchen, Dec 28 '12 at 16:33
in iOS 8 you need to change: if(CFArrayGetCount(outputs) > 0) to: if(outputs && CFArrayGetCount(outputs) > 0) — Jason R. Escamilla, Sep 13 '14 at 04:24
AudioSessionGetProperty and kAudioSession_AudioRouteKey_Type has been deprecated from iOS 7. It's better use AVAudioSession instead — RayChen, Aug 05 '15 at 03:34
what is here "self.airPlayButton " object, is that uibutton object or other object? — Anilkumar iOS - ReactNative, Sep 29 '15 at 09:07

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Check out this similar link here.

I'm not sure if this would work, but try making a black button with the airplay symbol, then put it on top of airplay button that's hard to see. You should set user interaction to disabled. Try it, it might be an easier solution.

*don't forget to set user interaction disabled on the attributes inspector and the identity inspector.

edited May 23 '17 at 12:22

Community

1
1

answered Sep 11 '12 at 22:38

SkylerHill-Sky

2,106
2
17
33

How to customize the Airplay button when airplay is active

2 Answers2

Linked