aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-08 12:09:54 +0200
committerChocobozzz <me@florianbigard.com>2021-04-08 13:38:04 +0200
commit27ec473f5306621643fcb169be7cfe6b15136265 (patch)
treebc4a8d81c5baa58ae1af6434731644da7c2df109 /client/src/app/shared
parent84531547bc0934a2abda586d539f7455b455d488 (diff)
downloadPeerTube-27ec473f5306621643fcb169be7cfe6b15136265.tar.gz
PeerTube-27ec473f5306621643fcb169be7cfe6b15136265.tar.zst
PeerTube-27ec473f5306621643fcb169be7cfe6b15136265.zip
Set channel banner/avatar in creation form
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html2
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts12
-rw-r--r--client/src/app/shared/shared-actor-image/actor-banner-edit.component.html2
-rw-r--r--client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts12
-rw-r--r--client/src/app/shared/shared-main/account/actor.model.ts8
-rw-r--r--client/src/app/shared/shared-main/video-channel/video-channel.model.ts4
6 files changed, 30 insertions, 10 deletions
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
index 10f2ef262..0829263f4 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
@@ -1,6 +1,6 @@
1<div class="actor" *ngIf="actor"> 1<div class="actor" *ngIf="actor">
2 <div class="d-flex"> 2 <div class="d-flex">
3 <img [ngClass]="{ channel: isChannel() }" [src]="actor.avatarUrl" alt="Avatar" /> 3 <img [ngClass]="{ channel: isChannel() }" [src]="preview || actor.avatarUrl" alt="Avatar" />
4 4
5 <div class="actor-img-edit-container"> 5 <div class="actor-img-edit-container">
6 6
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
index 6f76172e9..d0d269489 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
@@ -1,4 +1,5 @@
1import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' 1import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
2import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
2import { Notifier, ServerService } from '@app/core' 3import { Notifier, ServerService } from '@app/core'
3import { Account, VideoChannel } from '@app/shared/shared-main' 4import { Account, VideoChannel } from '@app/shared/shared-main'
4import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' 5import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
@@ -20,6 +21,7 @@ export class ActorAvatarEditComponent implements OnInit {
20 @Input() editable = true 21 @Input() editable = true
21 @Input() displaySubscribers = true 22 @Input() displaySubscribers = true
22 @Input() displayUsername = true 23 @Input() displayUsername = true
24 @Input() previewImage = false
23 25
24 @Output() avatarChange = new EventEmitter<FormData>() 26 @Output() avatarChange = new EventEmitter<FormData>()
25 @Output() avatarDelete = new EventEmitter<void>() 27 @Output() avatarDelete = new EventEmitter<void>()
@@ -28,7 +30,10 @@ export class ActorAvatarEditComponent implements OnInit {
28 maxAvatarSize = 0 30 maxAvatarSize = 0
29 avatarExtensions = '' 31 avatarExtensions = ''
30 32
33 preview: SafeResourceUrl
34
31 constructor ( 35 constructor (
36 private sanitizer: DomSanitizer,
32 private serverService: ServerService, 37 private serverService: ServerService,
33 private notifier: Notifier 38 private notifier: Notifier
34 ) { } 39 ) { }
@@ -57,14 +62,19 @@ export class ActorAvatarEditComponent implements OnInit {
57 formData.append('avatarfile', avatarfile) 62 formData.append('avatarfile', avatarfile)
58 this.avatarPopover?.close() 63 this.avatarPopover?.close()
59 this.avatarChange.emit(formData) 64 this.avatarChange.emit(formData)
65
66 if (this.previewImage) {
67 this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile))
68 }
60 } 69 }
61 70
62 deleteAvatar () { 71 deleteAvatar () {
72 this.preview = undefined
63 this.avatarDelete.emit() 73 this.avatarDelete.emit()
64 } 74 }
65 75
66 hasAvatar () { 76 hasAvatar () {
67 return !!this.actor.avatar 77 return !!this.preview || !!this.actor.avatar
68 } 78 }
69 79
70 isChannel () { 80 isChannel () {
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
index eb1b66422..266fc26c5 100644
--- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
@@ -1,7 +1,7 @@
1<div class="actor" *ngIf="actor"> 1<div class="actor" *ngIf="actor">
2 <div class="actor-img-edit-container"> 2 <div class="actor-img-edit-container">
3 <div class="banner-placeholder"> 3 <div class="banner-placeholder">
4 <img *ngIf="hasBanner()" [src]="actor.bannerUrl" alt="Banner" /> 4 <img *ngIf="hasBanner()" [src]="preview || actor.bannerUrl" alt="Banner" />
5 </div> 5 </div>
6 6
7 <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body"> 7 <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
index 48451744c..8c12d3c4c 100644
--- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
@@ -1,4 +1,5 @@
1import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' 1import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
2import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
2import { Notifier, ServerService } from '@app/core' 3import { Notifier, ServerService } from '@app/core'
3import { VideoChannel } from '@app/shared/shared-main' 4import { VideoChannel } from '@app/shared/shared-main'
4import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' 5import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
@@ -17,6 +18,7 @@ export class ActorBannerEditComponent implements OnInit {
17 @ViewChild('bannerPopover') bannerPopover: NgbPopover 18 @ViewChild('bannerPopover') bannerPopover: NgbPopover
18 19
19 @Input() actor: VideoChannel 20 @Input() actor: VideoChannel
21 @Input() previewImage = false
20 22
21 @Output() bannerChange = new EventEmitter<FormData>() 23 @Output() bannerChange = new EventEmitter<FormData>()
22 @Output() bannerDelete = new EventEmitter<void>() 24 @Output() bannerDelete = new EventEmitter<void>()
@@ -25,7 +27,10 @@ export class ActorBannerEditComponent implements OnInit {
25 maxBannerSize = 0 27 maxBannerSize = 0
26 bannerExtensions = '' 28 bannerExtensions = ''
27 29
30 preview: SafeResourceUrl
31
28 constructor ( 32 constructor (
33 private sanitizer: DomSanitizer,
29 private serverService: ServerService, 34 private serverService: ServerService,
30 private notifier: Notifier 35 private notifier: Notifier
31 ) { } 36 ) { }
@@ -54,13 +59,18 @@ export class ActorBannerEditComponent implements OnInit {
54 formData.append('bannerfile', bannerfile) 59 formData.append('bannerfile', bannerfile)
55 this.bannerPopover?.close() 60 this.bannerPopover?.close()
56 this.bannerChange.emit(formData) 61 this.bannerChange.emit(formData)
62
63 if (this.previewImage) {
64 this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile))
65 }
57 } 66 }
58 67
59 deleteBanner () { 68 deleteBanner () {
69 this.preview = undefined
60 this.bannerDelete.emit() 70 this.bannerDelete.emit()
61 } 71 }
62 72
63 hasBanner () { 73 hasBanner () {
64 return !!this.actor.bannerUrl 74 return !!this.preview || !!this.actor.bannerUrl
65 } 75 }
66} 76}
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 670823060..1ee0c297e 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -47,11 +47,11 @@ export abstract class Actor implements ActorServer {
47 return host.trim() === thisHost 47 return host.trim() === thisHost
48 } 48 }
49 49
50 protected constructor (hash: ActorServer) { 50 protected constructor (hash: Partial<ActorServer>) {
51 this.id = hash.id 51 this.id = hash.id
52 this.url = hash.url 52 this.url = hash.url ?? ''
53 this.name = hash.name 53 this.name = hash.name ?? ''
54 this.host = hash.host 54 this.host = hash.host ?? ''
55 this.followingCount = hash.followingCount 55 this.followingCount = hash.followingCount
56 this.followersCount = hash.followersCount 56 this.followersCount = hash.followersCount
57 57
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index d8be42eef..1ba3fcc0e 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -44,7 +44,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
44 return `${window.location.origin}/client/assets/images/default-avatar-videochannel.png` 44 return `${window.location.origin}/client/assets/images/default-avatar-videochannel.png`
45 } 45 }
46 46
47 constructor (hash: ServerVideoChannel) { 47 constructor (hash: Partial<ServerVideoChannel>) {
48 super(hash) 48 super(hash)
49 49
50 this.displayName = hash.displayName 50 this.displayName = hash.displayName
@@ -93,7 +93,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
93 this.updateBanner(null) 93 this.updateBanner(null)
94 } 94 }
95 95
96 private updateComputedAttributes () { 96 updateComputedAttributes () {
97 this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this) 97 this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this)
98 this.bannerUrl = VideoChannel.GET_ACTOR_BANNER_URL(this) 98 this.bannerUrl = VideoChannel.GET_ACTOR_BANNER_URL(this)
99 } 99 }