Merge pull request #1467 from ecency/feature/added-old-draft-migrator

Added 3speak old video migration from edit or draft

src/common/pages/submit/hooks/three-speak-manager-context.ts

@@ -3,6 +3,7 @@ import { createContext } from "react";
 
 export interface ThreeSpeakManagerContext {
   videos: Record<string, ThreeSpeakVideo>;
+  setVideos: (v: Record<string, ThreeSpeakVideo>) => void;
   isNsfw: boolean;
   setIsNsfw: (v: boolean) => void;
   isEditing: boolean;
@@ -20,6 +21,7 @@ export interface ThreeSpeakManagerContext {
 
 export const ThreeSpeakVideoContext = createContext<ThreeSpeakManagerContext>({
   videos: {},
+  setVideos: () => {},
   isNsfw: false,
   setIsNsfw: () => {},
   clear: () => {},

src/common/pages/submit/hooks/three-speak-manager.tsx

@@ -33,6 +33,7 @@ export function ThreeSpeakManager(props: { children: ReactNode }) {
     <ThreeSpeakVideoContext.Provider
       value={{
         videos: videos!!,
+        setVideos,
         isNsfw: isNsfw!!,
         setIsNsfw,
         isEditing,

src/common/pages/submit/hooks/three-speak-migration-adapter.ts

@@ -0,0 +1,46 @@
+import { useThreeSpeakManager } from "./three-speak-manager";
+import { useThreeSpeakVideo } from "../../../api/threespeak";
+import { useEffect } from "react";
+
+const SPEAK_VIDEO_PATTERN =
+  /\[\!\[\]\(https:\/\/ipfs-3speak\.b-cdn\.net\/ipfs\/.*\)\]\(https:\/\/3speak\.tv\/watch\?v=.*\/.*\)\[Source\]\(https:\/\/ipfs-3speak\.b-cdn\.net\/ipfs\/.*\)/g;
+
+interface Props {
+  body: string;
+  setBody: (v: string) => 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]);
+}

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]);
   });