Merge pull request video-dev#1756 from video-dev/fix/bad-lint-globals

Fix DOM `Event` lint global false positive and access all window props explicitely

.eslintrc.js

@@ -1,19 +1,11 @@
 module.exports = {
   'env': {
-    'browser': true,
     'commonjs': true,
     'es6': true
   },
   'globals': {
     // Allowed globals
     'console': true,
-    // "MediaSource": true,
-    'performance': true,
-    'crypto': true,
-    'fetch': true,
-    'Request': true,
-    'Headers': true,
-    'escape': true,
 
     // Compile-time defines
     '__VERSION__': true,

package.json

@@ -38,6 +38,7 @@
     "docs:release": "npm run docs:clean && npm run docs:generate && npm run docs:update",
     "lint": "npm run lint:src && npm run lint:tests",
     "lint:fix": "eslint src/ tests/ --fix",
+    "lint:quiet": "eslint src/ tests/ --quiet",
     "lint:src": "eslint src/",
     "lint:tests": "eslint tests/",
     "lint:demo": "eslint demo/",

scripts/travis.sh

@@ -2,18 +2,11 @@
 # https://docs.travis-ci.com/user/customizing-the-build/#Implementing-Complex-Build-Steps
 set -ev
 
-function testNodeRequire {
-  # check that hls.js doesn't error if requiring in node
-  # see https://github.com/video-dev/hls.js/pull/1642
-  node -e 'require("./" + require("./package.json").main)'
-}
-
 npm install
 
 if [ "${TRAVIS_MODE}" = "build" ]; then
   npm run lint
   npm run build
-  testNodeRequire
 elif [ "${TRAVIS_MODE}" = "unitTests" ]; then
 	npm run test:unit
 elif [ "${TRAVIS_MODE}" = "funcTests" ]; then

src/controller/abr-controller.js

@@ -11,6 +11,8 @@ import { ErrorDetails } from '../errors';
 import { logger } from '../utils/logger';
 import EwmaBandWidthEstimator from '../utils/ewma-bandwidth-estimator';
 
+const { performance } = window;
+
 class AbrController extends EventHandler {
   constructor (hls) {
     super(hls, Event.FRAG_LOADING,

src/controller/audio-stream-controller.js

@@ -15,6 +15,8 @@ import TaskLoop from '../task-loop';
 import { FragmentState } from './fragment-tracker';
 import Fragment from '../loader/fragment';
 
+const { performance } = window;
+
 const State = {
   STOPPED: 'STOPPED',
   STARTING: 'STARTING',

src/controller/buffer-controller.js

@@ -109,7 +109,7 @@ class BufferController extends EventHandler {
       ms.addEventListener('sourceended', this.onmse);
       ms.addEventListener('sourceclose', this.onmsc);
       // link video and media Source
-      media.src = URL.createObjectURL(ms);
+      media.src = window.URL.createObjectURL(ms);
       // cache the locally generated object url
       this._objectUrl = media.src;
     }
@@ -137,7 +137,7 @@ class BufferController extends EventHandler {
       // Detach properly the MediaSource from the HTMLMediaElement as
       // suggested in https://github.com/w3c/media-source/issues/53.
       if (this.media) {
-        URL.revokeObjectURL(this._objectUrl);
+        window.URL.revokeObjectURL(this._objectUrl);
 
         // clean up video tag src only if it's our own url. some external libraries might
         // hijack the video tag and change its 'src' without destroying the Hls instance first

src/controller/cap-level-controller.js

@@ -36,7 +36,7 @@ class CapLevelController extends EventHandler {
   }
 
   onMediaAttaching (data) {
-    this.media = data.media instanceof HTMLVideoElement ? data.media : null;
+    this.media = data.media instanceof window.HTMLVideoElement ? data.media : null;
   }
 
   onManifestParsed (data) {

src/controller/eme-controller.js

@@ -10,6 +10,8 @@ import { ErrorTypes, ErrorDetails } from '../errors';
 
 import { logger } from '../utils/logger';
 
+const { XMLHttpRequest } = window;
+
 const MAX_LICENSE_REQUEST_FAILURES = 3;
 
 /**

src/controller/fps-controller.js

@@ -6,6 +6,8 @@ import Event from '../events';
 import EventHandler from '../event-handler';
 import { logger } from '../utils/logger';
 
+const { performance } = window;
+
 class FPSController extends EventHandler {
   constructor (hls) {
     super(hls, Event.MEDIA_ATTACHING);
@@ -22,7 +24,7 @@ class FPSController extends EventHandler {
   onMediaAttaching (data) {
     const config = this.hls.config;
     if (config.capLevelOnFPSDrop) {
-      const video = this.video = data.media instanceof HTMLVideoElement ? data.media : null;
+      const video = this.video = data.media instanceof window.HTMLVideoElement ? data.media : null;
       if (typeof video.getVideoPlaybackQuality === 'function') {
         this.isVideoPlaybackQualityAvailable = true;
       }

src/controller/level-controller.js

@@ -8,6 +8,8 @@ import { logger } from '../utils/logger';
 import { ErrorTypes, ErrorDetails } from '../errors';
 import { isCodecSupportedInMp4 } from '../utils/codecs';
 
+const { performance } = window;
+
 export default class LevelController extends EventHandler {
   constructor (hls) {
     super(hls,

src/controller/stream-controller.js

@@ -142,7 +142,7 @@ class StreamController extends TaskLoop {
 
       break;
     case State.FRAG_LOADING_WAITING_RETRY:
-      var now = performance.now();
+      var now = window.performance.now();
       var retryDate = this.retryDate;
       // if current time is gt than retryDate, or if media seeking let's switch to IDLE state to retry loading
       if (!retryDate || (now >= retryDate) || (this.media && this.media.seeking)) {
@@ -953,12 +953,12 @@ class StreamController extends TaskLoop {
         // switch back to IDLE state ... we just loaded a fragment to determine adequate start bitrate and initialize autoswitch algo
         this.state = State.IDLE;
         this.startFragRequested = false;
-        stats.tparsed = stats.tbuffered = performance.now();
+        stats.tparsed = stats.tbuffered = window.performance.now();
         this.hls.trigger(Event.FRAG_BUFFERED, { stats: stats, frag: fragCurrent, id: 'main' });
         this.tick();
       } else if (fragLoaded.sn === 'initSegment') {
         this.state = State.IDLE;
-        stats.tparsed = stats.tbuffered = performance.now();
+        stats.tparsed = stats.tbuffered = window.performance.now();
         details.initSegment.data = data.payload;
         this.hls.trigger(Event.FRAG_BUFFERED, { stats: stats, frag: fragCurrent, id: 'main' });
         this.tick();
@@ -1157,7 +1157,7 @@ class StreamController extends TaskLoop {
         fragNew.sn === fragCurrent.sn &&
         fragNew.level === fragCurrent.level &&
         this.state === State.PARSING) {
-      this.stats.tparsed = performance.now();
+      this.stats.tparsed = window.performance.now();
       this.state = State.PARSED;
       this._checkAppendedParsed();
     }
@@ -1256,7 +1256,7 @@ class StreamController extends TaskLoop {
         logger.log(`main buffered : ${TimeRanges.toString(media.buffered)}`);
         this.fragPrevious = frag;
         const stats = this.stats;
-        stats.tbuffered = performance.now();
+        stats.tbuffered = window.performance.now();
         // we should get rid of this.fragLastKbps
         this.fragLastKbps = Math.round(8 * stats.total / (stats.tbuffered - stats.tfirst));
         this.hls.trigger(Event.FRAG_BUFFERED, { stats: stats, frag: frag, id: 'main' });
@@ -1287,7 +1287,7 @@ class StreamController extends TaskLoop {
           // exponential backoff capped to config.fragLoadingMaxRetryTimeout
           let delay = Math.min(Math.pow(2, this.fragLoadError) * this.config.fragLoadingRetryDelay, this.config.fragLoadingMaxRetryTimeout);
           logger.warn(`mediaController: frag loading failed, retry in ${delay} ms`);
-          this.retryDate = performance.now() + delay;
+          this.retryDate = window.performance.now() + delay;
           // retry loading state
           // if loadedmetadata is not set, it means that we are emergency switch down on first frag
           // in that case, reset startFragRequested flag
@@ -1379,7 +1379,7 @@ class StreamController extends TaskLoop {
       const expectedPlaying = !((media.paused && media.readyState > 1) || // not playing when media is paused and sufficiently buffered
         media.ended || // not playing when media is ended
         media.buffered.length === 0); // not playing if nothing buffered
-      const tnow = performance.now();
+      const tnow = window.performance.now();
 
       if (currentTime !== this.lastCurrentTime) {
         // The playhead is now moving, but was previously stalled

src/controller/subtitle-stream-controller.js

@@ -7,6 +7,8 @@ import { logger } from '../utils/logger';
 import Decrypter from '../crypt/decrypter';
 import TaskLoop from '../task-loop';
 
+const { performance } = window;
+
 const State = {
   STOPPED: 'STOPPED',
   IDLE: 'IDLE',

src/crypt/decrypter.js

@@ -5,7 +5,15 @@ import AESDecryptor from './aes-decryptor';
 import { ErrorTypes, ErrorDetails } from '../errors';
 import { logger } from '../utils/logger';
 
-/* globals self: false */
+import Event from '../events';
+
+import { getSelfScope } from '../utils/get-self-scope';
+
+// see https://stackoverflow.com/a/11237259/589493
+/* eslint-disable-next-line no-undef */
+const window = getSelfScope(); // safeguard for code that might run both on worker and main thread
+
+const { performance, crypto } = window;
 
 class Decrypter {
   constructor (observer, config, { removePKCS7Padding = true } = {}) {
@@ -16,7 +24,7 @@ class Decrypter {
     // built in decryptor expects PKCS7 padding
     if (removePKCS7Padding) {
       try {
-        const browserCrypto = crypto || self.crypto;
+        const browserCrypto = crypto || window.crypto;
         this.subtle = browserCrypto.subtle || browserCrypto.webkitSubtle;
       } catch (e) {}
     }

src/demux/adts.js

@@ -2,9 +2,12 @@
  *  ADTS parser helper
  */
 import { logger } from '../utils/logger';
-import Event from '../events';
 import { ErrorTypes, ErrorDetails } from '../errors';
 
+import Event from '../events';
+
+import { getSelfScope } from '../utils/get-self-scope';
+
 export function getAudioConfig (observer, data, offset, audioCodec) {
   let adtsObjectType, // :int
     adtsSampleingIndex, // :int

src/demux/demuxer-inline.js

@@ -1,5 +1,8 @@
-/*  inline demuxer.
- *   probe fragments and instantiate appropriate demuxer depending on content type (TSDemuxer, AACDemuxer, ...)
+/**
+ *
+ * inline demuxer: probe fragments and instantiate
+ * appropriate demuxer depending on content type (TSDemuxer, AACDemuxer, ...)
+ *
  */
 
 import Event from '../events';
@@ -12,6 +15,14 @@ import MP3Demuxer from '../demux/mp3demuxer';
 import MP4Remuxer from '../remux/mp4-remuxer';
 import PassThroughRemuxer from '../remux/passthrough-remuxer';
 
+import { getSelfScope } from '../utils/get-self-scope';
+
+// see https://stackoverflow.com/a/11237259/589493
+/* eslint-disable-next-line no-undef */
+const window = getSelfScope(); // safeguard for code that might run both on worker and main thread
+
+const { performance } = window;
+
 class DemuxerInline {
   constructor (observer, typeSupported, config, vendor) {
     this.observer = observer;

src/demux/demuxer.js

@@ -6,6 +6,11 @@ import DemuxerInline from '../demux/demuxer-inline';
 import { logger } from '../utils/logger';
 import { ErrorTypes, ErrorDetails } from '../errors';
 import { getMediaSource } from '../utils/mediasource-helper';
+import { getSelfScope } from '../utils/get-self-scope';
+
+// see https://stackoverflow.com/a/11237259/589493
+/* eslint-disable-next-line no-undef */
+const window = getSelfScope(); // safeguard for code that might run both on worker and main thread
 
 const MediaSource = getMediaSource();
 
@@ -64,7 +69,7 @@ class Demuxer {
         logger.error('error while initializing DemuxerWorker, fallback on DemuxerInline');
         if (w) {
           // revoke the Object URL that was used to create demuxer worker, so as not to leak it
-          URL.revokeObjectURL(w.objectURL);
+          window.URL.revokeObjectURL(w.objectURL);
         }
         this.demuxer = new DemuxerInline(observer, typeSupported, config, vendor);
         this.w = undefined;
@@ -129,7 +134,7 @@ class Demuxer {
     switch (data.event) {
     case 'init':
       // revoke the Object URL that was used to create demuxer worker, so as not to leak it
-      URL.revokeObjectURL(this.w.objectURL);
+      window.URL.revokeObjectURL(this.w.objectURL);
       break;
       // special case for FRAG_PARSING_DATA: data1 and data2 are transferable objects
     case Event.FRAG_PARSING_DATA:

src/events.js

@@ -106,4 +106,5 @@ const HlsEvents = {
   // fired upon stream controller state transitions - data: { previousState, nextState }
   STREAM_STATE_TRANSITION: 'hlsStreamStateTransition'
 };
+
 export default HlsEvents;

src/loader/playlist-loader.js

@@ -18,6 +18,8 @@ import { logger } from '../utils/logger';
 import MP4Demuxer from '../demux/mp4demuxer';
 import M3U8Parser from './m3u8-parser';
 
+const { performance } = window;
+
 /**
  * `type` property values for this loaders' context object
  * @enum

src/utils/codecs.js

@@ -69,7 +69,7 @@ function isCodecType (codec, type) {
 }
 
 function isCodecSupportedInMp4 (codec, type) {
-  return MediaSource.isTypeSupported(`${type || 'video'}/mp4;codecs="${codec}"`);
+  return window.MediaSource.isTypeSupported(`${type || 'video'}/mp4;codecs="${codec}"`);
 }
 
 export { isCodecType, isCodecSupportedInMp4 };

src/utils/fetch-loader.js

@@ -5,6 +5,8 @@
  * but still it is not bullet proof as it fails to avoid data waste....
 */
 
+const { Request, Headers, fetch, performance } = window;
+
 class FetchLoader {
   constructor (config) {
     this.fetchSetup = config.fetchSetup;

src/utils/get-self-scope.js

@@ -0,0 +1,9 @@
+export function getSelfScope () {
+  // see https://stackoverflow.com/a/11237259/589493
+  if (typeof window === 'undefined') {
+    /* eslint-disable-next-line no-undef */
+    return self;
+  } else {
+    return window;
+  }
+}

src/utils/logger.js

@@ -1,3 +1,5 @@
+import { getSelfScope } from './get-self-scope';
+
 function noop () {}
 
 const fakeLogger = {
@@ -11,8 +13,6 @@ const fakeLogger = {
 
 let exportedLogger = fakeLogger;
 
-/* globals self: false */
-
 // let lastCallTime;
 // function formatMsgWithTimeInfo(type, msg) {
 //   const now = Date.now();
@@ -27,15 +27,18 @@ function formatMsg (type, msg) {
   return msg;
 }
 
+/* eslint-disable-next-line no-undef */
+const window = getSelfScope();
+
 function consolePrintFn (type) {
-  const func = self.console[type];
+  const func = window.console[type];
   if (func) {
     return function (...args) {
       if (args[0]) {
         args[0] = formatMsg(type, args[0]);
       }
 
-      func.apply(self.console, args);
+      func.apply(window.console, args);
     };
   }
   return noop;

src/utils/xhr-loader.js

@@ -4,6 +4,8 @@
 
 import { logger } from '../utils/logger';
 
+const { performance, XMLHttpRequest } = window;
+
 class XhrLoader {
   constructor (config) {
     if (config && config.xhrSetup) {

tests/unit/controller/check-buffer.js

@@ -1,9 +1,13 @@
 import assert from 'assert';
 import sinon from 'sinon';
+
+import Hls from '../../../src/hls';
+
 import StreamController from '../../../src/controller/stream-controller';
 import { FragmentTracker } from '../../../src/controller/fragment-tracker';
-import Hls from '../../../src/hls';
+
 import Event from '../../../src/events';
+
 import { ErrorTypes, ErrorDetails } from '../../../src/errors';
 
 describe('checkBuffer', function () {