Media: Filtering media does not work with uploading assets

[spacedmonkey]

Bug Description

If you filter the media library by image, videos that are uploading still displayed.

Expected Behaviour

Steps to Reproduce

1. Open editor
2. Upload video.
3. Filter by image.

Screenshots

https://user-images.githubusercontent.com/237508/145632762-da883e22-021b-4a44-b000-92c85523ef74.mov

Additional Context

• Plugin Version:
• WordPress Version:
• Operating System:
• Browser:

[swissspidy]

IIRC that was a deliberate design decision to always show uploading items like that.

Likewise, if you are already filtering by videos and upload an image, it should still be visible.

[spacedmonkey]

Reopening as this ticket now valid again. When filtering, uploaded media is lost. See video.

https://user-images.githubusercontent.com/237508/179958667-0df3c40f-76f5-412e-90b9-bd13848ec247.mov

The issue is this line https://github.com/GoogleForCreators/web-stories-wp/blob/77bc376ee9e406bf69e9534fc9d2b72617ae0b48/packages/story-editor/src/app/media/local/reducers/setMediaType.js#L27

Sadly this was missed as part of https://github.com/GoogleForCreators/web-stories-wp/pull/9785.

There is no easy way to work out if a resource is loading, other than to use isCurrentResourceUploading. Which might a problem.

[spacedmonkey]

I have put together a POC for a fix for this issue. https://github.com/GoogleForCreators/web-stories-wp/compare/try/fix-processing-item?expand=1

Basically, add a new processing piece of state, that is a backup for processing items. It even supports media types, but that can easily be removed.

[swissspidy]

@spacedmonkey Separate reducers and state for uploading items is redundant since we already have this information in our useMediaUploadQueue hook. So this can be simplified a bit.

See https://github.com/GoogleForCreators/web-stories-wp/compare/try/9964-prepend-items?expand=1 for a potential solution.

[spacedmonkey]

See https://github.com/GoogleForCreators/web-stories-wp/compare/try/9964-prepend-items?expand=1 for a potential solution.

Looks interesting and I like not replicating state in two places. It's worth noting, in my testing, it did not work. Once the upload finished, the new resource disappeared. Simply moving prependMedia to when the media is finished here.

https://github.com/GoogleForCreators/web-stories-wp/blob/b44192a83fc26ff6c6fd68c4f924ed3db44b8871/packages/story-editor/src/app/media/useUploadMedia.js#L192-L196

To look like this

  useEffect(() => {
    for (const { id, resource } of finished) {
      removeItem({ id });
      prependMedia({ media: [resource] });
    }
  }, [finished, prependMedia, removeItem]);