objective c - iOS Floating Video Window like Youtube App

Question

Does anyone know of any existing library, or any techniques on how to get the same effect as is found on the Youtube App.

The video can be "minimised" and hovers at the bottom of the screen - which can then be swiped to close or touched to re-maximised.

See:

Video Playing Normally: https://www.dropbox.com/s/o8c1ntfkkp4pc4q/2014-06-07%2001.19.20.png

Video Minimized: https://www.dropbox.com/s/w0syp3infu21g08/2014-06-07%2001.19.27.png

(Notice how the video is now in a small floating window on the bottom right of the screen).

Anyone have any idea how this was achieved, and if there are any existing tutorials or libraries that can be used to get this same effect?

Answer 1

It sounded fun, so I looked at youtube. The video looks like it plays in a 16:9 box at the top, with a "see also" list below. When user minimizes the video, the player drops to the lower right corner along with the "see also" view. At the same time, that "see also" view fades to transparent.

1) Setup the views like that and created outlets. Here's what it looks like in IB. (Note that the two containers are siblings)

2) Give the video view a swipe up and swipe down gesture recognizer:

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *tallMpContainer;
@property (weak, nonatomic) IBOutlet UIView *mpContainer;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UISwipeGestureRecognizer *swipeDown = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeDown:)];
    UISwipeGestureRecognizer *swipeUp = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeUp:)];

    swipeUp.direction = UISwipeGestureRecognizerDirectionUp;
    swipeDown.direction = UISwipeGestureRecognizerDirectionDown;

    [self.mpContainer addGestureRecognizer:swipeUp];
    [self.mpContainer addGestureRecognizer:swipeDown];
}

- (void)swipeDown:(UIGestureRecognizer *)gr {
    [self minimizeMp:YES animated:YES];
}

- (void)swipeUp:(UIGestureRecognizer *)gr {
    [self minimizeMp:NO animated:YES];
}

3) And then a method to know about the current state, and change the current state.

- (BOOL)mpIsMinimized {
    return self.tallMpContainer.frame.origin.y > 0;
}

- (void)minimizeMp:(BOOL)minimized animated:(BOOL)animated {

    if ([self mpIsMinimized] == minimized) return;

    CGRect tallContainerFrame, containerFrame;
    CGFloat tallContainerAlpha;

    if (minimized) {
        CGFloat mpWidth = 160;
        CGFloat mpHeight = 90; // 160:90 == 16:9

        CGFloat x = 320-mpWidth;
        CGFloat y = self.view.bounds.size.height - mpHeight;

        tallContainerFrame = CGRectMake(x, y, 320, self.view.bounds.size.height);
        containerFrame = CGRectMake(x, y, mpWidth, mpHeight);
        tallContainerAlpha = 0.0;

    } else {
        tallContainerFrame = self.view.bounds;
        containerFrame = CGRectMake(0, 0, 320, 180);
        tallContainerAlpha = 1.0;
    }

    NSTimeInterval duration = (animated)? 0.5 : 0.0;

    [UIView animateWithDuration:duration animations:^{
        self.tallMpContainer.frame = tallContainerFrame;
        self.mpContainer.frame = containerFrame;
        self.tallMpContainer.alpha = tallContainerAlpha;
    }];
}

I didn't add video to this project, but it should just drop in. Make the mpContainer the parent view of the MPMoviePlayerController's view and it should look pretty cool.