[
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) Juan Cabrera <juan.acc@gmail.com> (juan.me)\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n"
  },
  {
    "path": "LoadAssets.js",
    "content": "var LoadAssets = React.createClass({\n  getInitialState: function () {\n    // 'loaded' state by default is false\n    return {loaded: false};\n  },\n\n  componentDidMount: function () {\n    var \n      _self = this, \n      totalAssets = this.props.assets.length, \n      loadedAssets = 0\n    ;\n\n    // Start loading all the assets\n    Array.prototype.forEach.call(this.props.assets, function(asset) {\n      _self.loadAsset(asset.uri, function(e) {\n        loadedAssets++;\n        if (loadedAssets == totalAssets) {\n          // when all the assets are loaded set state 'loaded' to true\n          _self.setState({loaded: true});\n\n          // when all the assets are loaded call the callback function if any\n          if (typeof(_self.props.onLoad) === \"function\") _self.props.onLoad();\n        }\n      });\n    });\n  },\n\n  loadAsset: function(uri, callback) {\n    // preload if asset is image\n    if (uri.toLowerCase().match(\"jpg|jpeg|gif|png|webp\") !== null) {\n      var image = new Image();\n      image.src = uri;\n      image.onload = callback;\n    }\n\n    // preload if asset is video\n    if (uri.toLowerCase().match(\"mp4|webm|ogv\") !== null) {\n      var video = document.createElement('video');\n      var source = document.createElement('source'); \n      source.src = uri;\n      video.setAttribute(\"preload\", \"auto\");\n      video.appendChild(source);\n      video.addEventListener('canplaythrough', callback, false);\n    }\n  }, \n\n  render: function() {\n    var output = [];\n\n    if (!this.state.loaded) {\n      // asset not loaded yet - loading UI\n      output.push(<div className=\"loading\"></div>);\n    } else {\n      // asset fully loaded - show asset\n      var assets = this.props.assets.map(function(asset) {\n        var assetOutput;\n        // it's an image\n        if (asset.uri.toLowerCase().match(\"jpg|jpeg|gif|png|webp\") !== null) {\n          assetOutput = (<img src={asset.uri} className={asset.className} />);\n        }\n        // it's a video\n        if (asset.uri.toLowerCase().match(\"mp4|webm|ogv\") !== null) {\n          // TODO: make it smart so it will create a video element with many sources instead of many video elements for different video formats\n          assetOutput = (\n            <video className={asset.className} >\n              <source src={asset.uri} type={\"video/\" + asset.uri.toLowerCase().split('.').pop()} />\n            </video>\n          );\n        }\n\n        // adding props if any\n        if (asset.attributes !== undefined) {\n          Array.prototype.forEach.call(asset.attributes, function(a) {\n            assetOutput.props[Object.keys(a)[0]] = a[Object.keys(a)[0]];\n          });\n        }\n\n        output.push(assetOutput);\n      });\n    }\n\n    return (<div className=\"wrapper\">{output}</div>); \n  }\n});\n"
  },
  {
    "path": "README.md",
    "content": "# React Asset Loader\nA 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.\n\n## Concept\nWe 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.\n\n## How it works\nThis 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.\n\n## Install\n```\nnpm install react-asset-loader --save-dev\n```\nOr just grab the component [LoadAsset.js](https://raw.githubusercontent.com/juancabrera/react-asset-loader/master/LoadAssets.js) directly.\n\n## Usage\n#### Load a single asset\n\n```javascript\n<LoadAssets assets={[{\"uri\":\"/static/images/asset.jpg\"}]} />\n```\n#### Load multiple assets\nWhen you need to load more than one asset for one experience. It will be loadad after all the assets passed are loaded.\n\n```javascript\n<LoadAssets assets={[{\"uri\":\"/static/videos/video1.mp4\"}, {\"uri\":\"/static/videos/video2.mp4\"}]} />\n\n// or also\n\nvar videos = [\n  {\"uri\":\"/static/videos/video1.mp4\"}, \n  {\"uri\":\"/static/videos/video2.mp4\"}\n]\n<LoadAssets assets={videos} />\n```\n#### Adding classes\nYou can add classes to each asset you pass to the component.\n\n```javascript\n<LoadAssets assets={[{\"uri\":\"/static/images/asset.jpg\", \"className\":\"class1 class2\"}]} />\n```\n#### Adding attributes\nYou can also add attributes to each asset you pass to the component.\n\n```javascript\n<LoadAssets assets={[{\"uri\":\"/static/videos/video.mp4\", \"attributes\":[{\"autoPlay\":\"true\"}, {\"loop\":\"true\"}]}]} />\n\n// or also\n\nvar video = [{\n  \"uri\":\"/static/videos/video.mp4\", \n  \"attributes\": [\n    {\"autoPlay\":\"true\"}, \n    {\"loop\":\"true\"}\n  ]\n}]\n<LoadAssets assets={video} />\n```\n#### Custom onLoad callback\nYou can have a custom callback for when your assets are loaded. \n\n```javascript\n<LoadAssets onLoad={this.onCoolVideoLoaded} assets={[{\"uri\":\"/static/videos/video.mp4\"}]} />\n```\n\n## Examples\nYou'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:\n\n```python -m SimpleHTTPServer```\n## Feedback and contributions\nAre more than welcome 👊\n\n## License\nMIT Copyright (c) [Juan Cabrera](http://juan.me)"
  },
  {
    "path": "examples/gifs.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script src=\"https://fb.me/react-0.13.2.js\"></script>\n    <script src=\"https://fb.me/JSXTransformer-0.13.2.js\"></script>\n    <script src=\"../LoadAssets.js\" type=\"text/jsx\"></script>\n    <style>\n      body {\n        margin: 0;\n      }\n      .gif-container {\n        position: relative;\n        width: 33.33vw;\n        height: 50vh;\n        float: left;\n      }\n      .gif-container div.wrapper {\n        width: 100%;\n        height: 100%;\n      }\n      .gif-container img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n      .loading {\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: url(loading.gif) no-repeat center center;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"perfectLoops\"></div>\n    <script type=\"text/jsx\">\n      var PerfectLoops = React.createClass({\n        getInitialState: function() {\n          return {data: []};\n        }, \n\n        componentDidMount: function() {\n          var xmlhttp = new XMLHttpRequest();\n          var _self = this;\n\n          xmlhttp.onreadystatechange = function() {\n            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {\n              _self.setState({data: JSON.parse(xmlhttp.responseText).data.children});\n            }\n          }\n\n          xmlhttp.open(\"GET\", \"http://www.reddit.com/r/perfectloops.json?limit=20\", true);\n          xmlhttp.send();\n        },\n\n        render: function() {\n          var GIFs = this.state.data.map(function(gif) {\n            if (gif.data.url.toLowerCase().match(\"gif|gifv\") !== null) {\n              return (\n                <div className=\"gif-container\">\n                  <LoadAssets assets={[{\"uri\":gif.data.url.replace(\"gifv\", \"gif\"), \"className\":\"test\"}]} />\n                </div>\n              )\n            }\n          });\n          return (<div>{GIFs}</div>);\n        }\n      });\n\n      React.render(\n        <PerfectLoops />,\n        document.getElementById('perfectLoops')\n      );\n    </script>\n  </body>\n</html>"
  },
  {
    "path": "examples/video.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script src=\"https://fb.me/react-0.13.2.js\"></script>\n    <script src=\"https://fb.me/JSXTransformer-0.13.2.js\"></script>\n    <script src=\"../LoadAssets.js\" type=\"text/jsx\"></script>\n    <style>\n      body {\n        margin: 0;\n      }\n      .loading {\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: url(loading.gif) no-repeat center center;\n      }\n      #elephantsDream {\n        width: 640px;\n        height: 360px;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        margin: -180px 0 0 -320px;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"elephantsDream\"></div>\n    <script type=\"text/jsx\">\n      React.render(\n        <LoadAssets assets={[{\"uri\":\"https://archive.org/download/ElephantsDream/ed_hd.mp4\", \"attributes\":[{\"autoPlay\":\"true\"}, {\"loop\":\"true\"}]}]} />,\n        document.getElementById('elephantsDream')\n      );\n    </script>\n  </body>\n</html>"
  },
  {
    "path": "index.js",
    "content": "'use strict';\n\nmodule.exports = {\n    LoadAssets: require('./LoadAssets')\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-asset-loader\",\n  \"version\": \"0.0.1\",\n  \"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.\",\n  \"main\": \"index.js\",\n  \"author\": {\n    \"name\": \"Juan Cabrera\",\n    \"email\": \"juan.acc@gmail.com\", \n    \"url\" : \"http://juan.me/\"\n  },\n  \"homepage\": \"https://github.com/juancabrera/react-asset-loader\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/juancabrera/react-asset-loader\"\n  },\n  \"keywords\": [\n    \"react\",\n    \"asset-loader\",\n    \"image\",\n    \"video\"\n  ],\n  \"licenses\": [\n    {\n      \"type\": \"MIT\",\n      \"url\": \"https://github.com/juancabrera/react-asset-loader/blob/master/LICENSE\"\n    }\n  ],\n  \"bugs\": {\n    \"url\": \"https://github.com/juancabrera/react-asset-loader/issues\"\n  }\n}"
  }
]