MyTube/templates/dashboard/dashboard.html.twig

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

{% block title %}Dashboard{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset("css/dashboard.css") }}">
{% endblock %}

{% block javascripts %}
    <script>
        (function () {
            let intervalIds = [];
            for (let id in autoupdate) {
                intervalIds[id] = setInterval(function () {
                    ajaxGet(autoupdate[id], function (data) {
                        data = JSON.parse(data);

                        let element = document.getElementById("video-" + id);
                        if (data.stateId === {{ constant("App\\Entity\\Video::DONE") }}) {
                            element.getElementsByClassName("disable")[0].remove();
                            clearInterval(intervalIds[id]);
                        } else {
                            if (data.stateId > {{ constant("App\\Entity\\Video::PROCESSING_THUMBNAIL") }}) {
                                let image = element.getElementsByClassName("thumbnail")[0].getElementsByTagName("img")[0];
                                if (image.src.indexOf("?refresh") < 0) {
                                    image.src = image.src + "?refresh=" + (new Date()).getTime();
                                }
                            }

                            element.getElementsByClassName("state")[0].innerText = data.state;

                            let progress = element.getElementsByClassName("transcodingProgress")[0];
                            progress.getElementsByClassName("value")[0].innerText = data.progress + " %";
                            progress.getElementsByClassName("bar")[0].style.width = data.progress + "%";

                        }
                    });
                }, 2000);
            }
        })();
    </script>
{% endblock %}

{% block body %}
    {% set deleteCsrfToken = csrf_token(constant("App\\Controller\\DashboardController::DELETE_VIDEO_CSRF_TOKEN_ID")) %}
    <div class="grid-container">
        <script>var autoupdate = [];</script>
        <div class="row">
            {% if videos | length == 0 %}
                <div class="no-content">No videos yet. Click <a href="{{ path("app_upload") }}">here</a> to add some.
                </div>
            {% endif %}
            {% for video in videos %}
                {% set disabled = video.state != constant("App\\Entity\\Video::DONE") %}
                <div class="video-tile col-xxl-4 col-lg-6" id="video-{{ video.customId }}">
                    <div class="tile-content bg-light shadow-5-strong">
                        <div class="thumbnail" onclick="location.href = '{{ path("app_watch_page", {
                            linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
                            videoId: video.customId
                        }) }}'">
                            <img alt="Thumbnail"
                                 src="{{ path("app_watch_thumbnail", {
                                     linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
                                     videoId: video.customId
                                 }) }}"/>
                            <div class="play-button">
                                <i class="fas fa-play"></i>
                            </div>
                        </div>
                        <div class="info">
                            <div class="buttons btn-group btn-group-sm">
                                <a class="btn btn-primary" href="{{ path("app_new_link") }}?video={{ video.customId }}">
                                    <i class="fas fa-link"></i>
                                </a>
                                <a class="btn btn-primary"
                                   href="{{ path("app_video_edit") }}?video={{ video.customId }}">
                                    <i class="fas fa-cog"></i>
                                </a>
                                <form action="{{ path("app_video_delete") }}" method="POST">
                                    <input type="hidden" name="videoId" value="{{ video.customId }}">
                                    <input type="hidden" name="csrfToken" value="{{ deleteCsrfToken }}">
                                    <button class="btn btn-primary btn-danger dropdown-toggle deleteToggle"
                                            id="{{ video.customId }}-deleteDropDown"
                                            data-mdb-toggle="dropdown"
                                            aria-expanded="false"
                                            onclick="">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-end deleteConfirm"
                                         id="{{ video.customId }}-deleteDropDownMenu"
                                         aria-labelledby="{{ video.customId }}-deleteDropDown">
                                        Do you really want to delete "{{ video.name }}"?<br/>
                                        <button class="btn btn-link deleteButton">YES</button>
                                        <button class="btn btn-primary" onclick="removeClass('show', [
                                                '#{{ video.customId }}-deleteDropDown',
                                                '#{{ video.customId }}-deleteDropDownMenu'
                                                ]); return false;">NO
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <h5 class="text-truncate">{{ video.name }}</h5>
                            <div class="views">
                                {{ video.views }} {{ video.views == 1 ? "View" : "Views" }}
                            </div>
                            <div class="length">
                                {{ video.getFormatedLength() }}
                            </div>
                            <div class="description text-truncate">
                                {{ video.description }}
                            </div>
                        </div>
                        {% if disabled %}
                            <script>
                                autoupdate["{{ video.customId }}"] = "{{ path("app_upload_status", {
                                    videoId: video.customId
                                }) }}";
                            </script>
                            <div class="disable">
                                <div class="spinner spinner-border" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="state">
                                    {{ video.getStateString() }}
                                </div>
                                <div class="transcodingProgress">
                                    <div class="value">{{ video.transcodingProgress }} %</div>
                                    <div class="bar" style="width: {{ video.transcodingProgress }}%;"></div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}