Merge pull request #1275 from CodeCrowCorp/dev

Feat: added horizontal vods list to channel page
CodeCrowCorp · May 28, 2024 · a948b7d · a948b7d
2 parents 95ff4a0 + cececca
commit a948b7d
Show file tree

Hide file tree

Showing 8 changed files with 178 additions and 83 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.2.17",
+	"version": "0.3.0",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

diff --git a/src/lib/components/Channel/Stream/DialogVod.svelte b/src/lib/components/Channel/Stream/DialogVod.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { is_vod_modal_open } from '$lib/stores/channelStore'
+	import { getTimeFormat, timeSince } from '$lib/utils'
+
+	export let vod: any
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class="modal {$is_vod_modal_open ? 'modal-open' : ''}"
+	on:click={() => {
+		$is_vod_modal_open = false
+		vod = null
+	}}>
+	<div
+		class="modal-box w-11/12 h-full max-w-[1500px] overflow-hidden"
+		on:click={(e) => {
+			e.stopPropagation()
+		}}>
+		<form method="dialog">
+			<button
+				class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+				on:click={() => {
+					$is_vod_modal_open = false
+					vod = null
+				}}>✕</button>
+		</form>
+		<h3 class="font-bold text-lg">@{vod?.username}</h3>
+		{timeSince(vod?.createdAt)}
+		<iframe
+			src={vod?.url}
+			class="w-full h-full max-w-full max-h-full"
+			allow="fullscreen"
+			title="vod"></iframe>
+	</div>
+</div>
diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -24,6 +24,7 @@
 	import { is_feature_premium_enabled } from '$lib/stores/remoteConfigStore'
 	import DropdownSponsors from '$lib/components/Channel/Stream/DropdownSponsors.svelte'
 	import IconChatSponsor from '$lib/assets/icons/chat/IconChatSponsor.svelte'
+	import VodList from './VodList.svelte'
 
 	const dispatch = createEventDispatcher()
 	export let userCount: number = 1,
