Custom Module Example

In this tutorial you will create a custom center panel module for the core player that displays a single link to the selected asset's dzi (deep zoom image) file.

The final module example-filelinkcenterpanel-module.

Create a new directory example-filelinkcenterpanel-module in the player project's src/modules directory.

Add new files filelinkCenterPanel.ts and css/styles.less.

Let's examine filelinkCenterPanel.ts. You can see that a number of modules are imported, baseCenter imports the base centerPanel class in coreplayer-shared-module. This file sets up $title and $content elements to place the asset title and contents in. The resize() method (triggered by the baseView class which this extends) takes care of scaling the $title and $content elements to fill the available vertical and horizontal space.

Back in filelinkCenterPanel.ts, we can see that a JQuery property $link is created and appended to $content. The title is set by calling this.extension.provider.getTitle(). The extension's provider can be accessed from within a module via this.provider which itself is set in the baseView class.

add click event that extension listens for. add to extensions.config. add file links to example repo.