Atorable-loader NPM

atorable-loader

High data costs? Slow PageSpeed? High server load? Need a solution for viral content? Atorable.com moves more content.

As more users visit your site the more users serve up your content. More users makes faster downloads, less server load, lower data costs, more decentralized. PageSpeed will also increases by not blocking page load. Designed for use with Webpack and atorable-react.

The atorable-loader resolves import/require() of a file into a Webtorrent magnet uri. During the webpack build the target file is emitted along with the corresponding torrent file into the output directory. The emitted files act as the seeds for the torrent when the root url is provided to the build. Atorable.com offers a paid plans that integrates easily with your build to further decrease your server load. Contact us for custom solutions.

Demo

Getting Started

To begin, you'll need to install atorable-loader:

$ npm install atorable-loader --save-dev

Import (or require) the target file(s) in one of the bundle's files (see atorable-react):

file.tsx

import React from 'react'
import { ATorVidStrm, ATorImg, ATorVid } from 'atorable-react'

import hugeImage from './hugeImage.jpg' // ==> 'magnet:?xt=urn:...'
import bestMovieEverTribute from './bestMovieEverTribute.mp4' // ==> 'magnet:?xt=urn:...'
const oceanFish = require('./oceanFish.mp4') // ==> {default: 'magnet:?xt=urn:...'}

const Example = (props: any) => {
    return (
        <div>
            <ATorVid
                width={'320'}
                height={'240'}
                type={'video/mp4'}
                magnetURI={oceanFish}
                loading={<h2 style={{ color: 'orange' }}>Loading</h2>} // optional
            />
            <ATorVidStrm
                width={'320'}
                height={'240'}
                type={'video/mp4'}
                autoplay={true}
                magnetURI={bestMovieEverTribute}
            />
            <ATorStreamVideo
                aspectRatio={3 / 4}
                type={'video/mp4'}
                magnetURI={bestMovieEverTribute}
                autoplay={true}
            />
            // aspectRatio={height / width} aspectRatio works best for responsive
            videos
            <ATorImg magnetURI={hugeImage} style={{ border: 'solid' }} />
        </div>
    )
}

Then add the loader to your webpack config. For example:

webpack.config.js

const rootURL = 'http://localhost:8080/' // Define your root url http://example.com/
// this makes it possible for the initial torrent to be downloaded ending slash / is important.

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg|m4v|mp4)$/i,
                //   test: /src[\\\/]assets[\\\/]Needle\.jpg$/, // for targeting a specific file
                use: [
                    {
                        loader: 'atorable-loader',
                        options: {
                            baseURL: rootURL,
                            showMagnetInfo: true // optional
                        }
                    }
                ]
            }
        ]
    }
}

And run webpack via your preferred method. This will emit file.* and a file.torrent file in the output directory.

Paid/Pro Version

This makes it possible for the initial torrent to be seeded from an external server reducing local load, improving PageSpeed and faster high demand downloads.

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg|m4v|mp4)$/i,
                use: [
                    {
                        loader: 'atorable-loader',
                        options: {
                            ATORABLE_SECRET_KEY:
                                process.env.ATORABLE_SECRET_KEY, // access token from atorable.com
                            showMagnetInfo: true, // optional
                            PRODUCTION: true // optional default: false
                            // if true, this will only update production build files
                        }
                    }
                ]
            }
        ]
    }
}

When you run webpack the Atorable.com API will send relevant files to an external server and return magnetURIs.

Options

`Function`

For use with a set build environment NODE_ENV=development (not relevant to webpack env settings i.e. EnvironmentPlugin)

webpack.config.js

const devURL = 'http://localhost:8080/' // Define your root url
const prodURL = 'http://www.example.com/'

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'atorable-loader',
                        options: {
                            rootUrl() {
                                console.log(
                                    'Here Node env: ',
                                    process.env.NODE_ENV
                                )
                                if (process.env.NODE_ENV === 'development') {
                                    return devURL
                                }

                                return prodURL
                            }
                        }
                    }
                ]
            }
        ]
    }
}

Target

`Array`

Webpack include & exclude

webpack.config.js

const rootURL = 'http://localhost:8080/' // Define your root url http://example.com/

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'atorable-loader',
                        options: {
                            baseURL: rootURL
                        }
                    }
                ],
                include: [path.resolve(__dirname, 'img')],
                exclude: [
                    path.resolve(__dirname, 'app/demo-files'),
                    /node_modules/,
                    /doNotWant\.jpg$/
                ]
            }
        ]
    }
}