From 74382e0cdb91199ff97cd0f3de66f66cec40cc8e Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 14 Jan 2025 10:18:41 +0100
Subject: [PATCH] Radius consistency

---
 .../about-follows.component.html              |  4 ++--
 .../follower-image.component.scss             |  2 +-
 .../subscription-image.component.html         |  2 +-
 .../subscription-image.component.scss         |  2 +-
 client/src/app/+about/about.component.scss    |  2 +-
 .../actor-avatar.component.scss               |  4 ++++
 .../actor-avatar.component.ts                 | 23 +++++++++++--------
 client/src/sass/include/_variables.scss       |  4 ++++
 8 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 222db1b7a..1d479877e 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -17,7 +17,7 @@
       <div i18n class="no-results" *ngIf="subscriptionsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
 
       <div *ngFor="let subscription of subscriptions" class="follow-block">
-        <my-actor-avatar [actor]="subscription" actorType="channel" size="32"></my-actor-avatar>
+        <my-actor-avatar [actor]="subscription" actorType="instance" size="32"></my-actor-avatar>
 
         <div>
           <a class="follow-name" [href]="subscription.url" target="_blank" rel="noopener noreferrer">{{ subscription.name }}</a>
@@ -66,7 +66,7 @@
       <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
 
       <div *ngFor="let follower of followers" class="follow-block">
-        <my-actor-avatar [actor]="follower" actorType="channel" size="32"></my-actor-avatar>
+        <my-actor-avatar [actor]="follower" actorType="instance" size="32"></my-actor-avatar>
 
         <div>
           <a class="follow-name" [href]="follower.url" target="_blank" rel="noopener noreferrer">{{ follower.name }}</a>
diff --git a/client/src/app/+about/about-follows/follower-image.component.scss b/client/src/app/+about/about-follows/follower-image.component.scss
index ef4b37f05..fab3e4f69 100644
--- a/client/src/app/+about/about-follows/follower-image.component.scss
+++ b/client/src/app/+about/about-follows/follower-image.component.scss
@@ -11,7 +11,7 @@ img {
   width: 30px;
   height: 30px;
   border: 1px solid pvar(--bg-secondary-400);
-  border-radius: 8px;
+  border-radius: $instance-img-radius;
   position: absolute;
   right: 36px;
   bottom: 25px;
diff --git a/client/src/app/+about/about-follows/subscription-image.component.html b/client/src/app/+about/about-follows/subscription-image.component.html
index 16fa58c59..49b7388ca 100644
--- a/client/src/app/+about/about-follows/subscription-image.component.html
+++ b/client/src/app/+about/about-follows/subscription-image.component.html
@@ -1,5 +1,5 @@
 <div class="root" aria-hidden="true">
-  <img [src]=    "avatarUrl" alt="">
+  <img [src]="avatarUrl" alt="">
 
   <svg width="125" height="129" viewBox="0 0 125 129" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M43.4996 129L18.9946 27.2709L36.8651 13.7961L124.924 67.6037L43.4996 129Z"
diff --git a/client/src/app/+about/about-follows/subscription-image.component.scss b/client/src/app/+about/about-follows/subscription-image.component.scss
index 8e853b863..f7ddbbcd4 100644
--- a/client/src/app/+about/about-follows/subscription-image.component.scss
+++ b/client/src/app/+about/about-follows/subscription-image.component.scss
@@ -11,7 +11,7 @@ img {
   width: 30px;
   height: 30px;
   border: 1px solid pvar(--bg-secondary-400);
-  border-radius: 8px;
+  border-radius: $instance-img-radius;
   position: absolute;
   top: 9px;
   left: 15px;
diff --git a/client/src/app/+about/about.component.scss b/client/src/app/+about/about.component.scss
index 996a18827..92c672b23 100644
--- a/client/src/app/+about/about.component.scss
+++ b/client/src/app/+about/about.component.scss
@@ -31,7 +31,7 @@ h1 {
 }
 
 .avatar img {
-  border-radius: 24px;
+  border-radius: $instance-img-radius;;
 
   width: 110px;
   height: 110px;
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
index fc6f610fa..6245b4dc5 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
@@ -16,6 +16,10 @@
   &.channel {
     border-radius: 5px;
   }
+
+  &.instance {
+    border-radius: $instance-img-radius;
+  }
 }
 
 a {
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 3262a6028..02477886d 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -4,6 +4,7 @@ import { objectKeysTyped } from '@peertube/peertube-core-utils'
 import { RouterLink } from '@angular/router'
 import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common'
 import { VideoChannel } from '../shared-main/channel/video-channel.model'
+import { Actor } from '../shared-main/account/actor.model'
 
 export type ActorAvatarInput = {
   name: string
@@ -21,7 +22,7 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
   @ViewChild('avatarEl') avatarEl: ElementRef
 
   @Input() actor: ActorAvatarInput
-  @Input() actorType: 'channel' | 'account' | 'unlogged'
+  @Input() actorType: 'channel' | 'account' | 'instance' | 'unlogged'
 
   @Input() previewImage: string
 
@@ -43,6 +44,7 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
     if (this._title) return this._title
     if (this.isAccount()) return $localize`${this.actor.name} (account page)`
     if (this.isChannel()) return $localize`${this.actor.name} (channel page)`
+    if (this.isInstance()) return $localize`${this.actor.name} (instance page)`
 
     return ''
   }
@@ -87,8 +89,10 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
 
     if (this.isChannel()) {
       this.classes.push('channel')
-    } else {
+    } else if (this.isAccount()) {
       this.classes.push('account')
+    } else if (this.isInstance()) {
+      this.classes.push('instance')
     }
 
     // No avatar, use actor name initial
@@ -103,6 +107,8 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
   }
 
   private buildDefaultAvatarUrl () {
+    // TODO: have a default instance avatar
+
     this.defaultAvatarUrl = this.isChannel()
       ? VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
       : Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
@@ -114,13 +120,8 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
       return
     }
 
-    if (this.isAccount()) {
-      this.avatarUrl = Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
-      return
-    }
-
-    if (this.isChannel()) {
-      this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
+    if (this.isAccount() || this.isChannel() || this.isInstance()) {
+      this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
       return
     }
 
@@ -157,6 +158,10 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
     return this.actorType === 'channel'
   }
 
+  private isInstance () {
+    return this.actorType === 'instance'
+  }
+
   private getSizeNumber () {
     if (this.size) return +this.size
 
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index b88c1306d..6baf1a0c1 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -61,6 +61,10 @@ $video-thumbnail-small-width: 125px;
 
 // ---------------------------------------------------------------------------
 
+$instance-img-radius: 31%;
+
+// ---------------------------------------------------------------------------
+
 $theater-bottom-space: 115px;
 $player-portrait-bottom-space: 50px;