fix(chat): upload rework #3550

josephmcg · 2022-06-10T01:41:31Z

What this PR does 📖

Code related

helpful new getters
- isGroup - determine whether active conversation is group or DM
- recipient - fetch active recipient data (Group or User). This will be used instead of passing recipient prop all over the place. its still being used as a prop for unrelated components, but I thought that should be handled separately
- getFiles - fetch files for active conversation based on recipient address
generate smaller thumbnails for file uploads, should help w/ memory
- move this thumbnail function from filesystem to utilities
move & rename types associated w/ chat upload
rather than updating local state inside the components for files with a subscription, move all files to store only
rename upload nested components to be more concise
move file count error outside preview for better v-if rendering (save memory)
reduce redundancy for progress tracking. add to files store value rather than use a separate list just for progress
refactor preview css to use flex (was using inline-block 😵‍💫)
move file upload method to chatbar since everything is in store. easier than calling a method of a ref

Functionality

big file uploads with streams api
allow sending of nsfw files, but attach an nsfw boolean to it.
- if a user has the 'block nsfw content' setting on, it will blur
- In a future update, I will add a privacy setting to blur images from people not on your friends list (provide option to click and remove blur)
not functionality, but make upload preview closer to figma

Which issue(s) this PR fixes 🔨
AP-1470, AP-1650, AP-1651, AP-1844

Special notes for reviewers 🗒️

Additional comments 🎤

things to come

aforementioned privacy blur setting
index to track chat uploads
improve file limit ux. rather than preventing upload, we could slice the file list and add up to the 8 file limit
show preview immediately and load thumbnail async

netlify · 2022-06-10T01:47:17Z

✅ Yeeeehaw, deploy preview is ready!

Name	Link
🔨 Latest commit	`872878e`
🔍 Latest deploy log	https://app.netlify.com/sites/adoring-edison-dbcef8/deploys/62a93139042a410008d15851
😎 Deploy Preview	https://deploy-preview-3550--adoring-edison-dbcef8.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

components/views/chat/chatbar/Chatbar.html

components/views/files/upload/preview/Preview.html

components/views/files/upload/Error.vue

phillsatellite · 2022-06-13T14:11:56Z

One thing I found when testing, if I send an NSFW image in chat, then block NSFW when I open the image in chat should it be blurred? (picture is just some pigs)

just.pigs.mov

phillsatellite · 2022-06-13T14:12:02Z

One thing I found when testing, if I send an NSFW image in chat, then block NSFW when I open the image in chat should it be blurred?
https://user-images.githubusercontent.com/93608357/173372783-c3f79afc-5346-4652-b95d-551fd89f366d.mov

components/views/files/upload/Upload.vue

utilities/Thumbnail.ts

josephmcg · 2022-06-14T04:41:53Z

@phillsatellite @molimauro
Thank you both for taking a look. everything has been addressed

molimauro · 2022-06-14T12:03:26Z

Good to me, thanks Joe!!

phillsatellite · 2022-06-14T15:17:40Z

Blur when preview is fixed thanks Joe! I found 2 other things when I retested, it seems like the "view original" has moved from the left side of the preview to the center

I also saw this error if I cancel a 2GB file upload in chat half way through. This error will appear each time you navigate into the chat as well
https://user-images.githubusercontent.com/93608357/173612903-a652fbd1-fee9-40ed-a8c3-47d8b1fa5a36.mov

…h clipboard API

