feat(file-picker): iOS preparing video progress

[massimoliani]

Hi,

We are using file picker to pick media files (video and picture).

In a previouse version we use the html input file to select media files from an iOS device and iOS on some file let show a progress dialog for preparing file. Now we are using the file picker with capacitor 4 (to have native path) and on iOS we can't see anymore the system progress dialog box.

I add a spinner starting at file picker call and ending at then or catch of the picker promise, but I can't show any progress percentage.

Is there a way to enable in file picker the system progress dialog?
Or to have a call back about preparing progress?

To show to final user the app is not blocked and is going on preparing file will be fine to avoid user to stop the app thinking to the app blocked.

Thank you in advance.

[robingenz]

Thank you for the feature request.

Is there a way to enable in file picker the system progress dialog?

Unfortunately not. To be honest, I've never seen it before (or I didn't notice it). Can you share a screen recording?

Or to have a call back about preparing progress?

I definitely plan to implement this but it is not the highest priority at the moment (sponsoring the issue would be possible) as there are still some bugs.
For now I recommend showing a loading box without a percentage until the promise is resolved.

[kyleabens]

@robingenz I'm currently having this issue now where say I select 4 videos (each around 10 seconds long). The picker dismisses and then it take a while for await FilePicker.pickMedia to resolve. For now I'm just adding a spinner during this time but I noticed that when selecting images/videos via an html input type="file" on iOS, it displays a preparing loader within the picker and then dismisses. Wondering if it's possible to do the same or if there is a way to speed this up.

[robingenz]

Wondering if it's possible to do the same

As i said I definitely plan to implement this but it is not the highest priority at the moment as there are still some bugs.

or if there is a way to speed this up

Unfortunately not.

[massimoliani]

Unfortunately it look like the privacy enforcement of iOS return a virtual url and the copy to temporary file at the end of file picking is the only way to get access to native file. Unfortunately native file manager has no progress callback. I try to access directly to the returned url but it doesn't work, url doesn't exist. Finally I think the first implementation I did using html input file and saving native file in chunk is the best possible solution for iOS, for android OS the plugin is really nice and working really well. This time iOS and it's privacy enforcement win against our apps, all example from apple are about using picker selection directly in a swift object.. Thanks Robin for the really good job you did. *--------------------------* dr. *Massimo Liani* Goooled s.r.l. Via Torricelli, 26 33080 - Porcia - PN tel:3884484284 Il giorno sab 28 gen 2023 alle ore 15:38 Kyle Abens < ***@***.***> ha scritto:

…

@robingenz <https://github.com/robingenz> I'm currently having this issue now where say I select 4 videos (each around 10 seconds long). The picker dismisses and then it take a while for await FilePicker.pickMedia to resolve. For now I'm just adding a spinner during this time but I noticed that when selecting images/videos via an html input type="file" on iOS, it displays a preparing loader within the picker and then dismisses. Wondering if it's possible to do the same or if there is a way to speed this up. — Reply to this email directly, view it on GitHub <#12>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEC6WKEEKZUXBNILX2OZC63WUUVM3ANCNFSM6AAAAAAUHWA3NE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mesqueeb]

would be best if this "progress" could also include the time it takes for files offloaded from the phone & only available in iCloud take to download before they get copied over to the app's storage.

This issue might be a solution to capawesome-team/capacitor-file-picker#92 as well.

[robingenz]

There is now a new pickerDismissed listener that may already help some of you.
It will be called as soon as the picker modal disappears. You can then display a hint to the user until the promise is resolved.
The PR is still open, but there is already a dev build: capawesome-team/capacitor-file-picker#93

[skmbr]

I'd love to see this behaving the same way as Cordova. I'm currently migrating to Capacitor and was actually surprised this wasn't the same, as the "Converting..." progress bar appears to be native ios.

Without it, even with a spinner, the app feels much less responsive and I'm worried users will think it's frozen if they've opened a large video that takes 30 seconds or so to process.

Here's a video of how it behaves under Cordova using cordova-plugin-camera:

https://youtube.com/shorts/XvtaOKijLRY

[skmbr]

Just wondering if this is something that is likely to be added any time soon?

I've implemented a loading spinner using pickerDismissed as suggested, but I've already had two beta testers report "bugs" along the lines of "gets stuck on loading spinner when I open a video".

