feat: prevent skipping videos

frontend/src/components/Settings/Settings.vue

@@ -130,6 +130,13 @@ const tabsStructure = computed(() => {
 					label: 'General',
 					icon: 'Wrench',
 					fields: [
+						{
+							label: 'Allow Guest Access',
+							name: 'allow_guest_access',
+							description:
+								'If enabled, users can access the course and batch lists without logging in.',
+							type: 'checkbox',
+						},
 						{
 							label: 'Enable Learning Paths',
 							name: 'enable_learning_paths',
@@ -138,11 +145,11 @@ const tabsStructure = computed(() => {
 							type: 'checkbox',
 						},
 						{
-							label: 'Allow Guest Access',
-							name: 'allow_guest_access',
-							description:
-								'If enabled, users can access the course and batch lists without logging in.',
+							label: 'Prevent Skipping Videos',
+							name: 'prevent_skipping_videos',
 							type: 'checkbox',
+							description:
+								'If enabled, students cannot skip videos in a lesson.',
 						},
 						{
 							label: 'Send calendar invite for evaluations',
@@ -154,6 +161,14 @@ const tabsStructure = computed(() => {
 						{
 							type: 'Column Break',
 						},
+						{
+							label: 'Livecode URL',
+							name: 'livecode_url',
+							doctype: 'Livecode URL',
+							type: 'text',
+							description:
+								'https://docs.frappe.io/learning/falcon-self-hosting-guide',
+						},
 						{
 							label: 'Batch Confirmation Email Template',
 							name: 'batch_confirmation_template',
@@ -166,14 +181,6 @@ const tabsStructure = computed(() => {
 							doctype: 'Email Template',
 							type: 'Link',
 						},
-						{
-							label: 'Livecode URL',
-							name: 'livecode_url',
-							doctype: 'Livecode URL',
-							type: 'text',
-							description:
-								'https://docs.frappe.io/learning/falcon-self-hosting-guide',
-						},
 						{
 							label: 'Unsplash Access Key',
 							name: 'unsplash_access_key',

frontend/src/components/VideoBlock.vue

@@ -74,6 +74,7 @@
 						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">
@@ -155,6 +156,7 @@ import { ref, onMounted, computed, watch } from 'vue'
 import { Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
 import { Button, Dialog } from 'frappe-ui'
 import { formatSeconds, formatTimestamp } from '@/utils'
+import { useSettings } from '@/stores/settings'
 import Play from '@/components/Icons/Play.vue'
 import QuizInVideo from '@/components/Modals/QuizInVideo.vue'
 
@@ -170,6 +172,7 @@ const showQuizLoader = ref(false)
 const quizLoadTimer = ref(0)
 const currentQuiz = ref(null)
 const nextQuiz = ref({})
+const { preventSkippingVideos } = useSettings()
 
 const props = defineProps({
 	file: {

frontend/src/pages/Lesson.vue

@@ -551,6 +551,7 @@ const getPlyrSource = async () => {
 	await nextTick()
 	if (plyrSources.value.length == 0) {
 		plyrSources.value = await enablePlyr()
+		console.log(plyrSources.value)
 	}
 	updateVideoWatchDuration()
 }

frontend/src/stores/settings.js

@@ -9,21 +9,31 @@ export const useSettings = defineStore('settings', () => {
 	const activeTab = ref(null)
 
 	const learningPaths = createResource({
-		url: 'lms.lms.api.is_learning_path_enabled',
+		url: 'lms.lms.api.get_lms_setting',
+		params: { field: 'enable_learning_paths' },
 		auto: true,
 		cache: ['learningPath'],
 	})
 
 	const allowGuestAccess = createResource({
-		url: 'lms.lms.api.is_guest_allowed',
+		url: 'lms.lms.api.get_lms_setting',
+		params: { field: 'allow_guest_access' },
 		auto: true,
 		cache: ['allowGuestAccess'],
 	})
 
+	const preventSkippingVideos = createResource({
+		url: 'lms.lms.api.get_lms_setting',
+		params: { field: 'prevent_skipping_videos' },
+		auto: true,
+		cache: ['preventSkippingVideos'],
+	})
+
 	return {
 		isSettingsOpen,
 		activeTab,
 		learningPaths,
 		allowGuestAccess,
+		preventSkippingVideos,
 	}
 })

frontend/src/utils/index.js

@@ -1,4 +1,3 @@
-import { watch } from 'vue'
 import { call, toast } from 'frappe-ui'
 import { useTimeAgo } from '@vueuse/core'
 import { Quiz } from '@/utils/quiz'
@@ -557,17 +556,23 @@ const setupPlyrForVideo = (video, players) => {
 		video.setAttribute('data-plyr-embed-id', videoID)
 	}
 
+	let controls = [
+		'play-large',
+		'play',
+		'progress',
+		'current-time',
+		'mute',
+		'volume',
+		'fullscreen',
+	]
+
+	if (useSettings().preventSkippingVideos.data) {
+		controls.splice(controls.indexOf('progress'), 1)
+	}
+
 	const player = new Plyr(video, {
 		youtube: { noCookie: true },
-		controls: [
-			'play-large',
-			'play',
-			'progress',
-			'current-time',
-			'mute',
-			'volume',
-			'fullscreen',
-		],
+		controls: controls,
 	})
 
 	players.push(player)