1 <div class=
"video" [ngClass]=
"{ playing: playing }">
2 <a [routerLink]=
"buildRouterLink()" [queryParams]=
"buildRouterQuery()">
4 <my-global-icon *
ngIf=
"playing" iconName=
"play"></my-global-icon>
5 <ng-container *
ngIf=
"!playing">{{ position }}
</ng-container>
9 *
ngIf=
"playlistElement.video"
10 [video]=
"playlistElement.video" [nsfw]=
"isVideoBlur(playlistElement.video)"
11 [videoRouterLink]=
"buildRouterLink()" [queryParams]=
"buildRouterQuery()"
12 ></my-video-thumbnail>
14 <div class=
"fake-thumbnail" *
ngIf=
"!playlistElement.video"></div>
16 <div class=
"video-info">
17 <ng-container *
ngIf=
"playlistElement.video">
18 <div class=
"video-info-header">
19 <a tabindex=
"-1" class=
"video-info-name"
20 [routerLink]=
"buildRouterLink()" [queryParams]=
"buildRouterQuery()"
21 [attr.title]=
"playlistElement.video.name"
22 >{{ playlistElement.video.name }}
</a>
24 <span *
ngIf=
"isVideoPrivate()" class=
"pt-badge badge-yellow">Private
</span>
27 <span class=
"video-miniature-created-at-views">
28 <my-date-toggle [date]=
"playlistElement.video.publishedAt"></my-date-toggle>
30 <span class=
"views" [title]=
"playlistElement.video.getExactNumberOfViews()">
31 •
<my-video-views-counter [video]=
"playlistElement.video"></my-video-views-counter>
35 <a *
ngIf=
"accountLink" tabindex=
"-1" class=
"video-info-account" [routerLink]=
"[ '/a', playlistElement.video.byAccount ]">
36 {{ playlistElement.video.byAccount }}
38 <span *
ngIf=
"!accountLink" tabindex=
"-1" class=
"video-info-account">{{ playlistElement.video.byAccount }}
</span>
40 <span tabindex=
"-1" class=
"video-info-timestamp">{{ formatTimestamp(playlistElement) }}
</span>
43 <span *
ngIf=
"!playlistElement.video" class=
"video-info-name">
44 <ng-container i18n *
ngIf=
"isUnavailable(playlistElement)">Unavailable
</ng-container>
45 <ng-container i18n *
ngIf=
"isPrivate(playlistElement)">Private
</ng-container>
46 <ng-container i18n *
ngIf=
"isDeleted(playlistElement)">Deleted
</ng-container>
51 <my-edit-button *
ngIf=
"owned && touchScreenEditButton" [routerLink]=
"[ '/my-library', 'video-playlists', playlist.uuid ]"></my-edit-button>
53 <div *
ngIf=
"owned" class=
"more dropdown-root" ngbDropdown #
moreDropdown=
"ngbDropdown" placement=
"left auto"
54 (openChange)=
"onDropdownOpenChange()" autoClose=
"outside" container=
"body"
56 <my-global-icon iconName=
"more-vertical" ngbDropdownToggle
role=
"button" class=
"icon-more" (click)=
"$event.preventDefault()"></my-global-icon>
59 <ng-container *
ngIf=
"playlistElement.video">
60 <div class=
"dropdown-item" (click)=
"toggleDisplayTimestampsOptions($event, playlistElement)">
61 <my-global-icon iconName=
"edit" aria-hidden=
"true"></my-global-icon>
62 <ng-container i18n
>Edit starts/stops at
</ng-container>
65 <div class=
"timestamp-options" *
ngIf=
"displayTimestampOptions">
68 inputName=
"startAt" [(ngModel)]=
"timestampOptions.startTimestampEnabled"
69 i18n-labelText
labelText=
"Start at"
70 ></my-peertube-checkbox>
73 [timestamp]=
"timestampOptions.startTimestamp"
74 [maxTimestamp]=
"playlistElement.video.duration"
75 [disabled]=
"!timestampOptions.startTimestampEnabled"
76 [(ngModel)]=
"timestampOptions.startTimestamp"
77 ></my-timestamp-input>
82 inputName=
"stopAt" [(ngModel)]=
"timestampOptions.stopTimestampEnabled"
83 i18n-labelText
labelText=
"Stop at"
84 ></my-peertube-checkbox>
87 [timestamp]=
"timestampOptions.stopTimestamp"
88 [maxTimestamp]=
"playlistElement.video.duration"
89 [disabled]=
"!timestampOptions.stopTimestampEnabled"
90 [(ngModel)]=
"timestampOptions.stopTimestamp"
91 ></my-timestamp-input>
94 <input type=
"submit" i18n-value
value=
"Save" (click)=
"updateTimestamps(playlistElement)">
98 <span class=
"dropdown-item" (click)=
"removeFromPlaylist(playlistElement)">
99 <my-global-icon iconName=
"delete" aria-hidden=
"true"></my-global-icon>
100 <ng-container i18n
>Delete from {{ playlist?.displayName }}
</ng-container>