ArvinH / react-vimeouploadr

React component for upload vimeo video to your account

react-vimeouploadr

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

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