aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-03-13 14:18:58 +0100
committerChocobozzz <chocobozzz@cpy.re>2019-03-18 11:17:59 +0100
commite2f01c47e08d26a30ad47068d195b3d21d0df8a1 (patch)
tree21f18ed462d313bfb4ba7a1b5221fdb6b2c35bc1 /client/src/app/shared
parent15e9d5ca39e0b792f61453fbf3885a0fc446afa7 (diff)
downloadPeerTube-e2f01c47e08d26a30ad47068d195b3d21d0df8a1.tar.gz
PeerTube-e2f01c47e08d26a30ad47068d195b3d21d0df8a1.tar.zst
PeerTube-e2f01c47e08d26a30ad47068d195b3d21d0df8a1.zip
Playlist support in watch page
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/images/global-icon.component.ts3
-rw-r--r--client/src/app/shared/shared.module.ts3
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html73
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss124
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts149
-rw-r--r--client/src/app/shared/video/infinite-scroller.directive.ts3
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.html2
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.ts11
8 files changed, 364 insertions, 4 deletions
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 093e88033..3fa6fea96 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -27,7 +27,8 @@ const icons = {
27 'more-vertical': require('../../../assets/images/global/more-vertical.html'), 27 'more-vertical': require('../../../assets/images/global/more-vertical.html'),
28 'share': require('../../../assets/images/video/share.html'), 28 'share': require('../../../assets/images/video/share.html'),
29 'upload': require('../../../assets/images/video/upload.html'), 29 'upload': require('../../../assets/images/video/upload.html'),
30 'playlist-add': require('../../../assets/images/video/playlist-add.html') 30 'playlist-add': require('../../../assets/images/video/playlist-add.html'),
31 'play': require('../../../assets/images/global/play.html')
31} 32}
32 33
33export type GlobalIconName = keyof typeof icons 34export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 05da0d829..3647fc786 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -77,6 +77,7 @@ import { GlobalIconComponent } from '@app/shared/images/global-icon.component'
77import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/video-playlist-miniature.component' 77import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/video-playlist-miniature.component'
78import { VideoAddToPlaylistComponent } from '@app/shared/video-playlist/video-add-to-playlist.component' 78import { VideoAddToPlaylistComponent } from '@app/shared/video-playlist/video-add-to-playlist.component'
79import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.component' 79import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.component'
80import { VideoPlaylistElementMiniatureComponent } from '@app/shared/video-playlist/video-playlist-element-miniature.component'
80 81
81@NgModule({ 82@NgModule({
82 imports: [ 83 imports: [
@@ -105,6 +106,7 @@ import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.compo
105 VideoMiniatureComponent, 106 VideoMiniatureComponent,
106 VideoPlaylistMiniatureComponent, 107 VideoPlaylistMiniatureComponent,
107 VideoAddToPlaylistComponent, 108 VideoAddToPlaylistComponent,
109 VideoPlaylistElementMiniatureComponent,
108 110
109 FeedComponent, 111 FeedComponent,
110 112
@@ -163,6 +165,7 @@ import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.compo
163 VideoMiniatureComponent, 165 VideoMiniatureComponent,
164 VideoPlaylistMiniatureComponent, 166 VideoPlaylistMiniatureComponent,
165 VideoAddToPlaylistComponent, 167 VideoAddToPlaylistComponent,
168 VideoPlaylistElementMiniatureComponent,
166 169
167 FeedComponent, 170 FeedComponent,
168 171
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
new file mode 100644
index 000000000..1f178675f
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
@@ -0,0 +1,73 @@
1<div class="video" [ngClass]="{ playing: playing }">
2 <a [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()">
3 <div class="position">
4 <my-global-icon *ngIf="playing" iconName="play"></my-global-icon>
5 <ng-container *ngIf="!playing">{{ video.playlistElement.position }}</ng-container>
6 </div>
7
8 <my-video-thumbnail
9 [video]="video" [nsfw]="isVideoBlur(video)"
10 [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
11 ></my-video-thumbnail>
12
13 <div class="video-info">
14 <a tabindex="-1" class="video-info-name"
15 [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
16 [attr.title]="video.name"
17 >{{ video.name }}</a>
18
19 <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
20 <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ video.byAccount }}</span>
21
22 <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span>
23 </div>
24 </a>
25
26 <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()"
27 autoClose="outside">
28 <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
29
30 <div ngbDropdownMenu>
31 <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)">
32 <my-global-icon iconName="edit"></my-global-icon>
33 <ng-container i18n>Edit starts/stops at</ng-container>
34 </div>
35
36 <div class="timestamp-options" *ngIf="displayTimestampOptions">
37 <div>
38 <my-peertube-checkbox
39 inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
40 i18n-labelText labelText="Start at"
41 ></my-peertube-checkbox>
42
43 <my-timestamp-input
44 [timestamp]="timestampOptions.startTimestamp"
45 [maxTimestamp]="video.duration"
46 [disabled]="!timestampOptions.startTimestampEnabled"
47 [(ngModel)]="timestampOptions.startTimestamp"
48 ></my-timestamp-input>
49 </div>
50
51 <div>
52 <my-peertube-checkbox
53 inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
54 i18n-labelText labelText="Stop at"
55 ></my-peertube-checkbox>
56
57 <my-timestamp-input
58 [timestamp]="timestampOptions.stopTimestamp"
59 [maxTimestamp]="video.duration"
60 [disabled]="!timestampOptions.stopTimestampEnabled"
61 [(ngModel)]="timestampOptions.stopTimestamp"
62 ></my-timestamp-input>
63 </div>
64
65 <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
66 </div>
67
68 <span class="dropdown-item" (click)="removeFromPlaylist(video)">
69 <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{playlist?.displayName}}</ng-container>
70 </span>
71 </div>
72 </div>
73</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
new file mode 100644
index 000000000..eb869f69a
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -0,0 +1,124 @@
1@import '_variables';
2@import '_mixins';
3@import '_miniature';
4
5.video {
6 display: flex;
7 align-items: center;
8 background-color: var(--mainBackgroundColor);
9 padding: 10px;
10 border-bottom: 1px solid $separator-border-color;
11
12 &:hover {
13 background-color: rgba(0, 0, 0, 0.05);
14
15 .more {
16 display: block;
17 }
18 }
19
20 &.playing {
21 background-color: rgba(0, 0, 0, 0.02);
22 }
23
24 a {
25 @include disable-default-a-behaviour;
26
27 min-width: 0;
28 display: flex;
29 align-items: center;
30 cursor: pointer;
31 flex-grow: 1;
32
33 .position {
34 font-weight: $font-semibold;
35 margin-right: 10px;
36 color: $grey-foreground-color;
37 min-width: 20px;
38
39 my-global-icon {
40 @include apply-svg-color($grey-foreground-color);
41
42 width: 17px;
43 position: relative;
44 left: -2px;
45 }
46 }
47
48 my-video-thumbnail {
49 @include thumbnail-size-component(130px, 72px);
50
51 display: flex; // Avoids an issue with line-height that adds space below the element
52 margin-right: 10px;
53 }
54
55 .video-info {
56 display: flex;
57 flex-direction: column;
58 min-width: 0;
59
60 a {
61 color: var(--mainForegroundColor);
62 width: fit-content;
63
64 &:hover {
65 text-decoration: underline !important;
66 }
67 }
68
69 .video-info-name {
70 font-size: 18px;
71 font-weight: $font-semibold;
72
73 @include ellipsis;
74 }
75
76 .video-info-account, .video-info-timestamp {
77 color: $grey-foreground-color;
78 }
79 }
80 }
81
82 .more {
83 justify-self: flex-end;
84 margin-left: auto;
85 cursor: pointer;
86 display: none;
87
88 &.show {
89 display: block;
90 }
91
92 .icon-more {
93 @include apply-svg-color($grey-foreground-color);
94
95 display: flex;
96
97 &::after {
98 border: none;
99 }
100 }
101
102 .dropdown-item {
103 @include dropdown-with-icon-item;
104 }
105
106 .timestamp-options {
107 padding-top: 0;
108 padding-left: 35px;
109 margin-bottom: 15px;
110
111 > div {
112 display: flex;
113 align-items: center;
114 }
115
116 input {
117 @include peertube-button;
118 @include orange-button;
119
120 margin-top: 10px;
121 }
122 }
123 }
124}
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
new file mode 100644
index 000000000..c0cfd855d
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -0,0 +1,149 @@
1import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
2import { Video } from '@app/shared/video/video.model'
3import { VideoPlaylistElementUpdate } from '@shared/models'
4import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
5import { ActivatedRoute } from '@angular/router'
6import { I18n } from '@ngx-translate/i18n-polyfill'
7import { VideoService } from '@app/shared/video/video.service'
8import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
9import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
10import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
11import { secondsToTime } from '../../../assets/player/utils'
12
13@Component({
14 selector: 'my-video-playlist-element-miniature',
15 styleUrls: [ './video-playlist-element-miniature.component.scss' ],
16 templateUrl: './video-playlist-element-miniature.component.html'
17})
18export class VideoPlaylistElementMiniatureComponent {
19 @ViewChild('moreDropdown') moreDropdown: NgbDropdown
20
21 @Input() playlist: VideoPlaylist
22 @Input() video: Video
23 @Input() owned = false
24 @Input() playing = false
25 @Input() rowLink = false
26 @Input() accountLink = true
27
28 @Output() elementRemoved = new EventEmitter<Video>()
29
30 displayTimestampOptions = false
31
32 timestampOptions: {
33 startTimestampEnabled: boolean
34 startTimestamp: number
35 stopTimestampEnabled: boolean
36 stopTimestamp: number
37 } = {} as any
38
39 constructor (
40 private authService: AuthService,
41 private serverService: ServerService,
42 private notifier: Notifier,
43 private confirmService: ConfirmService,
44 private route: ActivatedRoute,
45 private i18n: I18n,
46 private videoService: VideoService,
47 private videoPlaylistService: VideoPlaylistService
48 ) {}
49
50 buildRouterLink () {
51 if (!this.playlist) return null
52
53 return [ '/videos/watch/playlist', this.playlist.uuid ]
54 }
55
56 buildRouterQuery () {
57 if (!this.video) return {}
58
59 return {
60 videoId: this.video.uuid,
61 start: this.video.playlistElement.startTimestamp,
62 stop: this.video.playlistElement.stopTimestamp
63 }
64 }
65
66 isVideoBlur (video: Video) {
67 return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
68 }
69
70 removeFromPlaylist (video: Video) {
71 this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id)
72 .subscribe(
73 () => {
74 this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName }))
75
76 this.elementRemoved.emit(this.video)
77 },
78
79 err => this.notifier.error(err.message)
80 )
81
82 this.moreDropdown.close()
83 }
84
85 updateTimestamps (video: Video) {
86 const body: VideoPlaylistElementUpdate = {}
87
88 body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
89 body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
90
91 this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body)
92 .subscribe(
93 () => {
94 this.notifier.success(this.i18n('Timestamps updated'))
95
96 video.playlistElement.startTimestamp = body.startTimestamp
97 video.playlistElement.stopTimestamp = body.stopTimestamp
98 },
99
100 err => this.notifier.error(err.message)
101 )
102
103 this.moreDropdown.close()
104 }
105
106 formatTimestamp (video: Video) {
107 const start = video.playlistElement.startTimestamp
108 const stop = video.playlistElement.stopTimestamp
109
110 const startFormatted = secondsToTime(start, true, ':')
111 const stopFormatted = secondsToTime(stop, true, ':')
112
113 if (start === null && stop === null) return ''
114
115 if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted
116 if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted
117
118 return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted
119 }
120
121 onDropdownOpenChange () {
122 this.displayTimestampOptions = false
123 }
124
125 toggleDisplayTimestampsOptions (event: Event, video: Video) {
126 event.preventDefault()
127
128 this.displayTimestampOptions = !this.displayTimestampOptions
129
130 if (this.displayTimestampOptions === true) {
131 this.timestampOptions = {
132 startTimestampEnabled: false,
133 stopTimestampEnabled: false,
134 startTimestamp: 0,
135 stopTimestamp: video.duration
136 }
137
138 if (video.playlistElement.startTimestamp) {
139 this.timestampOptions.startTimestampEnabled = true
140 this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp
141 }
142
143 if (video.playlistElement.stopTimestamp) {
144 this.timestampOptions.stopTimestampEnabled = true
145 this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp
146 }
147 }
148 }
149}
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index a02e9444a..186597a3a 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -11,6 +11,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
11 @Input() firstLoadedPage = 1 11 @Input() firstLoadedPage = 1
12 @Input() percentLimit = 70 12 @Input() percentLimit = 70
13 @Input() autoInit = false 13 @Input() autoInit = false
14 @Input() container = document.body
14 15
15 @Output() nearOfBottom = new EventEmitter<void>() 16 @Output() nearOfBottom = new EventEmitter<void>()
16 @Output() nearOfTop = new EventEmitter<void>() 17 @Output() nearOfTop = new EventEmitter<void>()
@@ -48,7 +49,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
48 .pipe( 49 .pipe(
49 startWith(null), 50 startWith(null),
50 throttleTime(200, undefined, throttleOptions), 51 throttleTime(200, undefined, throttleOptions),
51 map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })), 52 map(() => ({ current: window.scrollY, maximumScroll: this.container.clientHeight - window.innerHeight })),
52 distinctUntilChanged((o1, o2) => o1.current === o2.current), 53 distinctUntilChanged((o1, o2) => o1.current === o2.current),
53 share() 54 share()
54 ) 55 )
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index a6757fc4a..b302ebd0f 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,5 +1,5 @@
1<a 1<a
2 [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" 2 [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
3 class="video-thumbnail" 3 class="video-thumbnail"
4> 4>
5 <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" /> 5 <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index ca43700c7..fe65ade94 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -10,8 +10,11 @@ import { ScreenService } from '@app/shared/misc/screen.service'
10export class VideoThumbnailComponent { 10export class VideoThumbnailComponent {
11 @Input() video: Video 11 @Input() video: Video
12 @Input() nsfw = false 12 @Input() nsfw = false
13 @Input() routerLink: any[]
14 @Input() queryParams: any[]
13 15
14 constructor (private screenService: ScreenService) {} 16 constructor (private screenService: ScreenService) {
17 }
15 18
16 getImageUrl () { 19 getImageUrl () {
17 if (!this.video) return '' 20 if (!this.video) return ''
@@ -30,4 +33,10 @@ export class VideoThumbnailComponent {
30 33
31 return (currentTime / this.video.duration) * 100 34 return (currentTime / this.video.duration) * 100
32 } 35 }
36
37 getVideoRouterLink () {
38 if (this.routerLink) return this.routerLink
39
40 return [ '/videos/watch', this.video.uuid ]
41 }
33} 42}