rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: thumbnails

Browse source
This commit is contained in:
swve 2023-12-13 17:06:51 +01:00
parent c39d9d5340
commit 3413e6ca73
33 changed files with 161 additions and 740 deletions
Download patch file Download diff file Expand all files Collapse all files

0
apps/web/components/DashboardPages/CourseContext.tsx → apps/web/components/Contexts/CourseContext.tsx
View file

25
apps/web/components/Contexts/OrgContext.tsx Normal file
View file

@ -0,0 +1,25 @@
'use client';
import { getAPIUrl } from '@services/config/config';
import { swrFetcher } from '@services/utils/ts/requests';
import React, { useContext, useEffect } from 'react'
import useSWR from 'swr';
import { createContext } from 'react';
export const OrgContext = createContext({}) as any;
export function OrgProvider({ children, orgslug }: { children: React.ReactNode, orgslug: string }) {
const { data: org } = useSWR(`${getAPIUrl()}orgs/slug/${orgslug}`, swrFetcher);
useEffect(() => {
}, [org]);
return (
<OrgContext.Provider value={org}>
{children}
</OrgContext.Provider>
)
}
export function useOrg() {
return useContext(OrgContext);
}

2
apps/web/components/DashboardPages/EditCourseGeneral/EditCourseGeneral.tsx → apps/web/components/Dashboard/EditCourseGeneral/EditCourseGeneral.tsx
View file

@ -4,7 +4,7 @@ import { AlertTriangle } from 'lucide-react'
import * as Switch from '@radix-ui/react-switch';
import * as Form from '@radix-ui/react-form';
import React from 'react'
import { useCourse, useCourseDispatch } from '../CourseContext';
import { useCourse, useCourseDispatch } from '../../Contexts/CourseContext';
type EditCourseStructureProps = {

2
apps/web/components/DashboardPages/EditCourseStructure/Buttons/NewActivityButton.tsx → apps/web/components/Dashboard/EditCourseStructure/Buttons/NewActivityButton.tsx
View file

@ -1,4 +1,4 @@
import { useCourse } from '@components/DashboardPages/CourseContext';
import { useCourse } from '@components/Contexts/CourseContext';
import NewActivityModal from '@components/Objects/Modals/Activities/Create/NewActivity';
import Modal from '@components/StyledElements/Modal/Modal';
import { getAPIUrl } from '@services/config/config';

0
apps/web/components/DashboardPages/EditCourseStructure/DraggableElements/ActivityElement.tsx → apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

0
apps/web/components/DashboardPages/EditCourseStructure/DraggableElements/ChapterElement.tsx → apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ChapterElement.tsx
View file

2
apps/web/components/DashboardPages/EditCourseStructure/EditCourseStructure.tsx → apps/web/components/Dashboard/EditCourseStructure/EditCourseStructure.tsx
View file

@ -9,7 +9,7 @@ import PageLoading from '@components/Objects/Loaders/PageLoading';
import { createChapter, updateCourseOrderStructure } from '@services/courses/chapters';
import { useRouter } from 'next/navigation';
import { CourseStructureContext } from 'app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page';
import { useCourse, useCourseDispatch } from '@components/DashboardPages/CourseContext';
import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext';
import { Hexagon } from 'lucide-react';
import Modal from '@components/StyledElements/Modal/Modal';
import NewChapterModal from '@components/Objects/Modals/Chapters/NewChapter';

2
apps/web/components/DashboardPages/UI/BreadCrumbs.tsx → apps/web/components/Dashboard/UI/BreadCrumbs.tsx
View file

@ -1,4 +1,4 @@
import { useCourse } from '@components/DashboardPages/CourseContext'
import { useCourse } from '@components/Contexts/CourseContext'
import { Book, ChevronRight, User } from 'lucide-react'
import Link from 'next/link'
import React, { use, useEffect } from 'react'

13
apps/web/components/DashboardPages/UI/CourseOverviewTop.tsx → apps/web/components/Dashboard/UI/CourseOverviewTop.tsx
View file

@ -1,21 +1,28 @@
import { useCourse } from "@components/DashboardPages/CourseContext";
import { useCourse } from "@components/Contexts/CourseContext";
import { useEffect } from "react";
import BreadCrumbs from "./BreadCrumbs";
import SaveState from "./SaveState";
import { CourseOverviewParams } from "app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page";
import { getUriWithOrg } from "@services/config/config";
import { useOrg } from "@components/Contexts/OrgContext";
import { getCourseThumbnailMediaDirectory } from "@services/media/media";
import Link from "next/link";
export function CourseOverviewTop({ params }: { params: CourseOverviewParams }) {
const course = useCourse() as any;
const org = useOrg() as any;
useEffect(() => { }
, [course])
, [course, org])
return (
<>
<BreadCrumbs type='courses' last_breadcrumb={course.courseStructure.name} ></BreadCrumbs>
<div className='flex'>
<div className='flex py-5 grow items-center'>
<div className="image rounded-lg shadow-md bg-gray-900 w-28 h-14"></div>
<Link href={getUriWithOrg(org?.slug, "") + `/course/${params.courseuuid}`}>
<img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, "course_" + params.courseuuid, course.courseStructure.thumbnail_image)}`} alt="" />
</Link>
<div className="flex flex-col course_metadata justify-center pl-5">
<div className='text-gray-400 font-semibold text-sm'>Course</div>
<div className='text-black font-bold text-xl -mt-1 first-letter:uppercase'>{course.courseStructure.name}</div>

39
apps/web/components/Dashboard/UI/LeftMenu.tsx Normal file
View file

@ -0,0 +1,39 @@
'use client';
import { useOrg } from '@components/Contexts/OrgContext';
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import { ArrowLeft, Book, Home } from 'lucide-react'
import Link from 'next/link'
import React, { use, useEffect } from 'react'
function LeftMenu() {
const org = useOrg() as any;
useEffect(() => {
}
, [org])
return (
<div
style={{ background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.00) 100%), #2E2D2D" }}
className='flex flex-col w-20 justifiy-center bg-black h-screen justify-center text-white'>
<div className='flex flex-col space-y-5 items-center mx-auto'>
<ToolTip content={"Back to " + org?.name} slateBlack sideOffset={8} side='right' >
<Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
</ToolTip>
<ToolTip content={"Home"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash`} ><Home size={18} /></Link>
</ToolTip>
<ToolTip content={"Courses"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18} /></Link>
</ToolTip>
</div>
</div>
)
}
export default LeftMenu

