MyTube/templates/watch/watch.html.twig

{% extends 'base.html.twig' %}

{% block title %}Watch{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset("css/video-js.css") }}">
    <link rel="stylesheet" href="{{ asset("css/videojs-hls-quality-selector.css") }}">
    <link href="{{ asset("css/video-js-fantasy.css") }}" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset("css/watch.css") }}"
{% endblock %}

{% block javascripts %}
    <script src="{{ asset("js/video.min.js") }}"></script>
    <script src="{{ asset("js/videojs-contrib-quality-levels.min.js") }}"></script>
    <script src="{{ asset("js/videojs-hls-quality-selector.min.js") }}"></script>
    <script>
        // enable quality selector
        videojs('video').hlsQualitySelector();
    </script>
    <script>
        {% if viewToken %}
        (function () {
            let player = videojs('video');
            //let target = {{ video.length > 120 ? 60 : video.length * 0.5 }};
            let target = 10;
            let current = 0;
            setInterval(function () {
                console.log(!player.paused() + ", " + current + ", " + target);
                if (!player.paused()) {
                    current++;

                    if (current === target) {
                        ajaxPost("{{ path("app_watch_view", {
                            linkId: linkId,
                            videoId: video.customId,
                            viewId: viewToken
                        }) }}", null, function () {
                        });
                    }
                }
            }, 1000);
        })()
        {% endif %}
    </script>
{% endblock %}

{% block body %}
    <div class="pane-container">
        <div class="bg-light shadow-5-strong col-12">
            <div id="player">
                <video
                        id="video"
                        class="video-js vjs-theme-fantasy"
                        controls
                        preload="auto"
                        poster="{{ thumbnail }}"
                        data-setup="{}"
                >
                    <!--<source src="{{ global }}#.m3u8" type="application/vnd.apple.mpegur" />-->
                    <source src="{{ global }}#.m3u8" type="application/x-mpegURL"/>
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                    </p>
                </video>
            </div>
            <div id="info">
                <div class="user">
                    <img
                            src="{{ path("app_user_profile_picture", {"id": uuidMapper.toString(video.uploader.id)}) }}"
                            class="rounded-circle avatar"
                            alt=""
                    />
                    <span class="fs-6 indented">{{ video.uploader.name }}</span>
                </div>
                <h2 class="indented">{{ video.name }}</h2>
                <div class="views">
                    {{ video.views }} {{ video.views == 1 ? "View" : "Views" }}
                </div>
                <div class="description indented">
                    {{ video.description }}
                </div>
            </div>
        </div>
        <div id="set" class="bg-light shadow-5-strong">
            <h2>Set</h2>
        </div>
    </div>
{% endblock %}