fix #47, #48 new gallery field, and started gumlet video

Prototypr · Jun 24, 2024 · 3462d68 · 3462d68
1 parent 350db2b
commit 3462d68
Show file tree

Hide file tree

Showing 11 changed files with 431 additions and 136 deletions.
diff --git a/components/Editor/CustomExtensions/Figure2/Figure.js b/components/Editor/CustomExtensions/Figure2/Figure.js
@@ -341,6 +341,7 @@ const Figure = Node.create({
                 .run()
             );
           } else if (attrs.figureType == "video") {
+            console.log(attrs)
             const content = [{ type: "video", attrs }];
 
             // if (caption) {

diff --git a/components/Editor/CustomExtensions/Video/Video.js b/components/Editor/CustomExtensions/Video/Video.js
@@ -1,80 +1,98 @@
-
-import { Node, mergeAttributes } from '@tiptap/core'
+import { Node, mergeAttributes } from "@tiptap/core";
 // https://www.codemzy.com/blog/tiptap-video-embed-extension
 
 const Video = Node.create({
-  name: 'video', // unique name for the Node
-  group: 'block', // belongs to the 'block' group of extensions
+  name: "video", // unique name for the Node
+  group: "block", // belongs to the 'block' group of extensions
   draggable: false, // so we can drag the video
   atom: true, // is a single unit
 
   addAttributes() {
     return {
-      "src": {
-        default: null
+      src: {
+        default: null,
       },
-      width:{
+      original:{
         default:null
       },
-      height:{
-        default:null
+      gumlet: {
+        default: null,
       },
-      class:{
-        default:''
+      width: {
+        default: null,
       },
-      autoplay:{
-        default:'autoplay'
+      height: {
+        default: null,
       },
-      loop:{
-        default:'loop'
+      class: {
+        default: "",
       },
-      muted:{
-        default:''
+      autoplay: {
+        default: "autoplay",
       },
-      defaultMuted:{
-        default:''
+      loop: {
+        default: "loop",
       },
-      playsinline:{
-        default:''
-      }
-    }
+      muted: {
+        default: "",
+      },
+      defaultMuted: {
+        default: "",
+      },
+      playsinline: {
+        default: "",
+      },
+    };
   },
 
   parseHTML() {
     return [
       {
-        tag: 'video',
+        tag: "video",
       },
-    ]
+    ];
   },
 
   renderHTML({ HTMLAttributes }) {
-      return ['video', mergeAttributes(HTMLAttributes)];
+    console.log(HTMLAttributes)
+    if (HTMLAttributes.gumlet) {
+      let gumletJSON = JSON.parse(HTMLAttributes.gumlet);
+     console.log(gumletJSON)
+      // if (gumletJSON.output?.playback_url) {
+      //   HTMLAttributes.src = gumletJSON.output?.playback_url;
+      // }
+    }
+
+    return ["video", mergeAttributes(HTMLAttributes)];
   },
 
   addCommands() {
     return {
-      setVideo: ({ src,position,width,height,classNames, ...attrs }) => ({ chain }) => {
-        return chain()
-        .insertContentAt(position,{
-          type: this.name,
-          attrs:{src, width, height,class:classNames}
-        })
-          // .insertContent({
-          //   type: this.name,
-          //   attrs:{src, width, height,class:classNames}
-          // })
-          // set cursor at end of caption field
-          .command(({ tr, commands }) => {
-            const { doc, selection } = tr
-            const position = doc.resolve(selection.to - 2).end()
+      setVideo:
+        ({ src, position, width, height, classNames, ...attrs }) =>
+        ({ chain }) => {
+          return (
+            chain()
+              .insertContentAt(position, {
+                type: this.name,
+                attrs: { src, width, height, class: classNames },
+              })
+              // .insertContent({
+              //   type: this.name,
+              //   attrs:{src, width, height,class:classNames}
+              // })
+              // set cursor at end of caption field
+              .command(({ tr, commands }) => {
+                const { doc, selection } = tr;
+                const position = doc.resolve(selection.to - 2).end();
 
-            return commands.setTextSelection(position)
-          })
-          .run()
-      },
-    }
-  }
+                return commands.setTextSelection(position);
+              })
+              .run()
+          );
+        },
+    };
+  },
 
   // addNodeView() {
   //   return ({ editor, node }) => {
@@ -97,4 +115,4 @@ const Video = Node.create({
   // },
 });
 
-export default Video
+export default Video;
diff --git a/components/Editor/Menus/FloatingMenu.jsx b/components/Editor/Menus/FloatingMenu.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { FloatingMenu } from "@tiptap/react";
 import useUser from "@/lib/iron-session/useUser";
 import toast from "react-hot-toast";
-
+import { uploadToGumlet } from "@/lib/uploadToGumlet";
 import { styled, keyframes } from "@stitches/react";
 import { violet, mauve, blackA } from "@radix-ui/colors";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -141,7 +141,7 @@ const uploadMedia = (event, editor, user, setLoading, setIsOpen) => {
 
         const resp = await fetch(url);
         const blob = await resp.blob();
-        setIsOpen(false)
+        setIsOpen(false);
         let placeholderPos = addPlaceholder(blob, editor);
 
         const file = new File([blob], `${files[0].name || "image.png"}`, {
@@ -163,26 +163,30 @@ const uploadMedia = (event, editor, user, setLoading, setIsOpen) => {
         await axios(configUpload)
           .then(async function (response) {
             setLoading(false);
-            setIsOpen(false)
+            setIsOpen(false);
             toast.success("Image Uploaded!", {
               duration: 5000,
             });
             const url = response?.data?.url;
             // editor.chain().focus().setFigure({src: url, caption:'enter caption'}).run()
             // editor.chain().focus().setImage({ src: url }).run();
-            editor.chain().setNodeSelection(placeholderPos).setFigure({
-              figureType: "image",
-              position: placeholderPos,
-              src: url,
-              alt: "",
-              figcaption: "",
-              class: "",
-            }).run();
+            editor
+              .chain()
+              .setNodeSelection(placeholderPos)
+              .setFigure({
+                figureType: "image",
+                position: placeholderPos,
+                src: url,
+                alt: "",
+                figcaption: "",
+                class: "",
+              })
+              .run();
             removePlaceholder(editor);
           })
           .catch(function (error) {
             console.log(error);
-            setIsOpen(false)
+            setIsOpen(false);
             alert("There was an issue with that image. Please try again.");
             setTimeout(() => {}, 300);
             removePlaceholder(editor);
@@ -228,7 +232,19 @@ const uploadMedia = (event, editor, user, setLoading, setIsOpen) => {
               duration: 5000,
             });
             let url = response?.data?.url;
-
+
+            // const gumletData = await uploadToGumlet({
+            //   videoUrl: url,
+            //   mediaId: null,
+            // });
+
+            // const gumletAttr = {
+            //   gumletId: gumletData.asset_id,
+            //   source_id: gumletData.source_id,
+            //   collection_id: gumletData.collection_id,
+            //   output: gumletData?.output,
+            // };
+
             //ensure url has https:// prefix
             if (!url.startsWith("https://")) {
               url = "https://" + url;
@@ -239,7 +255,9 @@ const uploadMedia = (event, editor, user, setLoading, setIsOpen) => {
             editor.commands.setFigure({
               figureType: "video",
               position: placeholderPos,
+              // gumlet: JSON.stringify(gumletAttr),
               src: url,
+              original: url,
               class: "",
             });
             removePlaceholder(editor);
@@ -327,14 +345,14 @@ const MenuFloating = ({ editor, isSelecting }) => {
     setIsOpen(!open);
   };
 
-  useEffect(()=>{
-    let editor = document.querySelector('.tiptap.ProseMirror')
-    if(open){
-      editor?.classList?.add('menu-open')
-    }else{
-      editor?.classList?.remove('menu-open')
+  useEffect(() => {
+    let editor = document.querySelector(".tiptap.ProseMirror");
+    if (open) {
+      editor?.classList?.add("menu-open");
+    } else {
+      editor?.classList?.remove("menu-open");
     }
-  },[open])
+  }, [open]);
 
   useEffect(() => {
     function handleKeyUp(event) {
@@ -349,7 +367,7 @@ const MenuFloating = ({ editor, isSelecting }) => {
     <FloatingMenu
       shouldShow={({ editor, view, state, oldState }) => {
         if (state?.selection?.$anchor?.parent?.type?.name == "doc") {
-          setIsOpen(false)
+          setIsOpen(false);
           return false;
         }
 
@@ -425,9 +443,9 @@ const MenuFloating = ({ editor, isSelecting }) => {
                       id="img-upload"
                       accept="image/*,video/*"
                       className="hidden"
-                      onChange={event =>{
-                        setIsOpen(false)
-                        uploadMedia(event, editor, user, setLoading, setIsOpen)
+                      onChange={event => {
+                        setIsOpen(false);
+                        uploadMedia(event, editor, user, setLoading, setIsOpen);
                       }}
                     />
                   </>
@@ -471,7 +489,7 @@ const MenuFloating = ({ editor, isSelecting }) => {
                         })
                         .setNodeSelection(pos - 1)
                         .insertContentAt(pos, "<p></p>")
-                        .setTextSelection(pos+1)
+                        .setTextSelection(pos + 1)
                         .focus()
                         .enter()
                         .run();