MediaChooserPanel tabs not populating

jhnbkr commented 2 years ago

Issue Summary

MediaChooserPanel opens model but tabs are empty.

Screen Shot 2022-08-02 at 7 26 42 PM

The following error is thrown in the console.

media-chooser-modal.js:59
Uncaught ReferenceError: initWMTabs is not defined
    at Object.chooser (media-chooser-modal.js:59:9)
    at t.loadBody (modal-workflow.js?v=1c972f80:1:1795)
    at t.loadResponseText [as success] (modal-workflow.js?v=1c972f80:1:1659)
    at c (jquery-3.6.0.min.js?v=1c972f80:2:28280)
    at Object.fireWith [as resolveWith] (jquery-3.6.0.min.js?v=1c972f80:2:29028)
    at S (jquery-3.6.0.min.js?v=1c972f80:2:79900)
    at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js?v=1c972f80:2:82368)

initWMTabs is available in the global scope. If manually called from the console after opening the panel, the next time the panel opens it works as expected.

Steps to Reproduce

Integrate wagtailmedia into project
Add a ForeignKey field with type Media to any Page
Include MediaChooserPanel in Page.content_panels
Migrate, run and observe chooser in admin

Technical details

Python version: 3.9.10
Django version: 4.0.6
Wagtail version: 3.0.1
wagtailmedia version: 0.10.1
Browser version: Chrome 103.0.5060.134 (MacOS)

zerolab commented 2 years ago

hey @jhnbkr I am afraid I cannot replicate this neither with bakerydemo, nor running tox -e interactive with tox.ini's interactive target updated to interactive: wagtail>=3.0,<4.0

jhnbkr commented 2 years ago

I should add this specifically happens when using either AudioChooserBlock or VideoChooserBlock in a StreamField.

Apologies, this information may be pertinent.

jhnbkr commented 2 years ago

I have been able to isolate a potential issue.

By default our project uses STATICFILES_STORAGE=storages.backends.gcloud.GoogleCloudStorage (via django-storages).

If I configure STATICFILES_STORAGE=django.contrib.staticfiles.storage.StaticFilesStorage the issue is resolved. However, we cannot use this in production.

initWMTabs is defined in wagtailmedia/js/tabs.js which appears to be retrieved asynchronously when the chooser modal is invoked. I can see in my network requests tags.js being retrieved. At the same time wagtailmedia/js/media-chooser-modal.js attempts to invoke initWMTabs, which is not yet available.

If you close and reopen the modal the issue resolves itself.

Do you have any suggestions to harden this dependancy and ensure initWMTabs is available in this situation?

jhnbkr commented 2 years ago

https://user-images.githubusercontent.com/1168288/186526584-ca0e6e96-e853-4ef2-aad3-a876cc3a0bef.mov

zerolab commented 2 years ago

🤔 off the top of my head, will need to look at deferring initTabs to DOMContentLoaded or similar.

Perhaps a preload link will help

jhnbkr commented 2 years ago

Using a preload link did not relieve this issue.

I suggest we move when/where the tabs.js script is included to the widget itself.

See PR https://github.com/torchbox/wagtailmedia/pull/170

zerolab commented 2 years ago

Fixed in #170

torchbox / wagtailmedia