☰

4chan \ IB Simple Web Media Player

Simple Web Media Player for 4chan and other imageboards.

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

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