☰

4chan \ IB Simple Web Media Player

Simple Web Media Player for 4chan and other imageboards.

当前为 2022-06-18 提交的版本，查看 最新版本。

  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        https://github.com/LabMember-001
  6. // @license      GPLv3
  7. // @version  1.2
  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://*.2kind.moe/*
  18. // @match https://*.1chan.net/*
  19. // @match https://*.otterchat.net/*
  20. // @match https://*.fatchan.org/*
  21. // @match https://*.7chan.org/*
  22. // @match https://*.420chan.org/*
  23. // @match https://*.anon.cafe/*
  24.  
  25. // @match https://*.archived.moe/*
  26. // @match https://*.desuarchive.org/*
  27. // @match https://*.4plebs.org/*
  28. // @match https://*.warosu.org/*
  29.  
  30. // ==/UserScript==
  31.  
  32. // Most of the sites above are to test scripts.
  33.  
  34. console.log('Loading IB Media Player.');
  35.  
  36. /* Repository:                                              */
  37. /* https://github.com/LabMember-001/Simple-Web-Media-Player */
  38. /* https://okabe.moe/projects/simplewebmediaplayer          */
  39. /*                                                          */
  40. /*                                                          */
  41. /*                                                          */
  42.  
  43. /*    == BOARD SUPPORT == 
  44. // Script will alter behavior on different imageboard backends
  45. // When adding custom board scripts, alter board behavior on bottom of the script. You'll need some knowledge on JS.
  46. // In most cases, simply adding an @match to the top of this script to turn it on for that domain will work 
  47. // as it captures all link presses and checks for webm.
  48. // If you want more compatability, check the issue tracker for existing requests and if there are none, you may request help.
  49. */
  50.  
  51. /*    == SCRIPT CONFIGURATION ==
  52. // To define a board as a precoded backend type (vichan, tinyib, lynxchan, etc) simply
  53. // add a regex for that domain in the swmpBoards category below these comments.
  54. */
  55.  
  56. /*    == TO DO ==
  57. //
  58. // High priority
  59. // - Resizing
  60. //
  61. // Medium Priority
  62. // - Loading poster for large files
  63. // - Make window move stop if you release mouseup outside of the screen.
  64. // - Automatic backend script detection.
  65. //
  66. // Low Priority
  67. // - Title length
  68. // - Fix support for archived.moe redirection urls.
  69. // - Fix the "&" from player.php in vichan title.
  70. // - Fix titles on some backends. (Mostly just vichan+4chan taking original filename right now).
  71. */
  72.  
  73. /*    == Current Script Support ==
  74. // Yotsuba (4chan)
  75. // Tinyboard/Vichan/Infinity
  76. // Fuuka
  77. // TinyIB
  78. // Wakaba
  79. // FoolFuuka (Not archived.moe's redirects, but 4plebs is fine).
  80. // Kusaba
  81. */
  82.  
  83. /*  == Script Specific Bugs == 
  84. // - Vichan shows original title when clicked on video thumb, but not link.
  85. // - Doesnt grab titles on Fuuka, TinyIB, Wakaba, FoolFuuka
  86. //
  87. */
  88.  
  89. /*
  90. //    == Missing Script Support ==
  91. // Some Kusaba sites have issues loading video when clicked on thumbnail. Links typically work. 7chan is fine.
  92. // Phutaba has a slight bug with videos which shows file information when hovering over player depending on which link you click.
  93. // Some of the bigger Lynxchan sites are very modified and have no thumbnail click support.
  94. // jschan and vichan will not properly work if not added to the board specific types. Should be fixable for me later.
  95. // InfinityNext does not work. Don't care.
  96. */
  97.  
  98.  // Get domain
  99. var currentUrl = window.location.href;
  100.  
  101.   // Board Types - probably temporary.
  102. var swmpBoards = {
  103.   fourchan: // For title support, otherwise works well without adding here.
  104.       ['https:\/\/*..*(4chan|4channel).org\/*'], 
  105.   vichan:  // For Title and thumbnail click support. Not great without due to thumbnails.
  106.       ['https:\/\/*..*(smuglo.li|smugloli.net)\/*', 
  107.        'https:\/\/*..*2kind.moe\/*',
  108.        'https:\/\/*..*kissu.moe\/*'], // Also works on new UI (lolnoty) as long as it's in here.
  109.   tinyib: // Title support not written, otherwise works well without adding here.
  110.       ['https:\/\/*..*1chan.net\/*'], 
  111.   wakaba: // Title support not written, otherwise works well without adding here.
  112.       ['https:\/\/*..*otterchat.net\/*'], 
  113.   lynxchan: // Title support not written, otherwise works well without adding here.
  114.       ['https:\/\/*..*anon.cafe\/*'], 
  115.   jschan: // Title support not written. Jschan installations *must* be added here to work properly.
  116.       ['https:\/\/*..*fatchan.org\/*'] 
  117. };
  118.  
  119.   // regex to check the backend script of current domain
  120. var backendScript = [];
  121. Object.keys(swmpBoards).forEach(script => {
  122.   swmpBoards[script].forEach(regex => {
  123.     if (currentUrl.match(regex)) {
  124.       backendScript = script;
  125.     }
  126.   });
  127. });
  128.  
  129. console.log(backendScript);
  130.  
  131.  
  132.   // This configuration variable can be overwritten wherever you want later 
  133.   // on as you wish or add your own site variables for user configuration.
  134. var swmpConfig = {
  135.   autoplay: 'true', // Autoplay media when launched by SWMP.
  136.   loop: 'true', // Loop media when launched by SWMP.
  137.   windowed: 'true',
  138.   positionTop: '100',
  139.   positionOffset: '100',
  140.   positionSide: 'right',
  141.   volume: 60,
  142.   muted: 'false',
  143.   theme: 'default', //Default theme
  144.   themes: //All themes
  145.     [
  146.       ['default', 'MPC Light'],
  147.       ['dark', 'MPC Dark'],
  148.       ['kurisu', 'Kurisumasu'],
  149.       ['bluemoon', 'Blue Moon'],
  150.       ['modernity', 'Modernity']
  151.     ],
  152.   files: 'avi|mpeg|mpg|ogv|mp4|webm|flv|wav|mp3|m4a|mp2|ogg|flac',
  153.   allowMultiple: 'false'
  154. };
  155.  
  156.   // Initialize site configuration. As of now it's on a per site basis and not using GM values, I like different designs.
  157. if (localStorage.swmpVolume == undefined) {
  158.   localStorage.swmpVolume = swmpConfig.volume;
  159. } else {
  160.   swmpConfig.volume = localStorage.swmpVolume;
  161. }
  162.  
  163. if (localStorage.swmpTheme == undefined) {
  164.   localStorage.swmpTheme = swmpConfig.theme;
  165. } else {
  166.   swmpConfig.theme = localStorage.swmpTheme;
  167. }
  168.  
  169. if (localStorage.swmpAutoplay == undefined) {
  170.   localStorage.swmpAutoplay = swmpConfig.autoplay;
  171. } else {
  172.   swmpConfig.autoplay = localStorage.swmpAutoplay;
  173. }
  174.  
  175. if (localStorage.swmpLoop == undefined) {
  176.   localStorage.swmpLoop = swmpConfig.loop;
  177. } else {
  178.   swmpConfig.loop = localStorage.swmpLoop;
  179. }
  180.  
  181. if (localStorage.swmpAllowMultiple == undefined) {
  182.   localStorage.swmpAllowMultiple = swmpConfig.allowMultiple;
  183. } else {
  184.   swmpConfig.allowMultiple = localStorage.swmpAllowMultiple;
  185. }
  186.  
  187. if (localStorage.swmpWindowed == undefined) {
  188.   localStorage.swmpWindowed = swmpConfig.windowed;
  189. } else {
  190.   swmpConfig.windowed = localStorage.swmpWindowed;
  191. }
  192.  
  193. if (localStorage.swmpMuted == undefined) {
  194.   localStorage.swmpMuted = swmpConfig.muted;
  195. } else {
  196.   swmpConfig.muted = localStorage.swmpMuted;
  197. }
  198.  
  199.  
  200. // Add style to head when DOM is loaded.
  201.  
  202. if (!document.getElementById('swmp-stylesheet')) { // Don't bother injecting style on demo page.
  203. var swmpStyle = document.createElement('style');
  204. swmpStyle.setAttribute('id', 'swmp-stylesheet');
  205. swmpStyle.innerHTML = `.swmp *{background:0 0;border:0;outline:0;margin:0;padding:0;line-height:1;height:unset;width:unset;font-family:-apple-system,BlinkMacSystemFont,URW Gothic,MS PGothic,Helvetica,sans-serif;font-size:11pt;text-indent:4px;letter-spacing:1px;color:var(--swmp-text-color)}div.swmp{--swmp-background:#e6e6e6;--swmp-container-border:#000;--swmp-container-box-shadow:none;--swmp-player-container-background:#000;--swmp-controls-background:var(--swmp-background);--swmp-text-color:#000;--swmp-button-background:var(--swmp-background);--swmp-button-mask-color:#000;--swmp-seek-height:30px;--swmp-seek-offset:10px;--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-range-thumb-border-right:#000;--swmp-range-thumb-border-bottom:#000;--swmp-btn-border-left:#fff;--swmp-btn-border-top:#fff;--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:#fff;--swmp-btn-border-bottom-active:#fff}div.swmp.swmp-theme-dark,div.swmp.swmp-theme-dark *{--swmp-background:#333;--swmp-container-border:#000;--swmp-controls-background:var(--swmp-background);--swmp-text-color:#888;--swmp-button-background:var(--swmp-background);--swmp-button-mask-color:#888;--swmp-seek-height:30px;--swmp-seek-offset:10px;--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-range-thumb-border-right:#000;--swmp-range-thumb-border-bottom:#000;--swmp-btn-border-left:#777;--swmp-btn-border-top:#777;--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:#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-theme-bluemoon,div.swmp.swmp-theme-bluemoon *{--swmp-background:#272d37;--swmp-text-color:#eee;--swmp-button-mask-color:#d3d3d3;--swmp-controls-background:#49525D;--swmp-btn-border-left:#DDDDDD;--swmp-btn-border-top:#DDDDDD;--swmp-range-thumb-border-top:#ddd;--swmp-range-thumb-color:#272d37}div.swmp.swmp-container{position:relative;display:inline-flex;flex-direction:column;padding:2px;background:var(--swmp-background);font-family:-apple-system,BlinkMacSystemFont,URW Gothic,MS PGothic,Helvetica,sans-serif;font-size:11pt;text-indent:4px;letter-spacing:1px;color:var(--swmp-text-color);border:1px solid var(--swmp-container-border);line-height:1;z-index:1;overflow:hidden;min-width:320px;width:auto;outline:0;box-shadow:var(--swmp-container-box-shadow)}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{display:none}div.swmp.swmp-minimized div.swmp-player-container{display:none}div.swmp.swmp-fullscreen div.swmp-player-container{display:block}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;line-height:1.5;margin-bottom:-2px}span.swmp.swmp-window.swmp-window-buttons-contain{display:flex;flex:0 1 auto}div.swmp .swmp-player-container{display:flex;height:100%;background:var(--swmp-player-container-background)}div.swmp.swmp-container.swmp-audio{display:block}div.swmp.swmp-container.swmp-fullscreen{background:#000;position:unset!important;width:100%;height:auto}div.swmp.swmp-container.swmp-fullscreen iframe,div.swmp.swmp-container.swmp-fullscreen video{width:100%;height:100%;max-width:100%;max-height:100%}div.swmp video{background:#000;max-width:500px;max-height:500px;width:auto;height:auto;margin:auto}div.swmp iframe{background:#000;min-width:420px;min-height:236px;max-width:500px;max-height:500px;width:auto;height:auto;margin:auto;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-fullscreen div.swmp.swmp-controls{position:absolute;opacity:0;transition:opacity .5s 1s ease-out}div.swmp.swmp-fullscreen div.swmp.swmp-controls:hover{opacity:1;position:absolute;transition:none}div.swmp.swmp-controls span.swmp-seek-container{display:flex;width:calc(100% - 6px);height:var(--swmp-seek-height);margin:auto}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}span.swmp input[type=range]::-webkit-slider-runnable-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 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 input[type=range]{background:0 0;border:0;outline:0}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:100%;height:6px;z-index:0;position:relative;background:var(--swmp-seek-background);bottom:-12px;border:none}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);color: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}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-left:2px;margin-right:2px;color:var(--swmp-button-mask-color);background:var(--swmp-button-background);border:1px solid;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: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}span.swmp.swmp-window button{height:20px;min-width:22px;width:22px}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-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:4px}`;
  206. document.head.appendChild(swmpStyle);
  207. }
  208.  
  209. var youtubeIsLoaded = false;
  210. var gmwindow;
  211. if (typeof GM_info != 'undefined') {
  212.   gmwindow = unsafeWindow;
  213. } else {
  214.   gmwindow = window;
  215. }
  216.  
  217. // SWMP Code
  218.  
  219. class swmp {
  220.  
  221.   constructor(obj) {
  222.     this.name = 'Simple Web Media Player';
  223.     
  224.     if (obj.id == undefined) {
  225.     this.id = this.uuid();
  226.     } else {
  227.       this.id = obj.id;
  228.     }
  229.  
  230.     this.type = obj.type; // "video" or "audio" player. Youtube too.
  231.     this.mime = obj.mime; // MIME type for source, Example: "video/webm". Feed to enable checking for file support (webm not supported by iOS)
  232.     this.url = obj.url; // File Location
  233.     this.poster = obj.poster; // Optional Video Preview for when autoplay is off.
  234.     this.autoplay = obj.autoplay; // Optional Autoplay
  235.     this.loop = obj.loop; // Optional Loop
  236.     this.windowed = obj.windowed; // Optional set false to disable windowed mode and place inline
  237.     
  238.     this.defaultVolume = parseInt(swmpConfig.volume);
  239.  
  240.     if (obj.url == undefined) {
  241.       console.log('No media given');
  242.       return false;
  243.     }
  244.  
  245.     if (obj.windowed == undefined) {
  246.       this.windowed = swmpConfig.windowed;
  247.     }
  248.  
  249.     if (obj.title == undefined) {
  250.       this.title = this.getFileName(obj.url);
  251.     } else {
  252.       this.title = obj.title; // If Applicable, assign from existing parameters on IB.
  253.     }
  254.  
  255.     // Check URL for Type and Mime, also sets mime+type based on fileextension in url
  256.     if (this.checkURL(this.url) == false) {
  257.       return false;
  258.     }
  259.  
  260.     // Create Container
  261.     this.container = document.createElement('div');
  262.     this.container.setAttribute('class', 'swmp swmp-container');
  263.     this.container.setAttribute('id', this.id);
  264.     this.container.setAttribute('tabindex', '0');
  265.  
  266.  
  267.     // Create Window Container
  268.     if (this.windowed != 'false') {
  269.       this.prepareWindow();
  270.     }
  271.  
  272.     // Prepare the media that's gonna play.
  273.  
  274.     if (this.type == 'video' || this.type == 'audio') {
  275.       // Check if browser can play formats, create audio or video tag and fill with source. 
  276.       this.preparePlayer();
  277.     } else if (this.type == 'youtube') {
  278.       // Load Youtube iframe.
  279.       if (this.prepareYoutube() == false) {
  280.         console.log("Error: YouTube");
  281.         return false;
  282.       }
  283.     }
  284.  
  285.     // Add Theme
  286.     if (swmpConfig.theme != undefined) {
  287.       this.container.classList.add(`swmp-theme-${swmpConfig.theme}`);
  288.     }
  289.  
  290.     if (this.type == 'video' || this.type == 'audio') {
  291.     // Create buttons
  292.       this.prepareSharedEvents();
  293.       this.prepareControls();
  294.       this.preparePlayerEvents();
  295.       this.prepareSettings();
  296.     } else if (this.type == 'youtube') {
  297.       //this.prepareSharedEvents();
  298.       //this.prepareYoutubeEvents();
  299.     }
  300.  
  301.   }
  302.  
  303.   prepareWindow() {
  304.     this.windowContainer = document.createElement('div');
  305.     this.windowContainer.setAttribute('class', 'swmp swmp-window swmp-window-container');
  306.     this.container.appendChild(this.windowContainer);
  307.  
  308.     // Create Title/WindowDragbar and put inside Window Container
  309.     this.windowTitlebar = document.createElement('span');
  310.     this.windowTitlebar.setAttribute('class', 'swmp swmp-window swmp-window-titlebar');
  311.  
  312.     this.windowTitle = document.createElement('span');
  313.     this.windowTitle.setAttribute('class', 'swmp swmp-window swmp-window-title');
  314.     if (this.title != undefined) {
  315.     this.windowTitle.textContent = this.title;
  316.     } else {
  317.     this.windowTitle.textContent = this.url;
  318.     }
  319.  
  320.     this.windowTitlebar.appendChild(this.windowTitle);
  321.     this.windowContainer.appendChild(this.windowTitlebar);
  322.  
  323.     // Create Window Buttons Container
  324.     this.windowButtonsContain = document.createElement('span');
  325.     this.windowButtonsContain.setAttribute('class', 'swmp swmp-window swmp-window-buttons-contain');
  326.     this.windowContainer.appendChild(this.windowButtonsContain);
  327.  
  328.     // Create Minimize Button (Video only)
  329.     if (this.type == 'video' || this.type == 'youtube') {
  330.       this.windowMinimize = document.createElement('button');
  331.       this.windowMinimize.setAttribute('class', 'swmp swmp-button swmp-window-minimize');
  332.       this.windowMinimize.innerHTML = '<span></span>';
  333.       this.windowMinimize.addEventListener('click', (event) => {
  334.         event.preventDefault();
  335.         if (this.container.classList.contains('swmp-minimized') ) {
  336.           this.container.classList.remove('swmp-minimized');
  337.         } else {
  338.           this.container.classList.add('swmp-minimized');
  339.         }
  340.       });
  341.       this.windowButtonsContain.appendChild(this.windowMinimize);
  342.     }
  343.  
  344.     // Create Close Button
  345.     this.windowClose = document.createElement('button');
  346.     this.windowClose.setAttribute('class', 'swmp swmp-button swmp-window-close');
  347.     this.windowClose.innerHTML = '<span></span>';
  348.     this.windowClose.addEventListener('click', (event) => {
  349.       event.preventDefault();
  350.       this.container.remove();
  351.     });
  352.     this.windowButtonsContain.appendChild(this.windowClose);
  353.  
  354.     // Window Event
  355.     this.makeDraggable(this.container);
  356.  
  357.  
  358.     // Disable Default Context Menu on Titlebar
  359.     this.windowTitlebar.addEventListener('contextmenu', function(evt) { 
  360.       evt.preventDefault();
  361.     }, false);
  362.     // Right Click Event
  363.     this.windowTitlebar.addEventListener('mousedown', (event) => {
  364.       event.preventDefault();
  365.       switch (event.which) {
  366.         case 3: //rightclick
  367.         this.openSettings();
  368.           break;  
  369.       }
  370.     });
  371.   }
  372.  
  373.   prepareControls() {
  374.     // Create and put Controls inside Container
  375.     this.controls = document.createElement('div');
  376.     this.controls.setAttribute('class', 'swmp swmp-controls');
  377.     this.container.appendChild(this.controls);
  378.  
  379.     // Disable Default Context Menu on Controls
  380.     this.controls.addEventListener('contextmenu', function(evt) { 
  381.       evt.preventDefault();
  382.     }, false);
  383.     // Right Click Event
  384.     this.controls.addEventListener('mousedown', (event) => {
  385.       switch (event.which) {
  386.         case 3: //rightclick
  387.         this.openSettings();
  388.           break;  
  389.       }
  390.     });
  391.  
  392.     // Create Progress/Seeker Container
  393.     this.seekContain = document.createElement('span');
  394.     this.seekContain.setAttribute('class', 'swmp swmp-seek-container');
  395.     //this.seekContain.textContent = 'seek-cntnr';
  396.     this.controls.appendChild(this.seekContain);
  397.  
  398.     // Create Progress Bar
  399.     this.progress = document.createElement('progress');
  400.     this.progress.setAttribute('value', '0');
  401.     this.progress.setAttribute('min', '0');
  402.     this.progress.setAttribute('max', '1000');
  403.     this.progress.setAttribute('step', '1');
  404.     this.progress.setAttribute('class', 'swmp swmp-progress');
  405.     this.seekContain.appendChild(this.progress);
  406.  
  407.     // Create Seeker Input
  408.     this.seeker = document.createElement('input');
  409.     this.seeker.setAttribute('type', 'range');
  410.     this.seeker.setAttribute('value', '0');
  411.     this.seeker.setAttribute('min', '0');
  412.     this.seeker.setAttribute('max', '1000');
  413.     this.seeker.setAttribute('step', '1');
  414.     this.seeker.setAttribute('class', 'swmp swmp-seeker');
  415.     this.seekContain.appendChild(this.seeker);
  416.  
  417.     // Create a Row Bottom Container
  418.     this.bottomRow = document.createElement('span');
  419.     this.bottomRow.setAttribute('class', 'swmp swmp-row-bottom');
  420.     this.controls.appendChild(this.bottomRow);
  421.  
  422.     // Create Buttons Container
  423.     this.buttonsContain = document.createElement('span');
  424.     this.buttonsContain.setAttribute('class', 'swmp swmp-buttons-container');
  425.     this.bottomRow.appendChild(this.buttonsContain);
  426.  
  427.     // Create Play/Pause Button and put inside Controls
  428.     this.playbutton = document.createElement('button');
  429.     this.playbutton.setAttribute('class', 'swmp swmp-button swmp-playbutton');
  430.     this.playbutton.innerHTML = "<span></span>"; // ◀
  431.     this.playbutton.addEventListener("click", event => {
  432.       event.preventDefault();
  433.  
  434.         if (this.type == 'video' || this.type == 'audio') {
  435.           if (this.player.paused ) {
  436.             this.player.play();
  437.           } else {
  438.             this.player.pause();
  439.           }
  440.         } else if (this.type == 'youtube') {
  441.           this.togglePlay();
  442.         }
  443.     });
  444.     this.buttonsContain.appendChild(this.playbutton);
  445.  
  446.     // Create a Stop/Reload Button and put inside Controls
  447.     this.stopbutton = document.createElement('button');
  448.     this.stopbutton.setAttribute('class', 'swmp swmp-button swmp-stopbutton');
  449.     this.stopbutton.innerHTML = "<span></span>"; // ■
  450.     this.stopbutton.addEventListener("click", event => {
  451.       event.preventDefault();
  452.  
  453.       if (this.type == 'video' || this.type == 'audio') {
  454.         this.player.pause();
  455.         this.seeker.value = 0;
  456.         this.seeker.setAttribute("value", 0);
  457.         this.progress.value = 0;
  458.         this.progress.setAttribute("value", 0);
  459.         this.player.currentTime = 0;
  460.         this.currentTimer.textContent = '00:00';
  461.       } else if (this.type == 'youtube') {
  462.         this.seeker.value = 0;
  463.         this.seeker.setAttribute("value", 0);
  464.         this.progress.value = 0;
  465.         this.progress.setAttribute("value", 0);
  466.         this.ytplayer.stopVideo();
  467.         this.currentTimer.textContent = '00:00';
  468.       }
  469.     });
  470.     this.buttonsContain.appendChild(this.stopbutton);
  471.  
  472.     // Create a Volume Container
  473.     this.volumeContain = document.createElement('span');
  474.     this.volumeContain.setAttribute('class', 'swmp swmp-volume-container');
  475.     this.bottomRow.appendChild(this.volumeContain);
  476.  
  477.     // Create a Volume Button and put inside Buttons Container
  478.     this.volumeButton = document.createElement('button');
  479.     this.volumeButton.setAttribute('class', 'swmp swmp-button swmp-volume');
  480.     this.volumeButton.innerHTML = "<span></span>";
  481.     this.volumeButton.addEventListener("click", event => {
  482.       event.preventDefault();
  483.       this.toggleMute();
  484.     });
  485.     this.buttonsContain.appendChild(this.volumeButton);
  486.  
  487.     // Create a Volume Progress and put inside Volume Container
  488.     this.volumeProgress = document.createElement('progress');
  489.     this.volumeProgress.setAttribute('value', this.defaultVolume);
  490.     this.volumeProgress.setAttribute('min', '0');
  491.     this.volumeProgress.setAttribute('max', '100');
  492.     this.volumeProgress.setAttribute('step', '1');
  493.     this.volumeProgress.setAttribute('class', 'swmp swmp-volume swmp-progress');
  494.     this.volumeContain.appendChild(this.volumeProgress);
  495.  
  496.     // Create a Volume Input and put inside Volume Container
  497.     this.volumeRange = document.createElement('input');
  498.     this.volumeRange.setAttribute('type', 'range');
  499.     this.volumeRange.setAttribute('value', this.defaultVolume);
  500.     this.volumeRange.setAttribute('min', '0');
  501.     this.volumeRange.setAttribute('max', '100');
  502.     this.volumeRange.setAttribute('step', '1');
  503.     this.volumeRange.setAttribute('class', 'swmp swmp-volume swmp-range');
  504.     this.volumeContain.appendChild(this.volumeRange);
  505.  
  506.     // Create a Timer Container and put inside Controls
  507.     this.timerContain = document.createElement('span');
  508.     this.timerContain.setAttribute('class', 'swmp swmp-timer-container');
  509.     this.bottomRow.appendChild(this.timerContain);
  510.  
  511.     // Create a timerCurrent and put inside Timer Container
  512.     this.currentTimer = document.createElement('span');
  513.     this.currentTimer.setAttribute('class', 'swmp swmp-time swmp-current');
  514.     this.currentTimer.textContent = '00:00';
  515.     this.timerContain.appendChild(this.currentTimer);
  516.  
  517.     // Add a separator between timer
  518.     this.timerSeperator = document.createElement('span');
  519.     this.timerSeperator.setAttribute('class', 'swmp swmp-time swmp-separator');
  520.     this.timerSeperator.textContent = '/';
  521.     this.timerContain.appendChild(this.timerSeperator);
  522.  
  523.     // Create a totalTimer and put inside Timer Container
  524.     this.totalTimer = document.createElement('span');
  525.     this.totalTimer.setAttribute('class', 'swmp swmp-time swmp-total');
  526.     this.totalTimer.textContent = '00:00';
  527.     this.timerContain.appendChild(this.totalTimer);
  528.  
  529.     // Create a Fullscreen Button and put inside Bottom Row Container
  530.     if (this.type == 'video' || this.type == 'youtube') {
  531.       this.fullscreenbutton = document.createElement('button');
  532.       this.fullscreenbutton.setAttribute('class', 'swmp swmp-button swmp-fullscreen');
  533.       this.fullscreenbutton.innerHTML = "<span></span>"; // ▣
  534.       this.fullscreenbutton.addEventListener("click", event => {
  535.         event.preventDefault();
  536.         this.fullscreen(this.container);
  537.       });
  538.       this.bottomRow.appendChild(this.fullscreenbutton);
  539.     }
  540.   }
  541.  
  542.   prepareSettings() {
  543.  
  544.     this.openSettings = () => {
  545.       // Settings Menu
  546.  
  547.       if (this.container.querySelector('.swmp-settings-container') != null) {
  548.         this.settingsContainer.remove();
  549.         return false; //Already open
  550.       }
  551.  
  552.       this.settingsContainer = document.createElement('div');
  553.       this.settingsContainer.setAttribute('class', 'swmp swmp-settings swmp-settings-container');
  554.       this.settingsContainer.innerHTML = 'Settings:';
  555.  
  556.  
  557.       this.br = document.createElement('br');
  558.       this.settingsContainer.appendChild(this.br);
  559.  
  560.       this.themeSelector = document.createElement('select');
  561.       this.themeSelector.setAttribute('class', 'swmp swmp-selector swmp-settings swmp-theme-selector');
  562.  
  563.       this.themes = '';
  564.       swmpConfig.themes.forEach(theme => {
  565.         if (localStorage.swmpTheme == theme[0]) {
  566.           this.themeSelector.value = theme[0];
  567.           this.themes += `<option value="${theme[0]}" selected>${theme[1]}</option>`;
  568.         } else {
  569.           this.themes += `<option value="${theme[0]}">${theme[1]}</option>`;
  570.         }
  571.       });
  572.       this.themeSelector.innerHTML = this.themes;
  573.  
  574.       this.themeSelector.onchange = (event) => {
  575.         if (this.themeSelector.value == '') {
  576.           return false;
  577.         } else {
  578.           this.removeClassByPrefix(this.container, 'swmp-theme-'); //regex remove [theme-*]
  579.           this.container.classList.add(`swmp-theme-${this.themeSelector.value}`);
  580.           swmpConfig.theme = this.themeSelector.value;
  581.           localStorage.swmpTheme = this.themeSelector.value;
  582.         }
  583.       };
  584.  
  585.       this.settingsContainer.appendChild(this.themeSelector);
  586.  
  587.       
  588.         // Autoplay Settings
  589.       this.autoplayLabel = document.createElement('label');
  590.       this.autoplayLabel.setAttribute('class', 'swmp swmp-settings swmp-label swmp-autoplay-label');
  591.       this.autoplayLabel.textContent = 'Autoplay';
  592.       this.autoplayCheck = document.createElement('input');
  593.       this.autoplayCheck.setAttribute('class', 'swmp swmp-settings swmp-input swmp-autoplay-input');
  594.       this.autoplayCheck.setAttribute('type', 'checkbox');
  595.       if (localStorage.swmpAutoplay == 'true') {
  596.         this.autoplayCheck.setAttribute('checked', 'checked');
  597.       }
  598.       this.autoplayCheck.addEventListener('change', (event) => {
  599.         if (this.autoplayCheck.checked == true) {
  600.           this.autoplayCheck.setAttribute('checked', 'checked');
  601.           localStorage.swmpAutoplay = 'true';
  602.           swmpConfig.autoplay = 'true';
  603.         } else {
  604.           this.autoplayCheck.removeAttribute('checked');
  605.           localStorage.swmpAutoplay = 'false';
  606.           swmpConfig.autoplay = 'false';
  607.         }
  608.       });
  609.       this.autoplayLabel.appendChild(this.autoplayCheck);
  610.       this.settingsContainer.appendChild(this.autoplayLabel);
  611.  
  612.         // Loop Settings
  613.       this.loopLabel = document.createElement('label');
  614.       this.loopLabel.setAttribute('class', 'swmp swmp-settings swmp-label swmp-loop-label');
  615.       this.loopLabel.textContent = 'Loop';
  616.       this.loopCheck = document.createElement('input');
  617.       this.loopCheck.setAttribute('class', 'swmp swmp-settings swmp-input swmp-loop-input');
  618.       this.loopCheck.setAttribute('type', 'checkbox');
  619.       if (localStorage.swmpLoop == 'true') {
  620.         this.loopCheck.setAttribute('checked', 'checked');
  621.       }
  622.       this.loopCheck.addEventListener('change', (event) => {
  623.         if (this.loopCheck.checked == true) {
  624.           this.loopCheck.setAttribute('checked', 'checked');
  625.           if (this.type == 'video' || this.type == 'audio') {
  626.             this.player.setAttribute('loop', 'true');
  627.           } else if (this.type == 'youtube') {
  628.             // Youtube Loop
  629.           }
  630.           localStorage.swmpLoop = 'true';
  631.           swmpConfig.loop = 'true';
  632.         } else {
  633.           this.loopCheck.removeAttribute('checked');
  634.           if (this.type == 'video' || this.type == 'audio') {
  635.             this.player.removeAttribute('loop');
  636.           } else if (this.type == 'youtube') {
  637.             // Youtube Loop
  638.           }
  639.           localStorage.swmpLoop = 'false';
  640.           swmpConfig.loop = 'false';
  641.         }
  642.       });
  643.       this.loopLabel.appendChild(this.loopCheck);
  644.       this.settingsContainer.appendChild(this.loopLabel);
  645.       
  646.         // Multiple Players Settings
  647.       this.multiLabel = document.createElement('label');
  648.       this.multiLabel.setAttribute('class', 'swmp swmp-settings swmp-label swmp-multi-label');
  649.       this.multiLabel.textContent = 'Multi';
  650.       this.multiCheck = document.createElement('input');
  651.       this.multiCheck.setAttribute('class', 'swmp swmp-settings swmp-input swmp-multi-input');
  652.       this.multiCheck.setAttribute('type', 'checkbox');
  653.       if (localStorage.swmpAllowMultiple == 'true') {
  654.         this.multiCheck.setAttribute('checked', 'checked');
  655.       }
  656.       this.multiCheck.addEventListener('change', (event) => {
  657.         if (this.multiCheck.checked == true) {
  658.           this.multiCheck.setAttribute('checked', 'checked');
  659.           localStorage.swmpAllowMultiple = 'true';
  660.           swmpConfig.allowMultiple = 'true';
  661.         } else {
  662.           this.multiCheck.removeAttribute('checked');
  663.           localStorage.swmpAllowMultiple = 'false';
  664.           swmpConfig.allowMultiple = 'false';
  665.         }
  666.       });
  667.       this.multiLabel.appendChild(this.multiCheck);
  668.       this.settingsContainer.appendChild(this.multiLabel);
  669.  
  670.  
  671.       this.container.appendChild(this.settingsContainer);
  672.  
  673.     };
  674.   }
  675.  
  676.   preparePlayer() {
  677.     // Create Player HTML5 Video or Audio format.
  678.     if (this.type == 'video') {
  679.       this.container.classList.add('swmp-video');
  680.       this.player = document.createElement('video');
  681.       this.player.setAttribute('class', 'swmp swmp-video swmp-player');
  682.       if (this.poster != false && this.poster != undefined) {
  683.         this.player.setAttribute('poster', this.poster);
  684.       }
  685.     } else if (this.type == 'audio') {
  686.       this.container.classList.add('swmp-audio');
  687.       this.player = document.createElement('audio');
  688.       this.player.setAttribute('class', 'swmp swmp-audio swmp-player');
  689.     } else {
  690.       console.log(`SWMP Error: invalid type of ${this.type}.`);
  691.       return false;
  692.     }
  693.  
  694.     // Check Format Support
  695.     if (this.mime != undefined) {
  696.       if (this.player.canPlayType(this.mime) == '') {
  697.         this.closeError = document.createElement('span');
  698.         this.closeError.innerHTML = `Your browser can't play this format: ${this.mime}`;
  699.         this.container.addEventListener('click', (event) => {
  700.           this.container.remove();
  701.         });
  702.         this.container.appendChild(this.closeError);
  703.         return false;
  704.       }
  705.     }
  706.  
  707.     // Preload metadata
  708.     this.player.setAttribute('preload', 'metadata');
  709.  
  710.     
  711.     // Create Player Container and Put inside Container
  712.     this.playerContainer = document.createElement('div');
  713.     this.playerContainer.setAttribute('class', 'swmp swmp-player-container');
  714.     this.container.appendChild(this.playerContainer);
  715.     
  716.     // Put Player inside Video Container
  717.     this.playerContainer.appendChild(this.player);
  718.  
  719.     // Create and put Source inside Player
  720.     this.source = document.createElement('source');
  721.     this.source.setAttribute('src', this.url);
  722.     if (this.mime != undefined) {
  723.       this.source.setAttribute('type', this.mime);
  724.     }
  725.     this.player.appendChild(this.source);
  726.  
  727.     // Is Autoplay?
  728.     if ( (swmpConfig.autoplay == true || swmpConfig.autoplay == 'true') && this.autoplay != false) {
  729.       this.player.setAttribute('autoplay', true);
  730.     }
  731.  
  732.     // Is Loop?
  733.     if ( (swmpConfig.loop == true || swmpConfig.loop == 'true') && this.loop != false) {
  734.       this.player.setAttribute('loop', true);
  735.     }
  736.   }
  737.  
  738.   prepareYoutube() {
  739.  
  740.     console.log('SWMP: prepareYoutube() ');
  741.  
  742.     if (youtubeIsLoaded == false) {
  743.       // Include YouTube iframe API if not already added:
  744.       if (!document.getElementById('swmp-youtube-api')) {
  745.         console.log("SWMP: Loading YouTube API");
  746.         var tag = document.createElement('script');
  747.         tag.src = "https://www.youtube.com/iframe_api";
  748.         tag.setAttribute('id', 'swmp-youtube-api');
  749.         var firstScriptTag = document.getElementsByTagName('script')[0];
  750.         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  751.       }
  752.       
  753.       gmwindow.onYouTubeIframeAPIReady = (event) => {
  754.         youtubeIsLoaded = true;
  755.         console.log('SWMP: Firing YouTube Ready Event from inside PrepareYouTube()');
  756.         this.makeYoutube();
  757.       };
  758.       
  759.       
  760.     } else {
  761.       // API Already loaded, just make video.
  762.       console.log('SWMP: YT API Already loaded, make vid');
  763.       this.makeYoutube();
  764.     }
  765.   }
  766.  
  767.   makeYoutube() {
  768.     // Make new player
  769.     console.log('SWMP: makeYoutube()');
  770.     this.playerfirstrun = true;
  771.     var self = this;
  772.     this.onPlayerReady = (event) => {
  773.       console.log('SWMP Youtube: onPlayerReady()');
  774.       if (this.playerfirstrun == true) {
  775.         this.playerfirstrun = false;
  776.         this.playerContainer.appendChild(this.ytplayer.getIframe() );
  777.         this.windowTitle.textContent = this.ytplayer.getVideoData().title;
  778.         this.totalTimer.textContent = this.formatSeconds(this.ytplayer.getDuration() );
  779.         this.ytplayer.getIframe().style.display = 'inherit';
  780.  
  781.         this.ytplayer.setVolume(this.defaultVolume);
  782.         this._volume = this.defaultVolume;
  783.         /*if (swmpConfig.muted == 'true') {
  784.           this.ytplayer.mute();
  785.           this.volumeButton.classList.add('swmp-mute');
  786.         } else {
  787.           this.ytplayer.unMute();
  788.         }*/
  789.         this.ytplayer.unMute();
  790.  
  791.         if (this.autoplay == 'true') {
  792.           this.ytplayer.playVideo();
  793.           this.playbutton.classList.add('swmp-playing');
  794.         }
  795.  
  796.  
  797.       }
  798.  
  799.       window.addEventListener('message', function(event) {
  800.         if (event.source === self.ytplayer.getIframe().contentWindow) {
  801.             var data = JSON.parse(event.data);
  802.             //console.log(data);
  803.  
  804.               // Dispatch Volume and Mute Event -- These are sent together by iframe.
  805.             if (data.event === "infoDelivery" && data.info && data.info.volume) {
  806.               //console.log(data.info.volume);
  807.               //console.log(data.info.muted);
  808.               if (data.info.volume != self._volume) {
  809.                 //console.log(data.info.volume);
  810.                 self.updateVolume();
  811.               }
  812.             }
  813.  
  814.               // Dispatch on Time Event
  815.             if (data.event === "infoDelivery" && data.info && data.info.currentTime) {
  816.               //console.log(data.info.currentTime);
  817.               self.currentTimer.textContent = self.formatSeconds(data.info.currentTime);
  818.             }
  819.  
  820.               // Dispatch on Player state event
  821.             if (data.event === "infoDelivery" && data.info && data.info.playerState) {
  822.               //console.log(data.info.playerState);
  823.               self.updatePlay();
  824.               self.updateVolume();
  825.             }
  826.         }
  827.       });
  828.  
  829.     }
  830.  
  831.     this.videogenerate = document.createElement('div');
  832.     this.videogenerate.style.display = 'none';
  833.     this.videogenerate.setAttribute('id', `ytplayer-${this.id}`);
  834.     document.body.appendChild(this.videogenerate);
  835.     
  836.     this.ytplayer = new gmwindow.YT.Player(`ytplayer-${this.id}`, {
  837.       height: '1080',
  838.       width: '1920', // Allows quality to increase to 1080p. Can't be forced by API, need fast internet.
  839.       videoId: this.videoid,
  840.       playerVars: {
  841.         'playsinline': 1,
  842.         'autoplay': 1,
  843.         'loop': 1,
  844.         //'origin': window.location.href,
  845.         'rel': 0,
  846.         'modestbranding': 1,
  847.         'controls': 0
  848.       },
  849.       events: {
  850.         'onReady': this.onPlayerReady
  851.       }
  852.     });
  853.     
  854.     console.log(this.ytplayer);
  855.  
  856.     this.playerContainer = document.createElement('div');
  857.     this.playerContainer.setAttribute('class', 'swmp-player-container');
  858.  
  859.     this.container.appendChild(this.playerContainer);
  860.  
  861.     this.prepareSettings();
  862.     this.prepareControls();
  863.     this.prepareSharedEvents();
  864.     this.prepareYoutubeEvents();
  865.  
  866.   }
  867.  
  868.  
  869.   prepareYoutubeEvents() {
  870.  
  871.     this.togglePlay = function() {
  872.       if (this.ytplayer.getPlayerState() == 1) { // Playing
  873.         this.ytplayer.pauseVideo();
  874.       } else { // -1 unstarted, 0 ended, 1 playing, 2 Pause, 3 buffering, 5 video cued 
  875.         this.ytplayer.playVideo();
  876.       }
  877.     };
  878.  
  879.     var timeInterval;
  880.     this.updatePlay = () => {
  881.  
  882.       this._playerState = this.ytplayer.getPlayerState();
  883.  
  884.       if (this._playerState == 1) { // Playing
  885.         this.playbutton.classList.add('swmp-playing');
  886.         this.updateTime();
  887.  
  888.         var self = this;
  889.         var timeInterval = setInterval(function() {
  890.           self._playerState = self.ytplayer.getPlayerState();
  891.           if (self._playerState == 1) {
  892.             self.updateTime();
  893.           }
  894.           if (self._playerState == 0)  { //Ended
  895.             self.updatePlay();
  896.           }
  897.           //console.log('time'); //still bugged on close unlike the other interval 
  898.           if (self._playerState != 1 || self.container == null || self.container == undefined || self.container == false) {
  899.             clearInterval(timeInterval);
  900.             timeInterval = null;
  901.           }
  902.         }, 80);
  903.  
  904.       } else if (this._playerState == 0 || this._playerState == -1 || this._playerState == 2 )  { // -1 unstarted, 0 ended, 1 playing, 2 Pause, 3 buffering, 5 video cued 
  905.         this.playbutton.classList.remove('swmp-playing');
  906.       }
  907.  
  908.       if (this._playerState == 0 || this._playerState == -1 ) {
  909.         this.progress.value = 0;
  910.         this.progress.setAttribute('value', 0);
  911.         this.seeker.value = 0;
  912.         this.seeker.setAttribute('value', 0);
  913.       }
  914.  
  915.       if (this._playerState == 0) {
  916.         console.log('uwah video loop');
  917.         if (swmpConfig.loop == 'true') {
  918.           this.ytplayer.seekTo(0);
  919.           this.ytplayer.playVideo();
  920.         }
  921.       }
  922.  
  923.     };
  924.  
  925.     this.seeker.oninput = (event) => {
  926.       //on mousedown temporary add a mute to avoid annoying seeking sounds?
  927.       this.ytplayer.seekTo(Math.floor(this.ytplayer.getDuration() * this.seeker.value / this.seeker.max) );
  928.       this.progress.value = this.seeker.value;
  929.       this.progress.setAttribute('value', this.seeker.value);
  930.       this.updatePlay();
  931.     };
  932.  
  933.     this.updateTime = () => {
  934.       this.seeker.value = Math.floor(this.ytplayer.getCurrentTime() / this.ytplayer.getDuration() * this.seeker.max);
  935.       this.seeker.setAttribute('value', this.seeker.value);
  936.       this.progress.value = this.seeker.value;
  937.       this.progress.setAttribute('value', this.seeker.value);
  938.     };
  939.  
  940.  
  941.     this.toggleMute = () => {
  942.  
  943.       if (this.ytplayer.isMuted() == true ) {
  944.         this.volumeButton.classList.remove('swmp-mute');
  945.         this._volume = this.ytplayer.getVolume() ;
  946.         this.ytplayer.unMute();
  947.         this.ytplayer.setVolume(this._volume);
  948.         this.volumeRange.setAttribute('value', this._volume );
  949.         this.volumeRange.value = this._volume;
  950.         this.volumeProgress.setAttribute('value', this._volume );
  951.         this.volumeProgress.value = this._volume;
  952.         swmpConfig.muted = 'false';
  953.         localStorage.swmpMuted = 'false';
  954.       } else {
  955.         this.volumeButton.classList.add('swmp-mute');
  956.         this.ytplayer.mute();
  957.         this.volumeRange.setAttribute('value', 0 );
  958.         this.volumeRange.value = 0;
  959.         this.volumeProgress.setAttribute('value', 0 );
  960.         this.volumeProgress.value = 0;
  961.         swmpConfig.muted = 'true';
  962.         localStorage.swmpMuted = 'true';
  963.       }
  964.     };
  965.  
  966.     this.updateVolume = (firstrun = false) => {
  967.       this.volumeButton.classList.remove('swmp-mute');
  968.  
  969.       if (firstrun == true) {
  970.         this.volumeRange.setAttribute('value', this.defaultVolume);
  971.         this.volumeProgress.setAttribute('value', this.defaultVolume);
  972.         this._volume = this.defaultVolume;
  973.         this.volumeButton.classList.add('swmp-min');
  974.       }
  975.  
  976.       this._volume = this.ytplayer.getVolume();
  977.  
  978.       this.volumeRange.setAttribute('value', this.volumeRange.value );
  979.       this.volumeProgress.setAttribute('value', this.volumeRange.value );
  980.       this.ytplayer.setVolume(this.volumeRange.value);
  981.  
  982.       if (this._volume > 50) {
  983.         this.volumeButton.classList.add('swmp-max');
  984.         this.volumeButton.classList.remove('swmp-med');
  985.         this.volumeButton.classList.remove('swmp-min');
  986.       } else if (this._volume > 10) {
  987.         this.volumeButton.classList.add('swmp-med');
  988.         this.volumeButton.classList.remove('swmp-max');
  989.         this.volumeButton.classList.remove('swmp-min');
  990.       } else if (this._volume > 5) {
  991.         this.volumeButton.classList.add('swmp-min');
  992.         this.volumeButton.classList.remove('swmp-max');
  993.         this.volumeButton.classList.remove('swmp-med');
  994.       }
  995.  
  996.       localStorage.swmpVolume = this.volumeRange.value;
  997.       swmpConfig.volume = this.volumeRange.value;
  998.     };
  999.  
  1000.     this.volumeRange.oninput = (event) => {
  1001.       this.updateVolume();
  1002.     };
  1003.    
  1004.  
  1005.   }
  1006.  
  1007.  
  1008.  
  1009.   prepareSharedEvents() {
  1010.  
  1011.     this.playerContainer.addEventListener('click', event => {
  1012.       this.togglePlay();
  1013.     });
  1014.  
  1015.     this.playerContainer.addEventListener('dblclick', event => {
  1016.       this.fullscreen(this.container);
  1017.     });
  1018.  
  1019.     this.container.addEventListener('keydown', event => {
  1020.       if (event.repeat) { return; } // Don't spam
  1021.  
  1022.       switch(event.key) { 
  1023.         case ' ': //Space
  1024.           this.togglePlay();
  1025.           break;
  1026.         case 'f':
  1027.           this.fullscreen(this.container);
  1028.           break;
  1029.         case 'm':
  1030.           this.toggleMute();
  1031.           break;
  1032.         case 'x':
  1033.           this.container.remove();
  1034.           break;
  1035.         default:
  1036.           return;
  1037.       }
  1038.  
  1039.       event.preventDefault();
  1040.  
  1041.     }, true);
  1042.  
  1043.     this.container.addEventListener('fullscreenchange', event => {
  1044.       const fullscreenElement =
  1045.       document.fullscreenElement ||
  1046.       document.mozFullScreenElement ||
  1047.       document.webkitFullscreenElement ||
  1048.       document.msFullscreenElement;
  1049.  
  1050.       if (!fullscreenElement) {
  1051.         this.container.classList.remove('swmp-fullscreen');
  1052.       } else {
  1053.         this.container.classList.add('swmp-fullscreen');
  1054.       }
  1055.     });
  1056.  
  1057.     this.fullscreen = (element) => {
  1058.       const fullscreenElement =
  1059.       document.fullscreenElement ||
  1060.       document.mozFullScreenElement ||
  1061.       document.webkitFullscreenElement ||
  1062.       document.msFullscreenElement;
  1063.  
  1064.       if (fullscreenElement) {
  1065.         if (document.exitFullscreen) {
  1066.           document.exitFullscreen();
  1067.         } else if (document.mozCancelFullScreen) {
  1068.           document.mozCancelFullScreen();
  1069.         } else if (document.webkitExitFullscreen) {
  1070.           document.webkitExitFullscreen(); //Safari sucks
  1071.         } else if (document.msExitFullscreen) {
  1072.           document.msExitFullscreen();
  1073.         }
  1074.         this.container.classList.remove('swmp-fullscreen');
  1075.       } else {
  1076.         if (element.requestFullscreen) {
  1077.           element.requestFullscreen();
  1078.         } else if (element.mozRequestFullScreen) {
  1079.           element.mozRequestFullScreen();
  1080.         } else if (element.webkitRequestFullscreen) {
  1081.           element.webkitRequestFullscreen();
  1082.         } else if (element.msRequestFullscreen) {
  1083.           element.msRequestFullscreen();
  1084.         }
  1085.         this.container.classList.add('swmp-fullscreen');
  1086.       }
  1087.     };
  1088.   }
  1089.  
  1090.   preparePlayerEvents() {
  1091.  
  1092.  
  1093.     this.player.onended = (event) => {
  1094.       this.player.classList.remove('swmp-playing');
  1095.       this.playbutton.classList.remove('swmp-playing');
  1096.       this.seeker.value = 0;
  1097.       this.progress.value = 0;
  1098.       clearInterval(this.player.interval);
  1099.       this.currentTimer.textContent = '00:00';
  1100.     };
  1101.  
  1102.     this.player.addEventListener('loadedmetadata', (event) => {
  1103.       this.totalTimer.textContent = this.formatSeconds(this.player.duration);
  1104.     });
  1105.  
  1106.  
  1107.     this.player.onplay = (event) => {
  1108.       this.player.classList.add('swmp-playing');
  1109.       this.playbutton.classList.add('swmp-playing');
  1110.       var self = this;
  1111.       this.player.interval = window.setInterval(function(event) {
  1112.         self.player.timeupdate();
  1113.       }, 40);
  1114.     };
  1115.  
  1116.     this.player.onpause = (event) => {
  1117.       this.player.classList.remove('swmp-playing');
  1118.       this.playbutton.classList.remove('swmp-playing');
  1119.       clearInterval(this.player.interval);
  1120.     };
  1121.  
  1122.     this.player.onerror = (event) => {
  1123.       clearInterval(this.player.interval);
  1124.       var _error = this.player.error.message;
  1125.       this.container.innerHTMl = _error;
  1126.     };
  1127.  
  1128.     this.player.timeupdate = (event) => {
  1129.       this.seeker.value = Math.floor(this.player.currentTime / this.player.duration * 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.       this.updateTimer();
  1134.     };
  1135.  
  1136.     this.seeker.oninput = (event) => {
  1137.       //on mousedown temporary add a mute to avoid annoying seeking sounds?
  1138.       this.player.currentTime = Math.floor(this.player.duration * this.seeker.value / this.seeker.max);
  1139.       this.progress.value = this.seeker.value;
  1140.       this.progress.setAttribute("value", this.seeker.value);
  1141.       this.updateTimer();
  1142.     };
  1143.  
  1144.     this.updateTimer = () => {
  1145.       this.currentTimer.textContent = this.formatSeconds(this.player.currentTime);
  1146.       //this.totalTimer.textContent = this.formatSeconds(this.player.duration);
  1147.     };
  1148.  
  1149.     this.togglePlay = () => {
  1150.       if (this.player.paused ) {
  1151.         this.player.play();
  1152.       } else {
  1153.         this.player.pause();
  1154.       }     
  1155.     };
  1156.  
  1157.     this.toggleMute = () => {
  1158.       if (this.player.muted) {
  1159.         this.volumeButton.classList.remove('swmp-mute');
  1160.         this.player.muted = false;
  1161.         this._volume = this.player.volume;
  1162.         this.volumeRange.setAttribute('value', this._volume * 100 );
  1163.         this.volumeRange.value = this._volume * 100;
  1164.         this.volumeProgress.setAttribute('value', this._volume * 100 );
  1165.         this.volumeProgress.value = this._volume * 100;
  1166.         swmpConfig.muted = 'false';
  1167.         localStorage.swmpMuted = 'false';
  1168.       } else {
  1169.         this.volumeButton.classList.add('swmp-mute');
  1170.         this.player.muted = true;
  1171.         this.volumeRange.setAttribute('value', 0 );
  1172.         this.volumeRange.value = 0;
  1173.         this.volumeProgress.setAttribute('value', 0 );
  1174.         this.volumeProgress.value = 0;
  1175.         swmpConfig.muted = 'true';
  1176.         localStorage.swmpMuted = 'true';
  1177.       }
  1178.       //console.log(this._volume);
  1179.     };
  1180.  
  1181.     this.updateVolume = (firstrun = false) => {
  1182.  
  1183.       this.volumeButton.classList.remove('swmp-mute');
  1184.  
  1185.       if (firstrun == true) {
  1186.         this.volumeRange.setAttribute('value', this.defaultVolume);
  1187.         this.volumeProgress.setAttribute('value', this.defaultVolume);
  1188.         this.volumeButton.classList.add('swmp-min');
  1189.         this._volume = this.defaultVolume;
  1190.  
  1191.       }
  1192.  
  1193.       if (this.player.muted) {
  1194.         this.player.muted = false;
  1195.       }
  1196.  
  1197.       this.volumeRange.setAttribute('value', this.volumeRange.value );
  1198.       this.volumeProgress.setAttribute('value', this.volumeRange.value );
  1199.       this.player.volume = parseFloat(this.volumeRange.value / 100);
  1200.       this._volume = this.player.volume;
  1201.  
  1202.       if (this._volume > 0.50) {
  1203.         this.volumeButton.classList.add('swmp-max');
  1204.         this.volumeButton.classList.remove('swmp-med');
  1205.         this.volumeButton.classList.remove('swmp-min');
  1206.       } else if (this._volume > 0.10) {
  1207.         this.volumeButton.classList.add('swmp-med');
  1208.         this.volumeButton.classList.remove('swmp-max');
  1209.         this.volumeButton.classList.remove('swmp-min');
  1210.       } else if (this._volume > 0.05) {
  1211.         this.volumeButton.classList.add('swmp-min');
  1212.         this.volumeButton.classList.remove('swmp-max');
  1213.         this.volumeButton.classList.remove('swmp-med');
  1214.       }
  1215.  
  1216.       //console.log(this._volume);
  1217.  
  1218.       localStorage.swmpVolume = this.volumeRange.value;
  1219.       swmpConfig.volume = this.volumeRange.value;
  1220.     };
  1221.  
  1222.     this.volumeRange.oninput = (event) => {
  1223.       this.updateVolume();
  1224.     };
  1225.  
  1226.     this.player.addEventListener('volumechange', this.updateVolume() );
  1227.     this.updateVolume(true); // First time Run
  1228.   }
  1229.  
  1230.   formatSeconds = (seconds) => {
  1231.     this._sec_num = parseInt(seconds, 10);
  1232.     this._hours   = Math.floor(this._sec_num / 3600);
  1233.     this._minutes = Math.floor(this._sec_num / 60) % 60;
  1234.     this._seconds = this._sec_num % 60;
  1235.  
  1236.       return [this._hours,this._minutes,this._seconds]
  1237.         .map(v => v < 10 ? "0" + v : v)
  1238.         .filter((v,i) => v !== "00" || i > 0)
  1239.         .join(":");
  1240.   }
  1241.  
  1242.   removeClassByPrefix(el, prefix) {
  1243.     let pattern = '(' + prefix + '(\\s|(-)?(\\w*)(\\s)?)).*?';
  1244.     var regEx = new RegExp(pattern, 'g');
  1245.     el.className = el.className.replace(regEx, '');
  1246.   }
  1247.  
  1248.   uuid() {
  1249.     // Source: https://www.w3resource.com/javascript-exercises/javascript-math-exercise-23.php
  1250.     var dt = new Date().getTime();
  1251.       var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  1252.           var r = (dt + Math.random()*16)%16 | 0;
  1253.           dt = Math.floor(dt/16);
  1254.           return (c=='x' ? r :(r&0x3|0x8)).toString(16);
  1255.       });   
  1256.       return uuid;
  1257.   }
  1258.  
  1259.   getFileName(url) {
  1260.     return url.split('/').pop().split('#')[0].split('?')[0];
  1261.   }
  1262.  
  1263.   checkURL(url) {
  1264.  
  1265.     // if match youtube regex then do this and return
  1266.  
  1267.     var regex = new RegExp("^(?:https?:)?//[^/]*(?:youtube(?:-nocookie)?\.com|youtu\.be|yewtu\.be).*[=/]([-\\w]{11})(?:\\?|=|&|$)", "gmi");
  1268.     var result = regex.exec(url);
  1269.  
  1270.     console.log(regex);
  1271.     console.log(url);
  1272.     console.log(result);
  1273.  
  1274.     if (url.match(regex) ) {
  1275.       console.log('SWMP: YouTube');
  1276.       this.type = 'youtube';
  1277.       this.videoid = result[1];
  1278.       console.log(this.videoid);
  1279.       return true;
  1280.     }
  1281.  
  1282.     console.log("SWMP: Video or Audio");
  1283.     // Check filename in URL for Type / MIME.
  1284.     this.fileExt = url.split(/[#?&]/)[0].split('.').pop().trim();
  1285.     this.fileExt = url.split(/[#?&]/).slice(-2)[0].split('.').pop().trim();
  1286.     
  1287.     
  1288.     console.log(this.fileExt);
  1289.     this.fileExt = this.fileExt.toLowerCase();
  1290.  
  1291.     switch (this.fileExt) {
  1292.         //VIDEO
  1293.       case 'avi':
  1294.         this.type = 'video';
  1295.         this.mime = 'video/x-msvideo';
  1296.         break;
  1297.       case 'mpeg':
  1298.         this.type = 'video';
  1299.         this.mime = 'video/mpeg';
  1300.         break;
  1301.       case 'mpg':
  1302.         this.type = 'video';
  1303.         this.mime = 'video/mpeg';
  1304.         break;
  1305.       case 'ogv':
  1306.         this.type = 'video';
  1307.         this.mime = 'video/ogg';
  1308.         break;
  1309.       case 'mp4':
  1310.         this.type = 'video';
  1311.         this.mime = 'video/mp4';
  1312.         break;
  1313.       case 'webm':
  1314.         this.type = 'video';
  1315.         this.mime = 'video/webm';
  1316.         break;
  1317.       case 'flv':
  1318.         this.type = 'video';
  1319.         this.mime = 'video/x-flv';
  1320.         break;
  1321.         //AUDIO
  1322.       case 'wav':
  1323.         this.type = 'audio';
  1324.         this.mime = 'audio/x-wav';
  1325.         break;
  1326.       case 'mp3':
  1327.         this.type = 'audio';
  1328.         this.mime = 'audio/mpeg';
  1329.         break;
  1330.       case 'm4a':
  1331.         this.type = 'audio';
  1332.         this.mime = 'audio/mp4';
  1333.         break;
  1334.       case 'mp2':
  1335.         this.type = 'audio';
  1336.         this.mime = 'audio/mpeg';
  1337.         break;
  1338.       case 'ogg':
  1339.         this.type = 'audio';
  1340.         this.mime = 'audio/ogg';
  1341.         break;
  1342.       case 'flac':
  1343.         this.type = 'audio';
  1344.         this.mime = 'audio/flac';
  1345.         break;
  1346.       default:
  1347.         console.log('No matching ext/mime');
  1348.         console.log(this.fileExt);
  1349.         return false;
  1350.     }
  1351.     return true; //If valid
  1352.   }
  1353.  
  1354.   makeDraggable (element){
  1355.    var elm = this.windowTitlebar;
  1356.  
  1357.        element.style.position = 'fixed';
  1358.        element.style.top = swmpConfig.positionTop + 'px';
  1359.        
  1360.        if (swmpConfig.positionSide == 'right') {
  1361.          element.style.right = swmpConfig.positionOffset + 'px';
  1362.        } else {
  1363.          element.style.left = swmpConfig.positionOffset + 'px';
  1364.        }
  1365.  
  1366.     var isMouseDown = false,
  1367.         mouseX,
  1368.         mouseY,
  1369.         elmTop,
  1370.         elmLeft,
  1371.         diffX,
  1372.         newElmTop,
  1373.         newElmLeft,
  1374.         diffY,
  1375.         rightBarrier,
  1376.         bottomBarrier;
  1377.  
  1378.     function mouseDown(e) {
  1379.  
  1380.       if (e.which == '3') {
  1381.         return false; // Right click
  1382.       }
  1383.  
  1384.       isMouseDown = true;
  1385.  
  1386.       mouseX = e.clientX;
  1387.       mouseY = e.clientY;
  1388.  
  1389.       elmTop = element.offsetTop;
  1390.       elmLeft = element.offsetLeft;
  1391.       diffX = mouseX - elmLeft;
  1392.       diffY = mouseY - elmTop;
  1393.  
  1394.     }
  1395.  
  1396.     function mouseUp() {
  1397.       isMouseDown = false;
  1398.       
  1399.       
  1400.       if (swmpConfig.positionSide == 'right') {
  1401.         var currentleft = parseInt(element.style.left, 10);
  1402.         element.style.left = "unset";
  1403.         element.style.right = document.documentElement.clientWidth - currentleft - element.offsetWidth + "px";
  1404.       }
  1405.       
  1406.     }
  1407.  
  1408.     function mouseMove(e) {
  1409.       
  1410.  
  1411.       if (!isMouseDown) return;
  1412.  
  1413.       if (e.which != '1') {
  1414.         isMouseDown = false;
  1415.       }
  1416.       
  1417.       var newMouseX = e.clientX;
  1418.       var newMouseY = e.clientY;
  1419.  
  1420.       newElmTop = newMouseY - diffY;
  1421.       newElmLeft = newMouseX - diffX;
  1422.  
  1423.       rightBarrier = document.documentElement.clientWidth - element.offsetWidth;
  1424.       bottomBarrier = window.innerHeight - element.offsetHeight;
  1425.  
  1426.       if( ( newElmLeft < 0 ) || ( newElmTop < 0) || ( newElmLeft > rightBarrier  ) || (newElmTop > bottomBarrier) ) {
  1427.         if ( newElmLeft < 0 ) {
  1428.           newElmLeft = 0;
  1429.  
  1430.         }
  1431.  
  1432.         if ( newElmTop < 0) {
  1433.           newElmTop = 0;
  1434.  
  1435.         }
  1436.         if ( newElmLeft > rightBarrier  ) {
  1437.           newElmLeft = rightBarrier;
  1438.  
  1439.         } 
  1440.         if (newElmTop > bottomBarrier) {
  1441.           newElmTop = bottomBarrier;
  1442.         } 
  1443.       }
  1444.  
  1445.       element.style.top = newElmTop + "px";
  1446.       
  1447.       if (swmpConfig.positionSide == 'right') {
  1448.         element.style.left = newElmLeft + "px";
  1449.         element.style.right = "unset";
  1450.       } else {
  1451.         element.style.left = newElmLeft + "px";
  1452.       }
  1453.  
  1454.     }
  1455.  
  1456.     document.addEventListener('mousemove', mouseMove);
  1457.     elm.addEventListener('mouseup', mouseUp);
  1458.     elm.addEventListener('mousedown', mouseDown);
  1459.   }
  1460.  
  1461. }
  1462.  
  1463.   // Above this is SWMP class.
  1464.  
  1465.  
  1466.   // 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.
  1467.   // If you want to make site specific changes, either expand on it or just make a completely separate event listener below it.
  1468.  
  1469. document.querySelector('body').addEventListener('click', (event) => {
  1470.   //console.log("Userscript - "+event.target.tagName);
  1471.  
  1472.     // If there are no links in sight, do nothing.
  1473.   if (event.target.tagName != 'A' && event.target.parentNode.tagName != 'A') {
  1474.     return; 
  1475.   }
  1476.     // 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.
  1477.   var clicked = false;
  1478.   if (event.target.tagName == 'A') {
  1479.     clicked = event.target;
  1480.   } else if (event.target.parentNode.tagName == 'A') {
  1481.     clicked = event.target.parentNode;
  1482.   } else if (event.target.parentNode.parentNode.tagName == 'A') {
  1483.     clicked = event.target.parentNode.parentNode;
  1484.   }
  1485.   
  1486.   function getVideo() {
  1487.     if (backendScript == '' || backendScript == null || backendScript == undefined || backendScript == 'fourchan') {
  1488.       return clicked.getAttribute('href');
  1489.     } else if (backendScript == 'vichan') {
  1490.       //console.log("Userscript - "+clicked.parentNode.querySelectorAll('p.fileinfo a') );
  1491.       
  1492.       var allthelinks = clicked.parentNode.querySelectorAll('p.fileinfo a'); // Prevent capturing the (Hide) link on some installs
  1493.       var matchinglink = '';
  1494.       let regex = new RegExp("\.("+swmpConfig.files+")+$", 'i');
  1495.       for (var i = 0; i < allthelinks.length ; i++) {
  1496.         if (allthelinks[i].getAttribute('href').match(regex) ) {
  1497.           matchinglink = allthelinks[i];
  1498.         }
  1499.       }
  1500.       
  1501.       if (matchinglink == '') { // Kissu New UI (no thanks, but here it is anyways) <- This should also return normal href if not video?
  1502.         matchinglink = clicked;
  1503.       }
  1504.       
  1505.       //console.log("Userscript - "+matchinglink);
  1506.       return matchinglink.getAttribute('href');
  1507.       
  1508.     } else {
  1509.       return clicked.getAttribute('href');
  1510.     }
  1511.     
  1512.   }
  1513.  
  1514.   function getFileNameFromUrl(link) { 
  1515.     if (backendScript == '' || backendScript == null || backendScript == undefined || backendScript == 'fourchan') {
  1516.       return link;
  1517.     } else if (backendScript == 'vichan') {
  1518.       return link;
  1519.     } else {
  1520.       return link; 
  1521.     }
  1522.  
  1523.   }
  1524.   
  1525.   function getTitle(link) {
  1526.       if (backendScript == 'fourchan') {
  1527.         if (link.parentNode.querySelector('div.fileText a').getAttribute('title') ) {
  1528.           return link.parentNode.querySelector('div.fileText a').getAttribute('title');
  1529.         } else {
  1530.           return link.parentNode.querySelector('div.fileText a').innerText;
  1531.         }
  1532.  
  1533.       }
  1534.     
  1535.       if (backendScript == 'vichan') { // https://regex101.com/r/HivDYB/2
  1536.         let regex = new RegExp(`([^\/|^\=|^\n|^\&])+\.(${swmpConfig.files})([^\w]|$)`, 'gi'); // Tests for www.webmaster.com/test.webm domain too.
  1537.         var newlink = link.match(regex); // Remove query behind *final filename* &title for old filename on vichan will stay.
  1538.         newlink.forEach(string => function(string) {
  1539.           string = string.replace('/(\?|\&)+/i', '');
  1540.           return string;
  1541.         } ); //remove remnants of queries that i couldnt catch with a good regex
  1542.         return newlink.slice(-1)[0]; // return last in array, grabs t= title for vichan player.php links.
  1543.       }
  1544.   }
  1545.  
  1546.   var clickedHref;
  1547.   var clickedFileName;
  1548.   var clickedTitle;
  1549.   var anythingmatch;
  1550.  
  1551.   function isYoutube(link) {
  1552.     var regex = new RegExp("^(?:https?:)?//[^/]*(?:youtube(?:-nocookie)?\.com|youtu\.be|yewtu\.be).*[=/]([-\\w]{11})(?:\\?|=|&|$)", "gmi");
  1553.     var result = regex.exec(link);
  1554.  
  1555.     if (link.match(regex) != null ) {
  1556.       anythingmatch = true;
  1557.       console.log('Userscript - YouTube: '+result[1]); // Video ID
  1558.       clickedTitle = 'YouTube: ' + result[1];
  1559.       return true;
  1560.     } else {
  1561.       console.log('Userscript - Not YouTube');
  1562.       return false;
  1563.     }
  1564.   }
  1565.  
  1566.   // If youtube
  1567.  
  1568.   if (isYoutube(clicked.getAttribute('href') ) ) {
  1569.     console.log('Userscript - YouTube link clicked');
  1570.     clickedHref = clicked.getAttribute('href');
  1571.     //clickedTitle = 'Loading YouTube';
  1572.   }
  1573.  
  1574.   function isVideo(link) {
  1575.     var regex = new RegExp(`\.(${swmpConfig.files})+$`, 'gi');
  1576.     var result = regex.exec(link);
  1577.  
  1578.     if (link.match(regex) != null) {
  1579.       anythingmatch = true;
  1580.       console.log('Userscript - Video/Audio match:' + result);
  1581.       return true;
  1582.     } else {
  1583.       console.log('Userscript - Not Video/Audio');
  1584.       return false;
  1585.     }
  1586.   }
  1587.  
  1588.   //get video links
  1589.   clickedHref = getVideo();
  1590.  
  1591.   if (isVideo(clickedHref) )  {
  1592.     //clickedHref = getVideo();
  1593.     clickedFileName = getFileNameFromUrl(clicked.getAttribute('href') );
  1594.     clickedTitle = false;
  1595.     if (backendScript == '' || backendScript == null || backendScript == undefined) {
  1596.       clickedTitle = decodeURI(clickedFileName); //Change with other scripts later if it doesn't already contain the title.
  1597.     } else if (backendScript == 'fourchan') {
  1598.       clickedTitle = decodeURI(getTitle(clicked) );
  1599.     } else if (backendScript == 'vichan') {
  1600.       clickedTitle = decodeURI(getTitle(clicked.getAttribute('href') ) );
  1601.     } else {
  1602.       clickedTitle = decodeURI(clickedFileName); //Change with other scripts later if it doesn't already contain the title.
  1603.     }
  1604.    
  1605.     console.log("Userscript - URL: " + clicked.getAttribute('href') );
  1606.     console.log("Userscript - Filename: " + clickedFileName );
  1607.   }
  1608.  
  1609.   if (anythingmatch != true) {
  1610.     return false;
  1611.   } else {
  1612.     // If video audio or youtube matched, prevent other events.
  1613.     event.preventDefault();
  1614.     event.stopPropagation();
  1615.   }
  1616.   
  1617.  
  1618.  
  1619.  
  1620.   // Okay, time to load the player.
  1621.   var playerid = false;
  1622.  
  1623.   if (swmpConfig.allowMultiple != 'false')  {
  1624.     playerid = `play-swmp-${clicked.getAttribute('href')}`;
  1625.   } else {
  1626.     playerid = 'play-swmp';
  1627.   }
  1628.  
  1629.   if (typeof(document.getElementById(playerid)) != 'undefined' && document.getElementById(playerid) != null) {
  1630.     if (swmpConfig.allowMultiple != 'false')  {
  1631.       return false; //already exists, lets do nothing.
  1632.     } else {
  1633.       document.getElementById(playerid).remove();
  1634.       //already exists, lets get rid of it. 
  1635.     }
  1636.   }
  1637.   
  1638.   //console.log(playerid+clickedHref+clickedTitle);
  1639.   let newembed = new swmp({
  1640.     id: playerid,
  1641.     url: clickedHref,
  1642.     title: clickedTitle
  1643.   });
  1644.   
  1645.   //console.log(backendScript);
  1646.   if (backendScript == 'jschan') { // To preserve tab to select player and enable player keybinds like close/fullscreen/pause/mute.
  1647.     clicked.parentNode.parentNode.appendChild(newembed.container);
  1648.   } else {
  1649.     clicked.parentNode.appendChild(newembed.container);
  1650.   }
  1651.  
  1652.  
  1653. }, true); // Fuck other scripts.