diff --git a/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx index 0ff353666f..14a3489875 100644 --- a/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx +++ b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx @@ -14,6 +14,7 @@ import './styles.scss'; export interface VideoFakeyouProps{ + debug?: boolean; width?: number|string; height?: number|string; hideIfNoMedia?: boolean; @@ -30,6 +31,7 @@ export interface VideoFakeyouProps{ type Ref = HTMLVideoElement; const VideoFakeyou = memo(forwardRef(({ + debug: propsDebug = false, width, height, hideIfNoMedia = false, @@ -44,11 +46,15 @@ const VideoFakeyou = memo(forwardRef(({ ...rest }: VideoFakeyouProps, ref) => { //console.log(`Video Player rerender: ${mediaToken}`); + const debug = false;// || propsDebug; + + if(debug) console.log("VideoFakeyou reRENDER!!"); const [mediaFile, setMediaFile] = useState(null); useEffect(()=>{ setMediaFile(null); },[mediaToken]) + useMedia({ mediaToken: mediaToken, onSuccess: (res: any) => { diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index 8a11af6729..d87185d6d0 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx @@ -23,24 +23,28 @@ import { STATE_STATUSES, } from "./reducer"; -import { QuickTrimData } from "./utilities"; +import { QuickTrimData, ONE_MS } from "./utilities"; import { ProgressBar } from "./components/ProgressBar"; import { ControlBar } from "./components/ControlBar"; import './styles.scss' interface VideoQuickTrimProps extends VideoFakeyouProps { + debug?: boolean onSelect: (values: QuickTrimData) => void; trimStartSeconds: number; trimEndSeconds: number; } export const VideoQuickTrim = memo(({ + debug: propsDebug = false, onSelect, trimStartSeconds: propsTrimStartSeconds, trimEndSeconds : propsTrimEndSeconds, ...rest }: VideoQuickTrimProps) => { + const debug = true || propsDebug; + const { t } = useLocalize("VideoPlayerQuickTrim"); const videoRef = useRef(null); const [compState, dispatchCompState] = useReducer(reducer, initialState); @@ -72,10 +76,13 @@ export const VideoQuickTrim = memo(({ compState.playbarWidth !== undefined){ // reset current time when on repeat if(compState.isRepeatOn && - (node.currentTime >= compState.trimEndSeconds || node.currentTime <= compState.trimStartSeconds) + (node.currentTime > compState.trimEndSeconds || node.currentTime < compState.trimStartSeconds) ){ - node.currentTime = compState.trimStartSeconds; - console.log('play looped'); + node.currentTime = compState.trimStartSeconds + ONE_MS; + // if (debug){ + // console.log(`Loop Playing trimStart@${compState.trimStartSeconds}`); + // console.log(`Loop Playing currentTime@${node.currentTime}`); + // } } dispatchCompState({ @@ -92,6 +99,16 @@ export const VideoQuickTrim = memo(({ node.onplay = ()=>setPlaypause(PLAYPUASE_STATES.PLAYING); node.onpause = ()=>setPlaypause(PLAYPUASE_STATES.PAUSED); node.onended = ()=>setPlaypause(PLAYPUASE_STATES.ENDED); + + node.onprogress = ()=>{ + console.log(node.buffered); + if(node.buffered.length > 0){ + dispatchCompState({ + type: ACTION_TYPES.SET_VIDEO_LOAD_PROGRESS, + payload: {videoLoadProgress: node.buffered} + }); + } + } } // else{} DOM node referenced by ref has been unmounted }, [ compState.trimStartSeconds, @@ -130,11 +147,17 @@ export const VideoQuickTrim = memo(({ console.log('Playpause is triggered while it is NOT_READY'); } }; - + function disableRepeatOn(){ + dispatchCompState({ + type: ACTION_TYPES.TOGGLE_REPEAT, + payload: {isRepeatOn: false} + }); + } return (
{/* END of Video Wrapper */} { if(videoRef.current !== null && videoRef.current.currentTime && compState.playbarWidth && compState.videoDuration){ - videoRef.current.currentTime = newPos / compState.playbarWidth * compState.videoDuration; + const newTime = newPos / compState.playbarWidth * compState.videoDuration; + if(compState.trimStartSeconds + && compState.trimEndSeconds + && (newTime < compState.trimStartSeconds + || newTime > compState.trimEndSeconds + )){ + disableRepeatOn(); + } + videoRef.current.currentTime = newTime; } }} /> void; dispatchCompState: (action: Action) => void; })=>{ + const debug = false || propsDebug; + if (debug) console.log("ControlBar reRENDERED!!"); + function handleSetTrimDuration(selected: string){ dispatchCompState({ type: ACTION_TYPES.SET_TRIM_DURATION, @@ -42,10 +47,6 @@ export const ControlBar = memo(({ trimDurationString: selected } }); - // onSelect({ - // trimStartSeconds: newTrimStart, - // trimEndSeconds: newTrimEnd, - // }); }; if(readyToMount){ return( diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/ProgressBar.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/ProgressBar.tsx index fbef730a4c..2d96bbb908 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/ProgressBar.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/components/ProgressBar.tsx @@ -12,6 +12,7 @@ import { TrimScrubber } from './TrimScrubber'; import { PlayCursor } from './PlayCursor'; export const ProgressBar = memo(({ + debug: propsDebug = false, readyToMount, timeCursorOffset, trimStartSeconds, @@ -23,6 +24,7 @@ export const ProgressBar = memo(({ onPlayCursorChanged, dispatchCompState }:{ + debug?: boolean; readyToMount: boolean; timeCursorOffset: number; trimStartSeconds: number; @@ -30,10 +32,12 @@ export const ProgressBar = memo(({ playbarWidth: number; scrubberWidth: number; videoDuration: number; - videoBuffered:TimeRanges | undefined; + videoBuffered: TimeRanges | undefined; onPlayCursorChanged: (newPos: number) => void; dispatchCompState: (action: Action) => void; })=>{ + const debug = false || propsDebug; + const playbarRef = useRef(null); const playbarRefCallback = useCallback(node => { @@ -78,6 +82,7 @@ export const ProgressBar = memo(({
void } export const TrimScrubber = memo(({ + debug: propsDebug = false, trimStartSeconds, trimDuration, videoDuration, onChange, ...rest }:TrimScrubberPropsI)=>{ + const debug = false || propsDebug; const TrimScrubberWithScrubbing = withScrubbing(() => { return( @@ -31,6 +33,7 @@ export const TrimScrubber = memo(({ return ( (Component: React.ComponentType

) => memo(({ + debug: propsDebug = false, boundingWidth, scrubberWidth, scrubPosition: propsLeftOffset = 0, @@ -29,11 +31,12 @@ export const withScrubbing =

(Component: React.Co onScrubChanged, ...rest }: withScrubbingPropsI) => { - console.log(`withSCRUBBING reRENDERING!! `); + const debug = false ;//|| propsDebug; + if (debug) console.log(`withSCRUBBING reRENDERING!! `); + const refEl = useRef(null); const refListener = useRef(Date.now()); - const [{ currLeftOffset, pointerStartPos, prevLeftOffset @@ -44,7 +47,7 @@ export const withScrubbing =

(Component: React.Co }); useLayoutEffect(() => { - console.log(`withSCRUBBING useLAYOUTeffect!! `); + // if (debug) console.log(`withSCRUBBING useLAYOUTeffect!! `); function handleScrubStart (e: MouseEvent) { if(refEl.current){ if(refEl.current.contains(e.target as Node)){ @@ -102,7 +105,7 @@ export const withScrubbing =

(Component: React.Co }, [scrubberWidth, boundingWidth]); useEffect(()=>{ - console.log(`withSCRUBBING useEFFECT!! `); + // if (debug) console.log(`withSCRUBBING useEFFECT!! `); if(onScrubChanged && boundingWidth > 0 && prevLeftOffset >= 0 && propsLeftOffset !== prevLeftOffset){ onScrubChanged(prevLeftOffset); } diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/reducer.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/reducer.tsx index 8e769823b2..18bb54f6a3 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/reducer.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/reducer.tsx @@ -1,4 +1,9 @@ -import { MIN_VID_DURATION, TIME_CURSOR_WIDTH, TRIM_OPTIONS } from "./utilities"; +import { + MIN_VID_DURATION, + TIME_CURSOR_WIDTH, + TRIM_OPTIONS, + roundToMilliseconds +} from "./utilities"; export enum STATE_STATUSES { INIT = "init", @@ -26,7 +31,7 @@ export type State = { trimDuration: number | undefined; trimStartSeconds: number | undefined; trimEndSeconds: number | undefined; - videoLoadProgress: number | undefined; + videoLoadProgress: TimeRanges | undefined; videoDuration: number | undefined; @@ -71,7 +76,7 @@ export enum ACTION_TYPES { export type Action = | {type: ACTION_TYPES.RESET} - | {type: ACTION_TYPES.TOGGLE_REPEAT} + | {type: ACTION_TYPES.TOGGLE_REPEAT, payload?:{isRepeatOn: boolean}} | {type: ACTION_TYPES.TOGGLE_MUTE} | {type: ACTION_TYPES.ON_LOADED_METADATA, payload: {videoDuration: number}} | {type: ACTION_TYPES.MOVE_TIMECURSOR, payload:{ timeCursorOffset: number}} @@ -79,7 +84,7 @@ export type Action = | {type: ACTION_TYPES.SET_PLAYBAR_LAYOUT, payload:{ playbarWidth: number}} | {type: ACTION_TYPES.SET_TRIM_DURATION, payload:{ trimDurationString: string}} | {type: ACTION_TYPES.SET_VIDEO_LOAD_PROGRESS, payload: { - videoLoadProgress: number + videoLoadProgress: TimeRanges }} | {type: ACTION_TYPES.MOVE_TRIM, payload:{ trimStartSeconds: number, @@ -96,6 +101,9 @@ export function reducer(state: State, action: Action): State { return {...state, ...action.payload}; } case ACTION_TYPES.TOGGLE_REPEAT:{ + if(action.payload){ + return {...state, isRepeatOn: action.payload.isRepeatOn} + } return {...state, isRepeatOn: !state.isRepeatOn} } case ACTION_TYPES.TOGGLE_MUTE:{ @@ -159,7 +167,7 @@ export function reducer(state: State, action: Action): State { if (newTrimEnd > state.videoDuration){ newTrimEnd = state.videoDuration; if (state.videoDuration - TRIM_OPTIONS[selected] >=0) { - newTrimStart = state.videoDuration - TRIM_OPTIONS[selected]; + newTrimStart = roundToMilliseconds(state.videoDuration - TRIM_OPTIONS[selected]); }else{ newTrimStart = 0; } @@ -182,8 +190,8 @@ export function reducer(state: State, action: Action): State { case ACTION_TYPES.MOVE_TRIM:{ return{ ...state, - trimStartSeconds: action.payload.trimStartSeconds, - trimEndSeconds: action.payload.trimEndSeconds, + trimStartSeconds: roundToMilliseconds(action.payload.trimStartSeconds), + trimEndSeconds: roundToMilliseconds(action.payload.trimEndSeconds), } } case ACTION_TYPES.MOVE_TIMECURSOR:{ diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx index 62f1f741fd..0d8c907333 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/utilities.tsx @@ -1,18 +1,17 @@ //For integration into other components export const TIME_CURSOR_WIDTH = 8; export const MIN_VID_DURATION = 3; +export const ONE_MS = 0.001; export type QuickTrimData = { trimStartSeconds: number; trimEndSeconds: number; } -export function roundTo2Dec(floaty:number){ - return Math.round(floaty*100)/100; -} -export function fractionToPercentage(fraction:number){ - return roundTo2Dec(fraction * 100); +export function roundToMilliseconds(floaty:number){ + return Math.round(floaty*1000)/1000; } + export function formatSecondsToHHMMSSCS(seconds:number){ //example of the ISO String: 1970-01-01T00:01:40.774Z const isoString = new Date(seconds * 1000).toISOString();