drive-in - npm Package Compare versions

Comparing version 1.4.2 to 1.5.0

lib/index.js

@@ -1,709 +0,683 @@
-"use strict";
+/* eslint max-statements:0 */
 
-var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
+import Jvent from "jvent";
+import Timer from "./timer";
+import Playlist from "./playlist";
+import {
+  getWidth,
+  getHeight,
+  setStyles,
+  findPoster,
+  createEl,
+  replaceChildren
+} from "./utils";
 
-var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+class DriveIn extends Jvent {
 
-var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
+  constructor() {
+    super();
 
-var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
+    this._listeners = [];
 
-var Jvent = _interopRequire(require("jvent"));
+    this.parentEl = null;
+    this.mediaEl = null;
+    this.placeholderEl = null;
 
-var Timer = _interopRequire(require("./timer"));
+    this.mute = true;
+    this.currMediaType = null;
+    this.mediaAspect = 16 / 9;
+    this.playlist = null;
+    this.loop = true;
+    this.loopPlaylistItems = false;
+    this.slideshow = false;
 
-var Playlist = _interopRequire(require("./playlist"));
+    this.playlistLength = 0;
+    this.currentItem = 0;
+    this.slideshowItemDuration = 10;
+    this._slideshowTimer = null;
+    this._seeking = false;
 
-var Utils = _interopRequire(require("./utils"));
+    this.poster = null;
 
-var getWidth = Utils.getWidth,
-    getHeight = Utils.getHeight,
-    setStyles = Utils.setStyles,
-    findPoster = Utils.findPoster,
-    createEl = Utils.createEl,
-    replaceChildren = Utils.replaceChildren;
+    this.loading = true;
+  }
 
-var DriveIn = (function (_Jvent) {
-    function DriveIn() {
-        _classCallCheck(this, DriveIn);
+  _updateSize(mediaEl, mediaType, mediaAspect) {
 
-        this._listeners = [];
+    const pad = 1;
 
-        this.parentEl = null;
-        this.mediaEl = null;
-        this.placeholderEl = null;
+    const containerW = getWidth();
+    const containerH = getHeight();
+    const containerAspect = containerW / containerH;
 
-        this.mute = true;
-        this.currMediaType = null;
-        this.mediaAspect = 16 / 9;
-        this.playlist = null;
-        this.loop = true;
-        this.loopPlaylistItems = false;
-        this.slideshow = false;
+    if (containerAspect < mediaAspect) {
 
-        this.playlistLength = 0;
-        this.currentItem = 0;
-        this.slideshowItemDuration = 10;
-        this._slideshowTimer = null;
-        this._seeking = false;
+      // taller
+      setStyles(this.parentEl, {
+        width: `${Math.ceil(containerH * mediaAspect)}px`,
+        height: `${containerH + pad}px`
+      });
 
-        this.poster = null;
+      if (mediaType === "video") {
 
-        this.loading = true;
+        setStyles(mediaEl, {
+          width: `${Math.ceil(containerH * mediaAspect)}px`,
+          height: `${containerH}px`
+        });
+
+      } else {
+
+        // is image
+        setStyles(mediaEl, {
+          width: "auto",
+          height: `${containerH + pad}px`
+        });
+      }
+
+    } else {
+
+      // wider
+
+      setStyles(this.parentEl, {
+        width: `${containerW}px`,
+        height: `${Math.ceil(containerW / mediaAspect) + 1}px`
+      });
+
+      if (mediaType === "video") {
+
+        setStyles(mediaEl, {
+          width: `${this.parentEl.offsetWidth}px`,
+          height: "auto"
+        });
+
+      } else {
+
+        // is image
+        setStyles(mediaEl, {
+          width: `${containerW}px`,
+          height: "auto"
+        });
+      }
     }
+  }
 
-    _inherits(DriveIn, _Jvent);
+  _setVideoData() {
+    const mediaEl = this.mediaEl;
+    this.mediaAspect = mediaEl.videoWidth / mediaEl.videoHeight;
+    this._updateSize(mediaEl, "video", this.mediaAspect);
+  }
 
-    _createClass(DriveIn, {
-        _updateSize: {
-            value: function _updateSize(mediaEl, mediaType, mediaAspect) {
+  _setImageData(data) {
+    this.mediaAspect = data.naturalWidth / data.naturalHeight;
 
-                var pad = 1;
+    if (!this.isTouch) {
+      this._updateSize(this.mediaEl, "image", this.mediaAspect);
+    }
+  }
 
-                var containerW = getWidth(),
-                    containerH = getHeight(),
-                    containerAspect = containerW / containerH;
+  _loadSource(sourceEls, posterSrc) {
 
-                if (containerAspect < mediaAspect) {
+    const mediaEl = this.mediaEl;
 
-                    // taller
+    this.emit("media.loading");
 
-                    setStyles(this.parentEl, {
-                        width: Math.ceil(containerH * mediaAspect) + "px",
-                        height: containerH + pad + "px"
-                    });
+    mediaEl.preload = "auto";
+    if (this.playlistLength < 2 || this.loopPlaylistItems) {
+      mediaEl.loop = true;
+    }
 
-                    if (mediaType === "video") {
+    if (this.mute) {
+      this.setVolume(0);
+    }
 
-                        setStyles(mediaEl, {
-                            width: Math.ceil(containerH * mediaAspect) + "px",
-                            height: containerH + "px"
-                        });
-                    } else {
+    if (posterSrc) {
+      mediaEl.poster = posterSrc;
+    }
 
-                        // is image
-                        setStyles(mediaEl, {
-                            width: "auto",
-                            height: containerH + pad + "px"
-                        });
-                    }
-                } else {
+    replaceChildren(mediaEl, sourceEls);
 
-                    // wider
+    mediaEl.load();
+  }
 
-                    setStyles(this.parentEl, {
-                        width: containerW + "px",
-                        height: Math.ceil(containerW / mediaAspect) + 1 + "px"
-                    });
+  _playVideoItem(item, itemNum) {
 
-                    if (mediaType === "video") {
+    const mediaEl = this.mediaEl;
+    const sourceEls = [];
+    let source;
+    let sourceEl;
+    let posterSrc;
+    let canPlayType;
 
-                        setStyles(mediaEl, {
-                            width: this.parentEl.offsetWidth + "px",
-                            height: "auto"
-                        });
-                    } else {
+    for (source of item) {
+      if (source.type.search(/^image/) === 0 && !posterSrc) {
+        posterSrc = source.src;
+      } else {
+        sourceEl = createEl("source", {
+          src: source.src,
+          type: source.type
+        });
+      }
 
-                        // is image
-                        setStyles(mediaEl, {
-                            width: containerW + "px",
-                            height: "auto"
-                        });
-                    }
-                }
-            }
-        },
-        _setVideoData: {
-            value: function _setVideoData() {
-                var mediaEl = this.mediaEl;
-                this.mediaAspect = mediaEl.videoWidth / mediaEl.videoHeight;
-                this._updateSize(mediaEl, "video", this.mediaAspect);
-            }
-        },
-        _setImageData: {
-            value: function _setImageData(data) {
-                this.mediaAspect = data.naturalWidth / data.naturalHeight;
+      if (sourceEl) {
+        canPlayType = mediaEl.canPlayType(source.type);
+        if (canPlayType === "probably") {
+          sourceEls.unshift(sourceEl);
+        } else {
+          sourceEls.push(sourceEl);
+        }
+      }
+    }
 
-                if (!this.isTouch) {
-                    this._updateSize(this.mediaEl, "image", this.mediaAspect);
-                }
-            }
-        },
-        _playVideoItem: {
-            value: function _playVideoItem(item, itemNum) {
-                var mediaEl = this.mediaEl,
-                    source,
-                    sourceEl,
-                    sourceEls = [],
-                    posterSrc,
-                    canPlayType;
+    if (sourceEls.length) {
 
-                for (var i = item.length - 1; i >= 0; i--) {
-                    source = item[i];
+      this._loadSource(sourceEls, posterSrc);
+      this.currentItem = itemNum;
 
-                    if (source.type.search(/^image/) === 0 && !posterSrc) {
-                        posterSrc = source.src;
-                    } else {
-                        sourceEl = createEl("source", { src: source.src, type: source.type });
-                    }
+    } else if (posterSrc || this.poster) {
 
-                    if (sourceEl) {
-                        canPlayType = mediaEl.canPlayType(source.type);
-                        if (canPlayType === "probably") {
-                            sourceEls.unshift(sourceEl);
-                        } else {
-                            sourceEls.push(sourceEl);
-                        }
-                    }
-                }
+      // Fallback to a slideshow.
+      this.slideshow = true;
+      this._createMediaEl();
+      this._playImageItem(item, itemNum);
 
-                if (sourceEls.length) {
+    } else {
 
-                    this.emit("media.loading");
+      this.emit("media.error", new Error("No playable source"));
+    }
+  }
 
-                    mediaEl.preload = "auto";
-                    if (this.playlistLength < 2 || this.loopPlaylistItems) {
-                        mediaEl.loop = true;
-                    }
+  _playImageItem(item, itemNum) {
+    let source;
+    let src;
 
-                    if (this.mute) {
-                        this.setVolume(0);
-                    }
+    if (item && item.length) {
+      for (source of item) {
+        if (source.type.search(/^image/) === 0 && !src) {
+          src = source.src;
+        }
+      }
+    }
 
-                    if (posterSrc) {
-                        mediaEl.poster = posterSrc;
-                    }
+    if (!src && this.poster) {
+      src = this.poster.src;
+    }
 
-                    replaceChildren(mediaEl, sourceEls);
-                    this.currentItem = itemNum;
+    if (src) {
 
-                    mediaEl.load();
-                } else if (posterSrc || this.poster) {
+      this.emit("media.loading");
 
-                    // Fallback to a slideshow.
-                    this.slideshow = true;
-                    this._createMediaEl();
-                    this._playImageItem(item, itemNum);
-                } else {
+      this.mediaEl.src = src;
+      this.currentItem = itemNum;
 
-                    this.emit("media.error", new Error("No playable source"));
-                }
-            }
-        },
-        _playImageItem: {
-            value: function _playImageItem(item, itemNum) {
-                var source, src;
+    } else {
 
-                if (item && item.length) {
-                    for (var i in item) {
-                        source = item[i];
-                        if (source.type.search(/^image/) === 0 && !src) {
-                            src = source.src;
-                        }
-                    }
-                }
+      this.emit("media.error", new Error("No playable source"));
+    }
+  }
 
-                if (!src && this.poster) {
-                    src = this.poster.src;
-                }
+  _setBackgroundItem() {
+    this.parentEl.style["background-image"] = `url("${this.poster.src}")`;
+  }
 
-                if (src) {
+  _playItem(item, itemNum) {
+    if (this.isTouch) {
+      this._setBackgroundItem();
 
-                    this.emit("media.loading");
+      // This should default to load the poster, which provides
+      // the necessary events
+      this._playImageItem();
+      return;
+    }
 
-                    this.mediaEl.src = src;
-                    this.currentItem = itemNum;
-                } else {
+    if (this.currMediaType === "video") {
+      this._playVideoItem(item, itemNum);
+    }
 
-                    this.emit("media.error", new Error("No playable source"));
-                }
-            }
-        },
-        _setBackgroundItem: {
-            value: function _setBackgroundItem() {
-                this.parentEl.style["background-image"] = "url(\"" + this.poster.src + "\")";
-            }
-        },
-        _playItem: {
-            value: function _playItem(item, itemNum) {
-                if (this.isTouch) {
-                    this._setBackgroundItem();
+    if (this.currMediaType === "image") {
+      this._playImageItem(item, itemNum);
+    }
 
-                    // This should default to load the poster, which provides
-                    // the necessary events
-                    this._playImageItem();
-                    return;
-                }
+    this._seeking = false;
+  }
 
-                if (this.currMediaType === "video") {
-                    this._playVideoItem(item, itemNum);
-                }
+  _loadPlaylist(playlist) {
+    this.playlist = playlist;
+    this.playlistLength = playlist.length;
+    this._playItem(playlist[0], 0);
+  }
 
-                if (this.currMediaType === "image") {
-                    this._playImageItem(item, itemNum);
-                }
+  _addListener(element, event, handler) {
 
-                this._seeking = false;
-            }
-        },
-        _loadPlaylist: {
-            value: function _loadPlaylist(playlist) {
-                this.playlist = playlist;
-                this.playlistLength = playlist.length;
-                this._playItem(playlist[0], 0);
-            }
-        },
-        _addListener: {
-            value: function _addListener(element, event, handler) {
+    element.addEventListener(event, handler);
 
-                element.addEventListener(event, handler);
+    this._listeners.push({ element, event, handler });
+  }
 
-                this._listeners.push({
-                    element: element,
-                    event: event,
-                    handler: handler
-                });
-            }
-        },
-        _removeAllListeners: {
-            value: function _removeAllListeners() {
-                var listeners = this._listeners,
-                    listen;
+  _removeAllListeners() {
+    const listeners = this._listeners;
+    let listen;
 
-                for (var i in listeners) {
-                    listen = listeners[i];
-                    listen.element.removeEventListener(listen.event, listen.handler);
-                }
-            }
-        },
-        _attachVideoListeners: {
-            value: function _attachVideoListeners() {
-                var self = this,
-                    mediaEl = this.mediaEl;
+    for (listen of listeners) {
+      listen.element.removeEventListener(listen.event, listen.handler);
+    }
+  }
 
-                function onLoadedMetadata(data) {
-                    self._setVideoData(data);
-                    self.emit("media.metadata", data);
-                }
+  _attachVideoListeners() {
 
-                function onPlaying() {
-                    self.emit("media.playing", self.currentItem);
-                }
+    const mediaEl = this.mediaEl;
 
-                function onPause() {
-                    self.emit("media.pause");
-                }
+    const isVideo = function (video) {
 
-                function onProgress(event) {
-                    // Sort of buggy, with readyState and buffer being inconsistent...
-                    var percent = null,
-                        video = event.target;
+      // Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
+      // to be anything other than 0. If the byte count is available we use this instead.
+      // Browsers that support the else if do not seem to have the bufferedBytes value and
+      // should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
 
-                    // FF4+, Chrome
-                    if (video.buffered && video.buffered.length > 0 && video.buffered.end && video.duration) {
-                        percent = video.buffered.end(0) / video.duration;
-                    }
+      return typeof video.bytesTotal !== "undefined" &&
+        video.bytesTotal > 0 &&
+        typeof video.bufferedBytes !== "undefined";
+    };
 
-                    // Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
-                    // to be anything other than 0. If the byte count is available we use this instead.
-                    // Browsers that support the else if do not seem to have the bufferedBytes value and
-                    // should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
-                    else if (typeof video.bytesTotal !== "undefined" && video.bytesTotal > 0 && typeof video.bufferedBytes !== "undefined") {
-                        percent = video.bufferedBytes / video.bytesTotal;
-                    }
+    const onLoadedMetadata = (data) => {
+      this._setVideoData(data);
+      this.emit("media.metadata", data);
+    };
 
-                    if (percent !== null) {
-                        percent = 100 * Math.min(1, Math.max(0, percent));
-                    }
+    const onPlaying = () => {
+      this.emit("media.playing", this.currentItem);
+    };
 
-                    if (video.networkState === 1 && video.readyState === 0) {
-                        percent = 100;
-                    }
+    const onPause = () => {
+      this.emit("media.pause");
+    };
 
-                    self.emit("media.progress", percent);
-                }
+    const onProgress = (event) => {
+      // Sort of buggy, with readyState and buffer being inconsistent...
+      const video = event.target;
+      let percent = null;
 
-                function onEnded() {
-                    if (!self._seeking) {
-                        self.emit("media.ended", self.currentItem);
-                    }
-                }
+      // FF4+, Chrome
+      if (video.buffered && video.buffered.length > 0 && video.buffered.end && video.duration) {
+        percent = video.buffered.end(0) / video.duration;
+      } else if (isVideo(video)) {
+        percent = video.bufferedBytes / video.bytesTotal;
+      }
 
-                function onCanPlay() {
-                    self.emit("media.canplay");
-                    mediaEl.play();
-                    if (self._seeking) {
-                        self._seeking = false;
-                    }
-                }
+      if (percent !== null) {
+        percent = 100 * Math.min(1, Math.max(0, percent));
+      }
 
-                this._addListener(mediaEl, "loadedmetadata", onLoadedMetadata);
-                this._addListener(mediaEl, "playing", onPlaying);
-                this._addListener(mediaEl, "pause", onPause);
-                this._addListener(mediaEl, "ended", onEnded);
-                this._addListener(mediaEl, "canplay", onCanPlay);
-                this._addListener(mediaEl, "progress", onProgress, false);
-            }
-        },
-        _attachImageListeners: {
-            value: function _attachImageListeners() {
-                var self = this,
-                    mediaEl = this.mediaEl;
+      if (video.networkState === 1 && video.readyState === 0) {
+        percent = 100;
+      }
 
-                function ended() {
-                    var event = new Event("ended");
-                    self.mediaEl.dispatchEvent(event);
-                }
+      this.emit("media.progress", percent);
+    };
 
-                function onPause() {
-                    self.emit("media.pause");
-                }
+    const onEnded = () => {
+      if (!this._seeking) {
+        this.emit("media.ended", this.currentItem);
+      }
+    };
 
-                function onLoad() {
-                    self.emit("media.canplay");
+    const onCanPlay = () => {
+      this.emit("media.canplay");
+      mediaEl.play();
+      if (this._seeking) {
+        this._seeking = false;
+      }
+    };
 
-                    self._setImageData(this);
-                    self.emit("media.metadata", this);
-                    self.emit("media.playing", self.currentItem);
+    this._addListener(mediaEl, "loadedmetadata", onLoadedMetadata);
+    this._addListener(mediaEl, "playing", onPlaying);
+    this._addListener(mediaEl, "pause", onPause);
+    this._addListener(mediaEl, "ended", onEnded);
+    this._addListener(mediaEl, "canplay", onCanPlay);
+    this._addListener(mediaEl, "progress", onProgress, false);
+  }
 
-                    if (self.isTouch) {
-                        return;
-                    }
+  _attachImageListeners() {
 
-                    if (self.playlistLength > 1) {
-                        if (self._slideshowTimer) {
-                            self._slideshowTimer.destroy();
-                        }
-                        self._slideshowTimer = new Timer(ended, self.slideshowItemDuration * 1000);
+    const mediaEl = this.mediaEl;
 
-                        self._slideshowTimer.on("pause", onPause);
-                    }
-                }
+    const ended = () => {
+      this.mediaEl.dispatchEvent(new Event("ended"));
+    };
 
-                function onEnded() {
-                    self.emit("media.ended", self.currentItem);
-                }
+    const onPause = () => {
+      this.emit("media.pause");
+    };
 
-                this._addListener(mediaEl, "load", onLoad);
-                this._addListener(mediaEl, "ended", onEnded);
-            }
-        },
-        _attachListeners: {
-            value: function _attachListeners() {
-                var self = this,
-                    mediaEl = this.mediaEl;
+    const onLoad = () => {
+      this.emit("media.canplay");
 
-                if (this.isTouch) {
-                    this._attachImageListeners();
-                    return;
-                }
+      this._setImageData(this);
+      this.emit("media.metadata", this);
+      this.emit("media.playing", this.currentItem);
 
-                function onResize() {
-                    window.requestAnimationFrame(function () {
-                        if (self.metadataLoaded) {
-                            self._updateSize(mediaEl, self.currMediaType, self.mediaAspect);
-                        }
-                    });
-                }
+      if (this.isTouch) {
+        return;
+      }
 
-                this._addListener(window, "resize", onResize);
+      if (this.playlistLength > 1) {
 
-                if (this.currMediaType === "video") {
-                    this._attachVideoListeners();
-                } else {
-                    this._attachImageListeners();
-                }
+        if (this._slideshowTimer) {
+          this._slideshowTimer.destroy();
+        }
 
-                function onMediaEnded() {
-                    if (this._seeking) {
-                        return;
-                    }
+        this._slideshowTimer = new Timer(ended, this.slideshowItemDuration * 1000);
 
-                    var itemNum = 0;
+        this._slideshowTimer.on("pause", onPause);
+      }
+    };
 
-                    if (self.playlistLength > 1 && self.loopPlaylistItems) {
-                        if (self.currMediaType === "image") {
-                            // Images need a reboot, video is handled via `loop`
-                            self.play(self.currentItem);
-                        }
-                        return;
-                    }
+    const onEnded = () => {
+      this.emit("media.ended", this.currentItem);
+    };
 
-                    if (self.playlistLength > 1 && self.loop) {
-                        if (self.currentItem + 1 < self.playlistLength) {
-                            itemNum = self.currentItem + 1;
-                        }
-                        self.play(itemNum);
-                    }
-                }
+    this._addListener(mediaEl, "load", onLoad);
+    this._addListener(mediaEl, "ended", onEnded);
+  }
 
-                function onMediaCanplay() {
-                    mediaEl.style.opacity = 1;
-                    self.canplay = true;
-                }
+  _attachListeners() {
+    const mediaEl = this.mediaEl;
 
-                function onMediaMetadata() {
-                    self.metadataLoaded = true;
-                }
+    if (this.isTouch) {
+      this._attachImageListeners();
+      return;
+    }
 
-                function onMediaLoading() {
-                    self.canplay = false;
-                    self.metadataLoaded = false;
-                }
+    const onResize = () => {
+      window.requestAnimationFrame(() => {
+        if (this.metadataLoaded) {
+          this._updateSize(mediaEl, this.currMediaType, this.mediaAspect);
+        }
+      });
+    };
 
-                this.on("media.ended", onMediaEnded);
-                this.on("media.canplay", onMediaCanplay);
-                this.on("media.metadata", onMediaMetadata);
-                this.on("media.loading", onMediaLoading);
-            }
-        },
-        _setParent: {
-            value: function _setParent(el) {
+    this._addListener(window, "resize", onResize);
 
-                if (this.isTouch) {
+    if (this.currMediaType === "video") {
+      this._attachVideoListeners();
+    } else {
+      this._attachImageListeners();
+    }
 
-                    setStyles(el, {
-                        width: "100%",
-                        height: "100%",
-                        display: "block",
-                        "background-position": "50% 50%",
-                        "background-repeat": "no-repeat no-repeat",
-                        "background-attachment": "local",
-                        "background-size": "cover"
-                    });
-                } else {
+    const onMediaEnded = () => {
 
-                    setStyles(el, {
-                        position: "absolute",
-                        display: "block",
-                        transform: "translate3d(-50%,-50%,0)",
-                        "-webkit-transform": "translate3d(-50%,-50%,0)",
-                        left: "50%",
-                        top: "50%"
-                    });
-                }
+      if (this._seeking) {
+        return;
+      }
 
-                return el;
-            }
-        },
-        _cleanup: {
-            value: function _cleanup() {
-                var el = this.parentEl;
-                while (el.firstChild) {
-                    el.removeChild(el.firstChild);
-                }
-            }
-        },
-        _createMediaEl: {
-            value: function _createMediaEl() {
-                var mediaEl;
+      let itemNum = 0;
 
-                if (this.mediaEl) {
-                    this._cleanup();
-                }
+      if (this.playlistLength > 1 && this.loopPlaylistItems) {
+        if (this.currMediaType === "image") {
+          // Images need a reboot, video is handled via `loop`
+          this.play(this.currentItem);
+        }
+        return;
+      }
 
-                if (this.isTouch) {
+      if (this.playlistLength > 1 && this.loop) {
+        if (this.currentItem + 1 < this.playlistLength) {
+          itemNum = this.currentItem + 1;
+        }
+        this.play(itemNum);
+      }
+    };
 
-                    this.currMediaType = "image";
-                    mediaEl = createEl("img");
-                    setStyles(mediaEl, { display: "none" });
-                    return mediaEl;
-                } else if (this.slideshow) {
+    const onMediaCanplay = () => {
+      mediaEl.style.opacity = 1;
+      this.canplay = true;
+    };
 
-                    this.currMediaType = "image";
-                    mediaEl = createEl("img");
-                } else {
+    const onMediaMetadata = () => {
+      this.metadataLoaded = true;
+    };
 
-                    this.currMediaType = "video";
-                    mediaEl = createEl("video", {
-                        height: 1,
-                        width: 1,
-                        preload: "metadata"
-                    });
-                }
+    const onMediaLoading = () => {
+      this.canplay = false;
+      this.metadataLoaded = false;
+    };
 
-                if (mediaEl) {
+    this.on("media.ended", onMediaEnded);
+    this.on("media.canplay", onMediaCanplay);
+    this.on("media.metadata", onMediaMetadata);
+    this.on("media.loading", onMediaLoading);
+  }
 
-                    mediaEl.style.opacity = 0;
-                    setStyles(mediaEl, {
-                        display: "block"
-                    });
+  _setParent(el) {
 
-                    return mediaEl;
-                }
-            }
-        },
-        init: {
-            value: function init(options) {
-                options = options || {};
+    if (this.isTouch) {
 
-                this.isTouch = options.isTouch !== undefined ? options.isTouch : "ontouchstart" in window;
+      setStyles(el, {
+        width: "100%",
+        height: "100%",
+        display: "block",
+        "background-position": "50% 50%",
+        "background-repeat": "no-repeat no-repeat",
+        "background-attachment": "local",
+        "background-size": "cover"
+      });
 
-                this.slideshow = options.slideshow;
+    } else {
 
-                this.parentEl = this._setParent(options.el);
-                var mediaEl = this._createMediaEl();
-                this.parentEl.appendChild(mediaEl);
-                this.mediaEl = mediaEl;
+      setStyles(el, {
+        position: "absolute",
+        display: "block",
+        transform: "translate3d(-50%,-50%,0)",
+        "-webkit-transform": "translate3d(-50%,-50%,0)",
+        left: "50%",
+        top: "50%"
+      });
+    }
 
-                this._attachListeners();
-            }
-        },
-        show: {
-            value: function show(rawItem, options) {
-                if (rawItem.constructor === Array) {
-                    return this.showPlaylist([rawItem], options);
-                }
+    return el;
+  }
 
-                if (rawItem.constructor === Object) {
-                    return this.showPlaylist([[rawItem]], options);
-                }
+  _cleanup() {
+    const el = this.parentEl;
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+  }
 
-                return this.showPlaylist([Playlist.makePlaylistItem(rawItem)], options);
-            }
-        },
-        showPlaylist: {
-            value: function showPlaylist(rawPlaylist, options) {
-                options = options || {};
+  _createMediaEl() {
+    let mediaEl;
 
-                if (options.hasOwnProperty("mute")) {
-                    this.mute = options.mute;
-                }
+    if (this.mediaEl) {
+      this._cleanup();
+    }
 
-                if (options.hasOwnProperty("loop")) {
-                    this.loop = options.loop;
-                }
+    if (this.isTouch) {
 
-                if (options.hasOwnProperty("loopPlaylistItems")) {
-                    this.loopPlaylistItems = options.loopPlaylistItems;
-                    if (this.loopPlaylistItems) {
-                        this.loop = false;
-                    }
-                }
+      this.currMediaType = "image";
+      mediaEl = createEl("img");
+      setStyles(mediaEl, {
+        display: "none"
+      });
+      return mediaEl;
 
-                var playlist = Playlist.makePlaylist(rawPlaylist);
+    } else if (this.slideshow) {
 
-                if (options.poster) {
-                    if (typeof options.poster === "string") {
-                        this.poster = { src: options.poster };
-                    } else {
-                        this.poster = options.poster;
-                    }
-                } else {
-                    this.poster = findPoster(playlist);
-                }
+      this.currMediaType = "image";
+      mediaEl = createEl("img");
 
-                this._loadPlaylist(playlist);
-            }
-        },
-        setVolume: {
-            value: function setVolume(level) {
-                if (this.currMediaType === "image") {
-                    return;
-                }
+    } else {
 
-                if (level === 0) {
-                    this.mute = true;
-                    this.mediaEl.muted = true;
-                    this.mediaEl.volume = 0;
-                } else {
-                    this.mute = false;
-                    this.mediaEl.muted = false;
-                    this.mediaEl.volume = level;
-                }
-            }
-        },
-        setPlaybackRate: {
-            value: function setPlaybackRate(rate) {
-                if (this.currMediaType === "image") {
-                    return;
-                }
+      this.currMediaType = "video";
+      mediaEl = createEl("video", {
+        height: 1,
+        width: 1,
+        preload: "metadata"
+      });
+    }
 
-                this.mediaEl.playbackRate = rate || 1;
-            }
-        },
-        getMedia: {
-            value: function getMedia() {
-                return this.mediaEl;
-            }
-        },
-        getPlaylist: {
-            value: function getPlaylist() {
-                return this.playlist;
-            }
-        },
-        getItem: {
-            value: function getItem(itemNum) {
-                return this.playlist[itemNum];
-            }
-        },
-        play: {
-            value: function play(itemNum) {
-                this._seeking = true;
+    if (mediaEl) {
 
-                if (typeof itemNum === "number") {
-                    this._playItem(this.playlist[itemNum], itemNum);
-                } else {
-                    if (this.currMediaType === "video") {
-                        this.mediaEl.play();
-                    } else {
-                        if (this._slideshowTimer) {
-                            this._slideshowTimer.resume();
-                        }
-                    }
-                }
-            }
-        },
-        pause: {
-            value: function pause() {
-                if (this.currMediaType === "video") {
-                    this.mediaEl.pause();
-                } else {
-                    if (this._slideshowTimer) {
-                        this._slideshowTimer.pause();
-                    }
-                }
-            }
-        },
-        close: {
-            value: function close() {
-                this._removeAllListeners();
-                this._cleanup();
-                if (this._slideshowTimer) {
-                    this._slideshowTimer.destroy();
-                    delete this._slideshowTimer;
-                }
-            }
-        },
-        currentTime: {
-            value: function currentTime() {
-                if (this.currMediaType === "video") {
-                    return this.mediaEl.currentTime;
-                } else {
-                    return this._slideshowTimer.currentTime();
-                }
-            }
-        },
-        seekTo: {
-            value: function seekTo(time) {
-                this._seeking = true;
-                if (this.currMediaType === "video") {
-                    this.mediaEl.currentTime = time;
-                }
-            }
-        },
-        duration: {
-            value: function duration() {
-                if (this.currMediaType === "video") {
-                    return this.mediaEl.duration;
-                } else {
-                    return this.slideshowItemDuration;
-                }
-            }
-        }
-    });
+      mediaEl.style.opacity = 0;
+      setStyles(mediaEl, {
+        display: "block"
+      });
 
-    return DriveIn;
-})(Jvent);
+      return mediaEl;
+    }
+  }
 
-module.exports = DriveIn;
+  init(options = {}) {
+
+    this.isTouch = options.isTouch !== undefined ?
+      options.isTouch : "ontouchstart" in window;
+
+    this.slideshow = options.slideshow;
+
+    this.parentEl = this._setParent(options.el);
+
+    const mediaEl = this._createMediaEl();
+
+    this.parentEl.appendChild(mediaEl);
+    this.mediaEl = mediaEl;
+
+    this._attachListeners();
+  }
+
+  show(rawItem, options) {
+    if (rawItem.constructor === Array) {
+      return this.showPlaylist([rawItem], options);
+    }
+
+    if (rawItem.constructor === Object) {
+      return this.showPlaylist([
+        [rawItem]
+      ], options);
+    }
+
+    return this.showPlaylist([Playlist.makePlaylistItem(rawItem)], options);
+  }
+
+  showPlaylist(rawPlaylist, options) {
+    options = options || {};
+
+    if (options.hasOwnProperty("mute")) {
+      this.mute = options.mute;
+    }
+
+    if (options.hasOwnProperty("loop")) {
+      this.loop = options.loop;
+    }
+
+    if (options.hasOwnProperty("loopPlaylistItems")) {
+      this.loopPlaylistItems = options.loopPlaylistItems;
+      if (this.loopPlaylistItems) {
+        this.loop = false;
+      }
+    }
+
+    const playlist = Playlist.makePlaylist(rawPlaylist);
+
+    if (options.poster) {
+      if (typeof options.poster === "string") {
+        this.poster = {
+          src: options.poster
+        };
+      } else {
+        this.poster = options.poster;
+      }
+    } else {
+      this.poster = findPoster(playlist);
+    }
+
+    this._loadPlaylist(playlist);
+  }
+
+  setVolume(level) {
+    if (this.currMediaType === "image") {
+      return;
+    }
+
+    if (level === 0) {
+      this.mute = true;
+      this.mediaEl.muted = true;
+      this.mediaEl.volume = 0;
+    } else {
+      this.mute = false;
+      this.mediaEl.muted = false;
+      this.mediaEl.volume = level;
+    }
+  }
+
+  setPlaybackRate(rate) {
+    if (this.currMediaType === "image") {
+      return;
+    }
+
+    this.mediaEl.playbackRate = rate || 1.0;
+  }
+
+  getMedia() {
+    return this.mediaEl;
+  }
+
+  getPlaylist() {
+    return this.playlist;
+  }
+
+  getItem(itemNum) {
+    return this.playlist[itemNum];
+  }
+
+  play(itemNum) {
+    this._seeking = true;
+
+    if (typeof itemNum === "number") {
+      this._playItem(this.playlist[itemNum], itemNum);
+    } else if (this.currMediaType === "video") {
+      this.mediaEl.play();
+    } else if (this._slideshowTimer) {
+      this._slideshowTimer.resume();
+    }
+  }
+
+  pause() {
+    if (this.currMediaType === "video") {
+      this.mediaEl.pause();
+    } else if (this._slideshowTimer) {
+      this._slideshowTimer.pause();
+    }
+  }
+
+  close() {
+    this._removeAllListeners();
+    this._cleanup();
+    if (this._slideshowTimer) {
+      this._slideshowTimer.destroy();
+      delete this._slideshowTimer;
+    }
+  }
+
+  currentTime() {
+    if (this.currMediaType === "video") {
+      return this.mediaEl.currentTime;
+    } else {
+      return this._slideshowTimer.currentTime();
+    }
+  }
+
+  seekTo(time) {
+    this._seeking = true;
+    if (this.currMediaType === "video") {
+      this.mediaEl.currentTime = time;
+    }
+  }
+
+  duration() {
+    if (this.currMediaType === "video") {
+      return this.mediaEl.duration;
+    } else {
+      return this.slideshowItemDuration;
+    }
+  }
+}
+
+export default DriveIn;

lib/playlist.js

@@ -1,70 +0,71 @@
-"use strict";
+const VIDEO_EXTS = {
+  mp4: true,
+  ogv: true,
+  webm: true
+};
 
-function playlistItem(src) {
-    var item = {},
-        videoExts = {
-        mp4: true,
-        ogv: true,
-        webm: true
-    },
-        imageExts = {
-        jpg: true,
-        png: true,
-        gif: true
-    };
+const IMAGE_EXTS = {
+  jpg: true,
+  png: true,
+  gif: true
+};
 
-    var ext = src.replace(/[\?|\#].+/, "").match(/\.([mp4|ogv|webm|jpg|jpeg|png|gif]+)$/)[1];
+const EXT_RE = /\.([mp4|ogv|webm|jpg|jpeg|png|gif]+)$/;
 
-    if (videoExts[ext]) {
-        if (ext === "ogv") {
-            item.type = "video/ogg";
-        } else {
-            item.type = "video/" + ext;
-        }
+const makePlaylistItem = function (src) {
+
+  const item = { src };
+
+  const ext = item.src.replace(/[\?|\#].+/, "").match(EXT_RE)[1];
+
+  if (VIDEO_EXTS[ext]) {
+    if (ext === "ogv") {
+      item.type = "video/ogg";
+    } else {
+      item.type = `video/${ext}`;
     }
+  }
 
-    if (imageExts[ext]) {
-        if (ext === "jpg") {
-            item.type = "image/jpeg";
-        } else {
-            item.type = "image/" + ext;
-        }
+  if (IMAGE_EXTS[ext]) {
+    if (ext === "jpg") {
+      item.type = "image/jpeg";
+    } else {
+      item.type = `image/${ext}`;
     }
+  }
 
-    item.src = src;
+  return item;
+};
 
-    return item;
-}
+const makePlaylist = function (rawPlaylist, depth = 0) {
 
-function makePlaylist(rawPlaylist, depth) {
-    depth = depth || 0;
+  const playlist = [];
 
-    var playlist = [],
-        item;
+  let item;
 
-    for (var i in rawPlaylist) {
-        item = rawPlaylist[i];
-        if (item.constructor === Object) {
-            playlist.push([item]);
-        }
+  for (item of rawPlaylist) {
 
-        if (item.constructor === Array) {
-            playlist.push(makePlaylist(item, depth + 1));
-        }
+    if (item.constructor === Object) {
+      playlist.push([item]);
+    }
 
-        if (typeof item === "string") {
-            if (depth === 0) {
-                playlist.push([playlistItem(item)]);
-            } else {
-                playlist.push(playlistItem(item));
-            }
-        }
+    if (item.constructor === Array) {
+      playlist.push(makePlaylist(item, depth + 1));
     }
 
-    return playlist;
-}
+    if (typeof item === "string") {
+      if (depth === 0) {
+        playlist.push([makePlaylistItem(item)]);
+      } else {
+        playlist.push(makePlaylistItem(item));
+      }
+    }
+  }
 
-module.exports = {
-    makePlaylist: makePlaylist,
-    makePlaylistItem: playlistItem
-};
+  return playlist;
+};
+
+export default {
+  makePlaylist,
+  makePlaylistItem
+};

lib/timer.js

@@ -1,70 +0,50 @@
-"use strict";
+import Jvent from "jvent";
 
-var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
+class Timer extends Jvent {
 
-var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+  constructor(callback, delay) {
+    super();
 
-var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
+    this.callback = callback;
+    this.remaining = delay;
+    this.timerId = null;
+    this.start = null;
 
-var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
+    this.resume();
+  }
 
-var Jvent = _interopRequire(require("jvent"));
+  pause(silent) {
+    clearTimeout(this.timerId);
+    this.remaining -= new Date() - this.start;
 
-var Timer = (function (_Jvent) {
-    function Timer(callback, delay) {
-        _classCallCheck(this, Timer);
+    if (!silent) {
+      this.emit("pause");
+    }
+  }
 
-        this.callback = callback;
-        this.remaining = delay;
-        this.timerId = null;
-        this.start = null;
+  resume(silent) {
+    this.start = new Date();
+    clearTimeout(this.timerId);
+    this.timerId = setTimeout(this.callback, this.remaining);
 
-        this.resume();
+    if (!silent) {
+      this.emit("resume");
     }
+  }
 
-    _inherits(Timer, _Jvent);
+  currentTime() {
+    const currTime = new Date() - this.start;
+    if (this.timerId) {
+      this.pause(true);
+      this.resume(true);
+    }
+    return currTime;
+  }
 
-    _createClass(Timer, {
-        pause: {
-            value: function pause(silent) {
-                clearTimeout(this.timerId);
-                this.remaining -= new Date() - this.start;
+  destroy() {
+    this.pause(true);
+    this.removeAllListeners();
+  }
+}
 
-                if (!silent) {
-                    this.emit("pause");
-                }
-            }
-        },
-        resume: {
-            value: function resume(silent) {
-                this.start = new Date();
-                clearTimeout(this.timerId);
-                this.timerId = setTimeout(this.callback, this.remaining);
-
-                if (!silent) {
-                    this.emit("resume");
-                }
-            }
-        },
-        currentTime: {
-            value: function currentTime() {
-                var currTime = new Date() - this.start;
-                if (this.timerId) {
-                    this.pause(true);
-                    this.resume(true);
-                }
-                return currTime;
-            }
-        },
-        destroy: {
-            value: function destroy() {
-                this.pause(true);
-                this.removeAllListeners();
-            }
-        }
-    });
-
-    return Timer;
-})(Jvent);
-
-module.exports = Timer;
+export default Timer;

lib/utils.js

@@ -1,100 +0,98 @@
-"use strict";
+const eachNode = function (nodes, fn) {
+  [].slice.call(nodes).forEach(fn);
+};
 
-function getWidth() {
-    if (self.innerHeight) {
-        return self.innerWidth;
-    }
+export const getWidth = function () {
 
-    if (document.documentElement && document.documentElement.clientWidth) {
-        return document.documentElement.clientWidth;
-    }
+  if (self.innerHeight) {
+    return self.innerWidth;
+  }
 
-    if (document.body) {
-        return document.body.clientWidth;
-    }
-}
+  if (document.documentElement && document.documentElement.clientWidth) {
+    return document.documentElement.clientWidth;
+  }
 
-function getHeight() {
-    if (self.innerHeight) {
-        return self.innerHeight;
-    }
+  if (document.body) {
+    return document.body.clientWidth;
+  }
+};
 
-    if (document.documentElement && document.documentElement.clientHeight) {
-        return document.documentElement.clientHeight;
-    }
+export const getHeight = function () {
 
-    if (document.body) {
-        return document.body.clientHeight;
-    }
-}
+  if (self.innerHeight) {
+    return self.innerHeight;
+  }
 
-function setStyles(el, props) {
-    var cssString = "";
-    for (var p in props) {
-        cssString += p + ":" + props[p] + ";";
-    }
-    el.style.cssText += ";" + cssString;
-}
+  if (document.documentElement && document.documentElement.clientHeight) {
+    return document.documentElement.clientHeight;
+  }
 
-function findPoster(playlist) {
-    var poster, item;
+  if (document.body) {
+    return document.body.clientHeight;
+  }
+};
 
-    for (var i in playlist) {
-        item = playlist[i];
+export const setStyles = function (el, props) {
 
-        if (item.constructor === Array) {
-            poster = findPoster(item);
-        } else {
-            if (item.type.search(/^image/) > -1) {
-                return item;
-            }
-        }
+  let cssString = "";
+  let p;
 
-        if (poster) {
-            return poster;
-        }
-    }
-}
+  for (p in props) {
+    cssString += `${p}:${props[p]};`;
+  }
 
-function eachNode(nodes, fn) {
-    [].slice.call(nodes).forEach(fn);
-}
+  el.style.cssText += `;${cssString}`;
+};
 
-function replaceChildren(el, newChildren) {
-    var children = el.children || el.childNodes;
+export const findPoster = function (playlist) {
 
-    if (children.length) {
-        eachNode(children, function (childEl) {
-            var newChild = newChildren.shift();
-            if (newChild) {
-                el.replaceChild(newChild, childEl);
-            } else {
-                el.removeChild(childEl);
-            }
-        });
-    }
+  let poster;
+  let item;
 
-    if (newChildren.length) {
-        newChildren.forEach(function (newChild) {
-            el.appendChild(newChild);
-        });
+  for (item of playlist) {
+    if (item.constructor === Array) {
+      poster = findPoster(item);
+
+    } else if (item.type.search(/^image/) > -1) {
+      return item;
     }
-}
 
-function createEl(name, props) {
-    var el = document.createElement(name);
-    for (var prop in props) {
-        el[prop] = props[prop];
+    if (poster) {
+      return poster;
     }
-    return el;
-}
+  }
+};
 
-module.exports = {
-    getWidth: getWidth,
-    getHeight: getHeight,
-    setStyles: setStyles,
-    findPoster: findPoster,
-    eachNode: eachNode,
-    replaceChildren: replaceChildren,
-    createEl: createEl
-};
+export const replaceChildren = function (el, newChildren) {
+
+  const children = el.children || el.childNodes;
+
+  if (children.length) {
+    eachNode(children, (childEl) => {
+      const newChild = newChildren.shift();
+      if (newChild) {
+        el.replaceChild(newChild, childEl);
+      } else {
+        el.removeChild(childEl);
+      }
+    });
+  }
+
+  if (newChildren.length) {
+    newChildren.forEach((newChild) => {
+      el.appendChild(newChild);
+    });
+  }
+};
+
+export const createEl = function (name, props) {
+
+  const el = document.createElement(name);
+  let prop;
+
+  for (prop in props) {
+    el[prop] = props[prop];
+  }
+
+  return el;
+};

package.json

 {
   "name": "drive-in",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Core library for React Drive-In",
-  "main": "index.js",
+  "main": "dist/drive-in.js",
+  "jsnext:main": "lib/index.js",
+  "scripts": {
+    "build": "mkdir -p dist && node rollup.js",
+    "test": "eslint lib",
+    "prepublish": "npm test && npm run build"
+  },
   "repository": {
@@ -25,2 +31,5 @@ "type": "git",
   "homepage": "https://github.com/ronik-design/drive-in",
+  "engines": {
+    "node": ">=4.0.0"
+  },
   "dependencies": {
@@ -30,18 +39,12 @@ "jvent": "^0.2.0"
   "devDependencies": {
-    "babel": "^4.6.6",
-    "babel-eslint": "^1.0.14",
-    "babelify": "^5.0.4",
-    "browserify": "^9.0.3",
-    "coveralls": "^2.11.2",
-    "eslint": "^0.16.1",
-    "uglifyify": "^3.0.1"
-  },
-  "scripts": {
-    "prepublish": "npm run build",
-    "build": "npm run build-drive-in; npm run build-drive-in-browser; npm run build-drive-in-browser-min;",
-    "build-drive-in": "babel src --out-dir lib",
-    "build-drive-in-browser": "NODE_ENV=production browserify src/index.js -t babelify --outfile dist/drive-in-browser.js --standalone DriveIn",
-    "build-drive-in-browser-min": "NODE_ENV=production browserify src/index.js -t babelify --standalone DriveIn | uglifyjs -mc > dist/drive-in-browser.min.js",
-    "lint": "eslint src"
+    "babel": "^6.1.18",
+    "babel-cli": "^6.2.0",
+    "babel-preset-es2015": "^6.1.18",
+    "babel-preset-es2015-rollup": "^1.0.0",
+    "eslint": "^1.7.3",
+    "eslint-config-defaults": "^7.0.1",
+    "eslint-plugin-filenames": "^0.2.0",
+    "rollup": "^0.21.0",
+    "rollup-plugin-babel": "^2.1.0"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

48876

decreased by-53.03%

Dev dependency count

9

increased by28.57%

Number of package files

13

decreased by-18.75%

Lines of code

1602

decreased by-33.97%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes