Add custome menu extender video list from video/image in new tab/page.
// ==UserScript==
// @name Menu - [ X ]
// @namespace http://tampermonkey.net/
// @version 3.0
// @description Add custome menu extender video list from video/image in new tab/page.
// @copyright 2022, terifash (https://greasyfork.org/en/users/964055-teri-fash)
// @author teri.fash <teri.fash@gmail.com>
// @license MIT
// @match *://*.xvideos.com/video*
// @icon https://www.xvideos.com/favicon-32x32.png
// @supportURL https://github.com/TeriFash/x.scripts.user/issues
// @homepageURL https://github.com/TeriFash/x.scripts.user
// @run-at document-start
// ==/UserScript==
(function() {
let listVideo = [];
const actionsDefault = {
position: 'left',
size: 'main',
hides: 'shows'
}
// Получаем значения со стора
function getStoreData(value) {
let result = window.localStorage.getItem(`video-menu-${value}`);
if(!result) {
window.localStorage.setItem(`video-menu-${value}`, actionsDefault[value]);
result = actionsDefault[value]
}
return result
};
// Создаем нужный узел
function elGenerator(parent = 'body', type = 'div', classes = '', data, title, styled, subClass) {
let el;
switch (type) {
case 'link':
el = $(`<a href="#" class="menu-list__btn ${classes}" data-title="${data}">${title}</a>`)[0];
break;
case 'menu':
el = $(`<div id="menu-content-list" class="menu-list"><div class="menu-list__btn-wrapper"></div><div class="menu-list__mozaique mozaique"></div></div>`)[0];
break;
case 'error':
case 'div':
case 'info':
default:
el = $(`<div class="${classes}" style="${styled}"></div>`)[0];
break;
}
$(parent).append(el);
}
// Действие по клику на кнопку
function configClick({event, getClass, setClass, dataType, title, iconOld, icon}) {
window.localStorage.setItem(`video-menu-${dataType}`, setClass);
$('#menu-content-list').toggleClass(`${getClass} ${setClass}`).data(dataType, setClass);
if(iconOld && icon) {
const iconBtn = $(`.menu-list__btn-wrapper > .${iconOld}`);
if(iconBtn) iconBtn.toggleClass(`${iconOld} ${icon}`);
} else {
event.toggleClass(`${getClass} ${setClass}`);
event.innerHTML = title;
}
}
// Слушалель клика на кнопку
function greetingClick(event) {
const menu = $(`#menu-content-list`);
const type = event.target.getAttribute('data-title');
const dataOptions = {
event: event.target,
getClass: '',
setClass: '',
dataType: type,
title: '',
iconOld: ``,
icon: ``
};
switch(type) {
case 'reload':
updateList();
setTimeout(() => {
$('.menu-list__btn-wrapper > .reload').attr('disabled', false);
}, 400);
break;
case 'hides':
if(menu.hasClass("shows")) {
Object.assign(dataOptions, {
getClass: 'shows',
setClass: 'hides',
iconOld: `icf-eye`,
icon: `icf-eye-blocked`
});
configClick(dataOptions);
} else {
Object.assign(dataOptions, {
getClass: 'hides',
setClass: 'shows',
iconOld: `icf-eye-blocked`,
icon: `icf-eye`
});
configClick(dataOptions);
setVideoList();
}
break;
case 'size':
if(menu.hasClass("main")) {
Object.assign(dataOptions, {
getClass: 'main',
setClass: 'small',
iconOld: `icf-device-mobile`,
icon: `icf-device-desktop`
});
configClick(dataOptions);
} else {
Object.assign(dataOptions, {
getClass: 'small',
setClass: 'main',
iconOld: `icf-device-desktop`,
icon: `icf-device-mobile`
});
configClick(dataOptions);
}
break;
case 'position':
$('.btn-settings-top').toggleClass('btn-settings-top--left btn-settings-top--right');
if(menu.hasClass("left")) {
Object.assign(dataOptions, {
getClass: 'left',
setClass: 'right',
iconOld: `icf-arrow-right`,
icon: `icf-arrow-left`
});
configClick(dataOptions);
} else {
Object.assign(dataOptions, {
getClass: 'right',
setClass: 'left',
iconOld: `icf-arrow-left`,
icon: `icf-arrow-right`
});
configClick(dataOptions);
}
break;
default:
break;
}
// configClick(dataOptions);
}
function updateList() {
$('.menu-list__btn-wrapper > .reload').attr('disabled', true);
$('#menu-content-list').children('.mozaique').children().remove();
// video = u('#html5video video');
// videoHandler = u('#html5video .video-click-handler').on(['mouseover', 'mouseout'], playVideoHandler);
// updateOnHover();
setTimeout(() => {
const clone = $('#related-videos > .mozaique').clone(true);
for (let i = 0; i <= clone.children('.thumb-block').length; i++) {
$('#menu-content-list > .mozaique').last().append(clone.children('.thumb-block')[i]);
if(i === clone.children('.thumb-block').length) $('#menu-content-list > .mozaique').append(clone.children('.thumb-block')[i - 1]);
};
}, 500);
};
// Создаем кнопку
function createBtn(type, value) {
let title = '';
let classList = `${value} icon-f icf`;
// @icf-dashboard: "\e903";
// @icf-device-desktop: "\e956";
// @icf-device-mobile: "\e958";
// @icf-device-tablet: "\e95a";
// @icf-device-tv-v2: "\e9af";
switch(type) {
case 'hides':
classList = `${classList}-${value === 'shows' ? 'eye-blocked' : 'eye'}`;
break;
case 'size':
classList = `${classList}-device-${value === 'small' ? 'desktop' : 'mobile'}`;
break;
case 'position':
default:
classList = `${classList}-arrow-${value === 'left' ? 'right' : 'left'}`;
break;
}
elGenerator('.menu-list__btn-wrapper', 'link', classList, type, title);
$('#menu-content-list').data([type], value).addClass(value);
}
// Загружаем основной конфиг
function init() {
elGenerator('#page', 'menu');
const videoList = $('#related-videos');
let video;
let videoHandler;
const btnShow = videoList.children("a.btn-default.show-more").on('click', (event) => {
videoList.addClass('active expanded');
});
async function setVideoList() {
try {
const clone = $('#related-videos > .mozaique').clone(true);
for (let i = 0; i <= clone.children('.thumb-block').length; i++) {
$('#menu-content-list > .mozaique').last().append(clone.children('.thumb-block')[i]);
if(i === clone.children('.thumb-block').length) $('#menu-content-list > .mozaique').append(clone.children('.thumb-block')[i - 1]);
};
$('#related-videos > .mozaique').find(".thumb-block").addClass('thumb-block--wrapper');
$('#menu-content-list > .mozaique').find(".thumb-block--wrapper").removeClass('thumb-block--wrapper');
} catch(e) {
console.log(e);
}
}
function playVideoHandler(event) {
switch(event.type) {
case 'mouseout':
setRewriteVideoList();
break;
case 'mouseover':
default:
setVideoList();
break;
}
// Выбираем целевой элемент
// const target = document.getElementById('menu-content-list');
// // Конфигурация observer (за какими изменениями наблюдать)
// const config = {
// attributes: true,
// childList: true,
// subtree: true
// };
// // Колбэк-функция при срабатывании мутации
// const callback = function(mutationsList, observer) {
// for (let mutation of mutationsList) {
// if (mutation.type === 'childList') {
// console.log('A child node has been added or removed.', mutation);
// } else if (mutation.type === 'attributes') {
// console.log('The ' + mutation.attributeName + ' attribute was modified.', mutation);
// }
// }
// };
// // Создаём экземпляр наблюдателя с указанной функцией колбэка
// const observer = new MutationObserver(callback);
// // Начинаем наблюдение за настроенными изменениями целевого элемента
// observer.observe(target, config);
// Позже можно остановить наблюдение
// observer.disconnect();
};
// function updateOnHover() {
// // u('#menu-content-list').children('.thumb-block').on(['mouseover', 'mouseout'], playVideoHandler);
// $('#html5video').hover(
// function () {
// $(this).addClass('video__hover');
// // u('#html5video .video-click-handler').trigger('focus');
// // u('#html5video').trigger('touchstart'); // .embed-responsive-item'
// // u(event.target).trigger('touchstart');
// },
// function () {
// $(this).removeClass('video__hover');
// // u('#html5video .video-click-handler').trigger('blur');
// // u('#html5video').trigger('touchstart');
// }
// )
// }
function getList() {
Object.keys(actionsDefault).forEach((action) => createBtn(action, getStoreData(action)));
elGenerator('.menu-list__btn-wrapper', 'link', 'icon-f icf-refresh-circle reload', 'reload');
setTimeout(() => {
btnShow.trigger('click');
}, 400);
setTimeout(() => {
setVideoList();
}, 1200);
$('a.menu-list__btn').on('click', greetingClick);
};
getList();
};
window.addEventListener('DOMContentLoaded', init);
})();