aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
blob: 3d39c6fdc13597c404e8b57c16538ac2dd16a6db (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<ng-template #updateSettings let-fragment>
  <div class="label-description muted" i18n>
    Update
    <a routerLink="/my-account/settings" [fragment]="fragment">
      <button class="button-unstyle" (click)="onAccountSettingsClick($event)">your settings</button>
    </a
  ></div>
</ng-template>


<div class="root" [formGroup]="form">

  <div class="first-row">
    <div class="active-filters">
      <button
        class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed"
        [attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic"
        [ngClass]="{ active: !areFiltersCollapsed }"
      >
        <ng-container i18n *ngIf="areFiltersCollapsed">More filters</ng-container>
        <ng-container i18n *ngIf="!areFiltersCollapsed">Hide filters</ng-container>

        <my-global-icon iconName="chevrons-up"></my-global-icon>
      </button>

      <button
        *ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
        class="active-filter pastille button-unstyle" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
      >
        <span>
          {{ activeFilter.label }}

          <ng-container *ngIf="activeFilter.value">: {{ activeFilter.value }}</ng-container>
        </span>

        <my-global-icon *ngIf="activeFilter.canRemove" iconName="cross"></my-global-icon>
      </button>
    </div>

    <ng-select
      class="sort"
      formControlName="sort"
      [clearable]="false"
      [searchable]="false"
      [bindValue]="null"
    >
      <ng-option i18n value="-publishedAt">Sort by <strong>"Recently Added"</strong></ng-option>
      <ng-option i18n value="-originallyPublishedAt">Sort by <strong>"Original Publication Date"</strong></ng-option>

      <ng-option i18n value="name">Sort by <strong>"Name"</strong></ng-option>
      <ng-option i18n *ngIf="isTrendingSortEnabled('most-viewed')" value="-trending">Sort by <strong>"Recent Views"</strong></ng-option>
      <ng-option i18n *ngIf="isTrendingSortEnabled('hot')" value="-hot">Sort by <strong>"Hot"</strong></ng-option>
      <ng-option i18n *ngIf="isTrendingSortEnabled('most-liked')" value="-likes">Sort by <strong>"Likes"</strong></ng-option>
      <ng-option i18n value="-views">Sort by <strong>"Global Views"</strong></ng-option>
    </ng-select>

  </div>

  <div [ngbCollapse]="areFiltersCollapsed" [animation]="true">
    <div class="filters">
      <div class="form-group">
        <label class="with-description" for="languageOneOf" i18n>Languages:</label>
        <ng-template *ngTemplateOutlet="updateSettings; context: { $implicit: 'video-languages-subtitles' }"></ng-template>

        <my-select-languages [maxLanguages]="20" formControlName="languageOneOf"></my-select-languages>
      </div>

      <div class="form-group">
        <label class="with-description" for="nsfw" i18n>Sensitive content:</label>
        <ng-template *ngTemplateOutlet="updateSettings; context: { $implicit: 'video-sensitive-content-policy' }"></ng-template>

        <div class="peertube-radio-container">
          <input formControlName="nsfw" type="radio" name="nsfw" id="nsfwBoth" value="both" />
          <label for="nsfwBoth">{{ filters.getNSFWDisplayLabel() }}</label>
        </div>

        <div class="peertube-radio-container">
          <input formControlName="nsfw" type="radio" name="nsfw" id="nsfwFalse" value="false" />
          <label for="nsfwFalse" i18n>Hide</label>
        </div>
      </div>

      <div class="form-group" *ngIf="!hideScope">
        <label for="scope" i18n>Scope:</label>

        <div class="peertube-radio-container">
          <input formControlName="scope" type="radio" name="scope" id="scopeLocal" value="local" />
          <label for="scopeLocal" i18n>Local videos (this instance)</label>
        </div>

        <div class="peertube-radio-container">
          <input formControlName="scope" type="radio" name="scope" id="scopeFederated" value="federated" />
          <label for="scopeFederated" i18n>Federated videos (this instance + followed instances)</label>
        </div>
      </div>

      <div class="form-group">
        <label for="type" i18n>Type:</label>

        <div class="peertube-radio-container">
          <input formControlName="live" type="radio" name="live" id="liveBoth" value="both" />
          <label for="liveBoth" i18n>VOD & Live videos</label>
        </div>

        <div class="peertube-radio-container">
          <input formControlName="live" type="radio" name="live" id="liveTrue" value="true" />
          <label for="liveTrue" i18n>Live videos</label>
        </div>

        <div class="peertube-radio-container">
          <input formControlName="live" type="radio" name="live" id="liveFalse" value="false" />
          <label for="liveFalse" i18n>VOD videos</label>
        </div>
      </div>

      <div class="form-group">
        <label for="categoryOneOf" i18n>Categories:</label>

        <my-select-categories formControlName="categoryOneOf"></my-select-categories>
      </div>

      <div class="form-group" *ngIf="canSeeAllVideos()">
        <label for="allVideos" i18n>Moderation:</label>

        <my-peertube-checkbox
          formControlName="allVideos"
          inputName="allVideos"
          i18n-labelText labelText="Display all videos (private, unlisted or not yet published)"
        ></my-peertube-checkbox>
      </div>
    </div>
  </div>

</div>