-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make thumbnails for uploading pictures #2206
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm concerned about this only being available on Chrome. this seems like an important feature that will only be partially supported on the browsers we support. Thoughts?
Talked to Chris and he actually suggest this (prefer Web Worker even it only works in Chrome for now). I am unsure if he is aware that Firefox doesn't work yet. |
7a8bb78
to
43333e1
Compare
Now support both Web Worker and non-Web Worker mode. Edge, Firefox, and IE11 will run in non-Web Worker mode. Firefox has experimental (behind-the-flag) support for |
910977a
to
6e004a6
Compare
Updated to support Edge, Firefox, IE11, and Safari.
@corinagum Do we need to update/change webchat or anything else from our side to see this fix in our bots? |
This bug wil be fixed in our next release in October. If you need these changes immediately, please see our documentation on pointing to our MyGet feed for latest bits. |
* Add downscale on upload * Clean up * Add entry * Separate worker into another file * Check for downscale support * Add comment * Add style options for thumbnail * Typo * Add test * Rename styleOptions for upload thumbnail * Fix ESLint * Add upload text file * Cleanup * Update entry * Update entry * Fix broken propTypes * More robust capability check * Fix tests * Fix tests * Add snapshot * Apply suggestions from code review Co-Authored-By: Corina <[email protected]> * Incorporate PR comments * Thumbnail support for Edge, Firefox, and IE11 * Fix ESLint * Fix promise chaining * Fix test
Fixes #2138.
Changelog Entry
channelData.attachmentThumbnails
, by @compulim, in PR #2206, requires modern browsers with following features:createImageBitmap
MessageChannel
/MessagePort
OffscreenCanvas
OffscreenCanvas.getContext('2d')
Description
Problem
Yesterday
When we attach a picture, Direct Line will echo back the activity with attachment of URL pointing to Direct Line temporary storage. Web Chat will replace the image with the URL echoed by Direct Line.
Today/tomorrow
When we attach a picture, Direct Line will not echo back the attachment URL, but a placeholder image. Since Web Chat replace the URL with a placeholder image, the UX is not great.
Resolution
We are making thumbnail of every attaching picture, save it in
channelData.attachmentThumbnails
. As a bonus, since the thumbnail live inside the activity, it will survive F5.By default, we are making thumbnail of 720x360 as JPEG of quality 0.6. It yields thumbnail of size around 20 KB with our testing images.
We detect whether the upload is a picture or not using filename extension (
.gif
/.jpeg
/.jpg
/.png
). We are not using fingerprint of the file (e.g.GIF87a
/GIF89a
). We do not support PDF files.Since thumbnail has a toll on the CPU, we are using few modern browser APIs to offload the work:
createImageBitmap
MessageChannel
/MessagePort
OffscreenCanvas
OffscreenCanvas.getContext('2d')
The minimum requirement is Chrome 69 (for
OffscreenCanvas
). Although Firefox 46 supportOffscreenCanvas
thru an experimental flag, it do not supportOffscreenCanvas.getContext('2d')
. So this feature is disabled for Edge (UWP)/Firefox/Safari automatically thru capability check.Specific Changes
UploadButton.js
connectUploadButton.sendFiles
function updated to make thumbnail when picture is uploadeddownscaleImageToDataURL.js
and its singleton worker for offloading workArrayBuffer
to workerstyleOptions
for toggling this feature, max width/height, image type, and image quality