aw-front-helpers 2.3.9 → 2.4.0

package/classes/formControl.js

@@ -1,9 +1,7 @@
-import { TweenMax, gsap } from 'gsap/all';
-import ScrollToPlugin     from 'gsap/ScrollToPlugin';
+import { gsap }       from 'gsap/all';
+import ScrollToPlugin from 'gsap/ScrollToPlugin';
 gsap.registerPlugin( ScrollToPlugin );
-
 import create             from 'dom-create-element';
-
 import getClosest         from '../utils/dom/getClosest';
 import regex_email        from '../utils/regex/email';
 
@@ -11,27 +9,48 @@ const defaultOptions = {
   selectorGroup: '.form-group',
   classErrorElement: 'form-error',
   classIsError: 'is-error',
-  animateToFirstError: true,
+  animateToFirstError: false,
   i18n: {
-    email: Translator ? Translator.trans('form_errors.email') : 'Merci de renseigner un email valide.',
+    required: Translator ? Translator.trans('form_errors.pattern') : 'Ce champs est obligatoire',
     same: Translator ? Translator.trans('form_errors.same') : 'Les champs ne correspondent pas.',
+    email: Translator ? Translator.trans('form_errors.email') : 'Merci de renseigner un email valide.',
     empty: Translator ? Translator.trans('form_errors.empty') : 'Ce champs est obligatoire.',
     checkbox: Translator ? Translator.trans('form_errors.checkbox') : 'Veuillez accepter les conditions.',
-    radio: Translator ? Translator.trans('form_errors.radio') : 'Veuillez sélectionner au moins un choix.'
+    radio: Translator ? Translator.trans('form_errors.radio') : 'Veuillez sélectionner au moins un choix.',
+    pattern: Translator ? Translator.trans('form_errors.pattern') : 'La donnée saisie ne respecte pas les règles énoncées.',
   }
 };
 
