9 files changed, 359 insertions, 0 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
new file mode 100644
index 000000000..10f2ef262
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
@@ -0,0 +1,41 @@
+<div class="actor" *ngIf="actor">
+  <div class="d-flex">
+    <img [ngClass]="{ channel: isChannel() }" [src]="actor.avatarUrl" alt="Avatar" />
+
+    <div class="actor-img-edit-container">
+
+      <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
+        <my-global-icon iconName="upload"></my-global-icon>
+        <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
+        <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
+      </div>
+
+      <div
+        *ngIf="editable && hasAvatar()" class="actor-img-edit-button"
+        #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right"
+      >
+        <my-global-icon iconName="edit"></my-global-icon>
+        <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="actor-info">
+    <div class="actor-info-display-name">{{ actor.displayName }}</div>
+    <div *ngIf="displayUsername" class="actor-info-username">{{ actor.name }}</div>
+    <div *ngIf="displaySubscribers" i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
+  </div>
+</div>
+
+<ng-template #avatarEditContent>
+  <div class="dropdown-item c-hand" [ngbTooltip]="avatarFormat" placement="right" container="body">
+    <my-global-icon iconName="upload"></my-global-icon>
+    <span for="avatarfile" i18n>Upload a new avatar</span>
+    <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
+  </div>
+  <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
+    <my-global-icon iconName="delete"></my-global-icon>
+    <span i18n>Remove avatar</span>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss
new file mode 100644
index 000000000..8b0172315
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss
@@ -0,0 +1,54 @@
+@import '_variables';
+@import '_mixins';
+
+.actor {
+  display: flex;
+
+  img {
+    margin-right: 15px;
+
+    &:not(.channel) {
+      @include avatar(100px);
+    }
+
+    &.channel {
+      @include channel-avatar(100px);
+    }
+  }
+
+  .actor-info {
+    display: inline-flex;
+    flex-direction: column;
+
+    .actor-info-display-name {
+      font-size: 20px;
+      font-weight: $font-bold;
+
+      @media screen and (max-width: $small-view) {
+        font-size: 16px;
+      }
+    }
+
+    .actor-info-username {
+      position: relative;
+      font-size: 14px;
+      color: pvar(--greyForegroundColor);
+    }
+
+    .actor-info-followers {
+      font-size: 15px;
+      padding-bottom: .5rem;
+    }
+  }
+}
+
+.actor-img-edit-container {
+  position: relative;
+  width: 0;
+}
+
+.actor-img-edit-button {
+  top: 55px;
+  right: 45px;
+  border-radius: 50%;
+}
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
new file mode 100644
index 000000000..6f76172e9
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
@@ -0,0 +1,73 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
+import { Account, VideoChannel } from '@app/shared/shared-main'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { getBytes } from '@root-helpers/bytes'
+
+@Component({
+  selector: 'my-actor-avatar-edit',
+  templateUrl: './actor-avatar-edit.component.html',
+  styleUrls: [
+    './actor-image-edit.scss',
+    './actor-avatar-edit.component.scss'
+  ]
+})
+export class ActorAvatarEditComponent implements OnInit {
+  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('avatarPopover') avatarPopover: NgbPopover
+
+  @Input() actor: VideoChannel | Account
+  @Input() editable = true
+  @Input() displaySubscribers = true
+  @Input() displayUsername = true
+
+  @Output() avatarChange = new EventEmitter<FormData>()
+  @Output() avatarDelete = new EventEmitter<void>()
+
+  avatarFormat = ''
+  maxAvatarSize = 0
+  avatarExtensions = ''
+
+  constructor (
+    private serverService: ServerService,
+    private notifier: Notifier
+  ) { }
+
+  ngOnInit (): void {
+    this.serverService.getConfig()
+        .subscribe(config => {
+          this.maxAvatarSize = config.avatar.file.size.max
+          this.avatarExtensions = config.avatar.file.extensions.join(', ')
+
+          this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
+                              `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
+        })
+  }
+
+  onAvatarChange (input: HTMLInputElement) {
+    this.avatarfileInput = new ElementRef(input)
+
+    const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
+    if (avatarfile.size > this.maxAvatarSize) {
+      this.notifier.error('Error', $localize`This image is too large.`)
+      return
+    }
+
+    const formData = new FormData()
+    formData.append('avatarfile', avatarfile)
+    this.avatarPopover?.close()
+    this.avatarChange.emit(formData)
+  }
+
+  deleteAvatar () {
+    this.avatarDelete.emit()
+  }
+
+  hasAvatar () {
+    return !!this.actor.avatar
+  }
+
+  isChannel () {
+    return !!(this.actor as VideoChannel).ownerAccount
+  }
+}
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
new file mode 100644
index 000000000..eb1b66422
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
@@ -0,0 +1,34 @@
+<div class="actor" *ngIf="actor">
+  <div class="actor-img-edit-container">
+    <div class="banner-placeholder">
+      <img *ngIf="hasBanner()" [src]="actor.bannerUrl" alt="Banner" />
+    </div>
+
+    <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
+      <my-global-icon iconName="upload"></my-global-icon>
+      <label for="bannerfile" i18n>Upload a new banner</label>
+      <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+    </div>
+
+    <div
+      *ngIf="hasBanner()" class="actor-img-edit-button"
+      #bannerPopover="ngbPopover" [ngbPopover]="bannerEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right"
+    >
+      <my-global-icon iconName="edit"></my-global-icon>
+      <label for="bannerMenu" i18n>Change your banner</label>
+    </div>
+  </div>
+</div>
+
+<ng-template #bannerEditContent>
+  <div class="dropdown-item c-hand" [ngbTooltip]="bannerFormat" placement="right" container="body">
+    <my-global-icon iconName="upload"></my-global-icon>
+    <span for="bannerfile" i18n>Upload a new banner</span>
+    <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+  </div>
+
+  <div class="dropdown-item c-hand" (click)="deleteBanner()" (key.enter)="deleteBanner()">
+    <my-global-icon iconName="delete"></my-global-icon>
+    <span i18n>Remove banner</span>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss
new file mode 100644
index 000000000..23606f871
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss
@@ -0,0 +1,27 @@
+@import '_variables';
+@import '_mixins';
+
+.banner-placeholder {
+  @include block-ratio('> div, > img', $banner-inverted-ratio);
+}
+
+.banner-placeholder {
+  background-color: pvar(--greyBackgroundColor);
+}
+
+.actor-img-edit-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.actor-img-edit-button {
+  position: absolute;
+  width: auto;
+
+  label {
+    font-weight: $font-semibold;
+    margin-bottom: 0;
+  }
+}
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
new file mode 100644
index 000000000..b92ecef4b
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
@@ -0,0 +1,65 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
+import { VideoChannel } from '@app/shared/shared-main'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { getBytes } from '@root-helpers/bytes'
+
+@Component({
+  selector: 'my-actor-banner-edit',
+  templateUrl: './actor-banner-edit.component.html',
+  styleUrls: [
+    './actor-image-edit.scss',
+    './actor-banner-edit.component.scss'
+  ]
+})
+export class ActorBannerEditComponent implements OnInit {
+  @ViewChild('bannerfileInput') bannerfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('bannerPopover') bannerPopover: NgbPopover
+
+  @Input() actor: VideoChannel
+
+  @Output() bannerChange = new EventEmitter<FormData>()
+  @Output() bannerDelete = new EventEmitter<void>()
+
+  bannerFormat = ''
+  maxBannerSize = 0
+  bannerExtensions = ''
+
+  constructor (
+    private serverService: ServerService,
+    private notifier: Notifier
+  ) { }
+
+  ngOnInit (): void {
+    this.serverService.getConfig()
+        .subscribe(config => {
+          this.maxBannerSize = config.banner.file.size.max
+          this.bannerExtensions = config.banner.file.extensions.join(', ')
+
+          this.bannerFormat = $localize`maxsize: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
+        })
+  }
+
+  onBannerChange (input: HTMLInputElement) {
+    this.bannerfileInput = new ElementRef(input)
+
+    const bannerfile = this.bannerfileInput.nativeElement.files[ 0 ]
+    if (bannerfile.size > this.maxBannerSize) {
+      this.notifier.error('Error', $localize`This image is too large.`)
+      return
+    }
+
+    const formData = new FormData()
+    formData.append('bannerfile', bannerfile)
+    this.bannerPopover?.close()
+    this.bannerChange.emit(formData)
+  }
+
+  deleteBanner () {
+    this.bannerDelete.emit()
+  }
+
+  hasBanner () {
+    return !!this.actor.bannerUrl
+  }
+}
diff --git a/client/src/app/shared/shared-actor-image/actor-image-edit.scss b/client/src/app/shared/shared-actor-image/actor-image-edit.scss
new file mode 100644
index 000000000..918955a89
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-image-edit.scss
@@ -0,0 +1,35 @@
+@import '_variables';
+@import '_mixins';
+
+.actor ::ng-deep .popover-image-info .popover-body {
+  padding: 0;
+
+  .dropdown-item {
+    padding: 6px 10px;
+    border-radius: 4px;
+
+    &:first-child {
+      @include peertube-file;
+      display: block;
+    }
+  }
+}
+
+.actor-img-edit-button {
+  @include peertube-button-file(21px);
+  @include button-with-icon(19px);
+  @include orange-button;
+
+  margin-top: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
+
+  input {
+    width: 30px;
+    height: 30px;
+  }
+
+  my-global-icon {
+    right: 7px;
+  }
+}
diff --git a/client/src/app/shared/shared-actor-image/index.ts b/client/src/app/shared/shared-actor-image/index.ts
new file mode 100644
index 000000000..18a9038eb
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/index.ts
@@ -0,0 +1 @@
+export * from './shared-actor-image.module'
diff --git a/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts b/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts
new file mode 100644
index 000000000..6044f9925
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts
@@ -0,0 +1,29 @@
+
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main'
+import { ActorAvatarEditComponent } from './actor-avatar-edit.component'
+import { ActorBannerEditComponent } from './actor-banner-edit.component'
+
+@NgModule({
+  imports: [
+    CommonModule,
+
+    SharedMainModule,
+    SharedGlobalIconModule
+  ],
+
+  declarations: [
+    ActorAvatarEditComponent,
+    ActorBannerEditComponent
+  ],
+
+  exports: [
+    ActorAvatarEditComponent,
+    ActorBannerEditComponent
+  ],
+
+  providers: [ ]
+})
+export class SharedActorImageModule { }