☰

YouTube View Controls

Zoom, rotate & crop YouTube videos.

目前為 2025-01-12 提交的版本，檢視 最新版本。

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