@page "/VideoTaskShow/{tid}"
<div>
    <input type="file" id="videoFile" accept="video/*">
    <input type="file" id="subtitleFile" accept=".json">
    <input type="file" id="segmentsFile" accept=".json">
</div>

<div id="video-container">
    <video id="videoPlayer" controls></video>
    <div id="subtitleArea" class="subtitles"></div>
</div>

<div id="segmentsContainer"></div>

<script>
    const 
    const videoPlayer = document.getElementById('videoPlayer');
    const subtitleArea = document.getElementById('subtitleArea');


    let subtitles = @captionsArr
    let segments = @videoKnows
    let displayButton = []
    let lastSegments = null;
    window.onload(() => {
        videoPlayer.src = @videoPath
    })


    videoPlayer.addEventListener('timeupdate', function () {
        const currentTime = videoPlayer.currentTime;
        subtitleArea.textContent = '';

        subtitles.forEach(subtitle => {

            let textContent = subtitle.Text || subtitle.Content;
            if (currentTime >= subtitle.Start
                && currentTime <= subtitle.End
                && subtitleArea.textContent != textContent) {

                subtitleArea.textContent = textContent;
            }
        });
        let segment = displayButton.find(s => currentTime >= s.开始秒
            && currentTime <= s.结束秒)
        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 getF(segment) {
        let sf = parseInt(segment.开始秒 / 60)
        let sm = parseInt(segment.开始秒 % 60)
        let ef = parseInt(segment.结束秒 / 60)
        let em = parseInt(segment.结束秒 % 60)
        return `${sf}:${sm} - ${ef}:${em}`
    }
    function displaySegments() {
        const segmentsContainer = document.getElementById('segmentsContainer');
        segmentsContainer.innerHTML = '';
        segments.forEach(segment => {
            const button = document.createElement('button');
            displayButton.push(segment);
            segment.button = button;
            button.textContent =
                `${getF(segment)} ${segment.主题}`;
            button.addEventListener('click', () => {
                videoPlayer.currentTime = segment.开始秒;
                videoPlayer.play();
            });
            segmentsContainer.appendChild(button);
        });
    }
</script>


@code {

}