diff options
Diffstat (limited to 'client/src/app/shared/shared-video-playlist')
4 files changed, 62 insertions, 34 deletions
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html index 81c36e6fe..95f11f030 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html | |||
@@ -1,7 +1,7 @@ | |||
1 | <div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }"> | 1 | <div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }"> |
2 | <a | 2 | <my-link |
3 | [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description" | 3 | [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" |
4 | class="miniature-thumbnail" | 4 | [title]="playlist.description" class="miniature-thumbnail" |
5 | > | 5 | > |
6 | <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" /> | 6 | <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" /> |
7 | 7 | ||
@@ -12,12 +12,15 @@ | |||
12 | <div class="play-overlay"> | 12 | <div class="play-overlay"> |
13 | <div class="icon"></div> | 13 | <div class="icon"></div> |
14 | </div> | 14 | </div> |
15 | </a> | 15 | </my-link> |
16 | 16 | ||
17 | <div class="miniature-info"> | 17 | <div class="miniature-info"> |
18 | <a tabindex="-1" class="miniature-name" [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"> | 18 | <my-link |
19 | [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" | ||
20 | [title]="playlist.description" class="miniature-name" tabindex="-1" | ||
21 | > | ||
19 | {{ playlist.displayName }} | 22 | {{ playlist.displayName }} |
20 | </a> | 23 | </my-link> |
21 | 24 | ||
22 | <a i18n [routerLink]="[ '/c', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy"> | 25 | <a i18n [routerLink]="[ '/c', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy"> |
23 | {{ playlist.videoChannelBy }} | 26 | {{ playlist.videoChannelBy }} |
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss index 95bf469ac..cf7513984 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss | |||
@@ -75,7 +75,10 @@ | |||
75 | } | 75 | } |
76 | 76 | ||
77 | .miniature:not(.display-as-row) { | 77 | .miniature:not(.display-as-row) { |
78 | |||
78 | .miniature-thumbnail { | 79 | .miniature-thumbnail { |
80 | @include block-ratio($selector: '::ng-deep a'); | ||
81 | |||
79 | margin-top: 10px; | 82 | margin-top: 10px; |
80 | margin-bottom: 5px; | 83 | margin-bottom: 5px; |
81 | } | 84 | } |
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts index 9bbec6038..8de5092a9 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts | |||
@@ -1,4 +1,5 @@ | |||
1 | import { Component, Input } from '@angular/core' | 1 | import { LinkType } from 'src/types/link.type' |
2 | import { Component, Input, OnInit } from '@angular/core' | ||
2 | import { VideoPlaylist } from './video-playlist.model' | 3 | import { VideoPlaylist } from './video-playlist.model' |
3 | 4 | ||
4 | @Component({ | 5 | @Component({ |
@@ -6,18 +7,52 @@ import { VideoPlaylist } from './video-playlist.model' | |||
6 | styleUrls: [ './video-playlist-miniature.component.scss' ], | 7 | styleUrls: [ './video-playlist-miniature.component.scss' ], |
7 | templateUrl: './video-playlist-miniature.component.html' | 8 | templateUrl: './video-playlist-miniature.component.html' |
8 | }) | 9 | }) |
9 | export class VideoPlaylistMiniatureComponent { | 10 | export class VideoPlaylistMiniatureComponent implements OnInit { |
10 | @Input() playlist: VideoPlaylist | 11 | @Input() playlist: VideoPlaylist |
12 | |||
11 | @Input() toManage = false | 13 | @Input() toManage = false |
14 | |||
12 | @Input() displayChannel = false | 15 | @Input() displayChannel = false |
13 | @Input() displayDescription = false | 16 | @Input() displayDescription = false |
14 | @Input() displayPrivacy = false | 17 | @Input() displayPrivacy = false |
15 | @Input() displayAsRow = false | 18 | @Input() displayAsRow = false |
16 | 19 | ||
17 | getPlaylistUrl () { | 20 | @Input() linkType: LinkType = 'internal' |
18 | if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ] | 21 | |
19 | if (this.playlist.videosLength === 0) return null | 22 | routerLink: any |
23 | playlistHref: string | ||
24 | playlistTarget: string | ||
25 | |||
26 | ngOnInit () { | ||
27 | this.buildPlaylistUrl() | ||
28 | } | ||
29 | |||
30 | buildPlaylistUrl () { | ||
31 | if (this.toManage) { | ||
32 | this.routerLink = [ '/my-library/video-playlists', this.playlist.uuid ] | ||
33 | return | ||
34 | } | ||
35 | |||
36 | if (this.playlist.videosLength === 0) { | ||
37 | this.routerLink = null | ||
38 | return | ||
39 | } | ||
40 | |||
41 | if (this.linkType === 'internal' || !this.playlist.url) { | ||
42 | this.routerLink = [ '/w/p', this.playlist.uuid ] | ||
43 | return | ||
44 | } | ||
45 | |||
46 | if (this.linkType === 'external') { | ||
47 | this.routerLink = null | ||
48 | this.playlistHref = this.playlist.url | ||
49 | this.playlistTarget = '_blank' | ||
50 | return | ||
51 | } | ||
52 | |||
53 | // Lazy load | ||
54 | this.routerLink = [ '/search/lazy-load-playlist', { url: this.playlist.url } ] | ||
20 | 55 | ||
21 | return [ '/w/p', this.playlist.uuid ] | 56 | return |
22 | } | 57 | } |
23 | } | 58 | } |
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.model.ts b/client/src/app/shared/shared-video-playlist/video-playlist.model.ts index 5b6ba9dbf..d67f372f4 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist.model.ts +++ b/client/src/app/shared/shared-video-playlist/video-playlist.model.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers' | 1 | import { getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers' |
2 | import { Account, Actor, VideoChannel } from '@app/shared/shared-main' | 2 | import { Actor } from '@app/shared/shared-main' |
3 | import { peertubeTranslate } from '@shared/core-utils/i18n' | 3 | import { peertubeTranslate } from '@shared/core-utils/i18n' |
4 | import { | 4 | import { |
5 | AccountSummary, | 5 | AccountSummary, |
@@ -15,12 +15,12 @@ export class VideoPlaylist implements ServerVideoPlaylist { | |||
15 | uuid: string | 15 | uuid: string |
16 | isLocal: boolean | 16 | isLocal: boolean |
17 | 17 | ||
18 | url: string | ||
19 | |||
18 | displayName: string | 20 | displayName: string |
19 | description: string | 21 | description: string |
20 | privacy: VideoConstant<VideoPlaylistPrivacy> | 22 | privacy: VideoConstant<VideoPlaylistPrivacy> |
21 | 23 | ||
22 | thumbnailPath: string | ||
23 | |||
24 | videosLength: number | 24 | videosLength: number |
25 | 25 | ||
26 | type: VideoConstant<VideoPlaylistType> | 26 | type: VideoConstant<VideoPlaylistType> |
@@ -31,6 +31,7 @@ export class VideoPlaylist implements ServerVideoPlaylist { | |||
31 | ownerAccount: AccountSummary | 31 | ownerAccount: AccountSummary |
32 | videoChannel?: VideoChannelSummary | 32 | videoChannel?: VideoChannelSummary |
33 | 33 | ||
34 | thumbnailPath: string | ||
34 | thumbnailUrl: string | 35 | thumbnailUrl: string |
35 | 36 | ||
36 | embedPath: string | 37 | embedPath: string |
@@ -40,14 +41,12 @@ export class VideoPlaylist implements ServerVideoPlaylist { | |||
40 | 41 | ||
41 | videoChannelBy?: string | 42 | videoChannelBy?: string |
42 | 43 | ||
43 | private thumbnailVersion: number | ||
44 | private originThumbnailUrl: string | ||
45 | |||
46 | constructor (hash: ServerVideoPlaylist, translations: {}) { | 44 | constructor (hash: ServerVideoPlaylist, translations: {}) { |
47 | const absoluteAPIUrl = getAbsoluteAPIUrl() | 45 | const absoluteAPIUrl = getAbsoluteAPIUrl() |
48 | 46 | ||
49 | this.id = hash.id | 47 | this.id = hash.id |
50 | this.uuid = hash.uuid | 48 | this.uuid = hash.uuid |
49 | this.url = hash.url | ||
51 | this.isLocal = hash.isLocal | 50 | this.isLocal = hash.isLocal |
52 | 51 | ||
53 | this.displayName = hash.displayName | 52 | this.displayName = hash.displayName |
@@ -57,15 +56,12 @@ export class VideoPlaylist implements ServerVideoPlaylist { | |||
57 | 56 | ||
58 | this.thumbnailPath = hash.thumbnailPath | 57 | this.thumbnailPath = hash.thumbnailPath |
59 | 58 | ||
60 | if (this.thumbnailPath) { | 59 | this.thumbnailUrl = this.thumbnailPath |
61 | this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath | 60 | ? hash.thumbnailUrl || (absoluteAPIUrl + hash.thumbnailPath) |
62 | this.originThumbnailUrl = this.thumbnailUrl | 61 | : absoluteAPIUrl + '/client/assets/images/default-playlist.jpg' |
63 | } else { | ||
64 | this.thumbnailUrl = window.location.origin + '/client/assets/images/default-playlist.jpg' | ||
65 | } | ||
66 | 62 | ||
67 | this.embedPath = hash.embedPath | 63 | this.embedPath = hash.embedPath |
68 | this.embedUrl = getAbsoluteEmbedUrl() + hash.embedPath | 64 | this.embedUrl = hash.embedUrl || (getAbsoluteEmbedUrl() + hash.embedPath) |
69 | 65 | ||
70 | this.videosLength = hash.videosLength | 66 | this.videosLength = hash.videosLength |
71 | 67 | ||
@@ -88,13 +84,4 @@ export class VideoPlaylist implements ServerVideoPlaylist { | |||
88 | this.displayName = peertubeTranslate(this.displayName, translations) | 84 | this.displayName = peertubeTranslate(this.displayName, translations) |
89 | } | 85 | } |
90 | } | 86 | } |
91 | |||
92 | refreshThumbnail () { | ||
93 | if (!this.originThumbnailUrl) return | ||
94 | |||
95 | if (!this.thumbnailVersion) this.thumbnailVersion = 0 | ||
96 | this.thumbnailVersion++ | ||
97 | |||
98 | this.thumbnailUrl = this.originThumbnailUrl + '?v' + this.thumbnailVersion | ||
99 | } | ||
100 | } | 87 | } |