All files / markup components.js

90% Statements 36/40
100% Branches 0/0
75% Functions 6/8
90% Lines 36/40

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      3x 12x 12x 12x 12x 12x 12x     3x           3x     3x 12x 12x 12x     3x 12x 12x 12x     3x 12x 12x 12x                   3x 12x 12x 12x 12x     3x 12x       12x       12x 12x 12x       12x 12x   12x                 12x    
import { buildSlider } from "./slider";
import { createElement } from "./utils";
 
export const playPause = namespace => {
    const button = createElement("button", `${namespace}__play-pause`);
    button.setAttribute("type", "button");
    const buttonText = createElement("span", `${namespace}__play-pause__text`);
    buttonText.innerHTML = "Play";
    button.appendChild(buttonText);
    return button;
};
 
export const title = (namespace, key) => {
    const title = createElement("span", `${namespace}__title`);
    title.innerHTML = "File " + (key + 1);
    return title;
};
 
export const artist = namespace =>
    createElement("span", `${namespace}__artist`);
 
export const timer = namespace => {
    const timer = createElement("span", `${namespace}__timer`);
    timer.innerHTML = "0:00";
    return timer;
};
 
export const duration = namespace => {
    const duration = createElement("span", `${namespace}__duration`);
    duration.innerHTML = "-:--";
    return duration;
};
 
export const progress = (namespace, key) => {
    const label = createElement("span", `${namespace}__progress-label-inner`);
    label.innerHTML = "Progress";
    return buildSlider({
        namespace: `${namespace}__progress`,
        min: 0,
        max: 100,
        value: 0,
        index: key,
        label
    });
};
 
export const mute = namespace => {
    const mute = createElement("button", `${namespace}__mute`);
    mute.setAttribute("type", "button");
    mute.innerHTML = "Mute";
    return mute;
};
 
export const volume = (namespace, key) => {
    const volume_label_wrapper = createElement(
        "span",
        `${namespace}__volume-label-inner`
    );
    const volume_label = createElement(
        "span",
        `${namespace}__volume-label-key`
    );
    volume_label.innerHTML = "Volume ";
    volume_label_wrapper.appendChild(volume_label);
    const volume_value = createElement(
        "span",
        `${namespace}__volume-label-value`
    );
    volume_value.innerHTML = "10";
    volume_label_wrapper.appendChild(volume_value);
 
    const volume_slider = buildSlider({
        namespace: `${namespace}__volume`,
        min: 0,
        max: 1,
        value: 1,
        step: 0.1,
        index: key,
        label: volume_label_wrapper
    });
    return volume_slider;
};