├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── ffmpeg-video-editor-wasm.gif
    ├── manifest.json
    ├── coi-service-worker.js
    └── index.html
├── src
    ├── utils
    │   └── utils.js
    ├── App.js
    ├── setupTests.js
    ├── App.test.js
    ├── setupProxy.js
    ├── reportWebVitals.js
    ├── index.js
    ├── index.css
    ├── App.css
    ├── components
    │   ├── VideoUpload.js
    │   ├── VideoPlayer.js
    │   ├── VideoConversionButton.js
    │   └── VideoEditor.js
    └── logo.svg
├── .idea
    ├── vcs.xml
    ├── inspectionProfiles
    │   └── Project_Default.xml
    ├── modules.xml
    ├── video-editor-wasm-react.iml
    └── workspace.xml
├── .gitignore
├── package.json
├── README.md
└── LICENSE.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imgly/video-editor-wasm-react/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imgly/video-editor-wasm-react/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imgly/video-editor-wasm-react/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/ffmpeg-video-editor-wasm.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imgly/video-editor-wasm-react/HEAD/public/ffmpeg-video-editor-wasm.gif


--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
1 | export function sliderValueToVideoTime(duration, sliderValue) {
2 |     return Math.round(duration * sliderValue / 100)
3 | }


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import "./App.css"
 2 | import VideoEditor from "./components/VideoEditor"
 3 | 
 4 | function App() {
 5 |     return (
 6 |         <div className={"app"}>
 7 |             <VideoEditor />
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default App


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/.idea/inspectionProfiles/Project_Default.xml:
--------------------------------------------------------------------------------
1 | <component name="InspectionProjectProfileManager">
2 |   <profile version="1.0">
3 |     <option name="myName" value="Project Default" />
4 |     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
5 |   </profile>
6 | </component>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/video-editor-wasm-react.iml" filepath="$PROJECT_DIR$/.idea/video-editor-wasm-react.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/video-editor-wasm-react.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="JAVA_MODULE" version="4">
3 |   <component name="NewModuleRootManager" inherit-compiler-output="true">
4 |     <exclude-output />
5 |     <content url="file://$MODULE_DIR$" />
6 |     <orderEntry type="inheritedJdk" />
7 |     <orderEntry type="sourceFolder" forTests="false" />
8 |   </component>
9 | </module>


--------------------------------------------------------------------------------
/src/setupProxy.js:
--------------------------------------------------------------------------------
1 | module.exports = function (app) {
2 |     app.use(function (req, res, next) {
3 |         // making the development server cross-origin isolated
4 |         // https://github.com/ffmpegwasm/ffmpeg.wasm#installation
5 |         res.setHeader("Cross-Origin-Opener-Policy", "same-origin")
6 |         res.setHeader("Cross-Origin-Embedder-Policy", "require-corp")
7 |         next()
8 |     })
9 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import ReactDOM from "react-dom/client"
 3 | import "./index.css"
 4 | import App from "./App"
 5 | import reportWebVitals from "./reportWebVitals"
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById("root"))
 8 | root.render(<App />)
 9 | 
10 | // If you want to start measuring performance in your app, pass a function
11 | // to log results (for example: reportWebVitals(console.log))
12 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
13 | reportWebVitals()
14 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | .app {
 2 |   width: 500px;
 3 |   margin: auto;
 4 | }
 5 | 
 6 | .video-player {
 7 |   margin-bottom: 10px;
 8 | }
 9 | 
10 | .video-react {
11 |   height: 300px !important;
12 |   padding: 0 !important;
13 |   background-color: unset !important;
14 | }
15 | 
16 | .upload-div {
17 |   display: flex;
18 |   gap: 10px;
19 |   margin-bottom: 20px;
20 | }
21 | 
22 | .slider-div {
23 |   margin-top: 40px;
24 |   margin-bottom: 20px;
25 | }
26 | 
27 | .conversion-div {
28 |   margin-top: 20px;
29 |   margin-bottom: 20px;
30 | }
31 | 
32 | .gif {
33 |   margin-bottom: 10px;
34 |   margin-top: 10px;
35 |   height: 300px;
36 |   max-width: 500px;
37 | }
38 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/VideoUpload.js:
--------------------------------------------------------------------------------
 1 | import { Button, Upload } from "antd"
 2 | 
 3 | function VideoUpload({ disabled, onChange = () => {}, onRemove = () => {} }) {
 4 |     return (
 5 |         <>
 6 |             <Upload
 7 |                 disabled={disabled}
 8 |                 beforeUpload={() => {
 9 |                     return false
10 |                 }}
11 |                 accept="video/*"
12 |                 onChange={(info) => {
13 |                     if (info.fileList && info.fileList.length > 0) {
14 |                         onChange(info.fileList[0].originFileObj)
15 |                     }
16 |                 }}
17 |                 showUploadList={false}
18 |             >
19 |                 <Button>Upload Video</Button>
20 |             </Upload>
21 |             <Button
22 |                 danger={true}
23 |                 disabled={!disabled}
24 |                 onClick={() => {
25 |                     onRemove(undefined)
26 |                 }}
27 |             >
28 |                 Remove
29 |             </Button>
30 |         </>
31 |     )
32 | }
33 | 
34 | export default VideoUpload
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "video-editor-wasm-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@ffmpeg/core": "^0.11.0",
 7 |     "@ffmpeg/ffmpeg": "^0.11.5",
 8 |     "@testing-library/jest-dom": "^5.16.5",
 9 |     "@testing-library/react": "^13.4.0",
10 |     "@testing-library/user-event": "^13.5.0",
11 |     "antd": "^5.4.4",
12 |     "react": "^18.2.0",
13 |     "react-dom": "^18.2.0",
14 |     "react-scripts": "5.0.1",
15 |     "redux": "^4.2.0",
16 |     "video-react": "^0.16.0",
17 |     "web-vitals": "^2.1.4"
18 |   },
19 |   "scripts": {
20 |     "start": "react-scripts start",
21 |     "build": "react-scripts build",
22 |     "test": "react-scripts test",
23 |     "eject": "react-scripts eject"
24 |   },
25 |   "eslintConfig": {
26 |     "extends": [
27 |       "react-app",
28 |       "react-app/jest"
29 |     ]
30 |   },
31 |   "browserslist": {
32 |     "production": [
33 |       ">0.2%",
34 |       "not dead",
35 |       "not op_mini all"
36 |     ],
37 |     "development": [
38 |       "last 1 chrome version",
39 |       "last 1 firefox version",
40 |       "last 1 safari version"
41 |     ]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/VideoPlayer.js:
--------------------------------------------------------------------------------
 1 | import { BigPlayButton, ControlBar, LoadingSpinner, Player, PlayToggle } from "video-react"
 2 | import "video-react/dist/video-react.css"
 3 | import { useEffect, useState } from "react"
 4 | 
 5 | export function VideoPlayer({
 6 |     src,
 7 |     onPlayerChange = () => {},
 8 |     onChange = () => {},
 9 |     startTime = undefined,
10 | }) {
11 |     const [player, setPlayer] = useState(undefined)
12 |     const [playerState, setPlayerState] = useState(undefined)
13 | 
14 |     useEffect(() => {
15 |         if (playerState) {
16 |             onChange(playerState)
17 |         }
18 |     }, [playerState])
19 | 
20 |     useEffect(() => {
21 |         onPlayerChange(player)
22 | 
23 |         if (player) {
24 |             player.subscribeToStateChange(setPlayerState)
25 |         }
26 |     }, [player])
27 | 
28 |     return (
29 |         <div className={"video-player"}>
30 |             <Player
31 |                 ref={(player) => {
32 |                     setPlayer(player)
33 |                 }}
34 |                 startTime={startTime}
35 |             >
36 |                 <source src={src} />
37 |                 <BigPlayButton position="center" />
38 |                 <LoadingSpinner />
39 |                 <ControlBar autoHide={false} disableDefaultControls={true}>
40 |                     <PlayToggle />
41 |                 </ControlBar>
42 |             </Player>
43 |         </div>
44 |     )
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/VideoConversionButton.js:
--------------------------------------------------------------------------------
 1 | import { Button } from "antd"
 2 | import { fetchFile } from "@ffmpeg/ffmpeg"
 3 | import { sliderValueToVideoTime } from "../utils/utils"
 4 | 
 5 | function VideoConversionButton({
 6 |     videoPlayerState,
 7 |     sliderValues,
 8 |     videoFile,
 9 |     ffmpeg,
10 |     onConversionStart = () => {},
11 |     onConversionEnd = () => {},
12 |     onGifCreated = () => {},
13 | }) {
14 |     const convertToGif = async () => {
15 |         // starting the conversion process
16 |         onConversionStart(true)
17 | 
18 |         const inputFileName = "gif.mp4"
19 |         const outputFileName = "output.gif"
20 | 
21 |         // writing the video file to memory
22 |         ffmpeg.FS("writeFile", inputFileName, await fetchFile(videoFile))
23 | 
24 |         const [min, max] = sliderValues
25 |         const minTime = sliderValueToVideoTime(videoPlayerState.duration, min)
26 |         const maxTime = sliderValueToVideoTime(videoPlayerState.duration, max)
27 | 
28 |         // cutting the video and converting it to GIF with a FFMpeg command
29 |         await ffmpeg.run("-i", inputFileName, "-ss", `${minTime}`, "-to", `${maxTime}`, "-f", "gif", outputFileName)
30 | 
31 |         // reading the resulting file
32 |         const data = ffmpeg.FS("readFile", outputFileName)
33 | 
34 |         // converting the GIF file created by FFmpeg to a valid image URL
35 |         const gifUrl = URL.createObjectURL(new Blob([data.buffer], { type: "image/gif" }))
36 |         onGifCreated(gifUrl)
37 | 
38 |         // ending the conversion process
39 |         onConversionEnd(false)
40 |     }
41 | 
42 |     return <Button onClick={() => convertToGif()}>Convert to GIF</Button>
43 | }
44 | 
45 | export default VideoConversionButton
46 | 


--------------------------------------------------------------------------------
/public/coi-service-worker.js:
--------------------------------------------------------------------------------
1 | /*! coi-serviceworker v0.1.6 - Guido Zuidhof, licensed under MIT */
2 | "undefined"==typeof window?(self.addEventListener("install",(()=>self.skipWaiting())),self.addEventListener("activate",(e=>e.waitUntil(self.clients.claim()))),self.addEventListener("message",(e=>{e.data&&"deregister"===e.data.type&&self.registration.unregister().then((()=>self.clients.matchAll())).then((e=>{e.forEach((e=>e.navigate(e.url)))}))})),self.addEventListener("fetch",(function(e){"only-if-cached"===e.request.cache&&"same-origin"!==e.request.mode||e.respondWith(fetch(e.request).then((e=>{if(0===e.status)return e;const r=new Headers(e.headers);return r.set("Cross-Origin-Embedder-Policy","require-corp"),r.set("Cross-Origin-Opener-Policy","same-origin"),new Response(e.body,{status:e.status,statusText:e.statusText,headers:r})})).catch((e=>console.error(e))))}))):(()=>{const e={shouldRegister:()=>!0,shouldDeregister:()=>!1,doReload:()=>window.location.reload(),quiet:!1,...window.coi},r=navigator;e.shouldDeregister()&&r.serviceWorker&&r.serviceWorker.controller&&r.serviceWorker.controller.postMessage({type:"deregister"}),!1===window.crossOriginIsolated&&e.shouldRegister()&&(window.isSecureContext?r.serviceWorker&&r.serviceWorker.register(window.document.currentScript.src).then((t=>{!e.quiet&&console.log("COOP/COEP Service Worker registered",t.scope),t.addEventListener("updatefound",(()=>{!e.quiet&&console.log("Reloading page to make use of updated COOP/COEP Service Worker."),e.doReload()})),t.active&&!r.serviceWorker.controller&&(!e.quiet&&console.log("Reloading page to make use of COOP/COEP Service Worker."),e.doReload())}),(r=>{!e.quiet&&console.error("COOP/COEP Service Worker failed to register:",r)})):!e.quiet&&console.log("COOP/COEP Service Worker not registered, a secure context is required."))})();


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Video Editor with Wasm and React
 2 | ## Introduction
 3 | This project demonstrates how to build a simple video editor using WebAssembly (Wasm) and React. The editor leverages the ffmpeg.wasm library to perform video processing directly in the browser, allowing users to upload a video, trim it, convert it to a GIF, and download the resulting file.
 4 | 
 5 | ## Getting Started
 6 | ### Prerequisites
 7 | Ensure you have the following installed on your system:
 8 | 
 9 | * Node.js and npm (8+)
10 | * React (18.2+)
11 | 
12 | ### Project Setup
13 | 
14 | 1. Clone the Repository
15 | 
16 | ```bash
17 | git clone https://github.com/Tonel/video-editor-wasm-react
18 | cd video-editor-wasm-react
19 | ```
20 | 
21 | 2. Install Dependencies
22 | 
23 | ```bash
24 | npm install
25 | ```
26 | 
27 | 3. Run the Application
28 | 
29 | ```bash
30 | npm start
31 | ```
32 | 
33 | Open http://localhost:3000 to view the app in your browser
34 | 
35 | ## What We Are Building
36 | 
37 | ![simple react wasm video editor](./public/ffmpeg-video-editor-wasm.gif)
38 | 
39 | This project showcases a web-based video editor built with React and WebAssembly. Users can:
40 | 
41 | *   Upload a video
42 | *   Trim the video using a slider
43 | *   Convert the trimmed portion to a GIF
44 | *   Download the resulting GIF
45 |     
46 | 
47 | ### Technologies Used
48 | 
49 | * [**React**](https://reactjs.org/)**:** A popular JavaScript library for building user interfaces, making it easy to create interactive UIs.
50 |     
51 | * [**WebAssembly (Wasm)**](https://webassembly.org/)**:** A binary instruction format that enables high-performance applications in the browser, allowing us to run ffmpeg in the browser.
52 |     
53 | * [**ffmpeg.wasm**](https://github.com/ffmpegwasm/ffmpeg.wasm)**:** A WebAssembly port of FFmpeg, enabling video and audio processing directly in web applications.
54 |     
55 | * [**Ant Design**](https://ant.design/)**:** A popular React UI framework used for the upload button and slider components.
56 |     
57 | * [**Video-React****:**](https://www.npmjs.com/package/video-react) A React component for playing videos, providing a simple way to include video playback in our editor.
58 |     
59 | 
60 | These technologies were chosen to create a responsive and efficient video editor that runs entirely in the browser without the need for a backend server.
61 | 
62 | ## Learn More
63 | 
64 | For a detailed step-by-step tutorial on how this video editor was built, please refer to the [blog post](https://img.ly/blog/how-to-build-a-video-editor-with-wasm-in-react/).
65 | 
66 | ## Commercial Alternative
67 | 
68 | If you are looking for a fully-featured commercial video editor, check out our [Video Editor SDK for the Web](https://img.ly/showcases/cesdk/video-ui/web). It is based on WASM and WebCodecs and runs entirely in the browser, providing powerful video editing features, including cropping, trimming, filters, brightness, color adjustments, and more.
69 | 
70 | Enjoy building your video editor!


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <project version="4">
  3 |   <component name="AutoImportSettings">
  4 |     <option name="autoReloadType" value="SELECTIVE" />
  5 |   </component>
  6 |   <component name="ChangeListManager">
  7 |     <list default="true" id="6383c95c-0997-4b84-9b86-c66705f90b46" name="Changes" comment="">
  8 |       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
  9 |       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
 10 |       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
 11 |       <change beforePath="$PROJECT_DIR$/src/components/VideoEditor.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/VideoEditor.js" afterDir="false" />
 12 |       <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
 13 |     </list>
 14 |     <option name="SHOW_DIALOG" value="false" />
 15 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
 16 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 17 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 18 |   </component>
 19 |   <component name="ComposerSettings">
 20 |     <execution />
 21 |   </component>
 22 |   <component name="FileTemplateManagerImpl">
 23 |     <option name="RECENT_TEMPLATES">
 24 |       <list>
 25 |         <option value="JavaScript File" />
 26 |       </list>
 27 |     </option>
 28 |   </component>
 29 |   <component name="Git.Settings">
 30 |     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
 31 |   </component>
 32 |   <component name="GoLibraries">
 33 |     <option name="indexEntireGoPath" value="true" />
 34 |   </component>
 35 |   <component name="MarkdownSettingsMigration">
 36 |     <option name="stateVersion" value="1" />
 37 |   </component>
 38 |   <component name="PhpWorkspaceProjectConfiguration" interpreter_name="C:\xampp\php\php.exe" />
 39 |   <component name="ProjectId" id="2F8NrX08zV4XATQ2Vs3BQsnCtBI" />
 40 |   <component name="ProjectLevelVcsManager" settingsEditedManually="true">
 41 |     <ConfirmationsSetting value="2" id="Add" />
 42 |   </component>
 43 |   <component name="ProjectViewState">
 44 |     <option name="hideEmptyMiddlePackages" value="true" />
 45 |     <option name="showLibraryContents" value="true" />
 46 |   </component>
 47 |   <component name="PropertiesComponent"><![CDATA[{
 48 |   "keyToString": {
 49 |     "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
 50 |     "RunOnceActivity.OpenProjectViewOnStart": "true",
 51 |     "RunOnceActivity.ShowReadmeOnStart": "true",
 52 |     "RunOnceActivity.go.formatter.settings.were.checked": "true",
 53 |     "RunOnceActivity.go.migrated.go.modules.settings": "true",
 54 |     "SHARE_PROJECT_CONFIGURATION_FILES": "true",
 55 |     "WebServerToolWindowFactoryState": "false",
 56 |     "go.import.settings.migrated": "true",
 57 |     "last_opened_file_path": "C:/Users/antoz/IdeaProjects/img.ly/video-editor-wasm-react",
 58 |     "node.js.detected.package.eslint": "true",
 59 |     "node.js.detected.package.standard": "true",
 60 |     "node.js.detected.package.tslint": "true",
 61 |     "node.js.selected.package.eslint": "(autodetect)",
 62 |     "node.js.selected.package.standard": "",
 63 |     "node.js.selected.package.tslint": "(autodetect)",
 64 |     "nodejs_package_manager_path": "npm",
 65 |     "project.structure.last.edited": "Project",
 66 |     "project.structure.proportion": "0.0",
 67 |     "project.structure.side.proportion": "0.2",
 68 |     "ruby.rails.projectView.checked": "true",
 69 |     "settings.editor.selected.configurable": "project.propVCSSupport.DirectoryMappings",
 70 |     "ts.external.directory.path": "C:\\Program Files\\JetBrains\\IntelliJ IDEA 2022.1\\plugins\\JavaScriptLanguage\\jsLanguageServicesImpl\\external",
 71 |     "vue.rearranger.settings.migration": "true"
 72 |   }
 73 | }]]></component>
 74 |   <component name="RecentsManager">
 75 |     <key name="CopyFile.RECENT_KEYS">
 76 |       <recent name="C:\Users\antoz\IdeaProjects\img.ly\video-editor-wasm-react\src\components" />
 77 |     </key>
 78 |     <key name="MoveFile.RECENT_KEYS">
 79 |       <recent name="C:\Users\antoz\IdeaProjects\img.ly\video-editor-wasm-react\src" />
 80 |     </key>
 81 |   </component>
 82 |   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
 83 |   <component name="TaskManager">
 84 |     <task active="true" id="Default" summary="Default task">
 85 |       <changelist id="6383c95c-0997-4b84-9b86-c66705f90b46" name="Changes" comment="" />
 86 |       <created>1663869950286</created>
 87 |       <option name="number" value="Default" />
 88 |       <option name="presentableId" value="Default" />
 89 |       <updated>1663869950286</updated>
 90 |     </task>
 91 |     <servers />
 92 |   </component>
 93 |   <component name="TypeScriptGeneratedFilesManager">
 94 |     <option name="version" value="3" />
 95 |   </component>
 96 |   <component name="Vcs.Log.Tabs.Properties">
 97 |     <option name="TAB_STATES">
 98 |       <map>
 99 |         <entry key="MAIN">
100 |           <value>
101 |             <State />
102 |           </value>
103 |         </entry>
104 |       </map>
105 |     </option>
106 |   </component>
107 |   <component name="VcsManagerConfiguration">
108 |     <ignored-roots>
109 |       <path value="$PROJECT_DIR$/video-editor-wasm-react" />
110 |     </ignored-roots>
111 |   </component>
112 |   <component name="VgoProject">
113 |     <integration-enabled>false</integration-enabled>
114 |     <settings-migrated>true</settings-migrated>
115 |   </component>
116 | </project>


--------------------------------------------------------------------------------
/src/components/VideoEditor.js:
--------------------------------------------------------------------------------
  1 | import { createFFmpeg } from "@ffmpeg/ffmpeg"
  2 | import { useEffect, useState } from "react"
  3 | import { Slider, Spin } from "antd"
  4 | import { VideoPlayer } from "./VideoPlayer"
  5 | import { sliderValueToVideoTime } from "../utils/utils"
  6 | import VideoUpload from "./VideoUpload"
  7 | import VideoConversionButton from "./VideoConversionButton"
  8 | const ffmpeg = createFFmpeg({ log: true })
  9 | 
 10 | function VideoEditor() {
 11 |     const [ffmpegLoaded, setFFmpegLoaded] = useState(false)
 12 |     const [videoFile, setVideoFile] = useState()
 13 |     const [videoPlayerState, setVideoPlayerState] = useState()
 14 |     const [videoPlayer, setVideoPlayer] = useState()
 15 |     const [gifUrl, setGifUrl] = useState()
 16 |     const [sliderValues, setSliderValues] = useState([0, 100])
 17 |     const [processing, setProcessing] = useState(false)
 18 | 
 19 |     useEffect(() => {
 20 |         // loading ffmpeg on startup
 21 |         ffmpeg.load().then(() => {
 22 |             setFFmpegLoaded(true)
 23 |         })
 24 |     }, [])
 25 | 
 26 |     useEffect(() => {
 27 |         const min = sliderValues[0]
 28 |         // when the slider values are updated, updating the
 29 |         // video time
 30 |         if (min !== undefined && videoPlayerState && videoPlayer) {
 31 |             videoPlayer.seek(sliderValueToVideoTime(videoPlayerState.duration, min))
 32 |         }
 33 |     }, [sliderValues])
 34 | 
 35 |     useEffect(() => {
 36 |         if (videoPlayer && videoPlayerState) {
 37 |             // allowing users to watch only the portion of
 38 |             // the video selected by the slider
 39 |             const [min, max] = sliderValues
 40 | 
 41 |             const minTime = sliderValueToVideoTime(videoPlayerState.duration, min)
 42 |             const maxTime = sliderValueToVideoTime(videoPlayerState.duration, max)
 43 | 
 44 |             if (videoPlayerState.currentTime < minTime) {
 45 |                 videoPlayer.seek(minTime)
 46 |             }
 47 |             if (videoPlayerState.currentTime > maxTime) {
 48 |                 // looping logic
 49 |                 videoPlayer.seek(minTime)
 50 |             }
 51 |         }
 52 |     }, [videoPlayerState])
 53 | 
 54 |     useEffect(() => {
 55 |         // when the current videoFile is removed,
 56 |         // restoring the default state
 57 |         if (!videoFile) {
 58 |             setVideoPlayerState(undefined)
 59 |             setSliderValues([0, 100])
 60 |             setVideoPlayerState(undefined)
 61 |             setGifUrl(undefined)
 62 |         }
 63 |     }, [videoFile])
 64 | 
 65 |     return (
 66 |         <div>
 67 |             <Spin
 68 |                 spinning={processing || !ffmpegLoaded}
 69 |                 tip={!ffmpegLoaded ? "Waiting for FFmpeg to load..." : "Processing..."}
 70 |             >
 71 |                 <div>
 72 |                     {videoFile ? (
 73 |                         <VideoPlayer
 74 |                             src={URL.createObjectURL(videoFile)}
 75 |                             onPlayerChange={(videoPlayer) => {
 76 |                                 setVideoPlayer(videoPlayer)
 77 |                             }}
 78 |                             onChange={(videoPlayerState) => {
 79 |                                 setVideoPlayerState(videoPlayerState)
 80 |                             }}
 81 |                         />
 82 |                     ) : (
 83 |                         <h1>Upload a video</h1>
 84 |                     )}
 85 |                 </div>
 86 |                 <div className={"upload-div"}>
 87 |                     <VideoUpload
 88 |                         disabled={!!videoFile}
 89 |                         onChange={(videoFile) => {
 90 |                             setVideoFile(videoFile)
 91 |                         }}
 92 |                         onRemove={() => {
 93 |                           setVideoFile(undefined)
 94 |                         }}
 95 |                     />
 96 |                 </div>
 97 |                 <div className={"slider-div"}>
 98 |                     <h3>Cut Video</h3>
 99 |                     <Slider
100 |                         disabled={!videoPlayerState}
101 |                         value={sliderValues}
102 |                         range={true}
103 |                         onChange={(values) => {
104 |                             setSliderValues(values)
105 |                         }}
106 |                         tooltip={{
107 |                             formatter: null,
108 |                         }}
109 |                     />
110 |                 </div>
111 |                 <div className={"conversion-div"}>
112 |                     <VideoConversionButton
113 |                         onConversionStart={() => {
114 |                             setProcessing(true)
115 |                         }}
116 |                         onConversionEnd={() => {
117 |                             setProcessing(false)
118 |                         }}
119 |                         ffmpeg={ffmpeg}
120 |                         videoPlayerState={videoPlayerState}
121 |                         sliderValues={sliderValues}
122 |                         videoFile={videoFile}
123 |                         onGifCreated={(girUrl) => {
124 |                             setGifUrl(girUrl)
125 |                         }}
126 |                     />
127 |                 </div>
128 |                 {gifUrl && (
129 |                     <div className={"gif-div"}>
130 |                         <h3>Resulting GIF</h3>
131 |                         <img src={gifUrl} className={"gif"} alt={"GIF file generated in the client side"} />
132 |                         <a href={gifUrl} download={"test.gif"} className={"ant-btn ant-btn-default"}>
133 |                             Download
134 |                         </a>
135 |                     </div>
136 |                 )}
137 |             </Spin>
138 |         </div>
139 |     )
140 | }
141 | 
142 | export default VideoEditor
143 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
  1 | # GNU Affero General Public License
  2 | 
  3 | _Version 3, 19 November 2007_
  4 | _Copyright © 2007 Free Software Foundation, Inc. <http://fsf.org/>_
  5 | 
  6 | Everyone is permitted to copy and distribute verbatim copies
  7 | of this license document, but changing it is not allowed.
  8 | 
  9 | ## Preamble
 10 | 
 11 | The GNU Affero General Public License is a free, copyleft license for
 12 | software and other kinds of works, specifically designed to ensure
 13 | cooperation with the community in the case of network server software.
 14 | 
 15 | The licenses for most software and other practical works are designed
 16 | to take away your freedom to share and change the works. By contrast,
 17 | our General Public Licenses are intended to guarantee your freedom to
 18 | share and change all versions of a program--to make sure it remains free
 19 | software for all its users.
 20 | 
 21 | When we speak of free software, we are referring to freedom, not
 22 | price. Our General Public Licenses are designed to make sure that you
 23 | have the freedom to distribute copies of free software (and charge for
 24 | them if you wish), that you receive source code or can get it if you
 25 | want it, that you can change the software or use pieces of it in new
 26 | free programs, and that you know you can do these things.
 27 | 
 28 | Developers that use our General Public Licenses protect your rights
 29 | with two steps: **(1)** assert copyright on the software, and **(2)** offer
 30 | you this License which gives you legal permission to copy, distribute
 31 | and/or modify the software.
 32 | 
 33 | A secondary benefit of defending all users' freedom is that
 34 | improvements made in alternate versions of the program, if they
 35 | receive widespread use, become available for other developers to
 36 | incorporate. Many developers of free software are heartened and
 37 | encouraged by the resulting cooperation. However, in the case of
 38 | software used on network servers, this result may fail to come about.
 39 | The GNU General Public License permits making a modified version and
 40 | letting the public access it on a server without ever releasing its
 41 | source code to the public.
 42 | 
 43 | The GNU Affero General Public License is designed specifically to
 44 | ensure that, in such cases, the modified source code becomes available
 45 | to the community. It requires the operator of a network server to
 46 | provide the source code of the modified version running there to the
 47 | users of that server. Therefore, public use of a modified version, on
 48 | a publicly accessible server, gives the public access to the source
 49 | code of the modified version.
 50 | 
 51 | An older license, called the Affero General Public License and
 52 | published by Affero, was designed to accomplish similar goals. This is
 53 | a different license, not a version of the Affero GPL, but Affero has
 54 | released a new version of the Affero GPL which permits relicensing under
 55 | this license.
 56 | 
 57 | The precise terms and conditions for copying, distribution and
 58 | modification follow.
 59 | 
 60 | ## TERMS AND CONDITIONS
 61 | 
 62 | ### 0. Definitions
 63 | 
 64 | “This License” refers to version 3 of the GNU Affero General Public License.
 65 | 
 66 | “Copyright” also means copyright-like laws that apply to other kinds of
 67 | works, such as semiconductor masks.
 68 | 
 69 | “The Program” refers to any copyrightable work licensed under this
 70 | License. Each licensee is addressed as “you”. “Licensees” and
 71 | “recipients” may be individuals or organizations.
 72 | 
 73 | To “modify” a work means to copy from or adapt all or part of the work
 74 | in a fashion requiring copyright permission, other than the making of an
 75 | exact copy. The resulting work is called a “modified version” of the
 76 | earlier work or a work “based on” the earlier work.
 77 | 
 78 | A “covered work” means either the unmodified Program or a work based
 79 | on the Program.
 80 | 
 81 | To “propagate” a work means to do anything with it that, without
 82 | permission, would make you directly or secondarily liable for
 83 | infringement under applicable copyright law, except executing it on a
 84 | computer or modifying a private copy. Propagation includes copying,
 85 | distribution (with or without modification), making available to the
 86 | public, and in some countries other activities as well.
 87 | 
 88 | To “convey” a work means any kind of propagation that enables other
 89 | parties to make or receive copies. Mere interaction with a user through
 90 | a computer network, with no transfer of a copy, is not conveying.
 91 | 
 92 | An interactive user interface displays “Appropriate Legal Notices”
 93 | to the extent that it includes a convenient and prominently visible
 94 | feature that **(1)** displays an appropriate copyright notice, and **(2)**
 95 | tells the user that there is no warranty for the work (except to the
 96 | extent that warranties are provided), that licensees may convey the
 97 | work under this License, and how to view a copy of this License. If
 98 | the interface presents a list of user commands or options, such as a
 99 | menu, a prominent item in the list meets this criterion.
100 | 
101 | ### 1. Source Code
102 | 
103 | The “source code” for a work means the preferred form of the work
104 | for making modifications to it. “Object code” means any non-source
105 | form of a work.
106 | 
107 | A “Standard Interface” means an interface that either is an official
108 | standard defined by a recognized standards body, or, in the case of
109 | interfaces specified for a particular programming language, one that
110 | is widely used among developers working in that language.
111 | 
112 | The “System Libraries” of an executable work include anything, other
113 | than the work as a whole, that **(a)** is included in the normal form of
114 | packaging a Major Component, but which is not part of that Major
115 | Component, and **(b)** serves only to enable use of the work with that
116 | Major Component, or to implement a Standard Interface for which an
117 | implementation is available to the public in source code form. A
118 | “Major Component”, in this context, means a major essential component
119 | (kernel, window system, and so on) of the specific operating system
120 | (if any) on which the executable work runs, or a compiler used to
121 | produce the work, or an object code interpreter used to run it.
122 | 
123 | The “Corresponding Source” for a work in object code form means all
124 | the source code needed to generate, install, and (for an executable
125 | work) run the object code and to modify the work, including scripts to
126 | control those activities. However, it does not include the work's
127 | System Libraries, or general-purpose tools or generally available free
128 | programs which are used unmodified in performing those activities but
129 | which are not part of the work. For example, Corresponding Source
130 | includes interface definition files associated with source files for
131 | the work, and the source code for shared libraries and dynamically
132 | linked subprograms that the work is specifically designed to require,
133 | such as by intimate data communication or control flow between those
134 | subprograms and other parts of the work.
135 | 
136 | The Corresponding Source need not include anything that users
137 | can regenerate automatically from other parts of the Corresponding
138 | Source.
139 | 
140 | The Corresponding Source for a work in source code form is that
141 | same work.
142 | 
143 | ### 2. Basic Permissions
144 | 
145 | All rights granted under this License are granted for the term of
146 | copyright on the Program, and are irrevocable provided the stated
147 | conditions are met. This License explicitly affirms your unlimited
148 | permission to run the unmodified Program. The output from running a
149 | covered work is covered by this License only if the output, given its
150 | content, constitutes a covered work. This License acknowledges your
151 | rights of fair use or other equivalent, as provided by copyright law.
152 | 
153 | You may make, run and propagate covered works that you do not
154 | convey, without conditions so long as your license otherwise remains
155 | in force. You may convey covered works to others for the sole purpose
156 | of having them make modifications exclusively for you, or provide you
157 | with facilities for running those works, provided that you comply with
158 | the terms of this License in conveying all material for which you do
159 | not control copyright. Those thus making or running the covered works
160 | for you must do so exclusively on your behalf, under your direction
161 | and control, on terms that prohibit them from making any copies of
162 | your copyrighted material outside their relationship with you.
163 | 
164 | Conveying under any other circumstances is permitted solely under
165 | the conditions stated below. Sublicensing is not allowed; section 10
166 | makes it unnecessary.
167 | 
168 | ### 3. Protecting Users' Legal Rights From Anti-Circumvention Law
169 | 
170 | No covered work shall be deemed part of an effective technological
171 | measure under any applicable law fulfilling obligations under article
172 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
173 | similar laws prohibiting or restricting circumvention of such
174 | measures.
175 | 
176 | When you convey a covered work, you waive any legal power to forbid
177 | circumvention of technological measures to the extent such circumvention
178 | is effected by exercising rights under this License with respect to
179 | the covered work, and you disclaim any intention to limit operation or
180 | modification of the work as a means of enforcing, against the work's
181 | users, your or third parties' legal rights to forbid circumvention of
182 | technological measures.
183 | 
184 | ### 4. Conveying Verbatim Copies
185 | 
186 | You may convey verbatim copies of the Program's source code as you
187 | receive it, in any medium, provided that you conspicuously and
188 | appropriately publish on each copy an appropriate copyright notice;
189 | keep intact all notices stating that this License and any
190 | non-permissive terms added in accord with section 7 apply to the code;
191 | keep intact all notices of the absence of any warranty; and give all
192 | recipients a copy of this License along with the Program.
193 | 
194 | You may charge any price or no price for each copy that you convey,
195 | and you may offer support or warranty protection for a fee.
196 | 
197 | ### 5. Conveying Modified Source Versions
198 | 
199 | You may convey a work based on the Program, or the modifications to
200 | produce it from the Program, in the form of source code under the
201 | terms of section 4, provided that you also meet all of these conditions:
202 | 
203 | - **a)** The work must carry prominent notices stating that you modified
204 |   it, and giving a relevant date.
205 | - **b)** The work must carry prominent notices stating that it is
206 |   released under this License and any conditions added under section 7.
207 |   This requirement modifies the requirement in section 4 to
208 |   “keep intact all notices”.
209 | - **c)** You must license the entire work, as a whole, under this
210 |   License to anyone who comes into possession of a copy. This
211 |   License will therefore apply, along with any applicable section 7
212 |   additional terms, to the whole of the work, and all its parts,
213 |   regardless of how they are packaged. This License gives no
214 |   permission to license the work in any other way, but it does not
215 |   invalidate such permission if you have separately received it.
216 | - **d)** If the work has interactive user interfaces, each must display
217 |   Appropriate Legal Notices; however, if the Program has interactive
218 |   interfaces that do not display Appropriate Legal Notices, your
219 |   work need not make them do so.
220 | 
221 | A compilation of a covered work with other separate and independent
222 | works, which are not by their nature extensions of the covered work,
223 | and which are not combined with it such as to form a larger program,
224 | in or on a volume of a storage or distribution medium, is called an
225 | “aggregate” if the compilation and its resulting copyright are not
226 | used to limit the access or legal rights of the compilation's users
227 | beyond what the individual works permit. Inclusion of a covered work
228 | in an aggregate does not cause this License to apply to the other
229 | parts of the aggregate.
230 | 
231 | ### 6. Conveying Non-Source Forms
232 | 
233 | You may convey a covered work in object code form under the terms
234 | of sections 4 and 5, provided that you also convey the
235 | machine-readable Corresponding Source under the terms of this License,
236 | in one of these ways:
237 | 
238 | - **a)** Convey the object code in, or embodied in, a physical product
239 |   (including a physical distribution medium), accompanied by the
240 |   Corresponding Source fixed on a durable physical medium
241 |   customarily used for software interchange.
242 | - **b)** Convey the object code in, or embodied in, a physical product
243 |   (including a physical distribution medium), accompanied by a
244 |   written offer, valid for at least three years and valid for as
245 |   long as you offer spare parts or customer support for that product
246 |   model, to give anyone who possesses the object code either **(1)** a
247 |   copy of the Corresponding Source for all the software in the
248 |   product that is covered by this License, on a durable physical
249 |   medium customarily used for software interchange, for a price no
250 |   more than your reasonable cost of physically performing this
251 |   conveying of source, or **(2)** access to copy the
252 |   Corresponding Source from a network server at no charge.
253 | - **c)** Convey individual copies of the object code with a copy of the
254 |   written offer to provide the Corresponding Source. This
255 |   alternative is allowed only occasionally and noncommercially, and
256 |   only if you received the object code with such an offer, in accord
257 |   with subsection 6b.
258 | - **d)** Convey the object code by offering access from a designated
259 |   place (gratis or for a charge), and offer equivalent access to the
260 |   Corresponding Source in the same way through the same place at no
261 |   further charge. You need not require recipients to copy the
262 |   Corresponding Source along with the object code. If the place to
263 |   copy the object code is a network server, the Corresponding Source
264 |   may be on a different server (operated by you or a third party)
265 |   that supports equivalent copying facilities, provided you maintain
266 |   clear directions next to the object code saying where to find the
267 |   Corresponding Source. Regardless of what server hosts the
268 |   Corresponding Source, you remain obligated to ensure that it is
269 |   available for as long as needed to satisfy these requirements.
270 | - **e)** Convey the object code using peer-to-peer transmission, provided
271 |   you inform other peers where the object code and Corresponding
272 |   Source of the work are being offered to the general public at no
273 |   charge under subsection 6d.
274 | 
275 | A separable portion of the object code, whose source code is excluded
276 | from the Corresponding Source as a System Library, need not be
277 | included in conveying the object code work.
278 | 
279 | A “User Product” is either **(1)** a “consumer product”, which means any
280 | tangible personal property which is normally used for personal, family,
281 | or household purposes, or **(2)** anything designed or sold for incorporation
282 | into a dwelling. In determining whether a product is a consumer product,
283 | doubtful cases shall be resolved in favor of coverage. For a particular
284 | product received by a particular user, “normally used” refers to a
285 | typical or common use of that class of product, regardless of the status
286 | of the particular user or of the way in which the particular user
287 | actually uses, or expects or is expected to use, the product. A product
288 | is a consumer product regardless of whether the product has substantial
289 | commercial, industrial or non-consumer uses, unless such uses represent
290 | the only significant mode of use of the product.
291 | 
292 | “Installation Information” for a User Product means any methods,
293 | procedures, authorization keys, or other information required to install
294 | and execute modified versions of a covered work in that User Product from
295 | a modified version of its Corresponding Source. The information must
296 | suffice to ensure that the continued functioning of the modified object
297 | code is in no case prevented or interfered with solely because
298 | modification has been made.
299 | 
300 | If you convey an object code work under this section in, or with, or
301 | specifically for use in, a User Product, and the conveying occurs as
302 | part of a transaction in which the right of possession and use of the
303 | User Product is transferred to the recipient in perpetuity or for a
304 | fixed term (regardless of how the transaction is characterized), the
305 | Corresponding Source conveyed under this section must be accompanied
306 | by the Installation Information. But this requirement does not apply
307 | if neither you nor any third party retains the ability to install
308 | modified object code on the User Product (for example, the work has
309 | been installed in ROM).
310 | 
311 | The requirement to provide Installation Information does not include a
312 | requirement to continue to provide support service, warranty, or updates
313 | for a work that has been modified or installed by the recipient, or for
314 | the User Product in which it has been modified or installed. Access to a
315 | network may be denied when the modification itself materially and
316 | adversely affects the operation of the network or violates the rules and
317 | protocols for communication across the network.
318 | 
319 | Corresponding Source conveyed, and Installation Information provided,
320 | in accord with this section must be in a format that is publicly
321 | documented (and with an implementation available to the public in
322 | source code form), and must require no special password or key for
323 | unpacking, reading or copying.
324 | 
325 | ### 7. Additional Terms
326 | 
327 | “Additional permissions” are terms that supplement the terms of this
328 | License by making exceptions from one or more of its conditions.
329 | Additional permissions that are applicable to the entire Program shall
330 | be treated as though they were included in this License, to the extent
331 | that they are valid under applicable law. If additional permissions
332 | apply only to part of the Program, that part may be used separately
333 | under those permissions, but the entire Program remains governed by
334 | this License without regard to the additional permissions.
335 | 
336 | When you convey a copy of a covered work, you may at your option
337 | remove any additional permissions from that copy, or from any part of
338 | it. (Additional permissions may be written to require their own
339 | removal in certain cases when you modify the work.) You may place
340 | additional permissions on material, added by you to a covered work,
341 | for which you have or can give appropriate copyright permission.
342 | 
343 | Notwithstanding any other provision of this License, for material you
344 | add to a covered work, you may (if authorized by the copyright holders of
345 | that material) supplement the terms of this License with terms:
346 | 
347 | - **a)** Disclaiming warranty or limiting liability differently from the
348 |   terms of sections 15 and 16 of this License; or
349 | - **b)** Requiring preservation of specified reasonable legal notices or
350 |   author attributions in that material or in the Appropriate Legal
351 |   Notices displayed by works containing it; or
352 | - **c)** Prohibiting misrepresentation of the origin of that material, or
353 |   requiring that modified versions of such material be marked in
354 |   reasonable ways as different from the original version; or
355 | - **d)** Limiting the use for publicity purposes of names of licensors or
356 |   authors of the material; or
357 | - **e)** Declining to grant rights under trademark law for use of some
358 |   trade names, trademarks, or service marks; or
359 | - **f)** Requiring indemnification of licensors and authors of that
360 |   material by anyone who conveys the material (or modified versions of
361 |   it) with contractual assumptions of liability to the recipient, for
362 |   any liability that these contractual assumptions directly impose on
363 |   those licensors and authors.
364 | 
365 | All other non-permissive additional terms are considered “further
366 | restrictions” within the meaning of section 10. If the Program as you
367 | received it, or any part of it, contains a notice stating that it is
368 | governed by this License along with a term that is a further
369 | restriction, you may remove that term. If a license document contains
370 | a further restriction but permits relicensing or conveying under this
371 | License, you may add to a covered work material governed by the terms
372 | of that license document, provided that the further restriction does
373 | not survive such relicensing or conveying.
374 | 
375 | If you add terms to a covered work in accord with this section, you
376 | must place, in the relevant source files, a statement of the
377 | additional terms that apply to those files, or a notice indicating
378 | where to find the applicable terms.
379 | 
380 | Additional terms, permissive or non-permissive, may be stated in the
381 | form of a separately written license, or stated as exceptions;
382 | the above requirements apply either way.
383 | 
384 | ### 8. Termination
385 | 
386 | You may not propagate or modify a covered work except as expressly
387 | provided under this License. Any attempt otherwise to propagate or
388 | modify it is void, and will automatically terminate your rights under
389 | this License (including any patent licenses granted under the third
390 | paragraph of section 11).
391 | 
392 | However, if you cease all violation of this License, then your
393 | license from a particular copyright holder is reinstated **(a)**
394 | provisionally, unless and until the copyright holder explicitly and
395 | finally terminates your license, and **(b)** permanently, if the copyright
396 | holder fails to notify you of the violation by some reasonable means
397 | prior to 60 days after the cessation.
398 | 
399 | Moreover, your license from a particular copyright holder is
400 | reinstated permanently if the copyright holder notifies you of the
401 | violation by some reasonable means, this is the first time you have
402 | received notice of violation of this License (for any work) from that
403 | copyright holder, and you cure the violation prior to 30 days after
404 | your receipt of the notice.
405 | 
406 | Termination of your rights under this section does not terminate the
407 | licenses of parties who have received copies or rights from you under
408 | this License. If your rights have been terminated and not permanently
409 | reinstated, you do not qualify to receive new licenses for the same
410 | material under section 10.
411 | 
412 | ### 9. Acceptance Not Required for Having Copies
413 | 
414 | You are not required to accept this License in order to receive or
415 | run a copy of the Program. Ancillary propagation of a covered work
416 | occurring solely as a consequence of using peer-to-peer transmission
417 | to receive a copy likewise does not require acceptance. However,
418 | nothing other than this License grants you permission to propagate or
419 | modify any covered work. These actions infringe copyright if you do
420 | not accept this License. Therefore, by modifying or propagating a
421 | covered work, you indicate your acceptance of this License to do so.
422 | 
423 | ### 10. Automatic Licensing of Downstream Recipients
424 | 
425 | Each time you convey a covered work, the recipient automatically
426 | receives a license from the original licensors, to run, modify and
427 | propagate that work, subject to this License. You are not responsible
428 | for enforcing compliance by third parties with this License.
429 | 
430 | An “entity transaction” is a transaction transferring control of an
431 | organization, or substantially all assets of one, or subdividing an
432 | organization, or merging organizations. If propagation of a covered
433 | work results from an entity transaction, each party to that
434 | transaction who receives a copy of the work also receives whatever
435 | licenses to the work the party's predecessor in interest had or could
436 | give under the previous paragraph, plus a right to possession of the
437 | Corresponding Source of the work from the predecessor in interest, if
438 | the predecessor has it or can get it with reasonable efforts.
439 | 
440 | You may not impose any further restrictions on the exercise of the
441 | rights granted or affirmed under this License. For example, you may
442 | not impose a license fee, royalty, or other charge for exercise of
443 | rights granted under this License, and you may not initiate litigation
444 | (including a cross-claim or counterclaim in a lawsuit) alleging that
445 | any patent claim is infringed by making, using, selling, offering for
446 | sale, or importing the Program or any portion of it.
447 | 
448 | ### 11. Patents
449 | 
450 | A “contributor” is a copyright holder who authorizes use under this
451 | License of the Program or a work on which the Program is based. The
452 | work thus licensed is called the contributor's “contributor version”.
453 | 
454 | A contributor's “essential patent claims” are all patent claims
455 | owned or controlled by the contributor, whether already acquired or
456 | hereafter acquired, that would be infringed by some manner, permitted
457 | by this License, of making, using, or selling its contributor version,
458 | but do not include claims that would be infringed only as a
459 | consequence of further modification of the contributor version. For
460 | purposes of this definition, “control” includes the right to grant
461 | patent sublicenses in a manner consistent with the requirements of
462 | this License.
463 | 
464 | Each contributor grants you a non-exclusive, worldwide, royalty-free
465 | patent license under the contributor's essential patent claims, to
466 | make, use, sell, offer for sale, import and otherwise run, modify and
467 | propagate the contents of its contributor version.
468 | 
469 | In the following three paragraphs, a “patent license” is any express
470 | agreement or commitment, however denominated, not to enforce a patent
471 | (such as an express permission to practice a patent or covenant not to
472 | sue for patent infringement). To “grant” such a patent license to a
473 | party means to make such an agreement or commitment not to enforce a
474 | patent against the party.
475 | 
476 | If you convey a covered work, knowingly relying on a patent license,
477 | and the Corresponding Source of the work is not available for anyone
478 | to copy, free of charge and under the terms of this License, through a
479 | publicly available network server or other readily accessible means,
480 | then you must either **(1)** cause the Corresponding Source to be so
481 | available, or **(2)** arrange to deprive yourself of the benefit of the
482 | patent license for this particular work, or **(3)** arrange, in a manner
483 | consistent with the requirements of this License, to extend the patent
484 | license to downstream recipients. “Knowingly relying” means you have
485 | actual knowledge that, but for the patent license, your conveying the
486 | covered work in a country, or your recipient's use of the covered work
487 | in a country, would infringe one or more identifiable patents in that
488 | country that you have reason to believe are valid.
489 | 
490 | If, pursuant to or in connection with a single transaction or
491 | arrangement, you convey, or propagate by procuring conveyance of, a
492 | covered work, and grant a patent license to some of the parties
493 | receiving the covered work authorizing them to use, propagate, modify
494 | or convey a specific copy of the covered work, then the patent license
495 | you grant is automatically extended to all recipients of the covered
496 | work and works based on it.
497 | 
498 | A patent license is “discriminatory” if it does not include within
499 | the scope of its coverage, prohibits the exercise of, or is
500 | conditioned on the non-exercise of one or more of the rights that are
501 | specifically granted under this License. You may not convey a covered
502 | work if you are a party to an arrangement with a third party that is
503 | in the business of distributing software, under which you make payment
504 | to the third party based on the extent of your activity of conveying
505 | the work, and under which the third party grants, to any of the
506 | parties who would receive the covered work from you, a discriminatory
507 | patent license **(a)** in connection with copies of the covered work
508 | conveyed by you (or copies made from those copies), or **(b)** primarily
509 | for and in connection with specific products or compilations that
510 | contain the covered work, unless you entered into that arrangement,
511 | or that patent license was granted, prior to 28 March 2007.
512 | 
513 | Nothing in this License shall be construed as excluding or limiting
514 | any implied license or other defenses to infringement that may
515 | otherwise be available to you under applicable patent law.
516 | 
517 | ### 12. No Surrender of Others' Freedom
518 | 
519 | If conditions are imposed on you (whether by court order, agreement or
520 | otherwise) that contradict the conditions of this License, they do not
521 | excuse you from the conditions of this License. If you cannot convey a
522 | covered work so as to satisfy simultaneously your obligations under this
523 | License and any other pertinent obligations, then as a consequence you may
524 | not convey it at all. For example, if you agree to terms that obligate you
525 | to collect a royalty for further conveying from those to whom you convey
526 | the Program, the only way you could satisfy both those terms and this
527 | License would be to refrain entirely from conveying the Program.
528 | 
529 | ### 13. Remote Network Interaction; Use with the GNU General Public License
530 | 
531 | Notwithstanding any other provision of this License, if you modify the
532 | Program, your modified version must prominently offer all users
533 | interacting with it remotely through a computer network (if your version
534 | supports such interaction) an opportunity to receive the Corresponding
535 | Source of your version by providing access to the Corresponding Source
536 | from a network server at no charge, through some standard or customary
537 | means of facilitating copying of software. This Corresponding Source
538 | shall include the Corresponding Source for any work covered by version 3
539 | of the GNU General Public License that is incorporated pursuant to the
540 | following paragraph.
541 | 
542 | Notwithstanding any other provision of this License, you have
543 | permission to link or combine any covered work with a work licensed
544 | under version 3 of the GNU General Public License into a single
545 | combined work, and to convey the resulting work. The terms of this
546 | License will continue to apply to the part which is the covered work,
547 | but the work with which it is combined will remain governed by version
548 | 3 of the GNU General Public License.
549 | 
550 | ### 14. Revised Versions of this License
551 | 
552 | The Free Software Foundation may publish revised and/or new versions of
553 | the GNU Affero General Public License from time to time. Such new versions
554 | will be similar in spirit to the present version, but may differ in detail to
555 | address new problems or concerns.
556 | 
557 | Each version is given a distinguishing version number. If the
558 | Program specifies that a certain numbered version of the GNU Affero General
559 | Public License “or any later version” applies to it, you have the
560 | option of following the terms and conditions either of that numbered
561 | version or of any later version published by the Free Software
562 | Foundation. If the Program does not specify a version number of the
563 | GNU Affero General Public License, you may choose any version ever published
564 | by the Free Software Foundation.
565 | 
566 | If the Program specifies that a proxy can decide which future
567 | versions of the GNU Affero General Public License can be used, that proxy's
568 | public statement of acceptance of a version permanently authorizes you
569 | to choose that version for the Program.
570 | 
571 | Later license versions may give you additional or different
572 | permissions. However, no additional obligations are imposed on any
573 | author or copyright holder as a result of your choosing to follow a
574 | later version.
575 | 
576 | ### 15. Disclaimer of Warranty
577 | 
578 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
579 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
580 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM “AS IS” WITHOUT WARRANTY
581 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
582 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
583 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
584 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
585 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
586 | 
587 | ### 16. Limitation of Liability
588 | 
589 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
590 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
591 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
592 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
593 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
594 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
595 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
596 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
597 | SUCH DAMAGES.
598 | 
599 | ### 17. Interpretation of Sections 15 and 16
600 | 
601 | If the disclaimer of warranty and limitation of liability provided
602 | above cannot be given local legal effect according to their terms,
603 | reviewing courts shall apply local law that most closely approximates
604 | an absolute waiver of all civil liability in connection with the
605 | Program, unless a warranty or assumption of liability accompanies a
606 | copy of the Program in return for a fee.
607 | 
608 | _END OF TERMS AND CONDITIONS_
609 | 
610 | ## How to Apply These Terms to Your New Programs
611 | 
612 | If you develop a new program, and you want it to be of the greatest
613 | possible use to the public, the best way to achieve this is to make it
614 | free software which everyone can redistribute and change under these terms.
615 | 
616 | To do so, attach the following notices to the program. It is safest
617 | to attach them to the start of each source file to most effectively
618 | state the exclusion of warranty; and each file should have at least
619 | the “copyright” line and a pointer to where the full notice is found.
620 | 
621 |     <one line to give the program's name and a brief idea of what it does.>
622 |     Copyright (C) <year>  <name of author>
623 | 
624 |     This program is free software: you can redistribute it and/or modify
625 |     it under the terms of the GNU Affero General Public License as published by
626 |     the Free Software Foundation, either version 3 of the License, or
627 |     (at your option) any later version.
628 | 
629 |     This program is distributed in the hope that it will be useful,
630 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
631 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
632 |     GNU Affero General Public License for more details.
633 | 
634 |     You should have received a copy of the GNU Affero General Public License
635 |     along with this program.  If not, see <http://www.gnu.org/licenses/>.
636 | 
637 | Also add information on how to contact you by electronic and paper mail.
638 | 
639 | If your software can interact with users remotely through a computer
640 | network, you should also make sure that it provides a way for users to
641 | get its source. For example, if your program is a web application, its
642 | interface could display a “Source” link that leads users to an archive
643 | of the code. There are many ways you could offer source, and different
644 | solutions will be better for different programs; see section 13 for the
645 | specific requirements.
646 | 
647 | You should also get your employer (if you work as a programmer) or school,
648 | if any, to sign a “copyright disclaimer” for the program, if necessary.
649 | For more information on this, and how to apply and follow the GNU AGPL, see
650 | <http://www.gnu.org/licenses/>.
651 | 


--------------------------------------------------------------------------------