Closed mvtglobally closed 2 years ago
Triggered auto assignment to @iwiznia (Engineering
), see https://stackoverflow.com/c/expensify/questions/4319 for more details.
Triggered auto assignment to @michaelhaxhiu (External
), see https://stackoverflow.com/c/expensify/questions/8582 for more details.
Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported
)
Triggered auto assignment to @chiragsalian (Exported
), see https://stackoverflow.com/c/expensify/questions/7972 for more details.
Cleaned up GH post a little for clarity.
I hope there's a way we can bring down the number of resize to 0, but here's a quick
I can bring the resizing down to 1 time. This could be done by using the same thumbnail styles as the upload preview thumbnail. i.e thumbnailWidth: 200
and thumbnailHeight: 150
Changes will be made in this file. https://github.com/Expensify/App/blob/fd0f83a2e557c9f6d1adcf5be6feb761cd9f40b4/src/components/ThumbnailImage.js#L35-L37
This is still pretty janky, can we make it so:
cc @JmillsExpensify
Love all those suggestions!
@rushatgabhane are you cool with those suggestions from @cead22 to update the proposal? Would be great to get going on this one if everyone is aligned!
@trjExpensify yes, those are good suggestions. But I don't think we can get the dimensions of an image before it's downloaded. So implementing those suggestions might not be plausible.
I'd love to be proven wrong tho.
Im unsure if we can get dimensions of an image before its downloaded. With that being said i'm not sure why we show the blank thumbnail. Can that be removed?
Besides that i think the rest is fine. Personally i feel like the first thumbnail i.e., the preview thumbnail with loading icon on top should be a smaller thumbnail, with maybe some opacity so that the loading icon is more obvious.
But i'll let @cead22 chime in here since he might have more stronger opinions.
This is still pretty janky, can we make it so:
- The thumbnail that is shown immediately has the same dimensions as the image that's shown at the end of the flow
- The thumbnail that is shown immediately doesn't have a spinner on top of it
- The "blank thumbnail" is never shown
Can't we get the dimensions of the local image? If not, I think 2 & 3 are still worth doing
Carlos, i didn't follow your point 2. The thumbnail thats shown immediately after "Send" is clicked does have a spinner on top of it. Did you mean something else?
Sorry, if you go to the comment above, I say "can we make it so:..." and list those points. I updated the previous comment to make it clearer
Doubling price on this one as it's been 7 days
Sorry for responding so late, I have exams going on. Please continue with other proposals.
Open to proposals!
This is still pretty janky, can we make it so:
- The thumbnail that is shown immediately has the same dimensions as the image that's shown at the end of the flow
- The thumbnail that is shown immediately doesn't have a spinner on top of it
- The "blank thumbnail" is never shown
cc @JmillsExpensify
The first two points are easily doable. The third one is complex. Let me explain.
When someone uploads the image, we are basically waiting for two things: a. The image data to be sent to the backend and for the response to come back. The response contains the uploaded image url. I'll reference this time window as TW_A. b. The uploaded image url from expensify server to be loaded in to an image (via an img tag). I'll reference this time window as TW_B.
In the TW_A, we have the local representation of the uploaded file in terms of a FILE
object. As such, we can show the thumbnail immediately once the user clicks send
on the attachment. In fact, when the send
button is clicked, we're creating a local report object (with an optimistic id) containing that FILE
object.
This is displayed initially as a thumbnail with loading icon here: https://github.com/Expensify/App/blob/ad637d3dd7dbb03cfdc6ebcb9196944c4f6165bb/src/pages/home/report/ReportActionItemFragment.js#L78-L88
We can easily change this to something like the following:
The above image covers the suggestions 1 and 2 of @cead22.
At the end of the TW_A, the image uploads successfully and the server sends back a response like:
{
"person": [
{
"type": "TEXT",
"style": "strong",
"text": "Sibtain Ali"
}
],
"actorEmail": "allroundexperts+1@gmail.com",
"actorAccountID": 11676893,
"message": [
{
"type": "COMMENT",
"html": "<img src=\"https://www.expensify.com/chat-attachments/1003893293/w_d3b2234be487c2995e62312382d279496bcecc4a.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com/chat-attachments/1003893293/w_d3b2234be487c2995e62312382d279496bcecc4a.jpg\" data-name=\"pexels-harvey-sapir-1054666.jpeg\" />",
"text": "[Attachment]",
"isEdited": false
}
],
"originalMessage": {
"clientID": "1650833347716816",
"html": "<img src=\"https://www.expensify.com/chat-attachments/1003893293/w_d3b2234be487c2995e62312382d279496bcecc4a.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com/chat-attachments/1003893293/w_d3b2234be487c2995e62312382d279496bcecc4a.jpg\" data-name=\"pexels-harvey-sapir-1054666.jpeg\" />"
},
"avatar": "https://d1wpcgnaa73g0y.cloudfront.net/02b8945511b967b655c8f6fd80f9574f1b6e85f9_128.jpeg",
"created": "Apr 24 2022 1:49pm PDT",
"timestamp": 1650833358,
"automatic": false,
"sequenceNumber": 41,
"actionName": "ADDCOMMENT",
"shouldShow": true,
"clientID": "1650833347716816",
"reportActionID": "1003893293"
}
Notice that we get an image tag with the url of the uploaded file. The action received above over-rides the initial report object that we created with the file object as shown in below code. https://github.com/Expensify/App/blob/ad637d3dd7dbb03cfdc6ebcb9196944c4f6165bb/src/libs/actions/Report.js#L1160-L1190
It is at this point that we enter TW_B. The image that came from the response needs to be loaded. Until that image is loaded, we don't know what its dimensions are. As such, we show an empty thumbnail of FIXED size with loading icon (The JANKINESS that you see).
Once the image loads, we get its dimensions as well and using the src/components/ThumbnailImage.js
, we scale the image and display it to the user.
The empty thumbnail itself can't be removed since loading a large image takes time. The JANKINESS caused by the fixed thumbnail size however can be fixed if we return the uploaded image dimensions in the response of the Report_AddComment
command. That can be done by internal team only as I don't have access to your API code.
Another possible way to remove the empty thumbnail is to reduce the size of the uploaded image on the backend so that loading it does not take a lot of time and thus removes the need for an empty thumbnail (This is how it's done in Slack).
With the first two suggestions fixed, here is how it looks:
Thanks for that. I think removing the spinner like in your video is a good improvement. Not sure if others agree
The JANKINESS caused by the fixed thumbnail size however can be fixed if we return the uploaded image dimensions in the response of the
Report_AddComment
command.
I like that idea! As far as I can tell there's no way to get the dimensions of the image before it's uploaded
A crazier idea would be to somehow preload the image, and then display it.
img.onload
) we can swap the preview with the invisible image img.onload
) we can remove the preview to reveal the image underneath@cead22 Your suggestions would just work for the person uploading the image. For other people, the JANKINESS will still be there. Even for the uploader, the effect will be the same if he refreshes his browser. So IMO, a simple and effective fix would be to save the dimensions in the API call. That'll work well for all the users.
a simple and effective fix would be to save the dimensions in the API call. That'll work well for all the users.
You mean to return the dimensions from the API right? If so that makes sense to me
You mean to return the dimensions from the API right? If so that makes sense to me
Yes, that would help!
a simple and effective fix would be to save the dimensions in the API call. That'll work well for all the users.
You mean to return the dimensions from the API right? If so that makes sense to me
That is what I mean. But I can't edit your API responses. Someone from the internal team will have to do that, unless I missed something. @cead22 @Santhosh-Sellavel
Of course, it would be done by the internal team!
@chiragsalian Are you good with this https://github.com/Expensify/App/issues/8590#issuecomment-1108978375?
Then let's put this issue on hold until API is ready. Thanks!
@chiragsalian updating the title as I think @Santhosh-Sellavel is correct !
Sure yeah, @michaelhaxhiu can you create an issue and assign it to me so that i can make the API changes.
@allroundexperts, if i update the response of Report_AddComment
such that the dimensions of the attachment are within reportAction -> message would that be alright? Sample,
{
"reportAction": {
"person": [
{
"type": "TEXT",
"style": "strong",
"text": "Chirag SalianTest"
}
],
"actorEmail": "chirag@expensify.com",
"actorAccountID": 1,
"message": [
{
"type": "COMMENT",
"html": "<img src=\"https://www.expensify.com.dev/chat-attachments/5780/w_2be2b313b10cb5c238eae13d1601fdab61310f50.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com.dev/chat-attachments/5780/w_2be2b313b10cb5c238eae13d1601fdab61310f50.jpg\" data-name=\"wallhaven-61.jpg\" />",
"text": "[Attachment]",
"isEdited": false,
"attachmentDimension": {
"width": 1920,
"height": 1920
}
}
],
"originalMessage": {
"html": "<img src=\"https://www.expensify.com.dev/chat-attachments/5780/w_2be2b313b10cb5c238eae13d1601fdab61310f50.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com.dev/chat-attachments/5780/w_2be2b313b10cb5c238eae13d1601fdab61310f50.jpg\" data-name=\"wallhaven-61.jpg\" />"
},
"avatar": "https://d2g02b6ed2w9fz.cloudfront.net/c00fa11bb0c84a3b7c924c8a9b1cf81e74bd0905_128.jpeg",
"created": "Apr 25 2022 6:01pm PDT",
"timestamp": 1650934899,
"automatic": false,
"sequenceNumber": 7,
"actionName": "ADDCOMMENT",
"shouldShow": true,
"clientID": "",
"reportActionID": "5780"
},
"jsonCode": 200,
"requestID": "b1FyPF"
}
Yep. That would work.
On Tue, 26 Apr 2022 at 6:05 AM, Chirag Chandrakant Salian < @.***> wrote:
Sure yeah, @michaelhaxhiu https://github.com/michaelhaxhiu can you create an issue and assign it to me so that i can make the API changes.
@allroundexperts https://github.com/allroundexperts, if i update the response of Report_AddComment such that the dimensions of the attachment are within reportAction -> message would that be alright? Sample,
{ "reportAction": { "person": [ { "type": "TEXT", "style": "strong", "text": "Chirag SalianTest" } ], "actorEmail": @.***", "actorAccountID": 1, "message": [ { "type": "COMMENT", "html": "<img src=\"https://www.expensify.com.dev/chat-attachments/5780/w_2be2b313b10cb5c238eae13d1601fdab61310f50.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com.dev/chat-attachments/5780/w_2be2b313b10cb5c238eae13d1601fdab61310f50.jpg\" data-name=\"wallhaven-61.jpg\" />", "text": "[Attachment]", "isEdited": false, "attachmentDimension": { "width": 1920, "height": 1920 } } ], "originalMessage": { "html": "<img src=\"https://www.expensify.com.dev/chat-attachments/5780/w_2be2b313b10cb5c238eae13d1601fdab61310f50.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com.dev/chat-attachments/5780/w_2be2b313b10cb5c238eae13d1601fdab61310f50.jpg\" data-name=\"wallhaven-61.jpg\" />" }, "avatar": "https://d2g02b6ed2w9fz.cloudfront.net/c00fa11bb0c84a3b7c924c8a9b1cf81e74bd0905_128.jpeg", "created": "Apr 25 2022 6:01pm PDT", "timestamp": 1650934899, "automatic": false, "sequenceNumber": 7, "actionName": "ADDCOMMENT", "shouldShow": true, "clientID": "", "reportActionID": "5780" }, "jsonCode": 200, "requestID": "b1FyPF" }
β Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/8590#issuecomment-1109190148, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHFJUUHH6R7WYLG7L7IE7VTVG46MJANCNFSM5TCA4OKQ . You are receiving this because you were mentioned.Message ID: @.***>
@chiragsalian internal GH for the API update can be found here - https://github.com/Expensify/App/issues/8784
We've updated the API in the backend and it has just been merged. The code should be live either tomorrow or Monday.
Is live on staging @chiragsalian ?
When i say "live" i meant production. It should be on staging later today or tomorrow, and then it will be on production either tomorrow or on Monday.
Are you testing against staging endpoints or production ones?
I was testing against prod but can shift to staging as well. @chiragsalian
Cool, i'll let you know once its on staging and when its on production too π
oh btw, code is on staging. Feel free to test it out.
Removing hold, this is back on the front burner! π³
@allroundexperts Do you have the updated proposal if so please submit it in a new comment!
Waiting for a proposal!
Iβll do that today.
On Fri, 29 Apr 2022 at 7:55 PM, Santhoshkumar Sellavel < @.***> wrote:
@allroundexperts https://github.com/allroundexperts Do you have the updated proposal if so please submit it in a new comment!
Waiting for a proposal!
β Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/8590#issuecomment-1113417810, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHFJUUBOFI7EAAIG2WKFTL3VHPZ7XANCNFSM5TCA4OKQ . You are receiving this because you were mentioned.Message ID: @.***>
The code for returning attachment dimensions is on production now as well.
@chiragsalian @michaelhaxhiu @Santhosh-Sellavel The attachmentDimensions
parameter is not available on the report update event that is received from the web socket. We'll need those dimensions there as well in order to get rid of the JANKINESS.
Sample message:
{"event":"reportComment","data":"\"{\\\"reportID\\\":92786630,\\\"reportAction\\\":{\\\"person\\\":[{\\\"type\\\":\\\"TEXT\\\",\\\"style\\\":\\\"strong\\\",\\\"text\\\":\\\"Sibtain Ali\\\"}],\\\"actorEmail\\\":\\\"allroundexperts+1@gmail.com\\\",\\\"actorAccountID\\\":11676893,\\\"message\\\":[{\\\"type\\\":\\\"COMMENT\\\",\\\"html\\\":\\\"<img src=\\\\\\\"https:\\\\\\/\\\\\\/www.expensify.com\\\\\\/chat-attachments\\\\\\/1008164509\\\\\\/w_122f5f001385453475f283337b67aafa7e0c3dfc.jpg.1024.jpg\\\\\\\" data-expensify-source=\\\\\\\"https:\\\\\\/\\\\\\/www.expensify.com\\\\\\/chat-attachments\\\\\\/1008164509\\\\\\/w_122f5f001385453475f283337b67aafa7e0c3dfc.jpg\\\\\\\" data-name=\\\\\\\"mikhail-vasilyev-gGC63oug3iY-unsplash.jpeg\\\\\\\" \\\\\\/>\\\",\\\"text\\\":\\\"[Attachment]\\\",\\\"isEdited\\\":false}],\\\"originalMessage\\\":{\\\"clientID\\\":\\\"1651259925504563\\\",\\\"html\\\":\\\"<img src=\\\\\\\"https:\\\\\\/\\\\\\/www.expensify.com\\\\\\/chat-attachments\\\\\\/1008164509\\\\\\/w_122f5f001385453475f283337b67aafa7e0c3dfc.jpg.1024.jpg\\\\\\\" data-expensify-source=\\\\\\\"https:\\\\\\/\\\\\\/www.expensify.com\\\\\\/chat-attachments\\\\\\/1008164509\\\\\\/w_122f5f001385453475f283337b67aafa7e0c3dfc.jpg\\\\\\\" data-name=\\\\\\\"mikhail-vasilyev-gGC63oug3iY-unsplash.jpeg\\\\\\\" \\\\\\/>\\\"},\\\"avatar\\\":\\\"https:\\\\\\/\\\\\\/d1wpcgnaa73g0y.cloudfront.net\\\\\\/02b8945511b967b655c8f6fd80f9574f1b6e85f9_128.jpeg\\\",\\\"created\\\":\\\"Apr 29 2022 12:18pm PDT\\\",\\\"timestamp\\\":1651259935,\\\"automatic\\\":false,\\\"sequenceNumber\\\":101,\\\"actionName\\\":\\\"ADDCOMMENT\\\",\\\"shouldShow\\\":true,\\\"clientID\\\":\\\"1651259925504563\\\",\\\"reportActionID\\\":\\\"1008164509\\\"},\\\"isChatExcludingConcierge\\\":true,\\\"isGroupConciergeChat\\\":false}\"","channel":"private-user-accountID-11676893"}
Also, since we are using explicit composite architecture
for html rendering, it is not possible to pass the attachmentDimensions
to the ImageRenderer
as the renderersProp
variable. It would be more convenient if you could add the dimensions as an image attribute like data-expensify-width
and data-expensify-height
. Without this in place, I have to use something like:
Interesting so are you saying that even if i return attachmentDimensions
in the push notification as a separate object it won't help?
And instead you are saying its better if i add it to the image as data-expensify-width
and data-expensify-height
attributes?
If so then would a return like this be better? (added with and height to the end of message.html)
{
"reportAction": {
"person": [
{
"type": "TEXT",
"style": "strong",
"text": "Chirag SalianTest"
}
],
"actorEmail": "chirag@expensify.com",
"actorAccountID": 1,
"message": [
{
"type": "COMMENT",
"html": "<img src=\"https://www.expensify.com.dev/chat-attachments/5837/w_3285ff3305d2da7ad74fbc76a1bfc259614ce2fc.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com.dev/chat-attachments/5837/w_3285ff3305d2da7ad74fbc76a1bfc259614ce2fc.jpg\" data-name=\"wallhaven-61.jpg\" data-expensify-width=\"123\" data-expensify-height=\"456\" />",
"text": "[Attachment]",
"isEdited": false
}
],
"originalMessage": {
"clientID": "1651264789461963",
"html": "<img src=\"https://www.expensify.com.dev/chat-attachments/5837/w_3285ff3305d2da7ad74fbc76a1bfc259614ce2fc.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com.dev/chat-attachments/5837/w_3285ff3305d2da7ad74fbc76a1bfc259614ce2fc.jpg\" data-name=\"wallhaven-61.jpg\" data-expensify-width=\"123\" data-expensify-height=\"456\" />"
},
"avatar": "https://d2g02b6ed2w9fz.cloudfront.net/c00fa11bb0c84a3b7c924c8a9b1cf81e74bd0905_128.jpeg",
"created": "Apr 29 2022 1:40pm PDT",
"timestamp": 1651264801,
"automatic": false,
"sequenceNumber": 159,
"actionName": "ADDCOMMENT",
"shouldShow": true,
"clientID": "1651264789461963",
"reportActionID": "5837"
},
"jsonCode": 200,
"requestID": "h8pgsR"
}
Yes that would work @chiragsalian. Just make sure that you're sending this in both the web-socket message and the https response from the API.
Cool, i've got a PR thats ready for review. I've removed attachmentDimensions as an object and instead added it to the attributes of the image. The format will be like so,
"message": [
{
"type": "COMMENT",
"html": "<img src=\"https://www.expensify.com.dev/chat-attachments/5841/w_7fc6316bfa464770cbf7e332d4e1495332e2b493.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com.dev/chat-attachments/5841/w_7fc6316bfa464770cbf7e332d4e1495332e2b493.jpg\" data-name=\"wallhaven-61.jpg\" data-expensify-width=\"1920\" data-expensify-height=\"1080\" />",
"text": "[Attachment]",
"isEdited": false
}
],
and it will show up in Report_AddComment network request and the web socket push notification. Infact, i'm actually saving it in the database so any lookup of that reportAction should always give you the height and width as attributes for an attachment.
I'll let you know once the PR is on staging.
Cool. Let me know when it gets deployed.
On Sat, 30 Apr 2022 at 3:47 AM, Chirag Chandrakant Salian < @.***> wrote:
Cool, i've got a PR thats ready for review. I've removed attachmentDimensions as an object and instead added it to the attributes of the image. The format will be like so,
"message": [ { "type": "COMMENT", "html": "<img src=\"https://www.expensify.com.dev/chat-attachments/5841/w_7fc6316bfa464770cbf7e332d4e1495332e2b493.jpg.1024.jpg\" data-expensify-source=\"https://www.expensify.com.dev/chat-attachments/5841/w_7fc6316bfa464770cbf7e332d4e1495332e2b493.jpg\" data-name=\"wallhaven-61.jpg\" data-expensify-width=\"1920\" data-expensify-height=\"1080\" />", "text": "[Attachment]", "isEdited": false } ],
and it will show up in Report_AddComment network request and the web socket push notification. Infact, i'm actually saving it in the database so any lookup of that reportAction should always give you the height and width as attributes for an attachment.
β Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/8590#issuecomment-1113846719, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHFJUUCER6BCBVBISBJ55HTVHRRJNANCNFSM5TCA4OKQ . You are receiving this because you were mentioned.Message ID: @.***>
Cool, my PR hasn't been reviewed yet and a deploy was done for today so i imagine my PR should be deployed to staging earliest by tomorrow morning. Will keep you updated.
The code for having the dimensions as data attributes is now on staging π
π£ @allroundexperts You have been assigned to this job by @chiragsalian! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review π§βπ» Keep in mind: Code of Conduct | Contributing π
Oops looks like i assigned Ali to the issue prematurely. As part of our steps its still necessary to get the proposal approved so can you post a proper proposal/solution so that @Santhosh-Sellavel and I may review it?
@chiragsalian Let me know once it's deployed to production. For some reason, I can't test staging. I have the .env file as:
NEW_EXPENSIFY_URL=https://staging.new.expensify.com/
SECURE_EXPENSIFY_URL=https://secure.expensify.com/
EXPENSIFY_URL=https://www.expensify.com/
EXPENSIFY_PARTNER_NAME=chat-expensify-com
EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66
PUSHER_APP_KEY=268df511a204fbb60884
USE_WEB_PROXY=true
ENVIRONMENT=staging
If you havenβt already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Action Performed:
Expected Result:
Thumbnail should load once uploaded, or if it's a large file it should display a spinner until it's uploaded.
Actual Result:
If you share an image, the uploading thumbnail resizes 3 times. Then it finalizes the upload.
Workaround:
Just wait for the file to upload but it's a jarring experience.
Platform:
Where is this issue occurring?
Version Number: 1.1.52-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation
If you click
+
>add attachment
in a DM, and then select this attachment:You'll notice it changes to this momentarily:
And then this:
Upwork job URL: https://www.upwork.com/jobs/~01ca59e5811fecf4d5 Issue reported by: @cead22 Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1649352167230159
View all open jobs on GitHub