93 lines
4.0 KiB
HTML
93 lines
4.0 KiB
HTML
<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">{{ position }}</ng-container>
|
|
</div>
|
|
|
|
<my-video-thumbnail
|
|
*ngIf="playlistElement.video"
|
|
[video]="playlistElement.video" [nsfw]="isVideoBlur(playlistElement.video)"
|
|
[videoRouterLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
|
|
></my-video-thumbnail>
|
|
|
|
<div class="fake-thumbnail" *ngIf="!playlistElement.video"></div>
|
|
|
|
<div class="video-info">
|
|
<ng-container *ngIf="playlistElement.video">
|
|
<a tabindex="-1" class="video-info-name"
|
|
[routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
|
|
[attr.title]="playlistElement.video.name"
|
|
>{{ playlistElement.video.name }}</a>
|
|
|
|
<a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', playlistElement.video.byAccount ]">
|
|
{{ playlistElement.video.byAccount }}
|
|
</a>
|
|
<span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ playlistElement.video.byAccount }}</span>
|
|
|
|
<span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(playlistElement) }}</span>
|
|
</ng-container>
|
|
|
|
<span *ngIf="!playlistElement.video" class="video-info-name">
|
|
<ng-container i18n *ngIf="isUnavailable(playlistElement)">Unavailable</ng-container>
|
|
<ng-container i18n *ngIf="isPrivate(playlistElement)">Private</ng-container>
|
|
<ng-container i18n *ngIf="isDeleted(playlistElement)">Deleted</ng-container>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
<my-edit-button *ngIf="owned && touchScreenEditButton" [routerLink]="[ '/my-account', 'video-playlists', playlist.uuid ]"></my-edit-button>
|
|
|
|
<div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom auto"
|
|
(openChange)="onDropdownOpenChange()" autoClose="outside"
|
|
>
|
|
<my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
|
|
|
|
<div ngbDropdownMenu>
|
|
<ng-container *ngIf="playlistElement.video">
|
|
<div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, playlistElement)">
|
|
<my-global-icon iconName="edit" aria-hidden="true"></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]="playlistElement.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]="playlistElement.video.duration"
|
|
[disabled]="!timestampOptions.stopTimestampEnabled"
|
|
[(ngModel)]="timestampOptions.stopTimestamp"
|
|
></my-timestamp-input>
|
|
</div>
|
|
|
|
<input type="submit" i18n-value value="Save" (click)="updateTimestamps(playlistElement)">
|
|
</div>
|
|
</ng-container>
|
|
|
|
<span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
|
|
<my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
|
|
<ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|