Merge pull request #752 from CodeCrowCorp/dev

v0.1.05

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.1.04",
+	"version": "0.1.05",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

src/lib/assets/icons/channel/IconChatDrawerChevronClose.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="swap-on w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
+</svg>

src/lib/assets/icons/channel/IconChatDrawerChevronOpen.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="swap-off w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
+</svg>

src/lib/assets/icons/channel/IconShare.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="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
+</svg>

src/lib/assets/icons/drawer/IconDrawerBrand.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="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
+	<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
+</svg>

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

@@ -9,6 +9,7 @@
 	import { del, get, put } from '$lib/api'
 	import { createEffect } from '$lib/utils'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
+	import IconShare from '$lib/assets/icons/channel/IconShare.svelte'
 
 	export let channel: any = undefined,
 		showEditChannelDrawer: boolean = false
@@ -74,6 +75,14 @@
 	$: useEffect(() => {
 		getHostRelationship()
 	}, [channel?._id])
+
+	let copyText = 'Share'
+	const changeCopyText = () => {
+		copyText = 'Copied!'
+		setTimeout(() => {
+			copyText = 'Share'
+		}, 1000)
+	}
 </script>
 
 <div class="menu dropdown dropdown-bottom z-10">
@@ -160,11 +169,20 @@
 			<div class="grid grid-cols-5 gap-2">
 				<label
 					for="edit-channel-drawer"
-					class="btn btn-neutral text-white col-span-4 flex tooltip font-normal normal-case"
+					class="btn btn-neutral text-white col-span-3 flex tooltip font-normal normal-case"
 					data-tip="Edit channel"
 					on:click={() => (showEditChannelDrawer = true)}>
 					Edit channel
 				</label>
+				<label
+					class="btn col-span-1 text-white border-none tooltip tooltip-top font-normal normal-case btn-neutral flex"
+					data-tip={copyText}
+					on:click={() => {
+						copyToClipboard($page.url.toString())
+						changeCopyText()
+					}}>
+					<IconShare />
+				</label>
 				<label
 					for="modal-delete-channel"
 					class="btn col-span-1 bg-error text-black hover:text-white border-none font-normal normal-case tooltip tooltip-left tooltip-error flex"
@@ -178,11 +196,20 @@
 					disabled={!$page.data.user?.userId}
 					class="btn btn-secondary {isFollowing
 						? 'btn-outline'
-						: ''} col-span-4 normal-case tooltip tooltip-top flex"
+						: ''} col-span-3 normal-case tooltip tooltip-top flex"
 					data-tip={isFollowing ? 'Unfollow host' : 'Follow host'}
 					on:click={() => toggleFollow()}>
 					{isFollowing ? 'Unfollow' : 'Follow'}
 				</button>
+				<label
+					class="btn col-span-1 text-white border-none tooltip tooltip-top font-normal normal-case btn-neutral flex"
+					data-tip={copyText}
+					on:click={() => {
+						copyToClipboard($page.url.toString())
+						changeCopyText()
+					}}>
+					<IconShare />
+				</label>
 				<button
 					disabled={!$page.data.user?.userId}
 					class="btn btn-neutral col-span-1 {isFavorite

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

@@ -6,7 +6,7 @@
 	import IconChatDelete from '$lib/assets/icons/chat/IconChatDelete.svelte'
 	import IconChatHorizontalMore from '$lib/assets/icons/chat/IconChatHorizontalMore.svelte'
 	import { emitChannelUpdate, emitDeleteMessageToChannel } from '$lib/websocket'
-	import { copyToClipboard, getColoredRole, setRole } from '$lib/utils'
+	import { getColoredRole, setRole } from '$lib/utils'
 	import { page } from '$app/stores'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
 	import { onMount } from 'svelte'
@@ -91,10 +91,6 @@
 		})
 	}
 
