openvk/Web/Presenters/templates/Audio/player.js.xml

<script>
    function fmtTime(time) {
        const mins = String(Math.floor(time / 60)).padStart(2, '0');
        const secs = String(Math.floor(time % 60)).padStart(2, '0');
        return `${ mins}:${ secs}`;
    }

    function initPlayer(id, keys, url, length) {
        console.log(`INIT PLAYER ${ id}`, keys, url, length);
        const audio = document.querySelector(`#audioEmbed-${ id} .audio`);
        const playButton = u(`#audioEmbed-${ id} .playerButton > img`);
        const trackDiv = u(`#audioEmbed-${ id} .track > div > div`);
        const volumeSpan = u(`#audioEmbed-${ id} .volume span`);
        const rect = document.querySelector(`#audioEmbed-${ id} .selectableTrack`).getBoundingClientRect();

        const protData = {
            "org.w3.clearkey": {
                "clearkeys": keys
            }
        };

        const player = dashjs.MediaPlayer().create();
        player.initialize(audio, url, false);
        player.setProtectionData(protData);

        playButton.on("click", () => {
            if (audio.paused) {
                document.querySelectorAll('audio').forEach(el => el.pause());
                audio.play();
            } else {
                audio.pause();
            }
        });

        u(audio).on("timeupdate", () => {
            const time = audio.currentTime;
            const ps = Math.ceil((time * 100) / length);
            volumeSpan.html(fmtTime(Math.floor(time)));
            if (ps <= 100)
                trackDiv.nodes[0].style.width = `${ ps}%`;
        });

        const playButtonImageUpdate = () => {
            if ($(`#audioEmbed-${ id} .claimed`).length === 0) {
                console.log(id);
                const imgSrc = audio.paused ? "/assets/packages/static/openvk/img/play.jpg" : "/assets/packages/static/openvk/img/pause.jpg";
                playButton.attr("src", imgSrc);
            }

            if (!audio.paused) {
                $.post(`/audio${ id}/listen`, {
                    hash: {$csrfToken}
                });
            }

            $(`#audioEmbed-${ id} .performer`).toggle()
            $(`#audioEmbed-${ id} .track`).toggle()
        };

        u(audio).on("play", playButtonImageUpdate);
        u(audio).on(["pause", "ended", "suspended"], playButtonImageUpdate);

        u(`#audioEmbed-${ id} .track > div`).on("click", (e) => {
            let rect  = document.querySelector("#audioEmbed-" + id + " .selectableTrack").getBoundingClientRect();
            const width = e.clientX - rect.left;
            const time = Math.ceil((width * length) / (rect.right - rect.left));
            console.log(width, length, rect.right, rect.left, time);
            audio.currentTime = time;
        });
    }

    function addAudio(id) {
        $.ajax({
            type: "POST",
            url: `/audio${ id}/action?act=add`,
            success: (response) => {
                if (response.success) {
                    NewNotification("Успех", "Аудиозапись добавлена", "/assets/packages/static/openvk/img/oxygen-icons/64x64/actions/dialog-ok.png");
                } else {
                    NewNotification("Ошибка", (response?.error ?? "Неизвестная ошибка"), "/assets/packages/static/openvk/img/error.png");
                }
            }
        });
    }

    function removeAudio(id) {
        $.ajax({
            type: "POST",
            url: `/audio${ id}/action?act=remove`,
            success: (response) => {
                if (response.success) {
                    $(`#audioEmbed-${ id}`).remove();
                    NewNotification("Успех", "Аудиозапись удалена", "/assets/packages/static/openvk/img/oxygen-icons/64x64/actions/dialog-ok.png");
                } else {
                    NewNotification("Ошибка", (response?.error ?? "Неизвестная ошибка"), "/assets/packages/static/openvk/img/error.png");
                }
            }
        });
    }

    function editAudio(id, title, performer, genre, lyrics) {
        $("#editAudioDialogBoxHtml input[name=name]").attr("v", title);
        $("#editAudioDialogBoxHtml input[name=performer]").attr("v", performer);
        $("#editAudioDialogBoxHtml select[name=genre]").attr("v", genre);
        $("#editAudioDialogBoxHtml textarea[name=lyrics]").attr("v", lyrics);

        MessageBox({_edit}, $("#editAudioDialogBoxHtml").html(), [{_ok}, {_cancel}], [
            function() {
                let name   = $(".ovk-diag-body input[name=name]").val();
                let perf   = $(".ovk-diag-body input[name=performer]").val();
                let genre  = $(".ovk-diag-body select[name=genre]").val();
                let lyrics = $(".ovk-diag-body textarea[name=lyrics]").val();

                $.ajax({
                    type: "POST",
                    url: `/audio${ id}/action?act=edit`,
                    data: {
                        name: name,
                        performer: performer,
                        genre: genre,
                        lyrics: lyrics,
                        hash: {=$csrfToken}
                    },
                    success: (response) => {
                        if (response.success) {
                            NewNotification("Успех", "Аудиозапись отредактирована", "/assets/packages/static/openvk/img/oxygen-icons/64x64/actions/dialog-ok.png");
                            setTimeout(() => { window.location.reload() }, 500)
                        } else {
                            NewNotification("Ошибка", (response?.error ?? "Неизвестная ошибка"), "/assets/packages/static/openvk/img/error.png");
                        }
                    }
                });
            },

            Function.noop
        ]);

        $('.ovk-diag-body input, textarea, select').each(function() { $(this).val($(this).attr("v")); });
    }

    {foreach $audios as $audio}
        initPlayer({$audio->getId()}, {$audio->getKeys()}, {$audio->getURL()}, {$audio->getLength()});
    {/foreach}
</script>