<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">

<head>
    <title>CCR播放器</title>
    <link rel="stylesheet" href="./css/index6.css">
    <script src="./js/view.js"></script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            overflow-x: auto;
        }
        /*body {*/
        /*width: 1200px;*/
        /*margin: 0 auto;*/
        /*position: relative;*/
        /*background: #ddd;*/
        /*box-shadow: 0 0 10px 2px #ccc;*/
        /*border: 0px;*/
        /*}*/
        
        .chat-main,
        .document-main {
            background: #fff;
        }
        
        .chat-main {
            left: 0;
        }
        
        .video-middle {
            right: 0;
        }
        
        .video-right {
            left: 0;
            top: 195px;
            border-top: 1px solid #999;
        }
        
        .chat-list {
            top: 0;
        }
        /* callback add*/
        
        .live-right .l-r-m,
        .question-main {
            bottom: 0
        }
    </style>
</head>

<body>
    <!-- left start -->
    <div class="video-left">
        <div id="left-bar" class="left-bar" style="z-index: 0;">
            <!--<span id="left-switch" class="bar-switch left-icons"></span>-->
        </div>
        <div id="widget-video" class="widget-video">
            <div id="main-video" class="main-video" style="z-index: 100;">
                <div id="callbackPlayer"></div>
            </div>
        </div>
        <div id="question" class="video-right live-right">
            <div class="chat-main">
                <div class="chat-title">
                    <h2><i></i><span>公共聊天区</span></h2>
                </div>
                <div class="chat-list l-r-m">
                    <ul id="chat-list" class="chat-list l-r-m-list"></ul>
                </div>
            </div>
        </div>
    </div>
    <!-- left end -->
    <!-- middle start -->
    <div class="video-middle" id="video-middle">
        <div class="video-m-top" id="doc-main" data-module="1">
            <div class="document-main" style="width: 100%; overflow: auto;">
                <div id="noppt"></div>
                <div id="fullscreen-btn" style="right: 30px;">
                    <img src="img/big_n.jpg" style="width: 40px; height: 40px;">
                </div>
                <canvas id="drawPanel" width="1200" height="1200" style="width: 100%; display: none;"></canvas>
            </div>
        </div>
        <div class="l-m-b">
            <div class="lmb-r">
                <ul class="lmb-r-tools">
                    <li>
                        <a href="javascript:void(0);" class="qh" id="btn-switch" data-title="切换窗口"></a>
                    </li>
                </ul>
            </div>
            <div class="lmb-r2">
            </div>
        </div>
    </div>
    <!-- middle end -->
    <div class="doclist" style="display: none;">
        <ul id="docul"></ul>
        <a id="prev" class="prev" href="javascript:void(0);">&lt;</a>
        <a id="next" class="next" href="javascript:void(0);">&gt;</a>
    </div>
    <!-- 聊天模板 -->
    <script id="chatMsgTemplate" type="text/x-handlebars-template">
        <li {{#if isFromMe}}class="me" {{/if}}>
            <div class="peo-infos">
                <p class="peo-names">
                    <span class="p-n-names">{{name}}</span>
                    <i class="peo-icons "></i>
                </p>
            </div>
            <div class="peo-chat">
                <i class="icons"></i>
                <p class="chat-content">{{{content}}}</p>
            </div>
        </li>
    </script>
    <!-- 私聊 -->
    <script id="privateChatMsgTemplate" type="text/x-handlebars-template">
        <li {{#if isFromMe}}class="me" {{/if}}>
            <div class="peo-infos">
                <p class="peo-names">
                    <span class="p-n-names pchat">{{fromUserName}}&nbsp;对&nbsp;{{toUserName}}&nbsp;说</span>
                    <i class="peo-icons "></i>
                </p>
            </div>
            <div class="peo-chat">
                <i class="icons"></i>
                <p class="chat-content">{{{content}}}</p>
            </div>
        </li>
    </script>
    <!-- 提问 -->
    <script id="questionTemplate" type="text/x-handlebars-template">
        <li id="{{id}}" questionUserId="{{questionUserId}}" {{#if isFromMe}}self="1" {{else}}style="display:none;" {{/if}}>
            <div class="peo-infos">
                <p class="peo-names">
                    <span class="p-n-names">{{questionUserName}}：</span>
                    <i class="peo-icons"></i>
                </p>
            </div>
            <div class="peo-chat">
                <p class="chat-content">{{content}}</p>
            </div>
        </li>
    </script>
    <!-- 回答 -->
    <script id="answerTemplate" type="text/x-handlebars-template">
        <div class="peo-repeat">
            <p class="teacher-name">
                <i></i> {{answerUserName}}：
            </p>
            <p class="repeat-content">{{content}}</p>
        </div>
    </script>
</body>

</html>