diff options
Diffstat (limited to 'client/src/app/shared/video/video-miniature.component.html')
-rw-r--r-- | client/src/app/shared/video/video-miniature.component.html | 89 |
1 files changed, 49 insertions, 40 deletions
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html index f4ae0b0dd..7af0f1113 100644 --- a/client/src/app/shared/video/video-miniature.component.html +++ b/client/src/app/shared/video/video-miniature.component.html | |||
@@ -1,47 +1,56 @@ | |||
1 | <div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }"> | 1 | <div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()"> |
2 | <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail> | 2 | <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail> |
3 | 3 | ||
4 | <div class="video-miniature-information"> | 4 | <div class="video-bottom"> |
5 | <a | 5 | <div class="video-miniature-information"> |
6 | tabindex="-1" | 6 | <a |
7 | class="video-miniature-name" | 7 | tabindex="-1" |
8 | [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }" | 8 | class="video-miniature-name" |
9 | > | 9 | [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }" |
10 | <ng-container *ngIf="displayOptions.privacyLabel"> | 10 | > |
11 | <span *ngIf="isUnlistedVideo()" class="badge badge-warning" i18n>Unlisted</span> | 11 | <ng-container *ngIf="displayOptions.privacyLabel"> |
12 | <span *ngIf="isPrivateVideo()" class="badge badge-danger" i18n>Private</span> | 12 | <span *ngIf="isUnlistedVideo()" class="badge badge-warning" i18n>Unlisted</span> |
13 | </ng-container> | 13 | <span *ngIf="isPrivateVideo()" class="badge badge-danger" i18n>Private</span> |
14 | 14 | </ng-container> | |
15 | {{ video.name }} | 15 | |
16 | </a> | 16 | {{ video.name }} |
17 | 17 | </a> | |
18 | <span class="video-miniature-created-at-views"> | 18 | |
19 | <ng-container *ngIf="displayOptions.date">{{ video.publishedAt | myFromNow }}</ng-container> | 19 | <span class="video-miniature-created-at-views"> |
20 | <ng-container *ngIf="displayOptions.date && displayOptions.views"> - </ng-container> | 20 | <ng-container *ngIf="displayOptions.date">{{ video.publishedAt | myFromNow }}</ng-container> |
21 | <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container> | 21 | <ng-container *ngIf="displayOptions.date && displayOptions.views"> - </ng-container> |
22 | </span> | 22 | <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container> |
23 | 23 | </span> | |
24 | <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]"> | 24 | |
25 | {{ video.byAccount }} | 25 | <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]"> |
26 | </a> | 26 | {{ video.byAccount }} |
27 | <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]"> | 27 | </a> |
28 | {{ video.byVideoChannel }} | 28 | <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]"> |
29 | </a> | 29 | {{ video.byVideoChannel }} |
30 | 30 | </a> | |
31 | <div class="video-info-privacy"> | 31 | |
32 | <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container> | 32 | <div class="video-info-privacy"> |
33 | <ng-container *ngIf="displayOptions.privacyText && displayOptions.state"> - </ng-container> | 33 | <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container> |
34 | <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container> | 34 | <ng-container *ngIf="displayOptions.privacyText && displayOptions.state"> - </ng-container> |
35 | <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container> | ||
36 | </div> | ||
37 | |||
38 | <div *ngIf="displayOptions.blacklistInfo && video.blacklisted" class="video-info-blacklisted"> | ||
39 | <span class="blacklisted-label" i18n>Blacklisted</span> | ||
40 | <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span> | ||
41 | </div> | ||
42 | |||
43 | <div i18n *ngIf="displayOptions.nsfw && video.nsfw" class="video-info-nsfw"> | ||
44 | Sensitive | ||
45 | </div> | ||
35 | </div> | 46 | </div> |
36 | 47 | ||
37 | <div *ngIf="displayOptions.blacklistInfo && video.blacklisted" class="video-info-blacklisted"> | 48 | <div class="video-actions"> |
38 | <span class="blacklisted-label" i18n>Blacklisted</span> | 49 | <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown --> |
39 | <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span> | 50 | <my-video-actions-dropdown |
51 | *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left" | ||
52 | (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()" | ||
53 | ></my-video-actions-dropdown> | ||
40 | </div> | 54 | </div> |
41 | |||
42 | <div i18n *ngIf="displayOptions.nsfw && video.nsfw" class="video-info-nsfw"> | ||
43 | Sensitive | ||
44 | </div> | ||
45 | |||
46 | </div> | 55 | </div> |
47 | </div> | 56 | </div> |