@page "/VideoTaskShow/{taskId:long}"

<div id="video-container">
    @if (videoKnows != null)
    {
        <div id="segmentsContainer" class="sc">

            <h2>
                <button class="gudingBtn" onclick="gd(this)">🔒</button>
                @nowTask.MediaName</h2>
            @for (int i = 0; i < videoKnows.Length; i++)
            {
                var item = videoKnows[i];
                <button class="kBtn" onclick="spClick(@i,this)">@getF(item)  @item.Theme </button>
            }
        </div>
    }
    <video id="videoPlayer" controls autoplay>
        <source  type="video/mp4" />
    </video>
    <div id="subtitleArea" class="subtitles"></div>

</div>


<script>
    window.b = []
    window.subtitles = []
    var displayButton = []
    var lastSegments = null;
    function init() {
        const videoPlayer = document.getElementById('videoPlayer');
        const subtitleArea = document.getElementById('subtitleArea');
        //视频时间变化时
        videoPlayer.addEventListener('timeupdate', function () {
            if (displayButton.length == 0) initKD()
            const currentTime = videoPlayer.currentTime;
            subtitleArea.textContent = '';
            //字幕
            window.subtitles.forEach(subtitle => {
                let textContent = subtitle.text 
                if (currentTime >= subtitle.start
                    && currentTime <= subtitle.end
                    && subtitleArea.textContent != textContent) {
                    subtitleArea.textContent = textContent;
                }
            });
            //时间片
            let segment = displayButton.find(s => currentTime >= s.startTime
                && currentTime <= s.endTime)
            if (segment) {
                segment.button.style.backgroundColor = "rgb(238, 200, 118)";
                if (lastSegments && lastSegments != segment) lastSegments.button.style.backgroundColor = "rgb(240, 249, 235)";
                lastSegments = segment
            }
        });
    }
    function initKD() {
        let btns = document.getElementsByClassName("kBtn")
        if(btns.length == 0) return
        displayButton = window.b.map((s, i) => { return { ...s, button: btns[i] } })
    }
    //后端传递初始化数据
    function setDB(a, b,c) {
        console.log("setDB", a, b,c)
        window.subtitles = a
        window.b = b
        const videoPlayer = document.getElementById('videoPlayer');
        videoPlayer.src = c
        init()
    }
    //点击时间片时
    function spClick(i, button) {
        videoPlayer.currentTime = displayButton[i].startTime;
    }
    function gd(btn) {
        let e = btn.parentElement.parentElement
        if (e.style.right == "0px") {
            btn.innerHTML = "🔒"
            e.style.right = "-300px"
        } else {
            e.style.right = "0px"
            btn.innerHTML = "🔓"
        }
    }
</script>