bug fix recording

.github/workflows/deploy.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 18.17.0
+          node-version: 20.11.1
       - uses: oven-sh/setup-bun@v1
         with:
           bun-version: latest

.github/workflows/peformance.yml

@@ -0,0 +1,16 @@
+name: Run Performance Check
+on:
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Lighthouse
+      uses: foo-software/lighthouse-check-action@master
+      with:
+        urls: 'https://www.class-connect.online/'

src/src/lib/components/forms/interactive/viewers/Mover.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import MCQ from '$lib/components/forms/interactive/viewers/MCQ.svelte';
-	import Note from '$lib/components/forms/interactive/viewers/Notes.svelte';
-	import ThreeDMaterial from '$lib/components/forms/interactive/viewers/ThreeDMaterial.svelte';
+	import { Input, Label, Button, Select } from 'flowbite-svelte';
+	import toast, { Toaster } from 'svelte-french-toast';
+	import { enhance } from '$app/forms';
 
 	export let content: any[] = [];
 	let currItem: any;
 	let currIndex = 0;
+	let error: string;
+	let selected: any;
+	let id: string;
 
 	onMount(async () => {
 		currItem = content[0];
@@ -27,10 +30,35 @@
 		}
 	}
 
+	function checkanswer() {
+		if (selected == currItem.answer) {
+			toast.success('Correct Answer');
+		} else {
+			toast.error('Wrong Answer');
+		}
+	}
+
+	function save() {
+		const toastId = toast.loading('Answering question...');
+		return async ({ result }: any) => {
+			if (result.type === 'success') {
+				toast.dismiss(toastId);
+				toast.success('Answered correctlly');
+			} else {
+				error = result.data?.error;
+				toast.dismiss(toastId);
+				toast.error(error);
+			}
+		};
+	}
+
 	$: currItem = content[currIndex];
 	$: stepsAhead = Math.min(3, content.length - currIndex);
+	$: options = currItem.options;
 </script>
 
+<Toaster />
+
 <div class="space-y-4">
 	<div class="flex flex-col items-center gap-4 sm:grid sm:grid-cols-12">
 		<!-- Previous Button -->
@@ -96,11 +124,117 @@
 	<div class="flex justify-center">
 		<div class="w-full px-4 sm:px-0">
 			{#if currItem.type == 'MCQ'}
-				<MCQ question={currItem} />
+				<main class="container mx-auto p-4 sm:w-[100vw]">
+					<div class="p-2 md:px-5 md:py-2">
+						<form method="POST" action="?/answerMCQ" use:enhance={save}>
+							<div class="grid grid-cols-12 gap-6">
+								<div class="col-span-10">
+									<div>
+										<p class="m-2 text-center text-3xl">
+											{currItem.question}
+										</p>
+										<p class="m-2 text-center text-xl text-gray-500">
+											{currItem.description}
+										</p>
+										<div class="mt-4">
+											{#each options as option, i}
+												<p class="mb-2">Option {i + 1}</p>
+												<div class="mb-6 grid grid-cols-12 gap-6">
+													<div class="col-span-11">
+														<p
+															id="option-{currItem.id}-{i}"
+															placeholder={option}
+															class="mb-2 w-full"
+														>
+															{option}
+														</p>
+													</div>
+												</div>
+											{/each}
+										</div>
+										<Label>
+											Select an answer:
+											<Select class="m-2" bind:value={selected}>
+												{#each currItem.options as option}
+													<option value={option}>{option}</option>
+												{/each}
+											</Select>
+										</Label>
+										<Input type="hidden" id="answer" name="answer" value={selected} />
+										<Input type="hidden" id="id" name="id" value={id} />
+										<Button type="button" on:click={checkanswer} class="mt-4 w-full">Answer</Button>
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+				</main>
 			{:else if currItem.type == 'Note'}
-				<Note note={currItem} />
+				<main class="container mx-auto px-2 py-4 sm:px-4 md:px-6 lg:px-8">
+					<div class="mx-auto w-full max-w-4xl">
+						<div class="flex flex-col items-center">
+							<div class="mb-4 w-full">
+								<h2 class="text-center text-xl font-semibold sm:text-2xl md:text-3xl">
+									{currItem.title}
+								</h2>
+							</div>
+							<div class="w-full">
+								<div class="p-2 sm:p-3">
+									<section
+										class="flex flex-col space-y-2 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
+									>
+										<div class="w-full flex-1">
+											<iframe
+												id="google-pdf-viewer"
+												class="h-[50vh] w-full sm:h-[60vh] md:h-[70vh] lg:h-[80vh]"
+												src={currItem.content}
+												frameborder="0"
+												title="Study Material"
+											></iframe>
+										</div>
+									</section>
+								</div>
+							</div>
+						</div>
+					</div>
+				</main>
 			{:else if currItem.type == 'ThreeDMaterial'}
-				<ThreeDMaterial material={currItem} />
+				<main class="container mx-auto p-4 sm:w-[100vw]">
+					<div class="p-2 md:px-5 md:py-2">
+						<div class="grid grid-cols-12 justify-center gap-6 text-center">
+							<div class="col-span-10">
+								<div class="mb-6">
+									<h2 class="mb-2 text-2xl">
+										{currItem.title}
+									</h2>
+								</div>
+								<div>
+									<div class="flex justify-center p-3">
+										<section
+											class="flex h-[100%] w-[100%] flex-col space-y-4 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
+										>
+											<div class="flex-1">
+												<!-- Use it like any other HTML element -->
+												<model-viewer
+													class="h-[100vh] w-full flex-grow"
+													alt={currItem.description}
+													src={currItem.link}
+													ar
+													environment-image="/moon_1k.hdr"
+													poster="/poster.svg"
+													shadow-intensity="1"
+													camera-controls
+													touch-action="pan-y"
+												>
+												</model-viewer>
+											</div>
+										</section>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</main>
 			{/if}
 		</div>
 	</div>

src/src/lib/components/forms/interactive/viewers/Notes.svelte

@@ -19,6 +19,8 @@
 			window.removeEventListener('resize', checkIfMobile);
 		};
 	});
