</div>
<my-video-thumbnail
- [video]="video" [nsfw]="isVideoBlur(video)"
+ *ngIf="playlistElement.video"
+ [video]="playlistElement.video" [nsfw]="isVideoBlur(playlistElement.video)"
[routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
></my-video-thumbnail>
+ <div class="fake-thumbnail" *ngIf="!playlistElement.video"></div>
+
<div class="video-info">
- <a tabindex="-1" class="video-info-name"
- [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
- [attr.title]="video.name"
- >{{ video.name }}</a>
+ <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>
- <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(playlistElement) }}</span>
+ </ng-container>
- <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span>
+ <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>
- <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()"
- autoClose="outside">
+ <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>
+ <ng-container *ngIf="playlistElement.video">
+ <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, playlistElement)">
+ <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>
+ <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>
+ <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>
+ <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>
+ <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(video)">
- </div>
+ <input type="submit" i18n-value value="Save" (click)="updateTimestamps(playlistElement)">
+ </div>
+ </ng-container>
- <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 class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
+ <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
</span>
</div>
</div>