{% extends "bee_django_course/base.html" %}
{% load static %}
{% load bee_django_course_filter %}
{% block content %}
    <h4>录制视频详情</h4>
    <div style="margin-bottom: 20px;">
        <div>学生: <a href="{{ user_live.user.get_user_search_link }}">{{ user_live.user }}</a></div>
        <div>开始时间: {{ user_live.start_time|date:"Y-m-d H:i:s" }}</div>
        <div>时长: {{ user_live.get_duration_str }}</div>
    </div>
    <div class="video">
        {% if can_view %}
            {% if user_live.provider_name == 'cc' %}
                {#                            <iframe src="{{ user_live.record_video_id | get_video_src }}" frameborder="0" width="100%"#}
                {#                                    height="100%"></iframe>#}
                {% if live_url %}
                    <div align="center" class="embed-responsive embed-responsive-16by9">
                        <video width='320' height='240' controls class="embed-responsive-item">
                            <source src="{{ live_url }}" type="video/mp4">
                            你的浏览器不支持video标签.
                        </video>
                    </div>
                {% else %}
                    获取播放地址失败
                {% endif %}
            {% elif user_live.provider_name == 'tencent' %}
                <div align="center" class="embed-responsive embed-responsive-16by9">
                    <video width='320' height='240' controls class="embed-responsive-item">
                        <source src="{{ user_live.replay_url }}" type="video/mp4">
                        你的浏览器不支持video标签.
                    </video>
                </div>
            {% elif user_live.provider_name == 'gensee' %}
                <gs:video-vod id="videoComponent" site="zenweiqi.gensee.com" ctx="webcast"
                              ownerid="{{ user_live.live_id }}" uname="{{ request.user.first_name }}"
                              authcode="111111"/>
            {% else %}
                未配置录播供应商
            {% endif %}
        {% else %}
            该视频超过时间，无法观看，如有疑问，请联系客服
        {% endif %}
    </div>
    {% include 'bee_django_course/_user_live_comments.html' with comment_form=comment_form comments=comments %}

{% endblock %}
{% block scripts %}
    <script type="text/javascript" src="{% static 'bee_django_course/gensee/gssdk.js' %}"></script>
    <script>

        function _post() {
            var user_live_id = "{{ user_live.id }}";
            var mentor_id = "{{ request.user.id }}";
            var url = '{% url "bee_django_course:user_live_update_view" %}';

            var try_until_success = function () {
                $.post(url, {"user_live_id": user_live_id, "mentor_id": mentor_id}
                ).success(function (res) {
                    console.log(res);
                }).error(function () {
                    console.log("error, retry");
                    setTimeout(try_until_success, 2000);
                });
            };

            try_until_success();
        }

        $(document).ready(function () {
            // 展示播放器状态通知
            // 根据组获得通讯通道
            var channel = GS.createChannel();
            var provider = "{{ user_live.provider_name }}";
            var is_view = "{{ user_live.is_mentor_view }}";

            if (is_view == "True") {
                return;
            }
            var can_record_view = "{{ can_record_view }}";
            var can_view = "{{ can_view }}";
            if (can_record_view != "True" || can_view != "True") {
                return;
            }
            if (provider === "cc" || provider === 'tencent') {
                var videos = document.getElementsByTagName("video");
                if (videos.length > 0) {
                    var video = videos[0];
                    video.onloadedmetadata = function (ev) {
                        console.log(video.duration);
                        if (video.duration < 20) {
                            _post();
                        } else {
                            video.onplay = function () {
                                setTimeout(function () {
                                    _post();
                                }, 20000);
                            }
                        }
                    };

                }
            } else if (provider === "gensee") {
                setTimeout(function () {
                    _post();
                }, 20000);
            }
        });

    </script>
{% endblock %}