ATORABLE

atorable-react

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

The atorable-react package is a React component that processes a Webtorrent magnet uri. As more users visit your site the more users serve up your content. More users makes faster downloads, less server load, lower data costs. PageSpeed will also increases by not blocking page load. Using Webpack? Try atorable-loader.

Demo

Updates / Upgrade to Version 1.1.0 (props)

magnetLink ==> magnetURI type: string ==> 'video/mp4' or 'video/webm' or 'video/ogg' WrapATor ==> ATorWrap

Optional: added ability to set loading component

loading={<h2 style={{ color: 'orange' }}>Loading</ h2>}

Getting Started

npm install --save atorable-react

Primary usage w/ atorable-loader

Webpack loader converts files to magnetURI. Below are some example usage with images and video (streaming limited to .mp4) see advanced usage for more flexibility

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>}/>

      <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>
  )
}

Magnet URI usage

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

let imgPath = 'magnet:?xt=urn:btih:...'
let sintel = 'magnet:?xt=urn:btih:...'
let oceanFish = 'magnet:?xt=urn:btih:...'
let iso = 'magnet:?xt=urn:btih:...'

const Example = (props: any) => {
  return (
    <div>
      <ATorVid width={'320'} height={'240'} type={'video/mp4'} magnetURI={oceanFish} />

      <ATorVidStrm width={'320'} height={'240'} type={'video/mp4'} magnetURI={sintel} />

      <ATorImg magnetURI={imgPath} style={{border: 'solid'}} />

      <ATorDownloader
          magnetURI={iso}
          startDownload={true}        // default false (toggle to true to start download)
          ShowPrgrs={ShowPrgrs}       // example at bottom of readme
          DownloadLink={DownloadLink} // example at bottom of readme
        />
    </div>
  )
}

Advanced usage

Make a component to get wrapped with <T> and access props torrent, dwnldSpeed, downloaded, progress, peers, done, see Webtorrent Docs for more info on dealing with torrent objects.

import React, { useEffect, useState Fragment } from 'react'
import { T } from 'atorable-react'
import hugeImage from './hugeImage.jpg';

const WrappedImg = (props: any) => {
  let {torrent, width, height, sizes, style, done} = props,
      [urlState, updateUrl] = useState<string>()

    useEffect(() => {
      if (torrent) {
        let file = torrent.files[0]
        file.getBlobURL((err, url) => {
            if (err) throw err
            updateUrl(url)
        })
      }
      return () => {}
    }, [torrent])

  return (
    <Fragment>
      <img
        src={urlState}
        width={width}
        height={height}
        sizes={sizes}
        style={style}
      />
    </Fragment>
  )
}

const Example = (props: any) => {
  return (
    <div>
      <T magnetURI={hugeImage}>
        <WrappedImg width={'320'} height={'240'} style={{border: 'solid'}} />
      </T>
    </div>
  )
}

Progress Function and Download link

export const ShowPrgrs = (props: TorrentUpdates) => {
  let { peers, progress, downloaded } = props

  return (
    <div style={{ clear: 'both' }}>
      <div
        style={{
          width: '100%',
          height: '6px'
        }}
      >
        <div
          style={{
            background: 'limegreen',
            height: '4px',
            width: `${progress * 100}%`
          }}
        ></div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <div>Downloaded: {downloaded?.toFixed(1)} Mb</div>
        <div>Peers: {peers}</div>
      </div>
    </div>
  )
}

const DownloadLink = (props: {
    url: string | undefined
    filename: string
}) => {
    const { url, filename } = props
    return (
        <a href={url} download>
            Click to download {filename}
        </a>
    )
}

Thank you

Webtorrent create-react-library Material-UI

License

MIT © Serge Thompson