保利威文档中心

幫助中心

3_3-云课堂场景-PPT

更新時間:2023-04-17 15:27:57

1 功能概述

PPT 功能是將講師端目前正在操作的 PPT 或文件顯示為一個小型浮動視窗的功能。

由於 PPT 是嵌入在浮動視窗中顯示的,因此該模組將浮動視窗和 PPT 分開為兩個介面,一個介面代表的是嵌入了 PPT 的浮動視窗,一個介面是 PPT。

2 使用演示

//初始化
IPLVLCFloatingPPTLayout floatingPPTLayout=findViewById(R.id.plvlc_ppt_floating_ppt_layout);
//设置悬浮窗点击监听器
floatingPPTLayout.setOnFloatingViewClickListener();
//设置关闭悬浮窗的点击监听器
floatingPPTLayout.setOnClickCloseListener();
//设置直播PPT事件监听器
floatingPPTLayout.getPPTView().initLivePPT();
//设置回放PPT事件监听
floatingPPTLayout.getPPTView().initPlaybackPPT();
//销毁
floatingPPTLayout.destroy();

詳細的呼叫程式碼以及與其他模組的通訊,請參考 PLVLCCloudClassActivity 類別中的程式碼呼叫。

3 介面介紹

3.1 IPLVLCFloatingPPTLayout

IPLVLCFloatingPPTLayout是雲課堂場景下定義的 PPT 浮動視窗佈局,定義了:

  1. 外部直接呼叫的方法
  2. 需要外部回應的事件監聽器
public interface IPLVLCFloatingPPTLayout {

    // <editor-fold defaultstate="collapsed" desc="1. 外部直接调用的方法">

    /**
     * 设置服务端的PPT开关
     *
     * @param enable true表示打开PPT,false表示关闭PPT
     */
    void setServerEnablePPT(boolean enable);

    /**
     * 显示
     */
    void show();

    /**
     * 隐藏
     */
    void hide();

    /**
     * PPT是否在悬浮窗中
     */
    boolean isPPTInFloatingLayout();

    /**
     * 获取PPTView
     */
    IPLVLCPPTView getPPTView();

    /**
     * 设置悬浮窗点击监听器
     *
     * @param li listener
     */
    void setOnFloatingViewClickListener(View.OnClickListener li);

    /**
     * 设置显示关闭悬浮窗的监听器
     *
     * @param onClickCloseListener listener
     */
    void setOnClickCloseListener(IPLVOnClickCloseFloatingView onClickCloseListener);

    /**
     * 获取切换View
     */
    PLVSwitchViewAnchorLayout getPPTSwitchView();

    /**
     * 销毁
     */
    void destroy();
    // </editor-fold>

    // <editor-fold defaultstate="collapsed" desc="2. 需要外部响应的事件监听器">

    interface IPLVOnClickCloseFloatingView {
        /**
         * 点击关闭
         */
        void onClickCloseFloatingView();
    }
    // </editor-fold>

}

3.2 IPLVLCPPTView

雲課堂場景下,針對 PPT 佈局進行封裝的 interface,定義了:

  1. 外部直接呼叫的方法
  2. 需要外部回應的事件監聽器
public interface IPLVLCPPTView {

    // <editor-fold defaultstate="collapsed" desc="1. 外部直接调用的方法 - live部分,定义 直播PPT独有的方法">

    /**
     * 初始化直播PPT
     *
     * @param onPLVLCPPTViewListener listener
     */
    void initLivePPT(OnPLVLCLivePPTViewListener onPLVLCPPTViewListener);

    /**
     * 移除延迟时间
     */
    void removeDelayTime();

    /**
     * 恢复延迟时间
     */
    void recoverDelayTime();


// </editor-fold>

    // <editor-fold defaultstate="collapsed" desc="1. 外部直接调用的方法 - playback部分,定义回放PPT独有的方法">
    /**
     * 初始化回放PPT
     *
     * @param onPlaybackPPTViewListener listener
     */
    void initPlaybackPPT(OnPLVLCPlaybackPPTViewListener onPlaybackPPTViewListener);

    /**
     * 设置当前回放视频播放的位置
     *
     * @param position 播放位置
     */
    void setPlaybackCurrentPosition(int position);

    /**
     * 获取回放专用的PPTView,用于绑定到播放器内部
     *
     * @return 回放专用的PPTView的接口
     */
    IPolyvPPTView getPlaybackPPTViewToBindInPlayer();
// </editor-fold>

    // <editor-fold defaultstate="collapsed" desc="1. 外部直接调用的方法 - common部分,定义直播PPT和回放PPT通用的方法">

    /**
     * 发送消息到webView
     *
     * @param event   消息的事件
     * @param message 消息内容
     */
    void sendWebMessage(String event, String message);

    /**
     * 重新加载
     */
    void reLoad();

    /**
     * 销毁
     */
    void destroy();
    // </editor-fold>

    // <editor-fold defaultstate="collapsed" desc="2. 需要外部响应的事件监听器 - PPT直播事件监听器">

    /**
     * PPT直播事件监听器
     */
    interface OnPLVLCLivePPTViewListener {

