☰

YouTube Viewfinding

Zoom, rotate & crop YouTube videos.

目前为 2025-02-03 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        YouTube Viewfinding
  3. // @version     0.0
  4. // @description Zoom, rotate & crop YouTube videos.
  5. // @author      Callum Latham
  6. // @namespace   https://greasyfork.org/users/696211-ctl2
  7. // @license     GNU GPLv3
  8. // @match       *://www.youtube.com/*
  9. // @match       *://youtube.com/*
  10. // @require     https://update.greasyfork.org/scripts/446506/1531300/%24Config.js
  11. // @grant       GM.setValue
  12. // @grant       GM.getValue
  13. // @grant       GM.deleteValue
  14. // ==/UserScript==
  15.  
  16. /* global $Config */
  17.  
  18. (() => {
  19. const isEmbed = window.location.pathname.split('/')[1] === 'embed';
  20.  
  21. // Don't run in non-embed frames (e.g. stream chat frame)
  22. if (window.parent !== window && !isEmbed) {
  23. 	return;
  24. }
  25.  
  26. const VAR_ZOOM = '--viewfind-zoom';
  27. const LIMITS = {none: 'None', static: 'Static', fit: 'Fit'};
  28.  
  29. const $config = new $Config(
  30. 	'VIEWFIND_TREE',
  31. 	(() => {
  32. 		const isCSSRule = (() => {
  33. 			const wrapper = document.createElement('style');
  34. 			const regex = /\s/g;
  35. 			
  36. 			return (property, text) => {
  37. 				const ruleText = `${property}:${text};`;
  38. 				
  39. 				document.head.appendChild(wrapper);
  40. 				wrapper.sheet.insertRule(`:not(*){${ruleText}}`);
  41. 				
  42. 				const [{style: {cssText}}] = wrapper.sheet.cssRules;
  43. 				
  44. 				wrapper.remove();
  45. 				
  46. 				return cssText.replaceAll(regex, '') === ruleText.replaceAll(regex, '') || `Must be a valid CSS ${property} rule`;
  47. 			};
  48. 		})();
  49. 		
  50. 		const getHideId = (() => {
  51. 			let id = -1;
  52. 			
  53. 			return () => ++id;
  54. 		})();
  55. 		
  56. 		const glowHideId = getHideId();
  57. 		
  58. 		return {
  59. 			get: (_, configs) => Object.assign(...configs),
  60. 			children: [
  61. 				{
  62. 					label: 'Controls',
  63. 					children: [
  64. 						{
  65. 							label: 'Keybinds',
  66. 							descendantPredicate: (children) => {
  67. 								const isMatch = ({children: a}, {children: b}) => {
  68. 									if (a.length !== b.length) {
  69. 										return false;
  70. 									}
  71. 									
  72. 									return a.every(({value: keyA}) => b.some(({value: keyB}) => keyA === keyB));
  73. 								};
  74. 								
  75. 								for (let i = 1; i < children.length; ++i) {
  76. 									if (children.slice(i).some((child) => isMatch(children[i - 1], child))) {
  77. 										return 'Another action has this key combination';
  78. 									}
  79. 								}
  80. 								
  81. 								return true;
  82. 							},
  83. 							get: (_, configs) => ({keys: Object.assign(...configs)}),
  84. 							children: (() => {
  85. 								const seed = {
  86. 									value: '',
  87. 									listeners: {
  88. 										keydown: (event) => {
  89. 											switch (event.key) {
  90. 											case 'Enter':
  91. 											case 'Escape':
  92. 												return;
  93. 											}
  94. 											
  95. 											event.preventDefault();
  96. 											
  97. 											event.target.value = event.code;
  98. 											
  99. 											event.target.dispatchEvent(new InputEvent('input'));
  100. 										},
  101. 									},
  102. 								};
  103. 								
  104. 								const getKeys = (children) => new Set(children.map(({value}) => value));
  105. 								
  106. 								const getNode = (label, keys, get) => ({
  107. 									label,
  108. 									seed,
  109. 									children: keys.map((value) => ({...seed, value})),
  110. 									get,
  111. 								});
  112. 								
  113. 								return [
  114. 									{
  115. 										label: 'Actions',
  116. 										get: (_, [toggle, ...controls]) => Object.assign(...controls.map(({id, keys}) => ({
  117. 											[id]: {
  118. 												toggle,
  119. 												keys,
  120. 											},
  121. 										}))),
  122. 										children: [
  123. 											{
  124. 												label: 'Toggle?',
  125. 												value: false,
  126. 												get: ({value}) => value,
  127. 											},
  128. 											...[
  129. 												['Pan / Zoom', ['KeyZ'], 'pan'],
  130. 												['Rotate', ['IntlBackslash'], 'rotate'],
  131. 												['Crop', ['KeyZ', 'IntlBackslash'], 'crop'],
  132. 											].map(([label, keys, id]) => getNode(label, keys, ({children}) => ({id, keys: getKeys(children)}))),
  133. 										],
  134. 									},
  135. 									getNode('Reset', ['KeyX'], ({children}) => ({reset: {keys: getKeys(children)}})),
  136. 									getNode('Configure', ['AltLeft', 'KeyX'], ({children}) => ({config: {keys: getKeys(children)}})),
  137. 								];
  138. 							})(),
  139. 						},
  140. 						{
  141. 							label: 'Scroll Speeds',
  142. 							get: (_, configs) => ({speeds: Object.assign(...configs)}),
  143. 							children: [
  144. 								{
  145. 									label: 'Zoom',
  146. 									value: -100,
  147. 									get: ({value}) => ({zoom: value / 150000}),
  148. 								},
  149. 								{
  150. 									label: 'Rotate',
  151. 									value: -100,
  152. 									// 150000 * (5 - 0.8) / 2π ≈ 100000
  153. 									get: ({value}) => ({rotate: value / 100000}),
  154. 								},
  155. 								{
  156. 									label: 'Crop',
  157. 									value: -100,
  158. 									get: ({value}) => ({crop: value / 300000}),
  159. 								},
  160. 							],
  161. 						},
  162. 						{
  163. 							label: 'Drag Inversions',
  164. 							get: (_, configs) => ({multipliers: Object.assign(...configs)}),
  165. 							children: [
  166. 								['Pan', 'pan'],
  167. 								['Rotate', 'rotate'],
  168. 								['Crop', 'crop'],
  169. 							].map(([label, key, value = false]) => ({
  170. 								label,
  171. 								value,
  172. 								get: ({value}) => ({[key]: value ? -1 : 1}),
  173. 							})),
  174. 						},
  175. 						{
  176. 							label: 'Click Movement Allowance (px)',
  177. 							value: 2,
  178. 							predicate: (value) => value >= 0 || 'Allowance must be positive',
  179. 							inputAttributes: {min: 0},
  180. 							get: ({value: clickCutoff}) => ({clickCutoff}),
  181. 						},
  182. 					],
  183. 				},
  184. 				{
  185. 					label: 'Behaviour',
  186. 					children: [
  187. 						...(() => {
  188. 							const typeNode = {
  189. 								label: 'Type',
  190. 								get: ({value}) => ({type: value}),
  191. 							};
  192. 							
  193. 							const staticNode = {
  194. 								label: 'Value (%)',
  195. 								predicate: (value) => value >= 0 || 'Limit must be positive',
  196. 								inputAttributes: {min: 0},
  197. 								get: ({value}) => ({custom: value / 100}),
  198. 							};
  199. 							
  200. 							const fitNode = {
  201. 								label: 'Glow Allowance (%)',
  202. 								predicate: (value) => value >= 0 || 'Allowance must be positive',
  203. 								inputAttributes: {min: 0},
  204. 								get: ({value}) => ({frame: value / 100}),
  205. 							};
  206. 							
  207. 							const options = Object.values(LIMITS);
  208. 							
  209. 							const getNode = (label, key, value, customValue, glowAllowance = 300) => {
  210. 								const staticId = getHideId();
  211. 								const fitId = getHideId();
  212. 								const onUpdate = (value) => ({
  213. 									hide: {
  214. 										[staticId]: value !== LIMITS.static,
  215. 										[fitId]: value !== LIMITS.fit,
  216. 									},
  217. 								});
  218. 								
  219. 								return {
  220. 									label,
  221. 									get: (_, configs) => ({[key]: Object.assign(...configs)}),
  222. 									children: [
  223. 										{...typeNode, value, options, onUpdate},
  224. 										{...staticNode, value: customValue, hideId: staticId},
  225. 										{...fitNode, value: glowAllowance, hideId: fitId},
  226. 									],
  227. 								};
  228. 							};
  229. 							
  230. 							return [
  231. 								getNode('Zoom In Limit', 'zoomInLimit', LIMITS.static, 500, 0),
  232. 								getNode('Zoom Out Limit', 'zoomOutLimit', LIMITS.static, 80),
  233. 								getNode('Pan Limit', 'panLimit', LIMITS.static, 50),
  234. 								{
  235. 									label: 'Snap Pan Limit',
  236. 									get: (_, configs) => ({snapPanLimit: Object.assign(...configs)}),
  237. 									children: ((hideId) => [
  238. 										{
  239. 											...typeNode,
  240. 											value: LIMITS.fit,
  241. 											options: [LIMITS.none, LIMITS.fit],
  242. 											onUpdate: (value) => ({hide: {[hideId]: value !== LIMITS.fit}}),
  243. 										},
  244. 										{...fitNode, value: 0, hideId},
  245. 									])(getHideId()),
  246. 								},
  247. 							];
  248. 						})(),
  249. 						{
  250. 							label: 'Active Effects',
  251. 							get: (_, configs) => {
  252. 								const {overlayKill, overlayHide, ...config} = Object.assign(...configs);
  253. 								
  254. 								return {
  255. 									active: {
  256. 										overlayRule: overlayKill && [overlayHide ? 'display' : 'pointer-events', 'none'],
  257. 										...config,
  258. 									},
  259. 								};
  260. 							},
  261. 							children: [
  262. 								{
  263. 									label: 'Pause Video?',
  264. 									value: false,
  265. 									get: ({value: pause}) => ({pause}),
  266. 								},
  267. 								{
  268. 									label: 'Hide Glow?',
  269. 									value: false,
  270. 									get: ({value: hideGlow}) => ({hideGlow}),
  271. 									hideId: glowHideId,
  272. 								},
  273. 								...((hideId) => [
  274. 									{
  275. 										label: 'Disable Overlay?',
  276. 										value: true,
  277. 										get: ({value: overlayKill}, configs) => Object.assign({overlayKill}, ...configs),
  278. 										onUpdate: (value) => ({hide: {[hideId]: !value}}),
  279. 										children: [
  280. 											{
  281. 												label: 'Hide Overlay?',
  282. 												value: false,
  283. 												get: ({value: overlayHide}) => ({overlayHide}),
  284. 												hideId,
  285. 											},
  286. 										],
  287. 									},
  288. 								])(getHideId()),
  289. 							],
  290. 						},
  291. 						
  292. 					],
  293. 				},
  294. 				{
  295. 					label: 'Glow',
  296. 					value: true,
  297. 					onUpdate: (value) => ({hide: {[glowHideId]: !value}}),
  298. 					get: ({value: on}, configs) => {
  299. 						if (!on) {
  300. 							return {};
  301. 						}
  302. 						
  303. 						const {turnover, ...config} = Object.assign(...configs);
  304. 						const sampleCount = Math.floor(config.fps * turnover);
  305. 						
  306. 						// avoid taking more samples than there's space for
  307. 						if (sampleCount > config.size) {
  308. 							const fps = config.size / turnover;
  309. 							
  310. 							return {
  311. 								glow: {
  312. 									...config,
  313. 									sampleCount: config.size,
  314. 									interval: 1000 / fps,
  315. 									fps,
  316. 								},
  317. 							};
  318. 						}
  319. 						
  320. 						return {
  321. 							glow: {
  322. 								...config,
  323. 								interval: 1000 / config.fps,
  324. 								sampleCount,
  325. 							},
  326. 						};
  327. 					},
  328. 					children: [
  329. 						(() => {
  330. 							const [seed, getChild] = (() => {
  331. 								const options = ['blur', 'brightness', 'contrast', 'drop-shadow', 'grayscale', 'hue-rotate', 'invert', 'opacity', 'saturate', 'sepia'];
  332. 								const ids = {};
  333. 								const hide = {};
  334. 								
  335. 								for (const option of options) {
  336. 									ids[option] = getHideId();
  337. 									
  338. 									hide[ids[option]] = true;
  339. 								}
  340. 								
  341. 								const min0Amount = {
  342. 									label: 'Amount (%)',
  343. 									value: 100,
  344. 									predicate: (value) => value >= 0 || 'Amount must be positive',
  345. 									inputAttributes: {min: 0},
  346. 								};
  347. 								
  348. 								const max100Amount = {
  349. 									label: 'Amount (%)',
  350. 									value: 0,
  351. 									predicate: (value) => {
  352. 										if (value < 0) {
  353. 											return 'Amount must be positive';
  354. 										}
  355. 										
  356. 										return value <= 100 || 'Amount may not exceed 100%';
  357. 									},
  358. 									inputAttributes: {min: 0, max: 100},
  359. 								};
  360. 								
  361. 								const getScaled = (value) => `calc(${value}px/var(${VAR_ZOOM}))`;
  362. 								
  363. 								const root = {
  364. 									label: 'Function',
  365. 									options,
  366. 									value: options[0],
  367. 									get: ({value}, configs) => {
  368. 										const config = Object.assign(...configs);
  369. 										
  370. 										switch (value) {
  371. 										case options[0]:
  372. 											return {
  373. 												filter: config.blurScale ? `blur(${config.blur}px)` : `blur(${getScaled(config.blur)})`,
  374. 												blur: {
  375. 													x: config.blur,
  376. 													y: config.blur,
  377. 													scale: config.blurScale,
  378. 												},
  379. 											};
  380. 										
  381. 										case options[3]:
  382. 											return {
  383. 												filter: config.shadowScale ?
  384. 													`drop-shadow(${config.shadow} ${config.shadowX}px ${config.shadowY}px ${config.shadowSpread}px)` :
  385. 													`drop-shadow(${config.shadow} ${getScaled(config.shadowX)} ${getScaled(config.shadowY)} ${getScaled(config.shadowSpread)})`,
  386. 												blur: {
  387. 													x: config.shadowSpread + Math.abs(config.shadowX),
  388. 													y: config.shadowSpread + Math.abs(config.shadowY),
  389. 													scale: config.shadowScale,
  390. 												},
  391. 											};
  392. 										
  393. 										case options[5]:
  394. 											return {filter: `hue-rotate(${config.hueRotate}deg)`};
  395. 										}
  396. 										
  397. 										return {filter: `${value}(${config[value]}%)`};
  398. 									},
  399. 									onUpdate: (value) => ({hide: {...hide, [ids[value]]: false}}),
  400. 								};
  401. 								
  402. 								const children = {
  403. 									'blur': [
  404. 										{
  405. 											label: 'Distance (px)',
  406. 											value: 0,
  407. 											get: ({value}) => ({blur: value}),
  408. 											predicate: (value) => value >= 0 || 'Distance must be positive',
  409. 											inputAttributes: {min: 0},
  410. 											hideId: ids.blur,
  411. 										},
  412. 										{
  413. 											label: 'Scale?',
  414. 											value: false,
  415. 											get: ({value}) => ({blurScale: value}),
  416. 											hideId: ids.blur,
  417. 										},
  418. 									],
  419. 									'brightness': [
  420. 										{
  421. 											...min0Amount,
  422. 											hideId: ids.brightness,
  423. 											get: ({value}) => ({brightness: value}),
  424. 										},
  425. 									],
  426. 									'contrast': [
  427. 										{
  428. 											...min0Amount,
  429. 											hideId: ids.contrast,
  430. 											get: ({value}) => ({contrast: value}),
  431. 										},
  432. 									],
  433. 									'drop-shadow': [
  434. 										{
  435. 											label: 'Colour',
  436. 											input: 'color',
  437. 											value: '#FFFFFF',
  438. 											get: ({value}) => ({shadow: value}),
  439. 											hideId: ids['drop-shadow'],
  440. 										},
  441. 										{
  442. 											label: 'Horizontal Offset (px)',
  443. 											value: 0,
  444. 											get: ({value}) => ({shadowX: value}),
  445. 											hideId: ids['drop-shadow'],
  446. 										},
  447. 										{
  448. 											label: 'Vertical Offset (px)',
  449. 											value: 0,
  450. 											get: ({value}) => ({shadowY: value}),
  451. 											hideId: ids['drop-shadow'],
  452. 										},
  453. 										{
  454. 											label: 'Spread (px)',
  455. 											value: 0,
  456. 											predicate: (value) => value >= 0 || 'Spread must be positive',
  457. 											inputAttributes: {min: 0},
  458. 											get: ({value}) => ({shadowSpread: value}),
  459. 											hideId: ids['drop-shadow'],
  460. 										},
  461. 										{
  462. 											label: 'Scale?',
  463. 											value: true,
  464. 											get: ({value}) => ({shadowScale: value}),
  465. 											hideId: ids['drop-shadow'],
  466. 										},
  467. 									],
  468. 									'grayscale': [
  469. 										{
  470. 											...max100Amount,
  471. 											hideId: ids.grayscale,
  472. 											get: ({value}) => ({grayscale: value}),
  473. 										},
  474. 									],
  475. 									'hue-rotate': [
  476. 										{
  477. 											label: 'Angle (deg)',
  478. 											value: 0,
  479. 											get: ({value}) => ({hueRotate: value}),
  480. 											hideId: ids['hue-rotate'],
  481. 										},
  482. 									],
  483. 									'invert': [
  484. 										{
  485. 											...max100Amount,
  486. 											hideId: ids.invert,
  487. 											get: ({value}) => ({invert: value}),
  488. 										},
  489. 									],
  490. 									'opacity': [
  491. 										{
  492. 											...max100Amount,
  493. 											value: 100,
  494. 											hideId: ids.opacity,
  495. 											get: ({value}) => ({opacity: value}),
  496. 										},
  497. 									],
  498. 									'saturate': [
  499. 										{
  500. 											...min0Amount,
  501. 											hideId: ids.saturate,
  502. 											get: ({value}) => ({saturate: value}),
  503. 										},
  504. 									],
  505. 									'sepia': [
  506. 										{
  507. 											...max100Amount,
  508. 											hideId: ids.sepia,
  509. 											get: ({value}) => ({sepia: value}),
  510. 										},
  511. 									],
  512. 								};
  513. 								
  514. 								return [
  515. 									{...root, children: Object.values(children).flat()}, (id, ...values) => {
  516. 										const replacements = [];
  517. 										
  518. 										for (const [i, child] of children[id].entries()) {
  519. 											replacements.push({...child, value: values[i]});
  520. 										}
  521. 										
  522. 										return {
  523. 											...root,
  524. 											value: id,
  525. 											children: Object.values({...children, [id]: replacements}).flat(),
  526. 										};
  527. 									},
  528. 								];
  529. 							})();
  530. 							
  531. 							return {
  532. 								label: 'Filter',
  533. 								get: (_, configs) => {
  534. 									const scaled = {x: 0, y: 0};
  535. 									const unscaled = {x: 0, y: 0};
  536. 									
  537. 									let filter = '';
  538. 									
  539. 									for (const config of configs) {
  540. 										filter += config.filter;
  541. 										
  542. 										if ('blur' in config) {
  543. 											const target = config.blur.scale ? scaled : unscaled;
  544. 											
  545. 											target.x = Math.max(target.x, config.blur.x);
  546. 											target.y = Math.max(target.y, config.blur.y);
  547. 										}
  548. 									}
  549. 									
  550. 									return {filter, blur: {scaled, unscaled}};
  551. 								},
  552. 								children: [
  553. 									getChild('saturate', 150),
  554. 									getChild('brightness', 150),
  555. 									getChild('blur', 25, false),
  556. 								],
  557. 								seed,
  558. 							};
  559. 						})(),
  560. 						{
  561. 							label: 'Update',
  562. 							childPredicate: ([{value: fps}, {value: turnover}]) => fps * turnover >= 1 || `${turnover} second turnover cannot be achieved at ${fps} hertz`,
  563. 							children: [
  564. 								{
  565. 									label: 'Frequency (Hz)',
  566. 									value: 15,
  567. 									predicate: (value) => {
  568. 										if (value > 144) {
  569. 											return 'Update frequency may not be above 144 hertz';
  570. 										}
  571. 										
  572. 										return value >= 0 || 'Update frequency must be positive';
  573. 									},
  574. 									inputAttributes: {min: 0, max: 144},
  575. 									get: ({value: fps}) => ({fps}),
  576. 								},
  577. 								{
  578. 									label: 'Turnover Time (s)',
  579. 									value: 3,
  580. 									predicate: (value) => value >= 0 || 'Turnover time must be positive',
  581. 									inputAttributes: {min: 0},
  582. 									get: ({value: turnover}) => ({turnover}),
  583. 								},
  584. 								{
  585. 									label: 'Reverse?',
  586. 									value: false,
  587. 									get: ({value: doFlip}) => ({doFlip}),
  588. 								},
  589. 							],
  590. 						},
  591. 						{
  592. 							label: 'Size (px)',
  593. 							value: 50,
  594. 							predicate: (value) => value >= 0 || 'Size must be positive',
  595. 							inputAttributes: {min: 0},
  596. 							get: ({value}) => ({size: value}),
  597. 						},
  598. 						{
  599. 							label: 'End Point (%)',
  600. 							value: 103,
  601. 							predicate: (value) => value >= 0 || 'End point must be positive',
  602. 							inputAttributes: {min: 0},
  603. 							get: ({value}) => ({end: value / 100}),
  604. 						},
  605. 					].map((node) => ({...node, hideId: glowHideId})),
  606. 				},
  607. 				{
  608. 					label: 'Interfaces',
  609. 					children: [
  610. 						{
  611. 							label: 'Crop',
  612. 							get: (_, configs) => ({crop: Object.assign(...configs)}),
  613. 							children: [
  614. 								{
  615. 									label: 'Colours',
  616. 									get: (_, configs) => ({colour: Object.assign(...configs)}),
  617. 									children: [
  618. 										{
  619. 											label: 'Fill',
  620. 											get: (_, [colour, opacity]) => ({fill: `${colour}${opacity}`}),
  621. 											children: [
  622. 												{
  623. 													label: 'Colour',
  624. 													value: '#808080',
  625. 													input: 'color',
  626. 													get: ({value}) => value,
  627. 												},
  628. 												{
  629. 													label: 'Opacity (%)',
  630. 													value: 40,
  631. 													predicate: (value) => {
  632. 														if (value < 0) {
  633. 															return 'Opacity must be positive';
  634. 														}
  635. 														
  636. 														return value <= 100 || 'Opacity may not exceed 100%';
  637. 													},
  638. 													inputAttributes: {min: 0, max: 100},
  639. 													get: ({value}) => Math.round(255 * value / 100).toString(16),
  640. 												},
  641. 											],
  642. 										},
  643. 										{
  644. 											label: 'Shadow',
  645. 											value: '#000000',
  646. 											input: 'color',
  647. 											get: ({value: shadow}) => ({shadow}),
  648. 										},
  649. 										{
  650. 											label: 'Border',
  651. 											value: '#ffffff',
  652. 											input: 'color',
  653. 											get: ({value: border}) => ({border}),
  654. 										},
  655. 									],
  656. 								},
  657. 								{
  658. 									label: 'Handle Size (%)',
  659. 									value: 6,
  660. 									predicate: (value) => {
  661. 										if (value < 0) {
  662. 											return 'Size must be positive';
  663. 										}
  664. 										
  665. 										return value <= 50 || 'Size may not exceed 50%';
  666. 									},
  667. 									inputAttributes: {min: 0, max: 50},
  668. 									get: ({value}) => ({handle: value / 100}),
  669. 								},
  670. 							],
  671. 						},
  672. 						{
  673. 							label: 'Crosshair',
  674. 							get: (value, configs) => ({crosshair: Object.assign(...configs)}),
  675. 							children: [
  676. 								{
  677. 									label: 'Outer Thickness (px)',
  678. 									value: 3,
  679. 									predicate: (value) => value >= 0 || 'Thickness must be positive',
  680. 									inputAttributes: {min: 0},
  681. 									get: ({value: outer}) => ({outer}),
  682. 								},
  683. 								{
  684. 									label: 'Inner Thickness (px)',
  685. 									value: 1,
  686. 									predicate: (value) => value >= 0 || 'Thickness must be positive',
  687. 									inputAttributes: {min: 0},
  688. 									get: ({value: inner}) => ({inner}),
  689. 								},
  690. 								{
  691. 									label: 'Inner Diameter (px)',
  692. 									value: 157,
  693. 									predicate: (value) => value >= 0 || 'Diameter must be positive',
  694. 									inputAttributes: {min: 0},
  695. 									get: ({value: gap}) => ({gap}),
  696. 								},
  697. 								((hideId) => ({
  698. 									label: 'Text',
  699. 									value: true,
  700. 									onUpdate: (value) => ({hide: {[hideId]: !value}}),
  701. 									get: ({value}, configs) => {
  702. 										if (!value) {
  703. 											return {};
  704. 										}
  705. 										
  706. 										const {translateX, translateY, ...config} = Object.assign(...configs);
  707. 										
  708. 										return {
  709. 											text: {
  710. 												translate: {
  711. 													x: translateX,
  712. 													y: translateY,
  713. 												},
  714. 												...config,
  715. 											},
  716. 										};
  717. 									},
  718. 									children: [
  719. 										{
  720. 											label: 'Font',
  721. 											value: '30px "Harlow Solid", cursive',
  722. 											predicate: isCSSRule.bind(null, 'font'),
  723. 											get: ({value: font}) => ({font}),
  724. 										},
  725. 										{
  726. 											label: 'Position (%)',
  727. 											get: (_, configs) => ({position: Object.assign(...configs)}),
  728. 											children: ['x', 'y'].map((label) => ({
  729. 												label,
  730. 												value: 0,
  731. 												predicate: (value) => Math.abs(value) <= 50 || 'Position must be on-screen',
  732. 												inputAttributes: {min: -50, max: 50},
  733. 												get: ({value}) => ({[label]: value + 50}),
  734. 											})),
  735. 										},
  736. 										{
  737. 											label: 'Offset (px)',
  738. 											get: (_, configs) => ({offset: Object.assign(...configs)}),
  739. 											children: [
  740. 												{
  741. 													label: 'x',
  742. 													value: -6,
  743. 													get: ({value: x}) => ({x}),
  744. 												},
  745. 												{
  746. 													label: 'y',
  747. 													value: -25,
  748. 													get: ({value: y}) => ({y}),
  749. 												},
  750. 											],
  751. 										},
  752. 										(() => {
  753. 											const options = ['Left', 'Center', 'Right'];
  754. 											
  755. 											return {
  756. 												label: 'Alignment',
  757. 												value: options[2],
  758. 												options,
  759. 												get: ({value}) => ({align: value.toLowerCase(), translateX: options.indexOf(value) * -50}),
  760. 											};
  761. 										})(),
  762. 										(() => {
  763. 											const options = ['Top', 'Middle', 'Bottom'];
  764. 											
  765. 											return {
  766. 												label: 'Baseline',
  767. 												value: options[0],
  768. 												options,
  769. 												get: ({value}) => ({translateY: options.indexOf(value) * -50}),
  770. 											};
  771. 										})(),
  772. 										{
  773. 											label: 'Line height (%)',
  774. 											value: 90,
  775. 											predicate: (value) => value >= 0 || 'Height must be positive',
  776. 											inputAttributes: {min: 0},
  777. 											get: ({value}) => ({height: value / 100}),
  778. 										},
  779. 									].map((node) => ({...node, hideId})),
  780. 								}))(getHideId()),
  781. 								{
  782. 									label: 'Colours',
  783. 									get: (_, configs) => ({colour: Object.assign(...configs)}),
  784. 									children: [
  785. 										{
  786. 											label: 'Fill',
  787. 											value: '#ffffff',
  788. 											input: 'color',
  789. 											get: ({value: fill}) => ({fill}),
  790. 										},
  791. 										{
  792. 											label: 'Shadow',
  793. 											value: '#000000',
  794. 											input: 'color',
  795. 											get: ({value: shadow}) => ({shadow}),
  796. 										},
  797. 									],
  798. 								},
  799. 							],
  800. 						},
  801. 					],
  802. 				},
  803. 			],
  804. 		};
  805. 	})(),
  806. 	{
  807. 		headBase: '#c80000',
  808. 		headButtonExit: '#000000',
  809. 		borderHead: '#ffffff',
  810. 		borderTooltip: '#c80000',
  811. 		width: Math.min(90, screen.width / 16),
  812. 		height: 90,
  813. 	},
  814. 	{
  815. 		zIndex: 10000,
  816. 		scrollbarColor: 'initial',
  817. 	},
  818. );
  819.  
  820. const CLASS_VIEWFINDER = 'viewfind-element';
  821. const PI_HALVES = [Math.PI / 2, Math.PI, 3 * Math.PI / 2, Math.PI * 2];
  822. const SELECTOR_VIDEO = '#movie_player video.html5-main-video';
  823.  
  824. // STATE
  825.  
  826. let video;
  827. let altTarget;
  828. let viewport;
  829. let cinematics;
  830.  
  831. let stopped = true;
  832. let stopDrag;
  833.  
  834. const viewportAngles = new function () {
  835. 	this.set = () => {
  836. 		this.side = getTheta(0, 0, viewport.clientWidth, viewport.clientHeight);
  837. 		
  838. 		// equals `getTheta(0, 0, viewport.clientHeight, viewport.clientWidth)`
  839. 		this.base = PI_HALVES[0] - this.side;
  840. 		
  841. 		glow.handleViewChange(true);
  842. 	};
  843. }();
  844.  
  845. // ROTATION HELPERS
  846.  
  847. const getTheta = (fromX, fromY, toX, toY) => Math.atan2(toY - fromY, toX - fromX);
  848.  
  849. const getGenericRotated = (x, y, angle) => {
  850. 	const radius = Math.sqrt(x * x + y * y);
  851. 	const pointTheta = getTheta(0, 0, x, y) + angle;
  852. 	
  853. 	return {
  854. 		x: radius * Math.cos(pointTheta),
  855. 		y: radius * Math.sin(pointTheta),
  856. 	};
  857. };
  858.  
  859. const getRotated = (xRaw, yRaw, ratio = true) => {
  860. 	// Multiplying by video dimensions to have the axes' scales match the video's
  861. 	// Using position's raw values would only work if points moved elliptically around the centre of rotation
  862. 	const rotated = getGenericRotated(xRaw * video.clientWidth, yRaw * video.clientHeight, rotation.value - PI_HALVES[0]);
  863. 	
  864. 	return ratio ? {x: rotated.x / video.clientWidth, y: rotated.y / video.clientHeight} : rotated;
  865. };
  866.  
  867. // CSS HELPER
  868.  
  869. const css = new function () {
  870. 	this.has = (name) => document.body.classList.contains(name);
  871. 	this.tag = (name, doAdd = true) => document.body.classList[doAdd ? 'add' : 'remove'](name);
  872. 	
  873. 	this.getSelector = (...classes) => `body.${classes.join('.')}`;
  874. 	
  875. 	const getSheet = () => {
  876. 		const element = document.createElement('style');
  877. 		
  878. 		document.head.appendChild(element);
  879. 		
  880. 		return element.sheet;
  881. 	};
  882. 	
  883. 	const getRuleString = (selector, ...declarations) => `${selector}{${declarations.map(([property, value]) => `${property}:${value};`).join('')}}`;
  884. 	
  885. 	this.add = function (...rule) {
  886. 		this.insertRule(getRuleString(...rule));
  887. 	}.bind(getSheet());
  888. 	
  889. 	this.Toggleable = class {
  890. 		static sheet = getSheet();
  891. 		
  892. 		static active = [];
  893. 		
  894. 		static id = 0;
  895. 		
  896. 		static add(rule, id) {
  897. 			this.sheet.insertRule(rule, this.active.length);
  898. 			
  899. 			this.active.push(id);
  900. 		}
  901. 		
  902. 		static remove(id) {
  903. 			let index = this.active.indexOf(id);
  904. 			
  905. 			while (index >= 0) {
  906. 				this.sheet.deleteRule(index);
  907. 				
  908. 				this.active.splice(index, 1);
  909. 				
  910. 				index = this.active.indexOf(id);
  911. 			}
  912. 		}
  913. 		
  914. 		id = this.constructor.id++;
  915. 		
  916. 		add(...rule) {
  917. 			this.constructor.add(getRuleString(...rule), this.id);
  918. 		}
  919. 		
  920. 		remove() {
  921. 			this.constructor.remove(this.id);
  922. 		}
  923. 	};
  924. }();
  925.  
  926. // ACTION MANAGER
  927.  
  928. const enabler = new function () {
  929. 	this.CLASS_ABLE = 'viewfind-action-able';
  930. 	this.CLASS_DRAGGING = 'viewfind-action-dragging';
  931. 	
  932. 	this.keys = new Set();
  933. 	
  934. 	this.didPause = false;
  935. 	this.isHidingGlow = false;
  936. 	
  937. 	this.setActive = (action) => {
  938. 		const {active, keys} = $config.get();
  939. 		
  940. 		if (active.hideGlow && Boolean(action) !== this.isHidingGlow) {
  941. 			if (action) {
  942. 				this.isHidingGlow = true;
  943. 				
  944. 				glow.hide();
  945. 			} else if (this.isHidingGlow) {
  946. 				this.isHidingGlow = false;
  947. 				
  948. 				glow.show();
  949. 			}
  950. 		}
  951. 		
  952. 		this.activeAction?.onInactive?.();
  953. 		
  954. 		if (action) {
  955. 			this.activeAction = action;
  956. 			this.toggled = keys[action.CODE].toggle;
  957. 			
  958. 			action.onActive?.();
  959. 			
  960. 			if (active.pause && !video.paused) {
  961. 				video.pause();
  962. 				
  963. 				this.didPause = true;
  964. 			}
  965. 			
  966. 			return;
  967. 		}
  968. 		
  969. 		if (this.didPause) {
  970. 			video.play();
  971. 			
  972. 			this.didPause = false;
  973. 		}
  974. 		
  975. 		this.activeAction = this.toggled = undefined;
  976. 	};
  977. 	
  978. 	this.handleChange = () => {
  979. 		if (stopped || stopDrag || video.ended) {
  980. 			return;
  981. 		}
  982. 		
  983. 		const {keys} = $config.get();
  984. 		
  985. 		let activeAction;
  986. 		
  987. 		for (const action of Object.values(actions)) {
  988. 			if (
  989. 				!this.keys.isSupersetOf(keys[action.CODE].keys) || activeAction && ('toggle' in keys[action.CODE] ?
  990. 					!('toggle' in keys[activeAction.CODE]) || keys[activeAction.CODE].keys.size >= keys[action.CODE].keys.size :
  991. 					!('toggle' in keys[activeAction.CODE]) && keys[activeAction.CODE].keys.size >= keys[action.CODE].keys.size)
  992. 			) {
  993. 				if ('CLASS_ABLE' in action) {
  994. 					css.tag(action.CLASS_ABLE, false);
  995. 				}
  996. 				
  997. 				continue;
  998. 			}
  999. 			
  1000. 			if (activeAction && 'CLASS_ABLE' in activeAction) {
  1001. 				css.tag(activeAction.CLASS_ABLE, false);
  1002. 			}
  1003. 			
  1004. 			activeAction = action;
  1005. 		}
  1006. 		
  1007. 		if (activeAction === this.activeAction) {
  1008. 			return;
  1009. 		}
  1010. 		
  1011. 		if (activeAction) {
  1012. 			if ('CLASS_ABLE' in activeAction) {
  1013. 				css.tag(activeAction.CLASS_ABLE);
  1014. 				
  1015. 				css.tag(this.CLASS_ABLE);
  1016. 				
  1017. 				this.setActive(activeAction);
  1018. 				
  1019. 				return;
  1020. 			}
  1021. 			
  1022. 			this.activeAction?.onInactive?.();
  1023. 			
  1024. 			activeAction.onActive();
  1025. 			
  1026. 			this.activeAction = activeAction;
  1027. 		}
  1028. 		
  1029. 		css.tag(this.CLASS_ABLE, false);
  1030. 		
  1031. 		this.setActive(false);
  1032. 	};
  1033. 	
  1034. 	this.stop = () => {
  1035. 		css.tag(this.CLASS_ABLE, false);
  1036. 		
  1037. 		for (const action of Object.values(actions)) {
  1038. 			if ('CLASS_ABLE' in action) {
  1039. 				css.tag(action.CLASS_ABLE, false);
  1040. 			}
  1041. 		}
  1042. 		
  1043. 		this.setActive(false);
  1044. 	};
  1045. 	
  1046. 	this.updateConfig = (() => {
  1047. 		const rule = new css.Toggleable();
  1048. 		const selector = `${css.getSelector(this.CLASS_ABLE)} #contentContainer.tp-yt-app-drawer[swipe-open]::after`
  1049. 			+ `,${css.getSelector(this.CLASS_ABLE)} #movie_player > .html5-video-container ~ :not(.${CLASS_VIEWFINDER})`;
  1050. 		
  1051. 		return () => {
  1052. 			const {overlayRule} = $config.get().active;
  1053. 			
  1054. 			rule.remove();
  1055. 			
  1056. 			if (overlayRule) {
  1057. 				rule.add(selector, overlayRule);
  1058. 			}
  1059. 		};
  1060. 	})();
  1061. 	
  1062. 	$config.ready.then(() => {
  1063. 		this.updateConfig();
  1064. 	});
  1065. 	
  1066. 	// insertion order decides priority
  1067. 	css.add(`${css.getSelector(this.CLASS_DRAGGING)} #movie_player`, ['cursor', 'grabbing']);
  1068. 	css.add(`${css.getSelector(this.CLASS_ABLE)} #movie_player`, ['cursor', 'grab']);
  1069. }();
  1070.  
  1071. // ELEMENT CONTAINER SETUP
  1072.  
  1073. const containers = new function () {
  1074. 	for (const name of ['background', 'foreground', 'tracker']) {
  1075. 		this[name] = document.createElement('div');
  1076. 		
  1077. 		this[name].classList.add(CLASS_VIEWFINDER);
  1078. 	}
  1079. 	
  1080. 	// make an outline of the uncropped video
  1081. 	css.add(`${css.getSelector(enabler.CLASS_ABLE)} #${this.background.id = 'viewfind-container-background'}`, ['outline', '1px solid white']);
  1082. 	
  1083. 	this.background.style.position = this.foreground.style.position = 'absolute';
  1084. 	this.background.style.pointerEvents = this.foreground.style.pointerEvents = this.tracker.style.pointerEvents = 'none';
  1085. 	this.tracker.style.height = this.tracker.style.width = '100%';
  1086. }();
  1087.  
  1088. // MODIFIERS
  1089.  
  1090. class Cache {
  1091. 	targets = [];
  1092. 	
  1093. 	constructor(...targets) {
  1094. 		for (const source of targets) {
  1095. 			this.targets.push({source});
  1096. 		}
  1097. 	}
  1098. 	
  1099. 	update(target) {
  1100. 		return target.value !== (target.value = target.source.value);
  1101. 	}
  1102. 	
  1103. 	isStale() {
  1104. 		return this.targets.reduce((value, target) => value || this.update(target), false);
  1105. 	}
  1106. }
  1107.  
  1108. class ConfigCache extends Cache {
  1109. 	static id = 0;
  1110. 	
  1111. 	id = this.constructor.id;
  1112. 	
  1113. 	constructor(...targets) {
  1114. 		super(...targets);
  1115. 	}
  1116. 	
  1117. 	isStale() {
  1118. 		if (this.id === (this.id = this.constructor.id)) {
  1119. 			return super.isStale();
  1120. 		}
  1121. 		
  1122. 		for (const target of this.targets) {
  1123. 			target.value = target.source.value;
  1124. 		}
  1125. 		
  1126. 		return true;
  1127. 	}
  1128. }
  1129.  
  1130. const zoom = new function () {
  1131. 	this.value = 1;
  1132. 	
  1133. 	const scaleRule = new css.Toggleable();
  1134. 	
  1135. 	this.reset = () => {
  1136. 		this.value = 1;
  1137. 		
  1138. 		video.style.removeProperty('scale');
  1139. 		
  1140. 		scaleRule.remove();
  1141. 		scaleRule.add(':root', [VAR_ZOOM, '1']);
  1142. 	};
  1143. 	
  1144. 	this.apply = () => {
  1145. 		video.style.setProperty('scale', `${this.value}`);
  1146. 		
  1147. 		scaleRule.remove();
  1148. 		scaleRule.add(':root', [VAR_ZOOM, `${this.value}`]);
  1149. 		
  1150. 		delete actions.reset.prior;
  1151. 	};
  1152. 	
  1153. 	this.getFit = (width = 1, height = 1) => {
  1154. 		const corner0 = getRotated(width, height, false);
  1155. 		const corner1 = getRotated(-width, height, false);
  1156. 		
  1157. 		return 1 / Math.max(
  1158. 			Math.abs(corner0.x) / viewport.clientWidth, Math.abs(corner1.x) / viewport.clientWidth,
  1159. 			Math.abs(corner0.y) / viewport.clientHeight, Math.abs(corner1.y) / viewport.clientHeight,
  1160. 		);
  1161. 	};
  1162. 	
  1163. 	this.constrain = (() => {
  1164. 		const limitGetters = {
  1165. 			[LIMITS.static]: ({custom}) => custom,
  1166. 			[LIMITS.fit]: ({frame}, glow) => {
  1167. 				if (glow) {
  1168. 					const base = glow.end - 1;
  1169. 					const {scaled, unscaled} = glow.blur;
  1170. 					
  1171. 					return this.getFit(
  1172. 						1 + Math.max(0, base + Math.max(unscaled.x / video.clientWidth, scaled.x * this.value / video.clientWidth)) * frame,
  1173. 						1 + Math.max(0, base + Math.max(unscaled.y / video.clientHeight, scaled.y * this.value / video.clientHeight)) * frame,
  1174. 					);
  1175. 				}
  1176. 				
  1177. 				return this.getFit();
  1178. 			},
  1179. 		};
  1180. 		
  1181. 		return () => {
  1182. 			const {zoomOutLimit, zoomInLimit, glow} = $config.get();
  1183. 			
  1184. 			if (zoomOutLimit.type !== 'None') {
  1185. 				this.value = Math.max(limitGetters[zoomOutLimit.type](zoomOutLimit, glow), this.value);
  1186. 			}
  1187. 			
  1188. 			if (zoomInLimit.type !== 'None') {
  1189. 				this.value = Math.min(limitGetters[zoomInLimit.type](zoomInLimit, glow), this.value);
  1190. 			}
  1191. 			
  1192. 			this.apply();
  1193. 		};
  1194. 	})();
  1195. }();
  1196.  
  1197. const rotation = new function () {
  1198. 	this.value = PI_HALVES[0];
  1199. 	
  1200. 	this.reset = () => {
  1201. 		this.value = PI_HALVES[0];
  1202. 		
  1203. 		video.style.removeProperty('rotate');
  1204. 	};
  1205. 	
  1206. 	this.apply = () => {
  1207. 		// Conversion from anticlockwise rotation from the x-axis to clockwise rotation from the y-axis
  1208. 		video.style.setProperty('rotate', `${PI_HALVES[0] - this.value}rad`);
  1209. 		
  1210. 		delete actions.reset.prior;
  1211. 	};
  1212. 	
  1213. 	// dissimilar from other constrain functions in that no effective limit is applied
  1214. 	// -1.5π < rotation <= 0.5π
  1215. 	// 0 <= 0.5π - rotation < 2π
  1216. 	this.constrain = () => {
  1217. 		this.value %= PI_HALVES[3];
  1218. 		
  1219. 		if (this.value > PI_HALVES[0]) {
  1220. 			this.value -= PI_HALVES[3];
  1221. 		} else if (this.value <= -PI_HALVES[2]) {
  1222. 			this.value += PI_HALVES[3];
  1223. 		}
  1224. 		
  1225. 		this.apply();
  1226. 	};
  1227. }();
  1228.  
  1229. const position = new function () {
  1230. 	this.x = this.y = 0;
  1231. 	
  1232. 	this.getValues = () => ({x: this.x, y: this.y});
  1233. 	
  1234. 	this.reset = () => {
  1235. 		this.x = this.y = 0;
  1236. 		
  1237. 		video.style.removeProperty('translate');
  1238. 	};
  1239. 	
  1240. 	this.apply = () => {
  1241. 		const {x, y} = getRotated(this.x, this.y);
  1242. 		
  1243. 		video.style.setProperty('translate', `${-x * zoom.value * 100}% ${y * zoom.value * 100}%`);
  1244. 		
  1245. 		delete actions.reset.prior;
  1246. 	};
  1247. 	
  1248. 	this.constrain = (() => {
  1249. 		const applyFrameValues = (lowCorner, highCorner, sub, main) => {
  1250. 			this[sub] = Math.max(-lowCorner[sub], Math.min(highCorner[sub], this[sub]));
  1251. 			
  1252. 			const progress = (this[sub] + lowCorner[sub]) / (highCorner[sub] + lowCorner[sub]);
  1253. 			
  1254. 			if (this[main] < 0) {
  1255. 				const bound = Number.isNaN(progress) ?
  1256. 					-lowCorner[main] :
  1257. 					(lowCorner[main] - highCorner[main]) * progress - lowCorner[main];
  1258. 				
  1259. 				this[main] = Math.max(this[main], bound);
  1260. 			} else {
  1261. 				const bound = Number.isNaN(progress) ?
  1262. 					lowCorner[main] :
  1263. 					(highCorner[main] - lowCorner[main]) * progress + lowCorner[main];
  1264. 				
  1265. 				this[main] = Math.min(this[main], bound);
  1266. 			}
  1267. 		};
  1268. 		
  1269. 		const applyFrame = (firstCorner, secondCorner, firstCornerAngle, secondCornerAngle) => {
  1270. 			// The anti-clockwise angle from the first (top left) corner
  1271. 			const midPointAngle = (getTheta(0, 0, this.x, this.y) + PI_HALVES[1] + firstCornerAngle) % PI_HALVES[3];
  1272. 			
  1273. 			if (midPointAngle % PI_HALVES[1] < secondCornerAngle) {
  1274. 				// Frame is x-bound
  1275. 				const [lowCorner, highCorner] = this.x >= 0 ? [firstCorner, secondCorner] : [secondCorner, firstCorner];
  1276. 				
  1277. 				applyFrameValues(lowCorner, highCorner, 'y', 'x');
  1278. 			} else {
  1279. 				// Frame is y-bound
  1280. 				const [lowCorner, highCorner] = this.y >= 0 ? [firstCorner, secondCorner] : [secondCorner, firstCorner];
  1281. 				
  1282. 				applyFrameValues(lowCorner, highCorner, 'x', 'y');
  1283. 			}
  1284. 		};
  1285. 		
  1286. 		const getBoundApplyFrame = (() => {
  1287. 			const getCorner = (first, second) => {
  1288. 				if (zoom.value < first.z) {
  1289. 					return {x: 0, y: 0};
  1290. 				}
  1291. 				
  1292. 				if (zoom.value < second.z) {
  1293. 					const progress = (1 / zoom.value - 1 / first.z) / (1 / second.z - 1 / first.z);
  1294. 					
  1295. 					return {
  1296. 						x: progress * (second.x - first.x) + first.x,
  1297. 						y: progress * (second.y - first.y) + first.y,
  1298. 					};
  1299. 				}
  1300. 				
  1301. 				return {
  1302. 					x: Math.max(0, 0.5 - (0.5 - second.x) / (zoom.value / second.z)),
  1303. 					y: Math.max(0, 0.5 - (0.5 - second.y) / (zoom.value / second.z)),
  1304. 				};
  1305. 			};
  1306. 			
  1307. 			return (first0, second0, first1, second1) => {
  1308. 				const fFirstCorner = getCorner(first0, second0);
  1309. 				const fSecondCorner = getCorner(first1, second1);
  1310. 				
  1311. 				const fFirstCornerAngle = getTheta(0, 0, fFirstCorner.x, fFirstCorner.y);
  1312. 				const fSecondCornerAngle = fFirstCornerAngle + getTheta(0, 0, fSecondCorner.x, fSecondCorner.y);
  1313. 				
  1314. 				return applyFrame.bind(null, fFirstCorner, fSecondCorner, fFirstCornerAngle, fSecondCornerAngle);
  1315. 			};
  1316. 		})();
  1317. 		
  1318. 		// https://math.stackexchange.com/questions/2223691/intersect-2-lines-at-the-same-ratio-through-a-point
  1319. 		const snapZoom = (() => {
  1320. 			const isAbove = (x, y, m, c) => m * x + c < y;
  1321. 			
  1322. 			const getPSecond = (low, high) => 1 - low / high;
  1323. 			const getPFirst = (low, high, target) => (target - low) / (high - low);
  1324. 			
  1325. 			const getProgressed = (p, [fromX, fromY], [toX, toY]) => [p * (toX - fromX) + fromX, p * (toY - fromY) + fromY];
  1326. 			
  1327. 			const getFlipped = (first, second, flipX, flipY) => {
  1328. 				const flippedFirst = [];
  1329. 				const flippedSecond = [];
  1330. 				const corner = [];
  1331. 				
  1332. 				if (flipX) {
  1333. 					flippedFirst[0] = -first.x;
  1334. 					flippedSecond[0] = -second.x;
  1335. 					corner[0] = -0.5;
  1336. 				} else {
  1337. 					flippedFirst[0] = first.x;
  1338. 					flippedSecond[0] = second.x;
  1339. 					corner[0] = 0.5;
  1340. 				}
  1341. 				
  1342. 				if (flipY) {
  1343. 					flippedFirst[1] = -first.y;
  1344. 					flippedSecond[1] = -second.y;
  1345. 					corner[1] = -0.5;
  1346. 				} else {
  1347. 					flippedFirst[1] = first.y;
  1348. 					flippedSecond[1] = second.y;
  1349. 					corner[1] = 0.5;
  1350. 				}
  1351. 				
  1352. 				return [flippedFirst, flippedSecond, corner];
  1353. 			};
  1354. 			
  1355. 			const getIntersectPSecond = ([[from0X, from0Y], [to0X, to0Y]], [[from1X, from1Y], [to1X, to1Y]], doFlip) => {
  1356. 				const x = Math.abs(position.x);
  1357. 				const y = Math.abs(position.y);
  1358. 				
  1359. 				const d = to0Y;
  1360. 				const e = from0Y;
  1361. 				const f = to0X;
  1362. 				const g = from0X;
  1363. 				const h = to1Y;
  1364. 				const i = from1Y;
  1365. 				const j = to1X;
  1366. 				const k = from1X;
  1367. 				
  1368. 				const a = d * j - d * k - j * e + e * k - h * f + h * g + i * f - i * g;
  1369. 				const b = d * k - d * x - e * k + e * x + j * e - k * e - j * y + k * y - h * g + h * x + i * g - i * x - f * i + g * i + f * y - g * y;
  1370. 				const c = k * e - e * x - k * y - g * i + i * x + g * y;
  1371. 				
  1372. 				return (doFlip ? -b - Math.sqrt(b * b - 4 * a * c) : -b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
  1373. 			};
  1374. 			
  1375. 			const applyZoomPairSecond = ([z, ...pair], doFlip) => {
  1376. 				const p = getIntersectPSecond(...pair, doFlip);
  1377. 				
  1378. 				if (p >= 0) {
  1379. 					zoom.value = p >= 1 ? Number.MAX_SAFE_INTEGER : z / (1 - p);
  1380. 					
  1381. 					return true;
  1382. 				}
  1383. 				
  1384. 				return false;
  1385. 			};
  1386. 			
  1387. 			const applyZoomPairFirst = ([z0, z1, ...pair], doFlip) => {
  1388. 				const p = getIntersectPSecond(...pair, doFlip);
  1389. 				
  1390. 				if (p >= 0) {
  1391. 					zoom.value = p * (z1 - z0) + z0;
  1392. 					
  1393. 					return true;
  1394. 				}
  1395. 				
  1396. 				return false;
  1397. 			};
  1398. 			
  1399. 			return (first0, second0, first1, second1) => {
  1400. 				const getPairings = (flipX0, flipY0, flipX1, flipY1) => {
  1401. 					const [flippedFirst0, flippedSecond0, corner0] = getFlipped(first0, second0, flipX0, flipY0);
  1402. 					const [flippedFirst1, flippedSecond1, corner1] = getFlipped(first1, second1, flipX1, flipY1);
  1403. 					
  1404. 					if (second0.z > second1.z) {
  1405. 						const progressedHigh = getProgressed(getPSecond(second1.z, second0.z), flippedSecond1, corner1);
  1406. 						const pairHigh = [
  1407. 							second0.z,
  1408. 							[flippedSecond0, corner0],
  1409. 							[progressedHigh, corner1],
  1410. 						];
  1411. 						
  1412. 						if (second1.z > first0.z) {
  1413. 							const progressedLow = getProgressed(getPFirst(first0.z, second0.z, second1.z), flippedFirst0, flippedSecond0);
  1414. 							
  1415. 							return [
  1416. 								pairHigh,
  1417. 								[
  1418. 									second1.z,
  1419. 									second0.z,
  1420. 									[progressedLow, flippedSecond0],
  1421. 									[flippedSecond1, progressedHigh],
  1422. 								],
  1423. 							];
  1424. 						}
  1425. 						
  1426. 						const progressedLow = getProgressed(getPSecond(second1.z, first0.z), flippedSecond1, corner1);
  1427. 						
  1428. 						return [
  1429. 							pairHigh,
  1430. 							[
  1431. 								first0.z,
  1432. 								second0.z,
  1433. 								[flippedFirst0, flippedSecond0],
  1434. 								[progressedLow, progressedHigh],
  1435. 							],
  1436. 						];
  1437. 					}
  1438. 					
  1439. 					const progressedHigh = getProgressed(getPSecond(second0.z, second1.z), flippedSecond0, corner0);
  1440. 					const pairHigh = [
  1441. 						second1.z,
  1442. 						[progressedHigh, corner0],
  1443. 						[flippedSecond1, corner1],
  1444. 					];
  1445. 					
  1446. 					if (second0.z > first1.z) {
  1447. 						const progressedLow = getProgressed(getPFirst(first1.z, second1.z, second0.z), flippedFirst1, flippedSecond1);
  1448. 						
  1449. 						return [
  1450. 							pairHigh,
  1451. 							[
  1452. 								second0.z,
  1453. 								second1.z,
  1454. 								[progressedLow, flippedSecond1],
  1455. 								[flippedSecond0, progressedHigh],
  1456. 							],
  1457. 						];
  1458. 					}
  1459. 					
  1460. 					const progressedLow = getProgressed(getPSecond(second0.z, first1.z), flippedSecond0, corner0);
  1461. 					
  1462. 					return [
  1463. 						pairHigh,
  1464. 						[
  1465. 							first1.z,
  1466. 							second1.z,
  1467. 							[flippedFirst1, flippedSecond1],
  1468. 							[progressedLow, progressedHigh],
  1469. 						],
  1470. 					];
  1471. 				};
  1472. 				
  1473. 				const [pair0, pair1, doFlip = false] = (() => {
  1474. 					const doInvert = position.x >= 0 === position.y < 0;
  1475. 					
  1476. 					if (doInvert) {
  1477. 						const m = (second0.y - 0.5) / (second0.x - 0.5);
  1478. 						const c = 0.5 - m * 0.5;
  1479. 						
  1480. 						if (isAbove(Math.abs(position.x), Math.abs(position.y), m, c)) {
  1481. 							return [...getPairings(false, false, true, false), true];
  1482. 						}
  1483. 						
  1484. 						return getPairings(false, false, false, true);
  1485. 					}
  1486. 					
  1487. 					const m = (second1.y - 0.5) / (second1.x - 0.5);
  1488. 					const c = 0.5 - m * 0.5;
  1489. 					
  1490. 					if (isAbove(Math.abs(position.x), Math.abs(position.y), m, c)) {
  1491. 						return getPairings(true, false, false, false);
  1492. 					}
  1493. 					
  1494. 					return [...getPairings(false, true, false, false), true];
  1495. 				})();
  1496. 				
  1497. 				if (applyZoomPairSecond(pair0, doFlip) || applyZoomPairFirst(pair1, doFlip)) {
  1498. 					return;
  1499. 				}
  1500. 				
  1501. 				zoom.value = pair1[0];
  1502. 			};
  1503. 		})();
  1504. 		
  1505. 		const getZoomPoints = (mod) => {
  1506. 			const [videoWidth, videoHeight] = (() => {
  1507. 				const {glow} = $config.get();
  1508. 				
  1509. 				if (glow) {
  1510. 					const {scaled, unscaled} = glow.blur;
  1511. 					
  1512. 					return [
  1513. 						(video.clientWidth + Math.max(0, glow.end * video.clientWidth - video.clientWidth + Math.max(unscaled.x, scaled.x * zoom.value)) * mod) / 2,
  1514. 						(video.clientHeight + Math.max(0, glow.end * video.clientHeight - video.clientHeight + Math.max(unscaled.y, scaled.y * zoom.value)) * mod) / 2,
  1515. 					];
  1516. 				}
  1517. 				
  1518. 				return [video.clientWidth / 2, video.clientHeight / 2];
  1519. 			})();
  1520. 			
  1521. 			const viewportWidth = viewport.clientWidth / 2;
  1522. 			const viewportHeight = viewport.clientHeight / 2;
  1523. 			
  1524. 			const quadrant = Math.floor(rotation.value / PI_HALVES[0]) + 3;
  1525. 			
  1526. 			const [xAngle, yAngle] = (() => {
  1527. 				const angle = (rotation.value + PI_HALVES[3]) % PI_HALVES[0];
  1528. 				
  1529. 				return quadrant % 2 === 0 ? [PI_HALVES[0] - angle, angle] : [angle, PI_HALVES[0] - angle];
  1530. 			})();
  1531. 			
  1532. 			const progress = xAngle / PI_HALVES[0] * 2 - 1;
  1533. 			// equivalent:
  1534. 			// const progress = (yAngle / PI_HALVES[0]) * -2 + 1;
  1535. 			
  1536. 			const cornerAZero = (() => {
  1537. 				const angleA = progress * viewportAngles.side;
  1538. 				const angleB = PI_HALVES[0] - angleA - yAngle;
  1539. 				
  1540. 				return {
  1541. 					// todo broken i guess :)
  1542. 					x: Math.abs(viewportWidth * Math.sin(angleA) / (videoWidth * Math.cos(angleB))),
  1543. 					y: Math.abs(viewportWidth * Math.cos(angleB) / (videoHeight * Math.cos(angleA))),
  1544. 				};
  1545. 			})();
  1546. 			
  1547. 			const cornerBZero = (() => {
  1548. 				const angleA = progress * viewportAngles.base;
  1549. 				const angleB = PI_HALVES[0] - angleA - yAngle;
  1550. 				
  1551. 				return {
  1552. 					x: Math.abs(viewportHeight * Math.cos(angleA) / (videoWidth * Math.cos(angleB))),
  1553. 					y: Math.abs(viewportHeight * Math.sin(angleB) / (videoHeight * Math.cos(angleA))),
  1554. 				};
  1555. 			})();
  1556. 			
  1557. 			const [cornerAX, cornerAY, cornerBX, cornerBY] = (() => {
  1558. 				const getCornerA = (() => {
  1559. 					const angleA = progress * viewportAngles.side;
  1560. 					const angleB = PI_HALVES[0] - angleA - yAngle;
  1561. 					
  1562. 					return (zoom) => {
  1563. 						const h = viewportWidth / zoom / Math.cos(angleA);
  1564. 						
  1565. 						const xBound = Math.max(0, videoWidth - Math.sin(angleB) * h);
  1566. 						const yBound = Math.max(0, videoHeight - Math.cos(angleB) * h);
  1567. 						
  1568. 						return {
  1569. 							x: xBound / video.clientWidth,
  1570. 							y: yBound / video.clientHeight,
  1571. 						};
  1572. 					};
  1573. 				})();
  1574. 				
  1575. 				const getCornerB = (() => {
  1576. 					const angleA = progress * viewportAngles.base;
  1577. 					const angleB = PI_HALVES[0] - angleA - yAngle;
  1578. 					
  1579. 					return (zoom) => {
  1580. 						const h = viewportHeight / zoom / Math.cos(angleA);
  1581. 						
  1582. 						const xBound = Math.max(0, videoWidth - Math.cos(angleB) * h);
  1583. 						const yBound = Math.max(0, videoHeight - Math.sin(angleB) * h);
  1584. 						
  1585. 						return {
  1586. 							x: xBound / video.clientWidth,
  1587. 							y: yBound / video.clientHeight,
  1588. 						};
  1589. 					};
  1590. 				})();
  1591. 				
  1592. 				return [
  1593. 					getCornerA(cornerAZero.x),
  1594. 					getCornerA(cornerAZero.y),
  1595. 					getCornerB(cornerBZero.x),
  1596. 					getCornerB(cornerBZero.y),
  1597. 				];
  1598. 			})();
  1599. 			
  1600. 			const cornerAVars = cornerAZero.x < cornerAZero.y ?
  1601. 				[{z: cornerAZero.x, ...cornerAX}, {z: cornerAZero.y, ...cornerAY}] :
  1602. 				[{z: cornerAZero.y, ...cornerAY}, {z: cornerAZero.x, ...cornerAX}];
  1603. 			
  1604. 			const cornerBVars = cornerBZero.x < cornerBZero.y ?
  1605. 				[{z: cornerBZero.x, ...cornerBX}, {z: cornerBZero.y, ...cornerBY}] :
  1606. 				[{z: cornerBZero.y, ...cornerBY}, {z: cornerBZero.x, ...cornerBX}];
  1607. 			
  1608. 			return quadrant % 2 === 0 ? [...cornerAVars, ...cornerBVars] : [...cornerBVars, ...cornerAVars];
  1609. 		};
  1610. 		
  1611. 		const handlers = {
  1612. 			[LIMITS.static]: ({custom: ratio}) => {
  1613. 				const bound = 0.5 + (ratio - 0.5) / zoom.value;
  1614. 				
  1615. 				position.x = Math.max(-bound, Math.min(bound, position.x));
  1616. 				position.y = Math.max(-bound, Math.min(bound, position.y));
  1617. 			},
  1618. 			[LIMITS.fit]: (() => {
  1619. 				const cache = new ConfigCache(rotation, zoom);
  1620. 				
  1621. 				let boundApplyFrame;
  1622. 				
  1623. 				return ({frame}) => {
  1624. 					if (cache.isStale()) {
  1625. 						boundApplyFrame = getBoundApplyFrame(...getZoomPoints(frame));
  1626. 					}
  1627. 					
  1628. 					boundApplyFrame();
  1629. 				};
  1630. 			})(),
  1631. 		};
  1632. 		
  1633. 		const snapHandlers = {
  1634. 			[LIMITS.fit]: (() => {
  1635. 				const cache = new ConfigCache(rotation, zoom);
  1636. 				
  1637. 				let boundSnapZoom;
  1638. 				
  1639. 				return ({frame}) => {
  1640. 					if (cache.isStale()) {
  1641. 						boundSnapZoom = snapZoom.bind(null, ...getZoomPoints(frame));
  1642. 					}
  1643. 					
  1644. 					boundSnapZoom();
  1645. 					
  1646. 					zoom.constrain();
  1647. 				};
  1648. 			})(),
  1649. 		};
  1650. 		
  1651. 		return (doZoom = false) => {
  1652. 			const {panLimit, snapPanLimit} = $config.get();
  1653. 			
  1654. 			if (doZoom) {
  1655. 				snapHandlers[snapPanLimit.type]?.(snapPanLimit);
  1656. 			}
  1657. 			
  1658. 			handlers[panLimit.type]?.(panLimit);
  1659. 			
  1660. 			this.apply();
  1661. 		};
  1662. 	})();
  1663. }();
  1664.  
  1665. const crop = new function () {
  1666. 	this.top = this.right = this.bottom = this.left = 0;
  1667. 	
  1668. 	this.getValues = () => ({top: this.top, right: this.right, bottom: this.bottom, left: this.left});
  1669. 	
  1670. 	this.reveal = () => {
  1671. 		this.top = this.right = this.bottom = this.left = 0;
  1672. 		
  1673. 		rule.remove();
  1674. 	};
  1675. 	
  1676. 	this.reset = () => {
  1677. 		this.reveal();
  1678. 		
  1679. 		actions.crop.reset();
  1680. 	};
  1681. 	
  1682. 	const rule = new css.Toggleable();
  1683. 	
  1684. 	this.apply = () => {
  1685. 		rule.remove();
  1686. 		rule.add(
  1687. 			`${SELECTOR_VIDEO}:not(.${this.CLASS_ABLE} *)`,
  1688. 			['clip-path', `inset(${this.top * 100}% ${this.right * 100}% ${this.bottom * 100}% ${this.left * 100}%)`],
  1689. 		);
  1690. 		
  1691. 		delete actions.reset.prior;
  1692. 		
  1693. 		glow.handleViewChange();
  1694. 		glow.reset();
  1695. 	};
  1696. 	
  1697. 	this.getDimensions = (width = video.clientWidth, height = video.clientHeight) => [
  1698. 		width * (1 - this.left - this.right),
  1699. 		height * (1 - this.top - this.bottom),
  1700. 	];
  1701. }();
  1702.  
  1703. // FUNCTIONALITY
  1704.  
  1705. const glow = (() => {
  1706. 	const videoCanvas = new OffscreenCanvas(0, 0);
  1707. 	const videoCtx = videoCanvas.getContext('2d', {alpha: false});
  1708. 	
  1709. 	const glowCanvas = document.createElement('canvas');
  1710. 	const glowCtx = glowCanvas.getContext('2d', {alpha: false});
  1711. 	
  1712. 	glowCanvas.style.setProperty('position', 'absolute');
  1713. 	
  1714. 	class Sector {
  1715. 		canvas = new OffscreenCanvas(0, 0);
  1716. 		ctx = this.canvas.getContext('2d', {alpha: false});
  1717. 		
  1718. 		update(doFill) {
  1719. 			if (doFill) {
  1720. 				this.fill();
  1721. 			} else {
  1722. 				this.shift();
  1723. 				this.take();
  1724. 			}
  1725. 			
  1726. 			this.giveEdge();
  1727. 			
  1728. 			if (this.hasCorners) {
  1729. 				this.giveCorners();
  1730. 			}
  1731. 		}
  1732. 	}
  1733. 	
  1734. 	class Side extends Sector {
  1735. 		setDimensions(doShiftRight, sWidth, sHeight, sx, sy, dx, dy, dWidth, dHeight) {
  1736. 			this.canvas.width = sWidth;
  1737. 			this.canvas.height = sHeight;
  1738. 			
  1739. 			this.shift = this.ctx.drawImage.bind(this.ctx, this.canvas, doShiftRight ? 1 : -1, 0);
  1740. 			
  1741. 			this.fill = this.ctx.drawImage.bind(this.ctx, videoCanvas, sx, sy, 1, sHeight, 0, 0, sWidth, sHeight);
  1742. 			this.take = this.ctx.drawImage.bind(this.ctx, videoCanvas, sx, sy, 1, sHeight, doShiftRight ? 0 : sWidth - 1, 0, 1, sHeight);
  1743. 			
  1744. 			this.giveEdge = glowCtx.drawImage.bind(glowCtx, this.canvas, 0, 0, sWidth, sHeight, dx, dy, dWidth, dHeight);
  1745. 			
  1746. 			if (dy === 0) {
  1747. 				this.hasCorners = false;
  1748. 				
  1749. 				return;
  1750. 			}
  1751. 			
  1752. 			this.hasCorners = true;
  1753. 			
  1754. 			const giveCorner0 = glowCtx.drawImage.bind(glowCtx, this.canvas, 0, 0, sWidth, 1, dx, 0, dWidth, dy);
  1755. 			const giveCorner1 = glowCtx.drawImage.bind(glowCtx, this.canvas, 0, sHeight - 1, sWidth, 1, dx, dy + dHeight, dWidth, dy);
  1756. 			
  1757. 			this.giveCorners = () => {
  1758. 				giveCorner0();
  1759. 				giveCorner1();
  1760. 			};
  1761. 		}
  1762. 	}
  1763. 	
  1764. 	class Base extends Sector {
  1765. 		setDimensions(doShiftDown, sWidth, sHeight, sx, sy, dx, dy, dWidth, dHeight) {
  1766. 			this.canvas.width = sWidth;
  1767. 			this.canvas.height = sHeight;
  1768. 			
  1769. 			this.shift = this.ctx.drawImage.bind(this.ctx, this.canvas, 0, doShiftDown ? 1 : -1);
  1770. 			
  1771. 			this.fill = this.ctx.drawImage.bind(this.ctx, videoCanvas, sx, sy, sWidth, 1, 0, 0, sWidth, sHeight);
  1772. 			this.take = this.ctx.drawImage.bind(this.ctx, videoCanvas, sx, sy, sWidth, 1, 0, doShiftDown ? 0 : sHeight - 1, sWidth, 1);
  1773. 			
  1774. 			this.giveEdge = glowCtx.drawImage.bind(glowCtx, this.canvas, 0, 0, sWidth, sHeight, dx, dy, dWidth, dHeight);
  1775. 			
  1776. 			if (dx === 0) {
  1777. 				this.hasCorners = false;
  1778. 				
  1779. 				return;
  1780. 			}
  1781. 			
  1782. 			this.hasCorners = true;
  1783. 			
  1784. 			const giveCorner0 = glowCtx.drawImage.bind(glowCtx, this.canvas, 0, 0, 1, sHeight, 0, dy, dx, dHeight);
  1785. 			const giveCorner1 = glowCtx.drawImage.bind(glowCtx, this.canvas, sWidth - 1, 0, 1, sHeight, dx + dWidth, dy, dx, dHeight);
  1786. 			
  1787. 			this.giveCorners = () => {
  1788. 				giveCorner0();
  1789. 				giveCorner1();
  1790. 			};
  1791. 		}
  1792. 		
  1793. 		setClipPath(points) {
  1794. 			this.clipPath = new Path2D();
  1795. 			
  1796. 			this.clipPath.moveTo(...points[0]);
  1797. 			this.clipPath.lineTo(...points[1]);
  1798. 			this.clipPath.lineTo(...points[2]);
  1799. 			this.clipPath.closePath();
  1800. 		}
  1801. 		
  1802. 		update(doFill) {
  1803. 			glowCtx.save();
  1804. 			
  1805. 			glowCtx.clip(this.clipPath);
  1806. 			
  1807. 			super.update(doFill);
  1808. 			
  1809. 			glowCtx.restore();
  1810. 		}
  1811. 	}
  1812. 	
  1813. 	const components = {
  1814. 		left: new Side(),
  1815. 		right: new Side(),
  1816. 		top: new Base(),
  1817. 		bottom: new Base(),
  1818. 	};
  1819. 	
  1820. 	const setComponentDimensions = (sampleCount, size, isInset, doFlip) => {
  1821. 		const [croppedWidth, croppedHeight] = crop.getDimensions();
  1822. 		const halfCanvas = {x: Math.ceil(glowCanvas.width / 2), y: Math.ceil(glowCanvas.height / 2)};
  1823. 		const halfVideo = {x: croppedWidth / 2, y: croppedHeight / 2};
  1824. 		const dWidth = Math.ceil(Math.min(halfVideo.x, size));
  1825. 		const dHeight = Math.ceil(Math.min(halfVideo.y, size));
  1826. 		const [dWidthScale, dHeightScale, sideWidth, sideHeight] = isInset ?
  1827. 			[0, 0, videoCanvas.width / croppedWidth * glowCanvas.width, videoCanvas.height / croppedHeight * glowCanvas.height] :
  1828. 			[halfCanvas.x - halfVideo.x, halfCanvas.y - halfVideo.y, croppedWidth, croppedHeight];
  1829. 		
  1830. 		components.left.setDimensions(!doFlip, sampleCount, videoCanvas.height, 0, 0, 0, dHeightScale, dWidth, sideHeight);
  1831. 		
  1832. 		components.right.setDimensions(doFlip, sampleCount, videoCanvas.height, videoCanvas.width - 1, 0, glowCanvas.width - dWidth, dHeightScale, dWidth, sideHeight);
  1833. 		
  1834. 		components.top.setDimensions(!doFlip, videoCanvas.width, sampleCount, 0, 0, dWidthScale, 0, sideWidth, dHeight);
  1835. 		components.top.setClipPath([[0, 0], [halfCanvas.x, halfCanvas.y], [glowCanvas.width, 0]]);
  1836. 		
  1837. 		components.bottom.setDimensions(doFlip, videoCanvas.width, sampleCount, 0, videoCanvas.height - 1, dWidthScale, glowCanvas.height - dHeight, sideWidth, dHeight);
  1838. 		components.bottom.setClipPath([[0, glowCanvas.height], [halfCanvas.x, halfCanvas.y], [glowCanvas.width, glowCanvas.height]]);
  1839. 	};
  1840. 	
  1841. 	class Instance {
  1842. 		constructor() {
  1843. 			const {filter, sampleCount, size, end, doFlip} = $config.get().glow;
  1844. 			
  1845. 			// Setup canvases
  1846. 			
  1847. 			glowCanvas.style.setProperty('filter', filter);
  1848. 			
  1849. 			[glowCanvas.width, glowCanvas.height] = crop.getDimensions().map((dimension) => dimension * end);
  1850. 			
  1851. 			glowCanvas.style.setProperty('left', `${crop.left * 100 + (1 - end) * (1 - crop.left - crop.right) * 50}%`);
  1852. 			glowCanvas.style.setProperty('top', `${crop.top * 100 + (1 - end) * (1 - crop.top - crop.bottom) * 50}%`);
  1853. 			
  1854. 			[videoCanvas.width, videoCanvas.height] = crop.getDimensions(video.videoWidth, video.videoHeight);
  1855. 			
  1856. 			setComponentDimensions(sampleCount, size, end <= 1, doFlip);
  1857. 			
  1858. 			this.update(true);
  1859. 		}
  1860. 		
  1861. 		update(doFill = false) {
  1862. 			videoCtx.drawImage(
  1863. 				video,
  1864. 				crop.left * video.videoWidth,
  1865. 				crop.top * video.videoHeight,
  1866. 				video.videoWidth * (1 - crop.left - crop.right),
  1867. 				video.videoHeight * (1 - crop.top - crop.bottom),
  1868. 				0,
  1869. 				0,
  1870. 				videoCanvas.width,
  1871. 				videoCanvas.height,
  1872. 			);
  1873. 			
  1874. 			components.left.update(doFill);
  1875. 			components.right.update(doFill);
  1876. 			components.top.update(doFill);
  1877. 			components.bottom.update(doFill);
  1878. 		}
  1879. 	}
  1880. 	
  1881. 	return new function () {
  1882. 		const container = document.createElement('div');
  1883. 		
  1884. 		container.style.display = 'none';
  1885. 		
  1886. 		container.appendChild(glowCanvas);
  1887. 		containers.background.appendChild(container);
  1888. 		
  1889. 		this.isHidden = false;
  1890. 		
  1891. 		let instance, startCopyLoop, stopCopyLoop;
  1892. 		
  1893. 		const play = () => {
  1894. 			if (!video.paused && !this.isHidden && !enabler.isHidingGlow) {
  1895. 				startCopyLoop?.();
  1896. 			}
  1897. 		};
  1898. 		
  1899. 		const fill = () => {
  1900. 			if (!this.isHidden) {
  1901. 				instance.update(true);
  1902. 			}
  1903. 		};
  1904. 		
  1905. 		const handleVisibilityChange = () => {
  1906. 			if (document.hidden) {
  1907. 				stopCopyLoop();
  1908. 			} else {
  1909. 				play();
  1910. 			}
  1911. 		};
  1912. 		
  1913. 		this.handleSizeChange = () => {
  1914. 			instance = new Instance();
  1915. 		};
  1916. 		
  1917. 		// set up pausing if glow isn't visible
  1918. 		this.handleViewChange = (() => {
  1919. 			const cache = new Cache(rotation, zoom);
  1920. 			
  1921. 			let cornerTop, cornerBottom;
  1922. 			
  1923. 			return (doForce = false) => {
  1924. 				if (doForce || cache.isStale()) {
  1925. 					const viewportX = viewport.clientWidth / 2 / zoom.value;
  1926. 					const viewportY = viewport.clientHeight / 2 / zoom.value;
  1927. 					
  1928. 					const angle = PI_HALVES[0] - rotation.value;
  1929. 					
  1930. 					cornerTop = getGenericRotated(viewportX, viewportY, angle);
  1931. 					cornerBottom = getGenericRotated(viewportX, -viewportY, angle);
  1932. 					
  1933. 					cornerTop.x = Math.abs(cornerTop.x);
  1934. 					cornerTop.y = Math.abs(cornerTop.y);
  1935. 					cornerBottom.x = Math.abs(cornerBottom.x);
  1936. 					cornerBottom.y = Math.abs(cornerBottom.y);
  1937. 				}
  1938. 				
  1939. 				const videoX = Math.abs(position.x) * video.clientWidth;
  1940. 				const videoY = Math.abs(position.y) * video.clientHeight;
  1941. 				
  1942. 				for (const corner of [cornerTop, cornerBottom]) {
  1943. 					if (
  1944. 						videoX + corner.x > (0.5 - crop.right) * video.clientWidth + 1
  1945. 						|| videoX - corner.x < (crop.left - 0.5) * video.clientWidth - 1
  1946. 						|| videoY + corner.y > (0.5 - crop.top) * video.clientHeight + 1
  1947. 						|| videoY - corner.y < (crop.bottom - 0.5) * video.clientHeight - 1
  1948. 					) {
  1949. 						// fill if newly visible
  1950. 						if (this.isHidden) {
  1951. 							instance?.update(true);
  1952. 						}
  1953. 						
  1954. 						this.isHidden = false;
  1955. 						
  1956. 						glowCanvas.style.removeProperty('visibility');
  1957. 						
  1958. 						play();
  1959. 						
  1960. 						return;
  1961. 					}
  1962. 				}
  1963. 				
  1964. 				this.isHidden = true;
  1965. 				
  1966. 				glowCanvas.style.visibility = 'hidden';
  1967. 				
  1968. 				stopCopyLoop?.();
  1969. 			};
  1970. 		})();
  1971. 		
  1972. 		const loop = {};
  1973. 		
  1974. 		this.start = () => {
  1975. 			const config = $config.get().glow;
  1976. 			
  1977. 			if (!config) {
  1978. 				return;
  1979. 			}
  1980. 			
  1981. 			if (!enabler.isHidingGlow) {
  1982. 				container.style.removeProperty('display');
  1983. 			}
  1984. 			
  1985. 			// todo handle this?
  1986. 			if (crop.left + crop.right >= 1 || crop.top + crop.bottom >= 1) {
  1987. 				return;
  1988. 			}
  1989. 			
  1990. 			let loopId = -1;
  1991. 			
  1992. 			if (loop.interval !== config.interval || loop.fps !== config.fps) {
  1993. 				loop.interval = config.interval;
  1994. 				loop.fps = config.fps;
  1995. 				loop.wasSlow = false;
  1996. 				loop.throttleCount = 0;
  1997. 			}
  1998. 			
  1999. 			stopCopyLoop = () => ++loopId;
  2000. 			
  2001. 			instance = new Instance();
  2002. 			
  2003. 			startCopyLoop = async () => {
  2004. 				const id = ++loopId;
  2005. 				
  2006. 				await new Promise((resolve) => {
  2007. 					window.setTimeout(resolve, config.interval);
  2008. 				});
  2009. 				
  2010. 				while (id === loopId) {
  2011. 					const startTime = Date.now();
  2012. 					
  2013. 					instance.update();
  2014. 					
  2015. 					const delay = loop.interval - (Date.now() - startTime);
  2016. 					
  2017. 					if (delay <= 0) {
  2018. 						if (loop.wasSlow) {
  2019. 							loop.interval = 1000 / (loop.fps - ++loop.throttleCount);
  2020. 						}
  2021. 						
  2022. 						loop.wasSlow = !loop.wasSlow;
  2023. 						
  2024. 						continue;
  2025. 					}
  2026. 					
  2027. 					if (delay > 2 && loop.throttleCount > 0) {
  2028. 						console.warn(`[${GM.info.script.name}] Glow update frequency reduced from ${loop.fps} hertz to ${loop.fps - loop.throttleCount} hertz due to poor performance.`);
  2029. 						
  2030. 						loop.fps -= loop.throttleCount;
  2031. 						
  2032. 						loop.throttleCount = 0;
  2033. 					}
  2034. 					
  2035. 					loop.wasSlow = false;
  2036. 					
  2037. 					await new Promise((resolve) => {
  2038. 						window.setTimeout(resolve, delay);
  2039. 					});
  2040. 				}
  2041. 			};
  2042. 			
  2043. 			play();
  2044. 			
  2045. 			video.addEventListener('pause', stopCopyLoop);
  2046. 			video.addEventListener('play', play);
  2047. 			video.addEventListener('seeked', fill);
  2048. 			
  2049. 			document.addEventListener('visibilitychange', handleVisibilityChange);
  2050. 		};
  2051. 		
  2052. 		const priorCrop = {};
  2053. 		
  2054. 		this.hide = () => {
  2055. 			Object.assign(priorCrop, crop);
  2056. 			
  2057. 			stopCopyLoop?.();
  2058. 			
  2059. 			container.style.display = 'none';
  2060. 		};
  2061. 		
  2062. 		this.show = () => {
  2063. 			if (Object.entries(priorCrop).some(([edge, value]) => crop[edge] !== value)) {
  2064. 				this.reset();
  2065. 			} else {
  2066. 				play();
  2067. 			}
  2068. 			
  2069. 			container.style.removeProperty('display');
  2070. 		};
  2071. 		
  2072. 		this.stop = () => {
  2073. 			this.hide();
  2074. 			
  2075. 			video.removeEventListener('pause', stopCopyLoop);
  2076. 			video.removeEventListener('play', play);
  2077. 			video.removeEventListener('seeked', fill);
  2078. 			
  2079. 			document.removeEventListener('visibilitychange', handleVisibilityChange);
  2080. 			
  2081. 			startCopyLoop = undefined;
  2082. 			stopCopyLoop = undefined;
  2083. 		};
  2084. 		
  2085. 		this.reset = () => {
  2086. 			this.stop();
  2087. 			
  2088. 			this.start();
  2089. 		};
  2090. 	}();
  2091. })();
  2092.  
  2093. const actions = (() => {
  2094. 	const drag = (event, clickCallback, moveCallback, target = video) => new Promise((resolve) => {
  2095. 		event.stopImmediatePropagation();
  2096. 		event.preventDefault();
  2097. 		
  2098. 		// window blur events don't fire if devtools is open
  2099. 		stopDrag?.();
  2100. 		
  2101. 		target.setPointerCapture(event.pointerId);
  2102. 		
  2103. 		css.tag(enabler.CLASS_DRAGGING);
  2104. 		
  2105. 		const clickDisallowListener = ({clientX, clientY}) => {
  2106. 			const {clickCutoff} = $config.get();
  2107. 			const distance = Math.abs(event.clientX - clientX) + Math.abs(event.clientY - clientY);
  2108. 			
  2109. 			if (distance >= clickCutoff) {
  2110. 				target.removeEventListener('pointermove', clickDisallowListener);
  2111. 				target.removeEventListener('pointerup', clickCallback);
  2112. 			}
  2113. 		};
  2114. 		
  2115. 		if (clickCallback) {
  2116. 			target.addEventListener('pointermove', clickDisallowListener);
  2117. 			target.addEventListener('pointerup', clickCallback, {once: true});
  2118. 		}
  2119. 		
  2120. 		const doubleClickListener = (event) => {
  2121. 			event.stopImmediatePropagation();
  2122. 		};
  2123. 		
  2124. 		target.addEventListener('pointermove', moveCallback);
  2125. 		viewport.parentElement.addEventListener('dblclick', doubleClickListener, true);
  2126. 		
  2127. 		stopDrag = () => {
  2128. 			css.tag(enabler.CLASS_DRAGGING, false);
  2129. 			
  2130. 			target.removeEventListener('pointermove', moveCallback);
  2131. 			
  2132. 			if (clickCallback) {
  2133. 				target.removeEventListener('pointermove', clickDisallowListener);
  2134. 				target.removeEventListener('pointerup', clickCallback);
  2135. 			}
  2136. 			
  2137. 			// delay removing listeners for events that happen after pointerup
  2138. 			window.setTimeout(() => {
  2139. 				viewport.parentElement.removeEventListener('dblclick', doubleClickListener, true);
  2140. 				
  2141. 				document.removeEventListener('click', clickListener, true);
  2142. 			}, 0);
  2143. 			
  2144. 			window.removeEventListener('blur', stopDrag);
  2145. 			target.removeEventListener('pointerup', stopDrag);
  2146. 			
  2147. 			target.releasePointerCapture(event.pointerId);
  2148. 			
  2149. 			stopDrag = undefined;
  2150. 			
  2151. 			enabler.handleChange();
  2152. 			
  2153. 			resolve();
  2154. 		};
  2155. 		
  2156. 		window.addEventListener('blur', stopDrag);
  2157. 		target.addEventListener('pointerup', stopDrag);
  2158. 		
  2159. 		const clickListener = (event) => {
  2160. 			event.stopImmediatePropagation();
  2161. 			event.preventDefault();
  2162. 		};
  2163. 		
  2164. 		document.addEventListener('click', clickListener, true);
  2165. 		document.addEventListener('click', clickListener, true);
  2166. 	});
  2167. 	
  2168. 	const getOnScroll = (() => {
  2169. 		// https://stackoverflow.com/a/30134826
  2170. 		const multipliers = [1, 40, 800];
  2171. 		
  2172. 		return (callback) => (event) => {
  2173. 			event.stopImmediatePropagation();
  2174. 			event.preventDefault();
  2175. 			
  2176. 			if (event.deltaY !== 0) {
  2177. 				callback(event.deltaY * multipliers[event.deltaMode]);
  2178. 			}
  2179. 		};
  2180. 	})();
  2181. 	
  2182. 	const addListeners = ({onMouseDown, onRightClick, onScroll}, doAdd = true) => {
  2183. 		const property = `${doAdd ? 'add' : 'remove'}EventListener`;
  2184. 		
  2185. 		altTarget[property]('pointerdown', onMouseDown);
  2186. 		altTarget[property]('contextmenu', onRightClick, true);
  2187. 		altTarget[property]('wheel', onScroll);
  2188. 	};
  2189. 	
  2190. 	return {
  2191. 		crop: new function () {
  2192. 			let top = 0, right = 0, bottom = 0, left = 0, handle;
  2193. 			
  2194. 			const values = {};
  2195. 			
  2196. 			Object.defineProperty(values, 'top', {get: () => top, set: (value) => top = value});
  2197. 			Object.defineProperty(values, 'right', {get: () => right, set: (value) => right = value});
  2198. 			Object.defineProperty(values, 'bottom', {get: () => bottom, set: (value) => bottom = value});
  2199. 			Object.defineProperty(values, 'left', {get: () => left, set: (value) => left = value});
  2200. 			
  2201. 			class Button {
  2202. 				// allowance for rounding errors
  2203. 				static ALLOWANCE_HANDLE = 0.0001;
  2204. 				
  2205. 				static CLASS_HANDLE = 'viewfind-crop-handle';
  2206. 				static CLASS_EDGES = {
  2207. 					left: 'viewfind-crop-left',
  2208. 					top: 'viewfind-crop-top',
  2209. 					right: 'viewfind-crop-right',
  2210. 					bottom: 'viewfind-crop-bottom',
  2211. 				};
  2212. 				
  2213. 				static OPPOSITES = {
  2214. 					left: 'right',
  2215. 					right: 'left',
  2216. 					
  2217. 					top: 'bottom',
  2218. 					bottom: 'top',
  2219. 				};
  2220. 				
  2221. 				callbacks = [];
  2222. 				
  2223. 				element = document.createElement('div');
  2224. 				
  2225. 				constructor(...edges) {
  2226. 					this.edges = edges;
  2227. 					
  2228. 					this.isHandle = true;
  2229. 					
  2230. 					this.element.style.position = 'absolute';
  2231. 					this.element.style.pointerEvents = 'all';
  2232. 					
  2233. 					for (const edge of edges) {
  2234. 						this.element.style[edge] = '0';
  2235. 						
  2236. 						this.element.classList.add(Button.CLASS_EDGES[edge]);
  2237. 						
  2238. 						this.element.style.setProperty(`border-${Button.OPPOSITES[edge]}-width`, '1px');
  2239. 					}
  2240. 					
  2241. 					this.element.addEventListener('contextmenu', (event) => {
  2242. 						event.stopPropagation();
  2243. 						event.preventDefault();
  2244. 						
  2245. 						this.reset(false);
  2246. 					});
  2247. 					
  2248. 					this.element.addEventListener('pointerdown', (() => {
  2249. 						const clickListener = ({offsetX, offsetY, target}) => {
  2250. 							this.set({
  2251. 								width: (this.edges.includes('left') ? offsetX : target.clientWidth - offsetX) / video.clientWidth,
  2252. 								height: (this.edges.includes('top') ? offsetY : target.clientHeight - offsetY) / video.clientHeight,
  2253. 							}, false);
  2254. 						};
  2255. 						
  2256. 						const getDragListener = (event, target) => {
  2257. 							const getWidth = (() => {
  2258. 								if (this.edges.includes('left')) {
  2259. 									const position = this.element.clientWidth - event.offsetX;
  2260. 									
  2261. 									return ({offsetX}) => offsetX + position;
  2262. 								}
  2263. 								
  2264. 								const position = target.offsetWidth + event.offsetX;
  2265. 								
  2266. 								return ({offsetX}) => position - offsetX;
  2267. 							})();
  2268. 							
  2269. 							const getHeight = (() => {
  2270. 								if (this.edges.includes('top')) {
  2271. 									const position = this.element.clientHeight - event.offsetY;
  2272. 									
  2273. 									return ({offsetY}) => offsetY + position;
  2274. 								}
  2275. 								
  2276. 								const position = target.offsetHeight + event.offsetY;
  2277. 								
  2278. 								return ({offsetY}) => position - offsetY;
  2279. 							})();
  2280. 							
  2281. 							return (event) => {
  2282. 								this.set({
  2283. 									width: getWidth(event) / video.clientWidth,
  2284. 									height: getHeight(event) / video.clientHeight,
  2285. 								});
  2286. 							};
  2287. 						};
  2288. 						
  2289. 						return async (event) => {
  2290. 							if (event.buttons === 1) {
  2291. 								const target = this.element.parentElement;
  2292. 								
  2293. 								if (this.isHandle) {
  2294. 									this.setPanel();
  2295. 								}
  2296. 								
  2297. 								await drag(event, clickListener, getDragListener(event, target), target);
  2298. 								
  2299. 								this.updateCounterpart();
  2300. 							}
  2301. 						};
  2302. 					})());
  2303. 				}
  2304. 				
  2305. 				notify() {
  2306. 					for (const callback of this.callbacks) {
  2307. 						callback();
  2308. 					}
  2309. 				}
  2310. 				
  2311. 				set isHandle(value) {
  2312. 					this._isHandle = value;
  2313. 					
  2314. 					this.element.classList[value ? 'add' : 'remove'](Button.CLASS_HANDLE);
  2315. 				}
  2316. 				
  2317. 				get isHandle() {
  2318. 					return this._isHandle;
  2319. 				}
  2320. 				
  2321. 				reset() {
  2322. 					this.isHandle = true;
  2323. 					
  2324. 					for (const edge of this.edges) {
  2325. 						values[edge] = 0;
  2326. 					}
  2327. 				}
  2328. 			}
  2329. 			
  2330. 			class EdgeButton extends Button {
  2331. 				constructor(edge) {
  2332. 					super(edge);
  2333. 					
  2334. 					this.edge = edge;
  2335. 				}
  2336. 				
  2337. 				updateCounterpart() {
  2338. 					if (this.counterpart.isHandle) {
  2339. 						this.counterpart.setHandle();
  2340. 					}
  2341. 				}
  2342. 				
  2343. 				setCrop(value = 0) {
  2344. 					values[this.edge] = value;
  2345. 				}
  2346. 				
  2347. 				setPanel() {
  2348. 					this.isHandle = false;
  2349. 					
  2350. 					this.setCrop(handle);
  2351. 					
  2352. 					this.setHandle();
  2353. 				}
  2354. 			}
  2355. 			
  2356. 			class SideButton extends EdgeButton {
  2357. 				flow() {
  2358. 					let size = 1;
  2359. 					
  2360. 					if (top <= Button.ALLOWANCE_HANDLE) {
  2361. 						size -= handle;
  2362. 						
  2363. 						this.element.style.top = `${handle * 100}%`;
  2364. 					} else {
  2365. 						size -= top;
  2366. 						
  2367. 						this.element.style.top = `${top * 100}%`;
  2368. 					}
  2369. 					
  2370. 					if (bottom <= Button.ALLOWANCE_HANDLE) {
  2371. 						size -= handle;
  2372. 					} else {
  2373. 						size -= bottom;
  2374. 					}
  2375. 					
  2376. 					this.element.style.height = `${Math.max(0, size * 100)}%`;
  2377. 				}
  2378. 				
  2379. 				setBounds(counterpart, components) {
  2380. 					this.counterpart = components[counterpart];
  2381. 					
  2382. 					components.top.callbacks.push(() => {
  2383. 						this.flow();
  2384. 					});
  2385. 					
  2386. 					components.bottom.callbacks.push(() => {
  2387. 						this.flow();
  2388. 					});
  2389. 				}
  2390. 				
  2391. 				setHandle(doNotify = true) {
  2392. 					this.element.style.width = `${Math.min(1 - values[this.counterpart.edge], handle) * 100}%`;
  2393. 					
  2394. 					if (doNotify) {
  2395. 						this.notify();
  2396. 					}
  2397. 				}
  2398. 				
  2399. 				set({width}, doUpdateCounterpart = true) {
  2400. 					if (this.isHandle !== (this.isHandle = width <= Button.ALLOWANCE_HANDLE)) {
  2401. 						this.flow();
  2402. 					}
  2403. 					
  2404. 					if (doUpdateCounterpart) {
  2405. 						this.updateCounterpart();
  2406. 					}
  2407. 					
  2408. 					if (this.isHandle) {
  2409. 						this.setCrop();
  2410. 						
  2411. 						this.setHandle();
  2412. 						
  2413. 						return;
  2414. 					}
  2415. 					
  2416. 					const size = Math.min(1 - values[this.counterpart.edge], width);
  2417. 					
  2418. 					this.setCrop(size);
  2419. 					
  2420. 					this.element.style.width = `${size * 100}%`;
  2421. 					
  2422. 					this.notify();
  2423. 				}
  2424. 				
  2425. 				reset(isGeneral = true) {
  2426. 					super.reset();
  2427. 					
  2428. 					if (isGeneral) {
  2429. 						this.element.style.top = `${handle * 100}%`;
  2430. 						this.element.style.height = `${(0.5 - handle) * 200}%`;
  2431. 						this.element.style.width = `${handle * 100}%`;
  2432. 						
  2433. 						return;
  2434. 					}
  2435. 					
  2436. 					this.flow();
  2437. 					
  2438. 					this.setHandle();
  2439. 					
  2440. 					this.updateCounterpart();
  2441. 				}
  2442. 			}
  2443. 			
  2444. 			class BaseButton extends EdgeButton {
  2445. 				flow() {
  2446. 					let size = 1;
  2447. 					
  2448. 					if (left <= Button.ALLOWANCE_HANDLE) {
  2449. 						size -= handle;
  2450. 						
  2451. 						this.element.style.left = `${handle * 100}%`;
  2452. 					} else {
  2453. 						size -= left;
  2454. 						
  2455. 						this.element.style.left = `${left * 100}%`;
  2456. 					}
  2457. 					
  2458. 					if (right <= Button.ALLOWANCE_HANDLE) {
  2459. 						size -= handle;
  2460. 					} else {
  2461. 						size -= right;
  2462. 					}
  2463. 					
  2464. 					this.element.style.width = `${Math.max(0, size) * 100}%`;
  2465. 				}
  2466. 				
  2467. 				setBounds(counterpart, components) {
  2468. 					this.counterpart = components[counterpart];
  2469. 					
  2470. 					components.left.callbacks.push(() => {
  2471. 						this.flow();
  2472. 					});
  2473. 					
  2474. 					components.right.callbacks.push(() => {
  2475. 						this.flow();
  2476. 					});
  2477. 				}
  2478. 				
  2479. 				setHandle(doNotify = true) {
  2480. 					this.element.style.height = `${Math.min(1 - values[this.counterpart.edge], handle) * 100}%`;
  2481. 					
  2482. 					if (doNotify) {
  2483. 						this.notify();
  2484. 					}
  2485. 				}
  2486. 				
  2487. 				set({height}, doUpdateCounterpart = false) {
  2488. 					if (this.isHandle !== (this.isHandle = height <= Button.ALLOWANCE_HANDLE)) {
  2489. 						this.flow();
  2490. 					}
  2491. 					
  2492. 					if (doUpdateCounterpart) {
  2493. 						this.updateCounterpart();
  2494. 					}
  2495. 					
  2496. 					if (this.isHandle) {
  2497. 						this.setCrop();
  2498. 						
  2499. 						this.setHandle();
  2500. 						
  2501. 						return;
  2502. 					}
  2503. 					
  2504. 					const size = Math.min(1 - values[this.counterpart.edge], height);
  2505. 					
  2506. 					this.setCrop(size);
  2507. 					
  2508. 					this.element.style.height = `${size * 100}%`;
  2509. 					
  2510. 					this.notify();
  2511. 				}
  2512. 				
  2513. 				reset(isGeneral = true) {
  2514. 					super.reset();
  2515. 					
  2516. 					if (isGeneral) {
  2517. 						this.element.style.left = `${handle * 100}%`;
  2518. 						this.element.style.width = `${(0.5 - handle) * 200}%`;
  2519. 						this.element.style.height = `${handle * 100}%`;
  2520. 						
  2521. 						return;
  2522. 					}
  2523. 					
  2524. 					this.flow();
  2525. 					
  2526. 					this.setHandle();
  2527. 					
  2528. 					this.updateCounterpart();
  2529. 				}
  2530. 			}
  2531. 			
  2532. 			class CornerButton extends Button {
  2533. 				static CLASS_NAME = 'viewfind-crop-corner';
  2534. 				
  2535. 				constructor(sectors, ...edges) {
  2536. 					super(...edges);
  2537. 					
  2538. 					this.element.classList.add(CornerButton.CLASS_NAME);
  2539. 					
  2540. 					this.sectors = sectors;
  2541. 					
  2542. 					for (const sector of sectors) {
  2543. 						sector.callbacks.push(this.flow.bind(this));
  2544. 					}
  2545. 				}
  2546. 				
  2547. 				flow() {
  2548. 					let isHandle = true;
  2549. 					
  2550. 					if (this.sectors[0].isHandle) {
  2551. 						this.element.style.width = `${Math.min(1 - values[this.sectors[0].counterpart.edge], handle) * 100}%`;
  2552. 					} else {
  2553. 						this.element.style.width = `${values[this.edges[0]] * 100}%`;
  2554. 						
  2555. 						isHandle = false;
  2556. 					}
  2557. 					
  2558. 					if (this.sectors[1].isHandle) {
  2559. 						this.element.style.height = `${Math.min(1 - values[this.sectors[1].counterpart.edge], handle) * 100}%`;
  2560. 					} else {
  2561. 						this.element.style.height = `${values[this.edges[1]] * 100}%`;
  2562. 						
  2563. 						isHandle = false;
  2564. 					}
  2565. 					
  2566. 					this.isHandle = isHandle;
  2567. 				}
  2568. 				
  2569. 				updateCounterpart() {
  2570. 					for (const sector of this.sectors) {
  2571. 						sector.updateCounterpart();
  2572. 					}
  2573. 				}
  2574. 				
  2575. 				set(size) {
  2576. 					for (const sector of this.sectors) {
  2577. 						sector.set(size);
  2578. 					}
  2579. 				}
  2580. 				
  2581. 				reset(isGeneral = true) {
  2582. 					this.isHandle = true;
  2583. 					
  2584. 					this.element.style.width = `${handle * 100}%`;
  2585. 					this.element.style.height = `${handle * 100}%`;
  2586. 					
  2587. 					if (isGeneral) {
  2588. 						return;
  2589. 					}
  2590. 					
  2591. 					for (const sector of this.sectors) {
  2592. 						sector.reset(false);
  2593. 					}
  2594. 				}
  2595. 				
  2596. 				setPanel() {
  2597. 					for (const sector of this.sectors) {
  2598. 						sector.setPanel();
  2599. 					}
  2600. 				}
  2601. 			}
  2602. 			
  2603. 			this.CODE = 'crop';
  2604. 			
  2605. 			this.CLASS_ABLE = 'viewfind-action-able-crop';
  2606. 			
  2607. 			const container = document.createElement('div');
  2608. 			
  2609. 			// todo ditch the containers object
  2610. 			container.style.width = container.style.height = 'inherit';
  2611. 			
  2612. 			containers.foreground.append(container);
  2613. 			
  2614. 			this.reset = () => {
  2615. 				for (const component of Object.values(this.components)) {
  2616. 					component.reset(true);
  2617. 				}
  2618. 			};
  2619. 			
  2620. 			this.onRightClick = (event) => {
  2621. 				if (event.target.parentElement.id === container.id) {
  2622. 					return;
  2623. 				}
  2624. 				
  2625. 				event.stopPropagation();
  2626. 				event.preventDefault();
  2627. 				
  2628. 				if (stopDrag) {
  2629. 					return;
  2630. 				}
  2631. 				
  2632. 				this.reset();
  2633. 			};
  2634. 			
  2635. 			this.onScroll = getOnScroll((distance) => {
  2636. 				const increment = distance * $config.get().speeds.crop / zoom.value;
  2637. 				
  2638. 				this.components.top.set({height: top + Math.min((1 - top - bottom) / 2, increment)});
  2639. 				this.components.left.set({width: left + Math.min((1 - left - right) / 2, increment)});
  2640. 				
  2641. 				this.components.bottom.set({height: bottom + increment});
  2642. 				this.components.right.set({width: right + increment});
  2643. 			});
  2644. 			
  2645. 			this.onMouseDown = (() => {
  2646. 				const getDragListener = () => {
  2647. 					const multiplier = $config.get().multipliers.crop;
  2648. 					
  2649. 					const setX = ((right, left, change) => {
  2650. 						const clamped = Math.max(-left, Math.min(right, change * multiplier / video.clientWidth));
  2651. 						
  2652. 						this.components.left.set({width: left + clamped});
  2653. 						this.components.right.set({width: right - clamped});
  2654. 					}).bind(undefined, right, left);
  2655. 					
  2656. 					const setY = ((top, bottom, change) => {
  2657. 						const clamped = Math.max(-top, Math.min(bottom, change * multiplier / video.clientHeight));
  2658. 						
  2659. 						this.components.top.set({height: top + clamped});
  2660. 						
  2661. 						this.components.bottom.set({height: bottom - clamped});
  2662. 					}).bind(undefined, top, bottom);
  2663. 					
  2664. 					let priorEvent;
  2665. 					
  2666. 					return ({offsetX, offsetY}) => {
  2667. 						if (!priorEvent) {
  2668. 							priorEvent = {offsetX, offsetY};
  2669. 							
  2670. 							return;
  2671. 						}
  2672. 						
  2673. 						setX(offsetX - priorEvent.offsetX);
  2674. 						setY(offsetY - priorEvent.offsetY);
  2675. 					};
  2676. 				};
  2677. 				
  2678. 				const clickListener = () => {
  2679. 					zoom.value = zoom.getFit(1 - left - right, 1 - top - bottom);
  2680. 					
  2681. 					zoom.constrain();
  2682. 					
  2683. 					position.x = (left - right) / 2;
  2684. 					position.y = (bottom - top) / 2;
  2685. 					
  2686. 					position.constrain();
  2687. 				};
  2688. 				
  2689. 				return (event) => {
  2690. 					if (event.buttons === 1) {
  2691. 						drag(event, clickListener, getDragListener(), container);
  2692. 					}
  2693. 				};
  2694. 			})();
  2695. 			
  2696. 			this.components = {
  2697. 				top: new BaseButton('top'),
  2698. 				right: new SideButton('right'),
  2699. 				bottom: new BaseButton('bottom'),
  2700. 				left: new SideButton('left'),
  2701. 			};
  2702. 			
  2703. 			this.components.top.setBounds('bottom', this.components);
  2704. 			this.components.right.setBounds('left', this.components);
  2705. 			this.components.bottom.setBounds('top', this.components);
  2706. 			this.components.left.setBounds('right', this.components);
  2707. 			
  2708. 			this.components.topLeft = new CornerButton([this.components.left, this.components.top], 'left', 'top');
  2709. 			this.components.topRight = new CornerButton([this.components.right, this.components.top], 'right', 'top');
  2710. 			this.components.bottomLeft = new CornerButton([this.components.left, this.components.bottom], 'left', 'bottom');
  2711. 			this.components.bottomRight = new CornerButton([this.components.right, this.components.bottom], 'right', 'bottom');
  2712. 			
  2713. 			container.append(...Object.values(this.components).map(({element}) => element));
  2714. 			
  2715. 			this.set = ({top, right, bottom, left}) => {
  2716. 				this.components.top.set({height: top});
  2717. 				this.components.right.set({width: right});
  2718. 				this.components.bottom.set({height: bottom});
  2719. 				this.components.left.set({width: left});
  2720. 			};
  2721. 			
  2722. 			this.onInactive = () => {
  2723. 				addListeners(this, false);
  2724. 				
  2725. 				if (crop.left === left && crop.top === top && crop.right === right && crop.bottom === bottom) {
  2726. 					return;
  2727. 				}
  2728. 				
  2729. 				crop.left = left;
  2730. 				crop.top = top;
  2731. 				crop.right = right;
  2732. 				crop.bottom = bottom;
  2733. 				
  2734. 				crop.apply();
  2735. 			};
  2736. 			
  2737. 			this.onActive = () => {
  2738. 				const config = $config.get().crop;
  2739. 				
  2740. 				handle = config.handle / Math.max(zoom.value, 1);
  2741. 				
  2742. 				for (const component of [this.components.top, this.components.bottom, this.components.left, this.components.right]) {
  2743. 					if (component.isHandle) {
  2744. 						component.setHandle();
  2745. 					}
  2746. 				}
  2747. 				
  2748. 				crop.reveal();
  2749. 				
  2750. 				addListeners(this);
  2751. 				
  2752. 				if (!enabler.isHidingGlow) {
  2753. 					glow.handleViewChange();
  2754. 					
  2755. 					glow.reset();
  2756. 				}
  2757. 			};
  2758. 			
  2759. 			const draggingSelector = css.getSelector(enabler.CLASS_DRAGGING);
  2760. 			
  2761. 			this.updateConfig = (() => {
  2762. 				const rule = new css.Toggleable();
  2763. 				
  2764. 				return () => {
  2765. 					// set handle size
  2766. 					for (const button of [this.components.left, this.components.top, this.components.right, this.components.bottom]) {
  2767. 						if (button.isHandle) {
  2768. 							button.setHandle();
  2769. 						}
  2770. 					}
  2771. 					
  2772. 					rule.remove();
  2773. 					
  2774. 					const {colour} = $config.get().crop;
  2775. 					const {id} = container;
  2776. 					
  2777. 					rule.add(`#${id}>:hover.${Button.CLASS_HANDLE},#${id}>:not(.${Button.CLASS_HANDLE})`, ['background-color', colour.fill]);
  2778. 					rule.add(`#${id}>*`, ['border-color', colour.border]);
  2779. 					rule.add(`#${id}:not(${draggingSelector} *)>:not(:hover)`, ['filter', `drop-shadow(${colour.shadow} 0 0 1px)`]);
  2780. 				};
  2781. 			})();
  2782. 			
  2783. 			$config.ready.then(() => {
  2784. 				this.updateConfig();
  2785. 			});
  2786. 			
  2787. 			container.id = 'viewfind-crop-container';
  2788. 			
  2789. 			(() => {
  2790. 				const {id} = container;
  2791. 				
  2792. 				css.add(`${css.getSelector(enabler.CLASS_DRAGGING)} #${id}`, ['cursor', 'grabbing']);
  2793. 				css.add(`${css.getSelector(enabler.CLASS_ABLE)} #${id}`, ['cursor', 'grab']);
  2794. 				css.add(`#${id}>:not(${draggingSelector} .${Button.CLASS_HANDLE})`, ['border-style', 'solid']);
  2795. 				css.add(`${draggingSelector} #${id}>.${Button.CLASS_HANDLE}`, ['filter', 'none']);
  2796. 				
  2797. 				for (const [side, sideClass] of Object.entries(Button.CLASS_EDGES)) {
  2798. 					css.add(
  2799. 						`${draggingSelector} #${id}>.${sideClass}.${Button.CLASS_HANDLE}~.${sideClass}.${CornerButton.CLASS_NAME}`,
  2800. 						[`border-${CornerButton.OPPOSITES[side]}-style`, 'none'],
  2801. 						['filter', 'none'],
  2802. 					);
  2803. 					
  2804. 					// in fullscreen, 16:9 videos get an offsetLeft of 1px on my 16:9 monitor
  2805. 					// I'm extending buttons by 1px so that they reach the edge of screens like mine at default zoom
  2806. 					css.add(`#${id}>.${sideClass}`, [`margin-${side}`, '-1px'], [`padding-${side}`, '1px']);
  2807. 				}
  2808. 				
  2809. 				css.add(`#${id}:not(.${this.CLASS_ABLE} *)`, ['display', 'none']);
  2810. 			})();
  2811. 		}(),
  2812. 		
  2813. 		pan: new function () {
  2814. 			this.CODE = 'pan';
  2815. 			
  2816. 			this.CLASS_ABLE = 'viewfind-action-able-pan';
  2817. 			
  2818. 			this.onActive = () => {
  2819. 				this.updateCrosshair();
  2820. 				
  2821. 				addListeners(this);
  2822. 			};
  2823. 			
  2824. 			this.onInactive = () => {
  2825. 				addListeners(this, false);
  2826. 			};
  2827. 			
  2828. 			this.updateCrosshair = (() => {
  2829. 				const getRoundedString = (number, decimal = 2) => {
  2830. 					const raised = `${Math.round(number * Math.pow(10, decimal))}`.padStart(decimal + 1, '0');
  2831. 					
  2832. 					return `${raised.substr(0, raised.length - decimal)}.${raised.substr(raised.length - decimal)}`;
  2833. 				};
  2834. 				
  2835. 				const getSigned = (ratio) => {
  2836. 					const percent = Math.round(ratio * 100);
  2837. 					
  2838. 					if (percent <= 0) {
  2839. 						return `${percent}`;
  2840. 					}
  2841. 					
  2842. 					return `+${percent}`;
  2843. 				};
  2844. 				
  2845. 				return () => {
  2846. 					crosshair.text.innerText = `${getRoundedString(zoom.value)}×\n${getSigned(position.x)}%\n${getSigned(position.y)}%`;
  2847. 				};
  2848. 			})();
  2849. 			
  2850. 			this.onScroll = getOnScroll((distance) => {
  2851. 				const increment = distance * $config.get().speeds.zoom;
  2852. 				
  2853. 				if (increment > 0) {
  2854. 					zoom.value *= 1 + increment;
  2855. 				} else {
  2856. 					zoom.value /= 1 - increment;
  2857. 				}
  2858. 				
  2859. 				zoom.constrain();
  2860. 				
  2861. 				position.constrain();
  2862. 				
  2863. 				this.updateCrosshair();
  2864. 			});
  2865. 			
  2866. 			this.onRightClick = (event) => {
  2867. 				event.stopImmediatePropagation();
  2868. 				event.preventDefault();
  2869. 				
  2870. 				if (stopDrag) {
  2871. 					return;
  2872. 				}
  2873. 				
  2874. 				position.x = position.y = 0;
  2875. 				zoom.value = 1;
  2876. 				
  2877. 				position.apply();
  2878. 				
  2879. 				zoom.constrain();
  2880. 				
  2881. 				this.updateCrosshair();
  2882. 			};
  2883. 			
  2884. 			this.onMouseDown = (() => {
  2885. 				const getDragListener = () => {
  2886. 					const {multipliers} = $config.get();
  2887. 					
  2888. 					let priorEvent;
  2889. 					
  2890. 					const change = {x: 0, y: 0};
  2891. 					
  2892. 					return ({offsetX, offsetY}) => {
  2893. 						if (priorEvent) {
  2894. 							change.x = (priorEvent.offsetX + change.x - offsetX) * multipliers.pan;
  2895. 							change.y = (priorEvent.offsetY - change.y - offsetY) * -multipliers.pan;
  2896. 							
  2897. 							position.x += change.x / video.clientWidth;
  2898. 							position.y += change.y / video.clientHeight;
  2899. 							
  2900. 							position.constrain();
  2901. 							
  2902. 							this.updateCrosshair();
  2903. 						}
  2904. 						
  2905. 						// events in firefox seem to lose their data after finishing propogation
  2906. 						// so assigning the whole event doesn't work
  2907. 						priorEvent = {offsetX, offsetY};
  2908. 					};
  2909. 				};
  2910. 				
  2911. 				const clickListener = (event) => {
  2912. 					position.x = event.offsetX / video.clientWidth - 0.5;
  2913. 					// Y increases moving down the page
  2914. 					// I flip that to make trigonometry easier
  2915. 					position.y = -event.offsetY / video.clientHeight + 0.5;
  2916. 					
  2917. 					position.constrain(true);
  2918. 					
  2919. 					this.updateCrosshair();
  2920. 				};
  2921. 				
  2922. 				return (event) => {
  2923. 					if (event.buttons === 1) {
  2924. 						drag(event, clickListener, getDragListener());
  2925. 					}
  2926. 				};
  2927. 			})();
  2928. 		}(),
  2929. 		
  2930. 		rotate: new function () {
  2931. 			this.CODE = 'rotate';
  2932. 			
  2933. 			this.CLASS_ABLE = 'viewfind-action-able-rotate';
  2934. 			
  2935. 			this.onActive = () => {
  2936. 				this.updateCrosshair();
  2937. 				
  2938. 				addListeners(this);
  2939. 			};
  2940. 			
  2941. 			this.onInactive = () => {
  2942. 				addListeners(this, false);
  2943. 			};
  2944. 			
  2945. 			this.updateCrosshair = () => {
  2946. 				const angle = PI_HALVES[0] - rotation.value;
  2947. 				
  2948. 				crosshair.text.innerText = `${Math.floor((PI_HALVES[0] - rotation.value) / Math.PI * 180)}°\n≈${Math.round(angle / PI_HALVES[0]) % 4 * 90}°`;
  2949. 			};
  2950. 			
  2951. 			this.onScroll = getOnScroll((distance) => {
  2952. 				rotation.value += distance * $config.get().speeds.rotate;
  2953. 				
  2954. 				rotation.constrain();
  2955. 				
  2956. 				zoom.constrain();
  2957. 				position.constrain();
  2958. 				
  2959. 				this.updateCrosshair();
  2960. 			});
  2961. 			
  2962. 			this.onRightClick = (event) => {
  2963. 				event.stopImmediatePropagation();
  2964. 				event.preventDefault();
  2965. 				
  2966. 				if (stopDrag) {
  2967. 					return;
  2968. 				}
  2969. 				
  2970. 				rotation.value = PI_HALVES[0];
  2971. 				
  2972. 				rotation.apply();
  2973. 				
  2974. 				zoom.constrain();
  2975. 				position.constrain();
  2976. 				
  2977. 				this.updateCrosshair();
  2978. 			};
  2979. 			
  2980. 			this.onMouseDown = (() => {
  2981. 				const getDragListener = () => {
  2982. 					const {multipliers} = $config.get();
  2983. 					const middleX = containers.tracker.clientWidth / 2;
  2984. 					const middleY = containers.tracker.clientHeight / 2;
  2985. 					
  2986. 					const priorPosition = position.getValues();
  2987. 					const priorZoom = zoom.value;
  2988. 					
  2989. 					let priorMouseTheta;
  2990. 					
  2991. 					return (event) => {
  2992. 						const mouseTheta = getTheta(middleX, middleY, event.offsetX, event.offsetY);
  2993. 						
  2994. 						if (priorMouseTheta === undefined) {
  2995. 							priorMouseTheta = mouseTheta;
  2996. 							
  2997. 							return;
  2998. 						}
  2999. 						
  3000. 						position.x = priorPosition.x;
  3001. 						position.y = priorPosition.y;
  3002. 						zoom.value = priorZoom;
  3003. 						
  3004. 						rotation.value += (priorMouseTheta - mouseTheta) * multipliers.rotate;
  3005. 						
  3006. 						rotation.constrain();
  3007. 						
  3008. 						zoom.constrain();
  3009. 						position.constrain();
  3010. 						
  3011. 						this.updateCrosshair();
  3012. 						
  3013. 						priorMouseTheta = mouseTheta;
  3014. 					};
  3015. 				};
  3016. 				
  3017. 				const clickListener = () => {
  3018. 					rotation.value = Math.round(rotation.value / PI_HALVES[0]) * PI_HALVES[0];
  3019. 					
  3020. 					rotation.constrain();
  3021. 					
  3022. 					zoom.constrain();
  3023. 					position.constrain();
  3024. 					
  3025. 					this.updateCrosshair();
  3026. 				};
  3027. 				
  3028. 				return (event) => {
  3029. 					if (event.buttons === 1) {
  3030. 						drag(event, clickListener, getDragListener(), containers.tracker);
  3031. 					}
  3032. 				};
  3033. 			})();
  3034. 		}(),
  3035. 		
  3036. 		configure: new function () {
  3037. 			this.CODE = 'config';
  3038. 			
  3039. 			this.onActive = async () => {
  3040. 				await $config.edit();
  3041. 				
  3042. 				updateConfigs();
  3043. 				
  3044. 				viewport.focus();
  3045. 				
  3046. 				glow.reset();
  3047. 				
  3048. 				position.constrain();
  3049. 				zoom.constrain();
  3050. 			};
  3051. 		}(),
  3052. 		
  3053. 		reset: new function () {
  3054. 			this.CODE = 'reset';
  3055. 			
  3056. 			this.onActive = () => {
  3057. 				if (this.prior) {
  3058. 					zoom.value = this.prior.zoom;
  3059. 					rotation.value = this.prior.rotation;
  3060. 					Object.assign(position, this.prior.position);
  3061. 					Object.assign(crop, this.prior.crop);
  3062. 					
  3063. 					actions.crop.set(this.prior.crop);
  3064. 					
  3065. 					position.apply();
  3066. 					rotation.apply();
  3067. 					zoom.apply();
  3068. 					crop.apply();
  3069. 					
  3070. 					return;
  3071. 				}
  3072. 				
  3073. 				const prior = {
  3074. 					zoom: zoom.value,
  3075. 					rotation: rotation.value,
  3076. 					crop: crop.getValues(),
  3077. 					position: position.getValues(),
  3078. 				};
  3079. 				
  3080. 				position.reset();
  3081. 				rotation.reset();
  3082. 				zoom.reset();
  3083. 				crop.reset();
  3084. 				
  3085. 				glow.reset();
  3086. 				
  3087. 				this.prior = prior;
  3088. 			};
  3089. 		}(),
  3090. 	};
  3091. })();
  3092.  
  3093. const crosshair = new function () {
  3094. 	this.container = document.createElement('div');
  3095. 	
  3096. 	this.lines = {
  3097. 		horizontal: document.createElement('div'),
  3098. 		vertical: document.createElement('div'),
  3099. 	};
  3100. 	
  3101. 	this.text = document.createElement('div');
  3102. 	
  3103. 	const id = 'viewfind-crosshair';
  3104. 	
  3105. 	this.container.id = id;
  3106. 	this.container.classList.add(CLASS_VIEWFINDER);
  3107. 	
  3108. 	css.add(`#${id}:not(${css.getSelector(actions.pan.CLASS_ABLE)} *):not(${css.getSelector(actions.rotate.CLASS_ABLE)} *)`, ['display', 'none']);
  3109. 	
  3110. 	this.lines.horizontal.style.position = this.lines.vertical.style.position = this.text.style.position = this.container.style.position = 'absolute';
  3111. 	
  3112. 	this.lines.horizontal.style.top = '50%';
  3113. 	this.lines.horizontal.style.width = '100%';
  3114. 	
  3115. 	this.lines.vertical.style.left = '50%';
  3116. 	this.lines.vertical.style.height = '100%';
  3117. 	
  3118. 	this.text.style.userSelect = 'none';
  3119. 	
  3120. 	this.container.style.top = '0';
  3121. 	this.container.style.width = '100%';
  3122. 	this.container.style.height = '100%';
  3123. 	this.container.style.pointerEvents = 'none';
  3124. 	
  3125. 	this.container.append(this.lines.horizontal, this.lines.vertical);
  3126. 	
  3127. 	this.clip = () => {
  3128. 		const {outer, inner, gap} = $config.get().crosshair;
  3129. 		
  3130. 		const thickness = Math.max(inner, outer);
  3131. 		
  3132. 		const halfWidth = viewport.clientWidth / 2;
  3133. 		const halfHeight = viewport.clientHeight / 2;
  3134. 		const halfGap = gap / 2;
  3135. 		
  3136. 		const startInner = (thickness - inner) / 2;
  3137. 		const startOuter = (thickness - outer) / 2;
  3138. 		
  3139. 		const endInner = thickness - startInner;
  3140. 		const endOuter = thickness - startOuter;
  3141. 		
  3142. 		this.lines.horizontal.style.clipPath = 'path(\''
  3143. 			+ `M0 ${startOuter}L${halfWidth - halfGap} ${startOuter}L${halfWidth - halfGap} ${startInner}L${halfWidth + halfGap} ${startInner}L${halfWidth + halfGap} ${startOuter}L${viewport.clientWidth} ${startOuter}`
  3144. 			+ `L${viewport.clientWidth} ${endOuter}L${halfWidth + halfGap} ${endOuter}L${halfWidth + halfGap} ${endInner}L${halfWidth - halfGap} ${endInner}L${halfWidth - halfGap} ${endOuter}L0 ${endOuter}`
  3145. 			+ 'Z\')';
  3146. 		
  3147. 		this.lines.vertical.style.clipPath = 'path(\''
  3148. 			+ `M${startOuter} 0L${startOuter} ${halfHeight - halfGap}L${startInner} ${halfHeight - halfGap}L${startInner} ${halfHeight + halfGap}L${startOuter} ${halfHeight + halfGap}L${startOuter} ${viewport.clientHeight}`
  3149. 			+ `L${endOuter} ${viewport.clientHeight}L${endOuter} ${halfHeight + halfGap}L${endInner} ${halfHeight + halfGap}L${endInner} ${halfHeight - halfGap}L${endOuter} ${halfHeight - halfGap}L${endOuter} 0`
  3150. 			+ 'Z\')';
  3151. 	};
  3152. 	
  3153. 	this.updateConfig = (doClip = true) => {
  3154. 		const {colour, outer, inner, text} = $config.get().crosshair;
  3155. 		const thickness = Math.max(inner, outer);
  3156. 		
  3157. 		this.container.style.filter = `drop-shadow(${colour.shadow} 0 0 1px)`;
  3158. 		
  3159. 		this.lines.horizontal.style.translate = `0 -${thickness / 2}px`;
  3160. 		this.lines.vertical.style.translate = `-${thickness / 2}px 0`;
  3161. 		
  3162. 		this.lines.horizontal.style.height = this.lines.vertical.style.width = `${thickness}px`;
  3163. 		
  3164. 		this.lines.horizontal.style.backgroundColor = this.lines.vertical.style.backgroundColor = colour.fill;
  3165. 		
  3166. 		if (text) {
  3167. 			this.text.style.color = colour.fill;
  3168. 			
  3169. 			this.text.style.font = text.font;
  3170. 			this.text.style.left = `${text.position.x}%`;
  3171. 			this.text.style.top = `${text.position.y}%`;
  3172. 			this.text.style.transform = `translate(${text.translate.x}%,${text.translate.y}%) translate(${text.offset.x}px,${text.offset.y}px)`;
  3173. 			this.text.style.textAlign = text.align;
  3174. 			this.text.style.lineHeight = text.height;
  3175. 			
  3176. 			this.container.append(this.text);
  3177. 		} else {
  3178. 			this.text.remove();
  3179. 		}
  3180. 		
  3181. 		if (doClip) {
  3182. 			this.clip();
  3183. 		}
  3184. 	};
  3185. 	
  3186. 	$config.ready.then(() => {
  3187. 		this.updateConfig(false);
  3188. 	});
  3189. }();
  3190.  
  3191. // ELEMENT CHANGE LISTENERS
  3192.  
  3193. const observer = new function () {
  3194. 	const onVideoRestart = () => {
  3195. 		start();
  3196. 	};
  3197. 	
  3198. 	this.onNavigate = () => {
  3199. 		video.removeEventListener('play', onVideoRestart);
  3200. 	};
  3201. 	
  3202. 	const onResolutionChange = () => {
  3203. 		glow.handleSizeChange?.();
  3204. 	};
  3205. 	
  3206. 	const styleObserver = new MutationObserver((() => {
  3207. 		const properties = ['top', 'left', 'width', 'height', 'scale', 'rotate', 'translate'];
  3208. 		
  3209. 		let priorStyle;
  3210. 		
  3211. 		return () => {
  3212. 			// mousemove events on video with ctrlKey=true trigger this but have no effect
  3213. 			if (video.style.cssText === priorStyle) {
  3214. 				return;
  3215. 			}
  3216. 			
  3217. 			priorStyle = video.style.cssText;
  3218. 			
  3219. 			for (const property of properties) {
  3220. 				containers.background.style[property] = video.style[property];
  3221. 				containers.foreground.style[property] = video.style[property];
  3222. 				
  3223. 				// cinematics doesn't exist for embedded vids
  3224. 				if (cinematics) {
  3225. 					cinematics.style[property] = video.style[property];
  3226. 				}
  3227. 			}
  3228. 			
  3229. 			glow.handleViewChange();
  3230. 		};
  3231. 	})());
  3232. 	
  3233. 	// video 'ended' event isn't fired on seeks directly to the video's end
  3234. 	const endObserver = new MutationObserver(() => {
  3235. 		if (!viewport.classList.contains('ended-mode')) {
  3236. 			return;
  3237. 		}
  3238. 		
  3239. 		stop();
  3240. 		
  3241. 		video.addEventListener('play', onVideoRestart, {once: true});
  3242. 	});
  3243. 	
  3244. 	const videoObserver = new ResizeObserver(() => {
  3245. 		viewportAngles.set();
  3246. 		
  3247. 		glow.handleSizeChange?.();
  3248. 	});
  3249. 	
  3250. 	const viewportObserver = new ResizeObserver(() => {
  3251. 		viewportAngles.set();
  3252. 		
  3253. 		crosshair.clip();
  3254. 	});
  3255. 	
  3256. 	this.start = () => {
  3257. 		video.addEventListener('resize', onResolutionChange);
  3258. 		
  3259. 		styleObserver.observe(video, {attributes: true, attributeFilter: ['style']});
  3260. 		endObserver.observe(viewport, {attributes: true, attributeFilter: ['class']});
  3261. 		viewportObserver.observe(viewport);
  3262. 		videoObserver.observe(video);
  3263. 		
  3264. 		glow.handleViewChange();
  3265. 	};
  3266. 	
  3267. 	this.stop = () => {
  3268. 		video.removeEventListener('resize', onResolutionChange);
  3269. 		
  3270. 		styleObserver.disconnect();
  3271. 		endObserver.disconnect();
  3272. 		viewportObserver.disconnect();
  3273. 		videoObserver.disconnect();
  3274. 	};
  3275. }();
  3276.  
  3277. // NAVIGATION LISTENERS
  3278.  
  3279. const stop = () => {
  3280. 	if (stopped) {
  3281. 		return;
  3282. 	}
  3283. 	
  3284. 	stopped = true;
  3285. 	
  3286. 	enabler.stop();
  3287. 	
  3288. 	stopDrag?.();
  3289. 	
  3290. 	observer.stop();
  3291. 	
  3292. 	containers.background.remove();
  3293. 	containers.foreground.remove();
  3294. 	containers.tracker.remove();
  3295. 	crosshair.container.remove();
  3296. 	
  3297. 	glow.stop();
  3298. 	
  3299. 	position.reset();
  3300. 	rotation.reset();
  3301. 	zoom.reset();
  3302. 	crop.reset();
  3303. };
  3304.  
  3305. const start = () => {
  3306. 	if (!stopped) {
  3307. 		return;
  3308. 	}
  3309. 	
  3310. 	stopped = false;
  3311. 	
  3312. 	observer.start();
  3313. 	
  3314. 	glow.start();
  3315. 	
  3316. 	viewport.append(containers.background, containers.foreground, containers.tracker, crosshair.container);
  3317. 	
  3318. 	// User may have a static minimum zoom greater than 1
  3319. 	zoom.constrain();
  3320. 	
  3321. 	enabler.handleChange();
  3322. };
  3323.  
  3324. const updateConfigs = () => {
  3325. 	ConfigCache.id++;
  3326. 	
  3327. 	enabler.updateConfig();
  3328. 	actions.crop.updateConfig();
  3329. 	crosshair.updateConfig();
  3330. };
  3331.  
  3332. // LISTENER ASSIGNMENTS
  3333.  
  3334. // load & navigation
  3335. (() => {
  3336. 	const init = async () => {
  3337. 		video = document.querySelector(SELECTOR_VIDEO);
  3338. 		
  3339. 		if (unsafeWindow.ytplayer?.bootstrapPlayerContainer?.contains(video)) {
  3340. 			// wait for the video to be moved to ytd-app
  3341. 			await new Promise((resolve) => {
  3342. 				new MutationObserver((changes, observer) => {
  3343. 					resolve();
  3344. 					
  3345. 					observer.disconnect();
  3346. 				}).observe(unsafeWindow.ytplayer.bootstrapPlayerContainer, {childList: true});
  3347. 			});
  3348. 		}
  3349. 		
  3350. 		viewport = video.parentElement.parentElement;
  3351. 		altTarget = viewport.parentElement;
  3352. 		cinematics = document.querySelector('#cinematics');
  3353. 		
  3354. 		try {
  3355. 			await $config.ready;
  3356. 		} catch (error) {
  3357. 			if (!$config.reset || !window.confirm(`${error.message}\n\nWould you like to erase your data?`)) {
  3358. 				console.error(error);
  3359. 				
  3360. 				return;
  3361. 			}
  3362. 			
  3363. 			await $config.reset();
  3364. 			
  3365. 			updateConfigs();
  3366. 		}
  3367. 		
  3368. 		containers.foreground.style.zIndex = crosshair.container.style.zIndex = video.parentElement.computedStyleMap?.().get('z-index').value ?? 10;
  3369. 		crosshair.clip();
  3370. 		viewportAngles.set();
  3371. 		
  3372. 		// wait for video dimensions for glow initialisation
  3373. 		if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
  3374. 			start();
  3375. 		}
  3376. 		
  3377. 		video.addEventListener('loadedmetadata', () => start());
  3378. 		
  3379. 		// hacky navigation listener
  3380. 		new MutationObserver((changes) => {
  3381. 			// avoid stopping on resolution change
  3382. 			if (changes.length > 1 || video.src === '') {
  3383. 				observer.onNavigate();
  3384. 				
  3385. 				stop();
  3386. 			}
  3387. 		}).observe(video, {attributes: true, attributeFilter: ['src']});
  3388. 	};
  3389. 	
  3390. 	if (unsafeWindow.ytPageType === 'watch' || isEmbed) {
  3391. 		init();
  3392. 		
  3393. 		return;
  3394. 	}
  3395. 	
  3396. 	const initListener = ({detail: {newPageType}}) => {
  3397. 		if (newPageType === 'ytd-watch-flexy') {
  3398. 			init();
  3399. 			
  3400. 			document.body.removeEventListener('yt-page-type-changed', initListener);
  3401. 		}
  3402. 	};
  3403. 	
  3404. 	document.body.addEventListener('yt-page-type-changed', initListener);
  3405. })();
  3406.  
  3407. // keyboard state change
  3408.  
  3409. document.addEventListener('keydown', ({code}) => {
  3410. 	if (enabler.toggled) {
  3411. 		enabler.keys[enabler.keys.has(code) ? 'delete' : 'add'](code);
  3412. 		
  3413. 		enabler.handleChange();
  3414. 	} else if (!enabler.keys.has(code)) {
  3415. 		enabler.keys.add(code);
  3416. 		
  3417. 		enabler.handleChange();
  3418. 	}
  3419. });
  3420.  
  3421. document.addEventListener('keyup', ({code}) => {
  3422. 	if (enabler.toggled) {
  3423. 		return;
  3424. 	}
  3425. 	
  3426. 	if (enabler.keys.has(code)) {
  3427. 		enabler.keys.delete(code);
  3428. 		
  3429. 		enabler.handleChange();
  3430. 	}
  3431. });
  3432.  
  3433. window.addEventListener('blur', () => {
  3434. 	if (enabler.toggled) {
  3435. 		stopDrag?.();
  3436. 	} else {
  3437. 		enabler.keys.clear();
  3438. 		
  3439. 		enabler.handleChange();
  3440. 	}
  3441. });
  3442. })();