* chore(cypress): skip tests * feat(chat): implement infinite scroll for chat messages (#3286) * chore(lint): minor lint (#3542) * fix(toolbar): add missing user avatar src prop (#3545) * fix(layout): remove overflow hidden (#3529) * fix(call): add possibility to call user via context menu (#3484) * chore(copy): minor update * fix(call): overflow for long user name in incoming call (#3499) * feat(interactables): user picker component (#3506) * feat(jest): 100% coverage for store/accounts/mutations (#3554) * refactor(scrollbar): spread new scroll component (#3284) * chore(seedPage): added copy button to seed page (#3543) * fix(buckets): initialize buckets separately (#3547) * chore(comment): add comment + minor lint (#3571) * chore(jest): add jest tests (#3569) * chore(lint): lint (#3572) * chore(cypress): fix cypress test (#3573) * chore(cleanup): remove unused markup (#3528) * fix(video): fix toggle video bugs, improve video unit tests (#3490) * chore(jest): add more jest tests (#3574) * chore(locales): update copy * chore(jest): remove not used import on test (#3577) * chore(lint): minor lint (#3576) * feat(jest): fix lint errors (#3587) * feat(userpicker): add chip list (#3552) * chore(jest): update jest (#3596) * fix(call): show avatar placeholder on incoming call (#3556) * chore(cypress): skip test (#3606) * feat(chat): add message when a user adds somebody to chat (#3608) * fix(call): destroy call on decline incoming call (#3558) * feat(jest): 80% coverage for store/ui/mutations (#3616) * feat(jest): 100% coverage for store/ui/getters (#3615) * feat(jest): 100% coverage for store/chat/mutations (#3621) * feat(jest): 47% coverage for libraries/WebRTC/Emitter (#3623) * chore(edit): hide edit message (#3620) * fix(glyphs): prevent glyph drag (#3609) * fix(chat): correct avatar color for DM (#3586) * fix(call): add exit call sound (#3612) * chore(imports): remove not used imports (#3598) * chore(remove): remove not needed stuff (#3622) * fix(call): add sound on end call on caller side (#3614) * fix(double-requests): removed double friends requests (#3590) * refactor(scrollbar): clearing remaining components (#3514) * chore(loading): removed loading screen on chat (#3551) * fix(profile): simplify profile, minor refactor (#3610) * fix(chat): refresh crash error * fix(reply): removed reply to replies (#3626) * fix(friends): name and status overflow issue (#3640) * fix(userpicker): friend name overflow (#3637) * fix(focus-chat): fixed auto focus when entering chat (#3642) * fix(call): fullscreen call search results z index issue (#3641) * chore(cypress): skip test * chore(cypress): minor update * chore(cypress): comment out test * chore(cypress): skip test * chore(cypress): skip test * chore(cypress): comment out test * fix(chat): is active call logic (#3636) * feat(toolbar): add coming soon to group search input (#3658) * fix(profile): add flair color to profile picture upload, change size (#3660) * fix(select): broken select rendering (#3657) * fix(quickchat): improve quickchat/sidebar css (#3588) * fix(toolbar): remove secondary create group modal (#3585) * chore(jest): fix lint errors on SearchQuery (#3673) * feat(jest): 95% coverage for store/friends/getters (#3672) * fix(groupCreateForm): allow enter on name input to create group (#3581) * fix(account): client side validation for user creation (#3639) * fix(cta): svg overflow clipping (#3670) * feat(message): disable emoji/reply in group chat (#3655) * chore(cypress): add commands locally to run tests (#3684) * fix(mobile): bottom nav bar state (#3662) * chore(lint): minor lint (#3685) * chore(profile): hide profile (#3687) * fix(call): add sounds for call (#3644) * chore(update): update locale * fix(onlineStatus): update peer events handlers (#3557) * chore(cypress): comment out test * chore(cypress): skip test * fix(media): change max-width of user name (#3728) * fix(quick): break word (#3719) * feat(jest): 46% coverage for store/chat/actions (#3727) * chore(jest): remove unnecessary arguments (#3725) * chore(cypress): update * fix(sidebar): proper color on sidebar tag" (#3710) * fix(chat): unknown name while loading (#3714) * fix(groups): fix context menu for groups sidebar item (#3723) * refactor(toolbar): refactor styles and increase text overflow length w/ flex (#3721) * fix(files): remove unfinished ux (#3709) * fix(chat): link styling (#3713) * fix(font-family): aligned apps fonts (#3671) * fix(mobile): settings menu toggle position (#3720) * chore(groups): add back click action (#3730) * chore(cypress): add friend test (#3735) * fix(chat): is_typing indicator (#3668) * fix(double-requests): filtered incoming requests (#3686) * fix(state): add on discover event (#3649) * fix(groupChats): add retry to invite search in group creation (#3667) * chore(update): update read me * chore(cypress): minor update * chore(cypress): skip test * fix(userpicker): style & overflow issues (#3726) * chore(lint): minor lint (#3747) * chore(cypress): skip test * Update package.json bump version * fix(download): remove unnecessary local state, fix string bug (#3707) * feat(groupinvite): use userpicker component (#3607) * feat(jest): 97% coverage for store/textile/mutations (#3765) * feat(jest): 100% coverage for store/webrtc/mutations (#3762) * fix(files): make filesystem progress/total size reactive (#3754) * fix(mobile): mobile nav style (#3755) * chore(jest): add test (#3768) * fix(satellitecircle): remove illegible light grey color (#3769) * fix(chat): upload rework (#3550) * fix(media): only flip local video stream (#3770) * feat(select): new keyboard accessible select component (#3669) * feat(jest): 100% branch coverage for store/webrtc/mutations (#3774) * feat(jest): 19% coverage for SharedBucket (#3776) * fix(mobile): settings swiper flow (#3715) * test(cypress): add tests for videocall pair chat (#3331) * fix(sidebar): subtitle text overflow (#3758) * fix(conversation): offline status (#3767) * fix(groupchat): fix for username of unknown users during initial load (#3766) * test(cypress): updates to chat top toolbar tests (#3781) * fix(sendmoney): disabled button prop (#3761) * feat(jest): 97% coverage for store/textile/mutations (#3791) * feat(notifications): add browser alert and notification image (#3538) * fix(friends): online status is hidden if not friend (#3680) * chore(lint): minor lint (#3793) * chore(typo): fix typo * test(cypress): improvements to avoid failure on last test (#3797) * fix(search): only pull results from current chat (#3789) * fix(webrtc): on call track logic (#3790) * fix(reply): hide emojies on threads (#3763) * chore(store): remove unused store (#3787) * fix(select): cleanup select console errors (#3786) * fix(chatbar): change chanbar z-index depend on fullscreen media (#3764) * fix(vscode): default imports to be from project root (#3773) * test(cypress): fixes for chat images validations (#3795) * chore(cypress): remove skip * chore(cypress): remove skip * chore(cypress): remove skip * chore(cypress): remove skip * fix(group): remove duplicated dispatch to storeInMessage action (#3796) * test(store): create mock root state that will automatically keep in sync (#3759) * chore(changelog): update changelog (#3805) * feat(logs): add logs to help monitoring webrtc activities (#3779) * fix(textile): set peer id correctly when switching conversations (#3803) * fix(chat): reaction buttons style and ui (#3757) * chore(cypress): minor update * test(cypress): updates on mobiles and pair tests (#3813) * fix(quickchat): z index fix for quickchat modal (#3814) * feat(jest): 92% coverage for utilities/Messaging (#3815) * chore(jest): remove useless console log (#3832) * feat(jest): 84% coverage for Item.abstract.ts (#3833) * feat(jest): 100% coverage for store/conversation/getters (#3831) * feat(jest): 96% coverage for Item.abstract.ts (#3844) * fix(settings-modal): fixed modal style (#3560) * test(cypress): fixes for text and videocall tests (#3838) * test(cypress): updates to privacy settings tests (#3851) * chore(cypress): add downloads folder * chore(cypress): skip test * chore(cypress): skip test * chore(cypress): skip test * feat(jest): 20% coverage for Thumbnail (#3864) * feat(jest): 19% coverage for BlockchainClient.ts (#3863) * feat(newmessage): use userpicker (#3643) * fix(chat): break word on chat replies (#3841) * chore(cypress): delete * chore(message): remove unused timestamp variables (#3830) * chore(lint): minor lint (#3866) * chore(cypress): update cypress to 10.3 version (#3868) * refactor(slimbar): improve styles and markup (#3826) * fix(friends): prevent 'add friend' picture shrinking (#3842) * feat(friends): can click on a friend and open direct message * fix(search): add markdown to search results (#3840) * fix(notifications): text overflow for notifications (#3839) * fix(user-name-style): fixed name lineheight (#3884) * feat(jest): 100% coverage for store/chat/mutations (#3904) * style(chat): fix scrollbar overlapping with long messages in chat (#3883) * fix(chatbar): control buttons become grey when user cant interact * refactor(mediauser): styling and fix indicator color (#3878) * feat(dragbar): add dragbar implementation (#3860) * feat(friends): friends WIP * feat(friends): friends WIP, env vars * fix(files): keyboard accessible, hit esc to close (#3847) * feat(call): create background call component (#3591) * feat(friends): friends WIP, cleanups * fix(chatbar-mobile): fixed chatbar focus when pressed (#3777) * feat(friends): chat WIP, progress * chore: disable old tests that are failing * feat(friends): chat WIP, ChatManager * test(cypress): fix or skip failing tests (#3892) * chore(githubAction): add iridium label automatically (#3910) * chore(fix): fix github action * chore(update): minor update * chore(update): remove github action * chore: WIP integration * chore: WIP integration - friend request * chore: WIP integration - friend request registration bug * chore: disable old tests that are failing * chore(package.json): add iridium via yarn * chore: fix the build process * fix: update iridium dependency to fix the build * fix(files): fix files embed overflow issue (#3924) * fix(sidebar): add relative timestamps to sidebar (#3926) * feat(chat): friends and chat progress * feat(chat): friends refactor wip * feat(chat): friends requests and chat progress * fix(audio): error handling for missing audio output devices (#3925) * fix(audio): error handling for missing audio output devices * refactor(audio): rename audio variables * refactor(audio): remove console log * feat(settings): add page and section components (#3928) * feat(settings): add page and section components * feat(settings): update settingsunit styling * fix(interactables): volume margin * feat(settings): replace bulma with settings components * fix(settings): remove unused style * fix(settings): typo * fix(settings): remove br tag * fix(select): max-width overflow * chore(webrtc): actions updated with iridium * feat(files): unblock files ui, basic upload and download (#3929) Co-authored-by: Sara Tavares <29093946+stavares843@users.noreply.github.com> Co-authored-by: Sasha Zakablukov <38879804+AlexZakablukov@users.noreply.github.com> Co-authored-by: Jason Woodland <me@jasonwoodland.com> Co-authored-by: Andre Christoga Pramaditya <caxvis@gmail.com> Co-authored-by: Thomas Bosatelli <58808132+ThomBos@users.noreply.github.com> Co-authored-by: Chris Hogan <chris@hogan.io> Co-authored-by: Joe McGrath <33670767+josephmcg@users.noreply.github.com> Co-authored-by: Muhammad Al Juburi <maljuburi89@gmail.com> Co-authored-by: pavlzk <97599870+pavlzk@users.noreply.github.com> Co-authored-by: molimauro <50131258+molimauro@users.noreply.github.com> Co-authored-by: Luis Cardeña <35935591+luisecm@users.noreply.github.com> Co-authored-by: Andrew Ewing <drew@phenocode.com> Co-authored-by: Jeff Kristian <jekrimo@gmail.com> Co-authored-by: vimercati-samir <52865716+vimercati-samir@users.noreply.github.com> Co-authored-by: Mauro Molinari <mauro.molinari@knobs.it> Co-authored-by: Drew Ewing <drew.ewing@satellite.im> Co-authored-by: Nathan Power <Nathan.c.power@icloud.com>

josephmcg added the draft A developer wants eyes on this PR, but they don't think it's ready to merge. label Jun 10, 2022

github-actions bot added the Missing Dev Review A Dev and a Dev Approver need to review the PR, then mark as Ready for QA label Jun 10, 2022

josephmcg marked this pull request as ready for review June 10, 2022 07:03

github-actions bot added the missing fixing conflict Conflict needs to be handled, then re-tested by devs/qa label Jun 10, 2022

josephmcg force-pushed the AP1470 branch from e5af348 to a694823 Compare June 12, 2022 23:46

josephmcg removed the missing fixing conflict Conflict needs to be handled, then re-tested by devs/qa label Jun 12, 2022