@@ -159,6 +160,7 @@
 					</div>
 					{#if channel && nextchannel?._id === parseInt($page.params.channelId)}
 						<VideoGrid bind:channel />
+						<VodList channelId={channel._id} />
 					{/if}
 				</div>
 			</div>

diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -82,7 +82,7 @@
 				trackType,
 				liveInput: {
 					meta: {
-						name: `${$page.params.channelId}-${$page.data.user?.userId}-webrtc-${trackType}`
+						name: $page.params.channelId
 					},
 					recording: { mode: 'off' }
 				}
@@ -124,7 +124,7 @@
 			trackType: 'rtmps',
 			liveInput: {
 				meta: {
-					name: `${$page.params.channelId}-${$page.data.user?.userId}-rtmps`
+					name: $page.params.channelId
 				},
 				recording: { mode: 'automatic' }
 			}
@@ -149,92 +149,92 @@
 </script>
 
 <div class="flex flex-col sm:flex-row gap-4">
-	<div class="dropdown dropdown-top dropdown-end py-3">
-		<button
-			tabindex="0"
-			class="btn border-none tooltip tooltip-left font-normal normal-case {$is_sharing_screen ||
-			$is_sharing_webcam ||
-			$is_sharing_audio ||
-			$is_sharing_rtmps
-				? 'btn-primary'
-				: 'btn-neutral'}"
-			data-tip="Sources"
-			disabled={!isHostOrGuest || !isChannelSocketConnected || !videoItemIsActive}>
-			<IconSources />
-		</button>
-		<ul tabindex="0" class="dropdown-content">
-			<div class="flex flex-row card p-3 bg-base-300">
-				<div class="flex gap-4">
-					<button
-						class="btn border-none tooltip font-normal normal-case {$is_sharing_screen
-							? 'btn-primary'
-							: 'btn-neutral'}"
-						data-tip="Screen"
-						on:click={async () => {
-							if ($is_sharing_screen === false || $is_sharing_screen === undefined) {
-								await startWebrtcStream(`screen`)
-							}
-							$is_sharing_screen = !$is_sharing_screen
-						}}
-						disabled={$is_sharing_rtmps ||
-							!isHostOrGuest ||
-							!isChannelSocketConnected ||
-							!videoItemIsActive}>
-						<IconShareScreen />
-					</button>
-					<button
-						class="btn border-none tooltip font-normal normal-case {$is_sharing_webcam
-							? 'btn-primary'
-							: 'btn-neutral'}"
-						data-tip="Webcam"
-						on:click={async () => {
-							if ($is_sharing_webcam === false || $is_sharing_webcam === undefined) {
-								await startWebrtcStream(`webcam`)
-							}
-							$is_sharing_webcam = !$is_sharing_webcam
-						}}
-						disabled={$is_sharing_rtmps ||
-							!isHostOrGuest ||
-							!isChannelSocketConnected ||
-							!videoItemIsActive}>
-						<IconShareWebcam />
-					</button>
+	<div class="flex flex-row gap-4 card">
+		<div class="dropdown dropdown-top dropdown-end py-3">
+			<button
+				tabindex="0"
+				class="btn border-none tooltip tooltip-left font-normal normal-case {$is_sharing_screen ||
+				$is_sharing_webcam ||
+				$is_sharing_audio ||
+				$is_sharing_rtmps
+					? 'btn-primary'
+					: 'btn-neutral'}"
+				data-tip="Sources"
+				disabled={!isHostOrGuest || !isChannelSocketConnected || !videoItemIsActive}>
+				<IconSources />
+			</button>
+			<ul tabindex="0" class="dropdown-content">
+				<div class="flex flex-row card p-3 bg-base-300">
+					<div class="flex gap-4">
+						<button
+							class="btn border-none tooltip font-normal normal-case {$is_sharing_screen
+								? 'btn-primary'
+								: 'btn-neutral'}"
+							data-tip="Screen"
+							on:click={async () => {
+								if ($is_sharing_screen === false || $is_sharing_screen === undefined) {
+									await startWebrtcStream(`screen`)
+								}
+								$is_sharing_screen = !$is_sharing_screen
+							}}
+							disabled={$is_sharing_rtmps ||
+								!isHostOrGuest ||
+								!isChannelSocketConnected ||
+								!videoItemIsActive}>
+							<IconShareScreen />
+						</button>
+						<button
+							class="btn border-none tooltip font-normal normal-case {$is_sharing_webcam
+								? 'btn-primary'
+								: 'btn-neutral'}"
+							data-tip="Webcam"
+							on:click={async () => {
+								if ($is_sharing_webcam === false || $is_sharing_webcam === undefined) {
+									await startWebrtcStream(`webcam`)
+								}
+								$is_sharing_webcam = !$is_sharing_webcam
+							}}
+							disabled={$is_sharing_rtmps ||
+								!isHostOrGuest ||
+								!isChannelSocketConnected ||
+								!videoItemIsActive}>
+							<IconShareWebcam />
+						</button>
+						<button
+							class="btn border-none tooltip font-normal normal-case {$is_sharing_audio
+								? 'btn-primary'
+								: 'btn-neutral'}"
+							data-tip="Audio"
+							on:click={async () => {
+								if ($is_sharing_audio === false || $is_sharing_audio === undefined) {
+									await startWebrtcStream(`audio`)
+								}
+								$is_sharing_audio = !$is_sharing_audio
+							}}
+							disabled={$is_sharing_rtmps ||
+								!isHostOrGuest ||
+								!isChannelSocketConnected ||
+								!videoItemIsActive}>
+							<IconShareAudio />
+						</button>
+					</div>
+					<div class="divider lg:divider-horizontal" />
 					<button
