Playing videos in ComponentKit

Question

I am trying to get a video to display using ComponentKit. I want it to play on tapping the component. I found this Github Issue, so I know I need to use a CKStatefulViewComponent but I don't know what the suggested way to handle the tap event is using ComponentKit.

Here is the code I have so far:

#import "CDBVideoPlayerComponent.h"
#import <ComponentKit/ComponentKit.h>

#import <ComponentKit/CKStatefulViewComponentController.h>
#import <AVFoundation/AVFoundation.h>

@interface CDBVideoPlayerComponent()
@property (nonatomic, strong) AVPlayer *player;
@end

@implementation CDBVideoPlayerComponent

+ (instancetype)newWithVideoURL:(NSURL*)url size:(const CKComponentSize &)size {

    CKComponentScope scope(self, url);

    CDBVideoPlayerComponent *component = [super newWithSize:size accessibility:{}];

    component->_player = [[AVPlayer alloc] initWithURL:url];

    return component;
}

@end

@interface CDBVideoPlayerComponentController : CKStatefulViewComponentController
- (void)handleTapForPlayer:(AVPlayer *)player;
@end

@implementation CDBVideoPlayerComponentController

+ (UIView *)newStatefulView:(id)context {

    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [UIColor darkGrayColor];

    AVPlayerLayer *playerLayer = [[AVPlayerLayer alloc] init];
    playerLayer.frame = view.bounds;

    [view.layer addSublayer:playerLayer];

    return view;
}

+ (void)configureStatefulView:(UIView *)statefulView forComponent:(CDBVideoPlayerComponent *)videoComponent {

    __block AVPlayerLayer *layer = nil;

    for (CALayer *currentLayer in statefulView.layer.sublayers) {

        if ([[currentLayer class] isSubclassOfClass:[AVPlayerLayer class]]) {
            layer = (AVPlayerLayer*)currentLayer;
            break;
        }
    }

    if (layer) {
        layer.player = videoComponent.player;
    } else {
        layer.player = nil;
    }
}

- (void)handleTapForPlayer:(AVPlayer *)player {
    [player play];
}

@end

Answer 1

So I was able to find a solution, it's not very clean, and I'm not sure if this is how the ComponentKit devs at Facebook intended for how the right way to handle this case is supposed to look like but this solution works:

First, we need to create a seperate view that handles the actual video presentation. This is pulled from Apple's example

#import "CDBVideoPlayerView.h"

@implementation CDBVideoPlayerView

+ (Class)layerClass {
    return [AVPlayerLayer class];
}

- (AVPlayer*)player {
    return [(AVPlayerLayer *)[self layer] player];
}

- (void)setPlayer:(AVPlayer *)player {
    [(AVPlayerLayer *)[self layer] setPlayer:player];
}

@end

Then, the components and the controller:

#import "CDBVideoPlayerComponent.h"

#import "CDBVideoPlayerView.h"

#import <ComponentKit/CKStatefulViewComponent.h>
#import <ComponentKit/CKStatefulViewComponentController.h>
#import <AVFoundation/AVFoundation.h>

@interface CDBVideoStateComponent : CKStatefulViewComponent
@property (nonatomic, strong) AVPlayer *player;

+ (instancetype)newWithVideoURL:(NSURL*)url size:(const CKComponentSize &)size;

@end

@implementation CDBVideoStateComponent

+ (instancetype)newWithVideoURL:(NSURL*)url size:(const CKComponentSize &)size {

    CKComponentScope scope(self, url);

    CDBVideoStateComponent *component = [super newWithSize:size accessibility:{}];

    component->_player = [[AVPlayer alloc] initWithURL:url];
    component->_player.actionAtItemEnd = AVPlayerActionAtItemEndNone;

    return component;
}

@end

@interface CDBVideoStateComponentController : CKStatefulViewComponentController
@end

@implementation CDBVideoStateComponentController

+ (UIView *)newStatefulView:(id)context {

    CDBVideoPlayerView *view = [[CDBVideoPlayerView alloc] init];
    return view;
}

+ (void)configureStatefulView:(CDBVideoPlayerView *)statefulView forComponent:(CDBVideoStateComponent *)videoComponent {

    statefulView.player = videoComponent.player;
}

@end

@interface CDBVideoPlayerComponent ()
@property (nonatomic, strong) AVPlayer *player;
@end

