Feature/live session

src/client/package.json

@@ -2,7 +2,7 @@
 	"name": "client",
 	"version": "0.0.1",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --open",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -56,6 +56,8 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@stream-io/node-sdk": "^0.2.5",
+		"@stream-io/video-client": "^1.3.0",
 		"@tabler/icons-svelte": "^3.5.0",
 		"@threlte/core": "^7.3.0",
 		"axios": "^1.7.2",

src/client/src/lib/components/admin/+Lessons.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { lessons } from '$lib/stores/store';
+	import {
+		Table,
+		TableBody,
+		TableBodyCell,
+		TableBodyRow,
+		TableHead,
+		TableHeadCell,
+		Breadcrumb,
+		BreadcrumbItem,
+		Button
+	} from 'flowbite-svelte';
+
+	import ScheduleLesson from '$lib/components/modals/+ScheduleLesson.svelte';
+
+	const headers = ['Topic', 'Date', 'Time'];
+</script>
+
+<section class="container mx-auto my-2 px-4">
+	<div class="flex items-center overflow-x-auto whitespace-nowrap py-4">
+		<Breadcrumb aria-label="Default breadcrumb example">
+			<BreadcrumbItem href="/" home>Home</BreadcrumbItem>
+			<BreadcrumbItem href="/lessons">Lessons</BreadcrumbItem>
+		</Breadcrumb>
+	</div>
+
+	<div class="sm:flex sm:items-center sm:justify-between">
+		<div>
+			<div class="flex items-center gap-x-3">
+				<h2 class="text-xl font-bold text-gray-800 dark:text-white">Lessons</h2>
+
+				<span
+					class="rounded-full bg-green-100 px-3 py-1 text-xs text-green-600 dark:bg-gray-800 dark:text-green-400"
+				>
+					{$lessons.length + 1}
+					{' '} lessons
+				</span>
+			</div>
+		</div>
+		<div class="mb-4 flex items-center gap-x-3">
+			<ScheduleLesson />
+		</div>
+	</div>
+
+	<br />
+
+	<p class="text-l font-bold text-gray-800 dark:text-white">In Session</p>
+
+	<Table class="my-2">
+		<TableHead>
+			{#each headers as header}
+				<TableHeadCell>{header}</TableHeadCell>
+			{/each}
+		</TableHead>
+		<TableBody tableBodyClass="divide-y">
+			<TableBodyRow>
+				<TableBodyCell class="inline-flex items-center gap-x-3">
+					<p class="text-lg text-gray-800 dark:text-white">Mathematics</p>
+				</TableBodyCell>
+				<TableBodyCell>15 June</TableBodyCell>
+				<TableBodyCell>09:30</TableBodyCell>
+				<TableBodyCell>
+					<Button size="xs" on:click={() => goto('lessons/1234')}>Join</Button>
+				</TableBodyCell>
+			</TableBodyRow>
+		</TableBody>
+	</Table>
+
+	<br />
+
+	<p class="text-l font-bold text-gray-800 dark:text-white">Upcoming</p>
+
+	<Table class="my-2">
+		<TableHead>
+			{#each headers as header}
+				<TableHeadCell>{header}</TableHeadCell>
+			{/each}
+		</TableHead>
+		<TableBody tableBodyClass="divide-y">
+			{#each $lessons as lesson}
+				<TableBodyRow>
+					<TableBodyCell class="inline-flex items-center gap-x-3">
+						<p class="text-lg text-gray-800 dark:text-white">
+							{lesson.topic}
+						</p>
+					</TableBodyCell>
+					<TableBodyCell>
+						{lesson.date}
+					</TableBodyCell>
+					<TableBodyCell>
+						{lesson.time}
+					</TableBodyCell>
+				</TableBodyRow>
+			{/each}
+		</TableBody>
+	</Table>
+</section>

src/client/src/lib/components/lesson/Audio.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Call, type StreamVideoParticipant } from '@stream-io/video-client';
+
+	export let call: Call;
+	export let participant: StreamVideoParticipant;
+
+	let audioEl: HTMLAudioElement;
+
+	onMount(() => {
+		if (participant.isLocalParticipant) return;
+
+		const unbind = call.bindAudioElement(audioEl, participant.sessionId);
+
+		return () => {
+			if (unbind) unbind();
+		};
+	});
+</script>
+
+{#if !participant.isLocalParticipant}
+	<audio bind:this={audioEl} data-session-id={participant.sessionId}></audio>
+{/if}

src/client/src/lib/components/lesson/Container.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { type Call, type StreamVideoParticipant } from '@stream-io/video-client';
+
+	import Participant from './Participant.svelte';
+	import ScreenShare from './ScreenShare.svelte';
+
+	export let call: Call;
+
+	let participants: StreamVideoParticipant[] = [];
+
+	onMount(() => {
+		const parentContainer = document.getElementById('participants');
+
+		if (parentContainer) call.setViewport(parentContainer);
+
+		call.state.participants$.subscribe((updatedParticipants) => {
+			participants = updatedParticipants;
+		});
+	});
+</script>
+
+<div id="participants" class="flex">
+	{#each participants as participant}
+		<Participant {call} {participant} />
+		<ScreenShare {call} {participant} />
+	{/each}
+</div>

src/client/src/lib/components/lesson/ControlPanel.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { type Call } from '@stream-io/video-client';
+	import { goto } from '$app/navigation';
+
+	export let call: Call;
+
+	function toggleMicrophone() {
+		call.microphone.toggle();
+	}
+
+	function toggleCamera() {
+		call.camera.toggle();
+	}
+
+	function toggleScreenShare() {
+		call.screenShare.toggle();
+	}
+
+	function endCall() {
+		call.leave();
+		goto('/lessons');
+	}
+</script>
+
+<div>
+	<button
+		on:click={toggleMicrophone}
+		class="rounded bg-blue-500 px-2 py-1 font-bold text-white hover:bg-blue-700"
+	>
+		Mic
+	</button>
+
+	<button
+		on:click={toggleCamera}
+		class="rounded bg-blue-500 px-2 py-1 font-bold text-white hover:bg-blue-700"
+	>
+		Camera
+	</button>
+
+	<button
+		on:click={toggleScreenShare}
+		class="rounded bg-blue-500 px-2 py-1 font-bold text-white hover:bg-blue-700"
+	>
+		Share Screen
+	</button>
+
+	<button
+		on:click={endCall}
+		class="rounded bg-red-500 px-2 py-1 font-bold text-white hover:bg-red-700"
+	>
+		End Call
+	</button>
+</div>

src/client/src/lib/components/lesson/Participant.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Call, type StreamVideoParticipant } from '@stream-io/video-client';
+	import Video from './Video.svelte';
+	import Audio from './Audio.svelte';
+
+	export let call: Call;
+	export let participant: StreamVideoParticipant;
+</script>
+
+<div class="m-5 bg-gray-200">
+	<Video {call} {participant} />
+	<Audio {call} {participant} />
+</div>

src/client/src/lib/components/lesson/ScreenShare.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Call, type StreamVideoParticipant } from '@stream-io/video-client';
+
+	export let call: Call;
+	export let participant: StreamVideoParticipant;
+
+	let videoEl: HTMLVideoElement;
+
+	onMount(() => {
+		const unbind = call.bindVideoElement(videoEl, participant.sessionId, 'screenShareTrack');
+		const untrack = call.trackElementVisibility(videoEl, participant.sessionId, 'screenShareTrack');
+
+		return () => {
+			if (unbind) unbind();
+
+			untrack();
+		};
+	});
+</script>
+
+<video
+	bind:this={videoEl}
+	data-session-id={participant.sessionId}
+	width={333}
+	height={250}
+	style="object-fit: contain;"
+>
+	<track kind="captions" />
+</video>

src/client/src/lib/components/lesson/Video.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Call, type StreamVideoParticipant } from '@stream-io/video-client';
+
+	export let call: Call;
+	export let participant: StreamVideoParticipant;
+
+	let videoEl: HTMLVideoElement;
+
+	onMount(() => {
+		const unbind = call.bindVideoElement(videoEl, participant.sessionId, 'videoTrack');
+		const untrack = call.trackElementVisibility(videoEl, participant.sessionId, 'videoTrack');
+
+		return () => {
+			if (unbind) unbind();
+
+			untrack();
+		};
+	});
+</script>
+
+<video
+	bind:this={videoEl}
+	data-session-id={participant.sessionId}
+	width={333}
+	height={250}
+	style="object-fit: contain;"
+>
+	<track kind="captions" />
+</video>

src/client/src/lib/components/modals/+ScheduleLesson.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Button, Modal, Label, Input } from 'flowbite-svelte';
+
+	let formModal = false;
+
+	async function handleSubmit(event: Event) {
+		event.preventDefault();
+
+		/*const formData = new FormData(event.target as HTMLFormElement);
+
+		const topic = formData.get('topic')?.toString() ?? '';
+		const date = formData.get('date')?.toString() ?? '';
+		const time = formData.get('time')?.toString() ?? '';*/
+
+		try {
+			// Make request
+		} catch (error) {
+			console.error('Schedule Lesson Error:', error);
+		}
+
+		formModal = false;
+	}
+</script>
+
+<Button on:click={() => (formModal = true)} class="mx-2">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="h-5 w-5"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+		/>
+	</svg>
+	<span class="px-2">Schedule Lesson</span>
+</Button>
+
+<Modal bind:open={formModal} size="xs" autoclose={false} class="w-full">
+	<form class="flex flex-col space-y-6" on:submit={handleSubmit}>
+		<h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Schedule Lesson</h3>
+
+		<Label for="topic" class="mb-2 mt-2 space-y-2">Topic</Label>
+		<Input type="text" id="topic" name="topic" placeholder="Mathematics" size="md" required />
+
+		<Label for="date" class="mb-2 mt-2 space-y-2">Date</Label>
+		<Input type="date" id="date" name="date" placeholder="16 June" size="md" required />
+
+		<Label for="time" class="mb-2 mt-2 space-y-2">Time</Label>
+		<Input type="time" id="time" name="time" placeholder="12:00" size="md" required />
+
+		<Button type="submit" class="w-full1">Schedule</Button>
+	</form>
+</Modal>

