aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-08-01 16:54:24 +0200
committerChocobozzz <me@florianbigard.com>2019-08-01 16:54:24 +0200
commit65af03a241aa83ab7ba71278b6c99acd26428b8a (patch)
tree0cc04c31cdf631d11a915ae40389e8fa141f136b /client/src/app
parenta21e25ff641854c8b01664cb18655aa420620af6 (diff)
downloadPeerTube-65af03a241aa83ab7ba71278b6c99acd26428b8a.tar.gz
PeerTube-65af03a241aa83ab7ba71278b6c99acd26428b8a.tar.zst
PeerTube-65af03a241aa83ab7ba71278b6c99acd26428b8a.zip
Automatically update playlist thumbnails
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts35
-rw-r--r--client/src/app/shared/video-playlist/video-playlist.model.ts13
2 files changed, 38 insertions, 10 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
index 6434b9e50..6f307a058 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
@@ -63,24 +63,26 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
63 63
64 if (oldPosition > insertAfter) insertAfter-- 64 if (oldPosition > insertAfter) insertAfter--
65 65
66 this.videoPlaylistService.reorderPlaylist(this.playlist.id, oldPosition, insertAfter)
67 .subscribe(
68 () => { /* nothing to do */ },
69
70 err => this.notifier.error(err.message)
71 )
72
73 const element = this.playlistElements[previousIndex] 66 const element = this.playlistElements[previousIndex]
74 67
75 this.playlistElements.splice(previousIndex, 1) 68 this.playlistElements.splice(previousIndex, 1)
76 this.playlistElements.splice(newIndex, 0, element) 69 this.playlistElements.splice(newIndex, 0, element)
77 70
78 this.reorderClientPositions() 71 this.videoPlaylistService.reorderPlaylist(this.playlist.id, oldPosition, insertAfter)
72 .subscribe(
73 () => {
74 this.reorderClientPositions()
75 },
76
77 err => this.notifier.error(err.message)
78 )
79 } 79 }
80 80
81 onElementRemoved (element: VideoPlaylistElement) { 81 onElementRemoved (element: VideoPlaylistElement) {
82 const oldFirst = this.findFirst()
83
82 this.playlistElements = this.playlistElements.filter(v => v.id !== element.id) 84 this.playlistElements = this.playlistElements.filter(v => v.id !== element.id)
83 this.reorderClientPositions() 85 this.reorderClientPositions(oldFirst)
84 } 86 }
85 87
86 onNearOfBottom () { 88 onNearOfBottom () {
@@ -110,12 +112,25 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
110 }) 112 })
111 } 113 }
112 114
113 private reorderClientPositions () { 115 private reorderClientPositions (first?: VideoPlaylistElement) {
116 if (this.playlistElements.length === 0) return
117
118 const oldFirst = first || this.findFirst()
114 let i = 1 119 let i = 1
115 120
116 for (const element of this.playlistElements) { 121 for (const element of this.playlistElements) {
117 element.position = i 122 element.position = i
118 i++ 123 i++
119 } 124 }
125
126 // Reload playlist thumbnail if the first element changed
127 const newFirst = this.findFirst()
128 if (oldFirst && newFirst && oldFirst.id !== newFirst.id) {
129 this.playlist.refreshThumbnail()
130 }
131 }
132
133 private findFirst () {
134 return this.playlistElements.find(e => e.position === 1)
120 } 135 }
121} 136}
diff --git a/client/src/app/shared/video-playlist/video-playlist.model.ts b/client/src/app/shared/video-playlist/video-playlist.model.ts
index 7e311aa54..6f27e7475 100644
--- a/client/src/app/shared/video-playlist/video-playlist.model.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.model.ts
@@ -38,6 +38,9 @@ export class VideoPlaylist implements ServerVideoPlaylist {
38 videoChannelBy?: string 38 videoChannelBy?: string
39 videoChannelAvatarUrl?: string 39 videoChannelAvatarUrl?: string
40 40
41 private thumbnailVersion: number
42 private originThumbnailUrl: string
43
41 constructor (hash: ServerVideoPlaylist, translations: {}) { 44 constructor (hash: ServerVideoPlaylist, translations: {}) {
42 const absoluteAPIUrl = getAbsoluteAPIUrl() 45 const absoluteAPIUrl = getAbsoluteAPIUrl()
43 46
@@ -54,6 +57,7 @@ export class VideoPlaylist implements ServerVideoPlaylist {
54 57
55 if (this.thumbnailPath) { 58 if (this.thumbnailPath) {
56 this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath 59 this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath
60 this.originThumbnailUrl = this.thumbnailUrl
57 } else { 61 } else {
58 this.thumbnailUrl = window.location.origin + '/client/assets/images/default-playlist.jpg' 62 this.thumbnailUrl = window.location.origin + '/client/assets/images/default-playlist.jpg'
59 } 63 }
@@ -81,4 +85,13 @@ export class VideoPlaylist implements ServerVideoPlaylist {
81 this.displayName = peertubeTranslate(this.displayName, translations) 85 this.displayName = peertubeTranslate(this.displayName, translations)
82 } 86 }
83 } 87 }
88
89 refreshThumbnail () {
90 if (!this.originThumbnailUrl) return
91
92 if (!this.thumbnailVersion) this.thumbnailVersion = 0
93 this.thumbnailVersion++
94
95 this.thumbnailUrl = this.originThumbnailUrl + '?v' + this.thumbnailVersion
96 }
84} 97}