Merge pull request #1272 from gagansuie/dev

Feat: added horizontal vods list to channel page

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,
@@ -160,6 +161,7 @@
 					{#if channel && nextchannel?._id === parseInt($page.params.channelId)}
 						<VideoGrid bind:channel />
 					{/if}
+					<VodList channelId={channel._id} />
 				</div>
 			</div>
 		{/each}

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' }
 			}

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { get } from '$lib/api'
+	import { getTimeFormat } from '$lib/utils'
+	import { onMount } from 'svelte'
+
+	export let channelId: number
+	let vods: any = []
+
+	onMount(async () => {
+		vods = await get(`vods?channelId=${channelId}`)
+		console.log('got here----vods', vods)
+	})
+</script>
+
+{#if vods.length}
+	<div class="flex space-x-1 bg-base-200 rounded-box overflow-x-auto h-52 overflow-y-hidden">
+		{#each vods as vod}
+			<a class="carousel-item p-4 cursor-pointer relative" href={vod.url} target="_blank">
+				<!-- <iframe src={vod.url} class="rounded-box"></iframe> -->
+				<img src={vod.thumbnail} class="rounded-box" />
+				<div
+					class="badge badge-md text-ghost rounded-md font-semibold border-none absolute bottom-4 right-4 m-1">
+					{getTimeFormat(vod.duration)}
+				</div>
+			</a>
+		{/each}
+	</div>
+{:else}
+	<p>No VODs available</p>
+{/if}

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}`
+}