diff options
Diffstat (limited to 'client/src/app/videos/+video-watch')
12 files changed, 170 insertions, 203 deletions
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 index 31b2f4228..edd054123 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.html +++ b/client/src/app/videos/+video-watch/modal/video-download.component.html | |||
@@ -1,47 +1,42 @@ | |||
1 | <div bsModal #modal="bs-modal" class="modal" tabindex="-1"> | 1 | <ng-template #modal let-hide="close"> |
2 | <div class="modal-dialog"> | 2 | <div class="modal-header"> |
3 | <div class="modal-content"> | 3 | <h4 i18n class="modal-title">Download video</h4> |
4 | 4 | <span class="close" aria-hidden="true" (click)="hide()"></span> | |
5 | <div class="modal-header"> | 5 | </div> |
6 | <span class="close" aria-hidden="true" (click)="hide()"></span> | ||
7 | <h4 i18n class="modal-title">Download video</h4> | ||
8 | </div> | ||
9 | |||
10 | <div class="modal-body"> | ||
11 | <div class="peertube-select-container"> | ||
12 | <select [(ngModel)]="resolutionId"> | ||
13 | <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option> | ||
14 | </select> | ||
15 | </div> | ||
16 | 6 | ||
17 | <div class="download-type"> | 7 | <div class="modal-body"> |
18 | <div class="peertube-radio-container"> | 8 | <div class="peertube-select-container"> |
19 | <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct"> | 9 | <select [(ngModel)]="resolutionId"> |
20 | <label i18n for="download-direct">Direct download</label> | 10 | <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option> |
21 | </div> | 11 | </select> |
22 | 12 | </div> | |
23 | <div class="peertube-radio-container"> | ||
24 | <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent"> | ||
25 | <label i18n for="download-torrent">Torrent (.torrent file)</label> | ||
26 | </div> | ||
27 | 13 | ||
28 | <div class="peertube-radio-container"> | 14 | <div class="download-type"> |
29 | <input type="radio" name="download" id="download-magnet" [(ngModel)]="downloadType" value="magnet"> | 15 | <div class="peertube-radio-container"> |
30 | <label i18n for="download-magnet">Torrent (magnet link)</label> | 16 | <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct"> |
31 | </div> | 17 | <label i18n for="download-direct">Direct download</label> |
32 | </div> | 18 | </div> |
33 | 19 | ||
34 | <div class="form-group inputs"> | 20 | <div class="peertube-radio-container"> |
35 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | 21 | <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent"> |
36 | Cancel | 22 | <label i18n for="download-torrent">Torrent (.torrent file)</label> |
37 | </span> | 23 | </div> |
38 | 24 | ||
39 | <input | 25 | <div class="peertube-radio-container"> |
40 | type="submit" i18n-value value="Download" class="action-button-submit" | 26 | <input type="radio" name="download" id="download-magnet" [(ngModel)]="downloadType" value="magnet"> |
41 | (click)="download()" | 27 | <label i18n for="download-magnet">Torrent (magnet link)</label> |
42 | > | ||
43 | </div> | ||
44 | </div> | 28 | </div> |
45 | </div> | 29 | </div> |
46 | </div> | 30 | </div> |
47 | </div> | 31 | |
32 | <div class="modal-footer inputs"> | ||
33 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | ||
34 | Cancel | ||
35 | </span> | ||
36 | |||
37 | <input | ||
38 | type="submit" i18n-value value="Download" class="action-button-submit" | ||
39 | (click)="download()" | ||
40 | > | ||
41 | </div> | ||
42 | </ng-template> | ||
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 index 2de706e47..1361146dd 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-download.component.ts | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Component, Input, OnInit, ViewChild } from '@angular/core' | 1 | import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core' |
2 | import { ModalDirective } from 'ngx-bootstrap/modal' | ||
3 | import { VideoDetails } from '../../../shared/video/video-details.model' | 2 | import { VideoDetails } from '../../../shared/video/video-details.model' |
3 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
4 | 4 | ||
5 | @Component({ | 5 | @Component({ |
6 | selector: 'my-video-download', | 6 | selector: 'my-video-download', |
@@ -10,12 +10,12 @@ import { VideoDetails } from '../../../shared/video/video-details.model' | |||
10 | export class VideoDownloadComponent implements OnInit { | 10 | export class VideoDownloadComponent implements OnInit { |
11 | @Input() video: VideoDetails = null | 11 | @Input() video: VideoDetails = null |
12 | 12 | ||
13 | @ViewChild('modal') modal: ModalDirective | 13 | @ViewChild('modal') modal: ElementRef |
14 | 14 | ||
15 | downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent' | 15 | downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent' |
16 | resolutionId: number | string = -1 | 16 | resolutionId: number | string = -1 |
17 | 17 | ||
18 | constructor () { | 18 | constructor (private modalService: NgbModal) { |
19 | // empty | 19 | // empty |
20 | } | 20 | } |
21 | 21 | ||
@@ -24,11 +24,7 @@ export class VideoDownloadComponent implements OnInit { | |||
24 | } | 24 | } |
25 | 25 | ||
26 | show () { | 26 | show () { |
27 | this.modal.show() | 27 | this.modalService.open(this.modal) |
28 | } | ||
29 | |||
30 | hide () { | ||
31 | this.modal.hide() | ||
32 | } | 28 | } |
33 | 29 | ||
34 | download () { | 30 | download () { |
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 index 4ee3721fb..8d9a49276 100644 --- a/client/src/app/videos/+video-watch/modal/video-report.component.html +++ b/client/src/app/videos/+video-watch/modal/video-report.component.html | |||
@@ -1,36 +1,31 @@ | |||
1 | <div bsModal #modal="bs-modal" class="modal" tabindex="-1"> | 1 | <ng-template #modal> |
2 | <div class="modal-dialog"> | 2 | <div class="modal-header"> |
3 | <div class="modal-content"> | 3 | <h4 i18n class="modal-title">Report video</h4> |
4 | 4 | <span class="close" aria-label="Close" role="button" (click)="hide()"></span> | |
5 | <div class="modal-header"> | 5 | </div> |
6 | <span class="close" aria-hidden="true" (click)="hide()"></span> | ||
7 | <h4 i18n class="modal-title">Report video</h4> | ||
8 | </div> | ||
9 | |||
10 | <div class="modal-body"> | ||
11 | 6 | ||
12 | <form novalidate [formGroup]="form" (ngSubmit)="report()"> | 7 | <div class="modal-body"> |
13 | <div class="form-group"> | ||
14 | <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"> | ||
15 | </textarea> | ||
16 | <div *ngIf="formErrors.reason" class="form-error"> | ||
17 | {{ formErrors.reason }} | ||
18 | </div> | ||
19 | </div> | ||
20 | 8 | ||
21 | <div class="form-group inputs"> | 9 | <form novalidate [formGroup]="form" (ngSubmit)="report()"> |
22 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | 10 | <div class="form-group"> |
23 | Cancel | 11 | <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"> |
24 | </span> | 12 | </textarea> |
13 | <div *ngIf="formErrors.reason" class="form-error"> | ||
14 | {{ formErrors.reason }} | ||
15 | </div> | ||
16 | </div> | ||
25 | 17 | ||
26 | <input | 18 | <div class="form-group inputs"> |
27 | type="submit" i18n-value value="Submit" class="action-button-submit" | 19 | <span i18n class="action-button action-button-cancel" (click)="hide()"> |
28 | [disabled]="!form.valid" | 20 | Cancel |
29 | > | 21 | </span> |
30 | </div> | ||
31 | </form> | ||
32 | 22 | ||
23 | <input | ||
24 | type="submit" i18n-value value="Submit" class="action-button-submit" | ||
25 | [disabled]="!form.valid" | ||
26 | > | ||
33 | </div> | 27 | </div> |
34 | </div> | 28 | </form> |
29 | |||
35 | </div> | 30 | </div> |
36 | </div> | 31 | </ng-template> |
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 index d9768fdac..297afb19f 100644 --- a/client/src/app/videos/+video-watch/modal/video-report.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-report.component.ts | |||
@@ -1,11 +1,12 @@ | |||
1 | import { Component, Input, OnInit, ViewChild } from '@angular/core' | 1 | import { Component, Input, OnInit, ViewChild } from '@angular/core' |
2 | import { NotificationsService } from 'angular2-notifications' | 2 | import { NotificationsService } from 'angular2-notifications' |
3 | import { ModalDirective } from 'ngx-bootstrap/modal' | ||
4 | import { FormReactive, VideoAbuseService } from '../../../shared/index' | 3 | import { FormReactive, VideoAbuseService } from '../../../shared/index' |
5 | import { VideoDetails } from '../../../shared/video/video-details.model' | 4 | import { VideoDetails } from '../../../shared/video/video-details.model' |
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | 5 | import { I18n } from '@ngx-translate/i18n-polyfill' |
7 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | 6 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' |
8 | import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.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' | ||
9 | 10 | ||
10 | @Component({ | 11 | @Component({ |
11 | selector: 'my-video-report', | 12 | selector: 'my-video-report', |
@@ -15,12 +16,15 @@ import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/v | |||
15 | export class VideoReportComponent extends FormReactive implements OnInit { | 16 | export class VideoReportComponent extends FormReactive implements OnInit { |
16 | @Input() video: VideoDetails = null | 17 | @Input() video: VideoDetails = null |
17 | 18 | ||
18 | @ViewChild('modal') modal: ModalDirective | 19 | @ViewChild('modal') modal: NgbModal |
19 | 20 | ||
20 | error: string = null | 21 | error: string = null |
21 | 22 | ||
23 | private openedModal: NgbModalRef | ||
24 | |||
22 | constructor ( | 25 | constructor ( |
23 | protected formValidatorService: FormValidatorService, | 26 | protected formValidatorService: FormValidatorService, |
27 | private modalService: NgbModal, | ||
24 | private videoAbuseValidatorsService: VideoAbuseValidatorsService, | 28 | private videoAbuseValidatorsService: VideoAbuseValidatorsService, |
25 | private videoAbuseService: VideoAbuseService, | 29 | private videoAbuseService: VideoAbuseService, |
26 | private notificationsService: NotificationsService, | 30 | private notificationsService: NotificationsService, |
@@ -36,11 +40,12 @@ export class VideoReportComponent extends FormReactive implements OnInit { | |||
36 | } | 40 | } |
37 | 41 | ||
38 | show () { | 42 | show () { |
39 | this.modal.show() | 43 | this.openedModal = this.modalService.open(this.modal, { keyboard: false }) |
40 | } | 44 | } |
41 | 45 | ||
42 | hide () { | 46 | hide () { |
43 | this.modal.hide() | 47 | this.openedModal.close() |
48 | this.openedModal = null | ||
44 | } | 49 | } |
45 | 50 | ||
46 | report () { | 51 | report () { |
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 74a3a57d4..02f5f0f44 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 | |||
@@ -1,52 +1,46 @@ | |||
1 | <div bsModal #modal="bs-modal" class="modal" tabindex="-1"> | 1 | <ng-template #modal let-hide="close"> |
2 | <div class="modal-dialog"> | 2 | <div class="modal-header"> |
3 | <div class="modal-content"> | 3 | <h4 i18n class="modal-title">Share</h4> |
4 | 4 | <span class="close" aria-hidden="true" (click)="hide()"></span> | |
5 | <div class="modal-header"> | 5 | </div> |
6 | <span class="close" aria-hidden="true" (click)="hide()"></span> | ||
7 | <h4 i18n class="modal-title">Share</h4> | ||
8 | </div> | ||
9 | |||
10 | <div class="modal-body"> | ||
11 | <div class="form-group"> | ||
12 | <label i18n>URL</label> | ||
13 | <div class="input-group input-group-sm"> | ||
14 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" /> | ||
15 | <div class="input-group-btn" placement="bottom right"> | ||
16 | <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search"> | ||
17 | <span class="glyphicon glyphicon-copy"></span> | ||
18 | </button> | ||
19 | </div> | ||
20 | </div> | ||
21 | </div> | ||
22 | 6 | ||
23 | <div class="form-group"> | 7 | <div class="modal-body"> |
24 | <label i18n>Embed</label> | 8 | <div class="form-group"> |
25 | <div class="input-group input-group-sm"> | 9 | <label i18n>URL</label> |
26 | <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" /> | 10 | <div class="input-group input-group-sm"> |
27 | <div class="input-group-btn" placement="bottom right"> | 11 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" /> |
28 | <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search"> | 12 | <div class="input-group-append"> |
29 | <span class="glyphicon glyphicon-copy"></span> | 13 | <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> |
30 | </button> | 14 | <span class="glyphicon glyphicon-copy"></span> |
31 | </div> | 15 | </button> |
32 | </div> | ||
33 | </div> | 16 | </div> |
17 | </div> | ||
18 | </div> | ||
34 | 19 | ||
35 | <div i18n *ngIf="notSecure()" class="alert alert-warning"> | 20 | <div class="form-group"> |
36 | 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). | 21 | <label i18n>Embed</label> |
22 | <div class="input-group input-group-sm"> | ||
23 | <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" /> | ||
24 | <div class="input-group-append"> | ||
25 | <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> | ||
26 | <span class="glyphicon glyphicon-copy"></span> | ||
27 | </button> | ||
37 | </div> | 28 | </div> |
29 | </div> | ||
30 | </div> | ||
38 | 31 | ||
39 | <div class="form-group qr-code-group"> | 32 | <div i18n *ngIf="notSecure()" class="alert alert-warning"> |
40 | <label i18n>QR-Code</label> | 33 | 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). |
41 | <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode> | 34 | </div> |
42 | </div> | ||
43 | 35 | ||
44 | <div class="form-group inputs"> | 36 | <div class="form-group qr-code-group"> |
45 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | 37 | <label i18n>QR-Code</label> |
46 | Cancel | 38 | <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode> |
47 | </span> | ||
48 | </div> | ||
49 | </div> | ||
50 | </div> | 39 | </div> |
51 | </div> | 40 | </div> |
52 | </div> | 41 | |
42 | <div class="modal-footer inputs"> | ||
43 | <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span> | ||
44 | </div> | ||
45 | |||
46 | </ng-template> | ||
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 index c7f30bec5..a9e9b8498 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.scss +++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss | |||
@@ -1,7 +1,14 @@ | |||
1 | @import '~bootstrap/scss/functions'; | ||
2 | @import '~bootstrap/scss/variables'; | ||
3 | |||
1 | .action-button-cancel { | 4 | .action-button-cancel { |
2 | margin-right: 0 !important; | 5 | margin-right: 0 !important; |
3 | } | 6 | } |
4 | 7 | ||
8 | .btn-outline-secondary { | ||
9 | border-color: $input-border-color; | ||
10 | } | ||
11 | |||
5 | .qr-code-group { | 12 | .qr-code-group { |
6 | text-align: center; | 13 | text-align: center; |
7 | } | 14 | } |
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 5c988a43b..14f557f9a 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,11 +1,9 @@ | |||
1 | import { Component, Input, ViewChild } from '@angular/core' | 1 | import { Component, ElementRef, Input, ViewChild } from '@angular/core' |
2 | |||
3 | import { NotificationsService } from 'angular2-notifications' | 2 | import { NotificationsService } from 'angular2-notifications' |
4 | |||
5 | import { ModalDirective } from 'ngx-bootstrap/modal' | ||
6 | import { VideoDetails } from '../../../shared/video/video-details.model' | 3 | import { VideoDetails } from '../../../shared/video/video-details.model' |
7 | import { buildVideoEmbed } from '../../../../assets/player/utils' | 4 | import { buildVideoEmbed } from '../../../../assets/player/utils' |
8 | import { I18n } from '@ngx-translate/i18n-polyfill' | 5 | import { I18n } from '@ngx-translate/i18n-polyfill' |
6 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
9 | 7 | ||
10 | @Component({ | 8 | @Component({ |
11 | selector: 'my-video-share', | 9 | selector: 'my-video-share', |
@@ -15,9 +13,10 @@ import { I18n } from '@ngx-translate/i18n-polyfill' | |||
15 | export class VideoShareComponent { | 13 | export class VideoShareComponent { |
16 | @Input() video: VideoDetails = null | 14 | @Input() video: VideoDetails = null |
17 | 15 | ||
18 | @ViewChild('modal') modal: ModalDirective | 16 | @ViewChild('modal') modal: ElementRef |
19 | 17 | ||
20 | constructor ( | 18 | constructor ( |
19 | private modalService: NgbModal, | ||
21 | private notificationsService: NotificationsService, | 20 | private notificationsService: NotificationsService, |
22 | private i18n: I18n | 21 | private i18n: I18n |
23 | ) { | 22 | ) { |
@@ -25,11 +24,7 @@ export class VideoShareComponent { | |||
25 | } | 24 | } |
26 | 25 | ||
27 | show () { | 26 | show () { |
28 | this.modal.show() | 27 | this.modalService.open(this.modal) |
29 | } | ||
30 | |||
31 | hide () { | ||
32 | this.modal.hide() | ||
33 | } | 28 | } |
34 | 29 | ||
35 | getVideoIframeCode () { | 30 | getVideoIframeCode () { |
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html index 9bcfcea47..00c304709 100644 --- a/client/src/app/videos/+video-watch/modal/video-support.component.html +++ b/client/src/app/videos/+video-watch/modal/video-support.component.html | |||
@@ -1,22 +1,12 @@ | |||
1 | <div bsModal #modal="bs-modal" class="modal" tabindex="-1"> | 1 | <ng-template #modal let-hide="close"> |
2 | <div class="modal-dialog"> | 2 | <div class="modal-header"> |
3 | <div class="modal-content"> | 3 | <h4 i18n class="modal-title">Support</h4> |
4 | 4 | <span class="close" aria-label="Close" role="button" (click)="hide()"></span> | |
5 | <div class="modal-header"> | 5 | </div> |
6 | <span class="close" aria-hidden="true" (click)="hide()"></span> | ||
7 | <h4 i18n class="modal-title">Support</h4> | ||
8 | </div> | ||
9 | |||
10 | <div class="modal-body"> | ||
11 | 6 | ||
12 | <div [innerHTML]="videoHTMLSupport"></div> | 7 | <div class="modal-body" [innerHTML]="videoHTMLSupport"></div> |
13 | 8 | ||
14 | <div class="form-group inputs"> | 9 | <div class="modal-footer inputs"> |
15 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | 10 | <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span> |
16 | Cancel | ||
17 | </span> | ||
18 | </div> | ||
19 | </div> | ||
20 | </div> | ||
21 | </div> | 11 | </div> |
22 | </div> | 12 | </ng-template> |
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 c515298a0..2d400e0be 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 | |||
@@ -1,8 +1,8 @@ | |||
1 | import { Component, Input, ViewChild } from '@angular/core' | 1 | import { Component, Input, ViewChild } from '@angular/core' |
2 | import { MarkdownService } from '@app/videos/shared' | 2 | import { MarkdownService } from '@app/videos/shared' |
3 | 3 | ||
4 | import { ModalDirective } from 'ngx-bootstrap/modal' | ||
5 | import { VideoDetails } from '../../../shared/video/video-details.model' | 4 | import { VideoDetails } from '../../../shared/video/video-details.model' |
5 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
6 | 6 | ||
7 | @Component({ | 7 | @Component({ |
8 | selector: 'my-video-support', | 8 | selector: 'my-video-support', |
@@ -12,21 +12,19 @@ import { VideoDetails } from '../../../shared/video/video-details.model' | |||
12 | export class VideoSupportComponent { | 12 | export class VideoSupportComponent { |
13 | @Input() video: VideoDetails = null | 13 | @Input() video: VideoDetails = null |
14 | 14 | ||
15 | @ViewChild('modal') modal: ModalDirective | 15 | @ViewChild('modal') modal: NgbModal |
16 | 16 | ||
17 | videoHTMLSupport = '' | 17 | videoHTMLSupport = '' |
18 | 18 | ||
19 | constructor (private markdownService: MarkdownService) { | 19 | constructor ( |
20 | private markdownService: MarkdownService, | ||
21 | private modalService: NgbModal | ||
22 | ) { | ||
20 | // empty | 23 | // empty |
21 | } | 24 | } |
22 | 25 | ||
23 | show () { | 26 | show () { |
24 | this.modal.show() | ||
25 | |||
26 | this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support) | 27 | this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support) |
27 | } | 28 | this.modalService.open(this.modal) |
28 | |||
29 | hide () { | ||
30 | this.modal.hide() | ||
31 | } | 29 | } |
32 | } | 30 | } |
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 5a132112d..dd0d628bd 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -76,48 +76,38 @@ | |||
76 | <span class="icon-text" i18n>Share</span> | 76 | <span class="icon-text" i18n>Share</span> |
77 | </div> | 77 | </div> |
78 | 78 | ||
79 | <div class="action-more" dropdown dropup="true" placement="right" role="button"> | 79 | <div class="action-more" ngbDropdown placement="top" role="button"> |
80 | <div class="action-button" dropdownToggle> | 80 | <div class="action-button" ngbDropdownToggle role="button"> |
81 | <span class="icon icon-more"></span> | 81 | <span class="icon icon-more"></span> |
82 | </div> | 82 | </div> |
83 | 83 | ||
84 | <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> | 84 | <div ngbDropdownMenu> |
85 | <li role="menuitem"> | 85 | <a class="dropdown-item" i18n-title title="Download the video" href="#" (click)="showDownloadModal($event)"> |
86 | <a class="dropdown-item" i18n-title title="Download the video" href="#" (click)="showDownloadModal($event)"> | 86 | <span class="icon icon-download"></span> <ng-container i18n>Download</ng-container> |
87 | <span class="icon icon-download"></span> <ng-container i18n>Download</ng-container> | 87 | </a> |
88 | </a> | 88 | |
89 | </li> | 89 | <a *ngIf="isUserLoggedIn()" class="dropdown-item" i18n-title title="Report this video" href="#" (click)="showReportModal($event)"> |
90 | 90 | <span class="icon icon-alert"></span> <ng-container i18n>Report</ng-container> | |
91 | <li *ngIf="isUserLoggedIn()" role="menuitem"> | 91 | </a> |
92 | <a class="dropdown-item" i18n-title title="Report this video" href="#" (click)="showReportModal($event)"> | 92 | |
93 | <span class="icon icon-alert"></span> <ng-container i18n>Report</ng-container> | 93 | <a *ngIf="isVideoBlacklistable()" class="dropdown-item" i18n-title title="Blacklist this video" href="#" (click)="blacklistVideo($event)"> |
94 | </a> | 94 | <span class="icon icon-blacklist"></span> <ng-container i18n>Blacklist</ng-container> |
95 | </li> | 95 | </a> |
96 | 96 | ||
97 | <li *ngIf="isVideoBlacklistable()" role="menuitem"> | 97 | <a *ngIf="isVideoUpdatable()" class="dropdown-item" i18n-title title="Update this video" href="#" [routerLink]="[ '/videos/update', video.uuid ]"> |
98 | <a class="dropdown-item" i18n-title title="Blacklist this video" href="#" (click)="blacklistVideo($event)"> | 98 | <span class="icon icon-edit"></span> <ng-container i18n>Update</ng-container> |
99 | <span class="icon icon-blacklist"></span> <ng-container i18n>Blacklist</ng-container> | 99 | </a> |
100 | </a> | 100 | |
101 | </li> | 101 | <a *ngIf="isVideoRemovable()" class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)"> |
102 | 102 | <span class="icon icon-blacklist"></span> <ng-container i18n>Delete</ng-container> | |
103 | <li *ngIf="isVideoUpdatable()" role="menuitem"> | 103 | </a> |
104 | <a class="dropdown-item" i18n-title title="Update this video" href="#" [routerLink]="[ '/videos/update', video.uuid ]"> | 104 | </div> |
105 | <span class="icon icon-edit"></span> <ng-container i18n>Update</ng-container> | ||
106 | </a> | ||
107 | </li> | ||
108 | |||
109 | <li *ngIf="isVideoRemovable()" role="menuitem"> | ||
110 | <a class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)"> | ||
111 | <span class="icon icon-blacklist"></span> <ng-container i18n>Delete</ng-container> | ||
112 | </a> | ||
113 | </li> | ||
114 | </ul> | ||
115 | </div> | 105 | </div> |
116 | </div> | 106 | </div> |
117 | 107 | ||
118 | <div | 108 | <div |
119 | class="video-info-likes-dislikes-bar" | 109 | class="video-info-likes-dislikes-bar" |
120 | *ngIf="video.likes !== 0 || video.dislikes !== 0" [tooltip]="likesBarTooltipText"> | 110 | *ngIf="video.likes !== 0 || video.dislikes !== 0" [ngbTooltip]="likesBarTooltipText"> |
121 | <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> | 111 | <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> |
122 | </div> | 112 | </div> |
123 | </div> | 113 | </div> |
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 b27a70197..7d269b31f 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -177,6 +177,10 @@ | |||
177 | padding: 0 10px 0 10px; | 177 | padding: 0 10px 0 10px; |
178 | white-space: nowrap; | 178 | white-space: nowrap; |
179 | 179 | ||
180 | &::after { | ||
181 | display: none; | ||
182 | } | ||
183 | |||
180 | .icon { | 184 | .icon { |
181 | @include icon(21px); | 185 | @include icon(21px); |
182 | 186 | ||
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 4af993043..09d5133e4 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts | |||
@@ -1,7 +1,6 @@ | |||
1 | import { NgModule } from '@angular/core' | 1 | import { NgModule } from '@angular/core' |
2 | import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service' | 2 | import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service' |
3 | import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' | 3 | import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' |
4 | import { TooltipModule } from 'ngx-bootstrap/tooltip' | ||
5 | import { ClipboardModule } from 'ngx-clipboard' | 4 | import { ClipboardModule } from 'ngx-clipboard' |
6 | import { SharedModule } from '../../shared' | 5 | import { SharedModule } from '../../shared' |
7 | import { MarkdownService } from '../shared' | 6 | import { MarkdownService } from '../shared' |
@@ -12,18 +11,17 @@ import { VideoCommentsComponent } from './comment/video-comments.component' | |||
12 | import { VideoDownloadComponent } from './modal/video-download.component' | 11 | import { VideoDownloadComponent } from './modal/video-download.component' |
13 | import { VideoReportComponent } from './modal/video-report.component' | 12 | import { VideoReportComponent } from './modal/video-report.component' |
14 | import { VideoShareComponent } from './modal/video-share.component' | 13 | import { VideoShareComponent } from './modal/video-share.component' |
15 | |||
16 | import { VideoWatchRoutingModule } from './video-watch-routing.module' | 14 | import { VideoWatchRoutingModule } from './video-watch-routing.module' |
17 | |||
18 | import { VideoWatchComponent } from './video-watch.component' | 15 | import { VideoWatchComponent } from './video-watch.component' |
19 | import { NgxQRCodeModule } from 'ngx-qrcode2' | 16 | import { NgxQRCodeModule } from 'ngx-qrcode2' |
17 | import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' | ||
20 | 18 | ||
21 | @NgModule({ | 19 | @NgModule({ |
22 | imports: [ | 20 | imports: [ |
23 | VideoWatchRoutingModule, | 21 | VideoWatchRoutingModule, |
24 | SharedModule, | 22 | SharedModule, |
25 | ClipboardModule, | 23 | ClipboardModule, |
26 | TooltipModule.forRoot(), | 24 | NgbTooltipModule.forRoot(), |
27 | NgxQRCodeModule | 25 | NgxQRCodeModule |
28 | ], | 26 | ], |
29 | 27 | ||