fix: placeholder avatar not being built

Jacobwasbeast · Jacobwasbeast · commit 7d36192df012 · 2025-11-18T17:36:31.000-06:00
diff --git a/Code/skyrim_ui/angular.json b/Code/skyrim_ui/angular.json
@@ -28,25 +28,22 @@
             "optimization": false,
             "namedChunks": true,
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "src",
-                "src/styles"
-              ]
+              "includePaths": ["src", "src/styles"]
             },
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
               "src/assets/sounds/",
-              "src/assets/i18n/"
-            ],
-            "styles": [
-              "src/styles.scss"
+              "src/assets/i18n/",
+              {
+                "glob": "avatar-placeholder.png",
+                "input": "src/assets/images/group",
+                "output": "assets/images/group"
+              }
             ],
+            "styles": ["src/styles.scss"],
             "scripts": [],
-            "allowedCommonJsDependencies": [
-              "flat",
-              "events"
-            ]
+            "allowedCommonJsDependencies": ["flat", "events"]
           },
           "configurations": {
             "production": {
@@ -138,9 +135,7 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         },
         "e2e": {
diff --git a/Code/skyrim_ui/src/app/components/group/group.component.ts b/Code/skyrim_ui/src/app/components/group/group.component.ts
@@ -64,7 +64,14 @@ export class GroupComponent implements OnInit, OnDestroy {
           return [];
         }
         return members
-          .map(member => ({ ...member, isOwner: member.id === group.owner }))
+          .map(member => ({
+            ...member,
+            isOwner: member.id === group.owner,
+            avatar:
+              member.avatar && member.avatar.length > 0
+                ? member.avatar
+                : this.defaultAvatar,
+          }))
           .sort((a, b) =>
             (group.owner === a.id) === (group.owner === b.id)
               ? 0
diff --git a/Code/skyrim_ui/src/app/components/party-menu/party-menu.component.html b/Code/skyrim_ui/src/app/components/party-menu/party-menu.component.html
@@ -7,7 +7,7 @@ <h3 class="panel-title">
   </p>
   <div class="profile-picture-preview" (click)="resetUploadError()">
     <img
-      [src]="(profilePreview$ | async) || defaultAvatar"
+      [src]="profilePreviewSafeUrl$ | async"
       [alt]="'Profile picture preview'"
       draggable="false"
     />
diff --git a/Code/skyrim_ui/src/app/components/party-menu/party-menu.component.ts b/Code/skyrim_ui/src/app/components/party-menu/party-menu.component.ts
@@ -1,5 +1,11 @@
-import { ChangeDetectionStrategy, Component, NgZone, OnDestroy } from '@angular/core';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  NgZone,
+  OnDestroy,
+} from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { BehaviorSubject, Observable, Subscription, combineLatest } from 'rxjs';
 import { filter, map, pluck, startWith } from 'rxjs/operators';
 import { Player } from 'src/app/models/player';
 import { ClientService } from 'src/app/services/client.service';
@@ -15,14 +21,26 @@ import { PlayerListService } from 'src/app/services/player-list.service';
 })
 export class PartyMenuComponent implements OnDestroy {
   isLoading$ = this.loadingService.getLoading();
-  members$ = this.groupService.selectMembers();
+  members$ = combineLatest([
+    this.groupService.selectMembers(),
+    this.clientService.localPlayerIdChange,
+  ]).pipe(
+    map(([members, localId]) =>
+      members.filter(member => member.id !== localId),
+    ),
+  );
   memberCount$ = this.groupService.selectMembersLength(true);
   group$ = this.groupService.group.asObservable();
   isLaunchPartyDisabled$: Observable<boolean>;
   invitations$: Observable<Player[]>;
   isPartyLeader$: Observable<boolean>;
-  readonly defaultAvatar = 'assets/images/group/avatar-placeholder.png';
-  profilePreview$ = new BehaviorSubject<string | null>(null);
+  readonly defaultAvatarPath = 'assets/images/group/avatar-placeholder.png';
+  readonly defaultAvatar: SafeUrl;
+  private readonly profilePreviewSubject = new BehaviorSubject<string | null>(
+    null,
+  );
+  profilePreview$ = this.profilePreviewSubject.asObservable();
+  profilePreviewSafeUrl$: Observable<SafeUrl>;
   uploadError$ = new BehaviorSubject<string | null>(null);
   private readonly subscriptions = new Subscription();
   private readonly targetImageSize = 128;
@@ -35,7 +53,19 @@ export class PartyMenuComponent implements OnDestroy {
     private readonly playerListService: PlayerListService,
     private readonly clientService: ClientService,
     private readonly zone: NgZone,
+    private readonly sanitizer: DomSanitizer,
   ) {
+    this.defaultAvatar = this.sanitizer.bypassSecurityTrustUrl(
+      this.defaultAvatarPath,
+    );
+    this.profilePreviewSafeUrl$ = this.profilePreviewSubject.pipe(
+      map(preview =>
+        preview
+          ? this.sanitizer.bypassSecurityTrustUrl(preview)
+          : this.defaultAvatar,
+      ),
+    );
+
     this.invitations$ = this.playerListService.playerList.asObservable().pipe(
       filter(playerlist => !!playerlist),
       pluck('players'),
@@ -63,23 +93,23 @@ export class PartyMenuComponent implements OnDestroy {
 
         const localPlayer = list.players.find(player => player.id === localId);
         if (localPlayer) {
-          this.profilePreview$.next(localPlayer.avatar || null);
+          this.profilePreviewSubject.next(localPlayer.avatar || null);
         }
       }),
     );
 
     this.subscriptions.add(
       this.clientService.avatarChange.subscribe(player => {
         if (player.id === this.clientService.localPlayerId) {
-          this.profilePreview$.next(player.avatar || null);
+          this.profilePreviewSubject.next(player.avatar || null);
         }
       }),
     );
 
     this.subscriptions.add(
       this.clientService.connectionStateChange.subscribe(isConnected => {
         if (!isConnected) {
-          this.profilePreview$.next(null);
+          this.profilePreviewSubject.next(null);
         }
       }),
     );
@@ -125,29 +155,20 @@ export class PartyMenuComponent implements OnDestroy {
     const allowedExtensions = ['png', 'jpg', 'jpeg'];
 
     if (file.size > this.maxUploadBytes) {
-      this.uploadError$.next(
-        'COMPONENT.PARTY_MENU.PROFILE_PICTURE.ERROR_SIZE',
-      );
+      this.uploadError$.next('COMPONENT.PARTY_MENU.PROFILE_PICTURE.ERROR_SIZE');
       input.value = '';
       return;
     }
 
-    if (
-      file.type &&
-      !allowedMimeTypes.includes(file.type.toLowerCase())
-    ) {
-      this.uploadError$.next(
-        'COMPONENT.PARTY_MENU.PROFILE_PICTURE.ERROR_TYPE',
-      );
+    if (file.type && !allowedMimeTypes.includes(file.type.toLowerCase())) {
+      this.uploadError$.next('COMPONENT.PARTY_MENU.PROFILE_PICTURE.ERROR_TYPE');
       input.value = '';
       return;
     }
 
     const extension = file.name.split('.').pop()?.toLowerCase();
     if (!file.type && extension && !allowedExtensions.includes(extension)) {
-      this.uploadError$.next(
-        'COMPONENT.PARTY_MENU.PROFILE_PICTURE.ERROR_TYPE',
-      );
+      this.uploadError$.next('COMPONENT.PARTY_MENU.PROFILE_PICTURE.ERROR_TYPE');
       input.value = '';
       return;
     }
@@ -174,7 +195,7 @@ export class PartyMenuComponent implements OnDestroy {
             }
 
             this.uploadError$.next(null);
-            this.profilePreview$.next(normalized);
+            this.profilePreviewSubject.next(normalized);
             this.clientService.setProfilePicture(normalized);
           })
           .catch(() => {
@@ -197,7 +218,7 @@ export class PartyMenuComponent implements OnDestroy {
 
   public clearProfilePicture() {
     this.uploadError$.next(null);
-    this.profilePreview$.next(null);
+    this.profilePreviewSubject.next(null);
     this.clientService.setProfilePicture('');
   }
 
diff --git a/Code/skyrim_ui/src/app/components/party-pins/party-pins.component.ts b/Code/skyrim_ui/src/app/components/party-pins/party-pins.component.ts
@@ -34,7 +34,10 @@ export class PartyPinsComponent implements OnDestroy {
         return {
           ...pin,
           name: resolvedName,
-          avatar: resolvedAvatar,
+          avatar:
+            resolvedAvatar && resolvedAvatar.length > 0
+              ? resolvedAvatar
+              : this.defaultAvatar,
         };
       });
     });
diff --git a/Code/skyrim_ui/src/app/models/player.ts b/Code/skyrim_ui/src/app/models/player.ts
@@ -1,7 +1,7 @@
 export interface Friend {
   id: number;
   name: string;
-  avatar: string;
+  avatar?: string;
   online: boolean;
 }
 
@@ -13,7 +13,7 @@ export class Player implements Friend {
   /** Username. */
   name: string;
 
-  avatar: string;
+  avatar?: string;
 
   /** Current health. */
   health?: number;
@@ -63,7 +63,9 @@ export class Player implements Friend {
   ) {
     this.id = options.id || 0;
     this.name = options.name || '';
-    this.avatar = options.avatar || '';
+    if (options.avatar) {
+      this.avatar = options.avatar;
+    }
     this.hasInvitedLocalPlayer = options.hasInvitedLocalPlayer || false;
     this.cellName = options.cellName || 'vide';
 
diff --git a/Code/skyrim_ui/src/app/services/player-list.service.ts b/Code/skyrim_ui/src/app/services/player-list.service.ts
@@ -14,6 +14,7 @@ import { PopupNotificationService } from './popup-notification.service';
 })
 export class PlayerListService implements OnDestroy {
   public playerList = new BehaviorSubject<PlayerList | undefined>(undefined);
+  private readonly defaultAvatar = 'assets/images/group/avatar-placeholder.png';
 
   private debugSubscription: Subscription;
   private connectionSubscription: Subscription;
@@ -100,9 +101,20 @@ export class PlayerListService implements OnDestroy {
             existing.cellName = player.cellName;
             existing.connected = player.connected;
             existing.online = player.online;
-            existing.avatar = player.avatar;
+            existing.avatar =
+              player.avatar && player.avatar.length > 0
+                ? player.avatar
+                : existing.avatar || this.defaultAvatar;
           } else {
-            playerList.players.push(player);
+            playerList.players.push(
+              new Player({
+                ...player,
+                avatar:
+                  player.avatar && player.avatar.length > 0
+                    ? player.avatar
+                    : this.defaultAvatar,
+              }),
+            );
           }
           this.playerList.next(playerList);
         }
@@ -254,11 +266,10 @@ export class PlayerListService implements OnDestroy {
       this.ensureLocalPlayerEntry();
     });
 
-    this.localPlayerSubscription = this.clientService.localPlayerIdChange.subscribe(
-      () => {
+    this.localPlayerSubscription =
+      this.clientService.localPlayerIdChange.subscribe(() => {
         this.ensureLocalPlayerEntry();
-      },
-    );
+      });
   }
 
   private ensureLocalPlayerEntry() {
@@ -283,10 +294,16 @@ export class PlayerListService implements OnDestroy {
         online: true,
         cellName: '',
         isLoaded: true,
+        avatar: this.defaultAvatar,
       });
       playerList.players.push(existing);
-    } else if (displayName && displayName.length > 0) {
-      existing.name = displayName;
+    } else {
+      if (displayName && displayName.length > 0) {
+        existing.name = displayName;
+      }
+      if (!existing.avatar) {
+        existing.avatar = this.defaultAvatar;
+      }
     }
 
     existing.connected = true;
