@soul-refiner/design-system 0.0.9 → 0.0.11

package/dist/src/editor/components/MediaDrawer/MediaDrawer.tsx

@@ -0,0 +1,457 @@
+import React from "react";
+import {
+  findNodePath,
+  replaceNodeChildren,
+  removeNodes,
+  setNodes,
+  TElement,
+  usePlateEditorRef,
+} from "@udecode/plate";
+import {
+  ClosedCaptions,
+  Details,
+  Image,
+  Upload,
+  VideoPlay,
+} from "@soul-refiner/icons/src";
+import { secondsToTimeString } from "@soul-refiner/utils/src";
+import { Media } from "@soul-refiner/models";
+
+import { Button, Dropzone, Switch } from "../../../actions";
+import { EditorContext } from "../../Editor";
+import { TextInput } from "../../../inputs";
+import { Drawer } from "../../../navigation";
+import { Modal } from "../../../surfaces";
+
+import styles from "./MediaDrawer.module.scss";
+import { ELEMENT_VIDEO } from "../../common";
+
+export interface MediaDrawerProps {
+  element: TElement;
+  open: boolean;
+  toggle: () => void;
+}
+
+export const MediaDrawer = ({ element, open, toggle }: MediaDrawerProps) => {
+  const {
+    availableVideos,
+    handleChangeVideo,
+    handleDeleteVideo,
+    handleUploadImage,
+    handleUploadVideo,
+  } = React.useContext(EditorContext);
+  const { children, type: __, ...spreadVideo } = element;
+  const text = children[0].text as string;
+  const video = spreadVideo as unknown as Media;
+  const editorRef = usePlateEditorRef("main");
+  const [mediaTab, setMediaTab] = React.useState("Upload");
+  const [title, setTitle] = React.useState(video.title);
+  const [synopsis, setSynopsis] = React.useState(video.synopsis);
+  const [videoToBeChanged, setVideoToBeChanged] = React.useState<null | Media>(
+    null
+  );
+  const [deleteText, setDeleteText] = React.useState("");
+
+  const path = findNodePath(editorRef, element);
+
+  React.useEffect(() => {
+    if (title !== text && typeof text === "string") setTitle(text);
+  }, [text]);
+
+  if (!video) return null;
+
+  const handleTitle = (event: React.FormEvent) => {
+    const value = (event.target as HTMLTextAreaElement).value;
+    if (path) {
+      replaceNodeChildren(editorRef, {
+        at: path,
+        nodes: {
+          text: value,
+        },
+      });
+      setNodes(
+        editorRef,
+        {
+          title,
+        },
+        {
+          at: path,
+        }
+      );
+      setTitle(value);
+    }
+  };
+
+  const handleSynopsis = (event: React.FormEvent) => {
+    const value = (event.target as HTMLTextAreaElement).value;
+    setNodes(
+      editorRef,
+      {
+        synopsis,
+      },
+      {
+        at: path,
+      }
+    );
+    setSynopsis(value);
+  };
+
+  const handleMediaTabs = (option: string) => setMediaTab(option);
+
+  const handleDeleteTextChange = (event: React.FormEvent) => {
+    const value = (event.target as HTMLInputElement).value;
+    setDeleteText(value);
+  };
+
+  const handleVideoReplace = () => {
+    if (videoToBeChanged) {
+      setTitle(videoToBeChanged.title);
+      setSynopsis(videoToBeChanged.synopsis);
+      setVideoToBeChanged(null);
+      setNodes(
+        editorRef,
+        {
+          id: videoToBeChanged.id,
+          created: videoToBeChanged.created,
+          parentId: videoToBeChanged.parentId,
+          captions: videoToBeChanged.captions ?? [],
+          duration: videoToBeChanged.duration,
+          sample: videoToBeChanged.sample,
+          source: videoToBeChanged.source,
+          status: videoToBeChanged.status,
+          synopsis: videoToBeChanged.synopsis,
+          thumbnail: videoToBeChanged.thumbnail,
+          title: videoToBeChanged.title,
+        },
+        {
+          at: path,
+        }
+      );
+      if (path) {
+        replaceNodeChildren(editorRef, {
+          at: path,
+          nodes: {
+            text: videoToBeChanged.title,
+          },
+        });
+      }
+    }
+  };
+
+  const handleVideoDelete = () => {
+    handleDeleteVideo(video.id);
+    removeNodes(editorRef, {
+      at: path,
+    });
+  };
+
+  const handleSourceChange = async (files: FileList) => {
+    const file = files[0];
+    handleUploadVideo(file).then((obj) => setVideoToBeChanged(obj));
+  };
+
+  const handleThumbnailChange = async (files: FileList) => {
+    const file = files[0];
+    handleUploadImage(file).then((url) => {
+      setNodes(
+        editorRef,
+        {
+          thumbnail: url,
+        },
+        {
+          at: path,
+        }
+      );
+    });
+  };
+
+  const handleSave = () => {
+    handleChangeVideo(video);
+    toggle();
+  };
+
+  return (
+    <Drawer className={styles.drawer} open={open} toggle={toggle}>
+      <Drawer.Heading>Media Settings</Drawer.Heading>
+      <Drawer.Action onClick={() => toggle()}>Cancel</Drawer.Action>
+      <Drawer.Action onClick={handleSave}>Save</Drawer.Action>
+      <h4 className={styles.mediaName}>{text}</h4>
+      <Drawer.Tab name="Media">
+        <Drawer.Item
+          header={{
+            as: "h5",
+            color: "orange",
+            icon: (
+              <Details
+                iconSize={20}
+                size={24}
+                style={{ backgroundColor: "transparent" }}
+              />
+            ),
+            title: "Details",
+          }}
+        >
+          <div contentEditable={false} className={styles.details}>
+            <h6>Title</h6>
+            <p>
+              Pick an easy to read, memorable title for your product. Example:
+              "10 Lessons from the Book of Matthew." Suggested 140 characters
+              max.
+            </p>
+            <TextInput
+              characterCount={false}
+              onChange={handleTitle}
+              placeholder="Title"
+              value={title}
+            />
+            <h6>Description</h6>
+            <p>
+              Tell us a little bit about this media. The description will appear
+              on the overview page.
+            </p>
+            <TextInput
+              characterCount={true}
+              maxLength={350}
+              onChange={handleSynopsis}
+              placeholder="Description..."
+              value={synopsis}
+            />
+          </div>
+        </Drawer.Item>
+        <Drawer.Item
+          header={{
+            as: "h5",
+            color: "purple",
+            icon: (
+              <Upload
+                iconSize={20}
+                size={24}
+                style={{ backgroundColor: "transparent" }}
+              />
+            ),
+            title: "Media",
+          }}
+        >
+          <div className={styles.media}>
+            <Switch
+              active={mediaTab}
+              onClick={handleMediaTabs}
+              options={["Upload", "Select from list"]}
+            />
+            <div className={styles.contentWrapper}>
+              {mediaTab === "Upload" && (
+                <Dropzone
+                  color="purple"
+                  fileType="video"
+                  onDrop={handleSourceChange}
+                  showBrowse
+                  text="Drag here or "
+                />
+              )}
+              {mediaTab === "Select from list" && (
+                <div className={styles.select}>
+                  <div className={styles.videoWrapper}>
+                    {availableVideos.map((video) => (
+                      <div
+                        className={styles.video}
+                        key={video.id}
+                        onClick={() => setVideoToBeChanged(video)}
+                      >
+                        <div className={styles.thumbnailWrapper}>
+                          <img src={video.thumbnail} alt={video.title} />
+                          <span className={styles.duration}>
+                            {secondsToTimeString(video.duration)}
+                          </span>
+                        </div>
+                        <p className={styles.title}>{video.title}</p>
+                        <div
+                          className={`${styles.selected} ${
+                            videoToBeChanged?.id === video.id ? "active" : ""
+                          }`}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+              <div className={styles.buttonWrapper}>
+                <Modal>
+                  <Modal.Trigger>
+                    <Button
+                      buttonColor="var(--color-blue-3)"
+                      disabled={!videoToBeChanged}
+                      shape="rectangular"
+                      size="large"
+                    >
+                      Replace Video
+                    </Button>
+                  </Modal.Trigger>
+                  <Modal.Content header={<h4>Replace Video</h4>}>
+                    <div className={styles.modal}>
+                      <p>
+                        Replace this file with a different version. Stats,
+                        public comments, and likes associated with this video
+                        will not be affected.
+                      </p>
+                      <div
+                        className={`${styles.buttonWrapper} ${styles.replaceModal}`}
+                      >
+                        <Modal.Dismiss>
+                          <Button
+                            buttonType="secondary"
+                            shape="rectangular"
+                            size="large"
+                          >
+                            Cancel
+                          </Button>
+                        </Modal.Dismiss>
+                        <Modal.Dismiss>
+                          <Button
+                            buttonColor="var(--color-blue-3)"
+                            onClick={handleVideoReplace}
+                            shape="rectangular"
+                            size="large"
+                          >
+                            Replace
+                          </Button>
+                        </Modal.Dismiss>
+                      </div>
+                    </div>
+                  </Modal.Content>
+                </Modal>
+                <Modal>
+                  <Modal.Trigger>
+                    <Button
+                      buttonColor="#FFFFFF"
+                      shape="rectangular"
+                      size="large"
+                      style={{
+                        border: "1px solid var(--color-red-5)",
+                      }}
+                    >
+                      Delete Video
+                    </Button>
+                  </Modal.Trigger>
+                  <Modal.Content header={<h4>Delete this video?</h4>}>
+                    <div className={`${styles.modal} ${styles.deleteWrapper}`}>
+                      <p>
+                        This will permanently delete this video, including all
+                        analytics, removing it from your course and player. This
+                        action cannot be undone.
+                      </p>
+                      <p>Are you sure you want to delete this video?</p>
+                      <p>Type DELETE to confirm.</p>
+                      <input
+                        onChange={handleDeleteTextChange}
+                        value={deleteText}
+                      />
+                      <div
+                        className={`${styles.buttonWrapper} ${styles.deleteModal}`}
+                      >
+                        <Modal.Dismiss>
+                          <Button
+                            buttonType="secondary"
+                            shape="rectangular"
+                            size="large"
+                          >
+                            Cancel
+                          </Button>
+                        </Modal.Dismiss>
+                        <Modal.Dismiss>
+                          <Button
+                            disabled={deleteText !== "DELETE"}
+                            onClick={handleVideoDelete}
+                            shape="rectangular"
+                            size="large"
+                          >
+                            Delete
+                          </Button>
+                        </Modal.Dismiss>
+                      </div>
+                    </div>
+                  </Modal.Content>
+                </Modal>
+              </div>
+            </div>
+          </div>
+        </Drawer.Item>
+        <Drawer.Item
+          header={{
+            as: "h5",
+            color: "green",
+            icon: (
+              <Image
+                iconSize={24}
+                size={24}
+                style={{ backgroundColor: "transparent" }}
+              />
+            ),
+            title: "Thumbnail",
+          }}
+        >
+          <div className={styles.thumbnail}>
+            <Dropzone
+              color="green"
+              fileType="image"
+              onDrop={handleThumbnailChange}
+              showBrowse
+              text="Drag here or "
+            />
+          </div>
+        </Drawer.Item>
+        <Drawer.Item
+          header={{
+            as: "h5",
+            color: "turquoise",
+            icon: (
+              <VideoPlay
+                iconSize={20}
+                size={24}
+                style={{ backgroundColor: "transparent" }}
+              />
+            ),
+            title: "Add to Playlist",
+          }}
+        >
+          <div className={styles.addToPlaylist}></div>
+        </Drawer.Item>
+      </Drawer.Tab>
+      <Drawer.Tab name="Media">
+        <Drawer.Item
+          header={{
+            as: "h5",
+            color: "purple",
+            icon: (
+              <ClosedCaptions
+                iconSize={20}
+                size={24}
+                style={{ backgroundColor: "transparent" }}
+              />
+            ),
+            title: "Video Subtitles",
+          }}
+        >
+          <div contentEditable={false} className={styles.captions}></div>
+        </Drawer.Item>
+      </Drawer.Tab>
+      <Drawer.Tab name="Sample">
+        <Drawer.Item
+          header={{
+            as: "h5",
+            color: "purple",
+            icon: (
+              <ClosedCaptions
+                iconSize={20}
+                size={24}
+                style={{ backgroundColor: "transparent" }}
+              />
+            ),
+            title: "Video Sample",
+          }}
+        >
+          <div contentEditable={false} className={styles.captions}></div>
+        </Drawer.Item>
+      </Drawer.Tab>
+    </Drawer>
+  );
+};

package/dist/src/editor/components/MediaDrawer/index.ts

@@ -0,0 +1 @@
+export { MediaDrawer, type MediaDrawerProps } from "./MediaDrawer";

package/dist/src/editor/components/index.ts

@@ -0,0 +1 @@
+export { MediaDrawer, type MediaDrawerProps } from "./MediaDrawer";

package/dist/src/editor/config/default.ts

@@ -0,0 +1,213 @@
+export const DEFAULT_CONTENT = [
+  {
+    type: "h1",
+    children: [
+      {
+        text: "Module 1:  The Warrior Identity",
+        bold: true,
+      },
+    ],
+  },
+  {
+    id: "video-234jlnlknsdlkfjwlkjaa",
+    parentId: "course-1lk4j3k4jlkj2l4k2j34lkj",
+    children: [
+      {
+        text: "The DNA of a Warrior",
+      },
+    ],
+    captions: [],
+    duration: 3765,
+    source: "",
+    synopsis:
+      "Understanding the battlefield is the first key to winning the war for sexual purity. In this episode, you will discover hell's strategies against the 21st Century Church and be introduced to the four components of the noose of sexual bondage. Learn the first key steps to freedom and how to stay pure.",
+    thumbnail: "video-thumbnail.jpg",
+    title: "The DNA of a Warrior",
+    type: "video",
+  },
+  {
+    type: "p",
+    children: [
+      {
+        text: "Welcome to Warpath. You’re about to embark on a journey towards lifelong healing, freedom and victory. This is a season of training. It’s sanctification on steroids, not for the faint-hearted, but for those who truly desire to live the rest of their lives for Jesus. No reserves, no retreats, no regrets.",
+      },
+      {
+        type: "footnote",
+        children: [
+          {
+            text: "This is a footnote",
+          },
+        ],
+      },
+      {
+        text: " What was once your deepest, darkest secret will now become the word of your testimony that heals and liberates others.",
+      },
+    ],
+  },
+  {
+    type: "q-n-a",
+    children: [
+      {
+        type: "p",
+        children: [
+          {
+            text: "Ask your question...",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "p",
+    children: [
+      {
+        text: "In this new season, God is calling you up. He’s calling you to a higher level, a place where you’re no longer part of the problem but are becoming a part of the solution.",
+      },
+      {
+        type: "footnote",
+        children: [
+          {
+            text: "This is another footnote",
+          },
+        ],
+      },
+      {
+        text: "",
+      },
+    ],
+  },
+  {
+    type: "blockquote",
+    children: [
+      {
+        text: '"Warpath isn’t about just winning for you; that’s the beginning. Warpath is about you taking the battle and winning for others so they can have their families, and their marriages, and their destinies." \n— ',
+      },
+      {
+        text: "Dr. Doug Weiss",
+        italic: true,
+      },
+    ],
+  },
+  {
+    type: "hr",
+    children: [
+      {
+        text: "",
+      },
+    ],
+  },
+  {
+    type: "h2",
+    children: [
+      {
+        text: "Lesson Overview",
+        bold: true,
+      },
+    ],
+  },
+  {
+    type: "h3",
+    align: "center",
+    children: [
+      {
+        text: "THE WARRIOR IDENTITY",
+        bold: true,
+        fontSize: "16px",
+      },
+    ],
+  },
+  {
+    type: "hr",
+    children: [
+      {
+        text: "",
+      },
+    ],
+  },
+  {
+    type: "img",
+    url: "https://source.unsplash.com/1600x900/?christian",
+    children: [
+      {
+        text: "",
+      },
+    ],
+  },
+  {
+    type: "p",
+    children: [
+      {
+        text: "Identity: You will have to grasp your true identity in Christ. You cannot look at this as a “what”, but instead about a “who”. We must become more like Christ, because He is a warrior.",
+      },
+    ],
+  },
+  {
+    type: "p",
+    children: [
+      {
+        text: "A different DNA: As a warrior, your spiritual genetic code will be different from those who haven’t tasted the victory and grace you’ve experienced from this battle. You’ve experienced truth as a person: Jesus; and it has forever changed you. You’ve been set apart as a “fighting man”, no longer a civilian idly consumed by the cares of this world, but a warrior who’s passionate about the Kingdom and craving some sweet revenge.",
+      },
+    ],
+  },
+  {
+    type: "code_block",
+    lang: "typescript",
+    children: [
+      {
+        type: "code_line",
+        children: [
+          {
+            text: 'const variable = "DO_NOT_USE"',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "paywall",
+    children: [
+      {
+        type: "h2",
+        children: [
+          {
+            text: "Keep reading with a paid subscription",
+          },
+        ],
+      },
+      {
+        type: "p",
+        children: [
+          {
+            text: "Subscribe to ",
+          },
+          {
+            text: "Soul Refiner",
+            italic: true,
+          },
+          {
+            text: " to keep reading this content.",
+          },
+        ],
+      },
+      {
+        type: "button",
+        buttonType: "button-subscribe",
+        children: [
+          {
+            text: "Get Access",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "p",
+    children: [
+      {
+        text: "",
+      },
+    ],
+  },
+];
+
+export const PLACEHOLDER = "This is a placeholder";

package/dist/src/editor/config/index.ts

@@ -0,0 +1,2 @@
+export { DEFAULT_CONTENT, PLACEHOLDER, } from "./default";
+export { editableProps } from "./props";

package/dist/src/editor/config/props.ts

@@ -0,0 +1,9 @@
+import { TEditableProps } from "@udecode/plate";
+
+import { PLACEHOLDER } from "./default";
+
+export const editableProps: TEditableProps = {
+  spellCheck: true,
+  autoFocus: true,
+  placeholder: PLACEHOLDER,
+};

package/dist/src/editor/index.ts

@@ -0,0 +1,2 @@
+export { Editor, EditorContext, type EditorProps } from "./Editor";
+export * from "./common";