4chan \ IB Simple Web Media Player

Simple Web Media Player for 4chan and other imageboards.

当前为 2022-08-31 提交的版本,查看 最新版本

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