Merge pull request #1318 from lindapaiste/fix/guard-window-variable

guard all `window` references

src/BodyPix/index.js

@@ -90,14 +90,13 @@ class BodyPix {
   bodyPartsSpec(colorOptions) {
     const result = colorOptions !== undefined || Object.keys(colorOptions).length >= 24 ? colorOptions : this.config.palette;
 
-    // Check if we're getting p5 colors, make sure they are rgb 
-    if (p5Utils.checkP5() && result !== undefined && Object.keys(result).length >= 24) {
+    // Check if we're getting p5 colors, make sure they are rgb
+    const p5 = p5Utils.p5Instance;
+    if (p5 && result !== undefined && Object.keys(result).length >= 24) {
       // Ensure the p5Color object is an RGB array
       Object.keys(result).forEach(part => {
-        if (result[part].color instanceof window.p5.Color) {
+        if (result[part].color instanceof p5.Color) {
           result[part].color = this.p5Color2RGB(result[part].color);
-        } else {
-          result[part].color = result[part].color;
         }
       });
     }
@@ -452,4 +451,4 @@ const bodyPix = (videoOrOptionsOrCallback, optionsOrCallback, cb) => {
   return callback ? instance : instance.ready;
 }
 
-export default bodyPix;
+export default bodyPix;

src/FaceApi/index.js

@@ -5,6 +5,7 @@
 
 /* eslint prefer-destructuring: ["error", {AssignmentExpression: {array: false}}] */
 /* eslint no-await-in-loop: "off" */
+/* eslint class-methods-use-this: "off" */
 
 /*
  * FaceApi: real-time face recognition, and landmark detection
@@ -14,6 +15,7 @@
 import * as tf from "@tensorflow/tfjs";
 import * as faceapi from "face-api.js";
 import callCallback from "../utils/callcallback";
+import modelLoader from "../utils/modelLoader";
 
 const DEFAULTS = {
   withLandmarks: true,
@@ -93,7 +95,7 @@ class FaceApiBase {
 
     Object.keys(this.config.MODEL_URLS).forEach(item => {
       if (modelOptions.includes(item)) {
-        this.config.MODEL_URLS[item] = this.getModelPath(this.config.MODEL_URLS[item]);
+        this.config.MODEL_URLS[item] = modelLoader.getModelPath(this.config.MODEL_URLS[item]);
       }
     });
 
@@ -354,18 +356,6 @@ class FaceApiBase {
     return _param !== undefined ? _param : _default;
   }
 
-  /**
-   * Checks if the given string is an absolute or relative path and returns
-   *      the path to the modelJson
-   * @param {String} absoluteOrRelativeUrl
-   */
-  getModelPath(absoluteOrRelativeUrl) {
-    const modelJsonPath = this.isAbsoluteURL(absoluteOrRelativeUrl)
-      ? absoluteOrRelativeUrl
-      : window.location.pathname + absoluteOrRelativeUrl;
-    return modelJsonPath;
-  }
-
   /**
    * Sets the return options for .detect() or .detectSingle() in case any are given
    * @param {Object} faceApiOptions
@@ -399,12 +389,6 @@ class FaceApiBase {
     });
   }
 
-  /* eslint class-methods-use-this: "off" */
-  isAbsoluteURL(str) {
-    const pattern = new RegExp("^(?:[a-z]+:)?//", "i");
-    return !!pattern.test(str);
-  }
-
   /**
    * get parts from landmarks
    * @param {*} result

src/utils/modelLoader.js

@@ -1,14 +1,28 @@
+/**
+ * Check if the provided URL string starts with a hostname,
+ * such as http://, https://, etc.
+ * @param {string} str
+ * @returns {boolean}
+ */
 function isAbsoluteURL(str) {
   const pattern = new RegExp('^(?:[a-z]+:)?//', 'i');
-  return !!pattern.test(str);
+  return pattern.test(str);
 }
 
+/**
+ * Accepts a URL that may be a complete URL, or a relative location.
+ * Returns an absolute URL based on the current window location.
+ * @param {string} absoluteOrRelativeUrl
+ * @returns {string}
+ */
 function getModelPath(absoluteOrRelativeUrl) {
-  const modelJsonPath = isAbsoluteURL(absoluteOrRelativeUrl) ? absoluteOrRelativeUrl : window.location.pathname + absoluteOrRelativeUrl
-  return modelJsonPath;
+  if (!isAbsoluteURL(absoluteOrRelativeUrl) && typeof window !== 'undefined') {
+    return window.location.pathname + absoluteOrRelativeUrl;
+  }
+  return absoluteOrRelativeUrl;
 }
 
 export default {
   isAbsoluteURL,
   getModelPath
-}
+}

src/utils/p5Utils.js

@@ -5,7 +5,9 @@
 
 class P5Util {
   constructor() {
+    if (typeof window !== "undefined") {
       this.m_p5Instance = window;
+    }
   }
 
   /**
@@ -19,7 +21,7 @@ class P5Util {
   /**
    * This getter will return p5, checking first if it is in
    * the window and next if it is in the p5 property of this.m_p5Instance
-   * @returns {boolean} if it is in p5 
+   * @returns {boolean} if it is in p5
    */
   get p5Instance() {
     if (typeof this.m_p5Instance !== "undefined" &&