Video component

apps/web/.migrations/30-03-25_00-40-migrate-hero-video.js

@@ -0,0 +1,126 @@
+import mongoose from "mongoose";
+import { nanoid } from "nanoid";
+
+function generateUniqueId() {
+    return nanoid();
+}
+
+mongoose.connect(process.env.DB_CONNECTION_STRING, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+});
+
+const WidgetSchema = new mongoose.Schema({
+    widgetId: { type: String, required: true, default: generateUniqueId },
+    name: { type: String, required: true },
+    deleteable: { type: Boolean, required: true, default: true },
+    shared: { type: Boolean, required: true, default: false },
+    settings: mongoose.Schema.Types.Mixed,
+});
+
+const MediaSchema = new mongoose.Schema({
+    mediaId: { type: String, required: true },
+    originalFileName: { type: String, required: true },
+    mimeType: { type: String, required: true },
+    size: { type: Number, required: true },
+    access: { type: String, required: true, enum: ["public", "private"] },
+    thumbnail: String,
+    caption: String,
+    file: String,
+});
+
+const PageSchema = new mongoose.Schema(
+    {
+        domain: { type: mongoose.Schema.Types.ObjectId, required: true },
+        pageId: { type: String, required: true },
+        type: {
+            type: String,
+            required: true,
+            enum: ["product", "site", "blog", "community"],
+            default: "product",
+        },
+        creatorId: { type: String, required: true },
+        name: { type: String, required: true },
+        layout: { type: [WidgetSchema], default: [] },
+        draftLayout: { type: [WidgetSchema], default: [] },
+        entityId: { type: String },
+        deleteable: { type: Boolean, required: true, default: false },
+        title: { type: String },
+        description: String,
+        socialImage: MediaSchema,
+        robotsAllowed: { type: Boolean, default: true },
+        draftTitle: String,
+        draftDescription: String,
+        draftSocialImage: MediaSchema,
+        draftRobotsAllowed: Boolean,
+        deleted: { type: Boolean, default: false },
+    },
+    {
+        timestamps: true,
+    },
+);
+
+PageSchema.index(
+    {
+        domain: 1,
+        pageId: 1,
+    },
+    { unique: true },
+);
+
+const Page = mongoose.model("Page", PageSchema);
+
+const updateHeroVideo = async (page) => {
+    console.log(`Updating homepage for domain: ${page.domain}`);
+    const heroWidgets = page.layout.filter((widget) => widget.name === "hero");
+    for (const heroWidget of heroWidgets) {
+        heroWidget.settings.style = "normal";
+        heroWidget.settings.mediaRadius = 2;
+        if (
+            heroWidget &&
+            heroWidget.settings.youtubeLink &&
+            !heroWidget.settings.youtubeLink.startsWith(
+                "https://www.youtube.com/watch?v=",
+            )
+        ) {
+            heroWidget.settings.youtubeLink = `https://www.youtube.com/watch?v=${heroWidget.settings.youtubeLink}`;
+        }
+    }
+    const heroWidgetsDraft = page.draftLayout.filter(
+        (widget) => widget.name === "hero",
+    );
+    for (const heroWidget of heroWidgetsDraft) {
+        heroWidget.settings.style = "normal";
+        heroWidget.settings.mediaRadius = 2;
+        if (
+            heroWidget &&
+            heroWidget.settings.youtubeLink &&
+            !heroWidget.settings.youtubeLink.startsWith(
+                "https://www.youtube.com/watch?v=",
+            )
+        ) {
+            heroWidget.settings.youtubeLink = `https://www.youtube.com/watch?v=${heroWidget.settings.youtubeLink}`;
+        }
+    }
+    page.markModified("layout");
+    page.markModified("draftLayout");
+    await page.save();
+    console.log(`Updated homepage for domain: ${page.domain}\n`);
+};
+
+const migrateHeroVideo = async () => {
+    const pages = await Page.find({ pageId: "homepage" });
+    for (const page of pages) {
+        try {
+            await updateHeroVideo(page);
+        } catch (error) {
+            console.error(`Error updating homepage for domain: ${page.domain}`);
+            console.error(error);
+        }
+    }
+};
+
+(async () => {
+    await migrateHeroVideo();
+    mongoose.connection.close();
+})();

apps/web/app/(with-contexts)/(with-layout)/blog/blogs-list.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { SkeletonCard } from "./skeleton-card";
-import { ContentCard } from "./content-card";
+import { BlogContentCard } from "./content-card";
 import { PaginationControls } from "@components/public/pagination";
 import { Constants, Course } from "@courselit/common-models";
 import { useProducts } from "@/hooks/use-products";
