├── LICENSE
├── LoadAssets.js
├── README.md
├── examples
    ├── gifs.html
    ├── loading.gif
    └── video.html
├── index.js
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Juan Cabrera <juan.acc@gmail.com> (juan.me)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining
 6 | a copy of this software and associated documentation files (the
 7 | "Software"), to deal in the Software without restriction, including
 8 | without limitation the rights to use, copy, modify, merge, publish,
 9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | 


--------------------------------------------------------------------------------
/LoadAssets.js:
--------------------------------------------------------------------------------
 1 | var LoadAssets = React.createClass({
 2 |   getInitialState: function () {
 3 |     // 'loaded' state by default is false
 4 |     return {loaded: false};
 5 |   },
 6 | 
 7 |   componentDidMount: function () {
 8 |     var 
 9 |       _self = this, 
10 |       totalAssets = this.props.assets.length, 
11 |       loadedAssets = 0
12 |     ;
13 | 
14 |     // Start loading all the assets
15 |     Array.prototype.forEach.call(this.props.assets, function(asset) {
16 |       _self.loadAsset(asset.uri, function(e) {
17 |         loadedAssets++;
18 |         if (loadedAssets == totalAssets) {
19 |           // when all the assets are loaded set state 'loaded' to true
20 |           _self.setState({loaded: true});
21 | 
22 |           // when all the assets are loaded call the callback function if any
23 |           if (typeof(_self.props.onLoad) === "function") _self.props.onLoad();
24 |         }
25 |       });
26 |     });
27 |   },
28 | 
29 |   loadAsset: function(uri, callback) {
30 |     // preload if asset is image
31 |     if (uri.toLowerCase().match("jpg|jpeg|gif|png|webp") !== null) {
32 |       var image = new Image();
33 |       image.src = uri;
34 |       image.onload = callback;
35 |     }
36 | 
37 |     // preload if asset is video
38 |     if (uri.toLowerCase().match("mp4|webm|ogv") !== null) {
39 |       var video = document.createElement('video');
40 |       var source = document.createElement('source'); 
41 |       source.src = uri;
42 |       video.setAttribute("preload", "auto");
43 |       video.appendChild(source);
44 |       video.addEventListener('canplaythrough', callback, false);
45 |     }
46 |   }, 
47 | 
48 |   render: function() {
49 |     var output = [];
50 | 
51 |     if (!this.state.loaded) {
52 |       // asset not loaded yet - loading UI
53 |       output.push(<div className="loading"></div>);
54 |     } else {
55 |       // asset fully loaded - show asset
56 |       var assets = this.props.assets.map(function(asset) {
57 |         var assetOutput;
58 |         // it's an image
59 |         if (asset.uri.toLowerCase().match("jpg|jpeg|gif|png|webp") !== null) {
60 |           assetOutput = (<img src={asset.uri} className={asset.className} />);
61 |         }
62 |         // it's a video
63 |         if (asset.uri.toLowerCase().match("mp4|webm|ogv") !== null) {
64 |           // TODO: make it smart so it will create a video element with many sources instead of many video elements for different video formats
65 |           assetOutput = (
66 |             <video className={asset.className} >
67 |               <source src={asset.uri} type={"video/" + asset.uri.toLowerCase().split('.').pop()} />
68 |             </video>
69 |           );
70 |         }
71 | 
72 |         // adding props if any
73 |         if (asset.attributes !== undefined) {
74 |           Array.prototype.forEach.call(asset.attributes, function(a) {
75 |             assetOutput.props[Object.keys(a)[0]] = a[Object.keys(a)[0]];
76 |           });
77 |         }
78 | 
79 |         output.push(assetOutput);
80 |       });
81 |     }
82 | 
83 |     return (<div className="wrapper">{output}</div>); 
84 |   }
85 | });
86 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Asset Loader
 2 | A simple react component for loading assets. It allows you to load from a single asset to multiple assets without affecting the pageload speed. You can also add custom classes, attributes and callback functions.
 3 | 
 4 | ## Concept
 5 | We all get scared of heavy websites, there are tons and tons of articles telling us why we shouldn't build websites using heavy assets like videos or gifs. But sometimes, you just need to, sometimes you just need to build a cool interactive experience with videos, or so something cool with gifs, or a long page with lots of high quality images, etc. This component is precisely for that.
 6 | 
 7 | ## How it works
 8 | This component allows you to load all the assets you want without affecting the pageload speed, this is because it will load the page and then it will start loading all the assets, it adds a `<div className="loading"></div>` wrapper while it's loading the asset so you can have a nice custom loader, when the assets are loaded it will replace the `loading` wrapper with the actual assets.
 9 | 
