diff --git a/src/lib/assets/icons/social/IconMobileAppAndroid.png b/src/lib/assets/icons/social/IconMobileAppAndroid.png new file mode 100644 index 00000000..131f3aca Binary files /dev/null and b/src/lib/assets/icons/social/IconMobileAppAndroid.png differ diff --git a/src/lib/assets/icons/social/IconMobileAppiOS.svg b/src/lib/assets/icons/social/IconMobileAppiOS.svg new file mode 100644 index 00000000..072b425a --- /dev/null +++ b/src/lib/assets/icons/social/IconMobileAppiOS.svg @@ -0,0 +1,46 @@ + + Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte index a47be160..392d964e 100644 --- a/src/lib/components/Channel/Stream/VideoItem.svelte +++ b/src/lib/components/Channel/Stream/VideoItem.svelte @@ -25,11 +25,9 @@ let role = '', coloredRole: any = {}, isGuest = false, - obsElement: HTMLVideoElement, screenElement: HTMLVideoElement, webcamElement: HTMLVideoElement, audioElement: HTMLAudioElement, - obsWhep: WHIPClient, screenWhip: WHIPClient, screenWhep: WHEPClient, webcamWhip: WHIPClient, @@ -47,12 +45,16 @@ timerInterval: any, formattedTime: string = '00:00:00', isHoverVideo: boolean = false, - obs_modal: any = null + obs_modal: any = null, + player: any, + hlsUrl: string = '', + hasActiveObsStream = false // WHIP/WHEP variables that determine if stream is coming in $: isScreenLive = false $: isWebcamLive = false - $: hlsUrl = '' + + $: console.log('TESTING HLS', hlsUrl) $: if (channel) { role = setRole({ userId: video._id, channel, currentUserId: $page.data.user?.userId }) @@ -87,14 +89,14 @@ handleAudioChanges() } - $: if ($is_feature_stats_enabled && (isScreenLive || isWebcamLive)) { + $: if ($is_feature_stats_enabled && (isScreenLive || isWebcamLive || hasActiveObsStream)) { toggleTimer() } $: animate = isWebcamFocused ? '' : 'transition-all' const handleObsChanges = () => { - prevScreen = video.obs + prevObs = video.obs toggleClient({ trackType: 'obs' }) @@ -124,31 +126,6 @@ case 'obs': hlsUrl = video.obs?.playback?.hls console.log('got here---- video.obs.playback?.hls', hlsUrl) - // if (video.obs && $is_sharing_obs) { - // const key = video.obs.webRTCPlayback.url + '-' + video._id - // const existed = getScreen(key) - // obsWhep = - // existed || - // new WHEPClient(video.obs.webRTCPlayback.url, obsElement, video.obs.trackType) - // if (existed) { - // existed.videoElement = obsElement - // obsElement.srcObject = existed.localStream - // $is_sharing_obs = true - // isScreenLive = true - // } - // addScreen(key, obsWhep) - // obsWhep.addEventListener(`localStreamStopped-${trackType}`, () => { - // $is_sharing_obs = false - // isScreenLive = false - // removeScreen(key) - // }) - // obsWhep.addEventListener(`isScreenLive`, (ev: any) => (isScreenLive = ev.detail)) - // } else if (!video.screen) { - // if (obsElement) { - // obsElement.srcObject = null - // } - // $is_sharing_obs = false - // } break case 'screen': if (video.screen && $is_sharing_screen) { @@ -212,13 +189,8 @@ } else { switch (trackType) { case 'obs': - if (video.obs && obsElement) { - obsElement.src = video.obs?.playback?.hls - obsElement.muted = false - obsElement.play() - } else { - if (obsElement) obsElement.srcObject = null - } + hlsUrl = video.obs?.playback?.hls + console.log('got here---- video.obs.playback?.hls', hlsUrl) break case 'screen': if (video.screen && screenElement) { @@ -286,16 +258,7 @@ onMount(() => { isGuest = channel?.guests?.includes(video._id) - if (obsElement) { - obsElement.addEventListener('dblclick', (event: any) => { - if (document.fullscreenElement) { - document.exitFullscreen() - } else { - obsElement.requestFullscreen() - } - }) - handleObsChanges() - } + handleObsChanges() if (screenElement) { screenElement.addEventListener('dblclick', (event: any) => { @@ -327,7 +290,8 @@ is_sharing_obs.subscribe((value: any) => { if (value === false) { - obsWhep?.disconnectStream() + // obsWhep?.disconnectStream() + //TODO: check if stream is coming, if not, hide video } else if (value === true) { if (is_sharing_obs) obs_modal?.showModal() } @@ -416,12 +380,17 @@ }, 1000) } } + + const onPlaybackReady = (e: any) => { + console.log('onPlaybackReady', e) + hasActiveObsStream = true + }
(isHoverVideo = true)} on:mouseleave={() => (isHoverVideo = false)}>
@@ -432,7 +401,7 @@ ? 'mask-hexagon' : 'mask-squircle'} object-cover m-auto" />
- {#if $is_feature_stats_enabled && (isScreenLive || isWebcamLive)} + {#if $is_feature_stats_enabled && (isScreenLive || isWebcamLive || hasActiveObsStream)} - - --> - - - - - - - - + {#if $is_feature_obs_enabled && hlsUrl} +
+ + + + + + + +
{/if}