9 Floating Window

9.1 Overview

The floating window feature allows the player to play in a draggable, resizable window that remains on top of the view hierarchy. The demo provides two interaction modes for the floating window: one where the floating window appears and continues playing when the page scrolls past the player (fixed at the top of the page) and disappears when the main player reappears; the other where clicking the floating window button on the player skin navigates back to the previous page while the video continues playing in the floating window.

9.2 Quick Integration

9.2.1 SDK Version

The floating window feature does not involve SDK changes, so no specific SDK version upgrade is required. However, the SDK version used during development was 2.8.0. It is recommended not to use a significantly older version to avoid unnecessary issues. All testing for this feature was based on SDK v2.8.0.

9.2.2 Open Source Code

All floating window feature code is open source and located in the PolyvOpenSourceModule/Floating folder of the demo project. Please update the demo code to version 2.8.0 or later, then drag the code from this folder into your project. The file directory under this folder is as follows:

├── Floating
​ ├── PLVVFloatingPlayerViewController.h/m ​ ├── Resource ​ └── FloatingWindow ​ ├── PLVVFloatingWindow.h/m ​ ├── PLVVFloatingWindowSkin.h/m ​ └── PLVVFloatingWindowViewController.h/m

The Resource folder contains the resource files required for the floating window feature. FloatingWindow contains all the code for the floating window. The PLVVFloatingPlayerViewController class is the example code for the floating window feature. It is recommended to integrate based on our example code.

Additionally, update the code under the PolyvOpenSourceModule/Skin folder to version 2.8.0 or later to support the floating window feature.

9.2.3 Demo Example

Add the following header file to the video list page:

#import "PLVVFloatingPlayerViewController.h"
#import "PLVVFloatingWindow.h"

The PLVVFloatingPlayerViewController class has two initialization methods:

• -initWithPlayer:: Used when a floating window already exists and is playing the same video vid.
• -initWithVid:: Used when no floating window exists, or the floating window is playing a different video vid.

Code examples for page navigation using these two methods are shown below. For details, refer to the PLVAccountVideoListController class.

PLVVFloatingWindow *window = [PLVVFloatingWindow sharedInstance];
PLVVodSkinPlayerController *player = window.contentVctrl.player;
NSString *playingVid = window.contentVctrl.vid;
NSString *vid; // 从视频列表中选中并即将播放的视频 vid
if (player && playingVid && [playingVid isEqualToString:vid]) { 
    PLVVFloatingPlayerViewController *vctrl = [[PLVVFloatingPlayerViewController alloc] initWithPlayer:player];
    [self.navigationController pushViewController:vctrl animated:YES];
} else {
    PLVVFloatingPlayerViewController *vctrl = [[PLVVFloatingPlayerViewController alloc] initWithVid:vid];
    [self.navigationController pushViewController:vctrl animated:YES];
}

9.3 Floating Window

The floating window PLVVFloatingWindow is a singleton of the UIWindow class. windowLevel is UIWindowLevelNormal + 1, and the default hidden property is YES. The floating window has a 16:9 aspect ratio, and the default window width is half the screen width.

Press and hold the top-left corner of the floating window to resize it. The window width can be scaled between 160 pt and the screen width. Use the following method to restore the window to its initial size and position:

// 悬浮窗回到初始尺寸、初始位置
- (void)reset;

9.4 Floating Window Controller

PLVVFloatingWindowViewController is the root controller of the floating window. It can be accessed via the PLVVFloatingWindow property contentVctrl of the floating window:

PLVVFloatingWindowViewController *vctrl = [PLVVFloatingWindow sharedInstance].contentVctrl;

The read-only properties vid and player of the controller PLVVFloatingWindowViewController can be used to retrieve the player currently held by the floating window (if any) and the vid of the video being played. They can also be used to determine whether the floating window is currently playing a video. Both properties are nil when no video is playing.

// 悬浮窗正在播放视频 vid，悬浮窗没有播放视频时为 nil，默认值为 nil
@property (nonatomic, strong, readonly) NSString * _Nullable vid;

// 悬浮窗持有的视频播放器，悬浮窗没有播放视频时为 nil，默认值为 nil
@property (nonatomic, strong, readonly) PLVVodSkinPlayerController * _Nullable player;

The following method is used to place a player from a page into the floating window. For usage examples, refer to the PLVVFloatingPlayerViewController class:

// vctrl 为持有大播放器的页面，当退出当前播放页面进行悬浮窗播放时 vctrl 为 nil
- (void)addPlayer:(PLVVodSkinPlayerController *)player partnerViewController:(id<PLVVFloatingWindowProtocol> _Nullable)vctrl;

Here, PLVVFloatingWindowProtocol defines the protocol that pages using the floating window must follow.

@protocol PLVVFloatingWindowProtocol <NSObject>

// 悬浮窗【exchange】按钮响应回调
- (void)exchangePlayer;

@end

The following methods are used to remove or destroy the floating window player:

// 销毁并移除悬浮窗口持有的播放器
- (void)destroyPlayer;

// 将悬浮窗上的播放器移走，但是不销毁
- (void)removePlayer;

The controller PLVVFloatingWindowViewController also defines the following broadcast events, which are sent to all observer when entering or exiting floating window mode:

// 进入悬浮窗模式广播事件
extern NSString *PLVVFloatingWindowEnterNotification;
// 退出悬浮窗模式广播事件
extern NSString *PLVVFloatingWindowLeaveNotification;

9.5 Floating Window Skin

The floating window player skin PLVVFloatingWindowSkin is held by the root controller PLVVFloatingWindowViewController of the floating window. It includes the [Close Floating Window] button, [Exchange] button, and [Play/Pause] button. The holder of the floating window player skin must follow the protocol PLVVFloatingWindowSkinProtocol as delegate to respond to the skin buttons:

/// 悬浮窗播放器控制按钮层响应事件回调
@protocol PLVVFloatingWindowSkinProtocol <NSObject>

- (void)tapCloseButton;

- (void)tapExchangeButton;

- (void)tapPlayButton:(BOOL)play;

@end
  
@interface PLVVFloatingWindowSkin : UIView

@property (nonatomic, weak) id<PLVVFloatingWindowSkinProtocol> delegate;

@end

Additionally, use the playback status callback playbackStateHandler of the SDK player class PLVVodPlayerViewController to call the method -statusIsPlaying: to update the [Play/Pause] button status on the skin in real-time:

__weak typeof(self) weakSelf = self;
self.player.playbackStateHandler = ^(PLVVodPlayerViewController *player) {
        [weakSelf.windowSkin statusIsPlaying:(player.playbackState == PLVVodPlaybackStatePlaying)];
};

self.windowSkin is the instance object of the floating window player skin, and self.player is the instance object of PLVVodPlayerViewController.