Merge pull request #630 from CodeCrowCorp/dev

v0.0.11
CodeCrowCorp · Jul 19, 2023 · 4a2cfbb · 4a2cfbb
2 parents 7527f44 + 5d7c980
commit 4a2cfbb
Show file tree

Hide file tree

Showing 36 changed files with 662 additions and 371 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -16,5 +16,8 @@ module.exports = {
 		browser: true,
 		es2017: true,
 		node: true
+	},
+	rules: {
+		'@typescript-eslint/no-explicit-any': ['off']
 	}
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.10",
+	"version": "0.0.11",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -24,8 +24,8 @@
 		"@sveltejs/kit": "^1.10.0",
 		"@sveltejs/svelte-virtual-list": "^3.0.1",
 		"@svitejs/svelte-preprocess-svg": "^2.0.0",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
+		"@typescript-eslint/eslint-plugin": "^6.1.0",
+		"@typescript-eslint/parser": "^6.1.0",
 		"autoprefixer": "^10.4.13",
 		"concurrently": "^8.0.1",
 		"cross-env": "^7.0.3",

diff --git a/src/lib/WHEPClient.ts b/src/lib/WHEPClient.ts
@@ -76,14 +76,14 @@ export default class WHEPClient extends EventTarget {
 			}
 		}
 