src/client/src/lib/components/utils/+SideBar.svelte

@@ -47,6 +47,11 @@
 			name: 'Students',
 			href: '/students'
 		},
+		{
+			icon: Student,
+			name: 'Lessons',
+			href: '/lessons'
+		},
 		{
 			icon: Users,
 			name: 'Admins',

src/client/src/lib/stores/store.ts

@@ -4,7 +4,27 @@ export const admins = writable<any>([]);
 export const students = writable<any>([]);
 export const lecturers = writable<any>([]);
 
+export const lessons = writable<any>([
+	{ topic: 'Science', date: '16 June', time: '10:30' },
+	{ topic: 'History', date: '17 June', time: '11:30' },
+	{ topic: 'Geography', date: '18 June', time: '12:30' },
+	{ topic: 'Technology', date: '19 June', time: '13:30' }
+]);
+
 export const organisationName = writable('Organisation');
 export const lecChange = writable('change');
 export const stuChange = writable('change');
 export const admChange = writable('change');
+
+export const username = 'e241198014';
+
+export const userInfo = writable<any>({
+	name: 'James',
+	surname: 'Guy',
+	username: 'e241198014',
+	email: '[email protected]',
+	image: 'https://www.pngkey.com/png/full/73-730477_first-name-profile-image-placeholder-png.png',
+	role: 'lecturer',
+	organisation: '665c341781a011b727589f4c',
+	workspaces: []
+});