diff --git a/src/app/components/pin-marker/pin-marker.component.html b/src/app/components/pin-marker/pin-marker.component.html index def3ec3..d4c16a8 100644 --- a/src/app/components/pin-marker/pin-marker.component.html +++ b/src/app/components/pin-marker/pin-marker.component.html @@ -64,7 +64,7 @@ class="relative h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center" >
- - Image not working + Loading image...
diff --git a/src/app/components/pin-marker/pin-marker.component.ts b/src/app/components/pin-marker/pin-marker.component.ts index 967b674..70ae7d2 100644 --- a/src/app/components/pin-marker/pin-marker.component.ts +++ b/src/app/components/pin-marker/pin-marker.component.ts @@ -6,29 +6,51 @@ import { ModalService } from '../../services/modal/modal.service'; import { PinService } from '../../services/pin/pin.service'; import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component'; import { EditPinPopupComponent } from '../edit-pin-popup/edit-pin-popup.component'; +import { ImageService } from '../../services/image/image.service'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; @Component({ selector: 'app-pin-marker', templateUrl: './pin-marker.component.html', imports: [CommonModule, EditPinPopupComponent, ConfirmModalComponent], + standalone: true }) export class PinMarkerComponent { @Input() pin!: Pin; @Input() marker!: L.Marker; currentIndex: number = 0; + imageUrls: SafeUrl[] = []; + imageLoaded = false; constructor( private pinService: PinService, - private modalService: ModalService + private modalService: ModalService, + private imageService: ImageService, + private sanitizer: DomSanitizer ) {} + ngOnInit() { + this.loadImages(); + } + + loadImages() { + this.pin.files.forEach(imageId => { + this.imageService.getImage(imageId).subscribe(blob => { + const objectUrl = URL.createObjectURL(blob); + const safeUrl = this.sanitizer.bypassSecurityTrustUrl(objectUrl); + this.imageUrls.push(safeUrl); + if (this.imageUrls.length === this.pin.files.length) { + this.imageLoaded = true; + } + }); + }); + } + onClosePopup() { this.marker.closePopup(); } - imageLoaded = false; - onImageLoad() { this.imageLoaded = true; } @@ -62,10 +84,17 @@ export class PinMarkerComponent { prevSlide(): void { this.currentIndex = - (this.currentIndex - 1 + this.pin.files.length) % this.pin.files.length; + (this.currentIndex - 1 + this.imageUrls.length) % this.imageUrls.length; } nextSlide(): void { - this.currentIndex = (this.currentIndex + 1) % this.pin.files.length; + this.currentIndex = (this.currentIndex + 1) % this.imageUrls.length; + } + + ngOnDestroy() { + // Clean up object URLs to prevent memory leaks + this.imageUrls.forEach(url => { + URL.revokeObjectURL(url.toString()); + }); } }