☰

Erome Video Cloner

clone videos in an erome album, play multiple & side-by-side!

  1. // ==UserScript==
  2. // @name         Erome Video Cloner
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.9.900
  5. // @description  clone videos in an erome album, play multiple & side-by-side!
  6. // @author       throwinglove23
  7. // @license      MIT
  8. // @match        https://www.erome.com/a/*
  9. // @match        http://www.erome.com/a/*
  10. // @match        https://www.erome.com/*
  11. // @exclude      http://www.erome.com/a/*/edit
  12. // @exclude      https://www.erome.com/a/*/edit
  13. // @icon         https://www.erome.com/favicon-32x32.png
  14. // @grant        none
  15. // @supportURL   https://github.com/wflover23/erome-multi-tool
  16. // ==/UserScript==
  17. /* jshint esversion: 8 */
  18.  
  19. function mainFunction() {
  20.     'use strict';
  21.     // removing default seek functions
  22.     document.onkeydown = null;
  23.     window.addEventListener('keydown', function(e) {
  24.         // avoiding space which scrolls down to allow pausing
  25.       if(e.keyCode == 32 && e.target.tagName != 'INPUT') {
  26.          
  27.         e.preventDefault();
  28.       }
  29. });
  30.     const userRow = document.querySelector('.username');
  31.     const cleanseBtn = document.createElement('button');
  32.     // if (userRow == null || document.querySelector('video') == null)
  33.     // {
  34.     //     return;
  35.     // }
  36.     cleanseBtn.classList.add('btn', 'btn-grey', 'btn-sm', 'url-btn');
  37.     cleanseBtn.textContent = 'SHOW URLS';
  38.     userRow.appendChild(cleanseBtn);
  39.     cleanseBtn.addEventListener('click', urlShow);
  40.     if (document.querySelectorAll('.video').length>0)
  41.     {
  42.         const infoRow = document.querySelector('.user-info.text-right');
  43.         const spanItem = document.createElement('span');
  44.         //spanItem.classList.add('btn', 'mr-5', 'btn-grey', 'cloner');
  45.         const cloneIcon = document.createElement('i');
  46.         if (document.querySelectorAll('#legend a').length > 0)
  47.             {
  48.                 const legendBtn = document.createElement('a');
  49.                 legendBtn.classList.add('btn', 'btn-grey', 'btn-sm', 'mr-5');
  50.                 legendBtn.href='#legend';
  51.                 legendBtn.textContent = 'GO TO LEGEND';
  52.                 spanItem.append(legendBtn);
  53.             }
  54.         infoRow.insertBefore(spanItem, infoRow.firstElementChild);
  55.    
  56.         //spanItem.addEventListener('click', cloneFunction);
  57.     }
  58.     // adding transitions to legend links if exists
  59.     replaceAdWithButtons();
  60.  
  61.     // Your code here...
  62. }
  63.  
  64. function seekChaptersN()
  65. {
  66.     const video = document.querySelector('video');
  67.     video.addEventListener('keydown', seekChapters);
  68.     video.setAttribute('data-chapter', 0);
  69.    
  70.  
  71.     function seekChapters(event)
  72.         {
  73.             if (event.key == 'n')
  74.             {
  75.                 const chapterArea = document.querySelector('.vjs-control.vjs-chapters-button .vjs-menu-content');
  76.                 if (chapterArea.childElementCount > 1)
  77.                     {
  78.                         const childrenChapterCount = chapterArea.childElementCount;
  79.                         const chapters = Array.from(chapterArea.querySelectorAll('.vjs-menu-item'));
  80.                         const currentChapter = video.dataset.chapter;
  81.                         // skipping title child from chapter
  82.                         if (currentChapter < childrenChapterCount -1)
  83.                        
  84.                         {
  85.                             chapters[+currentChapter].click();
  86.                             video.dataset.chapter++;
  87.                         }
  88.                         else
  89.                         {
  90.                             video.currentTime = 0;
  91.                             video.dataset.chapter=0;
  92.                         }
  93.                     }
  94.             }
  95.         }
  96. }
  97.  
  98.  
  99. function copySourceFromAlbum()
  100. {
  101.     const albums = Array.from(document.getElementsByClassName('album'));
  102.     albums.forEach(async function(album)
  103.         {
  104. /*             const hr = album.querySelector('.album-link').href;
  105.             const hdr = await fetch(hr);
  106.             const data = await hdr.text();
  107.             var parser = new DOMParser();
  108.             var doc = parser.parseFromString(data, 'text/html');
  109.             album.querySelector('.album-thumbnail').style.objectFit = 'cover';
  110.             album.style.maxHeight = '200px';
  111.             if (doc.querySelector('source') == null)
  112.             {
  113.                 return;
  114.             }
  115.             const vidSrc = doc.querySelector('source').src;
  116.             async function copyFxn()
  117.             {
  118.                 await navigator.clipboard.writeText(vidSrc);
  119.             }
  120.             album.insertAdjacentHTML("afterbegin", '<button class="copy-link-btn btn btn-sm btn-pink" style="margin-left: 2px;width: fit-content;position: relative;z-index: 30;bottom: 61px;font-size: 1.5rem;padding: 0;">COPY</button>');
  121.             album.querySelector('.copy-link-btn').onclick = copyFxn;
  122.             const btnCopy = album.querySelector('.copy-link-btn');
  123.             copyOnHover(btnCopy); */
  124.         });
  125. }
  126.  
  127. function copyOnHover(btn)
  128. {
  129.         btn.style.opacity=0;
  130.       btn.closest('.album').addEventListener('mouseover', function()
  131.         {
  132.             btn.style.opacity=1;
  133.         });
  134.         btn.closest('.album').addEventListener('mouseout', function()
  135.         {
  136.             btn.style.opacity=0;
  137.         });
  138. }
  139.  
  140. function checkForChapters()
  141. {
  142.     if (document.querySelector('video') == null)
  143.     {
  144.         return;
  145.     }
  146.     const legend = document.querySelector('#legend');
  147.     // if no text nodes/chapters found in legend, return ;
  148.     if (!legend || legend.children.length < 2)
  149.     {
  150.         return;
  151.     }
  152.     const nodeTypes = Array.from(legend.childNodes).filter(function(item)
  153.                                                        {
  154.                                                            return item.nodeType === 3 && item.textContent.trim() != '';
  155.                                                        })
  156.                                                        .map(item => item.textContent.trim());
  157.     const startingIndex = nodeTypes.indexOf('CHAPTERS BELOW');
  158.     if (startingIndex == -1)
  159.     {
  160.         return;
  161.     }
  162.     else
  163.     {
  164.         document.querySelector('#bubble').style.width = 'min-content';
  165.         document.querySelector('#bubble').insertAdjacentHTML("beforeend", '<button class="btn btn-sm btn-pink chapter-btn mb-5">ADD CHAPTERS</button>');
  166.         const chapterBtn = document.querySelector('.chapter-btn');
  167.         chapterBtn.addEventListener('click', function()
  168.         {
  169.             parseChapters(nodeTypes.slice(startingIndex+1));
  170.             chapterBtn.textContent == 'REMOVE CHAPTERS' ? chapterBtn.textContent = 'ADD CHAPTERS' : chapterBtn.textContent = 'REMOVE CHAPTERS';
  171.         });
  172.     }
  173. }
  174.  
  175. function parseChapters(chapterInfo)
  176. {
  177.     document.querySelector('.vjs-chapters-button.vjs-control').classList.toggle('vjs-hidden');
  178.     let listTimes = [];
  179.     let listNames = [];
  180.     // https://stackoverflow.com/questions/9640266/convert-hhmmss-string-to-seconds-only-in-javascript
  181.     function timeToSeconds(str)
  182.     {
  183.         var timeElements = str.split(':'),
  184.             seconds = 0, minutes = 1;
  185.    
  186.         while (timeElements.length > 0)
  187.         {
  188.             seconds += minutes * parseInt(timeElements.pop(), 10);
  189.             minutes *= 60;
  190.         }
  191.    
  192.         return seconds;
  193.     }
  194.     for (let i = 0; i<chapterInfo.length;i++)
  195.         {
  196.             listTimes.push(timeToSeconds(chapterInfo[i].split('-')[0]));
  197.             listNames.push(chapterInfo[i].split('-')[1]);
  198.         }
  199.     const chapterBar = document.querySelector('.vjs-chapters-button .vjs-menu-content');
  200.     if (chapterBar.children.length > 1)
  201.     {
  202.         chapterBar.innerHTML = '<li class="vjs-menu-title" tabindex="-1">Chapters</li>';
  203.     }
  204.     for (let i = 0; i< listTimes.length;i++)
  205.         {
  206.             chapterBar.insertAdjacentHTML("beforeend", `<li class="vjs-menu-item" onclick='function moveTo(){document.querySelector("video").currentTime=${listTimes[i]}} moveTo();' tabindex="-1">${listNames[i]}</li>`);
  207.         }
  208.     seekChaptersN();
  209.    
  210. }
  211.  
  212. function urlShow()
  213. {
  214.     if (document.querySelector('video') == null)
  215.     {
  216.         return;
  217.     }
  218.     const urlBtn = document.querySelector('.url-btn');
  219.     urlBtn.textContent == 'SHOW URLS' ? urlBtn.textContent = 'HIDE URLS': urlBtn.textContent = 'SHOW URLS';
  220.     const vids = document.querySelectorAll('.video');
  221.     if (document.querySelector('.form-url') == null)
  222.     {
  223.         const area = document.querySelector('.clearfix').previousElementSibling.parentElement;
  224.         area.insertAdjacentHTML("afterbegin", "<form class='form-url hidden'><input type='url' required id='video-input' style='width:430px' placeholder='enter video url(s) separated by comma ,'><button class='btn btn-sm btn-pink btn-add-url'>ADD</button></form>");
  225.         const form = document.querySelector('.form-url').addEventListener('submit', function(e)
  226.                {
  227.                     e.preventDefault();
  228.                 });
  229.         const btn = document.querySelector('.btn-add-url');
  230.         btn.addEventListener('click', addVideo);
  231.     }
  232.     vids.forEach(vid =>
  233.     {
  234.         const src = vid.querySelector('video').firstElementChild.src;
  235.         if (vid.firstChild.tagName != 'A')
  236.         {
  237.             const anc = document.createElement('a');
  238.             anc.classList.add('video-url', 'hidden');
  239.             anc.textContent = 'COPY LINK';
  240.             vid.insertAdjacentElement("afterbegin", anc);
  241.             anc.onclick = async function()
  242.             {
  243.                 await navigator.clipboard.writeText(src);
  244.             };
  245.         }
  246.     });
  247.  
  248.     function addVideo()
  249.         {
  250.             const input = document.getElementById('video-input');
  251.  
  252.             if (input.value == '' || input.value.length < 50 || input.value == null)
  253.             {
  254.                 console.log("no valid input");
  255.                 return;
  256.             }
  257.             else
  258.             {
  259.                 let vidURLs = input.value.split(',');
  260.                 vidURLs.forEach(url => createVid(url));
  261.             }
  262.         }
  263.  
  264.     function createVid(sourceURL)
  265.         {
  266.             let posterURL1 = sourceURL.replace('v', 's');
  267.             let posterURL2 = posterURL1.replace('_720p', '');
  268.             let posterURL = posterURL2.replace('mp4', 'jpg');
  269.             const mediaDiv = document.createElement('div');
  270.             const videoDiv = document.createElement('div');
  271.             mediaDiv.classList.add('media-group');
  272.             videoDiv.classList.add('video');
  273.    
  274.             const mainMedia = document.querySelector('.media-group');
  275.             mainMedia.parentElement.appendChild(mediaDiv);
  276.             mediaDiv.appendChild(videoDiv);
  277.             const video = document.createElement('video');
  278.             video.classList.add('video-js', 'vjs-16-9');
  279.             video.controls = true;
  280.             video.poster = posterURL;
  281.        
  282.             const src = document.createElement('source');
  283.             src.setAttribute('src', sourceURL);
  284.             video.appendChild(src);
  285.             videoDiv.appendChild(video);
  286.             var player = videojs(video);
  287.             video.preload="none";
  288.             allowPToPause(video);
  289.  
  290.  
  291.             document.querySelector('.sidebyside-btn').click();
  292.             document.querySelector('.sidebyside-btn').click();
  293.         }
  294.  
  295.  
  296.     if (urlBtn.textContent == 'SHOW URLS')
  297.     {
  298.         const links = document.querySelectorAll('.video-url');
  299.         links.forEach(anc =>
  300.         {
  301.             anc.classList.add('hidden');
  302.         });
  303.     }
  304.     else
  305.     {
  306.         const links = document.querySelectorAll('.video-url');
  307.         links.forEach(anc =>
  308.         {
  309.             anc.classList.remove('hidden');
  310.         });
  311.     }
  312.     document.querySelector('.form-url').classList.toggle('hidden');
  313.                                                
  314. }
  315.  
  316.  
  317. function addTransitionToID()
  318. {
  319.     const legendLinks = document.querySelectorAll('.comments a');
  320.     legendLinks.forEach(link =>
  321.     {
  322.             const idText = link.textContent.trim();
  323.             const parsedInt = parseInt(idText.substring(1), 10);
  324.             const textInLink = link.nextSibling;
  325.             const idEl = document.getElementById(parsedInt);
  326.             if (Number.isNaN(parsedInt))
  327.             {
  328.                 return;
  329.             }
  330.             if (textInLink.nodeType == 3)
  331.             {
  332.                 if (idEl) {
  333.                  idEl.title=textInLink?.textContent?.trim();
  334.                 }
  335.             }
  336.     });
  337.     legendLinks.forEach(link => link.onclick= function()
  338.         {
  339.             const idText = link.textContent.trim();
  340.             const parsedInt = parseInt(idText.substring(1), 10);
  341.             const idEl = document.getElementById(parsedInt);
  342.             if (!Number.isNaN(parsedInt))
  343.             {
  344.                 link.href=`#${parsedInt}`;
  345.             }
  346.             idEl.style.transition = 'all 0.3s ease-in-out';
  347.             idEl.style.opacity = '0.4';
  348.             function backTo(elem)
  349.                 {
  350.                     elem.style.opacity='1';
  351.                 }
  352.             setTimeout(backTo, 400, idEl);
  353.         });
  354. }
  355.  
  356. function addProperID()
  357. {
  358.     let count = 0;
  359.     document.querySelectorAll('.media-group img.img-front, .media-group video').forEach
  360.     (item =>
  361.         {
  362.             count++;
  363.             item.closest('.media-group').removeAttribute('id');
  364.             item.closest('.media-group').id=count;
  365.         }
  366.     );
  367. }
  368.  
  369. function playerSeekables()
  370. {
  371.     var btn = document.createElement('button');
  372.     var backwardIcon = document.createElement('i');
  373.     backwardIcon.classList.add('fas', 'fa-forward', 'fa-flip-horizontal');
  374.     btn.append(backwardIcon);
  375.     btn.title = "Back 10 seconds";
  376.     btn.addEventListener('click', seekNeg);
  377.         function seekNeg()
  378.         {
  379.             this.closest('.video').querySelector('video').currentTime -= 10;
  380.         }
  381.     function seekPos()
  382.         {
  383.             this.closest('.video').querySelector('video').currentTime += 10;
  384.         }
  385.     var btn2 = document.createElement('button');
  386.     var forwardIcon = document.createElement('i');
  387.     forwardIcon.classList.add('fas', 'fa-forward');
  388.     btn2.append(forwardIcon);
  389.     btn2.title = 'Forward 10 seconds';
  390.     btn2.onclick = seekPos;
  391.     var flipIcon = document.createElement('i');
  392.     flipIcon.classList.add('fas','fa-sort', 'fa-rotate-90', 'fa-2x', 'ml-10');
  393.     const flipBtn = document.createElement('button');
  394.     flipBtn.append(flipIcon);
  395.     flipBtn.classList.add('mirror-btn');
  396.     flipBtn.onclick = flip;
  397.  
  398.     return {btn, btn2, flipBtn};
  399.    
  400. }
  401.  
  402. function flip()
  403.         {
  404.             let flipper = this.closest('.mirror-btn');
  405.             if (this.closest('.mirror-btn').classList.contains('flipped'))
  406.                 {
  407.                     this.closest('.video').querySelector('video').style.transform = '';
  408.                     flipper.classList.toggle('flipped');
  409.                     return;
  410.                 }
  411.             this.closest('.video').querySelector('video').style.transform = 'rotateY(170deg)';
  412.             flipper.classList.add('flipped');
  413.         }
  414.  
  415. function replaceAdWithButtons()
  416. {
  417.     const ad = document.getElementById('bubble');
  418.     ad.removeAttribute('href');
  419.     ad.textContent = '';
  420.     ad.style.display='block';
  421.     const sbsBtn = document.createElement('button');
  422.     sbsBtn.textContent = 'SBS: OFF';
  423.     const clonerBtn = document.createElement('button');
  424.     clonerBtn.textContent = 'CLONER: OFF';
  425.     sbsBtn.classList.add('btn', 'btn-sm', 'btn-pink', 'sidebyside-btn', 'mr-5', 'mb-5');
  426.     clonerBtn.classList.add('btn', 'btn-sm', 'btn-pink', 'cloner', 'mb-5');
  427.     sbsBtn.addEventListener('click', sideBySide);
  428.     clonerBtn.addEventListener('click', cloneFunction);
  429.    
  430.     ad.append(sbsBtn, clonerBtn);
  431. }
  432.  
  433. function allowPToPause(videoToAllow)
  434. {
  435.     videoToAllow.parentElement.onkeydown = function(event){
  436.         if(event.key == 'p' || event.key == ' ')
  437.         {
  438.             videoToAllow.parentElement.querySelector('.vjs-play-control').click();
  439.         }
  440.         else if (event.key == 'ArrowRight')
  441.         {
  442.             videoToAllow.currentTime+=10;
  443.         }
  444.         else if (event.key == 'ArrowLeft')
  445.         {
  446.             videoToAllow.currentTime-=10;
  447.         }
  448.         else if (event.key == 'r')
  449.         {
  450.             const rng = Math.random() * (videoToAllow.duration - 1);
  451.             videoToAllow.currentTime = rng;
  452.         }
  453.         else if (event.key == 'x')
  454.         {
  455.             if (videoToAllow.parentElement.querySelector('.mirror-btn')!= null)
  456.             {
  457.                videoToAllow.parentElement.querySelector('.mirror-btn').click();
  458.                return;
  459.             }
  460.             if (videoToAllow.classList.contains('flipped'))
  461.             {
  462.                 videoToAllow.style.transform = '';
  463.                 videoToAllow.classList.remove('flipped');
  464.             }
  465.             else
  466.             {
  467.                 videoToAllow.style.transform = 'rotateY(173deg)';
  468.                 videoToAllow.classList.add('flipped');
  469.             }
  470.         }
  471.         else if (event.key == 'f')
  472.         {
  473.             videoToAllow.parentElement.querySelector('.vjs-fullscreen-control').click();
  474.         }
  475.         else if (!isNaN(event.key) && event.key != ' ')
  476.         {
  477.             videoToAllow.currentTime = (videoToAllow.duration/10) * (event.key);
  478.         }
  479.         else if (event.key == 'z')
  480.         {
  481.             if (!videoToAllow.classList.contains('zoomed'))
  482.             {
  483.                 videoToAllow.style.scale = 1.6;
  484.             }
  485.             else
  486.             {
  487.                 videoToAllow.style.scale= 1;
  488.             }
  489.             videoToAllow.classList.toggle('zoomed');
  490.         }
  491.         else if (event.key == 't')
  492.         {
  493.             if (!document.querySelector('.sea-css'))
  494.             {
  495.                 let css = document.createElement('link');
  496.                 css.href='https://unpkg.com/@videojs/themes@1/dist/sea/index.css';
  497.                 css.classList.add('sea-css');
  498.                 css.rel='stylesheet';
  499.                 document.head.appendChild(css);
  500.  
  501.                 css = document.createElement('link');
  502.                 css.href='https://unpkg.com/@videojs/themes@1/dist/forest/index.css';
  503.                 css.classList.add('sea-css');
  504.                 css.rel='stylesheet';
  505.                 document.head.appendChild(css);
  506.  
  507.                 css = document.createElement('link');
  508.                 css.href='https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css';
  509.                 css.classList.add('sea-css');
  510.                 css.rel='stylesheet';
  511.                 document.head.appendChild(css);
  512.  
  513.                 css = document.createElement('link');
  514.                 css.href='https://unpkg.com/@videojs/themes@1/dist/city/index.css';
  515.                 css.classList.add('sea-css');
  516.                 css.rel='stylesheet';
  517.                 document.head.appendChild(css);
  518.             }
  519.             const themes = ["vjs-theme-city","vjs-theme-fantasy", "vjs-theme-sea", "vjs-theme-forest"]
  520.             const random = Math.floor(Math.random() * themes.length);
  521.             videoToAllow.parentElement.classList.remove("vjs-theme-city")
  522.             videoToAllow.parentElement.classList.remove("vjs-theme-fantasy")
  523.             videoToAllow.parentElement.classList.remove("vjs-theme-sea")
  524.             videoToAllow.parentElement.classList.remove("vjs-theme-forest")
  525.             videoToAllow.parentElement.classList.toggle(themes[random]);
  526.         }
  527.     };
  528. }
  529.  
  530. function playerVersion(data)
  531. {
  532.         const mediaDiv = document.createElement('div');
  533.         const videoDiv = document.createElement('div');
  534.         mediaDiv.classList.add('media-group');
  535.         videoDiv.classList.add('video');
  536.  
  537.         const mainMedia = document.querySelector('.media-group');
  538.         mainMedia.parentElement.appendChild(mediaDiv);
  539.         mediaDiv.appendChild(videoDiv);
  540.         const video = document.createElement('video');
  541.         video.classList.add('video-js', 'vjs-16-9');
  542.         video.controls = true;
  543.         video.poster=data.bi;
  544.    
  545.         const src = document.createElement('source');
  546.         src.setAttribute('src', data.urL);
  547.         video.appendChild(src);
  548.         videoDiv.appendChild(video);
  549.         var player = videojs(video);
  550.         video.preload="none";
  551.        
  552.         let btn = playerSeekables().btn;
  553.         let btn2 = playerSeekables().btn2;
  554.         let flipper = playerSeekables().flipBtn;
  555.         mediaDiv.querySelector('.vjs-control-bar').insertAdjacentElement("afterbegin", btn);
  556.         mediaDiv.querySelector('.vjs-play-control').insertAdjacentElement("afterend", btn2);
  557.         mediaDiv.querySelector('.vjs-fullscreen-control').insertAdjacentElement("beforebegin", flipper);
  558.        
  559.         allowPToPause(video);
  560. }
  561.  
  562. function getVidData(vidDiv)
  563. {
  564.     const urL = vidDiv.querySelector('.video video source').src;
  565.     var img = vidDiv.querySelector('.vjs-poster');
  566.     var bi = img.style.backgroundImage.slice(4, -1).replace(/"/g, "");
  567.    
  568.     return {urL, bi};
  569. }
  570. // remove original videos and get their poster+vid url
  571. function removeWithData(vidDiv)
  572. {
  573.     let data = getVidData(vidDiv);
  574.     vidDiv.remove();
  575.     return data;
  576. }
  577.  
  578. function videoCleanseReplace()
  579. {
  580.     const vidDivs = document.getElementsByClassName('video');
  581.     console.log("started cleansing");
  582.     Array.from(vidDivs).forEach(vidDiv =>
  583.     {
  584.         let data = removeWithData(vidDiv);
  585.         playerVersion(data);
  586.     });
  587.     //showing message on load
  588.     const messageDiv = document.querySelector('#user_message');
  589.     messageDiv.textContent = 'videos replaced';
  590.     setTimeout(() => {
  591.         messageDiv.style.display='none';
  592.     }, 5000);
  593.     // deleting empty first video section
  594.      Array.from(document.querySelectorAll('.video-lg')).forEach(lgVid => lgVid.parentElement.remove());
  595.    
  596.    
  597. }
  598.  
  599. function sideBySide()
  600. {
  601.     if (document.querySelectorAll('.media-group.col-sm-6').length > 0)
  602.     {
  603.         const sideVideos = Array.from(document.querySelectorAll('.media-group.col-sm-6'));
  604.         sideVideos.forEach(group =>
  605.         {
  606.             group.classList.remove('col-sm-6');
  607.         });
  608.         document.querySelector('a .sidebyside-btn').textContent = 'SBS: OFF';
  609.     }
  610.     else
  611.     {
  612.         const sideVideos = Array.from(document.querySelectorAll('.media-group.col-sm-6'));
  613.         sideVideos.forEach(group =>
  614.         {
  615.             group.classList.remove('col-sm-6');
  616.         });
  617.         const groups = Array.from(document.querySelectorAll('.media-group'));
  618.         groups.forEach(group =>
  619.         {
  620.            group.classList.add('col-sm-6');
  621.         });
  622.         document.querySelector('a .sidebyside-btn').textContent = 'SBS: ON';
  623.        
  624.     }
  625. }
  626.  
  627. function showMessage()
  628. {
  629.     if (document.querySelector('.video') == null)
  630.     {
  631.         return;
  632.     }
  633.     const messageDiv = document.querySelector('#user_message');
  634.     messageDiv.textContent = 'videos replaced + multi-play ON';
  635.     messageDiv.style.display='block';
  636.     messageDiv.style.width="400px";
  637.     setTimeout(() => {
  638.         messageDiv.style.display='none';
  639.         messageDiv.style.width="200px";
  640.     }, 1500);
  641. }
  642.  
  643. // adding clone button to each video
  644. function cloneFunction()
  645. {
  646.     if (document.querySelector('.video video') == null)
  647.     {
  648.         console.log("no videos");
  649.         return;
  650.     }
  651.     // pressing button again up top should clear the clone buttons if second time pressing it
  652.     if (document.getElementsByClassName('clone-btn').length > 0)
  653.     {
  654.         const allButtons = document.querySelectorAll('.clone-btn');
  655.         allButtons.forEach(button => button.remove());
  656.         document.querySelector('a .cloner').textContent = 'CLONER: OFF';
  657.         return;
  658.     }
  659.     const videoDivs = document.querySelectorAll('.video');
  660.     videoDivs.forEach(videoDiv =>
  661.     {
  662.         const cloneBtn = document.createElement('button');
  663.         cloneBtn.style.position = 'absolute';
  664.         cloneBtn.style.top = '0px';
  665.         cloneBtn.style.zIndex = 1;
  666.         cloneBtn.style.left="94.75%";
  667.         if (videoDiv.parentElement.classList.contains('col-sm-6'))
  668.         {
  669.             cloneBtn.style.left="89%";
  670.         }
  671.         cloneBtn.style.transition = 'all 0.6s ease-in-out';
  672.         cloneBtn.style.opacity=0;
  673.         cloneBtn.classList.add('btn','btn-sm','btn-default','clone-btn');
  674.         cloneBtn.textContent = 'CLONE';
  675.        
  676.         videoDiv.addEventListener('mouseover', function()
  677.                         {
  678.                             cloneBtn.style.opacity=1;
  679.                         });
  680.         videoDiv.addEventListener('mouseout', function()
  681.                         {
  682.                                 cloneBtn.style.opacity = 0;
  683.                         });
  684.        
  685.         videoDiv.insertBefore(cloneBtn, videoDiv.firstElementChild);
  686.         cloneBtn.onclick = cloneThis;
  687.     });
  688.     document.querySelector('a .cloner').textContent = 'CLONER: ON';
  689. }
  690.  
  691. function cloneThis()
  692. {
  693.    
  694.     if (document.querySelector('.video video') == null)
  695.     {
  696.         console.log("no videos");
  697.         return;
  698.     }
  699.     else
  700.     {
  701.         const videoDivData = this.parentElement;
  702.         let data = getVidData(videoDivData);
  703.         const videoOriginal = videoDivData.querySelector('video');
  704.        
  705.        
  706.         const mediaDiv = document.createElement('div');
  707.         const videoDiv = document.createElement('div');
  708.         mediaDiv.classList.add('media-group');
  709.         if (videoOriginal.closest('.media-group').classList.contains('col-sm-6'))
  710.         {
  711.             mediaDiv.classList.add('col-sm-6');
  712.         }
  713.         videoDiv.classList.add('video');
  714.  
  715.         const currentMedia = this.parentElement.parentElement;
  716.         currentMedia.insertAdjacentElement("afterend", mediaDiv);
  717.  
  718.         mediaDiv.appendChild(videoDiv);
  719.         const video = document.createElement('video');
  720.         video.classList.add('video-js', 'vjs-16-9');
  721.         video.controls = true;
  722.         video.poster=data.bi;
  723.    
  724.         const src = document.createElement('source');
  725.         src.setAttribute('src', data.urL);
  726.         video.appendChild(src);
  727.         videoDiv.appendChild(video);
  728.         var player = videojs(video);
  729.         // var player = videojs(duplicateVid);
  730.         allowPToPause(video);
  731.         console.log("found videos");
  732.     }
  733. }
  734.  
  735. function showHideMenuE()
  736. {
  737.     document.addEventListener('keypress', function(event)
  738.     {
  739.        if (event.key == 'e')
  740.        {
  741.            document.querySelector('#bubble').classList.toggle('hidden');
  742.        }
  743.        else if (event.key == 's' && event.target != document.querySelector('#q') && event.target != document.querySelector('#content'))
  744.        {
  745.            sideBySide();
  746.        }
  747.        else if (event.key == 'v' && event.target != document.querySelector('#q') && event.target != document.querySelector('#content'))
  748.        {
  749.            if (!!document.querySelector('div.vjs-playing'))
  750.            {
  751.                document.querySelector('div.vjs-playing').scrollIntoView();
  752.            }
  753.        }
  754.     });
  755.    
  756. }
  757.  
  758. function cleanOnLoad()
  759. {
  760.     mainFunction();
  761.     videoCleanseReplace();
  762.     showMessage();
  763.     addProperID();
  764.     addTransitionToID();
  765.     copySourceFromAlbum();
  766.     checkForChapters();
  767.     showHideMenuE();
  768. }
  769. cleanOnLoad();