diff options
author | Chocobozzz <me@florianbigard.com> | 2019-04-05 10:52:27 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-04-05 10:53:09 +0200 |
commit | 3a0fb65c61f80b510bce979a45d59d17948745e8 (patch) | |
tree | c1be0b2158a008fea826835c8d2fd4e8d648bae9 /client/src/app/videos | |
parent | 693263e936763a851e3c8c020e3739def8bd4eca (diff) | |
download | PeerTube-3a0fb65c61f80b510bce979a45d59d17948745e8.tar.gz PeerTube-3a0fb65c61f80b510bce979a45d59d17948745e8.tar.zst PeerTube-3a0fb65c61f80b510bce979a45d59d17948745e8.zip |
Add video miniature dropdown
Diffstat (limited to 'client/src/app/videos')
14 files changed, 12 insertions, 510 deletions
diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html deleted file mode 100644 index 1a87bdcd4..000000000 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html +++ /dev/null | |||
@@ -1,38 +0,0 @@ | |||
1 | <ng-template #modal> | ||
2 | <div class="modal-header"> | ||
3 | <h4 i18n class="modal-title">Blacklist video</h4> | ||
4 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> | ||
5 | </div> | ||
6 | |||
7 | <div class="modal-body"> | ||
8 | |||
9 | <form novalidate [formGroup]="form" (ngSubmit)="blacklist()"> | ||
10 | <div class="form-group"> | ||
11 | <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"> | ||
12 | </textarea> | ||
13 | <div *ngIf="formErrors.reason" class="form-error"> | ||
14 | {{ formErrors.reason }} | ||
15 | </div> | ||
16 | </div> | ||
17 | |||
18 | <div class="form-group" *ngIf="video.isLocal"> | ||
19 | <my-peertube-checkbox | ||
20 | inputName="unfederate" formControlName="unfederate" | ||
21 | i18n-labelText labelText="Unfederate the video (ask for its deletion from the remote instances)" | ||
22 | ></my-peertube-checkbox> | ||
23 | </div> | ||
24 | |||
25 | <div class="form-group inputs"> | ||
26 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | ||
27 | Cancel | ||
28 | </span> | ||
29 | |||
30 | <input | ||
31 | type="submit" i18n-value value="Submit" class="action-button-submit" | ||
32 | [disabled]="!form.valid" | ||
33 | > | ||
34 | </div> | ||
35 | </form> | ||
36 | |||
37 | </div> | ||
38 | </ng-template> | ||
diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.scss b/client/src/app/videos/+video-watch/modal/video-blacklist.component.scss deleted file mode 100644 index afcdb9a16..000000000 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.scss +++ /dev/null | |||
@@ -1,6 +0,0 @@ | |||
1 | @import 'variables'; | ||
2 | @import 'mixins'; | ||
3 | |||
4 | textarea { | ||
5 | @include peertube-textarea(100%, 100px); | ||
6 | } | ||
diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts b/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts deleted file mode 100644 index 50a7cadd1..000000000 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts +++ /dev/null | |||
@@ -1,69 +0,0 @@ | |||
1 | import { Component, Input, OnInit, ViewChild } from '@angular/core' | ||
2 | import { Notifier, RedirectService } from '@app/core' | ||
3 | import { FormReactive, VideoBlacklistService, VideoBlacklistValidatorsService } from '../../../shared/index' | ||
4 | import { VideoDetails } from '../../../shared/video/video-details.model' | ||
5 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
6 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | ||
7 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
8 | import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' | ||
9 | |||
10 | @Component({ | ||
11 | selector: 'my-video-blacklist', | ||
12 | templateUrl: './video-blacklist.component.html', | ||
13 | styleUrls: [ './video-blacklist.component.scss' ] | ||
14 | }) | ||
15 | export class VideoBlacklistComponent extends FormReactive implements OnInit { | ||
16 | @Input() video: VideoDetails = null | ||
17 | |||
18 | @ViewChild('modal') modal: NgbModal | ||
19 | |||
20 | error: string = null | ||
21 | |||
22 | private openedModal: NgbModalRef | ||
23 | |||
24 | constructor ( | ||
25 | protected formValidatorService: FormValidatorService, | ||
26 | private modalService: NgbModal, | ||
27 | private videoBlacklistValidatorsService: VideoBlacklistValidatorsService, | ||
28 | private videoBlacklistService: VideoBlacklistService, | ||
29 | private notifier: Notifier, | ||
30 | private redirectService: RedirectService, | ||
31 | private i18n: I18n | ||
32 | ) { | ||
33 | super() | ||
34 | } | ||
35 | |||
36 | ngOnInit () { | ||
37 | const defaultValues = { unfederate: 'true' } | ||
38 | |||
39 | this.buildForm({ | ||
40 | reason: this.videoBlacklistValidatorsService.VIDEO_BLACKLIST_REASON, | ||
41 | unfederate: null | ||
42 | }, defaultValues) | ||
43 | } | ||
44 | |||
45 | show () { | ||
46 | this.openedModal = this.modalService.open(this.modal, { keyboard: false }) | ||
47 | } | ||
48 | |||
49 | hide () { | ||
50 | this.openedModal.close() | ||
51 | this.openedModal = null | ||
52 | } | ||
53 | |||
54 | blacklist () { | ||
55 | const reason = this.form.value[ 'reason' ] || undefined | ||
56 | const unfederate = this.video.isLocal ? this.form.value[ 'unfederate' ] : undefined | ||
57 | |||
58 | this.videoBlacklistService.blacklistVideo(this.video.id, reason, unfederate) | ||
59 | .subscribe( | ||
60 | () => { | ||
61 | this.notifier.success(this.i18n('Video blacklisted.')) | ||
62 | this.hide() | ||
63 | this.redirectService.redirectToHomepage() | ||
64 | }, | ||
65 | |||
66 | err => this.notifier.error(err.message) | ||
67 | ) | ||
68 | } | ||
69 | } | ||
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 deleted file mode 100644 index 2bb5d6d37..000000000 --- a/client/src/app/videos/+video-watch/modal/video-download.component.html +++ /dev/null | |||
@@ -1,52 +0,0 @@ | |||
1 | <ng-template #modal let-hide="close"> | ||
2 | <div class="modal-header"> | ||
3 | <h4 i18n class="modal-title">Download video</h4> | ||
4 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> | ||
5 | </div> | ||
6 | |||
7 | <div class="modal-body"> | ||
8 | <div class="form-group"> | ||
9 | <div class="input-group input-group-sm"> | ||
10 | <div class="input-group-prepend peertube-select-container"> | ||
11 | <select [(ngModel)]="resolutionId"> | ||
12 | <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option> | ||
13 | </select> | ||
14 | </div> | ||
15 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" /> | ||
16 | <div class="input-group-append"> | ||
17 | <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> | ||
18 | <span class="glyphicon glyphicon-copy"></span> | ||
19 | </button> | ||
20 | </div> | ||
21 | </div> | ||
22 | </div> | ||
23 | |||
24 | <div class="download-type"> | ||
25 | <div class="peertube-radio-container"> | ||
26 | <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct"> | ||
27 | <label i18n for="download-direct">Direct download</label> | ||
28 | </div> | ||
29 | |||
30 | <div class="peertube-radio-container"> | ||
31 | <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent"> | ||
32 | <label i18n for="download-torrent">Torrent (.torrent file)</label> | ||
33 | </div> | ||
34 | |||
35 | <div class="peertube-radio-container"> | ||
36 | <input type="radio" name="download" id="download-magnet" [(ngModel)]="downloadType" value="magnet"> | ||
37 | <label i18n for="download-magnet">Torrent (magnet link)</label> | ||
38 | </div> | ||
39 | </div> | ||
40 | </div> | ||
41 | |||
42 | <div class="modal-footer inputs"> | ||
43 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | ||
44 | Cancel | ||
45 | </span> | ||
46 | |||
47 | <input | ||
48 | type="submit" i18n-value value="Download" class="action-button-submit" | ||
49 | (click)="download()" | ||
50 | > | ||
51 | </div> | ||
52 | </ng-template> | ||
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 deleted file mode 100644 index 3e826c3b6..000000000 --- a/client/src/app/videos/+video-watch/modal/video-download.component.scss +++ /dev/null | |||
@@ -1,25 +0,0 @@ | |||
1 | @import 'variables'; | ||
2 | @import 'mixins'; | ||
3 | |||
4 | .peertube-select-container { | ||
5 | @include peertube-select-container(100px); | ||
6 | |||
7 | border-top-right-radius: 0; | ||
8 | border-bottom-right-radius: 0; | ||
9 | border-right: none; | ||
10 | |||
11 | select { | ||
12 | height: inherit; | ||
13 | } | ||
14 | } | ||
15 | |||
16 | .download-type { | ||
17 | margin-top: 30px; | ||
18 | |||
19 | .peertube-radio-container { | ||
20 | @include peertube-radio-container; | ||
21 | |||
22 | display: inline-block; | ||
23 | margin-right: 30px; | ||
24 | } | ||
25 | } | ||
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 deleted file mode 100644 index 834385771..000000000 --- a/client/src/app/videos/+video-watch/modal/video-download.component.ts +++ /dev/null | |||
@@ -1,68 +0,0 @@ | |||
1 | import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core' | ||
2 | import { VideoDetails } from '../../../shared/video/video-details.model' | ||
3 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
4 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
5 | import { Notifier } from '@app/core' | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-video-download', | ||
9 | templateUrl: './video-download.component.html', | ||
10 | styleUrls: [ './video-download.component.scss' ] | ||
11 | }) | ||
12 | export class VideoDownloadComponent implements OnInit { | ||
13 | @Input() video: VideoDetails = null | ||
14 | |||
15 | @ViewChild('modal') modal: ElementRef | ||
16 | |||
17 | downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent' | ||
18 | resolutionId: number | string = -1 | ||
19 | |||
20 | constructor ( | ||
21 | private notifier: Notifier, | ||
22 | private modalService: NgbModal, | ||
23 | private i18n: I18n | ||
24 | ) { } | ||
25 | |||
26 | ngOnInit () { | ||
27 | this.resolutionId = this.video.files[0].resolution.id | ||
28 | } | ||
29 | |||
30 | show () { | ||
31 | this.modalService.open(this.modal) | ||
32 | } | ||
33 | |||
34 | download () { | ||
35 | window.location.assign(this.getLink()) | ||
36 | } | ||
37 | |||
38 | getLink () { | ||
39 | // HTML select send us a string, so convert it to a number | ||
40 | this.resolutionId = parseInt(this.resolutionId.toString(), 10) | ||
41 | |||
42 | const file = this.video.files.find(f => f.resolution.id === this.resolutionId) | ||
43 | if (!file) { | ||
44 | console.error('Could not find file with resolution %d.', this.resolutionId) | ||
45 | return | ||
46 | } | ||
47 | |||
48 | const link = (() => { | ||
49 | switch (this.downloadType) { | ||
50 | case 'direct': { | ||
51 | return file.fileDownloadUrl | ||
52 | } | ||
53 | case 'torrent': { | ||
54 | return file.torrentDownloadUrl | ||
55 | } | ||
56 | case 'magnet': { | ||
57 | return file.magnetUri | ||
58 | } | ||
59 | } | ||
60 | })() | ||
61 | |||
62 | return link | ||
63 | } | ||
64 | |||
65 | activateCopiedMessage () { | ||
66 | this.notifier.success(this.i18n('Copied')) | ||
67 | } | ||
68 | } | ||
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 deleted file mode 100644 index b9434da26..000000000 --- a/client/src/app/videos/+video-watch/modal/video-report.component.html +++ /dev/null | |||
@@ -1,36 +0,0 @@ | |||
1 | <ng-template #modal> | ||
2 | <div class="modal-header"> | ||
3 | <h4 i18n class="modal-title">Report video</h4> | ||
4 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> | ||
5 | </div> | ||
6 | |||
7 | <div class="modal-body"> | ||
8 | |||
9 | <div i18n class="information"> | ||
10 | Your report will be sent to moderators of {{ currentHost }}. | ||
11 | <ng-container *ngIf="isRemoteVideo()"> It will be forwarded to origin instance {{ originHost }} too.</ng-container> | ||
12 | </div> | ||
13 | |||
14 | <form novalidate [formGroup]="form" (ngSubmit)="report()"> | ||
15 | <div class="form-group"> | ||
16 | <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"> | ||
17 | </textarea> | ||
18 | <div *ngIf="formErrors.reason" class="form-error"> | ||
19 | {{ formErrors.reason }} | ||
20 | </div> | ||
21 | </div> | ||
22 | |||
23 | <div class="form-group inputs"> | ||
24 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | ||
25 | Cancel | ||
26 | </span> | ||
27 | |||
28 | <input | ||
29 | type="submit" i18n-value value="Submit" class="action-button-submit" | ||
30 | [disabled]="!form.valid" | ||
31 | > | ||
32 | </div> | ||
33 | </form> | ||
34 | |||
35 | </div> | ||
36 | </ng-template> | ||
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 deleted file mode 100644 index 4713660a2..000000000 --- a/client/src/app/videos/+video-watch/modal/video-report.component.scss +++ /dev/null | |||
@@ -1,10 +0,0 @@ | |||
1 | @import 'variables'; | ||
2 | @import 'mixins'; | ||
3 | |||
4 | .information { | ||
5 | margin-bottom: 20px; | ||
6 | } | ||
7 | |||
8 | textarea { | ||
9 | @include peertube-textarea(100%, 100px); | ||
10 | } | ||
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 deleted file mode 100644 index 911f3b447..000000000 --- a/client/src/app/videos/+video-watch/modal/video-report.component.ts +++ /dev/null | |||
@@ -1,80 +0,0 @@ | |||
1 | import { Component, Input, OnInit, ViewChild } from '@angular/core' | ||
2 | import { Notifier } from '@app/core' | ||
3 | import { FormReactive, VideoAbuseService } from '../../../shared/index' | ||
4 | import { VideoDetails } from '../../../shared/video/video-details.model' | ||
5 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
6 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | ||
7 | import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service' | ||
8 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
9 | import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' | ||
10 | |||
11 | @Component({ | ||
12 | selector: 'my-video-report', | ||
13 | templateUrl: './video-report.component.html', | ||
14 | styleUrls: [ './video-report.component.scss' ] | ||
15 | }) | ||
16 | export class VideoReportComponent extends FormReactive implements OnInit { | ||
17 | @Input() video: VideoDetails = null | ||
18 | |||
19 | @ViewChild('modal') modal: NgbModal | ||
20 | |||
21 | error: string = null | ||
22 | |||
23 | private openedModal: NgbModalRef | ||
24 | |||
25 | constructor ( | ||
26 | protected formValidatorService: FormValidatorService, | ||
27 | private modalService: NgbModal, | ||
28 | private videoAbuseValidatorsService: VideoAbuseValidatorsService, | ||
29 | private videoAbuseService: VideoAbuseService, | ||
30 | private notifier: Notifier, | ||
31 | private i18n: I18n | ||
32 | ) { | ||
33 | super() | ||
34 | } | ||
35 | |||
36 | get currentHost () { | ||
37 | return window.location.host | ||
38 | } | ||
39 | |||
40 | get originHost () { | ||
41 | if (this.isRemoteVideo()) { | ||
42 | return this.video.account.host | ||
43 | } | ||
44 | |||
45 | return '' | ||
46 | } | ||
47 | |||
48 | ngOnInit () { | ||
49 | this.buildForm({ | ||
50 | reason: this.videoAbuseValidatorsService.VIDEO_ABUSE_REASON | ||
51 | }) | ||
52 | } | ||
53 | |||
54 | show () { | ||
55 | this.openedModal = this.modalService.open(this.modal, { keyboard: false }) | ||
56 | } | ||
57 | |||
58 | hide () { | ||
59 | this.openedModal.close() | ||
60 | this.openedModal = null | ||
61 | } | ||
62 | |||
63 | report () { | ||
64 | const reason = this.form.value['reason'] | ||
65 | |||
66 | this.videoAbuseService.reportVideo(this.video.id, reason) | ||
67 | .subscribe( | ||
68 | () => { | ||
69 | this.notifier.success(this.i18n('Video reported.')) | ||
70 | this.hide() | ||
71 | }, | ||
72 | |||
73 | err => this.notifier.error(err.message) | ||
74 | ) | ||
75 | } | ||
76 | |||
77 | isRemoteVideo () { | ||
78 | return !this.video.isLocal | ||
79 | } | ||
80 | } | ||
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 ad1d04b70..7755a729a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -120,37 +120,9 @@ | |||
120 | </div> | 120 | </div> |
121 | </div> | 121 | </div> |
122 | 122 | ||
123 | <div class="action-dropdown" ngbDropdown placement="top" role="button"> | 123 | <my-video-actions-dropdown |
124 | <div class="action-button" ngbDropdownToggle role="button"> | 124 | placement="top" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" (videoRemoved)="onVideoRemoved()" |
125 | <my-global-icon class="more-icon" iconName="more-horizontal"></my-global-icon> | 125 | ></my-video-actions-dropdown> |
126 | </div> | ||
127 | |||
128 | <div ngbDropdownMenu> | ||
129 | <a *ngIf="isVideoDownloadable()" class="dropdown-item" i18n-title title="Download the video" href="#" (click)="showDownloadModal($event)"> | ||
130 | <my-global-icon iconName="download"></my-global-icon> <ng-container i18n>Download</ng-container> | ||
131 | </a> | ||
132 | |||
133 | <a *ngIf="isUserLoggedIn()" class="dropdown-item" i18n-title title="Report this video" href="#" (click)="showReportModal($event)"> | ||
134 | <my-global-icon iconName="alert"></my-global-icon> <ng-container i18n>Report</ng-container> | ||
135 | </a> | ||
136 | |||
137 | <a *ngIf="isVideoUpdatable()" class="dropdown-item" i18n-title title="Update this video" href="#" [routerLink]="[ '/videos/update', video.uuid ]"> | ||
138 | <my-global-icon iconName="edit"></my-global-icon> <ng-container i18n>Update</ng-container> | ||
139 | </a> | ||
140 | |||
141 | <a *ngIf="isVideoBlacklistable()" class="dropdown-item" i18n-title title="Blacklist this video" href="#" (click)="showBlacklistModal($event)"> | ||
142 | <my-global-icon iconName="no"></my-global-icon> <ng-container i18n>Blacklist</ng-container> | ||
143 | </a> | ||
144 | |||
145 | <a *ngIf="isVideoUnblacklistable()" class="dropdown-item" i18n-title title="Unblacklist this video" href="#" (click)="unblacklistVideo($event)"> | ||
146 | <my-global-icon iconName="undo"></my-global-icon> <ng-container i18n>Unblacklist</ng-container> | ||
147 | </a> | ||
148 | |||
149 | <a *ngIf="isVideoRemovable()" class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)"> | ||
150 | <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete</ng-container> | ||
151 | </a> | ||
152 | </div> | ||
153 | </div> | ||
154 | </div> | 126 | </div> |
155 | 127 | ||
156 | <div | 128 | <div |
@@ -270,7 +242,4 @@ | |||
270 | <ng-template [ngIf]="video !== null"> | 242 | <ng-template [ngIf]="video !== null"> |
271 | <my-video-support #videoSupportModal [video]="video"></my-video-support> | 243 | <my-video-support #videoSupportModal [video]="video"></my-video-support> |
272 | <my-video-share #videoShareModal [video]="video"></my-video-share> | 244 | <my-video-share #videoShareModal [video]="video"></my-video-share> |
273 | <my-video-download #videoDownloadModal [video]="video"></my-video-download> | ||
274 | <my-video-report #videoReportModal [video]="video"></my-video-report> | ||
275 | <my-video-blacklist #videoBlacklistModal [video]="video"></my-video-blacklist> | ||
276 | </ng-template> | 245 | </ng-template> |
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 2874847cd..c1eaf9b2b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -257,7 +257,9 @@ $player-factor: 1.7; // 16/9 | |||
257 | display: flex; | 257 | display: flex; |
258 | align-items: center; | 258 | align-items: center; |
259 | 259 | ||
260 | .action-button:not(:first-child), .action-dropdown { | 260 | .action-button:not(:first-child), |
261 | .action-dropdown, | ||
262 | my-video-actions-dropdown { | ||
261 | margin-left: 10px; | 263 | margin-left: 10px; |
262 | } | 264 | } |
263 | 265 | ||
@@ -304,14 +306,6 @@ $player-factor: 1.7; // 16/9 | |||
304 | margin-left: 3px; | 306 | margin-left: 3px; |
305 | } | 307 | } |
306 | } | 308 | } |
307 | |||
308 | .action-dropdown { | ||
309 | display: inline-block; | ||
310 | |||
311 | .dropdown-menu .dropdown-item { | ||
312 | @include dropdown-with-icon-item; | ||
313 | } | ||
314 | } | ||
315 | } | 309 | } |
316 | 310 | ||
317 | .video-info-likes-dislikes-bar { | 311 | .video-info-likes-dislikes-bar { |
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 cedbbf985..53673d9d9 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -13,10 +13,7 @@ import { AuthService, ConfirmService } from '../../core' | |||
13 | import { RestExtractor, VideoBlacklistService } from '../../shared' | 13 | import { RestExtractor, VideoBlacklistService } from '../../shared' |
14 | import { VideoDetails } from '../../shared/video/video-details.model' | 14 | import { VideoDetails } from '../../shared/video/video-details.model' |
15 | import { VideoService } from '../../shared/video/video.service' | 15 | import { VideoService } from '../../shared/video/video.service' |
16 | import { VideoDownloadComponent } from './modal/video-download.component' | ||
17 | import { VideoReportComponent } from './modal/video-report.component' | ||
18 | import { VideoShareComponent } from './modal/video-share.component' | 16 | import { VideoShareComponent } from './modal/video-share.component' |
19 | import { VideoBlacklistComponent } from './modal/video-blacklist.component' | ||
20 | import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component' | 17 | import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component' |
21 | import { I18n } from '@ngx-translate/i18n-polyfill' | 18 | import { I18n } from '@ngx-translate/i18n-polyfill' |
22 | import { environment } from '../../../environments/environment' | 19 | import { environment } from '../../../environments/environment' |
@@ -32,6 +29,7 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' | |||
32 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' | 29 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' |
33 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | 30 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' |
34 | import { Video } from '@app/shared/video/video.model' | 31 | import { Video } from '@app/shared/video/video.model' |
32 | import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' | ||
35 | 33 | ||
36 | @Component({ | 34 | @Component({ |
37 | selector: 'my-video-watch', | 35 | selector: 'my-video-watch', |
@@ -41,11 +39,8 @@ import { Video } from '@app/shared/video/video.model' | |||
41 | export class VideoWatchComponent implements OnInit, OnDestroy { | 39 | export class VideoWatchComponent implements OnInit, OnDestroy { |
42 | private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' | 40 | private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' |
43 | 41 | ||
44 | @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent | ||
45 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent | 42 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent |
46 | @ViewChild('videoReportModal') videoReportModal: VideoReportComponent | ||
47 | @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent | 43 | @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent |
48 | @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent | ||
49 | @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent | 44 | @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent |
50 | 45 | ||
51 | player: any | 46 | player: any |
@@ -212,11 +207,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
212 | ) | 207 | ) |
213 | } | 208 | } |
214 | 209 | ||
215 | showReportModal (event: Event) { | ||
216 | event.preventDefault() | ||
217 | this.videoReportModal.show() | ||
218 | } | ||
219 | |||
220 | showSupportModal () { | 210 | showSupportModal () { |
221 | this.videoSupportModal.show() | 211 | this.videoSupportModal.show() |
222 | } | 212 | } |
@@ -225,54 +215,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
225 | this.videoShareModal.show(this.currentTime) | 215 | this.videoShareModal.show(this.currentTime) |
226 | } | 216 | } |
227 | 217 | ||
228 | showDownloadModal (event: Event) { | ||
229 | event.preventDefault() | ||
230 | this.videoDownloadModal.show() | ||
231 | } | ||
232 | |||
233 | showBlacklistModal (event: Event) { | ||
234 | event.preventDefault() | ||
235 | this.videoBlacklistModal.show() | ||
236 | } | ||
237 | |||
238 | async unblacklistVideo (event: Event) { | ||
239 | event.preventDefault() | ||
240 | |||
241 | const confirmMessage = this.i18n( | ||
242 | 'Do you really want to remove this video from the blacklist? It will be available again in the videos list.' | ||
243 | ) | ||
244 | |||
245 | const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist')) | ||
246 | if (res === false) return | ||
247 | |||
248 | this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe( | ||
249 | () => { | ||
250 | this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name })) | ||
251 | |||
252 | this.video.blacklisted = false | ||
253 | this.video.blacklistedReason = null | ||
254 | }, | ||
255 | |||
256 | err => this.notifier.error(err.message) | ||
257 | ) | ||
258 | } | ||
259 | |||
260 | isUserLoggedIn () { | 218 | isUserLoggedIn () { |
261 | return this.authService.isLoggedIn() | 219 | return this.authService.isLoggedIn() |
262 | } | 220 | } |
263 | 221 | ||
264 | isVideoUpdatable () { | ||
265 | return this.video.isUpdatableBy(this.authService.getUser()) | ||
266 | } | ||
267 | |||
268 | isVideoBlacklistable () { | ||
269 | return this.video.isBlackistableBy(this.user) | ||
270 | } | ||
271 | |||
272 | isVideoUnblacklistable () { | ||
273 | return this.video.isUnblacklistableBy(this.user) | ||
274 | } | ||
275 | |||
276 | getVideoTags () { | 222 | getVideoTags () { |
277 | if (!this.video || Array.isArray(this.video.tags) === false) return [] | 223 | if (!this.video || Array.isArray(this.video.tags) === false) return [] |
278 | 224 | ||
@@ -283,23 +229,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
283 | return this.video.isRemovableBy(this.authService.getUser()) | 229 | return this.video.isRemovableBy(this.authService.getUser()) |
284 | } | 230 | } |
285 | 231 | ||
286 | async removeVideo (event: Event) { | 232 | onVideoRemoved () { |
287 | event.preventDefault() | 233 | this.redirectService.redirectToHomepage() |
288 | |||
289 | const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete')) | ||
290 | if (res === false) return | ||
291 | |||
292 | this.videoService.removeVideo(this.video.id) | ||
293 | .subscribe( | ||
294 | () => { | ||
295 | this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name })) | ||
296 | |||
297 | // Go back to the video-list. | ||
298 | this.redirectService.redirectToHomepage() | ||
299 | }, | ||
300 | |||
301 | error => this.notifier.error(error.message) | ||
302 | ) | ||
303 | } | 234 | } |
304 | 235 | ||
305 | acceptedPrivacyConcern () { | 236 | acceptedPrivacyConcern () { |
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 2f448db78..983350f52 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts | |||
@@ -1,26 +1,21 @@ | |||
1 | import { NgModule } from '@angular/core' | 1 | import { NgModule } from '@angular/core' |
2 | import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' | 2 | import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' |
3 | import { ClipboardModule } from 'ngx-clipboard' | ||
4 | import { SharedModule } from '../../shared' | 3 | import { SharedModule } from '../../shared' |
5 | import { VideoCommentAddComponent } from './comment/video-comment-add.component' | 4 | import { VideoCommentAddComponent } from './comment/video-comment-add.component' |
6 | import { VideoCommentComponent } from './comment/video-comment.component' | 5 | import { VideoCommentComponent } from './comment/video-comment.component' |
7 | import { VideoCommentService } from './comment/video-comment.service' | 6 | import { VideoCommentService } from './comment/video-comment.service' |
8 | import { VideoCommentsComponent } from './comment/video-comments.component' | 7 | import { VideoCommentsComponent } from './comment/video-comments.component' |
9 | import { VideoDownloadComponent } from './modal/video-download.component' | ||
10 | import { VideoReportComponent } from './modal/video-report.component' | ||
11 | import { VideoShareComponent } from './modal/video-share.component' | 8 | import { VideoShareComponent } from './modal/video-share.component' |
12 | import { VideoWatchRoutingModule } from './video-watch-routing.module' | 9 | import { VideoWatchRoutingModule } from './video-watch-routing.module' |
13 | import { VideoWatchComponent } from './video-watch.component' | 10 | import { VideoWatchComponent } from './video-watch.component' |
14 | import { NgxQRCodeModule } from 'ngx-qrcode2' | 11 | import { NgxQRCodeModule } from 'ngx-qrcode2' |
15 | import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' | 12 | import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' |
16 | import { VideoBlacklistComponent } from '@app/videos/+video-watch/modal/video-blacklist.component' | ||
17 | import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module' | 13 | import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module' |
18 | 14 | ||
19 | @NgModule({ | 15 | @NgModule({ |
20 | imports: [ | 16 | imports: [ |
21 | VideoWatchRoutingModule, | 17 | VideoWatchRoutingModule, |
22 | SharedModule, | 18 | SharedModule, |
23 | ClipboardModule, | ||
24 | NgbTooltipModule, | 19 | NgbTooltipModule, |
25 | NgxQRCodeModule, | 20 | NgxQRCodeModule, |
26 | RecommendationsModule | 21 | RecommendationsModule |
@@ -29,10 +24,7 @@ import { RecommendationsModule } from '@app/videos/recommendations/recommendatio | |||
29 | declarations: [ | 24 | declarations: [ |
30 | VideoWatchComponent, | 25 | VideoWatchComponent, |
31 | 26 | ||
32 | VideoDownloadComponent, | ||
33 | VideoShareComponent, | 27 | VideoShareComponent, |
34 | VideoReportComponent, | ||
35 | VideoBlacklistComponent, | ||
36 | VideoSupportComponent, | 28 | VideoSupportComponent, |
37 | VideoCommentsComponent, | 29 | VideoCommentsComponent, |
38 | VideoCommentAddComponent, | 30 | VideoCommentAddComponent, |
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html index cb26592e3..b644dd798 100644 --- a/client/src/app/videos/video-list/video-overview.component.html +++ b/client/src/app/videos/video-list/video-overview.component.html | |||
@@ -7,7 +7,7 @@ | |||
7 | <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> | 7 | <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> |
8 | </div> | 8 | </div> |
9 | 9 | ||
10 | <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature> | 10 | <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature> |
11 | </div> | 11 | </div> |
12 | 12 | ||
13 | <div class="section" *ngFor="let object of overview.tags"> | 13 | <div class="section" *ngFor="let object of overview.tags"> |
@@ -15,7 +15,7 @@ | |||
15 | <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> | 15 | <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> |
16 | </div> | 16 | </div> |
17 | 17 | ||
18 | <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature> | 18 | <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature> |
19 | </div> | 19 | </div> |
20 | 20 | ||
21 | <div class="section channel" *ngFor="let object of overview.channels"> | 21 | <div class="section channel" *ngFor="let object of overview.channels"> |
@@ -27,7 +27,7 @@ | |||
27 | </a> | 27 | </a> |
28 | </div> | 28 | </div> |
29 | 29 | ||
30 | <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature> | 30 | <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature> |
31 | </div> | 31 | </div> |
32 | 32 | ||
33 | </div> | 33 | </div> |