Error is thrown when initial screen is disabled and theme is "modern"

[eduardoportilho]

Issue Description

When ZiggeoRecorder is rendered with the properties allowrecord={false}, allowupload={false}, and theme="modern" an error is thrown and the component doesn't work. When theme="modern" prop is removed, the component works as expected.

Context

My company is integrating Ziggeo into a web app with the following requirements:

1. Only uploading videos is allowed (no recording)
2. A file "drop-zone" component (example) should be used to select the file and we don't want to show the initial Ziggeo component screen (the one with "Record Video" and "Upload Video" buttons)

Here is our approach to achieve that:

1. We render a file dropper component
2. When the user selects a file, we render ZiggeoRecorder with allowrecord={false} and allowupload={false} in order to hide the initial screen.
3. Once ZiggeoRecorder is initialized, we use the JS API to call upload_video(file) and then Ziggeo handles the rest

Steps to reproduce

1. Clone this fork of react-ziggeo: https://github.com/eduardoportilho/react-ziggeo-uploader-modern
2. Run the demo app as described in README (add API_KEY to src/constants.js, npm install, and npm start)
3. On the app, choose a video file and check the error in the console

This problem happens only with theme="modern", so if the line where it is passed is commented, the component works as expected.

[eduardoportilho]

@Bane-D @sambua any updates on this?

[sambua]

Hi @eduardoportilho it's really weird to facing this issue on modern theme only. I've tested it with your repo and could reproduce it, but still couldn't be able find solution.

Will try to find solution and let you know results. Sorry for the delay.

[sambua]

Hello @eduardoportilho , we figure out what was a reason, we made required changes but it can take some time to be applied to a new release.

For now a way you can use is to use different theme, use at least one option like allowupload or wait until new release. We want to find some other way to be able you use it via some workaround, but unfortunately couldn't find.

Reason why it happens in only in modern theme it's try to show icon which user set as true, as here no options are selected it's provide error.

[eduardoportilho]

Hello @sambua, thanks for your response. My team's designer doesn't want to use a different theme as modern is a better match with our UI. I have built some workarounds to avoid this issue but it would be nice to see it fixed. Can you update this issue once you deliver a fixed release?