Merge pull request #811 from gagansuie/dev

Fix: stream timer reimplemented
CodeCrowCorp · Dec 5, 2023 · ef0c18b · ef0c18b
2 parents 8e4f6bd + c2b9114
commit ef0c18b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 62 deletions.
diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -265,12 +265,6 @@
 
 	const refreshStreamKey = async () => {
 		rtmps = null
-		//TODO: do we delete live input if video is associated with each live input?
-		// await deleteLiveInput({
-		// 	channelId: $page.params.channelId,
-		// 	userId: $page.data.user.userId,
-		// 	trackType: 'obs'
-		// })
 		rtmps = await createLiveInput({
 			channelId: `${$page.params.channelId}`,
 			userId: $page.data.user?.userId,

diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -13,11 +13,11 @@
 		is_sharing_obs
 	} from '$lib/stores/streamStore'
 	import { emitChannelUpdate } from '$lib/websocket'
-	import { captureScreenShot, dataURLtoFile, getColoredRole, setRole } from '$lib/utils'
+	import { captureScreenShot, dataURLtoFile, formatTime, getColoredRole, setRole } from '$lib/utils'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
 	import { addScreen, getScreen, removeScreen } from '$lib/stream-utils'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
-	import { putImage } from '$lib/api'
+	import { get, putImage } from '$lib/api'
 	import LibLoader from '$lib/components/Global/LibLoader.svelte'
 
 	export let video: any, channel: any
@@ -86,11 +86,11 @@
 		handleAudioChanges()
 	}
 
-	// $: if (isScreenLive || iframeUrl) {
-	// 	toggleTimer(true)
-	// } else {
-	// 	toggleTimer(false)
-	// }
+	$: if (isScreenLive || iframeUrl) {
+		toggleTimer(true)
+	} else {
+		toggleTimer(false)
+	}
 
 	$: animate = isWebcamFocused ? '' : 'transition-all'
 
@@ -125,8 +125,10 @@
 				case 'obs':
 					if (video.obs) {
 						iframeUrl = video.obs.playback.iframe
+						$is_sharing_obs = true
 					} else {
 						iframeUrl = ''
+						$is_sharing_obs = false
 					}
 					break
 				case 'screen':
@@ -303,24 +305,6 @@
 		isMounted = true
 	})
 
-	//TODO: do this server-side
-	// is_sharing_obs.subscribe(async (value: any) => {
-	// 	if (value === false) {
-	// 		if (timerInterval) toggleTimer(false)
-	// 		if (streamId) {
-	// 			await patch(
-	// 				`analytics/stream/end?streamId=${streamId}`,
-	// 				{},
-	// 				{
-	// 					userId: $page.data.user?.userId,
-	// 					token: $page.data.user?.token
-	// 				}
-	// 			)
-	// 			streamId = ''
-	// 		}
-	// 	}
-	// })
-
 	is_sharing_screen.subscribe(async (value: any) => {
 		if (value === false) {
 			screenWhip?.disconnectStream()
@@ -397,13 +381,13 @@
 			if (timerInterval) return
 			timerInterval = setInterval(async () => {
 				try {
-					streamTime = Math.floor(streamTime) + 1
-					const hours = Math.floor(streamTime / 3600)
-					const minutes = Math.floor((streamTime % 3600) / 60)
-					const seconds = streamTime % 60
-					formattedTime = `${hours.toString().padStart(2, '0')}:${minutes
-						.toString()
-						.padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+					if (streamTime < 1) {
+						const inputId = video.obs?.uid || video.screen?.uid
+						const streamRecord = await get(`analytics/stream?inputId=${inputId}`)
+						streamTime = Math.floor((Date.now() - streamRecord?.start) / 1000)
+					}
+					streamTime += 1
+					formattedTime = formatTime(streamTime)
 					if (
 						!channel.thumbnail &&
 						video._id === channel.user &&
@@ -431,30 +415,20 @@
 		}
 	}
 
-	const onLibLoaded = (event: any) => {
-		if (obs_element && iframeUrl) {
-			try {
-				// The Cloudflare Stream SDK is ready to use
-				streamPlayer = event.detail.library(obs_element)
-				streamPlayer.addEventListener('durationchange', (event: any) => {
-					console.log('Duration change', event)
-				})
-				// streamPlayer.muted = video._id === $page.data.user?.userId
-				// streamPlayer.autoplay = true
-				// streamPlayer.controls = false
-				// streamPlayer.play()
-			} catch (err) {
-				console.log('err', err)
-			}
-		}
-	}
+	// const onLibLoaded = (event: any) => {
+	// 	try {
+	// 		// The Cloudflare Stream SDK is ready to use
+	// 		streamPlayer = event.detail.library(obs_element)
+	// 		streamPlayer.addEventListener('durationchange', (evt: any) => {
+	// 			console.log('Duration change', evt)
+	// 			streamTime = streamPlayer?.duration
+	// 		})
+	// 	} catch (err) {
+	// 		console.log('err', err)
+	// 	}
+	// }
 </script>
 
-<LibLoader
-	src="https://embed.cloudflarestream.com/embed/sdk.latest.js"
-	libraryDetectionObject="Stream"
-	on:loaded={onLibLoaded} />
-
 <div
 	class={iframeUrl || isScreenLive || isWebcamLive ? 'w-full h-full' : 'w-[500px] max-h-80'}
 	on:mouseenter={() => (isHoverVideo = true)}
@@ -482,6 +456,10 @@
 						src={iframeUrl}
 						class="rounded-md w-full h-full"
 						allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;" />
+					<!-- <LibLoader
+						src="https://embed.cloudflarestream.com/embed/sdk.latest.js"
+						libraryDetectionObject="Stream"
+						on:loaded={onLibLoaded} /> -->
 				</div>
 			{/if}
 			{#if !iframeUrl}

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -390,3 +390,15 @@ export const getHref = async ({
 	const { loginUrl } = await response.json()
 	window.location.replace(loginUrl)
 }
+
+export const formatTime = (streamTime: number) => {
+	const hours = Math.floor(streamTime / 3600)
+	const minutes = Math.floor((streamTime % 3600) / 60)
+	const seconds = streamTime % 60
+
+	const paddedHours = hours.toString().padStart(2, '0')
+	const paddedMinutes = minutes.toString().padStart(2, '0')
+	const paddedSeconds = seconds.toString().padStart(2, '0')
+
+	return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`
+}
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
@@ -20,7 +20,8 @@
 		is_sharing_screen,
 		is_sharing_webcam,
 		is_sharing_audio,
-		updateVideoItems
+		updateVideoItems,
+		is_sharing_obs
 	} from '$lib/stores/streamStore'
 	import DrawerRestream from '$lib/components/Channel/Chat/DrawerRestream.svelte'
 
@@ -280,7 +281,6 @@
 				}
 				break
 			case `channel-streaming-action-${$page.params.channelId}`:
-				console.log('got here----woo rtmps!!~~~', parsedMsg.data)
 				switch (parsedMsg.data.action) {
 					case 'toggleTrack':
 						if (channel) {