client/src/app/search/search.component.html

   1 <div myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" class="search-result">
   2   <div class="results-header">
   3     <div class="first-line">
   4       <div class="results-counter" *ngIf="pagination.totalItems">
   5         <span i18n>{{ pagination.totalItems | myNumberFormatter }} results</span>
   6         <span *ngIf="currentSearch" i18n>
   7           for <span class="search-value">{{ currentSearch }}</span>
   8         </span>
   9       </div>
  10
  11       <div
  12         class="results-filter-button ml-auto" (click)="isSearchFilterCollapsed = !isSearchFilterCollapsed" role="button"
  13         [attr.aria-expanded]="!isSearchFilterCollapsed" aria-controls="collapseBasic"
  14       >
  15         <span class="icon icon-filter"></span>
  16         <ng-container i18n>
  17           Filters
  18           <span *ngIf="numberOfFilters() > 0" class="badge badge-secondary">{{ numberOfFilters() }}</span>
  19         </ng-container>
  20       </div>
  21     </div>
  22
  23     <div class="results-filter" [ngbCollapse]="isSearchFilterCollapsed">
  24       <my-search-filters [advancedSearch]="advancedSearch" (filtered)="onFiltered()"></my-search-filters>
  25     </div>
  26   </div>
  27
  28   <div i18n *ngIf="pagination.totalItems === 0 && results.length === 0" class="no-results">
  29     No results found
  30   </div>
  31
  32   <ng-container *ngFor="let result of results">
  33     <div *ngIf="isVideoChannel(result)" class="entry video-channel">
  34       <a [routerLink]="[ '/video-channels', result.nameWithHost ]">
  35         <img [src]="result.avatarUrl" alt="Avatar" />
  36       </a>
  37
  38       <div class="video-channel-info">
  39         <a [routerLink]="[ '/video-channels', result.nameWithHost ]" class="video-channel-names">
  40           <div class="video-channel-display-name">{{ result.displayName }}</div>
  41           <div class="video-channel-name">{{ result.nameWithHost }}</div>
  42         </a>
  43
  44         <div i18n class="video-channel-followers">{{ result.followersCount }} subscribers</div>
  45       </div>
  46
  47       <my-subscribe-button [videoChannel]="result"></my-subscribe-button>
  48     </div>
  49
  50     <div *ngIf="isVideo(result)" class="entry video">
  51       <my-video-thumbnail [video]="result"></my-video-thumbnail>
  52
  53       <div class="video-info">
  54         <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', result.uuid]" [attr.title]="result.name">{{ result.name }}</a>
  55         <span i18n class="video-info-date-views">{{ result.publishedAt | myFromNow }} - {{ result.views | myNumberFormatter }} views</span>
  56         <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', result.byAccount ]">{{ result.byAccount }}</a>
  57       </div>
  58     </div>
  59   </ng-container>
  60
  61 </div>