🏠 Home 

Escapist video section cleaner

Resizes a video on the Escapist's video section, centers it and autoplays it


Install this script?
  1. // ==UserScript==
  2. // @name Escapist video section cleaner
  3. // @version 0.04
  4. // @description Resizes a video on the Escapist's video section, centers it and autoplays it
  5. // @include /^http://www\.escapistmagazine\.com/videos/view/.*/.*$/
  6. // @grant none
  7. // @author iceman94
  8. // @copyright 2014+, iceman94
  9. // @namespace 8f39a87d8081774a9cbd024879f09787
  10. // ==/UserScript==
  11. //=======================================================================================================
  12. // Cross-browsers load function
  13. // Accepts a JS Object containing optional parameters:
  14. // |-mode: 'auto'|'jqload'|'jqready'|'atchevt'|'evtlist'|'timeout' (default: 'auto')
  15. // |-verbose: true|false (default: false)
  16. // |-timeoutval: integer in milliseconds USED ONLY by the timeout mode (default: 5000)
  17. //
  18. // Script loading modes are tested in this order :
  19. // |-support for jQuery API
  20. // |--uses $(window).load method if available
  21. // |--uses $(window).ready method if available
  22. // |-support for DOMContentLoaded event (compatible only with the following browsers :
  23. // Chrome >= 0.2; Firefox >= 1.0; IE >= 9.0; Opera >= 9.0; Safari >= 3.1)
  24. // |-support for document.attachEvent
  25. // |-uses setTimeout w/ custom delay
  26. //
  27. // Usage: XBLoad(function_to_call_wo_parenthesis, {mode: 'MODE', verbose: true|false, timeoutval:7500})
  28. //=======================================================================================================
  29. function XBLoad(func, options)
  30. {
  31. var options = options || new Object();
  32. var verbose = (typeof options.verbose !== 'undefined') ? options.verbose : false;
  33. var mode = (typeof options.mode !== 'undefined') ? options.mode : 'auto';
  34. var timeoutval = (typeof options.timeoutval !== 'undefined') ? options.timeoutval : 5000;
  35. switch(mode)
  36. {
  37. case 'auto':
  38. if (window.jQuery)
  39. {
  40. if ($(window).load)
  41. {
  42. if (verbose == true) { console.log('Javascript loaded using $(window).load mode through option', mode); };
  43. return $(window).load(function() { func(); });
  44. }
  45. else if ($(window).ready)
  46. {
  47. if (verbose == true) { console.log('Javascript loaded using $(window).ready mode through option', mode); };
  48. return $(window).ready(function() { func(); });
  49. };
  50. }
  51. else if (document.addEventListener)
  52. {
  53. if (verbose == true) { console.log('Javascript loaded using document.addEventListener mode through option', mode); };
  54. document.addEventListener('DOMContentLoaded', function(event)
  55. {
  56. return func();
  57. });
  58. }
  59. else if (document.attachEvent)
  60. {
  61. if (verbose == true) { console.log('Javascript loaded using document.attachEvent mode through option', mode); };
  62. document.attachEvent('load', function()
  63. {
  64. return func();
  65. });
  66. }
  67. else
  68. {
  69. if (verbose == true) { console.log('Javascript loaded using setTimeout method through option', mode, 'and timeout value of', timeoutval); };
  70. return setTimeout(function() { func(); }, timeoutval);
  71. };
  72. break;
  73. case 'jqload':
  74. if (verbose == true) { console.log('Javascript loaded using $(window).load mode through option', mode); };
  75. return $(window).load(function() { func(); });
  76. break;
  77. case 'jqready':
  78. if (verbose == true) { console.log('Javascript loaded using $(window).ready mode through option', mode); };
  79. return $(window).ready(function() { func(); });
  80. break;
  81. case 'evtlist':
  82. if (verbose == true) { console.log('Javascript loaded using document.addEventListener mode through option', mode); };
  83. document.addEventListener('DOMContentLoaded', function(event)
  84. {
  85. return func();
  86. });
  87. break;
  88. case 'atchevt':
  89. if (verbose == true) { console.log('Javascript loaded using document.attachEvent mode through option', mode); };
  90. document.attachEvent('load', function()
  91. {
  92. return func();
  93. });
  94. break;
  95. case 'timeout':
  96. if (verbose == true) { console.log('Javascript loaded using setTimeout mode through option', mode, 'and timeout value of', timeoutval); };
  97. return setTimeout(function() { func(); }, timeoutval);
  98. break;
  99. default:
  100. console.log('[XBLoad] Wrong script loading mode [', mode, '] passed to function. Please investigate.');
  101. break;
  102. };
  103. };
  104. // Locates video player DOM node
  105. function locateVideo()
  106. {
  107. return document.getElementsByTagName('video')[0];
  108. }
  109. // Deletes a DOM node based of its type (id, tag or class)
  110. function delElement(elmt_type, elmt_name)
  111. {
  112. switch (elmt_type)
  113. {
  114. case 'id':
  115. var tgt = document.getElementById(elmt_name);
  116. break;
  117. case 'tag':
  118. var tgt = document.getElementsByTagName(elmt_name)[0];
  119. break;
  120. case 'class':
  121. var tgt = document.getElementsByClassName(elmt_name)[0];
  122. break;
  123. default:
  124. console.log("delElement syntax error\nUsage:\n delElement(<[id|tag|class]>, <elmt_name>)");
  125. return -1;
  126. }
  127. tgt.parentNode.removeChild(tgt);
  128. }
  129. // Sets video player size attributes w/ reserved width and height percentages
  130. function setVideoAttr(browserWidth, browserHeight, reservedWidth, reservedHeight)
  131. {
  132. var obj = {};
  133. var videoWidth = reservedWidth * browserWidth / 100;
  134. obj.width = browserWidth - videoWidth;
  135. var videoHeight = reservedHeight * browserWidth / 100;
  136. obj.height = browserHeight - videoHeight;
  137. return obj;
  138. }
  139. // Wraps all previous code for... showtime !
  140. function showtime()
  141. {
  142. // Delete page top navigation bar to make some head room
  143. delElement('id', 'site_menu');
  144. // Object containing reserved browser's width and height values in percentage
  145. var reservedSpace = {};
  146. reservedSpace.widthInPct = 8;
  147. reservedSpace.heightInPct = 8;
  148. // Sets video player attributes
  149. var browserSize = setVideoAttr(window.screen.availWidth, window.screen.availHeight, reservedSpace.widthInPct, reservedSpace.heightInPct);
  150. // Locates video player and its parent element
  151. var videoElmt = locateVideo();
  152. var videoElmtParent = videoElmt.parentElement;
  153. // Sets video player style
  154. videoElmtParent.setAttribute('style', ('width:' + browserSize.width + 'px;' + 'height:' + browserSize.height + 'px'));
  155. // Sets video's parent's parent element style
  156. videoElmtParent.parentElement.setAttribute('style', ('position: absolute; left: -17%; top: -22%'));
  157. // Bug: If the video player "loading spinner" stays visible after modifying the page, we remove it
  158. if(document.getElementsByClassName('vjs-loading-spinner'))
  159. {
  160. delElement ("class", "vjs-loading-spinner");
  161. }
  162. // Autoplays the video
  163. videoElmt.play()
  164. }
  165. //=======================================================================================================
  166. // Showtime !
  167. //=======================================================================================================
  168. XBLoad(showtime, {mode:'timeout', timeoutval:'2500'});