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       [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>