Merge pull request #749 from gagansuie/dev

Fix: scrolling through channels issue
CodeCrowCorp · Oct 17, 2023 · bdc5b92 · bdc5b92
2 parents c1471c9 + ab068fd
commit bdc5b92
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 35 deletions.
diff --git a/src/lib/assets/icons/channel/IconChatDrawerChevronClose.svelte b/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>
diff --git a/src/lib/assets/icons/channel/IconChatDrawerChevronOpen.svelte b/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>
diff --git a/src/lib/assets/icons/channel/IconShare.svelte b/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>
diff --git a/src/lib/components/Channel/Chat/DropdownViewChannel.svelte b/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"
@@ -183,6 +201,12 @@
 					on:click={() => toggleFollow()}>
 					{isFollowing ? 'Unfollow' : 'Follow'}
 				</button>
+				<button
+					class="btn text-white border-none tooltip tooltip-bottom font-normal normal-case btn-neutral"
+					data-tip="Share"
+					on:click={() => copyToClipboard($page.url.toString())}>
+					<IconShare />
+				</button>
 				<button
 					disabled={!$page.data.user?.userId}
 					class="btn btn-neutral col-span-1 {isFavorite

diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/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,7 +128,6 @@
 			</div>
 		{/each}
 	</div>
-
 	<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>

diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
+	import IconShare from '$lib/assets/icons/channel/IconShare.svelte'
 	import IconShareScreen from '$lib/assets/icons/channel/IconShareScreen.svelte'
 	import IconShareWebcam from '$lib/assets/icons/channel/IconShareWebcam.svelte'
 	import IconShareAudio from '$lib/assets/icons/channel/IconShareAudio.svelte'
-	import IconChatDrawer from '$lib/assets/icons/channel/IconChatDrawer.svelte'
-	import {
-		is_chat_drawer_open,
-		is_chat_drawer_destroy,
-		was_chat_drawer_closed
-	} from '$lib/stores/channelStore'
 	import { del, post, put } from '$lib/api'
 	import { page } from '$app/stores'
 	import { emitAction } from '$lib/websocket'
@@ -39,22 +34,6 @@
 
 	let subcriptions: any[] = []
 
-	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)
-	}
-
 	const createLiveInput = async (trackData: any) => {
 		return await put(`live-input`, trackData, {
 			userId: $page.data.user?.userId,
@@ -437,15 +416,6 @@
 				<IconRestream />
 			</button>
 		{/if}
-
-		<button
-			class="btn text-white border-none tooltip font-normal normal-case {$is_chat_drawer_open
-				? 'btn-primary'
-				: 'btn-neutral'}"
-			data-tip="Chat"
-			on:click={() => handleChatDrawer()}>
-			<IconChatDrawer />
-		</button>
 	</div>
 </div>
 <input