From 4635f59d7c3fea4b97029f10886c62fdf38b2084 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 27 Dec 2017 16:11:53 +0100 Subject: Add video comment components --- .../shared/forms/form-validators/video-comment.ts | 10 +++ client/src/app/shared/misc/button.component.scss | 2 +- .../app/shared/rest/component-pagination.model.ts | 5 ++ client/src/app/shared/rest/rest.service.ts | 7 ++ client/src/app/shared/video/abstract-video-list.ts | 4 +- .../shared/video/video-miniature.component.scss | 1 - .../src/app/shared/video/video-pagination.model.ts | 5 -- client/src/app/shared/video/video.service.ts | 25 +++--- .../comment/video-comment-add.component.html | 15 ++++ .../comment/video-comment-add.component.scss | 20 +++++ .../comment/video-comment-add.component.ts | 84 +++++++++++++++++++ .../comment/video-comment.component.html | 29 +++++++ .../comment/video-comment.component.scss | 38 +++++++++ .../comment/video-comment.component.ts | 67 ++++++++++++++++ .../+video-watch/comment/video-comment.model.ts | 38 +++++++++ .../+video-watch/comment/video-comment.service.ts | 93 ++++++++++++++++++++++ .../comment/video-comments.component.html | 31 ++++++++ .../comment/video-comments.component.scss | 14 ++++ .../comment/video-comments.component.ts | 79 ++++++++++++++++++ .../modal/video-download.component.html | 42 ++++++++++ .../modal/video-download.component.scss | 17 ++++ .../+video-watch/modal/video-download.component.ts | 44 ++++++++++ .../+video-watch/modal/video-report.component.html | 36 +++++++++ .../+video-watch/modal/video-report.component.scss | 6 ++ .../+video-watch/modal/video-report.component.ts | 68 ++++++++++++++++ .../+video-watch/modal/video-share.component.html | 47 +++++++++++ .../+video-watch/modal/video-share.component.scss | 3 + .../+video-watch/modal/video-share.component.ts | 48 +++++++++++ .../+video-watch/video-download.component.html | 42 ---------- .../+video-watch/video-download.component.scss | 17 ---- .../+video-watch/video-download.component.ts | 44 ---------- .../+video-watch/video-report.component.html | 36 --------- .../+video-watch/video-report.component.scss | 6 -- .../videos/+video-watch/video-report.component.ts | 68 ---------------- .../videos/+video-watch/video-share.component.html | 47 ----------- .../videos/+video-watch/video-share.component.scss | 3 - .../videos/+video-watch/video-share.component.ts | 48 ----------- .../videos/+video-watch/video-watch.component.html | 7 ++ .../videos/+video-watch/video-watch.component.scss | 4 + .../videos/+video-watch/video-watch.component.ts | 10 ++- .../app/videos/+video-watch/video-watch.module.ts | 18 +++-- client/src/assets/images/global/edit-black.svg | 15 ++++ client/src/assets/images/global/edit-grey.svg | 15 ++++ client/src/assets/images/global/edit.svg | 15 ---- client/src/sass/application.scss | 15 +--- 45 files changed, 917 insertions(+), 371 deletions(-) create mode 100644 client/src/app/shared/forms/form-validators/video-comment.ts create mode 100644 client/src/app/shared/rest/component-pagination.model.ts delete mode 100644 client/src/app/shared/video/video-pagination.model.ts create mode 100644 client/src/app/videos/+video-watch/comment/video-comment-add.component.html create mode 100644 client/src/app/videos/+video-watch/comment/video-comment-add.component.scss create mode 100644 client/src/app/videos/+video-watch/comment/video-comment-add.component.ts create mode 100644 client/src/app/videos/+video-watch/comment/video-comment.component.html create mode 100644 client/src/app/videos/+video-watch/comment/video-comment.component.scss create mode 100644 client/src/app/videos/+video-watch/comment/video-comment.component.ts create mode 100644 client/src/app/videos/+video-watch/comment/video-comment.model.ts create mode 100644 client/src/app/videos/+video-watch/comment/video-comment.service.ts create mode 100644 client/src/app/videos/+video-watch/comment/video-comments.component.html create mode 100644 client/src/app/videos/+video-watch/comment/video-comments.component.scss create mode 100644 client/src/app/videos/+video-watch/comment/video-comments.component.ts create mode 100644 client/src/app/videos/+video-watch/modal/video-download.component.html create mode 100644 client/src/app/videos/+video-watch/modal/video-download.component.scss create mode 100644 client/src/app/videos/+video-watch/modal/video-download.component.ts create mode 100644 client/src/app/videos/+video-watch/modal/video-report.component.html create mode 100644 client/src/app/videos/+video-watch/modal/video-report.component.scss create mode 100644 client/src/app/videos/+video-watch/modal/video-report.component.ts create mode 100644 client/src/app/videos/+video-watch/modal/video-share.component.html create mode 100644 client/src/app/videos/+video-watch/modal/video-share.component.scss create mode 100644 client/src/app/videos/+video-watch/modal/video-share.component.ts delete mode 100644 client/src/app/videos/+video-watch/video-download.component.html delete mode 100644 client/src/app/videos/+video-watch/video-download.component.scss delete mode 100644 client/src/app/videos/+video-watch/video-download.component.ts delete mode 100644 client/src/app/videos/+video-watch/video-report.component.html delete mode 100644 client/src/app/videos/+video-watch/video-report.component.scss delete mode 100644 client/src/app/videos/+video-watch/video-report.component.ts delete mode 100644 client/src/app/videos/+video-watch/video-share.component.html delete mode 100644 client/src/app/videos/+video-watch/video-share.component.scss delete mode 100644 client/src/app/videos/+video-watch/video-share.component.ts create mode 100644 client/src/assets/images/global/edit-black.svg create mode 100644 client/src/assets/images/global/edit-grey.svg delete mode 100644 client/src/assets/images/global/edit.svg (limited to 'client/src') diff --git a/client/src/app/shared/forms/form-validators/video-comment.ts b/client/src/app/shared/forms/form-validators/video-comment.ts new file mode 100644 index 000000000..42a97e300 --- /dev/null +++ b/client/src/app/shared/forms/form-validators/video-comment.ts @@ -0,0 +1,10 @@ +import { Validators } from '@angular/forms' + +export const VIDEO_COMMENT_TEXT = { + VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ], + MESSAGES: { + 'required': 'Comment is required.', + 'minlength': 'Comment must be at least 2 characters long.', + 'maxlength': 'Comment cannot be more than 3000 characters long.' + } +} diff --git a/client/src/app/shared/misc/button.component.scss b/client/src/app/shared/misc/button.component.scss index c380c7ae1..145a3474a 100644 --- a/client/src/app/shared/misc/button.component.scss +++ b/client/src/app/shared/misc/button.component.scss @@ -20,7 +20,7 @@ top: -2px; &.icon-edit { - background-image: url('../../../assets/images/global/edit.svg'); + background-image: url('../../../assets/images/global/edit-grey.svg'); } &.icon-delete-grey { diff --git a/client/src/app/shared/rest/component-pagination.model.ts b/client/src/app/shared/rest/component-pagination.model.ts new file mode 100644 index 000000000..0b8ecc318 --- /dev/null +++ b/client/src/app/shared/rest/component-pagination.model.ts @@ -0,0 +1,5 @@ +export interface ComponentPagination { + currentPage: number + itemsPerPage: number + totalItems?: number +} diff --git a/client/src/app/shared/rest/rest.service.ts b/client/src/app/shared/rest/rest.service.ts index a1c301050..5d5410de9 100644 --- a/client/src/app/shared/rest/rest.service.ts +++ b/client/src/app/shared/rest/rest.service.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core' import { HttpParams } from '@angular/common/http' import { SortMeta } from 'primeng/components/common/sortmeta' +import { ComponentPagination } from './component-pagination.model' import { RestPagination } from './rest-pagination' @@ -31,4 +32,10 @@ export class RestService { return newParams } + componentPaginationToRestPagination (componentPagination: ComponentPagination): RestPagination { + const start: number = (componentPagination.currentPage - 1) * componentPagination.itemsPerPage + const count: number = componentPagination.itemsPerPage + + return { start, count } + } } diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index 2b6870a78..bfe46bcdd 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -3,12 +3,12 @@ import { ActivatedRoute, Router } from '@angular/router' import { NotificationsService } from 'angular2-notifications' import { Observable } from 'rxjs/Observable' import { AuthService } from '../../core/auth' +import { ComponentPagination } from '../rest/component-pagination.model' import { SortField } from './sort-field.type' -import { VideoPagination } from './video-pagination.model' import { Video } from './video.model' export abstract class AbstractVideoList implements OnInit { - pagination: VideoPagination = { + pagination: ComponentPagination = { currentPage: 1, itemsPerPage: 25, totalItems: null diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index 49ba1e51c..f0888ad9f 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -18,7 +18,6 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-weight: bold; transition: color 0.2s; font-size: 16px; font-weight: $font-semibold; diff --git a/client/src/app/shared/video/video-pagination.model.ts b/client/src/app/shared/video/video-pagination.model.ts deleted file mode 100644 index e9db61596..000000000 --- a/client/src/app/shared/video/video-pagination.model.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface VideoPagination { - currentPage: number - itemsPerPage: number - totalItems?: number -} diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index 91dd3977a..fc7505a51 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts @@ -10,13 +10,13 @@ import { UserVideoRate } from '../../../../../shared/models/videos/user-video-ra import { VideoRateType } from '../../../../../shared/models/videos/video-rate.type' import { VideoUpdate } from '../../../../../shared/models/videos/video-update.model' import { environment } from '../../../environments/environment' +import { ComponentPagination } from '../rest/component-pagination.model' import { RestExtractor } from '../rest/rest-extractor.service' import { RestService } from '../rest/rest.service' import { UserService } from '../users/user.service' import { SortField } from './sort-field.type' import { VideoDetails } from './video-details.model' import { VideoEdit } from './video-edit.model' -import { VideoPagination } from './video-pagination.model' import { Video } from './video.model' @Injectable() @@ -71,8 +71,8 @@ export class VideoService { .catch(this.restExtractor.handleError) } - getMyVideos (videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> { - const pagination = this.videoPaginationToRestPagination(videoPagination) + getMyVideos (videoPagination: ComponentPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> { + const pagination = this.restService.componentPaginationToRestPagination(videoPagination) let params = new HttpParams() params = this.restService.addRestGetParams(params, pagination, sort) @@ -82,8 +82,8 @@ export class VideoService { .catch((res) => this.restExtractor.handleError(res)) } - getVideos (videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> { - const pagination = this.videoPaginationToRestPagination(videoPagination) + getVideos (videoPagination: ComponentPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> { + const pagination = this.restService.componentPaginationToRestPagination(videoPagination) let params = new HttpParams() params = this.restService.addRestGetParams(params, pagination, sort) @@ -94,10 +94,14 @@ export class VideoService { .catch((res) => this.restExtractor.handleError(res)) } - searchVideos (search: string, videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> { + searchVideos ( + search: string, + videoPagination: ComponentPagination, + sort: SortField + ): Observable<{ videos: Video[], totalVideos: number}> { const url = VideoService.BASE_VIDEO_URL + 'search' - const pagination = this.videoPaginationToRestPagination(videoPagination) + const pagination = this.restService.componentPaginationToRestPagination(videoPagination) let params = new HttpParams() params = this.restService.addRestGetParams(params, pagination, sort) @@ -139,13 +143,6 @@ export class VideoService { .catch(res => this.restExtractor.handleError(res)) } - private videoPaginationToRestPagination (videoPagination: VideoPagination) { - const start: number = (videoPagination.currentPage - 1) * videoPagination.itemsPerPage - const count: number = videoPagination.itemsPerPage - - return { start, count } - } - private setVideoRate (id: number, rateType: VideoRateType) { const url = VideoService.BASE_VIDEO_URL + id + '/rate' const body: UserVideoRateUpdate = { diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html new file mode 100644 index 000000000..792053614 --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html @@ -0,0 +1,15 @@ +
+
+ +
+ {{ formErrors.text }} +
+
+ +
+ +
+
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss new file mode 100644 index 000000000..9661062e8 --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss @@ -0,0 +1,20 @@ +@import '_variables'; +@import '_mixins'; + +.form-group { + margin-bottom: 10px; +} + +textarea { + @include peertube-textarea(100%, 150px); +} + +.submit-comment { + display: flex; + justify-content: end; + + button { + @include peertube-button; + @include orange-button + } +} diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts new file mode 100644 index 000000000..5ad83fc47 --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts @@ -0,0 +1,84 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { FormBuilder, FormGroup } from '@angular/forms' +import { NotificationsService } from 'angular2-notifications' +import { Observable } from 'rxjs/Observable' +import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model' +import { FormReactive } from '../../../shared' +import { VIDEO_COMMENT_TEXT } from '../../../shared/forms/form-validators/video-comment' +import { Video } from '../../../shared/video/video.model' +import { VideoComment } from './video-comment.model' +import { VideoCommentService } from './video-comment.service' + +@Component({ + selector: 'my-video-comment-add', + templateUrl: './video-comment-add.component.html', + styleUrls: ['./video-comment-add.component.scss'] +}) +export class VideoCommentAddComponent extends FormReactive implements OnInit { + @Input() video: Video + @Input() parentComment: VideoComment + + @Output() commentCreated = new EventEmitter() + + form: FormGroup + formErrors = { + 'text': '' + } + validationMessages = { + 'text': VIDEO_COMMENT_TEXT.MESSAGES + } + + constructor ( + private formBuilder: FormBuilder, + private notificationsService: NotificationsService, + private videoCommentService: VideoCommentService + ) { + super() + } + + buildForm () { + this.form = this.formBuilder.group({ + text: [ '', VIDEO_COMMENT_TEXT.VALIDATORS ] + }) + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)) + } + + ngOnInit () { + this.buildForm() + } + + formValidated () { + const commentCreate: VideoCommentCreate = this.form.value + let obs: Observable + + if (this.parentComment) { + obs = this.addCommentReply(commentCreate) + } else { + obs = this.addCommentThread(commentCreate) + } + + obs.subscribe( + comment => { + this.commentCreated.emit(comment) + this.form.reset() + }, + + err => this.notificationsService.error('Error', err.text) + ) +} + + isAddButtonDisplayed () { + return this.form.value['text'] + } + + private addCommentReply (commentCreate: VideoCommentCreate) { + return this.videoCommentService + .addCommentReply(this.video.id, this.parentComment.id, commentCreate) + } + + private addCommentThread (commentCreate: VideoCommentCreate) { + return this.videoCommentService + .addCommentThread(this.video.id, commentCreate) + } +} diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html new file mode 100644 index 000000000..9608a1033 --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html @@ -0,0 +1,29 @@ +
+ +
{{ comment.text }}
+ +
+
Reply
+
+ + + +
+
+ +
+
+
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss new file mode 100644 index 000000000..7e1a32f48 --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -0,0 +1,38 @@ +@import '_variables'; +@import '_mixins'; + +.comment { + font-size: 15px; + margin-top: 30px; + + .comment-account-date { + display: flex; + margin-bottom: 4px; + + .comment-account { + font-weight: $font-bold; + } + + .comment-date { + color: #585858; + margin-left: 10px; + } + } + + .comment-actions { + margin: 10px 0; + + .comment-action-reply { + color: #585858; + cursor: pointer; + } + } +} + +.children { + margin-left: 20px; + + .comment { + margin-top: 15px; + } +} diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts new file mode 100644 index 000000000..b8e2acd52 --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts @@ -0,0 +1,67 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core' +import { NotificationsService } from 'angular2-notifications' +import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' +import { AuthService } from '../../../core/auth' +import { User } from '../../../shared/users' +import { Video } from '../../../shared/video/video.model' +import { VideoComment } from './video-comment.model' +import { VideoCommentService } from './video-comment.service' + +@Component({ + selector: 'my-video-comment', + templateUrl: './video-comment.component.html', + styleUrls: ['./video-comment.component.scss'] +}) +export class VideoCommentComponent { + @Input() video: Video + @Input() comment: VideoComment + @Input() commentTree: VideoCommentThreadTree + @Input() inReplyToCommentId: number + + @Output() wantedToReply = new EventEmitter() + @Output() resetReply = new EventEmitter() + + constructor (private authService: AuthService, + private notificationsService: NotificationsService, + private videoCommentService: VideoCommentService) { + } + + onCommentReplyCreated (comment: VideoComment) { + this.videoCommentService.addCommentReply(this.video.id, this.comment.id, comment) + .subscribe( + createdComment => { + if (!this.commentTree) { + this.commentTree = { + comment: this.comment, + children: [] + } + } + + this.commentTree.children.push({ + comment: createdComment, + children: [] + }) + this.resetReply.emit() + }, + + err => this.notificationsService.error('Error', err.message) + ) + } + + onWantToReply () { + this.wantedToReply.emit(this.comment) + } + + isUserLoggedIn () { + return this.authService.isLoggedIn() + } + + // Event from child comment + onWantedToReply (comment: VideoComment) { + this.wantedToReply.emit(comment) + } + + onResetReply () { + this.resetReply.emit() + } +} diff --git a/client/src/app/videos/+video-watch/comment/video-comment.model.ts b/client/src/app/videos/+video-watch/comment/video-comment.model.ts new file mode 100644 index 000000000..df7d5244c --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comment.model.ts @@ -0,0 +1,38 @@ +import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model' + +export class VideoComment implements VideoCommentServerModel { + id: number + url: string + text: string + threadId: number + inReplyToCommentId: number + videoId: number + createdAt: Date | string + updatedAt: Date | string + account: { + name: string + host: string + } + totalReplies: number + + by: string + + private static createByString (account: string, serverHost: string) { + return account + '@' + serverHost + } + + constructor (hash: VideoCommentServerModel) { + this.id = hash.id + this.url = hash.url + this.text = hash.text + this.threadId = hash.threadId + this.inReplyToCommentId = hash.inReplyToCommentId + this.videoId = hash.videoId + this.createdAt = new Date(hash.createdAt.toString()) + this.updatedAt = new Date(hash.updatedAt.toString()) + this.account = hash.account + this.totalReplies = hash.totalReplies + + this.by = VideoComment.createByString(this.account.name, this.account.host) + } +} diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts new file mode 100644 index 000000000..2fe6cc3e9 --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts @@ -0,0 +1,93 @@ +import { HttpClient, HttpParams } from '@angular/common/http' +import { Injectable } from '@angular/core' +import 'rxjs/add/operator/catch' +import 'rxjs/add/operator/map' +import { Observable } from 'rxjs/Observable' +import { ResultList } from '../../../../../../shared/models' +import { + VideoComment as VideoCommentServerModel, VideoCommentCreate, + VideoCommentThreadTree +} from '../../../../../../shared/models/videos/video-comment.model' +import { environment } from '../../../../environments/environment' +import { RestExtractor, RestService } from '../../../shared/rest' +import { ComponentPagination } from '../../../shared/rest/component-pagination.model' +import { SortField } from '../../../shared/video/sort-field.type' +import { VideoComment } from './video-comment.model' + +@Injectable() +export class VideoCommentService { + private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/' + + constructor ( + private authHttp: HttpClient, + private restExtractor: RestExtractor, + private restService: RestService + ) {} + + addCommentThread (videoId: number | string, comment: VideoCommentCreate) { + const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads' + + return this.authHttp.post(url, comment) + .map(data => this.extractVideoComment(data['comment'])) + .catch(this.restExtractor.handleError) + } + + addCommentReply (videoId: number | string, inReplyToCommentId: number, comment: VideoCommentCreate) { + const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId + + return this.authHttp.post(url, comment) + .map(data => this.extractVideoComment(data['comment'])) + .catch(this.restExtractor.handleError) + } + + getVideoCommentThreads ( + videoId: number | string, + componentPagination: ComponentPagination, + sort: SortField + ): Observable<{ comments: VideoComment[], totalComments: number}> { + const pagination = this.restService.componentPaginationToRestPagination(componentPagination) + + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination, sort) + + const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads' + return this.authHttp + .get(url, { params }) + .map(this.extractVideoComments) + .catch((res) => this.restExtractor.handleError(res)) + } + + getVideoThreadComments (videoId: number | string, threadId: number): Observable { + const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}` + + return this.authHttp + .get(url) + .map(tree => this.extractVideoCommentTree(tree as VideoCommentThreadTree)) + .catch((res) => this.restExtractor.handleError(res)) + } + + private extractVideoComment (videoComment: VideoCommentServerModel) { + return new VideoComment(videoComment) + } + + private extractVideoComments (result: ResultList) { + const videoCommentsJson = result.data + const totalComments = result.total + const comments = [] + + for (const videoCommentJson of videoCommentsJson) { + comments.push(new VideoComment(videoCommentJson)) + } + + return { comments, totalComments } + } + + private extractVideoCommentTree (tree: VideoCommentThreadTree) { + if (!tree) return tree + + tree.comment = new VideoComment(tree.comment) + tree.children.forEach(c => this.extractVideoCommentTree(c)) + + return tree + } +} diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html new file mode 100644 index 000000000..9d7581269 --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html @@ -0,0 +1,31 @@ +
+
+ Comments +
+ + + +
+
+ + +
+ View all {{ comment.totalReplies }} replies + + + +
+
+
+
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss new file mode 100644 index 000000000..2f6e4663b --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss @@ -0,0 +1,14 @@ +@import '_variables'; +@import '_mixins'; + +.view-replies { + font-weight: $font-semibold; + font-size: 15px; + cursor: pointer; +} + +.glyphicon, .comment-thread-loading { + margin-left: 5px; + display: inline-block; + font-size: 13px; +} diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts new file mode 100644 index 000000000..32e0f2fbd --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts @@ -0,0 +1,79 @@ +import { Component, Input, OnInit } from '@angular/core' +import { NotificationsService } from 'angular2-notifications' +import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' +import { AuthService } from '../../../core/auth' +import { ComponentPagination } from '../../../shared/rest/component-pagination.model' +import { User } from '../../../shared/users' +import { SortField } from '../../../shared/video/sort-field.type' +import { Video } from '../../../shared/video/video.model' +import { VideoComment } from './video-comment.model' +import { VideoCommentService } from './video-comment.service' + +@Component({ + selector: 'my-video-comments', + templateUrl: './video-comments.component.html', + styleUrls: ['./video-comments.component.scss'] +}) +export class VideoCommentsComponent implements OnInit { + @Input() video: Video + @Input() user: User + + comments: VideoComment[] = [] + sort: SortField = '-createdAt' + componentPagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 25, + totalItems: null + } + inReplyToCommentId: number + threadComments: { [ id: number ]: VideoCommentThreadTree } = {} + threadLoading: { [ id: number ]: boolean } = {} + + constructor ( + private authService: AuthService, + private notificationsService: NotificationsService, + private videoCommentService: VideoCommentService + ) {} + + ngOnInit () { + this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort) + .subscribe( + res => { + this.comments = res.comments + this.componentPagination.totalItems = res.totalComments + }, + + err => this.notificationsService.error('Error', err.message) + ) + } + + viewReplies (comment: VideoComment) { + this.threadLoading[comment.id] = true + + this.videoCommentService.getVideoThreadComments(this.video.id, comment.id) + .subscribe( + res => { + this.threadComments[comment.id] = res + this.threadLoading[comment.id] = false + }, + + err => this.notificationsService.error('Error', err.message) + ) + } + + onCommentThreadCreated (comment: VideoComment) { + this.comments.unshift(comment) + } + + onWantedToReply (comment: VideoComment) { + this.inReplyToCommentId = comment.id + } + + onResetReply () { + this.inReplyToCommentId = undefined + } + + isUserLoggedIn () { + return this.authService.isLoggedIn() + } +} diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html new file mode 100644 index 000000000..f8f17a471 --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-download.component.html @@ -0,0 +1,42 @@ +
+
+
+ +
+ +

Download video

+
+ +
+
+ +
+ +
+
+ + +
+ +
+ + +
+
+ +
+ + Cancel + + + +
+
+
+
+
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.scss b/client/src/app/videos/+video-watch/modal/video-download.component.scss new file mode 100644 index 000000000..6325f67a3 --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-download.component.scss @@ -0,0 +1,17 @@ +@import 'variables'; +@import 'mixins'; + +.peertube-select-container { + @include peertube-select-container(130px); +} + +.download-type { + margin-top: 30px; + + .peertube-radio-container { + @include peertube-radio-container; + + display: inline-block; + margin-right: 30px; + } +} diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.ts b/client/src/app/videos/+video-watch/modal/video-download.component.ts new file mode 100644 index 000000000..1a73ea6df --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-download.component.ts @@ -0,0 +1,44 @@ +import { Component, Input, OnInit, ViewChild } from '@angular/core' +import { ModalDirective } from 'ngx-bootstrap/modal' +import { VideoDetails } from '../../../shared/video/video-details.model' + +@Component({ + selector: 'my-video-download', + templateUrl: './video-download.component.html', + styleUrls: [ './video-download.component.scss' ] +}) +export class VideoDownloadComponent implements OnInit { + @Input() video: VideoDetails = null + + @ViewChild('modal') modal: ModalDirective + + downloadType: 'direct' | 'torrent' = 'torrent' + resolution = -1 + + constructor () { + // empty + } + + ngOnInit () { + this.resolution = this.video.files[0].resolution + } + + show () { + this.modal.show() + } + + hide () { + this.modal.hide() + } + + download () { + const file = this.video.files.find(f => f.resolution === this.resolution) + if (!file) { + console.error('Could not find file with resolution %d.', this.resolution) + return + } + + const link = this.downloadType === 'direct' ? file.fileUrl : file.torrentUrl + window.open(link) + } +} diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html new file mode 100644 index 000000000..a9a7beb48 --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-report.component.html @@ -0,0 +1,36 @@ +
+
+
+ +
+ +

Report video

+
+ +
+ +
+
+ +
+ {{ formErrors.reason }} +
+
+ +
+ + Cancel + + + +
+
+ +
+
+
+
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.scss b/client/src/app/videos/+video-watch/modal/video-report.component.scss new file mode 100644 index 000000000..84562f15c --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-report.component.scss @@ -0,0 +1,6 @@ +@import 'variables'; +@import 'mixins'; + +textarea { + @include peertube-textarea(100%, 60px); +} diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.ts b/client/src/app/videos/+video-watch/modal/video-report.component.ts new file mode 100644 index 000000000..050e827e7 --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-report.component.ts @@ -0,0 +1,68 @@ +import { Component, Input, OnInit, ViewChild } from '@angular/core' +import { FormBuilder, FormGroup } from '@angular/forms' +import { NotificationsService } from 'angular2-notifications' +import { ModalDirective } from 'ngx-bootstrap/modal' +import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../../shared/index' +import { VideoDetails } from '../../../shared/video/video-details.model' + +@Component({ + selector: 'my-video-report', + templateUrl: './video-report.component.html', + styleUrls: [ './video-report.component.scss' ] +}) +export class VideoReportComponent extends FormReactive implements OnInit { + @Input() video: VideoDetails = null + + @ViewChild('modal') modal: ModalDirective + + error: string = null + form: FormGroup + formErrors = { + reason: '' + } + validationMessages = { + reason: VIDEO_ABUSE_REASON.MESSAGES + } + + constructor ( + private formBuilder: FormBuilder, + private videoAbuseService: VideoAbuseService, + private notificationsService: NotificationsService + ) { + super() + } + + ngOnInit () { + this.buildForm() + } + + buildForm () { + this.form = this.formBuilder.group({ + reason: [ '', VIDEO_ABUSE_REASON.VALIDATORS ] + }) + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)) + } + + show () { + this.modal.show() + } + + hide () { + this.modal.hide() + } + + report () { + const reason = this.form.value['reason'] + + this.videoAbuseService.reportVideo(this.video.id, reason) + .subscribe( + () => { + this.notificationsService.success('Success', 'Video reported.') + this.hide() + }, + + err => this.notificationsService.error('Error', err.message) + ) + } +} diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html new file mode 100644 index 000000000..85cf10a6c --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-share.component.html @@ -0,0 +1,47 @@ +
+
+
+ +
+ +

Share

+
+ +
+
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+ The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites). +
+ +
+ + Cancel + +
+
+
+
+
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss new file mode 100644 index 000000000..184e09027 --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss @@ -0,0 +1,3 @@ +.action-button-cancel { + margin-right: 0 !important; +} diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts new file mode 100644 index 000000000..678cccfb5 --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts @@ -0,0 +1,48 @@ +import { Component, Input, ViewChild } from '@angular/core' + +import { NotificationsService } from 'angular2-notifications' + +import { ModalDirective } from 'ngx-bootstrap/modal' +import { VideoDetails } from '../../../shared/video/video-details.model' + +@Component({ + selector: 'my-video-share', + templateUrl: './video-share.component.html', + styleUrls: [ './video-share.component.scss' ] +}) +export class VideoShareComponent { + @Input() video: VideoDetails = null + + @ViewChild('modal') modal: ModalDirective + + constructor (private notificationsService: NotificationsService) { + // empty + } + + show () { + this.modal.show() + } + + hide () { + this.modal.hide() + } + + getVideoIframeCode () { + return '' + } + + getVideoUrl () { + return window.location.href + } + + notSecure () { + return window.location.protocol === 'http:' + } + + activateCopiedMessage () { + this.notificationsService.success('Success', 'Copied') + } +} diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/video-download.component.html deleted file mode 100644 index f8f17a471..000000000 --- a/client/src/app/videos/+video-watch/video-download.component.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
-
- -
- -

Download video

-
- -
-
- -
- -
-
- - -
- -
- - -
-
- -
- - Cancel - - - -
-
-
-
-
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss deleted file mode 100644 index 5fca82135..000000000 --- a/client/src/app/videos/+video-watch/video-download.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -.peertube-select-container { - @include peertube-select-container(130px); -} - -.download-type { - margin-top: 30px; - - .peertube-radio-container { - @include peertube-radio-container; - - display: inline-block; - margin-right: 30px; - } -} diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts deleted file mode 100644 index 44ece986c..000000000 --- a/client/src/app/videos/+video-watch/video-download.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Component, Input, OnInit, ViewChild } from '@angular/core' -import { ModalDirective } from 'ngx-bootstrap/modal' -import { VideoDetails } from '../../shared/video/video-details.model' - -@Component({ - selector: 'my-video-download', - templateUrl: './video-download.component.html', - styleUrls: [ './video-download.component.scss' ] -}) -export class VideoDownloadComponent implements OnInit { - @Input() video: VideoDetails = null - - @ViewChild('modal') modal: ModalDirective - - downloadType: 'direct' | 'torrent' = 'torrent' - resolution = -1 - - constructor () { - // empty - } - - ngOnInit () { - this.resolution = this.video.files[0].resolution - } - - show () { - this.modal.show() - } - - hide () { - this.modal.hide() - } - - download () { - const file = this.video.files.find(f => f.resolution === this.resolution) - if (!file) { - console.error('Could not find file with resolution %d.', this.resolution) - return - } - - const link = this.downloadType === 'direct' ? file.fileUrl : file.torrentUrl - window.open(link) - } -} diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html deleted file mode 100644 index a9a7beb48..000000000 --- a/client/src/app/videos/+video-watch/video-report.component.html +++ /dev/null @@ -1,36 +0,0 @@ -
-
-
- -
- -

Report video

-
- -
- -
-
- -
- {{ formErrors.reason }} -
-
- -
- - Cancel - - - -
-
- -
-
-
-
diff --git a/client/src/app/videos/+video-watch/video-report.component.scss b/client/src/app/videos/+video-watch/video-report.component.scss deleted file mode 100644 index 09d273b35..000000000 --- a/client/src/app/videos/+video-watch/video-report.component.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -textarea { - @include peertube-textarea(100%, 60px); -} diff --git a/client/src/app/videos/+video-watch/video-report.component.ts b/client/src/app/videos/+video-watch/video-report.component.ts deleted file mode 100644 index ece14754a..000000000 --- a/client/src/app/videos/+video-watch/video-report.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Component, Input, OnInit, ViewChild } from '@angular/core' -import { FormBuilder, FormGroup } from '@angular/forms' -import { NotificationsService } from 'angular2-notifications' -import { ModalDirective } from 'ngx-bootstrap/modal' -import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../shared' -import { VideoDetails } from '../../shared/video/video-details.model' - -@Component({ - selector: 'my-video-report', - templateUrl: './video-report.component.html', - styleUrls: [ './video-report.component.scss' ] -}) -export class VideoReportComponent extends FormReactive implements OnInit { - @Input() video: VideoDetails = null - - @ViewChild('modal') modal: ModalDirective - - error: string = null - form: FormGroup - formErrors = { - reason: '' - } - validationMessages = { - reason: VIDEO_ABUSE_REASON.MESSAGES - } - - constructor ( - private formBuilder: FormBuilder, - private videoAbuseService: VideoAbuseService, - private notificationsService: NotificationsService - ) { - super() - } - - ngOnInit () { - this.buildForm() - } - - buildForm () { - this.form = this.formBuilder.group({ - reason: [ '', VIDEO_ABUSE_REASON.VALIDATORS ] - }) - - this.form.valueChanges.subscribe(data => this.onValueChanged(data)) - } - - show () { - this.modal.show() - } - - hide () { - this.modal.hide() - } - - report () { - const reason = this.form.value['reason'] - - this.videoAbuseService.reportVideo(this.video.id, reason) - .subscribe( - () => { - this.notificationsService.success('Success', 'Video reported.') - this.hide() - }, - - err => this.notificationsService.error('Error', err.message) - ) - } -} diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html deleted file mode 100644 index 85cf10a6c..000000000 --- a/client/src/app/videos/+video-watch/video-share.component.html +++ /dev/null @@ -1,47 +0,0 @@ -
-
-
- -
- -

Share

-
- -
-
- -
- -
- -
-
-
- -
- -
- -
- -
-
-
- -
- The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites). -
- -
- - Cancel - -
-
-
-
-
diff --git a/client/src/app/videos/+video-watch/video-share.component.scss b/client/src/app/videos/+video-watch/video-share.component.scss deleted file mode 100644 index 184e09027..000000000 --- a/client/src/app/videos/+video-watch/video-share.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.action-button-cancel { - margin-right: 0 !important; -} diff --git a/client/src/app/videos/+video-watch/video-share.component.ts b/client/src/app/videos/+video-watch/video-share.component.ts deleted file mode 100644 index 0664c28be..000000000 --- a/client/src/app/videos/+video-watch/video-share.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Component, Input, ViewChild } from '@angular/core' - -import { NotificationsService } from 'angular2-notifications' - -import { ModalDirective } from 'ngx-bootstrap/modal' -import { VideoDetails } from '../../shared/video/video-details.model' - -@Component({ - selector: 'my-video-share', - templateUrl: './video-share.component.html', - styleUrls: [ './video-share.component.scss' ] -}) -export class VideoShareComponent { - @Input() video: VideoDetails = null - - @ViewChild('modal') modal: ModalDirective - - constructor (private notificationsService: NotificationsService) { - // empty - } - - show () { - this.modal.show() - } - - hide () { - this.modal.hide() - } - - getVideoIframeCode () { - return '' - } - - getVideoUrl () { - return window.location.href - } - - notSecure () { - return window.location.protocol === 'http:' - } - - activateCopiedMessage () { - this.notificationsService.success('Success', 'Copied') - } -} diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 860edecd2..48d1bb474 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -54,6 +54,12 @@ +
  • + + Update + +
    • +
  • Delete @@ -149,6 +155,7 @@ +
    diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index b37fa3d61..c101aa04e 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -126,6 +126,10 @@ background-image: url('../../../assets/images/video/download-black.svg'); } + &.icon-edit { + background-image: url('../../../assets/images/global/edit-black.svg'); + } + &.icon-alert { background-image: url('../../../assets/images/video/alert.svg'); } diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index c388b138b..4afd6160c 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -14,9 +14,9 @@ import { VideoDetails } from '../../shared/video/video-details.model' import { Video } from '../../shared/video/video.model' import { VideoService } from '../../shared/video/video.service' import { MarkdownService } from '../shared' -import { VideoDownloadComponent } from './video-download.component' -import { VideoReportComponent } from './video-report.component' -import { VideoShareComponent } from './video-share.component' +import { VideoDownloadComponent } from './modal/video-download.component' +import { VideoReportComponent } from './modal/video-report.component' +import { VideoShareComponent } from './modal/video-share.component' @Component({ selector: 'my-video-watch', @@ -208,6 +208,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.authService.isLoggedIn() } + isVideoUpdatable () { + return this.video.isUpdatableBy(this.authService.getUser()) + } + isVideoBlacklistable () { return this.video.isBlackistableBy(this.user) } diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts index e77883472..085a9ec5a 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts @@ -3,9 +3,13 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip' import { ClipboardModule } from 'ngx-clipboard' import { SharedModule } from '../../shared' import { MarkdownService } from '../shared' -import { VideoDownloadComponent } from './video-download.component' -import { VideoReportComponent } from './video-report.component' -import { VideoShareComponent } from './video-share.component' +import { VideoCommentAddComponent } from './comment/video-comment-add.component' +import { VideoCommentComponent } from './comment/video-comment.component' +import { VideoCommentService } from './comment/video-comment.service' +import { VideoCommentsComponent } from './comment/video-comments.component' +import { VideoDownloadComponent } from './modal/video-download.component' +import { VideoReportComponent } from './modal/video-report.component' +import { VideoShareComponent } from './modal/video-share.component' import { VideoWatchRoutingModule } from './video-watch-routing.module' @@ -24,7 +28,10 @@ import { VideoWatchComponent } from './video-watch.component' VideoDownloadComponent, VideoShareComponent, - VideoReportComponent + VideoReportComponent, + VideoCommentsComponent, + VideoCommentAddComponent, + VideoCommentComponent ], exports: [ @@ -32,7 +39,8 @@ import { VideoWatchComponent } from './video-watch.component' ], providers: [ - MarkdownService + MarkdownService, + VideoCommentService ] }) export class VideoWatchModule { } diff --git a/client/src/assets/images/global/edit-black.svg b/client/src/assets/images/global/edit-black.svg new file mode 100644 index 000000000..0176b0f37 --- /dev/null +++ b/client/src/assets/images/global/edit-black.svg @@ -0,0 +1,15 @@ + + + + edit + Created with Sketch. + + + + + + + + + + diff --git a/client/src/assets/images/global/edit-grey.svg b/client/src/assets/images/global/edit-grey.svg new file mode 100644 index 000000000..23ece68f1 --- /dev/null +++ b/client/src/assets/images/global/edit-grey.svg @@ -0,0 +1,15 @@ + + + + edit + Created with Sketch. + + + + + + + + + + diff --git a/client/src/assets/images/global/edit.svg b/client/src/assets/images/global/edit.svg deleted file mode 100644 index 23ece68f1..000000000 --- a/client/src/assets/images/global/edit.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - edit - Created with Sketch. - - - - - - - - - - diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 0539ec486..253bb1b3c 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -118,10 +118,7 @@ label { // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d .glyphicon-refresh-animate { - -animation: spin .7s infinite linear; - -ms-animation: spin .7s infinite linear; - -webkit-animation: spinw .7s infinite linear; - -moz-animation: spinm .7s infinite linear; + animation: spin .7s infinite linear; } @keyframes spin { @@ -129,16 +126,6 @@ label { to { transform: scale(1) rotate(360deg);} } -@-webkit-keyframes spinw { - from { -webkit-transform: rotate(0deg);} - to { -webkit-transform: rotate(360deg);} -} - -@-moz-keyframes spinm { - from { -moz-transform: rotate(0deg);} - to { -moz-transform: rotate(360deg);} -} - // ngprime data table customizations p-datatable { font-size: 15px !important; -- cgit v1.2.3