blacked out videos that are not fully processed yet

This commit is contained in:
overflowerror 2021-01-06 22:14:27 +01:00
parent 26e2e51cf8
commit 677354d3ef
2 changed files with 54 additions and 10 deletions

View file

@ -19,9 +19,7 @@
} }
.tile-content { .tile-content {
position: absolute; position: relative;
width: 100%;
height: 100%;
} }
.thumbnail { .thumbnail {
@ -30,7 +28,14 @@
cursor: pointer; cursor: pointer;
} }
.thumbnail:after {
content: "";
display: block;
padding-top: calc(100% * 9 / 16);
}
.thumbnail img { .thumbnail img {
position: absolute;
width: 100%; width: 100%;
} }
@ -50,4 +55,30 @@
.info { .info {
padding: 1vw; padding: 1vw;
}
.disable {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
.disable .spinner {
position: absolute;
width: 3vw;
height: 3vw;
left: calc(50% - 1.5vw);
top: calc(9 / 16 * 50%);
color: lightgrey;
}
.disable .state {
position: absolute;
text-align: center;
width: 100%;
top: 55%;
color: lightgray;
} }

View file

@ -9,19 +9,22 @@
<div class="grid-container"> <div class="grid-container">
<div class="row"> <div class="row">
{% for video in videos %} {% for video in videos %}
{% set disabled = video.state != constant("App\\Entity\\Video::DONE") %}
<div class="video-tile col-md-4"> <div class="video-tile col-md-4">
<div class="tile-content bg-light shadow-5-strong"> <div class="tile-content bg-light shadow-5-strong">
<div class="thumbnail" onclick="location.href = '{{ path("app_watch_page", { <div class="thumbnail" onclick="location.href = '{{ path("app_watch_page", {
linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"), linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
videoId: video.customId videoId: video.customId
}) }}'"> }) }}'">
<img alt="Thumbnail" src="{{ path("app_watch_thumbnail", { {% if disabled == false %}
linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"), <img alt="Thumbnail" src="{{ path("app_watch_thumbnail", {
videoId: video.customId linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
}) }}"/> videoId: video.customId
<div class="play-button"> }) }}"/>
<i class="fas fa-play"></i> <div class="play-button">
</div> <i class="fas fa-play"></i>
</div>
{% endif %}
</div> </div>
<div class="info"> <div class="info">
<h5>{{ video.name }}</h5> <h5>{{ video.name }}</h5>
@ -29,6 +32,16 @@
{{ video.description }} {{ video.description }}
</p> </p>
</div> </div>
{% if disabled %}
<div class="disable">
<div class="spinner spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="state">
{{ video.getStateString() }}
</div>
</div>
{% endif %}
</div> </div>
</div> </div>
{% endfor %} {% endfor %}