diff --git a/src/lib/WHEPClient.ts b/src/lib/WHEPClient.ts
index 377e26d6..2ebb6898 100644
--- a/src/lib/WHEPClient.ts
+++ b/src/lib/WHEPClient.ts
@@ -68,11 +68,19 @@ export default class WHEPClient extends EventTarget {
console.log('got unknown track ' + track)
}
- if (trackType === 'screen' && track.readyState === 'live') {
- this.dispatchEvent(new CustomEvent(`isScreenLive`, { detail: true }))
+ if (trackType === 'screen' && track.kind === 'video') {
+ if (track.readyState === 'live') {
+ this.dispatchEvent(new CustomEvent(`isScreenLive`, { detail: true }))
+ } else {
+ this.dispatchEvent(new CustomEvent(`isScreenLive`, { detail: false }))
+ }
}
- if (trackType === 'webcam' && track.readyState === 'live') {
- this.dispatchEvent(new CustomEvent(`isWebcamLive`, { detail: true }))
+ if (trackType === 'webcam' && track.kind === 'video') {
+ if (track.readyState === 'live') {
+ this.dispatchEvent(new CustomEvent(`isWebcamLive`, { detail: true }))
+ } else {
+ this.dispatchEvent(new CustomEvent(`isWebcamLive`, { detail: false }))
+ }
}
}
diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
index 4d352335..08f9cf3c 100644
--- a/src/lib/components/Channel/Stream/StreamContainer.svelte
+++ b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -6,14 +6,14 @@
import { goto } from '$app/navigation'
import { page } from '$app/stores'
import { createEventDispatcher } from 'svelte'
+ import { is_sharing_audio, is_sharing_screen, is_sharing_webcam } from '$lib/stores/streamStore'
const dispatch = createEventDispatcher()
export let userCount: number = 1,
channel: any,
channels: any = [],
isHostOrGuest: boolean = false,
- viewers: any[] = [],
- streamId: any
+ viewers: any[] = []
let isScrollable = false
@@ -33,7 +33,8 @@
goto(`${id}`, {
keepFocus: true,
replaceState: true,
- noScroll: true
+ noScroll: true,
+ invalidateAll: true
})
}
}
@@ -44,7 +45,11 @@
{#each channels as nextchannel}
@@ -70,7 +75,7 @@
{#if channel && nextchannel?._id === $page.params.channelId}
-
+
{/if}
diff --git a/src/lib/components/Channel/Stream/VideoGrid.svelte b/src/lib/components/Channel/Stream/VideoGrid.svelte
index 354186b2..6e37a863 100644
--- a/src/lib/components/Channel/Stream/VideoGrid.svelte
+++ b/src/lib/components/Channel/Stream/VideoGrid.svelte
@@ -3,7 +3,7 @@
import { getVideoGrids } from '$lib/utils'
import CommandList from '$lib/components/Channel/Stream/CommandList.svelte'
- export let channel: any, streamId: any
+ export let channel: any
$: grid = getVideoGrids(channel.videoItems, 9)
@@ -15,7 +15,7 @@
{#each grid as row}
{#each row as video (video._id)}
-
+
{/each}
{/each}
diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
index af8a04ea..6e0cdce6 100644
--- a/src/lib/components/Channel/Stream/VideoItem.svelte
+++ b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -19,9 +19,9 @@
import { addScreen, getScreen, removeScreen } from '$lib/stream-utils'
import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
import { Player, DefaultUi, Hls } from '@vime/svelte'
- import { get, patch, post, put } from '$lib/api'
+ import { get, patch } from '$lib/api'
- export let streamId: any, video: any, channel: any
+ export let video: any, channel: any
let role = '',
coloredRole: any = {},
@@ -49,7 +49,8 @@
obs_modal: any = null,
player: any,
hlsUrl: string = '',
- hasActiveObsStream = false
+ hasActiveObsStream = false,
+ streamId = ''
// WHIP/WHEP variables that determine if stream is coming in
$: isScreenLive = false
@@ -90,8 +91,10 @@
handleAudioChanges()
}
- $: if ($is_feature_stats_enabled && (isScreenLive || isWebcamLive || hasActiveObsStream)) {
- toggleTimer()
+ $: if ($is_feature_stats_enabled && (isScreenLive || hasActiveObsStream)) {
+ toggleTimer(true)
+ } else {
+ toggleTimer(false)
}
$: animate = isWebcamFocused ? '' : 'transition-all'
@@ -130,25 +133,6 @@
break
case 'screen':
if (video.screen && $is_sharing_screen) {
- if (streamId == '') {
- const streamData = await post(
- 'stats/stream',
- {
- type: 'stream',
- userId: $page.data.user?.userId,
- user: $page.data.user,
- start: Date.now(),
- end: 0,
- duration: 0
- },
- {
- userId: $page.data.user?.userId,
- token: $page.data.user?.token
- }
- )
- streamId = streamData.insertedId
- }
-
const key = video.screen.webRTC.url + '-' + video._id
const existed = getScreen(key)
screenWhip =
@@ -165,17 +149,6 @@
$is_sharing_screen = false
isScreenLive = false
removeScreen(key)
- if (streamId) {
- await patch(
- `stats/stream/end?streamId=${streamId}`,
- {},
- {
- userId: $page.data.user?.userId,
- token: $page.data.user?.token
- }
- )
- streamId = ''
- }
})
screenWhip.addEventListener(`isScreenLive`, (ev: any) => (isScreenLive = ev.detail))
} else if (!video.screen) {
@@ -202,6 +175,8 @@
if (webcamElement) {
webcamElement.srcObject = null
}
+ $is_sharing_webcam = false
+ isWebcamLive = false
}
break
case 'audio':
@@ -233,15 +208,11 @@
if (existed) {
existed.videoElement = screenElement
screenElement.srcObject = existed.stream
- isScreenLive = true
- const streamRecord = await get(`stats/stream?streamId=${streamId}`)
- streamTime = streamRecord ? (Date.now() - streamRecord.start) / 1000 : 0
- toggleTimer()
+ isScreenLive = true //TODO: fixes scrolling to new stream, but breaks when host ends stream
+ screenElement.muted = false
+ screenElement.play()
}
-
addScreen(key, screenWhep)
- screenElement.muted = false
- screenElement.play()
screenWhep.addEventListener(`isScreenLive`, (ev: any) => (isScreenLive = ev.detail))
} else {
if (screenElement) screenElement.srcObject = null
@@ -291,6 +262,7 @@
}
onMount(() => {
+ toggleTimer(false)
isGuest = channel?.guests?.includes(video._id)
handleObsChanges()
@@ -334,7 +306,18 @@
is_sharing_screen.subscribe(async (value: any) => {
if (value === false) {
screenWhip?.disconnectStream()
- clearInterval(timerInterval)
+ toggleTimer(false)
+ if (streamId) {
+ await patch(
+ `stats/stream/end?streamId=${streamId}`,
+ {},
+ {
+ userId: $page.data.user?.userId,
+ token: $page.data.user?.token
+ }
+ )
+ streamId = ''
+ }
}
})
@@ -398,29 +381,44 @@
})
}
- const toggleTimer = () => {
- if (timerInterval) {
+ const toggleTimer = (isTimerEnabled: boolean) => {
+ if (!isTimerEnabled) {
clearInterval(timerInterval)
timerInterval = null
+ streamTime = 0
+ formattedTime = '00:00:00'
+ streamId = ''
} else {
+ if (timerInterval) return
timerInterval = setInterval(async () => {
- streamTime++
- 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')}`
- //NOTE: check if mine and has been 5 seconds
- if (video._id === $page.data.user?.userId && streamTime % 5 == 0) {
- await patch(
- `stats/stream?streamId=${streamId}`,
- {},
- {
- userId: $page.data.user?.userId,
- token: $page.data.user?.token
- }
- )
+ try {
+ streamId = video.screen.streamId
+ if (!streamId) return
+ console.log('got here----', video.screen.streamId)
+ if (streamId && streamTime === 0) {
+ const streamRecord = await get(`stats/stream?streamId=${streamId}`)
+ streamTime = streamRecord ? (Date.now() - streamRecord.start) / 1000 : 0
+ }
+ 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')}`
+ //NOTE: check if mine and has been 5 seconds
+ if (video._id === $page.data.user?.userId && streamTime % 5 == 0) {
+ await patch(
+ `stats/stream?streamId=${streamId}`,
+ {},
+ {
+ userId: $page.data.user?.userId,
+ token: $page.data.user?.token
+ }
+ )
+ }
+ } catch (e) {
+ console.log(e)
}
}, 1000)
}
@@ -448,7 +446,7 @@
{#if $is_feature_stats_enabled && (isScreenLive || isWebcamLive || hasActiveObsStream)}
{formattedTime}
@@ -492,7 +490,7 @@
muted
class="rounded-md h-full w-full" />
-
+