From 1138b263cba6397a056a2dd02758139f4351c64f Mon Sep 17 00:00:00 2001
From: Sean Wu <seanwu1105@gmail.com>
Date: Mon, 10 May 2021 00:41:51 +0800
Subject: [PATCH 1/6] Support video recording.

---
 android/.idea/compiler.xml                    |  2 +-
 android/.idea/misc.xml                        |  2 +-
 android/.idea/runConfigurations.xml           |  1 +
 src/app/features/home/home.page.ts            | 44 +++++++++++++++++--
 .../shared/services/camera/camera.service.ts  | 40 +++++++++++++----
 .../services/capture/capture.service.ts       | 13 +++---
 src/assets/i18n/en-us.json                    |  2 +
 src/assets/i18n/zh-tw.json                    |  2 +
 8 files changed, 88 insertions(+), 18 deletions(-)

diff --git a/android/.idea/compiler.xml b/android/.idea/compiler.xml
index 61a9130cd..fb7f4a8a4 100644
--- a/android/.idea/compiler.xml
+++ b/android/.idea/compiler.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CompilerConfiguration">
-    <bytecodeTargetLevel target="1.8" />
+    <bytecodeTargetLevel target="11" />
   </component>
 </project>
\ No newline at end of file
diff --git a/android/.idea/misc.xml b/android/.idea/misc.xml
index d5d35ec44..860da66a5 100644
--- a/android/.idea/misc.xml
+++ b/android/.idea/misc.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">
diff --git a/android/.idea/runConfigurations.xml b/android/.idea/runConfigurations.xml
index 7f68460d8..e497da999 100644
--- a/android/.idea/runConfigurations.xml
+++ b/android/.idea/runConfigurations.xml
@@ -3,6 +3,7 @@
   <component name="RunConfigurationProducerService">
     <option name="ignoredProducers">
       <set>
+        <option value="com.android.tools.idea.compose.preview.runconfiguration.ComposePreviewRunConfigurationProducer" />
         <option value="org.jetbrains.plugins.gradle.execution.test.runner.AllInPackageGradleConfigurationProducer" />
         <option value="org.jetbrains.plugins.gradle.execution.test.runner.TestClassGradleConfigurationProducer" />
         <option value="org.jetbrains.plugins.gradle.execution.test.runner.TestMethodGradleConfigurationProducer" />
diff --git a/src/app/features/home/home.page.ts b/src/app/features/home/home.page.ts
index 2a0f508e9..aba2c0dbc 100644
--- a/src/app/features/home/home.page.ts
+++ b/src/app/features/home/home.page.ts
@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Plugins } from '@capacitor/core';
+import { ActionSheetController } from '@ionic/angular';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { defer, EMPTY, iif, of } from 'rxjs';
@@ -14,7 +15,11 @@ import {
   tap,
 } from 'rxjs/operators';
 import { ErrorService } from '../../shared/modules/error/error.service';
-import { CaptureService } from '../../shared/services/capture/capture.service';
+import { CameraService } from '../../shared/services/camera/camera.service';
+import {
+  CaptureService,
+  Media,
+} from '../../shared/services/capture/capture.service';
 import { ConfirmAlert } from '../../shared/services/confirm-alert/confirm-alert.service';
 import { DiaBackendAssetRepository } from '../../shared/services/dia-backend/asset/dia-backend-asset-repository.service';
 import { DiaBackendAuthService } from '../../shared/services/dia-backend/auth/dia-backend-auth.service';
@@ -61,7 +66,9 @@ export class HomePage {
     private readonly dialog: MatDialog,
     private readonly translocoService: TranslocoService,
     private readonly migrationService: MigrationService,
-    private readonly errorService: ErrorService
+    private readonly errorService: ErrorService,
+    private readonly cameraService: CameraService,
+    private readonly actionSheetController: ActionSheetController
   ) {
     this.downloadExpiredPostCaptures();
   }
