]>
Commit | Line | Data |
---|---|---|
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">Hide 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>"Recent 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" 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" value="false" /> | |
76 | <label for="nsfwFalse" i18n>Hide</label> | |
77 | </div> | |
78 | </div> | |
79 | ||
80 | <div class="form-group" *ngIf="!hideScope"> | |
81 | <label for="scope" i18n>Scope:</label> | |
82 | ||
83 | <div class="peertube-radio-container"> | |
84 | <input formControlName="scope" type="radio" name="scope" id="scopeLocal" 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" 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" 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" 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" 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> |