-		this.peerConnection.addEventListener('connectionstatechange', (ev) => {
+		this.peerConnection.addEventListener('connectionstatechange', () => {
 			if (this.peerConnection.connectionState !== 'connected') {
 				return
 			}
 			this.videoElement.srcObject = this.stream
 		})
 
-		this.peerConnection.addEventListener('negotiationneeded', (ev) => {
+		this.peerConnection.addEventListener('negotiationneeded', () => {
 			negotiateConnectionWithClientOffer(this.peerConnection, this.endpoint)
 		})
 	}

diff --git a/src/lib/WHIPClient.ts b/src/lib/WHIPClient.ts
@@ -32,7 +32,7 @@ export default class WHIPClient extends EventTarget {
 		 * https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/negotiationneeded_event
 		 * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html
 		 */
-		this.peerConnection.addEventListener('negotiationneeded', async (ev) => {
+		this.peerConnection.addEventListener('negotiationneeded', async () => {
 			console.log('Connection negotiation starting')
 			await negotiateConnectionWithClientOffer(this.peerConnection, this.endpoint)
 			console.log('Connection negotiation ended')
@@ -47,7 +47,7 @@ export default class WHIPClient extends EventTarget {
 				this.localStream = stream
 				videoElement.srcObject = stream
 			})
-			.catch((err: any) => {
+			.catch(() => {
 				this.disconnectStream()
 			})
 	}
@@ -72,7 +72,7 @@ export default class WHIPClient extends EventTarget {
 					audioTrack.enabled = true
 					// audioTrack.id = 'silent-audio-track'
 					// audioTrack.label = 'Silent Audio Track'
-					const audioTransceiver = this.peerConnection.addTransceiver(audioTrack, {
+					this.peerConnection.addTransceiver(audioTrack, {
 						direction: 'sendonly'
 					})
 				}
@@ -126,7 +126,7 @@ export default class WHIPClient extends EventTarget {
 				})
 				.then((stream) => {
 					stream.getTracks().forEach((track) => {
-						const transceiver = this.peerConnection.addTransceiver(track, {
+						this.peerConnection.addTransceiver(track, {
 							/** WHIP is only for sending streaming media */
 							direction: 'sendonly'
 						})

diff --git a/src/lib/assets/icons/chat/IconChatScreenshot.svelte b/src/lib/assets/icons/chat/IconChatScreenshot.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-8 h-8">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+</svg>
diff --git a/src/lib/assets/icons/drawer/IconDrawerProfileViews.svelte b/src/lib/assets/icons/drawer/IconDrawerProfileViews.svelte
@@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+	<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+</svg>
diff --git a/src/lib/assets/icons/drawer/IconDrawerVerification.svelte b/src/lib/assets/icons/drawer/IconDrawerVerification.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
+</svg>
diff --git a/src/lib/components/Browse/Sections/ItemChannel.svelte b/src/lib/components/Browse/Sections/ItemChannel.svelte
@@ -5,62 +5,56 @@
 	export let channel: any = {}
 </script>
 
-<ul class="p-4 bg-base-100 hover:bg-base-300 shrink-0 mt-6 rounded-md">
-	<li>
-		<a
-			class="flex flex-col w-[20rem] md:w-[25rem] rounded-md items-stretch"
-			href="/channel/{channel._id}">
-			<div class="relative">
-				<div class="flex flex-row justify-between">
-					<div class="flex gap-2 mb-3">
-						{#if channel.isLive}
-							<span
-								class="btn btn-sm rounded-md font-medium text-white border-none flex items-center bg-red-700 hover:bg-red-700">
-								LIVE
-							</span>
-						{/if}
-						<div class="dropdown dropdown-bottom">
-							<label
-								for=""
-								class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none"
-								tabindex="-1">
-								<IconViewers />
-								{channel.memberCount || '0'}
-							</label>
-						</div>
-					</div>
-					<div class="flex flex-wrap">
-						{#if channel.category && channel.category.length}
-							{#each channel.category as category}
-								<div class="tooltip" data-tip={category}>
-									<img src={$category_list[category]} alt="" class="h-7 w-7 m-1" />
-								</div>
-							{/each}
-						{/if}
-					</div>
-				</div>
-				<div class="video-thumbnail">
-					<img
-						class="w-full h-full mask rounded-lg object-cover"
-						src={channel.thumbnail
-							? channel.thumbnail
-							: '/placeholder/programming-placeholder.jpg'} />
+<a
+	class="flex flex-col w-[20rem] md:w-[27rem] p-4 bg-base-100 hover:bg-base-300 mt-6 rounded-md shrink-0"
+	href="/channel/{channel._id}">
+	<div class="relative">
+		<div class="flex flex-row justify-between">
+			<div class="flex gap-2 mb-3">
+				{#if channel.isLive}
+					<span
+						class="btn btn-sm rounded-md font-medium text-white border-none flex items-center bg-red-700 hover:bg-red-700">
+						LIVE
+					</span>
+				{/if}
+				<div class="dropdown dropdown-bottom">
+					<label
+						for=""
+						class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none"
+						tabindex="-1">
+						<IconViewers />
+						{channel.memberCount || '0'}
+					</label>
 				</div>
 			</div>
-			<p class="text-lg font-semibold truncate">{channel.title}</p>
-			<div class="flex flex-row gap-2 max-w-[25rem]">
-				<div class="avatar">
-					<div class="w-12 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
-						<img src={channel.avatar} alt="" />
-					</div>
-				</div>
-				<div class="flex items-center">
-					<p>@{channel.createdByUsername}</p>
-				</div>
+			<div class="flex flex-wrap">
+				{#if channel.category && channel.category.length}
+					{#each channel.category as category}
+						<div class="tooltip" data-tip={category}>
+							<img src={$category_list[category]} alt="" class="h-7 w-7 m-1" />
+						</div>
+					{/each}
+				{/if}
+			</div>
+		</div>
+		<div class="video-thumbnail">
+			<img
+				class="w-full h-full mask rounded-lg object-cover"
+				src={channel.thumbnail ? channel.thumbnail : '/placeholder/programming-placeholder.jpg'} />
+		</div>
+	</div>
+	<p class="text-lg font-semibold truncate">{channel.title}</p>
+	<div class="flex flex-row gap-2 max-w-[25rem]">
+		<div class="avatar">
+			<div class="w-12 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+				<img src={channel.avatar} alt="" />
 			</div>
-		</a>
-	</li>
-</ul>
+		</div>
+		<div class="flex items-center">
+			<p>@{channel.createdByUsername}</p>
+		</div>
+	</div>
+</a>
 
 <style>
 	.video-thumbnail {

diff --git a/src/lib/components/Browse/Sections/ItemTable.svelte b/src/lib/components/Browse/Sections/ItemTable.svelte
@@ -8,8 +8,6 @@
 <tr
 	class="cursor-pointer hover:btn-ghost border border-transparent"
 	on:click|preventDefault={() => goto(`/channel/${channel._id}`)}>
-	<!-- <ul class="menu">
-								<li> -->
 	<td>
 		<div class="flex items-center space-x-2 my-3 pl-3">
 			<div class="avatar">
@@ -19,7 +17,7 @@
 			</div>
 			<div>
 				<div class="font-bold">{channel.createdByDisplayName || ''}</div>
-				<div class="text-sm text-pink-500">@{channel.createdByUsername || ''}</div>
+				<div class="text-sm">@{channel.createdByUsername || ''}</div>
 			</div>
 		</div>
 	</td>
@@ -66,6 +64,4 @@
 			{/if}
 		</div>
 	</td>
-	<!-- </li>
-							</ul> -->
 </tr>
diff --git a/src/lib/components/Browse/Sections/ItemUser.svelte b/src/lib/components/Browse/Sections/ItemUser.svelte
@@ -4,28 +4,24 @@
 	export let user: any = {}
 </script>
 
-<ul class="p-4 bg-base-100 hover:bg-base-300 shrink-0 rounded-md">
-	<li>
-		<a class="rounded-md" href="/profile/{user.username}">
-			<div class="text-center space-y-3 w-[200px]">
-				<div class="avatar">
-					<div class="w-36 mask {user?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
-						<img src={user.avatar} alt="" />
-					</div>
-				</div>
-				<div class="tooltip w-full" data-tip="@{user.username}">
-					<p class="text-lg font-semibold truncate">@{user.username}</p>
-				</div>
-				<div class="w-full">
-					{#if user.category && user.category.length}
-						{#each user.category as category}
-							<div class="tooltip" data-tip={category}>
-								<img src={$category_list[category]} alt="" class="h-10 w-10 m-1" />
-							</div>
-						{/each}
-					{/if}
-				</div>
+<a class="p-4 bg-base-100 hover:bg-base-300 shrink-0 rounded-md" href="/profile/{user.username}">
+	<div class="text-center space-y-3 w-[200px]">
+		<div class="avatar">
+			<div class="w-36 mask {user?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+				<img src={user.avatar} alt="" />
 			</div>
-		</a>
-	</li>
-</ul>
+		</div>
+		<div class="tooltip w-full" data-tip="@{user.username}">
+			<p class="text-lg font-semibold truncate">@{user.username}</p>
+		</div>
+		<div class="w-full">
+			{#if user.category && user.category.length}
+				{#each user.category as category}
+					<div class="tooltip" data-tip={category}>
+						<img src={$category_list[category]} alt="" class="h-10 w-10 m-1" />
+					</div>
+				{/each}
+			{/if}
+		</div>
+	</div>
+</a>
diff --git a/src/lib/components/Browse/Sections/SectionChannel.svelte b/src/lib/components/Browse/Sections/SectionChannel.svelte
@@ -49,7 +49,9 @@
 			</div>
 			<div class="flex flex-row">
 				<div class="relative flex items-center ml-3">
-					<div class="absolute btn btn-neutral btn-prev btn-square text-white p-2 left-0 z-10" on:click={prev}>
+					<div
+						class="absolute btn btn-neutral btn-prev btn-square text-white p-2 left-0 z-10"
+						on:click={prev}>
 						<IconDrawerLeft />
 					</div>
 				</div>
@@ -69,7 +71,9 @@
 				</div>
 
 				<div class="relative flex items-center mr-3">
-					<div class="absolute btn btn-neutral btn-next btn-square text-white p-2 right-0 z-10" on:click={next}>
+					<div
+						class="absolute btn btn-neutral btn-next btn-square text-white p-2 right-0 z-10"
+						on:click={next}>
 						<IconDrawerChevron />
 					</div>
 				</div>

diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -21,7 +21,7 @@
 	$: isHost = channel.user === $page.data.user?.userId
 
 	$: viewersWithOutHost = viewers.filter((viewer) => viewer.userId !== channel.user)
-
+$: console.log("viewers : ", viewers)
 	function insert(str: string, index: number, value: string) {
 		return str.substr(0, index) + value + str.substr(index)
 	}
@@ -68,9 +68,17 @@
 	}
 
 	const slectUserfromKey = (key: string) => {
-		if (key === 'ArrowDown' && selectedUser < viewers.length) {
+		if(selectedUser >= viewersWithOutHost.length - 1){
+			selectedUser = 0
+			return 
+		}
+		else if(selectedUser === 0){
+			selectedUser = viewersWithOutHost.length - 1
+			return
+		}
+		if (key === 'ArrowDown' && selectedUser < viewersWithOutHost.length - 1) {
 			selectedUser++
-		} else if (key === 'ArrowUp' && selectedUser >= 0) {
+		} else if (key === 'ArrowUp' && selectedUser > 0) {
 			selectedUser--
 		}
 	}
@@ -205,6 +213,7 @@
 		!chatMessage.includes('@') &&
 		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
 		!showUsers
+
 </script>
 
 <form class="rounded-lg bg-base-200 p-2 w-full relative">
@@ -299,7 +308,7 @@
 							e.preventDefault()
 							if (showUsers) {
 								if (selectedUser >= 0) {
-									const user = viewers[selectedUser]
+									const user = viewersWithOutHost[selectedUser]
 									chatMessage = chatMessage.replace(/@/, '@' + user.username)
 								}
 							} else {