@using WeOnlineApp.Configuration
@using WeOnlineApp.Helpers
@{
    string id = "scene-play";
    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", $"情景播放区#{id}#{playDiv}")

@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>';
        var $playBox = $('#@id .media-box');

        window.Scroll2Bottom($('#@id').find('.scroll-box'));

        function PlayNext() {
            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);
                }
            } else {
                $playBox.fadeOut(300,
                    () => {
                        $playBox.html('@Html.Raw(playIcon)').fadeIn();
                    });
            }
        }

        function Play(path, type, no) {
            @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');
                }
                $playBox.fadeOut(300,
                    () =>  {
                        $playBox.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();},
                                                1000 * 0.5);
                                        },
                                        false);
                                    setTimeout(() =>  {
                                        if (!hasLoad) {
                                            window.isPlaying = false; PlayNext();
                                        }
                                    }, 1000 * 3);
                                    //video.play();
                                    //setTimeout(() => {video.pause();video.load();},10);

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

                        }
                    });
            }
        }

   
    </script>

}