@@ -34,7 +34,7 @@ export function BlogsList({
                           <SkeletonCard key={index} />
                       ))
                     : products.map((product: Course) => (
-                          <ContentCard
+                          <BlogContentCard
                               key={product.courseId}
                               product={product}
                           />

apps/web/app/(with-contexts)/(with-layout)/blog/content-card.tsx

@@ -5,7 +5,7 @@ import { getPlanPrice } from "@courselit/utils";
 import { truncate } from "@ui-lib/utils";
 import Image from "next/image";
 
-export function ContentCard({ product }: { product: Course }) {
+export function BlogContentCard({ product }: { product: Course }) {
     const defaultPlan = product.paymentPlans?.filter(
         (plan) => plan.planId === product.defaultPaymentPlan,
     )[0];

apps/web/app/(with-contexts)/(with-layout)/communities/communities-list.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCommunities } from "@/hooks/use-communities";
-import { ContentCard } from "./content-card";
+import { CommunityContentCard } from "./content-card";
 import { PaginationControls } from "@components/public/pagination";
 import { Community } from "@courselit/common-models";
 import { Users } from "lucide-react";
@@ -63,7 +63,7 @@ export function CommunitiesList({
                           <SkeletonCard key={index} />
                       ))
                     : communities.map((community: Community) => (
-                          <ContentCard
+                          <CommunityContentCard
                               key={community.communityId}
                               community={community}
                               publicView={publicView}

apps/web/app/(with-contexts)/(with-layout)/communities/content-card.tsx

@@ -10,7 +10,7 @@ import {
     TooltipTrigger,
 } from "@components/ui/tooltip";
 
-export function ContentCard({
+export function CommunityContentCard({
     community,
     publicView = true,
 }: {
@@ -50,20 +50,24 @@ export function ContentCard({
                                 members
                             </span>
                         </div>
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    {community.enabled ? (
-                                        <CheckCircle className="h-4 w-4 text-muted-foreground" />
-                                    ) : (
-                                        <CircleDashed className="h-4 w-4 text-muted-foreground" />
-                                    )}
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    {community.enabled ? "Enabled" : "Draft"}
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
+                        {!publicView && (
+                            <TooltipProvider>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        {community.enabled ? (
+                                            <CheckCircle className="h-4 w-4 text-muted-foreground" />
+                                        ) : (
+                                            <CircleDashed className="h-4 w-4 text-muted-foreground" />
+                                        )}
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {community.enabled
+                                            ? "Enabled"
+                                            : "Draft"}
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
+                        )}
                     </div>
                 </CardContent>
             </Card>

apps/web/app/(with-contexts)/(with-layout)/products/content-card.tsx

@@ -8,7 +8,7 @@ import { SiteInfoContext } from "@components/contexts";
 import { Badge } from "@components/ui/badge";
 import { truncate } from "@ui-lib/utils";
 
-export function ContentCard({ product }: { product: Course }) {
+export function ProductContentCard({ product }: { product: Course }) {
     const siteinfo = useContext(SiteInfoContext);
     const defaultPlan = product.paymentPlans?.filter(
         (plan) => plan.planId === product.defaultPaymentPlan,

apps/web/app/(with-contexts)/dashboard/(sidebar)/my-content/page.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import { useState, useEffect, useContext } from "react";
-// import { ContentCard } from "@/components/admin/my-content/content-card";
-// import { SkeletonCard } from "@/components/admin/my-content/skeleton-card";
 import type { ContentItem } from "@/components/admin/my-content/content";
 import { AddressContext, ProfileContext } from "@components/contexts";
 import { MY_CONTENT_HEADER } from "@ui-config/strings";

apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/page.tsx

@@ -315,10 +315,10 @@ export default function ContentPage() {
                                             (a: any, b: any) =>
                                                 (
                                                     section.lessonsOrder as any[]
-                                                ).indexOf(a.lessonId) -
+                                                )?.indexOf(a.lessonId) -
                                                 (
                                                     section.lessonsOrder as any[]
-                                                ).indexOf(b.lessonId),
+                                                )?.indexOf(b.lessonId),
                                         )
                                         .map((lesson: Lesson) => ({
                                             id: lesson.lessonId,

apps/web/components/admin/page-editor/index.tsx

@@ -451,6 +451,7 @@ export default function PageEditor({
                 onDelete={deleteWidget}
                 state={state as AppState}
                 dispatch={dispatch || (() => {})}
+                key={selectedWidget}
             />
         ),
         [selectedWidget],

apps/web/components/admin/products/editor/content/lessons-list.tsx

@@ -132,10 +132,10 @@ function LessonSection({
                             )
                             .sort(
                                 (a: any, b: any) =>
-                                    (group.lessonsOrder as any[]).indexOf(
+                                    (group.lessonsOrder as any[])?.indexOf(
                                         a.lessonId,
                                     ) -
-                                    (group.lessonsOrder as any[]).indexOf(
+                                    (group.lessonsOrder as any[])?.indexOf(
                                         b.lessonId,
                                     ),
                             )

apps/web/graphql/courses/helpers.ts

@@ -177,7 +177,7 @@ export const setupCourse = async ({
         ctx,
     });
     page.entityId = course.courseId;
-    page.layout = getInitialLayout();
+    page.layout = getInitialLayout(type);
     await page.save();
 
     return course;
@@ -205,8 +205,8 @@ export const setupBlog = async ({
     return course;
 };
 
-const getInitialLayout = () => {
-    return [
+const getInitialLayout = (type: "course" | "download") => {
+    const layout: Record<string, any>[] = [
         {
             name: "header",
             deleteable: false,
@@ -215,10 +215,20 @@ const getInitialLayout = () => {
         {
             name: "banner",
         },
-        {
-            name: "footer",
-            deleteable: false,
-            shared: true,
-        },
     ];
+    if (type === Constants.CourseType.COURSE) {
+        layout.push({
+            name: "content",
+            settings: {
+                title: "Curriculum",
+                headerAlignment: "center",
+            },
+        });
+    }
+    layout.push({
+        name: "footer",
+        deleteable: false,
+        shared: true,
+    });
+    return layout;
 };

apps/web/graphql/courses/logic.ts

@@ -157,7 +157,7 @@ export const getCourse = async (
         // course.groups = accessibleGroups;
         return await formatCourse(course.courseId, ctx);
     } else {
-        throw new Error(responses.item_not_found);
+        return null;
     }
 };
 

apps/web/graphql/lessons/helpers.ts

@@ -103,8 +103,8 @@ export const getGroupedLessons = async (
                 )
                 .sort(
                     (a: GroupLessonItem, b: GroupLessonItem) =>
-                        group.lessonsOrder.indexOf(a.lessonId) -
-                        group.lessonsOrder.indexOf(b.lessonId),
+                        group.lessonsOrder?.indexOf(a.lessonId) -
+                        group.lessonsOrder?.indexOf(b.lessonId),
                 ),
         );
     }

apps/web/graphql/pages/page-templates.ts

@@ -72,11 +72,11 @@ export const homePageTemplate = [
             },
             buttonAction: "/products",
             buttonCaption: "Ask user to take action",
-            youtubeLink: "VLVcZB2-udk",
+            youtubeLink: "https://www.youtube.com/watch?v=VLVcZB2-udk",
             alignment: "right",
-            style: "card",
+            style: "normal",
             buttonForeground: "#fefbfb",
-            mediaRadius: 56,
+            mediaRadius: 2,
             horizontalPadding: 100,
             verticalPadding: 88,
             titleFontSize: 5,

apps/web/pages/course/[slug]/[id]/index.tsx

@@ -407,8 +407,8 @@ export function formatCourse(
             .filter((lesson: Lesson) => lesson.groupId === group.id)
             .sort(
                 (a: any, b: any) =>
-                    group.lessonsOrder.indexOf(a.lessonId) -
-                    group.lessonsOrder.indexOf(b.lessonId),
+                    group.lessonsOrder?.indexOf(a.lessonId) -
+                    group.lessonsOrder?.indexOf(b.lessonId),
             );
     }
 

packages/common-widgets/src/content/widget.tsx

@@ -133,8 +133,8 @@ export default function Widget({
                     .filter((lesson: Lesson) => lesson.groupId === group.id)
                     .sort(
                         (a: any, b: any) =>
-                            group.lessonsOrder.indexOf(a.lessonId) -
-                            group.lessonsOrder.indexOf(b.lessonId),
+                            group.lessonsOrder?.indexOf(a.lessonId) -
+                            group.lessonsOrder?.indexOf(b.lessonId),
                     );
             });
             setFormattedCourse(formattedCourse);