☰

4chan X Thread Playback

Plays back threads on 4chan X

Jak nainstalovat

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

Jak nainstalovat

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!) 

  1. // ==UserScript==
  2. // @name 4chan X Thread Playback
  3. // @namespace VSJPlus
  4. // @license GNU GPLv3
  5. // @description Plays back threads on 4chan X
  6. // @version 1.0.3
  7. // @match *://boards.4chan.org/*/*/*
  8. // @match *://boards.4channel.org/*/*/*
  9. // @run-at document-start
  10. // @require https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
  11. // @require https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
  12. // @require https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js
  13. // @grant GM.info
  14. // @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAkUlEQVQ4T6WQAQ6AMAgD9yf/5Gv906QYSBGGRk1OXFuaxbEf2y/0Necc8uCl4FxRZa4WEWQ6HPDgIhNuUAUePRFSwIDeeV6gH02YsRx2QoELTQkvel6MIKhYlFTL4NUNoDEhzwUw78vAdJ6poFqGZtiZvbbAAuxVmVTAsyswP/0DngbOXMB+KFiBBSZ4KPjONk6FWw9BoS3PSwAAAABJRU5ErkJggg==
  15. // ==/UserScript==
  16. console.log('4chan X Playback');
  17.  
  18. (async function() {
  19. 	let isChanX;
  20. 	let fourChanXInitFinished = new Promise(res => {
  21. 		document.addEventListener(
  22. 			"4chanXInitFinished",
  23. 			function (event) {
  24. 				if (
  25. 					document.documentElement.classList.contains("fourchan-x") &&
  26. 					document.documentElement.classList.contains("sw-yotsuba")
  27. 				) {
  28. 					isChanX = true;
  29. 					res();
  30. 				}
  31. 			}
  32. 		);
  33. 	});
  34.  
  35. 	async function appendStyle() {
  36. 		var head = document.head;
  37.  
  38. 		if(!head) {
  39. 			head = await new Promise(res => {
  40. 				let obs = new MutationObserver(mutations => {
  41. 					for(let mutation of mutations) {
  42. 						if(!mutation.addedNodes || !mutation.addedNodes.length)
  43. 							continue;
  44. 						for(let node of mutation.addedNodes) {
  45. 							if(node.matches('head')) {
  46. 								obs.disconnect();
  47. 								res(node);
  48. 							}
  49. 						}
  50. 					}
  51. 				});
  52. 				obs.observe(document.documentElement, {childList: true});
  53. 			});
  54. 		}
  55. 		let link = document.createElement('link');
  56. 		link.rel = 'stylesheet';
  57. 		link.style = 'text/css';
  58. 		link.href = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css';
  59. 		head.appendChild(link);
  60.  
  61. 		var style = document.createElement('style');
  62. 		style.type = 'text/css';
  63. 		style.id = 'playbackStyle';
  64.  
  65. 		style.innerHTML = `
  66. 			#playbackUI {
  67. 			    position: absolute;
  68. 			    top: 100%;
  69. 			    margin: 0 auto;
  70. 			    width: 90%;
  71. 			    max-width: 1080px;
  72. 			    box-sizing: border-box;
  73. 			    background-color: #282a2e;
  74. 			    opacity: 0.9;
  75. 			    transition: opacity 100ms;
  76. 			    display: none;
  77. 			    z-index: 1;
  78. 			    box-shadow: 0 0 10px #0008;
  79. 			    padding: 10px;
  80. 			    left: 0;
  81. 			    right: 0;
  82. 			}
  83.  
  84. 			#playbackSlider {
  85. 			    background: #bbb;
  86. 			    border-color: #999;
  87. 			    cursor: pointer;
  88. 			    position: relative;
  89. 			}
  90.  
  91. 			#playbackSlider:hover {
  92. 			    background: #c4c4c4;
  93. 			}
  94.  
  95. 			#playbackSlider #timestampPreview {
  96. 				position: absolute;
  97. 				width: 0;
  98. 				height: 0;
  99. 			}
  100.  
  101. 			#playbackSlider #timestampPreview:after,
  102. 			#playbackSlider .ui-slider-handle.ui-state-active:after {
  103. 				top: unset !important;
  104. 				bottom: 100%;
  105. 				margin-top: unset !important;
  106. 				margin-bottom: 5px;
  107. 				opacity: 0;
  108. 				transition: opacity 100ms;
  109. 			}
  110.  
  111. 			#playbackSlider .ui-slider-handle.ui-state-active:after {
  112. 				margin-bottom: 2px;
  113. 			}
  114.  
  115. 			#playbackSlider:hover #timestampPreview:after,
  116. 			#playbackSlider .ui-slider-handle.ui-state-active:after {
  117. 				animation: none !important;
  118. 				opacity: 1;
  119. 			}
  120.  
  121. 			#playbackSlider .ui-slider-handle:not(.ui-state-active):after,
  122. 			#playbackSlider.ui-state-active #timestampPreview {
  123. 				display: none !important;
  124. 			}
  125.  
  126.  
  127. 			#playbackUI:hover, #playbackUI:focus {
  128. 			    opacity: 1;
  129. 			}
  130.  
  131. 			.playbackEnabled #playbackUI {
  132. 			    display: flex;
  133. 			    flex-direction: row;
  134. 			    align-items: center;
  135. 			}
  136. 			.playbackEnabled #playbackUI #playbackTimeContainer {
  137. 			    flex-shrink: 1;
  138. 			}
  139.  
  140. 			.playbackEnabled #playbackUI #playbackSlider {
  141. 			    flex-grow: 1;
  142. 			    margin: 10px
  143. 			}
  144.  
  145. 			#playbackInputContainer input {
  146. 			    width: 15px;
  147. 			    padding: 0;
  148. 			    margin: 0;
  149. 			    border: 0;
  150. 			    font-size: 12px;
  151. 			    font-weight: bold;
  152. 			}
  153.  
  154. 			input#playbackInputYear {
  155. 			    width: 30px;
  156. 			}
  157.  
  158. 			#playbackTimeContainer {
  159. 			    font-weight: bold;
  160. 			}
  161.  
  162. 			#playbackDisplay > * > * {
  163. 			    cursor: pointer;
  164. 			}
  165.  
  166. 			#playbackDisplay > * > *:hover {
  167. 			    color: #fff;
  168. 			}
  169.  
  170. 			#playbackPauseResume {
  171. 			    width: 20px;
  172. 			    height: 27px;
  173. 			    text-align: center;
  174. 			    display: inline-block;
  175. 			    cursor: pointer;
  176. 			    position: relative;
  177. 			    color: #ccc;
  178. 			    transition: color 100ms;
  179. 			    vertical-align: center;
  180. 			}
  181.  
  182. 			#playbackPauseResume:hover {
  183. 			    color: #fff;
  184. 			}
  185.  
  186. 			#playbackPauseResume:before {
  187. 			    font-size: 20px;
  188. 			    display: block;
  189. 			    position: absolute;
  190. 			    user-select: none;
  191. 			    text-align: center;
  192. 			    top: -1.5px;
  193. 			}
  194.  
  195. 			#playbackPauseResume:not(.pause):before {
  196. 			    content: 'II';
  197. 			    left: 2.5px;
  198. 			    font-weight: 900;
  199. 			}
  200.  
  201. 			#playbackPauseResume.pause:before {
  202. 			    content: '';
  203. 			    width: 13px;
  204. 			    height: 15px;
  205. 			    background-color: #ccc;
  206. 			    left: 5px;
  207. 			    top: 6px;
  208. 			    clip-path: polygon(0 0, 13px 50%, 0 100%);
  209. 			}
  210.  
  211. 			#playbackSkipBack,
  212. 			#playbackSkipAhead {
  213. 			    cursor: pointer;
  214. 			    position: relative;
  215. 			    top: -0.5px;
  216. 			    width: 18px;
  217. 			    height: 20px;
  218. 			    transition: transform 100ms;
  219. 			    transform-origin: 10px 12px;
  220. 			}
  221.  
  222. 			@keyframes skipBack {
  223. 				0% { transform: rotate(0deg); }
  224. 				25% { transform: rotate(-35deg); }
  225. 				50% { transform: rotate(-20deg); }
  226. 				100% { transform: rotate(-25deg); }
  227. 			}
  228.  
  229. 			#playbackSkipBack:active {
  230. 			    transform: rotate(-25deg);
  231. 			    animation: skipBack 50ms;
  232. 			}
  233.  
  234. 			@keyframes skipAhead {
  235. 				0% { transform: rotate(0deg); }
  236. 				25% { transform: rotate(35deg); }
  237. 				50% { transform: rotate(20deg); }
  238. 				100% { transform: rotate(25deg); }
  239. 			}
  240.  
  241. 			#playbackSkipAhead:active {
  242. 			    transform: rotate(25deg);
  243. 			    animation: skipAhead 50ms;
  244. 			}
  245.  
  246. 			#playbackSkipBackContainer {
  247. 			    margin-left: 5px;
  248. 			}
  249.  
  250. 			#playbackSkipBack .skipPath,
  251. 			#playbackSkipAhead .skipPath {
  252. 			    fill: #ccc;
  253. 			    transition: fill 100ms;
  254. 			}
  255.  
  256. 			#playbackSkipBack:hover .skipPath,
  257. 			#playbackSkipAhead:hover .skipPath {
  258. 			    fill: #fff;
  259. 			}
  260.  
  261. 			#playbackSpeedDisplay {
  262. 			    margin-left: 2px;
  263. 			    font-weight: bold;
  264. 			    cursor: pointer;
  265. 			}
  266.  
  267. 			#playbackSpeedDisplay:hover {
  268. 			    color: #fff;
  269. 			}
  270.  
  271. 			#playbackSpeedInput {
  272. 			    width: 35px;
  273. 			    padding: 0;
  274. 			    margin: 0;
  275. 			    border: 0;
  276. 			    text-align: right;
  277. 			    font-weight: bold;
  278. 			    font-size: 12px;
  279. 			}
  280.  
  281. 			#playbackSpeedInput:after {
  282. 			    content: 'x';
  283. 			}
  284.  
  285. 			.playbackEnabled .playbackHidden {
  286. 			        display: none !important;
  287. 			}
  288.  
  289. 			.playbackEnabled .backlink.playbackHidden + .hashlink {
  290. 			        display: none !important;
  291. 			}
  292.  
  293. 			#playbackUI .ui-slider-handle {
  294. 			    border-radius: 10px;
  295. 			    background: #ccc !important;
  296. 			    cursor: pointer;
  297. 			}
  298.  
  299. 			#playbackUI .ui-slider-handle.ui-state-hover,
  300. 			#playbackUI .ui-slider-handle.ui-state-active {
  301. 			    background: #fff !important;
  302. 			}
  303.  
  304. 			#playbackDisplay > * > * {
  305. 			    display: inline-block;
  306. 			}
  307.  
  308. 			@media only screen and (max-width: 316px) {
  309. 			    #playbackUI {
  310. 			        width: 100%;
  311. 			        margin: 0;
  312. 			    }
  313. 			}
  314.  
  315. 			.adc-resp-bg {
  316. 			    display: none;
  317. 			}
  318.  
  319. 			[tooltip] {
  320. 			    position: relative;
  321. 			}
  322.  
  323. 			[tooltip]:after {
  324. 			    opacity: 0;
  325. 			    content: attr(tooltip);
  326. 			    position: absolute;
  327. 			    background: #000;
  328. 			    padding: 3px;
  329. 			    top: 100%;
  330. 			    margin-top: 10px;
  331. 			    left: 50%;
  332. 			    transform: translateX(-50%);
  333. 			    border: 0.5px solid #ccc;
  334. 			    border-radius: 3px;
  335. 			    font-family: arial, helvetica, sans-serif;
  336. 			    font-weight: normal;
  337. 			    font-size: 10px;
  338. 			    text-align: center;
  339. 			    z-index: 1;
  340. 			    pointer-events: none;
  341. 			    color: #ccc;
  342. 			}
  343.  
  344. 			[tooltip]:hover:after {
  345. 			    animation: tooltipFade 800ms;
  346. 			    opacity: 1;
  347. 			}
  348.  
  349. 			@keyframes tooltipFade {
  350. 			    0% { opacity: 0; }
  351. 			    80% { opacity: 0; }
  352. 			    100% { opacity: 1; }
  353. 			}
  354.  
  355. 			#playbackPauseResume.pause:hover:after {
  356. 			    content: 'Play';
  357. 			}
  358.  
  359. 			#playbackToggle.loading {
  360. 			    opacity: 0.4;
  361. 			    cursor: wait;
  362. 			}
  363. 		`;
  364.  
  365. 		head.appendChild(style);
  366. 	}
  367.  
  368. 	let slider, scrubbing = false, seeking = false, playing = true, startUnix, currentUnix, maxUnix;
  369.  
  370. 	const delay = ms => new Promise(r => setTimeout(r, ms));
  371. 	const isArchived = () => document.querySelector('#update-status').innerText == 'Archived';
  372. 	const $q = s => document.querySelector(s);
  373. 	const $qa = s => document.querySelectorAll(s);
  374. 	const $id = id => document.getElementById(id);
  375. 	const aF = () => new Promise(r => window.requestAnimationFrame(r));
  376.  
  377. 	function updatePlaybackSub(interval) {
  378. 		maxUnix = isArchived() ? parseInt(Object.values(posts).map(p => p.timestamp).sort((a,b) => b-a)[0]):moment().unix();
  379. 		let increment = 1000/playbackSpeed;
  380. 		if(playing) currentUnix += interval/increment;
  381. 		currentUnix = Math.min(currentUnix, maxUnix);
  382. 		slider.slider('option', 'max', maxUnix);
  383. 		slider.slider('option', 'value', currentUnix);
  384. 	}
  385.  
  386. 	let lastUpdate, playbackSpeed = 1, correction = 0;
  387. 	const getIntervals = () => {
  388. 		let now = Date.now(), increment = 1000/playbackSpeed;
  389. 		if(!lastUpdate) lastUpdate = now - increment;
  390. 		let realInterval = now - lastUpdate;
  391. 		correction = increment - (now - lastUpdate - correction);
  392. 		lastUpdate = now;
  393. 		return [realInterval, increment + correction];
  394. 	}
  395. 	async function updatePlayback() {
  396. 		await delay(1000 - Date.now()%1000);
  397. 		while(true) {
  398. 			let [realInterval, adjustedInterval] = getIntervals();
  399. 			if(!scrubbing) updatePlaybackSub(realInterval);
  400. 			await delay(adjustedInterval);
  401. 		}
  402. 	}
  403.  
  404. 	function splitArray(array, limit) {
  405. 		let arrays = [];
  406. 		for(let i = 0; i < array.length; i += limit) {
  407. 			arrays.push(array.slice(i, i + limit));
  408. 		}
  409. 		return arrays;
  410. 	}
  411.  
  412. 	const playbackHiddenPosts = [document.createElement('style')];
  413. 	let lastHiddenPosts;
  414. 	async function updatePostVisibility() {
  415. 		let selectors = Object.values(posts).filter(p => p.timestamp > currentUnix).map(p => p.selectors),
  416. 		newPosts = lastHiddenPosts != selectors.length;
  417. 		if(!newPosts) return;
  418. 		lastHiddenPosts = selectors.length;
  419. 		let scrollToBottom = false, docEl = document.documentElement;
  420. 		if(newPosts && autoScroll && (docEl.offsetHeight - (docEl.scrollTop + window.innerHeight)) < 100) {
  421. 			scrollToBottom = true;
  422. 		}
  423. 		let css = splitArray(selectors, 500)
  424. 				  .map(s => s.join(',')+'{display:none !important;}');
  425. 		while(playbackHiddenPosts.length < css.length) {
  426. 			let style = document.createElement('style');
  427. 			style.id = 'playbackHiddenPosts-'+playbackHiddenPosts.length;
  428. 			document.head.appendChild(style);
  429. 			playbackHiddenPosts.push(style);
  430. 		}
  431. 		for(let [k,v] of Object.entries(playbackHiddenPosts)) {
  432. 			playbackHiddenPosts[k].innerHTML = css[k] || '';
  433. 		}
  434. 		if(scrollToBottom) {
  435. 			await aF();
  436. 			docEl.scrollTop = docEl.offsetHeight - window.innerHeight;
  437. 		}
  438. 	}
  439.  
  440. 	function updateDateTimeDisplay(unix) {
  441. 		let m = moment.unix(unix);
  442. 		[...$qa('#playbackDisplay [data-unit]')].forEach(e => (e.innerHTML = m.format(e.dataset.unit)));
  443. 	}
  444.  
  445. 	const posts = {}, nextInput = {
  446. 		playbackInputYear: 'playbackInputMonth',
  447. 		playbackInputMonth: 'playbackInputDay',
  448. 		playbackInputDay: 'playbackInputHours',
  449. 		playbackInputHours: 'playbackInputMinutes',
  450. 		playbackInputMinutes: 'playbackInputSeconds'
  451. 	}
  452.  
  453. 	function getPostData(id) {
  454. 		if(!id) return null;
  455. 		let selectors = [
  456. 			`.postContainer[data-full-i-d="${id}"]`,
  457. 			`.backlink[href="#p${id.split('.')[1]}"]`
  458. 		];
  459. 		let postContainer = $q(selectors[0]);
  460. 		selectors.push(`${selectors[1]} + .hashlink`)
  461. 		return {
  462. 			selectors: selectors.map(s => 'html.playbackEnabled '+s).join(', '),
  463. 			timestamp: parseInt(postContainer.querySelector('.dateTime').dataset.utc)
  464. 		}
  465. 	}
  466.  
  467. 	let autoScroll = false;
  468.  
  469. 	function togglePlay(newPlaying) {
  470. 		if(newPlaying === undefined)
  471. 			newPlaying = !playing;
  472. 		playing = newPlaying;
  473. 		if(playing) $('#playbackPauseResume').removeClass('pause');
  474. 		else $('#playbackPauseResume').addClass('pause');
  475. 	}
  476.  
  477. 	async function setupPlaybackToggle() {
  478. 		let threadingControl = document.querySelector('#threadingControl');
  479. 		if(!threadingControl) return;
  480. 		let autoScrollCheckbox = $q('input[name="Auto Scroll"]');
  481. 		autoScroll = autoScrollCheckbox.checked;
  482. 		$(autoScrollCheckbox).change(e => (autoScroll = autoScrollCheckbox.checked));
  483. 		threadingControl.parentNode
  484. 		.insertAdjacentHTML('afterend', '<label id="playbackToggle" class="entry"><input id="playbackToggleCheckbox" type="checkbox"> Playback</label>');
  485. 		let checkbox = document.querySelector('#playbackToggleCheckbox');
  486. 		checkbox.checked = document.documentElement.matches('.playbackEnabled');
  487.  
  488. 		let toggle = $('#playbackToggle').hover(e => $(e.target).addClass('focused').siblings().removeClass('focused'));
  489. 		if(!isChanX) {
  490. 			toggle.addClass('loading');
  491. 			checkbox.setAttribute('disabled', '');
  492. 			await fourChanXInitFinished;
  493. 		}
  494.  
  495. 		$(checkbox).click(() => {
  496. 			let checked = document.querySelector('#playbackToggleCheckbox').checked;
  497. 			$(document.documentElement).toggleClass('playbackEnabled');
  498. 			togglePlay(checked);
  499. 		});
  500.  
  501. 		toggle.removeClass('loading');
  502. 		checkbox.removeAttribute('disabled');
  503. 	}
  504.  
  505. 	function setupPlaybackUI() {
  506. 		$q('#header-bar').insertAdjacentHTML('beforeend', `
  507. 			<div id="playbackUI">
  508. 				<div id="playbackTimeContainer">
  509. 					<div id="playbackInputContainer" class="playbackHidden">
  510. 						<div id="playbackInputDate">
  511. 							<input type="text" id="playbackInputYear" maxlength="4" data-unit="yyyy" tooltip="Change Year">/<input type="text" id="playbackInputMonth" maxlength="2" data-unit="MM" tooltip="Change Month">/<input type="text" id="playbackInputDay" maxlength="2" data-unit="DD" tooltip="Change Day">
  512. 						</div>
  513. 						<div id="playbackInputTime">
  514. 							<input type="text" id="playbackInputHours" maxlength="2" data-unit="HH" tooltip="Change Hour">:<input type="text" id="playbackInputMinutes" maxlength="2" data-unit="mm" tooltip="Change Minutes">:<input type="text" id="playbackInputSeconds" maxlength="2" data-unit="ss" tooltip="Change Seconds">
  515. 						</div>
  516. 					</div>
  517. 					<div id="playbackDisplay">
  518. 						<div id="playbackDisplayDate">
  519. 							<div id="playbackDisplayYear" data-unit="yyyy" tooltip="Change Year">----</div>/<div id="playbackDisplayMonth" data-unit="MM" tooltip="Change Month">--</div>/<div id="playbackDisplayDay" data-unit="DD" tooltip="Change Day">--</div>
  520. 						</div>
  521. 						<div id="playbackDisplayTime">
  522. 							<div id="playbackDisplayHours" data-unit="HH" tooltip="Change Hour">----</div>:<div id="playbackDisplayMinutes" data-unit="mm" tooltip="Change Minutes">--</div>:<div id="playbackDisplaySeconds" data-unit="ss" tooltip="Change Seconds">--</div>
  523. 						</div>
  524. 					</div>
  525. 				</div>
  526. 				<div id="playbackSlider"></div>
  527. 				<input id="playbackSpeedInput" class="playbackHidden" type="text" tooltip="Playback Speed">
  528. 				<div id="playbackSpeedDisplay" type="text" tooltip="Playback Speed">1x</div>
  529. 				<div id="playbackSkipBackContainer" tooltip="Back 5s"><svg id="playbackSkipBack" tooltip="Back 5s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.090909090909093" height="24.204545454545457"><path class="skipPath" d="M9.55 7.23L9.55 7.23L9.55 4.83Q11.06 4.83 12.38 5.39Q13.69 5.96 14.69 6.96Q15.69 7.96 16.25 9.28Q16.82 10.60 16.82 12.10L16.82 12.10Q16.82 13.61 16.26 14.93Q15.70 16.24 14.69 17.24Q13.69 18.25 12.38 18.81Q11.06 19.38 9.55 19.38L9.55 19.38Q8.04 19.38 6.72 18.81Q5.40 18.25 4.40 17.24Q3.40 16.24 2.84 14.93Q2.27 13.61 2.27 12.10L2.27 12.10L4.67 12.11Q4.67 13.12 5.05 14.00Q5.42 14.88 6.09 15.55Q6.77 16.22 7.65 16.60Q8.54 16.97 9.55 16.97L9.55 16.97Q10.55 16.97 11.44 16.60Q12.33 16.22 13.00 15.55Q13.67 14.88 14.04 14.00Q14.42 13.12 14.42 12.11L14.42 12.11Q14.42 11.09 14.04 10.21Q13.66 9.33 12.99 8.65Q12.32 7.98 11.44 7.61Q10.55 7.23 9.55 7.23ZM9.87 1.32L9.87 10.95L4.96 6.14L9.87 1.32Z"/></svg></div>
  530. 				<div id="playbackPauseResume" tooltip="Pause"></div>
  531. 				<div id="playbackSkipAheadContainer" tooltip="Skip 5s"><svg id="playbackSkipAhead" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.090909090909093" height="24.204545454545457"><path class="skipPath" d="M9.55 19.38L9.55 19.38Q8.03 19.38 6.72 18.81Q5.40 18.25 4.40 17.24Q3.39 16.24 2.83 14.93Q2.27 13.61 2.27 12.10L2.27 12.10Q2.27 10.60 2.84 9.28Q3.40 7.96 4.40 6.96Q5.40 5.96 6.72 5.39Q8.03 4.83 9.55 4.83L9.55 4.83L9.55 7.23Q8.54 7.23 7.65 7.61Q6.77 7.98 6.10 8.65Q5.43 9.33 5.05 10.21Q4.67 11.09 4.67 12.10L4.67 12.10Q4.67 13.12 5.05 14.00Q5.42 14.88 6.09 15.55Q6.76 16.22 7.65 16.60Q8.53 16.97 9.55 16.97L9.55 16.97Q10.55 16.97 11.44 16.60Q12.32 16.22 12.99 15.55Q13.66 14.88 14.04 14.00Q14.42 13.11 14.42 12.10L14.42 12.10L16.82 12.10Q16.82 13.61 16.25 14.93Q15.69 16.24 14.69 17.24Q13.69 18.25 12.37 18.81Q11.05 19.38 9.55 19.38ZM14.13 6.14L9.23 10.95L9.23 1.32L14.13 6.14Z"/></svg></div>
  532. 			</div>
  533. 		`);
  534. 	}
  535.  
  536. 	function updateCurrentTime(t) {
  537. 		currentUnix = Math.max(startUnix, Math.min(t, maxUnix));
  538. 		slider.slider('option', 'value', currentUnix);
  539. 	}
  540.  
  541. 	async function waitForSelector(selector) {
  542. 		let result;
  543. 		do {
  544. 			if(result = document.querySelector(selector))
  545. 				return result;
  546. 			await delay(100);
  547. 		} while(1);
  548. 	}
  549.  
  550.  
  551. 	const debounce = (() => {
  552. 		const debounceList = {};
  553.  
  554. 		async function debounceSub(name, interval) {
  555. 			while(true) {
  556. 				if(debounceList[name]) {
  557. 					debounceList[name]();
  558. 					delete debounceList[name];
  559. 				} else return;
  560. 				await delay(interval);
  561. 			}
  562. 		}
  563.  
  564. 		return (name, method, interval) => {
  565. 			const runSub = !debounceList[name];
  566. 			debounceList[name] = method;
  567. 			if(runSub) debounceSub(name, interval);
  568. 		}
  569. 	})();
  570.  
  571. 	async function doInit() {
  572. 		console.log('Playback Init');
  573. 		let obs = new MutationObserver(e => {
  574. 			if(e[0].addedNodes.length) {
  575. 				setupPlaybackToggle();
  576. 			}
  577. 		});
  578. 		obs.observe(await waitForSelector('#shortcut-menu'), {childList: true});
  579. 		setupPlaybackToggle();
  580.  
  581. 		playbackHiddenPosts[0].id = 'playbackHiddenPosts-0';
  582. 		document.head.appendChild(playbackHiddenPosts[0]);
  583. 		appendStyle();
  584.  
  585. 		await fourChanXInitFinished;
  586.  
  587. 		[...$qa('.postContainer')].forEach(pc => {
  588. 			posts[pc.dataset.fullID] = getPostData(pc.dataset.fullID);
  589. 		});
  590.  
  591. 		document.addEventListener('ThreadUpdate', e => {
  592. 			if(e.detail && e.detail.newPosts && e.detail.newPosts.length) {
  593. 				for(let postID of e.detail.newPosts) {
  594. 					posts[postID] = getPostData(postID);
  595. 				}
  596. 				updatePostVisibility();
  597. 			}
  598. 		});
  599.  
  600. 		setupPlaybackUI();
  601.  
  602. 		startUnix = parseInt($('.opContainer .dateTime').attr('data-utc'));
  603. 		currentUnix = isArchived() ? parseInt(Object.values(posts).map(p => p.timestamp).sort((a,b) => b-a)[0]):moment().unix();
  604. 		maxUnix = currentUnix;
  605.  
  606. 		console.log('start', startUnix, 'current', currentUnix, 'max', maxUnix);
  607.  
  608. 		function renderPlayback(e, ui) {
  609. 			currentUnix = ui.value;
  610. 			debounce('renderPlaybackTimestamp', () => {
  611. 				let hoverTimestamp = moment.unix(currentUnix)
  612. 								 	 .format('yyyy/MM/DD HH:mm:ss');
  613. 				handle.attr('tooltip', hoverTimestamp);
  614. 			}, 16);
  615. 			debounce('renderPlayback', () => {
  616. 				updateDateTimeDisplay(currentUnix);
  617. 				updatePostVisibility();
  618. 			}, 250);
  619. 		}
  620.  
  621. 		let updatePreviewSub;
  622. 		async function updatePreview() {
  623. 			while(true) {
  624. 				if(updatePreviewSub) {
  625. 					updatePreviewSub();
  626. 				} else return;
  627. 				await delay(16);
  628. 			}
  629. 		}
  630.  
  631.  
  632. 		slider = $('#playbackSlider').slider({
  633. 			min: startUnix,
  634. 			value: currentUnix,
  635. 			max: maxUnix,
  636. 			start: (e, ui) => {
  637. 				scrubbing = true;
  638. 				slider.addClass('ui-state-active');
  639. 			},
  640. 			stop: (e, ui) => {
  641. 				scrubbing = false;
  642. 				slider.removeClass('ui-state-active');
  643. 			},
  644. 			animate: 0,
  645. 			change: renderPlayback,
  646. 			slide: renderPlayback
  647. 		}).on('mousemove', e => {
  648. 			/*let runUpdatePreview = !updatePreviewSub;
  649. 			updatePreviewSub =*/ 
  650. 			debounce('updatePreview', () => {
  651. 				let rect = slider[0].getBoundingClientRect(),
  652. 					fraction = (e.clientX - rect.left)/rect.width,
  653. 					hoverTimestamp = Math.round(fraction*(maxUnix - startUnix)) + startUnix;
  654. 				hoverTimestamp = Math.max(Math.min(hoverTimestamp, maxUnix), startUnix);
  655. 				hoverTimestamp = moment.unix(hoverTimestamp)
  656. 								 .format('yyyy/MM/DD HH:mm:ss');
  657. 				preview.attr('tooltip', hoverTimestamp);
  658.  
  659. 				let style = `left: ${e.clientX - rect.left}px`;
  660. 				preview[0].style = style;
  661. 				//updatePreviewSub = null;
  662. 			}, 16);
  663. 			//if(runUpdatePreview) updatePreview();
  664. 		});
  665.  
  666. 		let handle = $('#playbackUI .ui-slider-handle');
  667.  
  668. 		slider.append('<div id="timestampPreview"></div>');
  669. 		let preview = $('#timestampPreview');
  670.  
  671. 		updatePlayback();
  672.  
  673. 		$('#playbackPauseResume').click(e => {
  674. 			$(e.target).toggleClass('pause');
  675. 			playing = !playing;
  676. 		});
  677.  
  678. 		let playbackInputContainer = $('#playbackInputContainer');
  679. 		let playbackDisplay = $('#playbackDisplay').click(e => {
  680. 			let unit = e.target.dataset.unit;
  681. 			let m = moment.unix(currentUnix);
  682. 			[...$qa('#playbackInputContainer input')].forEach(e => (e.value = m.format(e.dataset.unit)));
  683. 			swapTimeDisplayAndInput();
  684. 			let focusElement;
  685. 			if(unit) focusElement = $q('#playbackInputContainer [data-unit="'+unit+'"]');
  686. 			else focusElement = $q('#playbackInputYear');
  687. 			focusElement.focus();
  688. 			focusElement.setSelectionRange(0, focusElement.maxLength);
  689. 		});
  690.  
  691. 		function swapTimeDisplayAndInput() {
  692. 			playbackInputContainer.toggleClass('playbackHidden');
  693. 			playbackDisplay.toggleClass('playbackHidden');
  694. 			seeking = !seeking;
  695. 		}
  696.  
  697. 		function submitInput() {
  698. 			let date = [...$qa('#playbackInputDate input')].map(e => e.value.padStart(e.maxLength, '0')).join('/'),
  699. 				time = [...$qa('#playbackInputTime input')].map(e => e.value.padStart(e.maxLength, '0')).join(':'),
  700. 				m = moment(date + ' ' + time, 'yyyy/MM/DD HH:mm:ss');
  701. 			updateCurrentTime(m.unix());
  702. 			swapTimeDisplayAndInput();
  703. 		}
  704.  
  705. 		function updatePlaybackSpeedDisplay() {
  706. 			let n = (Math.round(playbackSpeed*100)/100)+'x';
  707. 			playbackSpeedDisplay.html(n);
  708. 		}
  709.  
  710. 		let playbackSpeedInput = $('#playbackSpeedInput').on('keyup', e => {
  711. 			let isNumber = /^[\d.]$/.test(e.key);
  712. 			if(/^[^\d\.]$/.test(e.key) && !e.ctrlKey) {
  713. 				e.preventDefault();
  714. 			}
  715. 			if(e.key == 'Escape') swapSpeedDisplayAndInput();
  716. 			if(e.key == 'Enter') {
  717. 				let newSpeed;
  718. 				try {
  719. 					newSpeed = parseFloat(playbackSpeedInput[0].value);
  720. 				} catch(e) { newSpeed = 1; }
  721. 				playbackSpeed = newSpeed;
  722. 				console.log('newSpeed', playbackSpeed);
  723. 				updatePlaybackSpeedDisplay();
  724. 				swapSpeedDisplayAndInput();
  725. 			}
  726. 		});
  727.  
  728. 		let playbackSpeedDisplay = $('#playbackSpeedDisplay').click(e => {
  729. 			playbackSpeedInput[0].value = playbackSpeed; 
  730. 			swapSpeedDisplayAndInput();
  731. 			playbackSpeedInput.focus();
  732. 			playbackSpeedInput[0].setSelectionRange(0, playbackSpeedInput[0].value.length);
  733. 		});
  734.  
  735. 		function swapSpeedDisplayAndInput() {
  736. 			playbackSpeedDisplay.toggleClass('playbackHidden');
  737. 			playbackSpeedInput.toggleClass('playbackHidden');
  738. 		}
  739.  
  740. 		$('#playbackSkipBack').click(e => {
  741. 			updateCurrentTime(currentUnix - 5);
  742. 		});
  743.  
  744. 		$('#playbackSkipAhead').click(e => {
  745. 			updateCurrentTime(currentUnix + 5);
  746. 		});
  747.  
  748. 		let keydownElement;
  749. 		$('#playbackInputContainer input').on('keydown keyup', e => {
  750. 			if(e.type == 'keydown') {
  751. 				keydownElement = e.target;
  752. 				return;
  753. 			}
  754. 			if(e.target != keydownElement) {
  755. 				return;
  756. 			}
  757. 			let isNumber = /^\d$/.test(e.key);
  758. 			if(/^[^\d]$/.test(e.key) && !e.ctrlKey) {
  759. 				e.preventDefault();
  760. 			}
  761. 			if(isNumber && e.target.value.length == e.target.maxLength) {
  762. 				if(nextInput[e.target.id]) {
  763. 					let next = $id(nextInput[e.target.id]);
  764. 					next.focus();
  765. 					next.setSelectionRange(0, next.value.length);
  766. 				} else submitInput();
  767. 			}
  768. 			if(e.key == 'Enter') submitInput();
  769. 			if(e.key == 'Escape') swapTimeDisplayAndInput();
  770. 		});
  771.  
  772. 		console.log('Playback Init complete');
  773. 	}
  774. 	doInit();
  775. })();