-	const copy = () => {
-		copyToClipboard(sender.message)
-	}
-
 	const isImage = (message: string = '') => {
 		// if message is a url and url is of an image
 		const str = message.split('?')[0] || ''
@@ -158,10 +154,10 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<ul class="menu" on:click={copy}>
-	<li class="group relative">
+<div class="menu hover:bg-base-300 rounded-md group">
+	<div class="relative m-1">
 		<!--Host, Mod, You or Rando-->
-		<div class="p-1 border border-transparent rounded-lg gap-2">
+		<div class="border border-transparent rounded-lg gap-2 flex">
 			<!-- svelte-ignore a11y-label-has-associated-control -->
 			<label style="text-wrap:wrap">
 				{#if role === '🤖 AI' || role === 'Host' || role === 'Mod' || role === 'You'}
@@ -196,51 +192,50 @@
 					<span style="overflow-wrap: anywhere">{@html parse(sender.message)}</span>
 				{/if}
 			</label>
-
-			<div
-				class="group-hover:block dropdown-menu absolute hidden right-0 dropdown dropdown-left dropdown-end"
-				tabindex="1">
-				<div class="rounded-lg bg-base-200 m-1 border-base-100 border-2">
-					<IconChatHorizontalMore />
-				</div>
-				<ul tabindex="1" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52 z-10">
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<li class="disabled"><a><IconChatReact /> React </a></li>
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<li class="disabled"><a><IconChatQuote /> Quote </a></li>
-					{#if showRoleItem && !channel.bans.includes(sender.user?.userId)}
-						<li>
-							<!-- svelte-ignore a11y-missing-attribute -->
-							<a on:click={() => toggleMod()}
-								><IconChatMod /> {role === 'Mod' ? 'Revoke Mod' : 'Grant Mod'}
-							</a>
-						</li>
-						<li>
-							<!-- svelte-ignore a11y-missing-attribute -->
-							<a on:click={() => toggleGuest()}
-								><IconChatGuest /> {isGuest ? 'Revoke Guest' : 'Grant Guest'}
-							</a>
-						</li>
-					{/if}
-					{#if showBanItem}
-						<li>
-							<!-- svelte-ignore a11y-missing-attribute -->
-							<a on:click={() => toggleBan()}
-								><IconChatBan /> {channel.bans?.includes(sender.user?.userId) ? 'Unban' : 'Ban'}
-							</a>
-						</li>
-					{/if}
-					{#if hostId === $page.data.user?.userId || sender.user?.userId === $page.data.user?.userId}
-						<li>
-							<!-- svelte-ignore a11y-missing-attribute -->
-							<a on:click={() => deleteMessage()}><IconChatDelete /> Delete</a>
-						</li>
-					{/if}
-				</ul>
+		</div>
+		<div
+			class="group-hover:block dropdown-menu absolute hidden right-0 dropdown dropdown-left dropdown-end"
+			tabindex="1">
+			<div class="rounded-lg bg-base-300 m-1 border-base-100 border-2">
+				<IconChatHorizontalMore />
 			</div>
+			<ul tabindex="1" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52 z-10">
+				<!-- svelte-ignore a11y-missing-attribute -->
+				<li class="disabled"><a><IconChatReact /> React </a></li>
+				<!-- svelte-ignore a11y-missing-attribute -->
+				<li class="disabled"><a><IconChatQuote /> Quote </a></li>
+				{#if showRoleItem && !channel.bans.includes(sender.user?.userId)}
+					<li>
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<a on:click={() => toggleMod()}
+							><IconChatMod /> {role === 'Mod' ? 'Revoke Mod' : 'Grant Mod'}
+						</a>
+					</li>
+					<li>
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<a on:click={() => toggleGuest()}
+							><IconChatGuest /> {isGuest ? 'Revoke Guest' : 'Grant Guest'}
+						</a>
+					</li>
+				{/if}
+				{#if showBanItem}
+					<li>
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<a on:click={() => toggleBan()}
+							><IconChatBan /> {channel.bans?.includes(sender.user?.userId) ? 'Unban' : 'Ban'}
+						</a>
+					</li>
+				{/if}
+				{#if hostId === $page.data.user?.userId || sender.user?.userId === $page.data.user?.userId}
+					<li>
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<a on:click={() => deleteMessage()}><IconChatDelete /> Delete</a>
+					</li>
+				{/if}
+			</ul>
 		</div>
-	</li>
-</ul>
+	</div>
+</div>
 
 <style>
 	a.disabled {

src/lib/components/Channel/Stream/StreamContainer.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
+	import IconChatDrawerChevronOpen from '$lib/assets/icons/channel/IconChatDrawerChevronOpen.svelte'
+	import IconChatDrawerChevronClose from '$lib/assets/icons/channel/IconChatDrawerChevronClose.svelte'
 	import IconViews from '$lib/assets/icons/IconViews.svelte'
 	import StreamControls from '$lib/components/Channel/Stream/StreamControls.svelte'
 	import DropdownViewers from '$lib/components/Channel/Stream/DropdownViewers.svelte'
@@ -14,6 +16,11 @@
 		is_sharing_webcam
 	} from '$lib/stores/streamStore'
 	import { getNumberInThousands } from '$lib/utils'
+	import {
+		is_chat_drawer_open,
+		is_chat_drawer_destroy,
+		was_chat_drawer_closed
+	} from '$lib/stores/channelStore'
 
 	const dispatch = createEventDispatcher()
 	export let userCount: number = 1,
@@ -48,6 +55,24 @@
 
 		return { destroy: () => observer.disconnect() }
 	}
+
+	$: handleChatDrawer()
+
+	const handleChatDrawer = () => {
+		if ($is_chat_drawer_open) {
+			$is_chat_drawer_open = false
+			$was_chat_drawer_closed = true
+			setTimeout(() => {
+				$is_chat_drawer_destroy = true
+			}, 300)
+			return
+		}
+
+		$is_chat_drawer_destroy = false
+		setTimeout(() => {
+			$is_chat_drawer_open = !$is_chat_drawer_open
+		}, 100)
+	}
 </script>
 
 <div class="flex justify-center h-full">
@@ -60,8 +85,8 @@
 			? 'overflow-y-hidden'
 			: ''}">
 		{#each channels as nextchannel}
-			<div class="carousel-item h-full p-3" id={nextchannel?._id} use:autoActive>
-				<div class="flex flex-col w-full">
+			<div class="carousel-item h-full" id={nextchannel?._id} use:autoActive>
+				<div class="flex flex-col w-full m-3">
 					<div class="flex gap-2 mb-3">
 						<span
 							class="btn btn-sm btn-neutral font-medium text-white border-none flex items-center {channel
@@ -90,6 +115,11 @@
 							</label>
 							<DropdownViewers {channel} bind:viewers />
 						</div>
+						<label class="swap swap-rotate ml-auto">
+							<input type="checkbox" bind:checked={$is_chat_drawer_open} />
+							<IconChatDrawerChevronOpen />
+							<IconChatDrawerChevronClose />
+						</label>
 					</div>
 					{#if channel && nextchannel?._id === $page.params.channelId}
 						<VideoGrid bind:channel />
@@ -98,8 +128,7 @@
 			</div>
 		{/each}
 	</div>
-
-	<div class="absolute lg:bottom-0 bottom-10 m-7 w-full items-center justify-center flex">
+	<div class="absolute lg:bottom-0 bottom-10 m-3 w-full items-center justify-center flex">
 		<StreamControls bind:isHostOrGuest bind:channel bind:isScrollable />
 	</div>
 </div>