update for server file download

src/app/components/main-chat/single-chat/attachments/attachments.component.html

@@ -1,13 +1,9 @@
-<ng-container *ngIf="downloadFilesService.downloadedFiles | async as files">
-  <div class="attachments" *ngFor="let folder of files">
-    <div *ngIf="chatId == folder.id">
-      <br />
-      <div class="files">
-        <div *ngFor="let file of folder.files">
+@if(imageUrl) {
+<div class="files">
   <div class="filesView">
-            @if (['png', 'jpg', 'jpeg', 'gif'].includes(getFileType(file))) {
+    @if (['png', 'jpg', 'jpeg', 'gif'].includes(getFileType(imageUrl))) {
     <img
-              src="{{ file }}"
+      src="{{ imageUrl }}"
       alt="image"
       loading="lazy"
       [ngStyle]="{
@@ -16,13 +12,13 @@
             ? '5vw'
             : '7.5vw'
       }"
-              (click)="showOverlay(file)"
+      (click)="showOverlay(imageUrl)"
     />
-            } @if (['pdf', 'doc', 'txt'].includes(getFileType(file))) {
-            <a href="{{ file }}" target="_blank">
+    } @if (['pdf', 'doc', 'txt'].includes(getFileType(imageUrl))) {
+    <a href="{{ imageUrl }}" target="_blank">
       <img
         class="otherFiles"
-                src="./assets/img/attachments/{{ getFileType(file) }}.png"
+        src="./assets/img/attachments/{{ getFileType(imageUrl) }}.png"
         alt="image"
         loading="lazy"
         [ngStyle]="{
@@ -32,11 +28,11 @@
               : '5vw'
         }"
     /></a>
-            } @if (['mp3', 'wav', 'wma'].includes(getFileType(file))) {
+    } @if (['mp3', 'wav', 'wma'].includes(getFileType(imageUrl))) {
     <audio
       controls
       preload="auto"
-              src="{{ file }}"
+      src="{{ imageUrl }}"
       loading="lazy"
       [ngStyle]="{
         width:
@@ -45,10 +41,10 @@
             : ''
       }"
     ></audio>
-            }@if (getFileType(file) === 'mp4') {
-            <div (click)="showOverlay(file)">
+    }@if (getFileType(imageUrl) === 'mp4') {
+    <div (click)="showOverlay(imageUrl)">
       <video
-                src="{{ file }}"
+        src="{{ imageUrl }}"
         alt="video"
         loading="lazy"
         [ngStyle]="{
@@ -61,8 +57,5 @@
     </div>
     }
   </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</ng-container>
+</div>
+}

src/app/components/main-chat/single-chat/attachments/attachments.component.ts

