Merge pull request #114 from COS301-SE-2024/experiment/merge-of-live-…

…session-styling

Experiment/merge of live session styling

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

@@ -1,35 +1,34 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { type Call, type StreamVideoParticipant } from '@stream-io/video-client';
+	import { type Call, hasScreenShare, hasVideo } from '@stream-io/video-client';
 
 	import Participant from './Participant.svelte';
 	import ScreenShare from './ScreenShare.svelte';
+	import { participantsThere, participantsCount } from '$lib/store/index';
 
 	export let call: Call;
 
-	let participants: StreamVideoParticipant[] = [];
-
-	import { screenShareEnabled } from '$lib/store/index';
-
 	onMount(() => {
 		const parentContainer = document.getElementById('participants');
 
 		if (parentContainer) call.setViewport(parentContainer);
 
-		call.state.participants$.subscribe((updatedParticipants) => {
-			participants = updatedParticipants;
+		const subscription = call.state.participants$.subscribe((updatedParticipants) => {
+			participantsThere.set(updatedParticipants);
 		});
-	});
 
-	function getParticipantClass(index: number): string {
-		const total = participants.length;
+		return () => {
+			subscription.unsubscribe();
+		};
+	});
 
+	function getParticipantClass(index: number, total: number): string {
 		if (total === 1) {
 			return 'w-full h-full';
 		} else if (total === 2) {
 			return 'w-1/2 h-full';
 		} else if (total === 3) {
-			return index === 0 ? 'w-1/2 h-1/2' : 'w-1/2 h-1/2';
+			return index === 0 ? 'w-full h-1/2' : 'w-1/2 h-1/2';
 		} else if (total === 4) {
 			return 'w-1/2 h-1/2';
 		} else if (total <= 6) {
@@ -38,22 +37,26 @@
 			return 'w-1/4 h-1/4';
 		}
 	}
-
-	let showScreenShare: boolean;
-
-	screenShareEnabled.subscribe((value: boolean) => {
-		showScreenShare = value;
-	});
 </script>
 
 <div id="participants" class="flex h-full flex-wrap justify-center">
-	{#each participants as participant, index}
-		<div class={`participant ${getParticipantClass(index)} flex items-center justify-center p-2`}>
-			{#if showScreenShare}
+	{#each $participantsThere as participant, index}
+		{#if hasScreenShare(participant)}
+			<div class={`participant flex h-full w-full items-center justify-center p-2`}>
 				<ScreenShare {call} {participant} />
-			{:else}
-				<Participant {call} {participant} />
-			{/if}
-		</div>
+			</div>
+		{:else}
+			<div
+				class={`participant ${getParticipantClass(index, $participantsCount)} flex items-center justify-center p-2`}
+			>
+				{#if hasVideo(participant)}
+					<Participant {call} {participant} />
+				{:else}
+					<div
+						class="flex h-full w-full items-center justify-center rounded-lg bg-gray-300 dark:bg-gray-400"
+					></div>
+				{/if}
+			</div>
+		{/if}
 	{/each}
 </div>

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

@@ -1,21 +1,22 @@
 <script lang="ts">
 	import { type Call } from '@stream-io/video-client';
 	import { goto } from '$app/navigation';
-	import { Button } from 'flowbite-svelte';
+	import { Button, DarkMode } from 'flowbite-svelte';
 	import {
 		MicrophoneOutline,
 		MicrophoneSlashOutline,
 		VideoCameraOutline,
-		ArrowUpFromBracketOutline,
 		PhoneHangupOutline
 	} from 'flowbite-svelte-icons';
 	import { writable } from 'svelte/store';
-	import { screenShareEnabled } from '$lib/store/index';
+	import { screenShareEnabled, cameraEnabled } from '$lib/store/index';
+
+	import ScreenShareIcon from '$lib/images/ScreenShareIcon.svelte';
+	import ScreenShareOffIcon from '$lib/images/ScreenShareOffIcon.svelte';
 
 	export let call: Call;
 
 	const microphoneEnabled = writable(false);
-	const cameraEnabled = writable(false);
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	let screenShare;
@@ -30,6 +31,7 @@
 
 	function toggleCamera() {
 		call.camera.toggle();
+		cameraEnabled.update((enabled) => !enabled);
 	}
 
 	function toggleScreenShare() {
@@ -44,6 +46,7 @@
 </script>
 
 <div class="flex h-full items-center justify-around bg-gray-300 p-4 dark:bg-gray-800">
+	<DarkMode />
 	{#if $microphoneEnabled}
 		<Button
 			pill={true}
@@ -56,7 +59,7 @@
 		<Button
 			pill={true}
 			on:click={toggleMicrophone}
-			class="bg-green-500 text-white hover:bg-green-700"
+			class="bg-gray-500  text-white hover:bg-gray-700  dark:bg-gray-500  dark:hover:bg-gray-700"
 		>
 			<MicrophoneSlashOutline class="h-6 w-6" />
 		</Button>
@@ -86,15 +89,15 @@
 			on:click={toggleScreenShare}
 			class="bg-green-500 text-white hover:bg-green-700"
 		>
-			<ArrowUpFromBracketOutline class="h-6 w-6" />
+			<ScreenShareIcon />
 		</Button>
 	{:else}
 		<Button
 			pill={true}
 			on:click={toggleScreenShare}
 			class="bg-gray-500 text-white hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-700"
 		>
-			<ArrowUpFromBracketOutline class="h-6 w-6" />
+			<ScreenShareOffIcon />
 		</Button>
 	{/if}
 	<Button

src/client/src/lib/store/index.ts

@@ -0,0 +1,57 @@
+import { writable } from 'svelte/store';
+import { type StreamVideoParticipant } from '@stream-io/video-client';
+
+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 materialTitle = writable('Material');
+export const materialsInfo = writable<any[]>([]);
+
+export const lecChange = writable('change');
+export const stuChange = writable('change');
+export const admChange = writable('change');
+export const workChange = writable('change');
+
+export const wrkspcs = writable<any>([]);
+export const orgID = writable('');
+
+export const user = writable('eugene');
+export const email = writable('eugene.mpande@tuks.co.za');
+export const file = writable('');
+export const module = writable('');
+
+export const user_details = writable({});
+export const module_details = writable({});
+export const username = 'e241198014';
+
+export const userInfo = writable<any>({
+	name: 'James',
+	surname: 'Guy',
+	username: 'e241198014',
+	email: 'bond@gg.moc',
+	image: 'https://www.pngkey.com/png/full/73-730477_first-name-profile-image-placeholder-png.png',
+	role: 'lecturer',
+	organisation: '665c341781a011b727589f4c',
+	workspaces: []
+});
+
+export const screenShareEnabled = writable(false);
+export const screenShareParticipant = writable<StreamVideoParticipant | null>(null);
+export const cameraEnabled = writable(false);
+
+export const participantsThere = writable<StreamVideoParticipant[]>([]);
+
+export const participantsCount = writable<number>(0);
+
+participantsThere.subscribe((participants) => {
+	participantsCount.set(participants.length);
+});

src/client/static/images/ScreenShareIcon.svelte

@@ -0,0 +1,15 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-screen-share"
+	><path d="M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3" /><path d="M8 21h8" /><path
+		d="M12 17v4"
+	/><path d="m17 8 5-5" /><path d="M17 3h5v5" /></svg
+>

src/client/static/images/ScreenShareOffIcon.svelte

@@ -0,0 +1,15 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-screen-share-off"
+	><path d="M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3" /><path d="M8 21h8" /><path
+		d="M12 17v4"
+	/><path d="m22 3-5 5" /><path d="m17 3 5 5" /></svg
+>