v0.0.2 merge dev to main

.gitignore

@@ -11,4 +11,9 @@ vite.config.ts.timestamp-*
 coverage/
 e2eresults.json
 package-lock.json
-src/lib/assets/styles/tailwind-output.css
+src/lib/assets/styles/tailwind-output.css
+src/lib/stores/adminStore.ts
+src/lib/stores/chatStore.ts
+src/lib/stores/sfxStore.ts
+src/lib/stores/funFactStore.ts
+/static/sfx/

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -50,6 +50,7 @@
 		"vite": "^4.1.4"
 	},
 	"dependencies": {
+		"@neodrag/svelte": "^2.0.3",
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.9",
 		"animate.css": "^4.1.1",

src/hooks.server.ts

@@ -14,7 +14,6 @@ import { user_role } from '$lib/stores/authStore'
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const pathname = event.url.pathname
-
 	const userId = event.url.searchParams.get('userId') || event.cookies.get('userId') || ''
 	let token = event.url.searchParams.get('token') || event.cookies.get('token') || ''
 	// const lastTimeTillLoadConfig = event.cookies.get('loadConfigTime') || '0'

src/lib/WHEPClient.ts

@@ -9,7 +9,7 @@ export default class WHEPClient {
 	private peerConnection: RTCPeerConnection
 	private stream: MediaStream
 
-	constructor(private endpoint: string, private videoElement: HTMLVideoElement) {
+	constructor(private endpoint: string, private videoElement: any, private trackType: string) {
 		this.stream = new MediaStream()
 
 		/**
@@ -26,14 +26,20 @@ export default class WHEPClient {
 			bundlePolicy: 'max-bundle'
 		})
 
+		const trackOrKind = trackType === 'screen' || trackType === 'webcam' ? 'video' : 'audio'
+
 		/** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addTransceiver */
-		this.peerConnection.addTransceiver('video', {
-			direction: 'recvonly'
-		})
-		this.peerConnection.addTransceiver('audio', {
+		this.peerConnection.addTransceiver(trackOrKind, {
 			direction: 'recvonly'
 		})
 
+		//NOTE: used for system audio
+		if (this.trackType === 'screen') {
+			this.peerConnection.addTransceiver('audio', {
+				direction: 'recvonly'
+			})
+		}
+
 		/**
 		 * When new tracks are received in the connection, store local references,
 		 * so that they can be added to a MediaStream, and to the <video> element.
@@ -67,9 +73,7 @@ export default class WHEPClient {
 			if (this.peerConnection.connectionState !== 'connected') {
 				return
 			}
-			if (!this.videoElement.srcObject) {
-				this.videoElement.srcObject = this.stream
-			}
+			this.videoElement.srcObject = this.stream
 		})
 
 		this.peerConnection.addEventListener('negotiationneeded', (ev) => {

src/lib/WHIPClient.ts

@@ -5,11 +5,12 @@ import negotiateConnectionWithClientOffer from '$lib/negotiateConnectionWithClie
  *
  * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html
  */
-export default class WHIPClient {
+export default class WHIPClient extends EventTarget {
 	private peerConnection: RTCPeerConnection
-	private localStream?: MediaStream
+	public localStream?: MediaStream
 
-	constructor(private endpoint: string, private videoElement: HTMLVideoElement, trackType: string) {
+	constructor(private endpoint: string, private videoElement: any, private trackType: string) {
+		super()
 		/**
 		 * Create a new WebRTC connection, using public STUN servers with ICE,
 		 * allowing the client to disover its own IP address.
@@ -41,11 +42,13 @@ export default class WHIPClient {
 		 * connect the video stream to the provided <video> element.
 		 */
 		this.accessLocalMediaSources(trackType)
-			.then((stream) => {
+			.then((stream: any) => {
 				this.localStream = stream
-				videoElement.srcObject = stream as MediaProvider
+				videoElement.srcObject = stream
+			})
+			.catch((err: any) => {
+				this.disconnectStream()
 			})
-			.catch(console.error)
 	}
 
 	/**
@@ -57,22 +60,40 @@ export default class WHIPClient {
 	private async accessLocalMediaSources(trackType: string) {
 		if (trackType === 'screen') {
 			return navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then((stream) => {
+				if (!stream.getAudioTracks().length) {
+					const audioContext = new AudioContext()
+					const oscillator = audioContext.createOscillator()
+					const destination = audioContext.createMediaStreamDestination()
+					oscillator.connect(destination)
+					oscillator.frequency.setValueAtTime(0, audioContext.currentTime)
+					oscillator.start()
+					const audioTrack = destination.stream.getAudioTracks()[0]
+					audioTrack.enabled = true
+					// audioTrack.id = 'silent-audio-track'
+					// audioTrack.label = 'Silent Audio Track'
+					const audioTransceiver = this.peerConnection.addTransceiver(audioTrack, {
+						direction: 'sendonly'
+					})
+				}
 				stream.getTracks().forEach((track) => {
 					const transceiver = this.peerConnection.addTransceiver(track, {
 						/** WHIP is only for sending streaming media */
 						direction: 'sendonly'
 					})
 					if (track.kind == 'video' && transceiver.sender.track) {
 						transceiver.sender.track.applyConstraints({
-							width: 1280,
-							height: 720
+							width: 1920,
+							height: 1080
 						})
 					}
 				})
+				stream.getVideoTracks()[0].addEventListener('ended', () => {
+					this.disconnectStream()
+				})
 				return stream
 			})
 		} else if (trackType === 'webcam') {
-			return navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
+			return navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then((stream) => {
 				stream.getTracks().forEach((track) => {
 					const transceiver = this.peerConnection.addTransceiver(track, {
 						/** WHIP is only for sending streaming media */
@@ -85,6 +106,9 @@ export default class WHIPClient {
 						})
 					}
 				})
+				stream.getVideoTracks()[0].addEventListener('ended', () => {
+					this.disconnectStream()
+				})
 				return stream
 			})
 		} else if (trackType === 'audio') {
@@ -103,12 +127,9 @@ export default class WHIPClient {
 							/** WHIP is only for sending streaming media */
 							direction: 'sendonly'
 						})
-						if (track.kind == 'video' && transceiver.sender.track) {
-							transceiver.sender.track.applyConstraints({
-								width: 1280,
-								height: 720
-							})
-						}
+					})
+					stream.getAudioTracks()[0].addEventListener('ended', () => {
+						this.disconnectStream()
 					})
 					return stream
 				})
