☰

4chan \ IB Simple Web Media Player

Simple Web Media Player for 4chan and other imageboards.

安装此脚本?
作者推荐脚本

您可能也喜欢YouTube Embed Remove Branding.。

安装此脚本 
  1. // ==UserScript==
  2. // @name          4chan \ IB Simple Web Media Player
  3. // @description   Simple Web Media Player for 4chan and other imageboards.
  4. // @namespace     LabMember-001
  5. // @author        Hououin Kyōma
  6. // @license       GPLv3
  7. // @version       1.4.12
  8.  
  9. // @grant         none
  10. // @run-at        document-end
  11.  
  12. // @match https://*.4chan.org/*
  13. // @match https://*.4channel.org/*
  14. // @match https://*.smuglo.li/*
  15. // @match https://*.smugloli.net/*
  16. // @match https://*.kissu.moe/*
  17. // @match https://*.4taba.net/*
  18. // @match https://*.kind.moe/*
  19. // @match https://*.2kind.moe/*
  20. // @match https://*.1chan.net/*
  21. // @match https://*.otterchat.net/*
  22. // @match https://*.fatchan.org/*
  23. // @match https://*.7chan.org/*
  24. // @match https://*.420chan.org/*
  25. // @match https://*.anon.cafe/*
  26. // @match https://*.4-ch.net/*
  27. // @match https://*.sushigirl.us/*
  28. // @match https://*.uboachan.net/*
  29.  
  30. // @match https://*.archived.moe/*
  31. // @match https://*.desuarchive.org/*
  32. // @match https://*.4plebs.org/*
  33. // @match https://*.warosu.org/*
  34.  
  35. // @icon  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAilBMVEX///8zGeTw8PArQKsXuQAiAv+kpKTu6tkAAADd3d0vEP8fHx9hTOF/bPjj3/97enb6+ffx7//v7+/y7+KUkof6+ftsWeDKwttYQP89If+Ec+5WR7ff398dHRv7+viom94+JuPBvrBKMuIODg3+/f1tbGl0cnZlUepjWK+NfPVPO9SIeej6+vtAQEBg9CwMAAAA3ElEQVRIx+3UxxKCMBCA4bUggahIt/de3v/1HEiICe44iwM3/pPM5jtgVsGuHLTku3TfUW03JJI8YlDFIYUMn6A1iSgEjFhdZGB0zw6Kjzkxhor09XrZQScvJ45eS8SXbXQp3Yv5WNftJ9VJejTWkkLscK2JE4nYuxVTHaL2T6kWMppZSO4NmUoymo4Byb+ekakgLioAAo5MBbGwJVcbKacykzD2BykjEjERkeiITD6oAilQs6T512/+KisvzM+17MqK5ffx5V9yZCrIfBGg4uUhU/lD9jhD4h4yfQMAvzcdsmcBygAAAABJRU5ErkJggg==
  36.  
  37. // ==/UserScript==
  38.  
  39. // Most of the sites above are to test scripts.
  40.  
  41. 'use Strict';
  42.  
  43. console.log('Loading SimpleWebMediaPlayer.');
  44.  
  45. /*    == REPOSITORY ==
  46.  
  47. // https://github.com/LabMember-001/Simple-Web-Media-Player
  48. // https://labmember-001.github.io/Simple-Web-Media-Player/
  49. // https://greasyfork.org/en/scripts/446388-4chan-ib-simple-web-media-player
  50.  
  51. */
  52.  
  53. /*   == YouTube API ==
  54. // If YouTube API is not loading on some sites it's probably your adblocker.
  55.  
  56. // uBlock Origin filter to allow YouTube API anywhere even with exception:
  57. // Remove quotes around "*" after copying:
  58. // ! Allow YouTube API everywhere
  59. // @@||youtube.com/iframe_api^
  60. // @@||youtube.com/s/player/"*"/www-widgetapi.vflset/www-widgetapi.js
  61. */
  62.  
  63. /*    == BOARD SUPPORT ==
  64. // Script will alter behavior on different imageboard backends
  65. // When adding custom board scripts, alter board behavior on bottom of the script. You'll need some knowledge on JS.
  66. // In most cases, simply adding an @match to the top of this script to turn it on for that domain will work
  67. // as it captures all link presses and checks for webm.
  68. // If you want more compatability, check the issue tracker for existing requests and if there are none, you may request help.
  69. */
  70.  
  71. /*    == SCRIPT CONFIGURATION ==
  72. // To define a board as a precoded backend type (vichan, tinyib, lynxchan, etc) simply
  73. // add a regex for that domain in the swmpBoards category below these comments.
  74. // Todo: Automatic detection, user only needs include/match regex for sites they want to use.
  75. */
  76.  
  77. /*    == Current Script Support ==
  78. // Yotsuba (4chan)
  79. // Tinyboard/Vichan/Infinity
  80. // Fuuka
  81. // TinyIB
  82. // Wakaba
  83. // FoolFuuka
  84. // Kusaba
  85. */
  86.  
  87. /*    == Script Specific Bugs ==
  88. // - Vichan shows original title when clicked on video thumb, but not link.
  89. // - Doesnt grab titles on Fuuka, TinyIB, Wakaba, FoolFuuka
  90. // - Some archives won't load files due to redirects.
  91. */
  92.  
  93. /*
  94. //    == Missing Script Support ==
  95. // Some Kusaba sites have issues loading video when clicked on thumbnail. Links typically work. 7chan is fine.
  96. // Phutaba has a slight bug with videos which shows file information when hovering over player depending on which link you click.
  97. // Some of the bigger Lynxchan sites are very modified and have no thumbnail click support.
  98. // jschan and vichan will not properly work if not added to the board specific types. Should be fixable for me later.
  99. // InfinityNext does not work. Don't care.
  100. */
  101.  
  102.  // Get domain
  103. var currentUrl = window.location.href;
  104.  
  105.   // Board Types - probably temporary.
  106. var swmpBoards = {
  107.   fourchan: // For title support, otherwise works well without adding here.
  108.       ['https:\/\/*..*(4chan|4channel).org\/*'],
  109.   vichan:  // For Title and thumbnail click support. Not great without due to thumbnails.
  110.       ['https:\/\/*..*(smuglo.li|smugloli.net)\/*',
  111.        'https:\/\/*..*2?kind.moe\/*',
  112.        'https:\/\/*..*kissu.moe\/*',
  113.        'https:\/\/*..*sushigirl.us\/*',
  114.        'https:\/\/*..*uboachan.net\/*'],
  115.   tinyib: // Title support not written, otherwise works well without adding here.
  116.       ['https:\/\/*..*1chan.net\/*'],
  117.   wakaba: // Title support not written, otherwise works well without adding here.
  118.       ['https:\/\/*..*otterchat.net\/*'],
  119.   lynxchan: // Title support not written, otherwise works well without adding here.
  120.       ['https:\/\/*..*anon.cafe\/*'],
  121.   jschan: // Title support not written. Jschan installations *must* be added here to work properly.
  122.       ['https:\/\/*..*fatchan.org\/*']
  123. }
  124.  
  125.   // regex to check the backend script of current domain
  126. var backendScript = [];
  127. Object.keys(swmpBoards).forEach(script => {
  128.   swmpBoards[script].forEach(regex => {
  129.     if (currentUrl.match(regex)) {
  130.       backendScript = script;
  131.     }
  132.   });
  133. });
  134.  
  135. if (backendScript.length != 0) {
  136.   console.log(backendScript);
  137. }
  138.  
  139.   // This configuration variable can be overwritten wherever you want later
  140.   // on as you wish or add your own site variables for user configuration.
  141. var swmpConfig = {
  142.   autoplay: 'true', // Autoplay media when launched by SWMP.
  143.   loop: 'true', // Loop media when launched by SWMP.
  144.   windowed: 'true',
  145.   positionTop: '100',
  146.   positionOffset: '100',
  147.   positionSide: 'right',
  148.   volume: 60,
  149.   volumeScroll: 'true',
  150.   muted: 'false', //Not implemented
  151.   skip: 5, //skip forward/backward keyboard shortcut, seconds.
  152.   theme: 'default', //Default theme
  153.   themes: //All themes
  154.     [
  155.       ['default', 'MPC Light'],
  156.       ['dark', 'MPC Dark'],
  157.       ['kurisu', 'Kurisumasu'],
  158.       ['winxp', 'WIN_XP'],
  159.       ['modernity', 'Modernity']
  160.     ],
  161.   files: 'avi|mpeg|mpg|ogv|mp4|webm|flv|wav|mp3|m4a|mp2|ogg|opus|flac',
  162.   allowMultiple: 'false',
  163.   downloadAttribute: 'true', //true = override default action, false = download
  164.   doubleclickMaximize: 'false' //true = doubleclick video to maximize instead of fullscreen
  165. }
  166.  
  167.   // swmpConfig.nameLikeThis, localStorage.swmpNameLikeThis
  168.   // Converted like this: localStorage.swmpVolume, swmpConfig.volume
  169.   // Important: Converts first character in storage after swmp to uppercase!
  170. var storageValues = [
  171.   'volume',
  172.   'theme',
  173.   'autoplay',
  174.   'loop',
  175.   'allowMultiple',
  176.   'windowed',
  177.   'muted',
  178.   'volumeScroll',
  179.   'downloadAttribute',
  180.   'doubleclickMaximize'
  181. ];
  182.  
  183. function upperFirst(string) {
  184.   return string.charAt(0).toUpperCase() + string.slice(1)
  185. }
  186.  
  187. function initStorage(item) {
  188.   var local_item = `swmp${upperFirst(item)}`;
  189.   var config_item = item;
  190.   if (localStorage.getItem(`${local_item}`) == undefined) {
  191.     localStorage.setItem(`${local_item}`, swmpConfig[`${config_item}`]);
  192.   } else {
  193.     swmpConfig[`${config_item}`] = localStorage.getItem(`${local_item}`);
  194.   }
  195. }
  196.  
  197. storageValues.forEach( (item) => {
  198.   initStorage(item);
  199. });
  200.  
  201. // Add style to head when DOM is loaded.
  202.  
  203. if (!document.getElementById('swmp-stylesheet')) { // Don't bother injecting style on demo page.
  204.   var swmpStyle = document.createElement('style');
  205.   swmpStyle.setAttribute('id', 'swmp-stylesheet');
  206.   swmpStyle.innerHTML = `div.swmp,div.swmp.swmp-theme-dark,div.swmp.swmp-theme-dark *{--swmp-container-border:#000;--swmp-controls-background:var(--swmp-background);--swmp-button-background:var(--swmp-background);--swmp-seek-height:30px;--swmp-seek-offset:10px;--swmp-btn-border-right:#000;--swmp-btn-border-bottom:#000;--swmp-btn-border-left-active:#000;--swmp-btn-border-top-active:#000}.swmp *,div.swmp.swmp-container{font-family:-apple-system,BlinkMacSystemFont,URW Gothic,MS PGothic,Helvetica,sans-serif;font-size:11pt;text-indent:4px;letter-spacing:1px;line-height:1;outline:0;color:var(--swmp-text-color)}div.swmp iframe,div.swmp video{max-width:500px;max-height:500px;width:auto;height:auto;margin:auto}div.swmp iframe,div.swmp-youtube div.swmp-player-container{min-width:420px;min-height:236px}.swmp *,div.swmp.swmp-container,select.swmp.swmp-selector{color:var(--swmp-text-color)}div.swmp,div.swmp.swmp-theme-dark,div.swmp.swmp-theme-dark *,div.swmp.swmp-theme-winxp,div.swmp.swmp-theme-winxp *{--swmp-range-thumb-border-right:#000;--swmp-range-thumb-border-bottom:#000}.swmp *{background:0 0;border:0;margin:0;padding:0;height:unset;width:unset;font-weight:400}div.swmp{--swmp-background:#e6e6e6;--swmp-container-border-radius:0;--swmp-container-box-shadow:none;--swmp-player-container-background:#000;--swmp-player-container-border-left:#000;--swmp-player-container-border-top:#000;--swmp-player-container-border-right:#000;--swmp-player-container-border-bottom:#000;--swmp-settings-background:var(--swmp-controls-background);--swmp-text-color:#000;--swmp-button-mask-color:#000;--swmp-seek-background:var(--swmp-controls-background);--swmp-seek-progress-color:lightgrey;--swmp-seek-border-left:darkgray;--swmp-seek-border-top:darkgray;--swmp-seek-border-right:#fff;--swmp-seek-border-bottom:#fff;--swmp-range-thumb-color:var(--swmp-controls-background);--swmp-range-thumb-border-left:#fff;--swmp-range-thumb-border-top:#fff;--swmp-btn-border-radius:0;--swmp-btn-border-left:#fff;--swmp-btn-border-top:#fff;--swmp-btn-border-right-active:#fff;--swmp-btn-border-bottom-active:#fff}div.swmp.swmp-theme-dark,div.swmp.swmp-theme-dark *{--swmp-background:#333;--swmp-text-color:#888;--swmp-button-mask-color:#888;--swmp-seek-progress-color:#555;--swmp-seek-border-left:#1a1a1a;--swmp-seek-border-top:#1a1a1a;--swmp-seek-border-right:#464646;--swmp-seek-border-bottom:#464646;--swmp-range-thumb-color:var(--swmp-background);--swmp-range-thumb-border-left:#777;--swmp-range-thumb-border-top:#777;--swmp-btn-border-left:#777;--swmp-btn-border-top:#777;--swmp-btn-border-right-active:#777;--swmp-btn-border-bottom-active:#777}div.swmp.swmp-theme-kurisu,div.swmp.swmp-theme-kurisu *{--swmp-background:#a44242;--swmp-text-color:#fff;--swmp-button-mask-color:#fff}div.swmp.swmp-container{position:relative;display:inline-flex;flex-direction:column;padding:2px;background:var(--swmp-background);border:1px solid var(--swmp-container-border);border-radius:var(--swmp-container-border-radius);z-index:100;overflow:hidden;min-width:320px;width:auto;box-shadow:var(--swmp-container-box-shadow)}div.swmp .swmp-player-container,div.swmp audio,div.swmp iframe,div.swmp video{background:var(--swmp-player-container-background)}div.swmp.swmp-window.swmp-window-container{display:flex;justify-content:space-between;padding-bottom:2px}div.swmp.swmp-fullscreen div.swmp-settings.swmp-settings-container,div.swmp.swmp-fullscreen div.swmp-window.swmp-window-container,div.swmp.swmp-minimized div.swmp-player-container{display:none}div.swmp.swmp-fullscreen div.swmp-player-container{display:block;width:100vw;height:100vh}span.swmp.swmp-window.swmp-window-titlebar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;position:relative;margin:auto;cursor:move;width:100%;text-align:center;display:block}span.swmp.swmp-window.swmp-window-title{display:block;max-width:260px;text-overflow:ellipsis;overflow:hidden;margin:auto auto -2px;line-height:1.5}span.swmp.swmp-window.swmp-window-buttons-contain{display:flex;flex:0 1 auto;margin-right:-2px}div.swmp .swmp-player-container{display:flex;position:relative;height:100%;border:1px solid;border-left-color:var(--swmp-player-container-border-left);border-top-color:var(--swmp-player-container-border-top);border-right-color:var(--swmp-player-container-border-right);border-bottom-color:var(--swmp-player-container-border-bottom)}div.swmp.swmp-audio div.swmp-player-container,div.swmp.swmp-fullscreen div.swmp-player-container{border:none}div.swmp.swmp-container.swmp-fullscreen{background:#000;position:unset!important;width:100%;height:auto;border-radius:0!important}.swmp.swmp-container.swmp-maximized{position:fixed!important;top:0!important;bottom:0!important;right:0!important;left:0!important;transition:.2s ease-out;border-radius:0!important}div.swmp.swmp-container.swmp-maximized audio,div.swmp.swmp-container.swmp-maximized iframe,div.swmp.swmp-container.swmp-maximized video{position:absolute;max-width:100%;max-height:100%;width:100%;height:100%;top:0;bottom:0;left:0;right:0}div.swmp.swmp-container.swmp-fullscreen audio,div.swmp.swmp-container.swmp-fullscreen iframe,div.swmp.swmp-container.swmp-fullscreen video{position:relative;width:100%;height:100%;max-width:100%;max-height:100%}div.swmp iframe{pointer-events:none}div.swmp audio{min-width:320px;min-height:40px}div.swmp.swmp-controls{bottom:0;left:0;background:var(--swmp-controls-background);width:100%;display:flex;flex-direction:column}div.swmp.swmp-settings-container{background:var(--swmp-settings-background);display:flex;flex-direction:column;align-items:flex-start}div.swmp.swmp-fullscreen div.swmp.swmp-controls{position:absolute;opacity:0;transition:opacity .5s ease-out}div.swmp.swmp-fullscreen.swmp-movingmouse div.swmp.swmp-controls{opacity:1;position:absolute;transition:none}div.swmp.swmp-container .swmp-player-container{cursor:none}div.swmp.swmp-movingmouse .swmp-player-container{cursor:unset}div.swmp.swmp-controls span.swmp-seek-container{display:flex;width:calc(100% - 6px);height:var(--swmp-seek-height);margin:auto;position:relative}div.swmp.swmp-controls span.swmp-seek-container input.swmp.swmp-seeker{width:calc(100% - var(--swmp-seek-offset));left:calc(var(--swmp-seek-offset)/ 2);-webkit-appearance:none;background:#0000;padding:0;margin:0;height:var(--swmp-seek-height);position:absolute;z-index:1;cursor:pointer;-webkit-margin-top:-14px}input[type=range].swmp{background:0 0!important;border:0!important;outline:0!important}span.swmp input[type=range]::-webkit-slider-runnable-track{width:100%;height:8px;cursor:pointer;background:#0000;border-radius:0;border:1px solid #000;border-left-color:var(--swmp-seek-border-left);border-top-color:var(--swmp-seek-border-top);border-right-color:var(--swmp-seek-border-right);border-bottom-color:var(--swmp-seek-border-bottom)}span.swmp input[type=range]::-moz-range-track{width:100%;height:6px;cursor:pointer;background:#0000;border-radius:0;border:1px solid #000;border-left-color:var(--swmp-seek-border-left);border-top-color:var(--swmp-seek-border-top);border-right-color:var(--swmp-seek-border-right);border-bottom-color:var(--swmp-seek-border-bottom)}span.swmp progress::-webkit-progress-bar{background:#0000}span.swmp progress::-webkit-progress-value{background:var(--swmp-seek-progress-color)}span.swmp progress::-moz-progress-bar{background:var(--swmp-seek-progress-color)}span.swmp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:4px solid var(--swmp-range-thumb-color);height:8px;width:2px;border-radius:0;padding:4px 3px;background:#0000;background:linear-gradient(180deg,var(--swmp-seek-border-top) 10%,var(--swmp-seek-background) 10%,var(--swmp-seek-background) 90%,var(--swmp-seek-border-bottom) 90%);cursor:pointer;margin-top:-6px;box-shadow:1px 1px 0 0 var(--swmp-range-thumb-border-bottom),-1px -1px 0 0 var(--swmp-range-thumb-border-top)}span.swmp input[type=range]::-moz-range-thumb{appearance:none;border:4px solid var(--swmp-range-thumb-color);height:8px;width:6px;border-radius:0;background:linear-gradient(180deg,var(--swmp-seek-border-top) 10%,var(--swmp-seek-background) 10%,var(--swmp-seek-background) 90%,var(--swmp-seek-border-bottom) 90%);cursor:pointer;box-shadow:1px 1px 0 0 var(--swmp-range-thumb-border-bottom),-1px -1px 0 0 var(--swmp-range-thumb-border-top)}span.swmp input[type=range]::-webkit-range-progress{height:6px;background-color:#0000}span.swmp input[type=range]::-moz-range-progress{height:6px;background-color:#0000}span.swmp progress.swmp-volume{width:50px;position:absolute;height:6px;right:8px;border:none;bottom:7px;z-index:0;background:var(--swmp-seek-background)}span.swmp input.swmp-volume[type=range]{-webkit-appearance:none;background:#0000;padding:0;margin-left:2px;cursor:pointer;position:relative}span.swmp input.swmp-volume[type=range]::-webkit-slider-thumb{padding:4px 2px;width:2px}span.swmp input.swmp-volume[type=range]::-moz-range-thumb{padding:0 1px;width:1px}div.swmp.swmp-controls span.swmp-seek-container progress.swmp-progress{width:calc(100% - var(--swmp-seek-offset));left:calc(var(--swmp-seek-offset)/ 2);height:8px;z-index:0;position:relative;background:var(--swmp-seek-background);border:none;margin:auto 0}span.swmp.swmp-row-bottom{display:flex;flex-direction:row;height:20px;margin-bottom:2px}div.swmp.swmp-fullscreen span.swmp.swmp-row-bottom{padding-bottom:5px}span.swmp.swmp-buttons-container{height:100%}select.swmp.swmp-selector{-webkit-appearance:none;appearance:none;background:var(--swmp-button-background);border:1px solid var(--swmp-text-color);outline:0;border-radius:0;width:85px;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;text-indent:0}label.swmp.swmp-settings{display:inline-flex;flex-direction:row-reverse;line-height:1.2}input.swmp.swmp-settings{margin:-2px 0 0 4px;border:1px solid var(--swmp-text-color);appearance:none;-webkit-appearance:none;outline:0;width:14px;height:14px;background:var(--swmp-controls-background)}input.swmp.swmp-settings:checked{outline:5px inset var(--swmp-text-color);outline-offset:-8px}button.swmp.swmp-button{min-width:26px;height:100%;padding:0 4px;display:inline-block;cursor:pointer;margin:0 2px;color:var(--swmp-button-mask-color);background:var(--swmp-button-background);border:1px solid;border-radius:var(--swmp-btn-border-radius);border-bottom-color:var(--swmp-btn-border-bottom);border-right-color:var(--swmp-btn-border-right);border-top-color:var(--swmp-btn-border-top);border-left-color:var(--swmp-btn-border-left);filter:unset}button.swmp.swmp-button span{display:block;width:16px;height:16px;image-rendering:crisp-edges;image-rendering:pixelated;background-repeat:no-repeat;background-color:var(--swmp-button-mask-color);-webkit-mask-image:var(--image);mask-image:var(--image);-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}button.swmp.swmp-button:active span{transform:translateX(1px) translateY(1px)}span.swmp.swmp-window button{height:20px;min-width:22px;width:22px}button.swmp.swmp-button.swmp-playlist span{--image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAgMAAAAqbBEUAAAADFBMVEUAAAAAAAAAAAAAAAA16TeWAAAABHRSTlMARP/Eyy24XQAAAHxJREFUeJzN0MENgCAMBVBkHKdgHqdhCGLCBxMODsAIxomkLQca4h0OlBcaaGvMWsvRtvFxN5mCLQJ4ApwgMLwAlZA6bgIeQbtqSB0XoSUw4AixIxNQBImRBTh5hwC/UGkvP3PMT4+fqnLGQiO3EObmVNvjQNSoONgqWGt96g97WXTz3RYAAAAASUVORK5CYII=)}button.swmp.swmp-button.swmp-playlist.swmp-playlist-prev span{transform:rotate(180deg)}button.swmp.swmp-button.swmp-window-minimize span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAARElEQVRYR+3V0Q0AMAQFQPYfuv7apAPg4yzguQQZw5XD/UMAAgQIECCwTuA0fcc7+C8gAIFxgaYleG3W3QECBAgQaBcokVQGIRA6KiEAAAAASUVORK5CYII=');margin-top:2px;-webkit-mask-size:12px;mask-size:12px}button.swmp.swmp-button.swmp-window-maximize span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAANUlEQVQ4T2NkoBAwQvX/J9McRqobADOQkINgLsZwwagBDAyjYUCFMCCUAtHlqZcXSLUZrh4AU/cYEVH9Rd0AAAAASUVORK5CYII=');margin-top:2px;-webkit-mask-size:12px;mask-size:12px}button.swmp.swmp-button.swmp-window-close span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA9UlEQVRoge2Y2woCMRBD5699dB79a7ViQfDWaZNMFybQR5NzVndhNatUKpUjxe/nctT+Vn59HsYItf+1nDFC7f9Ujhyh9v8qR4xQ+0fKV0bY/XYKDERHIvDtnGcEWBIyeIaEHB4pkQaPkEiHnwXxyc9QE/0mtrjyCgkZfA9SQg7fg5BIg+9ZkUiH75mR2Aa+xS0uwHyzC8Vt/ieULuG2fhOnSfgA3LYSDoBOk2DAyySi8O1RyXyzo8P3pEuswKdLIODTJJDwcgkGvFQiMhKBV/UPj0yXC/r/jiyXC/q/jsDKBf1vI/ByQf8jbtz/bdj9lUqlAs4N+1iFrUSwCpcAAAAASUVORK5CYII=');margin-top:2px;-webkit-mask-size:12px;mask-size:12px}button.swmp.swmp-button.swmp-playbutton span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAA8klEQVRoQ+3aMQ6DMAyF4XDycjCGVmrPBRmapVLkJLafn1GRMiHB/+EpEVtJfm3J+8vtAO86kb2uI8tkfidwfsM/WSA9QBsAPUQC0ENGAbSQWQAdZBVAA9ECwiFWgDCINQAO8QLAIN4AdwgK4AZBA8whUQAzSDRADWEBLEPYANMQVsAwhB0gQrIAupA/AHR60d2bs09APFRgBYjhbfJsgOFwNsB0OAtgOTwaoA6PApiFowHm4SiAW7g3wD3cCwALtwbAw60AYeFaQHj4KoAmfBZAFz4KoA2XAPThPcCz3njU9QJtFdWvud2vBuovgn5A+glcJSF8MQrukbIAAAAASUVORK5CYII=')}button.swmp.swmp-button.swmp-playbutton.swmp-playing span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAtUlEQVRoQ+2Y2w6AIAxD5f8/2kuCRgiJbdjDMMfnxUE5o9WyLf6Uxde//W4D+8SJuGKE9OqbhrxUFCGkFxt4qQ1CInpX2SMWCIGQwc1ILBACIRBqFQixd1HUkF4MMUMs8taVESVGupFGDZpACIROBTCy5tOsMhGiijiMIb2IEkQJkTeihCAUUUIQ6S4hShAliBKVAZwYJzbuTn7ufoiFExs04cRpndg4xRyl7uDlWPWE+aTbwAFy3FQxPpmarQAAAABJRU5ErkJggg==')}button.swmp.swmp-button.swmp-stopbutton span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAUUlEQVRYR+3Xuw0AIAwD0WQC2H9LJuDXICFqm+KywEWvc4b50tyP7x7oIpE6O221bgEeQAABBBBAAAEEEEAAAQTsAkW0jPYqei0jUf9k7ON0AGFsNSFlb3+JAAAAAElFTkSuQmCC')}.swmp.swmp-timer-container,button.swmp.swmp-button.swmp-fullscreen{margin-left:auto}button.swmp.swmp-button.swmp-fullscreen span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAP0lEQVQ4T2NkoBAwQvX/x2EOQXmCCghZgG4AjE/IYzAXMw4jAwj5Gac8sYFG0AB4qBLplOEYCwOfF4gMfExlADQ3GBE+X9RsAAAAAElFTkSuQmCC')}button.swmp.swmp-button.swmp-volume span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAG1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABp4cHsAAAACHRSTlMA1WZ/JZz0Rme5O54AAACGSURBVDjL5ZIxCoAwDEWjVXDs6OjUWXDxRl6hqyL2H9uqKKL5oKtmzIOXNvkiP6qc9LOSAAciAoiIAAcdRNEGmrtoBQb1TbSCFt3eK3CUSAr0KliUlQbEA1YFCTCqID47qMAAwztAVXS4x2RfffC8kusSw7O100Px0/Iw0PjwwPGI0lB/s2bRbW7duVgj2wAAAABJRU5ErkJggg==')}button.swmp.swmp-button.swmp-volume.swmp-min span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAd0lEQVR42u2Xuw2AMAwFr41YhKmyVyp2YhZ6pwEJqJDgmRTv3PukV/gDxpjBKDRl+5mV0LWvbIRKUGjEXrJoZIIjGongHI1AcI3mc8E9mpeCeFwWWGCBBTqBfNj9MK4TFk7CykxZ+glnS8LhlXI6Akws/gCMGZAO8wpmVouK9vcAAAAASUVORK5CYII=')}button.swmp.swmp-button.swmp-volume.swmp-max span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAD1BMVEVHcEwAAAAAAAAAAAAAAADTrAj/AAAABXRSTlMA/4hD1KmiQHMAAACwSURBVDjL1ZPBDYMwDEV/nQzAIwwAVQdoNoD9l+qhgAyKW/VGfbHkp/wk9rf0//EI6sZ8Kqx5oj/U07IdgKcHlXfOcNAyVpCA4oU2oAqDF9pB9pcYK7hLAkYnBJKMUZqgc0IgaaJIFYp0Yw/JYJAy9CegBUZZA1SYlWA4gwxdExgUCWiA/mfQlgovj56bog/6loRN/Nz2w6CSG1Q82tgMoX1iw8UWDU0dr8HXxblwvAAGdxy1HX87LAAAAABJRU5ErkJggg==')}button.swmp.swmp-button.swmp-volume.swmp-mute span{--image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAHlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC3KG9qAAAACnRSTlMACZko0v9e9AufnFf4OQAAAJdJREFUeJzlkrsNgDAMRCMhL8BO6WluBmZha2LZDvmdRA1uUHi+S/xJ6Uexk/9bJuAEMcIabBmQQNLknFBw2KERFyMFcEEFalROMAlCaUYFWKoLBDU81wUdkCobgGbHDT0Q/06gSOJJA3hqeKmgd7BX0TpY5V2v2ibO3bW2L+YRg5on6KOtRT9AzdIy2PrwheMrmi4GPhk3sCZY/9usUnQAAAAASUVORK5CYII=')}span.swmp.swmp-volume-container{display:flex;width:60px;height:100%;position:relative}span.swmp.swmp-volume-container input.swmp.swmp-volume.swmp-range{width:50px;vertical-align:top;position:relative}button.swmp.swmp-button:active{border-bottom-color:var(--swmp-btn-border-bottom-active);border-right-color:var(--swmp-btn-border-right-active);border-top-color:var(--swmp-btn-border-top-active);border-left-color:var(--swmp-btn-border-left-active)}span.swmp.swmp-timer-container{display:inline-table;margin-right:5px;cursor:default}span.swmp.swmp-timer-container span.swmp.swmp-time{display:table-cell;vertical-align:bottom}#quote-preview{z-index:1}div.swmp.swmp-theme-modernity,div.swmp.swmp-theme-modernity *{--swmp-background:#222;--swmp-container-border:#222;--swmp-text-color:#eee;--swmp-button-mask-color:#eee;--swmp-controls-background:#222;--swmp-btn-border-left:#0000;--swmp-btn-border-top:#0000;--swmp-btn-border-right:#0000;--swmp-btn-border-bottom:#0000;--swmp-btn-border-left-active:#0000;--swmp-btn-border-top-active:#0000;--swmp-btn-border-right-active:#0000;--swmp-btn-border-bottom-active:#0000;--swmp-seek-background:#444;--swmp-seek-progress-color:#bbb;--swmp-seek-border-left:#444;--swmp-seek-border-top:#444;--swmp-seek-border-right:#444;--swmp-seek-border-bottom:#444;--swmp-container-box-shadow:0px 0px 10px #000;font-family:Arial;font-weight:700}div.swmp.swmp-theme-modernity input[type=range]::-moz-range-thumb{border:none;height:8px;width:8px;background:#eee;box-shadow:none;border-radius:100%;padding:4px}div.swmp.swmp-theme-modernity input[type=range]::-webkit-slider-thumb{border:none;height:8px;width:8px;background:#eee;box-shadow:none;border-radius:100%;padding:8px}div.swmp.swmp-theme-winxp,div.swmp.swmp-theme-winxp *{--swmp-background:#0253d2;--swmp-container-border:none;--swmp-container-border-radius:3px;--swmp-container-box-shadow:#00000052 0px 0px 1px 0px;--swmp-controls-background:#ece9d8;--swmp-button-background:#fff;--swmp-seek-background:#ddd;--swmp-seek-progress-color:#17b900;--swmp-seek-border-left:#a4a4a4;--swmp-seek-border-top:#a4a4a4;--swmp-seek-border-right:#fff;--swmp-seek-border-bottom:#fff;--swmp-range-thumb-color:#fff;--swmp-range-thumb-border-left:#fff;--swmp-range-thumb-border-top:#3319e4;--swmp-btn-border-radius:3px;--swmp-btn-border-left:#2202ff;--swmp-btn-border-top:#2202ff;--swmp-btn-border-right:#000;--swmp-btn-border-bottom:#000;--swmp-btn-border-left-active:#000;--swmp-btn-border-top-active:#000;--swmp-btn-border-right-active:#000;--swmp-btn-border-bottom-active:#000}div.swmp.swmp-theme-winxp .swmp-window-title{color:#fff;text-shadow:1px 1px #0f1089}div.swmp.swmp-theme-winxp .swmp.swmp-window.swmp-window-container{background:linear-gradient(180deg,#0684df,#0347c6 8%,#0240bb 40%,#0451c6 88%,#0253cc 93%,#0149cc 95%,#0230a4 100%)}div.swmp.swmp-theme-winxp button.swmp.swmp-button:hover{box-shadow:inset 0 0 2px 0 #ce700b}div.swmp.swmp-theme-winxp button.swmp.swmp-button:active{box-shadow:inset 0 0 2px 0 #074faa}div.swmp.swmp-theme-winxp .swmp-window button.swmp-button{background:linear-gradient(#1690e8,#2969e3 8%,#0438bd 100%);box-shadow:none!important;border-color:#fff}div.swmp.swmp-theme-winxp .swmp-window button.swmp-button:hover{background:linear-gradient(#2295e8,#3674ec 8%,#0b3fc6 100%)}div.swmp.swmp-theme-winxp .swmp-window button.swmp-button:active{background:linear-gradient(#0c74bf,#144cb7 8%,#0438bd 100%)}div.swmp.swmp-theme-winxp .swmp-window button.swmp-button span{background-color:#fff}div.swmp.swmp-theme-winxp .swmp-window button.swmp-button.swmp-window-close{background:linear-gradient(#ea4646,#e65a5a 8%,#d22828 100%)}div.swmp.swmp-theme-winxp .swmp-window button.swmp-button.swmp-window-close:hover{background:linear-gradient(#ea5050,#e66a6a 8%,#db3434 100%)}div.swmp.swmp-theme-winxp .swmp-window button.swmp-button.swmp-window-close:active{background:linear-gradient(#d22b2b,#c33838 8%,#d22828 100%)}div.swmp.swmp-theme-winxp span.swmp input[type=range]::-moz-range-thumb{border:1px solid #000;border-radius:2px 2px 4px 4px!important;height:16px;width:10px;box-shadow:inset 1px 1px 0 0 #fff,inset -1px -1px 0 0 #4d85dd;background:linear-gradient(180deg,#a7c8d9 20%,#fff 20%,#fff 80%,#a7c8d9 80%)}div.swmp.swmp-theme-winxp span.swmp input[type=range]::-webkit-slider-thumb{border:1px solid #000;border-radius:2px 2px 4px 4px!important;height:18px;width:12px;box-shadow:inset 1px 1px 0 0 #fff,inset -1px -1px 0 0 #4d85dd;background:linear-gradient(180deg,#a7c8d9 20%,#fff 20%,#fff 80%,#a7c8d9 80%)}div.swmp.swmp-theme-winxp span.swmp input.swmp-volume[type=range]::-moz-range-thumb{width:6px}div.swmp.swmp-theme-winxp span.swmp input.swmp-volume[type=range]::-webkit-slider-thumb{width:10px}div.swmp.swmp-theme-winxp span.swmp input:hover[type=range]::-moz-range-thumb{background:linear-gradient(180deg,#d9cca7 20%,#fff 20%,#fff 80%,#d9cca7 80%);box-shadow:inset 1px 1px 0 0 #fff,inset -1px -1px 0 0 #e9967a}div.swmp.swmp-theme-winxp span.swmp input:hover[type=range]::-webkit-slider-thumb{background:linear-gradient(180deg,#d9cca7 20%,#fff 20%,#fff 80%,#d9cca7 80%);box-shadow:inset 1px 1px 0 0 #fff,inset -1px -1px 0 0 #e9967a}div.swmp.swmp-theme-winxp span.swmp input:active[type=range]::-moz-range-thumb{box-shadow:inset 1px 1px 0 0 #fff,inset -1px -1px 0 0 orange;background:linear-gradient(180deg,orange 20%,#fff 20%,#fff 80%,#ff8c00 80%)}div.swmp.swmp-theme-winxp span.swmp input:active[type=range]::-webkit-slider-thumb{box-shadow:inset 1px 1px 0 0 #fff,inset -1px -1px 0 0 orange;background:linear-gradient(180deg,orange 20%,#fff 20%,#fff 80%,#ff8c00 80%)}@media screen and (max-width:480px){div.swmp.swmp-container{top:5px!important;right:5px!important;left:5px!important;margin-bottom:10px}div.swmp.swmp-container.swmp-maximized{margin:0}div.swmp audio,div.swmp iframe,div.swmp video{max-width:100%!important;max-height:100%!important;min-width:unset;min-height:unset;width:100%;height:100%}span.swmp.swmp-volume-container{display:none}}`;
  207.   document.head.appendChild(swmpStyle);
  208. }
  209.  
  210. var youtubeIsLoaded = false;
  211. var gmwindow;
  212. if (typeof GM_info != 'undefined') {
  213.   gmwindow = unsafeWindow;
  214. } else {
  215.   gmwindow = window;
  216. }
  217.  
  218. var fileregex = new RegExp(`\.(${swmpConfig.files})+$`, 'gmi');
  219. var ytregex = new RegExp("^(?:https?:)?//[^/]*(?:youtube(?:-nocookie)?\.com|youtu\.be|yewtu\.be).*[=/]([-\\w]{11})(?:\\?|=|&|$)", "gmi");
  220.  
  221. // SWMP Code
  222.  
  223. class swmp {
  224.  
  225.   constructor(obj) {
  226.     this.name = 'Simple Web Media Player';
  227.  
  228.     if (obj.id == undefined) {
  229.     this.id = this.uuid();
  230.     } else {
  231.       this.id = obj.id;
  232.     }
  233.  
  234.     this.type = obj.type; // "video" or "audio" player. Youtube too.
  235.     this.mime = obj.mime; // MIME type for source, Example: "video/webm". Feed to enable checking for file support (webm not supported by iOS)
  236.     this.url = obj.url; // File Location
  237.     this.poster = obj.poster; // Optional Video Preview for when autoplay is off.
  238.     this.autoplay = obj.autoplay; // Optional Autoplay
  239.     this.loop = obj.loop; // Optional Loop
  240.     this.windowed = obj.windowed; // Optional set false to disable windowed mode and place inline
  241.  
  242.     this.defaultVolume = parseInt(swmpConfig.volume);
  243.  
  244.     this.playlistLocation = 0;
  245.     this.playlist = obj.playlist;
  246.  
  247.     if (obj.url == undefined) {
  248.       console.log('No media given');
  249.       return false;
  250.     }
  251.  
  252.     if (obj.windowed == undefined) {
  253.       this.windowed = swmpConfig.windowed;
  254.     }
  255.  
  256.     if (obj.title == undefined) {
  257.       this.title = this.getFileName(obj.url);
  258.     } else {
  259.       this.title = obj.title; // If Applicable, assign from existing parameters on IB.
  260.     }
  261.  
  262.     // Check URL for Type and Mime, also sets mime+type based on fileextension in url
  263.     if (this.checkURL(this.url) == false) {
  264.       return false;
  265.     }
  266.  
  267.     // Create Container
  268.     this.container = document.createElement('div');
  269.     this.container.setAttribute('class', 'swmp swmp-container');
  270.     this.container.setAttribute('id', this.id);
  271.     this.container.setAttribute('tabindex', '0');
  272.  
  273.     // Create Window Container
  274.     this.prepareWindow();
  275.  
  276.     // Prepare the media that's gonna play.
  277.  
  278.     if (this.type == 'video' || this.type == 'audio') {
  279.       // Check if browser can play formats, create audio or video tag and fill with source.
  280.       this.preparePlayer();
  281.     } else if (this.type == 'youtube') {
  282.       // Load Youtube iframe.
  283.       if (this.prepareYoutube() == false) {
  284.         console.log("Error: YouTube");
  285.         return false;
  286.       }
  287.     }
  288.  
  289.     // Add Theme
  290.     if (swmpConfig.theme != undefined) {
  291.       this.container.classList.add(`swmp-theme-${swmpConfig.theme}`);
  292.     }
  293.  
  294.     if (this.type == 'video' || this.type == 'audio') {
  295.     // Create buttons
  296.       //this.prepareSharedEventsInit();
  297.       this.prepareSharedEvents();
  298.       this.prepareControls();
  299.       this.preparePlayerEvents();
  300.       this.prepareSettings();
  301.     } else if (this.type == 'youtube') {
  302.       //this.prepareSharedEvents();
  303.       //this.prepareYoutubeEvents();
  304.     }
  305.  
  306.     this.prepareSharedEventsInit();
  307.  
  308.   } //END CONSTRUCTOR
  309.  
  310.   nextMedia() {
  311.     if (this.playlistLocation === this.playlist.length -1) {
  312.       return;
  313.     }
  314.  
  315.     this.playlistLocation++;
  316.     this.url = this.playlist[this.playlistLocation];
  317.     this.windowTitle.textContent = `[${this.playlistLocation+1}/${this.playlist.length}] ${this.url}`;
  318.  
  319.     this.refreshPlayer();
  320.   }
  321.  
  322.   previousMedia() {
  323.     if (this.playlistLocation === 0) {
  324.       return;
  325.     }
  326.  
  327.     this.playlistLocation--;
  328.     this.url = this.playlist[this.playlistLocation];
  329.     this.windowTitle.textContent = `[${this.playlistLocation+1}/${this.playlist.length}] ${this.url}`;
  330.  
  331.     this.refreshPlayer();
  332.   }
  333.  
  334.   clearPlayer() {
  335.  
  336.     if (this.player.interval != undefined) {
  337.       clearInterval(this.player.interval);
  338.     }
  339.  
  340.     if (this.closeError != undefined) {
  341.       this.closeError.remove();
  342.     }
  343.  
  344.     /*if (timeInterval != undefined) {
  345.       clearInterval(timeInterval); //the yt timer is completely borken
  346.     }*/
  347.  
  348.     this.container.classList.remove('swmp-video');
  349.     this.container.classList.remove('swmp-audio');
  350.     this.container.classList.remove('swmp-youtube');
  351.  
  352.     if (this.settingsContainer != undefined) {
  353.       this.settingsContainer.innerHTML = null;
  354.       this.settingsContainer.remove();
  355.     }
  356.     this.controls.innerHTML = null;
  357.     this.controls.remove();
  358.     this.playerContainer.innerHTML = null;
  359.     this.playerContainer.remove();
  360.     this.player.innerHTML = null;
  361.     this.player.remove();
  362.  
  363.   }
  364.  
  365.   refreshPlayer() {
  366.     this.clearPlayer();
  367.  
  368.     this.checkURL(this.url);
  369.  
  370.     if (this.type == 'youtube') {
  371.       this.prepareYoutube();
  372.     }
  373.  
  374.     if (this.type == 'video' || this.type == 'audio') {
  375.       this.preparePlayer();
  376.       this.prepareSharedEvents();
  377.       this.prepareControls();
  378.       this.preparePlayerEvents();
  379.       this.prepareSettings();
  380.     }
  381.   }
  382.  
  383.   prepareWindow() {
  384.     this.windowContainer = document.createElement('div');
  385.     this.windowContainer.setAttribute('class', 'swmp swmp-window swmp-window-container');
  386.     this.container.appendChild(this.windowContainer);
  387.  
  388.     // Create Title/WindowDragbar and put inside Window Container
  389.     this.windowTitlebar = document.createElement('span');
  390.     this.windowTitlebar.setAttribute('class', 'swmp swmp-window swmp-window-titlebar');
  391.  
  392.     this.windowTitle = document.createElement('span');
  393.     this.windowTitle.setAttribute('class', 'swmp swmp-window swmp-window-title');
  394.  
  395.     if (this.playlist != undefined) {
  396.       if (this.title != undefined) {
  397.       this.windowTitle.textContent = `[${this.playlistLocation+1}/${this.playlist.length}] ${this.title}`;
  398.       } else {
  399.       this.windowTitle.textContent = `[${this.playlistLocation+1}/${this.playlist.length}] ${this.url}`;
  400.       }
  401.     } else {
  402.       if (this.title != undefined) {
  403.       this.windowTitle.textContent = this.title;
  404.       } else {
  405.       this.windowTitle.textContent = this.url;
  406.       }
  407.     }
  408.  
  409.     this.windowTitlebar.appendChild(this.windowTitle);
  410.     this.windowContainer.appendChild(this.windowTitlebar);
  411.  
  412.     // Create Window Buttons Container
  413.     this.windowButtonsContain = document.createElement('span');
  414.     this.windowButtonsContain.setAttribute('class', 'swmp swmp-window swmp-window-buttons-contain');
  415.     this.windowContainer.appendChild(this.windowButtonsContain);
  416.  
  417.     // Create Minimize Button (Video only)
  418.     if (this.type == 'video' || this.type == 'youtube') {
  419.       this.windowMinimize = document.createElement('button');
  420.       this.windowMinimize.setAttribute('class', 'swmp swmp-button swmp-window-minimize');
  421.       this.windowMinimize.innerHTML = '<span></span>';
  422.       this.windowMinimize.addEventListener('click', (event) => {
  423.         event.preventDefault();
  424.         if (this.container.classList.contains('swmp-minimized') ) {
  425.           this.container.classList.remove('swmp-minimized');
  426.         } else {
  427.           this.container.classList.add('swmp-minimized');
  428.         }
  429.       });
  430.       this.windowButtonsContain.appendChild(this.windowMinimize);
  431.     }
  432.  
  433.     // Create Maximize Button (Video only)
  434.     if (this.type == 'video' || this.type == 'youtube') {
  435.       this.windowMaximize = document.createElement('button');
  436.       this.windowMaximize.setAttribute('class', 'swmp swmp-button swmp-window-maximize');
  437.       this.windowMaximize.innerHTML = '<span></span>';
  438.       this.windowMaximize.addEventListener('click', this.toggleMaximize);
  439.       this.windowButtonsContain.appendChild(this.windowMaximize);
  440.     }
  441.  
  442.     // Create Close Button
  443.     this.windowClose = document.createElement('button');
  444.     this.windowClose.setAttribute('class', 'swmp swmp-button swmp-window-close');
  445.     this.windowClose.innerHTML = '<span></span>';
  446.     this.windowClose.addEventListener('click', (event) => {
  447.       event.preventDefault();
  448.       this.container.remove();
  449.     });
  450.     this.windowButtonsContain.appendChild(this.windowClose);
  451.  
  452.     // Window Event
  453.     if (swmpConfig.windowed != 'false') {
  454.       this.makeDraggable(this.container);
  455.     } else {
  456.       this.windowTitlebar.style.cursor = 'default';
  457.     }
  458.  
  459.     // Disable Default Context Menu on Titlebar
  460.     this.windowTitlebar.addEventListener('contextmenu', function(evt) {
  461.       evt.preventDefault();
  462.     }, false);
  463.     // Right Click Event
  464.     this.windowTitlebar.addEventListener('mousedown', (event) => {
  465.       event.preventDefault();
  466.       switch (event.which) {
  467.         case 3: //rightclick
  468.         this.openSettings();
  469.           break;
  470.       }
  471.     });
  472.  
  473.     // Maximize
  474.     this.windowTitlebar.addEventListener('dblclick', this.toggleMaximize);
  475.  
  476.   }
  477.  
  478.   prepareControls() {
  479.     // Create and put Controls inside Container
  480.     this.controls = document.createElement('div');
  481.     this.controls.setAttribute('class', 'swmp swmp-controls');
  482.     this.container.appendChild(this.controls);
  483.  
  484.     // Disable Default Context Menu on Controls
  485.     this.controls.addEventListener('contextmenu', function(evt) {
  486.       evt.preventDefault();
  487.     }, false);
  488.     // Right Click Event
  489.     this.controls.addEventListener('mousedown', (event) => {
  490.       switch (event.which) {
  491.         case 3: //rightclick
  492.         this.openSettings();
  493.           break;
  494.       }
  495.     });
  496.  
  497.     // Create Progress/Seeker Container
  498.     this.seekContain = document.createElement('span');
  499.     this.seekContain.setAttribute('class', 'swmp swmp-seek-container');
  500.     this.controls.appendChild(this.seekContain);
  501.  
  502.     // Create Progress Bar
  503.     this.progress = document.createElement('progress');
  504.     this.progress.setAttribute('value', '0');
  505.     this.progress.setAttribute('min', '0');
  506.     this.progress.setAttribute('max', '1000');
  507.     this.progress.setAttribute('step', '1');
  508.     this.progress.setAttribute('class', 'swmp swmp-progress');
  509.     this.seekContain.appendChild(this.progress);
  510.  
  511.     // Create Seeker Input
  512.     this.seeker = document.createElement('input');
  513.     this.seeker.setAttribute('type', 'range');
  514.     this.seeker.setAttribute('value', '0');
  515.     this.seeker.setAttribute('min', '0');
  516.     this.seeker.setAttribute('max', '1000');
  517.     this.seeker.setAttribute('step', '1');
  518.     this.seeker.setAttribute('class', 'swmp swmp-seeker');
  519.     this.seekContain.appendChild(this.seeker);
  520.  
  521.     // Create a Row Bottom Container
  522.     this.bottomRow = document.createElement('span');
  523.     this.bottomRow.setAttribute('class', 'swmp swmp-row-bottom');
  524.     this.controls.appendChild(this.bottomRow);
  525.  
  526.     // Create Buttons Container
  527.     this.buttonsContain = document.createElement('span');
  528.     this.buttonsContain.setAttribute('class', 'swmp swmp-buttons-container');
  529.     this.bottomRow.appendChild(this.buttonsContain);
  530.  
  531.     // Create Play/Pause Button and put inside Controls
  532.     this.playbutton = document.createElement('button');
  533.     this.playbutton.setAttribute('class', 'swmp swmp-button swmp-playbutton');
  534.     this.playbutton.innerHTML = "<span></span>"; // ◀
  535.     this.playbutton.addEventListener("click", event => {
  536.       event.preventDefault();
  537.  
  538.         if (this.type == 'video' || this.type == 'audio') {
  539.           if (this.player.paused ) {
  540.             this.player.play();
  541.           } else {
  542.             this.player.pause();
  543.           }
  544.         } else if (this.type == 'youtube') {
  545.           this.togglePlay();
  546.         }
  547.     });
  548.     this.buttonsContain.appendChild(this.playbutton);
  549.  
  550.     // Create a Stop/Reload Button and put inside Controls
  551.     this.stopbutton = document.createElement('button');
  552.     this.stopbutton.setAttribute('class', 'swmp swmp-button swmp-stopbutton');
  553.     this.stopbutton.innerHTML = "<span></span>"; // ■
  554.     this.stopbutton.addEventListener("click", event => {
  555.       event.preventDefault();
  556.       if (this.loaded != true) {
  557.         console.log('Userscript: Can\'t send stop yet.');
  558.         return;
  559.       }
  560.  
  561.       if (this.type == 'video' || this.type == 'audio') {
  562.         this.player.pause();
  563.         this.seeker.value = 0;
  564.         this.seeker.setAttribute("value", 0);
  565.         this.progress.value = 0;
  566.         this.progress.setAttribute("value", 0);
  567.         this.player.currentTime = 0;
  568.         this.currentTimer.textContent = '00:00';
  569.       } else if (this.type == 'youtube') {
  570.         this.seeker.value = 0;
  571.         this.seeker.setAttribute("value", 0);
  572.         this.progress.value = 0;
  573.         this.progress.setAttribute("value", 0);
  574.         this.ytplayer.stopVideo();
  575.         this.currentTimer.textContent = '00:00';
  576.       }
  577.     });
  578.     this.buttonsContain.appendChild(this.stopbutton);
  579.  
  580.     if (this.playlist) {
  581.       this.previousButton = document.createElement('button');
  582.       this.previousButton.setAttribute('class', 'swmp swmp-button swmp-playlist swmp-playlist-prev');
  583.       this.previousButton.innerHTML = "<span></span>";
  584.       this.previousButton.addEventListener('click', event => {
  585.         event.preventDefault();
  586.         this.previousMedia();
  587.       });
  588.       this.buttonsContain.appendChild(this.previousButton);
  589.  
  590.       this.nextButton = document.createElement('button');
  591.       this.nextButton.setAttribute('class', 'swmp swmp-button swmp-playlist');
  592.       this.nextButton.innerHTML = "<span></span>";
  593.       this.nextButton.addEventListener('click', event => {
  594.         event.preventDefault();
  595.         this.nextMedia();
  596.       });
  597.       this.buttonsContain.appendChild(this.nextButton);
  598.     }
  599.  
  600.     // Create a Volume Container
  601.     this.volumeContain = document.createElement('span');
  602.     this.volumeContain.setAttribute('class', 'swmp swmp-volume-container');
  603.     this.bottomRow.appendChild(this.volumeContain);
  604.  
  605.     // Create a Volume Button and put inside Buttons Container
  606.     this.volumeButton = document.createElement('button');
  607.     this.volumeButton.setAttribute('class', 'swmp swmp-button swmp-volume');
  608.     this.volumeButton.innerHTML = "<span></span>";
  609.     this.volumeButton.addEventListener("click", event => {
  610.       event.preventDefault();
  611.       this.toggleMute();
  612.     });
  613.     this.buttonsContain.appendChild(this.volumeButton);
  614.  
  615.     // Create a Volume Progress and put inside Volume Container
  616.     this.volumeProgress = document.createElement('progress');
  617.     this.volumeProgress.setAttribute('value', this.defaultVolume);
  618.     this.volumeProgress.setAttribute('min', '0');
  619.     this.volumeProgress.setAttribute('max', '100');
  620.     this.volumeProgress.setAttribute('step', '1');
  621.     this.volumeProgress.setAttribute('class', 'swmp swmp-volume swmp-progress');
  622.     this.volumeContain.appendChild(this.volumeProgress);
  623.  
  624.     // Create a Volume Input and put inside Volume Container
  625.     this.volumeRange = document.createElement('input');
  626.     this.volumeRange.setAttribute('type', 'range');
  627.     this.volumeRange.setAttribute('value', this.defaultVolume);
  628.     this.volumeRange.setAttribute('min', '0');
  629.     this.volumeRange.setAttribute('max', '100');
  630.     this.volumeRange.setAttribute('step', '1');
  631.     this.volumeRange.setAttribute('class', 'swmp swmp-volume swmp-range');
  632.     this.volumeContain.appendChild(this.volumeRange);
  633.  
  634.     // Create a Timer Container and put inside Controls
  635.     this.timerContain = document.createElement('span');
  636.     this.timerContain.setAttribute('class', 'swmp swmp-timer-container');
  637.     this.bottomRow.appendChild(this.timerContain);
  638.  
  639.     // Create a timerCurrent and put inside Timer Container
  640.     this.currentTimer = document.createElement('span');
  641.     this.currentTimer.setAttribute('class', 'swmp swmp-time swmp-current');
  642.     this.currentTimer.textContent = '00:00';
  643.     this.timerContain.appendChild(this.currentTimer);
  644.  
  645.     // Add a separator between timer
  646.     this.timerSeperator = document.createElement('span');
  647.     this.timerSeperator.setAttribute('class', 'swmp swmp-time swmp-separator');
  648.     this.timerSeperator.textContent = '/';
  649.     this.timerContain.appendChild(this.timerSeperator);
  650.  
  651.     // Create a totalTimer and put inside Timer Container
  652.     this.totalTimer = document.createElement('span');
  653.     this.totalTimer.setAttribute('class', 'swmp swmp-time swmp-total');
  654.     this.totalTimer.textContent = '00:00';
  655.     this.timerContain.appendChild(this.totalTimer);
  656.  
  657.     // Create a Fullscreen Button and put inside Bottom Row Container
  658.     if (this.type == 'video' || this.type == 'youtube' || (this.type == 'audio' && this.playlist != null) ) {
  659.       this.fullscreenbutton = document.createElement('button');
  660.       this.fullscreenbutton.setAttribute('class', 'swmp swmp-button swmp-fullscreen');
  661.       this.fullscreenbutton.innerHTML = "<span></span>"; // ▣
  662.       this.fullscreenbutton.addEventListener("click", event => {
  663.         event.preventDefault();
  664.         this.toggleFullscreen();
  665.       });
  666.       this.bottomRow.appendChild(this.fullscreenbutton);
  667.     }
  668.   }
  669.  
  670.   prepareSettings() {
  671.  
  672.     this.openSettings = () => {
  673.       // Settings Menu
  674.  
  675.       if (this.container.querySelector('.swmp-settings-container') != null) {
  676.         this.settingsContainer.remove();
  677.         return false; //Already open
  678.       }
  679.  
  680.       this.settingsContainer = document.createElement('div');
  681.       this.settingsContainer.setAttribute('class', 'swmp swmp-settings swmp-settings-container');
  682.       this.settingsContainer.innerHTML = 'Settings:';
  683.  
  684.       this.br = document.createElement('br');
  685.       this.settingsContainer.appendChild(this.br);
  686.  
  687.       this.themeSelector = document.createElement('select');
  688.       this.themeSelector.setAttribute('class', 'swmp swmp-selector swmp-settings swmp-theme-selector');
  689.  
  690.       this.themes = '';
  691.       swmpConfig.themes.forEach(theme => {
  692.         if (localStorage.swmpTheme == theme[0]) {
  693.           this.themeSelector.value = theme[0];
  694.           this.themes += `<option value="${theme[0]}" selected>${theme[1]}</option>`;
  695.         } else {
  696.           this.themes += `<option value="${theme[0]}">${theme[1]}</option>`;
  697.         }
  698.       });
  699.       this.themeSelector.innerHTML = this.themes;
  700.  
  701.       this.themeSelector.onchange = (event) => {
  702.         if (this.themeSelector.value == '') {
  703.           return false;
  704.         } else {
  705.           this.removeClassByPrefix(this.container, 'swmp-theme-'); //regex remove [theme-*]
  706.           this.container.classList.add(`swmp-theme-${this.themeSelector.value}`);
  707.           swmpConfig.theme = this.themeSelector.value;
  708.           localStorage.swmpTheme = this.themeSelector.value;
  709.         }
  710.       }
  711.  
  712.       this.settingsContainer.appendChild(this.themeSelector);
  713.  
  714.         // Defines true/false checkboxes.
  715.       this.settingsCheckboxContent = {
  716.         autoplay: {
  717.           'label': 'Autoplay',
  718.           'desc': 'Enable/Disable Autoplaying of media.'
  719.         },
  720.         loop: {
  721.           'label': 'Loop',
  722.           'desc': 'Enable/Disable Looping of media.'
  723.         },
  724.         allowMultiple: {
  725.           'label': 'Multi',
  726.           'desc': 'Disabled will remove existing players and open new.'
  727.         },
  728.         volumeScroll: {
  729.           'label': 'Volume Scrolling',
  730.           'desc': 'Enabled will allow using scroll wheel on player to change volume.'
  731.         },
  732.         downloadAttribute: {
  733.           'label': 'Override Download',
  734.           'desc': 'Enable to make [download=""] links launch player instead.'
  735.         },
  736.         doubleclickMaximize: {
  737.           'label': 'Doubleclick Maximize',
  738.           'desc': 'When enabled replaces the default behavior from doubleclick fullscreen on video to instead maximize the video size.'
  739.         },
  740.         windowed: {
  741.           'label': 'Movable Window',
  742.           'desc': 'When Enabled opens the player in a fixed movable window. Disable to inline.'
  743.         }
  744.       }
  745.       this.checkbox = [];
  746.       this.createToggle = function(key, obj) {
  747.           // Label
  748.         this.checkbox[`${key}Label`] = document.createElement('label');
  749.         this.checkbox[`${key}Label`].setAttribute('class', `swmp swmp-settings swmp-label swmp-${key}-label`);
  750.         this.checkbox[`${key}Label`].textContent = `${obj['label']}`;
  751.         this.checkbox[`${key}Label`].setAttribute('title', `${obj['desc']}`);
  752.           // Checkbox
  753.         this.checkbox[`${key}Check`] = document.createElement('input');
  754.         this.checkbox[`${key}Check`].setAttribute('class', `swmp swmp-settings swmp-input swmp-${key}-input`);
  755.         this.checkbox[`${key}Check`].setAttribute('type', 'checkbox');
  756.           // Initialize value
  757.         if (localStorage[`swmp${upperFirst(key)}`] == 'true') {
  758.           this.checkbox[`${key}Check`].setAttribute('checked', 'checked');
  759.         }
  760.           // Event listener for true/false
  761.         this.checkbox[`${key}Check`].addEventListener('change', (event) => {
  762.           if (this.checkbox[`${key}Check`].checked == true) {
  763.             //SPECIFIC ACTIONS
  764.             //LOOP
  765.             if (key == 'loop') {
  766.               if (this.type == 'video' || this.type == 'audio') {
  767.                 this.player.setAttribute('loop', 'true');
  768.               } else if (this.type == 'youtube') {
  769.               // Youtube Loop
  770.               }
  771.             }
  772.             //END SPECIFIC
  773.             this.checkbox[`${key}Check`].setAttribute('checked', 'checked');
  774.             localStorage.setItem(`swmp${upperFirst(key)}`, 'true');
  775.             swmpConfig[`${key}`] = 'true';
  776.           } else {
  777.             //SPECIFIC ACTIONS
  778.             //LOOP
  779.             if (key == 'loop') {
  780.               if (this.type == 'video' || this.type == 'audio') {
  781.                 this.player.removeAttribute('loop');
  782.               } else if (this.type == 'youtube') {
  783.                 // Youtube Loop
  784.               }
  785.             }
  786.             //END SPECIFIC
  787.  
  788.             this.checkbox[`${key}Check`].removeAttribute('checked');
  789.             localStorage.setItem(`swmp${upperFirst(key)}`, 'false');
  790.             swmpConfig[`${key}`] = 'false';
  791.           }
  792.         });
  793.  
  794.         // Put Checkbox inside Label
  795.         this.checkbox[`${key}Label`].appendChild(this.checkbox[`${key}Check`]);
  796.         // Add to settings container
  797.         this.settingsContainer.appendChild(this.checkbox[`${key}Label`]);
  798.       }
  799.  
  800.       // Create the toggles
  801.       Object.entries(this.settingsCheckboxContent).forEach( ([item, value]) => {
  802.         this.createToggle(item, value);
  803.       });
  804.  
  805.       this.container.appendChild(this.settingsContainer);
  806.  
  807.     }
  808.   }
  809.  
  810.   preparePlayer() {
  811.     // Create Player HTML5 Video or Audio format.
  812.     if (this.type == 'video') {
  813.       this.container.classList.add('swmp-video');
  814.       this.player = document.createElement('video');
  815.       this.player.setAttribute('class', 'swmp swmp-video swmp-player');
  816.       if (this.poster != false && this.poster != undefined) {
  817.         this.player.setAttribute('poster', this.poster);
  818.       }
  819.     } else if (this.type == 'audio') {
  820.       this.container.classList.add('swmp-audio');
  821.       this.player = document.createElement('audio');
  822.       this.player.setAttribute('class', 'swmp swmp-audio swmp-player');
  823.     } else {
  824.       console.log(`SWMP Error: invalid type of ${this.type}.`);
  825.       return false;
  826.     }
  827.  
  828.     // Check Format Support
  829.     if (this.mime != undefined) {
  830.       if (this.player.canPlayType(this.mime) == '') {
  831.         this.closeError = document.createElement('span');
  832.         this.closeError.innerHTML = `Your browser can't play this format: ${this.mime}`;
  833.         /*this.container.addEventListener('click', (event) => {
  834.           this.container.remove();
  835.         });*/
  836.         this.container.appendChild(this.closeError);
  837.         //return false;
  838.       }
  839.     }
  840.  
  841.     // Preload metadata
  842.     this.player.setAttribute('preload', 'metadata');
  843.  
  844.     // Create Player Container and Put inside Container
  845.     this.playerContainer = document.createElement('div');
  846.     this.playerContainer.setAttribute('class', 'swmp swmp-player-container');
  847.     this.container.appendChild(this.playerContainer);
  848.  
  849.     // Put Player inside Video Container
  850.     this.playerContainer.appendChild(this.player);
  851.  
  852.     // Create and put Source inside Player
  853.     this.source = document.createElement('source');
  854.     this.source.setAttribute('src', this.url);
  855.     if (this.mime != undefined) {
  856.       this.source.setAttribute('type', this.mime);
  857.     }
  858.     this.player.appendChild(this.source);
  859.  
  860.     // Is Autoplay?
  861.     if ( (swmpConfig.autoplay == true || swmpConfig.autoplay == 'true') && this.autoplay != false) {
  862.       this.player.setAttribute('autoplay', true);
  863.     }
  864.  
  865.     // Is Loop?
  866.     if ( (swmpConfig.loop == true || swmpConfig.loop == 'true') && this.loop != false) {
  867.       this.player.setAttribute('loop', true);
  868.     }
  869.   }
  870.  
  871.   prepareYoutube() {
  872.  
  873.     console.log('SWMP: prepareYoutube() ');
  874.  
  875.     if (youtubeIsLoaded == false) {
  876.       // Include YouTube iframe API if not already added:
  877.       if (!document.getElementById('swmp-youtube-api')) {
  878.         console.log("SWMP: Loading YouTube API");
  879.         var tag = document.createElement('script');
  880.         tag.src = "https://www.youtube.com/iframe_api";
  881.         tag.setAttribute('id', 'swmp-youtube-api');
  882.         var firstScriptTag = document.getElementsByTagName('script')[0];
  883.         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  884.       }
  885.  
  886.       gmwindow.onYouTubeIframeAPIReady = (event) => {
  887.         youtubeIsLoaded = true;
  888.         console.log('SWMP: Firing YouTube Ready Event from inside PrepareYouTube()');
  889.         this.makeYoutube();
  890.       }
  891.  
  892.     } else {
  893.       // API Already loaded, just make video.
  894.       console.log('SWMP: YT API Already loaded, make vid');
  895.       this.makeYoutube();
  896.     }
  897.   }
  898.  
  899.   makeYoutube() {
  900.     // Make new player
  901.     console.log('SWMP: makeYoutube()');
  902.     this.playerfirstrun = true;
  903.     var self = this;
  904.     this.loaded = false;
  905.     this.container.classList.add('swmp-youtube');
  906.     this.onPlayerReady = (event) => {
  907.       this.loaded = true;
  908.       if (!this.container.classList.contains('swmp-youtube')) { //cancel if already changed playlist
  909.         return;
  910.       }
  911.       console.log('SWMP Youtube: onPlayerReady()');
  912.       if (this.playerfirstrun == true) {
  913.         this.playerfirstrun = false;
  914.         this.playerContainer.appendChild(this.ytplayer.getIframe() );
  915.         if (this.playlist) {
  916.           this.windowTitle.textContent = `[${this.playlistLocation+1}/${this.playlist.length}] ${this.ytplayer.getVideoData().title}`;
  917.         } else {
  918.           this.windowTitle.textContent = this.ytplayer.getVideoData().title;
  919.         }
  920.         this.totalTimer.textContent = this.formatSeconds(this.ytplayer.getDuration() );
  921.         this.ytplayer.getIframe().style.display = 'inherit';
  922.  
  923.         this.ytplayer.setVolume(this.defaultVolume);
  924.         this._volume = this.defaultVolume;
  925.         /*if (swmpConfig.muted == 'true') {
  926.           this.ytplayer.mute();
  927.           this.volumeButton.classList.add('swmp-mute');
  928.         } else {
  929.           this.ytplayer.unMute();
  930.         }*/
  931.         this.ytplayer.unMute();
  932.  
  933.         if (this.autoplay == 'true') {
  934.           this.ytplayer.playVideo();
  935.           this.playbutton.classList.add('swmp-playing');
  936.         }
  937.  
  938.       }
  939.  
  940.       window.addEventListener('message', function(event) {
  941.         if (event.source === self.ytplayer.getIframe().contentWindow) {
  942.             var data = JSON.parse(event.data);
  943.             //console.log(data);
  944.  
  945.               // Dispatch Volume and Mute Event -- These are sent together by iframe.
  946.             if (data.event === "infoDelivery" && data.info && data.info.volume) {
  947.               //console.log(data.info.volume);
  948.               //console.log(data.info.muted);
  949.               if (data.info.volume != self._volume) {
  950.                 //console.log(data.info.volume);
  951.                 self.updateVolume();
  952.               }
  953.             }
  954.  
  955.               // Dispatch on Time Event
  956.             if (data.event === "infoDelivery" && data.info && data.info.currentTime) {
  957.               //console.log(data.info.currentTime);
  958.               self.currentTimer.textContent = self.formatSeconds(data.info.currentTime);
  959.             }
  960.  
  961.               // Dispatch on Player state event
  962.             if (data.event === "infoDelivery" && data.info && data.info.playerState) {
  963.               //console.log(data.info.playerState);
  964.               self.updatePlay();
  965.               self.updateVolume();
  966.             }
  967.         }
  968.       });
  969.  
  970.     }
  971.  
  972.     this.videogenerate = document.createElement('div');
  973.     this.videogenerate.style.display = 'none';
  974.     this.videogenerate.setAttribute('id', `ytplayer-${this.id}`);
  975.     document.body.appendChild(this.videogenerate);
  976.  
  977.     this.youtubeautoplay = (swmpConfig.autoplay=='true')?1:0;
  978.     this.youtubeloop = (swmpConfig.loop=='true')?1:0;
  979.  
  980.     this.ytplayer = new gmwindow.YT.Player(`ytplayer-${this.id}`, {
  981.       height: '1080',
  982.       width: '1920', // Allows quality to increase to 1080p. Can't be forced by API, need fast internet.
  983.       videoId: this.videoid,
  984.       playerVars: {
  985.         'playsinline': 1,
  986.         'autoplay': this.youtubeautoplay,
  987.         'loop': this.youtubeloop,
  988.         //'origin': window.location.href,
  989.         'rel': 0,
  990.         'modestbranding': 1,
  991.         'controls': 0
  992.       },
  993.       events: {
  994.         'onReady': this.onPlayerReady
  995.       }
  996.     });
  997.  
  998.     this.playerContainer = document.createElement('div');
  999.     this.playerContainer.setAttribute('class', 'swmp-player-container');
  1000.  
  1001.     this.container.appendChild(this.playerContainer);
  1002.  
  1003.     this.prepareSettings();
  1004.     this.prepareControls();
  1005.     this.prepareSharedEvents();
  1006.     this.prepareYoutubeEvents();
  1007.  
  1008.     if (!this.container.classList.contains('swmp-youtube')) { //cancel if already changed playlist
  1009.       this.videogenerate.remove();
  1010.       this.ytplayer.remove();
  1011.       return false;
  1012.     }
  1013.  
  1014.   }
  1015.  
  1016.   prepareYoutubeEvents() {
  1017.  
  1018.     this.togglePlay = function() {
  1019.       if (this.loaded != true) {
  1020.         console.log('Userscript: YT must load before togglePlay.');
  1021.         return;
  1022.       }
  1023.       if (this.ytplayer.getPlayerState() == 1) { // Playing
  1024.         this.ytplayer.pauseVideo();
  1025.       } else { // -1 unstarted, 0 ended, 1 playing, 2 Pause, 3 buffering, 5 video cued
  1026.         this.ytplayer.playVideo();
  1027.         this.updateTime();
  1028.       }
  1029.     }
  1030.  
  1031.     this.seekBack = function() {
  1032.       var time = this.ytplayer.getCurrentTime();
  1033.       var max = this.ytplayer.getDuration();
  1034.       if (time < 5) {
  1035.         time = 0;
  1036.       } else {
  1037.         time = time - 5;
  1038.       }
  1039.       this.ytplayer.seekTo(time);
  1040.  
  1041.       this.seeker.value = Math.floor(time / max * this.seeker.max);
  1042.       this.seeker.setAttribute('value', this.seeker.value);
  1043.       this.progress.value = this.seeker.value;
  1044.       this.progress.setAttribute('value', this.seeker.value);
  1045.     }
  1046.  
  1047.     this.seekForward = function() {
  1048.       var time = this.ytplayer.getCurrentTime();
  1049.       var max = this.ytplayer.getDuration();
  1050.       if (time+5 >= max ) {
  1051.         time = max;
  1052.       } else {
  1053.         time = time + 5;
  1054.       }
  1055.       this.ytplayer.seekTo(time);
  1056.  
  1057.       this.seeker.value = Math.floor(time / max * this.seeker.max);
  1058.       this.seeker.setAttribute('value', this.seeker.value);
  1059.       this.progress.value = this.seeker.value;
  1060.       this.progress.setAttribute('value', this.seeker.value);
  1061.  
  1062.     }
  1063.  
  1064.     var timeInterval;
  1065.     this.updatePlay = () => {
  1066.  
  1067.       this._playerState = this.ytplayer.getPlayerState();
  1068.  
  1069.       if (this._playerState == 1) { // Playing
  1070.         this.playbutton.classList.add('swmp-playing');
  1071.         this.updateTime();
  1072.  
  1073.         var self = this;
  1074.         var timeInterval = window.setInterval((event) => {
  1075.           self._playerState = self.ytplayer.getPlayerState();
  1076.           if (self._playerState == 1) {
  1077.             self.updateTime();
  1078.           }
  1079.           if (self._playerState == 0)  { //Ended
  1080.             self.updatePlay();
  1081.           }
  1082.           //console.log('time'); //still bugged on close unlike the other interval, does close on playlist change
  1083.           if (self.type != 'youtube' || self._playerState != 1 || self.container == null || self.container == undefined || self.container == false) {
  1084.             clearInterval(timeInterval);
  1085.             timeInterval = null;
  1086.           }
  1087.         }, 40);
  1088.  
  1089.       } else if (this._playerState == 0 || this._playerState == -1 || this._playerState == 2 )  { // -1 unstarted, 0 ended, 1 playing, 2 Pause, 3 buffering, 5 video cued
  1090.         this.playbutton.classList.remove('swmp-playing');
  1091.       }
  1092.  
  1093.       if (this._playerState == 0 || this._playerState == -1 ) {
  1094.         this.progress.value = 0;
  1095.         this.progress.setAttribute('value', 0);
  1096.         this.seeker.value = 0;
  1097.         this.seeker.setAttribute('value', 0);
  1098.       }
  1099.  
  1100.       if (this._playerState == 0) {
  1101.  
  1102.         if (this.playlist != undefined && swmpConfig.loop == 'false' && swmpConfig.autoplay == 'true') {
  1103.           this.nextMedia();
  1104.           return;
  1105.         }
  1106.  
  1107.         if (swmpConfig.loop == 'true') {
  1108.           console.log('SWMP: uwah video loop');
  1109.           this.ytplayer.seekTo(0);
  1110.           this.ytplayer.playVideo();
  1111.         }
  1112.       }
  1113.  
  1114.     }
  1115.  
  1116.     this.seeker.oninput = (event) => {
  1117.       if (this.loaded != true) {
  1118.         console.log('Userscript: Video must load before seeking');
  1119.         return;
  1120.       }
  1121.       //on mousedown temporary add a mute to avoid annoying seeking sounds?
  1122.       this.ytplayer.seekTo( (this.ytplayer.getDuration() * this.seeker.value / this.seeker.max) );
  1123.       this.progress.value = this.seeker.value;
  1124.       this.progress.setAttribute('value', this.seeker.value);
  1125.       this.updatePlay();
  1126.     }
  1127.  
  1128.     this.updateTime = () => {
  1129.       this.seeker.value = Math.floor(this.ytplayer.getCurrentTime() / this.ytplayer.getDuration() * this.seeker.max);
  1130.       this.seeker.setAttribute('value', this.seeker.value);
  1131.       this.progress.value = this.seeker.value;
  1132.       this.progress.setAttribute('value', this.seeker.value);
  1133.     }
  1134.  
  1135.     this.toggleMute = () => {
  1136.  
  1137.       try {
  1138.         if (this.ytplayer.isMuted() == true ) {
  1139.           this.volumeButton.classList.remove('swmp-mute');
  1140.           this._volume = this.ytplayer.getVolume() ;
  1141.           this.ytplayer.unMute();
  1142.           this.ytplayer.setVolume(this._volume);
  1143.           this.volumeRange.setAttribute('value', this._volume );
  1144.           this.volumeRange.value = this._volume;
  1145.           this.volumeProgress.setAttribute('value', this._volume );
  1146.           this.volumeProgress.value = this._volume;
  1147.           swmpConfig.muted = 'false';
  1148.           localStorage.swmpMuted = 'false';
  1149.         } else {
  1150.           this.volumeButton.classList.add('swmp-mute');
  1151.           this.ytplayer.mute();
  1152.           this.volumeRange.setAttribute('value', 0 );
  1153.           this.volumeRange.value = 0;
  1154.           this.volumeProgress.setAttribute('value', 0 );
  1155.           this.volumeProgress.value = 0;
  1156.           swmpConfig.muted = 'true';
  1157.           localStorage.swmpMuted = 'true';
  1158.         }
  1159.       } catch(e) {
  1160.         console.log('Userscript: '+e);
  1161.       }
  1162.     }
  1163.  
  1164.     this.updateVolume = (firstrun = false) => {
  1165.  
  1166.       if (this.loaded != true) {
  1167.         return;
  1168.       }
  1169.  
  1170.       this.volumeButton.classList.remove('swmp-mute');
  1171.  
  1172.       if (firstrun == true) {
  1173.         this.volumeRange.setAttribute('value', this.defaultVolume);
  1174.         this.volumeProgress.setAttribute('value', this.defaultVolume);
  1175.         this._volume = this.defaultVolume;
  1176.         this.volumeButton.classList.add('swmp-min');
  1177.       }
  1178.  
  1179.       this._volume = this.ytplayer.getVolume();
  1180.  
  1181.       this.volumeRange.setAttribute('value', this.volumeRange.value );
  1182.       this.volumeProgress.setAttribute('value', this.volumeRange.value );
  1183.       this.ytplayer.setVolume(this.volumeRange.value);
  1184.  
  1185.       if (this._volume > 50) {
  1186.         this.volumeButton.classList.add('swmp-max');
  1187.         this.volumeButton.classList.remove('swmp-med');
  1188.         this.volumeButton.classList.remove('swmp-min');
  1189.       } else if (this._volume > 10) {
  1190.         this.volumeButton.classList.add('swmp-med');
  1191.         this.volumeButton.classList.remove('swmp-max');
  1192.         this.volumeButton.classList.remove('swmp-min');
  1193.       } else if (this._volume > 5) {
  1194.         this.volumeButton.classList.add('swmp-min');
  1195.         this.volumeButton.classList.remove('swmp-max');
  1196.         this.volumeButton.classList.remove('swmp-med');
  1197.       }
  1198.  
  1199.       localStorage.swmpVolume = this.volumeRange.value;
  1200.       swmpConfig.volume = this.volumeRange.value;
  1201.     }
  1202.  
  1203.     this.volumeRange.oninput = (event) => {
  1204.       this.updateVolume();
  1205.     }
  1206.  
  1207.   }
  1208.  
  1209.   prepareSharedEventsInit() {
  1210.  
  1211.     this.container.addEventListener('mousemove', event => {
  1212.       this.container.classList.add('swmp-movingmouse');
  1213.       clearTimeout(this.mousemovetimeout);
  1214.       this.mousemovetimeout = window.setTimeout((event) => {
  1215.         this.container.classList.remove('swmp-movingmouse');
  1216.       }, 1500);
  1217.     });
  1218.  
  1219.     this.volumeScroll = (event) => {
  1220.       if (swmpConfig.volumeScroll != 'true') {
  1221.         return false;
  1222.       }
  1223.       event.preventDefault();
  1224.         if (this.type == 'video' || this.type == 'audio') {
  1225.           if (event.wheelDelta > 0) {
  1226.             var vol = this.player.volume + 0.04;
  1227.             if (vol > 1.0) {
  1228.               vol = 1.0;
  1229.             }
  1230.  
  1231.           } else {
  1232.             var vol = this.player.volume - 0.04;
  1233.             if (vol < 0.0) {
  1234.               vol = 0.0;
  1235.             }
  1236.           }
  1237.           var newvolume = Math.floor(vol * 100);
  1238.  
  1239.         } else if (this.type == 'youtube') {
  1240.           if (event.wheelDelta > 0) {
  1241.             var vol = this.ytplayer.getVolume() + 4;
  1242.             if (vol > 100) {
  1243.               vol = 100;
  1244.             }
  1245.  
  1246.           } else {
  1247.             var vol = this.ytplayer.getVolume() - 4;
  1248.             if (vol < 0) {
  1249.               vol = 0;
  1250.             }
  1251.           }
  1252.           var newvolume = vol;
  1253.         }
  1254.  
  1255.         this.volumeProgress.setAttribute('value', newvolume);
  1256.         this.volumeProgress.value = newvolume;
  1257.         this.volumeRange.setAttribute('value', newvolume);
  1258.         this.volumeRange.value = newvolume;
  1259.         this.updateVolume(); // Change icon blah blah
  1260.     }
  1261.  
  1262.     this.container.addEventListener('wheel', event => {
  1263.       this.volumeScroll(event);
  1264.     });
  1265.  
  1266.     this.container.addEventListener('keydown', event => {
  1267.       event.stopPropagation();
  1268.       event.preventDefault();
  1269.       if (event.repeat) { return; } // Don't spam
  1270.       switch(event.key) {
  1271.         case ' ': //Space
  1272.           this.togglePlay();
  1273.           break;
  1274.         case 'f':
  1275.           this.toggleFullscreen();
  1276.           break;
  1277.         case 'm':
  1278.           this.toggleMute();
  1279.           break;
  1280.         case 'x':
  1281.           this.container.remove();
  1282.           break;
  1283.         /*case 'q': // still need do youtube fix for fast skipping, otherwise would work well
  1284.           if (this.playlist != undefined) { this.previousMedia(); } else { return; }
  1285.           break;
  1286.         case 'e':
  1287.           if (this.playlist != undefined) { this.nextMedia(); } else { return; }
  1288.           break;*/
  1289.         case 'ArrowLeft': //left
  1290.           this.seekBack();
  1291.           break;
  1292.         case 'ArrowRight': //right
  1293.           this.seekForward();
  1294.           break;
  1295.         case 'Escape':
  1296.           // assuming i wont need to call exitFullscreen, all browsers default to escape escaping, right?
  1297.           this.container.classList.remove('swmp-fullscreen');
  1298.           this.container.classList.remove('swmp-maximized');
  1299.           break;
  1300.         default:
  1301.           return;
  1302.       }
  1303.     }, true);
  1304.  
  1305.     this.isFullscreen = () => {
  1306.       var full = document.fullscreenElement ||
  1307.       document.mozFullScreenElement ||
  1308.       document.webkitFullscreenElement ||
  1309.       document.msFullscreenElement;
  1310.       if (full != undefined) {
  1311.         return true;
  1312.       } else {
  1313.         return false;
  1314.       }
  1315.     }
  1316.  
  1317.     this.container.addEventListener('fullscreenchange', event => {
  1318.       if (this.isFullscreen() == true) {
  1319.         this.container.classList.add('swmp-fullscreen');
  1320.       } else {
  1321.         this.container.classList.remove('swmp-fullscreen');
  1322.         this.container.classList.remove('swmp-maximized');
  1323.       }
  1324.     });
  1325.  
  1326.     this.container.onfullscreenerror = (event) => {
  1327.       console.log('SWMP: Fullscreen error.');
  1328.       this.toggleMaximize(); // maximize to cope.
  1329.       this.container.classList.remove('swmp-fullscreen');
  1330.       return;
  1331.     };
  1332.  
  1333.     this.requestFullscreen = (element) => {
  1334.         try {
  1335.           if (element.requestFullscreen) {
  1336.             element.requestFullscreen();
  1337.           } else if (element.mozRequestFullScreen) {
  1338.             element.mozRequestFullScreen();
  1339.           } else if (element.webkitRequestFullscreen) {
  1340.             this._scroll = {'x' : window.scrollX, 'y' : window.scrollY}
  1341.             element.webkitRequestFullscreen();
  1342.           } else if (element.msRequestFullscreen) {
  1343.             element.msRequestFullscreen();
  1344.           } else {
  1345.             throw new Error('SWMP: Could not request fullscreen.');
  1346.           }
  1347.         } catch(e) { // This doesn't seem to work on firefox, not tested others. Requests can't be caught.
  1348.                      // Also tried try on each individual scope, no luck.
  1349.                      // onfullscreenerror is fine, but still means uncaught error in console log.
  1350.             console.log('SWMP: Fullscreen request denied by browser.');
  1351.             console.log(e);
  1352.             this.toggleMaximize();
  1353.             return;
  1354.         }
  1355.     }
  1356.  
  1357.     this.exitFullscreen = () => {
  1358.       if (document.exitFullscreen) {
  1359.         document.exitFullscreen();
  1360.       } else if (document.mozCancelFullScreen) {
  1361.         document.mozCancelFullScreen();
  1362.       } else if (document.webkitExitFullscreen) {
  1363.         window.scrollTo({
  1364.           top: this._scroll['y'],
  1365.           left: this._scroll['x'],
  1366.           behavior: 'auto'
  1367.         });
  1368.         document.webkitExitFullscreen(); //Safari sucks
  1369.       } else if (document.msExitFullscreen) {
  1370.         document.msExitFullscreen();
  1371.       }
  1372.       this.container.classList.remove('swmp-fullscreen');
  1373.       this.container.classList.remove('swmp-maximized');
  1374.     }
  1375.  
  1376.     this.toggleFullscreen = () => {
  1377.       if (this.isFullscreen() == true) {
  1378.         this.exitFullscreen();
  1379.       } else {
  1380.         this.requestFullscreen(this.container);
  1381.       }
  1382.     }
  1383.  
  1384.   }
  1385.  
  1386.   toggleMaximize = (event) => {
  1387.     if (event) {
  1388.       event.preventDefault();
  1389.     }
  1390.  
  1391.     // Remove fullscreen if toggle off maximize in fullscreen
  1392.     if (this.isFullscreen() == true) {
  1393.       this.exitFullscreen();
  1394.       return;
  1395.     }
  1396.  
  1397.     if (this.type == 'audio' && this.playlist == null) { //allow on playlist, disallow on audio only
  1398.       this.container.classList.remove('swmp-maximized');
  1399.       return;
  1400.     }
  1401.     this.container.classList.toggle('swmp-maximized');
  1402.   }
  1403.  
  1404.   prepareSharedEvents() { // Redo on player change
  1405.  
  1406.     this.playerContainer.addEventListener('click', (event) => {
  1407.       this.togglePlay();
  1408.     });
  1409.  
  1410.     this.playerContainer.addEventListener('dblclick', (event) => {
  1411.  
  1412.       if (swmpConfig.doubleclickMaximize == 'true') {
  1413.         this.toggleMaximize();
  1414.         return;
  1415.       }
  1416.  
  1417.       this.toggleFullscreen();
  1418.     });
  1419.  
  1420.   }
  1421.  
  1422.   preparePlayerEvents() {
  1423.  
  1424.     this.player.onended = (event) => {
  1425.       this.player.classList.remove('swmp-playing');
  1426.       this.playbutton.classList.remove('swmp-playing');
  1427.       this.seeker.value = 0;
  1428.       this.progress.value = 0;
  1429.       clearInterval(this.player.interval);
  1430.       this.currentTimer.textContent = '00:00';
  1431.       this.loaded = false;
  1432.       if (this.playlist != undefined && swmpConfig.loop == 'false' && swmpConfig.autoplay == 'true') { //doesnt activate on loop
  1433.         this.nextMedia();
  1434.         return;
  1435.       }
  1436.     }
  1437.  
  1438.     this.player.addEventListener('loadedmetadata', (event) => {
  1439.       this.totalTimer.textContent = this.formatSeconds(this.player.duration);
  1440.     });
  1441.  
  1442.     this.player.addEventListener('loadeddata', (event) => {
  1443.       // Video is loaded and can be played
  1444.       this.loaded = true;
  1445.     });
  1446.  
  1447.     this.player.onplay = (event) => {
  1448.       this.loaded = true;
  1449.       this.player.classList.add('swmp-playing');
  1450.       this.playbutton.classList.add('swmp-playing');
  1451.       this.player.interval = window.setInterval((event) => {
  1452.         //console.log('time');
  1453.         this.player.timeupdate();
  1454.       }, 40);
  1455.     }
  1456.  
  1457.     this.player.onpause = (event) => {
  1458.       this.player.classList.remove('swmp-playing');
  1459.       this.playbutton.classList.remove('swmp-playing');
  1460.       clearInterval(this.player.interval);
  1461.     }
  1462.  
  1463.     this.player.onerror = (event) => {
  1464.       clearInterval(this.player.interval);
  1465.       var _error = this.player.error.message;
  1466.       console.log(_error);
  1467.       this.playerContainer.innerHTMl = _error;
  1468.     }
  1469.  
  1470.     this.player.timeupdate = (event) => {
  1471.       this.seeker.value = Math.floor(this.player.currentTime / this.player.duration * this.seeker.max);
  1472.       this.seeker.setAttribute("value", this.seeker.value);
  1473.       this.progress.value = this.seeker.value;
  1474.       this.progress.setAttribute("value", this.seeker.value);
  1475.       this.updateTimer();
  1476.     }
  1477.  
  1478.     this.seeker.oninput = (event) => {
  1479.       if (this.loaded != true) {
  1480.         console.log('Userscript: Video status must be loaded first');
  1481.         return;
  1482.       }
  1483.       try {
  1484.         //on mousedown temporary add a mute to avoid annoying seeking sounds?
  1485.         this.player.currentTime = (this.player.duration * this.seeker.value / this.seeker.max);
  1486.         this.progress.value = this.seeker.value;
  1487.         this.progress.setAttribute("value", this.seeker.value);
  1488.         this.updateTimer();
  1489.       } catch (e) {
  1490.         console.log('Userscript: ' + e);
  1491.       }
  1492.     }
  1493.  
  1494.     this.updateTimer = () => {
  1495.       this.currentTimer.textContent = this.formatSeconds(this.player.currentTime);
  1496.       //this.totalTimer.textContent = this.formatSeconds(this.player.duration);
  1497.     }
  1498.  
  1499.     this.seekBack = function() {
  1500.       var time = this.player.currentTime;
  1501.       var max = this.player.duration;
  1502.       if (time < 5) {
  1503.         time = 0;
  1504.       } else {
  1505.         time = time - 5;
  1506.       }
  1507.       this.player.currentTime = time;
  1508.       this.updateTimer();
  1509.  
  1510.       this.seeker.value = Math.floor(time / max * this.seeker.max);
  1511.       this.seeker.setAttribute('value', this.seeker.value);
  1512.       this.progress.value = this.seeker.value;
  1513.       this.progress.setAttribute('value', this.seeker.value);
  1514.     }
  1515.  
  1516.     this.seekForward = function() {
  1517.       var time = this.player.currentTime;
  1518.       var max = this.player.duration;
  1519.       if (time+5 >= max ) {
  1520.         time = max;
  1521.       } else {
  1522.         time = time + 5;
  1523.       }
  1524.       this.player.currentTime = time;
  1525.       this.updateTimer();
  1526.  
  1527.       this.seeker.value = Math.floor(time / max * this.seeker.max);
  1528.       this.seeker.setAttribute('value', this.seeker.value);
  1529.       this.progress.value = this.seeker.value;
  1530.       this.progress.setAttribute('value', this.seeker.value);
  1531.  
  1532.     }
  1533.  
  1534.     this.togglePlay = () => {
  1535.       try {
  1536.         if (this.player.paused ) {
  1537.           this.player.play();
  1538.         } else {
  1539.           this.player.pause();
  1540.         }
  1541.       } catch (e) {
  1542.           console.log('Userscript: ' + e)
  1543.       }
  1544.     }
  1545.  
  1546.     this.toggleMute = () => {
  1547.       if (this.player.muted) {
  1548.         this.volumeButton.classList.remove('swmp-mute');
  1549.         this.player.muted = false;
  1550.         this._volume = this.player.volume;
  1551.         this.volumeRange.setAttribute('value', this._volume * 100 );
  1552.         this.volumeRange.value = this._volume * 100;
  1553.         this.volumeProgress.setAttribute('value', this._volume * 100 );
  1554.         this.volumeProgress.value = this._volume * 100;
  1555.         swmpConfig.muted = 'false';
  1556.         localStorage.swmpMuted = 'false';
  1557.       } else {
  1558.         this.volumeButton.classList.add('swmp-mute');
  1559.         this.player.muted = true;
  1560.         this.volumeRange.setAttribute('value', 0 );
  1561.         this.volumeRange.value = 0;
  1562.         this.volumeProgress.setAttribute('value', 0 );
  1563.         this.volumeProgress.value = 0;
  1564.         swmpConfig.muted = 'true';
  1565.         localStorage.swmpMuted = 'true';
  1566.       }
  1567.       //console.log(this._volume);
  1568.     }
  1569.  
  1570.     this.updateVolume = (firstrun = false) => {
  1571.  
  1572.       this.volumeButton.classList.remove('swmp-mute');
  1573.  
  1574.       if (firstrun == true) {
  1575.         this.volumeRange.setAttribute('value', this.defaultVolume);
  1576.         this.volumeProgress.setAttribute('value', this.defaultVolume);
  1577.         this.volumeButton.classList.add('swmp-min');
  1578.         this._volume = this.defaultVolume;
  1579.  
  1580.       }
  1581.  
  1582.       if (this.player.muted) {
  1583.         this.player.muted = false;
  1584.       }
  1585.  
  1586.       this.volumeRange.setAttribute('value', this.volumeRange.value );
  1587.       this.volumeProgress.setAttribute('value', this.volumeRange.value );
  1588.       this.player.volume = parseFloat(this.volumeRange.value / 100);
  1589.       this._volume = this.player.volume;
  1590.  
  1591.       if (this._volume > 0.50) {
  1592.         this.volumeButton.classList.add('swmp-max');
  1593.         this.volumeButton.classList.remove('swmp-med');
  1594.         this.volumeButton.classList.remove('swmp-min');
  1595.       } else if (this._volume > 0.10) {
  1596.         this.volumeButton.classList.add('swmp-med');
  1597.         this.volumeButton.classList.remove('swmp-max');
  1598.         this.volumeButton.classList.remove('swmp-min');
  1599.       } else if (this._volume > 0.05) {
  1600.         this.volumeButton.classList.add('swmp-min');
  1601.         this.volumeButton.classList.remove('swmp-max');
  1602.         this.volumeButton.classList.remove('swmp-med');
  1603.       }
  1604.  
  1605.       //console.log(this._volume);
  1606.  
  1607.       localStorage.swmpVolume = this.volumeRange.value;
  1608.       swmpConfig.volume = this.volumeRange.value;
  1609.     }
  1610.  
  1611.     this.volumeRange.oninput = (event) => {
  1612.       this.updateVolume();
  1613.     }
  1614.  
  1615.     this.player.addEventListener('volumechange', this.updateVolume() );
  1616.     this.updateVolume(true); // First time Run
  1617.   }
  1618.  
  1619.   formatSeconds = (seconds) => {
  1620.     this._sec_num = parseInt(seconds, 10);
  1621.     this._hours   = Math.floor(this._sec_num / 3600);
  1622.     this._minutes = Math.floor(this._sec_num / 60) % 60;
  1623.     this._seconds = this._sec_num % 60;
  1624.  
  1625.       return [this._hours,this._minutes,this._seconds]
  1626.         .map(v => v < 10 ? "0" + v : v)
  1627.         .filter((v,i) => v !== "00" || i > 0)
  1628.         .join(":");
  1629.   }
  1630.  
  1631.   removeClassByPrefix(el, prefix) {
  1632.     let pattern = '(' + prefix + '(\\s|(-)?(\\w*)(\\s)?)).*?';
  1633.     var regEx = new RegExp(pattern, 'g');
  1634.     el.className = el.className.replace(regEx, '');
  1635.   }
  1636.  
  1637.   uuid() {
  1638.     // Source: https://www.w3resource.com/javascript-exercises/javascript-math-exercise-23.php
  1639.     var dt = new Date().getTime();
  1640.       var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  1641.           var r = (dt + Math.random()*16)%16 | 0;
  1642.           dt = Math.floor(dt/16);
  1643.           return (c=='x' ? r :(r&0x3|0x8)).toString(16);
  1644.       });
  1645.       return uuid;
  1646.   }
  1647.  
  1648.   getFileName(url) {
  1649.     return url.split('/').pop().split('#')[0].split('?')[0];
  1650.   }
  1651.  
  1652.   checkURL(url) {
  1653.  
  1654.     // if match youtube regex then do this and return
  1655.     var result = ytregex.exec(url);
  1656.     //console.log(ytregex);
  1657.     //console.log(url);
  1658.     //console.log(result);
  1659.     if (url.match(ytregex) ) {
  1660.       console.log('SWMP: YouTube');
  1661.       this.type = 'youtube';
  1662.       this.videoid = result[1];
  1663.       console.log('SWMP: Youtube ID: '+ this.videoid);
  1664.       return true;
  1665.     }
  1666.  
  1667.     console.log("SWMP: Video or Audio");
  1668.     // Check filename in URL for Type / MIME.
  1669.     this.fileExt = url.split(/[#?&]/)[0].split('.').pop().trim();
  1670.     this.fileExt = url.split(/[#?&]/).slice(-2)[0].split('.').pop().trim();
  1671.  
  1672.     console.log(this.fileExt);
  1673.     this.fileExt = this.fileExt.toLowerCase();
  1674.  
  1675.     switch (this.fileExt) {
  1676.         //VIDEO
  1677.       case 'avi':
  1678.         this.type = 'video';
  1679.         this.mime = 'video/x-msvideo';
  1680.         break;
  1681.       case 'mpeg':
  1682.         this.type = 'video';
  1683.         this.mime = 'video/mpeg';
  1684.         break;
  1685.       case 'mpg':
  1686.         this.type = 'video';
  1687.         this.mime = 'video/mpeg';
  1688.         break;
  1689.       case 'ogv':
  1690.         this.type = 'video';
  1691.         this.mime = 'video/ogg';
  1692.         break;
  1693.       case 'mp4':
  1694.         this.type = 'video';
  1695.         this.mime = 'video/mp4';
  1696.         break;
  1697.       case 'webm':
  1698.         this.type = 'video';
  1699.         this.mime = 'video/webm';
  1700.         break;
  1701.       case 'flv':
  1702.         this.type = 'video';
  1703.         this.mime = 'video/x-flv';
  1704.         break;
  1705.         //AUDIO
  1706.       case 'wav':
  1707.         this.type = 'audio';
  1708.         this.mime = 'audio/x-wav';
  1709.         break;
  1710.       case 'mp3':
  1711.         this.type = 'audio';
  1712.         this.mime = 'audio/mpeg';
  1713.         break;
  1714.       case 'm4a':
  1715.         this.type = 'audio';
  1716.         this.mime = 'audio/mp4';
  1717.         break;
  1718.       case 'mp2':
  1719.         this.type = 'audio';
  1720.         this.mime = 'audio/mpeg';
  1721.         break;
  1722.       case 'ogg':
  1723.         this.type = 'audio';
  1724.         this.mime = 'audio/ogg';
  1725.         break;
  1726.       case 'opus':
  1727.         this.type = 'audio';
  1728.         this.mime = 'audio/ogg';
  1729.         break;
  1730.       case 'flac':
  1731.         this.type = 'audio';
  1732.         this.mime = 'audio/flac';
  1733.         break;
  1734.       default:
  1735.         console.log('No matching ext/mime');
  1736.         console.log(this.fileExt);
  1737.         return false;
  1738.     }
  1739.     return true; //If valid
  1740.   }
  1741.  
  1742.   makeDraggable (element){
  1743.    var elm = this.windowTitlebar;
  1744.  
  1745.        element.style.position = 'fixed';
  1746.        element.style.top = swmpConfig.positionTop + 'px';
  1747.  
  1748.        if (swmpConfig.positionSide == 'right') {
  1749.          element.style.right = swmpConfig.positionOffset + 'px';
  1750.        } else {
  1751.          element.style.left = swmpConfig.positionOffset + 'px';
  1752.        }
  1753.  
  1754.     var isMouseDown = false,
  1755.         mouseX,
  1756.         mouseY,
  1757.         elmTop,
  1758.         elmLeft,
  1759.         diffX,
  1760.         newElmTop,
  1761.         newElmLeft,
  1762.         diffY,
  1763.         rightBarrier,
  1764.         bottomBarrier;
  1765.  
  1766.     function mouseDown(e) {
  1767.  
  1768.       if (e.which == '3') {
  1769.         return false; // Right click
  1770.       }
  1771.  
  1772.       element.focus();
  1773.  
  1774.       isMouseDown = true;
  1775.  
  1776.       mouseX = e.clientX;
  1777.       mouseY = e.clientY;
  1778.  
  1779.       elmTop = element.offsetTop;
  1780.       elmLeft = element.offsetLeft;
  1781.       diffX = mouseX - elmLeft;
  1782.       diffY = mouseY - elmTop;
  1783.  
  1784.     }
  1785.  
  1786.     function mouseUp() {
  1787.       isMouseDown = false;
  1788.  
  1789.       if (swmpConfig.positionSide == 'right') {
  1790.         var currentleft = parseInt(element.style.left, 10);
  1791.         element.style.left = "unset";
  1792.         element.style.right = document.documentElement.clientWidth - currentleft - element.offsetWidth + "px";
  1793.       }
  1794.  
  1795.     }
  1796.  
  1797.     function mouseMove(e) {
  1798.  
  1799.       if (!isMouseDown) return;
  1800.  
  1801.       if (e.which != '1') {
  1802.         isMouseDown = false;
  1803.       }
  1804.  
  1805.       if (element.classList.contains('swmp-maximized') ) return;
  1806.       //element.classList.remove('swmp-maximized');
  1807.  
  1808.       var newMouseX = e.clientX;
  1809.       var newMouseY = e.clientY;
  1810.  
  1811.       newElmTop = newMouseY - diffY;
  1812.       newElmLeft = newMouseX - diffX;
  1813.  
  1814.       rightBarrier = document.documentElement.clientWidth - element.offsetWidth;
  1815.       bottomBarrier = window.innerHeight - element.offsetHeight;
  1816.  
  1817.       if( ( newElmLeft < 0 ) || ( newElmTop < 0) || ( newElmLeft > rightBarrier  ) || (newElmTop > bottomBarrier) ) {
  1818.         if ( newElmLeft < 0 ) {
  1819.           newElmLeft = 0;
  1820.  
  1821.         }
  1822.  
  1823.         if ( newElmTop < 0) {
  1824.           newElmTop = 0;
  1825.  
  1826.         }
  1827.         if ( newElmLeft > rightBarrier  ) {
  1828.           newElmLeft = rightBarrier;
  1829.  
  1830.         }
  1831.         if (newElmTop > bottomBarrier) {
  1832.           newElmTop = bottomBarrier;
  1833.         }
  1834.       }
  1835.  
  1836.       element.style.top = newElmTop + "px";
  1837.       element.style.bottom = "unset";
  1838.  
  1839.       if (element.offsetTop < 0) {
  1840.         element.style.top = "0px";
  1841.       }
  1842.  
  1843.       if (swmpConfig.positionSide == 'right') {
  1844.         element.style.left = newElmLeft + "px";
  1845.         element.style.right = "unset";
  1846.       } else {
  1847.         element.style.left = newElmLeft + "px";
  1848.       }
  1849.  
  1850.     }
  1851.  
  1852.     document.addEventListener('mousemove', mouseMove);
  1853.     document.addEventListener('mouseup', mouseUp);
  1854.     elm.addEventListener('mousedown', mouseDown);
  1855.   }
  1856.  
  1857. }
  1858.  
  1859.   // Above this is SWMP class.
  1860.  
  1861.   // Below this is the event listener that checks if what you are clicking on is a video or audio that should be put into SWMP.
  1862.   // If you want to make site specific changes, either expand on it or just make a completely separate event listener below it.
  1863.  
  1864. document.addEventListener('click', (event) => {
  1865.   //console.log("Userscript - "+event.target.tagName);
  1866.  
  1867.     // If there are no links in sight, do nothing.
  1868.   if (event.target.tagName != 'A' && event.target.parentNode.tagName != 'A') {
  1869.     return;
  1870.   }
  1871.     // Lets figure out which one is the link. Wont normally chain As inside As so... Sometimes image may be inside span inside A so lets do 3x.
  1872.   var clicked = false;
  1873.   if (event.target.tagName == 'A') {
  1874.     clicked = event.target;
  1875.   } else if (event.target.parentNode.tagName == 'A') {
  1876.     clicked = event.target.parentNode;
  1877.   } else if (event.target.parentNode.parentNode.tagName == 'A') {
  1878.     clicked = event.target.parentNode.parentNode;
  1879.   }
  1880.  
  1881.   // Download attribute override
  1882.   if (swmpConfig.downloadAttribute == 'false' && clicked.hasAttribute('download')) {
  1883.     return;
  1884.   }
  1885.  
  1886.   function getVideo() {
  1887.     if (backendScript == '' || backendScript == null || backendScript == undefined || backendScript == 'fourchan') {
  1888.       return clicked.getAttribute('href');
  1889.     } else if (backendScript == 'vichan') {
  1890.       //console.log("Userscript - "+clicked.parentNode.querySelectorAll('p.fileinfo a') );
  1891.  
  1892.       var allthelinks = clicked.parentNode.querySelectorAll('p.fileinfo a'); // Prevent capturing the (Hide) link on some installs
  1893.       var matchinglink = '';
  1894.       for (var i = 0; i < allthelinks.length ; i++) {
  1895.         if (allthelinks[i].getAttribute('href').match(fileregex) ) {
  1896.           matchinglink = allthelinks[i];
  1897.         }
  1898.       }
  1899.  
  1900.       if (matchinglink == '') { // Kissu New UI (no thanks, but here it is anyways) <- This should also return normal href if not video?
  1901.         matchinglink = clicked;
  1902.       }
  1903.  
  1904.       //console.log("Userscript - "+matchinglink);
  1905.       return matchinglink.getAttribute('href');
  1906.  
  1907.     } else {
  1908.       return clicked.getAttribute('href');
  1909.     }
  1910.  
  1911.   }
  1912.  
  1913.   function getFileNameFromUrl(link) {
  1914.     if (backendScript == '' || backendScript == null || backendScript == undefined || backendScript == 'fourchan') {
  1915.       return link;
  1916.     } else if (backendScript == 'vichan') {
  1917.       return link;
  1918.     } else {
  1919.       return link;
  1920.     }
  1921.  
  1922.   }
  1923.  
  1924.   function getTitle(link) {
  1925.       if (backendScript == 'fourchan') {
  1926.         if (link.parentNode.querySelector('div.fileText a') != null) {
  1927.           if (link.parentNode.querySelector('div.fileText a').getAttribute('title') ) {
  1928.             return link.parentNode.querySelector('div.fileText a').getAttribute('title');
  1929.           } else {
  1930.             return link.parentNode.querySelector('div.fileText a').innerText;
  1931.           }
  1932.         } else {
  1933.           return link.getAttribute('href');
  1934.         }
  1935.       }
  1936.  
  1937.       if (backendScript == 'vichan') { // https://regex101.com/r/HivDYB/3
  1938.         let regex = new RegExp(`((?:[^\.|^\/|^\=|^\n|^\&])+(?:\.)(?:${swmpConfig.files}))(?:[^(\w)]|$)`, 'gmi'); // Tests for www.webmaster.com/test.webm domain too.
  1939.         var newlink = [...link.matchAll(regex)]; // Remove query behind *final filename* &title for old filename on vichan will stay.
  1940.         return newlink.slice(-1)[0][1]; // return last in array, grabs t= title for vichan player.php links.
  1941.       }
  1942.   }
  1943.  
  1944.   var clickedHref;
  1945.   var clickedFileName;
  1946.   var clickedTitle;
  1947.   var anythingmatch;
  1948.  
  1949.   function isYoutube(link) {
  1950.     var result = ytregex.exec(link);
  1951.  
  1952.     if (link.match(ytregex) != null ) {
  1953.       anythingmatch = true;
  1954.       console.log('Userscript - YouTube: '+result[1]); // Video ID
  1955.       clickedTitle = 'YouTube: ' + result[1];
  1956.       return true;
  1957.     } else {
  1958.       console.log('Userscript - Not YouTube');
  1959.       return false;
  1960.     }
  1961.   }
  1962.  
  1963.   // If youtube
  1964.  
  1965.   if (isYoutube(clicked.getAttribute('href') ) ) {
  1966.     console.log('Userscript - YouTube link clicked');
  1967.     clickedHref = clicked.getAttribute('href');
  1968.     //clickedTitle = 'Loading YouTube';
  1969.   }
  1970.  
  1971.   function isVideo(link) {
  1972.     var result = fileregex.exec(link);
  1973.  
  1974.     if (link.match(fileregex) != null) {
  1975.       anythingmatch = true;
  1976.       console.log('Userscript - Video/Audio match:' + result);
  1977.       return true;
  1978.     } else {
  1979.       console.log('Userscript - Not Video/Audio');
  1980.       return false;
  1981.     }
  1982.   }
  1983.  
  1984.   //get video links
  1985.   clickedHref = getVideo();
  1986.  
  1987.   if (isVideo(clickedHref) )  {
  1988.     //clickedHref = getVideo();
  1989.     clickedFileName = getFileNameFromUrl(clicked.getAttribute('href') );
  1990.     clickedTitle = false;
  1991.     if (backendScript == '' || backendScript == null || backendScript == undefined) {
  1992.       clickedTitle = decodeURI(clickedFileName); //Change with other scripts later if it doesn't already contain the title.
  1993.     } else if (backendScript == 'fourchan') {
  1994.       clickedTitle = decodeURI(getTitle(clicked) );
  1995.     } else if (backendScript == 'vichan') {
  1996.       clickedTitle = getTitle(decodeURI(clicked.getAttribute('href') ) );
  1997.     } else {
  1998.       clickedTitle = decodeURI(clickedFileName); //Change with other scripts later if it doesn't already contain the title.
  1999.     }
  2000.  
  2001.     console.log("Userscript - URL: " + clicked.getAttribute('href') );
  2002.     console.log("Userscript - Filename: " + clickedFileName );
  2003.     console.log("Userscript - Title: " + clickedTitle);
  2004.   }
  2005.  
  2006.   if (anythingmatch != true) {
  2007.     return false;
  2008.   } else {
  2009.     // If video audio or youtube matched, prevent other events.
  2010.     event.preventDefault();
  2011.     event.stopPropagation();
  2012.   }
  2013.  
  2014.   // Check if ctrl-shift-click and scan all links for yt/media, get titles,
  2015.   // strip duplicates, feed to playlist WITH title
  2016.   // Guess I'll need the ability to push urls+title to the player,
  2017.   // lets send ["url", "title"] also adapt title get on playlist to grab from playlist
  2018.  
  2019.   // Okay, time to load the player.
  2020.   var playerid = false;
  2021.  
  2022.   if (swmpConfig.allowMultiple != 'false')  {
  2023.     playerid = `play-swmp-${clicked.getAttribute('href')}`;
  2024.   } else {
  2025.     playerid = 'play-swmp';
  2026.   }
  2027.  
  2028.   if (typeof(document.getElementById(playerid)) != 'undefined' && document.getElementById(playerid) != null) {
  2029.     if (swmpConfig.allowMultiple != 'false')  {
  2030.       return false; //already exists, lets do nothing.
  2031.     } else {
  2032.       document.getElementById(playerid).remove();
  2033.       //already exists, lets get rid of it.
  2034.     }
  2035.   }
  2036.  
  2037.   //console.log(playerid+clickedHref+clickedTitle);
  2038.   let newembed = new swmp({
  2039.     id: playerid,
  2040.     url: clickedHref,
  2041.     title: clickedTitle
  2042.   });
  2043.  
  2044.   //console.log(backendScript);
  2045.   if (backendScript == 'jschan') { // Might be useful for inline.
  2046.     clicked.parentNode.parentNode.appendChild(newembed.container);
  2047.   } else {
  2048.     clicked.parentNode.appendChild(newembed.container);
  2049.     //clicked.parentNode.insertBefore(newembed.container, clicked.nextSibling);
  2050.   }
  2051.  
  2052.   // Give focus to player for keybinds.
  2053.   newembed.container.focus();
  2054.  
  2055. }, true); // Fuck other scripts.