diff --git a/src/common/pages/submit/hooks/three-speak-manager-context.ts b/src/common/pages/submit/hooks/three-speak-manager-context.ts index a504ec8d795..31fd5570ef9 100644 --- a/src/common/pages/submit/hooks/three-speak-manager-context.ts +++ b/src/common/pages/submit/hooks/three-speak-manager-context.ts @@ -3,6 +3,7 @@ import { createContext } from "react"; export interface ThreeSpeakManagerContext { videos: Record; + setVideos: (v: Record) => void; isNsfw: boolean; setIsNsfw: (v: boolean) => void; isEditing: boolean; @@ -20,6 +21,7 @@ export interface ThreeSpeakManagerContext { export const ThreeSpeakVideoContext = createContext({ videos: {}, + setVideos: () => {}, isNsfw: false, setIsNsfw: () => {}, clear: () => {}, diff --git a/src/common/pages/submit/hooks/three-speak-manager.tsx b/src/common/pages/submit/hooks/three-speak-manager.tsx index 6dcecfa9e11..241b751a901 100644 --- a/src/common/pages/submit/hooks/three-speak-manager.tsx +++ b/src/common/pages/submit/hooks/three-speak-manager.tsx @@ -33,6 +33,7 @@ export function ThreeSpeakManager(props: { children: ReactNode }) { void; +} + +/** + * This adapter hook translates old 3speak attached posts to new format + * It needs for drafts or post editing + */ +export function useThreeSpeakMigrationAdapter({ body, setBody }: Props) { + const { attach } = useThreeSpeakManager(); + const { data: videoList } = useThreeSpeakVideo("all"); + + useEffect(() => { + let nextBody = body; + if (body) { + try { + const videosInPost = body.match(SPEAK_VIDEO_PATTERN); + if (videosInPost && videosInPost.length > 0) { + videosInPost?.forEach((video) => { + const v = video.matchAll(/.*watch\?v=(.+)\/(.+)\)\[Source\]/g); + const [_, username, permlink] = v.next().value; + + const existingVideo = videoList.find( + (video) => video.permlink === permlink && video.owner === username + ); + if (existingVideo) { + nextBody = nextBody.replace(video, `[3speak](${existingVideo._id})`); + setTimeout(() => attach(existingVideo), 1); // Drop from callstack to end + } + }); + } + setBody(nextBody); + } catch (e) { + console.error("[Old 3Speak video migration error]: Failed to migrate old 3speak video", e); + } + } + }, [body, videoList]); +} diff --git a/src/common/pages/submit/index.tsx b/src/common/pages/submit/index.tsx index 64ea747d3af..dc552970a05 100644 --- a/src/common/pages/submit/index.tsx +++ b/src/common/pages/submit/index.tsx @@ -58,6 +58,7 @@ import { SubmitPreviewContent } from "./submit-preview-content"; import { useUpdateApi } from "./api/update"; import "./_index.scss"; import { SubmitVideoAttachments } from "./submit-video-attachments"; +import { useThreeSpeakMigrationAdapter } from "./hooks/three-speak-migration-adapter"; interface MatchProps { match: MatchType; @@ -123,6 +124,11 @@ export function Submit(props: PageProps & MatchProps) { clearAdvanced } = useAdvancedManager(); + useThreeSpeakMigrationAdapter({ + body, + setBody + }); + useCommunityDetector(props.location, (community) => { setTags([...tags, community]); });