+
+	$: note = note;
 </script>
 
 <main class="container mx-auto px-2 py-4 sm:px-4 md:px-6 lg:px-8">

src/src/lib/components/lessons/lesson/Controls.svelte

@@ -162,7 +162,9 @@
 		const toastId = toast.loading('Saving recording...');
 		const mimeType = mediaRecorder?.mimeType || 'video/webm';
 		const blob: Blob = new Blob(recordedChunks, { type: mimeType });
-		const file = new File([blob], `screen-recording.${mimeType.split('/')[1]}`, { type: mimeType });
+		const extention = mimeType.split('/')[1].split(';')[0];
+		const file = new File([blob], `screen-recording.${extention}`, { type: mimeType });
+		console.log('Recording file:', file);
 
 		let response: Response;
 		const formData = new FormData();
@@ -172,6 +174,8 @@
 			formData.append('video', file);
 			response = await fetch('?/SaveRecording', { method: 'POST', body: formData });
 		} else {
+			toast.dismiss(toastId);
+			toast.loading('Uploading large file this will take some time...');
 			const data = await multipartUploadFile(file);
 			formData.append('videolink', data.url);
 			response = await fetch('?/SaveRecordingLink', { method: 'POST', body: formData });

src/src/lib/components/modals/materials/Preview.svelte

@@ -64,10 +64,10 @@
 					class="flex h-[500px] w-[500px] flex-col space-y-4 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
 				>
 					<div class="flex-1">
-						<object
+						<iframe
 							id="pdf-file"
 							class="h-full w-full flex-grow"
-							data={url}
+							src={url}
 							title="Study Material"
 						/>
 					</div>

src/src/lib/components/modals/materials/PreviewMaterial.svelte

@@ -133,10 +133,10 @@
 					class="flex h-[500px] w-[500px] flex-col space-y-4 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
 				>
 					<div class="flex-1">
-						<object
+						<iframe
 							id="pdf-file"
 							class="h-full w-full flex-grow"
-							data={url}
+							src={url}
 							title="Study Material"
 						/>
 					</div>

src/src/lib/server/utils/interactive.ts

@@ -15,7 +15,12 @@
 }
 
 async function RemoveContentFromLesson(lesson: any, content: any) {
-	lesson.content = lesson.content.filter((id: any) => id !== content._id.toString());
+	const contentArray = lesson.content;
+	const index = contentArray.indexOf(content._id);
+	if (index > -1) {
+		contentArray.splice(index, 1);
+	}
+	lesson.content = contentArray;
 	await lesson.save();
 }
 
@@ -361,8 +366,11 @@
 	if (content.type === 'MCQ') {
 		await MCQs.findByIdAndDelete(id);
 	}
+	if (content.type === 'ThreeDMaterial') {
+		await ThreeDMaterial.findByIdAndDelete(id);
+	}
 
-	await RemoveContentFromLesson(lessonData, content);
+	await RemoveContentFromLesson(lessonData, content.data);
 }
 
 export async function editContent(data: FormData) {

src/src/routes/(app)/workspaces/[workspace]/interactive/[interactive]/+page.server.ts

@@ -128,10 +128,11 @@
 			return fail(500, { message: 'Failed to save question' });
 		}
 	},
-	deleteContent: async ({ request, locals }) => {
+	deleteContent: async ({ request, locals, params }) => {
 		try {
 			validateLecturer(locals);
 			const data = await request.formData();
+			data.append('lesson', params.interactive as string);
 			await deleteContent(data);
 		} catch (e) {
 			console.error('Error deleting content:', e);

src/src/routes/(app)/workspaces/[workspace]/materials/material/+page.svelte

@@ -7,6 +7,7 @@
 	}
 </script>
 
-<main class="flex h-full flex-col">
-	<object class="w-full flex-grow" data={pdf_data} title="Study Material" />
+<main class="flex h-full items-center justify-center">
+	<iframe class="h-[100vh] w-full flex-grow" src={pdf_data} frameborder="0" title="Study Material"
+	></iframe>
 </main>