initial commit
This commit is contained in:
Anton
commit
7b2673d626
|
|
@ -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 },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
@ -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?
|
||||
|
|
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 />
|
||||
}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
|
@ -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> */}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -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]);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>,
|
||||
)
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { VideoEditorState } from './videoEditor';
|
||||
|
||||
export const state = new class RootState {
|
||||
|
||||
public readonly video = new VideoEditorState();
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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}`;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
|
@ -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" }]
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Reference in New Issue