@@ -124,11 +145,14 @@ export default class WHIPClient {
 	 * Note that once you call this method, this instance of this WHIPClient cannot be reused.
 	 */
 	public async disconnectStream() {
-		const response = await fetch(this.endpoint, {
-			method: 'DELETE',
-			mode: 'cors'
-		})
+		// const response = await fetch(this.endpoint, {
+		// 	method: 'DELETE',
+		// 	mode: 'cors'
+		// })
 		this.peerConnection.close()
 		this.localStream?.getTracks().forEach((track) => track.stop())
+		this.videoElement.srcObject = null
+		this.dispatchEvent(new CustomEvent(`localStreamStopped-${this.trackType}`))
+		console.log('Disconnected')
 	}
 }

src/lib/assets/icons/IconMageLogo.svelte

@@ -0,0 +1,49 @@
+<script>
+	import { current_theme } from '$lib/stores/helperStore'
+	import { onMount } from 'svelte'
+
+	export let customClass = 'w-20'
+
+	let color = '#fff'
+	onMount(() => {
+		current_theme.subscribe((theme) => {
+			switch (theme) {
+				case 'dark':
+				case 'synthwave':
+					color = '#fff'
+					break
+				case 'light':
+				case 'cyberpunk':
+					color = '#3b0f7f'
+					break
+			}
+		})
+	})
+</script>
+
+<div class={customClass}>
+	<svg
+		data-name="Layer 1"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 514.34 814.7"
+		style="fill: {color};">
+		<path
+			class="prefix__cls-1"
+			d="M243.75 612.04c4.28 5.69 14.78 55.16 14.78 55.16s10.54-49.47 14.8-55.16 41.55-19.69 41.55-19.69-37.28-13.93-41.55-19.59-14.8-55.18-14.8-55.18-10.52 49.5-14.78 55.18-41.58 19.59-41.58 19.59 37.29 14 41.58 19.69z" />
+		<path
+			class="prefix__cls-2"
+			d="M179.38 199.74c2.44 3.24 8.42 31.39 8.42 31.39s6-28.15 8.42-31.39 23.65-11.19 23.65-11.19-21.22-7.93-23.65-11.15-8.42-31.41-8.42-31.41-6 28.17-8.42 31.41-23.64 11.15-23.64 11.15 21.21 7.95 23.64 11.19z" />
+		<path
+			class="prefix__cls-3"
+			d="M459.46 375.96c2.44 3.24 8.42 31.39 8.42 31.39s6-28.15 8.43-31.39 23.65-11.19 23.65-11.19-21.22-7.93-23.65-11.15-8.43-31.41-8.43-31.41-6 28.17-8.42 31.41-23.64 11.15-23.64 11.15 21.21 7.95 23.64 11.19z" />
+		<path
+			class="prefix__cls-4"
+			d="M240.32 67.27c2.44 3.23 8.42 31.39 8.42 31.39s6-28.16 8.42-31.39 23.65-11.2 23.65-11.2-21.22-7.93-23.65-11.15-8.42-31.4-8.42-31.4-6 28.17-8.42 31.4-23.65 11.15-23.65 11.15 21.21 7.96 23.65 11.2z" />
+		<path
+			class="prefix__cls-5"
+			d="M132.51 597.21l79.18-107.68-40.46-116.56 99.26-191.14L65.11 386.44l41.01 107.23L0 597.21 247.9 814.7 132.51 597.21z" />
+		<path
+			class="prefix__cls-6"
+			d="M378.52 341.17l51.65-117.07L299.25 0l57.78 180.74-68.47 151.25 100.03 223.79L247.9 814.7l266.44-248.57-135.82-224.96z" />
+	</svg>
+</div>

