load images from firebase + animation

firestore.rules

@@ -18,5 +18,8 @@ service cloud.firestore {
     match /faq/{document=**} {
       allow read;
     }
+    match /images/{document=**} {
+      allow read;
+    }
   }
 }

src/app/app.component.html

@@ -13,5 +13,6 @@
   </div>
   <footer>
     <app-footer></app-footer>
+    <app-contribute-panel></app-contribute-panel>
   </footer>
 </mat-sidenav-container>

src/app/data/images.ts

@@ -0,0 +1,4 @@
+export interface Images{
+    name: string;
+    images: string[];
+}

src/app/home/photo-panel/photo-panel.component.html

@@ -1,26 +1,14 @@
 <div class="panel-holder">
   <div class="photos-holder">
-    <div class="more-photos-info">
-      <h1>More photos</h1>
+    <div (click)="goToGallery()" class="more-photos-info">
+      <h1>Click to see more photos</h1>
     </div>
     <div class="mover">
-      <img class="photo" src="assets/images/show1-min.jpg">
-
-      <img class="photo" src="assets/images/show1-min.jpg">
-
-      <img class="photo" src="assets/images/show1-min.jpg">
-
-      <img class="photo" src="assets/images/show1-min.jpg">
-
-      <img class="photo" src="assets/images/show1-min.jpg">
-
-      <img class="photo" src="assets/images/show1-min.jpg">
-
-      <img class="photo" src="assets/images/show1-min.jpg">
+      <img *ngFor="let image of images; let i = index"
+        [ngClass]="i == 0 ? 'first': 'second'"
+        (load)="setVisibilityOfImage(i)"
+        [@fadeImage]="visibilityOfPhoto[i] == null? defaultStateVisibility: visibilityOfPhoto[i]"
+       [attr.src]="image | async">
     </div>
   </div>
 </div>
-
-<div class="tech-slideshow">
-  <div class="mover-1"></div>
-</div>

src/app/home/photo-panel/photo-panel.component.scss

@@ -8,32 +8,40 @@
 
 .photos-holder {
   float: left;
-  min-width: 100%;
+  min-width: 1000px;
   height: 100%;
   position: relative;
-  transform: translate3d(0, 0, 0);
-
-  img {
-    transition: .3s all;
-  }
+  overflow: hidden;
 
   .mover {
-    width: min-content;
-    position: absolute;
-    top: 0;
-    left: 0;
+    transition: 0.3s all;
+    width: max-content;
     height: 100%;
     overflow: hidden;
-    transform: translate3d(0, 0, 0);
-    animation: moveSlideshow 12s linear infinite;
+
+    .first {
+      transform: translate3d(0, 0, 0);
+      -webkit-animation: moving 270s linear infinite;
+      -moz-animation: moving 270s linear infinite;
+      -ms-animation: moving 270s linear infinite;
+      -o-animation: moving 270s linear infinite;
+      animation: moving 270s linear infinite;
+    }
+
+    img{
+      height: 100%;
+      opacity: 0;
+    }
+
   }
 
   .more-photos-info {
     text-align: center;
     z-index: 2;
     position: absolute;
     width: 100vw;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
     left: 0;
     opacity: 0;
   }
@@ -42,17 +50,21 @@
 .photos-holder:hover {
   cursor: pointer;
 
-  img {
+  .mover {
     filter: blur(0px) grayscale(50%);
-    -webkit-filter: blur(7px) grayscale(50%);
+    -webkit-filter: blur(9px) grayscale(70%) brightness(40%);
   }
 
   .more-photos-info {
     opacity: 1;
   }
 }
 
-.photo {
-  display: inline-block;
-  height: 100%;
+@keyframes moving {
+  0% {
+    margin-left: 0px;
+  }
+  100% {
+    margin-left: -100%;
+  }
 }

src/app/home/photo-panel/photo-panel.component.ts

@@ -1,16 +1,62 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { AngularFireStorage } from '@angular/fire/storage';
+import { AngularFirestore } from '@angular/fire/firestore';
+import { Observable } from 'rxjs';
+import { Images } from 'src/app/data/images';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+enum PhotoState {
+  Loading = 'Loading',
+  Downloaded = 'Downloaded'
+}
 
 @Component({
   selector: 'app-photo-panel',
   templateUrl: './photo-panel.component.html',
-  styleUrls: ['./photo-panel.component.scss']
+  styleUrls: ['./photo-panel.component.scss'],
+  animations: [trigger('fadeImage', [
+    state(PhotoState.Loading, style({ opacity: 0 })),
+    state(PhotoState.Downloaded, style({ opacity: 1 })),
+    transition('* <=> *', animate(500))
+  ])]
 })
 export class PhotoPanelComponent implements OnInit {
 
-  constructor() {
+  images: Observable<string>[];
+  imagesColRef: Observable<Images[]>;
+  visibilityOfPhoto: PhotoState[];
+  defaultStateVisibility: PhotoState.Loading;
+
+  constructor(private afStorage: AngularFireStorage, private afStore: AngularFirestore) {
+
   }
 
   ngOnInit() {
+    this.loadImages();
+  }
+
+  loadImages() {
+    this.imagesColRef = this.afStore
+      .collection<Images>('images', ref => ref.where('name', '==', 'past-images').limit(1))
+      .valueChanges();
+    this.imagesColRef.subscribe((data) => {
+      this.images = null;
+      this.visibilityOfPhoto = [];
+      if (data.length > 0 && data != null) {
+        const rightCol = data[0];
+        this.images = rightCol.images.map((imagePath) => this.afStorage.ref(imagePath).getDownloadURL());
+        this.visibilityOfPhoto.push(PhotoState.Loading);
+      }
+    });
+  }
+
+
+  setVisibilityOfImage(index) {
+    this.visibilityOfPhoto[index] = PhotoState.Downloaded;
+  }
+
+  goToGallery(){
+    window.open('https://photos.app.goo.gl/HZVpzAtDejCNnqUXA', '_blank');
   }
 
 }

storage.rules

@@ -2,7 +2,6 @@ service firebase.storage {
   match /b/{bucket}/o {
     match /{allPaths=**} {
       allow read;
-      allow write: if request.auth != null;
     }
   }
-}
+}