[$16000] Feature Request: App should play the uploaded videos inline - reported by @murataka

[mvtglobally]

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:

1. Open any chat
2. Send a video file
3. Try to play video in chat

Expected Result:

App should play the uploaded videos inline

Actual Result:

User has to download video to play

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.39-1 Reproducible in staging?: Y Reproducible in production?: Y Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL: Issue reported by: @murataka Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1644125263019529

View all open jobs on GitHub

[JalalMitali]

it's a native component written in pure Kotlin and now working on Swift

[JalalMitali]

it's a native module that's exported to React Native so should I keep working ?

[stitesExpensify]

@roryabraham @marcaaron Does this seem like a viable solution to you? I haven't worked with native components before. If we could do this without making any backend changes, which it seems like we can, then that would definitely be preferable to the original solution. I'm just not sure if writing our own native video players is sustainable

[roryabraham]

Overall this feels like a really big product change to do without a design doc. It looks like some of the react-native video player libraries:

• https://github.com/cornedor/react-native-video-player
• https://github.com/react-native-video/react-native-video

Are not super actively maintained or well-documented. That said, I think at least we'd want to test out some of the existing options first and weigh the pros/cons carefully. If we were going to write our own video player library, then I think we'd want to put it in a separate open-source repo and publish it to npm

[marcaaron]

I agree with @roryabraham on this. Maintaining our own native module sounds like something we would decide to do after establishing there is a clear business need to get this working and we have exhausted all the available open source options.

Speaking of options, I'll also toss expo-av out there. It seems to be fully cross-platform out of the box (full disclosure: I have no experience with this particular topic at all, but expo stuff seems reputable).

https://docs.expo.dev/versions/latest/sdk/video/

Maybe someone can get some examples (videos of videos playing inside our app) and give an estimate of roughly how much code we would need to be adding, reviewing, etc.

[JalalMitali]

@marcaaron please allow me to do this :)

[jeet-dhandha]

I tried with the react native video and creatElement from react-native-web for video tag Success on iphone and android but web no success. Will need to try this expo-av, will let you know tomorrow. Plus i have no success on storing video locally on web, in android/ios blob works fine but not for web.

[jeet-dhandha]

Fetch don’t work as expected on web throwing an error of cors policy, on downloading file.

[JalalMitali]

expo-av is working well on iOS

[JalalMitali]

here you go it's working on iOS I will be testing android, web and desktop soon

[JalalMitali]

I just tried to send a video from new.expensify and I am getting this error ! ? Attachments must be one of the following types: jpg, jpeg, png, gif, pdf, html, txt, rtf, doc, docx, htm, tiff, tif, xml

[gladiator-1]

Expensify videos not working on AVKit, so I don’t see creating an external lib from scratch or using expo-av will solve the issue because Sure they are using AVkit behind the scene.

https://user-images.githubusercontent.com/102553449/183646911-7c7a0f81-71b1-41a9-b581-8537499d4dc6.mp4

I think we can use one of the following solutions:

1. The optimal one is fixing the backend issue we mentioned earlier.

2. If you are ok with downloading the video file and playing it locally, we can enable cross-origin requests on the back-end, then we can download and play the video. (I don’t know how it will look like with big files) .

[JalalMitali]

expo-av is throwing many errors on web/desktop and it's simply not working on android ( on my side )

[JalalMitali]

@gladiator-1 how did you upload the video I am not able to do so!

[gladiator-1]

@JalalMitali it is an old video.

[JalalMitali]

oh I see is there any way I can use that sample video link of yours to test please

[gladiator-1]

