aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-01-02 13:07:18 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-01-02 14:50:14 +0100
commit29128b2f5ce00093ad81b4b72daae0e3444fd5a8 (patch)
treef1a90ead86c16892255e2c661da3eed5f302a260 /client/src/app/shared
parentcca1e13b96799377f19bcc95110fbf76ff741e20 (diff)
downloadPeerTube-29128b2f5ce00093ad81b4b72daae0e3444fd5a8.tar.gz
PeerTube-29128b2f5ce00093ad81b4b72daae0e3444fd5a8.tar.zst
PeerTube-29128b2f5ce00093ad81b4b72daae0e3444fd5a8.zip
Add miniature quick actions to add video to Watch later playlist
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/images/global-icon.component.ts1
-rw-r--r--client/src/app/shared/video-playlist/video-playlist.service.ts1
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.html14
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.scss42
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.ts82
5 files changed, 134 insertions, 6 deletions
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 8a4965926..17186cff4 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -10,6 +10,7 @@ const icons = {
10 'sparkle': require('!!raw-loader?!../../../assets/images/global/sparkle.svg'), 10 'sparkle': require('!!raw-loader?!../../../assets/images/global/sparkle.svg'),
11 'alert': require('!!raw-loader?!../../../assets/images/global/alert.svg'), 11 'alert': require('!!raw-loader?!../../../assets/images/global/alert.svg'),
12 'cloud-error': require('!!raw-loader?!../../../assets/images/global/cloud-error.svg'), 12 'cloud-error': require('!!raw-loader?!../../../assets/images/global/cloud-error.svg'),
13 'clock': require('!!raw-loader?!../../../assets/images/global/clock.svg'),
13 'user-add': require('!!raw-loader?!../../../assets/images/global/user-add.svg'), 14 'user-add': require('!!raw-loader?!../../../assets/images/global/user-add.svg'),
14 'no': require('!!raw-loader?!../../../assets/images/global/no.svg'), 15 'no': require('!!raw-loader?!../../../assets/images/global/no.svg'),
15 'cloud-download': require('!!raw-loader?!../../../assets/images/global/cloud-download.svg'), 16 'cloud-download': require('!!raw-loader?!../../../assets/images/global/cloud-download.svg'),
diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts
index 5f74dcd4c..fc3b77b2a 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -30,6 +30,7 @@ export class VideoPlaylistService {
30 // Use a replay subject because we "next" a value before subscribing 30 // Use a replay subject because we "next" a value before subscribing
31 private videoExistsInPlaylistSubject: Subject<number> = new ReplaySubject(1) 31 private videoExistsInPlaylistSubject: Subject<number> = new ReplaySubject(1)
32 private readonly videoExistsInPlaylistObservable: Observable<VideoExistInPlaylist> 32 private readonly videoExistsInPlaylistObservable: Observable<VideoExistInPlaylist>
33 private cachedWatchLaterPlaylists: VideoPlaylist[]
33 34
34 constructor ( 35 constructor (
35 private authHttp: HttpClient, 36 private authHttp: HttpClient,
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index b302ebd0f..df15698c0 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,9 +1,23 @@
1<a 1<a
2 [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name" 2 [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
3 class="video-thumbnail" 3 class="video-thumbnail"
4 (mouseenter)="load()"
4> 5>
5 <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" /> 6 <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
6 7
8 <div *ngIf="isUserLoggedIn()" class="video-thumbnail-actions-overlay">
9 <ng-container *ngIf="addedToWatchLater !== true">
10 <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="addToWatchLater();$event.stopPropagation();false">
11 <my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText" role="button"></my-global-icon>
12 </div>
13 </ng-container>
14 <ng-container *ngIf="addedToWatchLater === true">
15 <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="removeFromWatchLater();$event.stopPropagation();false">
16 <my-global-icon iconName="tick" [attr.aria-label]="addedToWatchLaterText" role="button"></my-global-icon>
17 </div>
18 </ng-container>
19 </div>
20
7 <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div> 21 <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
8 22
9 <div class="play-overlay"> 23 <div class="play-overlay">
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index e48629778..aac50fd1b 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -18,16 +18,50 @@
18 } 18 }
19 } 19 }
20 20
21 .video-thumbnail-watch-later-overlay,
21 .video-thumbnail-duration-overlay { 22 .video-thumbnail-duration-overlay {
22 @include static-thumbnail-overlay; 23 @include static-thumbnail-overlay;
23 24
24 position: absolute;
25 right: 5px;
26 bottom: 5px;
27 padding: 0 5px;
28 border-radius: 3px; 25 border-radius: 3px;
29 font-size: 12px; 26 font-size: 12px;
30 font-weight: $font-bold; 27 font-weight: $font-bold;
31 z-index: 1; 28 z-index: 1;
32 } 29 }
30
31 .video-thumbnail-duration-overlay {
32 position: absolute;
33 padding: 0 5px;
34 right: 5px;
35 bottom: 5px;
36 }
37
38 &:hover {
39 .video-thumbnail-actions-overlay {
40 opacity: 1;
41 }
42 }
43
44 .video-thumbnail-actions-overlay {
45 position: absolute;
46 display: flex;
47 flex-direction: column;
48 right: 5px;
49 top: 5px;
50 opacity: 0;
51
52 div:not(:first-child) {
53 margin-top: 2px;
54 }
55
56 .video-thumbnail-watch-later-overlay {
57 padding: 3px;
58
59 my-global-icon {
60 width: 22px;
61 height: 22px;
62
63 @include apply-svg-color(#fff);
64 }
65 }
66 }
33} 67}
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index fe65ade94..0f605e425 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -1,6 +1,14 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input, OnInit, ChangeDetectorRef } from '@angular/core'
2import { Video } from './video.model' 2import { Video } from './video.model'
3import { ScreenService } from '@app/shared/misc/screen.service' 3import { ScreenService } from '@app/shared/misc/screen.service'
4import { AuthService, ThemeService } from '@app/core'
5import { VideoPlaylistService } from '../video-playlist/video-playlist.service'
6import { VideoPlaylistType } from '@shared/models'
7import { forkJoin } from 'rxjs'
8import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
9import { VideoPlaylist } from '../video-playlist/video-playlist.model'
10import { VideoPlaylistElementCreate } from '../../../../../shared'
11import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
4 12
5@Component({ 13@Component({
6 selector: 'my-video-thumbnail', 14 selector: 'my-video-thumbnail',
@@ -13,7 +21,44 @@ export class VideoThumbnailComponent {
13 @Input() routerLink: any[] 21 @Input() routerLink: any[]
14 @Input() queryParams: any[] 22 @Input() queryParams: any[]
15 23
16 constructor (private screenService: ScreenService) { 24 addToWatchLaterText = 'Add to watch later'
25 addedToWatchLaterText = 'Added to watch later'
26 addedToWatchLater: boolean
27
28 watchLaterPlaylist: any
29
30 constructor (
31 private screenService: ScreenService,
32 private authService: AuthService,
33 private videoPlaylistService: VideoPlaylistService,
34 private cd: ChangeDetectorRef
35 ) {}
36
37 load () {
38 if (this.addedToWatchLater !== undefined) return
39
40 this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
41 .subscribe(
42 existResult => {
43 for (const playlist of this.authService.getUser().specialPlaylists) {
44 const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id)
45 this.addedToWatchLater = !!existingPlaylist
46
47 if (existingPlaylist) {
48 this.watchLaterPlaylist = {
49 playlistId: existingPlaylist.playlistId,
50 playlistElementId: existingPlaylist.playlistElementId
51 }
52 } else {
53 this.watchLaterPlaylist = {
54 playlistId: playlist.id
55 }
56 }
57
58 this.cd.markForCheck()
59 }
60 }
61 )
17 } 62 }
18 63
19 getImageUrl () { 64 getImageUrl () {
@@ -39,4 +84,37 @@ export class VideoThumbnailComponent {
39 84
40 return [ '/videos/watch', this.video.uuid ] 85 return [ '/videos/watch', this.video.uuid ]
41 } 86 }
87
88 isUserLoggedIn () {
89 return this.authService.isLoggedIn()
90 }
91
92 addToWatchLater () {
93 if (this.addedToWatchLater === undefined) return
94 this.addedToWatchLater = true
95
96 this.videoPlaylistService.addVideoInPlaylist(
97 this.watchLaterPlaylist.playlistId,
98 { videoId: this.video.id } as VideoPlaylistElementCreate
99 ).subscribe(
100 res => {
101 this.addedToWatchLater = true
102 this.watchLaterPlaylist.playlistElementId = res.videoPlaylistElement.id
103 }
104 )
105 }
106
107 removeFromWatchLater () {
108 if (this.addedToWatchLater === undefined) return
109 this.addedToWatchLater = false
110
111 this.videoPlaylistService.removeVideoFromPlaylist(
112 this.watchLaterPlaylist.playlistId,
113 this.watchLaterPlaylist.playlistElementId
114 ).subscribe(
115 _ => {
116 this.addedToWatchLater = false
117 }
118 )
119 }
42} 120}