src/lib/assets/icons/IconMageText.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { current_theme } from '$lib/stores/helperStore'
+	import { onMount } from 'svelte'
+
+	export let customClass = 'w-20'
+
+	let color = '#fff'
+	onMount(() => {
+		current_theme.subscribe((theme) => {
+			switch (theme) {
+				case 'dark':
+				case 'synthwave':
+					color = '#fff'
+					break
+				case 'light':
+				case 'cyberpunk':
+					color = '#3b0f7f'
+					break
+			}
+		})
+	})
+</script>
+
+<div class={customClass}>
+	<svg
+		id="Layer_1"
+		data-name="Layer 1"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 204.31 58.75"
+		style="fill: {color}">
+		<path
+			class="cls-1"
+			d="M198.31,12.23H180.88v9.84h17.67V30H180.88V41.75h23l-6,9.6h-26.4l.09-1.13-.24.17V9.5l9.27-6.79V2.63h.11l.22-.16v.16h23.43ZM163.68,29.16c-.06.36-.13.79-.23,1.3a24.28,24.28,0,0,1-3,8,25,25,0,0,1-5.41,6.45,25.46,25.46,0,0,1-7.34,4.3,23.88,23.88,0,0,1-8.63,1.57,23.57,23.57,0,0,1-9.56-2,25.27,25.27,0,0,1-7.86-5.3,24.94,24.94,0,0,1-5.33-7.87,24.24,24.24,0,0,1,0-19.19,24.94,24.94,0,0,1,5.33-7.87,25.44,25.44,0,0,1,7.86-5.3,24.23,24.23,0,0,1,16.7-.88,27.11,27.11,0,0,1,6.29,2.91l.85.54a5.24,5.24,0,0,1,.81.65c4.13,2.85,6.31,8.23,6.31,8.23h-9.43a4.33,4.33,0,0,1-.72,0h-.53v-.08a4.56,4.56,0,0,1-1.59-.66L146.4,12.8a17.13,17.13,0,0,0-3.46-1.34,15,15,0,0,0-9.71.69,15.81,15.81,0,0,0-4.8,3.22,15.08,15.08,0,0,0,0,21.43,15.81,15.81,0,0,0,4.8,3.22,14.44,14.44,0,0,0,5.88,1.19,14.88,14.88,0,0,0,4.68-.73,15.06,15.06,0,0,0,4.07-2,14.84,14.84,0,0,0,3.22-3.11,16,16,0,0,0,2.23-4h-6.6l-7.84-9.58h19.74a5.34,5.34,0,0,1,3.72,1.8,5.58,5.58,0,0,1,1.5,3.88V28a.32.32,0,0,1-.08.23A6.79,6.79,0,0,1,163.68,29.16ZM98.33,46.05V36.84H83.21v-.08a3.18,3.18,0,0,1-.85.08l-.83,0V37L64.2,49.16l-2.05,1.52-.07,0L58.75,53V47.45a4.93,4.93,0,0,1-.19-1.4v-20a23.48,23.48,0,0,1,1.54-8.53,25.41,25.41,0,0,1,5.52-8.75,26.37,26.37,0,0,1,7.95-5.45,24.43,24.43,0,0,1,19.27,0A24.79,24.79,0,0,1,106,16.49a23.86,23.86,0,0,1,2,9.6v19.4l-9.54,6.95S98.33,47.38,98.33,46.05Zm0-20a14.69,14.69,0,0,0-1.92-7.38.18.18,0,0,0,0-.11.15.15,0,0,1,0-.12c-.21-.3-.41-.61-.62-.92s-.41-.58-.61-.84A14.83,14.83,0,0,0,83.21,11a14.3,14.3,0,0,0-6.8,1.65A15.84,15.84,0,0,0,71.23,17,15.49,15.49,0,0,0,69,21.17a15,15,0,0,0-.8,4.92V36l14.2-8.74h16ZM51.72,12.93l-.81,4.62,0,.16h0L47,39.92l4.21,18.83L38.23,41.6l3.26-15.8-5.41,5.42a13.08,13.08,0,0,1-4.18,2.84,12.32,12.32,0,0,1-4.94,1,12.61,12.61,0,0,1-5-1,12,12,0,0,1-4.14-2.84L12.14,25.5l3.32,16.1L2.53,58.75,6.75,39.92,2.81,17.71h0l0-.16L2,12.93h.08L0,0,9.5,9.69v0l.61.53L23.78,23.93a4.6,4.6,0,0,0,3.15,1.23A4.52,4.52,0,0,0,30,23.93L44.13,9.72h0L53.69,0l-2,12.93Z" />
+	</svg>
+</div>

src/lib/assets/icons/channel/IconShareScreen.svelte

@@ -1,4 +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 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
-  </svg>
-
+<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 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+</svg>

src/lib/assets/icons/chat/IconChatAI.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.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
+</svg>

src/lib/assets/icons/chat/IconChatStar.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="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+</svg>