All files / js/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      5x 12x 12x 12x 12x 12x 12x     5x           5x     5x 12x 12x 12x     5x 12x 12x 12x     5x 12x 12x 12x                   5x 12x 12x 12x 12x     5x 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 muteEl = createElement("button", `${namespace}__mute`);
    muteEl.setAttribute("type", "button");
    muteEl.innerHTML = "Mute";
    return muteEl;
};
 
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;
};