#2347 - Build Image viewer in the app #2367
Conversation
…eate-picture-viewer
SebinSong
changed the title
group-income
|
||||||||||||||||||||||||
| Project |
group-income
|
| Run status |
|
| Run duration | 09m 24s |
| Commit |
|
| Committer | Sebin Song |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
10
|
Skipped
|
0
|
Passing
|
111
|
|
|
||
| export default { | ||
| // NOTE: gave this component a generic name in case this is used outside the chatroom area. (eg. instead of 'ChatImageViewer' etc.) | ||
| name: 'ImageViewerModal', |
There was a problem hiding this comment.
Looks like the filename has a typo in it :)
There was a problem hiding this comment.
good catch. fixed.
There was a problem hiding this comment.
Fantastic work @SebinSong!!
I tested it and it seems to work almost perfectly!
I found a few issues:
- On Firefox Desktop when dragging an image:
bug.compressed.mov
As you can see, sometimes when you drag it too far it will get "stuck" and from that point on you won't be able to keep dragging it.
- On mobile, pinching in and zooming is a bit "stuttery" and not smooth.
- On mobile, pinching in and zooming does not zoom into the origin point of where you are pinching in to. Instead it zooms from the center. Try uploading a large picture and zooming in - it will zoom using the origin (the center of the image) as the zoom point. This makes it difficult to zoom in on say the top-right of an image, because you have to zoom, and then scroll. You can't just zoom to the point you want to immediately.
EDIT: also a question: how difficult would it be to have the viewer cycle between photos using the
I think it's something achievable for sure but would love to work on it as a separate PR. |
| .c-image-view-area( | ||
| @wheel.prevent.stop='wheelEventHandler' | ||
| ) | ||
| img.c-preview-image(ref='previewImg' |
There was a problem hiding this comment.
For accessibility, img elements need an alt attribute
How far it can be draggable is calculated by below block, movableDistances () {
// calculates how much vertical/horizontal spaces are available to move image around in.
if (!this.isImageMovable) {
return { x: 0, y: 0 }
} else {
const percentDiff = (this.ephemeral.currentZoom - this.config.zoomMin) / 100
return {
x: this.config.imgData.naturalWidth * percentDiff / 2,
y: this.config.imgData.naturalHeight * percentDiff / 2
}
}
}and this is actually based on my observation in the Slack image-viewer where as long as the edge of the image hits the viewer's edge, it apparently decides that those corner/edge areas are visible and stops to move.
|
|
@taoeffect The PR has been updated with the work for your feedback. |
|
@taoeffect
I decreased the throttling value for |
closes #2347
[ Screenshot - Desktop ]
[ Screenshot - Mobile ]
On mobile browser, zooming in/out can be done both by using the slider at the bottom and via pinch zoom gestures. (tested on my Android and worked well)
This viewer is triggered by clicking on two places in the chatroom.