Список горячих клавиш
- ПРОБЕЛ - Плей/Пауза
- F - Полноэкранный режим
- N - Следующий эпизод
- P - Предыдущий эпизод
В отличии от оригинальных работают с
разу полсле загрузки страницы.
В том числе когда плеер не в фокусе
или был не в фокусе на момент перевода
в полноэкранный режим.
`;
function setup() {
function anyActiveInput() {
const inputs = document.querySelectorAll("input,textarea");
return Array.from(inputs).includes(document.activeElement);
}
document.addEventListener("keyup", function (e) {
if (!anyActiveInput()) {
switch (e.code) {
case "KeyF":
hc.player.enterfullscreen();
e.preventDefault();
break;
}
}
});
document.addEventListener("keydown", function (e) {
if (!anyActiveInput()) {
switch (e.code) {
case "KeyN":
hc.player.next();
e.preventDefault();
break;
case "KeyP":
hc.player.prev();
e.preventDefault();
break;
case "Space":
hc.player.toggle();
e.preventDefault();
break;
}
}
});
}
settings();
function settings() {
if (hc.settings) {
hc.settings.createTumblerSetting({
name: "hotkeys",
label: `Улучшеные горячие клавиши ${HELP_TOOLTIP}`,
classes: ["hc-on-of-tumbler"],
options: [
{
class: null,
text: "Выкл",
reload: true,
},
{
end: setup,
class: "hc-hotkeys-enabled",
text: "Вкл",
default: true,
reload: true,
},
],
});
}
}
}
/* ------------------------------------------------- */
/* --------------HIDE-RUSSIAN----------------------- */
/* ------------------------------------------------- */
function initHideRussian() {
GM_addStyle(`
/* css */
/* Main */
.hc-hide-russian .hc-russian {
display: none;
}
/* !css */
`);
document.addEventListener("DOMContentLoaded", setup);
settings();
function setup() {
document.querySelectorAll(".b-content__inline_item").forEach(function (elem) {
if (elem.textContent.includes("Россия,") && !elem.classList.contains("hc-russian")) {
elem.classList.add("hc-russian");
const info = elem
.querySelector(".b-content__inline_item-link")
.textContent.replace(/(\r\n|\n|\r)/gm, "")
.trim();
console.debug(`HDrezka Cleanup: mark russian ${info}`);
}
});
}
function settings() {
if (hc.settings) {
hc.settings.createTumblerSetting({
name: "hide-russian",
label: "Скрытие контента из страны-агрессора",
classes: ["hc-on-of-tumbler"],
options: [
{
class: null,
text: "Выкл",
},
{
class: "hc-hide-russian",
text: "Вкл",
},
],
});
}
}
}
/* ------------------------------------------------- */
/* --------------SETTINGS--------------------------- */
/* ------------------------------------------------- */
function initSettings() {
GM_addStyle(`
/* css */
/* Settings */
.hc-settings {
position: relative;
}
/* Tumbler */
.hc-tumbler {
width: 38px;
height: 30px;
background-color: #000;
border: #1d92b2;
border-radius: 30px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 6px;
cursor: pointer;
position: relative;
user-select: none;
}
.hc-tumbler-point {
border-radius: 50%;
content: '';
display: block;
height: 20px;
width: 20px;
background-color: #999;
background-clip: content-box;
box-sizing: border-box;
border-color: transparent;
border-style: solid;
border-width: 5px;
}
.hc-tumbler > .hc-tumbler-dot {
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #fff;
transition: transform .5s,background-color .5s;
will-change: transform;
}
body.b-theme__template__night .hc-tumbler {
background: #222d33;
}
/* On-Off Tumbler */
.hc-on-of-tumbler .hc-tumbler-point:nth-child(1) {
background-color: green;
}
.hc-on-of-tumbler .hc-tumbler-point:nth-child(2) {
background-color: indianred;
}
/* Settings */
.hc-settings > ul {
width: 450px;
display: none;
background: #313131;
border-top: 0;
position: absolute;
top: 50px;
left: 0px;
white-space: nowrap;
box-shadow: 0 5px 20px 0px #000;
border-color: #222d33;
border-style: solid;
border-width: 3px 3px 3px 3px;
padding: 5px 0;
}
.hc-settings > ul:before {
content: '';
display: block;
position: absolute;
top: -13px;
left: 20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #222d33;
}
.hc-settings > ul:after {
content: '';
display: block;
position: absolute;
top: -9px;
left: 21px;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #313131;
}
body.b-theme__template__night .hc-settings > ul:after {
border-bottom-color: #060f13;
}
body.hc-settings-active .hc-settings > ul {
display: block !important;
}
.hc-settings > ul > li {
color: #777;
font-size: 10px;
font-weight: bold;
margin: 0 !important;
padding: 5px 10px;
min-height: 30px;
}
.hc-settings > ul > li .hc-setting {
display: inline-block;
width: 100%;
}
.hc-settings > ul > li .hc-tumbler {
float: right;
}
.hc-settings .hc-setting-text-value {
display: none;
opacity: .5;
}
.hc-settings .hc-setting-text-block {
float: left;
position: relative;
padding-top: 5px;
}
body.b-theme__template__night .hc-settings > ul {
background: #060f13;
}
/* Settings tumbler */
.hc-tumbler-settings {
margin-top: 5px;
margin-left: 10px;
}
.hc-tumbler-settings .hc-tumbler-point {
background-size: 15px 15px;
background-repeat: no-repeat;
background-position: center;
border-width: 2px;
}
.hc-tumbler-settings .hc-tumbler-point:nth-child(1) {
background-image: url('${images.settings}');
background-color: transparent !important;
}
.hc-tumbler-settings .hc-tumbler-point:nth-child(2) {
background-image: url('${images.settingsclose}');
background-color: transparent !important;
}
/* Tooltip */
.hc-tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.hc-tooltip .tooltiptext {
background: #313131;
border-top: 0;
position: absolute;
top: -25px;
left: 35px;
white-space: nowrap;
box-shadow: 0 5px 20px 0px #000;
border-color: #222d33;
border-style: solid;
border-width: 3px;
visibility: hidden;
width: 200px;
white-space: normal;
padding: 15px;
position: absolute;
z-index: 3;
}
body.b-theme__template__night .hc-tooltip .tooltiptext {
background: #060f13;
}
.hc-tooltip:hover .tooltiptext {
visibility: visible;
}
.hc-tooltip .tooltiptext:before {
content: '';
display: block;
position: absolute;
left: -13px;
top: 11px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #222d33;
}
.hc-tooltip .tooltiptext:after {
content: '';
display: block;
position: absolute;
left: -9px;
top: 12px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #222d33;
}
body.b-theme__template__night .hc-tooltip .tooltiptext:after {
border-right-color: #060f13;
}
.hc-tooltip-icon {
border-radius: 50%;
background: #777;
min-width: 15px;
min-height: 15px;
display: inline-block;
text-align: center;
color: #000;
text-transform: lowercase;
cursor: pointer;
position: absolute;
font-family: monospace, monospace;
font-size: 13px;
top: -10px;
right: -20px;
}
*/
/* !css */
`);
hc.settings = {};
hc.settings.createTumblerSetting = createTumblerSetting;
hc.settings.addElementSetting = addElementSetting;
hc.settings.setSetting = setSetting;
hc.settings.getSetting = getSetting;
const SETTINGS_NAME = "hc-settings";
const DEFAULT_SETTING = "";
document.addEventListener("DOMContentLoaded", setup);
function setSetting(name, value) {
const settingsStr = localStorage.getItem(SETTINGS_NAME);
let settings = settingsStr !== null ? JSON.parse(settingsStr) : {};
settings[name] = value;
localStorage.setItem(SETTINGS_NAME, JSON.stringify(settings));
}
function getSetting(name) {
const settingsStr = localStorage.getItem(SETTINGS_NAME);
const settings = settingsStr !== null ? JSON.parse(settingsStr) : {};
let setting = settings[name];
return setting !== undefined ? setting : null;
}
function setCongigSetting(config, option) {
const value = option.class !== null ? option.class : DEFAULT_SETTING;
setSetting(config.name, value);
}
function getConfigSetting(config) {
return getSetting(config.name);
}
function getDefaultOption(config) {
for (let optionIndex = 0; optionIndex < config.options.length; optionIndex++) {
const tumblerOption = config.options[optionIndex];
if (tumblerOption.default === true) {
return tumblerOption;
}
}
}
function setBodyClass(config, option) {
for (let optionIndex = 0; optionIndex < config.options.length; optionIndex++) {
const tumblerOption = config.options[optionIndex];
if (tumblerOption.class !== null) {
document.body.classList.remove(tumblerOption.class);
}
}
if (option && option.class) {
document.body.classList.add(option.class);
}
}
function getNextOption(config, option) {
let nextOptionIndex;
if (option) {
const currentOptionIndex = config.options.indexOf(option);
if (currentOptionIndex < config.options.length - 1) {
nextOptionIndex = currentOptionIndex + 1;
} else {
nextOptionIndex = 0;
}
} else {
nextOptionIndex = 1;
}
return config.options[nextOptionIndex];
}
function getCurrentOption(config) {
const currentSetting = getConfigSetting(config);
if (currentSetting != null) {
for (let optionIndex = 0; optionIndex < config.options.length; optionIndex++) {
const tumblerOption = config.options[optionIndex];
const optionSetting = tumblerOption.class !== null ? tumblerOption.class : DEFAULT_SETTING;
if (optionSetting === currentSetting) {
return tumblerOption;
}
}
}
const option = getDefaultOption(config);
if (option) {
setCongigSetting(config, option);
return option;
} else {
setCongigSetting(config, { class: DEFAULT_SETTING });
}
}
function rotateSetting(config) {
const currentOption = getCurrentOption(config);
const nextOption = getNextOption(config, currentOption);
setCongigSetting(config, nextOption);
setBodyClass(config, nextOption);
if (nextOption.reload === true) {
document.location.reload();
}
if (nextOption.start) {
nextOption.start();
}
if (nextOption.end) {
nextOption.end();
}
}
function initSetting(config) {
const currentOption = getCurrentOption(config);
setBodyClass(config, currentOption);
if (currentOption && currentOption.start) {
currentOption.start();
}
if (currentOption && currentOption.end) {
document.addEventListener("DOMContentLoaded", currentOption.end);
}
}
function setup() {
const tophead = document.querySelector(".b-tophead-left");
if (!tophead) return;
const tumblerWrapper = buildTumbler({
handler: toggle,
name: "settings",
classes: [],
options: [
{
class: null,
},
{
class: "hc-settings-active",
},
],
});
tumblerWrapper.classList.add("hc-settings");
tumblerWrapper.classList.add("pull-left");
const tumblerUL = document.createElement("ul");
tumblerWrapper.appendChild(tumblerUL);
document.addEventListener("click", close);
tophead.appendChild(tumblerWrapper);
}
function toggle(event) {
document.body.classList.toggle("hc-settings-active");
event.stopPropagation();
}
function close(event) {
if (!event.target.closest(".hc-settings")) {
document.body.classList.remove("hc-settings-active");
}
}
function addElementSetting(element) {
const tophead = document.querySelector(".b-tophead-left");
if (!tophead) return;
const dropdown = tophead.querySelector(".hc-settings ul");
if (!dropdown) return;
const item = document.createElement("li");
item.appendChild(element);
dropdown.appendChild(item);
}
function buildTumbler(config) {
const optionsLength = config.options.length;
const tumblerClassName = "hc-tumbler-" + config.name;
GM_addStyle(`
/* css */
.${tumblerClassName} {
width: ${optionsLength * 15 + optionsLength * 5}px !important;
}
/* !css */
`);
const tumblerWrapper = document.createElement("div");
tumblerWrapper.classList.add("hc-tumbler-wrapper");
const tumbler = document.createElement("div");
tumbler.classList.add("hc-tumbler");
tumbler.classList.add(tumblerClassName);
tumbler.className += " " + config.classes.join(" ");
tumbler.addEventListener("click", config.handler);
for (let optionIndex = 0; optionIndex < optionsLength; optionIndex++) {
const tumblerOption = config.options[optionIndex];
const tumblerPoint = document.createElement("div");
tumblerPoint.classList.add("hc-tumbler-point");
tumbler.appendChild(tumblerPoint);
if (tumblerOption.class !== null) {
// Add dot move style for all points except initial
const enabledClassName = tumblerOption.class;
GM_addStyle(`
/* css */
.${enabledClassName} .${tumblerClassName} .hc-tumbler-dot {
transform: translateX(${optionIndex * 100}%);
}
/* !css */
`);
}
}
const tumblerDot = document.createElement("div");
tumblerDot.classList.add("hc-tumbler-dot");
tumbler.appendChild(tumblerDot);
tumblerWrapper.appendChild(tumbler);
return tumblerWrapper;
}
function buildTumblerSetting(config) {
initSetting(config);
const originalHandler = config.handler;
function handler(event) {
rotateSetting(config);
if (originalHandler) {
originalHandler(event);
}
}
config.handler = handler;
const tumblerWrapper = buildTumbler(config);
tumblerWrapper.classList.add("hc-setting");
const settingClass = "hc-setting-" + config.name;
tumblerWrapper.classList.add(settingClass);
const settingTextBlock = document.createElement("div");
settingTextBlock.classList.add("hc-setting-text-block");
const labelSpan = document.createElement("span");
labelSpan.classList.add("hc-setting-label");
labelSpan.innerHTML = config.label;
settingTextBlock.appendChild(labelSpan);
const optionsLength = config.options.length;
let defaultSelector = "body";
for (let tumblerIndex = 0; tumblerIndex < optionsLength; tumblerIndex++) {
const tumplerOption = config.options[tumblerIndex];
if (tumplerOption.class !== null) {
defaultSelector += `:not(.${tumplerOption.class})`;
}
}
for (let optionIndex = 0; optionIndex < optionsLength; optionIndex++) {
const tumplerOption = config.options[optionIndex];
const textValueClass = "hc-setting-text-value-" + (optionIndex + 1);
const textValueSpan = document.createElement("span");
textValueSpan.classList.add("hc-setting-text-value");
textValueSpan.classList.add(textValueClass);
textValueSpan.innerHTML = tumplerOption.text;
settingTextBlock.appendChild(textValueSpan);
if (optionIndex == 0) {
GM_addStyle(`
/* css */
${defaultSelector} .${settingClass} .${textValueClass} {
display: block !important;
}
/* !css */
`);
} else {
const enabledClassName = config.options[optionIndex].class;
GM_addStyle(`
/* css */
.${enabledClassName} .${settingClass} .${textValueClass} {
display: block !important;
}
/* !css */
`);
}
}
tumblerWrapper.appendChild(settingTextBlock);
return tumblerWrapper;
}
function createTumblerSetting(config) {
const tumblerSetting = buildTumblerSetting(config);
document.addEventListener("DOMContentLoaded", function () {
addElementSetting(tumblerSetting);
});
}
}
})();