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 100 101 102 103 104 105 106 107 | 8x 2x 2x 2x 2x 8x 1x 1x 1x 1x 1x 8x 13x 17x 17x 17x 17x 17x 17x 17x 13x 8x 9x 7x 7x 7x | import { type AudioElement, prepareClasses } from "../core/data";
import { type ComponentGroup } from "../types";
import { parseTime } from "../utils/helpers";
import { buildComponents, createElement } from "./utils";
// Set the value of the song-length display
export const setLengthDisplay = node => {
const 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: AudioElement[],
components: ComponentGroup[],
namespace: string
) => {
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.toString());
// Create a loading indicator
const 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 => {
const 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`
),
progressRange: wrapper.querySelector(
`.${namespace}__progress-slider__range`
),
progressPlayhead: wrapper.querySelector(
`.${namespace}__progress-slider__playhead`
),
progressBackground: wrapper.querySelector(
`.${namespace}__progress-slider__background`
),
progressIndicator: 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;
});
|