URI: 'https://www.expensify.com/chat-attachments/1036865749/w_2c78004c4f58aa9c1bd8c388caa9cc0bb121e694.mp4?encryptedAuthToken=wAzoo4WqqkPREelH35UJpCuhWE1TJuYcS9OnD8EUuJ7GzuSLYzrdbLxepsYpDnX4KWr1eFki2tP2Q%2BAWYE7rZwfQLoFDXxtWpMFT0MAFz9iPaVverbNzjMb4GcMT%2FRUGGpwxXvOqnWaNYbNuOUVZPEHuIbCXh9b4SYGHsg3Uhr%2Bvd%2Bp1%2FeDSJtg4dnNDrZGjWNnDnFuCAUps2SOssWsL6zITjDyaULwua9rlosOA5zfSOV2lcviN5VJzYU98V5I%2B3GZJmWx26UNdTbkCV7X9ZIdKo6QwCn26u82UTd0Ak0aoR8a7sewO%2BSD%2Fcp8SCxpkcSoZ5%2FIpwXzTI0bqGTBJ1Yrghl3UfXu6gIEQpLKbwi42EPcBl%2FQiqXAZBY%2BBZRf%2BmyM1YVVXSPOjcDKVs4w%2B6NS9nd9FDD52Fg3td26Yr1RkU14gVo5raTH%2Be7eBQJKWIlW8OQs1kjyTsJu5QvtgQTnX8VK3WyWyJCKSVH4LmvcPXwxMPr5I33YaSmLZOoebxnL0F4oCfFUi3GRMGFIucrpi1bzBuySKISrFtf6iKN8BooGCa0mNj2iXi5MymA2N2RdB2Zyp6VEmqfGFXiBzapdQ1Ff2fHb5aku%2B%2FrJvOZEZcm6XIvwG%2Fqa7PDuhfHyZ%2FQ%2BCF7j61JQeHb%2FP9aTHTZa9dKomwtAOKo9w1LGvuHyXycyFVh4Ho7lop81Grm7rf5gHwHARjKLwPf7vp6JMMsvn1%2Fjn8CxoTyRyuPOk3U%2B6tE4rowk%2Bq5gpe1URwSZVChnNngeFexhEVQoAAlNMT6Swo2t5C3Pxdg%2B8eV03hpntmTSJ4JNUBtRPFF0ydwyT56MnC99eEybf%2BvEeWXMu2GnXPZ%2F45ekwJ5XbydHp44n9P1fuCQR%2Fb%2BEusY5DsQhIzccqBmmX8eqDCOLD%2FxFH0eyxlhVnMrUEaqbLMThwdXwnYeuh5tgAqmDefn2LztygCi6IP3ScX6vmjME%2FHxwmxQ%3D%3D' it gonna expire after a short time about 10-15 min.

[JalalMitali]

thank you so much my friend!

[mananjadhav]

@stitesExpensify I've been thinking of this. It seems the issue requires backend change because we aren't able to partially play the video. But if we are planning to store the attachment on first load here https://github.com/Expensify/App/issues/6527 then do you think this use case is still valid?

I've been also exploring a FE only solution I feel react-native-video should solve our purpose, but I haven't really got time to implement and check.

[JmillsExpensify]

@roryabraham @marcaaron I agree. I think we've had a good go at this but we still don't have a clear path forward. Plus, we have so so many many core platform improvements to get out for the core messaging experience (emoji shortcuts, improved markdown, etc. etc.).

Maybe someone can get some examples (videos of videos playing inside our app) and give an estimate of roughly how much code we would need to be adding, reviewing, etc.

Then as much as this sounds compelling, I'm nevertheless inclined to close this issue and re-open at a later date when the product is more mature. Clearly, getting this right is going to require extensive planning. It's really more than finding the right library.

[gladiator-1]

@JmillsExpensify I was assigned to add this feature two months ago, I spent about 13 days implementing it and completed it here, closing the issue without at least reviewing what I achieved means erasing my effort.

You could test what I built on the development or staging and if you are satisfied with the result you should get it if not I don’t have any problem you can go without paying anything.

For the backend issue, I deployed a DigitalOcean App does what your backend suppose to do, DigitalOcean Apps support horizontal scaling so you don’t have any scaling issues, it is simple and cheap( $12 / Month ) you could continue with it later if you would prefer.

For privacy, you will manage the account during the testing stage, We can coordinate it via Slack (my email: gladiator.123@hotmail.com), and in a few days, you will be able to play videos in your App.

[JmillsExpensify]

@gladiator-1 @mananjadhav thanks for the patience this issue. We're discussing internally how to fairly compensate for this issue. I'll be in touch soon with an update.

[JmillsExpensify]

@gladiator-1 @mananjadhav thanks both for your patience. The long and short of it is that I'm going to issue full payment to both of you. Expensify created this issue and asked contributors to suggest proposals, at which point @gladiator-1 was hired, provided a solution and pointed to a backend issue on Expensify's end. For his part, @mananjadhav worked with @gladiator-1 in reviewing that proposal and helping us get to this point. Basically you both filled your end of the bargain, we're going to make sure we do the same.

Thanks so much both of you all the work to get here, even if we're not going to use the code or merge a PR just yet. We'd love to keep in touch and work together when the backend improvements arrive, and when videos in general are a higher priority for Expensify/App. Thanks again!

[gladiator-1]

@JmillsExpensify Thank you so much for your appreciation and concern, I can’t thank you enough I’m really grateful, It is a pleasure for me to work with you, and looking forward to working with you again.

Thanks.

[JmillsExpensify]

All contributors have been paid so I'm closing the issue. Thanks!