avtomon/player.js

There is no license information available for the latest version (dev-master) of this package.

TypeScript/JavaScript player

dev-master 2020-11-16 11:21 UTC

Requires

• avtomon/good-funcs.js: dev-master

Unknown License

README

Viewer on pure JavaScript. At the moment it can display video, graphics and books in PDF format.

Installation

composer reqire avtomon/player.js

Description

The module requires an HTML block with one of the predefined classes:

• video - video player will be created;
• image - image viewer; book - the viewer of books in PDF format

If there is such a block, it is very easy to create a block:

Suppose that such a block is:

<div class= "video" ></div>

then the code for creating the player object in the simplest case:

let player = new Player (document.querySelector('div.video'));

The second parameter of the constructor can be a configuration object-the object implementing the following interface:

interface IPlayerOptions {

/**
     * Path to file with styles
     */
    readonly styleFilePath?: string;

/**
     * Select the first item when initializing the player
     */
    readonly activate?: boolean;

/**
     * Class of viewing unit
     */
    readonly mainWrapperClass?: string;

/**
     * Class block preview
     */
    readonly imageWrapperClass?: string;

/**
     * Width of the scroll buttons
     */
    readonly scrollButtonsWidth?: number;

/**
     * Error of click on scroll buttons
     */
     readonly scrollButtonsPadding?: number;

/**
      * Images with this class are not loaded into the player
      */
      readonly imageStopClass?: string;
}

Each resource loaded into the viewer has a preview in the form of an image. Actually, in the form of images, new elements are added to the player and then converted into an internal format.

You can add elements to the player in the following way:

player.addItem(image, true);

Elements are always added in the form of the HTMLImageElement object, which should contain the necessary most were:

• src - image path;
• title - name of the downloaded resource;
• data-object-src - path to the resource that represents the image (link to video, picture or book).

and may contain optional attributes:

• data-type -this attribute can be used to specify an optional resource type if you want to divide resources by types.

This creates <span> elements with the back attributes + by default, the class attribute is set to img the internal HTML code will be:

<I class= "material-icons" >close</i>

if you use the library materializecss, then such a markup element will add a player element delete button.

The second parameter specifies whether to move to the added element of the same tale after adding or not.

Delete items:

deleteItem(index);

where index is the index of the deleted item in the player.

If supported by the module unit at the time of initialisatie player already contains the image with necessary attributes, they are automatically added to the player, with the exception of those that contain the class specified by the Directive imageStopClass configuration of the player (IPlayerOptions), the default class is no-image.

note: If you plan to develop the project yourself and build it with the script build.sh you will need to install < b>Gulp and its plugins specified in the script init.sh in the global scope, and why run the script init.sh for linking. Or install all dependencies directly into the project.

Method documentation