src/js/interface.js - patch - alexxhub/playerjs

src/js/interface.js
158 строк4 KB
apavlov3rednet
Create interface constructor
22 июн 2026, 19:49
22 июн 2026, 19:49f0aee7a
// interface.js

/**\
 
    this.video = this.root.querySelector(".player__video");

    this.speedRoot = this.root.querySelector(".js-speed");
    this.speedToggleBtn = this.root.querySelector(".js-speed-toggle");
    this.speedMenu = this.root.querySelector(".js-speed-menu");

    this.currentTimeEl = this.root.querySelector(".time__current");
    this.durationTimeEl = this.root.querySelector(".time__duration");

    this.segments = this.options.segments || [];
    this.segmentsContainer = this.root.querySelector(".js-segments");
    this.activeSegmentIndex = -1;

    this.updateUrlByTime = this.options.updateUrlByTime ?? false;

    this.formatTime = formatTime;

 */

export function generateInterfaceElement(options) {
    let btn = document.createElement(options.type);
    btn.classList.add("player__button", options.className);

    if(options.text)
        btn.innerText = options.text;

    btn.group = options.group ?? 'default'; //custom attribute

    if(options.title !== '') {
        btn.title = options.title;
    }

    if(options.ariaLabel) {
        btn.setAttribute('aria-label', options.ariaLabel);
    }

    if(options.params) {
        for(let key in options.params) {
            btn.setAttribute(key, options.params[key]);
        }
    }
       
    return btn;
}

export function generateInterface(player) {

    let arElements = [];

    player.playBtn = generateInterfaceElement({
        className: "js-play",  
        text: "▶", 
        group: "base",
        type: "button",
    });
    player.bigPlayBtn = generateInterfaceElement({
        className: "js-player__big",  
        text: "►", 
        group: "screen",
        type: "button"
    });
    player.volumeRange = generateInterface({
        className: "js-volume", 
        group: "volume", 
        type: "input",
        params: {
            type: 'range',
            min: 0,
            max: 1,
            step: 0.05,
            value: 1
        }
    });
    player.progressRange = generateInterface({
        className: "js-progress",  
        group: "progress",
        type: "input",
        params: {
            type: 'range',
            min: 0,
            max: 100,
            value: 1
        }
    });
    player.bufferBar = generateInterface({
        className: "js-buffer",  
        group: "progress",
        type: "div",
    });

    arElements.push(player.playBtn);
    arElements.push(player.bigPlayBtn);
    arElements.push(player.volumeRange);
    arElements.push(player.progressRange);
    arElements.push(player.bufferBar);

    //Добавление кнопки на весь экран
    if (player.ui.showFullscreenBtn) {
        player.fullscreenBtn = generateInterfaceElement({
            className: "js-fullscreen",  
            text: "🗖",
            ariaLabel: "Включить полноэкранный режим"

        });
        arElements.push(player.fullscreenBtn);
    }

    //Добавление кнопок пропуска времени
    if (player.ui.showSkipBtn) {
        player.skipBackBtn = generateInterfaceElement({
            className: "js-skip-back",  
            text: "⏪", 
            group: "base"
        });
        player.skipForwardBtn = generateInterfaceElement({
            className: "js-skip-forward",  
            text: "⏩", 
            group: "base"
        });
        arElements.push(player.skipBackBtn);
        arElements.push(player.skipForwardBtn);
    }

    //Добавление кнопки "Picture-in-Picture"
    if (player.ui.showPip) {
        player.pipBtn = generateInterfaceElement({
            className: "js-pip",  
            text: "🖼"
        });
        arElements.push(player.pipBtn);
    }

    //Добавление кнопки "Заглушить"
    if (player.ui.showMuteBtn) {
        player.muteBtn = generateInterfaceElement({
            className: "js-mute",  
            text: "🔇", 
            group: "volume"
        });
        arElements.push(player.muteBtn);
    }

    if(player.ui.showSegments) {
        if(player.segments.length > 0) {
            player.segmentsContainer = document.createElement("div");
            player.segmentsContainer.classList.add("js-segments");
            player.segmentsContainer.innerHTML = player.segments.map(segment => {
                return `<div class="segment" data-start="${segment.start}" data-end="${segment.end}">${segment.title}</div>`;
            });
            player.group = "segments";
            player.activeSegmentIndex = -1;
        }   
    }
}