@using WeApp.Configuration
@using WeApp.Helpers
@model WeApp.Views.Exercise.ScreenModel
@{
    string id = "scene-play";
    string id2 = $"{id}_{Model.GroupNo}";
    string playIcon = "<div class=\"play-icon\"><i class=\"fas fa-play\"></i></div>";
    string playDiv = $"<div class=\"media-box\">{playIcon}</div>";
}
<style>
   @*#@id > .card-body {
        background: #fbfdff;
        background-image: radial-gradient(#f2f3fe,#f5f3fe,#f8f6fe,#faf6fe,#fff);
        padding: 10px;
        border-radius: 0 0 var(--borderRadius) var(--borderRadius);
    }

   #@id > .card-body .scroll-box {
        width: 100%;
        height: 100%;
        padding:0 ;
    }*@
    .media-box {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .media-box .play-icon {
        position: relative;
        width: 100%;
        height: 100%;
        border: 1px solid var(--mc);
        background: #f2f6fe;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .media-box .play-icon i {
            font-size: 40px;
            color: var(--mc);
        }
</style>
@Html.Partial("_Run/_AreaBox", $"情景播放区#{id2}#{playDiv}")
@using (Html.BeginScripts())
{
    <script>
        window.Scroll2Bottom($('#@id2').find('.scroll-box'));
    </script>
}
@if (Model.WithScript)
{
    using (Html.BeginScripts())
    {
        <script id="attach-script">
            var attach_play_timer;
            var imageTemplate = '<img src="{0}" style="width: 100%;height: 100%;" />',//muted
                videoTemplate = '<video id="video" style="width: 100%;height: 100%;" controls muted autoplay><source src="{0}"  type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video>',
                audioTemplate = '<audio id="video" style="width: 100%;height: 100%;" controls muted autoplay><source src="{0}" type="audio/mp3">您的浏览器不支持 HTML5 audio 标签。</audio>';

            function PlayNext(no) {
                if (window.isPlaying) {
                    return;
                }
                $(".attach").removeClass("playing");
                var list = window.waitToPlayAttachList;
                if (list && list.length) {
                    var nextAttach = list.shift();
                    if (nextAttach) {
                        Play(nextAttach.filePath, nextAttach.fileType, nextAttach.attachNo,no);
                    }
                } else {
                    $(`#@(id)_${no} .media-box`).fadeOut(300,
                        () => {
                            $(`#@(id)_${no} .media-box`).html('@Html.Raw(playIcon)').fadeIn();
                        });
                }
            }

            function Play(path, type, no,groupNo) {
                @if (IwbConsts.IsDebug){
                <text>
                    path = "http://shvber.com:5028/" + path;
                </text>
            }
                if (type) {
                    window.isPlaying = true;
                    var str = type === "image"
                        ? imageTemplate.format(path)
                        : type === "video"
                        ? videoTemplate.format(path)
                        : type === "audio"
                        ? audioTemplate.format(path)
                        : '';
                    $(".attach").removeClass("playing");
                    if (no) {
                        $("#" + no).addClass('playing');
                    }
                    $(`#@(id)_${groupNo} .media-box`).fadeOut(300,
                        () =>  {
                            $(`#@(id)_${groupNo} .media-box`).html(str).fadeIn();
                            if (type === "video") {
                                var video = document.getElementById("video");
                                if (video) {
                                    try {
                                        var hasLoad = false;
                                        video.loop = false;
                                        video.addEventListener("loadstart", () => {
                                            //console.log("loadstart");
                                            hasLoad = false;
                                        },false);
                                        video.addEventListener('durationchange', () =>  {
                                            //console.log("durationchange");
                                            hasLoad = true;

                                        },false);
                                        video.addEventListener('ended', () => {
                                            setTimeout(function () { window.isPlaying = false; PlayNext(groupNo);},
                                                    1000 * 0.5);
                                            },
                                            false);
                                        setTimeout(() =>  {
                                            if (!hasLoad) {
                                                window.isPlaying = false; PlayNext(groupNo);
                                            }
                                        }, 1000 * 3);
                                        //video.play();
                                        //setTimeout(() => {video.pause();video.load();},10);

                                    } catch (e) {
                                        console.log(e);
                                        setTimeout(() => { window.isPlaying = false; PlayNext(groupNo);},1000 * 0.5);
                                    }
                                } else {
                                    setTimeout(() => { window.isPlaying = false; PlayNext(groupNo);},1000 * 0.5);
                                }
                            } else if (type === "image") {
                                clearTimeout(attach_play_timer);
                                attach_play_timer = setTimeout(() => { window.isPlaying = false; PlayNext(groupNo);},1000 * 15);
                            }else if (type === "video") {

                            }
                        });
                }
            }
        </script>

    }
}