fix: allow backward seek but prevent forward seek

frontend/src/components/VideoBlock.vue

@@ -74,7 +74,6 @@
 						v-model="currentTime"
 						@input="changeCurrentTime"
 						class="duration-slider h-1"
-						:disabled="preventSkippingVideos.data"
 					/>
 					<!-- QUIZ MARKERS -->
 					<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
@@ -299,6 +298,11 @@ const toggleMute = () => {
 }
 
 const changeCurrentTime = () => {
+	if (
+		preventSkippingVideos.data &&
+		currentTime.value > videoRef.value.currentTime
+	)
+		return
 	videoRef.value.currentTime = currentTime.value
 	updateNextQuiz()
 }

frontend/src/pages/Lesson.vue

@@ -511,6 +511,7 @@ const getVideoDetails = () => {
 	const videos = document.querySelectorAll('video')
 	if (videos.length > 0) {
 		videos.forEach((video) => {
+			if (video.currentTime == video.duration) markProgress()
 			details.push({
 				source: video.src,
 				watch_time: video.currentTime,
@@ -523,6 +524,7 @@ const getVideoDetails = () => {
 const getPlyrSourceDetails = () => {
 	let details = []
 	plyrSources.value.forEach((source) => {
+		if (source.currentTime == source.duration) markProgress()
 		let src = cleanYouTubeUrl(source.source)
 		details.push({
 			source: src,
@@ -544,6 +546,7 @@ watch(
 	async (data) => {
 		setupLesson(data)
 		getPlyrSource()
+		if (data.icon == 'icon-youtube') clearInterval(timerInterval)
 	}
 )
 
@@ -551,7 +554,6 @@ const getPlyrSource = async () => {
 	await nextTick()
 	if (plyrSources.value.length == 0) {
 		plyrSources.value = await enablePlyr()
-		console.log(plyrSources.value)
 	}
 	updateVideoWatchDuration()
 }
@@ -570,6 +572,9 @@ const updateVideoWatchDuration = () => {
 
 const updatePlyrVideoTime = (video) => {
 	plyrSources.value.forEach((plyrSource) => {
+		let lastWatchedTime = 0
+		let isSeeking = false
+
 		plyrSource.on('ready', () => {
 			if (plyrSource.source === video.source) {
 				plyrSource.embed.seekTo(video.watch_time, true)

frontend/src/utils/index.js

@@ -566,18 +566,39 @@ const setupPlyrForVideo = (video, players) => {
 		'fullscreen',
 	]
 
-	if (useSettings().preventSkippingVideos.data) {
-		controls.splice(controls.indexOf('progress'), 1)
-	}
-
 	const player = new Plyr(video, {
 		youtube: { noCookie: true },
 		controls: controls,
+		listeners: {
+			seek: function customSeekBehavior(e) {
+				const current_time = player.currentTime
+				const newTime = getTargetTime(player, e)
+				if (
+					useSettings().preventSkippingVideos.data &&
+					parseFloat(newTime) > current_time
+				) {
+					e.preventDefault()
+					player.currentTime = current_time
+					return false
+				}
+			},
+		},
 	})
 
 	players.push(player)
 }
 
+const getTargetTime = (plyr, input) => {
+	if (
+		typeof input === 'object' &&
+		(input.type === 'input' || input.type === 'change')
+	) {
+		return (input.target.value / input.target.max) * plyr.duration
+	} else {
+		return Number(input)
+	}
+}
+
 const extractYouTubeId = (url) => {
 	try {
 		const parsedUrl = new URL(url)