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 a

Answer 1

Update new framwork FWDraggableSwipePlayer for drag uiview like YouTube app.

hope to help you.

Answer 2

This is a swift 3 version for the answer @danh had provided earlier.

https://stackoverflow.com/a/24107949/1211470

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var tallMpContainer: UIView!
    @IBOutlet weak var mpContainer: UIView!

    var swipeDown: UISwipeGestureRecognizer?
    var swipeUp: UISwipeGestureRecognizer?

    override func viewDidLoad() {
        super.viewDidLoad()
        swipeDown = UISwipeGestureRecognizer(target: self, action: #selector(swipeDownAction))

        swipeUp = UISwipeGestureRecognizer(target: self, action: #selector(swipeUpAction))

        swipeDown?.direction = .down
        swipeUp?.direction = .up

        self.mpContainer.addGestureRecognizer(swipeDown!)
        self.mpContainer.addGestureRecognizer(swipeUp!)
    }

    @objc func swipeDownAction() {
        minimizeWindow(minimized: true, animated: true)
    }

    @objc func swipeUpAction() {
        minimizeWindow(minimized: false, animated: true)
    }

    func isMinimized() -> Bool {
        return CGFloat((self.tallMpContainer?.frame.origin.y)!) > CGFloat(20)
    }

    func minimizeWindow(minimized: Bool, animated: Bool) {
        if isMinimized() == minimized {
            return
        }

        var tallContainerFrame: CGRect
        var containerFrame: CGRect

        var tallContainerAlpha: CGFloat

        if minimized == true {

            let mpWidth: CGFloat = 160
            let mpHeight: CGFloat = 90

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

            tallContainerFrame = CGRect(x: x, y: y, width: 320, height: self.view.bounds.size.height)
            containerFrame = CGRect(x: x, y: y, width: mpWidth, height: mpHeight)
            tallContainerAlpha = 0.0

        } else {

            tallContainerFrame = self.view.bounds
            containerFrame = CGRect(x: 0, y: 0, width: 320, height: 180)
            tallContainerAlpha = 1.0

        }

        let duration: TimeInterval = (animated) ? 0.5 : 0.0
        UIView.animate(withDuration: duration, animations: {
            self.tallMpContainer.frame = tallContainerFrame
            self.mpContainer.frame = containerFrame
            self.tallMpContainer.alpha = tallContainerAlpha
        })
    }

}

Answer 3

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.

Answer 4

Use TFSwipeShrink and customize code for your project.

hope to help you.