10 | ## Install
11 | ```
12 | npm install react-asset-loader --save-dev
13 | ```
14 | Or just grab the component [LoadAsset.js](https://raw.githubusercontent.com/juancabrera/react-asset-loader/master/LoadAssets.js) directly.
15 | 
16 | ## Usage
17 | #### Load a single asset
18 | 
19 | ```javascript
20 | <LoadAssets assets={[{"uri":"/static/images/asset.jpg"}]} />
21 | ```
22 | #### Load multiple assets
23 | When you need to load more than one asset for one experience. It will be loadad after all the assets passed are loaded.
24 | 
25 | ```javascript
26 | <LoadAssets assets={[{"uri":"/static/videos/video1.mp4"}, {"uri":"/static/videos/video2.mp4"}]} />
27 | 
28 | // or also
29 | 
30 | var videos = [
31 |   {"uri":"/static/videos/video1.mp4"}, 
32 |   {"uri":"/static/videos/video2.mp4"}
33 | ]
34 | <LoadAssets assets={videos} />
35 | ```
36 | #### Adding classes
37 | You can add classes to each asset you pass to the component.
38 | 
39 | ```javascript
40 | <LoadAssets assets={[{"uri":"/static/images/asset.jpg", "className":"class1 class2"}]} />
41 | ```
42 | #### Adding attributes
43 | You can also add attributes to each asset you pass to the component.
44 | 
45 | ```javascript
46 | <LoadAssets assets={[{"uri":"/static/videos/video.mp4", "attributes":[{"autoPlay":"true"}, {"loop":"true"}]}]} />
47 | 
48 | // or also
49 | 
50 | var video = [{
51 |   "uri":"/static/videos/video.mp4", 
52 |   "attributes": [
53 |     {"autoPlay":"true"}, 
54 |     {"loop":"true"}
55 |   ]
56 | }]
57 | <LoadAssets assets={video} />
58 | ```
59 | #### Custom onLoad callback
60 | You can have a custom callback for when your assets are loaded. 
61 | 
62 | ```javascript
63 | <LoadAssets onLoad={this.onCoolVideoLoaded} assets={[{"uri":"/static/videos/video.mp4"}]} />
64 | ```
65 | 
66 | ## Examples
67 | You'll need a webserver in order to run the examples (CORS). The quickest way to do this is just run this on the project folder:
68 | 
69 | ```python -m SimpleHTTPServer```
70 | ## Feedback and contributions
71 | Are more than welcome 👊
72 | 
73 | ## License
74 | MIT Copyright (c) [Juan Cabrera](http://juan.me)


--------------------------------------------------------------------------------
/examples/gifs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://fb.me/react-0.13.2.js"></script>
 5 |     <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
 6 |     <script src="../LoadAssets.js" type="text/jsx"></script>
 7 |     <style>
 8 |       body {
 9 |         margin: 0;
10 |       }
11 |       .gif-container {
12 |         position: relative;
13 |         width: 33.33vw;
14 |         height: 50vh;
15 |         float: left;
16 |       }
17 |       .gif-container div.wrapper {
18 |         width: 100%;
19 |         height: 100%;
20 |       }
21 |       .gif-container img {
22 |         width: 100%;
23 |         height: 100%;
24 |         object-fit: cover;
25 |       }
26 |       .loading {
27 |         position: absolute;
28 |         top: 0;
29 |         left: 0;
30 |         bottom: 0;
31 |         right: 0;
32 |         background: url(loading.gif) no-repeat center center;
33 |       }
34 |     </style>
35 |   </head>
36 |   <body>
37 |     <div id="perfectLoops"></div>
38 |     <script type="text/jsx">
39 |       var PerfectLoops = React.createClass({
40 |         getInitialState: function() {
41 |           return {data: []};
42 |         }, 
43 | 
44 |         componentDidMount: function() {
45 |           var xmlhttp = new XMLHttpRequest();
46 |           var _self = this;
47 | 
48 |           xmlhttp.onreadystatechange = function() {
49 |             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
50 |               _self.setState({data: JSON.parse(xmlhttp.responseText).data.children});
51 |             }
52 |           }
53 | 
54 |           xmlhttp.open("GET", "http://www.reddit.com/r/perfectloops.json?limit=20", true);
55 |           xmlhttp.send();
56 |         },
57 | 
58 |         render: function() {
59 |           var GIFs = this.state.data.map(function(gif) {
60 |             if (gif.data.url.toLowerCase().match("gif|gifv") !== null) {
61 |               return (
62 |                 <div className="gif-container">
63 |                   <LoadAssets assets={[{"uri":gif.data.url.replace("gifv", "gif"), "className":"test"}]} />
64 |                 </div>
65 |               )
66 |             }
67 |           });
68 |           return (<div>{GIFs}</div>);
69 |         }
70 |       });
71 | 
72 |       React.render(
73 |         <PerfectLoops />,
74 |         document.getElementById('perfectLoops')
75 |       );
76 |     </script>
77 |   </body>
78 | </html>


--------------------------------------------------------------------------------
/examples/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juancabrera/react-asset-loader/acac7e928c6245b194d7b4efd7b4bbe3eaeb3f41/examples/loading.gif


--------------------------------------------------------------------------------
/examples/video.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://fb.me/react-0.13.2.js"></script>
 5 |     <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
 6 |     <script src="../LoadAssets.js" type="text/jsx"></script>
 7 |     <style>
 8 |       body {
 9 |         margin: 0;
10 |       }
11 |       .loading {
12 |         position: absolute;
13 |         top: 0;
14 |         left: 0;
15 |         bottom: 0;
16 |         right: 0;
17 |         background: url(loading.gif) no-repeat center center;
18 |       }
19 |       #elephantsDream {
20 |         width: 640px;
21 |         height: 360px;
22 |         position: absolute;
23 |         top: 50%;
24 |         left: 50%;
25 |         margin: -180px 0 0 -320px;
26 |       }
27 |     </style>
28 |   </head>
29 |   <body>
30 |     <div id="elephantsDream"></div>
31 |     <script type="text/jsx">
32 |       React.render(
33 |         <LoadAssets assets={[{"uri":"https://archive.org/download/ElephantsDream/ed_hd.mp4", "attributes":[{"autoPlay":"true"}, {"loop":"true"}]}]} />,
34 |         document.getElementById('elephantsDream')
35 |       );
36 |     </script>
37 |   </body>
38 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | module.exports = {
4 |     LoadAssets: require('./LoadAssets')
5 | };
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-asset-loader",
 3 |   "version": "0.0.1",
 4 |   "description": "A simple react component for loading assets. It allows you to load from a single asset to multiple assets without affecting the pageload speed. You can also add custom classes, attributes and callback functions.",
 5 |   "main": "index.js",
 6 |   "author": {
 7 |     "name": "Juan Cabrera",
 8 |     "email": "juan.acc@gmail.com", 
 9 |     "url" : "http://juan.me/"
10 |   },
11 |   "homepage": "https://github.com/juancabrera/react-asset-loader",
12 |   "scripts": {
13 |     "test": "echo \"Error: no test specified\" && exit 1"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "https://github.com/juancabrera/react-asset-loader"
18 |   },
19 |   "keywords": [
20 |     "react",
21 |     "asset-loader",
22 |     "image",
23 |     "video"
24 |   ],
25 |   "licenses": [
26 |     {
27 |       "type": "MIT",
28 |       "url": "https://github.com/juancabrera/react-asset-loader/blob/master/LICENSE"
29 |     }
30 |   ],
31 |   "bugs": {
32 |     "url": "https://github.com/juancabrera/react-asset-loader/issues"
33 |   }
34 | }


--------------------------------------------------------------------------------