infoscreen3/views/liteDisplay.twig

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

{% block header %}
    {% if config.mediaServer %}
        {% if config.useLocalAssets %}
            <script src="/assets/flv.min.js"></script>
        {% else %}
            <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
        {% endif %}
    {% endif %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"></script>
    <title>InfoScreen3 - {{ display.name }}</title>
{% endblock %}

{% block body %}

    <div id="blackoutLayer" class="gpu opacity"></div>

    {{ extra }}

    <div id="time" class="noselect delay animated">00:00</div>

    <div id="statusMessageOuter" class="noselect animated">
        <span id="statusMessage"></span>
    </div>

    <div id="networkstatus" class="noselect animated"><i class="spinner loading icon"></i></div>

    <video id="stream" class="fsimage" poster=""></video>

    <div id="helperLayer" class="gpu animated"></div>

    <iframe id="webLayer0" scrolling="no" class="web fsimage animated"></iframe>
    <iframe id="webLayer1" scrolling="no" class="web fsimage animated"></iframe>

    <div id="layer0" class="fsimage gpu opacity" style="z-index: 10;">
        <img id="img0" style="width: 100%;"/>
    </div>
    <div id="layer1" class="fsimage gpu opacity" style="z-index: 10;">
        <img id="img1" style="width: 100%;"/>
    </div>

    <div id="bg">
        <img id="bgimg" class="fsimage" src=""/>
    </div>

    <video muted loop id="bgvid" class="gpu" poster="">
        <source src="" type="video/mp4">
    </video>

    <script>
        var displayId = {{ displayId }};
        var videoVolume = {{ videoVolume }};
        var socket = null;

        $(function () {
            socket = io.connect("{{ config.serverUrl }}/display-{{ displayId }}");
        });
    </script>
    <script src="/js/displayLite.js"></script>
{% endblock %}