How to disable photo button in Video widget in uploadcare

[Abhishek-pa]

I have a query that while selecting the camera option in video widget in upload care there is also the photo button on right side of the widget. I want to disable that button. Can anyone please guide me on this. Help will be apreciated

[optlsnd]

You can hide the button with CSS

.uploadcare--camera__button_type_capture,
.uploadcare--camera__button_type_photo {
  display: none;
}

[Abhishek-pa]

It's not working because i have 2 widgets in my data-page , One is image wieget and another is video widget. Class of video widget is .uploadcare--button uploadcare--button_primary uploadcare--camerabutton uploadcare--camerabutton_type_capture and this is inside another class .uploadcare--camera__controls.. Css is not working on this

[optlsnd]

You'll need to use some JS and a CSS variable if you have two or more widget instances on a page.

The CSS part:

:root {
  --photo-btn-display: inline-block;
}

.uploadcare--camera__button_type_capture,
.uploadcare--camera__button_type_photo {
  display: var(--photo-btn-display);
}

The JS part:

const root = document.querySelector(":root");

const videoWidget = uploadcare.Widget("#video-widget");
const photoWidget = uploadcare.Widget("#photo-widget");

photoWidget.onDialogOpen(() => {
  root.style.setProperty("--photo-btn-display", "inline-block");
});

videoWidget.onDialogOpen(() => {
  root.style.setProperty("--photo-btn-display", "none");
});

Check out a live demo here https://codesandbox.io/s/dynamic-widget-styling-with-css-variables-1ro9wv

[Abhishek-pa]

Thanks a lott..