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; }); |