In both cases it turned out that they were opening large videos that took over a minute to process, but were giving up because they thought nothing was happening. :(

I notice on Android that there is still a "Processing" progress bar when opening a video.

[robingenz]

@skmbr I'm really busy this year until the end of August and won't be able to work on this issue until then. PRs are welcome and will be reviewed. I definitely plan to resolve this issue this year.

[massimoliani]

@skmbr I add a spinner before opening the picker and then the spinner stop when the picker close.

Before using the plugin I used HTML input file and then write the file to a local app folder to use as native file and be able to use whenever I need especially if the app is restarted.

The implementation for the plugin in iOS returned filenames thatr are copy of original image/video in a local app folder, so you can reload it after restarting the app.

On android the result filenmes are content:... style that are avaiable only during the app session, when restarting are no more avaiable. Is like using HTML input file.

Both Android and iOS implement privacy rules to avoid accessing directly to user media.

@robingenz could be possible to add a filesystem copy on Android too, like the iOS implementation? to have the files usable also after a reload of the app?

[robingenz]

@robingenz could be possible to add a filesystem copy on Android too, like the iOS implementation? to have the files usable also after a reload of the app?

Yes, there is already an issue for that: #13

[skmbr]

@robingenz Sorry to be a pain but I was just wondering if end of August is still looking probable for looking at this issue?

On average I'm now getting around three people a week contacting me about opening videos "not working" that all turn out to be because they aren't waiting long enough (at least those who get back to me!) but worse is that I've had several negative app store reviews from people saying opening videos "no longer works".

Is there any way I could immediately find out the file size of the video being opened and then maybe I could estimate how long to animate a fake progress bar for?

[robingenz]

@skmbr Yes, I'm still trying to look at it in August but I can't promise I'll find a fix right away.

[skmbr]

@robingenz Ok, thanks for the update! :)

[AdlerJS]

@skmbr - I actually had the same issue and was able to solve it by reworking how I handle videos during my "upload process" as I was having the same issue with the videos taking forever to be picked. I'll try and write my steps below in detail:

1.) Add skipTranscoding: true. This is a huge performance gain that off the bat will most likely 10x your performance
2.) Added the second block logic after fetch. Previously I was transcoding and then reading the entire blob into memory via fetch but now I only fetch the blob once the user hits "upload". For my preview UI I just use this now

   const { files } = await FilePicker.pickMedia({
        multiple: true,
        skipTranscoding: true,
      });

               const filePath =
             file.mimeType === FILE_CONTENT_TYPES.HEIC
               ? await FilePicker.convertHeicToJpeg({ path: file.path })
               : file.path;

           const mimeType =
             file.mimeType === FILE_CONTENT_TYPES.HEIC
               ? FILE_CONTENT_TYPES.JPEG
               : file.mimeType;

           const nativeSource = Capacitor.convertFileSrc(
             filePath?.path || filePath
           );

           return {
             thumbnail: nativeSource,
             name: file.name
               ? file.name.replace(new RegExp('.HEIC', 'i'), '.jpeg')
               : null,
             type: mimeType,
             size: file.size,
           };

[skmbr]

@danbunkr Thanks! skipTranscoding sounds ideal!

Unfortunately I'm not sure I've managed to get it to work yet. I've updated the plugin to 5.1.0 and am adding the option to pickVideos() but a side by side comparison opening the same 20 second video with and without the skipTranscoding option doesn't seem to show any difference, both taking about 10 seconds. :(

The docs only mention HEIC. Do you know if this should also apply to videos?

My code (within a vue.js/quasar app) looks something like this:

this.$FilePicker.pickVideos({ skipTranscoding: true })
  .then(video => {
    this.video = Capacitor.convertFileSrc(video.files[0].path)
  })
  .catch(err => console.log(err))

[robingenz]

I am currently working on this issue and can finally reproduce the it. My mistake was taking an mp4 file that I had downloaded. I can only reproduce it when I select a video that I took with the Camera app on iOS.

Also, I can only reproduce the issue when I set skipTranscoding to false (related to #42). If I set skipTranscoding to true, then the Promise is resolved immediately and i can access the file, see the following video.

Therefore it is not planned to implement a progress bar at the moment, since I assume that the actual issue was the waiting time. With the next major release I will set skipTranscoding to true by default. However, I am open to other ideas and PRs are also welcome if someone comes up with a better solution.

[skmbr]

Hi @robingenz

Thanks for the update. That seems totally fair.

I've since had another go with updating the plugin and skipTranscoding does now seem to do the job nicely so, as you say, with the waiting time gone the progress indication becomes much less important.

Thanks for all your help!

[AdlerJS]

@robingenz only issue with the skip transcoding true I've ran into since implementing it is that when you upload a file on IOS with skip transcoding true when you go to generate a thumbnail on Android it won't work due to the video itself not been long transcoded to work cross platform

[robingenz]

@danbunkr Thanks for sharing! I did not know that. Feel free to create a separate issue where we can discuss possible solutions. Maybe we could add a new method, similar to convertHeicToJpeg(...). A reproducible example with a demo file would be good.