diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-08 12:09:54 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-08 13:38:04 +0200 |
commit | 27ec473f5306621643fcb169be7cfe6b15136265 (patch) | |
tree | bc4a8d81c5baa58ae1af6434731644da7c2df109 /client/src/app/shared/shared-actor-image | |
parent | 84531547bc0934a2abda586d539f7455b455d488 (diff) | |
download | PeerTube-27ec473f5306621643fcb169be7cfe6b15136265.tar.gz PeerTube-27ec473f5306621643fcb169be7cfe6b15136265.tar.zst PeerTube-27ec473f5306621643fcb169be7cfe6b15136265.zip |
Set channel banner/avatar in creation form
Diffstat (limited to 'client/src/app/shared/shared-actor-image')
4 files changed, 24 insertions, 4 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 @@ | |||
1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | 1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' |
2 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' | ||
2 | import { Notifier, ServerService } from '@app/core' | 3 | import { Notifier, ServerService } from '@app/core' |
3 | import { Account, VideoChannel } from '@app/shared/shared-main' | 4 | import { Account, VideoChannel } from '@app/shared/shared-main' |
4 | import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' | 5 | import { 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 @@ | |||
1 | import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' | 1 | import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' |
2 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' | ||
2 | import { Notifier, ServerService } from '@app/core' | 3 | import { Notifier, ServerService } from '@app/core' |
3 | import { VideoChannel } from '@app/shared/shared-main' | 4 | import { VideoChannel } from '@app/shared/shared-main' |
4 | import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' | 5 | import { 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 | } |