Pop-up button plugins

IMPORTANT: Is preferred to use the MenuButtonPlugin instead of this type of plugins. The MenuButtonPlugins are implemented using the PopUpButtonPlugin, but they add a lot of functionality, specially for the accessibility. You should only use the PopUpButtonPlugin API if you need to implement a plugin that is not a menu. If you choose to implement a plugin using the PopUpButtonPlugin API, you should be aware that the accessibility of the plugin will be limited, and you will have to implement it manually, capturing the appropiate keyboard events and focus management.

It is a special type of button plugin that displays a popup window when clicked. The operation is much simpler than in the case of button type plugins, because you only have to specify the content of the popup, by overwriting the async getContent() method:

import {
    PopUpButtonPlugin,
    createElementWithHtmlText,
    PaellaCorePlugins
} from '@asicupv/paella-core';
import myPluginIcon from 'icons/my-plugin-icon.js';

export default class MyPupUpPlugin extends PopUpButtonPlugin {
    getPluginModuleInstance() {
        return PaellaCorePlugins.Get();
    }

    get name() {
        return super.name || "es.upv.paella.testPopUp";
    }

    async getContent() {
        const content = createElementWithHtmlText("<p>Pop Up Button Plugin</p>");
        return content;
    }

    get popUpType() {
        return "modal"; // "modal" or "timeline"
    }

    async load() {
        this.icon = myPluginIcon;
    }
}

NOTE: consider to implement your own PluginModule to group your plugins.

Pop up type

get popUpType(): Defines the type of pop up that the button will display:

• modal: The pop up is displayed as a modal area, which is hidden when the user clicks out of it. It will be displayed according to the position defined in the plugin configuration.
• no-modal: Deprecated. Starting in paella-core v2, this option acts like modal.
• timeline: The pop up is displayed above the timeline, and measures the full width of the timeline. The height will depend on the content of the pop up.

In the default implementation of getPopUpType, you can override this property with the plugin configuration, using the popUpType property:

{
  "plugins": {
    ...
    "es.upv.paella.myPopUpPlugin": {
      "enabled": true,
      "popUpType": "modal",
      "side": "right"
      ...
    }
  }
}

If you override the get popUpType() property, you will not be able to use the popUpType property in the configuration. If you want to preserve this behavior, you can use the getPopUpType() method to get the value of the configuration property:

get popUpType() {
    return this.config.popUpType || "timeline";
}

Refresh content

In general, the pop up content is only generated once, although it is sometimes reloaded due to changes in the player state. If the content needs to be reloaded, the refreshContent property of the plugin can be used to reload the content the next time it is generated. This property causes the content to reload the next time the user presses the plugin button.

import {
    PopUpButtonPlugin,
    Events,
    bindEvent
} from '@asicupv/paella-core';

export default class FrameControlButtonPlugin extends PopUpButtonPlugin {
  ...

  async load() {
    bindEvent(this.player, Events.TRIMMING_CHANGED, (evt) => {
      this.refreshContent = true;
    });
  }
}

Breaking changes from Paella Player 7

The pop ups API in Paella Player 7 was getting too complex, and there were very few plugins that were using it, in favor of other lightweight frameworks like Preact, or even more complex frameworks like React or Svelte.

For this reason, in Paella Player 8 the entire popup API has been removed and now this type of plugins only serves to provide the types of windows that cannot be generated by other frameworks: i.e. menu type popup windows, and timeline type windows.

If you need to migrate a plugin from Paella Player 7 to Paella Player 8 in which you were using the floating popup API, the method to follow is to use a normal ButtonPlugin and use the call to action of the button to open a window using another framework.

If what you need is simply to open a dialog, I suggest you use the standard Dialog HTML API. In the case of the standard Paella Player plugins we have done it this way with better results: the code is simpler and it is also standard.