fix: bug fixes and refactoring

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lens",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "^16.1.8",
     "@angular/router": "^16.1.8",
     "exifr": "^4.3.5",
+    "exifreader": "^4.13.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.1",
     "zone.js": "~0.13.1"

src/app/app.component.html

@@ -1,20 +1,20 @@
 <!-- Viewer with selected picture incl. caption and loader; only visible on desktop an bigger tablets -->
-<div class="viewer">
+<div class="viewer" *ngIf="!loading">
   <app-picture *ngIf="file" [source]="file"></app-picture>
 </div>
 <!-- Sidenav with header, list of pictures and footer; will have width of 100% on smaller mobile devices -->
 <div class="sidenav">
   <div class="header">
     <h1><img src="assets/images/365.jpg" alt="365"></h1>
-    <p>A picture a day photo project</p>
+    <p>A picture a day | photo project</p>
   </div>
 
   <div class="content">
     <app-list (load)="file = $event" (lastDay)="lastDay = $event"></app-list>
   </div>
 
   <div class="footer">
-    <p><a href="/">365 photo project</a> by <a href="https://lakto.design">lakto.design</a> &copy;
+    <p><a href="/">365 photo project</a> ({{appVersion}}) by <a href="https://lakto.design">lakto.design</a> &copy;
       {{lastDay | date: 'yyyy'}}
     </p>
   </div>

src/app/app.component.ts

@@ -1,6 +1,5 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import exifr from 'exifr';
-import { environment } from 'src/environments/environment';
+import { Component, OnInit } from '@angular/core';
+import packageInfo from '../../package.json';
 
 @Component({
     selector: 'app-root',
@@ -9,13 +8,19 @@ import { environment } from 'src/environments/environment';
 })
 export class AppComponent implements OnInit {
 
+    appVersion = `v${packageInfo.version}`;
+
     file!: string;
 
     lastDay!: Date;
 
+    loading = true;
+
     constructor() { }
 
     ngOnInit(): void {
 
+        this.loading = (this.file !== undefined);
+
     }
 }

src/app/list/list.component.html

@@ -1,9 +1,9 @@
 <div class="list" *ngIf="list.length">
   <app-preview *ngFor="let item of list; let i = index" class="item"
     [day]="item | date: 'yyyyMMdd'"
+    [alt]="item | date: 'yyyy&middot;MM&middot;dd'"
     (file)="open($event)">
   </app-preview>
-  <!-- [alt]="item | date: 'yyyy&middot;MM&middot;dd'"  -->
 </div>
 
 <div class="action">

src/app/list/list.component.ts