@@ -14,9 +14,12 @@ import { SharedService } from '../../../../service/shared.service';
 })
 export class AttachmentsComponent {
   @Input() chatId: string = '';
+  @Input() filePath: string = '';
   @Input() openOnSecondaryChat: boolean = false;
   @Input() viewWidth: number = 0;
-  imageUrl: string = '';
+  loadingUrl: string = './../../../assets/img/loading.svg';
+  cachedImageUrl: string | null = null;
+  imageUrl: string | null = '';
 
   constructor(
     public downloadFilesService: DownloadFilesService,
@@ -26,6 +29,22 @@ export class AttachmentsComponent {
 
   RESPONSIVE_THRESHOLD = this.sharedService.RESPONSIVE_THRESHOLD;
 
+  async ngOnInit() {
+    if (this.filePath) {
+      // Überprüfen Sie, ob der Bild-URL bereits im Cache vorhanden ist
+      if (!this.cachedImageUrl) {
+        // Wenn nicht, laden Sie ihn herunter und speichern Sie ihn im Cache
+        this.cachedImageUrl = await this.downloadFilesService.downloadFiles(
+          this.filePath
+        );
+        console.log('1');
+      }
+
+      // Verwenden Sie den gecachten Bild-URL
+      this.imageUrl = this.cachedImageUrl;
+    }
+  }
+
   // Type of files:
   // Img: PNG, GIF, JPG, JPEG
   // Files: PDF, DOC, TXT

src/app/components/main-chat/single-chat/single-chat.component.html

@@ -89,11 +89,14 @@
           <span>{{ "single-chat.edit" | translate }}</span>
           }
         </div>
+        @if(filePath) {
         <app-attachments
           [chatId]="chat.id"
           [openOnSecondaryChat]="openOnSecondaryChat"
           [viewWidth]="viewWidth"
+          [filePath]="filePath"
         ></app-attachments>
+        }
       </div>
       @if (!isPrivatChannel && !openOnSecondaryChat) {
       <div class="answers">

src/app/components/main-chat/single-chat/single-chat.component.ts

@@ -54,6 +54,8 @@ export class SingleChatComponent {
   isMsgEditFormOpen: boolean = false;
   firstLoadOptionMenu: boolean = false;
 
+  filePath: string | undefined = '';
+
   constructor(
     public chatService: ChatService,
     public channelService: ChatService,
@@ -61,6 +63,16 @@ export class SingleChatComponent {
     public downloadFilesService: DownloadFilesService
   ) {}
 
+  ngOnInit() {
+    this.checkChatHasFiles();
+  }
+
+  async checkChatHasFiles() {
+    this.filePath = await this.downloadFilesService.checkChatHasFiles(
+      this.chat.id
+    );
+  }
+
   /**
    * Emits a signal to edit a message.
    * @param {boolean} variable - The value indicating whether the message edit form should be open or not.

src/app/service/download-files.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import {
   getDownloadURL,
+  getMetadata,
   getStorage,
   listAll,
   ref,
@@ -22,6 +23,23 @@ export class DownloadFilesService {
     this.listAllFiles();
   }
 
+  checkChatHasFiles(chatId: string) {
+    const storage = getStorage();
+    const listRef = ref(storage, `chatFiles/${chatId}`);
+    return listAll(listRef)
+      .then((result) => {
+        if (result.items.length > 0) {
+          return result.items[0].fullPath;
+        } else {
+          return undefined;
+        }
+      })
+      .catch((error) => {
+        console.error('Error listing files:', error);
+        return undefined;
+      });
+  }
+
   /**
    * Uploads all files and updates the list.
    * @param {string} docID - The documentId under which the files are to be saved.
@@ -67,4 +85,32 @@ export class DownloadFilesService {
         console.error('Error when retrieving the files:', error);
       });
   }
+
+  checkFiles(chatId: string) {
+    const storage = getStorage();
+    const listRef = ref(storage, `chatFiles/${chatId}`);
+    return listAll(listRef)
+      .then((result) => {
+        if (result.items.length > 0) {
+          return result.items[0].fullPath;
+        }
+        return;
+      })
+      .catch((error) => {
+        console.error('Error listing files:', error);
+        return false;
+      });
+  }
+
+  async downloadFiles(path: string): Promise<string | null> {
+    try {
+      const storage = getStorage();
+      const forestRef = ref(storage, path);
+      const downloadUrl = await getDownloadURL(forestRef);
+      return downloadUrl;
+    } catch (error) {
+      console.error('Error downloading file:', error);
+      return null;
+    }
+  }
 }

src/app/shared/components/header/header.component.html

@@ -11,9 +11,11 @@
     <img src="./assets/img/home-icon.svg" class="homeIcon" />
     }
   </div>
+  @if (viewWidth >= RESPONSIVE_THRESHOLD) {
   <div class="middleSide">
     <app-search-bar [viewWidth]="viewWidth"></app-search-bar>
   </div>
+  }
   <div>
     <div class="rightSide">
       @for(i of userService.getCurentUsers(); track i){

src/app/shared/components/header/header.component.scss

@@ -122,10 +122,6 @@ header {
 /*------------- RESPONSIVE -------------*/
 
 @media screen and (max-width: $RESPONSIVE_THRESHOLD) {
-  .middleSide {
-    display: none;
-  }
-
   .rightSide,
   .leftSide {
     width: 50vw;

src/app/shared/components/header/search-bar/search-bar.component.html

@@ -1,7 +1,7 @@
 <div class="inputPosition">
   <input
-    id="searchField"
-    name="searchField"
+    id="searchBar"
+    name="searchBar"
     autocomplete="off"
     type="text"
     maxlength="24"

src/assets/img/loading.svg

@@ -0,0 +1,23 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="640.000000pt" height="640.000000pt" viewBox="0 0 640.000000 640.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,640.000000) scale(0.100000,-0.100000)"
+fill="#fff" stroke="none">
+<path d="M3010 5724 c-19 -2 -78 -9 -130 -14 -710 -77 -1373 -492 -1799 -1125
+-233 -348 -361 -712 -402 -1149 -15 -159 -7 -490 16 -636 99 -644 416 -1180
+955 -1615 253 -205 585 -370 902 -450 402 -102 862 -106 1276 -10 317 74 677
+254 962 481 108 86 314 293 403 404 225 279 389 604 472 935 59 237 70 337 70
+655 -1 248 -4 302 -23 414 -75 433 -219 766 -481 1111 -105 139 -370 402 -511
+507 -352 263 -706 409 -1145 474 -96 14 -492 27 -565 18z m415 -1250 c49 -8
+130 -28 180 -45 84 -28 258 -109 280 -130 6 -6 -34 -53 -109 -128 l-118 -119
+-64 29 c-418 190 -928 46 -1187 -335 -90 -132 -152 -307 -163 -461 l-7 -80
+242 3 c132 1 241 -1 241 -5 0 -12 -633 -643 -645 -643 -12 0 -645 631 -645
+643 0 4 108 6 240 5 l240 -3 0 45 c0 71 27 227 55 325 95 327 345 624 659 782
+248 125 514 164 801 117z m1235 -949 l325 -325 -245 0 -245 0 -3 -68 c-21
+-501 -366 -968 -844 -1143 -132 -49 -240 -69 -393 -75 -228 -10 -434 35 -632
+135 -130 66 -130 49 5 184 l118 118 58 -26 c32 -14 97 -38 145 -52 78 -24 101
+-27 251 -27 197 0 268 16 427 94 311 153 508 444 537 793 l5 67 -239 0 c-132
+0 -240 1 -240 3 0 4 634 643 640 645 3 1 151 -144 330 -323z"/>
+</g>
+</svg>