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