<h1>
<my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
- <ng-container i18n>My history</ng-container>
+ <ng-container i18n>My watch history</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
</h1>
<div class="top-buttons">
- <div class="history-switch">
+ <div>
+ <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>
+ </div>
+
+ <div class="history-switch ml-auto mr-3">
<my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
- <label i18n>Video history</label>
+ <label i18n>Track watch history</label>
</div>
<button class="delete-history" (click)="deleteHistory()" i18n>
</div>
-<div class="no-history" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">You don't have any video history yet.</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">
}
.top-buttons {
- margin-bottom: 20px;
+ margin-bottom: 30px;
display: flex;
align-items: center;
flex-wrap: wrap;
+ #history-search {
+ @include peertube-input-text(250px);
+ }
+
.history-switch {
display: flex;
- flex-grow: 1;
label {
margin: 0 0 0 5px;
+ color: var(--greyForegroundColor);
+ font-size: 15px;
+ font-weight: $font-semibold;
}
}
import { immutableAssign } from '@app/helpers'
import { UserHistoryService } from '@app/shared/shared-main'
import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { Subject } from 'rxjs'
+import { debounceTime, tap, distinctUntilChanged } from 'rxjs/operators'
@Component({
templateUrl: './my-history.component.html',
totalItems: null
}
videosHistoryEnabled: boolean
+ search: string
+
+ protected searchStream: Subject<string>
constructor (
protected router: Router,
) {
super()
- this.titlePage = $localize`My videos history`
+ this.titlePage = $localize`My watch history`
}
ngOnInit () {
this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled
})
+ this.searchStream = new Subject()
+
+ this.searchStream
+ .pipe(
+ debounceTime(400),
+ distinctUntilChanged()
+ )
+ .subscribe(search => {
+ this.search = search
+ this.reloadVideos()
+ })
+ }
+
+ onSearch (event: Event) {
+ const target = event.target as HTMLInputElement
+ this.searchStream.next(target.value)
+ }
+
+ resetSearch () {
+ const searchInput = document.getElementById('history-search') as HTMLInputElement
+ searchInput.value = ''
+ this.searchStream.next('')
}
ngOnDestroy () {
getVideosObservable (page: number) {
const newPagination = immutableAssign(this.pagination, { currentPage: page })
- return this.userHistoryService.getUserVideosHistory(newPagination)
+ return this.userHistoryService.getUserVideosHistory(newPagination, this.search)
+ .pipe(
+ tap(res => this.pagination.totalItems = res.total)
+ )
}
generateSyndicationList () {
</div>
</div>
-<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div>
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>
<div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
<div *ngFor="let videoChannel of videoChannels" class="video-channel">
private videoService: VideoService
) {}
- getUserVideosHistory (historyPagination: ComponentPaginationLight) {
+ getUserVideosHistory (historyPagination: ComponentPaginationLight, search?: string) {
const pagination = this.restService.componentPaginationToRestPagination(historyPagination)
let params = new HttpParams()
params = this.restService.addRestGetParams(params, pagination)
+ params = params.append('search', search)
return this.authHttp
.get<ResultList<Video>>(UserHistoryService.BASE_USER_VIDEOS_HISTORY_URL, { params })
authenticate,
paginationValidator,
setDefaultPagination,
+ userHistoryListValidator,
userHistoryRemoveValidator
} from '../../../middlewares'
import { getFormattedObjects } from '../../../helpers/utils'
authenticate,
paginationValidator,
setDefaultPagination,
+ userHistoryListValidator,
asyncMiddleware(listMyVideosHistory)
)
async function listMyVideosHistory (req: express.Request, res: express.Response) {
const user = res.locals.oauth.token.User
- const resultList = await UserVideoHistoryModel.listForApi(user, req.query.start, req.query.count)
+ const resultList = await UserVideoHistoryModel.listForApi(user, req.query.start, req.query.count, req.query.search)
return res.json(getFormattedObjects(resultList.data, resultList.total))
}
import * as express from 'express'
-import { body } from 'express-validator'
+import { body, query } from 'express-validator'
import { logger } from '../../helpers/logger'
import { areValidationErrors } from './utils'
-import { isDateValid } from '../../helpers/custom-validators/misc'
+import { exists, isDateValid } from '../../helpers/custom-validators/misc'
+
+const userHistoryListValidator = [
+ query('search')
+ .optional()
+ .custom(exists).withMessage('Should have a valid search'),
+
+ (req: express.Request, res: express.Response, next: express.NextFunction) => {
+ logger.debug('Checking userHistoryListValidator parameters', { parameters: req.query })
+
+ if (areValidationErrors(req, res)) return
+
+ return next()
+ }
+]
const userHistoryRemoveValidator = [
body('beforeDate')
// ---------------------------------------------------------------------------
export {
+ userHistoryListValidator,
userHistoryRemoveValidator
}
})
User: UserModel
- static listForApi (user: MUserAccountId, start: number, count: number) {
+ static listForApi (user: MUserAccountId, start: number, count: number, search?: string) {
return VideoModel.listForApi({
start,
count,
+ search,
sort: '-"userVideoHistory"."updatedAt"',
nsfw: null, // All
includeLocalVideos: true,
user?: MUserAccountId
historyOfUser?: MUserId
countVideos?: boolean
+ search?: string
}) {
if ((options.filter === 'all-local' || options.filter === 'all') && !options.user.hasRight(UserRight.SEE_ALL_VIDEOS)) {
throw new Error('Try to filter all-local but no user has not the see all videos right')
includeLocalVideos: options.includeLocalVideos,
user: options.user,
historyOfUser: options.historyOfUser,
- trendingDays
+ trendingDays,
+ search: options.search
}
return VideoModel.getAvailableForApi(queryOptions, options.countVideos)
expect(res.body.data).to.have.lengthOf(0)
})
+ it('Should be able to search through videos in my history', async function () {
+ const res = await listMyVideosHistory(server.url, server.accessToken, '2')
+
+ expect(res.body.total).to.equal(1)
+
+ const videos: Video[] = res.body.data
+ expect(videos[0].name).to.equal('video 2')
+ })
+
it('Should clear my history', async function () {
await removeMyVideosHistory(server.url, server.accessToken, video3WatchedDate.toISOString())
})
return makePutBodyRequest({ url, path, token, fields, statusCodeExpected })
}
-function listMyVideosHistory (url: string, token: string) {
+function listMyVideosHistory (url: string, token: string, search?: string) {
const path = '/api/v1/users/me/history/videos'
return makeGetRequest({
url,
path,
token,
+ query: {
+ search
+ },
statusCodeExpected: HttpStatusCode.OK_200
})
}
parameters:
- $ref: '#/components/parameters/start'
- $ref: '#/components/parameters/count'
+ - $ref: '#/components/parameters/search'
responses:
'200':
description: successful operation