@fishawack/lab-js

Background

What

A project-agnostic utility library, providing utility functions while also standardizing/abstracting common pieces of functionality.

Why

To keep code DRY and avoid unneeded time-wasting due to rewriting existing functionality.

Getting started

Install

npm install @fishawack/lab-js

How To Use

import * as LabJS from '@fishawack/lab-js';

Another option is to destructure the component from the library (Webpack can then treeshake any unneeded code in its bundling):

import { Wave } from '@fishawack/lab-js';

Components

Wave

What

Abstraction of Wave's basic functions. More specifically, it will convert XML into JSON (using the format we've commonly received in the past), generate slide start and end times and map chapter indexes and start times defined in its config, storing it on the wave player itself.

Setup

Property	Type	Definition
chapters	array	Contains objects with label and stamp properties. label (string) – the name of the chapter. stamp (number | string) – the timestamp (e.g. '00:01:30') or index of a slide (e.g. 6; index requires data to be defined).
data	string	Link to XML or JSON to parse and attach to Wave instance
element	string | node	Selector or DOM element that Wave will attach all of its events to
events	object	Contains labelled object that correspond to events, providing options to trigger functionality before and after the event fires.
video	object	Contains default configuration for video including the selector (or DOM element) for the video, the config for Video JS and a list of objects representing individual sources

A typical config file for the Wave library should look something like this:

{
    chapters: [
        {
            "label": "Topical therapies",
            "stamp": 1,
        },
        {
            "label": "Systemic therapies",
            "stamp": 5,
        },
        {
            "label": "Dupilumab",
            "stamp": 7,
        },
        {
            "label": "Nemolizumab",
            "stamp": 11,
        },
        {
            "label": "JAK inhibitors",
            "stamp": 15,
        },
        {
            "label": "Pathogenesis and translational studies",
            "stamp": 16,
        },
    ],

    layouts: ['layout-1', 'layout-2', 'layout-3'],

    orderChaptersBy: {
        property: 'stamp',
        orderType: 'ascending'
    },

    handlers: {
        ready() {
            console.log('Ready!');
        },

        slidechange(event) {
            console.log('Slide Change!');
        },

        timeupdate() {
            console.log(this.state.time.current);
        },
    },

    selectors: {
        chapters: '.js-wave-chapters',
        root: '.js-fishawack-wave',
        progress: '.js-track-current',
    },

    slides: './media/content/xml/stamps.xml',

    toggle: {
        controls: true,
        chapters: true,
    },

    videoSettings: {
        autoplay: true,
        controlBar: {
            captionsButton: false,
            chaptersButton: false,            
            subtitlesButton: false,
            remainingTimeDisplay: false,
            progressControl: {
                seekBar: false
            },
            fullscreenToggle: true,
            playbackRateMenuButton: false
        },
        controls: true,
        errorDisplay: false,
        liveui: false,
        preload: "auto",
        sources: [
            {
                src: "https://player.vimeo.com/external/143846337.m3u8?s=e706b824a76d764625c644aa1afe256c05569646",
                type: "application/x-mpegURL"
            },
            {
                src: "https://player.vimeo.com/external/143846337.hd.mp4?s=ba3edda1a60611234740400a64368b3e&profile_id=119",
                type: "video/mp4"
            },
        ],
    },
};

You can then instantiate an instance of Wave as so:

// Main JS file

'use strict';

import { Wave } from '@fishawack/lab-js';
import config from './waveConfigFile';

window.addEventListener('DOMContentLoaded', async () => {
    const wave = window.wave = await new Wave(config).init();
});

Events

Currently, Wave offers four methods:

Callbacks can be passed in with the config object in order to execute functionality as and when needed. Each event will fire after the default functionality has executed (if there is any default functionality).

You can trigger many events using wave.trigger(eventName, payload).

The full list of events are as follows:

Event	When Will It Fire?
chapterclick	triggered programatically
chapterchange	when chapter changes (more specifically, when time or index is higher or lower than current time)
layoutchange	triggered programatically
ended	when the video finishes
pause	triggered programatically
play	triggered programatically
ready	when the video's metadata has loaded
slidechange	when the slide changes (more specifically, when the start time of the stamp is higher or lower than the current time)
timeupdate	whenever the current time of the video changes
updatevideo	triggered programatically

Alternatively, you may want to execute a block of code every time a specific event fires. This can be setup in your instance's configuration.

For example:

// Config file

'use strict';

export default {
    handlers: {
        slidechange: {
            console.log('Slide change...');
        }
    }
};

All events' this keyword will reference the Wave instance.

Wave Properties

Wave exposes information that can then be used to generate DOM elements and work in tandem with different workflows.

Below is a list of the properties Wave exposes.

Property	Type	Definition
chapters	object	Built out from chapters array in the config by the init or update methods; contains a reference to all chapters (formatted with accurate timestamps) as well as the current chapter (formatted with accurate timestamp; determined by video's current time)
config	object	Attached during instantiation, essentially a copy of the config passed into Wave's constructor; used by the init, trigger and update methods
elements	object	All elements used by Wave
handlers	object	All custom handlers passed into config
layouts	array	List of layout class names if passed in with config
videojs	class	Reference to the Video JS instance, exposing its API (though most relevant methods can be triggered by the various Wave events)
state	object	Exposes data that is subject to change e.g. isMuted, isPaused, layout etc.
slides	object	Exposes all slides, the current slide, as well as the raw slides (pre-formatting); generated during the init and update methods' execution
timecode	number	Typically defined in the data, exposes the timecode of the video to ensure timing is matched like-for-like to the video's encoding

Additional Information

• Video sources can be provided programatically or by adding valid source elements as children of the video element in the DOM tree before instantiating Wave