Easiest way to add button in plugins

[JohnXLivingston]

Describe the problem to be solved

If we want to add button under videos in plugins, there is currently no easy way:

• there is no placeholder
• if we use the action:video-watch.video.loaded hook (so we can get the video object), and add buttons before the my-video-rate component (for example), it is too soon, and the buttons will be removed from the DOM
• there is no helper to easily add custom buttons

The easiest working method I found is:

registerHook({
    target: 'action:video-watch.video.loaded',
    handler: ({ video }) => {
      setTimeout(() => {
        const openButton = document.createElement('a')
        openButton.textContent = 'Open'

        const placeholder = document.getElementsByTagName('my-video-rate')
        placeholder[0]?.before(openButton)
      }, 100)
    }
  })

Describe the solution you would like

I see two solutions.

1. Placeholder + Hook

Create new client placeholder elements:

• one before all other buttons
• one after
• one just after the my-video-rate component
• ...

Add an action hook called just after the buttons are inserted in the DOM, so we can add our custom buttons safely.

2. A client helper function

Add a registerButton helper function. So that plugins can add buttons.
Here is what it can look like, from the plugin point of view:

registerButton({
  target: 'video', // we could have several available targets: video, playlist, admin_user_list, admin_comments_list, ...
  isButtonHidden: (user, video) => return false, // optionnal function to show/hide the button depending on the current user and current object/context
  label: 'Open', // optional label
  icon: 'open', // optional icon (TODO: how can a plugin add icons? Should this be a CSS class name?)
  title: 'This buttons open something', // optional button title
  position: 'action_dropdown', // a list of standard positions (left, after my-video-rate, in the `...` dropdown, ...). TODO: name these spots.
  priority: 12, // optional priority, so we can order the buttons relatively to other plugins buttons (or relatively to other buttons in the dropdown for example)
  href: 'https://...', // optional  
  handler: () => alert('yes'), // optional
})

[Chocobozzz]

I think 2. is better so you can also add entries/buttons to video dropdown (available in videos list, admin videos overviews etc). But it will require more work

[JohnXLivingston]

I think 2. is better so you can also add entries/buttons to video dropdown (available in videos list, admin videos overviews etc).

I agree!