diff options
Diffstat (limited to 'client/src/app/shared/shared-video-miniature/video-filters-header.component.html')
-rw-r--r-- | client/src/app/shared/shared-video-miniature/video-filters-header.component.html | 131 |
1 files changed, 131 insertions, 0 deletions
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 new file mode 100644 index 000000000..44c21c089 --- /dev/null +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html | |||
@@ -0,0 +1,131 @@ | |||
1 | <ng-template #updateSettings let-fragment> | ||
2 | <div class="label-description text-muted" i18n> | ||
3 | Update | ||
4 | <a routerLink="/my-account/settings" [fragment]="fragment"> | ||
5 | <span (click)="onAccountSettingsClick($event)">your settings</span> | ||
6 | </a | ||
7 | ></div> | ||
8 | </ng-template> | ||
9 | |||
10 | |||
11 | <div class="root" [formGroup]="form"> | ||
12 | |||
13 | <div class="first-row"> | ||
14 | <div class="active-filters"> | ||
15 | <div | ||
16 | class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed" role="button" | ||
17 | [attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic" | ||
18 | [ngClass]="{ active: !areFiltersCollapsed }" | ||
19 | > | ||
20 | <ng-container i18n *ngIf="areFiltersCollapsed">More filters</ng-container> | ||
21 | <ng-container i18n *ngIf="!areFiltersCollapsed">Less filters</ng-container> | ||
22 | |||
23 | <my-global-icon iconName="chevrons-up"></my-global-icon> | ||
24 | </div> | ||
25 | |||
26 | <div | ||
27 | *ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)" | ||
28 | class="active-filter pastille" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)" | ||
29 | > | ||
30 | <span> | ||
31 | {{ activeFilter.label }} | ||
32 | |||
33 | <ng-container *ngIf="activeFilter.value">: {{ activeFilter.value }}</ng-container> | ||
34 | </span> | ||
35 | |||
36 | <my-global-icon *ngIf="activeFilter.canRemove" iconName="cross"></my-global-icon> | ||
37 | </div> | ||
38 | </div> | ||
39 | |||
40 | <ng-select | ||
41 | class="sort" | ||
42 | formControlName="sort" | ||
43 | [clearable]="false" | ||
44 | [searchable]="false" | ||
45 | > | ||
46 | <ng-option i18n value="-publishedAt">Sort by <strong>"Recently Added"</strong></ng-option> | ||
47 | |||
48 | <ng-option i18n *ngIf="isTrendingSortEnabled('most-viewed')" value="-trending">Sort by <strong>"Views"</strong></ng-option> | ||
49 | <ng-option i18n *ngIf="isTrendingSortEnabled('hot')" value="-hot">Sort by <strong>"Hot"</strong></ng-option> | ||
50 | <ng-option i18n *ngIf="isTrendingSortEnabled('best')" value="-best">Sort by <strong>"Best"</strong></ng-option> | ||
51 | <ng-option i18n *ngIf="isTrendingSortEnabled('most-liked')" value="-likes">Sort by <strong>"Likes"</strong></ng-option> | ||
52 | </ng-select> | ||
53 | |||
54 | </div> | ||
55 | |||
56 | <div class="collapse-transition" [ngbCollapse]="areFiltersCollapsed"> | ||
57 | <div class="filters"> | ||
58 | <div class="form-group"> | ||
59 | <label class="with-description" for="languageOneOf" i18n>Languages:</label> | ||
60 | <ng-template *ngTemplateOutlet="updateSettings; context: { $implicit: 'video-languages-subtitles' }"></ng-template> | ||
61 | |||
62 | <my-select-languages [maxLanguages]="20" formControlName="languageOneOf"></my-select-languages> | ||
63 | </div> | ||
64 | |||
65 | <div class="form-group"> | ||
66 | <label class="with-description" for="nsfw" i18n>Sensitive content:</label> | ||
67 | <ng-template *ngTemplateOutlet="updateSettings; context: { $implicit: 'video-sensitive-content-policy' }"></ng-template> | ||
68 | |||
69 | <div class="peertube-radio-container"> | ||
70 | <input formControlName="nsfw" type="radio" name="nsfw" id="nsfwBoth" i18n-value value="both" /> | ||
71 | <label for="nsfwBoth">{{ filters.getNSFWDisplayLabel() }}</label> | ||
72 | </div> | ||
73 | |||
74 | <div class="peertube-radio-container"> | ||
75 | <input formControlName="nsfw" type="radio" name="nsfw" id="nsfwFalse" i18n-value value="false" /> | ||
76 | <label for="nsfwFalse" i18n>Hide</label> | ||
77 | </div> | ||
78 | </div> | ||
79 | |||
80 | <div class="form-group"> | ||
81 | <label for="scope" i18n>Scope:</label> | ||
82 | |||
83 | <div class="peertube-radio-container"> | ||
84 | <input formControlName="scope" type="radio" name="scope" id="scopeLocal" i18n-value value="local" /> | ||
85 | <label for="scopeLocal" i18n>Local videos (this instance)</label> | ||
86 | </div> | ||
87 | |||
88 | <div class="peertube-radio-container"> | ||
89 | <input formControlName="scope" type="radio" name="scope" id="scopeFederated" i18n-value value="federated" /> | ||
90 | <label for="scopeFederated" i18n>Federated videos (this instance + followed instances)</label> | ||
91 | </div> | ||
92 | </div> | ||
93 | |||
94 | <div class="form-group"> | ||
95 | <label for="type" i18n>Type:</label> | ||
96 | |||
97 | <div class="peertube-radio-container"> | ||
98 | <input formControlName="live" type="radio" name="live" id="liveBoth" i18n-value value="both" /> | ||
99 | <label for="liveBoth" i18n>VOD & Live videos</label> | ||
100 | </div> | ||
101 | |||
102 | <div class="peertube-radio-container"> | ||
103 | <input formControlName="live" type="radio" name="live" id="liveTrue" i18n-value value="true" /> | ||
104 | <label for="liveTrue" i18n>Live videos</label> | ||
105 | </div> | ||
106 | |||
107 | <div class="peertube-radio-container"> | ||
108 | <input formControlName="live" type="radio" name="live" id="liveFalse" i18n-value value="false" /> | ||
109 | <label for="liveFalse" i18n>VOD videos</label> | ||
110 | </div> | ||
111 | </div> | ||
112 | |||
113 | <div class="form-group"> | ||
114 | <label for="categoryOneOf" i18n>Categories:</label> | ||
115 | |||
116 | <my-select-categories formControlName="categoryOneOf"></my-select-categories> | ||
117 | </div> | ||
118 | |||
119 | <div class="form-group" *ngIf="canSeeAllVideos()"> | ||
120 | <label for="allVideos" i18n>Moderation:</label> | ||
121 | |||
122 | <my-peertube-checkbox | ||
123 | formControlName="allVideos" | ||
124 | inputName="allVideos" | ||
125 | i18n-labelText labelText="Display all videos (private, unlisted or not yet published)" | ||
126 | ></my-peertube-checkbox> | ||
127 | </div> | ||
128 | </div> | ||
129 | </div> | ||
130 | |||
131 | </div> | ||