1. // ==UserScript==

  2. // @name         Neochan autoplay

  3. // @namespace    http://tampermonkey.net/

  4. // @version      0.1

  5. // @description  Adds media controls for neochan

  6. // @author       You

  7. // @match        https://*.neochan.ru/*

  8. // @match        https://*.neochan.net/*

  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=neochan.net

  10. // @grant        GM_addStyle

  11. // ==/UserScript==

  12. 

  13. (function() {

  14.     'use strict';

  15.     GM_addStyle(

  16.         ".ap-arrow a {display: block;}" +

  17.         ".ap-arrow {position: fixed; top: 50%; font-size: x-large; cursor: pointer; background-color: rgba(255, 255, 255, 0.2); width: 50px;padding-top: 5px;padding-bottom: 5px;text-align: center; left:0;} " +

  18.         ".ap-arrow-right {right: 0; left: unset;}"+

  19.         ".ap-media-button { display: block; margin-left: 14px;margin-top: 10px; margin-bottom: 5px; border: 0; background: transparent; box-sizing: border-box;width: 0; height: 35px; border-color: transparent transparent transparent #202020; transition: 100ms all ease; "+

  20.         "cursor: pointer; border-style: solid; border-width: 16px 0 16px 23px;}" +

  21.         " .ap-media-button.paused { border-style: double; border-width: 0px 0 0px 23px; } .ap-media-button:hover { border-color: transparent transparent transparent #404040; }"

  22.     )

  23. 

  24.     const PlayVidLinks = true,

  25.           ReplaceGifs = true,

  26.           AddCustomSmiles = true,

  27.           Smiles = {

  28.               "enid_wink": {

  29.                   'smileHtml': '<ul class="smile-tab smile-tab-enid_wink" style="list-style: none; text-align: left; display: none;"><div class="smile" style="display: inline"><i class="s42 s42-enid_wink smiles-icon" data-func="AddSmile" data-arg1="enid_wink"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_amazed smiles-icon" data-func="AddSmile" data-arg1="emma_amazed"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_angry smiles-icon" data-func="AddSmile" data-arg1="emma_angry"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_beauty smiles-icon" data-func="AddSmile" data-arg1="emma_beauty"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_braces smiles-icon" data-func="AddSmile" data-arg1="emma_braces"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_cool smiles-icon" data-func="AddSmile" data-arg1="emma_cool"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_crying smiles-icon" data-func="AddSmile" data-arg1="emma_crying"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_duck smiles-icon" data-func="AddSmile" data-arg1="emma_duck"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_duck2 smiles-icon" data-func="AddSmile" data-arg1="emma_duck2"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_scared smiles-icon" data-func="AddSmile" data-arg1="emma_scared"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_serious smiles-icon" data-func="AddSmile" data-arg1="emma_serious"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_serious2 smiles-icon" data-func="AddSmile" data-arg1="emma_serious2"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_smile smiles-icon" data-func="AddSmile" data-arg1="emma_smile"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_smile2 smiles-icon" data-func="AddSmile" data-arg1="emma_smile2"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_swag smiles-icon" data-func="AddSmile" data-arg1="emma_swag"></i></div><div class="smile" style="display: inline"><i class="s42 s42-emma_tongue smiles-icon" data-func="AddSmile" data-arg1="emma_tongue"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_cat smiles-icon" data-func="AddSmile" data-arg1="enid_cat"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_cute smiles-icon" data-func="AddSmile" data-arg1="enid_cute"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_disgust smiles-icon" data-func="AddSmile" data-arg1="enid_disgust"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_eating smiles-icon" data-func="AddSmile" data-arg1="enid_eating"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_rage smiles-icon" data-func="AddSmile" data-arg1="enid_rage"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_sad smiles-icon" data-func="AddSmile" data-arg1="enid_sad"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_scared smiles-icon" data-func="AddSmile" data-arg1="enid_scared"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_scared2 smiles-icon" data-func="AddSmile" data-arg1="enid_scared2"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_scared3 smiles-icon" data-func="AddSmile" data-arg1="enid_scared3"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_smile smiles-icon" data-func="AddSmile" data-arg1="enid_smile"></i></div><div class="smile" style="display: inline"><i class="s42 s42-enid_smile2 smiles-icon" data-func="AddSmile" data-arg1="enid_smile2"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_beaten smiles-icon" data-func="AddSmile" data-arg1="jenna_beaten"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_cringe smiles-icon" data-func="AddSmile" data-arg1="jenna_cringe"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_facepalm smiles-icon" data-func="AddSmile" data-arg1="jenna_facepalm"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_kiss smiles-icon" data-func="AddSmile" data-arg1="jenna_kiss"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_laugh smiles-icon" data-func="AddSmile" data-arg1="jenna_laugh"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_nose smiles-icon" data-func="AddSmile" data-arg1="jenna_nose"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_sick smiles-icon" data-func="AddSmile" data-arg1="jenna_sick"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_smile smiles-icon" data-func="AddSmile" data-arg1="jenna_smile"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_smoke smiles-icon" data-func="AddSmile" data-arg1="jenna_smoke"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_think smiles-icon" data-func="AddSmile" data-arg1="jenna_think"></i></div><div class="smile" style="display: inline"><i class="s42 s42-jenna_what_ smiles-icon" data-func="AddSmile" data-arg1="jenna_what_"></i></div><div class="smile" style="display: inline"><i class="s42 s42-wedn_cold smiles-icon" data-func="AddSmile" data-arg1="wedn_cold"></i></div><div class="smile" style="display: inline"><i class="s42 s42-wedn_crying smiles-icon" data-func="AddSmile" data-arg1="wedn_crying"></i></div><div class="smile" style="display: inline"><i class="s42 s42-wedn_eyes smiles-icon" data-func="AddSmile" data-arg1="wedn_eyes"></i></div><div class="smile" style="display: inline"><i class="s42 s42-wedn_growl smiles-icon" data-func="AddSmile" data-arg1="wedn_growl"></i></div><div class="smile" style="display: inline"><i class="s42 s42-wedn_mad smiles-icon" data-func="AddSmile" data-arg1="wedn_mad"></i></div><div class="smile" style="display: inline"><i class="s42 s42-wedn_sad smiles-icon" data-func="AddSmile" data-arg1="wedn_sad"></i></div><div class="smile" style="display: inline"><i class="s42 s42-wedn_smile smiles-icon" data-func="AddSmile" data-arg1="wedn_smile"></i></div><div class="smile" style="display: inline"><i class="s42 s42-wedn_smile2 smiles-icon" data-func="AddSmile" data-arg1="wedn_smile2"></i></div><div class="smile" style="display: inline"><i class="s42 s42-wedn_tired smiles-icon" data-func="AddSmile" data-arg1="wedn_tired"></i></div><div class="smile" style="display: inline"><i class="s42 s42-puppy smiles-icon" data-func="AddSmile" data-arg1="puppy"></i></div></ul>',

  30.                   'smileIcHtml': '<div class="sc-item" data-func="changeSmileTab" data-arg1="enid_wink"><i class="smile-category-image s42-enid_wink"></i></div>'

  31.               }

  32.           }

  33.     let mediaElems = [],

  34.         curIndex =0, maxIndex = 0,

  35.         plrPause = false, musToVid = false;

  36. 

  37.     function htmlToElements(html) {

  38.         var template = document.createElement('template');

  39.         template.innerHTML = html;

  40.         return template.content;

  41.     }

  42. 

  43.     function createArrow(rightSide) {

  44.         const arrow = htmlToElements(`<div class="ap-nav ap-arrow ${rightSide ? 'ap-arrow-right' : ''}"><a ><i class="fa fa-chevron-${rightSide ? 'right' : 'left'}"></i></a></div>`);

  45.         arrow.querySelector("a").addEventListener('click', (e) => {

  46.             if (curIndex == 0 && !rightSide) return;

  47.             if (curIndex == maxIndex-1 && rightSide) curIndex = -1;

  48.             let elem = "";

  49.             if (plrPause){

  50.                 const fM = rightSide ?

  51.                       mediaElems.find(e => curIndex < e.getAttribute('ap-index') && e.classList.contains('ap-media')) :

  52.                       mediaElems.filter(e => curIndex > e.getAttribute('ap-index') && e.classList.contains('ap-media'))?.slice(-1)?.[0];

  53.                 if (fM){

  54.                     elem = fM;

  55.                     curIndex = +fM.getAttribute('ap-index');}

  56.                 else{

  57.                     // elem = mediaElems.filter(e => maxIndex > e.getAttribute('ap-index') && e.classList.contains('ap-media'))?.slice(-1)?.[0];

  58.                     elem = rightSide ? mediaElems.find(e => 0 <= e.getAttribute('ap-index') && e.classList.contains('ap-media')) :

  59.                     mediaElems.filter(e => maxIndex > e.getAttribute('ap-index') && e.classList.contains('ap-media'))?.slice(-1)?.[0];

  60.                 }

  61.             }else{

  62.                 const video = document.querySelector('video');

  63.                 if (video) video.loop = true;

  64.                 curIndex = curIndex + (rightSide ? 1 : -1);

  65.                 elem = mediaElems.find(e => curIndex == e.getAttribute('ap-index'));

  66.             }

  67.             if (!elem) return;

  68.             document.querySelector("#close-plyr__audio")?.click();

  69.             elem.click();

  70.             elem.scrollIntoView({block: "center", inline: "nearest"});

  71.             switchPlBut();

  72.         });

  73.         return arrow;

  74.     }

  75.     function switchPlBut(val){

  76.         const mB = document.querySelector('.ap-media-button')

  77.         if (!mB) return;

  78.         if (val !== undefined){

  79.             mB.style.display = val ? 'block' : 'none';

  80.             return;

  81.         }

  82.         if (document.querySelector('#player-container img')?.tagName == 'IMG') {

  83.             mB.style.display = 'none';

  84.         } else {

  85.             mB.style.display = 'block';

  86.         }

  87.     }

  88.     function render(){

  89.         if(window.location.href.match(/usermod\.php\?|mod\.php\?/)){

  90.             const art = document.querySelectorAll('article.post'),

  91.                   controls = document.querySelector('.view-inline-pc');

  92.             for (let i = 0; i < art.length; i++) {

  93.                 const a = art[i];

  94.                 if(a.querySelector('.view-inline-pc')) continue;

  95.                 const header = a.querySelector('header'),

  96.                       postNum = header.querySelector('.post_anchor').name,

  97.                       contrDup = controls.cloneNode(true),

  98.                       links = contrDup.querySelectorAll('a');

  99.                 for (let j = 0; j < links.length; j++) {

  100.                     const l = links[j];

  101.                     l.href = l.href.replace(/\/\d+\//, `/${postNum}/`);

  102.                 }

  103.                 header.insertBefore(contrDup, header.querySelector('time'));

  104.             }

  105.         }

  106.         const mE = document.querySelectorAll(`.audio-url, img.webm-file, .img.preview${PlayVidLinks ? ', .y-link' : ""}`);

  107.         if (mE.length == mediaElems.length) return;

  108.         let index = 0;

  109.         mediaElems = [...mE];

  110.         mE.forEach(e => { //, vimeo-link

  111.             const ind = index++, p = e.parentNode;

  112.             if(e.hasAttribute('ap-parsed')) return;

  113.             e.setAttribute("ap-index", ind);

  114.             const classNames = ['webm-file', 'audio-url'];

  115.             if (PlayVidLinks) classNames.push('y-link'); //, 'vimeo-link'

  116.             if(classNames.some(cN => e.classList.contains(cN))) {

  117.                 e.classList.add('ap-media');

  118.             }

  119.             if(e.classList.contains("img")){

  120.                 if(p.name == "ClipboardImage.png"){

  121.                     const ext = p.href?.match(/\.\w+$/)?.[0];

  122.                     if (ext && ext != '.png') p.setAttribute("name", p.name.replace(/\.png$/, ext));

  123.                 }

  124.                 if(ReplaceGifs && p.href.endsWith('.gif')){

  125.                     p.querySelector('.post-gif-marker').remove();

  126.                     e.src = e.src.replace(/\/thumb\//, '/src/').replace(/\.\w+$/, '.gif');

  127.                 }

  128.             }

  129.             e.addEventListener('click', e => {

  130.                 const t = e.currentTarget;

  131.                 curIndex = +t.getAttribute('ap-index');

  132.                 const plClose = document.querySelector("#close-plyr__audio");

  133.                 if (plClose){

  134.                     musToVid = true;

  135.                     plClose.click();

  136.                 }

  137.                 if (e.currentTarget.classList.contains('ap-media')) switchPlBut(true);

  138.                 else switchPlBut(false);

  139.             });

  140.             e.toggleAttribute('ap-parsed');

  141.         })

  142.         maxIndex = index;

  143.     }

  144.     function obsBody(){

  145.         const navElems = document.querySelectorAll('.ap-nav'),

  146.               player = document.querySelector('video, #player-container img, .plyr'),

  147.               smilePan = document.querySelector(".smile-picker"),

  148.               navDisplayed = ['none', undefined].includes(navElems[0]?.style?.display)? false : true;

  149.         if (AddCustomSmiles && smilePan && !document.querySelector(".user-smiles-added")){

  150.             const smList = smilePan.querySelector('.smile-picker-box'),

  151.                   smCat = smilePan.querySelector('.smile-category'),

  152.                   smLength = Object.keys(Smiles).length;

  153.             for(let key in Smiles){

  154.                 if(smCat.querySelector(`[data-arg1="${key}"]`)) continue;

  155.                 smList.insertBefore(htmlToElements(Smiles[key].smileHtml), smList.firstChild);

  156.                 smCat.insertBefore(htmlToElements(Smiles[key].smileIcHtml), smCat.firstChild);

  157.             }

  158.             smList.querySelectorAll('.button').forEach((b)=>{

  159.                 const n = +b.getAttribute('data-arg2') + smLength;

  160.                 b.id = `btn-more-${n}`;

  161.                 b.setAttribute('data-arg2', n);

  162.             });

  163.             smCat.classList.add('user-smiles-added');

  164.         }

  165.         if (navElems.length && (!player && navDisplayed || player && !navDisplayed)){

  166.             if (navDisplayed) { render(); }

  167.             navElems.forEach(e => {e.style.display = e.style.display == 'none' ? '' : 'none';});

  168.             if (musToVid && !navDisplayed) {

  169.                 musToVid = false;

  170.             } else if (!musToVid){

  171.                 document.querySelector('.ap-media-button')?.classList.remove("paused");

  172.                 plrPause = false;

  173.             }

  174.         } else {

  175.             if(player && navElems.length && plrPause) setNextEvent();

  176.             if (navDisplayed || !player) return;

  177.             render();

  178.             createNav();

  179.         }

  180.         switchPlBut();

  181.     }

  182.     function createNav(){

  183.         const rightArrow = createArrow(true),

  184.               leftArrow = createArrow(),

  185.               navElem = document.querySelector(".page-nav"),

  186.               l = navElem.appendChild(leftArrow),

  187.               btn = htmlToElements("<button class='ap-media-button ap-nav'></button>");

  188.         navElem.appendChild(rightArrow);

  189.         document.querySelector('.ap-arrow-right').appendChild(btn);

  190.         document.querySelector('.ap-media-button').addEventListener('click', e => {

  191.             plrPause = e.currentTarget.classList.toggle("paused");

  192.             setNextEvent();

  193.             return false;

  194.         });

  195.     }

  196. 

  197.     function crMediaObserver(element, checkFunc){

  198.         const plInp = document.querySelector('.plyr__progress > input');

  199.         if (element && !element.hasAttribute('ap-parsed')) {

  200.             const observer = new MutationObserver(() => {

  201.                 if(!plrPause) {

  202.                     element.toggleAttribute('ap-parsed');

  203.                     observer.disconnect();

  204.                     return;

  205.                 }

  206.                 if (checkFunc()){

  207.                     document.querySelector('.ap-arrow-right a')?.click();

  208.                     observer.disconnect();

  209.                 }

  210.             });

  211.             observer.observe(element, {attributes: true});

  212.             element.toggleAttribute('ap-parsed');

  213.         };

  214.     }

  215. 

  216.     function setNextEvent(){

  217.         const video = document.querySelector('video');

  218.         if (video){

  219.             video?.toggleAttribute('loop');

  220.             if(video.hasAttribute('ap-parsed')) return;

  221.             video?.addEventListener("ended", (event) => {

  222.                 document.querySelector('.ap-arrow-right a')?.click();

  223.             });

  224.             video.toggleAttribute('ap-parsed');

  225.             return;

  226.         }

  227.         const plInp = document.querySelector('.plyr__progress > input');

  228.         crMediaObserver(plInp, () => plInp.style.cssText == '--value: 100%;');

  229.         if (PlayVidLinks){

  230.             const ytPlr = document.querySelector('#youtubevideo');

  231.             crMediaObserver(ytPlr, () => ytPlr.classList.contains('plyr--stopped') && ytPlr.classList.contains('plyr__poster-enabled'));

  232.         }

  233.     }

  234.     function waitForElm(selector) {

  235.         return new Promise(resolve => {

  236.             if (document.querySelector(selector)) {

  237.                 return resolve(document.querySelector(selector));

  238.             }

  239.             const observer = new MutationObserver(mutations => {

  240.                 if (document.querySelector(selector)) {

  241.                     observer.disconnect();

  242.                     resolve(document.querySelector(selector));

  243.                 }

  244.             });

  245.             observer.observe(document.body, {

  246.                 childList: true,

  247.                 subtree: true

  248.             });

  249.         });

  250.     }

  251. 

  252.     render();

  253.     const threadObserver = new MutationObserver(render),

  254.           bodyObserver = new MutationObserver(obsBody),

  255.           article = document.querySelector("article.thread");

  256.     if (!article) return;

  257.     threadObserver.observe(article, {childList: true});

  258.     bodyObserver.observe(document.body, {childList: true});

  259.     waitForElm('#player-container').then(() => {

  260.         bodyObserver.observe(document.querySelector('#player-container'), {attributes: true})

  261.     })

  262. })();