diff --git a/apps/frontend/src/components/launches/providers/high.order.provider.tsx b/apps/frontend/src/components/launches/providers/high.order.provider.tsx index dd754a3f..8249f0c7 100644 --- a/apps/frontend/src/components/launches/providers/high.order.provider.tsx +++ b/apps/frontend/src/components/launches/providers/high.order.provider.tsx @@ -69,7 +69,7 @@ export const EditorWrapper: FC<{ children: ReactNode }> = ({ children }) => { }; export const withProvider = ( - SettingsComponent: FC | null, + SettingsComponent: FC<{values?: any}> | null, CustomPreviewComponent?: FC<{maximumCharacters?: number}>, dto?: any, checkValidity?: ( @@ -403,7 +403,7 @@ export const withProvider = ( )} {(showTab === 0 || showTab === 2) && (
- +
)} {showTab === 0 && ( diff --git a/apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx b/apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx index 3d3e2b06..3dc6a203 100644 --- a/apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx +++ b/apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx @@ -1,8 +1,16 @@ -import { FC } from 'react'; +import { + FC, + ReactEventHandler, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { withProvider } from '@gitroom/frontend/components/launches/providers/high.order.provider'; import { TikTokDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/tiktok.dto'; import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values'; import { Select } from '@gitroom/react/form/select'; +import { useCustomProviderFunction } from '@gitroom/frontend/components/launches/helpers/use.custom.provider.function'; const privacyLevel = [ { @@ -34,10 +42,72 @@ const yesNo = [ }, ]; -const TikTokSettings: FC = () => { +const CheckTikTokValidity: FC<{ picture: string }> = (props) => { + const { register } = useSettings(); + const func = useCustomProviderFunction(); + const [maxVideoLength, setMaxVideoLength] = useState(0); + const [isValidVideo, setIsValidVideo] = useState( + undefined + ); + + const registerVideo = register('isValidVideo'); + const video = useMemo(() => { + return props.picture; + }, [props.picture]); + + useEffect(() => { + loadStats(); + }, []); + + const loadStats = useCallback(async () => { + const { maxDurationSeconds } = await func.get('maxVideoLength'); + // setMaxVideoLength(5); + setMaxVideoLength(maxDurationSeconds); + }, []); + + const loadVideo: ReactEventHandler = useCallback( + (e) => { + // @ts-ignore + setIsValidVideo(e.target.duration <= maxVideoLength); + registerVideo.onChange({ + target: { + name: 'isValidVideo', + // @ts-ignore + value: String(e.target.duration <= maxVideoLength), + }, + }); + }, + [maxVideoLength, registerVideo] + ); + + if (!maxVideoLength || !video || video.indexOf('mp4') === -1) { + return null; + } + + return ( + <> + {isValidVideo === false && ( +
+ Video length is invalid, must be up to {maxVideoLength} seconds +
+ )} + + + ); +}; + +const TikTokSettings: FC<{ values?: any }> = (props) => { const { register, control } = useSettings(); + return (
+