Skip to content

Commit

Permalink
Refactor code in multiple components and services, including chat, po…
Browse files Browse the repository at this point in the history 
…st-event, profile, user, and metadata services, with changes to templates, interfaces, and logic.
  • Loading branch information
@miladsoft
miladsoft committed Nov 13, 2024
1 parent 2b72947 commit 0954da3
Show file tree
Hide file tree
Showing 10 changed files with 188 additions and 162 deletions.
4 changes: 0 additions & 4 deletions src/app/components/chat/chat.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,6 @@ export class ChatService implements OnDestroy {
private _metadataQueueService: MetadataService
) {

this._metadataQueueService.processingStatus$.subscribe((status) => {

});

}

get profile$(): Observable<Profile | null> {
Expand Down
189 changes: 79 additions & 110 deletions src/app/components/post-event/post-event.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,6 @@
<div *ngIf="!loadingReactions"
class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center">
<div class="flex items-center">
<ng-container *ngFor="let zap of zaps | slice: -4">
<img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full shadow-lg ring-2 ring-white"
[src]="
zap.user.picture ||
'/images/avatars/avatar-placeholder.png'
" [alt]="zap.user.name" />
</ng-container>

<div class="ml-3 text-md tracking-tight">
{{ zaps.length }} Zap<span *ngIf="zaps.length > 1">s</span>
</div>
Expand Down Expand Up @@ -224,117 +216,94 @@

<div class="max-h-120 overflow-y-auto">
<div class="relative mx-4 my-6 flex flex-col sm:mx-8">
<div *ngFor="let reply of replies" class="mb-6 flex items-start">
<img class="mr-4 h-8 w-8 rounded-full" [src]="reply.user.picture"
alt="{{ reply.user.name }}" />
<div *ngFor="let reply of replies" class="mb-6 flex flex-col items-start">
<app-replay-profile
[pubkey]="reply?.pubkey"
[avatarUrl]="'/images/avatars/avatar-placeholder.png'"
></app-replay-profile>

<div class="mt-0.5 flex flex-col">
{{ reply.user.name }}:
<span>
<div *ngFor="
let token of parseContent.parseContent(
reply.content
)
" class="inline-block whitespace-pre-wrap break-words">
<!-- YouTube Embeds -->
<ng-container *ngIf="
token.token ===
'youtube'
">
<div class="relative mb-4 block">
<iframe [src]="
token.safeWord
" width="560" height="315" frameborder="0"
allowfullscreen></iframe>
</div>
</ng-container>
<span>
<div
*ngFor="let token of (parseContent.parseContent(reply?.content) || [])"
class="inline-block whitespace-pre-wrap break-words"
>
<!-- YouTube Embeds -->
<ng-container *ngIf="token?.token === 'youtube'">
<div class="relative mb-4 block">
<iframe
[src]="token?.safeWord"
width="560"
height="315"
frameborder="0"
allowfullscreen
></iframe>
</div>
</ng-container>

<!-- Images -->
<ng-container *ngIf="
token.token ===
'image'
">
<div class="relative mb-4 block">
<img [src]="
token.safeWord
" alt="Embedded Image" style="
width: 100%;
" class="max-h-140 object-cover" />
</div>
</ng-container>
<!-- Images -->
<ng-container *ngIf="token?.token === 'image'">
<div class="relative mb-4 block">
<img
[src]="token?.safeWord"
alt="Embedded Image"
style="width: 100%;"
class="max-h-140 object-cover"
/>
</div>
</ng-container>

<!-- Videos -->
<ng-container *ngIf="
token.token ===
'video'
">
<div class="relative mb-4 block">
<video controls style="
width: 100%;
">
<source [src]="
token.safeWord
" type="video/mp4" />
Your browser
does not support
the video tag.
</video>
</div>
</ng-container>
<!-- Videos -->
<ng-container *ngIf="token?.token === 'video'">
<div class="relative mb-4 block">
<video controls style="width: 100%;">
<source [src]="token?.safeWord" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</ng-container>

<!-- Audio -->
<ng-container *ngIf="
token.token ===
'audio'
">
<div class="relative mb-4 block">
<audio controls>
<source [src]="
token.safeWord
" type="audio/mpeg" />
Your browser
does not support
the audio
element.
</audio>
</div>
</ng-container>
<!-- Audio -->
<ng-container *ngIf="token?.token === 'audio'">
<div class="relative mb-4 block">
<audio controls>
<source [src]="token?.safeWord" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
</ng-container>

<!-- Links -->
<ng-container *ngIf="
token.token ===
'link'
">
<div class="mx-6 mb-6 mt-2 sm:mx-1">
<a class="inline-block break-words break-all text-blue-500 underline"
[href]="
token.word
" target="_blank">
<span class="inline-block break-words break-all">{{
token.word
}}</span>
</a>
</div>
</ng-container>
<!-- Links -->
<ng-container *ngIf="token?.token === 'link'">
<div class="mx-6 mb-6 mt-2 sm:mx-1">
<a
class="inline-block break-words break-all text-blue-500 underline"
[href]="token?.word"
target="_blank"
>
<span class="inline-block break-words break-all">
{{ token?.word }}
</span>
</a>
</div>
</ng-container>

<!-- Plain Text -->
<ng-container *ngIf="!token.token">
<div class="mt-2 sm:mx-1">
<span class="inline-block break-words break-all">
{{
token.trim()
}}
</span>
</div>
</ng-container>
<!-- Plain Text -->
<ng-container *ngIf="!token?.token">
<div class="mt-2 sm:mx-1">
<span class="inline-block break-words break-all">
{{ token?.trim() }}
</span>
</div>
</span>
<div class="text-secondary mt-2 flex items-center text-sm">
<span>{{
reply.created_at | ago
}}</span>
</ng-container>
</div>
</span>
<div class="text-secondary mt-2 flex items-center text-sm">
<span>{{ reply?.created_at | ago }}</span>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
Expand Down
45 changes: 14 additions & 31 deletions src/app/components/post-event/post-event.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,12 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { PickerComponent } from '@ctrl/ngx-emoji-mart';
import { ContactInfoComponent } from '../chat/contact-info/contact-info.component';
import { Filter, NostrEvent } from 'nostr-tools';
import { ReplayProfileComponent } from './replay-profile/replay-profile.component';


export interface UserProfile {
name?: string;
picture?: string;
pubkey: string;
}

export interface PostReaction {
user: UserProfile;
pubkey: string;
created_at: number;
content?: string;
}
Expand All @@ -46,7 +43,6 @@ export interface PostReaction {
selector: 'app-post-event',
standalone: true,
imports: [
RouterLink,
AngorCardComponent,
MatIconModule,
MatButtonModule,
Expand All @@ -59,18 +55,13 @@ export interface PostReaction {
CommonModule,
FormsModule,
QRCodeModule,
PickerComponent,
MatSlideToggle,
SafeUrlPipe,
MatProgressSpinnerModule,
InfiniteScrollModule,
EventListComponent,
MatExpansionModule,
MatSidenavModule,
ContactInfoComponent,
DatePipe,
AgoPipe,
MatProgressSpinnerModule
MatProgressSpinnerModule,
ReplayProfileComponent
],
templateUrl: './post-event.component.html',
styleUrls: ['./post-event.component.scss']
Expand All @@ -96,7 +87,7 @@ export class PostEventComponent implements OnInit, OnDestroy {
private metadataQueueService: MetadataService,
private _changeDetectorRef: ChangeDetectorRef,
public parseContent: ParseContentService
) {}
) { }

ngOnInit(): void {
this._route.paramMap.pipe(takeUntil(this._unsubscribeAll)).subscribe((params) => {
Expand Down Expand Up @@ -130,10 +121,7 @@ export class PostEventComponent implements OnInit, OnDestroy {
}, 3000);

const filter: Filter[] = [
{ '#e': [postId], kinds: [1] },
{ '#e': [postId], kinds: [7] },
{ '#e': [postId], kinds: [9735] },
{ '#e': [postId], kinds: [6] }
{ '#e': [postId], kinds: [1,7,9735,6] }
];

this.subscriptionId = this.subscriptionService.addSubscriptions(filter, async (event: NostrEvent) => {
Expand All @@ -142,29 +130,23 @@ export class PostEventComponent implements OnInit, OnDestroy {
clearTimeout(loadingTimeout);
}

const userProfile = await this.getUserProfile(event.pubkey);
const reaction: PostReaction = {
user: userProfile,
created_at: event.created_at,
const reaction: PostReaction = {
pubkey: event.pubkey,
created_at: event.created_at,
content: event.kind === 1 ? event.content : undefined
};

this.addReaction(postId, event.kind, reaction);
this.metadataQueueService.addPublicKey(event.pubkey);
});
}


private async getUserProfile(pubkey: string): Promise<UserProfile> {
const profile = await this._storageService.getProfile(pubkey);
return profile || { pubkey, name: 'Loading...', picture: '/images/avatars/avatar-placeholder.png' };
}

private addReaction(postId: string, kind: number, reaction: PostReaction): void {
switch (kind) {
case 1:
this.replies.push(reaction);
this.replies.sort((a, b) => b.created_at - a.created_at);
this.replies.sort((a, b) => b.created_at - a.created_at);
break;
case 7:
this.likes.push(reaction);
Expand All @@ -187,10 +169,11 @@ export class PostEventComponent implements OnInit, OnDestroy {
}

ngOnDestroy(): void {
this._unsubscribeAll.next();
this._unsubscribeAll.complete();

if (this.subscriptionId) {
this.subscriptionService.removeSubscriptionById(this.subscriptionId);
}
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
}
12 changes: 12 additions & 0 deletions src/app/components/post-event/replay-profile/replay-profile.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div class="flex items-center">
<a [href]="'/profile/' + pubkey" class="flex items-center group">
<img
class="mr-4 h-10 w-10 rounded-full border border-gray-300 group-hover:shadow-md"
[src]="displayAvatar"
[alt]="displayName"
/>
<span class="font-bold text-gray-800 group-hover:text-blue-500">
{{ displayName }}
</span>
</a>
</div>
Empty file added src/app/components/post-event/replay-profile/replay-profile.component.scss
View file
Empty file.
Loading

0 comments on commit 0954da3

Please sign in to comment.