React component for upload vimeo video to your account
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src
src
tests
.eslintrc.js
.gitignore
.prettierrc
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
LICENSE
README.md
nwb.config.js
package.json
yarn.lock

README.md

react-vimeouploadr

Travis Codecov Status Dependency Status devDependency Status peerDependency Status prettier license

React component for upload video to your vimeo account

This component extracted by another side-projects built with my friend, I extracted this component out because I found there are few sample code on internet about vimeo api with react/redux, so this project could be a reference for those who want to use vimeo api with react/redux.

Demo

demo

Usage

Steps

  1. Create vimeo app and get the access token (you may need to wait for couple days to get the upload permission) vimeo app register

    vimeo upload api doc

  2. You have to prepare a server for requesting vimeo api, you can do this in client side (Well, technically, you can do it on client-side but it will expose your access token to the world and that's not we want to see). Here is the server side sample code: Flask server sample code

  3. Mount component and reducer to your app (Check the app.js and store.js in demo/src foldr)

    component

    import VimeoUploadr from 'react-vimeouploadr/lib';
    // pass your server host for create video and get video link api (see the servier side code sample)
    <VimeoUploadr
      createVideoLink="http://localhost:5000/video/vimeo"
      getVideoLink="http://localhost:5000/video/vimeo"
    />;

    reducer

    import { vimeoUpload } from 'react-vimeouploadr/lib';
    // add reducer to your store
    export default createStore(
      combineReducers({
        vimeoUpload
      }),
      initialState,
      composedEnhancers
    );

    app

    // get props to state in component
    const mapStateToProps = state => ({
      vimeoLink: state.vimeoUpload.vimeoLink,
      uploadStatus: state.vimeoUpload.uploadStatus
    });
    
    DemoApp = connect(mapStateToProps, null)(DemoApp);

To-Do

  • Pass api host from config
  • Export final vimeo video link instead of render player directly
  • Doc for api on server side
  • Integrate with Storybook
  • Fix test