2
apps/web/components/DashboardPages/UI/SaveState.tsx → apps/web/components/Dashboard/UI/SaveState.tsx
View file

@ -2,7 +2,7 @@
import { getAPIUrl } from '@services/config/config';
import { updateCourseOrderStructure } from '@services/courses/chapters';
import { revalidateTags } from '@services/utils/ts/requests';
import { useCourse, useCourseDispatch } from '@components/DashboardPages/CourseContext'
import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext'
import { Check, SaveAllIcon, Timer } from 'lucide-react'
import { useRouter } from 'next/navigation';
import React, { useEffect } from 'react'

25
apps/web/components/DashboardPages/UI/LeftMenu.tsx
View file

@ -1,25 +0,0 @@
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import { Book } from 'lucide-react'
import Link from 'next/link'
import React from 'react'
function LeftMenu() {
return (
<div
style={{ background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.00) 100%), #2E2D2D" }}
className='flex flex-col w-20 justifiy-center bg-black h-screen justify-center text-white'>
<div className='flex items-center mx-auto'>
<ToolTip content={"Courses"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18} /></Link>
</ToolTip>
</div>
</div>
)
}
export default LeftMenu

3
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -45,6 +45,7 @@ interface Editor {
activity: any;
orgslug: string
course: any;
org: any;
setContent: (content: string) => void;
}
@ -146,7 +147,7 @@ function Editor(props: Editor) {
<EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" />
</Link>
<Link target="_blank" href={`/course/${course_uuid}/edit`}>
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.course.course.org_id, props.course.course.course_uuid, props.course.course.thumbnail)}`} alt=""></EditorInfoThumbnail>
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course.course_uuid, props.course.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
</Link>
<EditorInfoDocName>
{" "}

3
apps/web/components/Objects/Editor/EditorWrapper.tsx
View file

@ -11,6 +11,7 @@ interface EditorWrapperProps {
activity: any;
course: any
orgslug: string;
org: any;
}
function EditorWrapper(props: EditorWrapperProps): JSX.Element {
@ -49,7 +50,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
} else {
return <>
<Toast></Toast>
<Editor orgslug={props.orgslug} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
<Editor org={props.org} orgslug={props.orgslug} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
</>
}

4
apps/web/components/Objects/Other/CollectionThumbnail.tsx
View file

@ -1,4 +1,5 @@
"use client";
import { useOrg } from '@components/Contexts/OrgContext';
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import { getUriWithOrg } from '@services/config/config'
@ -21,6 +22,7 @@ const removeCollectionPrefix = (collectionid: string) => {
}
function CollectionThumbnail(props: PropsType) {
const org = useOrg() as any;
return (
<div className=''>
<div className="flex flex-row space-x-4 inset-0 ring-1 ring-inset my-auto ring-black/10 rounded-xl shadow-xl relative w-[300px] h-[80px] bg-cover items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
@ -28,7 +30,7 @@ function CollectionThumbnail(props: PropsType) {
{props.collection.courses.slice(0, 2).map((course: any) => (
<>
<Link href={getUriWithOrg(props.orgslug, "/collection/" + removeCollectionPrefix(props.collection.collection_uuid))}>
<div className="inset-0 rounded-full shadow-2xl bg-cover w-12 h-8 justify-center ring-indigo-800 ring-4" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.collection.org_id, course.course_uuid, course.thumbnail)})` }}>
<div className="inset-0 rounded-full shadow-2xl bg-cover w-12 h-8 justify-center ring-indigo-800 ring-4" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)})` }}>
</div>
</Link>
</>

20
apps/web/components/Objects/Other/CourseThumbnail.tsx
View file

@ -1,4 +1,5 @@
"use client";
import { useOrg } from '@components/Contexts/OrgContext';
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
import { getUriWithOrg } from '@services/config/config';
@ -8,7 +9,7 @@ import { revalidateTags } from '@services/utils/ts/requests';
import { FileEdit, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React from 'react'
import React, { use, useEffect } from 'react'
type PropsType = {
course: any,
@ -22,6 +23,7 @@ function removeCoursePrefix(course_uuid: string) {
function CourseThumbnail(props: PropsType) {
const router = useRouter();
const org = useOrg() as any;
async function deleteCourses(course_uuid: any) {
await deleteCourseFromBackend(course_uuid);
@ -30,12 +32,16 @@ function CourseThumbnail(props: PropsType) {
router.refresh();
}
useEffect(() => {
}, [org]);
return (
<div className='relative'>
<AdminEditsArea course={props.course} orgSlug={props.orgslug} courseId={props.course.course_uuid} deleteCourses={deleteCourses} />
<Link href={getUriWithOrg(props.orgslug, "/course/" + removeCoursePrefix(props.course.course_uuid))}>
<div className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.course.org_id, props.course.course_uuid, props.course.thumbnail)})` }}>
<div className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)})` }}>
</div>
</Link>
<h2 className="font-bold text-lg w-[250px] py-2">{props.course.name}</h2>
@ -45,10 +51,10 @@ function CourseThumbnail(props: PropsType) {
const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any, deleteCourses: any }) => {
return (
<AuthenticatedClientElement
action="update"
ressourceType="course"
checkMethod='roles' orgId={props.course.org_id}>
<AuthenticatedClientElement
action="update"
ressourceType="course"
checkMethod='roles' orgId={props.course.org_id}>
<div className="flex space-x-1 absolute justify-center mx-auto z-20 bottom-14 left-1/2 transform -translate-x-1/2">
<Link href={getUriWithOrg(props.orgSlug, "/dash/courses/course/" + removeCoursePrefix(props.courseId) + "/general")}>
<div