anton
/
video_editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

This commit is contained in:
Anton 2024-02-07 21:02:33 +03:00
commit 7b2673d626
23 changed files with 4292 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.eslintrc.cjs Normal file
View File

@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

3545
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

34
package.json Normal file
View File

@ -0,0 +1,34 @@
{
"name": "video_editor",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"mobx": "^6.12.0",
"mobx-react": "^9.1.0",
"rc-slider": "^10.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-file-drop": "^3.1.6",
"sass": "^1.70.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2",
"vite": "^5.0.8"
}
}

42
src/App.css Normal file
View File

@ -0,0 +1,42 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

18
src/App.tsx Normal file
View File

@ -0,0 +1,18 @@
import './App.css';
import { state } from './state/root';
import { VideoUploader } from './components/VideoUploader';
import { VideoEditor } from './components/VideoEditor';
import { observer } from 'mobx-react';
export const App = observer(() => {
return (
<>
{
state.video.file
? <VideoEditor />
: <VideoUploader />
}
</>
);
});

47
src/components/VideoEditor.scss Normal file
View File

@ -0,0 +1,47 @@
#videoEditor {
min-width: 800px;
& .viewport {
position: relative;
// background: rgba(0, 0, 0, 0.1);
background-image:
linear-gradient(45deg, #0001 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #0001 75%),
linear-gradient(45deg, transparent 75%, #0001 75%),
linear-gradient(45deg, #0001 25%, transparent 25%);
background-size: 10px 10px;
background-position: 0 0, 0 0, -5px -5px, 5px 5px;
&>.overlay {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
text-align: start;
padding: 0.5rem;
color: black;
text-shadow: 0px 0px 3px white;
pointer-events: none;
}
&>video {
max-height: 400px;
width: 100%;
position: relative;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
}
}

176
src/components/VideoEditor.tsx Normal file
View File

@ -0,0 +1,176 @@
import { observer } from 'mobx-react';
import { state } from '../state/root';
import { useEffect, useRef } from 'react';
import useDocumentKeydown from '../hooks/documentKeydown';
import { reaction } from 'mobx';
import { VideoEditorOverlay } from './VideoEditorOverlay';
import { VideoProgress } from './VideoProgress';
import './VideoEditor.scss';
export const VideoEditor: React.FC = observer(() => {
const videoPlayerRef = useRef<HTMLVideoElement>(null);
useDocumentKeydown((key) => {
if (!videoPlayerRef.current)
return;
switch (key) {
case ' ':
return requestAnimationFrame(() => {
togglePause();
});
case 'shift+ ':
case 'ArrowRight':
return requestAnimationFrame(() => {
return seekToNextFrame();
});
case 'ArrowLeft':
return requestAnimationFrame(() => {
return seekToPrevFrame();
});
case 'shift+ArrowRight':
return state.video.seekToNextMark();
case 'shift+ArrowLeft':
return state.video.seekToPrevMark();
case 'Enter':
return saveMark();
default:
return 'unhandled';
}
});
useEffect(() => {
const dispose = reaction(
() => ({ time: state.video.currentTime, frame: state.video.currentFrame }),
(savedState) => {
if (!videoPlayerRef.current)
return;
const currentFrame = state.video.timeToFrame(videoPlayerRef.current.currentTime);
console.log('reaction' + videoPlayerRef.current.currentTime + ' => ' + savedState.time);
if (currentFrame !== savedState.frame) {
videoPlayerRef.current.pause();
videoPlayerRef.current.currentTime = savedState.time;
}
},
);
return dispose;
}, []);
if (!state.video.file)
return <>No file specified</>;
function togglePause() {
if (!videoPlayerRef.current)
return;
if (videoPlayerRef.current.paused) {
// if ((playVideoRef.current.currentTime >= timings[0].end)) {
// playVideoRef.current.pause();
// setPlaying(false);
// currentlyGrabbedRef.current = { 'index': 0, 'type': 'start' };
// playVideoRef.current.currentTime = timings[0].start;
// progressBarRef.current.style.left = `${timings[0].start / playVideoRef.current.duration * 100}%`;
// progressBarRef.current.style.width = '0%';
// }
videoPlayerRef.current.play();
}
else {
videoPlayerRef.current.pause();
}
}
function saveMark() {
if (state.video.isAtMark) {
const input = confirm('Remove current mark at ' + state.video.currentTime + '?');
if (input)
state.video.toggleMark();
}
else
state.video.toggleMark();
}
function seekToNextFrame() {
if (!videoPlayerRef.current || !state.video.metadata)
return;
seekTo(state.video.currentTime + 1 / state.video.metadata.frameRate);
}
function seekToPrevFrame() {
if (!videoPlayerRef.current || !state.video.metadata)
return;
seekTo(state.video.currentTime - 1 / state.video.metadata.frameRate);
}
function seekTo(targetTime: number) {
if (!videoPlayerRef.current)
return;
console.log('pre pause');
// videoPlayerRef.current.pause();
console.log('after pause');
state.video.seekToTime(targetTime);
console.log('after seek');
}
function handleTimeUpdate() {
if (!videoPlayerRef.current)
return;
state.video.seekToTime(videoPlayerRef.current.currentTime);
}
function handleLoadedMetadata() {
const video = videoPlayerRef.current;
if (!video)
return;
// const timeRangesObject = videoPlayerRef.current.seekable;
// const timeRanges = [];
// for (let i = 0; i < timeRangesObject.length; i++) {
// timeRanges.push([timeRangesObject.start(i), timeRangesObject.end(i)]);
// }
state.video.setMetadata({
duration: video.duration,
firstFrameTime: 0,
frameRate: 25,
});
}
console.dir('render VideoEditor');
return (
<>
<div
id='videoEditor'
>
<div className='viewport'>
<VideoEditorOverlay />
<video
className='video'
preload='metadata'
// muted={isMuted}
ref={videoPlayerRef}
onLoadedMetadata={handleLoadedMetadata}
onClick={() => {
togglePause();
}}
onTimeUpdate={handleTimeUpdate}
>
<source src={state.video.url} type={state.video.file.type} />
</video>
</div>
<header>{state.video.file?.name}</header>
<VideoProgress />
</div>
</>
);
});

16
src/components/VideoEditorOverlay.tsx Normal file
View File

@ -0,0 +1,16 @@
import { observer } from 'mobx-react';
import { state } from '../state/root';
import { timeToStr } from '../utils/time';
export const VideoEditorOverlay: React.FC = observer(() => {
if (!state.video.file)
return '';
return (
<div className='overlay'>
{timeToStr(state.video.currentTime)} <br />
{state.video.currentFrame}{state.video.isAtMark ? '(mark)' : ''} <br />
</div>
);
});

42
src/components/VideoProgress.tsx Normal file
View File

@ -0,0 +1,42 @@
import { observer } from 'mobx-react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
import { state } from '../state/root';
import { ReactNode } from 'react';
import { timeToStr } from '../utils/time';
export const VideoProgress: React.FC = observer(() => {
return (
<>
{/* <div style={{ height: 300, width: 600 }}> */}
<Slider
onChange={(values) => {
state.video.seekToTime(values as number);
// console.log('Change:', JSON.stringify(values));
}}
// onChangeComplete={(v) => {
// console.log('AfterChange:', v);
// }}
min={0}
max={state.video.metadata ? state.video.metadata?.duration : 0}
value={state.video.currentTime}
included={false}
keyboard={false}
step={state.video.metadata ? 1 / state.video.metadata?.frameRate : undefined}
marks={
state.video.marks.reduce(
(acc, mark) => {
const time = state.video.frameToTime(mark);
acc[time] = <>{timeToStr(time)}<br/>{mark}</>; return acc;
},
{} as Record<number, ReactNode>
)
}
trackStyle={{ backgroundColor: 'red', height: 10 }}
/>
{/* </div> */}
</>
);
});

1
src/components/VideoUploader.module.scss Normal file
View File

@ -0,0 +1 @@

32
src/components/VideoUploader.tsx Normal file
View File

@ -0,0 +1,32 @@
import { observer } from 'mobx-react';
import { state } from '../state/root';
import { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
export const VideoUploader: React.FC = observer(() => {
const handleDrop = useCallback((files: File[]) => {
state.video.setFile(files?.length ? files[0] : undefined);
}, []);
const { getRootProps, getInputProps, isDragActive } =
useDropzone({
accept: {
'video/*': [],
},
onDrop: handleDrop,
});
return (
<>
<div {...getRootProps()}>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the file here...</p> :
<p>Drag 'n' drop a video file here, or click to select it</p>
}
</div>
</>
);
});

22
src/hooks/documentKeydown.ts Normal file
View File

@ -0,0 +1,22 @@
import { useEffect } from 'react';
export type KeyboardEventHandler = (key: string) => 'unhandled' | unknown;
export default function useDocumentKeydown(handler: KeyboardEventHandler, passive = false) {
useEffect(() => {
const handlerWrapper =
(e: KeyboardEvent) => {
const key = (e.ctrlKey ? 'ctrl+' : '') + (e.shiftKey ? 'shift+' : '') + e.key;
const handled = handler(key);
if (handled !== 'unhandled')
e.preventDefault();
else
console.dir(key, handled);
};
document.addEventListener('keydown', handlerWrapper, { passive });
return () => document.removeEventListener('keydown', handlerWrapper);
}, [handler, passive]);
}

70
src/index.css Normal file
View File

@ -0,0 +1,70 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

10
src/main.tsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import { App } from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

6
src/state/root.ts Normal file
View File

@ -0,0 +1,6 @@
import { VideoEditorState } from './videoEditor';
export const state = new class RootState {
public readonly video = new VideoEditorState();
}

121
src/state/videoEditor.ts Normal file
View File

@ -0,0 +1,121 @@
import { action, computed, makeObservable, observable } from 'mobx';
export type VideoMetadata = {
frameRate: number;
firstFrameTime: number;
duration: number;
};
export class VideoEditorState {
@observable
public url: string | undefined;
@observable
public file: File | undefined;
@observable
public metadata: VideoMetadata | undefined;
@observable
public currentTime: number = 0;
@observable
public marks: number[] = [];
constructor() {
makeObservable(this);
}
public timeToFrame(time: number): number {
if (!this.metadata)
return 0;
return Math.round((time - this.metadata.firstFrameTime) * this.metadata.frameRate - 0.4);
}
public frameToTime(frame: number): number {
if (!this.metadata)
return 0;
return (frame + 0.4) / this.metadata.frameRate + this.metadata.firstFrameTime;
}
@computed
get currentFrame(): number {
return this.timeToFrame(this.currentTime);
}
@computed
get isAtMark(): boolean {
const currentFrame = this.currentFrame;
return this.marks.includes(currentFrame);
}
@action
setFile(file: File | undefined) {
this.file = file;
if (!file)
this.url = undefined;
else
this.url = URL.createObjectURL(file);
this.metadata = undefined;
this.currentTime = 0;
this.marks = [];
}
@action
setMetadata(metadata: VideoMetadata) {
this.metadata = metadata;
this.marks = [0, this.timeToFrame(metadata.duration)];
}
@action
seekToTime(time: number) {
this.currentTime = time;
}
@action
seekToFrame(frame: number) {
this.currentTime = this.frameToTime(frame);
}
@action
toggleMark(): void {
const marks = this.marks;
const indexOf = marks.indexOf(this.currentFrame);
if (indexOf < 0)
marks.push(Number(this.currentFrame));
else
marks.splice(indexOf, 1);
marks.sort((a, b) => a - b);
this.marks = marks;
}
@action
seekToPrevMark(): void {
if (!this.metadata)
return;
const currentFrame = this.currentFrame.valueOf();
const marks = this.marks.filter((m) => m < currentFrame);
const prevMark = marks.length ? marks[marks.length - 1] : 0;
// console.dir({ currentFrame, marks, prevMark });
if (marks)
this.seekToFrame(prevMark);
}
@action
seekToNextMark(): void {
if (!this.metadata)
return;
const currentFrame = this.currentFrame.valueOf();
const marks = this.marks.filter((m) => m > currentFrame);
// console.dir({ currentFrame, marks });
if (marks.length)
this.seekToFrame(marks[0]);
else
this.seekToTime(this.metadata?.duration);
}
}

10
src/utils/time.ts Normal file
View File

@ -0,0 +1,10 @@
export function timeToStr(time: number): string {
const second = time % 60;
const minute = Math.floor(time / 60);
let secString = second.toFixed(2);
if (secString.indexOf('.') < 2)
secString = '0' + secString;
return `${minute}:${secString}`;
}

1
src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

27
tsconfig.json Normal file
View File

@ -0,0 +1,27 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"experimentalDecorators": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
tsconfig.node.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})