-class FormControl {
+export default class FormControl {
   //________________________________________________________ constructor
   // -
-  constructor(el, options = {}) {
-    this._el = el;
+  /**
+   * Add controls on your formulaire
+   * @param {Element} form formulaire need add control
+   * @param {Object} options define options of controls
+   * @param {string} options.selectorGroup - The name of the employee.
+   * @param {string} options.classErrorElement - The employee's department.
+   * @param {string} options.classIsError - The employee's department.
+   * @param {string} options.animateToFirstError - The employee's department.
+   * @param {Object} options.i18n - The employee's department.
+   * @param {Object} options.i18n.required - The employee's department.
+   * @param {Object} options.i18n.same - The employee's department.
+   * @param {Object} options.i18n.email - The employee's department.
+   * @param {Object} options.i18n.empty - The employee's department.
+   * @param {Object} options.i18n.checkbox - The employee's department.
+   * @param {Object} options.i18n.radio - The employee's department.
+   * @param {Object} options.i18n.pattern - The employee's department.
+  **/
+  constructor(form, options = {}) {
+    /** @private */
+    this._form = form;
+    /** @private */
     this._dom = {};
+    /** @private */
     this._options = {...defaultOptions, ...options};
 
+    this._form.setAttribute('novalidate', 'novalidate');
     this._formCreateBound();
-    this._el.setAttribute('novalidate', 'novalidate');
-
     this._formGrabDom();
     this._formAddEvents();
   }
@@ -43,39 +62,41 @@ class FormControl {
     };
   }
 
+  get form() {
+    return this._form;
+  }
+
   get options() {
     return this._options;
   }
 
+  /**
+   * @deprecated use isValid
+   */
   get isValidate() {
-    return this._formValidate();
+    return this._isValid();
+  }
+
+  get isValid() {
+    return this._isValid();
   }
 
   //________________________________________________________ public
   // -
   destroy() {
-    this._el.removeEventListener('submit', this._onFormSubmit);
+    this._form.removeEventListener('submit', this._onFormSubmit);
     this._domForm.inputs.forEach( input => {
-      input.removeEventListener('keyup', this._onFormKeyUp);
-      if (input.getAttribute('type') === 'checkbox' ||
-        input.getAttribute('type') === 'radio' ||
-        input.tagName === 'SELECT') {
-        input.removeEventListener('change', this._onFormKeyUp);
-      }
-    })
-  }
-
-  removeErrors() {
-    const isErrors = [...this._el.querySelectorAll(`${this._options.classIsError}`)];
-    const currentErrors = [...this._el.querySelectorAll(`.${this._options.classErrorElement}`)];
-    currentErrors.forEach(error => {
-      error.parentNode.removeChild(error);
+      input.removeEventListener('keyup', this._onChange);
     });
-    isErrors.forEach(error => {
-      error.classList.remove(this._options.classIsError);
+    this._domForm.choices.forEach( input => {
+      input.removeEventListener('change', this._onChange);
     });
   }
 
+  removeErrors(el = null) {
+    this._removeError(el);
+  }
+
   setError(element, message = null) {
     const parent = getClosest(element, this._options.selectorGroup);
     if( parent) {
@@ -88,6 +109,11 @@ class FormControl {
         parent.appendChild(error);
       }
       parent.classList.add(this._options.classIsError);
+
+      const previousErrors = [...error.querySelectorAll('li')];
+      for(let i = 0; i < previousErrors.length; i++) {
+        if(previousErrors[i].innerHTML === message) return;
+      }
       if(message) {
         const errorElement = document.createElement('li');
         errorElement.innerHTML = message;
@@ -98,105 +124,177 @@ class FormControl {
 
   //________________________________________________________ events
   // -
+  /** @private */
   _onFormSubmit(pEvt) {
-    if (!this._formValidate()) {
+    if (!this._isValid()) {
       pEvt.preventDefault();
     }
   }
 
-  _onFormKeyUp(pEvt) {
-    var el = pEvt.target,
-      parent = getClosest(el, this._options.selectorGroup);
-    parent.classList.remove(this._options.classIsError);
-    const currentErrors = [...parent.querySelectorAll(`.${this._options.classErrorElement}`)];
-    currentErrors.forEach(error => {
-      error.classList.remove(this._options.classIsError);
-      error.parentNode.removeChild(error);
-    });
+  /** @private */
+  _onChange(pEvt) {
+    const el = pEvt.target;
+    this._removeError(el);
   }
 
   //________________________________________________________ private
   // -
+  /** @private */
   _formCreateBound() {
-    ['_onFormKeyUp', '_onFormSubmit']
+    ['_onChange', '_onFormSubmit']
       .forEach((fn) => this[fn] = this[fn].bind(this));
   }
 
-  _formGrabDom() {
-    this._domForm = {};
-    let texts = [...this._el.querySelectorAll('input[type=text]')],
-      hiddens = [...this._el.querySelectorAll('input[type=hidden]')],
-      emails = [...this._el.querySelectorAll('input[type=email]')],
-      tels = [...this._el.querySelectorAll('input[type=tel]')],
-      passwords = [...this._el.querySelectorAll('input[type=password]')],
-      textarea = [...this._el.querySelectorAll('textarea')],
-      radios = [...this._el.querySelectorAll('input[type=radio]')],
-      checkbox = [...this._el.querySelectorAll('input[type=checkbox]')],
-      numbers = [...this._el.querySelectorAll('input[type=number]')],
-      selects = [...this._el.querySelectorAll('select')];
-    this._domForm.inputs = [...texts, ...hiddens, ...emails, ...passwords, ...tels, ...numbers, ...checkbox, ...radios, ...selects, ...textarea];
-  }
-
-  _formValidate() {
-    let validate = true,
-      errorEl = null;
-    this.removeErrors();
-    for (let i = 0; i < this._domForm.inputs.length; i++) {
-      let el = this._domForm.inputs[i],
-        parent = getClosest(el, this._options.selectorGroup);
-      if (parent === null) continue;
-      if (el.getAttribute('disabled')) continue;
-      if (el.getAttribute('type') && el.getAttribute('type') === 'email' && (!regex_email(el.value) && el.value !== '')) {
-        validate = false;
-        this.setError(el, this._options.i18n.email);
-      }
-      if (el.getAttribute('data-formvalidate-same') && this._el.querySelector(`[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`).value !== el.value) {
-        validate = false;
-        this.setError(el, this._options.i18n.same);
-      }
-      if (el.getAttribute('required') !== null) {
-        if (el.getAttribute('type') === 'radio') {
-          let isChecked = false;
-          let els = [...this._el.querySelectorAll(`input[type="radio"][name="${el.getAttribute('name')}"]`)];
-          for (let i = 0; i < els.length; i++) {
-            if (els[i].checked) {
-              isChecked = true;
-              break;
-            }
-          }
-          if (!isChecked) {
-            validate = false;
-            this.setError(el, this._options.i18n.radio);
-          }
-        }
-        if (el.getAttribute('type') === 'checkbox' && !el.checked) {
-          validate = false;
-          this.setError(el, this._options.i18n.checkbox);
-        } else if (el.value === '') {
-          validate = false;
-          const message = el.getAttribute('type') !== 'hidden' ? this._options.i18n.empty : null;
-          this.setError(el, message);
-        }
-      }
-      if (!validate && errorEl === null) errorEl = el;
+  /** @private */
+  _removeError(el = null) {
+    if(el) {
+      const group = getClosest(el, this._options.selectorGroup);
+      group.classList.remove(this._options.classIsError);
+      const currentErrors = [...group.querySelectorAll(`.${this._options.classErrorElement}`)];
+      currentErrors.forEach(error => {
+        error.classList.remove(this._options.classIsError);
+        error.parentNode.removeChild(error);
+      });
+    } else {
+      const isErrors = [...this._form.querySelectorAll(`${this._options.classIsError}`)];
+      const currentErrors = [...this._form.querySelectorAll(`.${this._options.classErrorElement}`)];
+      currentErrors.forEach(error => {
+        error.parentNode.removeChild(error);
+      });
+      isErrors.forEach(error => {
+        error.classList.remove(this._options.classIsError);
+      });
     }
-    if (!validate && errorEl && this._options.animateToFirstError) {
-      TweenMax.to(window, .6, { scrollTo: (window.pageYOffset + errorEl.getBoundingClientRect().top - 150) })
+  }
+
+  /** @private */
+  _checkError(el) {
+    const group = getClosest(el, this._options.selectorGroup);
+    if (group === null) return false;
+    if (el.getAttribute('disabled') !== null) return false;
+
+    let invalid = false;
+    if( !testRequired(el, this._form) ) {
+      invalid = true;
+      const type = el.getAttribute('type');
+      if(type === 'radio') this.setError(el, this._options.i18n.radio);
+      else if(type === 'checkbox') this.setError(el, this._options.i18n.checkbox);
+      else if(type !== 'hidden') this.setError(el, this._options.i18n.empty);
     }
-    return validate;
+    if( !testEmail(el, this._form) ) {
+      invalid = true;
+      this.setError(el, this._options.i18n.email);
+    }
+    if( !testPattern(el, this._form) ) {
+      invalid = true;
+      this.setError(el, this._options.i18n.pattern);
+    }
+    if( !testSame(el, this._form) ) {
+      invalid = true;
+      this.setError(el, this._options.i18n.same);
+    }
+
+    return invalid;
+  }
+
+  /** @private */
+  _isValid() {
+    let isValid = true, firstErrorElement = null;
+    this._removeError();
+
+    for (let i = 0; i < this._domForm.els.length; i++) {
+      const el = this._domForm.els[i];
+      const error = this._checkError(el);
+      if( !error ) continue;
+      else isValid = false;
+      if (!isValid && firstErrorElement === null) firstErrorElement = el;
+    }
+
+    if (!isValid && firstErrorElement && this._options.animateToFirstError) {
+      gsap.to(window, {
+        duration: .6,
+        scrollTo: (window.pageYOffset + firstErrorElement.getBoundingClientRect().top - 150)
+      })
+    }
+    return isValid;
+  }
+
+  /** @private */
+  _formGrabDom() {
+    /** @private */
+    this._domForm = {};
+    this._domForm.inputs = [...this._form.querySelectorAll('input[type=text],input[type=number],input[type=password],input[type=hidden],input[type=search],input[type=email],input[type=email],input[type=tel],textarea')];
+    this._domForm.choices = [...this._form.querySelectorAll('select, input[type=radio],input[type=checkbox]')];
+    this._domForm.els = [...this._domForm.inputs, ...this._domForm.choices];
   }
 
+  /** @private */
   _formAddEvents() {
-    this._el.addEventListener('submit', this._onFormSubmit);
+    this._form.addEventListener('submit', this._onFormSubmit);
     this._domForm.inputs.forEach( input => {
-      input.addEventListener('keyup', this._onFormKeyUp);
-      if (input.getAttribute('type') === 'checkbox' ||
-        input.getAttribute('type') === 'radio' ||
-        input.tagName === 'SELECT') {
-        input.addEventListener('change', this._onFormKeyUp);
-      }
+      input.addEventListener('keyup', this._onChange);
+    });
+    this._domForm.choices.forEach( input => {
+      input.addEventListener('change', this._onChange);
     });
   }
 }
 
-export default FormControl;
+/**
+ * Test required input/radio/checkbox is valid
+ * @param  {Element} el     Input to test
+ * @param  {Element} form   Formulaire
+ * @return {Boolean} Returns if element is valid or not
+ */
+export function testRequired(el, form) {
+  const isRequired = el.getAttribute('required');
+  if (isRequired === null) return true;
+
+  const type = el.getAttribute('type');
+  if(type === 'radio') {
+    const radios = [...form.querySelectorAll(`input[type="radio"][name="${el.getAttribute('name')}"]`)];
+    for (let i = 0; i < radios.length; i++) {
+      if (radios[i].checked) return true;
+    }
+    return false;
+  } else if( type === 'checkbox') return el.checked;
+  return el.value !== '';
+}
+
+/**
+ * Test input of email type is valid
+ * @param  {Element} el     Input to test
+ * @param  {Element} form   Formulaire
+ * @return {Boolean} Returns if element is valid or not
+ */
+export function testEmail(el, form) {
+  const type = el.getAttribute('type');
+  if(type !== 'email') return true;
+  return el.value === '' && !regex_email(el.value);
+}
+
+/**
+ * Test element with attribute data-formvalidate-same and his twin are same
+ * @param  {Element} el     Input to test
+ * @param  {Element} form   Formulaire
+ * @return {Boolean} Returns if element is valid or not
+ */
+export function testSame(el, form) {
+  const hasSame = el.getAttribute('data-formvalidate-same');
+  if(hasSame === null) return true;
+  const twinEl = form.querySelector(`[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`);
+  return twinEl.value === el.value;
+}
+
+/**
+ * Test element with pattern is valid
+ * @param  {Element} el     Input to test
+ * @param  {Element} form   Formulaire
+ * @return {Boolean} Returns if element is valid or not
+ */
+export function testPattern(el, form) {
+  const pattern = el.getAttribute('pattern');
+  if(pattern === null) return true;
+  const rgx = new RegExp(pattern);
+  return el.value === '' && !rgx.test(el.value);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-front-helpers",
-  "version": "2.3.9",
+  "version": "2.4.0",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",

package/utils/media/autoplay.js

@@ -1,13 +1,9 @@
 export default (callback) => {
-  // Is the callback a function?
   if (typeof callback !== 'function') {
-    console.log('Autoplay: Callback must be a function!');
+    console.warn('Autoplay: Callback must be a function!');
     return false;
   }
-  // Check if sessionStorage exist for autoplaySupported,
-  // if so we don't need to check for support again
   if (!sessionStorage.autoplaySupported) {
-    // Create video element to test autoplay
     var video = document.createElement('video');
     video.autoplay = true;
     video.src = 'data:video/mp4;base64,AAAAIGZ0eXBtcDQyAAAAAG1wNDJtcDQxaXNvbWF2YzEAAATKbW9vdgAAAGxtdmhkAAAAANLEP5XSxD+VAAB1MAAAdU4AAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAACFpb2RzAAAAABCAgIAQAE////9//w6AgIAEAAAAAQAABDV0cmFrAAAAXHRraGQAAAAH0sQ/ldLEP5UAAAABAAAAAAAAdU4AAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAoAAAAFoAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAHVOAAAH0gABAAAAAAOtbWRpYQAAACBtZGhkAAAAANLEP5XSxD+VAAB1MAAAdU5VxAAAAAAANmhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABMLVNNQVNIIFZpZGVvIEhhbmRsZXIAAAADT21pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAw9zdGJsAAAAwXN0c2QAAAAAAAAAAQAAALFhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAoABaABIAAAASAAAAAAAAAABCkFWQyBDb2RpbmcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//AAAAOGF2Y0MBZAAf/+EAHGdkAB+s2UCgL/lwFqCgoKgAAB9IAAdTAHjBjLABAAVo6+yyLP34+AAAAAATY29scm5jbHgABQAFAAUAAAAAEHBhc3AAAAABAAAAAQAAABhzdHRzAAAAAAAAAAEAAAAeAAAD6QAAAQBjdHRzAAAAAAAAAB4AAAABAAAH0gAAAAEAABONAAAAAQAAB9IAAAABAAAAAAAAAAEAAAPpAAAAAQAAE40AAAABAAAH0gAAAAEAAAAAAAAAAQAAA+kAAAABAAATjQAAAAEAAAfSAAAAAQAAAAAAAAABAAAD6QAAAAEAABONAAAAAQAAB9IAAAABAAAAAAAAAAEAAAPpAAAAAQAAE40AAAABAAAH0gAAAAEAAAAAAAAAAQAAA+kAAAABAAATjQAAAAEAAAfSAAAAAQAAAAAAAAABAAAD6QAAAAEAABONAAAAAQAAB9IAAAABAAAAAAAAAAEAAAPpAAAAAQAAB9IAAAAUc3RzcwAAAAAAAAABAAAAAQAAACpzZHRwAAAAAKaWlpqalpaampaWmpqWlpqalpaampaWmpqWlpqalgAAABxzdHNjAAAAAAAAAAEAAAABAAAAHgAAAAEAAACMc3RzegAAAAAAAAAAAAAAHgAAA5YAAAAVAAAAEwAAABMAAAATAAAAGwAAABUAAAATAAAAEwAAABsAAAAVAAAAEwAAABMAAAAbAAAAFQAAABMAAAATAAAAGwAAABUAAAATAAAAEwAAABsAAAAVAAAAEwAAABMAAAAbAAAAFQAAABMAAAATAAAAGwAAABRzdGNvAAAAAAAAAAEAAAT6AAAAGHNncGQBAAAAcm9sbAAAAAIAAAAAAAAAHHNiZ3AAAAAAcm9sbAAAAAEAAAAeAAAAAAAAAAhmcmVlAAAGC21kYXQAAAMfBgX///8b3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE0OCByMTEgNzU5OTIxMCAtIEguMjY0L01QRUctNCBBVkMgY29kZWMgLSBDb3B5bGVmdCAyMDAzLTIwMTUgLSBodHRwOi8vd3d3LnZpZGVvbGFuLm9yZy94MjY0Lmh0bWwgLSBvcHRpb25zOiBjYWJhYz0xIHJlZj0zIGRlYmxvY2s9MTowOjAgYW5hbHlzZT0weDM6MHgxMTMgbWU9aGV4IHN1Ym1lPTcgcHN5PTEgcHN5X3JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbGlzPTEgOHg4ZGN0PTEgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV9xcF9vZmZzZXQ9LTIgdGhyZWFkcz0xMSBsb29rYWhlYWRfdGhyZWFkcz0xIHNsaWNlZF90aHJlYWRzPTAgbnI9MCBkZWNpbWF0ZT0xIGludGVybGFjZWQ9MCBibHVyYXlfY29tcGF0PTAgc3RpdGNoYWJsZT0xIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PWluZmluaXRlIGtleWludF9taW49Mjkgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD00MCByYz0ycGFzcyBtYnRyZWU9MSBiaXRyYXRlPTExMiByYXRldG9sPTEuMCBxY29tcD0wLjYwIHFwbWluPTUgcXBtYXg9NjkgcXBzdGVwPTQgY3BseGJsdXI9MjAuMCBxYmx1cj0wLjUgdmJ2X21heHJhdGU9ODI1IHZidl9idWZzaXplPTkwMCBuYWxfaHJkPW5vbmUgZmlsbGVyPTAgaXBfcmF0aW89MS40MCBhcT0xOjEuMDAAgAAAAG9liIQAFf/+963fgU3DKzVrulc4tMurlDQ9UfaUpni2SAAAAwAAAwAAD/DNvp9RFdeXpgAAAwB+ABHAWYLWHUFwGoHeKCOoUwgBAAADAAADAAADAAADAAAHgvugkks0lyOD2SZ76WaUEkznLgAAFFEAAAARQZokbEFf/rUqgAAAAwAAHVAAAAAPQZ5CeIK/AAADAAADAA6ZAAAADwGeYXRBXwAAAwAAAwAOmAAAAA8BnmNqQV8AAAMAAAMADpkAAAAXQZpoSahBaJlMCCv//rUqgAAAAwAAHVEAAAARQZ6GRREsFf8AAAMAAAMADpkAAAAPAZ6ldEFfAAADAAADAA6ZAAAADwGep2pBXwAAAwAAAwAOmAAAABdBmqxJqEFsmUwIK//+tSqAAAADAAAdUAAAABFBnspFFSwV/wAAAwAAAwAOmQAAAA8Bnul0QV8AAAMAAAMADpgAAAAPAZ7rakFfAAADAAADAA6YAAAAF0Ga8EmoQWyZTAgr//61KoAAAAMAAB1RAAAAEUGfDkUVLBX/AAADAAADAA6ZAAAADwGfLXRBXwAAAwAAAwAOmQAAAA8Bny9qQV8AAAMAAAMADpgAAAAXQZs0SahBbJlMCCv//rUqgAAAAwAAHVAAAAARQZ9SRRUsFf8AAAMAAAMADpkAAAAPAZ9xdEFfAAADAAADAA6YAAAADwGfc2pBXwAAAwAAAwAOmAAAABdBm3hJqEFsmUwIK//+tSqAAAADAAAdUQAAABFBn5ZFFSwV/wAAAwAAAwAOmAAAAA8Bn7V0QV8AAAMAAAMADpkAAAAPAZ+3akFfAAADAAADAA6ZAAAAF0GbvEmoQWyZTAgr//61KoAAAAMAAB1QAAAAEUGf2kUVLBX/AAADAAADAA6ZAAAADwGf+XRBXwAAAwAAAwAOmAAAAA8Bn/tqQV8AAAMAAAMADpkAAAAXQZv9SahBbJlMCCv//rUqgAAAAwAAHVE=';
@@ -15,27 +11,14 @@ export default (callback) => {
     video.style.display = 'none';
     video.playing = false;
     video.play();
-    // Check if video plays
     video.onplay = function () {
       this.playing = true;
     };
-    // Video has loaded, check autoplay support
     video.oncanplay = function () {
-      if (video.playing) {
-        sessionStorage.autoplaySupported = 'true';
-        callback(true);
-      } else {
-        sessionStorage.autoplaySupported = 'false';
-        callback(false);
-      }
+      sessionStorage.autoplaySupported = video.playing ? 'true' : 'false';
+      callback(video.playing);
     };
   } else {
-    // We've already tested for support
-    // use sessionStorage.autoplaySupported
-    if (sessionStorage.autoplaySupported === 'true') {
-      callback(true);
-    } else {
-      callback(false);
-    }
+    callback(sessionStorage.autoplaySupported === 'true');
   }
 }