infoscreen3/views/admin/video.twig

{% extends 'layout/edit.twig' %}

{% block header %}
    {% if config.useLocalAssets %}
        <script src="/assets/socket.io.min.js"></script>
    {% else %}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"></script>
    {% endif %}
    <script>
        let bundle = "{{ bundle }}";
        let file = "{{ file }}";
        let displayId = {{ displayId }};
    </script>
{% endblock %}

{% block body %}
    <div class="ui segment">
    <video id="preview" style="width: 300px; border: 1px solid black; display: hidden;"></video>

        <form class="ui form">
            <div class="field">
                <label>{{ t("admin.addVideo.name") }}</label>
                <input type="text" id="name" placeholder="Video" required>
            </div>
            <div class="field">
                <label>{{ t("admin.addVideo.url") }}</label>
                <div class="ui action input">
                <input type="text" id="url" placeholder="http://user:pass@localhost/path/video1.mp4" required onchange="setDisabled();">
                <div onclick="loadVideo();" class="ui green button">Load Metadata</div>
                </div>
            </div>

            <div class="field">
                <div id="loop" class="ui toggle checkbox">
                    <input type="checkbox"/>
                    <label>{{ t("admin.addVideo.loop") }}</label>
                </div>
            </div>
            <div class="field">
                <div id="mute" class="ui toggle checkbox">
                    <input type="checkbox"/>
                    <label>{{ t("admin.addVideo.mute") }}</label>
                </div>
            </div>
            <div class="field">
                <div id="displaytime" class="ui toggle checkbox">
                    <input type="checkbox"/>
                    <label>{{ t("admin.addLink.displayTime") }}</label>
                </div>
            </div>
            <div id="save" class="ui disabled green button" onclick="save();">{{ t("actions.save") }}</div>

            <div  class="ui red basic buttons">
                <div onclick="announce({{ displayId }})" class="ui disabled announce button">{{ t("actions.announce") }}</div>
                <div class="ui floating dropdown icon disabled announce button" id="dropdownAnnounce">
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div onclick="announce(null)" class="item"><i
                                    class="exclamation icon"></i> {{ t("actions.announceAll") }}</div>
                    </div>
                </div>
            </div>
            <div class="ui basic button" onclick="window.close()">{{ t("actions.cancel") }}</div>
        </form>
    </div>
    <script>
        var socket = io("{{ config.serverUrl }}/admin-{{ displayId }}");
        var videoDuration = 0;

        $(function () {
            $(".toggle").checkbox();
            $("#dropdownAnnounce").dropdown();
        });

        function loadVideo() {
            var video = document.getElementById("preview");
            video.src = $('#url').val();
            video.onloadedmetadata = function() {
               videoDuration = video.duration;
               setActive();
            };
        }
        function setActive() {
            $(".announce").removeClass("disabled");
            $("#save").removeClass("disabled");
        }

        function setDisabled() {
            $(".announce").addClass("disabled");
            $("#save").addClass("disabled");
        }

        function announce(dispId) {
            if (videoDuration == 0) {
                alert("video duration not set!");
                return;
            }

            var obj = {
                json: {
                    type: "video",
                    duration: videoDuration,
                    url: $("#url").val(),
                    displayTime: $("#displaytime").checkbox('is checked'),
                    mute: $("#mute").checkbox('is checked'),
                    loop: $("#loop").checkbox('is checked'),
                    epochStart: -1,
                    epochEnd: -1
                },
                displayId: dispId,
                transition: null,


            };
            socket.emit("admin.overrideVideo", obj);
        }

        function save() {
            if (videoDuration == 0) {
                alert("video duration not set!");
                return;
            }

            var obj = {
                filename: file,
                bundleName: bundle,
                duration: videoDuration,
                name: $("#name").val(),
                url: $("#url").val(),
                displayTime: $("#displaytime").checkbox('is checked'),
                mute: $("#mute").checkbox('is checked'),
                loop: $("#loop").checkbox('is checked'),
                epochStart: -1,
                epochEnd: -1.
            };
            socket.emit("edit.saveVideo", obj);
        }

        socket.on("connect", function () {
            socket.emit("admin.editVideo", {bundleName: bundle, fileName: file});
        });


        socket.on("callback.video", function (data) {
            var json = data.json;

            $("#name").val(json.name);
            $("#url").val(json.url);

            if (json.displayTime) {
                $("#displaytime").checkbox('set checked', true);
            } else {
                $("#displaytime").checkbox('set unchecked', false);
            }
            // Videos should be muted by default (empty json)
            if (json.mute || json.mute === undefined) {
                $("#mute").checkbox('set checked', true);
            } else {
                $("#mute").checkbox('set unchecked', false);
            }
            if (json.loop) {
                $("#loop").checkbox('set checked', true);
            } else {
                $("#loop").checkbox('set unchecked', false);
            }

        });

        socket.on("callback.saveVideo", function (data) {
            if (!data.err) {
                window.close();
            } else {
                alert(data.err);
            }
        });


    </script>

{% endblock %}