Repository: juancabrera/react-asset-loader
Branch: master
Commit: acac7e928c62
Files: 7
Total size: 10.5 KB

Directory structure:
gitextract_ohqdivx9/

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

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) Juan Cabrera <juan.acc@gmail.com> (juan.me)

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.



================================================
FILE: LoadAssets.js
================================================
var LoadAssets = React.createClass({
  getInitialState: function () {
    // 'loaded' state by default is false
    return {loaded: false};
  },

  componentDidMount: function () {
    var 
      _self = this, 
      totalAssets = this.props.assets.length, 
      loadedAssets = 0
    ;

    // Start loading all the assets
    Array.prototype.forEach.call(this.props.assets, function(asset) {
      _self.loadAsset(asset.uri, function(e) {
        loadedAssets++;
        if (loadedAssets == totalAssets) {
          // when all the assets are loaded set state 'loaded' to true
          _self.setState({loaded: true});

          // when all the assets are loaded call the callback function if any
          if (typeof(_self.props.onLoad) === "function") _self.props.onLoad();
        }
      });
    });
  },

  loadAsset: function(uri, callback) {
    // preload if asset is image
    if (uri.toLowerCase().match("jpg|jpeg|gif|png|webp") !== null) {
      var image = new Image();
      image.src = uri;
      image.onload = callback;
    }

    // preload if asset is video
    if (uri.toLowerCase().match("mp4|webm|ogv") !== null) {
      var video = document.createElement('video');
      var source = document.createElement('source'); 
      source.src = uri;
      video.setAttribute("preload", "auto");
      video.appendChild(source);
      video.addEventListener('canplaythrough', callback, false);
    }
  }, 

  render: function() {
    var output = [];

    if (!this.state.loaded) {
      // asset not loaded yet - loading UI
      output.push(<div className="loading"></div>);
    } else {
      // asset fully loaded - show asset
      var assets = this.props.assets.map(function(asset) {
        var assetOutput;
        // it's an image
        if (asset.uri.toLowerCase().match("jpg|jpeg|gif|png|webp") !== null) {
          assetOutput = (<img src={asset.uri} className={asset.className} />);
        }
        // it's a video
        if (asset.uri.toLowerCase().match("mp4|webm|ogv") !== null) {
          // TODO: make it smart so it will create a video element with many sources instead of many video elements for different video formats
          assetOutput = (
            <video className={asset.className} >
              <source src={asset.uri} type={"video/" + asset.uri.toLowerCase().split('.').pop()} />
            </video>
          );
        }

        // adding props if any
        if (asset.attributes !== undefined) {
          Array.prototype.forEach.call(asset.attributes, function(a) {
            assetOutput.props[Object.keys(a)[0]] = a[Object.keys(a)[0]];
          });
        }

        output.push(assetOutput);
      });
    }

    return (<div className="wrapper">{output}</div>); 
  }
});


================================================
FILE: README.md
================================================
# React Asset Loader
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.

## Concept
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.

## How it works
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.

