client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html

   1 <div class="root">
   2
   3   <div class="playlist-info">
   4     <my-video-playlist-miniature
   5       *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
   6       [displayDescription]="true" [displayPrivacy]="true"
   7     ></my-video-playlist-miniature>
   8
   9     <div class="playlist-buttons">
  10       <button (click)="showShareModal()" class="action-button share-button">
  11         <my-global-icon iconName="share" aria-hidden="true"></my-global-icon>
  12         <span class="icon-text" i18n>Share</span>
  13       </button>
  14
  15       <my-action-dropdown
  16         *ngIf="isRegularPlaylist(playlist)"
  17         [entry]="playlist" [actions]="playlistActions" label="More"
  18       ></my-action-dropdown>
  19     </div>
  20
  21   </div>
  22
  23   <div class="playlist-elements">
  24     <div class="no-results" *ngIf="pagination.totalItems === 0">
  25       <div i18n>No videos in this playlist.</div>
  26
  27       <div i18n>
  28         Browse videos on PeerTube to add them in your playlist.
  29       </div>
  30
  31       <div i18n>
  32         See the <a target="_blank" href="https://docs.joinpeertube.org/use/library?id=playlist">documentation</a> for more information.
  33       </div>
  34     </div>
  35
  36     <div
  37       class="videos" myInfiniteScroller (nearOfBottom)="onNearOfBottom()"
  38       cdkDropList (cdkDropListDropped)="drop($event)" [dataObservable]="onDataSubject.asObservable()"
  39     >
  40       <div class="video" *ngFor="let playlistElement of playlistElements; trackBy: trackByFn" cdkDrag [cdkDragStartDelay]="getDragStartDelay()">
  41         <my-video-playlist-element-miniature
  42           [playlistElement]="playlistElement" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"
  43           [position]="playlistElement.position"
  44         >
  45         </my-video-playlist-element-miniature>
  46       </div>
  47     </div>
  48   </div>
  49 </div>
  50
  51 <my-video-share #videoShareModal [playlist]="playlist"></my-video-share>