-						class="btn border-none tooltip font-normal normal-case {$is_sharing_audio
-							? 'btn-primary'
-							: 'btn-neutral'}"
-						data-tip="Audio"
-						on:click={async () => {
-							if ($is_sharing_audio === false || $is_sharing_audio === undefined) {
-								await startWebrtcStream(`audio`)
-							}
-							$is_sharing_audio = !$is_sharing_audio
-						}}
-						disabled={$is_sharing_rtmps ||
+						class="btn border-none tooltip font-normal normal-case btn-neutral"
+						data-tip="Stream key"
+						on:click={() => showStreamKeyModal()}
+						disabled={$is_sharing_screen ||
+							$is_sharing_webcam ||
+							$is_sharing_audio ||
 							!isHostOrGuest ||
 							!isChannelSocketConnected ||
 							!videoItemIsActive}>
-						<IconShareAudio />
+						<IconStreamKey />
 					</button>
 				</div>
-				<div class="divider lg:divider-horizontal" />
-				<button
-					class="btn border-none tooltip font-normal normal-case btn-neutral"
-					data-tip="Stream key"
-					on:click={() => showStreamKeyModal()}
-					disabled={$is_sharing_screen ||
-						$is_sharing_webcam ||
-						$is_sharing_audio ||
-						!isHostOrGuest ||
-						!isChannelSocketConnected ||
-						!videoItemIsActive}>
-					<IconStreamKey />
-				</button>
-			</div>
-		</ul>
-	</div>
+			</ul>
+		</div>
 
-	<div class="flex flex-row gap-4 card">
 		<button
 			class="flex items-center btn border-none tooltip font-normal normal-case mt-3 {$is_restream_drawer_open
 				? 'btn-primary'

diff --git a/src/lib/components/Channel/Stream/VodList.svelte b/src/lib/components/Channel/Stream/VodList.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { get } from '$lib/api'
+	import { getTimeFormat, timeSince } from '$lib/utils'
+	import { onMount } from 'svelte'
+	import DialogVod from './DialogVod.svelte'
+	import { is_vod_modal_open } from '$lib/stores/channelStore'
+
+	export let channelId: number
+	let vods: any = [],
+		selectedVod: any
+
+	onMount(async () => {
+		await getVods()
+	})
+
+	const getVods = async () => {
+		vods = await get(`vods?channelId=${channelId}`)
+	}
+</script>
+
+{#if vods?.length}
+	<div class="flex space-x-4 bg-base-200 rounded-md overflow-x-auto h-52 overflow-y-hidden p-4">
+		{#each vods as vod}
+			<div
+				class="flex flex-none cursor-pointer relative"
+				on:click={() => {
+					$is_vod_modal_open = true
+					selectedVod = vod
+				}}>
+				<!-- <iframe src={vod.url} class="rounded-box"></iframe> -->
+				<img src={vod.thumbnail} class="rounded-md" alt="vod thumbnail" />
+				<span
+					class="badge badge-md text-ghost rounded-md font-semibold border-none absolute m-1 bottom-0"
+					>{timeSince(vod.createdAt)}</span>
+				<!-- <span class="badge badge-md text-ghost rounded-md font-semibold border-none absolute m-1"
+					>@{vod.username}</span> -->
+				<div
+					class="badge badge-md text-ghost rounded-md font-semibold border-none absolute bottom-0 right-0 m-1">
+					{getTimeFormat(vod.duration)}
+				</div>
+			</div>
+		{/each}
+	</div>
+	<DialogVod vod={selectedVod} />
+{/if}
diff --git a/src/lib/stores/channelStore.ts b/src/lib/stores/channelStore.ts
@@ -9,3 +9,4 @@ export const was_chat_drawer_closed: Writable<boolean> = writable(false)
 
 export const is_restream_drawer_open: Writable<boolean> = writable(false)
 export const is_sponsor_dialog_open: Writable<boolean> = writable(false)
+export const is_vod_modal_open: Writable<any> = writable(null)
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -429,3 +429,13 @@ export const updateVideoItems = (videoItems: any, liveInputs: any[]) => {
 	}
 	return vidItems
 }
+
+export const getTimeFormat = (duration: number) => {
+	const hours = Math.floor(duration / 3600)
+	const minutes = Math.floor((duration % 3600) / 60)
+	const seconds = Math.floor(duration % 60)
+
+	const secondsFormat = seconds < 10 ? `0${seconds}` : seconds
+
+	return hours > 0 ? `${hours}:${minutes}:${secondsFormat}` : `${minutes}:${secondsFormat}`
+}
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
@@ -131,7 +131,7 @@
 		platformPollingInterval = null
 		await loadChannel()
 		await handleWebsocket()
-		await loadMoreChannels()
+		// await loadMoreChannels()
 		$is_chat_drawer_destroy = false
 		setTimeout(() => {
 			$is_chat_drawer_open = true