aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.html22
-rw-r--r--client/src/app/shared/shared-thumbnail/video-thumbnail.component.html5
-rw-r--r--client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss7
-rw-r--r--client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts5
4 files changed, 31 insertions, 8 deletions
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index daee4be2a..9e469f0b0 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -34,7 +34,7 @@
34 </div> 34 </div>
35 35
36 <div i18n class="col-md-12 alert alert-info" *ngIf="isLiveEnded()"> 36 <div i18n class="col-md-12 alert alert-info" *ngIf="isLiveEnded()">
37 This live is finished. 37 This live has ended.
38 </div> 38 </div>
39 39
40 <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted"> 40 <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted">
@@ -51,8 +51,14 @@
51 <div class="d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below --> 51 <div class="d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->
52 <h1 class="video-info-name">{{ video.name }}</h1> 52 <h1 class="video-info-name">{{ video.name }}</h1>
53 53
54 <div i18n class="video-info-date-views"> 54 <div class="video-info-date-views">
55 Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span> 55 <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
56
57 <span i18n class="views">
58 • {{ video.views | myNumberFormatter }}
59 <ng-container *ngIf="!video.isLive">views</ng-container>
60 <ng-container *ngIf="video.isLive">viewers</ng-container>
61 </span>
56 </div> 62 </div>
57 </div> 63 </div>
58 64
@@ -62,8 +68,14 @@
62 </div> 68 </div>
63 69
64 <div class="video-info-first-row-bottom"> 70 <div class="video-info-first-row-bottom">
65 <div i18n class="d-none d-md-block video-info-date-views"> 71 <div class="d-none d-md-block video-info-date-views">
66 Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span> 72 <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
73
74 <span i18n class="views">
75 • {{ video.views | myNumberFormatter }}
76 <ng-container *ngIf="!video.isLive">views</ng-container>
77 <ng-container *ngIf="video.isLive">viewers</ng-container>
78 </span>
67 </div> 79 </div>
68 80
69 <div class="video-actions-rates"> 81 <div class="video-actions-rates">
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
index be07844ab..4fea0cc1c 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
@@ -27,7 +27,10 @@
27 <div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div> 27 <div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div>
28 28
29 <div class="video-thumbnail-duration-overlay" *ngIf="!video.isLive">{{ video.durationLabel }}</div> 29 <div class="video-thumbnail-duration-overlay" *ngIf="!video.isLive">{{ video.durationLabel }}</div>
30 <div i18n class="video-thumbnail-live-overlay" *ngIf="video.isLive">LIVE</div> 30 <div class="video-thumbnail-live-overlay" [ngClass]="{ 'live-ended': isLiveEnded() }" *ngIf="video.isLive">
31 <ng-container i18n *ngIf="!isLiveEnded()">LIVE</ng-container>
32 <ng-container i18n *ngIf="isLiveEnded()">LIVE ENDED</ng-container>
33 </div>
31 34
32 <div class="play-overlay"> 35 <div class="play-overlay">
33 <div class="icon"></div> 36 <div class="icon"></div>
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
index 1b6151c89..4f53ffaf6 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -51,9 +51,12 @@
51 } 51 }
52 52
53 .video-thumbnail-live-overlay { 53 .video-thumbnail-live-overlay {
54 background-color: rgba(224, 8, 8, 0.7);
55 color: #fff;
56 font-weight: $font-semibold; 54 font-weight: $font-semibold;
55 color: #fff;
56
57 &:not(.live-ended) {
58 background-color: rgba(224, 8, 8, 0.7);
59 }
57 } 60 }
58 61
59 .video-thumbnail-actions-overlay { 62 .video-thumbnail-actions-overlay {
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
index b2a2cf240..67a9b0028 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
@@ -1,5 +1,6 @@
1import { Component, EventEmitter, Input, Output } from '@angular/core' 1import { Component, EventEmitter, Input, Output } from '@angular/core'
2import { ScreenService } from '@app/core' 2import { ScreenService } from '@app/core'
3import { VideoState } from '@shared/models'
3import { Video } from '../shared-main' 4import { Video } from '../shared-main'
4 5
5@Component({ 6@Component({
@@ -29,6 +30,10 @@ export class VideoThumbnailComponent {
29 this.addedToWatchLaterText = $localize`Remove from watch later` 30 this.addedToWatchLaterText = $localize`Remove from watch later`
30 } 31 }
31 32
33 isLiveEnded () {
34 return this.video.state.id === VideoState.LIVE_ENDED
35 }
36
32 getImageUrl () { 37 getImageUrl () {
33 if (!this.video) return '' 38 if (!this.video) return ''
34 39