import videojs from "video.js";
import "./skip-buttons.css";
const BACKWARD_SCROLL_ICON = ``;
const FORWARD_SCROLL_ICON = ``;
const wakePlayerUI = (player) => {
const playerWithActivity = player;
playerWithActivity.reportUserActivity?.();
playerWithActivity.userActive?.(true);
player.el()?.focus?.();
};
const secondsLabel = (accumulated) => {
const seconds = Math.abs(accumulated);
const mod10 = seconds % 10;
const mod100 = seconds % 100;
if (mod10 === 1 && mod100 !== 11) {
return `${seconds} секунду`;
}
if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) {
return `${seconds} секунды`;
}
return `${seconds} секунд`;
};
const createSkipButton = (player, skip, direction) => {
const button = document.createElement("button");
button.type = "button";
button.className = `vjs-skip-button vjs-skip-button-${direction}`;
const icon = document.createElement("span");
icon.className = "icon-placeholder";
icon.textContent = String(skip);
button.appendChild(icon);
const scrollInfo = document.createElement("div");
scrollInfo.className = "scroll-info";
scrollInfo.style.display = "none";
const scrollIcon = document.createElement("span");
scrollIcon.className = `scroll-icon scroll-icon-${direction}`;
scrollIcon.innerHTML =
direction === "backward" ? BACKWARD_SCROLL_ICON : FORWARD_SCROLL_ICON;
scrollInfo.appendChild(scrollIcon);
const scrollText = document.createElement("span");
scrollText.className = "scroll-text";
scrollInfo.appendChild(scrollText);
button.appendChild(scrollInfo);
let accumulated = 0;
let timer = null;
const renderScrollInfo = () => {
if (accumulated === 0) {
scrollInfo.style.display = "none";
scrollText.textContent = "";
return;
}
scrollInfo.style.display = "flex";
scrollText.textContent = secondsLabel(accumulated);
};
button.addEventListener("click", () => {
wakePlayerUI(player);
accumulated += direction === "forward" ? skip : -skip;
renderScrollInfo();
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
const currentTime = player.currentTime() || 0;
player.currentTime(currentTime + accumulated);
wakePlayerUI(player);
accumulated = 0;
renderScrollInfo();
}, 500);
});
return button;
};
class SkipButtonComponent extends videojs.getComponent("Component") {
constructor() {
super(...arguments);
this.element = null;
}
createEl() {
const direction = this.options_.direction;
const skip = Number(this.options_.skip) || 10;
const el = super.createEl("div", {
className: `vjs-skip-button-component vjs-skip-${direction}`,
});
this.element = createSkipButton(this.player(), skip, direction);
el.appendChild(this.element);
return el;
}
}
class SkipBackwardButtonComponent extends SkipButtonComponent {
constructor(player, options) {
options.direction = "backward";
super(player, options);
}
}
class SkipForwardButtonComponent extends SkipButtonComponent {
constructor(player, options) {
options.direction = "forward";
super(player, options);
}
}
videojs.registerComponent("SkipBackwardButtonComponent", SkipBackwardButtonComponent);
videojs.registerComponent("SkipForwardButtonComponent", SkipForwardButtonComponent);
const skipButtonsPlugin = function (options) {
const player = this;
player.ready(() => {
player.addChild("SkipBackwardButtonComponent", { skip: options.skip });
player.addChild("SkipForwardButtonComponent", { skip: options.skip });
const triggerSkip = (direction) => {
const selector = `.vjs-skip-button-${direction}`;
const button = player.el().querySelector(selector);
wakePlayerUI(player);
button?.click();
};
const onKeydown = (event) => {
const active = document.activeElement;
const tag = active?.tagName;
const isEditable = tag === "INPUT" ||
tag === "TEXTAREA" ||
tag === "SELECT" ||
active?.getAttribute("contenteditable") === "true";
if (isEditable) {
return;
}
if (event.key === " " || event.code === "Space") {
event.preventDefault();
wakePlayerUI(player);
if (player.paused()) {
void player.play();
}
else {
player.pause();
}
return;
}
if (event.key === "ArrowRight") {
event.preventDefault();
triggerSkip("forward");
}
else if (event.key === "ArrowLeft") {
event.preventDefault();
triggerSkip("backward");
}
};
document.addEventListener("keydown", onKeydown);
player.on("dispose", () => {
document.removeEventListener("keydown", onKeydown);
});
});
};
videojs.registerPlugin("skipButtons", skipButtonsPlugin);
export default skipButtonsPlugin;
//# sourceMappingURL=skip-buttons.js.map