@@ -41,6 +41,16 @@ export class ListComponent implements OnInit {
 
         this.lastDay.emit(this.last);
 
+        // get last file to display
+        const getYear = this.last.toLocaleString('default', { year: 'numeric' });
+        const getMonth = this.last.toLocaleString('default', { month: '2-digit' });
+        const getDay = this.last.toLocaleString('default', { day: '2-digit' });
+
+        const filename = getYear + getMonth + getDay;
+        const image = environment.imagePath + filename + '.jpg';
+
+        this.open(image);
+
         this.all = this.daysBetween(this.first, this.last);
 
         this.error = (this.all < 0);

src/app/picture/picture.component.html

@@ -1,5 +1,5 @@
-<div class="picture"
-  [ngStyle]="{'background-image': 'url(' + source + ')'}"
+<div class="image-container fade-in-out"
+  [ngStyle]="{'background-image': 'url(\'' + currentImage + '\')'}"
   [class.zoom]="zoom"
   [class.fade-out]="loading"
   [class.fade-in]="!loading">

src/app/picture/picture.component.scss

@@ -1,42 +1,93 @@
-:host {
-  .picture {
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-color: rgba(11, 11, 11, 1);
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 0;
-    cursor: zoom-in;
-
-    &.zoom {
-      background-size: cover;
-      cursor: zoom-out;
-    }
+.image-container {
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-color: rgba(11, 11, 11, 1);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+  cursor: zoom-in;
+
+  &.zoom {
+    background-size: cover;
+    cursor: zoom-out;
   }
+
+
+  // opacity: 0;
+  // transition: opacity 0.5s;
 }
 
+// .fade-in {
+//   opacity: 1;
+// }
+
 .fade-in {
-  animation: fadeIn ease 0.75s;
+  // animation: fadeIn ease 0.75s;
+  animation-name: fade-in;
+	animation-timing-function: ease-in;
+	// animation-iteration-count: infinite;
+	animation-duration: 0.5s;
 }
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+
+
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+	25% {
+		opacity: 0.25;
+	}
+	75% {
+		opacity: 0.75;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 .fade-out {
-  animation: fadeOut ease 0.75s;
+  // animation: fadeIn ease 0.75s;
+  animation-name: fade-out;
+	animation-timing-function: ease-out;
+	// animation-iteration-count: infinite;
+	animation-duration: 0.5s;
 }
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
+
+
+@keyframes fade-out {
+	0% {
+		opacity: 1;
+	}
+	25% {
+		opacity: 0.75;
+	}
+	75% {
+		opacity: 0.25;
+	}
+	100% {
+		opacity: 0;
+	}
 }
+
+// @keyframes fadeIn {
+//   0% {
+//     opacity: 0;
+//   }
+//   100% {
+//     opacity: 1;
+//   }
+// }
+
+// .fade-out {
+//   animation: fadeOut ease 2.75s;
+// }
+// @keyframes fadeOut {
+//   0% {
+//     opacity: 1;
+//   }
+//   100% {
+//     opacity: 0;
+//   }
+// }

src/app/picture/picture.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input, OnChanges, ElementRef } from '@angular/core';
-import exifr from 'exifr';
+import { Component, ElementRef, HostListener, Input, OnChanges, OnInit, Renderer2, ViewChild } from '@angular/core';
+import ExifReader from 'exifreader';
 
 export interface Exif {
     day: Date;
@@ -20,30 +20,43 @@ export interface Picture {
     selector: 'app-picture',
     templateUrl: './picture.component.html',
     styleUrls: ['./picture.component.scss'],
-    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-    // host: {
-    //     '(click)': 'toggleZoom()'
-    // }
 })
 export class PictureComponent implements OnInit, OnChanges {
 
     @Input() source!: string;
 
+    @ViewChild('imageContainer', { static: true }) imageContainer!: ElementRef<HTMLDivElement>;
+
+    currentImage!: string;
+
     picture!: Picture;
 
     loading = true;
 
     zoom = true;
 
-    constructor(private _host: ElementRef) { }
+    constructor(
+        private renderer: Renderer2,
+        private _host: ElementRef
+    ) { }
+
+    @HostListener('click', ['$event'])
+    onClick(e: Event) {
+        this.zoom = !this.zoom;
+    }
 
     ngOnInit(): void {
+        // console.log(this.imageContainer);
     }
 
     ngOnChanges(): void {
 
+        this.loading = true;
+
         setTimeout(() => {
-            this.zoom = true;
+            this.currentImage = this.source;
+            this.loading = false;
+            // this.zoom = true;
             // exifr.parse(this.source).then(meta => {
             //     const shutterSpeed: string = (meta.ExposureTime < 1 ? '1/' + Math.round(1 / meta.ExposureTime) : meta.ExposureTime.toString());
             //     const camera: string = (meta.Make && meta.Model ? meta.Make + ' ' + meta.Model : meta['271'] + ' ' + meta['272']);
@@ -62,15 +75,16 @@ export class PictureComponent implements OnInit, OnChanges {
             //         }
             //     };
 
-            // this._host.nativeElement.firstElementChild.style['background-image'] = 'url(' + this.source + ')';
             // });
-            this.loading = false;
-        }, 500);
+            // this.loading = false;
+        }, 250);
 
     }
 
-    toggleZoom() {
-        this.zoom = !this.zoom;
+    async readExifData(file: any) {
+        const tags = await ExifReader.load(file);
+
+        // console.log(tags);
     }
 
 }

src/app/preview/preview.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ElementRef, Output, EventEmitter } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { environment } from 'src/environments/environment';
 import { DefaultImage } from '../../assets/images/default.image';
 
@@ -11,14 +11,12 @@ import { DefaultImage } from '../../assets/images/default.image';
         [class.full]="full"
         [class.zoom]="zoom" />`,
     styleUrls: ['./preview.component.scss'],
-    // host: {
-    //     '(click)': 'openImage()'
-    // }
+
 })
 export class PreviewComponent implements OnInit {
 
     @Input() day!: string | null;
-    @Input() alt!: Date;
+    @Input() alt!: string | null;
     @Input() full?: boolean;
     @Input() zoom?: boolean;
 

src/index.html

@@ -7,8 +7,6 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="assets/images/365-favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
 <body class="mat-typography">

yarn.lock

@@ -2121,6 +2121,11 @@
     "@webassemblyjs/ast" "1.11.6"
     "@xtuc/long" "4.2.2"
 
+"@xmldom/xmldom@^0.8.8":
+  version "0.8.10"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
+  integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -3591,6 +3596,13 @@ exifr@^4.3.5:
   resolved "https://registry.yarnpkg.com/exifr/-/exifr-4.3.5.tgz#7ef76da925ae6a3ddc21312ae867c5e7562ae55a"
   integrity sha512-ir36aoochREnTekiEOqY0yuUjmj4oPWMDE3NTKJoz9Yuz/m5V9nWu1p4UStOOuhJI4Wz+p0nRpuqZNKeAIkhQw==
 
+exifreader@^4.13.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/exifreader/-/exifreader-4.13.0.tgz#f380b33cfc85630a0dbd56edd41e28710a9e9679"
+  integrity sha512-IhJBpyXDLbCdgzVHkthadOvrMiZOR2XS7POVp0b5JoVfScRoCJ6YazZ+stTkbDTE5TRTP44bE5RKsujckAs45Q==
+  optionalDependencies:
+    "@xmldom/xmldom" "^0.8.8"
+
 exponential-backoff@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/exponential-backoff/-/exponential-backoff-3.1.1.tgz#64ac7526fe341ab18a39016cd22c787d01e00bf6"