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