Merge pull request #75 from motionly-video/dev

Dev

package.json

@@ -16,6 +16,7 @@
         "analyze": "ANALYZE=true turbo build",
         "start": "turbo start",
         "test": "turbo test",
+        "turbo": "turbo turbo",
         "dev": "turbo dev",
         "fast-publish": "changeset add; changeset version; changeset publish",
         "preview": "cd packages/components; yarn preview",
@@ -39,4 +40,4 @@
         "postinstall-postinstall": "^2.1.0",
         "prettier": "^2.8.1"
     }
-}
+}

packages/components/package.json

@@ -17,20 +17,21 @@
     "dependencies": {
         "@motionly/base": "*",
         "@motionly/confetti": "*",
-        "@remotion/cli": "3.3.34",
-        "@remotion/gif": "3.3.34",
-        "@remotion/lottie": "3.3.34",
-        "@remotion/media-utils": "3.3.34",
-        "@remotion/motion-blur": "3.3.34",
-        "@remotion/noise": "3.3.34",
-        "@remotion/paths": "3.3.34",
-        "@remotion/shapes": "3.3.34",
+        "@remotion/cli": "3.3.44",
+        "@remotion/gif": "3.3.44",
+        "@remotion/lottie": "3.3.44",
+        "@remotion/media-utils": "3.3.44",
+        "@remotion/motion-blur": "3.3.44",
+        "@remotion/noise": "3.3.44",
+        "@remotion/paths": "3.3.44",
+        "@remotion/shapes": "3.3.44",
         "@types/react-simple-maps": "^3.0.0",
         "axios": "^1.2.3",
         "lottie-web": "^5.10.0",
         "react-qr-code": "^2.0.10",
         "react-simple-maps": "^3.0.0",
-        "typescript": "^4.9.4"
+        "typescript": "^4.9.4",
+        "zod": "^3.20.6"
     },
     "peerDependencies": {
         "@remotion/cli": "^3.3.34",
@@ -42,13 +43,13 @@
         "@remotion/shapes": "^3.3.34",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
-        "remotion": "3.3.34"
+        "remotion": "3.3.44"
     },
     "devDependencies": {
         "@types/react": "17.0.11",
         "@types/react-dom": "17.0.8",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "remotion": "3.3.34"
+        "remotion": "3.3.44"
     }
-}
+}

packages/components/src/components/Transcription/default.ts

