aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html4
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts35
-rw-r--r--client/src/app/videos/+video-watch/video-watch.module.ts4
-rw-r--r--client/src/sass/include/_bootstrap.scss2
-rw-r--r--client/src/sass/video-js-custom.scss4
5 files changed, 31 insertions, 18 deletions
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 e9ca336dd..d9b572430 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -65,7 +65,9 @@
65 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views 65 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
66 </div> 66 </div>
67 67
68 <div *ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar"> 68 <div
69 class="video-info-likes-dislikes-bar"
70 *ngIf="video.likes !== 0 || video.dislikes !== 0" [tooltip]="likesBarTooltipText">
69 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> 71 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
70 </div> 72 </div>
71 </div> 73 </div>
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 df4cfa666..c388b138b 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -44,6 +44,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
44 completeVideoDescription: string 44 completeVideoDescription: string
45 shortVideoDescription: string 45 shortVideoDescription: string
46 videoHTMLDescription = '' 46 videoHTMLDescription = ''
47 likesBarTooltipText = ''
47 48
48 private paramsSub: Subscription 49 private paramsSub: Subscription
49 50
@@ -228,23 +229,24 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
228 removeVideo (event: Event) { 229 removeVideo (event: Event) {
229 event.preventDefault() 230 event.preventDefault()
230 231
231 this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe( 232 this.confirmService.confirm('Do you really want to delete this video?', 'Delete')
232 res => { 233 .subscribe(
233 if (res === false) return 234 res => {
235 if (res === false) return
234 236
235 this.videoService.removeVideo(this.video.id) 237 this.videoService.removeVideo(this.video.id)
236 .subscribe( 238 .subscribe(
237 status => { 239 status => {
238 this.notificationsService.success('Success', `Video ${this.video.name} deleted.`) 240 this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
239 241
240 // Go back to the video-list. 242 // Go back to the video-list.
241 this.router.navigate([ '/videos/list' ]) 243 this.router.navigate([ '/videos/list' ])
242 }, 244 },
243 245
244 error => this.notificationsService.error('Error', error.text) 246 error => this.notificationsService.error('Error', error.text)
245 ) 247 )
246 } 248 }
247 ) 249 )
248 } 250 }
249 251
250 private updateVideoDescription (description: string) { 252 private updateVideoDescription (description: string) {
@@ -261,6 +263,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
261 this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description) 263 this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description)
262 } 264 }
263 265
266 private setVideoLikesBarTooltipText () {
267 this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes`
268 }
269
264 private handleError (err: any) { 270 private handleError (err: any) {
265 const errorMessage: string = typeof err === 'string' ? err : err.message 271 const errorMessage: string = typeof err === 'string' ? err : err.message
266 let message = '' 272 let message = ''
@@ -346,6 +352,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
346 } 352 }
347 353
348 this.setVideoDescriptionHTML() 354 this.setVideoDescriptionHTML()
355 this.setVideoLikesBarTooltipText()
349 356
350 this.setOpenGraphTags() 357 this.setOpenGraphTags()
351 this.checkUserRating() 358 this.checkUserRating()
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 18319de1a..d0ed29d06 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -4,6 +4,7 @@ import { VideoWatchRoutingModule } from './video-watch-routing.module'
4import { MarkdownService } from '../shared' 4import { MarkdownService } from '../shared'
5import { SharedModule } from '../../shared' 5import { SharedModule } from '../../shared'
6import { ClipboardModule } from 'ngx-clipboard' 6import { ClipboardModule } from 'ngx-clipboard'
7import { TooltipModule } from 'ngx-bootstrap/tooltip';
7 8
8import { VideoWatchComponent } from './video-watch.component' 9import { VideoWatchComponent } from './video-watch.component'
9import { VideoReportComponent } from './video-report.component' 10import { VideoReportComponent } from './video-report.component'
@@ -14,7 +15,8 @@ import { VideoDownloadComponent } from './video-download.component'
14 imports: [ 15 imports: [
15 VideoWatchRoutingModule, 16 VideoWatchRoutingModule,
16 SharedModule, 17 SharedModule,
17 ClipboardModule 18 ClipboardModule,
19 TooltipModule.forRoot()
18 ], 20 ],
19 21
20 declarations: [ 22 declarations: [
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index 4f0e2893e..bbf0fda22 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -41,7 +41,7 @@
41 41
42// Components w/ JavaScript 42// Components w/ JavaScript
43@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals"; 43@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
44//@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip"; 44@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
45//@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers"; 45//@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
46//@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel"; 46//@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";
47 47
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 724874995..715464ce8 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -50,12 +50,14 @@ $control-bar-height: 34px;
50 display: block; 50 display: block;
51 visibility: hidden; 51 visibility: hidden;
52 opacity: 0; 52 opacity: 0;
53 transition-delay: 0.5s;
54 transition: visibility 0.5s, opacity 0.5s;
53 } 55 }
54 56
55 &.vjs-waiting .vjs-loading-spinner { 57 &.vjs-waiting .vjs-loading-spinner {
56 visibility: visible; 58 visibility: visible;
57 opacity: 1; 59 opacity: 1;
58 transition: visibility 0.5s, opacity 0.5s; 60
59 } 61 }
60 62
61 .vjs-control-bar, 63 .vjs-control-bar,