All files / js Picobel.js

76.47% Statements 13/17
33.33% Branches 1/3
50% Functions 2/4
76.47% Lines 13/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89                                                  2x                     3x     3x           3x 3x           3x   3x     3x             3x     3x             3x     3x             3x        
import { parseOptions } from "./core/setup";
import { findAudio, getRawData } from "./core/data";
import { generateMarkup, elementHooks } from "./markup";
import { _setupLocalListeners } from "./core/events";
import { canplaythrough } from "./core/audio-functions";
 
/**
 * ---------------------------------------------------------------------------
 *  ____  _           _          _    _
 * |  _ \(_) ___ ___ | |__   ___| |  (_)___
 * | |_) | |/ __/ _ \| '_ \ / _ \ |  | / __|
 * |  __/| | (_| (_) | |_) |  __/ |_ | \__ \
 * |_|   |_|\___\___/|_.__/ \___|_(_)| |___/
 * Picobel.js                       _/ |
 * tomhazledine.com/audio          |__/
 *
 * ===========================================================================
 *
 * Replace any native <audio> instances with standard elements (spans,
 * buttons & divs) that we can style however we like.
 *
 * Functionality powered by Web Audio API.
 * ---------------------------------------------------------------------------
 */
 
export const picobel = (rawOptions = {}) => {
    /**
     * -----------------------------------------------------------------------
     * RUN THE CODE
     *
     * This is where the methods are called. Reading these lines should
     * give you a step-by-step overview of what Picobel does.
     * -----------------------------------------------------------------------
     */
 
    // Parse the options
    const options = parseOptions(rawOptions);
 
    // Declare a `state` variable that will hold the active state
    let state = {
        audioNodes: [],
        theme: options.theme,
        components: options.components
    };
 
    const _replaceNodes = (audioElements, newMarkup) => {
        audioElements.map((element, key) => {
            element.parentNode.replaceChild(newMarkup[key], element);
        });
    };
 
    // Get audio elements from page, and save their details to state.
    state.audioNodes = findAudio(options.context);
 
    state.audioNodes = getRawData(state.audioNodes);
 
    // Build markup for each element, based on `components`
    const markup = generateMarkup(
        state.audioNodes,
        state.components,
        state.theme
    );
 
    // Replace audio elements in DOM with new markup
    _replaceNodes(state.audioNodes, markup);
 
    // Save new DOM elements to our node list
    state.audioNodes = elementHooks(
        state.audioNodes,
        options.context,
        state.theme
    );
 
    // Setup event listeners
    state.audioNodes = _setupLocalListeners(state.audioNodes);
 
    // Check status
    state.audioNodes.forEach(node => {
        const { readyState } = node;
        if (readyState === 4) {
            canplaythrough(node);
        }
    });
 
    return {
        state
    };
};