<!-- 

 ในการอัพเดท version 1.2.0 
    มีการปรับวิธีการโหลดวิดิโอ โดย

    ที่ฟังก์ชั่น loadVideo()
    1. เอา ลิ้งจากจากคลิปบอร์ดมาประกาศตัวแปร
    2. เปลี่ยนค่าใน วัตถุ id "my_elementID-url" เป็นลิ้ง
    3. ทำการโหลดวิดิโอ โดยใช้วิธีการของ iframe โดยรับลิ้งจากตัวแปรที่ประกาศไว้

ในการอัพเดท version 2.0.0
    มีการออกแบบ ui หน้าเว็บใหม่
    ปัญหา
        เหมือนว่า google chome จะอัพเดทใหม่ ให้ไม่สามารถใช้สคริปต์สั่งโฟกัสที่ element ที่เลือกได้แล้ว 
        ในตอนที่คลิกเปลี่ยนเป็นโหมดคีย์บอร์ด (botton id = toggleButton_cheakFogus) ที่เวลาเลือกวัตถุใด ๆ แล้วโปรแกรมจะต้องกลับมาโฟกัสที่ body อัตโนมัติ เพื่อให้โปรแกรมสามารถตรวจจับคีย์ลัดที่กดได้
        จึงเกิดปัญหาว่าโฟกัสมันค้างอยู่ที่ปุ่ม เวลากดคีย์ลัดมันจึงไม่ทำงาน

ในการอัพเดท version 2.0.1
    ทำการแก้ปัญหาการอัพเดตค่าใน element บนหน้าเว็บ ก่อนหน้านี้เวลาเรียกใช้คีย์ลัด ลืมเซ็ตให้มันเปลี่ยนค่า
    เอาปุ่ม keybroad shutcut check loop ออกด้วย แล้วเปลี่ยนขนาดความกว้างเป็น 100%
    แก้ปัญหามันหลุดโฟกัสได้แล้ว
    แก้ปัญหาสัดส่วนใหญ่เกินในโทรศัพท์แล้สด้วย

ในการอัพเดท version 2.0.2
    ยังเป็นการแก้ปัญหาเดิม-ทำการแก้ปัญหาการอัพเดตค่าใน element บนหน้าเว็บ ก่อนหน้านี้เวลาเรียกใช้คีย์ลัด ลืมเซ็ตให้มันเปลี่ยนค่า
    
    แก้ปัญหามันหลุดโฟกัสได้แล้ว เกิดจากใส่ตัวแปรผิดในลูป myfunction_a1__notFocusLoop เอาตัวแปรสเตตัสของ replay มาใส่ ซึ่งจริงๆต้องใส่ตัวแปรของ Focus
    แต่ไม่ได้เอาปุ่ม เอาปุ่ม keybroad shutcut check loop ออกด้วย กลับมา เหมือนจะมีอะไรสักอย่างที่คอยสั่งให้หลุดโฟกัสเองอยู่แล้ว

    เพิ่มฟังก์ชั่น debug_variableCheck("ชื่อตัวแปร",ตัวแปร) เพื่อแสดงค่าตัวแปร
    มีการแสดงตัวแปร และสเตตัสควบคุมหน้าเว็บ เช่น replay on/off หรือเวลา start time endtime ในตอนที่มีการเปลี่ยนแปลง

    สร้าง setinterval ให้ showing_values_intervalId คอยอัพเดตวัตถุที่แสดงอยู่ในหน้าเว็บ

    สร้างปุ่มหยุดวิดิโอด้วย ลืมไปสนิทเลย ในโทรศัพท์กดหยุดวิดิโอไม่ได้
    ใช้ id ปุ่ม เป็น x1

ในการอัพเดท version 2.0.3
    ไม่แน่ใจว่า 2.0.2 มันใช้งานได้รึยัง เพราะอัพเว็บใหม่ไปแล้ว แต่เหมือนจะลืมแก้ชื่อไฟล์ เพื่อความชัวร์ เลยเอาเว็บที่อยู่บนเน็ตจริงๆมาตั้งเป็นเวอร์ชั่นใหม่เลย
    เวอร์ชั่นนี้ใช้งานได้แน่

