diff options
Diffstat (limited to 'client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html')
-rw-r--r-- | client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html new file mode 100644 index 000000000..8fb244cc4 --- /dev/null +++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html | |||
@@ -0,0 +1,85 @@ | |||
1 | <div class="video-actions-rates"> | ||
2 | <div class="video-actions full-width justify-content-end"> | ||
3 | <my-video-rate | ||
4 | [video]="video" [isUserLoggedIn]="isUserLoggedIn" | ||
5 | (rateUpdated)="onRateUpdated($event)" (userRatingLoaded)="onRateUpdated($event)" | ||
6 | ></my-video-rate> | ||
7 | |||
8 | <button *ngIf="video.support" (click)="showSupportModal()" (keyup.enter)="showSupportModal()" class="action-button action-button-support" [attr.aria-label]="tooltipSupport" | ||
9 | [ngbTooltip]="tooltipSupport" | ||
10 | placement="bottom auto" | ||
11 | > | ||
12 | <my-global-icon iconName="support" aria-hidden="true"></my-global-icon> | ||
13 | <span class="icon-text" i18n>SUPPORT</span> | ||
14 | </button> | ||
15 | |||
16 | <button (click)="showShareModal()" (keyup.enter)="showShareModal()" class="action-button"> | ||
17 | <my-global-icon iconName="share" aria-hidden="true"></my-global-icon> | ||
18 | <span class="icon-text" i18n>SHARE</span> | ||
19 | </button> | ||
20 | |||
21 | <div | ||
22 | class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside" | ||
23 | *ngIf="isUserLoggedIn" (openChange)="addContent.openChange($event)" | ||
24 | [ngbTooltip]="tooltipSaveToPlaylist" | ||
25 | placement="bottom auto" | ||
26 | > | ||
27 | <button class="action-button action-button-save" ngbDropdownToggle> | ||
28 | <my-global-icon iconName="playlist-add" aria-hidden="true"></my-global-icon> | ||
29 | <span class="icon-text" i18n>SAVE</span> | ||
30 | </button> | ||
31 | |||
32 | <div ngbDropdownMenu> | ||
33 | <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist> | ||
34 | </div> | ||
35 | </div> | ||
36 | |||
37 | <ng-container *ngIf="!isUserLoggedIn && !video.isLive"> | ||
38 | <button | ||
39 | *ngIf="isVideoDownloadable()" class="action-button action-button-save" | ||
40 | (click)="showDownloadModal()" (keydown.enter)="showDownloadModal()" | ||
41 | > | ||
42 | <my-global-icon iconName="download" aria-hidden="true"></my-global-icon> | ||
43 | <span class="icon-text d-none d-sm-inline" i18n>DOWNLOAD</span> | ||
44 | </button> | ||
45 | |||
46 | <my-video-download #videoDownloadModal></my-video-download> | ||
47 | </ng-container> | ||
48 | |||
49 | <ng-container *ngIf="isUserLoggedIn"> | ||
50 | <my-video-actions-dropdown | ||
51 | placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" [videoCaptions]="videoCaptions" | ||
52 | [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()" | ||
53 | ></my-video-actions-dropdown> | ||
54 | </ng-container> | ||
55 | </div> | ||
56 | |||
57 | <div class="likes-dislikes-bar-outer-container"> | ||
58 | <div | ||
59 | class="likes-dislikes-bar-inner-container" | ||
60 | *ngIf="video.likes !== 0 || video.dislikes !== 0" | ||
61 | [ngbTooltip]="likesBarTooltipText" | ||
62 | placement="bottom" | ||
63 | > | ||
64 | <div | ||
65 | class="likes-dislikes-bar" | ||
66 | > | ||
67 | <div class="likes-bar" [ngClass]="{ 'liked': userRating !== 'none' }" [ngStyle]="{ 'width.%': video.likesPercent }"></div> | ||
68 | </div> | ||
69 | </div> | ||
70 | </div> | ||
71 | </div> | ||
72 | |||
73 | <div | ||
74 | class="likes-dislikes-bar" | ||
75 | *ngIf="video.likes !== 0 || video.dislikes !== 0" | ||
76 | [ngbTooltip]="likesBarTooltipText" | ||
77 | placement="bottom" | ||
78 | > | ||
79 | <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> | ||
80 | </div> | ||
81 | |||
82 | <ng-container *ngIf="video"> | ||
83 | <my-support-modal #supportModal [video]="video"></my-support-modal> | ||
84 | <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share> | ||
85 | </ng-container> | ||