diff options
Diffstat (limited to 'client/src/app/videos/+video-watch')
7 files changed, 95 insertions, 7 deletions
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 new file mode 100644 index 000000000..16ad9502a --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-support.component.html | |||
@@ -0,0 +1,22 @@ | |||
1 | <div bsModal #modal="bs-modal" class="modal" tabindex="-1"> | ||
2 | <div class="modal-dialog"> | ||
3 | <div class="modal-content"> | ||
4 | |||
5 | <div class="modal-header"> | ||
6 | <span class="close" aria-hidden="true" (click)="hide()"></span> | ||
7 | <h4 class="modal-title">Support</h4> | ||
8 | </div> | ||
9 | |||
10 | <div class="modal-body"> | ||
11 | |||
12 | <div [innerHTML]="videoHTMLSupport"></div> | ||
13 | |||
14 | <div class="form-group inputs"> | ||
15 | <span class="action-button action-button-cancel" (click)="hide()"> | ||
16 | Cancel | ||
17 | </span> | ||
18 | </div> | ||
19 | </div> | ||
20 | </div> | ||
21 | </div> | ||
22 | </div> | ||
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.scss b/client/src/app/videos/+video-watch/modal/video-support.component.scss new file mode 100644 index 000000000..184e09027 --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-support.component.scss | |||
@@ -0,0 +1,3 @@ | |||
1 | .action-button-cancel { | ||
2 | margin-right: 0 !important; | ||
3 | } | ||
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 new file mode 100644 index 000000000..f805215b9 --- /dev/null +++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts | |||
@@ -0,0 +1,36 @@ | |||
1 | import { Component, Input, ViewChild } from '@angular/core' | ||
2 | import { MarkdownService } from '@app/videos/shared' | ||
3 | |||
4 | import { ModalDirective } from 'ngx-bootstrap/modal' | ||
5 | import { VideoDetails } from '../../../shared/video/video-details.model' | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-video-support', | ||
9 | templateUrl: './video-support.component.html', | ||
10 | styleUrls: [ './video-support.component.scss' ] | ||
11 | }) | ||
12 | export class VideoSupportComponent { | ||
13 | @Input() video: VideoDetails = null | ||
14 | |||
15 | @ViewChild('modal') modal: ModalDirective | ||
16 | |||
17 | videoHTMLSupport = '' | ||
18 | |||
19 | constructor (private markdownService: MarkdownService) { | ||
20 | // empty | ||
21 | } | ||
22 | |||
23 | show () { | ||
24 | this.modal.show() | ||
25 | |||
26 | if (this.video.support) { | ||
27 | this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support) | ||
28 | } else { | ||
29 | this.videoHTMLSupport = '' | ||
30 | } | ||
31 | } | ||
32 | |||
33 | hide () { | ||
34 | this.modal.hide() | ||
35 | } | ||
36 | } | ||
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 8c173d6b3..b8ec048b2 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -44,9 +44,14 @@ | |||
44 | <span class="icon icon-dislike" title="Dislike this video"></span> | 44 | <span class="icon icon-dislike" title="Dislike this video"></span> |
45 | </div> | 45 | </div> |
46 | 46 | ||
47 | <div (click)="showSupportModal()" class="action-button action-button-support"> | ||
48 | <span class="icon icon-support"></span> | ||
49 | <span class="icon-text">Support</span> | ||
50 | </div> | ||
51 | |||
47 | <div (click)="showShareModal()" class="action-button action-button-share"> | 52 | <div (click)="showShareModal()" class="action-button action-button-share"> |
48 | <span class="icon icon-share"></span> | 53 | <span class="icon icon-share"></span> |
49 | Share | 54 | <span class="icon-text">Share</span> |
50 | </div> | 55 | </div> |
51 | 56 | ||
52 | <div class="action-more" dropdown dropup="true" placement="right"> | 57 | <div class="action-more" dropdown dropup="true" placement="right"> |
@@ -175,6 +180,7 @@ | |||
175 | </div> | 180 | </div> |
176 | 181 | ||
177 | <ng-template [ngIf]="video !== null"> | 182 | <ng-template [ngIf]="video !== null"> |
183 | <my-video-support #videoSupportModal [video]="video"></my-video-support> | ||
178 | <my-video-share #videoShareModal [video]="video"></my-video-share> | 184 | <my-video-share #videoShareModal [video]="video"></my-video-share> |
179 | <my-video-download #videoDownloadModal [video]="video"></my-video-download> | 185 | <my-video-download #videoDownloadModal [video]="video"></my-video-download> |
180 | <my-video-report #videoReportModal [video]="video"></my-video-report> | 186 | <my-video-report #videoReportModal [video]="video"></my-video-report> |
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 bc737ccd5..eb701e0ab 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -99,6 +99,7 @@ | |||
99 | font-weight: $font-semibold; | 99 | font-weight: $font-semibold; |
100 | display: inline-block; | 100 | display: inline-block; |
101 | padding: 0 10px 0 10px; | 101 | padding: 0 10px 0 10px; |
102 | white-space: nowrap; | ||
102 | 103 | ||
103 | .icon { | 104 | .icon { |
104 | @include icon(21px); | 105 | @include icon(21px); |
@@ -114,6 +115,10 @@ | |||
114 | background-image: url('../../../assets/images/video/dislike-grey.svg'); | 115 | background-image: url('../../../assets/images/video/dislike-grey.svg'); |
115 | } | 116 | } |
116 | 117 | ||
118 | &.icon-support { | ||
119 | background-image: url('../../../assets/images/video/heart.svg'); | ||
120 | } | ||
121 | |||
117 | &.icon-share { | 122 | &.icon-share { |
118 | background-image: url('../../../assets/images/video/share.svg'); | 123 | background-image: url('../../../assets/images/video/share.svg'); |
119 | } | 124 | } |
@@ -249,11 +254,7 @@ | |||
249 | } | 254 | } |
250 | 255 | ||
251 | 256 | ||
252 | @media screen and (max-width: 1300px) { | 257 | @media screen and (max-width: 1600px) { |
253 | .other-videos { | ||
254 | display: none; | ||
255 | } | ||
256 | |||
257 | .video-bottom { | 258 | .video-bottom { |
258 | .video-info { | 259 | .video-info { |
259 | margin-right: 0; | 260 | margin-right: 0; |
@@ -288,6 +289,12 @@ | |||
288 | } | 289 | } |
289 | } | 290 | } |
290 | 291 | ||
292 | @media screen and (max-width: 1200px) { | ||
293 | .other-videos { | ||
294 | display: none; | ||
295 | } | ||
296 | } | ||
297 | |||
291 | @media screen and (max-width: 600px) { | 298 | @media screen and (max-width: 600px) { |
292 | .video-bottom { | 299 | .video-bottom { |
293 | margin: 20px 0 0 0; | 300 | margin: 20px 0 0 0; |
@@ -304,3 +311,9 @@ | |||
304 | } | 311 | } |
305 | } | 312 | } |
306 | } | 313 | } |
314 | |||
315 | @media screen and (max-width: 450px) { | ||
316 | .video-bottom .action-button .icon-text { | ||
317 | display: none !important; | ||
318 | } | ||
319 | } | ||
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 553eed341..6b118b1de 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -1,5 +1,6 @@ | |||
1 | import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' | 1 | import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' | ||
3 | import { MetaService } from '@ngx-meta/core' | 4 | import { MetaService } from '@ngx-meta/core' |
4 | import { NotificationsService } from 'angular2-notifications' | 5 | import { NotificationsService } from 'angular2-notifications' |
5 | import { Observable } from 'rxjs/Observable' | 6 | import { Observable } from 'rxjs/Observable' |
@@ -28,6 +29,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
28 | @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent | 29 | @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent |
29 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent | 30 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent |
30 | @ViewChild('videoReportModal') videoReportModal: VideoReportComponent | 31 | @ViewChild('videoReportModal') videoReportModal: VideoReportComponent |
32 | @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent | ||
31 | 33 | ||
32 | otherVideosDisplayed: Video[] = [] | 34 | otherVideosDisplayed: Video[] = [] |
33 | 35 | ||
@@ -189,6 +191,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
189 | this.videoReportModal.show() | 191 | this.videoReportModal.show() |
190 | } | 192 | } |
191 | 193 | ||
194 | showSupportModal () { | ||
195 | this.videoSupportModal.show() | ||
196 | } | ||
197 | |||
192 | showShareModal () { | 198 | showShareModal () { |
193 | this.videoShareModal.show() | 199 | this.videoShareModal.show() |
194 | } | 200 | } |
@@ -264,7 +270,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
264 | return | 270 | return |
265 | } | 271 | } |
266 | 272 | ||
267 | this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description) | 273 | this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description) |
268 | } | 274 | } |
269 | 275 | ||
270 | private setVideoLikesBarTooltipText () { | 276 | private setVideoLikesBarTooltipText () { |
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 085a9ec5a..6a22c36d9 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts | |||
@@ -1,4 +1,5 @@ | |||
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 { TooltipModule } from 'ngx-bootstrap/tooltip' | 3 | import { TooltipModule } from 'ngx-bootstrap/tooltip' |
3 | import { ClipboardModule } from 'ngx-clipboard' | 4 | import { ClipboardModule } from 'ngx-clipboard' |
4 | import { SharedModule } from '../../shared' | 5 | import { SharedModule } from '../../shared' |
@@ -29,6 +30,7 @@ import { VideoWatchComponent } from './video-watch.component' | |||
29 | VideoDownloadComponent, | 30 | VideoDownloadComponent, |
30 | VideoShareComponent, | 31 | VideoShareComponent, |
31 | VideoReportComponent, | 32 | VideoReportComponent, |
33 | VideoSupportComponent, | ||
32 | VideoCommentsComponent, | 34 | VideoCommentsComponent, |
33 | VideoCommentAddComponent, | 35 | VideoCommentAddComponent, |
34 | VideoCommentComponent | 36 | VideoCommentComponent |