aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-08-09 14:55:06 +0200
committerChocobozzz <me@florianbigard.com>2018-08-09 14:55:06 +0200
commit63347a0ff966c7863e5b7431effa1cb0668df893 (patch)
tree8f89d9b4a73f7157103574c05832eff21e338272 /client/src/app/videos
parentb34a444e291c8ec90b4c2c965f7d0d6904d1faa7 (diff)
downloadPeerTube-63347a0ff966c7863e5b7431effa1cb0668df893.tar.gz
PeerTube-63347a0ff966c7863e5b7431effa1cb0668df893.tar.zst
PeerTube-63347a0ff966c7863e5b7431effa1cb0668df893.zip
Migrate to bootstrap 4 and ng-bootstrap
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html76
-rw-r--r--client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts13
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html380
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss10
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.module.ts2
-rw-r--r--client/src/app/videos/+video-watch/modal/video-download.component.html75
-rw-r--r--client/src/app/videos/+video-watch/modal/video-download.component.ts14
-rw-r--r--client/src/app/videos/+video-watch/modal/video-report.component.html55
-rw-r--r--client/src/app/videos/+video-watch/modal/video-report.component.ts13
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.html82
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.scss7
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.ts15
-rw-r--r--client/src/app/videos/+video-watch/modal/video-support.component.html28
-rw-r--r--client/src/app/videos/+video-watch/modal/video-support.component.ts16
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html58
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss4
-rw-r--r--client/src/app/videos/+video-watch/video-watch.module.ts6
17 files changed, 410 insertions, 444 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
index 9cd303b29..30aefdbfc 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -1,47 +1,45 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1"> 1<ng-template #modal>
2 <div class="modal-dialog"> 2 <ng-container [formGroup]="form">
3 <div class="modal-content" [formGroup]="form">
4 3
5 <div class="modal-header"> 4 <div class="modal-header">
6 <span class="close" aria-hidden="true" (click)="hide()"></span> 5 <h4 i18n class="modal-title">Add caption</h4>
7 <h4 i18n class="modal-title">Add caption</h4> 6 <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
8 </div> 7 </div>
9 8
10 <div class="modal-body"> 9 <div class="modal-body">
11 <label i18n for="language">Language</label> 10 <label i18n for="language">Language</label>
12 <div class="peertube-select-container"> 11 <div class="peertube-select-container">
13 <select id="language" formControlName="language"> 12 <select id="language" formControlName="language">
14 <option></option> 13 <option></option>
15 <option *ngFor="let language of videoCaptionLanguages" [value]="language.id">{{ language.label }}</option> 14 <option *ngFor="let language of videoCaptionLanguages" [value]="language.id">{{ language.label }}</option>
16 </select> 15 </select>
17 </div> 16 </div>
18 17
19 <div *ngIf="formErrors.language" class="form-error"> 18 <div *ngIf="formErrors.language" class="form-error">
20 {{ formErrors.language }} 19 {{ formErrors.language }}
21 </div> 20 </div>
22 21
23 <div class="caption-file"> 22 <div class="caption-file">
24 <my-reactive-file 23 <my-reactive-file
25 formControlName="captionfile" inputName="captionfile" i18n-inputLabel inputLabel="Select the caption file" 24 formControlName="captionfile" inputName="captionfile" i18n-inputLabel inputLabel="Select the caption file"
26 [extensions]="videoCaptionExtensions" [maxFileSize]="videoCaptionMaxSize" [displayFilename]="true" 25 [extensions]="videoCaptionExtensions" [maxFileSize]="videoCaptionMaxSize" [displayFilename]="true"
27 ></my-reactive-file> 26 ></my-reactive-file>
28 </div> 27 </div>
29 28
30 <div *ngIf="isReplacingExistingCaption()" class="warning-replace-caption" i18n> 29 <div *ngIf="isReplacingExistingCaption()" class="warning-replace-caption" i18n>
31 This will replace an existing caption! 30 This will replace an existing caption!
32 </div> 31 </div>
32 </div>
33 33
34 <div class="form-group inputs"> 34 <div class="modal-footer inputs">
35 <span i18n class="action-button action-button-cancel" (click)="hide()"> 35 <span i18n class="action-button action-button-cancel" (click)="hide()">
36 Cancel 36 Cancel
37 </span> 37 </span>
38 38
39 <input 39 <input
40 type="submit" i18n-value value="Add this caption" class="action-button-submit" 40 type="submit" i18n-value value="Add this caption" class="action-button-submit"
41 [disabled]="!form.valid" (click)="addCaption()" 41 [disabled]="!form.valid" (click)="addCaption()"
42 > 42 >
43 </div>
44 </div>
45 </div> 43 </div>
46 </div> 44 </ng-container>
47</div> 45</ng-template>
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
index d084a4908..07c33030a 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
@@ -1,10 +1,10 @@
1import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' 1import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
2import { ModalDirective } from 'ngx-bootstrap/modal'
3import { FormReactive } from '@app/shared' 2import { FormReactive } from '@app/shared'
4import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' 3import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
5import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service' 4import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service'
6import { ServerService } from '@app/core' 5import { ServerService } from '@app/core'
7import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' 6import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model'
7import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
8 8
9@Component({ 9@Component({
10 selector: 'my-video-caption-add-modal', 10 selector: 'my-video-caption-add-modal',
@@ -17,14 +17,16 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
17 17
18 @Output() captionAdded = new EventEmitter<VideoCaptionEdit>() 18 @Output() captionAdded = new EventEmitter<VideoCaptionEdit>()
19 19
20 @ViewChild('modal') modal: ModalDirective 20 @ViewChild('modal') modal: ElementRef
21 21
22 videoCaptionLanguages = [] 22 videoCaptionLanguages = []
23 23
24 private openedModal: NgbModalRef
24 private closingModal = false 25 private closingModal = false
25 26
26 constructor ( 27 constructor (
27 protected formValidatorService: FormValidatorService, 28 protected formValidatorService: FormValidatorService,
29 private modalService: NgbModal,
28 private serverService: ServerService, 30 private serverService: ServerService,
29 private videoCaptionsValidatorsService: VideoCaptionsValidatorsService 31 private videoCaptionsValidatorsService: VideoCaptionsValidatorsService
30 ) { 32 ) {
@@ -51,13 +53,12 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
51 show () { 53 show () {
52 this.closingModal = false 54 this.closingModal = false
53 55
54 this.modal.show() 56 this.openedModal = this.modalService.open(this.modal, { keyboard: false })
55 } 57 }
56 58
57 hide () { 59 hide () {
58 this.closingModal = true 60 this.closingModal = true
59 61 this.openedModal.close()
60 this.modal.hide()
61 } 62 }
62 63
63 isReplacingExistingCaption () { 64 isReplacingExistingCaption () {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 2c40747ba..26c9e977e 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -1,215 +1,223 @@
1<div class="video-edit row" [formGroup]="form"> 1<div class="video-edit" [formGroup]="form">
2 <tabset class="root-tabset bootstrap"> 2 <ngb-tabset class="root-tabset bootstrap">
3 3
4 <tab i18n-heading heading="Basic info"> 4 <ngb-tab i18n-title title="Basic info">
5 <div class="col-md-8"> 5 <ng-template ngbTabContent>
6 <div class="form-group"> 6 <div class="row">
7 <label i18n for="name">Title</label> 7 <div class="col-md-8">
8 <input type="text" id="name" formControlName="name" /> 8 <div class="form-group">
9 <div *ngIf="formErrors.name" class="form-error"> 9 <label i18n for="name">Title</label>
10 {{ formErrors.name }} 10 <input type="text" id="name" formControlName="name" />
11 <div *ngIf="formErrors.name" class="form-error">
12 {{ formErrors.name }}
13 </div>
14 </div>
15
16 <div class="form-group">
17 <label i18n class="label-tags">Tags</label> <span i18n>(press Enter to add)</span>
18 <tag-input
19 [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
20 formControlName="tags" maxItems="5" modelAsStrings="true"
21 ></tag-input>
22 </div>
23
24 <div class="form-group">
25 <label i18n for="description">Description</label>
26 <my-help helpType="markdownText" i18n-preHtml preHtml="Video descriptions are truncated by default and require manual action to expand them."></my-help>
27 <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
28
29 <div *ngIf="formErrors.description" class="form-error">
30 {{ formErrors.description }}
31 </div>
32 </div>
11 </div> 33 </div>
12 </div>
13
14 <div class="form-group">
15 <label i18n class="label-tags">Tags</label> <span i18n>(press Enter to add)</span>
16 <tag-input
17 [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
18 formControlName="tags" maxItems="5" modelAsStrings="true"
19 ></tag-input>
20 </div>
21 34
22 <div class="form-group"> 35 <div class="col-md-4">
23 <label i18n for="description">Description</label> 36 <div class="form-group">
24 <my-help helpType="markdownText" i18n-preHtml preHtml="Video descriptions are truncated by default and require manual action to expand them."></my-help> 37 <label i18n>Channel</label>
25 <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea> 38 <div class="peertube-select-container">
39 <select formControlName="channelId">
40 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
41 </select>
42 </div>
43 </div>
44
45 <div class="form-group">
46 <label i18n for="category">Category</label>
47 <div class="peertube-select-container">
48 <select id="category" formControlName="category">
49 <option></option>
50 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
51 </select>
52 </div>
53
54 <div *ngIf="formErrors.category" class="form-error">
55 {{ formErrors.category }}
56 </div>
57 </div>
58
59 <div class="form-group">
60 <label i18n for="licence">Licence</label>
61 <div class="peertube-select-container">
62 <select id="licence" formControlName="licence">
63 <option></option>
64 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
65 </select>
66 </div>
67
68 <div *ngIf="formErrors.licence" class="form-error">
69 {{ formErrors.licence }}
70 </div>
71 </div>
72
73 <div class="form-group">
74 <label i18n for="language">Language</label>
75 <div class="peertube-select-container">
76 <select id="language" formControlName="language">
77 <option></option>
78 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
79 </select>
80 </div>
81
82 <div *ngIf="formErrors.language" class="form-error">
83 {{ formErrors.language }}
84 </div>
85 </div>
86
87 <div class="form-group">
88 <label i18n for="privacy">Privacy</label>
89 <div class="peertube-select-container">
90 <select id="privacy" formControlName="privacy">
91 <option></option>
92 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
93 <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
94 </select>
95 </div>
96
97 <div *ngIf="formErrors.privacy" class="form-error">
98 {{ formErrors.privacy }}
99 </div>
100 </div>
101
102 <div *ngIf="schedulePublicationEnabled" class="form-group">
103 <label i18n for="schedulePublicationAt">Schedule publication ({{ calendarTimezone }})</label>
104 <p-calendar
105 id="schedulePublicationAt" formControlName="schedulePublicationAt" [dateFormat]="calendarDateFormat"
106 [locale]="calendarLocale" [minDate]="minScheduledDate" [showTime]="true" [hideOnDateTimeSelect]="true"
107 >
108 </p-calendar>
109
110 <div *ngIf="formErrors.schedulePublicationAt" class="form-error">
111 {{ formErrors.schedulePublicationAt }}
112 </div>
113 </div>
114
115 <my-peertube-checkbox
116 inputName="nsfw" formControlName="nsfw"
117 i18n-labelText labelText="This video contains mature or explicit content"
118 i18n-helpHtml helpHtml="Some instances do not list videos containing mature or explicit content by default."
119 ></my-peertube-checkbox>
120
121 <my-peertube-checkbox
122 inputName="commentsEnabled" formControlName="commentsEnabled"
123 i18n-labelText labelText="Enable video comments"
124 ></my-peertube-checkbox>
125
126 <my-peertube-checkbox
127 inputName="waitTranscoding" formControlName="waitTranscoding"
128 i18n-labelText labelText="Wait transcoding before publishing the video"
129 i18n-helpHtml helpHtml="If you decide not to wait for transcoding before publishing the video, it could be unplayable until transcoding ends."
130 ></my-peertube-checkbox>
26 131
27 <div *ngIf="formErrors.description" class="form-error">
28 {{ formErrors.description }}
29 </div> 132 </div>
30 </div> 133 </div>
31 </div> 134 </ng-template>
32 135 </ngb-tab>
33 <div class="col-md-4"> 136
34 <div class="form-group"> 137 <ngb-tab i18n-title title="Captions">
35 <label i18n>Channel</label> 138 <ng-template ngbTabContent>
36 <div class="peertube-select-container"> 139 <div class="captions">
37 <select formControlName="channelId"> 140
38 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> 141 <div class="captions-header">
39 </select> 142 <a (click)="openAddCaptionModal()" class="create-caption">
143 <span class="icon icon-add"></span>
144 <ng-container i18n>Add another caption</ng-container>
145 </a>
40 </div> 146 </div>
41 </div>
42 147
43 <div class="form-group"> 148 <div class="form-group" *ngFor="let videoCaption of videoCaptions">
44 <label i18n for="category">Category</label>
45 <div class="peertube-select-container">
46 <select id="category" formControlName="category">
47 <option></option>
48 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
49 </select>
50 </div>
51 149
52 <div *ngIf="formErrors.category" class="form-error"> 150 <div class="caption-entry">
53 {{ formErrors.category }} 151 <ng-container *ngIf="!videoCaption.action">
54 </div> 152 <a
55 </div> 153 i18n-title title="See the subtitle file" class="caption-entry-label" target="_blank" rel="noopener noreferrer"
154 [href]="videoCaption.captionPath"
155 >{{ videoCaption.language.label }}</a>
56 156
57 <div class="form-group"> 157 <div class="caption-entry-state">Already uploaded &#10004;</div>
58 <label i18n for="licence">Licence</label>
59 <div class="peertube-select-container">
60 <select id="licence" formControlName="licence">
61 <option></option>
62 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
63 </select>
64 </div>
65 158
66 <div *ngIf="formErrors.licence" class="form-error"> 159 <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</span>
67 {{ formErrors.licence }} 160 </ng-container>
68 </div>
69 </div>
70 161
71 <div class="form-group"> 162 <ng-container *ngIf="videoCaption.action === 'CREATE'">
72 <label i18n for="language">Language</label> 163 <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
73 <div class="peertube-select-container">
74 <select id="language" formControlName="language">
75 <option></option>
76 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
77 </select>
78 </div>
79 164
80 <div *ngIf="formErrors.language" class="form-error"> 165 <div class="caption-entry-state caption-entry-state-create">Will be created on update</div>
81 {{ formErrors.language }}
82 </div>
83 </div>
84 166
85 <div class="form-group"> 167 <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</span>
86 <label i18n for="privacy">Privacy</label> 168 </ng-container>
87 <div class="peertube-select-container">
88 <select id="privacy" formControlName="privacy">
89 <option></option>
90 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
91 <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
92 </select>
93 </div>
94 169
95 <div *ngIf="formErrors.privacy" class="form-error"> 170 <ng-container *ngIf="videoCaption.action === 'REMOVE'">
96 {{ formErrors.privacy }} 171 <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
97 </div>
98 </div>
99 172
100 <div *ngIf="schedulePublicationEnabled" class="form-group"> 173 <div class="caption-entry-state caption-entry-state-delete">Will be deleted on update</div>
101 <label i18n for="schedulePublicationAt">Schedule publication ({{ calendarTimezone }})</label>
102 <p-calendar
103 id="schedulePublicationAt" formControlName="schedulePublicationAt" [dateFormat]="calendarDateFormat"
104 [locale]="calendarLocale" [minDate]="minScheduledDate" [showTime]="true" [hideOnDateTimeSelect]="true"
105 >
106 </p-calendar>
107 174
108 <div *ngIf="formErrors.schedulePublicationAt" class="form-error"> 175 <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</span>
109 {{ formErrors.schedulePublicationAt }} 176 </ng-container>
177 </div>
110 </div> 178 </div>
111 </div>
112 179
113 <my-peertube-checkbox 180 <div class="no-caption" *ngIf="videoCaptions?.length === 0">
114 inputName="nsfw" formControlName="nsfw" 181 No captions for now.
115 i18n-labelText labelText="This video contains mature or explicit content"
116 i18n-helpHtml helpHtml="Some instances do not list videos containing mature or explicit content by default."
117 ></my-peertube-checkbox>
118
119 <my-peertube-checkbox
120 inputName="commentsEnabled" formControlName="commentsEnabled"
121 i18n-labelText labelText="Enable video comments"
122 ></my-peertube-checkbox>
123
124 <my-peertube-checkbox
125 inputName="waitTranscoding" formControlName="waitTranscoding"
126 i18n-labelText labelText="Wait transcoding before publishing the video"
127 i18n-helpHtml helpHtml="If you decide not to wait for transcoding before publishing the video, it could be unplayable until transcoding ends."
128 ></my-peertube-checkbox>
129
130 </div>
131 </tab>
132
133 <tab i18n-heading heading="Captions">
134 <div class="col-md-12 captions">
135
136 <div class="captions-header">
137 <a (click)="openAddCaptionModal()" class="create-caption">
138 <span class="icon icon-add"></span>
139 <ng-container i18n>Add another caption</ng-container>
140 </a>
141 </div>
142
143 <div class="form-group" *ngFor="let videoCaption of videoCaptions">
144
145 <div class="caption-entry">
146 <ng-container *ngIf="!videoCaption.action">
147 <a
148 i18n-title title="See the subtitle file" class="caption-entry-label" target="_blank" rel="noopener noreferrer"
149 [href]="videoCaption.captionPath"
150 >{{ videoCaption.language.label }}</a>
151
152 <div class="caption-entry-state">Already uploaded &#10004;</div>
153
154 <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</span>
155 </ng-container>
156
157 <ng-container *ngIf="videoCaption.action === 'CREATE'">
158 <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
159
160 <div class="caption-entry-state caption-entry-state-create">Will be created on update</div>
161
162 <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</span>
163 </ng-container>
164
165 <ng-container *ngIf="videoCaption.action === 'REMOVE'">
166 <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
167
168 <div class="caption-entry-state caption-entry-state-delete">Will be deleted on update</div>
169
170 <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</span>
171 </ng-container>
172 </div> 182 </div>
173 </div>
174
175 <div class="no-caption" *ngIf="videoCaptions?.length === 0">
176 No captions for now.
177 </div>
178 183
179 </div>
180 </tab>
181
182 <tab i18n-heading heading="Advanced settings">
183 <div class="col-md-12 advanced-settings">
184 <div class="form-group">
185 <my-video-image
186 i18n-inputLabel inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
187 previewWidth="200px" previewHeight="110px"
188 ></my-video-image>
189 </div> 184 </div>
185 </ng-template>
186 </ngb-tab>
187
188 <ngb-tab i18n-title title="Advanced settings">
189 <ng-template ngbTabContent>
190 <div class="advanced-settings">
191 <div class="form-group">
192 <my-video-image
193 i18n-inputLabel inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
194 previewWidth="200px" previewHeight="110px"
195 ></my-video-image>
196 </div>
190 197
191 <div class="form-group"> 198 <div class="form-group">
192 <my-video-image 199 <my-video-image
193 i18n-inputLabel inputLabel="Upload preview" inputName="previewfile" formControlName="previewfile" 200 i18n-inputLabel inputLabel="Upload preview" inputName="previewfile" formControlName="previewfile"
194 previewWidth="360px" previewHeight="200px" 201 previewWidth="360px" previewHeight="200px"
195 ></my-video-image> 202 ></my-video-image>
196 </div> 203 </div>
197 204
198 <div class="form-group"> 205 <div class="form-group">
199 <label i18n for="support">Support</label> 206 <label i18n for="support">Support</label>
200 <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help> 207 <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
201 <my-markdown-textarea 208 <my-markdown-textarea
202 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced" 209 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
203 [classes]="{ 'input-error': formErrors['support'] }" 210 [classes]="{ 'input-error': formErrors['support'] }"
204 ></my-markdown-textarea> 211 ></my-markdown-textarea>
205 <div *ngIf="formErrors.support" class="form-error"> 212 <div *ngIf="formErrors.support" class="form-error">
206 {{ formErrors.support }} 213 {{ formErrors.support }}
214 </div>
207 </div> 215 </div>
208 </div> 216 </div>
209 </div> 217 </ng-template>
210 </tab> 218 </ngb-tab>
211 219
212 </tabset> 220 </ngb-tabset>
213 221
214</div> 222</div>
215 223
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index f3d9ee44a..4d1871231 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -111,6 +111,8 @@
111 border: none; 111 border: none;
112 padding: 0; 112 padding: 0;
113 outline: 0; 113 outline: 0;
114 color: inherit;
115 font-weight: $font-semibold;
114 } 116 }
115 117
116 .icon.icon-validate { 118 .icon.icon-validate {
@@ -143,15 +145,7 @@ p-calendar {
143 145
144/deep/ { 146/deep/ {
145 .root-tabset > .nav { 147 .root-tabset > .nav {
146 margin-left: 15px;
147 margin-bottom: 15px; 148 margin-bottom: 15px;
148
149 .nav-link {
150 display: flex !important;
151 align-items: center;
152 height: 30px !important;
153 padding: 0 15px !important;
154 }
155 } 149 }
156 150
157 .ng2-tag-input { 151 .ng2-tag-input {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index f6bd65fdc..f441d3fde 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -1,5 +1,4 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2import { TabsModule } from 'ngx-bootstrap/tabs'
3import { TagInputModule } from 'ngx-chips' 2import { TagInputModule } from 'ngx-chips'
4import { SharedModule } from '../../../shared/' 3import { SharedModule } from '../../../shared/'
5import { VideoEditComponent } from './video-edit.component' 4import { VideoEditComponent } from './video-edit.component'
@@ -23,7 +22,6 @@ import { VideoCaptionAddModalComponent } from './video-caption-add-modal.compone
23 22
24 exports: [ 23 exports: [
25 TagInputModule, 24 TagInputModule,
26 TabsModule,
27 CalendarModule, 25 CalendarModule,
28 26
29 VideoEditComponent 27 VideoEditComponent
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 @@
1import { Component, Input, OnInit, ViewChild } from '@angular/core' 1import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'
2import { ModalDirective } from 'ngx-bootstrap/modal'
3import { VideoDetails } from '../../../shared/video/video-details.model' 2import { VideoDetails } from '../../../shared/video/video-details.model'
3import { 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'
10export class VideoDownloadComponent implements OnInit { 10export 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 @@
1import { Component, Input, OnInit, ViewChild } from '@angular/core' 1import { Component, Input, OnInit, ViewChild } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications' 2import { NotificationsService } from 'angular2-notifications'
3import { ModalDirective } from 'ngx-bootstrap/modal'
4import { FormReactive, VideoAbuseService } from '../../../shared/index' 3import { FormReactive, VideoAbuseService } from '../../../shared/index'
5import { VideoDetails } from '../../../shared/video/video-details.model' 4import { VideoDetails } from '../../../shared/video/video-details.model'
6import { I18n } from '@ngx-translate/i18n-polyfill' 5import { I18n } from '@ngx-translate/i18n-polyfill'
7import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' 6import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
8import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service' 7import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service'
8import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
9import { 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
15export class VideoReportComponent extends FormReactive implements OnInit { 16export 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 @@
1import { Component, Input, ViewChild } from '@angular/core' 1import { Component, ElementRef, Input, ViewChild } from '@angular/core'
2
3import { NotificationsService } from 'angular2-notifications' 2import { NotificationsService } from 'angular2-notifications'
4
5import { ModalDirective } from 'ngx-bootstrap/modal'
6import { VideoDetails } from '../../../shared/video/video-details.model' 3import { VideoDetails } from '../../../shared/video/video-details.model'
7import { buildVideoEmbed } from '../../../../assets/player/utils' 4import { buildVideoEmbed } from '../../../../assets/player/utils'
8import { I18n } from '@ngx-translate/i18n-polyfill' 5import { I18n } from '@ngx-translate/i18n-polyfill'
6import { 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'
15export class VideoShareComponent { 13export 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 @@
1import { Component, Input, ViewChild } from '@angular/core' 1import { Component, Input, ViewChild } from '@angular/core'
2import { MarkdownService } from '@app/videos/shared' 2import { MarkdownService } from '@app/videos/shared'
3 3
4import { ModalDirective } from 'ngx-bootstrap/modal'
5import { VideoDetails } from '../../../shared/video/video-details.model' 4import { VideoDetails } from '../../../shared/video/video-details.model'
5import { 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'
12export class VideoSupportComponent { 12export 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 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service' 2import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service'
3import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' 3import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
4import { TooltipModule } from 'ngx-bootstrap/tooltip'
5import { ClipboardModule } from 'ngx-clipboard' 4import { ClipboardModule } from 'ngx-clipboard'
6import { SharedModule } from '../../shared' 5import { SharedModule } from '../../shared'
7import { MarkdownService } from '../shared' 6import { MarkdownService } from '../shared'
@@ -12,18 +11,17 @@ import { VideoCommentsComponent } from './comment/video-comments.component'
12import { VideoDownloadComponent } from './modal/video-download.component' 11import { VideoDownloadComponent } from './modal/video-download.component'
13import { VideoReportComponent } from './modal/video-report.component' 12import { VideoReportComponent } from './modal/video-report.component'
14import { VideoShareComponent } from './modal/video-share.component' 13import { VideoShareComponent } from './modal/video-share.component'
15
16import { VideoWatchRoutingModule } from './video-watch-routing.module' 14import { VideoWatchRoutingModule } from './video-watch-routing.module'
17
18import { VideoWatchComponent } from './video-watch.component' 15import { VideoWatchComponent } from './video-watch.component'
19import { NgxQRCodeModule } from 'ngx-qrcode2' 16import { NgxQRCodeModule } from 'ngx-qrcode2'
17import { 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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 23:55:42 +0000