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 {
position: absolute;
width: 100%;
height: 100%;
position: relative;
}
.thumbnail {
@ -30,7 +28,14 @@
cursor: pointer;
}
.thumbnail:after {
content: "";
display: block;
padding-top: calc(100% * 9 / 16);
}
.thumbnail img {
position: absolute;
width: 100%;
}
@ -50,4 +55,30 @@
.info {
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="row">
{% for video in videos %}
{% set disabled = video.state != constant("App\\Entity\\Video::DONE") %}
<div class="video-tile col-md-4">
<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>
{% if disabled == false %}
<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>
{% endif %}
</div>
<div class="info">
<h5>{{ video.name }}</h5>
@ -29,6 +32,16 @@
{{ video.description }}
</p>
</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>
{% endfor %}