aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
blob: 67a8b1a9169a3b11285c7b0250ba20658eb812aa (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
<div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div>

<div
  class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
  cdkDropList (cdkDropListDropped)="drop($event)"
>
  <div class="video" *ngFor="let video of videos" cdkDrag (cdkDragMoved)="onDragMove($event)">
    <div class="position">{{ video.playlistElement.position }}</div>

    <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur(video)"></my-video-thumbnail>

    <div class="video-info">
      <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
      <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span>
    </div>

    <div class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()" autoClose="outside">
      <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more"></my-global-icon>

      <div ngbDropdownMenu>
        <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)">
          <my-global-icon iconName="edit"></my-global-icon> <ng-container i18n>Edit starts/stops at</ng-container>
        </div>

        <div class="timestamp-options" *ngIf="displayTimestampOptions">
          <div>
            <my-peertube-checkbox
              inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
              i18n-labelText labelText="Start at"
            ></my-peertube-checkbox>

            <my-timestamp-input
              [timestamp]="timestampOptions.startTimestamp"
              [maxTimestamp]="video.duration"
              [disabled]="!timestampOptions.startTimestampEnabled"
              [(ngModel)]="timestampOptions.startTimestamp"
            ></my-timestamp-input>
          </div>

          <div>
            <my-peertube-checkbox
              inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
              i18n-labelText labelText="Stop at"
            ></my-peertube-checkbox>

            <my-timestamp-input
              [timestamp]="timestampOptions.stopTimestamp"
              [maxTimestamp]="video.duration"
              [disabled]="!timestampOptions.stopTimestampEnabled"
              [(ngModel)]="timestampOptions.stopTimestamp"
            ></my-timestamp-input>
          </div>

          <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
        </div>

        <span class="dropdown-item" (click)="removeFromPlaylist(video)">
          <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{playlist?.displayName}}</ng-container>
        </span>
      </div>
    </div>
  </div>
</div>