Merge branch 'master' into username-password-login

oengusio · Feb 25, 2024 · 6ca68df · 6ca68df
2 parents 4ef1199 + e394e98
commit 6ca68df
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git 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%);
 }
diff --git 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
@@ -1,14 +1,23 @@
-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({
   selector: 'app-box',
   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/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
@@ -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/@',
 }