## Install
```
npm install react-asset-loader --save-dev
```
Or just grab the component [LoadAsset.js](https://raw.githubusercontent.com/juancabrera/react-asset-loader/master/LoadAssets.js) directly.

## Usage
#### Load a single asset

```javascript
<LoadAssets assets={[{"uri":"/static/images/asset.jpg"}]} />
```
#### Load multiple assets
When you need to load more than one asset for one experience. It will be loadad after all the assets passed are loaded.

```javascript
<LoadAssets assets={[{"uri":"/static/videos/video1.mp4"}, {"uri":"/static/videos/video2.mp4"}]} />

// or also

var videos = [
  {"uri":"/static/videos/video1.mp4"}, 
  {"uri":"/static/videos/video2.mp4"}
]
<LoadAssets assets={videos} />
```
#### Adding classes
You can add classes to each asset you pass to the component.

```javascript
<LoadAssets assets={[{"uri":"/static/images/asset.jpg", "className":"class1 class2"}]} />
```
#### Adding attributes
You can also add attributes to each asset you pass to the component.

```javascript
<LoadAssets assets={[{"uri":"/static/videos/video.mp4", "attributes":[{"autoPlay":"true"}, {"loop":"true"}]}]} />

// or also

var video = [{
  "uri":"/static/videos/video.mp4", 
  "attributes": [
    {"autoPlay":"true"}, 
    {"loop":"true"}
  ]
}]
<LoadAssets assets={video} />
```
#### Custom onLoad callback
You can have a custom callback for when your assets are loaded. 

```javascript
<LoadAssets onLoad={this.onCoolVideoLoaded} assets={[{"uri":"/static/videos/video.mp4"}]} />
```

## Examples
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:

```python -m SimpleHTTPServer```
## Feedback and contributions
Are more than welcome 👊

## License
MIT Copyright (c) [Juan Cabrera](http://juan.me)

================================================
FILE: examples/gifs.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="../LoadAssets.js" type="text/jsx"></script>
    <style>
      body {
        margin: 0;
      }
      .gif-container {
        position: relative;
        width: 33.33vw;
        height: 50vh;
        float: left;
      }
      .gif-container div.wrapper {
        width: 100%;
        height: 100%;
      }
      .gif-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .loading {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: url(loading.gif) no-repeat center center;
      }
    </style>
  </head>
  <body>
    <div id="perfectLoops"></div>
    <script type="text/jsx">
      var PerfectLoops = React.createClass({
        getInitialState: function() {
          return {data: []};
        }, 

        componentDidMount: function() {
          var xmlhttp = new XMLHttpRequest();
          var _self = this;

          xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              _self.setState({data: JSON.parse(xmlhttp.responseText).data.children});
            }
          }

          xmlhttp.open("GET", "http://www.reddit.com/r/perfectloops.json?limit=20", true);
          xmlhttp.send();
        },

        render: function() {
          var GIFs = this.state.data.map(function(gif) {
            if (gif.data.url.toLowerCase().match("gif|gifv") !== null) {
              return (
                <div className="gif-container">
                  <LoadAssets assets={[{"uri":gif.data.url.replace("gifv", "gif"), "className":"test"}]} />
                </div>
              )
            }
          });
          return (<div>{GIFs}</div>);
        }
      });

      React.render(
        <PerfectLoops />,
        document.getElementById('perfectLoops')
      );
    </script>
  </body>
</html>

================================================
FILE: examples/video.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="../LoadAssets.js" type="text/jsx"></script>
    <style>
      body {
        margin: 0;
      }
      .loading {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: url(loading.gif) no-repeat center center;
      }
      #elephantsDream {
        width: 640px;
        height: 360px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -180px 0 0 -320px;
      }
    </style>
  </head>
  <body>
    <div id="elephantsDream"></div>
    <script type="text/jsx">
      React.render(
        <LoadAssets assets={[{"uri":"https://archive.org/download/ElephantsDream/ed_hd.mp4", "attributes":[{"autoPlay":"true"}, {"loop":"true"}]}]} />,
        document.getElementById('elephantsDream')
      );
    </script>
  </body>
</html>

================================================
FILE: index.js
================================================
'use strict';

module.exports = {
    LoadAssets: require('./LoadAssets')
};


================================================
FILE: package.json
================================================
{
  "name": "react-asset-loader",
  "version": "0.0.1",
  "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.",
  "main": "index.js",
  "author": {
    "name": "Juan Cabrera",
    "email": "juan.acc@gmail.com", 
    "url" : "http://juan.me/"
  },
  "homepage": "https://github.com/juancabrera/react-asset-loader",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/juancabrera/react-asset-loader"
  },
  "keywords": [
    "react",
    "asset-loader",
    "image",
    "video"
  ],
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/juancabrera/react-asset-loader/blob/master/LICENSE"
    }
  ],
  "bugs": {
    "url": "https://github.com/juancabrera/react-asset-loader/issues"
  }
}