Add ability to update the banner

8 files changed, 7 insertions, 313 deletions

diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
deleted file mode 100644
index f3db55310..000000000
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<ng-container *ngIf="actor">
-  <div class="actor">
-    <div class="d-flex">
-      <img [ngClass]="{ channel: isChannel() }" [src]="actor.avatarUrl" alt="Avatar" />
-
-      <div class="actor-img-edit-container">
-
-        <div *ngIf="!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" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
-        </div>
-
-        <div *ngIf="hasAvatar()" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-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-names">
-        <div class="actor-info-display-name">{{ actor.displayName }}</div>
-        <div class="actor-info-username">{{ actor.name }}</div>
-      </div>
-      <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
-    </div>
-  </div>
-</ng-container>
-
-<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" title=" " 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-main/account/actor-avatar-info.component.scss b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
deleted file mode 100644
index 40ba4269b..000000000
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-.actor {
-  display: flex;
-
-  img {
-    margin-right: 15px;
-
-    &:not(.channel) {
-      @include avatar(100px);
-    }
-
-    &.channel {
-      @include channel-avatar(100px);
-    }
-  }
-
-  .actor-img-edit-container {
-    position: relative;
-    width: 0;
-
-    .actor-img-edit-button {
-      @include peertube-button-file(21px);
-      @include button-with-icon(19px);
-      @include orange-button;
-
-      margin-top: 10px;
-      margin-bottom: 5px;
-      border-radius: 50%;
-      top: 55px;
-      right: 45px;
-      cursor: pointer;
-
-      input {
-        width: 30px;
-        height: 30px;
-      }
-
-      my-global-icon {
-        right: 7px;
-      }
-    }
-  }
-
-  .actor-info {
-    justify-content: center;
-    display: inline-flex;
-    flex-direction: column;
-
-    .actor-info-names {
-      display: flex;
-      align-items: center;
-
-      .actor-info-display-name {
-        font-size: 20px;
-        font-weight: $font-bold;
-
-        @media screen and (max-width: $small-view) {
-          font-size: 16px;
-        }
-      }
-
-      .actor-info-username {
-        margin-left: 7px;
-        position: relative;
-        top: 2px;
-        font-size: 14px;
-        color: $grey-actor-name;
-      }
-    }
-
-    .actor-info-followers {
-      font-size: 15px;
-      padding-bottom: .5rem;
-    }
-  }
-}
-
-.actor-img-edit-container ::ng-deep .popover-avatar-info .popover-body {
-  padding: 0;
-
-  .dropdown-item {
-    padding: 6px 10px;
-    border-radius: 4px;
-
-    &:first-child {
-      @include peertube-file;
-      display: block;
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
deleted file mode 100644
index 87e9e917c..000000000
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
-import { Notifier, ServerService } from '@app/core'
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
-import { getBytes } from '@root-helpers/bytes'
-import { Account } from '../account/account.model'
-import { VideoChannel } from '../video-channel/video-channel.model'
-import { Actor } from './actor.model'
-
-@Component({
-  selector: 'my-actor-avatar-info',
-  templateUrl: './actor-avatar-info.component.html',
-  styleUrls: [ './actor-avatar-info.component.scss' ]
-})
-export class ActorAvatarInfoComponent implements OnInit, OnChanges {
-  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
-  @ViewChild('avatarPopover') avatarPopover: NgbPopover
-
-  @Input() actor: VideoChannel | Account
-
-  @Output() avatarChange = new EventEmitter<FormData>()
-  @Output() avatarDelete = new EventEmitter<void>()
-
-  avatarFormat = ''
-  maxAvatarSize = 0
-  avatarExtensions = ''
-
-  private avatarUrl: string
-
-  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}`
-        })
-  }
-
-  ngOnChanges (changes: SimpleChanges) {
-    if (changes['actor']) {
-      this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.actor)
-    }
-  }
-
-  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.avatarUrl
-  }
-
-  isChannel () {
-    return !!(this.actor as VideoChannel).ownerAccount
-  }
-}
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 c105a88ac..670823060 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -3,15 +3,18 @@ import { getAbsoluteAPIUrl } from '@app/helpers'
 
 export abstract class Actor implements ActorServer {
   id: number
-  url: string
   name: string
+
   host: string
+  url: string
+
   followingCount: number
   followersCount: number
+
   createdAt: Date | string
   updatedAt: Date | string
-  avatar: ActorImage
 
+  avatar: ActorImage
   avatarUrl: string
 
   isLocal: boolean
@@ -24,6 +27,8 @@ export abstract class Actor implements ActorServer {
 
       return absoluteAPIUrl + actor.avatar.path
     }
+
+    return ''
   }
 
   static CREATE_BY_STRING (accountName: string, host: string, forceHostname = false) {
diff --git a/client/src/app/shared/shared-main/account/index.ts b/client/src/app/shared/shared-main/account/index.ts
index 61c800e56..b80ddb9f5 100644
--- a/client/src/app/shared/shared-main/account/index.ts
+++ b/client/src/app/shared/shared-main/account/index.ts
@@ -1,5 +1,3 @@
 export * from './account.model'
 export * from './account.service'
-export * from './actor-avatar-info.component'
 export * from './actor.model'
-export * from './video-avatar-channel.component'
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html b/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
deleted file mode 100644
index 5058f05dd..000000000
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="wrapper" [ngClass]="'avatar-' + size">
-  <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
-    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
-    </a>
-
-    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
-      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
-    </a>
-  </ng-container>
-
-  <ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
-    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
-      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
-    </a>
-
-    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
-    </a>
-  </ng-container>
-
-  <ng-container *ngIf="isChannelAvatarNull()">
-    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
-      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
-    </a>
-  </ng-container>
-</div>
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
deleted file mode 100644
index 4998e85fa..000000000
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@import '_mixins';
-
-.wrapper {
-  $avatar-size: 35px;
-
-  width: $avatar-size;
-  height: $avatar-size;
-  position: relative;
-  margin-right: 5px;
-  margin-bottom: 5px;
-
-  &.avatar-sm {
-    width: 28px;
-    height: 28px;
-    margin-bottom: 3px;
-  }
-
-  a {
-    @include disable-outline;
-  }
-
-  a img {
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top:50%;
-    left:50%;
-    transform: translate(-50%,-50%);
-    border-radius: 5px;
-
-    &:not(.channel-avatar) {
-      border-radius: 50%;
-    }
-  }
-
-  a:nth-of-type(2) img {
-    height: 60%;
-    width: 60%;
-    border: 2px solid pvar(--mainBackgroundColor);
-    transform: translateX(15%);
-    position: relative;
-    background-color: pvar(--mainBackgroundColor);
-  }
-}
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.ts b/client/src/app/shared/shared-main/account/video-avatar-channel.component.ts
deleted file mode 100644
index 440e2b522..000000000
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core'
-import { Video } from '../video/video.model'
-
-@Component({
-  selector: 'my-video-avatar-channel',
-  templateUrl: './video-avatar-channel.component.html',
-  styleUrls: [ './video-avatar-channel.component.scss' ]
-})
-export class VideoAvatarChannelComponent implements OnInit {
-  @Input() video: Video
-  @Input() byAccount: string
-
-  @Input() size: 'md' | 'sm' = 'md'
-  @Input() genericChannel: boolean
-
-  channelLinkTitle = ''
-  accountLinkTitle = ''
-
-  ngOnInit () {
-    this.channelLinkTitle = $localize`${this.video.account.name} (channel page)`
-    this.accountLinkTitle = $localize`${this.video.byAccount} (account page)`
-  }
-
-  isChannelAvatarNull () {
-    return this.video.channel.avatar === null
-  }
-}