All files / js/markup index.js

88.46% Statements 23/26
55.55% Branches 5/9
83.33% Functions 5/6
88.46% Lines 23/26

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 90 91 92 93 94 95 96 97 98 99          3x 2x 2x 2x   2x     3x 1x 1x   1x 1x   1x     3x 8x   12x     12x 12x     12x     12x 12x     12x               8x     3x 3x                                                                                            
import { parseTime } from "../utils/helpers";
import { prepareClasses } from "../core/data";
import { createElement, buildComponents } from "./utils";
 
// Set the value of the song-length display
export const setLengthDisplay = node => {
    let duration = parseTime(node.duration);
    Eif (node.elements.durationDisplay) {
        node.elements.durationDisplay.innerHTML = duration;
    }
    return node;
};
 
export const setMeta = (meta, elements) => {
    Eif (meta.artist && elements.artistDisplay) {
        elements.artistDisplay.innerHTML = meta.artist;
    }
    Eif (elements.titleDisplay) {
        elements.titleDisplay.innerHTML = meta.title;
    }
    return elements;
};
 
export const generateMarkup = (nodes = [], components, namespace) => {
    const markupArray = nodes.map(node => {
        // Create a container for our new player
        const newPlayer = createElement("div");
 
        // Set the relevant classes on the new player element
        const classes = prepareClasses(node.key, node.className, namespace);
        newPlayer.classList.add(...classes);
 
        // Set song index attribute
        newPlayer.setAttribute("data-picobel-index", node.key);
 
        // Create a loading indicator
        let loading = createElement("div", `${namespace}__loader`);
        newPlayer.appendChild(loading);
 
        // Add the components to the player in the order they are listed
        return buildComponents({
            key: node.key,
            container: newPlayer,
            components,
            namespace
        });
    });
 
    return markupArray;
};
 
export const elementHooks = (nodes, context, namespace) =>
    nodes.map(node => {
        let wrapper = context.querySelector(
            `[data-picobel-index='${node.key}']`
        );
 
        node.elements = {
            wrapper: wrapper,
            playPauseButton: wrapper.querySelector(`.${namespace}__play-pause`),
            playPauseButtonText: wrapper.querySelector(
                `.${namespace}__play-pause__text`
            ),
            muteButton: wrapper.querySelector(`.${namespace}__mute`),
            playTimer: wrapper.querySelector(`.${namespace}__timer`),
            durationDisplay: wrapper.querySelector(`.${namespace}__duration`),
            titleDisplay: wrapper.querySelector(`.${namespace}__title`),
            artistDisplay: wrapper.querySelector(`.${namespace}__artist`),
            progressWrapper: wrapper.querySelector(
                `.${namespace}__progress-slider__replacement`
            ),
            progressBar: wrapper.querySelector(
                `.${namespace}__progress-slider__range`
            ),
            playhead: wrapper.querySelector(
                `.${namespace}__progress-slider__playhead`
            ),
            indicator: wrapper.querySelector(
                `.${namespace}__progress-slider__indicator`
            ),
            volumeWrapper: wrapper.querySelector(
                `.${namespace}__volume-slider__replacement`
            ),
            volumeControl: wrapper.querySelector(
                `.${namespace}__volume-slider__range`
            ),
            volumeDisplay: wrapper.querySelector(
                `.${namespace}__volume-label-value`
            ),
            volumeIndicator: wrapper.querySelector(
                `.${namespace}__volume-slider__indicator`
            ),
            volumePlayhead: wrapper.querySelector(
                `.${namespace}__volume-slider__playhead`
            )
        };
        return node;
    });