# react-timelapse-tool

> A GUI to help create timelapse videos from a selection of images.

Latest version **1.5.0** (published 2020-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-timelapse-tool
pnpm add react-timelapse-tool
yarn add react-timelapse-tool
bun add react-timelapse-tool
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2020-04-18 |
| First published | 2020-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 8 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | richardskinner |
| Maintainers | rcskinner |

## Links

- npm: https://www.npmjs.com/package/react-timelapse-tool
- Repository: https://github.com/richardskinner/react-timelapse-tool
- Homepage: https://github.com/richardskinner/react-timelapse-tool#readme
- Issues: https://github.com/richardskinner/react-timelapse-tool/issues
- npm.io page: https://npm.io/package/react-timelapse-tool

## Dependencies (8)

- [jquery](https://npm.io/package/jquery.md) ^3.4.1
- [react-modal](https://npm.io/package/react-modal.md) ^3.11.1
- [react-slick](https://npm.io/package/react-slick.md) ^0.25.2
- [slick-carousel](https://npm.io/package/slick-carousel.md) ^1.8.1
- [styled-components](https://npm.io/package/styled-components.md) ^5.0.0
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.8
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.26
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.12.0

## Recent versions

- 1.5.0 (latest) — 2020-04-18
- 1.4.1 — 2020-02-05
- 1.4.0 — 2020-02-05
- 1.3.1 — 2020-01-31
- 1.3.0 — 2020-01-31
- 1.2.1 — 2020-01-31
- 1.2.0 — 2020-01-30
- 1.1.1 — 2020-01-30
- 1.1.0 — 2020-01-29
- 1.0.0 — 2020-01-27

## README

# react-timelapse-tool

[![NPM](https://img.shields.io/npm/v/react-timelapse-tool.svg)](https://www.npmjs.com/package/react-timelapse-tool)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![MIT](https://camo.githubusercontent.com/f53583e5278740443555de94bff91fbb5d19b99a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f72656163742d7365617263682d626f782e7376673f7374796c653d666c61742d737175617265)](https://github.com/richardskinner/react-timelapse-tool/blob/master/LICENSE)

## Overview
This is a GUI to display a users images, select and save a timelapse video. It uses a slick slider for displaying images in a carousel and HTML5 video to play the timelapse video.

***This is a frontend tool only.***

### Creating the timelapse video

FFMPEG is *A complete, cross-platform solution to record, convert and stream audio and video.*
This tool can create such videos but is server side command line tool. You can fire such a command by calling a url to a server which can fire this command.

##### Further FFMPEG Reading
[FFMPEG Docs](http://www.ffmpeg.org/)

## Install

```bash
npm install --save react-timelapse-tool
```

## Usage
```jsx
import React, { Component } from 'react'
import TimelapseTool from 'react-timelapse-tool'

class App extends Component {

    config = {
        fpsSlider: {
          min: 0,
          max: 100
        },
        carousel: {
          settings: {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 8,
            slidesToScroll: 1
          },
          tiles: [
            {
              id: '1',
              src: '/image1.jpg',
              name: 'image01.0'
            },
            {
              id: '2',
              src: '/image2.jpg',
              name: 'image01.1'
            }
          ]
        }
    }

  render () {
    return (
      <TimelapseTool config={this.state.config}} onCreate={() => console.log('Create Video')} onSave={() => console.log('Save Video')} />
    )
  }
}
```

## Props

* config
	* carousel
		* id
		* src
		* name

## Callbacks

* onCreate
* onSave

## Built With

* [React Slick Slider](https://www.npmjs.com/package/react-slick-slider)

## License

MIT © [richardskinner](https://github.com/richardskinner)

---
_Source: https://npm.io/package/react-timelapse-tool · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._