client/src/app/+videos/+video-watch/video-watch-playlist.component.html

   1 <div
   2   *ngIf="playlist && currentPlaylistPosition" class="playlist"
   3   myInfiniteScroller [autoInit]="true" [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()"
   4 >
   5   <div class="playlist-info">
   6     <div class="playlist-display-name">
   7       {{ playlist.displayName }}
   8
   9       <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span>
  10       <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span>
  11       <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span>
  12     </div>
  13
  14     <div class="playlist-by-index">
  15       <div class="playlist-by">{{ playlist.ownerBy }}</div>
  16       <div class="playlist-index">
  17         <span>{{ currentPlaylistPosition }}</span><span>{{ playlistPagination.totalItems }}</span>
  18       </div>
  19     </div>
  20
  21     <div class="playlist-controls">
  22       <my-global-icon
  23         iconName="videos"
  24         [class.active]="autoPlayNextVideoPlaylist"
  25         (click)="switchAutoPlayNextVideoPlaylist()"
  26         [ngbTooltip]="autoPlayNextVideoPlaylistSwitchText"
  27         placement="bottom auto"
  28         container="body"
  29       ></my-global-icon>
  30
  31       <my-global-icon
  32         iconName="repeat"
  33         [class.active]="loopPlaylist"
  34         (click)="switchLoopPlaylist()"
  35         [ngbTooltip]="loopPlaylistSwitchText"
  36         placement="bottom auto"
  37         container="body"
  38       ></my-global-icon>
  39     </div>
  40   </div>
  41
  42   <div *ngFor="let playlistElement of playlistElements" [ngClass]="'element-' + playlistElement.position">
  43     <my-video-playlist-element-miniature
  44       [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
  45       [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
  46       [touchScreenEditButton]="true"
  47     ></my-video-playlist-element-miniature>
  48   </div>
  49 </div>