☰

YouTube Viewfinding

Zoom, rotate & crop YouTube videos

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