modalReviewd

src/app/services/file/custom-image-cache/custom-image-cache-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CustomImageCachePage } from './custom-image-cache.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CustomImageCachePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CustomImageCachePageRoutingModule {}

src/app/services/file/custom-image-cache/custom-image-cache.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CustomImageCachePageRoutingModule } from './custom-image-cache-routing.module';
+
+import { CustomImageCachePage } from './custom-image-cache.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CustomImageCachePageRoutingModule
+  ],
+  exports: [CustomImageCachePage],
+  declarations: [CustomImageCachePage]
+})
+export class CustomImageCachePageModule {}

src/app/services/file/custom-image-cache/custom-image-cache.page.html

@@ -0,0 +1,5 @@
+<img [src]="_src" *ngIf="_src !=''; else loading;"> 
+
+<ng-template #loading>
+  <ion-spinner></ion-spinner>
+</ng-template>

src/app/services/file/custom-image-cache/custom-image-cache.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CustomImageCachePage } from './custom-image-cache.page';
+
+describe('CustomImageCachePage', () => {
+  let component: CustomImageCachePage;
+  let fixture: ComponentFixture<CustomImageCachePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomImageCachePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CustomImageCachePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/services/file/custom-image-cache/custom-image-cache.page.ts

@@ -0,0 +1,76 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Directory, Filesystem } from '@capacitor/filesystem';
+// import { readFile } from 'fs';
+
+
+
+const CACHE_FOLDER = 'CACHED-IMG'
+
+@Component({
+  selector: 'app-custom-image-cache',
+  templateUrl: './custom-image-cache.page.html',
+  styleUrls: ['./custom-image-cache.page.scss'],
+})
+export class CustomImageCachePage implements OnInit {
+
+  _src ="";
+  @Input () spinner = false
+
+  ngOnInit() {
+  }
+  constructor() { }
+
+  @Input()
+  set src(imageUrl: string){
+    console.log('SET SOURCE', imageUrl)
+
+    const imageName = imageUrl.split('/').pop()
+    const fileType = imageName.split('.').pop()
+
+    Filesystem.readFile({
+      directory:  Directory.Cache,
+      path: `${CACHE_FOLDER}/${imageName}`}).then(readFile =>{
+          console.log('LOCAL FILE: ', readFile)
+          // set to SRC
+          this._src = `data:image/${fileType};base64ToFile, ${readFile.data}`
+      }).catch(async e =>{
+        await this.storedImage(imageUrl, imageName)
+      })
+      Filesystem.readFile({
+        directory: Directory.Cache,
+        path: `${CACHE_FOLDER}/${imageName}`
+      }).then(readFile =>{
+        this._src = `data:image/${fileType};base64ToFile, ${readFile.data}`
+      })
+
+    }
+    async storedImage(url, path){
+      const response = await fetch(`http://api-cors-proxy-devdactic.herokuapp.com/${url}`)
+      const blob = await response.blob()
+
+      const base64Data = await this.convertBlobToBase64(blob) as string;
+      const savedFile = await Filesystem.writeFile({
+        path: `${CACHE_FOLDER}/${path}`,
+        data: base64Data,
+        directory: Directory.Cache
+      })
+      return savedFile
+    }
+
+    convertBlobToBase64(blob: Blob){
+      return new Promise((resolve, reject) =>{
+        const reader = new FileReader;
+        reader.onerror = reject;
+        reader.onload = () => {
+          resolve(reader.result)
+        }
+        reader.readAsDataURL(blob)
+      })
+    }
+  } 
+
+
+
+
+
+