diff options
Diffstat (limited to 'client/src/app/shared')
21 files changed, 148 insertions, 144 deletions
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html index 5a9ff1a15..5d355a6d8 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.html +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html | |||
@@ -25,15 +25,11 @@ | |||
25 | </ng-template> | 25 | </ng-template> |
26 | </ng-container> | 26 | </ng-container> |
27 | 27 | ||
28 | <my-global-icon | 28 | <button (click)="onMaximizeClick()" class="maximize-button border-0 m-3" [disabled]="disabled"> |
29 | *ngIf="!isMaximized" role="button" [ngbTooltip]="maximizeInText" | 29 | <my-global-icon *ngIf="!isMaximized" [ngbTooltip]="maximizeInText" iconName="fullscreen"></my-global-icon> |
30 | class="maximize-button" iconName="fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }" | 30 | |
31 | ></my-global-icon> | 31 | <my-global-icon *ngIf="isMaximized" [ngbTooltip]="maximizeOutText" iconName="exit-fullscreen"></my-global-icon> |
32 | 32 | </button> | |
33 | <my-global-icon | ||
34 | *ngIf="isMaximized" role="button" [ngbTooltip]="maximizeOutText" | ||
35 | class="maximize-button" iconName="exit-fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }" | ||
36 | ></my-global-icon> | ||
37 | </div> | 33 | </div> |
38 | 34 | ||
39 | <div [ngbNavOutlet]="nav"></div> | 35 | <div [ngbNavOutlet]="nav"></div> |
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss index f4b74a2d4..1f30bf129 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss | |||
@@ -23,7 +23,7 @@ $input-border-radius: 3px; | |||
23 | } | 23 | } |
24 | 24 | ||
25 | .nav-preview { | 25 | .nav-preview { |
26 | padding: 10px; | 26 | padding: 10px 0; |
27 | 27 | ||
28 | border: 1px solid pvar(--inputBorderColor); | 28 | border: 1px solid pvar(--inputBorderColor); |
29 | border-top: 1px dashed pvar(--inputBorderColor); | 29 | border-top: 1px dashed pvar(--inputBorderColor); |
@@ -38,14 +38,9 @@ $input-border-radius: 3px; | |||
38 | border-bottom: 2px solid pvar(--mainColor); | 38 | border-bottom: 2px solid pvar(--mainColor); |
39 | 39 | ||
40 | .maximize-button { | 40 | .maximize-button { |
41 | @include margin-left(15px); | ||
42 | |||
43 | opacity: 0.6; | 41 | opacity: 0.6; |
44 | cursor: default; | ||
45 | |||
46 | &:not(.disabled) { | ||
47 | cursor: pointer; | ||
48 | 42 | ||
43 | &:not([disabled]) { | ||
49 | &:hover, | 44 | &:hover, |
50 | &:active { | 45 | &:active { |
51 | opacity: 1; | 46 | opacity: 1; |
@@ -105,10 +100,6 @@ $input-border-radius: 3px; | |||
105 | 100 | ||
106 | padding: 20px 0; | 101 | padding: 20px 0; |
107 | width: 100% !important; | 102 | width: 100% !important; |
108 | |||
109 | .maximize-button { | ||
110 | @include margin-right(15px); | ||
111 | } | ||
112 | } | 103 | } |
113 | 104 | ||
114 | textarea { | 105 | textarea { |
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html index 94077fafa..ac8c01856 100644 --- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html | |||
@@ -1,6 +1,6 @@ | |||
1 | <h2 *ngIf="displayInstanceName" class="instance-name">{{ about?.instance.name }}</h2> | 1 | <h2 *ngIf="displayInstanceName" class="instance-name">{{ about?.instance.name }}</h2> |
2 | 2 | ||
3 | <div *ngIf="displayInstanceShortDescription" class="instance-short-description">{{ about?.instance.shortDescription }}</div> | 3 | <div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div> |
4 | 4 | ||
5 | <ngb-accordion #accordion="ngbAccordion" [closeOthers]="true"> | 5 | <ngb-accordion #accordion="ngbAccordion" [closeOthers]="true"> |
6 | <ngb-panel *ngIf="panels.features" id="instance-features"> | 6 | <ngb-panel *ngIf="panels.features" id="instance-features"> |
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss index ee9e4c3ee..8337a7154 100644 --- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss | |||
@@ -6,8 +6,7 @@ | |||
6 | } | 6 | } |
7 | 7 | ||
8 | .instance-short-description { | 8 | .instance-short-description { |
9 | @include ellipsis-multiline(1rem, 3, inherit); | 9 | font-size: 1rem; |
10 | |||
11 | margin: 25px 0; | 10 | margin: 25px 0; |
12 | } | 11 | } |
13 | 12 | ||
diff --git a/client/src/app/shared/shared-main/angular/link.component.scss b/client/src/app/shared/shared-main/angular/link.component.scss index f54240d31..d288afab1 100644 --- a/client/src/app/shared/shared-main/angular/link.component.scss +++ b/client/src/app/shared/shared-main/angular/link.component.scss | |||
@@ -1,4 +1,4 @@ | |||
1 | .no-class { | 1 | .inherit-parent { |
2 | color: inherit; | 2 | color: inherit; |
3 | text-decoration: inherit; | 3 | text-decoration: inherit; |
4 | position: inherit; | 4 | position: inherit; |
diff --git a/client/src/app/shared/shared-main/angular/link.component.ts b/client/src/app/shared/shared-main/angular/link.component.ts index 1f5975589..f2093496f 100644 --- a/client/src/app/shared/shared-main/angular/link.component.ts +++ b/client/src/app/shared/shared-main/angular/link.component.ts | |||
@@ -14,14 +14,17 @@ export class LinkComponent implements OnInit { | |||
14 | @Input() title?: string | 14 | @Input() title?: string |
15 | 15 | ||
16 | @Input() className?: string | 16 | @Input() className?: string |
17 | @Input() inheritParentCSS = false | ||
17 | 18 | ||
18 | @Input() tabindex: string | number | 19 | @Input() tabindex: string | number |
19 | 20 | ||
20 | builtClasses: string | 21 | builtClasses: string |
21 | 22 | ||
22 | ngOnInit () { | 23 | ngOnInit () { |
23 | this.builtClasses = this.className | 24 | this.builtClasses = this.className || '' |
24 | ? this.className | 25 | |
25 | : 'no-class' | 26 | if (!this.builtClasses || this.inheritParentCSS) { |
27 | this.builtClasses += ' inherit-parent' | ||
28 | } | ||
26 | } | 29 | } |
27 | } | 30 | } |
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html index a748be873..7032c4cd0 100644 --- a/client/src/app/shared/shared-main/feeds/feed.component.html +++ b/client/src/app/shared/shared-main/feeds/feed.component.html | |||
@@ -1,4 +1,4 @@ | |||
1 | <div class="feed" *ngIf="syndicationItems && syndicationItems.length !== 0"> | 1 | <button class="feed border-0 p-0" *ngIf="syndicationItems && syndicationItems.length !== 0"> |
2 | <my-global-icon | 2 | <my-global-icon |
3 | role="button" aria-label="Open syndication dropdown" i18n-aria-label | 3 | role="button" aria-label="Open syndication dropdown" i18n-aria-label |
4 | *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto" | 4 | *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto" |
@@ -9,4 +9,4 @@ | |||
9 | <ng-template #feedsList> | 9 | <ng-template #feedsList> |
10 | <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a> | 10 | <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a> |
11 | </ng-template> | 11 | </ng-template> |
12 | </div> | 12 | </button> |
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss index bf1f4eeeb..25afe9c6c 100644 --- a/client/src/app/shared/shared-main/feeds/feed.component.scss +++ b/client/src/app/shared/shared-main/feeds/feed.component.scss | |||
@@ -3,15 +3,19 @@ | |||
3 | 3 | ||
4 | .feed { | 4 | .feed { |
5 | width: 100%; | 5 | width: 100%; |
6 | color: inherit; | ||
6 | 7 | ||
7 | a { | 8 | a { |
8 | color: #000; | 9 | color: pvar(--mainForegroundColor); |
9 | display: block; | 10 | display: block; |
10 | min-width: 100px; | 11 | min-width: 100px; |
12 | |||
13 | &:hover { | ||
14 | text-decoration: underline; | ||
15 | } | ||
11 | } | 16 | } |
12 | } | 17 | } |
13 | 18 | ||
14 | my-global-icon { | 19 | my-global-icon { |
15 | cursor: pointer; | ||
16 | width: 100%; | 20 | width: 100%; |
17 | } | 21 | } |
diff --git a/client/src/app/shared/shared-main/misc/help.component.html b/client/src/app/shared/shared-main/misc/help.component.html index 360a476f6..0252ad5cb 100644 --- a/client/src/app/shared/shared-main/misc/help.component.html +++ b/client/src/app/shared/shared-main/misc/help.component.html | |||
@@ -22,11 +22,9 @@ | |||
22 | </p> | 22 | </p> |
23 | </ng-template> | 23 | </ng-template> |
24 | 24 | ||
25 | <span | 25 | <button |
26 | role="button" | 26 | class="help-tooltip-button p-0 border-0 mx-1" |
27 | class="help-tooltip-button" | ||
28 | [title]="title" | 27 | [title]="title" |
29 | tabindex=0 | ||
30 | popoverClass="help-popover" | 28 | popoverClass="help-popover" |
31 | [attr.aria-pressed]="isPopoverOpened" | 29 | [attr.aria-pressed]="isPopoverOpened" |
32 | [ngbPopover]="tooltipTemplate" | 30 | [ngbPopover]="tooltipTemplate" |
@@ -36,4 +34,4 @@ | |||
36 | (onShown)="onPopoverShown()" | 34 | (onShown)="onPopoverShown()" |
37 | > | 35 | > |
38 | <my-global-icon [iconName]="iconName"></my-global-icon> | 36 | <my-global-icon [iconName]="iconName"></my-global-icon> |
39 | </span> | 37 | </button> |
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss index 6ccef9f2c..46f533f61 100644 --- a/client/src/app/shared/shared-main/misc/help.component.scss +++ b/client/src/app/shared/shared-main/misc/help.component.scss | |||
@@ -2,12 +2,6 @@ | |||
2 | @use '_mixins' as *; | 2 | @use '_mixins' as *; |
3 | 3 | ||
4 | .help-tooltip-button { | 4 | .help-tooltip-button { |
5 | @include disable-outline; | ||
6 | |||
7 | cursor: pointer; | ||
8 | border: 0; | ||
9 | margin: 5px; | ||
10 | |||
11 | my-global-icon { | 5 | my-global-icon { |
12 | @include apply-svg-color(pvar(--greyForegroundColor)); | 6 | @include apply-svg-color(pvar(--greyForegroundColor)); |
13 | 7 | ||
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html index f4d249b41..5650fa948 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.html +++ b/client/src/app/shared/shared-share-modal/video-share.component.html | |||
@@ -1,7 +1,10 @@ | |||
1 | <ng-template #modal let-hide="close"> | 1 | <ng-template #modal let-hide="close"> |
2 | <div class="modal-header"> | 2 | <div class="modal-header"> |
3 | <h4 i18n class="modal-title">Share</h4> | 3 | <h4 i18n class="modal-title">Share</h4> |
4 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> | 4 | |
5 | <button class="border-0 p-0" (click)="hide()"> | ||
6 | <my-global-icon iconName="cross" aria-label="Close" role="button" ></my-global-icon> | ||
7 | </button> | ||
5 | </div> | 8 | </div> |
6 | 9 | ||
7 | 10 | ||
@@ -72,13 +75,21 @@ | |||
72 | ></my-peertube-checkbox> | 75 | ></my-peertube-checkbox> |
73 | </div> | 76 | </div> |
74 | 77 | ||
75 | <div class="form-group"> | 78 | <ng-container *ngIf="isInPlaylistEmbedTab()"> |
76 | <my-peertube-checkbox | 79 | <div class="form-group"> |
77 | *ngIf="isInPlaylistEmbedTab()" | 80 | <my-peertube-checkbox |
78 | inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl" | 81 | inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl" |
79 | i18n-labelText labelText="Only display embed URL" | 82 | i18n-labelText labelText="Only display embed URL" |
80 | ></my-peertube-checkbox> | 83 | ></my-peertube-checkbox> |
81 | </div> | 84 | </div> |
85 | |||
86 | <div class="form-group"> | ||
87 | <my-peertube-checkbox | ||
88 | inputName="responsive" [(ngModel)]="customizations.responsive" | ||
89 | i18n-labelText labelText="Responsive embed" | ||
90 | ></my-peertube-checkbox> | ||
91 | </div> | ||
92 | </ng-container> | ||
82 | 93 | ||
83 | <my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder> | 94 | <my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder> |
84 | </div> | 95 | </div> |
@@ -142,92 +153,95 @@ | |||
142 | <div [ngbNavOutlet]="nav"></div> | 153 | <div [ngbNavOutlet]="nav"></div> |
143 | 154 | ||
144 | <div class="filters"> | 155 | <div class="filters"> |
145 | <div> | 156 | <div class="form-group start-at" *ngIf="!video.isLive"> |
146 | <div class="form-group start-at" *ngIf="!video.isLive"> | 157 | <my-peertube-checkbox |
158 | inputName="startAt" [(ngModel)]="customizations.startAtCheckbox" | ||
159 | i18n-labelText labelText="Start at" | ||
160 | ></my-peertube-checkbox> | ||
161 | |||
162 | <my-timestamp-input | ||
163 | [timestamp]="customizations.startAt" | ||
164 | [maxTimestamp]="video.duration" | ||
165 | [disabled]="!customizations.startAtCheckbox" | ||
166 | [(ngModel)]="customizations.startAt" | ||
167 | > | ||
168 | </my-timestamp-input> | ||
169 | </div> | ||
170 | |||
171 | <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block"> | ||
172 | <my-peertube-checkbox | ||
173 | inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox" | ||
174 | i18n-labelText labelText="Auto select subtitle" | ||
175 | ></my-peertube-checkbox> | ||
176 | |||
177 | <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }"> | ||
178 | <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control"> | ||
179 | <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option> | ||
180 | </select> | ||
181 | </div> | ||
182 | </div> | ||
183 | |||
184 | <div class="form-group" *ngIf="isInVideoEmbedTab()"> | ||
185 | <my-peertube-checkbox | ||
186 | inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl" | ||
187 | i18n-labelText labelText="Only display embed URL" | ||
188 | ></my-peertube-checkbox> | ||
189 | </div> | ||
190 | |||
191 | <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder> | ||
192 | |||
193 | <div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true"> | ||
194 | <div class="form-group stop-at" *ngIf="!video.isLive"> | ||
147 | <my-peertube-checkbox | 195 | <my-peertube-checkbox |
148 | inputName="startAt" [(ngModel)]="customizations.startAtCheckbox" | 196 | inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox" |
149 | i18n-labelText labelText="Start at" | 197 | i18n-labelText labelText="Stop at" |
150 | ></my-peertube-checkbox> | 198 | ></my-peertube-checkbox> |
151 | 199 | ||
152 | <my-timestamp-input | 200 | <my-timestamp-input |
153 | [timestamp]="customizations.startAt" | 201 | [timestamp]="customizations.stopAt" |
154 | [maxTimestamp]="video.duration" | 202 | [maxTimestamp]="video.duration" |
155 | [disabled]="!customizations.startAtCheckbox" | 203 | [disabled]="!customizations.stopAtCheckbox" |
156 | [(ngModel)]="customizations.startAt" | 204 | [(ngModel)]="customizations.stopAt" |
157 | > | 205 | > |
158 | </my-timestamp-input> | 206 | </my-timestamp-input> |
159 | </div> | 207 | </div> |
160 | 208 | ||
161 | <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block"> | 209 | <div class="form-group"> |
162 | <my-peertube-checkbox | 210 | <my-peertube-checkbox |
163 | inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox" | 211 | inputName="autoplay" [(ngModel)]="customizations.autoplay" |
164 | i18n-labelText labelText="Auto select subtitle" | 212 | i18n-labelText labelText="Autoplay" |
165 | ></my-peertube-checkbox> | 213 | ></my-peertube-checkbox> |
166 | |||
167 | <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }"> | ||
168 | <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control"> | ||
169 | <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option> | ||
170 | </select> | ||
171 | </div> | ||
172 | </div> | 214 | </div> |
173 | 215 | ||
174 | <div class="form-group" *ngIf="isInVideoEmbedTab()"> | 216 | <div class="form-group"> |
175 | <my-peertube-checkbox | 217 | <my-peertube-checkbox |
176 | inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl" | 218 | inputName="muted" [(ngModel)]="customizations.muted" |
177 | i18n-labelText labelText="Only display embed URL" | 219 | i18n-labelText labelText="Muted" |
178 | ></my-peertube-checkbox> | 220 | ></my-peertube-checkbox> |
179 | </div> | 221 | </div> |
180 | 222 | ||
181 | <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder> | 223 | <div class="form-group" *ngIf="!video.isLive"> |
182 | </div> | 224 | <my-peertube-checkbox |
183 | 225 | inputName="loop" [(ngModel)]="customizations.loop" | |
184 | <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed"> | 226 | i18n-labelText labelText="Loop" |
185 | <div> | 227 | ></my-peertube-checkbox> |
186 | <div class="form-group stop-at" *ngIf="!video.isLive"> | 228 | </div> |
187 | <my-peertube-checkbox | ||
188 | inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox" | ||
189 | i18n-labelText labelText="Stop at" | ||
190 | ></my-peertube-checkbox> | ||
191 | |||
192 | <my-timestamp-input | ||
193 | [timestamp]="customizations.stopAt" | ||
194 | [maxTimestamp]="video.duration" | ||
195 | [disabled]="!customizations.stopAtCheckbox" | ||
196 | [(ngModel)]="customizations.stopAt" | ||
197 | > | ||
198 | </my-timestamp-input> | ||
199 | </div> | ||
200 | 229 | ||
201 | <div class="form-group"> | 230 | <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group"> |
202 | <my-peertube-checkbox | 231 | <my-peertube-checkbox |
203 | inputName="autoplay" [(ngModel)]="customizations.autoplay" | 232 | inputName="originUrl" [(ngModel)]="customizations.originUrl" |
204 | i18n-labelText labelText="Autoplay" | 233 | i18n-labelText labelText="Use origin instance URL" |
205 | ></my-peertube-checkbox> | 234 | ></my-peertube-checkbox> |
206 | </div> | 235 | </div> |
207 | 236 | ||
237 | <ng-container *ngIf="isInVideoEmbedTab()"> | ||
208 | <div class="form-group"> | 238 | <div class="form-group"> |
209 | <my-peertube-checkbox | 239 | <my-peertube-checkbox |
210 | inputName="muted" [(ngModel)]="customizations.muted" | 240 | inputName="responsive" [(ngModel)]="customizations.responsive" |
211 | i18n-labelText labelText="Muted" | 241 | i18n-labelText labelText="Responsive embed" |
212 | ></my-peertube-checkbox> | ||
213 | </div> | ||
214 | |||
215 | <div class="form-group" *ngIf="!video.isLive"> | ||
216 | <my-peertube-checkbox | ||
217 | inputName="loop" [(ngModel)]="customizations.loop" | ||
218 | i18n-labelText labelText="Loop" | ||
219 | ></my-peertube-checkbox> | 242 | ></my-peertube-checkbox> |
220 | </div> | 243 | </div> |
221 | 244 | ||
222 | <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group"> | ||
223 | <my-peertube-checkbox | ||
224 | inputName="originUrl" [(ngModel)]="customizations.originUrl" | ||
225 | i18n-labelText labelText="Use origin instance URL" | ||
226 | ></my-peertube-checkbox> | ||
227 | </div> | ||
228 | </div> | ||
229 | |||
230 | <ng-container *ngIf="isInVideoEmbedTab()"> | ||
231 | <div class="form-group"> | 245 | <div class="form-group"> |
232 | <my-peertube-checkbox | 246 | <my-peertube-checkbox |
233 | inputName="title" [(ngModel)]="customizations.title" | 247 | inputName="title" [(ngModel)]="customizations.title" |
@@ -265,9 +279,11 @@ | |||
265 | </ng-container> | 279 | </ng-container> |
266 | </div> | 280 | </div> |
267 | 281 | ||
268 | <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button" | 282 | <button |
269 | [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"> | 283 | class="border-0 p-0 mt-4 mx-auto fw-semibold d-block" |
270 | 284 | (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" | |
285 | [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic" | ||
286 | > | ||
271 | <ng-container *ngIf="isAdvancedCustomizationCollapsed"> | 287 | <ng-container *ngIf="isAdvancedCustomizationCollapsed"> |
272 | <span class="chevron-down"></span> | 288 | <span class="chevron-down"></span> |
273 | 289 | ||
@@ -283,7 +299,7 @@ | |||
283 | Less customization | 299 | Less customization |
284 | </ng-container> | 300 | </ng-container> |
285 | </ng-container> | 301 | </ng-container> |
286 | </div> | 302 | </button> |
287 | </div> | 303 | </div> |
288 | </div> | 304 | </div> |
289 | </div> | 305 | </div> |
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss index 7b6009f5a..c64e11f4d 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.scss +++ b/client/src/app/shared/shared-share-modal/video-share.component.scss | |||
@@ -42,12 +42,7 @@ my-input-text { | |||
42 | } | 42 | } |
43 | 43 | ||
44 | .advanced-filters-button { | 44 | .advanced-filters-button { |
45 | display: flex; | ||
46 | justify-content: center; | ||
47 | align-items: center; | ||
48 | margin-top: 20px; | ||
49 | font-weight: $font-semibold; | 45 | font-weight: $font-semibold; |
50 | cursor: pointer; | ||
51 | } | 46 | } |
52 | 47 | ||
53 | .video-caption-block { | 48 | .video-caption-block { |
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts index e1db4a3b8..43229c330 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.ts +++ b/client/src/app/shared/shared-share-modal/video-share.component.ts | |||
@@ -29,6 +29,7 @@ type Customizations = { | |||
29 | warningTitle: boolean | 29 | warningTitle: boolean |
30 | controlBar: boolean | 30 | controlBar: boolean |
31 | peertubeLink: boolean | 31 | peertubeLink: boolean |
32 | responsive: boolean | ||
32 | 33 | ||
33 | includeVideoInPlaylist: boolean | 34 | includeVideoInPlaylist: boolean |
34 | } | 35 | } |
@@ -100,6 +101,7 @@ export class VideoShareComponent { | |||
100 | warningTitle: true, | 101 | warningTitle: true, |
101 | controlBar: true, | 102 | controlBar: true, |
102 | peertubeLink: true, | 103 | peertubeLink: true, |
104 | responsive: false, | ||
103 | 105 | ||
104 | includeVideoInPlaylist: false | 106 | includeVideoInPlaylist: false |
105 | }, { | 107 | }, { |
@@ -152,10 +154,11 @@ export class VideoShareComponent { | |||
152 | ) | 154 | ) |
153 | } | 155 | } |
154 | 156 | ||
155 | async getVideoIframeCode () { | 157 | async getVideoEmbedCode (options: { responsive: boolean }) { |
158 | const { responsive } = options | ||
156 | return this.hooks.wrapFun( | 159 | return this.hooks.wrapFun( |
157 | buildVideoOrPlaylistEmbed, | 160 | buildVideoOrPlaylistEmbed, |
158 | { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name }, | 161 | { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive }, |
159 | 'video-watch', | 162 | 'video-watch', |
160 | 'filter:share.video-embed-code.build.params', | 163 | 'filter:share.video-embed-code.build.params', |
161 | 'filter:share.video-embed-code.build.result' | 164 | 'filter:share.video-embed-code.build.result' |
@@ -186,10 +189,11 @@ export class VideoShareComponent { | |||
186 | ) | 189 | ) |
187 | } | 190 | } |
188 | 191 | ||
189 | async getPlaylistEmbedCode () { | 192 | async getPlaylistEmbedCode (options: { responsive: boolean }) { |
193 | const { responsive } = options | ||
190 | return this.hooks.wrapFun( | 194 | return this.hooks.wrapFun( |
191 | buildVideoOrPlaylistEmbed, | 195 | buildVideoOrPlaylistEmbed, |
192 | { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName }, | 196 | { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive }, |
193 | 'video-watch', | 197 | 'video-watch', |
194 | 'filter:share.video-playlist-embed-code.build.params', | 198 | 'filter:share.video-playlist-embed-code.build.params', |
195 | 'filter:share.video-playlist-embed-code.build.result' | 199 | 'filter:share.video-playlist-embed-code.build.result' |
@@ -204,15 +208,15 @@ export class VideoShareComponent { | |||
204 | if (this.playlist) { | 208 | if (this.playlist) { |
205 | this.playlistUrl = await this.getPlaylistUrl() | 209 | this.playlistUrl = await this.getPlaylistUrl() |
206 | this.playlistEmbedUrl = await this.getPlaylistEmbedUrl() | 210 | this.playlistEmbedUrl = await this.getPlaylistEmbedUrl() |
207 | this.playlistEmbedHTML = await this.getPlaylistEmbedCode() | 211 | this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive }) |
208 | this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.playlistEmbedHTML) | 212 | this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false })) |
209 | } | 213 | } |
210 | 214 | ||
211 | if (this.video) { | 215 | if (this.video) { |
212 | this.videoUrl = await this.getVideoUrl() | 216 | this.videoUrl = await this.getVideoUrl() |
213 | this.videoEmbedUrl = await this.getVideoEmbedUrl() | 217 | this.videoEmbedUrl = await this.getVideoEmbedUrl() |
214 | this.videoEmbedHTML = await this.getVideoIframeCode() | 218 | this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive }) |
215 | this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.videoEmbedHTML) | 219 | this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false })) |
216 | } | 220 | } |
217 | } | 221 | } |
218 | 222 | ||
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 4fea0cc1c..57fcdd899 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html | |||
@@ -1,8 +1,8 @@ | |||
1 | <a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail"> | 1 | <a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail" tabindex="-1"> |
2 | <ng-container *ngTemplateOutlet="aContent"></ng-container> | 2 | <ng-container *ngTemplateOutlet="aContent"></ng-container> |
3 | </a> | 3 | </a> |
4 | 4 | ||
5 | <a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail"> | 5 | <a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail" tabindex="-1"> |
6 | <ng-container *ngTemplateOutlet="aContent"></ng-container> | 6 | <ng-container *ngTemplateOutlet="aContent"></ng-container> |
7 | </a> | 7 | </a> |
8 | 8 | ||
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html index 1f622933d..3d8ce22de 100644 --- a/client/src/app/shared/shared-video-miniature/video-download.component.html +++ b/client/src/app/shared/shared-video-miniature/video-download.component.html | |||
@@ -56,7 +56,7 @@ | |||
56 | 56 | ||
57 | <div [ngbNavOutlet]="resolutionNav"></div> | 57 | <div [ngbNavOutlet]="resolutionNav"></div> |
58 | 58 | ||
59 | <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed"> | 59 | <div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true"> |
60 | <div ngbNav #navMetadata="ngbNav" class="nav-tabs nav-metadata"> | 60 | <div ngbNav #navMetadata="ngbNav" class="nav-tabs nav-metadata"> |
61 | <ng-container ngbNavItem> | 61 | <ng-container ngbNavItem> |
62 | <a ngbNavLink i18n>Format</a> | 62 | <a ngbNavLink i18n>Format</a> |
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html index 1e92e1952..48bb0d812 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html | |||
@@ -12,8 +12,8 @@ | |||
12 | 12 | ||
13 | <div class="first-row"> | 13 | <div class="first-row"> |
14 | <div class="active-filters"> | 14 | <div class="active-filters"> |
15 | <div | 15 | <button |
16 | class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed" role="button" | 16 | class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed" |
17 | [attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic" | 17 | [attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic" |
18 | [ngClass]="{ active: !areFiltersCollapsed }" | 18 | [ngClass]="{ active: !areFiltersCollapsed }" |
19 | > | 19 | > |
@@ -21,7 +21,7 @@ | |||
21 | <ng-container i18n *ngIf="!areFiltersCollapsed">Hide filters</ng-container> | 21 | <ng-container i18n *ngIf="!areFiltersCollapsed">Hide filters</ng-container> |
22 | 22 | ||
23 | <my-global-icon iconName="chevrons-up"></my-global-icon> | 23 | <my-global-icon iconName="chevrons-up"></my-global-icon> |
24 | </div> | 24 | </button> |
25 | 25 | ||
26 | <div | 26 | <div |
27 | *ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)" | 27 | *ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)" |
@@ -56,7 +56,7 @@ | |||
56 | 56 | ||
57 | </div> | 57 | </div> |
58 | 58 | ||
59 | <div class="collapse-transition" [ngbCollapse]="areFiltersCollapsed"> | 59 | <div [ngbCollapse]="areFiltersCollapsed" [animation]="true"> |
60 | <div class="filters"> | 60 | <div class="filters"> |
61 | <div class="form-group"> | 61 | <div class="form-group"> |
62 | <label class="with-description" for="languageOneOf" i18n>Languages:</label> | 62 | <label class="with-description" for="languageOneOf" i18n>Languages:</label> |
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss index a4e51982c..c65895a51 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss | |||
@@ -50,6 +50,10 @@ | |||
50 | padding: 4px 15px; | 50 | padding: 4px 15px; |
51 | margin-bottom: 15px; | 51 | margin-bottom: 15px; |
52 | cursor: pointer; | 52 | cursor: pointer; |
53 | |||
54 | &:focus-visible { | ||
55 | outline: pvar(--mainColor) auto 1px; | ||
56 | } | ||
53 | } | 57 | } |
54 | 58 | ||
55 | .filters-toggle { | 59 | .filters-toggle { |
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index 7d3c3dbfc..42d13f458 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html | |||
@@ -24,8 +24,8 @@ | |||
24 | 24 | ||
25 | <div class="w-100 d-flex flex-column"> | 25 | <div class="w-100 d-flex flex-column"> |
26 | <my-link | 26 | <my-link |
27 | [internalLink]="videoRouterLink" [href]="videoHref" [target]="videoTarget" | 27 | [internalLink]="videoRouterLink" [href]="videoHref" [target]="videoTarget" [inheritParentCSS]="true" |
28 | [title]="video.name"class="video-miniature-name" [ngClass]="{ 'blur-filter': isVideoBlur }" tabindex="-1" | 28 | [title]="video.name" class="video-miniature-name" className="ellipsis-multiline-2" [ngClass]="{ 'blur-filter': isVideoBlur }" |
29 | > | 29 | > |
30 | {{ video.name }} | 30 | {{ video.name }} |
31 | </my-link> | 31 | </my-link> |
@@ -40,7 +40,7 @@ | |||
40 | </span> | 40 | </span> |
41 | </span> | 41 | </span> |
42 | 42 | ||
43 | <a tabindex="-1" *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]"> | 43 | <a *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]"> |
44 | <ng-container *ngIf="displayOwnerAccount()">{{ authorAccount }}</ng-container> | 44 | <ng-container *ngIf="displayOwnerAccount()">{{ authorAccount }}</ng-container> |
45 | <ng-container *ngIf="displayOwnerVideoChannel()">{{ authorChannel }}</ng-container> | 45 | <ng-container *ngIf="displayOwnerVideoChannel()">{{ authorChannel }}</ng-container> |
46 | </a> | 46 | </a> |
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index a397efdca..d48b00518 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss | |||
@@ -167,7 +167,7 @@ my-actor-avatar { | |||
167 | } | 167 | } |
168 | 168 | ||
169 | .video-miniature-name { | 169 | .video-miniature-name { |
170 | @include ellipsis-multiline($video-miniature-row-name-font-size, 2); | 170 | font-size: $video-miniature-row-name-font-size; |
171 | } | 171 | } |
172 | 172 | ||
173 | .video-miniature-created-at-views, | 173 | .video-miniature-created-at-views, |
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html index 1dd68b09e..3b34c71ce 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html | |||
@@ -1,6 +1,6 @@ | |||
1 | <div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }"> | 1 | <div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }"> |
2 | <my-link | 2 | <my-link |
3 | [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" | 3 | [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" [inheritParentCSS]="true" |
4 | [title]="playlist.description" class="miniature-thumbnail" | 4 | [title]="playlist.description" class="miniature-thumbnail" |
5 | > | 5 | > |
6 | <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" /> | 6 | <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" /> |
@@ -16,8 +16,8 @@ | |||
16 | 16 | ||
17 | <div class="miniature-info"> | 17 | <div class="miniature-info"> |
18 | <my-link | 18 | <my-link |
19 | [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" | 19 | [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" [inheritParentCSS]="true" |
20 | [title]="playlist.description" class="miniature-name" tabindex="-1" | 20 | [title]="playlist.description" class="miniature-name" className="ellipsis-multiline-2" |
21 | > | 21 | > |
22 | {{ playlist.displayName }} | 22 | {{ playlist.displayName }} |
23 | </my-link> | 23 | </my-link> |
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss index d43afad28..2d8377e7b 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss | |||
@@ -95,7 +95,7 @@ | |||
95 | display: flex; | 95 | display: flex; |
96 | 96 | ||
97 | .miniature-name { | 97 | .miniature-name { |
98 | @include ellipsis-multiline($video-miniature-row-name-font-size, 2); | 98 | font-size: $video-miniature-row-name-font-size; |
99 | } | 99 | } |
100 | 100 | ||
101 | .miniature-thumbnail { | 101 | .miniature-thumbnail { |