// ==UserScript==
// @name        4chan - YouTube Playlist
// @description Wraps all YouTube videos inside a thread into a playlist
// @namespace   4chan-yt-playlist
// @version     2.4.9
// @include     https://boards.4chan.org/*/thread/*
// @include     https://warosu.org/*/thread/*
// @run-at      document-start
// @grant       GM_setValue
// @grant       GM_getValue
// ==/UserScript==
const e=new class{constructor(){this.initFinished=!1,this.fourchan="boards.4chan.org"===location.hostname,this.warosu="warosu.org"===location.hostname,this.native=!0,this.fixedNav=!1,this.classicNav=!1,this.autohideNav=!1,this.fourchanX=!1;const e=location.pathname.slice(1).split("/thread/");this.board=e[0],this.thread=e[1],this.warosu&&(this.initFinished=!0),document.addEventListener("4chanMainInit",(()=>{this.native=!unsafeWindow.Config.disableAll,this.fixedNav=unsafeWindow.Config.dropDownNav,this.classicNav=unsafeWindow.Config.classicNav,this.autohideNav=unsafeWindow.Config.autoHideNav,this.initFinished=!0})),document.addEventListener("4chanXInitFinished",(()=>{this.fourchanX=!0}))}get fixedHeader(){return!!this.fourchanX&&document.documentElement.classList.contains("fixed")}get autohideHeader(){return!!this.fourchanX&&document.documentElement.classList.contains("autohide")}};class t{constructor(t){function a(e){if(!t.player)return;if(!e.target?.dataset.page)return;const a=e.target.dataset.page||"0";t.player.cuePlaylist(t.toPages()[parseInt(a)])}function o(){if(!t.checking&&!t.isEmpty())return t.player?t.dialog?.toggle():function(){if(t.state>0||t.player)return;if(t.state<0)return o();t.state=1;const a=document.createElement("script");function o(){const t="Unable to load YouTube Iframe API.\nPress F12 and follow the instructions in the console.";e.fourchanX||alert(t),document.dispatchEvent(new CustomEvent("CreateNotification",{detail:{type:"error",content:t}})),console.info("Unable to load YouTube Iframe API\n\n4chanX's Settings > Advanced > Javascript Whitelist\n\n  https://www.youtube.com/iframe_api\n  https://www.youtube.com/s/player/\n\nFilters in your AdBlock extension\n\n  @@||www.youtube.com/iframe_api$script,domain=4chan.org\n  @@||www.youtube.com/s/player/*$script,domain=4chan.org\n")}a.src="https://www.youtube.com/iframe_api",document.head.appendChild(a),setTimeout((()=>{t.state<1||(t.state=-1,o())}),5e3),a.onerror=()=>{o(),t.state=-1}}()}function s(a){if(t.dialog.self)switch(a.type){case"mouseup":if(!t.dialog.dragging)return;t.dialog.dragging=!1,document.removeEventListener("mousemove",n),GM_setValue((e.fourchan?"4chan":"Warosu")+" Dialog Coordinates",[t.dialog.self.style.top,t.dialog.self.style.right,t.dialog.self.style.bottom,t.dialog.self.style.left]);break;case"mousedown":if(0!==a.button)return;a.preventDefault();const o=t.dialog.self.getBoundingClientRect();if(t.dialog.snapshot.size[0]=o.width,t.dialog.snapshot.size[1]=o.height,t.dialog.snapshot.cursor[0]=a.x-o.x,t.dialog.snapshot.cursor[1]=a.y-o.y,e.fixedNav||e.fixedHeader){const a=document.getElementById(e.fourchanX?"header-bar":e.classicNav?"boardNavDesktop":"boardNavMobile");a&&(t.dialog.snapshot.topbar[0]=a.getBoundingClientRect().y||0,t.dialog.snapshot.topbar[1]=a.offsetHeight||0,t.dialog.snapshot.topbar[2]=e.fourchanX?e.fixedHeader:e.fixedNav,t.dialog.snapshot.topbar[3]=e.fourchanX?e.autohideHeader:e.autohideNav)}t.dialog.dragging=!0,document.addEventListener("mousemove",n)}}function n(e){if(!t.dialog.self)return;e.preventDefault();const a=document.documentElement.clientWidth,o=document.documentElement.clientHeight,s=e.x-t.dialog.snapshot.cursor[0],n=e.y-t.dialog.snapshot.cursor[1],i=a-t.dialog.snapshot.size[0];let r=0,l=o-t.dialog.snapshot.size[1];if(t.dialog.snapshot.topbar[2]){const[e,a,o,s]=t.dialog.snapshot.topbar;o&&!s&&(e<a?r+=a:l-=a)}n>l?(t.dialog.self.style.bottom="0px",t.dialog.self.style.removeProperty("top")):(t.dialog.self.style.top=n>r?100*n/o+"%":r+"px",t.dialog.self.style.removeProperty("bottom")),s>i?(t.dialog.self.style.right="0px",t.dialog.self.style.removeProperty("left")):(t.dialog.self.style.left=s>0?100*s/a+"%":"0px",t.dialog.self.style.removeProperty("right"))}function i(e){e.forEach(((e,a)=>{if(e&&t.dialog?.self)switch(a){case 0:t.dialog.self.style.top=e;break;case 1:t.dialog.self.style.right=e;break;case 2:t.dialog.self.style.bottom=e;break;case 3:t.dialog.self.style.left=e}}))}this.dragging=!1,this.snapshot={size:[0,0],cursor:[0,0],topbar:[0,0,!1,!1]},document.addEventListener("DOMContentLoaded",(()=>{document.body.insertAdjacentHTML("beforeend",'<div id="playlist-embed" class="dialog hide"><div><a class="reload" href="javascript:;" title="Reload playlist"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M370.7 133.3C339.5 104 298.9 88 255.8 88c-77.5 .1-144.3 53.2-162.8 126.9-1.3 5.4-6.1 9.2-11.7 9.2H24.1c-7.5 0-13.2-6.8-11.8-14.2C33.9 94.9 134.8 8 256 8c66.4 0 126.8 26.1 171.3 68.7L463 41C478.1 25.9 504 36.6 504 57.9V192c0 13.3-10.7 24-24 24H345.9c-21.4 0-32.1-25.9-17-41l41.8-41.7zM32 296h134.1c21.4 0 32.1 25.9 17 41l-41.8 41.8c31.3 29.3 71.8 45.3 114.9 45.3 77.4-.1 144.3-53.1 162.8-126.8 1.3-5.4 6.1-9.2 11.7-9.2h57.3c7.5 0 13.2 6.8 11.8 14.2C478.1 417.1 377.2 504 256 504c-66.4 0-126.8-26.1-171.3-68.7L49 471C33.9 486.1 8 475.4 8 454.1V320c0-13.3 10.7-24 24-24z" fill="currentColor" /></svg></a><ul class="tabs"></ul><div class="move"></div><a class="jump" href="javascript:;" title="Jump to post">→</a><a class="close" href="javascript:;" title="Close">×</a></div><div id="playlist"></div></div>');const o=this.self?.querySelector("ul"),n=this.self?.querySelector(".reload"),r=this.self?.querySelector(".move"),l=this.self?.querySelector(".jump"),c=this.self?.querySelector(".close");switch(o.addEventListener("click",a),n.addEventListener("click",(function(e){const a=e.currentTarget?.firstElementChild;return a?.classList.add("spin"),t.reload()})),r.addEventListener("mousedown",s),l.addEventListener("click",(()=>{t.jumpTo(t.track)})),c.addEventListener("click",(()=>{this.toggle(!0)})),document.addEventListener("mouseup",s),!0){case e.fourchan:i(GM_getValue("4chan Dialog Coordinates",["10%","5%",null,null]));break;case e.warosu:i(GM_getValue("Warosu Dialog Coordinates",["10%","5%",null,null]))}})),document.addEventListener("DOMContentLoaded",(()=>{switch(!0){case e.fourchan:document.getElementById("navtopright")?.insertAdjacentHTML("afterbegin",'[<a class="playlist-toggle native" href="javascript:;" title="Toggle YouTube playlist">Playlist</a>] '),document.getElementById("navbotright")?.insertAdjacentHTML("afterbegin",'[<a class="playlist-toggle native" href="javascript:;" title="Toggle YouTube playlist">Playlist</a>] '),document.addEventListener("4chanParsingDone",(()=>{document.getElementById("settingsWindowLinkClassic")?.insertAdjacentHTML("beforebegin",'<a class="playlist-toggle native" href="javascript:;" title="Toggle YouTube playlist">Playlist</a>'),document.getElementById("settingsWindowLinkMobile")?.insertAdjacentHTML("beforebegin",'<a class="playlist-toggle native" href="javascript:;" title="Toggle YouTube playlist">Playlist</a> '),["settingsWindowLinkClassic","settingsWindowLinkMobile"].forEach((e=>{(document.getElementById(e)?.querySelector(".playlist-toggle")).onclick=o}))})),["navtopright","navbotright"].forEach((e=>{(document.getElementById(e)?.querySelector(".playlist-toggle")).onclick=o}));break;case e.warosu:const t=document.getElementById("p"+e.thread)?.querySelector("a:last-of-type");t?.nextElementSibling?.insertAdjacentHTML("beforebegin",'[<a class="playlist-toggle" href="javascript:;" title="Toggle YouTube playlist">Playlist</a>]'),document.querySelector(".playlist-toggle").onclick=o}})),document.addEventListener("4chanXInitFinished",(()=>{document.getElementById("shortcut-qr")?.insertAdjacentHTML("beforebegin",'<span id="shortcut-playlist" class="shortcut brackets-wrap"><a class="playlist-toggle disabled" title="Toggle YouTube playlist" href="javascript:;"><span class="icon--alt-text">YouTube Playlist</span><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z" fill="currentColor" /></svg></a></span>'),document.querySelector(".playlist-toggle:not(.native)").onclick=o}))}get self(){return document.getElementById("playlist-embed")}get toggleBtn(){return document.querySelector(".playlist-toggle:not(.native)")}toggle(t){if(t||!this.self?.classList.contains("hide")){if(this.self?.classList.add("hide"),!e.fourchanX)return;const t=document.getElementById("shortcut-playlist")?.firstElementChild;t?.classList.add("disabled")}else{if(this.self?.classList.remove("hide"),!e.fourchanX)return;const t=document.getElementById("shortcut-playlist")?.firstElementChild;t?.classList.remove("disabled")}}updateTabs(e){const t=this.self?.querySelector("ul");if(!t)return console.error("No <ul> present in dialog.");for(;t?.lastChild;)t.removeChild(t.lastChild);for(let a=0;a<e;a++)t.insertAdjacentHTML("beforeend",`<li><a href="javascript:;" data-page="${a}">${a+1}</a></li>`)}}const a=new class{constructor(){if(this.checking=!1,this.mutated=!1,this.playing=!1,this.state=0,this.posts={},this.dialog=new t(this),this.player=null,this.track="",this.regex=/(?:https?:\/\/)?(?:www\.)?youtu(?:\.be\/|be.com\/\S*?(?:watch|embed)(?:(?:(?=\/[-a-zA-Z0-9_]{11,}(?!\S))\/)|(?:\S*?v=|v\/)))([-a-zA-Z0-9_]{11,})/g,!e.fourchan&&!e.warosu)throw new Error("Website not supported..");async function a(e,t){e.checking=!0,e.parsePosts(t).then((t=>{e.player&&t>0&&(e.mutated=!0)})).finally((()=>{e.checking=!1,e.mutated&&!e.playing&&e.updatePlayer()}))}document.addEventListener("DOMContentLoaded",(async()=>{this.checking=!0;const t=await async function(){switch(!0){case e.fourchan:const t=await fetch("https://a.4cdn.org/"+e.board+"/thread/"+e.thread+".json"),{posts:a}=await t.json();return a.map((e=>[e.no.toString(),e.com||""]));case e.warosu:return[...document.querySelectorAll(".comment:not(:has(img[alt='[DELETED]'])) blockquote")].map((e=>[e.parentElement?.id.slice(1)??"",e.innerHTML]));default:return[]}}();if(t.length<1)throw new Error("No post was found.");this.parsePosts(t).finally((()=>this.checking=!1))})),document.addEventListener("ThreadUpdate",(t=>{if(!e.fourchanX)return;if(t.detail[404])return;a(this,t.detail.newPosts.map((e=>{const t=e.split(".").pop();return[t,document.getElementById("m"+t)?.innerHTML||""]})))})),document.addEventListener("4chanThreadUpdated",(t=>{if(e.fourchanX)return;if(unsafeWindow.thread_archived)return;a(this,[...document.querySelector(".board > .thread").children].slice(-t.detail.count).map((e=>{const t=e.id.split("pc").pop();return[t,document.getElementById("m"+t)?.innerHTML||""]})))})),document.addEventListener("4chanQRPostSuccess",(t=>{if(e.fourchanX)return;const o=t.detail.postId.toString();a(this,[[o,document.getElementById("m"+o)?.innerHTML||""]])}))}async parsePosts(e){const t=e.reduce(((e,t)=>{const a=t[1].replace(/<wbr>/g,""),o=Array.from(new Set([...a.matchAll(this.regex)].map((e=>e[1]))));return o.length>0&&e.push([t[0],o]),e}),[]);if(t.length<1)return Promise.resolve(0);const a=t.map((async e=>Promise.allSettled(e[1].map((e=>this.checkLink(e)))).then((t=>[e[0],t.reduce(((e,t)=>("fulfilled"===t.status&&e.push(t.value),e)),[])]))));return Promise.allSettled(a).then((e=>e.reduce(((e,t)=>("fulfilled"===t.status&&e.push(t.value),e)),[]))).then((e=>{for(const t of e)this.posts[t[0]]=t[1];return e.length}))}async checkLink(e){return fetch("https://www.youtube.com/oembed?url=https://youtu.be/"+e+"&format=json",{method:"HEAD"}).then((t=>[e,t.ok]))}updatePlayer(){if(!this.player)return;const e=this.toPages(),t=e.findIndex((e=>e.includes(this.track)));if(t>-1){const a=e[t].indexOf(this.track),o=this.player.getDuration(),s=this.player.getCurrentTime(),n=s===o&&o>0,i=199===a,r=i&&n&&t<e.length-1?t+1:t,l=!i&&n?a+1:a;if(this.playing)this.player.loadPlaylist(e[r],l),console.debug("loadPlaylist()");else{const t=s<o?s:void 0;this.player.cuePlaylist(e[r],l,t),console.debug("cuePlaylist()")}}else console.debug("Can't find last played track in the playlist. Resetting to first page.."),this.playing?this.player.loadPlaylist(e[0]):this.player.cuePlaylist(e[0]);this.mutated=!1;const a=document.getElementById("playlist-embed")?.querySelector(".tabs");a&&a.children.length!==e.length&&this.dialog?.updateTabs(e.length)}toPages(){const e=[],t=Object.values(this.posts).flat().reduce(((e,t)=>{const[a,o]=t;return o&&e.indexOf(a)<0&&e.push(a),e}),[]);for(let a=0;a<t.length;a+=200){const o=t.slice(a,a+200);e.push(o)}return e}jumpTo(t){if(!t)return;const a=function(e,t){for(const a in e)for(const o of e[a])if(o.includes(t))return a;return null}(this.posts,t);return document.getElementById((e.fourchan?"pc":"p")+a)?.scrollIntoView()}isEmpty(){for(const e in this.posts)if(Object.prototype.hasOwnProperty.call(this.posts,e))return!1;return!0}reload(){if(!this.player)return;const e=this.toPages(),t=e.findIndex((e=>e.includes(this.track)));if(t>-1){const a=e[t].indexOf(this.track),o=this.player.getCurrentTime();this.playing?this.player.loadPlaylist(e[t],a,o):this.player.cuePlaylist(e[t],a,o)}else this.playing?this.player.loadPlaylist(e[0]):this.player.cuePlaylist(e[0])}};unsafeWindow.onYouTubeIframeAPIReady=()=>{a.player=new YT.Player("playlist",{width:"512",height:"288",playerVars:{fs:0,disablekb:1,rel:0},events:{onReady:function(t){a.state=0;const o=a.toPages();a.dialog.updateTabs(o.length);let s={};try{s=JSON.parse(localStorage.getItem("4chan-yt-playlist-history")||"{}")}catch(e){console.error("Failed to parse playlist history from local storage"),console.error(e)}const n=s[e.board+"."+e.thread]||null,i=n?o.find((e=>e.includes(n))):null;n&&i?t.target.cuePlaylist(i,i.indexOf(n)):t.target.cuePlaylist(o[0]);a.dialog.toggle()},onStateChange:function(t){if(0==t.data){const e=a.toPages(),o=e.findIndex((e=>e.includes(a.track)));o>-1&&o<e.length-1&&t.target.loadPlaylist(e[o+1])}else if(-1==t.data){a.track=t.target.getVideoUrl().split("=").pop()||"";let o={};try{o=JSON.parse(localStorage.getItem("4chan-yt-playlist-history")||"{}")}catch(e){console.error("Failed to parse playlist history from local storage."),console.error(e)}o[e.board+"."+e.thread]=a.track,localStorage.setItem("4chan-yt-playlist-history",JSON.stringify(o)),a.mutated&&a.updatePlayer();const s=a.dialog.self?.querySelector(".reload .icon");s?.classList.remove("spin"),a.player?.getIframe().blur()}a.playing=1==t.data||3==t.data},onError:function(t){let a="",o="";const s=t.target.getPlaylistIndex(),n=t.target.getPlaylist().length;switch(+t.data){case 5:case 100:case 101:case 150:s+1<n&&t.target.nextVideo();case 101:case 150:a="warning",o="The owner of the requested video does not allow it to be played in embedded players.";break;case 2:a="error",o="The request contains an invalid parameter value.";break;case 5:a="error",o="The requested content cannot be played in an HTML5 player.";break;case 100:a="warning",o="The video has been removed or marked as private."}const i="Error - Video #"+(s+1)+"\n"+o;if(e.fourchanX)document.dispatchEvent(new CustomEvent("CreateNotification",{detail:{type:a,content:i,lifetime:10}}));else switch(a){case"error":console.error(i);break;case"warning":console.warn(i);break;default:console.info(i)}}}})},document.addEventListener("DOMContentLoaded",(()=>{e.fourchan&&document.documentElement.classList.add("fourchan"),e.warosu&&document.documentElement.classList.add("warosu");const t=[["yotsuba","yotsubanew"],["yotsuba-b","yotsubabnew"],["futaba","futabanew"],["burichan","burichannew"],["photon","photon"],["tomorrow","tomorrow"]];if(document.head.insertAdjacentHTML("beforeend","<style>:root.yotsuba{--fourchan-native-background-color:#f0e0d6;--fourchan-native-border-color:#d9bfb7}:root.yotsuba-b{--fourchan-native-background-color:#d6daf0;--fourchan-native-border-color:#b7c5d9}:root.futaba{--fourchan-native-background-color:#f0e0d6;--fourchan-native-border-color:#d9bfb7}:root.burichan{--fourchan-native-background-color:#d6daf0;--fourchan-native-border-color:#b7c5d9}:root.tomorrow{--fourchan-native-background-color:#282a2e;--fourchan-native-border-color:#282a2e}:root.photon{--fourchan-native-background-color:#ddd;--fourchan-native-border-color:#ccc}#playlist-embed{position:fixed;padding:1px 4px}:root:not(.fourchan-x) #playlist-embed{border-width:1px;border-style:solid;box-shadow:0 1px 2px rgba(0,0,0,.15)}:root.fourchan:not(.fourchan-x) #playlist-embed{background-color:var(--fourchan-native-background-color);border-color:var(--fourchan-native-border-color)}:root.warosu #playlist-embed{background-color:var(--darker-background-color);border-color:var(--even-darker-background-color)}:root.warosu #playlist-embed a{text-decoration:none}#playlist-embed.hide{display:none}#playlist-embed>div:first-child{display:flex}#playlist-embed .icon{height:12px}#playlist-embed .icon.spin{transform:rotate(360deg);-webkit-transition:transform .25s ease-in;-moz-transition:transform .25s ease-in;-ms-transition:transform .25s ease-in;-o-transition:transform .25s ease-in;transition:transform .25s ease-in}:root.fourchan #playlist-embed .reload{transform:translate(0,1px)}#playlist-embed .reload{margin-right:.25em}#playlist-embed ul,#playlist-embed li{margin:0;padding:0}#playlist-embed li{display:inline-block;list-style-type:none}#playlist-embed li:only-of-type{display:none}#playlist-embed li:not(:only-of-type):not(:last-of-type)::after{content:'•';margin:0 .25em}#playlist-embed .move{flex:1;cursor:move}#playlist-embed .jump{margin-top:-1px}#playlist-embed .close{margin-left:4px}:root.shortcut-icons:not(.fourchan-xt) #shortcut-playlist .icon--alt-text{font-size:0;visibility:hidden}:root:not(.fourchan-xt) #shortcut-playlist .icon{height:15px;width:16px;margin-bottom:-3px}</style>"),!e.fourchan)return;a(unsafeWindow.Main.stylesheet.replace(/_/g,""));function a(a){if(e.fourchanX)return;const o=document.styleSheets[0].href?.match(/css\/(.+)\..+\.css$/)?.[1]||"",s=t.map((e=>e[1])).indexOf(a||o);s<0||document.documentElement.classList.contains(t[s][0])||(t.forEach((e=>document.documentElement.classList.remove(e[0]))),document.documentElement.classList.add(t[s][0]))}new MutationObserver((()=>{a()})).observe(document.querySelector("link[rel='stylesheet']"),{attributes:!0})}));