drive-in - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

lib/index.js

@@ -1,675 +0,727 @@
-var Jvent = require('jvent'),
-    inherits = require('inherits'),
-    Timer = require('./timer'),
-    Playlist = require('./playlist'),
-    Utils = require('./utils'),
-    getWidth = Utils.getWidth,
-    getHeight = Utils.getHeight,
-    setStyles = Utils.setStyles,
-    findPoster = Utils.findPoster,
-    createEl = Utils.createEl,
-    replaceChildren = Utils.replaceChildren;
+"use strict";
 
-function DriveIn() {
-    this._listeners = [];
+var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
 
-    this.parentEl = null;
-    this.mediaEl = null;
-    this.placeholderEl = null;
+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; }; })();
 
-    this.mute = true;
-    this.currMediaType = null;
-    this.mediaAspect = 16 / 9;
-    this.playlist = null;
-    this.loop = true;
-    this.loopPlaylistItems = false;
-    this.slideshow = false;
+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.playlistLength = 0;
-    this.currentItem = 0;
-    this.slideshowItemDuration = 10;
-    this._slideshowTimer = null;
-    this._seeking = false;
+var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 
-    this.poster = null;
+var Jvent = _interopRequire(require("jvent"));
 
-    this.loading = true;
-}
+var Timer = _interopRequire(require("./timer"));
 
-inherits(DriveIn, Jvent);
+var Playlist = _interopRequire(require("./playlist"));
 
