]>
Commit | Line | Data |
---|---|---|
1 | <ng-template #updateSettings let-fragment> | |
2 | <div class="label-description 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 | [bindValue]="null" | |
46 | > | |
47 | <ng-option i18n value="-publishedAt">Sort by <strong>"Recently Added"</strong></ng-option> | |
48 | <ng-option i18n value="-originallyPublishedAt">Sort by <strong>"Original Publication Date"</strong></ng-option> | |
49 | ||
50 | <ng-option i18n value="name">Sort by <strong>"Name"</strong></ng-option> | |
51 | <ng-option i18n *ngIf="isTrendingSortEnabled('most-viewed')" value="-trending">Sort by <strong>"Recent Views"</strong></ng-option> | |
52 | <ng-option i18n *ngIf="isTrendingSortEnabled('hot')" value="-hot">Sort by <strong>"Hot"</strong></ng-option> | |
53 | <ng-option i18n *ngIf="isTrendingSortEnabled('most-liked')" value="-likes">Sort by <strong>"Likes"</strong></ng-option> | |
54 | <ng-option i18n value="-views">Sort by <strong>"Global Views"</strong></ng-option> | |
55 | </ng-select> | |
56 | ||
57 | </div> | |
58 | ||
59 | <div class="collapse-transition" [ngbCollapse]="areFiltersCollapsed"> | |
60 | <div class="filters"> | |
61 | <div class="form-group"> | |
62 | <label class="with-description" for="languageOneOf" i18n>Languages:</label> | |
63 | <ng-template *ngTemplateOutlet="updateSettings; context: { $implicit: 'video-languages-subtitles' }"></ng-template> | |
64 | ||
65 | <my-select-languages [maxLanguages]="20" formControlName="languageOneOf"></my-select-languages> | |
66 | </div> | |
67 | ||
68 | <div class="form-group"> | |
69 | <label class="with-description" for="nsfw" i18n>Sensitive content:</label> | |
70 | <ng-template *ngTemplateOutlet="updateSettings; context: { $implicit: 'video-sensitive-content-policy' }"></ng-template> | |
71 | ||
72 | <div class="peertube-radio-container"> | |
73 | <input formControlName="nsfw" type="radio" name="nsfw" id="nsfwBoth" value="both" /> | |
74 | <label for="nsfwBoth">{{ filters.getNSFWDisplayLabel() }}</label> | |
75 | </div> | |
76 | ||
77 | <div class="peertube-radio-container"> | |
78 | <input formControlName="nsfw" type="radio" name="nsfw" id="nsfwFalse" value="false" /> | |
79 | <label for="nsfwFalse" i18n>Hide</label> | |
80 | </div> | |
81 | </div> | |
82 | ||
83 | <div class="form-group" *ngIf="!hideScope"> | |
84 | <label for="scope" i18n>Scope:</label> | |
85 | ||
86 | <div class="peertube-radio-container"> | |
87 | <input formControlName="scope" type="radio" name="scope" id="scopeLocal" value="local" /> | |
88 | <label for="scopeLocal" i18n>Local videos (this instance)</label> | |
89 | </div> | |
90 | ||
91 | <div class="peertube-radio-container"> | |
92 | <input formControlName="scope" type="radio" name="scope" id="scopeFederated" value="federated" /> | |
93 | <label for="scopeFederated" i18n>Federated videos (this instance + followed instances)</label> | |
94 | </div> | |
95 | </div> | |
96 | ||
97 | <div class="form-group"> | |
98 | <label for="type" i18n>Type:</label> | |
99 | ||
100 | <div class="peertube-radio-container"> | |
101 | <input formControlName="live" type="radio" name="live" id="liveBoth" value="both" /> | |
102 | <label for="liveBoth" i18n>VOD & Live videos</label> | |
103 | </div> | |
104 | ||
105 | <div class="peertube-radio-container"> | |
106 | <input formControlName="live" type="radio" name="live" id="liveTrue" value="true" /> | |
107 | <label for="liveTrue" i18n>Live videos</label> | |
108 | </div> | |
109 | ||
110 | <div class="peertube-radio-container"> | |
111 | <input formControlName="live" type="radio" name="live" id="liveFalse" value="false" /> | |
112 | <label for="liveFalse" i18n>VOD videos</label> | |
113 | </div> | |
114 | </div> | |
115 | ||
116 | <div class="form-group"> | |
117 | <label for="categoryOneOf" i18n>Categories:</label> | |
118 | ||
119 | <my-select-categories formControlName="categoryOneOf"></my-select-categories> | |
120 | </div> | |
121 | ||
122 | <div class="form-group" *ngIf="canSeeAllVideos()"> | |
123 | <label for="allVideos" i18n>Moderation:</label> | |
124 | ||
125 | <my-peertube-checkbox | |
126 | formControlName="allVideos" | |
127 | inputName="allVideos" | |
128 | i18n-labelText labelText="Display all videos (private, unlisted or not yet published)" | |
129 | ></my-peertube-checkbox> | |
130 | </div> | |
131 | </div> | |
132 | </div> | |
133 | ||
134 | </div> |