        /**
         * 直播回调,切换横竖屏
         *
         * @param toLandscape true表示切换到横屏,false表示切换到竖屏
         */
        void onLiveChangeToLandscape(boolean toLandscape);

        /**
         * 直播回调,开始或暂停视频
         *
         * @param toStart true表示开始播放视频,false表示暂停播放视频
         */
        void onLiveStartOrPauseVideoView(boolean toStart);

        /**
         * 直播回调,重播视频
         */
        void onLiveRestartVideoView();

        /**
         * 直播回调,回到上一个Activity
         */
        void onLiveBackTopActivity();
    }
    // </editor-fold>

    // <editor-fold defaultstate="collapsed" desc="2. 需要外部响应的事件监听器 - PPT回放事件监听器">

    /**
     * PPT回放事件监听器
     */
    interface OnPLVLCPlaybackPPTViewListener {

        /**
         * 回放回调,切换PPTView的位置
         *
         * @param toMainScreen true表示切换到主屏幕,false表示切回到小窗
         */
        void onPlaybackSwitchPPTViewLocation(boolean toMainScreen);
    }
    // </editor-fold>

}

4 實作介紹

IPLVLCFloatingPPTLayout 的實作類別是:PLVLCFloatingPPTLayout。

IPLVLCPPTView 的實作類別是:PLVLCPPTView。

4.1 PLVLCFloatingPPTLayout

PLVLCFloatingPPTLayout 是一個全螢幕大小的佈局,由他的子 View,PLVTouchFloatingView 作為真正的浮動視窗控制項回應浮動視窗的拖曳事件。

4.1.2 初始化 View

可以在初始化中設定浮動視窗的橫向和直向各自的初始化位置,也可以設定在橫向和直向下,浮動視窗的大小。

//初始化View
private void initView() {
    //...
    //设置初始化位置
    int screenWidth = Math.min(ScreenUtils.getScreenWidth(), ScreenUtils.getScreenHeight());
    int screenHeight = Math.max(ScreenUtils.getScreenWidth(), ScreenUtils.getScreenHeight());
    floatingView.setInitLocation(
            screenWidth - PLVScreenUtils.dip2px(DP_FLOATING_PPT_WIDTH_PORT),
            PLVScreenUtils.dip2px(DP_ORIGIN_MARGIN_TOP_PORTRAIT),
            screenHeight - PLVScreenUtils.dip2px(DP_FLOATING_PPT_WIDTH_LAND) - PLVScreenUtils.dip2px(DP_ORIGIN_MARGIN_RIGHT_LANDSCAPE),
            PLVScreenUtils.dip2px(DP_ORIGIN_MARGIN_TOP_LANDSCAPE)
    );
}
4.1.2 初始化資料

浮動視窗內部使用了 MVP 模式,需要初始化 Presenter。

//初始化数据
private void initData() {
    presenter = new PLVLiveFloatingPresenter();
    presenter.init(this);
}

而浮動視窗實作的 View 層介面是:

/**
 * 悬浮窗View
 */
interface IPLVLiveFloatingView {
    /**
     * 设置讲师信息
     *
     * @param nick   讲师昵称
     * @param picUrl 讲师图片Url
     */
    void updateTeacherInfo(String nick, String picUrl);
}

用於更新浮動視窗上講師的資訊。

4.2 PLVLCPPTView

PLVLCPPTView 是 PPT 的實作。有以下幾點需要注意:

  1. 它是對 SDK 中的類別:PolyvPPTWebView,的一層業務封裝。

  2. 它使用 MVP 模式來處理伺服器端資料的收發等邏輯。

  3. 由於 PPT 既可以直播,也可以在回放中使用,因此它的介面分為 live、playback、common 三組,具體可以直接看介面註解。

4.2.1 初始化 View
//初始View
private void initialView(Context context) {
    //...
    //设置占位图
    pptPlaceHolderView.setPlaceHolderImg(R.drawable.plvlc_ppt_placeholder);
    //设置占位图文本
    pptPlaceHolderView.setPlaceHolderText(getResources().getString(R.string.plv_ppt_no_document));
    //...
    //加载ppt的webView
    pptWebView.loadWeb();
}
4.2.2 初始化資料

PPT 內部使用了 MVP 模式,需要初始化 Presenter。

//初始化数据
private void initData() {
    presenter = new PLVPPTPresenter();
    presenter.init(this);
}

而 PPT 實作的 View 層介面是:

/**
 * PPTView
 */
interface IPLVPPTView {
    /**
     * 发送消息到webView
     *
     * @param msg 消息
     */
    void sendMsgToWebView(String msg);
    /**
     * 发送消息到webView
     *
     * @param msg   消息
     * @param event 事件
     */
    void sendMsgToWebView(String msg, String event);
    /**
     * 隐藏加载中图片
     * 直播时,则聊天室登录后,收到PPT控制消息时,隐藏加载中图片。
     * 回放时,在收到PPT的prepare回调后,异常加载中图片。
     */
    void hideLoading();
}
联系客服,在线咨询