mirror of
https://github.com/sigmasternchen/MyTube
synced 2025-03-15 21:08:55 +00:00
blacked out videos that are not fully processed yet
This commit is contained in:
parent
26e2e51cf8
commit
677354d3ef
2 changed files with 54 additions and 10 deletions
|
@ -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;
|
||||||
}
|
}
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in a new issue