From cd399088f5662dceaf500141e5c3a466b51f8ddf Mon Sep 17 00:00:00 2001
From: themoonisacheese <oliviersenn6@gmail.com>
Date: Wed, 13 Dec 2023 17:33:41 +0100
Subject: [PATCH 1/2] fix incorrect borders on user link images (#71)

---
 src/app/elements/user-link/user-link.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/elements/user-link/user-link.component.scss b/src/app/elements/user-link/user-link.component.scss
index 13a0d5ae..006bd77f 100644
--- a/src/app/elements/user-link/user-link.component.scss
+++ b/src/app/elements/user-link/user-link.component.scss
@@ -5,6 +5,6 @@
 img {
   border-radius: 50%;
   height: 1.5em;
-  padding-right: 5px;
+  margin-right: 5px;
   transform: translate(0%, 25%);
 }

From e394e9880c7f68df057fb63da014ecd3253b6701 Mon Sep 17 00:00:00 2001
From: duncte123 <contact@duncte123.me>
Date: Sun, 25 Feb 2024 17:56:58 +0100
Subject: [PATCH 2/2] Add support for youtube as a social media platform

---
 .../user-social/box/box.component.html        |  4 +--
 .../profile/user-social/box/box.component.ts  | 26 +++++++++++++++----
 src/assets/i18n                               |  2 +-
 src/model/social-account.ts                   |  4 ++-
 src/model/social-platform.ts                  |  1 +
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/app/user/profile/user-social/box/box.component.html b/src/app/user/profile/user-social/box/box.component.html
index 3377a99a..7891d772 100644
--- a/src/app/user/profile/user-social/box/box.component.html
+++ b/src/app/user/profile/user-social/box/box.component.html
@@ -1,13 +1,13 @@
 <a *ngIf="connectionMeta.link; else noLink" [href]="connectionMeta.link" target="_blank" class="social-link-container">
   <p>{{ (connectionMeta.header | translate) || connection.platform }}</p>
   <fa-icon [icon]="connectionMeta.icon" size="2x"></fa-icon>
-  <p>{{ connection.username }}</p>
+  <p>{{ usernameFormatted }}</p>
 </a>
 
 <ng-template #noLink>
   <div class="social-link-container">
     <p>{{ (connectionMeta.header | translate) || connection.platform }}</p>
     <fa-icon [icon]="connectionMeta.icon" size="2x"></fa-icon>
-    <p>{{ connection.username }}</p>
+    <p>{{ usernameFormatted }}</p>
   </div>
 </ng-template>
diff --git a/src/app/user/profile/user-social/box/box.component.ts b/src/app/user/profile/user-social/box/box.component.ts
index 44cb49e7..20a50213 100644
--- a/src/app/user/profile/user-social/box/box.component.ts
+++ b/src/app/user/profile/user-social/box/box.component.ts
@@ -1,6 +1,15 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ConnectionMeta, ConnectionMetas, SocialAccount } from '../../../../../model/social-account';
-import { faDiscord, faFacebookF, faInstagram, faMastodon, faSnapchatGhost, faTwitch, faTwitter } from '@fortawesome/free-brands-svg-icons';
+import {
+  faDiscord,
+  faFacebookF,
+  faInstagram,
+  faMastodon,
+  faSnapchatGhost,
+  faTwitch,
+  faTwitter,
+  faYoutube,
+} from '@fortawesome/free-brands-svg-icons';
 import { faEnvelope, faPhone, faStar, faTrophy, faTv } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
@@ -8,7 +17,7 @@ import { faEnvelope, faPhone, faStar, faTrophy, faTv } from '@fortawesome/free-s
   templateUrl: './box.component.html',
   styleUrls: ['./box.component.scss']
 })
-export class BoxComponent implements OnInit {
+export class BoxComponent {
   @Input() connection: SocialAccount;
 
   connectionMetas: ConnectionMetas&{ _DEFAULT: ConnectionMeta } = {
@@ -70,15 +79,22 @@ export class BoxComponent implements OnInit {
       icon: faTwitter,
       header: 'platform.TWITTER',
     },
+    YOUTUBE: {
+      linkBase: fragment => `https://www.youtube.com/@${fragment}`,
+      usernameFormatter: username => `@${username}`,
+      icon: faYoutube,
+      header: 'platform.YOUTUBE',
+    },
 
     _DEFAULT: {
       icon: faStar,
     },
   };
 
-  constructor() { }
+  get usernameFormatted(): string {
+    const connectionMeta = this.connectionMetas[this.connection?.platform] ?? this.connectionMetas._DEFAULT;
 
-  ngOnInit(): void {
+    return connectionMeta?.usernameFormatter?.(this.connection.username) ?? this.connection.username;
   }
 
   get connectionMeta(): ConnectionMeta {
diff --git a/src/assets/i18n b/src/assets/i18n
index 4a264531..f4e978f2 160000
--- a/src/assets/i18n
+++ b/src/assets/i18n
@@ -1 +1 @@
-Subproject commit 4a2645319e5b99ceaacbac9c5d6de5b44410de0e
+Subproject commit f4e978f2d4dd9406efc17566b8dadb91d6ea3f8b
diff --git a/src/model/social-account.ts b/src/model/social-account.ts
index 3d9027be..4a8e3d3e 100644
--- a/src/model/social-account.ts
+++ b/src/model/social-account.ts
@@ -11,7 +11,8 @@ export type ConnectionPlatform =
   'SNAPCHAT' |
   'SPEEDRUNCOM' |
   'TWITCH' |
-  'TWITTER';
+  'TWITTER' |
+  'YOUTUBE';
 
 export class SocialAccount {
   id?: number;
@@ -21,6 +22,7 @@ export class SocialAccount {
 
 export interface ConnectionMeta {
   linkBase?: (fragment: string) => string;
+  usernameFormatter?: (username: string) => string;
   icon: IconDefinition;
   header?: string;
   link?: string;
diff --git a/src/model/social-platform.ts b/src/model/social-platform.ts
index d5cf3a29..ead88fda 100644
--- a/src/model/social-platform.ts
+++ b/src/model/social-platform.ts
@@ -9,4 +9,5 @@ export enum SocialPlatform {
   SPEEDRUNCOM = 'https://speedrun.com/user/',
   TWITCH = 'https://www.twitch.tv/',
   TWITTER = 'https://www.twitter.com/',
+  YOUTUBE = 'https://www.youtube.com/@',
 }