@@ -1232,24 +1232,18 @@ export const defaultTranscriptionProps: TranscriptionProps = {
   src: defaultTranscriptionWords,
   animationType: "current-word",
   animationStyle: {
-    outlineColor: {
+    color: {
       type: "basic",
-      color: "#00FFFFFF",
+      color: "#FF0000FF",
     },
-    outlineWidth: 20,
   },
   textStyle: {
-    fontSize: 100,
+    fontSize: 80,
     fontFamily: "Inter",
     color: {
       type: "basic",
       color: "#FFFFFFFF",
     },
-    outlineColor: {
-      type: "basic",
-      color: "#000FFFFF",
-    },
-    outlineWidth: 20,
     fontWeight: "800",
     lineHeight: 1.3,
     textAlign: "center",

packages/components/src/components/Transcription/index.tsx

@@ -9,6 +9,7 @@ import { StyleAndClass, TranscriptionWord } from "@motionly/base";
 import { TranscriptionProps } from "@motionly/base";
 import { useTextStyles } from "../../hooks/useTextStyles";
 export * from "./default";
+import z from "zod";
 
 export const Transcription = ({
   textStyle,
@@ -41,8 +42,11 @@ export const Transcription = ({
     if (typeof src !== "string") return;
     fetch(src)
       .then((res) => res.json())
-      .then((data) => setWords(data))
-      .catch((e) => console.error(e));
+      .then((data) => {
+        z.array(TranscriptionWord).parse(data);
+        setWords(data);
+      })
+      .catch((e) => setWords([]));
   }, [src]);
 
   useEffect(() => {

packages/player/package.json

@@ -10,9 +10,9 @@
     },
     "dependencies": {
         "@motionly/components": "*",
-        "@remotion/player": "3.3.34",
-        "@remotion/cli": "3.3.34",
-        "remotion": "3.3.34"
+        "@remotion/player": "3.3.44",
+        "@remotion/cli": "3.3.44",
+        "remotion": "3.3.44"
     },
     "peerDependencies": {
         "react": ">=16.8.0",

packages/player/src/Player.tsx

@@ -22,14 +22,12 @@ export const Player = forwardRef<PlayerRef, PlayerProps>(
     useEffect(() => setIsClient(true), []);
     const template = useMemo(() => prepareTemplate(temp), [temp]);
     return (
-      <SelectedContext.Provider
-        value={{ setSelected, selected, selectedRef }}
-      >
+      <SelectedContext.Provider value={{ setSelected, selected, selectedRef }}>
         <RemotionPlayer
           ref={ref}
           component={isClient ? Composition : () => <>{loading}</>}
           fps={template.fps}
-          durationInFrames={Math.ceil(template.duration * template.fps)}
+          durationInFrames={Math.ceil((template.duration || 1) * template.fps)}
           inputProps={{
             bg: template.bg,
             comps: template.comps,

packages/renderer/package.json

@@ -8,8 +8,8 @@
         "@motionly/base": "*",
         "axios": "^1.2.1",
         "typescript": "^4.9.4",
-        "@remotion/lambda": "3.3.34",
-        "remotion": "3.3.34"
+        "@remotion/lambda": "3.3.44",
+        "remotion": "3.3.44"
     },
     "scripts": {
         "build": "tsc",

turbo.json

@@ -14,6 +14,11 @@
                 "^build"
             ]
         },
+        "turbo": {
+            "dependsOn": [
+                "^build"
+            ]
+        },
         "start": {
             "dependsOn": [
                 "build"

websites/client/app/(layout)/(mdx)/blog/index.ts

@@ -0,0 +1,12 @@
+import { Page } from "../layout";
+
+export const blog: Page = {
+  id: "blog",
+  title: "Blog",
+  pages: [
+    {
+      id: "first",
+      title: "First post",
+    },
+  ],
+};

websites/client/app/(layout)/(mdx)/blog/page.mdx

@@ -0,0 +1,3 @@
+# Hello world
+
+This is the first blog post.

websites/client/app/(layout)/(mdx)/docs/index.ts

@@ -0,0 +1,18 @@
+import { Page } from "../layout";
+
+export const docs: Page = {
+  id: "docs",
+  title: "Docs",
+  pages: [
+    {
+      id: "player",
+      title: "Player",
+      pages: [
+        {
+          id: "usage",
+          title: "Usage",
+        },
+      ],
+    },
+  ],
+};

websites/client/app/(layout)/(mdx)/layout.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ReactNode } from "react";
+import Error from "next/error";
+import { blog } from "./blog";
+import { docs } from "./docs";
+import { legal } from "./legal";
+import { MdOutlineArrowForwardIos } from "react-icons/md";
+import { useState } from "react";
+
+export type Page = {
+  id: string;
+  title: string;
+  pages?: Page[];
+};
+
+const collections: Page[] = [blog, docs, legal];
+
+export default function MDXLayout({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const paths = pathname?.split("/").filter((x) => x);
+  const collection = collections.find((c) => c.id === paths?.[0]);
+  if (!collection || !paths) return <Error statusCode={404} />;
+
+  return (
+    <div className="grid grid-cols-4 md:grid-cols-5 gap-4 px-2">
+      <div className="hidden md:flex flex-col w-full space-y-1">
+        {collection.pages?.map((page) => (
+          <MenuItem key={page.id} {...page} parents={`/${collection.id}`} />
+        ))}
+      </div>
+      <div className="col-span-4 space-y-3">
+        <div className="text-sm breadcrumbs">
+          <ul>
+            <BreadCrumb page={collection} paths={paths} />
+          </ul>
+        </div>
+        <div className="prose md:prose-lg mb-10">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+const BreadCrumb = ({
+  paths,
+  page,
+  i = 0,
+}: {
+  page: Page;
+  paths: string[];
+  i?: number;
+}) => {
+  const next = page.pages?.find((p) => p.id === paths[i + 1]);
+  return (
+    <>
+      <li>
+        {i !== paths.length - 1 ? (
+          <Link href={`/${paths.slice(0, i + 1).join("/")}`} className="">
+            {page.title}
+          </Link>
+        ) : (
+          <p className="text-primary">{page.title}</p>
+        )}
+      </li>
+      {next && <BreadCrumb page={next} paths={paths} i={i + 1} />}
+    </>
+  );
+};
+
+const MenuItem = ({
+  id,
+  title,
+  pages,
+  parents,
+}: Page & { parents: string }) => {
+  const url = `${parents}/${id}`;
+  const pathname = usePathname();
+  const isSelected = pathname === url;
+  const [open, setOpen] = useState(true);
+  return (
+    <div className="flex flex-col space-y-1">
+      <div
+        className={`w-full bg-opacity-10 rounded-md duration-150 flex justify-between items-center px-2 ${
+          isSelected
+            ? "bg-primary text-primary"
+            : "hover:bg-base-content hover:bg-opacity-10"
+        }`}
+      >
+        <Link
+          className="h-full w-full py-1 opacity-90"
+          href={url}
+          onClick={() => isSelected && setOpen(!open)}
+        >
+          {title}
+        </Link>
+        {pages && (
+          <MdOutlineArrowForwardIos
+            onClick={() => setOpen(!open)}
+            className={`text-sm duration-200 cursor-pointer ${
+              open ? "rotate-90" : ""
+            }`}
+          />
+        )}
+      </div>
+      {open && pages && (
+        <div className="flex">
+          <div className="w-6 flex justify-center">
+            <div className="bg-base-content bg-opacity-20 w-[1px] h-full " />
+          </div>
+          <div className="w-full">
+            {pages?.map((page) => (
+              <MenuItem key={page.id} {...page} parents={url} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

websites/client/pages/legal/cookie.mdx → websites/client/app/(layout)/(mdx)/legal/cookie/page.mdx

@@ -1,3 +1,8 @@
+export const metadata = meta({
+  title: "Cookie Policy",
+  description: "Cookie Policy for using Motionly.video",
+});
+
 # Cookie Policy
 
 This Cookie Policy explains how Motionly.video (“we”, “us”, or “our”) uses cookies and similar technologies to recognize you when you visit our website. It explains what these technologies are and why we use them, as well as your rights to control our use of them.

websites/client/app/(layout)/(mdx)/legal/index.ts

@@ -0,0 +1,24 @@
+import { Page } from "../layout";
+
+export const legal: Page = {
+  id: "legal",
+  title: "Legal",
+  pages: [
+    {
+      id: "terms",
+      title: "Terms and Conditions",
+    },
+    {
+      id: "privacy",
+      title: "Privacy Policy",
+    },
+    {
+      id: "refund",
+      title: "Refund Policy",
+    },
+    {
+      id: "cookie",
+      title: "Cookie Policy",
+    },
+  ],
+};

websites/client/app/(layout)/(mdx)/legal/page.mdx

@@ -0,0 +1 @@
+# Legal

websites/client/pages/legal/privacy.mdx → websites/client/app/(layout)/(mdx)/legal/privacy/page.mdx

@@ -1,3 +1,8 @@
+export const metadata = meta({
+  title: "Privacy Policy",
+  description: "Privacy Policy for using Motionly.video",
+});
+
 # Privacy Policy
 
 At Motionly.video, we are committed to protecting the privacy of our users. This Privacy Policy explains how we collect, use, and protect the personal information you provide to us when using our services.

websites/client/pages/legal/refund.mdx → websites/client/app/(layout)/(mdx)/legal/refund/page.mdx

@@ -1,3 +1,8 @@
+export const metadata = meta({
+  title: "Refund Policy",
+  description: "Refund Policy for using Motionly.video",
+});
+
 # Refund Policy
 
 At Motionly.video, we strive to provide an exceptional video editing experience. If you are not satisfied with our services, we offer a money-back guarantee.

websites/client/pages/legal/terms.mdx → websites/client/app/(layout)/(mdx)/legal/terms/page.mdx

@@ -1,3 +1,8 @@
+export const metadata = meta({
+  title: "Terms and Conditions",
+  description: "Terms and conditions for using Motionly.video",
+});
+
 # Terms and Conditions
 
 Welcome to Motionly.video (the “Website”). This document serves as the Terms and Conditions Agreement (the “Agreement”) between Motionly.video (“Motionly.video” or “us” or “we”) and all users of the Website (“you”).

websites/client/app/(layout)/(pages)/(home)/layout.tsx

@@ -0,0 +1,7 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}