aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html106
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss14
2 files changed, 72 insertions, 48 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 58b2382f0..c57b00032 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -39,70 +39,82 @@
39 <div class="video-info"> 39 <div class="video-info">
40 <div class="video-info-first-row"> 40 <div class="video-info-first-row">
41 <div> 41 <div>
42 <div class="d-block d-md-none"> <!-- only shown on medium devices, has its conterpart for larger viewports below --> 42 <div class="d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->
43 <h1 class="video-info-name">{{ video.name }}</h1> 43 <h1 class="video-info-name">{{ video.name }}</h1>
44
44 <div i18n class="video-info-date-views"> 45 <div i18n class="video-info-date-views">
45 Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span> 46 Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
46 </div> 47 </div>
47 </div> 48 </div>
48 49
49 <div class="d-flex justify-content-between align-items-md-end"> 50 <div class="d-flex justify-content-between flex-direction-column">
50 <div class="d-none d-md-block"> 51 <div class="d-none d-md-block">
51 <h1 class="video-info-name">{{ video.name }}</h1> 52 <h1 class="video-info-name">{{ video.name }}</h1>
53 </div>
52 54
53 <div i18n class="video-info-date-views"> 55 <div class="video-info-first-row-bottom">
56 <div i18n class="d-none d-md-block video-info-date-views">
54 Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span> 57 Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
55 </div> 58 </div>
56 </div>
57
58 <div class="video-actions-rates">
59 <div class="video-actions fullWidth justify-content-end">
60 <div
61 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
62 class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
63 i18n-title title="Like this video"
64 >
65 <my-global-icon iconName="like"></my-global-icon>
66 <span *ngIf="video.likes" class="count">{{ video.likes }}</span>
67 </div>
68
69 <div
70 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
71 class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
72 i18n-title title="Dislike this video"
73 >
74 <my-global-icon iconName="dislike"></my-global-icon>
75 <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
76 </div>
77 59
78 <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support"> 60 <div class="video-actions-rates">
79 <my-global-icon iconName="support"></my-global-icon> 61 <div class="video-actions fullWidth justify-content-end">
80 <span class="icon-text" i18n>Support</span> 62 <div
81 </div> 63 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
64 class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
65 i18n-title title="Like this video"
66 >
67 <my-global-icon iconName="like"></my-global-icon>
68 <span *ngIf="video.likes" class="count">{{ video.likes }}</span>
69 </div>
82 70
83 <div (click)="showShareModal()" class="action-button" role="button"> 71 <div
84 <my-global-icon iconName="share"></my-global-icon> 72 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
85 <span class="icon-text" i18n>Share</span> 73 class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
74 i18n-title title="Dislike this video"
75 >
76 <my-global-icon iconName="dislike"></my-global-icon>
77 <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
78 </div>
79
80 <div *ngIf="video.support" (click)="showSupportModal()" class="action-button">
81 <my-global-icon iconName="heart"></my-global-icon>
82 <span class="icon-text" i18n>Support</span>
83 </div>
84
85 <div (click)="showShareModal()" class="action-button" role="button">
86 <my-global-icon iconName="share"></my-global-icon>
87 <span class="icon-text" i18n>Share</span>
88 </div>
89
90 <div
91 class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
92 *ngIf="isUserLoggedIn()" (openChange)="addContent.openChange($event)"
93 >
94 <div class="action-button action-button-save" ngbDropdownToggle role="button">
95 <my-global-icon iconName="playlist-add"></my-global-icon>
96 <span class="icon-text" i18n>Save</span>
97 </div>
98
99 <div ngbDropdownMenu>
100 <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist>
101 </div>
102 </div>
103
104 <my-video-actions-dropdown
105 placement="top" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
106 (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
107 ></my-video-actions-dropdown>
86 </div> 108 </div>
87 109
88 <div 110 <div
89 class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside" 111 class="video-info-likes-dislikes-bar"
90 *ngIf="isUserLoggedIn()" (openChange)="addContent.openChange($event)" 112 *ngIf="video.likes !== 0 || video.dislikes !== 0"
113 [ngbTooltip]="likesBarTooltipText"
114 placement="bottom"
91 > 115 >
92 <div class="action-button action-button-save" ngbDropdownToggle role="button"> 116 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
93 <my-global-icon iconName="playlist-add"></my-global-icon>
94 <span class="icon-text" i18n>Save</span>
95 </div>
96
97 <div ngbDropdownMenu>
98 <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist>
99 </div>
100 </div> 117 </div>
101
102 <my-video-actions-dropdown
103 placement="top" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
104 (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
105 ></my-video-actions-dropdown>
106 </div> 118 </div>
107 119
108 <div 120 <div
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 86b44d5da..7b134a4dc 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -108,6 +108,10 @@ $player-factor: 1.7; // 16/9
108 border-radius: 0; 108 border-radius: 0;
109} 109}
110 110
111.flex-direction-column {
112 flex-direction: column;
113}
114
111#video-not-found { 115#video-not-found {
112 height: 300px; 116 height: 300px;
113 line-height: 300px; 117 line-height: 300px;
@@ -142,6 +146,13 @@ $player-factor: 1.7; // 16/9
142 flex-grow: 1; 146 flex-grow: 1;
143 } 147 }
144 148
149 .video-info-first-row-bottom {
150 display: grid;
151 grid-template-columns: 1fr auto;
152 align-items: center;
153 width: 100%;
154 }
155
145 .video-info-date-views { 156 .video-info-date-views {
146 flex-grow: 1; 157 flex-grow: 1;
147 margin-bottom: 10px; 158 margin-bottom: 10px;
@@ -209,8 +220,9 @@ $player-factor: 1.7; // 16/9
209 } 220 }
210 221
211 .video-actions-rates { 222 .video-actions-rates {
212 margin: 20px 0 10px 0; 223 margin: 0 0 10px 0;
213 align-items: start; 224 align-items: start;
225 width: max-content;
214 226
215 .video-actions { 227 .video-actions {
216 height: 40px; // Align with the title 228 height: 40px; // Align with the title