Feat: added vime lib for hls stream

package.json

@@ -46,13 +46,14 @@
 		"tailwindcss": "^3.2.7",
 		"tslib": "^2.5.0",
 		"typescript": "^5.0.2",
-		"video.js": "^8.3.0",
 		"vite": "^4.1.4"
 	},
 	"dependencies": {
 		"@neodrag/svelte": "^2.0.3",
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.9",
+		"@vime/core": "^5.4.1",
+		"@vime/svelte": "^5.4.1",
 		"animate.css": "^4.1.1",
 		"daisyui": "^3.2.1",
 		"emoji-picker-element": "^1.18.1",

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

@@ -18,6 +18,7 @@
 	import { is_feature_stats_enabled, is_feature_obs_enabled } from '$lib/stores/remoteConfigStore'
 	import { addScreen, getScreen, removeScreen } from '$lib/stream-utils'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
+	import { Player, DefaultUi, Hls } from '@vime/svelte'
 
 	export let video: any, channel: any
 
@@ -51,6 +52,7 @@
 	// WHIP/WHEP variables that determine if stream is coming in
 	$: isScreenLive = false
 	$: isWebcamLive = false
+	$: hlsUrl = ''
 
 	$: if (channel) {
 		role = setRole({ userId: video._id, channel, currentUserId: $page.data.user?.userId })
@@ -120,7 +122,8 @@
 		if ($page.data.user?.userId === video._id) {
 			switch (trackType) {
 				case 'obs':
-					console.log('got here---- video.obs.playback?.hls', video.obs?.playback?.hls)
+					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)
@@ -210,7 +213,7 @@
 			switch (trackType) {
 				case 'obs':
 					if (video.obs && obsElement) {
-						obsElement.src = video.obs.rtmpsPlayback.url
+						obsElement.src = video.obs?.playback?.hls
 						obsElement.muted = false
 						obsElement.play()
 					} else {
@@ -415,6 +418,8 @@
 	}
 </script>
 
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css" />
+
 <div
 	class={isScreenLive || isWebcamLive ? 'w-full h-full' : 'w-[500px] max-h-80'}
 	on:mouseenter={() => (isHoverVideo = true)}
@@ -436,16 +441,24 @@
 				</span>
 			{/if}
 			{#if $is_feature_obs_enabled}
-				<video-js
+				<!-- <video-js
 					bind:this={obsElement}
 					id={`obs-${video._id}`}
 					controls
 					autoplay
 					muted
 					preload="auto"
 					class="rounded-md w-full h-full">
-					<source src={video.obs?.playback?.hls} type="application/x-mpegURL" />
-				</video-js>
+					<source src={video.obs?.hlsPlayback} type="application/x-mpegURL" />
+				</video-js> -->
+
+				<Player theme="dark" style="--vm-player-theme: #e86c8b;">
+					<Hls crossOrigin>
+						<source data-src={hlsUrl} type="application/x-mpegURL" />
+					</Hls>
+
+					<DefaultUi />
+				</Player>
 			{/if}
 
 			<video

src/routes/+layout.svelte

@@ -115,6 +115,7 @@
 
 <svelte:head>
 	<link rel="stylesheet" href="/fonts/montserrat.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css" />
 	{@html `<script> 
           const theme = localStorage.getItem('theme') || 'dark';
           document.querySelector('html').dataset.theme = theme;