feat: track watch time for youtube and vimeo

frontend/src/utils/index.js

@@ -531,33 +531,58 @@ export const canCreateCourse = () => {
 	)
 }
 
-export const enablePlyr = () => {
-	setTimeout(() => {
-		const videoElement = document.getElementsByClassName('video-player')
-		if (videoElement.length === 0) return
+export const enablePlyr = async () => {
+	await wait(500)
 
-		Array.from(videoElement).forEach((video) => {
-			const src = video.getAttribute('src')
-			if (src) {
-				let videoID = src.split('/').pop()
-				video.setAttribute('data-plyr-embed-id', videoID)
-			}
-			new Plyr(video, {
-				youtube: {
-					noCookie: true,
-				},
-				controls: [
-					'play-large',
-					'play',
-					'progress',
-					'current-time',
-					'mute',
-					'volume',
-					'fullscreen',
-				],
-			})
-		}, 500)
+	const players = []
+	const videoElements = document.getElementsByClassName('video-player')
+
+	if (videoElements.length === 0) return players
+
+	Array.from(videoElements).forEach((video) => {
+		setupPlyrForVideo(video, players)
 	})
+
+	return players
+}
+
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const setupPlyrForVideo = (video, players) => {
+	const src = video.getAttribute('src') || video.getAttribute('data-src')
+
+	if (src) {
+		const videoID = extractYouTubeId(src)
+		video.setAttribute('data-plyr-provider', 'youtube')
+		video.setAttribute('data-plyr-embed-id', videoID)
+	}
+
+	const player = new Plyr(video, {
+		youtube: { noCookie: true },
+		controls: [
+			'play-large',
+			'play',
+			'progress',
+			'current-time',
+			'mute',
+			'volume',
+			'fullscreen',
+		],
+	})
+
+	players.push(player)
+}
+
+const extractYouTubeId = (url) => {
+	try {
+		const parsedUrl = new URL(url)
+		return (
+			parsedUrl.searchParams.get('v') ||
+			parsedUrl.pathname.split('/').pop()
+		)
+	} catch {
+		return url.split('/').pop()
+	}
 }
 
 export const openSettings = (category, close = null) => {
@@ -567,7 +592,6 @@ export const openSettings = (category, close = null) => {
 	}
 	settingsStore.activeTab = category
 	settingsStore.isSettingsOpen = true
-	console.log(settingsStore.activeTab, settingsStore.isSettingsOpen)
 }
 
 export const cleanError = (message) => {