<h1>
<my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
- <ng-container i18n>My watch history</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
+ <ng-container i18n>My watch history</ng-container>
+ <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
</h1>
<div class="top-buttons">
<div class="search-wrapper">
- <div class="input-group has-feedback has-clear">
- <input
- type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
- (keyup)="onSearch($event)"
- >
- <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
- <span class="sr-only" i18n>Clear filters</span>
- </div>
+ <my-advanced-input-filter [emitOnInit]="false" (search)="onSearch($event)"></my-advanced-input-filter>
</div>
<div class="history-switch">
<label i18n>Track watch history</label>
</div>
- <button class="delete-history" (click)="deleteHistory()" i18n>
+ <button class="delete-history" (click)="clearAllHistory()" i18n>
<my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
- Delete history
+ Clear all history
</button>
</div>
-
-<div class="no-history" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">You don't have any video in your watch history yet.</div>
-
-<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos">
- <div class="video" *ngFor="let video of videos">
- <my-video-miniature
- [video]="video" [displayAsRow]="true"
- (videoRemoved)="removeVideoFromArray(video)" (videoBlocked)="removeVideoFromArray(video)"
- ></my-video-miniature>
- </div>
-</div>
+<my-videos-selection
+ [pagination]="pagination"
+ [(videosModel)]="videos"
+ [miniatureDisplayOptions]="miniatureDisplayOptions"
+ [titlePage]="titlePage"
+ [getVideosObservableFunction]="getVideosObservableFunction"
+ [user]="user"
+ [noResultMessage]="getNoResultMessage()"
+ [enableSelection]="false"
+ [disabled]="disabled"
+ #videosSelection
+>
+ <ng-template ptTemplate="rowButtons" let-video>
+ <div class="action-button">
+ <my-delete-button i18n-label label="Delete from history" (click)="deleteHistoryElement(video)"></my-delete-button>
+ </div>
+ </ng-template>
+</my-videos-selection>