Add inline image rendering

- Replace old image rendering with new token based rendering.

src/app/shared/content/content.html

@@ -1,8 +1,7 @@
 <div class="content clickable" *ngIf="event">
-  <div class="event-images" *ngIf="images && images.length > 0">
+  <!-- <div class="event-images" *ngIf="images && images.length > 0">
     <img mat-card-image class="event-image" loading="lazy" decoding="async" [src]="image" (click)="expandImage(image)" *ngFor="let image of images" />
-    <!-- <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" /> -->
+  </div> -->
-  </div>
   <div class="event-videos" *ngIf="youtube && youtube.length > 0">
     <ng-template ngFor let-video [ngForOf]="youtube">
       <iframe id="ytplayer" class="event-video" type="text/html" [src]="video.url" frameborder="0" allowfullscreen></iframe>
@@ -73,6 +72,7 @@
       <ng-template [ngIf]="!isString(token) && isFollowing" [ngSwitch]="token.token">
         <ng-container *ngSwitchCase="'username'"><a class="reply-link" [routerLink]="['/p', token.word]">@{{ getDisplayName(token.word) }}</a></ng-container>
         <ng-container *ngSwitchCase="'link'"><a [href]="[token.word]" target="_blank">{{ token.word }}</a></ng-container>
+        <ng-container *ngSwitchCase="'image'"><img mat-card-image class="event-image" loading="lazy" decoding="async" [matTooltip]="token.word" [alt]="token.word" [src]="token.safeWord" (click)="expandImage(token.word)" /></ng-container>
         <ng-container *ngSwitchCase="'linebreak'"><br /></ng-container>
         <ng-container *ngSwitchCase="'youtube'"
           ><iframe id="ytplayer" class="event-video" type="text/html" [src]="token.safeWord" frameborder="0" allowfullscreen></iframe>
@@ -86,6 +86,7 @@
       <ng-template [ngIf]="!isString(token) && !isFollowing" [ngSwitch]="token.token">
         <ng-container *ngSwitchCase="'username'"><a class="reply-link" [routerLink]="['/p', token.word]">@{{ getDisplayName(token.word) }}</a></ng-container>
         <ng-container *ngSwitchCase="'link'"><a [href]="[token.word]" target="_blank">{{ token.word }}</a></ng-container>
+        <ng-container *ngSwitchCase="'image'"><a [href]="[token.word]" target="_blank">{{ token.word }}</a></ng-container>
         <ng-container *ngSwitchCase="'linebreak'"><br /></ng-container>
         <ng-container *ngSwitchCase="'youtube'"
           ><a [href]="[token.word]" target="_blank">{{ token.word }}</a>&nbsp;<button mat-icon-button matTooltip="Add to media player" (click)="enque(token.word, 'YouTube')">

src/app/shared/content/content.ts

@@ -235,6 +235,18 @@ export class ContentComponent {
   }
 
   dynamicText: (string | TokenKeyword | any)[] = [];
+  imageExtensions = ['.jpg', '.jpeg', '.gif', '.png', '.webp'];
+
+  isImage(url: string) {
+    for (let index = 0; index < this.imageExtensions.length; index++) {
+      const extension = this.imageExtensions[index];
+      if (url.includes(extension)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
 
   //Replace keywords with keyword objects
   toDynamicText(event: NostrEventDocument): (string | TokenKeyword)[] {
@@ -273,12 +285,16 @@ export class ContentComponent {
 
         i = res.push(keyword);
       } else if (token.startsWith('http://') || token.startsWith('https://')) {
+        if (this.isImage(token)) {
+          i = res.push({ safeWord: this.utilities.sanitizeUrlAndBypass(token), word: token, token: 'image' });
+        } else {
           const youtube = [...token.matchAll(this.contentService.regexpYouTube)];
           if (youtube.length > 0) {
             i = res.push({ safeWord: this.utilities.bypassFrameUrl(`https://www.youtube.com/embed/${youtube[0][1]}`), word: `https://www.youtube.com/embed/${youtube[0][1]}`, token: 'youtube' });
           } else {
             i = res.push({ word: token, token: 'link' });
           }
+        }
       } else {
         if (!res[i]) res[i] = token;
         else res[i] += ' ' + token;