Add custome menu extender video list from video/image in new tab/page.
Tính đến
// ==UserScript== // @name Menu - [ X ] // @namespace http://tampermonkey.net/ // @version 2.9 // @description Add custome menu extender video list from video/image in new tab/page. // @copyright 2022, terifash (https://openuserjs.org/users/teri.fash) // @author Teri.Fash <[email protected]> // @license MIT // @match *://*.xvideos.com/video* // @icon https://www.xvideos.com/favicon-32x32.png // @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); })();
