InProgress: download pic, minor ui tweaks

* adding platform checks since downloading via html5 seems to not work in
  webview
  * added Platform service in common service for broader access.
* can't seem to get save base64 file properly going in android.
  * android gallery does not show base64 image file correctly, though the
    file does convert correctly to binary (i.e. data hasn't been lost)
  * the pic still does show in an img tag (i.e. data is good)
* changed shape of action bar buttons
* changed height of action bar based on platform
  * did not show properly on the firefox for android target

ionic-gib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionicgib",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "author": "William Raiford",
   "repository": {
     "url": "https://github.com/wraiford/ibgib",
@@ -47,6 +47,7 @@
     "ff:1": "web-ext run -s './www' -t firefox-desktop --firefox-profile=ibgibtest1 --keep-profile-changes --browser-console",
     "ff:2": "web-ext run -s './www' -t firefox-desktop --firefox-profile=ibgibtest2 --keep-profile-changes --browser-console",
     "ff:3": "web-ext run -s './www' -t firefox-desktop --firefox-profile=ibgibtest3 --keep-profile-changes --browser-console",
+    "ff:mobile:android": "web-ext run -s './www' -t firefox-android",
     "chrome": "web-ext run -s './www' -t chromium --keep-profile-changes --browser-console",
     "test": "ng test",
     "lint": "ng lint",

ionic-gib/src/app/app.component.ts

@@ -148,7 +148,6 @@ export class AppComponent extends IbgibComponentBase
   menuOpen: string = 'tags';
 
   constructor(
-    private platform: Platform,
     private splashScreen: SplashScreen,
     private statusBar: StatusBar,
     protected common: CommonService,
@@ -173,7 +172,7 @@ export class AppComponent extends IbgibComponentBase
 
     if (logalot) { console.log(`${lc} starting...`); }
     this.initializing = true;
-    this.platform.ready().then(async () => {
+    this.common.platform.ready().then(async () => {
       this.statusBar.styleDefault();
 
       let navToAddr: IbGibAddr;
@@ -230,7 +229,7 @@ export class AppComponent extends IbgibComponentBase
         }
 
         // navToAddr = this.tagsAddr;
-        this.platform.backButton.subscribeWithPriority(10, async () => {
+        this.common.platform.backButton.subscribeWithPriority(10, async () => {
           if (this.common?.nav) { await this.common.nav.back(); }
         });
 

ionic-gib/src/app/common/action-bar/action-bar.component.html

@@ -1,23 +1,23 @@
 <div *ngFor='let item of items'>
-
+    <!-- shape="round" -->
   <ion-button *ngIf='item.type === "button" && (gib !== "gib" || item.allowPrimitive)'
-    color="primary" shape="round"
+    color="primary"
     [disabled]="item.busy"
     (click)='item.handler($event)'>
     <ion-icon *ngFor="let iconName of item?.icons" slot="start" [name]="iconName"></ion-icon>
     <ion-spinner *ngIf="item.busy" name="circles" color="tertiary"></ion-spinner>
   </ion-button>
 
   <ion-button *ngIf='item.type === "inputfile" && (gib !== "gib" || item.allowPrimitive)'
-    color="primary" shape="round"
+    color="primary"
     (click)='inputyo1.click()'>
     <ion-icon *ngFor="let iconName of item?.icons" slot="start" [name]="iconName"></ion-icon>
     <ion-spinner *ngIf="item.busy" name="circles" color="tertiary"></ion-spinner>
     <input #inputyo1 type="file" hidden (change)='item.filepicked($event)'/>
   </ion-button>
 
   <ion-button *ngIf='item.type === "inputfile-camera" && (gib !== "gib" || item.allowPrimitive)'
-    color="primary" shape="round"
+    color="primary"
     (click)='inputyo2.click()'>
     <ion-icon *ngFor="let iconName of item?.icons" slot="start" [name]="iconName"></ion-icon>
     <ion-spinner *ngIf="item.busy" name="circles" color="tertiary"></ion-spinner>

ionic-gib/src/app/common/action-bar/action-bar.component.scss

@@ -14,3 +14,7 @@ input {
 ion-icon {
     margin: 0px;
 }
+
+ion-button {
+  border-radius: 5px;
+}

ionic-gib/src/app/common/action-bar/action-bar.component.ts

@@ -1,17 +1,18 @@
 import { Component, OnInit, ChangeDetectorRef, Input } from '@angular/core';
-import { Plugins, Camera, CameraResultType, ActionSheetOptionStyle } from '@capacitor/core';
+import {
+  Plugins, Camera, CameraResultType, Filesystem,
+} from '@capacitor/core';
 const { Modals } = Plugins;
 
 import { IbGibAddr, IbGibRel8ns, V1 } from 'ts-gib';
-import { hash, getIbGibAddr, getTimestamp, getIbAndGib, pretty } from 'ts-gib/dist/helper';
+import { hash, getIbGibAddr, getTimestamp, pretty } from 'ts-gib/dist/helper';
 import { Factory_V1 as factory, IbGibRel8ns_V1, IbGib_V1 } from 'ts-gib/dist/V1';
 import * as h from 'ts-gib/dist/helper';
 
 import { CommonService } from 'src/app/services/common.service';
 import {
   ActionItem, PicData, CommentData, SyncSpaceResultIbGib, ActionItemName,
 } from '../types';
-import { ChooseIconModalComponent, IconItem } from '../choose-icon-modal/choose-icon-modal.component';
 import { IbGibSpaceAny } from '../witnesses/spaces/space-base-v1';
 import { IbgibComponentBase } from '../bases/ibgib-component-base';
 import {
@@ -22,6 +23,7 @@ import {
 import * as c from '../constants';
 import { getGib } from 'ts-gib/dist/V1/transforms/transform-helper';
 
+
 const logalot = c.GLOBAL_LOG_A_LOT || false;
 const debugBorder = c.GLOBAL_DEBUG_BORDER || false;
 
@@ -62,7 +64,6 @@ export class ActionBarComponent extends IbgibComponentBase
       type: 'inputfile-camera',
       text: 'camera',
       icons: ['camera-outline'],
-      // filepicked: async (event) => await this.actionAddImage(event),
       filepicked: async (event) => await this.handleHtml5PicButton(event),
     },
     {
@@ -225,13 +226,13 @@ export class ActionBarComponent extends IbgibComponentBase
 
       const binIb = getBinIb({binHash, binExt: ext});
       const binIbGib: IbGib_V1 = { ib: binIb, data: <any>imageBase64 };
+
       const binGib = await getGib({ibGib: binIbGib, hasTjp: false});
       binIbGib.gib = binGib;
       const binAddr = h.getIbGibAddr({ibGib: binIbGib});
 
       if (logalot) { console.log(`${lc} saving initial ibgib pic with data = imageBase64...`); }
       const resSaveBin = await this.common.ibgibs.put({ibGib: binIbGib});
-        // await this.ibgibs.put({binData: image.base64String, binExt: ext});
       if (!resSaveBin.success) { throw new Error(resSaveBin.errorMsg || 'error saving pic'); }
       if (logalot) { console.log(`${lc} saving initial ibgib pic with data = imageBase64 complete.`); }
 
@@ -408,17 +409,27 @@ export class ActionBarComponent extends IbgibComponentBase
       }
 
       reader.onload = async (_: any) => {
-        let imageBase64 = reader.result.toString().split('base64,')[1];
-        let binHash = await hash({s: imageBase64});
-        const filenameWithExt = file.name;
-        const filenamePieces = filenameWithExt.split('.');
-        const filename = filenamePieces.slice(0, filenamePieces.length-1).join('.');
-        const ext = filenamePieces.slice(filenamePieces.length-1)[0];
-
-        await this.doPic({imageBase64, binHash, filename, ext});
-        if (actionItem) {
-          actionItem.busy = false;
-          this.ref.detectChanges();
+        const lc2 = `${lc}[reader.onload]`;
+        try {
+          if (logalot) { console.log(`${lc2} starting... (I: 1e948476ca86b328a12700dc57be0a22)`); }
+          let imageBase64 = reader.result.toString().split('base64,')[1];
+          let binHash = await hash({s: imageBase64});
+          const filenameWithExt = file.name;
+          const filenamePieces = filenameWithExt.split('.');
+          const filename = filenamePieces.slice(0, filenamePieces.length-1).join('.');
+          const ext = filenamePieces.slice(filenamePieces.length-1)[0];
+
+          await this.doPic({imageBase64, binHash, filename, ext});
+
+        } catch (error) {
+          console.error(`${lc2} ${error.message}`);
+          throw error;
+        } finally {
+          if (actionItem) {
+            actionItem.busy = false;
+            this.ref.detectChanges();
+          }
+          if (logalot) { console.log(`${lc2} complete. (I: d88dcaeb874c4f049d51d58655dc2b62)`); }
         }
       };
       reader.readAsDataURL(file);

ionic-gib/src/app/common/bases/create-modal-component-base.ts

@@ -10,7 +10,8 @@ import {
 } from '../types';
 import { getRegExp } from '../helper';
 
-const logalot = c.GLOBAL_LOG_A_LOT || false || true;
+const logalot = c.GLOBAL_LOG_A_LOT || false;
+
 
 /**
  * Prompts the user for information gathering and generates a new ibGib.

ionic-gib/src/app/common/bases/ibgib-component-base.ts

@@ -11,6 +11,7 @@ import { IbGibAddr, Ib, Gib, } from "ts-gib";
 import * as c from '../../common/constants';
 import { IbgibItem, PicData, CommentData, LatestEventInfo } from '../types';
 import { CommonService, NavInfo } from 'src/app/services/common.service';
+import { Capacitor } from '@capacitor/core';
 
 const logalot = c.GLOBAL_LOG_A_LOT || false;
 const debugBorder = c.GLOBAL_DEBUG_BORDER || false;
@@ -159,12 +160,23 @@ export abstract class IbgibComponentBase<TItem extends IbgibItem = IbgibItem>
      */
     protected subLatest: Subscription;
 
+    @Input()
+    platform: string = Capacitor.getPlatform();
+
+    @Input()
+    get ios(): boolean { return this.platform === 'ios'; }
+    @Input()
+    get android(): boolean { return this.platform === 'android'; }
+    @Input()
+    get web(): boolean { return this.platform === 'web'; }
+
     constructor(
         protected common: CommonService,
         protected ref: ChangeDetectorRef,
     ) {
         const lc = `${this.lc}[ctor]`;
         if (logalot) { console.log(`${lc}${c.GLOBAL_TIMER_NAME}`); console.timeLog(c.GLOBAL_TIMER_NAME); }
+
     }
 
     /**
@@ -403,6 +415,8 @@ export abstract class IbgibComponentBase<TItem extends IbgibItem = IbgibItem>
         item.timestamp = data.timestamp;
         if (logalot) { console.log(`${lc} initial item.picSrc.length: ${item?.picSrc?.length}`); }
 
+        item.filenameWithExt = `${data.filename || data.binHash}.${data.ext}`;
+
         const delayRefDetectChangesMs = 2000; // hack
         if (resGet.success && resGet.ibGibs?.length === 1 && resGet.ibGibs[0]!.data) {
             item.picSrc = `data:image/jpeg;base64,${resGet.ibGibs![0].data!}`;

ionic-gib/src/app/common/bases/ibgib-list-component-base.ts

@@ -8,7 +8,7 @@ import * as c from '../constants';
 import { IbGib_V1 } from 'ts-gib/dist/V1';
 import { unique } from '../helper/utils';
 
-const logalot = c.GLOBAL_LOG_A_LOT || false || true;
+const logalot = c.GLOBAL_LOG_A_LOT || false;
 
 @Injectable({providedIn: "root"})
 export abstract class IbgibListComponentBase<TItem extends IbgibItem = IbgibItem>

ionic-gib/src/app/common/constants.ts

@@ -85,6 +85,7 @@ export const IBGIB_IBGIBS_SUBPATH = 'ibgibs';
  *   e.g. settings, a separate folder will be useful.
  */
 export const IBGIB_META_SUBPATH = 'meta';
+export const IBGIB_DOWNLOADED_PICS_SUBPATH = 'DownloadedPics';
 
 export const VALID_SPACE_NAME_EXAMPLES = [
     'justLetters', 'valid_here', 'hyphens-allowed', '0CanStartOrEndWithNumbers9'

ionic-gib/src/app/common/types/ux.ts

@@ -81,6 +81,10 @@ export interface IbgibItem {
      * ```
      */
     picSrc?: any;
+    /**
+     * If it's a pic/binary, then this is the filename.ext
+     */
+    filenameWithExt?: string;
     // picSrc?: string;
     text?: string;
     isMeta?: boolean;

ionic-gib/src/app/common/witnesses/spaces/ionic-space-v1.ts

@@ -838,6 +838,7 @@ export class IonicSpace_V1<
             //         if (logalot) { console.log(`${lc} tried to delete file first for android, but failed`); }
             //     }
             // }
+            if (logalot) { console.log(`${lc} path: ${path}, directory: ${thisData.baseDir}, encoding: ${thisData.encoding} (I: d4440ececbe6c859f8fcf6d7ece12522)`); }
             const resWrite = await Filesystem.writeFile({
                 path,
                 data,

ionic-gib/src/app/ibgib/ibgib.page.html

@@ -31,12 +31,31 @@
   </ion-toolbar>
   <ion-toolbar color="background">
     <ion-buttons slot="end" collapse="true">
-      <ion-button *ngIf="item?.type === 'pic'" [disabled]="syncing || refreshing"
-        class="toolbar-title-btn"
-        (click)="handleDownloadPicClick()">
+      <!-- leaving these in for future testing of download the d*$! pic -->
+      <!-- <ion-button *ngIf="item?.type === 'pic' && (ios || android)" class="toolbar-title-btn" -->
+      <ion-button *ngIf="item?.type === 'pic' && (ios || android)" class="toolbar-title-btn"
+        [disabled]="syncing || refreshing" (click)="handleDownloadPicClick()">
         <ion-icon name="download-outline"></ion-icon>
         <ion-icon name="image-outline"></ion-icon>
+        <ion-spinner *ngIf="downloadingPic" name="circles" color="tertiary"></ion-spinner>
       </ion-button>
+      <!-- <a *ngIf="item?.type === 'pic' && android" [href]="item.picSrc" download="testing.jpg">
+        <ion-button [disabled]="syncing || refreshing" class="toolbar-title-btn">
+          <ion-icon name="download-outline"></ion-icon>
+          <ion-icon name="download-outline"></ion-icon>
+          <ion-icon name="download-outline"></ion-icon>
+          <ion-icon name="image-outline"></ion-icon>
+        </ion-button>
+      </a> -->
+      <a *ngIf="item?.type === 'pic' && web" [href]="item.picSrc"
+        [download]="'Downloads/' + (item?.filenameWithExt || 'item.binHash.png')">
+        <ion-button [disabled]="syncing || refreshing" class="toolbar-title-btn">
+          <!-- (click)="handleDownloadPicClick()"> -->
+          <ion-icon name="download-outline"></ion-icon>
+          <ion-icon name="image-outline"></ion-icon>
+          <!-- <ion-spinner *ngIf="downloadingPic" name="circles" color="tertiary"></ion-spinner> -->
+        </ion-button>
+      </a>
       <ion-button
         class="toolbar-title-btn"
         (click)="handleShareClick()">
@@ -145,5 +164,8 @@
 </ion-content>
 
 <ion-footer>
-  <action-bar [addr]='addr' [ibGib_Context]='ibGib'></action-bar>
+  <action-bar
+    [style.height]="actionBarHeightPerPlatform"
+    [addr]='addr' [ibGib_Context]='ibGib'>
+  </action-bar>
 </ion-footer>

ionic-gib/src/app/ibgib/ibgib.page.scss

@@ -54,7 +54,7 @@ pre {
 action-bar, ion-footer {
   display: flex;
   flex-direction: row;
-  height: 55px !important;
+  // height: 55px !important;
 }
 
 .toolbar-title-btn {