Custom Native HTML5 Player with Shortcuts

Custom html5 player with shortcuts and v.redd.it videos with audio

目前為 2020-10-24 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name Custom Native HTML5 Player with Shortcuts
  3. // @namespace https://gist.github.com/narcolepticinsomniac
  4. // @version 1.0
  5. // @description Custom html5 player with shortcuts and v.redd.it videos with audio
  6. // @author narcolepticinsomniac
  7. // @include *
  8. // @require https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
  9. // @run-at document-start
  10. // @grant GM_addStyle
  11. // ==/UserScript==
  12.  
  13. let imagusAudio;
  14. let audioSync;
  15. let audioError;
  16. let ytID;
  17. let ytTimeChecked;
  18. const $ = document.querySelector.bind(document);
  19.  
  20. const settings = {
  21. // delay to hide contols and cursor if inactive (set to 3000 milliseconds)
  22. hideControls: 3000,
  23. // delay for fullscreen double-click (set to 300 milliseconds)
  24. clickDelay: 300,
  25. // right-click delay to match imagus user setting (set to 0 milliseconds)
  26. imagusStickyDelay: 0,
  27. // right/left arrows keys or inner skip buttons (set to 10 seconds)
  28. skipNormal: 10,
  29. // Shift + Arrow keys or outer skip buttons (set to 30 seconds)
  30. skipShift: 30,
  31. // Ctrl + Arrow keys skip (set to 1 minute)
  32. skipCtrl: 1,
  33. };
  34.  
  35. const shortcutFuncs = {
  36. toggleCaptions: v => {
  37. const validTracks = [];
  38. for (let i = 0; i < v.textTracks.length; ++i) {
  39. const tt = v.textTracks[i];
  40. if (tt.mode === 'showing') {
  41. tt.mode = 'disabled';
  42. if (v.textTracks.addEventListener) {
  43. // If text track event listeners are supported
  44. // (they are on the most recent Chrome), add
  45. // a marker to remember the old track. Use a
  46. // listener to delete it if a different track
  47. // is selected.
  48. v.cbhtml5vsLastCaptionTrack = tt.label;
  49.  
  50. function cleanup(e) {
  51. for (let i = 0; i < v.textTracks.length; ++i) {
  52. const ott = v.textTracks[i];
  53. if (ott.mode === 'showing') {
  54. delete v.cbhtml5vsLastCaptionTrack;
  55. v.textTracks.removeEventListener('change', cleanup);
  56. return;
  57. }
  58. }
  59. }
  60. v.textTracks.addEventListener('change', cleanup);
  61. }
  62. return;
  63. } else if (tt.mode !== 'hidden') {
  64. validTracks.push(tt);
  65. }
  66. }
  67. // If we got here, none of the tracks were selected.
  68. if (validTracks.length === 0) {
  69. return true; // Do not prevent default if no UI activated
  70. }
  71. // Find the best one and select it.
  72. validTracks.sort((a, b) => {
  73. if (v.cbhtml5vsLastCaptionTrack) {
  74. const lastLabel = v.cbhtml5vsLastCaptionTrack;
  75.  
  76. if (a.label === lastLabel && b.label !== lastLabel) {
  77. return -1;
  78. } else if (b.label === lastLabel && a.label !== lastLabel) {
  79. return 1;
  80. }
  81. }
  82.  
  83. const aLang = a.language.toLowerCase();
  84. const bLang = b.language.toLowerCase();
  85. const navLang = navigator.language.toLowerCase();
  86.  
  87. if (aLang === navLang && bLang !== navLang) {
  88. return -1;
  89. } else if (bLang === navLang && aLang !== navLang) {
  90. return 1;
  91. }
  92.  
  93. const aPre = aLang.split('-')[0];
  94. const bPre = bLang.split('-')[0];
  95. const navPre = navLang.split('-')[0];
  96.  
  97. if (aPre === navPre && bPre !== navPre) {
  98. return -1;
  99. } else if (bPre === navPre && aPre !== navPre) {
  100. return 1;
  101. }
  102.  
  103. return 0;
  104. })[0].mode = 'showing';
  105. },
  106.  
  107. togglePlay: v => {
  108. v.paused ? v.play() : v.pause();
  109. },
  110.  
  111. toStart: v => {
  112. v.currentTime = 0;
  113. },
  114.  
  115. toEnd: v => {
  116. v.currentTime = v.duration;
  117. },
  118.  
  119. skipLeft: (v, key, shift, ctrl) => {
  120. if (shift) {
  121. v.currentTime -= settings.skipShift;
  122. } else if (ctrl) {
  123. v.currentTime -= settings.skipCtrl;
  124. } else {
  125. v.currentTime -= settings.skipNormal;
  126. }
  127. },
  128.  
  129. skipRight: (v, key, shift, ctrl) => {
  130. if (shift) {
  131. v.currentTime += settings.skipShift;
  132. } else if (ctrl) {
  133. v.currentTime += settings.skipCtrl;
  134. } else {
  135. v.currentTime += settings.skipNormal;
  136. }
  137. },
  138.  
  139. increaseVol: v => {
  140. if (audioError) return;
  141. if (v.nextSibling.querySelector('volume.disabled')) {
  142. v.volume = 0;
  143. return;
  144. }
  145. const increase = (v.volume + 0.1).toFixed(1);
  146. if (v.muted) {
  147. v.muted = !v.muted;
  148. v.volume = 0.1;
  149. } else {
  150. v.volume <= 0.9 ? v.volume = increase : v.volume = 1;
  151. }
  152. },
  153.  
  154. decreaseVol: v => {
  155. if (audioError) return;
  156. if (v.nextSibling.querySelector('volume.disabled')) {
  157. v.volume = 0;
  158. return;
  159. }
  160. const decrease = (v.volume - 0.1).toFixed(1);
  161. v.volume >= 0.1 ? v.volume = decrease : v.volume = 0;
  162. },
  163.  
  164. toggleMute: v => {
  165. v.muted = !v.muted;
  166. if (audioSync) imagusAudio.muted = v.muted;
  167. },
  168.  
  169. toggleFS: v => {
  170. if (document.fullscreenElement) {
  171. document.exitFullscreen();
  172. v.parentElement.classList.remove('native-fullscreen');
  173. } else {
  174. v.parentElement.classList.add('native-fullscreen');
  175. v.parentElement.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  176. }
  177. },
  178.  
  179. reloadVideo: v => {
  180. const currTime = v.currentTime;
  181. v.load();
  182. v.currentTime = currTime;
  183. },
  184.  
  185. slowOrPrevFrame: (v, key, shift) => {
  186. if (shift) { // Less-Than
  187. v.currentTime -= 1 / 60;
  188. } else { // Comma
  189. if (v.playbackRate >= 0.1) {
  190. const decrease = (v.playbackRate - 0.1).toFixed(2);
  191. const rate = v.nextSibling.querySelector('rate');
  192. v.playbackRate = decrease;
  193. rate.textContent = `${v.playbackRate}x`;
  194. if (v.playbackRate !== 1) {
  195. rate.setAttribute('data-current-rate', `${v.playbackRate}x`);
  196. }
  197. if (v.playbackRate === 0.9) {
  198. v.classList.add('playback-rate-decreased');
  199. } else if (v.playbackRate === 1.1) {
  200. v.classList.add('playback-rate-increased');
  201. } else if (v.playbackRate === 1) {
  202. v.classList.remove('playback-rate-decreased');
  203. v.classList.remove('playback-rate-increased');
  204. rate.removeAttribute('data-current-rate');
  205. }
  206. } else {
  207. v.playbackRate = 0;
  208. }
  209. if (audioSync) imagusAudio.playbackRate = v.playbackRate;
  210. }
  211. },
  212.  
  213. fastOrNextFrame: (v, key, shift) => {
  214. if (shift) { // Greater-Than
  215. v.currentTime += 1 / 60;
  216. } else { // Period
  217. if (v.playbackRate <= 15.9) {
  218. const increase = (v.playbackRate += 0.1).toFixed(2);
  219. const rate = v.nextSibling.querySelector('rate');
  220. v.playbackRate = increase;
  221. rate.textContent = `${v.playbackRate}x`;
  222. if (v.playbackRate !== 1) {
  223. rate.setAttribute('data-current-rate', `${v.playbackRate}x`);
  224. }
  225. if (v.playbackRate === 0.9) {
  226. v.classList.add('playback-rate-decreased');
  227. } else if (v.playbackRate === 1.1) {
  228. v.classList.add('playback-rate-increased');
  229. } else if (v.playbackRate === 1) {
  230. v.classList.remove('playback-rate-decreased');
  231. v.classList.remove('playback-rate-increased');
  232. rate.removeAttribute('data-current-rate');
  233. }
  234. } else {
  235. v.playbackRate = 16;
  236. }
  237. if (audioSync) imagusAudio.playbackRate = v.playbackRate;
  238. }
  239. },
  240.  
  241. normalSpeed: v => { // ?
  242. v.playbackRate = v.defaultPlaybackRate;
  243. if (audioSync) imagusAudio.playbackRate = v.playbackRate;
  244. v.classList.remove('playback-rate-decreased');
  245. v.classList.remove('playback-rate-increased');
  246. v.nextSibling.querySelector('rate').textContent = '1x';
  247. v.nextSibling.querySelector('rate').removeAttribute('data-current-rate');
  248. },
  249.  
  250. toPercentage: (v, key) => {
  251. v.currentTime = (v.duration * (key - 48)) / 10.0;
  252. },
  253. };
  254.  
  255. const keyFuncs = {
  256. 32: shortcutFuncs.togglePlay, // Space
  257. 75: shortcutFuncs.togglePlay, // K
  258. 35: shortcutFuncs.toEnd, // End
  259. 48: shortcutFuncs.toStart, // 0
  260. 36: shortcutFuncs.toStart, // Home
  261. 37: shortcutFuncs.skipLeft, // Left arrow
  262. 74: shortcutFuncs.skipLeft, // J
  263. 39: shortcutFuncs.skipRight, // Right arrow
  264. 76: shortcutFuncs.skipRight, // L
  265. 38: shortcutFuncs.increaseVol, // Up arrow
  266. 40: shortcutFuncs.decreaseVol, // Down arrow
  267. 77: shortcutFuncs.toggleMute, // M
  268. 70: shortcutFuncs.toggleFS, // F
  269. 67: shortcutFuncs.toggleCaptions, // C
  270. 82: shortcutFuncs.reloadVideo, // R
  271. 188: shortcutFuncs.slowOrPrevFrame, // Comma or Less-Than
  272. 190: shortcutFuncs.fastOrNextFrame, // Period or Greater-Than
  273. 191: shortcutFuncs.normalSpeed, // Forward slash or ?
  274. 49: shortcutFuncs.toPercentage, // 1
  275. 50: shortcutFuncs.toPercentage, // 2
  276. 51: shortcutFuncs.toPercentage, // 3
  277. 52: shortcutFuncs.toPercentage, // 4
  278. 53: shortcutFuncs.toPercentage, // 5
  279. 54: shortcutFuncs.toPercentage, // 6
  280. 55: shortcutFuncs.toPercentage, // 7
  281. 56: shortcutFuncs.toPercentage, // 8
  282. 57: shortcutFuncs.toPercentage, // 9
  283. };
  284.  
  285. function customPlayer(v) {
  286. let videoWrapper;
  287. let savedTimeKey;
  288. let mouseDown;
  289. let isPlaying;
  290. let isSeeking;
  291. let earlyXposPercent;
  292. let preventMouseMove;
  293. let controlsTimeout;
  294. let imagusMouseTimeout;
  295. let imagusVid;
  296. let muteTillSync;
  297. let loaded;
  298. let error;
  299. let elToFocus;
  300. let clickCount = 0;
  301. let repeat = 0;
  302. const directVideo = /video/.test(document.contentType) &&
  303. document.body.firstElementChild === v;
  304. const controls = document.createElement('controls');
  305. const imagus = v.classList.contains('imagus');
  306. if (imagus && !imagusVid) {
  307. imagusVid = v;
  308. imagusAudio = document.createElement('video');
  309. imagusAudio.preload = 'auto';
  310. imagusAudio.autoplay = 'true';
  311. imagusAudio.className = 'imagus imagus-audio';
  312. imagusAudio.style = 'display: none!important;';
  313. imagusVid.parentElement.insertBefore(imagusAudio, imagusVid);
  314. }
  315. if (directVideo) {
  316. elToFocus = document.body;
  317. self === top ? document.body.classList.add('direct-video-top-level') :
  318. document.body.classList.add('direct-video-embed');
  319. } else {
  320. elToFocus = v;
  321. videoWrapper = document.createElement('videowrapper');
  322. v.parentNode.insertBefore(videoWrapper, v);
  323. videoWrapper.appendChild(v);
  324. if (!imagus) {
  325. const compStyles = getComputedStyle(v);
  326. const position = compStyles.getPropertyValue('position');
  327. const zIndex = compStyles.getPropertyValue('z-index');
  328. if (position === 'absolute') {
  329. videoWrapper.style.setProperty('--wrapper-position', `${position}`);
  330. }
  331. if (zIndex !== 'auto') {
  332. controls.style.setProperty('--controls-z-index', `calc(${zIndex} + 1)`);
  333. }
  334. }
  335. }
  336. v.parentNode.insertBefore(controls, v.nextSibling);
  337. const playButton = document.createElement('btn');
  338. playButton.className = 'toggle-play';
  339. controls.appendChild(playButton);
  340. const beginButton = document.createElement('btn');
  341. beginButton.className = 'begin';
  342. controls.appendChild(beginButton);
  343. const skipLongLeft = document.createElement('btn');
  344. skipLongLeft.className = 'skip-long left';
  345. controls.appendChild(skipLongLeft);
  346. const skipShortLeft = document.createElement('btn');
  347. skipShortLeft.className = 'skip-short left';
  348. controls.appendChild(skipShortLeft);
  349. const skipShortRight = document.createElement('btn');
  350. skipShortRight.className = 'skip-short right';
  351. controls.appendChild(skipShortRight);
  352. const skipLongRight = document.createElement('btn');
  353. skipLongRight.className = 'skip-long right';
  354. controls.appendChild(skipLongRight);
  355. const timelineWrapper = document.createElement('timelinewrapper');
  356. controls.appendChild(timelineWrapper);
  357. const currentTime = document.createElement('currenttime');
  358. currentTime.textContent = '0:00';
  359. timelineWrapper.appendChild(currentTime);
  360. const timeline = document.createElement('timeline');
  361. timelineWrapper.appendChild(timeline);
  362. const timeBar = document.createElement('timebar');
  363. timeline.appendChild(timeBar);
  364. const timeBuffer = document.createElement('timebuffer');
  365. timeBar.appendChild(timeBuffer);
  366. const timeProgress = document.createElement('timeprogress');
  367. timeBar.appendChild(timeProgress);
  368. const timeSlider = document.createElement('input');
  369. timeSlider.type = 'range';
  370. timeSlider.value = 0;
  371. timeSlider.min = 0;
  372. timeSlider.max = 100;
  373. timeSlider.step = 0.01;
  374. timeSlider.textContent = '';
  375. timeline.appendChild(timeSlider);
  376. const timeTooltip = document.createElement('timetooltip');
  377. timeTooltip.className = 'hidden';
  378. timeTooltip.textContent = '-:-';
  379. timeline.appendChild(timeTooltip);
  380. const totalTime = document.createElement('totaltime');
  381. totalTime.textContent = '-:-';
  382. timelineWrapper.appendChild(totalTime);
  383. const rateDecrease = document.createElement('btn');
  384. rateDecrease.className = 'rate-decrease';
  385. controls.appendChild(rateDecrease);
  386. const rate = document.createElement('rate');
  387. rate.textContent = '1x';
  388. controls.appendChild(rate);
  389. const rateIncrease = document.createElement('btn');
  390. rateIncrease.className = 'rate-increase';
  391. controls.appendChild(rateIncrease);
  392. const volume = document.createElement('volume');
  393. controls.appendChild(volume);
  394. const volumeBar = document.createElement('volumebar');
  395. volume.appendChild(volumeBar);
  396. const volumeTrail = document.createElement('volumetrail');
  397. volumeBar.appendChild(volumeTrail);
  398. const volumeSlider = document.createElement('input');
  399. volumeSlider.type = 'range';
  400. volumeSlider.min = 0;
  401. volumeSlider.max = 1;
  402. volumeSlider.step = 0.01;
  403. volumeSlider.textContent = '';
  404. volume.appendChild(volumeSlider);
  405. const volumeTooltip = document.createElement('volumetooltip');
  406. volumeTooltip.className = 'hidden';
  407. volumeTooltip.textContent = '0%';
  408. volume.appendChild(volumeTooltip);
  409. const muteButton = document.createElement('btn');
  410. muteButton.className = 'mute';
  411. controls.appendChild(muteButton);
  412. const expandButton = document.createElement('btn');
  413. expandButton.className = 'expand';
  414. controls.appendChild(expandButton);
  415. v.classList.remove('custom-native-player-hidden');
  416. if (v.querySelector('source')) v.classList.add('contains-source');
  417. if (videoWrapper) enforcePosition();
  418. volumeValues();
  419.  
  420. v.onloadedmetadata = () => {
  421. loaded = true;
  422. shortcutFuncs.normalSpeed(v);
  423. savedTimeKey = `${location.pathname}${location.search}${v.duration}`;
  424. const savedTime = localStorage.getItem(savedTimeKey);
  425. if (timeSlider.value === '0') {
  426. if (savedTime) v.currentTime = savedTime;
  427. } else if (earlyXposPercent) {
  428. const time = (earlyXposPercent * v.duration) / 100;
  429. v.currentTime = time;
  430. }
  431. currentTime.textContent = formatTime(v.currentTime);
  432. totalTime.textContent = formatTime(v.duration);
  433. v.classList.remove('disabled');
  434. sliderValues();
  435. };
  436.  
  437. v.onloadeddata = () => {
  438. const imagusVreddit = /v(cf)?\.redd\.it/.test(v.src);
  439. const vHasAudio = hasAudio(v);
  440. if (!vHasAudio && !imagusVreddit) {
  441. v.classList.add('muted');
  442. volumeSlider.value = 0;
  443. muteButton.classList.add('disabled');
  444. volume.classList.add('disabled');
  445. } else if (vHasAudio && !imagusVreddit) {
  446. if (v.volume && !v.muted) v.classList.remove('muted');
  447. volumeValues();
  448. if (volume.classList.contains('disabled')) {
  449. muteButton.classList.remove('disabled');
  450. volume.classList.remove('disabled');
  451. }
  452. }
  453. elToFocus.focus({preventScroll: true});
  454. if (v.duration <= settings.skipNormal) {
  455. skipShortLeft.classList.add('disabled');
  456. skipShortRight.classList.add('disabled');
  457. } else {
  458. skipShortLeft.classList.remove('disabled');
  459. skipShortRight.classList.remove('disabled');
  460. }
  461. if (v.duration <= settings.skipShift) {
  462. skipLongLeft.classList.add('disabled');
  463. skipLongRight.classList.add('disabled');
  464. } else {
  465. skipLongLeft.classList.remove('disabled');
  466. skipLongRight.classList.remove('disabled');
  467. }
  468. if (v.paused) {
  469. v.classList.add('paused');
  470. if (videoWrapper) videoWrapper.classList.add('paused');
  471. }
  472. if (imagus) v.currentTime = 0;
  473. };
  474.  
  475. v.oncanplay = () => {
  476. v.oncanplay = null;
  477. if (!loaded) {
  478. v.load();
  479. console.log('reloaded');
  480. }
  481. };
  482.  
  483. v.onprogress = () => {
  484. if (v.readyState > 1 && v.duration > 0) {
  485. const buffer = (v.buffered.end(v.buffered.length - 1) / v.duration) * 100;
  486. timeBuffer.style.width = `${buffer}%`;
  487. }
  488. };
  489.  
  490. v.ontimeupdate = () => {
  491. if (v.readyState > 0) {
  492. if (v.duration > 0 && !mouseDown) {
  493. sliderValues();
  494. totalTime.textContent = formatTime(v.duration);
  495. if (!imagus && savedTimeKey) localStorage.setItem(savedTimeKey, v.currentTime)
  496. }
  497. }
  498. };
  499.  
  500. v.onvolumechange = () => {
  501. if (audioError) return;
  502. if (audioSync) imagusAudio.volume = v.volume;
  503. if (v.muted || !v.volume) {
  504. v.classList.add('muted');
  505. volumeSlider.value = 0;
  506. volumeTrail.style.width = '0';
  507. localStorage.setItem('videomuted', 'true');
  508. } else {
  509. v.classList.remove('muted');
  510. sliderValues();
  511. v.volume > 0.1 ? localStorage.setItem('videovolume', v.volume) :
  512. localStorage.setItem('videovolume', 0.1);
  513. localStorage.setItem('videomuted', 'false');
  514. }
  515. };
  516.  
  517. v.onplay = () => {
  518. if (v === imagusVid && audioSync) imagusAudio.play();
  519. v.classList.remove('paused');
  520. if (videoWrapper) videoWrapper.classList.remove('paused');
  521. v.classList.add('playing');
  522. };
  523.  
  524. v.onpause = () => {
  525. if (v === imagusVid && audioSync) imagusAudio.pause();
  526. if (!isSeeking) {
  527. v.classList.remove('playing');
  528. v.classList.add('paused');
  529. if (videoWrapper) videoWrapper.classList.add('paused');
  530. }
  531. };
  532.  
  533. v.onended = () => {
  534. if (localStorage.getItem(savedTimeKey)) localStorage.removeItem(savedTimeKey);
  535. savedTimeKey = false;
  536. };
  537.  
  538. v.onemptied = () => {
  539. if (v === imagusVid) {
  540. if (v.src !== '') {
  541. if (/v(cf)?\.redd\.it/.test(v.src)) {
  542. const prefix = v.src.split('DASH')[0].replace('vcf.', 'v.');
  543. const id = v.src.replace(/.*?redd\.it\/(.*?)\/.*/, '$1');
  544. const audioSrc = `${prefix}DASH_audio.mp4`;
  545. fetch(audioSrc)
  546. .then(response => {
  547. imagusAudio.src = response.ok ? audioSrc :
  548. `${prefix}audio`;
  549. }).catch(error => console.log(error));
  550. if (!imagusAudio.muted) {
  551. muteTillSync = true;
  552. imagusAudio.muted = true;
  553. }
  554. if (imagusVid.hasAttribute('loop')) imagusAudio.setAttribute('loop', 'true');
  555. }
  556. v.parentElement.parentElement.classList.add('imagus-video-wrapper');
  557. window.addEventListener('click', imagusClick, true);
  558. document.addEventListener('keyup', imagusKeys, true);
  559. document.addEventListener('mousedown', imagusMouseDown, true);
  560. document.addEventListener('mouseup', imagusMouseUp, true);
  561. } else {
  562. audioSync = false;
  563. audioError = false;
  564. imagusAudio.pause();
  565. imagusAudio.removeAttribute('src');
  566. imagusAudio.load();
  567. imagusAudio.removeAttribute('loop');
  568. v.parentElement.parentElement.removeAttribute('class');
  569. timeTooltip.classList.add('hidden');
  570. window.removeEventListener('click', imagusClick, true);
  571. document.removeEventListener('keyup', imagusKeys, true);
  572. document.removeEventListener('mousedown', imagusMouseDown, true);
  573. document.removeEventListener('mouseup', imagusMouseUp, true);
  574. }
  575. }
  576. };
  577.  
  578. v.onerror = () => {
  579. error = true;
  580. elToFocus.blur();
  581. v.classList.add('disabled');
  582. };
  583.  
  584. v.onmousedown = e => {
  585. if (error && e.button !== 2) return;
  586. e.stopPropagation();
  587. e.stopImmediatePropagation();
  588. if (e.button === 0) {
  589. clickCount++;
  590. const checkState = v.paused;
  591. if (clickCount === 1) {
  592. setTimeout(() => {
  593. if (clickCount === 1) {
  594. // avoid conflicts with existing click listeners
  595. const recheckState = v.paused;
  596. if (checkState === recheckState) shortcutFuncs.togglePlay(v);
  597. } else {
  598. shortcutFuncs.toggleFS(v);
  599. }
  600. clickCount = 0;
  601. }, settings.clickDelay);
  602. }
  603. } else if (e.button === 2) {
  604. window.addEventListener('contextmenu', preventHijack, true);
  605. }
  606. };
  607.  
  608. v.onmouseup = e => {
  609. if (e.button === 2) {
  610. setTimeout(() => {
  611. window.removeEventListener('contextmenu', preventHijack, true);
  612. }, 100);
  613. }
  614. if (error) elToFocus.blur();
  615. };
  616.  
  617. v.onmousemove = () => {
  618. controlsTimeout ? clearTimeout(controlsTimeout) :
  619. v.classList.add('active');
  620. if (videoWrapper) videoWrapper.classList.add('active');
  621. controlsTimeout = setTimeout(() => {
  622. controlsTimeout = false;
  623. v.classList.remove('active');
  624. if (videoWrapper) videoWrapper.classList.remove('active');
  625. }, settings.hideControls);
  626. };
  627.  
  628. new ResizeObserver(() => {
  629. compactControls();
  630. }).observe(v);
  631.  
  632. controls.onmouseup = () => {
  633. if (error) return;
  634. elToFocus.focus({preventScroll: true});
  635. };
  636.  
  637. timeSlider.onmousemove = () => sliderValues();
  638.  
  639. timeSlider.oninput = () => sliderValues();
  640.  
  641. timeSlider.onmousedown = e => {
  642. if (e.button > 0) return;
  643. mouseDown = true;
  644. isSeeking = true;
  645. if (timeTooltip.classList.contains('hidden')) sliderValues();
  646. if (v.readyState > 0) {
  647. if (!v.paused) {
  648. isPlaying = true;
  649. v.pause();
  650. } else {
  651. isPlaying = false;
  652. }
  653. }
  654. };
  655.  
  656. timeSlider.onmouseup = e => {
  657. if (e.button > 0) return;
  658. mouseDown = false;
  659. isSeeking = false;
  660. if (v.readyState > 0) {
  661. sliderValues();
  662. if (isPlaying) {
  663. v.play();
  664. isPlaying = false;
  665. }
  666. }
  667. };
  668.  
  669. volumeSlider.onmousemove = () => sliderValues();
  670.  
  671. volumeSlider.oninput = () => {
  672. if (v.muted) shortcutFuncs.toggleMute(v);
  673. sliderValues();
  674. };
  675.  
  676. muteButton.onmouseup = e => {
  677. if (e.button > 0) return;
  678. const lastVolume = localStorage.getItem('videovolume');
  679. if (v.muted || v.volume) shortcutFuncs.toggleMute(v);
  680. v.volume = lastVolume;
  681. if (audioSync) imagusAudio.muted = v.muted;
  682. };
  683.  
  684. playButton.onmouseup = e => {
  685. if (e.button > 0) return;
  686. shortcutFuncs.togglePlay(v);
  687. };
  688.  
  689. skipShortLeft.onmouseup = e => {
  690. if (e.button > 0) return;
  691. shortcutFuncs.skipLeft(v);
  692. };
  693.  
  694. skipShortRight.onmouseup = e => {
  695. if (e.button > 0) return;
  696. shortcutFuncs.skipRight(v);
  697. };
  698.  
  699. skipLongLeft.onmouseup = e => {
  700. if (e.button > 0) return;
  701. v.currentTime -= settings.skipShift;
  702. };
  703.  
  704. skipLongRight.onmouseup = e => {
  705. if (e.button > 0) return;
  706. v.currentTime += settings.skipShift;
  707. };
  708.  
  709. beginButton.onmouseup = e => {
  710. if (e.button > 0) return;
  711. v.currentTime = 0;
  712. timeSlider.value = 0;
  713. timeProgress.style.width = '0';
  714. currentTime.textContent = '0:00';
  715. };
  716.  
  717. rateDecrease.onmouseup = e => {
  718. if (e.button > 0) return;
  719. shortcutFuncs.slowOrPrevFrame(v);
  720. };
  721.  
  722. rateIncrease.onmouseup = e => {
  723. if (e.button > 0) return;
  724. shortcutFuncs.fastOrNextFrame(v);
  725. };
  726.  
  727. rate.onmouseup = e => {
  728. if (e.button > 0) return;
  729. shortcutFuncs.normalSpeed(v);
  730. };
  731.  
  732. rate.onmouseenter = () => {
  733. rate.textContent = '1x?';
  734. };
  735.  
  736. rate.onmouseleave = () => {
  737. const currentRate = rate.getAttribute('data-current-rate');
  738. if (currentRate) rate.textContent = currentRate;
  739. };
  740.  
  741. expandButton.onmouseup = e => {
  742. if (e.button > 0) return;
  743. shortcutFuncs.toggleFS(v);
  744. };
  745.  
  746. // exiting fullscreen by escape key or other browser provided method
  747. document.onfullscreenchange = () => {
  748. if (!document.fullscreenElement) {
  749. const nativeFS = $('.native-fullscreen');
  750. if (nativeFS) nativeFS.classList.remove('native-fullscreen');
  751. }
  752. };
  753.  
  754. if (imagusVid) {
  755. imagusAudio.onloadedmetadata = () => {
  756. audioSync = true;
  757. if (v.hasAttribute('autoplay')) imagusAudio.play();
  758. };
  759.  
  760. imagusAudio.onloadeddata = () => {
  761. if (v.volume && !v.muted) v.classList.remove('muted');
  762. volumeValues(v);
  763. if (volume.classList.contains('disabled')) {
  764. muteButton.classList.remove('disabled');
  765. volume.classList.remove('disabled');
  766. }
  767. };
  768.  
  769. imagusAudio.onended = () => {
  770. imagusAudio.currentTime = 0;
  771. if (imagusVid.hasAttribute('loop')) imagusAudio.play();
  772. };
  773.  
  774. imagusAudio.onerror = () => {
  775. audioError = true;
  776. v.classList.add('muted');
  777. volumeSlider.value = 0;
  778. muteButton.classList.add('disabled');
  779. volume.classList.add('disabled');
  780. };
  781. }
  782.  
  783. if (directVideo) {
  784. v.removeAttribute('tabindex');
  785. document.body.setAttribute('tabindex', '0');
  786. document.addEventListener('keydown', docHandleKeyDown, true);
  787. document.addEventListener('keypress', docHandleKeyOther, true);
  788. document.addEventListener('keyup', docHandleKeyOther, true);
  789. } else {
  790. v.addEventListener('keydown', handleKeyDown, false);
  791. v.addEventListener('keypress', handleKeyOther, false);
  792. v.addEventListener('keyup', handleKeyOther, false);
  793. }
  794.  
  795. function sliderValues() {
  796. let slider;
  797. let xPosition;
  798. const vid = audioSync ? imagusAudio && v : v;
  799. const eType = event && event.type;
  800. const eTime = eType === 'timeupdate';
  801. const eVolume = eType === 'volumechange';
  802. const eMeta = eType === 'loadedmetadata';
  803. const eData = eType === 'loadeddata';
  804. const eInput = eType === 'input';
  805. const eMouseUp = eType === 'mouseup';
  806. const eMouseMove = eType === 'mousemove';
  807. const eMouseDown = eType === 'mousedown';
  808. if (eMeta || eTime || eVolume || eData || !event) {
  809. slider = eMeta || eTime ? timeSlider : volumeSlider;
  810. } else {
  811. slider = event.target;
  812. }
  813. const tooltip = slider.nextSibling;
  814. const timeTarget = slider === timeSlider;
  815. const sliderWidth = slider.clientWidth;
  816. const halfSlider = sliderWidth / 2;
  817. const slider14ths = halfSlider / 7;
  818. const eX = event && event.offsetX;
  819. const start7 = eX <= 7;
  820. const end7 = eX >= sliderWidth - 7;
  821. if (eMouseMove || eMouseDown) {
  822. if (start7 || end7) {
  823. xPosition = start7 ? 0 : sliderWidth;
  824. } else {
  825. xPosition = eX < halfSlider ? (eX + (-7 + (eX / slider14ths))).toFixed(1) :
  826. (eX + ((eX - halfSlider) / slider14ths)).toFixed(1);
  827. }
  828. }
  829. if (eMeta || eTime || eVolume || eData || !event) {
  830. xPosition = eMeta || eTime ?
  831. ((((100 / v.duration) * v.currentTime) * sliderWidth) / 100).toFixed(1) :
  832. (v.volume * sliderWidth).toFixed(1);
  833. }
  834. if (eTime && event.target === imagusVid && audioSync) {
  835. if (imagusVid.currentTime - imagusAudio.currentTime >= 0.1 ||
  836. imagusVid.currentTime - imagusAudio.currentTime <= -0.1) {
  837. imagusAudio.currentTime = imagusVid.currentTime + 0.06;
  838. console.log('time sync corrected');
  839. if (muteTillSync && imagusAudio.readyState > 2) {
  840. imagusAudio.muted = false;
  841. muteTillSync = false;
  842. console.log('unmuted after time correct');
  843. }
  844. } else if (muteTillSync && imagusAudio.readyState > 2) {
  845. imagusAudio.muted = false;
  846. muteTillSync = false;
  847. console.log('unmuted');
  848. }
  849. }
  850. if (eInput || eMouseUp) xPosition = +tooltip.getAttribute('data-x-position');
  851. const xPosPercent = timeTarget ? (xPosition / sliderWidth) * 100 :
  852. Math.round((xPosition / sliderWidth) * 100);
  853. let time = (xPosPercent * v.duration) / 100;
  854. if (eInput || eMeta || eTime || eVolume || eData || !event) {
  855. const valueTrail = timeTarget ? timeProgress : volumeTrail;
  856. const offset = halfSlider < xPosition ? -7 + (xPosition / slider14ths) :
  857. (xPosition - halfSlider) / slider14ths;
  858. slider.value = timeTarget ? xPosPercent : xPosPercent / 100;
  859. valueTrail.style.width = `calc(${xPosPercent}% - ${offset}px)`;
  860. if (eInput && !timeTarget) {
  861. if (start7 || end7) {
  862. vid.volume = start7 ? 0 : 1;
  863. } else {
  864. vid.volume = xPosPercent / 100;
  865. }
  866. }
  867. if (eInput && timeTarget && v.readyState > 0) currentTime.textContent = formatTime(time);
  868. if (eTime) currentTime.textContent = formatTime(v.currentTime);
  869. if (eInput && timeTarget && v.readyState < 1) earlyXposPercent = xPosPercent;
  870. if (eMeta && !tooltip.classList.contains('hidden')) {
  871. xPosition = +tooltip.getAttribute('data-x-position');
  872. time = (xPosition / sliderWidth) * v.duration;
  873. tooltip.textContent = formatTime(time);
  874. }
  875. } else if (eMouseUp) {
  876. if (audioSync) {
  877. if (start7 || end7) {
  878. imagusAudio.currentTime = start7 ? 0 : v.duration;
  879. } else {
  880. imagusAudio.currentTime = time;
  881. }
  882. }
  883. if (start7 || end7) {
  884. v.currentTime = start7 ? 0 : v.duration;
  885. } else {
  886. v.currentTime = time;
  887. }
  888. preventMouseMove = true;
  889. setTimeout(() => {
  890. preventMouseMove = false;
  891. }, 10);
  892. } else if (eMouseMove || eMouseDown) {
  893. if (!preventMouseMove || eMouseDown) {
  894. tooltip.dataset.xPosition = xPosition;
  895. tooltip.style.left = `${eX}px`;
  896. if (v.readyState > 0 && timeTarget) tooltip.textContent = formatTime(time);
  897. if (!timeTarget) tooltip.textContent = `${xPosPercent}%`;
  898. }
  899. tooltip.classList.remove('hidden');
  900. preventMouseMove = false;
  901. }
  902. }
  903.  
  904. function formatTime(t) {
  905. let seconds = Math.round(t);
  906. const minutes = Math.floor(seconds / 60);
  907. if (minutes > 0) seconds -= minutes * 60;
  908. if (seconds.toString().length === 1) seconds = `0${seconds}`;
  909. return `${minutes}:${seconds}`;
  910. }
  911.  
  912. function volumeValues() {
  913. const videovolume = localStorage.getItem('videovolume');
  914. const videomuted = localStorage.getItem('videomuted');
  915. if ((!videovolume && !videomuted) ||
  916. (videovolume && videovolume === '1' &&
  917. videomuted && videomuted !== 'true')) {
  918. v.volume = 1;
  919. volumeSlider.value = 1;
  920. volumeTrail.style.width = '100%';
  921. localStorage.setItem('videovolume', v.volume);
  922. localStorage.setItem('videomuted', 'false');
  923. } else if (videomuted && videomuted === 'true') {
  924. v.classList.add('muted');
  925. volumeSlider.value = 0;
  926. volumeTrail.style.width = '0';
  927. v.muted = true;
  928. } else {
  929. v.volume = videovolume;
  930. if (audioSync) imagusAudio.volume = v.volume;
  931. sliderValues();
  932. if (!volumeSlider.clientWidth) {
  933. new MutationObserver((_, observer) => {
  934. const volumeWidthSet = v.parentElement.querySelector('volume input').clientWidth;
  935. if (volumeWidthSet) {
  936. sliderValues();
  937. observer.disconnect();
  938. }
  939. }).observe(v.parentElement, {childList: true, subtree: true, attributes: true});
  940. }
  941. }
  942. }
  943.  
  944. function hasAudio() {
  945. return v.mozHasAudio ||
  946. Boolean(v.webkitAudioDecodedByteCount) ||
  947. Boolean(v.audioTracks && v.audioTracks.length);
  948. }
  949.  
  950. function compactControls() {
  951. const width = v.clientWidth;
  952. width && width < 892 ? v.classList.add('compact') : v.classList.remove('compact');
  953. width && width < 412 ? v.classList.add('compact-2') : v.classList.remove('compact-2');
  954. width && width < 316 ? v.classList.add('compact-3') : v.classList.remove('compact-3');
  955. width && width < 246 ? v.classList.add('compact-4') : v.classList.remove('compact-4');
  956. }
  957.  
  958. function imagusMouseDown(e) {
  959. const vid = $('.imagus-video-wrapper');
  960. if (vid && e.button === 2) {
  961. e.stopImmediatePropagation();
  962. imagusMouseTimeout = setTimeout(() => {
  963. imagusMouseTimeout = 'sticky';
  964. }, settings.imagusStickyDelay);
  965. }
  966. }
  967.  
  968. function imagusMouseUp(e) {
  969. const vid = $('.imagus-video-wrapper');
  970. if (vid && e.button === 2) {
  971. if (imagusMouseTimeout === 'sticky') {
  972. vid.classList.add('stickied');
  973. if (volume.classList.contains('disabled')) volumeSlider.value = 0;
  974. document.removeEventListener('mousedown', imagusMouseDown, true);
  975. document.removeEventListener('mouseup', imagusMouseUp, true);
  976. } else {
  977. clearInterval(imagusMouseTimeout);
  978. imagusMouseTimeout = false;
  979. }
  980. }
  981. }
  982.  
  983. function imagusClick(e) {
  984. const imagusStickied = $('.imagus-video-wrapper.stickied');
  985. if (imagusStickied) {
  986. if (e.target.closest('.imagus-video-wrapper.stickied')) {
  987. e.stopImmediatePropagation();
  988. } else {
  989. imagusStickied.removeAttribute('class');
  990. e.preventDefault();
  991. }
  992. }
  993. }
  994.  
  995. function imagusKeys(e) {
  996. const vid = $('.imagus-video-wrapper');
  997. if (vid) {
  998. if (e.keyCode === 13 || e.keyCode === 90) {
  999. vid.classList.add('stickied');
  1000. if (volume.classList.contains('disabled')) volumeSlider.value = 0;
  1001. document.removeEventListener('keyup', imagusKeys, true);
  1002. document.removeEventListener('mousedown', imagusMouseDown, true);
  1003. document.removeEventListener('mouseup', imagusMouseUp, true);
  1004. }
  1005. }
  1006. }
  1007.  
  1008. function handleKeyDown(e) {
  1009. if (e.altKey || e.metaKey) return true; // Do not activate
  1010. const func = keyFuncs[e.keyCode];
  1011. if (func) {
  1012. if ((func.length < 3 && e.shiftKey) ||
  1013. (func.length < 4 && e.ctrlKey)) return true; // Do not activate
  1014. func(e.target, e.keyCode, e.shiftKey, e.ctrlKey);
  1015. e.preventDefault();
  1016. e.stopPropagation();
  1017. return false;
  1018. }
  1019. }
  1020.  
  1021. function handleKeyOther(e) {
  1022. if (e.altKey || e.metaKey) return true; // Do not prevent default
  1023. const func = keyFuncs[e.keyCode];
  1024. if (func) {
  1025. if ((func.length < 3 && e.shiftKey) ||
  1026. (func.length < 4 && e.ctrlKey)) return true; // Do not prevent default
  1027. e.preventDefault();
  1028. e.stopPropagation();
  1029. return false;
  1030. }
  1031. }
  1032.  
  1033. function docHandleKeyDown(e) {
  1034. if (document.body !== document.activeElement ||
  1035. e.altKey || e.metaKey) return true; // Do not activate
  1036. const func = keyFuncs[e.keyCode];
  1037. if (func) {
  1038. if ((func.length < 3 && e.shiftKey) ||
  1039. (func.length < 4 && e.ctrlKey)) return true; // Do not activate
  1040. func(v, e.keyCode, e.shiftKey, e.ctrlKey);
  1041. e.preventDefault();
  1042. e.stopPropagation();
  1043. return false;
  1044. }
  1045. }
  1046.  
  1047. function docHandleKeyOther(e) {
  1048. if (document.body !== document.activeElement ||
  1049. e.altKey || e.metaKey) return true; // Do not prevent default
  1050. const func = keyFuncs[e.keyCode];
  1051. if (func) {
  1052. if ((func.length < 3 && e.shiftKey) ||
  1053. (func.length < 4 && e.ctrlKey)) return true; // Do not prevent default
  1054. e.preventDefault();
  1055. e.stopPropagation();
  1056. return false;
  1057. }
  1058. }
  1059.  
  1060. // circumvent any scripts attempting to hijack video context menus
  1061. function preventHijack(e) {
  1062. e.stopPropagation();
  1063. e.stopImmediatePropagation();
  1064. const redirectEvent = e.target.ownerDocument.createEvent('MouseEvents');
  1065. redirectEvent.initMouseEvent(e, e.bubbles, e.cancelable);
  1066. return e;
  1067. }
  1068.  
  1069. function enforcePosition() {
  1070. setTimeout(() => {
  1071. let controlsDisplaced = controls !== v.nextSibling;
  1072. const vidDisplaced = videoWrapper !== v.parentNode;
  1073. if (vidDisplaced || controlsDisplaced) {
  1074. if (vidDisplaced) videoWrapper.appendChild(v);
  1075. controlsDisplaced = v !== controls.previousSibling;
  1076. if (controlsDisplaced) videoWrapper.insertBefore(controls, v.nextSibling);
  1077. const bs =
  1078. videoWrapper.querySelectorAll('videowrapper > *:not(video):not(controls)');
  1079. for (let i = 0; i < bs.length; ++i) {
  1080. bs[i].remove();
  1081. }
  1082. }
  1083. repeat++;
  1084. if (repeat < 10) enforcePosition.call(this);
  1085. }, 100);
  1086. }
  1087. }
  1088.  
  1089. function ytSaveCurrentTime(v) {
  1090. v.addEventListener('loadstart', ytCheckSavedTime);
  1091. v.addEventListener('loadeddata', ytCheckSavedTime);
  1092.  
  1093. v.ontimeupdate = () => {
  1094. if (v.currentTime > 0 && ytTimeChecked) localStorage.setItem(ytID, v.currentTime);
  1095. };
  1096.  
  1097. v.onended = () => {
  1098. if (localStorage.getItem(ytID)) localStorage.removeItem(ytID);
  1099. };
  1100. }
  1101.  
  1102. function ytCheckSavedTime(e) {
  1103. ytID = location.href.replace(/.*?\/(watch\?v=|embed\/)(.*?)(\?|&|$).*/, '$2');
  1104. const savedTime = localStorage.getItem(ytID);
  1105. const timeURL = /(\?|&)(t(ime_continue)?|start)=[1-9]/.test(location.href);
  1106. const ytStart = $('.ytp-clip-start:not([style*="left: 0%;"])');
  1107. if (e.type === 'loadstart') {
  1108. ytTimeChecked = false;
  1109. if ((!ytStart || !savedTime) && !timeURL) ytTimeChecked = true;
  1110. if (ytStart) ytStart.click();
  1111. if (ytTimeChecked && savedTime) e.target.currentTime = savedTime;
  1112. e.target.focus({preventScroll: true});
  1113. if (self === top) window.scroll({top: 0, behavior: 'smooth'});
  1114. } else if (e.type === 'loadeddata' && !ytTimeChecked) {
  1115. if (savedTime) e.target.currentTime = savedTime;
  1116. ytTimeChecked = true;
  1117. }
  1118. }
  1119.  
  1120. window.addEventListener('DOMContentLoaded', () => {
  1121. document.arrive(
  1122. 'video[controls], video[style*="visibility: inherit !important"]',
  1123. {fireOnAttributesModification: true, existing: true}, v => {
  1124. if (!v.parentNode.parentNode) return;
  1125. const vP = v.parentNode;
  1126. const vPP = v.parentNode.parentNode;
  1127. const imagus = !v.hasAttribute('controls') &&
  1128. $('html > div[style*="z-index: 2147483647"]') === v.parentNode;
  1129. const vidOrParentsIdOrClass =
  1130. `${v.id}${v.classList}${vP.id}${vP.classList}${vPP.id}${vPP.classList}`;
  1131. const exclude = v.classList.contains('custom-native-player') ||
  1132. v.classList.contains('imagus') ||
  1133. /(v(ideo)?|me)(-|_)?js|jw|jplay|plyr|kalt|flowp|wisti/i.test(vidOrParentsIdOrClass);
  1134. if (imagus || (v.hasAttribute('controls') && !exclude)) {
  1135. if (imagus) v.classList.add('imagus');
  1136. v.classList.add('custom-native-player');
  1137. v.classList.add('custom-native-player-hidden');
  1138. v.setAttribute('tabindex', '0');
  1139. v.setAttribute('preload', 'auto');
  1140. v.removeAttribute('controls');
  1141. customPlayer(v);
  1142. }
  1143. });
  1144. });
  1145.  
  1146. if (/^https?:\/\/www\.youtube\.com/.test(location.href)) {
  1147. document.arrive(
  1148. 'video[src*="youtube.com"]',
  1149. {fireOnAttributesModification: true, existing: true}, v => {
  1150. ytSaveCurrentTime(v);
  1151. });
  1152. }
  1153.  
  1154. GM_addStyle(`.imagus-video-wrapper {
  1155. height: min-content!important;
  1156. position: fixed!important;
  1157. left: 0!important;
  1158. right: 0!important;
  1159. top: 0!important;
  1160. bottom: 0!important;
  1161. margin: auto!important;
  1162. box-shadow: none!important;
  1163. background-color: hsl(0, 0%, 0%)!important;
  1164. width: calc(100% - 100px)!important;
  1165. }
  1166. .imagus-video-wrapper.stickied {
  1167. box-shadow: 0 0 0 100000px hsla(0, 0%, 0%, .7)!important;
  1168. }
  1169. .imagus-video-wrapper videowrapper {
  1170. height: 0!important;
  1171. padding-top: 56.25%!important;
  1172. }
  1173. .imagus-video-wrapper videowrapper video.custom-native-player {
  1174. position: absolute!important;
  1175. }
  1176. @media (min-width: 177.778vh) {
  1177. .imagus-video-wrapper {
  1178. margin: 18px auto!important;
  1179. height: calc(100vh - 18px)!important;
  1180. width: calc(((100vh - 18px) * 16) / 9)!important;
  1181. }
  1182. .imagus-video-wrapper videowrapper {
  1183. height: 100%!important;
  1184. padding-top: 0!important;
  1185. }
  1186. .imagus-video-wrapper videowrapper video.custom-native-player {
  1187. position: relative!important;
  1188. }
  1189. }
  1190. html > div[style*="2147483647"] > img[style*="display: block"] ~ videowrapper {
  1191. display: none!important;
  1192. }
  1193. html > div[style*="2147483647"] {
  1194. background: none!important;
  1195. box-shadow: none!important;
  1196. border: 0!important;
  1197. }
  1198. html > div[style*="2147483647"] videowrapper + div {
  1199. -webkit-text-fill-color: hsl(0, 0%, 90%)!important;
  1200. box-shadow: none!important;
  1201. width: 100%!important;
  1202. max-width: 100%!important;
  1203. box-sizing: border-box!important;
  1204. overflow: hidden!important;
  1205. text-overflow: ellipsis!important;
  1206. }
  1207. html > div:not(.stickied) video.custom-native-player + controls,
  1208. video[controls]:not(.custom-native-player) {
  1209. opacity: 0!important;
  1210. pointer-events: none!important;
  1211. }
  1212. videowrapper {
  1213. --wrapper-position: relative;
  1214. position: var(--wrapper-position)!important;
  1215. height: 100%!important;
  1216. display: block!important;
  1217. font-size: 0px!important;
  1218. top: 0!important;
  1219. bottom: 0!important;
  1220. left: 0!important;
  1221. right: 0!important;
  1222. background-color: hsl(0, 0%, 0%)!important;
  1223. overflow: hidden!important;
  1224. }
  1225. video.custom-native-player + controls timetooltip,
  1226. video.custom-native-player + controls volumetooltip {
  1227. position: absolute!important;
  1228. display: none!important;
  1229. top: -25px!important;
  1230. height: 22px!important;
  1231. line-height: 22px!important;
  1232. text-align: center!important;
  1233. border-radius: 4px!important;
  1234. font-size: 12px!important;
  1235. background: hsla(0, 0%, 0%, .7)!important;
  1236. box-shadow: 0 0 4px hsla(0, 0%, 100%, .5)!important;
  1237. color: hsl(0, 0%, 100%)!important;
  1238. pointer-events: none!important;
  1239. }
  1240. video.custom-native-player + controls timetooltip {
  1241. margin-left: -25px!important;
  1242. width: 50px!important;
  1243. }
  1244. video.custom-native-player + controls volumetooltip {
  1245. margin-left: -20px!important;
  1246. width: 40px!important;
  1247. }
  1248. video.custom-native-player.compact + controls timeline timetooltip {
  1249. top: -25px!important;
  1250. }
  1251. video.custom-native-player.compact + controls btn,
  1252. video.custom-native-player.compact + controls rate,
  1253. video.custom-native-player.compact + controls volume {
  1254. height: 24px!important;
  1255. line-height: 22px!important;
  1256. }
  1257. video.custom-native-player.compact + controls volume input {
  1258. padding-bottom: 2px!important;
  1259. }
  1260. video.custom-native-player.compact + controls btn:before {
  1261. margin-top: -2px!important;
  1262. }
  1263. video.custom-native-player.compact + controls volume > volumebar {
  1264. top: 6px!important;
  1265. }
  1266. video.custom-native-player + controls timelinewrapper {
  1267. line-height: 20px!important;
  1268. }
  1269. video.custom-native-player + controls timeline:hover timetooltip:not(.hidden),
  1270. video.custom-native-player + controls volume:hover volumetooltip:not(.hidden) {
  1271. display: inline!important;
  1272. }
  1273. video.custom-native-player {
  1274. cursor: none!important;
  1275. max-height: 100%!important;
  1276. height: 100%!important;
  1277. width: 100%!important;
  1278. margin: 0!important;
  1279. padding: 0!important;
  1280. top: 0!important;
  1281. bottom: 0!important;
  1282. left: 0!important;
  1283. right: 0!important;
  1284. background-color: hsl(0, 0%, 0%)!important;
  1285. border-radius: 0!important;
  1286. }
  1287. video.custom-native-player:not(.contains-source):not([src*="/"]) {
  1288. cursor: auto!important;
  1289. }
  1290. video.custom-native-player:not(.contains-source):not([src*="/"]) + controls {
  1291. display: none!important;
  1292. }
  1293. video.custom-native-player + controls > * {
  1294. background: none!important;
  1295. outline: none!important;
  1296. line-height: 32px!important;
  1297. font-family: monospace!important;
  1298. }
  1299. video.custom-native-player.compact + controls > * {
  1300. line-height: 24px!important;
  1301. }
  1302. video.custom-native-player + controls {
  1303. --controls-z-index: 1;
  1304. white-space: nowrap!important;
  1305. transition: opacity .5s ease 0s!important;
  1306. background-color: hsla(0, 0%, 0%, .85)!important;
  1307. height: 32px !important;
  1308. width: 100%!important;
  1309. cursor: default !important;
  1310. font-size: 18px !important;
  1311. user-select: none!important;
  1312. z-index: var(--controls-z-index)!important;
  1313. flex: none!important;
  1314. position: absolute!important;
  1315. display: flex!important;
  1316. flex-wrap: wrap!important;
  1317. opacity: 0!important;
  1318. margin: 0!important;
  1319. bottom: 0!important;
  1320. left: 0!important;
  1321. right: 0!important;
  1322. }
  1323. video.custom-native-player.custom-native-player-hidden,
  1324. video.custom-native-player.custom-native-player-hidden + controls {
  1325. opacity: 0!important;
  1326. pointer-events: none!important;
  1327. }
  1328. video.custom-native-player.paused + controls,
  1329. video.custom-native-player.active + controls,
  1330. video.custom-native-player + controls:hover {
  1331. opacity: 1!important;
  1332. }
  1333. video.custom-native-player + controls timeline {
  1334. flex-grow: 1!important;
  1335. position: relative!important;
  1336. align-items: center!important;
  1337. flex-direction: column!important;
  1338. height: 100%!important;
  1339. }
  1340. video.custom-native-player + controls timelinewrapper {
  1341. flex: 1 0 480px!important;
  1342. position: relative!important;
  1343. align-items: center!important;
  1344. }
  1345. video.custom-native-player.compact + controls timelinewrapper {
  1346. order: -1;
  1347. flex-basis: 100%!important;
  1348. height: 20px!important;
  1349. }
  1350. video.custom-native-player.compact + controls timeline timebar {
  1351. top: 5px!important;
  1352. }
  1353. video.custom-native-player.compact + controls currenttime,
  1354. video.custom-native-player.compact + controls totaltime {
  1355. line-height: 20px!important;
  1356. }
  1357. video.custom-native-player.compact + controls {
  1358. height: 44px!important;
  1359. }
  1360. video.custom-native-player.compact-2 + controls btn.begin,
  1361. video.custom-native-player.compact-2 + controls btn.skip-short,
  1362. video.custom-native-player.compact-3 + controls rate,
  1363. video.custom-native-player.compact-3 + controls btn.rate-increase,
  1364. video.custom-native-player.compact-3 + controls btn.rate-decrease,
  1365. video.custom-native-player.compact-4 + controls btn.skip-long {
  1366. display: none!important;
  1367. }
  1368. video.custom-native-player + controls > * {
  1369. display: inline-flex!important;
  1370. }
  1371. video.custom-native-player.compact-2 + controls btn.rate-increase,
  1372. video.custom-native-player.compact-4 + controls btn.toggle-play {
  1373. margin-right: auto!important;
  1374. }
  1375. video.custom-native-player + controls timeline > timebar > timebuffer,
  1376. video.custom-native-player + controls timeline > timebar > timeprogress,
  1377. video.custom-native-player + controls volume > volumebar > volumetrail {
  1378. position: absolute!important;
  1379. flex: none!important;
  1380. pointer-events: none!important;
  1381. height: 100%!important;
  1382. border-radius: 20px!important;
  1383. }
  1384. video.custom-native-player + controls timeline > timebar,
  1385. video.custom-native-player + controls volume > volumebar {
  1386. position: absolute!important;
  1387. height: 10px!important;
  1388. border-radius: 20px!important;
  1389. overflow: hidden!important;
  1390. background-color: hsla(0, 0%, 16%, .85)!important;
  1391. top: 11px!important;
  1392. left: 0!important;
  1393. right: 0!important;
  1394. pointer-events: none!important;
  1395. z-index: -1!important;
  1396. box-shadow: inset 0 0 0 1px hsla(0, 0%, 40%), inset 0 0 5px hsla(0, 0%, 40%, .85)!important;
  1397. }
  1398. video.custom-native-player + controls volume.disabled,
  1399. video.custom-native-player + controls btn.disabled {
  1400. -webkit-filter: brightness(.4);
  1401. filter: brightness(.4);
  1402. pointer-events: none!important;
  1403. }
  1404. video.custom-native-player.disabled,
  1405. video.custom-native-player.active.disabled {
  1406. cursor: default!important;
  1407. }
  1408. video.custom-native-player.disabled + controls {
  1409. opacity: 1!important;
  1410. -webkit-filter: brightness(.3)sepia(1)hue-rotate(320deg)saturate(5);
  1411. filter: brightness(.3)sepia(1)hue-rotate(320deg)saturate(5);
  1412. }
  1413. video.custom-native-player.disabled + controls > * {
  1414. pointer-events: none!important;
  1415. }
  1416. video.custom-native-player + controls volume {
  1417. max-width: 70px!important;
  1418. flex: 1 0 48px!important;
  1419. position: relative!important;
  1420. margin: 0 12px!important;
  1421. }
  1422. video.custom-native-player + controls timeline > timebar > timebuffer {
  1423. background-color: hsla(0, 0%, 100%, .2)!important;
  1424. border-top-right-radius: 20px!important;
  1425. border-bottom-right-radius: 20px!important;
  1426. left: 0!important;
  1427. }
  1428. video.custom-native-player + controls timeline > timebar > timeprogress,
  1429. video.custom-native-player + controls volume > volumebar > volumetrail {
  1430. background-color: hsla(0, 0%, 100%, .4)!important;
  1431. left: 0!important;
  1432. }
  1433. video.custom-native-player + controls volume.disabled volumetrail {
  1434. width: 0!important;
  1435. }
  1436. video.custom-native-player + controls timeline > input {
  1437. height: 100%!important;
  1438. width: 100%!important;
  1439. }
  1440. video.custom-native-player.active {
  1441. cursor: pointer!important;
  1442. }
  1443. video.custom-native-player + controls btn {
  1444. border: none !important;
  1445. cursor: pointer!important;
  1446. background-color: transparent!important;
  1447. font-family: "Segoe UI Symbol"!important;
  1448. font-size: 18px !important;
  1449. margin: 0px !important;
  1450. align-items: center!important;
  1451. justify-content: center!important;
  1452. height: 32px!important;
  1453. padding: 0!important;
  1454. flex: 1 1 32px!important;
  1455. max-width: 46px!important;
  1456. box-sizing: content-box!important;
  1457. position: relative!important;
  1458. opacity: .86!important;
  1459. transition: opacity .3s, text-shadow .3s!important;
  1460. -webkit-text-fill-color: hsl(0, 0%, 100%)!important;
  1461. }
  1462. video.custom-native-player + controls btn.toggle-play {
  1463. flex: 1 1 46px!important
  1464. }
  1465. video.custom-native-player + controls btn:hover {
  1466. opacity: 1!important;
  1467. text-shadow: 0 0 8px hsla(0, 0%, 100%)!important;
  1468. }
  1469. video.custom-native-player + controls btn.expand {
  1470. font-size: 20px!important;
  1471. font-weight: bold!important;
  1472. }
  1473. video.custom-native-player + controls btn.skip-long {
  1474. font-size: 18px!important;
  1475. }
  1476. video.custom-native-player + controls btn.skip-short {
  1477. font-size: 12px!important;
  1478. }
  1479. video.custom-native-player + controls btn.begin {
  1480. font-size: 18px!important;
  1481. }
  1482. video.custom-native-player + controls btn.mute {
  1483. font-size: 22px!important;
  1484. }
  1485. video.custom-native-player + controls btn.expand {
  1486. font-size: 20px!important;
  1487. font-weight: bold!important;
  1488. }
  1489. video.custom-native-player + controls btn.rate-decrease,
  1490. video.custom-native-player + controls btn.rate-increase {
  1491. font-size: 14px!important;
  1492. padding: 0!important;
  1493. flex: 1 0 14px!important;
  1494. max-width: 24px!important;
  1495. }
  1496. video.custom-native-player.playback-rate-increased + controls btn.rate-increase,
  1497. video.custom-native-player.playback-rate-decreased + controls btn.rate-decrease {
  1498. -webkit-text-fill-color: cyan!important;
  1499. }
  1500. video.custom-native-player + controls rate {
  1501. height: 32px!important;
  1502. width: 42px!important;
  1503. margin: 0!important;
  1504. display: unset!important;
  1505. text-align: center!important;
  1506. font-size: 14px!important;
  1507. flex-shrink: 0!important;
  1508. font-weight: bold!important;
  1509. letter-spacing: .5px!important;
  1510. -webkit-text-fill-color: hsl(0, 0%, 100%)!important;
  1511. user-select: none!important;
  1512. pointer-events: none!important;
  1513. opacity: .86!important;
  1514. }
  1515. video.custom-native-player + controls rate[data-current-rate] {
  1516. pointer-events: all!important;
  1517. cursor: pointer!important;
  1518. }
  1519. video.custom-native-player + controls rate[data-current-rate]:hover {
  1520. transition: opacity .3s, text-shadow .3s!important;
  1521. opacity: 1!important;
  1522. text-shadow: 0 0 8px hsla(0, 0%, 100%)!important;
  1523. }
  1524. video.custom-native-player + controls input[type=range] {
  1525. -webkit-appearance: none!important;
  1526. background-color: transparent !important;
  1527. outline: none!important;
  1528. border: 0!important;
  1529. border-radius: 6px !important;
  1530. margin: 0!important;
  1531. top: 0!important;
  1532. bottom: 0!important;
  1533. left: 0!important;
  1534. right: 0!important;
  1535. padding: 0!important;
  1536. width: 100%!important;
  1537. position: relative!important;
  1538. }
  1539. video.custom-native-player + controls input[type='range']::-webkit-slider-thumb {
  1540. -webkit-appearance: none!important;
  1541. background-color: hsl(0, 0%, 86%)!important;
  1542. border: 0!important;
  1543. height: 14px!important;
  1544. width: 14px!important;
  1545. border-radius: 50%!important;
  1546. pointer-events: none!important;
  1547. }
  1548. video.custom-native-player.muted + controls volume input[type='range']::-webkit-slider-thumb {
  1549. background-color: hsl(0, 0%, 50%)!important;
  1550. }
  1551. video.custom-native-player + controls input[type='range']::-moz-range-thumb {
  1552. -moz-appearance: none!important;
  1553. background-color: hsl(0, 0%, 86%)!important;
  1554. border: 0!important;
  1555. height: 14px!important;
  1556. width: 14px!important;
  1557. border-radius: 50%!important;
  1558. pointer-events: none!important;
  1559. }
  1560. video.custom-native-player.muted + controls volume input[type='range']::-moz-range-thumb {
  1561. background-color: hsl(0, 0%, 50%)!important;
  1562. }
  1563. video.custom-native-player + controls currenttime,
  1564. video.custom-native-player + controls totaltime {
  1565. font-family: monospace, arial!important;
  1566. font-weight: bold!important;
  1567. font-size: 14px!important;
  1568. letter-spacing: .5px!important;
  1569. height: 100%!important;
  1570. line-height: 32px!important;
  1571. min-width: 58px!important;
  1572. display: unset!important;
  1573. -webkit-text-fill-color: hsl(0, 0%, 86%)!important;
  1574. }
  1575. video.custom-native-player + controls btn.rate-decrease {
  1576. margin-left: auto!important;
  1577. }
  1578. video.custom-native-player + controls currenttime {
  1579. padding: 0 12px 0 0!important;
  1580. margin-right: 2px!important;
  1581. text-align: right!important;
  1582. }
  1583. video.custom-native-player + controls totaltime {
  1584. padding: 0 0 0 12px!important;
  1585. margin-left: 2px!important;
  1586. text-align: left!important;
  1587. }
  1588. .direct-video-top-level {
  1589. margin: 0!important;
  1590. padding: 0!important;
  1591. display: flex!important;
  1592. align-items: center!important;
  1593. justify-content: center!important;
  1594. }
  1595. .direct-video-top-level video {
  1596. height: calc(((100vw - 30px) * 9) / 16)!important;
  1597. min-height: calc(((100vw - 30px) * 9) / 16)!important;
  1598. max-height: calc(((100vw - 30px) * 9) / 16)!important;
  1599. width: calc(100vw - 30px)!important;
  1600. min-width: calc(100vw - 30px)!important;
  1601. max-width: calc(100vw - 30px)!important;
  1602. margin: auto!important;
  1603. }
  1604. .direct-video-top-level > video.custom-native-player + controls {
  1605. position: absolute!important;
  1606. left: 0!important;
  1607. right: 0!important;
  1608. margin: 0 auto !important;
  1609. width: calc(100vw - 30px)!important;
  1610. bottom: calc((100vh - (((100vw - 30px) * 9) / 16)) / 2)!important;
  1611. }
  1612. @media (min-width: 177.778vh) {
  1613. .direct-video-top-level video {
  1614. position: unset!important;
  1615. height: calc(100vh - 30px)!important;
  1616. min-height: calc(100vh - 30px)!important;
  1617. max-height: calc(100vh - 30px)!important;
  1618. width: calc(((100vh - 30px) * 16) / 9)!important;
  1619. min-width: calc(((100vh - 30px) * 16) / 9)!important;
  1620. max-width: calc(((100vh - 30px) * 16) / 9)!important;
  1621. margin: 0 auto!important;
  1622. padding: 0!important;
  1623. background-color: hsl(0, 0%, 0%)!important;
  1624. }
  1625. .direct-video-top-level > video.custom-native-player + controls {
  1626. width: calc(((100vh - 30px) * 16) / 9)!important;
  1627. min-width: calc(((100vh - 30px) * 16) / 9)!important;
  1628. max-width: calc(((100vh - 30px) * 16) / 9)!important;
  1629. bottom: 15px!important;
  1630. }
  1631. }
  1632. video::-webkit-media-controls,
  1633. .native-fullscreen > *:not(video):not(controls) {
  1634. display: none!important;
  1635. }
  1636. .native-fullscreen video.custom-native-player,
  1637. .direct-video-top-level .native-fullscreen video.custom-native-player {
  1638. height: 100vh!important;
  1639. width: 100vw!important;
  1640. max-height: 100vh!important;
  1641. max-width: 100vw!important;
  1642. min-height: 100vh!important;
  1643. min-width: 100vw!important;
  1644. margin: 0!important;
  1645. }
  1646. .native-fullscreen video.custom-native-player + controls {
  1647. position: fixed!important;
  1648. bottom: 0!important;
  1649. left: 0!important;
  1650. right: 0!important;
  1651. margin: 0!important;
  1652. width: 100vw!important;
  1653. max-width: 100vw!important;
  1654. }
  1655. video.custom-native-player + controls btn.skip-short,
  1656. video.custom-native-player + controls btn.skip-long,
  1657. video.custom-native-player + controls btn.begin,
  1658. video.custom-native-player + controls btn.toggle-play,
  1659. video.custom-native-player + controls btn.rate-decrease,
  1660. video.custom-native-player + controls btn.rate-increase,
  1661. video.custom-native-player + controls btn.mute,
  1662. video.custom-native-player + controls btn.expand {
  1663. font-size: 0!important;
  1664. }
  1665. video.custom-native-player + controls btn:before {
  1666. font-family: 'customNativePlayer'!important;
  1667. font-size: 20px!important;
  1668. }
  1669. video.custom-native-player + controls btn.skip-short.right:before {
  1670. content: '\\e90c'!important;
  1671. }
  1672. video.custom-native-player + controls btn.skip-short.left:before {
  1673. content: '\\e90b'!important;
  1674. }
  1675. video.custom-native-player + controls btn.skip-long.right:before {
  1676. content: '\\e901'!important;
  1677. }
  1678. video.custom-native-player + controls btn.skip-long.left:before {
  1679. content: '\\e902'!important;
  1680. }
  1681. video.custom-native-player + controls btn.begin:before {
  1682. content: '\\e908'!important;
  1683. }
  1684. video.custom-native-player + controls btn.toggle-play:before {
  1685. content: '\\e906'!important;
  1686. font-size: 24px!important;
  1687. }
  1688. video.custom-native-player.playing + controls btn.toggle-play:before {
  1689. content: '\\e905'!important;
  1690. font-size: 24px!important;
  1691. }
  1692. video.custom-native-player + controls btn.rate-decrease:before {
  1693. content: '\\ea0b'!important;
  1694. font-size: 10px!important;
  1695. }
  1696. video.custom-native-player + controls btn.rate-increase:before {
  1697. content: '\\ea0a'!important;
  1698. font-size: 10px!important;
  1699. }
  1700. video.custom-native-player + controls btn.mute:before {
  1701. content: '\\e90a'!important;
  1702. font-size: 22px!important;
  1703. }
  1704. video.custom-native-player.muted + controls btn.mute:before {
  1705. content: '\\e909'!important;
  1706. font-size: 22px!important;
  1707. }
  1708. video.custom-native-player + controls btn.mute.disabled:before {
  1709. content: '\\e909'!important;
  1710. }
  1711. video.custom-native-player + controls btn.expand:before {
  1712. content: '\\e904'!important;
  1713. font-size: 24px!important;
  1714. font-weight: normal!important;
  1715. }
  1716. .native-fullscreen video.custom-native-player + controls btn.expand:before {
  1717. content: '\\e903'!important;
  1718. font-size: 24px!important;
  1719. }
  1720. @font-face {
  1721. font-family: 'customNativePlayer';
  1722. src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAe8AAsAAAAAC2gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAEAAAABgDxIHPmNtYXAAAAFIAAAAUQAAAHTquqeaZ2FzcAAAAZwAAAAIAAAACAAAABBnbHlmAAABpAAABG0AAAcgC+w8l2hlYWQAAAYUAAAALAAAADYWP5TBaGhlYQAABkAAAAAcAAAAJAgCBBhobXR4AAAGXAAAAC8AAABcUkALAGxvY2EAAAaMAAAAMAAAADAN9g+EbWF4cAAABrwAAAAYAAAAIAAcAIxuYW1lAAAG1AAAANoAAAGGmUoJ+3Bvc3QAAAewAAAADAAAACAAAwAAeNpjYGZ+xTiBgZWBgWkm0xkGBoZ+CM34msGYkZMBFTAKoAkwODAwvNJiPvD/AIMD8wEQj4ERSVaBgQEAdCILXHjaY2BgYGaAYBkGRijNDGSBaBaGCCAtxCAAFGECiim85HnZ84r7ldorrf9///9nAAGFlwwvu19xwcUY/z8WZxFrE+MUfS/6BmoSGgAA0DQY1QAAAAABAAH//wAPeNqNVD1s20YUfo+UdJYd/dAiRdtKJVOMScWyKVs0SRuuGQ6xA8QI4CKQ4p+kMAJkSAx0SacOBdGtKNBNnTUFhTQUKNDOHDp5l5cu3r0nSyz1kZSNGHCCHqS7e3/f+967OwLC1eAAnI1I/P+6AXT4OncBUyQogiooliKYgsLXR9Aekb2NgJ3xZjSO7kPAd7gAeGCElEYBhTT28c3wN/TDOaAYGJLjEDBOy8EJxbQohoMkwIKACkUN4oCAI+RRyAoS13xSkIECzAIUTMm0VKmgRguaFi0FK5QGfvvM98+IWJvm9hlKoUAbf7jok5YkuIGZpCoFkKnSCIyPsMZ7KUyDdQpuExoXBvsEckKIBDYEgvfJENZCFXV4ILyo/gVTUMOWIfT72Op3uPZljwsTI7bGeakyqhZbeMZdXPawHvUdyYYhBvXdon6HUdhph7Y+eHyL70CDBIvJVlMuo1yURJZFllKruoG6ZqlipDWbjouOba1FWpWDwcBqGDsijR2jYcX71lzphes+euS6L0pz8Z676A0GPVHcbpCT0diWRFHabhjWzgP3eYnGc/fBTuRfinvoEyef92ACKtAEm5itaboku2iZYoqFa8xAl4oxW2SyKpiyIBNpiSjKDiapFi7YXHmNeHJnypNkubjnOF5D1zfy+ctf7NPT/uAvaaW0tFd9Zl/a+PjgAIONo5lvX7MMK6+XvNrBykPXfamq2f3M3dKuYZjo26cjambl7/zcxP5krfTM5k7rBwd/AnXWh8fE2Y7u0hLdpJAOU5NEXHCRvyIat5VJ9qeN1P3+YNDnvM2Vlc2TmGA+v6HrDc9x9opj4pxHqbnewCeOw99njvCPK1qmYeyW7mb2s6r60nUfjkmHd+JrCLh30TuAhTRy7+gJvIneC9kOyfbPtQ0Pr99SqBkFCeCDqBa6TTrTHZ1nsiLITgK6wXHQ7Qbd4XE34INwJvmS/kja8Yu/JR7jeAwif/48BkB/DIDn1wB4Ha9G34k1rY7VlCQo1dRXKBZNRRCLm9i0LUFp2lt0NfjzYbeQCTKFYTdTKGTwOBLwmATOi5bMbQ7j7xR6CeA8yNGZSSF6jKlSNihk+CAM+OhlCtx8tA2n6I6Gk8f/CHX4Br6Dn6mLVU3X1pybJxsqmvLNw8+iql/52mufd1q93asoRmZW1RqoVjVLWLM3kZJSuCSIoYn/IT3Nsllldq6aplGdm1Wy2WwtWytX7k/RuF8p19h0ujcpkNfqzOzszCrZ9WxlRp5PT0yk5+WZChPS/QilnM/l8uUofkkuFuUlNv1r6k7y/duwG2/fs0I6PTWV5lMaY+SiaNrT5WXDWF5+qmkKKShu2Xhl2+vrtv3KWK4xdsgmKFdzy/1py23SLpcrq/eeLC7W64uLT+6p5Ql2FEGVdW1P08sRxtLG+vfrG0uM/ZtMfKADpPP4kErwifzkx2Ayn8Dxd58GH9CZ5GCRzlVSdaZajm6ZsmNKDL/QsKB1cnL1G+7eVh62PnXxPkPjP6LOXdEAAAB42mNgZAADZqYpmfH8Nl8ZuFnA/JsFK5QQ9P8DLA7MB4BcDgYmkCgA/hcJqHjaY2BkYGA+8P8AAwOLAwMDmGRkQAXiAFdpAyR42mNhQAAmIGZhYLgKxKuBOBvKBmJGoDhjKJJcAwQz2gBxFAtEHwI7QGgAfJcHlwAAAAAAAAoAFAAeADgAUgBmAJAAuADMANoA6AEyAYwB1gHkAfICEgIyAmgChANOA5B42mNgZGBgEGfoYmBhAAEmBjQAABCkAKl42m3OwWrCQBSF4T8aLbXgri5czRMEhdJdt4IUNy5cN8YhBHQGxmQh9An6HF33GXuMd5mBDF/O3Ll3gDl/ZNxXxlO/39dI/jKP5XdzLnfmCS+8mqfKP80zlvzoVpY/K5nr5OGRXJvH8oc5l7/NExY481T53jzjjd+mipcYAw0VkYu+SDj4dG1icOtixQFP4qoCHajPmoLV4K3BcO/r7lwmDfV6aMeZkjRYuYmhdbUPPpWtP7njzW2ruFNZwaaf3Wp6rTahf1Gpf89J2ZGb9m3fa/foRfEP3IM9twAAeNpjYGbACwAAfQAE) format('woff'), url('customNativePlayer.ttf') format('truetype'), url('customNativePlayer.svg#customNativePlayer') format('svg');
  1723. font-weight: normal;
  1724. font-style: normal;
  1725. }`);