add button on photo to switch to mirror mode

Reviewed-on: trent_larson/crowd-funder-for-time-pwa#108

CHANGELOG.md

@@ -10,14 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Nothing
 
 
-## [0.3.3] - 2024.03.18
+## [0.3.5] - 2024.03.23
 ### Added
-- Photo on gift record
+- Photo on gift records
 ### Fixed
 - Environment variable for BVC meetings project
+- Environment variables and build enhancements for test vs prod
 ### Changed in DB or environment
 - New environment variable for image API server
-- Test that a new browser session will get the right default API.
+- Test that a new browser session will get the right default APIs.
 - Test that a new browser session will send the right BVC meetings project.
 
 

README.md

@@ -51,7 +51,7 @@ TIME_SAFARI_APP_TITLE="TimeSafari_Test" VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=htt
 npm run build
 ```
 
-* Get on the server and back up the DB and the time-safari folder.
+* Get on the server and back up 3 DBs and the time-safari folder.
 
 * `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "TimeSafari",
-      "version": "0.3.3",
+      "version": "0.3.5",
       "dependencies": {
         "@dicebear/collection": "^5.3.5",
         "@dicebear/core": "^5.3.5",
@@ -16240,9 +16240,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -17449,9 +17449,9 @@
       }
     },
     "node_modules/ip": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
       "optional": true,
       "peer": true
     },
