v0.1.0

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.17",
+	"version": "0.1.0",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -46,16 +46,18 @@
 		"tailwindcss": "^3.2.7",
 		"tslib": "^2.5.0",
 		"typescript": "^5.0.2",
-		"video.js": "^8.3.0",
 		"vite": "^4.1.4"
 	},
 	"dependencies": {
+		"@event-calendar/core": "^2.0.0",
+		"@event-calendar/time-grid": "^2.0.0",
 		"@neodrag/svelte": "^2.0.3",
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.9",
 		"animate.css": "^4.1.1",
 		"daisyui": "^3.2.1",
 		"emoji-picker-element": "^1.18.1",
+		"moment": "^2.29.4",
 		"nprogress": "^0.2.0",
 		"playwright-e2e-coverage-report": "^1.0.28",
 		"svelte-tags-input": "^5.0.0",

src/lib/WHEPClient.ts

@@ -68,11 +68,19 @@ export default class WHEPClient extends EventTarget {
 				console.log('got unknown track ' + track)
 			}
 
-			if (trackType === 'screen' && track.readyState === 'live') {
-				this.dispatchEvent(new CustomEvent(`isScreenLive`, { detail: true }))
+			if (trackType === 'screen' && track.kind === 'video') {
+				if (track.readyState === 'live') {
+					this.dispatchEvent(new CustomEvent(`isScreenLive`, { detail: true }))
+				} else {
+					this.dispatchEvent(new CustomEvent(`isScreenLive`, { detail: false }))
+				}
 			}
-			if (trackType === 'webcam' && track.readyState === 'live') {
-				this.dispatchEvent(new CustomEvent(`isWebcamLive`, { detail: true }))
+			if (trackType === 'webcam' && track.kind === 'video') {
+				if (track.readyState === 'live') {
+					this.dispatchEvent(new CustomEvent(`isWebcamLive`, { detail: true }))
+				} else {
+					this.dispatchEvent(new CustomEvent(`isWebcamLive`, { detail: false }))
+				}
 			}
 		}
 

src/lib/assets/icons/IconFollowers.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 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+</svg>

src/lib/assets/icons/IconViews.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>

src/lib/assets/icons/social/IconSocialTwitter2.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { current_theme } from '$lib/stores/helperStore'
+	import { onMount } from 'svelte'
+
+	export let customClass = 'w-5'
+
+	let color = '#fff'
+	onMount(() => {
+		current_theme.subscribe((theme) => {
+			switch (theme) {
+				case 'dark':
+				case 'synthwave':
+					color = '#fff'
+					break
+				case 'light':
+				case 'cyberpunk':
+					color = '#000'
+					break
+			}
+		})
+	})
+</script>
+
+<div class={customClass}>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" style="fill: {color};">
+		<path
+			d="M 14.878906 10.582031 L 24.183594 0 L 21.980469 0 L 13.898438 9.1875 L 7.445312 0 L 0 0 L 9.761719 13.890625 L 0 24.988281 L 2.207031 24.988281 L 10.738281 15.285156 L 17.554688 24.988281 L 25 24.988281 Z M 11.859375 14.015625 L 10.867188 12.632812 L 3 1.625 L 6.386719 1.625 L 12.738281 10.507812 L 13.726562 11.890625 L 21.980469 23.4375 L 18.59375 23.4375 Z M 11.859375 14.015625 " />
+	</svg>
+</div>

src/lib/components/Browse/Sections/ItemCarousel.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+	import IconViews from '$lib/assets/icons/IconViews.svelte'
 	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
-	// import IconBrowseItemPlay from '$lib/assets/icons/browse/IconBrowseItemPlay.svelte'
 	import { category_list } from '$lib/stores/channelStore'
+	import { getNumberInThousands } from '$lib/utils'
 
 	export let channel: any = {}
 
@@ -22,14 +23,19 @@
 						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">
+				<div
+					class="tooltip"
+					data-tip="{getNumberInThousands(channel.viewDetails?.count || 0)} views">
+					<span class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none">
+						<IconViews />
+						{getNumberInThousands(channel.viewDetails.count || 0)}
+					</span>
+				</div>
+				<div class="tooltip" data-tip="{getNumberInThousands(channel.memberCount || 0)} watching">
+					<span class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none">
 						<IconViewers />
-						{channel.memberCount || '0'}
-					</label>
+						{getNumberInThousands(channel.memberCount || 0)}
+					</span>
 				</div>
 			</div>
 			<div class="flex flex-wrap">
@@ -42,9 +48,6 @@
 				{/if}
 			</div>
 		</div>
-		<!-- <div class="flex justify-center w-full">
-			<IconBrowseItemPlay />
-		</div> -->
 		<div class="space-y-2">
 			<p class="text-2xl truncate text-white font-semibold">{channel.title || ''}</p>
 			<div class="flex flex-row items-center gap-2">

src/lib/components/Browse/Sections/ItemChannel.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import IconViews from '$lib/assets/icons/IconViews.svelte'
 	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
 	import { category_list } from '$lib/stores/channelStore'
+	import { getNumberInThousands } from '$lib/utils'
 
 	export let channel: any = {}
 </script>
@@ -18,14 +20,19 @@
 						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">
+				<div
+					class="tooltip"
+					data-tip="{getNumberInThousands(channel.viewDetails?.count || 0)} views">
+					<span class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none">
+						<IconViews />
+						{getNumberInThousands(channel.viewDetails?.count || 0)}
+					</span>
+				</div>
+				<div class="tooltip" data-tip="{getNumberInThousands(channel.memberCount || 0)} watching">
+					<span class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none">
 						<IconViewers />
-						{channel.memberCount || '0'}
-					</label>
+						{getNumberInThousands(channel.memberCount || 0)}
+					</span>
 				</div>
 			</div>
 			<div class="flex flex-wrap">

src/lib/components/Browse/Sections/ItemTable.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import IconViews from '$lib/assets/icons/IconViews.svelte'
 	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
 	import { goto } from '$app/navigation'
 	import { category_list } from '$lib/stores/channelStore'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
+	import { getNumberInThousands } from '$lib/utils'
 	export let channel: any = {}
 </script>
 
@@ -38,9 +40,19 @@
 		</div>
 	</td>
 	<td>
-		<div class="flex gap-2 my-3">
-			<IconViewers />
-			<span>{channel.memberCount || '0'}</span>
+		<div class="flex gap-4">
+			<div
+				class="flex gap-2 my-3 tooltip"
+				data-tip="{getNumberInThousands(channel.viewDetails?.count || 0)} views">
+				<IconViews />
+				<span>{getNumberInThousands(channel.viewDetails?.count || 0)}</span>
+			</div>
+			<div
+				class="flex gap-2 my-3 tooltip"
+				data-tip="{getNumberInThousands(channel.memberCount || 0)} watching">
+				<IconViewers />
+				<span>{getNumberInThousands(channel?.memberCount || 0)}</span>
+			</div>
 		</div>
 	</td>
 	<td>

src/lib/components/Channel/Chat/DropdownViewChannel.svelte

@@ -19,6 +19,16 @@
 		isFollowing: boolean = false,
 		isFavorite: boolean = false
 
+	onMount(async () => {
+		if ($page.data.user?.userId) {
+			const favorites = await get(`favorites?channelId=${channel._id}`, {
+				userId: $page.data.user?.userId,
+				token: $page.data.user?.token
+			})
+			isFavorite = favorites?.length > 0
+		}
+	})
+
 	const getHostRelationship = async () => {
 		isHost = channel.user === $page?.data?.user?.userId
 		if ($page.data.user?.userId) {
@@ -30,10 +40,6 @@
 		}
 	}
 
-	onMount(async () => {
-		isFavorite = $page.data.user?.user?.favChannelIds?.includes(channel._id)
-	})
-
 	const toggleFollow = async () => {
 		isFollowing = !isFollowing
 		if (isFollowing) {
@@ -54,12 +60,12 @@
 		isFavorite = !isFavorite
 		if (isFavorite) {
 			await put(
-				`users/channel?channelId=${channel._id}`,
+				`favorite?channelId=${channel._id}`,
 				{},
 				{ userId: $page.data.user?.userId, token: $page.data.user?.token }
 			)
 		} else {
-			await del(`users/channel?channelId=${channel._id}`, {
+			await del(`favorites?channelId=${channel._id}`, {
 				userId: $page.data.user?.userId,
 				token: $page.data.user?.token
 			})