client/src/app/shared/shared-video-miniature/video-filters-header.component.html

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