@@ -128,9 +135,10 @@ export class HomePage {
     return defer(() => {
       const captureIndex = 2;
       this.selectedTabIndex = captureIndex;
-      return this.captureService.capture();
+      return this.presentCaptureActions$();
     })
       .pipe(
+        concatMap(media => this.captureService.capture(media)),
         catchError((err: unknown) => {
           if (err !== 'User cancelled photos app')
             return this.errorService.toastError$(err);
@@ -141,6 +149,36 @@ export class HomePage {
       .subscribe();
   }
 
+  private presentCaptureActions$() {
+    return this.translocoService
+      .selectTranslateObject({
+        takePicture: null,
+        recordVideo: null,
+      })
+      .pipe(
+        first(),
+        concatMap(
+          ([takePicture, recordVideo]) =>
+            new Promise<Media>(resolve =>
+              this.actionSheetController
+                .create({
+                  buttons: [
+                    {
+                      text: takePicture,
+                      handler: () => resolve(this.cameraService.takePhoto()),
+                    },
+                    {
+                      text: recordVideo,
+                      handler: () => resolve(this.cameraService.recordVideo()),
+                    },
+                  ],
+                })
+                .then(sheet => sheet.present())
+            )
+        )
+      );
+  }
+
   // eslint-disable-next-line class-methods-use-this
   async openCaptureClub() {
     return Browser.open({
diff --git a/src/app/shared/services/camera/camera.service.ts b/src/app/shared/services/camera/camera.service.ts
index df433f862..8b079b4f9 100644
--- a/src/app/shared/services/camera/camera.service.ts
+++ b/src/app/shared/services/camera/camera.service.ts
@@ -7,17 +7,19 @@ import {
   CameraSource,
 } from '@capacitor/core';
 import { Subject } from 'rxjs';
-import { fromExtension, MimeType } from '../../../utils/mime-type';
+import { blobToBase64 } from '../../../utils/encoding/encoding';
+import { fromExtension } from '../../../utils/mime-type';
 import {
   APP_PLUGIN,
   CAMERA_PLUGIN,
 } from '../../core/capacitor-plugins/capacitor-plugins.module';
+import { Media } from '../capture/capture.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class CameraService {
-  private readonly killedCapturedPhotoEvent$ = new Subject<Photo>();
+  private readonly killedCapturedPhotoEvent$ = new Subject<Media>();
   readonly restoreKilledCaptureEvent$ = this.killedCapturedPhotoEvent$.asObservable();
 
   constructor(
@@ -38,7 +40,7 @@ export class CameraService {
     });
   }
 
-  async takePhoto(): Promise<Photo> {
+  async takePhoto(): Promise<Media> {
     const cameraPhoto = await this.cameraPlugin.getPhoto({
       resultType: CameraResultType.Base64,
       source: CameraSource.Camera,
@@ -47,17 +49,39 @@ export class CameraService {
     });
     return cameraPhotoToPhoto(cameraPhoto);
   }
-}
 
-export interface Photo {
-  readonly mimeType: MimeType;
-  readonly base64: string;
+  // eslint-disable-next-line class-methods-use-this
+  async recordVideo(): Promise<Media> {
+    return new Promise<Media>((resolve, reject) => {
+      const inputElement = document.createElement('input');
+      inputElement.accept = 'video/*';
+      inputElement.type = 'file';
+      inputElement.setAttribute('capture', 'environment');
+      inputElement.onchange = event => {
+        const file = (event.target as HTMLInputElement | null)?.files?.item(0);
+        if (!file || file.type !== 'video/mp4')
+          reject(new VideoRecordError(`File type: ${file?.type}`));
+        else
+          blobToBase64(file).then(base64 =>
+            resolve({
+              base64,
+              mimeType: 'video/mp4',
+            })
+          );
+      };
+      inputElement.click();
+    });
+  }
 }
 
-function cameraPhotoToPhoto(cameraPhoto: CameraPhoto): Photo {
+function cameraPhotoToPhoto(cameraPhoto: CameraPhoto): Media {
   return {
     mimeType: fromExtension(cameraPhoto.format),
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     base64: cameraPhoto.base64String!,
   };
 }
+
+export class VideoRecordError extends Error {
+  readonly name = 'VideoRecordError';
+}
diff --git a/src/app/shared/services/capture/capture.service.ts b/src/app/shared/services/capture/capture.service.ts
index 85055b36f..c58e69e4e 100644
--- a/src/app/shared/services/capture/capture.service.ts
+++ b/src/app/shared/services/capture/capture.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { CameraService, Photo } from '../camera/camera.service';
+import { MimeType } from '../../../utils/mime-type';
 import { CollectorService } from '../collector/collector.service';
 import { MediaStore } from '../media-store/media-store.service';
 import { getOldProof } from '../repositories/proof/old-proof-adapter';
@@ -17,17 +17,15 @@ export class CaptureService {
   readonly collectingOldProofHashes$ = this._collectingOldProofHashes$;
 
   constructor(
-    private readonly cameraService: CameraService,
     private readonly proofRepository: ProofRepository,
     private readonly imageStore: MediaStore,
     private readonly collectorService: CollectorService
   ) {}
 
-  async capture(restoredPhoto?: Photo) {
-    const photo = restoredPhoto ?? (await this.cameraService.takePhoto());
+  async capture(source: Media) {
     const proof = await Proof.from(
       this.imageStore,
-      { [photo.base64]: { mimeType: photo.mimeType } },
+      { [source.base64]: { mimeType: source.mimeType } },
       { timestamp: Date.now(), providers: {} },
       {}
     );
@@ -52,3 +50,8 @@ export class CaptureService {
     );
   }
 }
+
+export interface Media {
+  readonly mimeType: MimeType;
+  readonly base64: string;
+}
diff --git a/src/assets/i18n/en-us.json b/src/assets/i18n/en-us.json
index f8987324c..22acc0438 100644
--- a/src/assets/i18n/en-us.json
+++ b/src/assets/i18n/en-us.json
@@ -84,6 +84,8 @@
   "forgetPassword": "Forget Password",
   "resetPassword": "Reset Password",
   "contacts": "Contacts",
+  "takePicture": "Take Picture",
+  "recordVideo": "Record Video",
   ".message": "Message",
   "tutorial": {
     "switchBetween0": "Switch between",
diff --git a/src/assets/i18n/zh-tw.json b/src/assets/i18n/zh-tw.json
index a1c059e7f..cebc7518e 100644
--- a/src/assets/i18n/zh-tw.json
+++ b/src/assets/i18n/zh-tw.json
@@ -84,6 +84,8 @@
   "forgetPassword": "忘記密碼",
   "resetPassword": "重設密碼",
   "contacts": "聯絡人",
+  "takePicture": "拍攝照片",
+  "recordVideo": "錄製影片",
   ".message": "訊息",
   "tutorial": {
     "switchBetween0": "切換影像與收藏模式",

From 5ce3edcfd170b4b6e6612744c84a6b331a204e4d Mon Sep 17 00:00:00 2001
From: James Chien <shc261392@gmail.com>
Date: Tue, 11 May 2021 09:02:38 +0800
Subject: [PATCH 2/6] Attach input element to document body for Webkit quirk

Signed-off-by: James Chien <shc261392@gmail.com>
---
 src/app/shared/services/camera/camera.service.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/services/camera/camera.service.ts b/src/app/shared/services/camera/camera.service.ts
index 8b079b4f9..46a1e0376 100644
--- a/src/app/shared/services/camera/camera.service.ts
+++ b/src/app/shared/services/camera/camera.service.ts
@@ -57,17 +57,23 @@ export class CameraService {
       inputElement.accept = 'video/*';
       inputElement.type = 'file';
       inputElement.setAttribute('capture', 'environment');
+      // Safari/Webkit quirk: input element must be attached to body in order to work
+      document.body.appendChild(inputElement);
       inputElement.onchange = event => {
+        document.body.removeChild(inputElement);
         const file = (event.target as HTMLInputElement | null)?.files?.item(0);
-        if (!file || file.type !== 'video/mp4')
+        if (
+          !file ||
+          (file.type !== 'video/mp4' && file.type !== 'video/quicktime')
+        )
           reject(new VideoRecordError(`File type: ${file?.type}`));
         else
-          blobToBase64(file).then(base64 =>
+          blobToBase64(file).then(base64 => {
             resolve({
               base64,
               mimeType: 'video/mp4',
-            })
-          );
+            });
+          });
       };
       inputElement.click();
     });

From 43897985bd87cd6685d4b7096cc0f6df15b0e1a4 Mon Sep 17 00:00:00 2001
From: James Chien <shc261392@gmail.com>
Date: Tue, 11 May 2021 09:03:45 +0800
Subject: [PATCH 3/6] Use image/jpeg mimeType for thumbnails if the media type
 is video

Signed-off-by: James Chien <shc261392@gmail.com>
---
 .../services/media-store/media-store.service.ts   | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/services/media-store/media-store.service.ts b/src/app/shared/services/media-store/media-store.service.ts
index 61e36f9ba..1e8fb6c36 100644
--- a/src/app/shared/services/media-store/media-store.service.ts
+++ b/src/app/shared/services/media-store/media-store.service.ts
@@ -127,22 +127,24 @@ export class MediaStore {
   }
 
   getThumbnailUrl$(index: string, mimeType: MimeType) {
+    const isVideo = mimeType.startsWith('video');
+    const thumbnailMimeType = isVideo ? 'image/jpeg' : mimeType;
     return defer(() => this.getThumbnail(index)).pipe(
       concatMap(thumbnail => {
         if (thumbnail) {
           return defer(() => this.read(thumbnail.thumbnailIndex)).pipe(
-            map(base64 => toDataUrl(base64, mimeType))
+            map(base64 => toDataUrl(base64, thumbnailMimeType))
           );
         }
-        if (mimeType.startsWith('video')) {
+        if (isVideo) {
           return defer(() => this.setThumbnail(index, mimeType)).pipe(
-            map(base64 => toDataUrl(base64, mimeType))
+            map(base64 => toDataUrl(base64, thumbnailMimeType))
           );
         }
         return merge(
-          defer(() => this.getUrl(index, mimeType)),
-          defer(() => this.setThumbnail(index, mimeType)).pipe(
-            map(base64 => toDataUrl(base64, mimeType))
+          defer(() => this.getUrl(index, thumbnailMimeType)),
+          defer(() => this.setThumbnail(index, thumbnailMimeType)).pipe(
+            map(base64 => toDataUrl(base64, thumbnailMimeType))
           )
         );
       })
@@ -151,6 +153,7 @@ export class MediaStore {
 
   private async setThumbnail(index: string, mimeType: MimeType) {
     const thumbnailBase64 = await this.makeThumbnail(index, mimeType);
+    console.log('thumbnailBase64', thumbnailBase64);
     return this.storeThumbnail(index, thumbnailBase64, mimeType);
   }
 

From 1567d3fb15cd1d820b19561762ad99e4cb7f51ea Mon Sep 17 00:00:00 2001
From: Sean Wu <seanwu1105@gmail.com>
Date: Tue, 11 May 2021 14:05:12 +0800
Subject: [PATCH 4/6] Add `video/quicktime` support.

---
 src/app/utils/mime-type.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/utils/mime-type.ts b/src/app/utils/mime-type.ts
index cb3475fc9..039198b8a 100644
--- a/src/app/utils/mime-type.ts
+++ b/src/app/utils/mime-type.ts
@@ -5,6 +5,7 @@ export type MimeType =
   | 'image/png'
   | 'image/svg+xml'
   | 'video/mp4'
+  | 'video/quicktime'
   | 'application/octet-stream';
 
 export function toExtension(mimeType: MimeType) {
@@ -15,6 +16,8 @@ export function toExtension(mimeType: MimeType) {
       return 'png';
     case 'video/mp4':
       return 'mp4';
+    case 'video/quicktime':
+      return 'mov';
     case 'application/octet-stream':
       return 'bin';
     default:
@@ -31,6 +34,8 @@ export function fromExtension(extension: string): MimeType {
       return 'image/png';
     case 'mp4':
       return 'video/mp4';
+    case 'mov':
+      return 'video/quicktime';
     case 'bin':
       return 'application/octet-stream';
     default:

From c3bc82bd1bf89837bdc051073b2f8a1479dded48 Mon Sep 17 00:00:00 2001
From: Sean Wu <seanwu1105@gmail.com>
Date: Tue, 11 May 2021 14:05:27 +0800
Subject: [PATCH 5/6] Rename `imageStore` to `mediaStore`.

---
 .../capture-details/capture-details.page.ts   |  8 +--
 src/app/features/profile/profile.page.ts      |  4 +-
 .../shared/services/camera/camera.service.ts  | 10 ++--
 .../services/capture/capture.service.ts       |  4 +-
 .../services/collector/collector.service.ts   |  4 +-
 .../dia-backend-downloading.service.ts        |  6 +-
 .../proof/old-proof-adapter.spec.ts           |  8 +--
 .../repositories/proof/old-proof-adapter.ts   |  4 +-
 .../proof/proof-repository.service.spec.ts    | 12 ++--
 .../proof/proof-repository.service.ts         | 10 ++--
 .../services/repositories/proof/proof.spec.ts | 58 +++++++++----------
 .../services/repositories/proof/proof.ts      | 28 ++++-----
 .../shared/services/share/share.service.ts    |  6 +-
 13 files changed, 81 insertions(+), 81 deletions(-)

diff --git a/src/app/features/home/capture-tab/capture-details/capture-details.page.ts b/src/app/features/home/capture-tab/capture-details/capture-details.page.ts
index f76eee450..029fc0265 100644
--- a/src/app/features/home/capture-tab/capture-details/capture-details.page.ts
+++ b/src/app/features/home/capture-tab/capture-details/capture-details.page.ts
@@ -66,15 +66,15 @@ export class CaptureDetailsPage {
   readonly assetSrc$ = this.proof$.pipe(
     switchMap(async proof => {
       const [index, meta] = Object.entries(proof.indexedAssets)[0];
-      if (!(await this.imageStore.exists(index)) && proof.diaBackendAssetId) {
-        const imageBlob = await this.diaBackendAssetRepository
+      if (!(await this.mediaStore.exists(index)) && proof.diaBackendAssetId) {
+        const mediaBlob = await this.diaBackendAssetRepository
           .downloadFile$({ id: proof.diaBackendAssetId, field: 'asset_file' })
           .pipe(
             first(),
             catchError((err: unknown) => this.errorService.toastError$(err))
           )
           .toPromise();
-        await proof.setAssets({ [await blobToBase64(imageBlob)]: meta });
+        await proof.setAssets({ [await blobToBase64(mediaBlob)]: meta });
       }
       return proof.getFirstAssetUrl();
     })
@@ -106,7 +106,7 @@ export class CaptureDetailsPage {
     private readonly proofRepository: ProofRepository,
     private readonly diaBackendAuthService: DiaBackendAuthService,
     private readonly diaBackendAssetRepository: DiaBackendAssetRepository,
-    private readonly imageStore: MediaStore,
+    private readonly mediaStore: MediaStore,
     private readonly shareService: ShareService,
     private readonly errorService: ErrorService,
     private readonly actionSheetController: ActionSheetController
diff --git a/src/app/features/profile/profile.page.ts b/src/app/features/profile/profile.page.ts
index 385e611e0..fd6138bcc 100644
--- a/src/app/features/profile/profile.page.ts
+++ b/src/app/features/profile/profile.page.ts
@@ -32,7 +32,7 @@ export class ProfilePage {
   constructor(
     private readonly database: Database,
     private readonly preferenceManager: PreferenceManager,
-    private readonly imageStore: MediaStore,
+    private readonly mediaStore: MediaStore,
     private readonly blockingActionService: BlockingActionService,
     private readonly errorService: ErrorService,
     private readonly translocoService: TranslocoService,
@@ -85,7 +85,7 @@ export class ProfilePage {
   }
 
   logout() {
-    const action$ = defer(() => this.imageStore.clear()).pipe(
+    const action$ = defer(() => this.mediaStore.clear()).pipe(
       concatMapTo(defer(() => this.database.clear())),
       concatMapTo(defer(() => this.preferenceManager.clear())),
       concatMapTo(defer(reloadApp)),
diff --git a/src/app/shared/services/camera/camera.service.ts b/src/app/shared/services/camera/camera.service.ts
index 46a1e0376..44634f69d 100644
--- a/src/app/shared/services/camera/camera.service.ts
+++ b/src/app/shared/services/camera/camera.service.ts
@@ -8,7 +8,7 @@ import {
 } from '@capacitor/core';
 import { Subject } from 'rxjs';
 import { blobToBase64 } from '../../../utils/encoding/encoding';
-import { fromExtension } from '../../../utils/mime-type';
+import { fromExtension, MimeType } from '../../../utils/mime-type';
 import {
   APP_PLUGIN,
   CAMERA_PLUGIN,
@@ -68,12 +68,12 @@ export class CameraService {
         )
           reject(new VideoRecordError(`File type: ${file?.type}`));
         else
-          blobToBase64(file).then(base64 => {
+          blobToBase64(file).then(base64 =>
             resolve({
               base64,
-              mimeType: 'video/mp4',
-            });
-          });
+              mimeType: file.type as MimeType,
+            })
+          );
       };
       inputElement.click();
     });
diff --git a/src/app/shared/services/capture/capture.service.ts b/src/app/shared/services/capture/capture.service.ts
index c58e69e4e..ca8646544 100644
--- a/src/app/shared/services/capture/capture.service.ts
+++ b/src/app/shared/services/capture/capture.service.ts
@@ -18,13 +18,13 @@ export class CaptureService {
 
   constructor(
     private readonly proofRepository: ProofRepository,
-    private readonly imageStore: MediaStore,
+    private readonly mediaStore: MediaStore,
     private readonly collectorService: CollectorService
   ) {}
 
   async capture(source: Media) {
     const proof = await Proof.from(
-      this.imageStore,
+      this.mediaStore,
       { [source.base64]: { mimeType: source.mimeType } },
       { timestamp: Date.now(), providers: {} },
       {}
diff --git a/src/app/shared/services/collector/collector.service.ts b/src/app/shared/services/collector/collector.service.ts
index a02a4815b..dfead2689 100644
--- a/src/app/shared/services/collector/collector.service.ts
+++ b/src/app/shared/services/collector/collector.service.ts
@@ -18,12 +18,12 @@ export class CollectorService {
   private readonly factsProviders = new Set<FactsProvider>();
   private readonly signatureProviders = new Set<SignatureProvider>();
 
-  constructor(private readonly imageStore: MediaStore) {}
+  constructor(private readonly mediaStore: MediaStore) {}
 
   async run(assets: Assets, capturedTimestamp: number) {
     const truth = await this.collectTruth(assets, capturedTimestamp);
     const signatures = await this.signTargets({ assets, truth });
-    const proof = await Proof.from(this.imageStore, assets, truth, signatures);
+    const proof = await Proof.from(this.mediaStore, assets, truth, signatures);
     proof.isCollected = true;
     return proof;
   }
diff --git a/src/app/shared/services/dia-backend/asset/downloading/dia-backend-downloading.service.ts b/src/app/shared/services/dia-backend/asset/downloading/dia-backend-downloading.service.ts
index 58084fa52..5fc0b4533 100644
--- a/src/app/shared/services/dia-backend/asset/downloading/dia-backend-downloading.service.ts
+++ b/src/app/shared/services/dia-backend/asset/downloading/dia-backend-downloading.service.ts
@@ -20,7 +20,7 @@ import {
 export class DiaBackendAssetDownloadingService {
   constructor(
     private readonly assetRepository: DiaBackendAssetRepository,
-    private readonly imageStore: MediaStore,
+    private readonly mediaStore: MediaStore,
     private readonly proofRepository: ProofRepository
   ) {}
 
@@ -37,7 +37,7 @@ export class DiaBackendAssetDownloadingService {
       .downloadFile$({ id: diaBackendAsset.id, field: 'asset_file_thumbnail' })
       .pipe(first())
       .toPromise();
-    return this.imageStore.storeThumbnail(
+    return this.mediaStore.storeThumbnail(
       diaBackendAsset.proof_hash,
       await blobToBase64(thumbnailBlob),
       diaBackendAsset.information.proof.mimeType
@@ -52,7 +52,7 @@ export class DiaBackendAssetDownloadingService {
       return;
     }
     const proof = new Proof(
-      this.imageStore,
+      this.mediaStore,
       getTruth({
         proof: diaBackendAsset.information.proof,
         information: diaBackendAsset.information.information,
diff --git a/src/app/shared/services/repositories/proof/old-proof-adapter.spec.ts b/src/app/shared/services/repositories/proof/old-proof-adapter.spec.ts
index 0b77ed806..1cf900a94 100644
--- a/src/app/shared/services/repositories/proof/old-proof-adapter.spec.ts
+++ b/src/app/shared/services/repositories/proof/old-proof-adapter.spec.ts
@@ -23,14 +23,14 @@ import {
 
 describe('old-proof-adapter', () => {
   let proof: Proof;
-  let imageStore: MediaStore;
+  let mediaStore: MediaStore;
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
       imports: [SharedTestingModule],
     });
-    imageStore = TestBed.inject(MediaStore);
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES);
+    mediaStore = TestBed.inject(MediaStore);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES);
   });
 
   it('should convert Proof to OldProof', () => {
@@ -70,7 +70,7 @@ describe('old-proof-adapter', () => {
   it('should convert SortedProofInformation with raw Blob to Proof', async () => {
     const blob = await base64ToBlob(ASSET1_BASE64, ASSET1_MIMETYPE);
     const convertedProof = await getProof(
-      imageStore,
+      mediaStore,
       blob,
       SORTED_PROOF_INFORMATION,
       OLD_SIGNATURES
diff --git a/src/app/shared/services/repositories/proof/old-proof-adapter.ts b/src/app/shared/services/repositories/proof/old-proof-adapter.ts
index b4623947b..c213e06cf 100644
--- a/src/app/shared/services/repositories/proof/old-proof-adapter.ts
+++ b/src/app/shared/services/repositories/proof/old-proof-adapter.ts
@@ -91,7 +91,7 @@ export function getOldSignatures(proof: Proof): OldSignature[] {
 }
 
 export async function getProof(
-  imageStore: MediaStore,
+  mediaStore: MediaStore,
   raw: Blob,
   sortedProofInformation: SortedProofInformation,
   oldSignatures: OldSignature[]
@@ -99,7 +99,7 @@ export async function getProof(
   const base64 = await blobToBase64(raw);
 
   return Proof.from(
-    imageStore,
+    mediaStore,
     { [base64]: { mimeType: raw.type as MimeType } },
     getTruth(sortedProofInformation),
     getSignatures(oldSignatures)
diff --git a/src/app/shared/services/repositories/proof/proof-repository.service.spec.ts b/src/app/shared/services/repositories/proof/proof-repository.service.spec.ts
index 389450b41..a30071e09 100644
--- a/src/app/shared/services/repositories/proof/proof-repository.service.spec.ts
+++ b/src/app/shared/services/repositories/proof/proof-repository.service.spec.ts
@@ -18,22 +18,22 @@ describe('ProofRepository', () => {
   let repo: ProofRepository;
   let proof1: Proof;
   let proof2: Proof;
-  let imageStore: MediaStore;
+  let mediaStore: MediaStore;
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
       imports: [SharedTestingModule],
     });
-    imageStore = TestBed.inject(MediaStore);
+    mediaStore = TestBed.inject(MediaStore);
     repo = TestBed.inject(ProofRepository);
     proof1 = await Proof.from(
-      imageStore,
+      mediaStore,
       PROOF1_ASSETS,
       PROOF1_TRUTH,
       PROOF1_SIGNATURES_VALID
     );
     proof2 = await Proof.from(
-      imageStore,
+      mediaStore,
       PROOF2_ASSETS,
       PROOF2_TRUTH,
       PROOF2_SIGNATURES_INVALID
@@ -65,7 +65,7 @@ describe('ProofRepository', () => {
       await repo.add(proof1);
       await repo.add(proof2);
       const sameProof1 = await Proof.from(
-        imageStore,
+        mediaStore,
         PROOF1_ASSETS,
         PROOF1_TRUTH,
         PROOF1_SIGNATURES_VALID
@@ -85,7 +85,7 @@ describe('ProofRepository', () => {
   it('should emit updated proof', done => {
     defer(() =>
       Proof.from(
-        imageStore,
+        mediaStore,
         PROOF2_ASSETS,
         PROOF1_TRUTH,
         PROOF1_SIGNATURES_VALID
diff --git a/src/app/shared/services/repositories/proof/proof-repository.service.ts b/src/app/shared/services/repositories/proof/proof-repository.service.ts
index 93fb83287..c2487d8c1 100644
--- a/src/app/shared/services/repositories/proof/proof-repository.service.ts
+++ b/src/app/shared/services/repositories/proof/proof-repository.service.ts
@@ -18,19 +18,19 @@ export class ProofRepository {
     distinctUntilChanged(isEqual),
     map((indexedProofViews: IndexedProofView[]) =>
       indexedProofViews.map(view =>
-        Proof.fromIndexedProofView(this.imageStore, view)
+        Proof.fromIndexedProofView(this.mediaStore, view)
       )
     )
   );
 
   constructor(
     private readonly database: Database,
-    private readonly imageStore: MediaStore
+    private readonly mediaStore: MediaStore
   ) {}
 
   async getAll() {
     const views = await this.table.queryAll();
-    return views.map(view => Proof.fromIndexedProofView(this.imageStore, view));
+    return views.map(view => Proof.fromIndexedProofView(this.mediaStore, view));
   }
 
   async add(proof: Proof, onConflict = OnConflictStrategy.ABORT) {
@@ -54,8 +54,8 @@ export class ProofRepository {
       proofs.map(proof => proof.getIndexedProofView()),
       (x, y) =>
         comparator(
-          Proof.fromIndexedProofView(this.imageStore, x),
-          Proof.fromIndexedProofView(this.imageStore, y)
+          Proof.fromIndexedProofView(this.mediaStore, x),
+          Proof.fromIndexedProofView(this.mediaStore, y)
         )
     );
     return proofs;
diff --git a/src/app/shared/services/repositories/proof/proof.spec.ts b/src/app/shared/services/repositories/proof/proof.spec.ts
index 5a4a61b88..119150e90 100644
--- a/src/app/shared/services/repositories/proof/proof.spec.ts
+++ b/src/app/shared/services/repositories/proof/proof.spec.ts
@@ -22,7 +22,7 @@ import {
 
 describe('Proof', () => {
   let proof: Proof;
-  let imageStore: MediaStore;
+  let mediaStore: MediaStore;
 
   beforeAll(() => {
     Proof.registerSignatureProvider(SIGNATURE_PROVIDER_ID, {
@@ -36,33 +36,33 @@ describe('Proof', () => {
     TestBed.configureTestingModule({
       imports: [SharedTestingModule],
     });
-    imageStore = TestBed.inject(MediaStore);
+    mediaStore = TestBed.inject(MediaStore);
   });
 
   it('should get the same assets with the parameter of factory method', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(await proof.getAssets()).toEqual(ASSETS);
   });
 
   it('should get the same truth with the parameter of factory method', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(proof.truth).toEqual(TRUTH);
   });
 
   it('should get the same signatures with the parameter of factory method', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(proof.signatures).toEqual(SIGNATURES_VALID);
   });
 
   it('should get the same timestamp with the truth in the parameter of factory method', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(proof.timestamp).toEqual(TRUTH.timestamp);
   });
 
   it('should get same ID with same properties', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     const another = await Proof.from(
-      imageStore,
+      mediaStore,
       ASSETS,
       TRUTH,
       SIGNATURES_VALID
@@ -71,7 +71,7 @@ describe('Proof', () => {
   });
 
   it('should have thumbnail when its assets have images', done => {
-    defer(() => Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID))
+    defer(() => Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID))
       .pipe(
         concatMap(proof => proof.thumbnailUrl$),
         first()
@@ -85,7 +85,7 @@ describe('Proof', () => {
   it('should not have thumbnail when its assets do not have image', done => {
     defer(() =>
       Proof.from(
-        imageStore,
+        mediaStore,
         { aGVsbG8K: { mimeType: 'application/octet-stream' } },
         TRUTH,
         SIGNATURES_VALID
@@ -102,7 +102,7 @@ describe('Proof', () => {
   });
 
   it('should get any device name when exists', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(
       proof.deviceName === DEVICE_NAME_VALUE1 ||
         proof.deviceName === DEVICE_NAME_VALUE2
@@ -110,12 +110,12 @@ describe('Proof', () => {
   });
 
   it('should get undefined when device name not exists', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH_EMPTY, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH_EMPTY, SIGNATURES_VALID);
     expect(proof.deviceName).toBeUndefined();
   });
 
   it('should get any geolocation latitude when exists', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(
       proof.geolocationLatitude === GEOLOCATION_LATITUDE1 ||
         proof.geolocationLatitude === GEOLOCATION_LATITUDE2
@@ -123,12 +123,12 @@ describe('Proof', () => {
   });
 
   it('should get undefined when geolocation latitude not exists', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH_EMPTY, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH_EMPTY, SIGNATURES_VALID);
     expect(proof.geolocationLatitude).toBeUndefined();
   });
 
   it('should get any geolocation longitude name when exists', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(
       proof.geolocationLongitude === GEOLOCATION_LONGITUDE1 ||
         proof.geolocationLongitude === GEOLOCATION_LONGITUDE2
@@ -136,23 +136,23 @@ describe('Proof', () => {
   });
 
   it('should get undefined when geolocation longitude not exists', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH_EMPTY, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH_EMPTY, SIGNATURES_VALID);
     expect(proof.geolocationLongitude).toBeUndefined();
   });
 
   it('should get existed fact with ID', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(proof.getFactValue(HUMIDITY)).toEqual(HUMIDITY_VALUE);
   });
 
   it('should get undefined with nonexistent fact ID', async () => {
     const NONEXISTENT = 'NONEXISTENT';
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(proof.getFactValue(NONEXISTENT)).toBeUndefined();
   });
 
   it('should stringify to ordered JSON string', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     const ASSETS_DIFFERENT_ORDER: Assets = {
       [ASSET2_BASE64]: ASSET2_META,
       [ASSET1_BASE64]: { mimeType: ASSET1_MIMETYPE },
@@ -174,7 +174,7 @@ describe('Proof', () => {
       timestamp: TIMESTAMP,
     };
     const proofWithDifferentContentsOrder = await Proof.from(
-      imageStore,
+      mediaStore,
       ASSETS_DIFFERENT_ORDER,
       TRUTH_DIFFERENT_ORDER,
       SIGNATURES_VALID
@@ -185,9 +185,9 @@ describe('Proof', () => {
   });
 
   it('should parse from stringified JSON string', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
 
-    const parsed = await Proof.parse(imageStore, await proof.stringify());
+    const parsed = await Proof.parse(mediaStore, await proof.stringify());
 
     expect(await parsed.getAssets()).toEqual(ASSETS);
     expect(parsed.truth).toEqual(TRUTH);
@@ -195,17 +195,17 @@ describe('Proof', () => {
   });
 
   it('should be verified with valid signatures', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     expect(await proof.isVerified()).toBeTrue();
   });
 
   it('should not be verified with invalid signatures', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_INVALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_INVALID);
     expect(await proof.isVerified()).toBeFalse();
   });
 
   it('should get indexed Proof view', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     const indexedProofView = proof.getIndexedProofView();
 
     expect(indexedProofView.indexedAssets).toBeTruthy();
@@ -214,11 +214,11 @@ describe('Proof', () => {
   });
 
   it('should create Proof from indexed Proof view', async () => {
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     const indexedProofView = proof.getIndexedProofView();
 
     const anotherProof = Proof.fromIndexedProofView(
-      imageStore,
+      mediaStore,
       indexedProofView
     );
 
@@ -226,8 +226,8 @@ describe('Proof', () => {
   });
 
   it('should release resource after destroy', async () => {
-    const spy = spyOn(imageStore, 'delete');
-    proof = await Proof.from(imageStore, ASSETS, TRUTH, SIGNATURES_VALID);
+    const spy = spyOn(mediaStore, 'delete');
+    proof = await Proof.from(mediaStore, ASSETS, TRUTH, SIGNATURES_VALID);
     await proof.destroy();
     expect(spy).toHaveBeenCalled();
   });
diff --git a/src/app/shared/services/repositories/proof/proof.ts b/src/app/shared/services/repositories/proof/proof.ts
index 384ecceb7..366af3a33 100644
--- a/src/app/shared/services/repositories/proof/proof.ts
+++ b/src/app/shared/services/repositories/proof/proof.ts
@@ -48,7 +48,7 @@ export class Proof {
         of(mediaAsset).pipe(
           isNonNullable(),
           concatMap(([index, assetMeta]) =>
-            this.imageStore.getThumbnailUrl$(index, assetMeta.mimeType)
+            this.mediaStore.getThumbnailUrl$(index, assetMeta.mimeType)
           )
         )
       )
@@ -56,35 +56,35 @@ export class Proof {
   );
 
   constructor(
-    private readonly imageStore: MediaStore,
+    private readonly mediaStore: MediaStore,
     readonly truth: Truth,
     readonly signatures: Signatures
   ) {}
 
   static async from(
-    imageStore: MediaStore,
+    mediaStore: MediaStore,
     assets: Assets,
     truth: Truth,
     signatures: Signatures
   ) {
-    const proof = new Proof(imageStore, truth, signatures);
+    const proof = new Proof(mediaStore, truth, signatures);
     await proof.setAssets(assets);
     return proof;
   }
 
   /**
    * Create a Proof from IndexedProofView. This method should only be used when
-   * you sure the Proof has already store its raw assets to ImageStore by calling
+   * you sure the Proof has already store its raw assets to MediaStore by calling
    * Proof.from() or Proof.parse() before.
-   * @param imageStore The singleton ImageStore service.
+   * @param mediaStore The singleton MediaStore service.
    * @param indexedProofView The view without assets with base64.
    */
   static fromIndexedProofView(
-    imageStore: MediaStore,
+    mediaStore: MediaStore,
     indexedProofView: IndexedProofView
   ) {
     const proof = new Proof(
-      imageStore,
+      mediaStore,
       indexedProofView.truth,
       indexedProofView.signatures
     );
@@ -102,9 +102,9 @@ export class Proof {
     Proof.signatureProviders.delete(id);
   }
 
-  static async parse(imageStore: MediaStore, json: string) {
+  static async parse(mediaStore: MediaStore, json: string) {
     const parsed = JSON.parse(json) as SerializedProof;
-    const proof = new Proof(imageStore, parsed.truth, parsed.signatures);
+    const proof = new Proof(mediaStore, parsed.truth, parsed.signatures);
     await proof.setAssets(parsed.assets);
     return proof;
   }
@@ -112,7 +112,7 @@ export class Proof {
   async setAssets(assets: Assets) {
     const indexedAssetEntries: [string, AssetMeta][] = [];
     for (const [base64, meta] of Object.entries(assets)) {
-      const index = await this.imageStore.write(
+      const index = await this.mediaStore.write(
         base64,
         meta.mimeType,
         OnWriteExistStrategy.IGNORE
@@ -136,7 +136,7 @@ export class Proof {
   async getAssets() {
     const assetEntries: [string, AssetMeta][] = [];
     for (const [index, meta] of Object.entries(this.indexedAssets)) {
-      const base64 = await this.imageStore.read(index);
+      const base64 = await this.mediaStore.read(index);
       assetEntries.push([base64, meta]);
     }
     return Object.fromEntries(assetEntries);
@@ -144,7 +144,7 @@ export class Proof {
 
   async getFirstAssetUrl() {
     const [index, meta] = Object.entries(this.indexedAssets)[0];
-    return this.imageStore.getUrl(index, meta.mimeType);
+    return this.mediaStore.getUrl(index, meta.mimeType);
   }
 
   async getFirstAssetMeta() {
@@ -206,7 +206,7 @@ export class Proof {
   async destroy() {
     await Promise.all(
       Object.keys(this.indexedAssets).map(index =>
-        this.imageStore.delete(index)
+        this.mediaStore.delete(index)
       )
     );
   }
diff --git a/src/app/shared/services/share/share.service.ts b/src/app/shared/services/share/share.service.ts
index d6566de34..4bb78d0c5 100644
--- a/src/app/shared/services/share/share.service.ts
+++ b/src/app/shared/services/share/share.service.ts
@@ -18,7 +18,7 @@ export class ShareService {
 
   constructor(
     private readonly diaBackendAssetRepository: DiaBackendAssetRepository,
-    private readonly imageStore: MediaStore
+    private readonly mediaStore: MediaStore
   ) {}
 
   async share(asset: DiaBackendAsset) {
@@ -32,8 +32,8 @@ export class ShareService {
 
   private async createFileUrl(dataUri: string) {
     const base64 = dataUri.split(',')[1];
-    const index = await this.imageStore.write(base64, this.defaultMimetype);
-    return this.imageStore.getUri(index);
+    const index = await this.mediaStore.write(base64, this.defaultMimetype);
+    return this.mediaStore.getUri(index);
   }
 
   private async getSharableCopy(asset: DiaBackendAsset) {

From f5b6dda9c553f0e975cba1b1ceeb3822e72500a5 Mon Sep 17 00:00:00 2001
From: Sean Wu <seanwu1105@gmail.com>
Date: Tue, 11 May 2021 14:05:38 +0800
Subject: [PATCH 6/6] Replace data URL with object URL.

---
 src/app/shared/services/media-store/media-store.service.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/services/media-store/media-store.service.ts b/src/app/shared/services/media-store/media-store.service.ts
index 1e8fb6c36..46cca229f 100644
--- a/src/app/shared/services/media-store/media-store.service.ts
+++ b/src/app/shared/services/media-store/media-store.service.ts
@@ -153,7 +153,6 @@ export class MediaStore {
 
   private async setThumbnail(index: string, mimeType: MimeType) {
     const thumbnailBase64 = await this.makeThumbnail(index, mimeType);
-    console.log('thumbnailBase64', thumbnailBase64);
     return this.storeThumbnail(index, thumbnailBase64, mimeType);
   }
 
@@ -224,7 +223,9 @@ export class MediaStore {
   async getUrl(index: string, mimeType: MimeType) {
     if (Capacitor.isNative)
       return Capacitor.convertFileSrc(await this.getUri(index));
-    return toDataUrl(await this.read(index), mimeType);
+    return URL.createObjectURL(
+      await base64ToBlob(await this.read(index), mimeType)
+    );
   }
 
   private async getExtension(index: string) {