@@ -18941,9 +18941,9 @@
       "peer": true
     },
     "node_modules/jose": {
-      "version": "4.15.4",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.4.tgz",
-      "integrity": "sha512-W+oqK4H+r5sITxfxpSU+MMdr/YSWGvgZMQDIsNoBDGGy4i7GBPTtvFKibQzW06n3U3TqHjhvBJsirShsEJ6eeQ==",
+      "version": "4.15.5",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.5.tgz",
+      "integrity": "sha512-jc7BFxgKPKi94uOvEmzlSWFFe2+vASyXaKUpdQKatWAESU2MWjDfFf0fdfc83CDKcA5QecabZeNLyfhe3yKNkg==",
       "optional": true,
       "funding": {
         "url": "https://github.com/sponsors/panva"
@@ -27295,9 +27295,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.26.3",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.3.tgz",
-      "integrity": "sha512-H7n2zmKEWgOllKkIUkLvFmsJQj062lSm3uA4EYApG8gLuiOM0/go9bIoC3HVaSnfg4xunowDE2i9p8drkXuvDw==",
+      "version": "5.28.3",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.3.tgz",
+      "integrity": "sha512-3ItfzbrhDlINjaP0duwnNsKpDQk3acHI3gVJ1z4fmwMK31k5G9OVIAMLSIaP6w4FaGkaAkN6zaQO9LUvZ1t7VA==",
       "optional": true,
       "dependencies": {
         "@fastify/busboy": "^2.0.0"
@@ -28018,9 +28018,9 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "dependencies": {
         "colorette": "^2.0.10",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

project.task.yaml

@@ -2,18 +2,23 @@
 tasks :
 
 - bug - landscape doesn't show full camera
-- but - portrait stretches pic
+- bug - got blank screen and errors on iPhone with no bottom tabs
 - add to readme - check version, close tabs & restart phone if necessary
 - bug maybe - a new give remembers the previous project
 - alert & stop if give amount < 0
 - add warning that all data (except ID) is public
 - onboarding video
+- .2 when adding a claim on home screen, push that claim to the top of the list
+
+- 24 allow a person record with interests, including location; purpose? contact methods? enhance other connections the same? (suggestion from Philippines) assignee-group:ui
 
 - .1 on feed, don't show "to someone anonymous" if it's to a project
-- .1 on ideas, put an "x" to close it
+- .1 on ideas, put an "x" to close it assignee-group:ui
+- 16 save data backups in Google
+- 16 generate and use passkeys for identities
 
 - .2 fix give dialog from "more contacts" off home page to allow giving to this user
-- .2 fix bottom of project selection map, where the icons are hidden but a tap goes to the icon's page
+- .2 fix bottom of project selection map, where the icons are hidden but a tap goes to the icon's page assignee-group:ui
 - .5 stop from seeing an error on the first page when browser doesn't support service workers (which I've seen on iPhone; visible in Firefox private window)
 - .2 don't show a warning on a totally new project when the authorized agent is set
 - .2 anchor hash into BTC
@@ -31,9 +36,9 @@ tasks :
 
 - 24 compelling UI for statistics (eg. World?)
 
-- 01 in the feed, group by project or contact or topic or time/$ (via BC)
+- 01 in the feed, group by project or contact or topic or time/$ (via BC); new projects, offers, search area, etc assignee-group:ui
 - 01 separate not-on-platform vs totally anonymous; terminology "unidentified"?
-- .2 add links between projects
+- .2 add links between projects assignee-group:ui
 - 24 make the contact browsing on the front page something that invites more action
 
 - .5 change server plan & project endpoints to use jwtId as identifier rather than rowid
@@ -72,11 +77,9 @@ tasks :
 - 01 show my VCs - most interesting, or via search
 - 04 allow user to download & prove chains of VCs, mine + ones I can see about me from others
 
-- show feed of offers, new projects, etc -- maybe limited to my search area
-
 - revenue to support server operation
 
-- copy button for seed
+- .1 copy button for seed
 - .5 If notifications are not enabled, add message to front page with link/button to enable
 - make server endpoint for full English description of limits
 - create a help-desk document & add screenshots

src/components/GiftedDialog.vue

@@ -53,7 +53,7 @@
             }"
             class="text-blue-500"
           >
-            More Options
+            Photo, ...
           </router-link>
         </span>
       </div>

src/components/GiftedPhotoDialog.vue

@@ -43,22 +43,45 @@
           <img :src="URL.createObjectURL(blob)" class="mt-2 rounded" />
         </div>
       </div>
-      <div v-else>
+      <div v-else ref="cameraContainer">
         <!--
           Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically:
           :resolution="{ width: 375, height: 812 }"
         -->
-        <camera facingMode="environment" autoplay ref="camera">
+        <camera
+          facingMode="environment"
+          autoplay
+          ref="camera"
+          @started="cameraStarted()"
+        >
           <div
-            class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 landscape:right-0 landscape:top-0 landscape:bottom-0 flex landscape:flex-row justify-center items-center portrait:pb-2 landscape:pr-4"
+            class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 portrait:pb-2 landscape:right-0 landscape:top-0 landscape:bottom-0 landscape:pr-4 flex landscape:flex-row justify-center items-center"
           >
             <button
-              @click="takeImage"
+              @click="takeImage()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
               <fa icon="camera" class="w-[1em]"></fa>
             </button>
           </div>
+          <div
+            class="absolute portrait:bottom-2 portrait:right-16 landscape:right-0 landscape:bottom-16 landscape:pr-4 flex justify-center items-center"
+          >
+            <button
+              @click="swapMirrorClass()"
+              class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
+            >
+              <fa icon="left-right" class="w-[1em]"></fa>
+            </button>
+          </div>
+          <div v-if="numDevices > -1" class="absolute bottom-2 right-4">
+            <button
+              @click="switchCamera()"
+              class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
+            >
+              <fa icon="rotate" class="w-[1em]"></fa>
+            </button>
+          </div>
         </camera>
       </div>
     </div>
@@ -80,12 +103,12 @@ import { accessToken } from "@/libs/crypto";
 export default class GiftedPhotoDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
+  activeDeviceNumber = 0;
   activeDid = "";
   blob: Blob | null = null;
+  mirror = false;
+  numDevices = 0;
   setImage: (arg: string) => void = () => {};
-  imageHeight?: number = window.innerHeight / 2;
-  imageWidth?: number = window.innerWidth / 2;
-  imageWarning = ".";
   uploading = false;
   visible = false;
 
@@ -129,6 +152,21 @@ export default class GiftedPhotoDialog extends Vue {
     this.blob = null;
   }
 
+  async cameraStarted() {
+    const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
+    if (cameraComponent) {
+      this.numDevices = (await cameraComponent.devices(["videoinput"])).length;
+      this.mirror = cameraComponent.facingMode === "user";
+    }
+  }
+
+  async switchCamera() {
+    const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
+    this.activeDeviceNumber = (this.activeDeviceNumber + 1) % this.numDevices;
+    const devices = await cameraComponent?.devices(["videoinput"]);
+    cameraComponent?.changeCamera(devices[this.activeDeviceNumber].deviceId);
+  }
+
   async takeImage(/* payload: MouseEvent */) {
     const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
 
@@ -200,7 +238,6 @@ export default class GiftedPhotoDialog extends Vue {
    <canvas id="canvas" width="320" height="240"></canvas>
 
   async cameraClicked() {
-    console.log("camera_button clicked");
     const video = document.querySelector("#video");
     const stream = await navigator.mediaDevices.getUserMedia({
       video: true,
@@ -211,7 +248,6 @@ export default class GiftedPhotoDialog extends Vue {
     }
   }
   photoSnapped() {
-    console.log("snap_photo clicked");
     const video = document.querySelector("#video");
     const canvas = document.querySelector("#canvas");
     if (
@@ -232,7 +268,6 @@ export default class GiftedPhotoDialog extends Vue {
 
       // data url of the image
       const image_data_url = canvas?.toDataURL("image/jpeg");
-      console.log(image_data_url);
     }
   }
   ****/
@@ -287,6 +322,17 @@ export default class GiftedPhotoDialog extends Vue {
       this.blob = null;
     }
   }
+
+  swapMirrorClass() {
+    this.mirror = !this.mirror;
+    if (this.mirror) {
+      (this.$refs.cameraContainer as HTMLElement).classList.add("mirror-video");
+    } else {
+      (this.$refs.cameraContainer as HTMLElement).classList.remove(
+        "mirror-video",
+      );
+    }
+  }
 }
 </script>
 
@@ -311,4 +357,12 @@ export default class GiftedPhotoDialog extends Vue {
   width: 100%;
   max-width: 700px;
 }
+
+.mirror-video {
+  transform: scaleX(-1);
+  -webkit-transform: scaleX(-1); /* For Safari */
+  -moz-transform: scaleX(-1); /* For Firefox */
+  -ms-transform: scaleX(-1); /* For IE */
+  -o-transform: scaleX(-1); /* For Opera */
+}
 </style>

src/main.ts

@@ -45,6 +45,7 @@ import {
   faHand,
   faHandHoldingHeart,
   faHouseChimney,
+  faLeftRight,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -105,6 +106,7 @@ library.add(
   faHand,
   faHandHoldingHeart,
   faHouseChimney,
+  faLeftRight,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,

src/views/AccountViewView.vue

@@ -450,9 +450,15 @@
         {{ DEFAULT_PUSH_SERVER }}
       </span>
 
+      <div class="mt-2">
+        <span class="text-slate-500 text-sm font-bold">Image Server URL</span>
+        &nbsp;
+        <span class="text-sm">{{ DEFAULT_IMAGE_API_SERVER }}</span>
+      </div>
+
       <label
         for="toggleShowShortcutBvc"
-        class="flex items-center justify-between cursor-pointer my-4"
+        class="flex items-center justify-between cursor-pointer mt-4"
         @click="toggleShowShortcutBvc"
       >
         <!-- label -->
@@ -546,12 +552,15 @@ interface IAccount {
 
 const inputFileNameRef = ref<Blob>();
 
-@Component({ components: { QuickNav, TopMessage } })
+@Component({
+  components: { QuickNav, TopMessage },
+})
 export default class AccountViewView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   AppConstants = AppString;
   DEFAULT_PUSH_SERVER = DEFAULT_PUSH_SERVER;
+  DEFAULT_IMAGE_API_SERVER = DEFAULT_IMAGE_API_SERVER;
 
   activeDid = "";
   apiServer = "";

src/views/HelpView.vue

@@ -198,9 +198,7 @@
           <ul>
             <li class="list-disc list-outside ml-4">
               Chrome:
-              <a href="chrome://settings/content/all" class="text-blue-500"
-                >clear here</a
-              >
+              Clear at chrome://settings/content/all and
               also clear under dev tools Application
             </li>
             <li class="list-disc list-outside ml-4">
@@ -310,8 +308,9 @@
         </li>
       </ul>
       <p>
-        If you still have problems, you can clear the cache and even uninstall
-        and reinstall the app, but be sure to have your backups ready or be
+        If you still have problems, you can clear the cache (see "erase my data" above)
+        and even uninstall and reinstall the app
+        -- just be sure to have your backups ready or be
         prepared to restart with a new identity and recreate your network.
         Nobody else has access to your identity or contact information because
         this app is designed to give you full control over your data.

src/views/NewEditProjectView.vue

@@ -265,6 +265,8 @@ export default class NewEditProjectView extends Vue {
       vcClaim.agent = {
         identifier: this.agentDid,
       };
+    } else {
+      delete vcClaim.agent;
     }
     if (this.includeLocation) {
       vcClaim.location = {
@@ -274,6 +276,8 @@ export default class NewEditProjectView extends Vue {
           longitude: this.longitude,
         },
       };
+    } else {
+      delete vcClaim.location;
     }
     // Make a payload for the claim
     const vcPayload = {