torchbox/wagtailmedia

MediaChooserPanel tabs not populating

jhnbkr opened this issue · 7 comments

jhnbkr commented

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

  1. Integrate wagtailmedia into project
  2. Add a ForeignKey field with type Media to any Page
  3. Include MediaChooserPanel in Page.content_panels
  4. 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

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

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

Apologies, this information may be pertinent.

  • 👍1
jhnbkr commented

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
Screen.Recording.2022-08-24.at.5.24.29.PM.mov
zerolab commented

🤔 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

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 #170

zerolab commented

Fixed in #170