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