aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
blob: 1f178675fde9333e39e36825153ad2c73d11a2af (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
<div class="video" [ngClass]="{ playing: playing }">
  <a [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()">
    <div class="position">
      <my-global-icon *ngIf="playing" iconName="play"></my-global-icon>
      <ng-container *ngIf="!playing">{{ video.playlistElement.position }}</ng-container>
    </div>

    <my-video-thumbnail
      [video]="video" [nsfw]="isVideoBlur(video)"
      [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
    ></my-video-thumbnail>

    <div class="video-info">
      <a tabindex="-1" class="video-info-name"
         [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
         [attr.title]="video.name"
      >{{ video.name }}</a>

      <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
      <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ video.byAccount }}</span>

      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span>
    </div>
  </a>

  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()"
       autoClose="outside">
    <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></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>