├── .babelrc ├── .gitignore ├── .npmignore ├── LICENCE ├── README.md ├── dist └── index.js ├── package.json └── src └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .editorconfig 3 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # brindille-preloader 2 | 3 | Promise or event based preloader using [PxLoader](https://github.com/thinkpixellab/PxLoader) 4 | 5 | ## Install 6 | With [npm](http://npmjs.org) do: 7 | 8 | ```bash 9 | $ npm install brindille-preloader --save 10 | ``` 11 | 12 | ## Usage 13 | 14 | ```js 15 | var preloader = require('brindille-preloader'); 16 | ``` 17 | 18 | ### Event based usage 19 | 20 | ```js 21 | preloader.on('progress', progressHandler); 22 | preloader.on('complete', completeHandler); 23 | preloader.on('error', errorHandler); 24 | preloader.load([ 25 | { id: 'img1', src: 'images/1.jpg', priority: 0, origin: 'anonymous' }, 26 | { id: 'img2', src: 'images/2.jpg', priority: 0, origin: 'anonymous' }, 27 | { id: 'vidTest', src: 'videos/vid.mp4', priority: 0, origin: 'anonymous' }, 28 | { id: 'soundTest', src: 'sounds/sound.mp3', priority: 0, origin: 'anonymous' } 29 | ]); 30 | ``` 31 | 32 | ### Promise based usage 33 | 34 | ```js 35 | preloader.load([ 36 | { id: 'img1', src: 'images/1.jpg', priority: 0, origin: 'anonymous' }, 37 | { id: 'img2', src: 'images/2.jpg', priority: 0, origin: 'anonymous' }, 38 | { id: 'vidTest', src: 'videos/vid.mp4', priority: 0, origin: 'anonymous' }, 39 | { id: 'soundTest', src: 'sounds/sound.mp3', priority: 0, origin: 'anonymous' } 40 | ]); 41 | preloader.getPromise() 42 | .then(completeHandler) 43 | .fail(errorHandler); 44 | ``` 45 | 46 | ### Get loaded ressource 47 | 48 | ```js 49 | var myImage = preloader.getImage('img1'); 50 | var myVideo = preloader.getVideo('vidTest'); 51 | var mySound = preloader.getSound('soundTest'); 52 | ``` 53 | 54 | ## License 55 | 56 | MIT -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8 | 9 | var _pxloader = require('pxloader'); 10 | 11 | var _pxloader2 = _interopRequireDefault(_pxloader); 12 | 13 | require('pxloader/PxLoaderImage'); 14 | 15 | require('pxloader/PxLoaderVideo'); 16 | 17 | require('pxloader/PxLoaderSound'); 18 | 19 | var _emitterComponent = require('emitter-component'); 20 | 21 | var _emitterComponent2 = _interopRequireDefault(_emitterComponent); 22 | 23 | var _q = require('q'); 24 | 25 | var _q2 = _interopRequireDefault(_q); 26 | 27 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 28 | 29 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 30 | 31 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 32 | 33 | function _inherits(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) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 34 | 35 | // regexp to know which kind of file is in manifest 36 | var IMAGE_PATTERN = /([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif|svg))/gi; 37 | var VIDEO_PATTERN = /([a-z\-_0-9\/\:\.]*\.(mp4|mov|webm|ogv))/gi; 38 | var SOUND_PATTERN = /([a-z\-_0-9\/\:\.]*\.(mp3|wav))/gi; 39 | 40 | var Preloader = function (_Emitter) { 41 | _inherits(Preloader, _Emitter); 42 | 43 | function Preloader() { 44 | _classCallCheck(this, Preloader); 45 | 46 | var _this = _possibleConstructorReturn(this, (Preloader.__proto__ || Object.getPrototypeOf(Preloader)).call(this)); 47 | 48 | _this._loader = new _pxloader2.default(); 49 | _this._deferred = _q2.default.defer(); 50 | _this.imagesContent = []; 51 | _this.soundsContent = []; 52 | _this.videosContent = []; 53 | return _this; 54 | } 55 | 56 | /** 57 | * Load manifest using PxLoader 58 | * @param {array} manifest array of object added to manifest 59 | * following this structure: 60 | * {id: 'someId', src: 'myUrl', priority: 0, origin: 'anonymous'} 61 | */ 62 | 63 | 64 | _createClass(Preloader, [{ 65 | key: 'load', 66 | value: function load(manifest) { 67 | this._loader.addCompletionListener(this._handleComplete.bind(this)); 68 | this._loader.addProgressListener(this._handleProgress.bind(this)); 69 | 70 | for (var i = 0, l = manifest.length; i < l; i++) { 71 | if (manifest[i].src.match(IMAGE_PATTERN)) { 72 | this.addImage(manifest[i]); 73 | } 74 | if (manifest[i].src.match(SOUND_PATTERN)) { 75 | this.addSound(manifest[i]); 76 | } 77 | if (manifest[i].src.match(VIDEO_PATTERN)) { 78 | this.addVideo(manifest[i]); 79 | } 80 | } 81 | 82 | this._loader.start(); 83 | return this; 84 | } 85 | 86 | /** 87 | * Return promise for projects based on it 88 | * @return {Promise} 89 | */ 90 | 91 | }, { 92 | key: 'getPromise', 93 | value: function getPromise() { 94 | return this._deferred.promise; 95 | } 96 | 97 | /** 98 | * Add image to preload 99 | * @param {Object} infos object following manifest object structure (see above) 100 | */ 101 | 102 | }, { 103 | key: 'addImage', 104 | value: function addImage(infos) { 105 | this.imagesContent[infos.id] = this._loader.addImage(infos.src, infos.id, infos.priority, infos.origin); 106 | } 107 | 108 | /** 109 | * Find image desired 110 | * @param {String} id image name 111 | * @return {Image} 112 | */ 113 | 114 | }, { 115 | key: 'getImage', 116 | value: function getImage(id) { 117 | return this.imagesContent[id]; 118 | } 119 | 120 | /** 121 | * Add sound to preload 122 | * @param {Object} infos object following manifest object structure (see above) 123 | */ 124 | 125 | }, { 126 | key: 'addSound', 127 | value: function addSound(infos) { 128 | this.soundsContent[infos.id] = this._loader.addSound(infos.id, infos.src, null, infos.priority); 129 | } 130 | 131 | /** 132 | * Find sound desired 133 | * @param {String} id sound name 134 | * @return {Image} 135 | */ 136 | 137 | }, { 138 | key: 'getSound', 139 | value: function getSound(id) { 140 | return this.soundsContent[id]; 141 | } 142 | 143 | /** 144 | * Add video to preload 145 | * @param {Object} infos object following manifest object structure (see above) 146 | */ 147 | 148 | }, { 149 | key: 'addVideo', 150 | value: function addVideo(infos) { 151 | this.videosContent[infos.id] = this._loader.addVideo(infos.src, infos.id, infos.priority, infos.origin); 152 | } 153 | 154 | /** 155 | * Find video desired 156 | * @param {String} id video name 157 | * @return {Image} 158 | */ 159 | 160 | }, { 161 | key: 'getVideo', 162 | value: function getVideo(id) { 163 | return this.videosContent[id]; 164 | } 165 | 166 | /** 167 | * Handle preload progression 168 | * @param {Object} e 169 | */ 170 | 171 | }, { 172 | key: '_handleProgress', 173 | value: function _handleProgress(e) { 174 | if (e.error || e.timeout) { 175 | return this._handleError(e); 176 | } 177 | 178 | this.emit('progress', e); 179 | } 180 | 181 | /** 182 | * Handle preload errors and reject promise 183 | * @param {Object} e 184 | */ 185 | 186 | }, { 187 | key: '_handleError', 188 | value: function _handleError(e) { 189 | this._deferred.reject(); 190 | this.emit('error', e); 191 | } 192 | 193 | /** 194 | * Handle preload complete and resolve promise 195 | * @param {Object} e 196 | */ 197 | 198 | }, { 199 | key: '_handleComplete', 200 | value: function _handleComplete(e) { 201 | var res = []; 202 | 203 | for (var i in this.imagesContent) { 204 | res[i] = this.imagesContent[i]; 205 | } 206 | 207 | for (var j in this.soundsContent) { 208 | res[j] = this.soundsContent[j]; 209 | } 210 | 211 | for (var k in this.videosContent) { 212 | res[k] = this.videosContent[k]; 213 | } 214 | 215 | this._deferred.resolve(res); 216 | this.emit('complete', res); 217 | } 218 | }]); 219 | 220 | return Preloader; 221 | }(_emitterComponent2.default); 222 | 223 | exports.default = new Preloader(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "brindille-preloader", 3 | "version": "2.0.0", 4 | "description": "Promise or event based preloader using PxLoader", 5 | "main": "dist/index.js", 6 | "author": { 7 | "name": "Valentin Daguenet", 8 | "email": "valentin.daguenet@gmail.com", 9 | "url": "https://github.com/vdaguenet" 10 | }, 11 | "contributors": [ 12 | { 13 | "name": "Guillaume Gouessan", 14 | "email": "guillaume.gouessan@gmail.com", 15 | "url": "https://github.com/superguigui" 16 | } 17 | ], 18 | "scripts": { 19 | "compile": "babel -d dist/ src/", 20 | "prepublish": "npm run compile" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/brindille/brindille-preloader.git" 25 | }, 26 | "keywords": [ 27 | "Preloader", 28 | "Promise", 29 | "PxLoader", 30 | "Event" 31 | ], 32 | "license": "MIT", 33 | "dependencies": { 34 | "emitter-component": "^1.1.1", 35 | "pxloader": "^1.1.2", 36 | "q": "^1.4.1" 37 | }, 38 | "bugs": { 39 | "url": "https://github.com/brindille/brindille-preloader/issues" 40 | }, 41 | "homepage": "https://github.com/brindille/brindille-preloader", 42 | "devDependencies": { 43 | "babel-cli": "^6.16.0", 44 | "babel-preset-es2015": "^6.16.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import PxLoader from 'pxloader'; 2 | import 'pxloader/PxLoaderImage'; 3 | import 'pxloader/PxLoaderVideo'; 4 | import 'pxloader/PxLoaderSound'; 5 | import Emitter from 'emitter-component'; 6 | import Q from 'q'; 7 | 8 | // regexp to know which kind of file is in manifest 9 | const IMAGE_PATTERN = /([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif|svg))/gi; 10 | const VIDEO_PATTERN = /([a-z\-_0-9\/\:\.]*\.(mp4|mov|webm|ogv))/gi; 11 | const SOUND_PATTERN = /([a-z\-_0-9\/\:\.]*\.(mp3|wav))/gi; 12 | 13 | class Preloader extends Emitter { 14 | constructor() { 15 | super(); 16 | this._loader = new PxLoader(); 17 | this._deferred = Q.defer(); 18 | this.imagesContent = []; 19 | this.soundsContent = []; 20 | this.videosContent = []; 21 | } 22 | 23 | /** 24 | * Load manifest using PxLoader 25 | * @param {array} manifest array of object added to manifest 26 | * following this structure: 27 | * {id: 'someId', src: 'myUrl', priority: 0, origin: 'anonymous'} 28 | */ 29 | load(manifest) { 30 | this._loader.addCompletionListener(this._handleComplete.bind(this)); 31 | this._loader.addProgressListener(this._handleProgress.bind(this)); 32 | 33 | for (let i = 0, l = manifest.length; i < l; i++) { 34 | if (manifest[i].src.match(IMAGE_PATTERN)) { this.addImage(manifest[i]); } 35 | if (manifest[i].src.match(SOUND_PATTERN)) { this.addSound(manifest[i]); } 36 | if (manifest[i].src.match(VIDEO_PATTERN)) { this.addVideo(manifest[i]); } 37 | } 38 | 39 | this._loader.start(); 40 | return this; 41 | } 42 | 43 | /** 44 | * Return promise for projects based on it 45 | * @return {Promise} 46 | */ 47 | getPromise() { 48 | return this._deferred.promise; 49 | } 50 | 51 | /** 52 | * Add image to preload 53 | * @param {Object} infos object following manifest object structure (see above) 54 | */ 55 | addImage(infos) { 56 | this.imagesContent[infos.id] = this._loader.addImage(infos.src, infos.id, infos.priority, infos.origin); 57 | } 58 | 59 | /** 60 | * Find image desired 61 | * @param {String} id image name 62 | * @return {Image} 63 | */ 64 | getImage(id) { 65 | return this.imagesContent[id]; 66 | } 67 | 68 | /** 69 | * Add sound to preload 70 | * @param {Object} infos object following manifest object structure (see above) 71 | */ 72 | addSound(infos) { 73 | this.soundsContent[infos.id] = this._loader.addSound(infos.id, infos.src, null, infos.priority); 74 | } 75 | 76 | /** 77 | * Find sound desired 78 | * @param {String} id sound name 79 | * @return {Image} 80 | */ 81 | getSound(id) { 82 | return this.soundsContent[id]; 83 | } 84 | 85 | /** 86 | * Add video to preload 87 | * @param {Object} infos object following manifest object structure (see above) 88 | */ 89 | addVideo(infos) { 90 | this.videosContent[infos.id] = this._loader.addVideo(infos.src, infos.id, infos.priority, infos.origin); 91 | } 92 | 93 | /** 94 | * Find video desired 95 | * @param {String} id video name 96 | * @return {Image} 97 | */ 98 | getVideo(id) { 99 | return this.videosContent[id]; 100 | } 101 | 102 | /** 103 | * Handle preload progression 104 | * @param {Object} e 105 | */ 106 | _handleProgress(e) { 107 | if (e.error || e.timeout) { 108 | return this._handleError(e); 109 | } 110 | 111 | this.emit('progress', e); 112 | } 113 | 114 | /** 115 | * Handle preload errors and reject promise 116 | * @param {Object} e 117 | */ 118 | _handleError(e) { 119 | this._deferred.reject(); 120 | this.emit('error', e); 121 | } 122 | 123 | /** 124 | * Handle preload complete and resolve promise 125 | * @param {Object} e 126 | */ 127 | _handleComplete(e) { 128 | let res = []; 129 | 130 | for (let i in this.imagesContent) { 131 | res[i] = this.imagesContent[i]; 132 | } 133 | 134 | for (let j in this.soundsContent) { 135 | res[j] = this.soundsContent[j]; 136 | } 137 | 138 | for (let k in this.videosContent) { 139 | res[k] = this.videosContent[k]; 140 | } 141 | 142 | this._deferred.resolve(res); 143 | this.emit('complete', res); 144 | } 145 | } 146 | 147 | export default new Preloader(); 148 | --------------------------------------------------------------------------------