It seems like your current table is a cluster of right click functionalities per column , links, buttons and dropdowns.
I would assume that there is no structure or logic as to where actions are placed.
So I would advise you to first look into structuring your actions.
After that you can look into how you want to group them.
1. Action per column
Drawers are usually used for navigation purposes and within the context of mobile apps. They make sense in that case as they are accessible to the user at all times to quickly navigate to other parts of the app.
Navigation drawers are recommended for:
Apps with five or more top-level destinations
Apps with two or more levels of navigation ...
According to research conducted on side drawers, though for mobile. The results are that it could cost you half of the user engagement.
Even based on my personal UX review, I will conclude that having a dismissible interface like a side drawer within your context of the user action may not be ideal. Why? Semantically, a side drawer is not used for such ...
I was having this problem with low contrast text causing my site to fail accessibility audits. The element in question was part of an inactive user interface component, and therefor an exception to the contrast rule, but it was still getting caught by the accessibility audit.
By adding aria-disabled="true" to the element in question, I was able ...
We assume a lot of things when designing a user experience. The video player being used is not mentioned but I would test the page in two variants and compare the page load times to see what really is working for your webpage using https://www.webpagetest.org/
Embed video player directly without the fake image appearance and test the page load speed
Since the message box already explains the error, the Try later can be embedded within that message.
I'm not sure what all the possibilities of errors where you would need to use that message box are, but "Okay", "Got it" or "Close" will cover all use cases where you need to show a secondary action button after an error message description.
For instance, ...
Aline has a great link to research in his answer. I'll add that if the icon is on the left, you leave the right side available to add a downward pointing arrow to indicate a dropdown menu. Additionally, after some digging, I found way more examples of icon on the left than on the right:
According to the article Where to Place Icons Next to Button Labels, from UX movement, the icon should come first:
Eyetracking research has shown that users scan from the left in a vertical movement. In order for icons to serve as a visual scanning aid, users need to see them before they see the button label. Placing them to the left of your button label ...
I answered something very similar not long ago:
Should disabled buttons give feedback when clicked?
Basically this is a viable solution as well, add an extra element on top of the disabled button, making it clear that there's more to it than just a disabled state:
Since you want the user to be aware of when the button can be used, you can do a few things:
Add a text explaining that and why submitting is not possible yet. But you probably have no space for that.
Let users discover themselves that the button can not yet be used. Thus stick with the normal button, it is the only way to be sure users are going to click ...
If not for the fact one must press play twice (with perhaps a bit of wait in between presses as the actual player control strip renders), then there wouldn't be a significant detriment to usability. The benefits of this approach are:
custom background thumbnails can be supplied out-of-band from the video, i.e. the background thumbnail does not have to be ...
Two thoughts come to my head if I understand your question correctly. Both of these are using other Material UI components.
If you need to allow the button to be clicked, have the button not disabled and on click, have a snackbar give the message to the user.
If you can disable the button but want to give feedback on why it is disabled, use a Popover ...
I had to solve a similar problem recently. I had to turn all components in a screen read-only. Not disabled, but read-only, where user could interact with all values in the components, but not change it. The approach we took with buttons was:
For web: on hover, the mouse cursor changed to the not-allowed state, with a tooltip informing the user why it was ...