ตอนนี้เป็นเวอร์ชั่นการอัพเดท version 2.1.0
    เพิ่มรูปคีย์ลัดแป้นพิมพ์
    เพิ่มคลิปสาธิตการใช้งาน
    เพิ่มปุ่ม + - ให้กลายเป็นเพิ่ม/ลดเสียง
    เพิ่มชื่อคนสร้างงาน
    id:b1 เปลี่ยน class เป็น status_bar และปรับลักษณะสีนิด ๆ หน่อย ๆ

ตอนนี้เป็นเวอร์ชั่นการอัพเดท version 2.2.0
    เพิ่มลิ้งไปยังเว็บที่ใช้สำหรับการอัพโหลดไฟล์เสียงหรือวิดิโอจากเครื่อง
    เพิ่ม textarea เผื่อไว้เอาโน้ตเพลงมาใส่เวลาจะฝึกร้อง


-->


<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Controller</title>
    <style>
        html {
            font-size: 14px;
            /* ขนาดฟอนต์ฐาน */
        }

        body {
            font-family: sans-serif;
            background: #ffebc1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }


        .button-row,
        .status-row,
        .speed-row,
        .skip-row,
        .pausePlay-row,
        .time-row {
            display: flex;
            margin: 5px;
            width: 100%;
            justify-content: space-between;
            align-items: stretch;
        }

        .speed-row,
        .skip-row,
        .pausePlay-row,
        .time-row {
            height: 4.5em;
        }

        .button-row button,
        .speed-row button,
        .skip-row button,
        .pausePlay-row button,
        .time-row button {
            margin: 2px;
            padding: 5px 5px;
        }

        #video-container {
            width: 100%;
            height: 600px;
            background: #eee;
            margin: 10px 0;
            border: 1px solid #999;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .label {
            padding: 0 10px;
            display: flex;
            align-items: center;
        }

        .button-row,
        .status_bar,
        .speed-row,
        .skip-row,
        .time-row,
        .speed-row,
        .skip-row,
        .time-row,
        .pausePlay-row button,
        .button-row button,
        .speed-row button,
        .skip-row button,
        .time-row button,
        .label {
            font-size: 14px;
        }

        .pausePlay-row button,
        .button-row button,
        .speed-row button,
        .skip-row button,
        .time-row button,
        .label {
            font-size: 14px;
            background-color: rgb(242, 200, 255);
        }

        .wrapper {
            width: 100%;
            max-width: 100%;
            /* ไม่บังคับ min-width */
        }

        @media (min-width: 872px) {
            body {
                font-size: 14px;
            }

            .wrapper {
                max-width: 872px;
                /* desktop */
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">

        <a href="https://musicpractice.icecomet634.com/LoadFromDevice.html" target="_blank"
        style="display:block; text-align:center; font-weight:bold; text-decoration:underline;">
            click hear to upload file from device
        </a>
        
        <div class="button-row">

            <!-- <button onclick="myfunction_a1__notFocusLoop()" id="a1" style="width: 40%; height: 4.5em;" tabindex="-1">keyboard
                shortcuts mode</button> -->
            <button onclick="myfunction_a2_loadVideoFromUrlOnClipboard()" id="a2" style="width: 100%; height: 4.5em;"
                tabindex="-1">copy YouTube video url and clik this button to load</button>
        </div>
        <div>
            <div id="video-container" style="width:100%;height:0;padding-bottom:56.25%;position:relative;">
                <div id="player" style="position:absolute;top:0;left:0;width:100%;height:100%;"></div>
            </div>

        </div>
        <div class="status-row" style="justify-content: center;">
            <div style="justify-content: center;" class="status_bar" id="b1"> | speed = 1.0 | current time = 00:00 | start
                time =
                00:00 | start time = 00:00 | </div>
        </div>
        <div class="pausePlay-row">
            <button onclick="myfunction_x1_pouch()" id="x1" style="width: 100%;">pause/play</button>
        </div>

        <div class="time-row">
            <button onclick="myfunction_c1_undoSetStartFromCurrentTime()" id="c1" style="width: 10%;">undo</button>
            <button onclick="myfunction_c2_setStartFromCurrentTime()" id="c2" style="width: 30%;">set start
                00:00</button>
            <div style="display:flex; flex-direction:column; width: 10%; margin: 2px;">
                <button onclick="myfunction_c3_12_changeStart(1)" id="c31"
                    style="flex:1; margin: 0px; margin-bottom: 1px;">+1</button>
                <button onclick="myfunction_c3_12_changeStart(-1)" id="c32"
                    style="flex:1; margin: 0px; margin-top: 1px;">-1</button>
            </div>
            <button onclick="myfunction_c4_gotoStartTime()" id="c4" style="flex:1;">go to time</button>
            <button onclick="myfunction_c5_gotoPreviousStartTime()" id="c5" style="width: 10%;">undo</button>
        </div>

        <div class="skip-row">
            <button onclick="myfunction_d_04_changeSlideTime(-1)" id="d0" style="width: 10%;">-</button>
            <button onclick="myfunction_d_1_skipBefore()" id="d1" style="flex:1;">&lt;&lt; skip</button>
            <button id="d2" style="width: 10%;">3</button>
            <button onclick="myfunction_d_3_skipAfter()" id="d3" style="flex:1;">skip &gt;&gt;</button>
            <button onclick="myfunction_d_04_changeSlideTime(1)" id="d4" style="width: 10%;">+</button>
        </div>

        <div class="speed-row">
            <button onclick="myfunction_e_1234_setSpeed(0.25)" id="e1" style="flex:1;">0.25x</button>
            <button onclick="myfunction_e_1234_setSpeed(0.50)" id="e2" style="flex:1;">0.50x</button>
            <button onclick="myfunction_e_1234_setSpeed(0.75)" id="e3" style="flex:1;">0.75x</button>
            <button onclick="myfunction_e_1234_setSpeed(1.00)" id="e4" style="flex:1;">1.0x</button>
            <button onclick="myfunction_e_56_changeSpeed(-0.05)" id="e5" style="flex:1;">-</button>
            <button onclick="myfunction_e_56_changeSpeed(0.05)" id="e6" style="flex:1;">+</button>
        </div>

        <div class="time-row">
            <button onclick="myfunction_f0_undoSetEndFromCurrentTime()" id="f0" style="width: 10%;">undo</button>
            <button onclick="myfunction_f1__setEndFromCurrentTime()" id="f1" style="width: 30%;">set end 00:00</button>
            <div style="display:flex; flex-direction:column; width: 10%; margin: 2px;">
                <button onclick="myfunction_f2__changeEnd(1)" id="f21"
                    style="flex:1; margin: 0px; margin-bottom: 1px;">+1</button>
                <button onclick="myfunction_f2__changeEnd(-1)" id="f22"
                    style="flex:1; margin: 0px; margin-top: 1px;">-1</button>
            </div>
            <button onclick="myfunction_f3__changeEndtoggleReplayStatus()" id="f3" style="flex:1; background-color: rgb(255, 156, 156);">replay mode :
                off</button>

        </div>
        <textarea style="width: 100%;" placeholder="note ... เผื่อไว้เอาโน้ตเพลงมาใส่เวลาจะฝึกร้อง"> </textarea>
        <img src="keybroad_shortcut.png" style="width: 100%;" alt="">
        <div style="text-align:center; font-size:12px; color:#666; margin-top:40px;">
            © 2025 Thanadej Sooparnich (file version 2-1-0)
        </div>
    </div>
</body>

<script>
    var player;
    var myVar_Default_video_ID = "FvLOrLy3bxU";
    // Load the YouTube Iframe API script
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // Function called when the API is ready
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            videoId: myVar_Default_video_ID, // Default video ID
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    // Function to start video when ready
    function onPlayerReady(event) { event.target.playVideo(); }
    // Function to load a video from URL
    function loadVideo() { navigator.clipboard.readText().then(text => { const url = text; var videoId = extractVideoId(url); if (videoId) { player.loadVideoById(videoId); console.log(videoId); } else { alert('Invalid YouTube URL'); } }) }    // Extract videoId from YouTube URL
    function extractVideoId(url) { var videoId = null; var regex = /(?:https?:\/\/(?:www\.)?youtube\.com\/(?:[^\/\s]+\/\S+\/|\S+\/|\S+\/?v=|\S+\?v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/; var match = url.match(regex); if (match && match[1]) { videoId = match[1]; } return videoId; }
    //////////////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////
    
    function debug_variableCheck(variableName, variableValue) {
        console.log("DebugFunction : variable check "+variableName + " = ", variableValue);
    }

    const VAR_video_player_control = {
        time_slide: 3,
        speed: 1.00,
        time_end: 0,
        time_end_previous: 0,
        time_start: 0,
        time_start_previous: 0,
        time_current_previous: 0,
    };

    const VAR_Loop = {
        replayLoop_status: false,
        notFocusLoop_status: false
    };
    const VAR_Showing_values = {
        time_current: '00:00',
        time_start: '00:00',
        time_end: '00:00',
    };


    function myfunction_cal_sec_to_time(totalSeconds) {
        const minutes = Math.floor(totalSeconds / 60); // หาจำนวนเต็มของนาที
        const seconds = Math.floor(totalSeconds % 60);            // หาค่าที่เหลือเป็นวินาที

        return { min: minutes, sec: seconds };
    }
    function myfunction_seekTo_percent(percent) {
        const Duration = Math.floor(player.getDuration());
        const sectotal = Math.floor(Duration * percent / 100);
        player.seekTo(sectotal);
    }
    //////////////////////////////////////
    //////////////////////////////////////
    //////////////////////////////////////
    // ฟังก์ชั่นสำหรับแต่ละปุ่ม my function action
    // a clear
    var x1_isPlaying = 1;
    function myfunction_x1_pouch() {
        if (x1_isPlaying == 1) {
            player.pauseVideo();
            x1_isPlaying = 0;
        } else if (x1_isPlaying == 0) {
            player.playVideo();
            x1_isPlaying = 1;
        }
    }
    function myfunction_a1__notFocusLoop() {
        if (VAR_Loop.notFocusLoop_status === false) {
            VAR_Loop.notFocusLoop_status = true
            document.getElementById('a1').innerText = `key board : on`;
            startNotFocusLoop();
        } else {
            VAR_Loop.notFocusLoop_status = false
            document.getElementById('a1').innerText = `key board : off`;
            stopnotFocusLoop();
        }
    }
    // Function to start the replay loop every 0.1 second
    notFocusLoop_IntervalID = null;
    function startNotFocusLoop() {
        notFocusLoop_IntervalID = setInterval(function () {
            if (document.activeElement !== document.body) {
                document.body.focus();
            }
            console.log("reset");
        }, 100);
    }

    // Function to stop the replay loop
    function stopnotFocusLoop() { clearInterval(notFocusLoop_IntervalID); }


    function myfunction_a2_loadVideoFromUrlOnClipboard() {
        loadVideo()
    }
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    // c clear
    function myfunction_c1_undoSetStartFromCurrentTime() {
        [VAR_video_player_control.time_start, VAR_video_player_control.time_start_previous] = [VAR_video_player_control.time_start_previous, VAR_video_player_control.time_start];
        let _ = myfunction_cal_sec_to_time(VAR_video_player_control.time_start);
    }
    function myfunction_c2_setStartFromCurrentTime() {
        VAR_video_player_control.time_start_previous = VAR_video_player_control.time_start;
        VAR_video_player_control.time_start = Math.floor(player.getCurrentTime());
        
    }
    function myfunction_c3_12_changeStart(change_value) { 
        VAR_video_player_control.time_start += change_value;
    }

    function myfunction_c4_gotoStartTime() {
        VAR_video_player_control.time_current_previous = Math.floor(player.getCurrentTime())
        player.seekTo(VAR_video_player_control.time_start);
    }
    function myfunction_c5_gotoPreviousStartTime() { player.seekTo(VAR_video_player_control.time_current_previous); }
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    //d clear
    function myfunction_d_04_changeSlideTime(change_value) {
        VAR_video_player_control.time_slide += change_value;
        debug_variableCheck("VAR_video_player_control.time_slide",VAR_video_player_control.time_slide);
    }
    function myfunction_d_1_skipBefore() {
        let newTime = Math.floor(player.getCurrentTime()) - VAR_video_player_control.time_slide;
        if (newTime < 0) {
            newTime = 0;
        }
        player.seekTo(newTime);
    }
    function myfunction_d_3_skipAfter(change_value) {
        let newTime = Math.ceil(player.getCurrentTime()) + VAR_video_player_control.time_slide;
        if (newTime > player.getDuration()) {
            newTime = player.getDuration();
        }
        player.seekTo(newTime);
    }
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////


    // e clear
    function myfunction_e_1234_setSpeed(speed) {
        VAR_video_player_control.speed = speed 
        debug_variableCheck("VAR_video_player_control.speed",VAR_video_player_control.speed);
        player.setPlaybackRate(VAR_video_player_control.speed);

        let _ = myfunction_cal_sec_to_time(player.getCurrentTime());
        VAR_Showing_values.time_current = `${String(_.min).padStart(2, '0')}:${String(_.sec).padStart(2, '0')}`;
        document.getElementById('b1').innerText = `| speed = ${parseFloat(VAR_video_player_control.speed).toFixed(2)} | current time = ${VAR_Showing_values.time_current} | start time = ${VAR_Showing_values.time_start} | end time = ${VAR_Showing_values.time_end} |`;
    }
    function myfunction_e_56_changeSpeed(change_value) {
        VAR_video_player_control.speed += change_value;
        debug_variableCheck("VAR_video_player_control.speed",VAR_video_player_control.speed);
        player.setPlaybackRate(VAR_video_player_control.speed);
    }
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    // f clear
    function myfunction_f0_undoSetEndFromCurrentTime() {
        [VAR_video_player_control.time_end, VAR_video_player_control.time_end_previous] = [VAR_video_player_control.time_end_previous, VAR_video_player_control.time_end];
        let _ = myfunction_cal_sec_to_time(VAR_video_player_control.time_end);
        VAR_Showing_values.time_end = `${String(_.min).padStart(2, '0')}:${String(_.sec).padStart(2, '0')}`;
        debug_variableCheck("VAR_Showing_values.time_end",VAR_Showing_values.time_end);
    }
    function myfunction_f1__setEndFromCurrentTime() {
        VAR_video_player_control.time_end_previous = VAR_video_player_control.time_end;
        VAR_video_player_control.time_end = Math.ceil(player.getCurrentTime());
        let _ = myfunction_cal_sec_to_time(VAR_video_player_control.time_end);
        VAR_Showing_values.time_end = `${String(_.min).padStart(2, '0')}:${String(_.sec).padStart(2, '0')}`;
        debug_variableCheck("VAR_Showing_values.time_end",VAR_Showing_values.time_end);

    }
    function myfunction_f2__changeEnd(change_value) { VAR_video_player_control.time_end += change_value }


    function myfunction_f3__changeEndtoggleReplayStatus() {
        if (VAR_Loop.replayLoop_status === false) {
            VAR_Loop.replayLoop_status = true
            debug_variableCheck("VAR_Loop.replayLoop_status",VAR_Loop.replayLoop_status);
            document.getElementById('f3').innerText = `replay mode : on`;
            document.getElementById('f3').style.backgroundColor = 'rgb(116, 255, 136)';
            startReplayLoop();
        } else {
            VAR_Loop.replayLoop_status = false
            debug_variableCheck("VAR_Loop.replayLoop_status",VAR_Loop.replayLoop_status);
            document.getElementById('f3').innerText = `replay mode : off`;
            document.getElementById('f3').style.backgroundColor = 'rgb(255, 156, 156)';
            stopReplayLoop();
        }
    }
    // Function to start the replay loop every 0.1 second
    ReplayLoop_intervalID = null;
    function startReplayLoop() {
        ReplayLoop_intervalID = setInterval(function () {
            if (VAR_Loop.replayLoop_status === true) {


                if (VAR_video_player_control.time_end <= player.getCurrentTime()) {
                    player.seekTo(VAR_video_player_control.time_start);
                }

            }
        }, 100);
    }

    // Function to stop the replay loop
    function stopReplayLoop() { clearInterval(ReplayLoop_intervalID); document.getElementById('f3').innerText = `replay mode : off`; }

    /////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////////////////
    // เกี่ยวกับการแสดงผล อัพเดตข้อความในหน้าเว็บ มารวมที่นี่ให้หมดเลย
    let showing_values_intervalId = null;

    // สร้าง interval ทุก 0.1 วินาที
    showing_values_intervalId = setInterval(function () {


        //c2 set start
        let _2 = myfunction_cal_sec_to_time(VAR_video_player_control.time_start);
        VAR_Showing_values.time_start = `${String(_2.min).padStart(2, '0')}:${String(_2.sec).padStart(2, '0')}`;
        document.getElementById('c2').innerText = `set start ${VAR_Showing_values.time_start}`;
        
        //d2 skip time
        document.getElementById('d2').innerText = `${VAR_video_player_control.time_slide}`;
        
        //f1 set end
        let _3 = myfunction_cal_sec_to_time(VAR_video_player_control.time_end);
        VAR_Showing_values.time_end = `${String(_3.min).padStart(2, '0')}:${String(_3.sec).padStart(2, '0')}`;
        document.getElementById('f1').innerText = `set end ${VAR_Showing_values.time_end}`;
        
        // console.log(VAR_Showing_values.time_start)
        //b1 lable เอา b1 ไว้ล่างเพราะมีของที่ต้องคำนวณก่อน
        let _1 = myfunction_cal_sec_to_time(player.getCurrentTime());
        VAR_Showing_values.time_current = `${String(_1.min).padStart(2, '0')}:${String(_1.sec).padStart(2, '0')}`;
        document.getElementById('b1').innerText = `| speed = ${parseFloat(VAR_video_player_control.speed).toFixed(2)} | current time = ${VAR_Showing_values.time_current} | start time = ${VAR_Showing_values.time_start} | end time = ${VAR_Showing_values.time_end} |`;
        document.activeElement.blur()

    }, 100);

    /////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////////////////
    //คีย์ลัด
    const actionKey = {
        // slide หน้า-หลัง
        slide_time_before: new Set(['ArrowLeft', 'KeyJ']),
        slide_time_after: new Set(['ArrowRight', 'KeyN']),
        slide_time_stepUp: new Set(['ArrowUp']),
        slide_time_stepDown: new Set(['ArrowDown']),

        // เพิ่มเสียงลดเสียง
        volume_up: new Set(['Equal']),
        volume_down: new Set(['Minus']),

        // start
        time_start_set: new Set(['KeyS', 'KeyL', 'KeyU']),
        time_start_set_from_percent: new Set(['Digit0', 'Digit1', 'Digit2', 'Digit3', 'Digit4', 'Digit5', 'Digit6', 'Digit7', 'Digit8', 'Digit9']),
        time_start_stepDown: new Set(['KeyD', 'KeyI']),
        time_start_stepUp: new Set(['KeyF', 'KeyO']),

        // end
        time_end_set: new Set(['KeyW', 'BracketRight']),
        time_end_stepDown: new Set(['KeyE', 'KeyP']),
        time_end_stepUp: new Set(['KeyR', 'BracketLeft']),

        // speed
        speed_set: new Set(['KeyZ',]),
        speed_set_number: new Set(['Semicolon', 'Period', 'Slash']),
        speed_stepDown: new Set(['KeyM']),
        speed_stepUp: new Set(['Comma']),

        // ทั่วไป
        subControl_gotoStartTime: new Set(['Space']),

        subControl_gotoLastTime: new Set(['ship']), //อันนี้ใส่เพื่อบอกว่าใช้ ship เพื่อทำ gotoLastTime เฉยๆ // แต่ในคำสั่งจริงๆไม่ได้ใช้เหมือนอันอื่น เพราะ ship ตรวจจับด้วยการอยู่ในเซตเหมือนอันอื่นไม่ได้ เลยต้องใช้ if-else เลยเป็น ถ้ากดชิปอยู่ แล้วให้ทำ...
        subControl_gotoLastStartTime: new Set(['KeyA']),
        subControl_gotoLastEndTime: new Set(['KeyQ']),

        subControl_playPaused: new Set(['KeyK']),
        subControl_valueStatus: new Set(['KeyV']),
        subControl_replayMode: new Set(['KeyC']),
        subControl_loadVidio: new Set(['Enter']),
        subControl_clearFogus: new Set(['KeyY']),

        stopDefaultAction: new Set(['Space', 'ArrowLeft', 'ArrowRight'])
    };


    // ฟังการกดปุ่มบนคีย์บอร์ด
    document.addEventListener('keydown', function (event) {
        console.log('กดปุ่ม:', event.code);
        /*
        if (actionKey.stopDefaultAction.has(event.code)) {
            event.preventDefault();
        }
            */
        // ปรับเวลาต่อการกดเลื่อน 1 ครั้ง
        if (actionKey.slide_time_before.has(event.code)) {
            event.preventDefault();
            myfunction_d_1_skipBefore();
        }
        else if (actionKey.slide_time_after.has(event.code)) {
            event.preventDefault();
            myfunction_d_3_skipAfter();
        }
        else if (actionKey.slide_time_stepUp.has(event.code)) {
            event.preventDefault();
            myfunction_d_04_changeSlideTime(1);
        }
        else if (actionKey.slide_time_stepDown.has(event.code)) {
            myfunction_d_04_changeSlideTime(-1);
            event.preventDefault();
        }

        // ปรับความดัง
        else if (actionKey.volume_up.has(event.code)) {
            event.preventDefault();
            player.setVolume(Math.max(0, player.getVolume() + 10));
        }
        else if (actionKey.volume_down.has(event.code)) {
            event.preventDefault();
            player.setVolume(Math.max(0, player.getVolume() - 10));
        }

        
        else if (actionKey.time_start_set.has(event.code)) {
            myfunction_c2_setStartFromCurrentTime();
        }
        else if (actionKey.time_start_stepDown.has(event.code)) {
            myfunction_c3_12_changeStart(-1);
        }
        else if (actionKey.time_start_stepUp.has(event.code)) {
            myfunction_c3_12_changeStart(1);
        }

        // ตั้งจุดเริ่มต้นจาก 1 2 3 4 5 6 7 8 9 0
        else if (actionKey.time_start_set_from_percent.has(event.code)) {

            if (event.code === 'Digit0') {
                myfunction_seekTo_percent(0);
            } else if (event.code === 'Digit1') {
                myfunction_seekTo_percent(10);
            } else if (event.code === 'Digit2') {
                myfunction_seekTo_percent(20);
            } else if (event.code === 'Digit3') {
                myfunction_seekTo_percent(30);
            } else if (event.code === 'Digit4') {
                myfunction_seekTo_percent(40);
            } else if (event.code === 'Digit5') {
                myfunction_seekTo_percent(50);
            } else if (event.code === 'Digit6') {
                myfunction_seekTo_percent(60);
            } else if (event.code === 'Digit7') {
                myfunction_seekTo_percent(70);
            } else if (event.code === 'Digit8') {
                myfunction_seekTo_percent(80);
            } else if (event.code === 'Digit9') {
                myfunction_seekTo_percent(90);
            }

        }

        // ปรับจุดสิ้นสุด
        else if (actionKey.time_end_set.has(event.code)) {
            myfunction_f1__setEndFromCurrentTime();
        }
        else if (actionKey.time_end_stepDown.has(event.code)) {
            myfunction_f2__changeEnd(-1);
        }
        else if (actionKey.time_end_stepUp.has(event.code)) {
            myfunction_f2__changeEnd(1);
        }

        // ปรับความเร็ว
        else if (actionKey.speed_set.has(event.code)) {
            myfa_set_speed();
        }
        else if (actionKey.speed_set_number.has(event.code)) {
            if (event.code === 'Semicolon') {
                myfunction_e_1234_setSpeed(1);
            } else if (event.code === 'Period') {
                myfunction_e_1234_setSpeed(0.75);
            } else if (event.code === 'Slash') {
                myfunction_e_1234_setSpeed(0.50);
            }
        }
        else if (actionKey.speed_stepDown.has(event.code)) {
            myfunction_e_56_changeSpeed(-0.05);
            console.log("yes")
        }
        else if (actionKey.speed_stepUp.has(event.code)) {
            myfunction_e_56_changeSpeed(0.05);
        }

        // ไปยังจุดเริ่มต้น
        else if (actionKey.subControl_gotoStartTime.has(event.key) || event.key === ' ') {
            event.preventDefault();
            myfunction_c4_gotoStartTime();

        }

        // ไปยังเวลาล่าสุด
        else if (event.shiftKey) {
            myfunction_c5_gotoPreviousStartTime();
        }

        // ไปยังเวลาเริ่มต้นล่าสุด
        else if (actionKey.subControl_gotoLastStartTime.has(event.code)) {
            myfunction_c1_undoSetStartFromCurrentTime();
        }
        // ไปยังเวลาสิ้นสุดล่าสุด
        else if (actionKey.subControl_gotoLastEndTime.has(event.code)) {
            myfunction_f0_undoSetEndFromCurrentTime();
        }
        // play paused
        else if (actionKey.subControl_playPaused.has(event.code)) {
            var playerState = player.getPlayerState();
            if (playerState === YT.PlayerState.PLAYING) {
                player.pauseVideo();
            } else if (playerState === YT.PlayerState.PAUSED) {
                player.playVideo();
            } else if (playerState === YT.PlayerState.ENDED) {
                player.seekTo(0);
                player.playVideo();
            } else {
                // alert("The video is in another state.");
                console.log("The video is in another state.")
            }
        }
        // ปิดเสียง
        else if (actionKey.subControl_valueStatus.has(event.code)) {
            if (player.isMuted()) {
                player.unMute();
            } else {
                player.mute();
            }
        }
        // โหมดรีเพลย์
        else if (actionKey.subControl_replayMode.has(event.code)) {
            myfunction_f3__changeEndtoggleReplayStatus();
        }
        // เสิร์จ
        else if (actionKey.subControl_loadVidio.has(event.code)) {
            loadVideo();
        }
        // เช็คโฟกัส
        else if (actionKey.subControl_clearFogus.has(event.code)) {
            myfunction_a1__notFocusLoop();
        }
    });


    /////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////////////////
    // let intervalId = null;

    // // สร้าง interval ทุก 0.5 วินาที
    // intervalId = setInterval(function () {
    //     console.log(VAR_Showing_values);
    //     console.log(VAR_video_player_control);
    // }, 5000);
</script>

</html>