@implementation CDBVideoPlayerComponent

+ (instancetype)newWithVideoURL:(NSURL*)url size:(const CKComponentSize &)size {

    CKComponentScope scope(self, url);

    CDBVideoStateComponent *component = [CDBVideoStateComponent newWithVideoURL:url size:size];

    CDBVideoPlayerComponent *playerComponent = [super newWithComponent:component
        overlay:
        [CKButtonComponent
            newWithTitles:{}
            titleColors:{}
            images:{}
            backgroundImages:{}
            titleFont:{}
            selected:NO
            enabled:YES
            action:@selector(handleButtonPress:)
            size:{}
            attributes:{}
            accessibilityConfiguration:{}
         ]
    ];

    playerComponent->_player = component.player;

    return playerComponent;
}

- (void)handleButtonPress:(id)sender {

    if (self.player.status == AVPlayerStatusReadyToPlay) {

        if (self.player.timeControlStatus == AVPlayerTimeControlStatusPaused || self.player.timeControlStatus == AVPlayerTimeControlStatusWaitingToPlayAtSpecifiedRate) {
            [self.player play];
        } else {
            [self.player pause];
        }

    }
}

@end

Edit

I also found, what I think is, a cleaner solution by moving most of the code to the VideoPlayerView

@implementation VideoPlayerView

- (instancetype)init {

    if (self = [super init]) {
        [self addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)]];
    }

    return self;
}

- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {
        [self addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)]];
    }

    return self;
}

- (void)dealloc {
    [self removeObserversForPlayer:self.player];
}

+ (Class)layerClass {
    return [AVPlayerLayer class];
}

- (AVPlayer*)player {
    return [(AVPlayerLayer *)[self layer] player];
}

- (void)setPlayer:(AVPlayer *)player {

    [self removeObserversForPlayer:self.player];

    [(AVPlayerLayer *)[self layer] setPlayer:player];

    [self addObserverForPlayer:player];
}

- (void)addObserverForPlayer:(AVPlayer *)player {
    if (player) {
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(itemDidFinishPlaying:) name:AVPlayerItemDidPlayToEndTimeNotification object:player.currentItem];
    }
}

- (void)removeObserversForPlayer:(AVPlayer *)player {
    [[NSNotificationCenter defaultCenter] removeObserver:self name:AVPlayerItemDidPlayToEndTimeNotification object:player.currentItem];
}

- (void)itemDidFinishPlaying:(NSNotification *)notification  {
    [self.player seekToTime:kCMTimeZero];
    [self.player pause];
}

- (void)handleTap:(id)sender {

    if (self.player.status == AVPlayerStatusReadyToPlay) {

        if (self.player.timeControlStatus == AVPlayerTimeControlStatusPaused || self.player.timeControlStatus == AVPlayerTimeControlStatusWaitingToPlayAtSpecifiedRate) {
            [self.player play];
        } else {
            [self.player pause];
        }

    }
}

@end

Updated Components:

#import "VideoPlayerComponent.h"

#import "VideoPlayerView.h"

#import <ComponentKit/CKStatefulViewComponentController.h>
#import <AVFoundation/AVFoundation.h>
#import <ComponentKit/ComponentKit.h>

@interface VideoPlayerComponent ()
@property (nonatomic, strong) AVPlayer *player;

@end

@implementation VideoPlayerComponent

+ (instancetype)newWithVideoURL:(NSURL*)url size:(const CKComponentSize &)size {

    CKComponentScope scope(self, url);

    VideoPlayerComponent *component = [super newWithSize:size accessibility:{}];

    component->_player = [[AVPlayer alloc] initWithURL:url];
    component->_player.actionAtItemEnd = AVPlayerActionAtItemEndNone;

    return component;
}

@end

@interface VideoPlayerComponentController : CKStatefulViewComponentController
@end

@implementation VideoPlayerComponentController

+ (UIView *)newStatefulView:(id)context {

    VideoPlayerView *view = [[VideoPlayerView alloc] init];
    view.backgroundColor = [UIColor grayColor];
    return view;
}

+ (void)configureStatefulView:(VideoPlayerView *)statefulView forComponent:(VideoPlayerComponent *)videoComponent {

    statefulView.player = videoComponent.player;
}

@end