-DriveIn.prototype._updateSize = function(mediaEl, mediaType, mediaAspect) {
+var Utils = _interopRequire(require("./utils"));
 
-    var pad = 1;
+var getWidth = Utils.getWidth,
+    getHeight = Utils.getHeight,
+    setStyles = Utils.setStyles,
+    findPoster = Utils.findPoster,
+    createEl = Utils.createEl,
+    replaceChildren = Utils.replaceChildren;
 
-    var containerW = getWidth(),
-        containerH = getHeight(),
-        containerAspect = containerW / containerH;
+var DriveIn = (function (_Jvent) {
+    function DriveIn() {
+        _classCallCheck(this, DriveIn);
 
-    if (containerAspect < mediaAspect) {
+        this._listeners = [];
 
-        // taller
+        this.parentEl = null;
+        this.mediaEl = null;
+        this.placeholderEl = null;
 
-        setStyles(this.parentEl, {
-            width: Math.ceil(containerH * mediaAspect) + 'px',
-            height: containerH + pad + 'px'
-        });
+        this.mute = true;
+        this.currMediaType = null;
+        this.mediaAspect = 16 / 9;
+        this.playlist = null;
+        this.loop = true;
+        this.loopPlaylistItems = false;
+        this.slideshow = false;
 
-        if (mediaType === 'video') {
+        this.playlistLength = 0;
+        this.currentItem = 0;
+        this.slideshowItemDuration = 10;
+        this._slideshowTimer = null;
+        this._seeking = false;
 
-            setStyles(mediaEl, {
-                width: Math.ceil(containerH * mediaAspect) + 'px',
-                height: containerH + 'px'
-            });
+        this.poster = null;
 
-        } else {
+        this.loading = true;
+    }
 
-            // is image
-            setStyles(mediaEl, {
-                width: 'auto',
-                height: containerH + pad + 'px'
-            });
-        }
+    _inherits(DriveIn, _Jvent);
 
-    } else {
+    _createClass(DriveIn, {
+        _updateSize: {
+            value: function _updateSize(mediaEl, mediaType, mediaAspect) {
 
-        // wider
+                var pad = 1;
 
-        setStyles(this.parentEl, {
-            width: containerW + 'px',
-            height: Math.ceil(containerW / mediaAspect) + 1 + 'px'
-        });
+                var containerW = getWidth(),
+                    containerH = getHeight(),
+                    containerAspect = containerW / containerH;
 
-        if (mediaType === 'video') {
+                if (containerAspect < mediaAspect) {
 
-            setStyles(mediaEl, {
-                width: this.parentEl.offsetWidth + 'px',
-                height: 'auto'
-            });
+                    // taller
 
-        } else {
+                    setStyles(this.parentEl, {
+                        width: Math.ceil(containerH * mediaAspect) + "px",
+                        height: containerH + pad + "px"
+                    });
 
-            // is image
-            setStyles(mediaEl, {
-                width: containerW + 'px',
-                height: 'auto'
-            });
-        }
-    }
-};
+                    if (mediaType === "video") {
 
-DriveIn.prototype._setVideoData = function() {
-    var mediaEl = this.mediaEl;
-    this.mediaAspect = mediaEl.videoWidth / mediaEl.videoHeight;
-    this._updateSize(mediaEl, 'video', this.mediaAspect);
-};
+                        setStyles(mediaEl, {
+                            width: Math.ceil(containerH * mediaAspect) + "px",
+                            height: containerH + "px"
+                        });
+                    } else {
 
-DriveIn.prototype._setImageData = function(data) {
-    this.mediaAspect = data.naturalWidth / data.naturalHeight;
+                        // is image
+                        setStyles(mediaEl, {
+                            width: "auto",
+                            height: containerH + pad + "px"
+                        });
+                    }
+                } else {
 
-    if (!this.isTouch) {
-        this._updateSize(this.mediaEl, 'image', this.mediaAspect);
-    }
-};
+                    // wider
 
-DriveIn.prototype._playVideoItem = function(item, itemNum) {
-    var mediaEl = this.mediaEl,
-        source,
-        sourceEl,
-        sourceEls = [],
-        posterSrc,
-        canPlayType;
+                    setStyles(this.parentEl, {
+                        width: containerW + "px",
+                        height: Math.ceil(containerW / mediaAspect) + 1 + "px"
+                    });
 
-    for (var i = item.length - 1; i >= 0; i--) {
-        source = item[i];
+                    if (mediaType === "video") {
 
-        if (source.type.search(/^image/) === 0 && !posterSrc) {
-            posterSrc = source.src;
-        } else {
-            sourceEl = createEl('source', { src: source.src, type: source.type });
-        }
+                        setStyles(mediaEl, {
+                            width: this.parentEl.offsetWidth + "px",
+                            height: "auto"
+                        });
+                    } else {
 
-        if (sourceEl) {
-            canPlayType = mediaEl.canPlayType(source.type);
-            if (canPlayType === 'probably') {
-                sourceEls.unshift(sourceEl);
-            } else {
-                sourceEls.push(sourceEl);
+                        // 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 (sourceEls.length) {
-
-        this.emit('media.loading');
-
-        mediaEl.preload = 'auto';
-        if (this.playlistLength < 2 || this.loopPlaylistItems) mediaEl.loop = true;
-        if (this.mute) this.setVolume(0);
-
-        if (posterSrc) {
-            mediaEl.poster = posterSrc;
-        }
-
-        replaceChildren(mediaEl, sourceEls);
-        this.currentItem = itemNum;
-
-        mediaEl.load();
-
-    } else if (posterSrc || this.poster) {
-
-        // Fallback to a slideshow.
-        this.slideshow = true;
-        this._createMediaEl();
-        this._playImageItem(item, itemNum);
-
-    } else {
-
-        this.emit('media.error', new Error('No playable source'));
-    }
-};
-
-DriveIn.prototype._playImageItem = function(item, itemNum) {
-    var source,
-        src;
-
-    if (item && item.length) {
-        for (var i in item) {
-            source = item[i];
-            if (source.type.search(/^image/) === 0 && !src) {
-                src = source.src;
+                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 (!src && this.poster) {
-        src = this.poster.src;
-    }
+                for (var i = item.length - 1; i >= 0; i--) {
+                    source = item[i];
 
-    if (src) {
+                    if (source.type.search(/^image/) === 0 && !posterSrc) {
+                        posterSrc = source.src;
+                    } else {
+                        sourceEl = createEl("source", { src: source.src, type: source.type });
+                    }
 
-        this.emit('media.loading');
+                    if (sourceEl) {
+                        canPlayType = mediaEl.canPlayType(source.type);
+                        if (canPlayType === "probably") {
+                            sourceEls.unshift(sourceEl);
+                        } else {
+                            sourceEls.push(sourceEl);
+                        }
+                    }
+                }
 
-        this.mediaEl.src = src;
-        this.currentItem = 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;
+                    }
 
-DriveIn.prototype._setBackgroundItem = function() {
-    this.parentEl.style['background-image'] = 'url("' + this.poster.src + '")';
-};
+                    if (this.mute) {
+                        this.setVolume(0);
+                    }
 
-DriveIn.prototype._playItem = function(item, itemNum) {
-    if (this.isTouch) {
-        this._setBackgroundItem();
+                    if (posterSrc) {
+                        mediaEl.poster = posterSrc;
+                    }
 
-        // This should default to load the poster, which provides
-        // the necessary events
-        this._playImageItem();
-        return;
-    }
+                    replaceChildren(mediaEl, sourceEls);
+                    this.currentItem = itemNum;
 
-    if (this.currMediaType === 'video') {
-        this._playVideoItem(item, itemNum);
-    }
+                    mediaEl.load();
+                } else if (posterSrc || this.poster) {
 
-    if (this.currMediaType === 'image') {
-        this._playImageItem(item, itemNum);
-    }
+                    // Fallback to a slideshow.
+                    this.slideshow = true;
+                    this._createMediaEl();
+                    this._playImageItem(item, itemNum);
+                } else {
 
-    this._seeking = false;
-};
+                    this.emit("media.error", new Error("No playable source"));
+                }
+            }
+        },
+        _playImageItem: {
+            value: function _playImageItem(item, itemNum) {
+                var source, src;
 
-DriveIn.prototype._loadPlaylist = function(playlist) {
-    this.playlist = playlist;
-    this.playlistLength = playlist.length;
-    this._playItem(playlist[0], 0);
-};
+                if (item && item.length) {
+                    for (var i in item) {
+                        source = item[i];
+                        if (source.type.search(/^image/) === 0 && !src) {
+                            src = source.src;
+                        }
+                    }
+                }
 
-DriveIn.prototype._addListener = function(element, event, handler) {
+                if (!src && this.poster) {
+                    src = this.poster.src;
+                }
 
-    element.addEventListener(event, handler);
+                if (src) {
 
-    this._listeners.push({
-        element: element,
-        event: event,
-        handler: handler
-    });
-};
+                    this.emit("media.loading");
 
-DriveIn.prototype._removeAllListeners = function() {
-    var listeners = this._listeners,
-        listen;
+                    this.mediaEl.src = src;
+                    this.currentItem = itemNum;
+                } else {
 
-    for (var i in listeners) {
-        listen = listeners[i];
-        listen.element.removeEventListener(listen.event, listen.handler);
-    }
-};
+                    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();
 
-DriveIn.prototype._attachVideoListeners = function() {
-    var self = this,
-        mediaEl = this.mediaEl;
+                    // This should default to load the poster, which provides
+                    // the necessary events
+                    this._playImageItem();
+                    return;
+                }
 
-    function onLoadedMetadata(data) {
-        self._setVideoData(data);
-        self.emit('media.metadata', data);
-    }
+                if (this.currMediaType === "video") {
+                    this._playVideoItem(item, itemNum);
+                }
 
-    function onPlaying() {
-        self.emit('media.playing', self.currentItem);
-    }
+                if (this.currMediaType === "image") {
+                    this._playImageItem(item, itemNum);
+                }
 
-    function onPause() {
-        self.emit('media.pause');
-    }
+                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) {
 
-    function onProgress(event) {
-        // Sort of buggy, with readyState and buffer being inconsistent...
-        var percent = null,
-            video = event.target;
+                element.addEventListener(event, handler);
 
-        // FF4+, Chrome
-        if (video.buffered && video.buffered.length > 0 && video.buffered.end && video.duration) {
-            percent = video.buffered.end(0) / video.duration;
-        }
+                this._listeners.push({
+                    element: element,
+                    event: event,
+                    handler: handler
+                });
+            }
+        },
+        _removeAllListeners: {
+            value: function _removeAllListeners() {
+                var listeners = this._listeners,
+                    listen;
 
-        // 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;
-        }
+                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;
 
-        if (percent !== null) {
-            percent = 100 * Math.min(1, Math.max(0, percent));
-        }
+                function onLoadedMetadata(data) {
+                    self._setVideoData(data);
+                    self.emit("media.metadata", data);
+                }
 
-        if (video.networkState === 1 && video.readyState === 0) {
-            percent = 100;
-        }
+                function onPlaying() {
+                    self.emit("media.playing", self.currentItem);
+                }
 
-        self.emit('media.progress', percent);
-    }
+                function onPause() {
+                    self.emit("media.pause");
+                }
 
-    function onEnded() {
-        if (!self._seeking) {
-            self.emit('media.ended', self.currentItem);
-        }
-    }
+                function onProgress(event) {
+                    // Sort of buggy, with readyState and buffer being inconsistent...
+                    var percent = null,
+                        video = event.target;
 
-    function onCanPlay() {
-        self.emit('media.canplay');
-        mediaEl.play();
-        if (self._seeking) {
-            self._seeking = false;
-        }
-    }
+                    // FF4+, Chrome
+                    if (video.buffered && video.buffered.length > 0 && video.buffered.end && video.duration) {
+                        percent = video.buffered.end(0) / video.duration;
+                    }
 
-    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);
-};
+                    // 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;
+                    }
 
-DriveIn.prototype._attachImageListeners = function() {
-    var self = this,
-        mediaEl = this.mediaEl;
+                    if (percent !== null) {
+                        percent = 100 * Math.min(1, Math.max(0, percent));
+                    }
 
-    function ended() {
-        var event = new Event('ended');
-        self.mediaEl.dispatchEvent(event);
-    }
+                    if (video.networkState === 1 && video.readyState === 0) {
+                        percent = 100;
+                    }
 
-    function onPause() {
-        self.emit('media.pause');
-    }
+                    self.emit("media.progress", percent);
+                }
 
-    function onLoad() {
-        self.emit('media.canplay');
+                function onEnded() {
+                    if (!self._seeking) {
+                        self.emit("media.ended", self.currentItem);
+                    }
+                }
 
-        self._setImageData(this);
-        self.emit('media.metadata', this);
-        self.emit('media.playing', self.currentItem);
+                function onCanPlay() {
+                    self.emit("media.canplay");
+                    mediaEl.play();
+                    if (self._seeking) {
+                        self._seeking = false;
+                    }
+                }
 
-        if (self.isTouch) return;
+                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 (self.playlistLength > 1) {
-            if (self._slideshowTimer) self._slideshowTimer.destroy();
-            self._slideshowTimer = new Timer(ended, self.slideshowItemDuration * 1000);
+                function ended() {
+                    var event = new Event("ended");
+                    self.mediaEl.dispatchEvent(event);
+                }
 
-            self._slideshowTimer.on('pause', onPause);
-        }
-    }
+                function onPause() {
+                    self.emit("media.pause");
+                }
 
-    function onEnded() {
-        self.emit('media.ended', self.currentItem);
-    }
+                function onLoad() {
+                    self.emit("media.canplay");
 
-    this._addListener(mediaEl, 'load', onLoad);
-    this._addListener(mediaEl, 'ended', onEnded);
-};
+                    self._setImageData(this);
+                    self.emit("media.metadata", this);
+                    self.emit("media.playing", self.currentItem);
 
-DriveIn.prototype._attachListeners = function() {
-    var self = this,
-        mediaEl = this.mediaEl;
+                    if (self.isTouch) {
+                        return;
+                    }
 
-    if (this.isTouch) {
-        this._attachImageListeners();
-        return;
-    }
+                    if (self.playlistLength > 1) {
+                        if (self._slideshowTimer) {
+                            self._slideshowTimer.destroy();
+                        }
+                        self._slideshowTimer = new Timer(ended, self.slideshowItemDuration * 1000);
 
-    function onResize() {
-        window.requestAnimationFrame(function () {
-            if (self.metadataLoaded) {
-                self._updateSize(mediaEl, self.currMediaType, self.mediaAspect);
-            }
-        });
-    }
+                        self._slideshowTimer.on("pause", onPause);
+                    }
+                }
 
-    this._addListener(window, 'resize', onResize);
+                function onEnded() {
+                    self.emit("media.ended", self.currentItem);
+                }
 
-    if (this.currMediaType === 'video') {
-        this._attachVideoListeners();
-    } else {
-        this._attachImageListeners();
-    }
-
-    function onMediaEnded() {
-        if (this._seeking) return;
-
-        var itemNum = 0;
-
-        if (self.playlistLength > 1 && self.loopPlaylistItems) {
-            if( self.currMediaType === 'image') {
-                // Images need a reboot, video is handled via `loop`
-                self.play(self.currentItem);
+                this._addListener(mediaEl, "load", onLoad);
+                this._addListener(mediaEl, "ended", onEnded);
             }
-            return;
-        }
+        },
+        _attachListeners: {
+            value: function _attachListeners() {
+                var self = this,
+                    mediaEl = this.mediaEl;
 
-        if (self.playlistLength > 1 && self.loop) {
-            if (self.currentItem + 1 < self.playlistLength) {
-                itemNum = self.currentItem + 1;
-            }
-            self.play(itemNum);
-        }
-    }
+                if (this.isTouch) {
+                    this._attachImageListeners();
+                    return;
+                }
 
-    function onMediaCanplay() {
-        mediaEl.style.opacity = 1;
-        self.canplay = true;
-    }
+                function onResize() {
+                    window.requestAnimationFrame(function () {
+                        if (self.metadataLoaded) {
+                            self._updateSize(mediaEl, self.currMediaType, self.mediaAspect);
+                        }
+                    });
+                }
 
-    function onMediaMetadata() {
-        self.metadataLoaded = true;
-    }
+                this._addListener(window, "resize", onResize);
 
-    function onMediaLoading() {
-        self.canplay = false;
-        self.metadataLoaded = false;
-    }
+                if (this.currMediaType === "video") {
+                    this._attachVideoListeners();
+                } else {
+                    this._attachImageListeners();
+                }
 
-    this.on('media.ended', onMediaEnded);
-    this.on('media.canplay', onMediaCanplay);
-    this.on('media.metadata', onMediaMetadata);
-    this.on('media.loading', onMediaLoading);
-};
+                function onMediaEnded() {
+                    if (this._seeking) {
+                        return;
+                    }
 
-DriveIn.prototype._setParent = function(el) {
+                    var itemNum = 0;
 
-    if (this.isTouch) {
+                    if (self.playlistLength > 1 && self.loopPlaylistItems) {
+                        if (self.currMediaType === "image") {
+                            // Images need a reboot, video is handled via `loop`
+                            self.play(self.currentItem);
+                        }
+                        return;
+                    }
 
-        setStyles(el, {
-            width: '100%',
-            height: '100%',
-            display: 'block',
-            'background-position': '50% 50%',
-            'background-repeat': 'no-repeat no-repeat',
-            'background-attachment': 'local',
-            'background-size': 'cover'
-        });
+                    if (self.playlistLength > 1 && self.loop) {
+                        if (self.currentItem + 1 < self.playlistLength) {
+                            itemNum = self.currentItem + 1;
+                        }
+                        self.play(itemNum);
+                    }
+                }
 
-    } else {
+                function onMediaCanplay() {
+                    mediaEl.style.opacity = 1;
+                    self.canplay = true;
+                }
 
-        setStyles(el, {
-            position: 'absolute',
-            display: 'block',
-            transform: 'translate3d(-50%,-50%,0)',
-            '-webkit-transform': 'translate3d(-50%,-50%,0)',
-            left: '50%',
-            top: '50%'
-        });
-    }
+                function onMediaMetadata() {
+                    self.metadataLoaded = true;
+                }
 
-    return el;
-};
+                function onMediaLoading() {
+                    self.canplay = false;
+                    self.metadataLoaded = false;
+                }
 
-DriveIn.prototype._cleanup = function() {
-    var el = this.parentEl;
-    while (el.firstChild) {
-        el.removeChild(el.firstChild);
-    }
-};
+                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) {
 
-DriveIn.prototype._createMediaEl = function() {
-    var mediaEl;
+                if (this.isTouch) {
 
-    if (this.mediaEl) this._cleanup();
+                    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 {
 
-    if (this.isTouch) {
+                    setStyles(el, {
+                        position: "absolute",
+                        display: "block",
+                        transform: "translate3d(-50%,-50%,0)",
+                        "-webkit-transform": "translate3d(-50%,-50%,0)",
+                        left: "50%",
+                        top: "50%"
+                    });
+                }
 
-        this.currMediaType = 'image';
-        mediaEl = createEl('img');
-        setStyles(mediaEl, { display: 'none' });
-        return mediaEl;
+                return el;
+            }
+        },
+        _cleanup: {
+            value: function _cleanup() {
+                var el = this.parentEl;
+                while (el.firstChild) {
+                    el.removeChild(el.firstChild);
+                }
+            }
+        },
+        _createMediaEl: {
+            value: function _createMediaEl() {
+                var mediaEl;
 
-    } else if (this.slideshow) {
+                if (this.mediaEl) {
+                    this._cleanup();
+                }
 
-        this.currMediaType = 'image';
-        mediaEl = createEl('img');
+                if (this.isTouch) {
 
-    } else {
+                    this.currMediaType = "image";
+                    mediaEl = createEl("img");
+                    setStyles(mediaEl, { display: "none" });
+                    return mediaEl;
+                } else if (this.slideshow) {
 
-        this.currMediaType = 'video';
-        mediaEl = createEl('video', {
-            height: 1,
-            width: 1,
-            preload: 'metadata'
-        });
-    }
+                    this.currMediaType = "image";
+                    mediaEl = createEl("img");
+                } else {
 
-    if (mediaEl) {
+                    this.currMediaType = "video";
+                    mediaEl = createEl("video", {
+                        height: 1,
+                        width: 1,
+                        preload: "metadata"
+                    });
+                }
 
-        mediaEl.style.opacity = 0;
-        setStyles(mediaEl, {
-            display: 'block'
-        });
+                if (mediaEl) {
 
-        return mediaEl;
-    }
-};
+                    mediaEl.style.opacity = 0;
+                    setStyles(mediaEl, {
+                        display: "block"
+                    });
 
-DriveIn.prototype._prepareContainer = function() {
-    var containerH = getHeight();
+                    return mediaEl;
+                }
+            }
+        },
+        _prepareContainer: {
+            value: function _prepareContainer() {
+                var containerH = getHeight();
 
-    if (document.body.offsetHeight < containerH) {
-        setStyles(document.body, {
-            height: 'auto'
-        });
+                if (document.body.offsetHeight < containerH) {
+                    setStyles(document.body, {
+                        height: "auto"
+                    });
 
-        if (containerH > document.body.offsetHeight) {
-            setStyles(document.body, {
-                height: '100%'
-            });
-            setStyles(document.documentElement, {
-                height: '100%'
-            });
-        }
-    }
-};
+                    if (containerH > document.body.offsetHeight) {
+                        setStyles(document.body, {
+                            height: "100%"
+                        });
+                        setStyles(document.documentElement, {
+                            height: "100%"
+                        });
+                    }
+                }
+            }
+        },
+        init: {
+            value: function init(options) {
+                options = options || {};
 
-DriveIn.prototype.init = function(options) {
-    options = options || {};
+                if ("ontouchstart" in window || options.slideshow) {
+                    this.isTouch = true;
+                }
 
-    if ('ontouchstart' in window || options.slideshow) {
-        this.isTouch = true;
-    }
+                this._prepareContainer();
 
-    this._prepareContainer();
+                this.parentEl = this._setParent(options.el);
+                var mediaEl = this._createMediaEl();
+                this.parentEl.appendChild(mediaEl);
+                this.mediaEl = mediaEl;
 
-    this.parentEl = this._setParent(options.el);
-    var mediaEl = this._createMediaEl();
-    this.parentEl.appendChild(mediaEl);
-    this.mediaEl = mediaEl;
+                this._attachListeners();
+            }
+        },
+        show: {
+            value: function show(rawItem, options) {
+                if (rawItem.constructor === Array) {
+                    return this.showPlaylist([rawItem], options);
+                }
 
-    this._attachListeners();
-};
+                if (rawItem.constructor === Object) {
+                    return this.showPlaylist([[rawItem]], options);
+                }
 
-DriveIn.prototype.show = function(rawItem, options) {
-    if (rawItem.constructor === Array) {
-        return this.showPlaylist([rawItem], options);
-    }
+                return this.showPlaylist([Playlist.makePlaylistItem(rawItem)], options);
+            }
+        },
+        showPlaylist: {
+            value: function showPlaylist(rawPlaylist, options) {
+                options = options || {};
 
-    if (rawItem.constructor === Object) {
-        return this.showPlaylist([
-            [rawItem]
-        ], options);
-    }
+                if (options.hasOwnProperty("mute")) {
+                    this.mute = options.mute;
+                }
 
-    return this.showPlaylist([Playlist.makePlaylistItem(rawItem)], options);
-};
+                if (options.hasOwnProperty("loop")) {
+                    this.loop = options.loop;
+                }
 
-DriveIn.prototype.showPlaylist = function(rawPlaylist, options) {
-    options = options || {};
+                if (options.hasOwnProperty("loopPlaylistItems")) {
+                    this.loopPlaylistItems = options.loopPlaylistItems;
+                    if (this.loopPlaylistItems) {
+                        this.loop = false;
+                    }
+                }
 
-    if (options.hasOwnProperty('mute')) {
-        this.mute = options.mute;
-    }
+                var playlist = Playlist.makePlaylist(rawPlaylist);
 
-    if (options.hasOwnProperty('loop')) {
-        this.loop = options.loop;
-    }
+                if (options.poster) {
+                    this.poster = options.poster;
+                } else {
+                    this.poster = findPoster(playlist);
+                }
 
-    if (options.hasOwnProperty('loopPlaylistItems')) {
-        this.loopPlaylistItems = options.loopPlaylistItems;
-        if (this.loopPlaylistItems) {
-            this.loop = false;
-        }
-    }
+                this._loadPlaylist(playlist);
+            }
+        },
+        setVolume: {
+            value: function setVolume(level) {
+                if (this.currMediaType === "image") {
+                    return;
+                }
 
-    var playlist = Playlist.makePlaylist(rawPlaylist);
+                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;
+                }
 
-    if (options.poster) {
-        this.poster = options.poster;
-    } else {
-        this.poster = findPoster(playlist);
-    }
+                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;
 
-    this._loadPlaylist(playlist);
-};
-
-DriveIn.prototype.setVolume = function(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;
-    }
-};
-
-DriveIn.prototype.setPlaybackRate = function(rate) {
-    if (this.currMediaType === 'image') {
-        return;
-    }
-
-    this.mediaEl.playbackRate = rate || 1.0;
-};
-
-DriveIn.prototype.getMedia = function() {
-    return this.mediaEl;
-};
-
-DriveIn.prototype.getPlaylist = function() {
-    return this.playlist;
-};
-
-DriveIn.prototype.getItem = function(itemNum) {
-    return this.playlist[itemNum];
-};
-
-DriveIn.prototype.play = function(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();
+                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;
+                }
+            }
         }
-    }
-};
+    });
 
-DriveIn.prototype.pause = function() {
-    if (this.currMediaType === 'video') {
-        this.mediaEl.pause();
-    } else {
-        if (this._slideshowTimer) {
-            this._slideshowTimer.pause();
-        }
-    }
-};
+    return DriveIn;
+})(Jvent);
 
-DriveIn.prototype.close = function() {
-    this._removeAllListeners();
-    this._cleanup();
-    if (this._slideshowTimer) {
-        this._slideshowTimer.destroy();
-        delete this._slideshowTimer;
-    }
-};
-
-DriveIn.prototype.currentTime = function() {
-    if (this.currMediaType === 'video') {
-        return this.mediaEl.currentTime;
-    } else {
-        return this._slideshowTimer.currentTime();
-    }
-};
-
-DriveIn.prototype.seekTo = function(time) {
-    this._seeking = true;
-    if (this.currMediaType === 'video') {
-        this.mediaEl.currentTime = time;
-    } else {
-        // Not enabled for image slideshows
-    }
-};
-
-DriveIn.prototype.duration = function() {
-    if (this.currMediaType === 'video') {
-        return this.mediaEl.duration;
-    } else {
-        return this.slideshowItemDuration;
-    }
-};
-
-module.exports = DriveIn;
+module.exports = DriveIn;

lib/playlist.js

@@ -0,21 +1,23 @@
+"use strict";
+
 function playlistItem(src) {
     var item = {},
         videoExts = {
-            mp4: true,
-            ogv: true,
-            webm: true
-        },
+        mp4: true,
+        ogv: true,
+        webm: true
+    },
         imageExts = {
-            jpg: true,
-            png: true,
-            gif: true
-        };
+        jpg: true,
+        png: true,
+        gif: true
+    };
 
-    var ext = src.replace(/[\?|\#].+/, '').match(/\.([mp4|ogv|webm|jpg|jpeg|png|gif]+)$/)[1];
+    var ext = src.replace(/[\?|\#].+/, "").match(/\.([mp4|ogv|webm|jpg|jpeg|png|gif]+)$/)[1];
 
     if (videoExts[ext]) {
-        if (ext === 'ogv') {
-            item.type = 'video/ogg';
+        if (ext === "ogv") {
+            item.type = "video/ogg";
         } else {
-            item.type = 'video/' + ext;
+            item.type = "video/" + ext;
         }
@@ -25,6 +27,6 @@ }
     if (imageExts[ext]) {
-        if (ext === 'jpg') {
-            item.type = 'image/jpeg';
+        if (ext === "jpg") {
+            item.type = "image/jpeg";
         } else {
-            item.type = 'image/' + ext;
+            item.type = "image/" + ext;
         }
@@ -54,3 +56,3 @@ }
 
-        if (typeof item === 'string') {
+        if (typeof item === "string") {
             if (depth === 0) {
@@ -67,3 +69,5 @@ playlist.push([playlistItem(item)]);
 
-exports.makePlaylist = makePlaylist;
-exports.makePlaylistItem = playlistItem;
+module.exports = {
+    makePlaylist: makePlaylist,
+    makePlaylistItem: playlistItem
+};

lib/timer.js

@@ -1,42 +0,70 @@
-var Jvent = require('jvent'),
-    inherits = require('inherits');
+"use strict";
 
-function Timer(callback, delay) {
-    var self = this;
-    var timerId, start, remaining = delay;
+var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
 
-    this.pause = function(silent) {
-        window.clearTimeout(timerId);
-        remaining -= new Date() - start;
+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; }; })();
 
-        if (!silent) this.emit('pause');
-    };
+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.resume = function(silent) {
-        start = new Date();
-        window.clearTimeout(timerId);
-        timerId = window.setTimeout(callback, remaining);
+var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 
-        if (!silent) this.emit('resume');
-    };
+var Jvent = _interopRequire(require("jvent"));
 
-    this.currentTime = function() {
-        var currTime = new Date() - start;
-        if (timerId) {
-            this.pause(true);
-            this.resume(true);
-        }
-        return currTime;
-    };
+var Timer = (function (_Jvent) {
+    function Timer(callback, delay) {
+        _classCallCheck(this, Timer);
 
-    this.destroy = function() {
-        self.pause(true);
-        self.removeAllListeners();
-    };
+        this.callback = callback;
+        this.remaining = delay;
+        this.timerId = null;
+        this.start = null;
 
-    this.resume();
-}
+        this.resume();
+    }
 
-inherits(Timer, Jvent);
+    _inherits(Timer, _Jvent);
 
-module.exports = Timer;
+    _createClass(Timer, {
+        pause: {
+            value: function pause(silent) {
+                clearTimeout(timerId);
+                this.remaining -= new Date() - this.start;
+
+                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;

lib/utils.js

@@ -1,4 +0,4 @@
-var internals = {};
+"use strict";
 
-internals.getWidth = function() {
+function getWidth() {
     if (self.innerHeight) {
@@ -15,5 +15,5 @@ return self.innerWidth;
     }
-};
+}
 
-internals.getHeight = function() {
+function getHeight() {
     if (self.innerHeight) {
@@ -30,15 +30,14 @@ return self.innerHeight;
     }
-};
+}
 
-internals.setStyles = function(el, props) {
-    var cssString = '';
+function setStyles(el, props) {
+    var cssString = "";
     for (var p in props) {
-        cssString += p + ':' + props[p] + ';';
+        cssString += p + ":" + props[p] + ";";
     }
-    el.style.cssText += ';' + cssString;
-};
+    el.style.cssText += ";" + cssString;
+}
 
-internals.findPoster = function(playlist) {
-    var poster,
-        item;
+function findPoster(playlist) {
+    var poster, item;
 
@@ -60,9 +59,9 @@ for (var i in playlist) {
     }
-};
+}
 
-internals.eachNode = function(nodes, fn) {
+function eachNode(nodes, fn) {
     [].slice.call(nodes).forEach(fn);
-};
+}
 
-internals.replaceChildren = function(el, newChildren) {
+function replaceChildren(el, newChildren) {
     var children = el.children || el.childNodes;
@@ -86,5 +85,5 @@
     }
-};
+}
 
-internals.createEl = function(name, props) {
+function createEl(name, props) {
     var el = document.createElement(name);
@@ -95,4 +94,12 @@ for (var prop in props) {
     return el;
-};
+}
 
-module.exports = internals;
+module.exports = {
+    getWidth: getWidth,
+    getHeight: getHeight,
+    setStyles: setStyles,
+    findPoster: findPoster,
+    eachNode: eachNode,
+    replaceChildren: replaceChildren,
+    createEl: createEl
+};

package.json

 {
   "name": "drive-in",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Core library for React Drive-In",
@@ -28,3 +28,22 @@ "main": "index.js",
     "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",
+    "minifyify": "^6.3.2",
+    "mocha": "^2.1.0",
+    "uglify-js": "^2.4.17",
+    "uglifyify": "^3.0.1"
+  },
+  "scripts": {
+    "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"
   }
 }

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

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

Total package byte prevSize

105756

increased by357.42%

Number of package files

16

increased by77.78%

Lines of code

2471

increased by258.12%

Worsened metrics

Dev dependency count

10

increased byInfinity%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

4

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes