{%extends "base.tera"%}
{%block content%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    window.indexedDB;
</script>
<h1 id="player_title">playing {{book.name}}-{{chapter_id}}</h1>
<div>
    <div id="player" class="player">
        <audio controls autoplay id="au" currentTime={{this_progress}} class="player">
            Your browser does not support the audio element.
        </audio>
    </div>

    <div class="container">

        <div id="prev">
            <button id="prev_link" onclick="prev()">prev</button>
        </div>
        <div id="next">
            <button id="next_link" onclick="next()">next</button>
        </div>
        <div id="book">
            <a href="/webui/book_detail?id={{book.id}}"><button>go to book</button></a>
        </div>
    </div>
    <div class="max_container">
        <div id="save_progress" class="half_container"><button onclick="on_save_progress_click()"
                class="full">save_progress</button>
        </div>
        <div class="half_container" id="bt_div"><button id="play_bt" class="full"
                onclick="play_bt_click()">play</button>
        </div>
    </div>
</div>
<div>
    <div class="container">
        <div>----</div>
        <div id="save_status">Not save yet</div>
        <div id="current_url"></div>
        <div id="last_log"></div>
        <div id="all_data"></div>
        <button id="clear_data">ClearData</button>
        <div>----</div>

    </div>
</div>
<script>
    const progress_id = parseInt("{{progress.id}}");
    const user_id = parseInt("{{user_id}}");
    const bookId = parseInt("{{book.id}}");
    var chapterId = parseInt("{{chapter_id}}");
    var this_progress = parseFloat("{{this_progress}}");
    let db;

    function setprogress_with_time(progress_id, user_id, bookId, chapterId, time) {
        var data = {
            "id": progress_id,
            "account_id": user_id,
            "music_id": bookId,
            "chapter_no": chapterId,
            "progress": time
        }

        console.log(data);
        $.ajax({
            type: "POST",
            url: "/progress/setprogress",
            data: JSON.stringify(data),
            dataType: "text",
            contentType: "application/json",
            success: function (response) {
                // Process the response here
                $("#save_status").html("saved time:" + parseInt(time / 60) + ":" + parseInt(time % 60));

            },
            error: function (xhr, status, error) {
                // Handle error here
                console.error(error);
                $("#save_status").html("error:" + error);
            }
        });
    }

    function setprogress(progress_id, user_id, bookId, chapterId) {
        // Send POST request
        const current_progress = $("#au").prop("currentTime");
        setprogress_with_time(progress_id, user_id, bookId, chapterId, current_progress);

    }

    function on_save_progress_click() {
        setprogress(progress_id, user_id, bookId, chapterId);
    }

    function on_auto_save_progress() {
        if ($("#au").prop("paused")) {
            return;
        }
        setprogress(progress_id, user_id, bookId, chapterId);
    }
    function play_bt_click() {
        if ($("#au").prop("paused")) {
            $("#au").trigger("play");
        } else {
            $("#au").trigger("pause");
        }
    }
    function set_au_new_url(url) {
        $("#au").trigger("pause");
        $("#au").attr("src", url);
        $("#au").attr("currentTime", 0);
        $("#au").trigger("load");
        $("#au").trigger("play");
    }
    function get_audio_url(book_id, chapter_id) {
        console.log("get_audio_url for " + book_id + " " + chapter_id)
        const request = db.transaction("musics").objectStore("musics").get([book_id, chapter_id]);

        request.onsuccess = function (event) {
            let audio_url;
            if (event.target.result == undefined) {
                // if not exist, add
                let chapter_id_name = chapter_id.toString().padStart(4, "0");
                let http_url = `/fetchbook/{{book.file_folder}}/${chapter_id_name}.m4a`;
                console.log("cannot find the url in database, building a new one: " + http_url);
                $("#current_url").html(http_url);
                audio_url = http_url;
            } else {
                // if exist, return
                console.log("find the url in database: " + event.target.result.chapter_id);
                const blob = new Blob([event.target.result.audo_data], { type: 'audio/mpeg' });
                const url = URL.createObjectURL(blob);
                console.log("create the url in database: " + url);
                $("#current_url").html(url);
                audio_url = url;
            }

            const old_url = $("#au").attr("src");
            // test if old url start with blob
            if (old_url?.startsWith("blob")) {
                console.log("revoke the old url: " + old_url);
                URL.revokeObjectURL(old_url);
            }
            set_au_new_url(audio_url)
        };
        request.onerror = function (event) {
            console.log(event.target.errorCode);
        };
    }
    function update_storage(book_id, chapter_id, total_chapters) {
        let start_chapter_id = chapter_id;
        let end_chapter_id = chapter_id + 10;
        if (end_chapter_id > total_chapters) {
            end_chapter_id = total_chapters;
        }
        // first go through the db, deleting every slot where book_id == book_id and chapter_id < start_chapter_id
        const objectStore = db.transaction("musics", "readwrite").objectStore("musics");
        $("#all_data").html("All Books:");
        objectStore.openCursor().onsuccess = function (event) {
            const cursor = event.target.result;

            if (cursor) {
                if (cursor.key[0] == book_id && cursor.key[1] < start_chapter_id - 3) {
                    console.log("deleting the old book : " + cursor.key[0] + " " + cursor.key[1]);
                    cursor.delete();
                } else {
                    console.log("keeping the old book : " + cursor.key[0] + " " + cursor.key[1]);
                    let old = $("#all_data").html();
                    let new_html = old + "" + cursor.key[1] + "  ";
                    $("#all_data").html(new_html);
                }
                cursor.continue();
            }
        };

        for (let i = start_chapter_id; i < end_chapter_id; i++) {
            const chapter_id = i;
            // then update the db
            const chapter_id_name = chapter_id.toString().padStart(4, "0");
            const audio_url = `/fetchbook/{{book.file_folder}}/${chapter_id_name}.m4a`;
            const request = db.transaction(["musics"], "readwrite").objectStore("musics").get([book_id, chapter_id]);

            // if exist, skip
            // if not exist, add
            request.onsuccess = function (event) {
                if (event.target.result == undefined) {
                    // fetch the audio data
                    console.log("fetching the new book: " + audio_url)
                    $.get({
                        url: audio_url,
                        xhrFields: {
                            responseType: 'blob'
                        }
                    },
                        success = function (blob_data) {
                            // add the audio data to the db
                            const my_blob_data = blob_data;
                            console.log("fetch success: " + audio_url)
                            const data = {
                                "book_chapter": [book_id, chapter_id],
                                "book_id": book_id,
                                "chapter_id": chapter_id,
                                "audio_url": audio_url,
                                "audo_data": my_blob_data,
                            }

                            console.log("adding the new book: " + chapter_id + "," + audio_url);

                            const request = db.transaction(["musics"], "readwrite").objectStore("musics").add(data);
                            request.onsuccess = function (event) {
                                $("#last_log").html("fetching and add success " + data.book_chapter);
                                console.log("add success");
                            };
                            request.onerror = function (event) {
                                console.log("add error");
                            };
                        }

                    );

                }
            };
            request.onerror = function (event) {
                console.log("get error")
                console.log(event.target.errorCode);
            };
        }


    }
    function setup_au() {
        $("#au").on("play", function () {
            // play it
            $("#play_bt").html("pause");
            // set the play_bt backgroud to red
            $("#play_bt").css("background-color", "red");
        });
        $("#au").on("pause", function () {
            // play it
            $("#play_bt").html("play");
            // set the play_bt backgroud to green
            $("#play_bt").css("background-color", "green");
        });
        // when the audio ends, play the next chapter
        $("#au").on("ended", function () {
            // save progress
            if (chapterId == book.chapters) {
                alert("the end");
                return;
            }
            setprogress_with_time(progress_id, user_id, bookId, chapterId + 1, 0);
            next();
        });
        $("#au").on("canplay", function () {
            // play it
            $("#au").trigger("play");
        });
    }
    function prev() {
        if (chapterId == 1) {
            alert("the first chapter");
            return;
        }
        $("#au").trigger("pause");
        $("#au").prop("currentTime", 0);
        chapterId -= 1;
        this_progress = 0;
        chapter_id_name = chapterId.toString().padStart(4, "0");

        get_audio_url(bookId, chapterId);
        //$("#au").prop("src", `/fetchbook/{{book.file_folder}}/${chapter_id_name}.m4a`);


        $("#player_title").html("playing {{book.name}} " + chapterId);
        $("#title").html("<h1>playing {{book.name}} " + chapterId + "</h1>");
        document.head.title = "playing {{book.name}} " + chapterId;
        update_storage(bookId, chapterId);
    }

    function next() {
        if (chapterId == book.chapters) {
            alert("the end");
            return;
        }
        $("#au").trigger("pause");
        $("#au").prop("currentTime", 0);
        chapterId += 1;
        this_progress = 0;
        chapter_id_name = chapterId.toString().padStart(4, "0");
        get_audio_url(bookId, chapterId);


        $("#player_title").html("playing {{book.name}} " + chapterId);
        $("#title").html("<h1>playing {{book.name}} " + chapterId + "</h1>");
        document.head.title = "playing {{book.name}} " + chapterId;
        update_storage(bookId, chapterId);
    }
    function init_db() {
        const DBOpenRequest = window.indexedDB.open("musics", 1);
        DBOpenRequest.onerror = function (event) {
            console.log("Error loading database.");
        };
        DBOpenRequest.onsuccess = function (event) {
            db = event.target.result;
            console.log("Database initialised.");
            // clear all entry where audo_data is undefined
            const objectStore = db.transaction("musics", "readwrite").objectStore("musics");
            objectStore.openCursor().onsuccess = function (event) {
                const cursor = event.target.result;
                if (cursor) {
                    if (cursor.value.audo_data == undefined) {
                        console.log("deleting the old book where data is undefined : " + cursor.key[0] + " " + cursor.key[1]);
                        cursor.delete();
                    }
                    cursor.continue();
                }
            };
            get_audio_url(bookId, chapterId);
            update_storage(bookId, chapterId, book.chapters);
            // displayData();
        };
        DBOpenRequest.onupgradeneeded = (event) => {
            db = event.target.result;
            db.onerror = function (event) {
                console.log("Error loading database.");
            };
            let objectStore = db.createObjectStore("musics", { keyPath: "book_chapter" });
            objectStore.transaction.oncomplete = function (event) {
                // Store values in the newly created objectStore.
                // var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
                // for (var i in customerData) {
                //     customerObjectStore.add(customerData[i]);
                // }
                console.log("Object store created.");
            };
        };
    }


    $(document).ready(function () {
        init_db();
        $("#au").prop("currentTime", this_progress);

        $("#au").on("canplay", function () {
            // play it
            $("#au").trigger("play");
        });


        $("#au").on("play", function () {
            // play it
            $("#play_bt").html("pause");
            // set the play_bt backgroud to red
            $("#play_bt").css("background-color", "red");
        });
        $("#au").on("pause", function () {
            // play it
            $("#play_bt").html("play");
            // set the play_bt backgroud to green
            $("#play_bt").css("background-color", "green");
        });
        // when the audio ends, play the next chapter
        $("#au").on("ended", function () {
            // save progress
            if (chapterId == book.chapters) {
                alert("the end");
                return;
            }
            setprogress_with_time(progress_id, user_id, bookId, chapterId + 1, 0);
            next();
        });
        $("#clear_data").click(function () {
            const objectStore = db.transaction("musics", "readwrite").objectStore("musics");
            objectStore.openCursor().onsuccess = function (event) {
                const cursor = event.target.result;
                if (cursor) {
                    console.log("deleting the old book : " + cursor.key[0] + " " + cursor.key[1]);
                    cursor.delete();
                    cursor.continue();
                }
            };
            $("#all_data").html("All Books: Deleted");
        });


        setInterval(function () {
            on_auto_save_progress()
        }, 30000);
    })



</script>
{# pub struct Model {
#[sea_orm(primary_key)]
pub id: i32,
pub author_id: i32,
#[sea_orm(unique)]
pub name: String,
pub chapters: i32,
pub file_folder: String,
} #}




{%endblock content%}