From 07dcf566d83ce9d9ad0bd0ca7fe10a106ce9b5a0 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 28 Feb 2024 10:01:56 -0500 Subject: [PATCH 1/4] better time formatting --- .../common/VideoQuickTrim/VideoQuickTrim.tsx | 75 ++++++++----------- .../common/VideoQuickTrim/helpers.tsx | 14 ++++ .../components/common/VideoQuickTrim/index.ts | 6 +- .../common/VideoQuickTrim/styles.scss | 11 +++ .../common/VideoQuickTrim/types.tsx | 19 +++++ .../src/components/common/index.tsx | 2 + .../components/pageVSTApp/cnPresets.tsx | 23 +++--- .../components/pageVSTApp/pageVSTApp.tsx | 1 + .../pageVSTApp/sectionAdvanceOptions.tsx | 6 +- 9 files changed, 99 insertions(+), 58 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/VideoQuickTrim/helpers.tsx create mode 100644 packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index 51396c412a..94ecf43d70 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx @@ -1,15 +1,19 @@ import React, { + forwardRef, useCallback, useEffect, useLayoutEffect, useState, useRef, - PointerEvent + PointerEvent, } from "react"; import { faPlay, faPause, - faGripDots + faGripDots, + faVolume, + faVolumeMute, + faVolumeSlash, } from "@fortawesome/pro-solid-svg-icons" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { @@ -19,49 +23,24 @@ import { } from "components/common"; import { VideoFakeyouProps } from "../VideoFakeyou/VideoFakeyou"; +import { QuickTrimData, TrimStates, PlaybarStates } from "./types"; +import { formatSecondsToHHMMSSCS } from "./helpers"; import './styles.scss' -function roundTo2Dec(floaty:number){ - return Math.round(floaty*100)/100; -} -function fractionToPercentage(fraction:number){ - return roundTo2Dec(fraction * 100); -} -function formatSecondsToHHMMSS(seconds:number){ - if(seconds < 3600) - return new Date(seconds * 1000).toISOString().substring(14, 19) - else - return new Date(seconds * 1000).toISOString().slice(11, 19); -} - -export type QuickTrimType = { - trimStartSeconds: number; - trimEndSeconds: number; -} - interface VideoQuickTrimProps extends VideoFakeyouProps{ - onSelect: (val: QuickTrimType)=>void; + onSelect: (values: QuickTrimData)=>void; } -type TrimState = { - isScrubbingTrim: boolean; - trimDuration: number; - trimStart: number; - trimEnd: number; - maxDuration: number; -} -const initialTrimState = { + +const initialTrimState:TrimStates = { isScrubbingTrim: false, trimDuration: 3, trimStart: 0, trimEnd: 0, maxDuration: 0, } -type PlaybarState = { - playbarWidth: number; - timeCursorOffset: number; -} -const initialPlaybarState = { + +const initialPlaybarState:PlaybarStates = { playbarWidth: 0, timeCursorOffset: 0, } @@ -77,21 +56,21 @@ export default function VideoQuickTrim({ "5s": 5, "10s": 10, "15s" : 15, - "20s" : 20, + // "20s" : 20, }; const videoRef = useRef(null); const playbarRef = useRef(null); const trimZoneRef = useRef(null); - const [{playbarWidth, timeCursorOffset}, setPlaybarState] = useState(initialPlaybarState); + const [{playbarWidth, timeCursorOffset}, setPlaybarState] = useState(initialPlaybarState); const [playpause, setPlaypause] = useState<'playing'|'paused'|'stopped'>('paused'); const [{ trimStart, trimEnd, trimDuration, isScrubbingTrim, - }, setTrimState] = useState(initialTrimState); + }, setTrimState] = useState(initialTrimState); @@ -207,9 +186,9 @@ export default function VideoQuickTrim({ }} onPointerMove={(e: PointerEvent)=>{ if(trimZoneRef.current && playbarRef.current && isScrubbingTrim){ - console.log(fractionToPercentage( - (e.clientX - trimZoneRef.current.getBoundingClientRect().left) / (playbarRef.current.getBoundingClientRect().width) - ) + "%"); + // console.log(fractionToPercentage( + // (e.clientX - trimZoneRef.current.getBoundingClientRect().left) / (playbarRef.current.getBoundingClientRect().width) + // ) + "%"); } }} > @@ -225,8 +204,18 @@ export default function VideoQuickTrim({ variant="secondary" onClick={handlePlaypause} /> -
-

{`${formatSecondsToHHMMSS(videoRef.current?.currentTime || 0)} / ${formatSecondsToHHMMSS(videoRef.current?.duration || 0)}`}

+
+ +

+ {`${formatSecondsToHHMMSSCS(videoRef.current?.currentTime || 0)}`} +

+ +
/
+ +

+ {`${formatSecondsToHHMMSSCS(videoRef.current?.duration || 0)}`} +

+
); -} \ No newline at end of file +}; diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/helpers.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/helpers.tsx new file mode 100644 index 0000000000..cbe19a389a --- /dev/null +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/helpers.tsx @@ -0,0 +1,14 @@ +export function roundTo2Dec(floaty:number){ + return Math.round(floaty*100)/100; +} +export function fractionToPercentage(fraction:number){ + return roundTo2Dec(fraction * 100); +} +export function formatSecondsToHHMMSSCS(seconds:number){ + //example of the ISO String: 1970-01-01T00:01:40.774Z + const isoString = new Date(seconds * 1000).toISOString(); + if(seconds > 3600) + return isoString.substring(11, 19) + "." + isoString.substring(20, 22) + else + return isoString.substring(14, 19) + "." + isoString.substring(20, 22); +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/index.ts b/packages/fakeyou.com/src/components/common/VideoQuickTrim/index.ts index b0c5757986..7e49b01a6f 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/index.ts +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/index.ts @@ -1 +1,5 @@ -export { default } from './VideoQuickTrim'; \ No newline at end of file +import VideoQuickTrim from './VideoQuickTrim' +import { QuickTrimData } from './types'; + +export type { QuickTrimData }; +export default VideoQuickTrim; diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss index fa11c0ee69..5659954997 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss @@ -70,4 +70,15 @@ $playbar-height: 2rem; height: $playbar-height; background-color: $white; } + .playtime{ + span{ + width: 60px; + } + div{ + width: 10px; + margin-left: 3px; + margin-right: 5px; + text-align: center; + } + } } \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx new file mode 100644 index 0000000000..33eec7f2a9 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/types.tsx @@ -0,0 +1,19 @@ +//For integration into other components +export type QuickTrimData = { + trimStartSeconds: number; + trimEndSeconds: number; +} + +// INTERNALS +export type TrimStates = { + isScrubbingTrim: boolean; + trimDuration: number; + trimStart: number; + trimEnd: number; + maxDuration: number; +} + +export type PlaybarStates = { + playbarWidth: number; + timeCursorOffset: number; +} diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index 34e0d43b6f..d8032c0830 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -48,6 +48,7 @@ import TintSpinner from "./TintSpinner"; import VideoBasic from "./VideoBasic"; import VideoFakeyou from "./VideoFakeyou"; import VideoInput from "./VideoInput"; +// import VideoQuickTrim, {QuickTrimType} from "./VideoQuickTrim"; import SelectionBubbles from "./SelectionBubbles"; import Scene3D from "./Scene3D"; @@ -109,6 +110,7 @@ export { VideoBasic, VideoFakeyou, VideoInput, + // VideoQuickTrim, SelectionBubbles, Scene3D, }; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/cnPresets.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/cnPresets.tsx index d5886f8872..7a855df6d7 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/cnPresets.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/cnPresets.tsx @@ -9,16 +9,17 @@ type CNPreset = const defaultPreset = { cnCanny: 0, - cnDepth: 0.7, + cnDepth: 0, cnLineArtAnime: 0.7, - cnLineArtRealistic: 0.7, + cnLineArtRealistic: 0, cnLipsStrength: 0, - cnOpenPose: 0.7, - cnPipeFace: 0.7, - cnSparseScribble: 0.7, - cnSoftEdge: 0.7, + cnOpenPose: 1, + cnPipeFace: 0, + cnSparseScribble: 0, + cnSoftEdge: 1, cnRegularSteps: 20, } + const closeupPreset = { cnCanny: 0, cnDepth: 0, @@ -29,7 +30,7 @@ const closeupPreset = { cnPipeFace: 0, cnSparseScribble: 0.7, cnSoftEdge: 0.7, - cnRegularSteps: 30, + cnRegularSteps: 20, } const halfbodyPreset = { cnCanny: 0, @@ -41,7 +42,7 @@ const halfbodyPreset = { cnPipeFace: 0, cnSparseScribble: 0.7, cnSoftEdge: 0.7, - cnRegularSteps: 30, + cnRegularSteps: 20, } const fullbodyPreset = { cnCanny: 0, @@ -53,7 +54,7 @@ const fullbodyPreset = { cnPipeFace: 0, cnSparseScribble: 0.7, cnSoftEdge: 0.7, - cnRegularSteps: 30, + cnRegularSteps: 20, } const landscapePreset = { cnCanny: 0.7, @@ -65,7 +66,7 @@ const landscapePreset = { cnPipeFace: 0, cnSparseScribble: 0.7, cnSoftEdge: 0.7, - cnRegularSteps: 30, + cnRegularSteps: 20, } const typogPreset = { @@ -78,7 +79,7 @@ const typogPreset = { cnPipeFace: 0, cnSparseScribble: 0, cnSoftEdge: 0.7, - cnRegularSteps: 30, + cnRegularSteps: 20, } export type { diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx index 83c93483a8..9f226370ff 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx @@ -10,6 +10,7 @@ import { TextArea, VideoFakeyou } from "components/common"; +import VideoQuickTrim from 'components/common/VideoQuickTrim'; import EnqueueVideoStyleTransfer from "@storyteller/components/src/api/video_styleTransfer"; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx index 68aced5d4e..2ff478522b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx @@ -234,10 +234,10 @@ export default function SectionAdvanceOptions({ }}/> -
+ {/*
-
+
*/}