diff options
Diffstat (limited to 'client/src/app/videos/+video-watch')
13 files changed, 37 insertions, 25 deletions
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 index 1be96ad9e..a8c432653 100644 --- 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 | |||
@@ -25,7 +25,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { | |||
25 | @Input() parentComments: VideoComment[] | 25 | @Input() parentComments: VideoComment[] |
26 | @Input() focusOnInit = false | 26 | @Input() focusOnInit = false |
27 | 27 | ||
28 | @Output() commentCreated = new EventEmitter<VideoCommentCreate>() | 28 | @Output() commentCreated = new EventEmitter<VideoComment>() |
29 | @Output() cancel = new EventEmitter() | 29 | @Output() cancel = new EventEmitter() |
30 | 30 | ||
31 | @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal | 31 | @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal |
@@ -96,7 +96,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { | |||
96 | this.addingComment = true | 96 | this.addingComment = true |
97 | 97 | ||
98 | const commentCreate: VideoCommentCreate = this.form.value | 98 | const commentCreate: VideoCommentCreate = this.form.value |
99 | let obs: Observable<any> | 99 | let obs: Observable<VideoComment> |
100 | 100 | ||
101 | if (this.parentComment) { | 101 | if (this.parentComment) { |
102 | obs = this.addCommentReply(commentCreate) | 102 | obs = this.addCommentReply(commentCreate) |
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts b/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts new file mode 100644 index 000000000..1566d7369 --- /dev/null +++ b/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts | |||
@@ -0,0 +1,7 @@ | |||
1 | import { VideoCommentThreadTree as VideoCommentThreadTreeServerModel } from '../../../../../../shared/models/videos/video-comment.model' | ||
2 | import { VideoComment } from '@app/videos/+video-watch/comment/video-comment.model' | ||
3 | |||
4 | export class VideoCommentThreadTree implements VideoCommentThreadTreeServerModel { | ||
5 | comment: VideoComment | ||
6 | children: VideoCommentThreadTree[] | ||
7 | } | ||
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 index 61f9335d1..f7eca45fd 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts | |||
@@ -1,6 +1,5 @@ | |||
1 | import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core' | 1 | import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core' |
2 | import { User, UserRight } from '../../../../../../shared/models/users' | 2 | import { User, UserRight } from '../../../../../../shared/models/users' |
3 | import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' | ||
4 | import { AuthService } from '@app/core/auth' | 3 | import { AuthService } from '@app/core/auth' |
5 | import { AccountService } from '@app/shared/account/account.service' | 4 | import { AccountService } from '@app/shared/account/account.service' |
6 | import { Video } from '@app/shared/video/video.model' | 5 | import { Video } from '@app/shared/video/video.model' |
@@ -10,6 +9,7 @@ import { Account } from '@app/shared/account/account.model' | |||
10 | import { Notifier } from '@app/core' | 9 | import { Notifier } from '@app/core' |
11 | import { UserService } from '@app/shared' | 10 | import { UserService } from '@app/shared' |
12 | import { Actor } from '@app/shared/actor/actor.model' | 11 | import { Actor } from '@app/shared/actor/actor.model' |
12 | import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model' | ||
13 | 13 | ||
14 | @Component({ | 14 | @Component({ |
15 | selector: 'my-video-comment', | 15 | selector: 'my-video-comment', |
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 index aaeb0ea9c..171fc4acc 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.model.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.model.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Account as AccountInterface } from '../../../../../../shared/models/actors' | 1 | import { Account as AccountInterface } from '../../../../../../shared/models/actors' |
2 | import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model' | 2 | import { VideoComment as VideoCommentServerModel, VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model' |
3 | import { Actor } from '@app/shared/actor/actor.model' | 3 | import { Actor } from '@app/shared/actor/actor.model' |
4 | import { getAbsoluteAPIUrl } from '@app/shared/misc/utils' | 4 | import { getAbsoluteAPIUrl } from '@app/shared/misc/utils' |
5 | 5 | ||
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 index a81e5236a..0b0715390 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts | |||
@@ -7,13 +7,14 @@ import { FeedFormat, ResultList } from '../../../../../../shared/models' | |||
7 | import { | 7 | import { |
8 | VideoComment as VideoCommentServerModel, | 8 | VideoComment as VideoCommentServerModel, |
9 | VideoCommentCreate, | 9 | VideoCommentCreate, |
10 | VideoCommentThreadTree | 10 | VideoCommentThreadTree as VideoCommentThreadTreeServerModel |
11 | } from '../../../../../../shared/models/videos/video-comment.model' | 11 | } from '../../../../../../shared/models/videos/video-comment.model' |
12 | import { environment } from '../../../../environments/environment' | 12 | import { environment } from '../../../../environments/environment' |
13 | import { RestExtractor, RestService } from '../../../shared/rest' | 13 | import { RestExtractor, RestService } from '../../../shared/rest' |
14 | import { ComponentPaginationLight } from '../../../shared/rest/component-pagination.model' | 14 | import { ComponentPaginationLight } from '../../../shared/rest/component-pagination.model' |
15 | import { CommentSortField } from '../../../shared/video/sort-field.type' | 15 | import { CommentSortField } from '../../../shared/video/sort-field.type' |
16 | import { VideoComment } from './video-comment.model' | 16 | import { VideoComment } from './video-comment.model' |
17 | import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model' | ||
17 | 18 | ||
18 | @Injectable() | 19 | @Injectable() |
19 | export class VideoCommentService { | 20 | export class VideoCommentService { |
@@ -76,9 +77,9 @@ export class VideoCommentService { | |||
76 | const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}` | 77 | const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}` |
77 | 78 | ||
78 | return this.authHttp | 79 | return this.authHttp |
79 | .get(url) | 80 | .get<VideoCommentThreadTreeServerModel>(url) |
80 | .pipe( | 81 | .pipe( |
81 | map(tree => this.extractVideoCommentTree(tree as VideoCommentThreadTree)), | 82 | map(tree => this.extractVideoCommentTree(tree)), |
82 | catchError(err => this.restExtractor.handleError(err)) | 83 | catchError(err => this.restExtractor.handleError(err)) |
83 | ) | 84 | ) |
84 | } | 85 | } |
@@ -138,12 +139,12 @@ export class VideoCommentService { | |||
138 | return { data: comments, total: totalComments } | 139 | return { data: comments, total: totalComments } |
139 | } | 140 | } |
140 | 141 | ||
141 | private extractVideoCommentTree (tree: VideoCommentThreadTree) { | 142 | private extractVideoCommentTree (tree: VideoCommentThreadTreeServerModel) { |
142 | if (!tree) return tree | 143 | if (!tree) return tree as VideoCommentThreadTree |
143 | 144 | ||
144 | tree.comment = new VideoComment(tree.comment) | 145 | tree.comment = new VideoComment(tree.comment) |
145 | tree.children.forEach(c => this.extractVideoCommentTree(c)) | 146 | tree.children.forEach(c => this.extractVideoCommentTree(c)) |
146 | 147 | ||
147 | return tree | 148 | return tree as VideoCommentThreadTree |
148 | } | 149 | } |
149 | } | 150 | } |
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 index 2bf52ab86..2ab2d4689 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html | |||
@@ -13,7 +13,7 @@ | |||
13 | 13 | ||
14 | <div ngbDropdown class="d-inline-block ml-4"> | 14 | <div ngbDropdown class="d-inline-block ml-4"> |
15 | <button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n> | 15 | <button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n> |
16 | Sort by | 16 | SORT BY |
17 | </button> | 17 | </button> |
18 | <div ngbDropdownMenu aria-labelledby="dropdownSortComments"> | 18 | <div ngbDropdownMenu aria-labelledby="dropdownSortComments"> |
19 | <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button> | 19 | <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button> |
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 index 974c61d6c..750c09c47 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts | |||
@@ -1,8 +1,7 @@ | |||
1 | import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core' | 1 | import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' |
2 | import { ActivatedRoute } from '@angular/router' | 2 | import { ActivatedRoute } from '@angular/router' |
3 | import { ConfirmService, Notifier } from '@app/core' | 3 | import { ConfirmService, Notifier } from '@app/core' |
4 | import { Subject, Subscription } from 'rxjs' | 4 | import { Subject, Subscription } from 'rxjs' |
5 | import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' | ||
6 | import { AuthService } from '../../../core/auth' | 5 | import { AuthService } from '../../../core/auth' |
7 | import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model' | 6 | import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model' |
8 | import { User } from '../../../shared/users' | 7 | import { User } from '../../../shared/users' |
@@ -13,6 +12,7 @@ import { VideoCommentService } from './video-comment.service' | |||
13 | import { I18n } from '@ngx-translate/i18n-polyfill' | 12 | import { I18n } from '@ngx-translate/i18n-polyfill' |
14 | import { Syndication } from '@app/shared/video/syndication.model' | 13 | import { Syndication } from '@app/shared/video/syndication.model' |
15 | import { HooksService } from '@app/core/plugins/hooks.service' | 14 | import { HooksService } from '@app/core/plugins/hooks.service' |
15 | import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model' | ||
16 | 16 | ||
17 | @Component({ | 17 | @Component({ |
18 | selector: 'my-video-comments', | 18 | selector: 'my-video-comments', |
@@ -20,7 +20,7 @@ import { HooksService } from '@app/core/plugins/hooks.service' | |||
20 | styleUrls: ['./video-comments.component.scss'] | 20 | styleUrls: ['./video-comments.component.scss'] |
21 | }) | 21 | }) |
22 | export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { | 22 | export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { |
23 | @ViewChild('commentHighlightBlock', { static: false }) commentHighlightBlock: ElementRef | 23 | @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef |
24 | @Input() video: VideoDetails | 24 | @Input() video: VideoDetails |
25 | @Input() user: User | 25 | @Input() user: User |
26 | 26 | ||
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 index 549a9f30e..593dd8529 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.html +++ b/client/src/app/videos/+video-watch/modal/video-share.component.html | |||
@@ -42,7 +42,7 @@ | |||
42 | <ngb-tab i18n-title title="QR-Code" id="qrcode"> | 42 | <ngb-tab i18n-title title="QR-Code" id="qrcode"> |
43 | <ng-template ngbTabContent> | 43 | <ng-template ngbTabContent> |
44 | <div class="tab-content"> | 44 | <div class="tab-content"> |
45 | <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode> | 45 | <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode> |
46 | </div> | 46 | </div> |
47 | </ng-template> | 47 | </ng-template> |
48 | </ngb-tab> | 48 | </ngb-tab> |
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 index a2b38b3a0..5109bcd11 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts | |||
@@ -1,8 +1,6 @@ | |||
1 | import { Component, ElementRef, Input, ViewChild } from '@angular/core' | 1 | import { Component, ElementRef, Input, ViewChild } from '@angular/core' |
2 | import { Notifier } from '@app/core' | ||
3 | import { VideoDetails } from '../../../shared/video/video-details.model' | 2 | import { VideoDetails } from '../../../shared/video/video-details.model' |
4 | import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils' | 3 | import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils' |
5 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
6 | import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap' | 4 | import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap' |
7 | import { VideoCaption } from '@shared/models' | 5 | import { VideoCaption } from '@shared/models' |
8 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' | 6 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' |
@@ -74,7 +72,7 @@ export class VideoShareComponent { | |||
74 | controls: true | 72 | controls: true |
75 | } | 73 | } |
76 | 74 | ||
77 | this.modalService.open(this.modal) | 75 | this.modalService.open(this.modal, { centered: true }) |
78 | } | 76 | } |
79 | 77 | ||
80 | getVideoIframeCode () { | 78 | getVideoIframeCode () { |
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts index b56a51fbf..0058172f2 100644 --- a/client/src/app/videos/+video-watch/modal/video-support.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts | |||
@@ -21,7 +21,7 @@ export class VideoSupportComponent { | |||
21 | ) { } | 21 | ) { } |
22 | 22 | ||
23 | show () { | 23 | show () { |
24 | this.modalService.open(this.modal) | 24 | this.modalService.open(this.modal, { centered: true }) |
25 | 25 | ||
26 | this.markdownService.enhancedMarkdownToHTML(this.video.support) | 26 | this.markdownService.enhancedMarkdownToHTML(this.video.support) |
27 | .then(r => this.videoHTMLSupport = r) | 27 | .then(r => this.videoHTMLSupport = r) |
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 bc3a3ffdd..cfa0432ad 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -84,12 +84,12 @@ | |||
84 | placement="bottom auto" | 84 | placement="bottom auto" |
85 | > | 85 | > |
86 | <my-global-icon iconName="support"></my-global-icon> | 86 | <my-global-icon iconName="support"></my-global-icon> |
87 | <span class="icon-text" i18n>Support</span> | 87 | <span class="icon-text" i18n>SUPPORT</span> |
88 | </div> | 88 | </div> |
89 | 89 | ||
90 | <div (click)="showShareModal()" class="action-button" role="button"> | 90 | <div (click)="showShareModal()" class="action-button" role="button"> |
91 | <my-global-icon iconName="share"></my-global-icon> | 91 | <my-global-icon iconName="share"></my-global-icon> |
92 | <span class="icon-text" i18n>Share</span> | 92 | <span class="icon-text" i18n>SHARE</span> |
93 | </div> | 93 | </div> |
94 | 94 | ||
95 | <div | 95 | <div |
@@ -100,7 +100,7 @@ | |||
100 | > | 100 | > |
101 | <div class="action-button action-button-save" ngbDropdownToggle role="button"> | 101 | <div class="action-button action-button-save" ngbDropdownToggle role="button"> |
102 | <my-global-icon iconName="playlist-add"></my-global-icon> | 102 | <my-global-icon iconName="playlist-add"></my-global-icon> |
103 | <span class="icon-text" i18n>Save</span> | 103 | <span class="icon-text" i18n>SAVE</span> |
104 | </div> | 104 | </div> |
105 | 105 | ||
106 | <div ngbDropdownMenu> | 106 | <div ngbDropdownMenu> |
@@ -188,6 +188,11 @@ | |||
188 | <span class="video-attribute-value">{{ video.privacy.label }}</span> | 188 | <span class="video-attribute-value">{{ video.privacy.label }}</span> |
189 | </div> | 189 | </div> |
190 | 190 | ||
191 | <div *ngIf="video.isLocal === false" class="video-attribute"> | ||
192 | <span i18n class="video-attribute-label">Origin instance</span> | ||
193 | <a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="video.originInstanceUrl">{{ video.originInstanceHost }}</a> | ||
194 | </div> | ||
195 | |||
191 | <div *ngIf="!!video.originallyPublishedAt" class="video-attribute"> | 196 | <div *ngIf="!!video.originallyPublishedAt" class="video-attribute"> |
192 | <span i18n class="video-attribute-label">Originally published</span> | 197 | <span i18n class="video-attribute-label">Originally published</span> |
193 | <span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span> | 198 | <span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span> |
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 c92f773e4..ae79c2ff6 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -462,6 +462,7 @@ my-video-comments { | |||
462 | .privacy-concerns { | 462 | .privacy-concerns { |
463 | position: fixed; | 463 | position: fixed; |
464 | bottom: 0; | 464 | bottom: 0; |
465 | z-index: z(privacymsg); | ||
465 | 466 | ||
466 | padding: 5px 15px; | 467 | padding: 5px 15px; |
467 | 468 | ||
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 e09e44809..ee3deb5e9 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -47,9 +47,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
47 | private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' | 47 | private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' |
48 | 48 | ||
49 | @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent | 49 | @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent |
50 | @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent | 50 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent |
51 | @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent | 51 | @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent |
52 | @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent | 52 | @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent |
53 | 53 | ||
54 | player: any | 54 | player: any |
55 | playerElement: HTMLVideoElement | 55 | playerElement: HTMLVideoElement |