#2347 - Build Image viewer in the app

cypress.config.js

@@ -12,8 +12,8 @@ module.exports = defineConfig({
   projectId: 'q6whky',
   experimentalMemoryManagement: true,
   // NOTE: When running 'cypress open' on a browser, high memory usage often leads to crashing the browser.
-  //       So setting 'numTestsKeptInMemory' to 0 here. (reference: https://docs.cypress.io/guides/references/configuration#Global)
-  numTestsKeptInMemory: 0,
+  //       So setting 'numTestsKeptInMemory' to a relatively low number here. (reference: https://docs.cypress.io/guides/references/configuration#Global)
+  numTestsKeptInMemory: 3,
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.

frontend/utils/lazyLoadedView.js

@@ -79,6 +79,7 @@ lazyModal('SendThankYouModal', () => import('../views/containers/payments/SendTh
 lazyModal('ThankYouNoteModal', () => import('../views/containers/payments/ThankYouNoteModal.vue'))
 lazyModal('AvatarEditorModal', () => import('../views/components/avatar-editor/AvatarEditorModal.vue'))
 lazyModal('ChatFileAttachmentWarningModal', () => import('../views/containers/chatroom/file-attachment/ChatFileAttachmentWarningModal.vue'))
+lazyModal('ImageViewerModal', () => import('../views/containers/chatroom/image-viewer/ImageViwerModal.vue'))
 lazyModalFullScreen('GroupCreationModal', () => import('../views/containers/group-settings/GroupCreationModal.vue'))
 lazyModalFullScreen('GroupJoinModal', () => import('../views/containers/group-settings/GroupJoinModal.vue'))
 lazyModalFullScreen('GroupMembersAllModal', () => import('../views/containers/dashboard/GroupMembersAllModal.vue'))

frontend/views/components/SliderContinuous.vue

@@ -69,6 +69,19 @@ export default ({
       const percent = this.getPercent(value)
       this.ephemeral.styleVars = `--percent: ${percent}%; --factor: ${this.getFactor(percent)};`
     }
+  },
+  watch: {
+    value (newVal) {
+      if (newVal !== undefined) {
+        this.updateSlider(newVal)
+      }
+    },
+    min () {
+      this.updateSlider(this.value)
+    },
+    max () {
+      this.updateSlider(this.value)
+    }
   }
 }: Object)
 </script>

frontend/views/components/avatar-editor/AvatarEditorModal.vue

@@ -24,8 +24,8 @@ modal-template(
       :zoom='zoom'
       :imageUrl='ephemeral.replaceImageUrl'
       @pointer-wheel='HandleWheelOnCanvas'
-      @pinch-in='decrementSlider(3)'
-      @pinch-out='incrementSlider(3)'
+      @pinch-in='decrementSlider(4)'
+      @pinch-out='incrementSlider(4)'
     )
 
     .c-slider-container
@@ -138,8 +138,8 @@ export default ({
       this.$refs.slider.updateSlider(this.form.slider)
     },
     HandleWheelOnCanvas ({ deltaY }) {
-      if (deltaY < 0) this.incrementSlider(2)
-      else this.decrementSlider(2)
+      if (deltaY < 0) this.incrementSlider(3)
+      else this.decrementSlider(3)
     },
     loadPhotoChange (fileList) {
       if (!fileList.length) return

frontend/views/components/avatar-editor/EditorCanvas.vue

@@ -25,7 +25,7 @@
 import { mapGetters } from 'vuex'
 import { imageDataURItoBlob } from '@utils/image.js'
 import { EDITED_AVATAR_DIAMETER } from './avatar-editor-constants.js'
-import pointerEventsMixin from './avatar-editor-pointer-events-setup.js'
+import pointerEventsMixin from '@view-utils/pointerEventsMixins.js'
 
 export default {
   name: 'AvatarEditorCanvas',

frontend/views/components/avatar-editor/avatar-editor-constants.js

@@ -3,4 +3,3 @@ export const ZOOM_SLIDER_MAX = 100
 export const IMAGE_SCALE_MIN = 1
 export const IMAGE_SCALE_MAX = 5
 export const EDITED_AVATAR_DIAMETER = 512
-export const PINCH_ZOOM_THRESHOLD = 2.5

frontend/views/containers/chatroom/MessageBase.vue

@@ -62,6 +62,8 @@
           :variant='variant'
           :isForDownload='true'
           :isMsgSender='isMsgSender'
+          :ownerID='from'
+          :created-at='datetime'
           :isGroupCreator='isGroupCreator'
           @delete-attachment='deleteAttachment'
         )

frontend/views/containers/chatroom/SendArea.vue

@@ -76,6 +76,7 @@
     chat-attachment-preview(
       v-if='ephemeral.attachments.length'
       :attachmentList='ephemeral.attachments'
+      :ownerID='ourIdentityContractId'
       @remove='removeAttachment'
     )
 

frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue

@@ -1,5 +1,7 @@
 <template lang='pug'>
 .c-attachment-container(ref='container' :class='{ "is-for-download": isForDownload }')
+
+  // Displaying attachments as part of message
   template(v-if='isForDownload')
     .c-attachment-preview(
       v-for='(entry, entryIndex) in attachmentList'
@@ -20,6 +22,7 @@
           v-if='objectURLList[entryIndex]'
           :src='objectURLList[entryIndex]'
           :alt='entry.name'
+          @click='openImageViewer(objectURLList[entryIndex], entry)'
         )
         .loading-box(v-else :style='loadingBoxStyles[entryIndex]')
 
@@ -51,11 +54,13 @@
             )
               i.icon-trash-alt
 
+  // Displaying attachments as part of <send-area />
   template(v-else)
     .c-attachment-preview(
       v-for='(entry, entryIndex) in attachmentList'
       :key='entryIndex'
       :class='"is-" + fileType(entry)'
+      @click='openImageViewer(entry.url, entry)'
     )
       img.c-preview-img(
         v-if='fileType(entry) === "image" && entry.url'
@@ -73,7 +78,7 @@
       button.c-attachment-remove-btn(
         type='button'
         :aria-label='L("Remove attachment")'
-        @click='$emit("remove", entry.url)'
+        @click.stop='$emit("remove", entry.url)'
       )
         i.icon-times
 
@@ -88,6 +93,7 @@ import Tooltip from '@components/Tooltip.vue'
 import { MESSAGE_VARIANTS } from '@model/contracts/shared/constants.js'
 import { getFileExtension, getFileType } from '@view-utils/filters.js'
 import { Secret } from '~/shared/domains/chelonia/Secret.js'
+import { OPEN_MODAL } from '@utils/events.js'
 
 export default {
   name: 'ChatAttachmentPreview',
@@ -107,7 +113,9 @@ export default {
     },
     isGroupCreator: Boolean,
     isForDownload: Boolean,
-    isMsgSender: Boolean
+    isMsgSender: Boolean,
+    ownerID: String,
+    createdAt: [Date, String]
   },
   data () {
     return {
@@ -203,6 +211,22 @@ export default {
         width: `${widthInPixel}px`,
         height: `${heightInPixel}px`
       }
+    },
+    openImageViewer (objectURL, data) {
+      if (objectURL) {
+        sbp(
+          'okTurtles.events/emit', OPEN_MODAL, 'ImageViewerModal',
+          null,
+          {
+            metaData: {
+              name: data.name,
+              ownerID: this.ownerID,
+              imgUrl: objectURL,
+              createdAt: this.createdAt || new Date()
+            }
+          }
+        )
+      }
     }
   },
   watch: {
@@ -252,7 +276,6 @@ export default {
       position: absolute;
       right: 0.5rem;
       top: 0;
-      bottom: 0;
 
       .c-attachment-actions {
         display: flex;
@@ -290,7 +313,8 @@ export default {
         padding: 0.5rem;
 
         img {
-          pointer-events: none;
+          user-select: none;
+          cursor: pointer;
           max-width: 100%;
           max-height: 20rem;
 
@@ -320,6 +344,7 @@ export default {
   &.is-image {
     width: 4.5rem;
     height: 4.5rem;
+    cursor: pointer;
 
     .c-preview-img {
       pointer-events: none;