带货场景(页面)
1 Feature Overview
The page implementation for the e-commerce scenario is PLVECWatchRoomViewController.
This is the shared interface for both live and replay modes in the e-commerce scenario. Features supported during live streaming include: player, chat room, products, tipping, and interactive applications. Features supported during replay include: player.
2 Usage Guide
Since the initialization parameters required for the e-commerce page, such as channel information and logged-in user account details, are configured via the class PLVRoomLoginClient during login, and managed internally by PLVRoomLoginClient using the singleton of the PLVRoomDataManager class for live room data, entering the e-commerce scenario page only requires the following code:
PLVECWatchRoomViewController *vctrl = [[PLVECWatchRoomViewController alloc] init];
[self.navigationController pushViewController:vctrl animated:YES];
When leaving the e-commerce page, in addition to removing the page from the page stack, you must call the logout interface of PLVRoomLoginClient to remove the PLVRoomDataManager singleton's holding and monitoring of the current live room data:
[PLVRoomLoginClient logout];
[self.navigationController popViewControllerAnimated:YES];
3 Page Introduction
3.1 Page UI
The e-commerce scenario page, whether for live or replay, consists of the following page UI controls:
@property (nonatomic, strong) PLVECPlayerViewController *playerVC; // 页面底部播放控制器
@property (nonatomic, strong) UIScrollView *scrollView; // 播放器顶部横行透明滚动视图
@property (nonatomic, strong) PLVECLiveDetailPageView *liveDetailPageView; // 滚动视图第一屏
@property (nonatomic, strong) PLVECHomePageView *homePageView; // 滚动视图第二屏
@property (nonatomic, strong) UIButton *closeButton; // 右上角关闭按钮
Among them, scrollView has three screens. The first screen liveDetailPageView displays announcement information and live introduction. The second screen homePageView shows interactive controls such as the chat room, like button, product button, shopping cart button, and gift button during live streaming; during replay, it shows controls like the replay video progress bar and video playback speed switch. The third screen is blank, used when users want to watch without distractions. The default display upon entering the page is the second screen. The player is located at the bottom of scrollView, and the close button is above scrollView.
The view structure is as follows:
.
└── PLVECWatchRoomViewController
├── PLVECPlayerViewController
├── UIScrollView
│ ├── PLVECLiveDetailPageView
│ └── PLVECHomePageView
└── UIButton
Additionally, the e-commerce scenario page does not support landscape mode, only portrait mode. Therefore, the following methods of the parent class UIViewController need to be overridden:
- (BOOL)shouldAutorotate {
return NO;
}
- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {
return UIInterfaceOrientationPortrait;
}
- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
return UIInterfaceOrientationMaskPortrait;
}
3.2 Live Room Data Monitoring
The page needs to monitor the live room data PLVRoomData in real-time and update the UI accordingly. First, import the header file #import "PLVRoomDataManager.h", and make PLVECWatchRoomViewController conform to the protocol PLVRoomDataManagerProtocol, then add monitoring. The code example is as follows:
[[PLVRoomDataManager sharedManager] addDelegate:self delegateQueue:dispatch_get_main_queue()];
In the code example, passing dispatch_get_main_queue() as the delegateQueue parameter indicates that the callback method should be executed from the main thread, because the operations performed in the current page's related callbacks are all UI updates.
For more information about PLVRoomDataManager, refer to the document "6_2 Core Common-Data".
The delegate methods that the e-commerce scenario page needs to monitor are as follows:
#pragma mark PLVRoomDataManager Protocol
/// 在线人数 onlineCount 更新
- (void)roomDataManager_didOnlineCountChanged:(NSUInteger)onlineCount {
}
/// 点赞数 likeCount 更新
- (void)roomDataManager_didLikeCountChanged:(NSUInteger)likeCount {
}
/// 播放状态 playing 更新
- (void)roomDataManager_didPlayingStatusChanged:(BOOL)playing {
}
/// 菜单信息 menuInfo 更新
- (void)roomDataManager_didMenuInfoChanged:(PLVLiveVideoChannelMenuInfo *)menuInfo {
}
/// 直播状态 liveState 更新
- (void)roomDataManager_didLiveStateChanged:(PLVChannelLiveStreamState)liveState {
}
The removal of monitoring is handled internally by the logout method +logout of PLVRoomLoginClient mentioned in 2 Usage Guide, so no additional monitoring removal operations are required.
