forks/peertube
1
0
Fork 0
Code Releases Activity

Add thumbnail info if live

Browse source
This commit is contained in:
Chocobozzz 2020-10-27 08:45:30 +01:00 committed by Chocobozzz
parent b5b687550d
commit da0310f821
3 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/app/+videos/+video-watch/video-watch.component.html
View file

@ -268,7 +268,7 @@
>{{ tag }}</a> >{{ tag }}</a>
</div> </div>
<div class="video-attribute"> <div class="video-attribute" *ngIf="!video.isLive">
<span i18n class="video-attribute-label">Duration</span> <span i18n class="video-attribute-label">Duration</span>
<span class="video-attribute-value">{{ video.duration | myDurationFormatter }}</span> <span class="video-attribute-value">{{ video.duration | myDurationFormatter }}</span>
</div> </div>

3
client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
View file

@ -26,7 +26,8 @@
<div class="video-thumbnail-label-overlay warning"><ng-content select="label-warning"></ng-content></div> <div class="video-thumbnail-label-overlay warning"><ng-content select="label-warning"></ng-content></div>
<div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div> <div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div>
<div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div> <div class="video-thumbnail-duration-overlay" *ngIf="!video.isLive">{{ video.durationLabel }}</div>
<div i18n class="video-thumbnail-live-overlay" *ngIf="video.isLive">LIVE</div>
<div class="play-overlay"> <div class="play-overlay">
<div class="icon"></div> <div class="icon"></div>

12
client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
View file

@ -20,7 +20,8 @@
.video-thumbnail-watch-later-overlay, .video-thumbnail-watch-later-overlay,
.video-thumbnail-label-overlay, .video-thumbnail-label-overlay,
.video-thumbnail-duration-overlay { .video-thumbnail-duration-overlay,
.video-thumbnail-live-overlay {
@include static-thumbnail-overlay; @include static-thumbnail-overlay;
border-radius: 3px; border-radius: 3px;
@ -41,13 +42,20 @@
&.danger { background-color: red; } &.danger { background-color: red; }
} }
.video-thumbnail-duration-overlay { .video-thumbnail-duration-overlay,
.video-thumbnail-live-overlay {
position: absolute; position: absolute;
padding: 0 3px; padding: 0 3px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
} }
.video-thumbnail-live-overlay {
background-color: rgba(224, 8, 8, 0.7);
color: #fff;
font-weight: $font-semibold;
}
.video-thumbnail-actions-overlay { .video-thumbnail-actions-overlay {
position: absolute; position: absolute;
display: flex; display: flex;