From 2ad9a9bd3e0cb93db1dd970b2fd4d957bef12d2c Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Sun, 5 Feb 2023 00:53:54 -0500 Subject: [PATCH 01/11] fix form and responsive --- .../components/Browse/CreateChannelDrawer.svelte | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/lib/components/Browse/CreateChannelDrawer.svelte b/src/lib/components/Browse/CreateChannelDrawer.svelte index 599f1cd4..bf78f718 100644 --- a/src/lib/components/Browse/CreateChannelDrawer.svelte +++ b/src/lib/components/Browse/CreateChannelDrawer.svelte @@ -78,11 +78,11 @@ bind:categoryIcons bind:categories={newChannel.category} /> {:else} -
-

- Create a new channel -

-
addChannel()}> + addChannel()}> +
+

+ Create a new channel +

When you create a channel, you may allow viewer's to observe your desktop as you host @@ -176,8 +176,8 @@ >Cancel

- -
+
+ {/if} From d6bf860e174d8d70777ea2b1dedbdb25ae1ee7d5 Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Sun, 5 Feb 2023 01:20:10 -0500 Subject: [PATCH 02/11] fix loading sections --- src/lib/components/Browse/Sections/ChannelSection.svelte | 6 ++++-- src/lib/components/Browse/Sections/UserSection.svelte | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/lib/components/Browse/Sections/ChannelSection.svelte b/src/lib/components/Browse/Sections/ChannelSection.svelte index a785a01e..dc3d8252 100644 --- a/src/lib/components/Browse/Sections/ChannelSection.svelte +++ b/src/lib/components/Browse/Sections/ChannelSection.svelte @@ -30,8 +30,10 @@ } -{#if !channels.error} -
+{#if channels && !channels.error} +
{#if channels && channels.length}
{title} diff --git a/src/lib/components/Browse/Sections/UserSection.svelte b/src/lib/components/Browse/Sections/UserSection.svelte index 31d961ab..0dcdd55d 100644 --- a/src/lib/components/Browse/Sections/UserSection.svelte +++ b/src/lib/components/Browse/Sections/UserSection.svelte @@ -30,8 +30,8 @@ } -{#if !users.error} -
+{#if users && !users.error} +
{#if users && users.length}
{title} From 8467b7e47b2dca3545052451aff5c89c3a01636a Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Sun, 5 Feb 2023 01:27:05 -0500 Subject: [PATCH 03/11] fix carousela nd table loading --- .../Browse/Sections/CarouselSection.svelte | 4 +- .../Browse/Sections/LoadingTableItem.svelte | 54 +++++++++---------- .../Browse/Sections/TableSection.svelte | 12 +++-- 3 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/lib/components/Browse/Sections/CarouselSection.svelte b/src/lib/components/Browse/Sections/CarouselSection.svelte index 2caf1883..9ddcb2ad 100644 --- a/src/lib/components/Browse/Sections/CarouselSection.svelte +++ b/src/lib/components/Browse/Sections/CarouselSection.svelte @@ -9,7 +9,7 @@ let ref: any, showback = false - $: channels = channels + $: channels = channels.splice(0, 5) const prev = () => { if (ref) { @@ -46,7 +46,6 @@ bind:this={ref} class="carousel-content relative w-full flex gap-6 snap-x snap-mandatory overflow-x-auto pt-14 flex-grow"> {#if channels && channels.length} -
{#each channels as channel}
@@ -67,7 +66,6 @@
{/each} -
{:else}
{#each Array(6) as _, index (index)} diff --git a/src/lib/components/Browse/Sections/LoadingTableItem.svelte b/src/lib/components/Browse/Sections/LoadingTableItem.svelte index 0ef17cd3..bd74e28a 100644 --- a/src/lib/components/Browse/Sections/LoadingTableItem.svelte +++ b/src/lib/components/Browse/Sections/LoadingTableItem.svelte @@ -1,27 +1,27 @@ - - -
- Loading... -
- - -
- Loading... -
- - -
- Loading... -
- - -
- Loading... -
- - -
- Loading... -
- - + + +
+ Loading... +
+ + +
+ Loading... +
+ + +
+ Loading... +
+ + +
+ Loading... +
+ + +
+ Loading... +
+ + diff --git a/src/lib/components/Browse/Sections/TableSection.svelte b/src/lib/components/Browse/Sections/TableSection.svelte index e1e28407..e9fadec3 100644 --- a/src/lib/components/Browse/Sections/TableSection.svelte +++ b/src/lib/components/Browse/Sections/TableSection.svelte @@ -76,12 +76,14 @@ {/each} {:else} -
- {#each Array(6) as _, index (index)} + + {#each Array(5) as _, index (index)} + - {/each} - Loading... -
+ + {/each} + Loading... + {/if} From 0dccc1b29440787d01104842feb8ca3672f600be Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Mon, 6 Feb 2023 05:42:51 -0500 Subject: [PATCH 04/11] swiper installed --- package.json | 1 + .../Browse/Sections/CarouselSection.svelte | 77 +++++++++++++------ src/routes/browse/+page.server.ts | 39 ++++++++-- src/routes/browse/+page.svelte | 6 +- 4 files changed, 91 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 88ae17d7..4d7b36ed 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "svelte-preprocess": "^5.0.1", "svelte-tags-input": "^4.0.0", "svgo": "^3.0.2", + "swiper": "^9.0.2", "tailwind-clip-path": "^1.0.0", "tailwind-scrollbar": "^2.1.0", "tailwindcss": "^3.2.4", diff --git a/src/lib/components/Browse/Sections/CarouselSection.svelte b/src/lib/components/Browse/Sections/CarouselSection.svelte index 9ddcb2ad..8c1fe68f 100644 --- a/src/lib/components/Browse/Sections/CarouselSection.svelte +++ b/src/lib/components/Browse/Sections/CarouselSection.svelte @@ -3,15 +3,24 @@ import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte' import { goto } from '$app/navigation' import LoadingCarouselItem from '$lib/components/Browse/Sections/LoadingCarouselItem.svelte' + import { onMount } from 'svelte' + import Swiper, { Navigation } from 'swiper' + + import 'swiper/css' export let channels: any = [] let ref: any, showback = false - $: channels = channels.splice(0, 5) + $: channels = channels.splice(0, 6) const prev = () => { + if (swiper) { + swiper.slidePrev() + } + return + if (ref) { showback = ref.scrollLeft > 500 ref.scrollTo({ @@ -20,16 +29,37 @@ }) } } - + $: console.log(channels) const next = () => { + if (swiper) { + swiper.slideNext() + } + return + if (ref) { showback = true ref.scrollTo({ left: ref.scrollLeft + 500, behavior: 'smooth' }) + channels.push(channels[0]) + channels.shift() + channels = channels } } + let swiper: Swiper + + onMount(() => { + swiper = new Swiper('.mySwiper', { + slidesPerView: 3, + loop: true, + modules: [Navigation], + navigation: { + nextEl: '.btn-next', + prevEl: '.btn-prev' + } + }) + }) {#if !channels.error} @@ -37,35 +67,36 @@
+ class="bg-base-200 rounded-full p-3 btn-prev absolute top-2/4 left-1 z-10 cursor-pointer" + on:click={() => prev()}>
+ class="carousel-content relative w-full flex gap-6 snap-x snap-mandatory overflow-x-auto pt-14 flex-grow swiper mySwiper"> {#if channels && channels.length} - {#each channels as channel} -
- -
goto(`/channel/${channel._id}`)}> -
-
-
- +
+ {#each channels as channel} +
+
goto(`/channel/${channel._id}`)}> +
+
+
+ +
+
+
+

{channel.title}

+

{channel.description}

-
-
-

{channel.title}

-

{channel.description}

-
- {/each} + {/each} +
{:else}
{#each Array(6) as _, index (index)} @@ -77,9 +108,7 @@
-
+
diff --git a/src/routes/browse/+page.server.ts b/src/routes/browse/+page.server.ts index a391dc66..4ac2b00b 100644 --- a/src/routes/browse/+page.server.ts +++ b/src/routes/browse/+page.server.ts @@ -3,12 +3,20 @@ import type { PageServerLoad } from './$types' import { get } from '$lib/api' export const load = (async ({ params }) => { - const mostActiveChannels = await get(`/channels/most-active?skip=${0}&limit=${5}`) - const weeklyChannels = await get(`/channels/weekly?skip=${0}&limit=${10}`) - const highestRankedUsers = await get(`/users/highest-ranked?skip=${0}&limit=${10}`) - const risingStarUsers = await get(`/users/rising-stars?skip=${0}&limit=${10}`) - const myChannels = await get(`/channels/me/hosted?skip=${0}&limit=${10}`) - const favChannels = await get(`/channels/me/fav?skip=${0}&limit=${10}`) + // const mostActiveChannels = await get(`/channels/most-active?skip=${0}&limit=${5}`) + // const weeklyChannels = await get(`/channels/weekly?skip=${0}&limit=${10}`) + // const highestRankedUsers = await get(`/users/highest-ranked?skip=${0}&limit=${10}`) + // const risingStarUsers = await get(`/users/rising-stars?skip=${0}&limit=${10}`) + // const myChannels = await get(`/channels/me/hosted?skip=${0}&limit=${10}`) + // const favChannels = await get(`/channels/me/fav?skip=${0}&limit=${10}`) + + const mostActiveChannels: any = [] + const weeklyChannels: any = [] + const highestRankedUsers: any = [] + const risingStarUsers: any = [] + const myChannels: any = [] + const favChannels: any = [] + const tableChannels = await get(`/channels?searchQuery=&skip=${0}&limit=${50}`) return { @@ -23,3 +31,22 @@ export const load = (async ({ params }) => { } } }) satisfies PageServerLoad + +// const mostActiveChannels = await get(`/channels/most-active?skip=${0}&limit=${5}`) +// const weeklyChannels = await get(`/channels/weekly?skip=${0}&limit=${10}`) +// const highestRankedUsers = await get(`/users/highest-ranked?skip=${0}&limit=${10}`) +// const risingStarUsers = await get(`/users/rising-stars?skip=${0}&limit=${10}`) +// const myChannels = await get(`/channels/me/hosted?skip=${0}&limit=${10}`) +// const favChannels = await get(`/channels/me/fav?skip=${0}&limit=${10}`) +// const tableChannels = await get(`/channels?searchQuery=&skip=${0}&limit=${50}`) + +// return { +// post: { +// mostActiveChannels: await get(`/channels/most-active?skip=${0}&limit=${5}`), +// weeklyChannels: await get(`/channels/weekly?skip=${0}&limit=${10}`), +// highestRankedUsers: await get(`/users/highest-ranked?skip=${0}&limit=${10}`), +// risingStarUsers: await get(`/users/rising-stars?skip=${0}&limit=${10}`), +// myChannels: await get(`/channels/me/hosted?skip=${0}&limit=${10}`), +// favChannels: await get(`/channels/me/fav?skip=${0}&limit=${10}`), +// tableChannels: await get(`/channels?searchQuery=&skip=${0}&limit=${50}`) +// } diff --git a/src/routes/browse/+page.svelte b/src/routes/browse/+page.svelte index 128b8dab..c91f11a7 100644 --- a/src/routes/browse/+page.svelte +++ b/src/routes/browse/+page.svelte @@ -13,8 +13,10 @@ let weeklyTitle = 'Weekly topics' let weeklyChannels: any = [] if (!data.post.weeklyChannels.error) { - weeklyTitle = `Wk${data.post.weeklyChannels.weekly.weekNumber} ${data.post.weeklyChannels.weekly.topic}` + // weeklyTitle = `Wk${data.post.weeklyChannels.weekly.weekNumber} ${data.post.weeklyChannels.weekly.topic}` + weeklyTitle = 'Week' weeklyChannels = data.post.weeklyChannels.channels + console.log(weeklyChannels) } else { weeklyChannels = data.post.weeklyChannels.error } @@ -26,7 +28,7 @@ }) - + From 3d0451eb5159e40aae7c8667be5270cc1926d5e9 Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Mon, 6 Feb 2023 06:59:04 -0500 Subject: [PATCH 05/11] carousel using swiper --- .../Browse/Sections/CarouselSection.svelte | 95 +++++++++---------- 1 file changed, 45 insertions(+), 50 deletions(-) diff --git a/src/lib/components/Browse/Sections/CarouselSection.svelte b/src/lib/components/Browse/Sections/CarouselSection.svelte index 8c1fe68f..13e5b85a 100644 --- a/src/lib/components/Browse/Sections/CarouselSection.svelte +++ b/src/lib/components/Browse/Sections/CarouselSection.svelte @@ -10,48 +10,14 @@ export let channels: any = [] - let ref: any, - showback = false + let swiper: Swiper $: channels = channels.splice(0, 6) - const prev = () => { - if (swiper) { - swiper.slidePrev() - } - return - - if (ref) { - showback = ref.scrollLeft > 500 - ref.scrollTo({ - left: ref.scrollLeft - 500, - behavior: 'smooth' - }) - } - } - $: console.log(channels) - const next = () => { - if (swiper) { - swiper.slideNext() - } - return - - if (ref) { - showback = true - ref.scrollTo({ - left: ref.scrollLeft + 500, - behavior: 'smooth' - }) - channels.push(channels[0]) - channels.shift() - channels = channels - } - } - let swiper: Swiper - onMount(() => { - swiper = new Swiper('.mySwiper', { + swiper = new Swiper('.carousel', { slidesPerView: 3, + spaceBetween: 15, loop: true, modules: [Navigation], navigation: { @@ -64,15 +30,11 @@ {#if !channels.error}
- -
prev()}> +
- -
{#if channels && channels.length} @@ -105,6 +67,38 @@ Loading...
{/if} +
--> + +
+ {#if channels && channels.length} +
+ {#each channels as channel} + +
goto(`/channel/${channel._id}`)}> +
+
+
+ +
+
+
+

{channel.title}

+

{channel.description}

+
+
+
+ {/each} +
+ {:else} +
+ {#each Array(5) as _, index (index)} + + {/each} + Loading... +
+ {/if}
@@ -115,15 +109,16 @@ {/if} From 20a5deb007636e6cbd5a60b584a2163e9ee17cea Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Mon, 6 Feb 2023 07:06:54 -0500 Subject: [PATCH 06/11] break points --- .../components/Browse/Sections/CarouselSection.svelte | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/lib/components/Browse/Sections/CarouselSection.svelte b/src/lib/components/Browse/Sections/CarouselSection.svelte index 13e5b85a..482383fb 100644 --- a/src/lib/components/Browse/Sections/CarouselSection.svelte +++ b/src/lib/components/Browse/Sections/CarouselSection.svelte @@ -23,6 +23,17 @@ navigation: { nextEl: '.btn-next', prevEl: '.btn-prev' + }, + breakpoints: { + 320: { + slidesPerView: 1 + }, + 480: { + slidesPerView: 2 + }, + 800: { + slidesPerView: 3 + } } }) }) From acab43807eac3c9eee34f21ed4d23b8c52182457 Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Mon, 6 Feb 2023 07:13:57 -0500 Subject: [PATCH 07/11] set width --- src/lib/components/Browse/Sections/CarouselSection.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Browse/Sections/CarouselSection.svelte b/src/lib/components/Browse/Sections/CarouselSection.svelte index 482383fb..f1d62b30 100644 --- a/src/lib/components/Browse/Sections/CarouselSection.svelte +++ b/src/lib/components/Browse/Sections/CarouselSection.svelte @@ -88,13 +88,13 @@
goto(`/channel/${channel._id}`)}> -
+
-
+

{channel.title}

{channel.description}

From 1673220f4c7c4cf622f0dc852378320c07a14892 Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Mon, 6 Feb 2023 07:15:18 -0500 Subject: [PATCH 08/11] make responsive --- src/lib/components/Browse/Sections/CarouselSection.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Browse/Sections/CarouselSection.svelte b/src/lib/components/Browse/Sections/CarouselSection.svelte index f1d62b30..24d58e88 100644 --- a/src/lib/components/Browse/Sections/CarouselSection.svelte +++ b/src/lib/components/Browse/Sections/CarouselSection.svelte @@ -95,7 +95,7 @@
-

{channel.title}

+

{channel.title}

{channel.description}

From d1aae690f71dadcc49449e1d19884784459dc53d Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Mon, 6 Feb 2023 07:29:37 -0500 Subject: [PATCH 09/11] fix loading state --- .../Browse/Sections/CarouselSection.svelte | 27 +++++++++---------- src/routes/browse/+page.svelte | 5 ++-- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/lib/components/Browse/Sections/CarouselSection.svelte b/src/lib/components/Browse/Sections/CarouselSection.svelte index 24d58e88..048bb11f 100644 --- a/src/lib/components/Browse/Sections/CarouselSection.svelte +++ b/src/lib/components/Browse/Sections/CarouselSection.svelte @@ -8,7 +8,7 @@ import 'swiper/css' - export let channels: any = [] + export let channels: any = undefined let swiper: Swiper @@ -40,7 +40,7 @@ {#if !channels.error} -
+
@@ -80,8 +80,8 @@ {/if}
--> -
- {#if channels && channels.length} + {#if channels && channels.length} +
{#each channels as channel} @@ -102,16 +102,15 @@
{/each}
- {:else} -
- {#each Array(5) as _, index (index)} - - {/each} - Loading... -
- {/if} -
- +
+ {:else} +
+ {#each Array(5) as _, index (index)} + + {/each} + Loading... +
+ {/if}
diff --git a/src/routes/browse/+page.svelte b/src/routes/browse/+page.svelte index 688d0b6d..d271df09 100644 --- a/src/routes/browse/+page.svelte +++ b/src/routes/browse/+page.svelte @@ -15,9 +15,8 @@ let weeklyChannels: any = [] if (!data.post.weeklyChannels.error) { // weeklyTitle = `Wk${data.post.weeklyChannels.weekly.weekNumber} ${data.post.weeklyChannels.weekly.topic}` - weeklyTitle = 'Week' + weeklyTitle = 'Weekly topics' weeklyChannels = data.post.weeklyChannels.channels - console.log(weeklyChannels) } else { weeklyChannels = data.post.weeklyChannels.error } @@ -29,7 +28,7 @@ }) - + From aeb58bac6eb478ebc4e6e625fe5d9c6b8d78fd0e Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Mon, 6 Feb 2023 07:30:45 -0500 Subject: [PATCH 10/11] temporary data passing --- src/routes/browse/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/browse/+page.svelte b/src/routes/browse/+page.svelte index d271df09..5a060f2a 100644 --- a/src/routes/browse/+page.svelte +++ b/src/routes/browse/+page.svelte @@ -28,7 +28,7 @@ }) - + From dd6720cd7a38f675f3c7036baa71522ac6749cdd Mon Sep 17 00:00:00 2001 From: Kawsar Ahmed Date: Mon, 6 Feb 2023 07:33:10 -0500 Subject: [PATCH 11/11] removed unused --- src/lib/components/Browse/Sections/CarouselSection.svelte | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/lib/components/Browse/Sections/CarouselSection.svelte b/src/lib/components/Browse/Sections/CarouselSection.svelte index 048bb11f..63d1a128 100644 --- a/src/lib/components/Browse/Sections/CarouselSection.svelte +++ b/src/lib/components/Browse/Sections/CarouselSection.svelte @@ -119,14 +119,9 @@ {/if}