From 5eaae06ceb5954e8d87c791efeca9413cde0ff7a Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Mon, 30 Jun 2025 19:56:07 +0530
Subject: [PATCH] feat: video watch time tracking

---
 frontend/components.d.ts                      |   1 +
 .../src/components/Modals/VideoStatistics.vue | 143 +++++++++++++++
 frontend/src/components/VideoBlock.vue        |   9 +-
 frontend/src/pages/Lesson.vue                 | 167 ++++++++++++------
 lms/lms/api.py                                |  35 ++++
 .../lms_video_watch_duration/__init__.py      |   0
 .../lms_video_watch_duration.js               |   8 +
 .../lms_video_watch_duration.json             | 160 +++++++++++++++++
 .../lms_video_watch_duration.py               |   9 +
 .../test_lms_video_watch_duration.py          |  21 +++
 lms/lms/utils.py                              |   9 +
 11 files changed, 507 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/components/Modals/VideoStatistics.vue
 create mode 100644 lms/lms/doctype/lms_video_watch_duration/__init__.py
 create mode 100644 lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.js
 create mode 100644 lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.json
 create mode 100644 lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.py
 create mode 100644 lms/lms/doctype/lms_video_watch_duration/test_lms_video_watch_duration.py

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 98fda927..907b9153 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -102,6 +102,7 @@ declare module 'vue' {
     UserAvatar: typeof import('./src/components/UserAvatar.vue')['default']
     UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
     VideoBlock: typeof import('./src/components/VideoBlock.vue')['default']
+    VideoStatistics: typeof import('./src/components/Modals/VideoStatistics.vue')['default']
     ZoomAccountModal: typeof import('./src/components/Modals/ZoomAccountModal.vue')['default']
     ZoomSettings: typeof import('./src/components/Settings/ZoomSettings.vue')['default']
   }
diff --git a/frontend/src/components/Modals/VideoStatistics.vue b/frontend/src/components/Modals/VideoStatistics.vue
new file mode 100644
index 00000000..12c58625
--- /dev/null
+++ b/frontend/src/components/Modals/VideoStatistics.vue
@@ -0,0 +1,143 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '4xl',
+			title: __('Video Statistics for {0}').format(lessonTitle),
+		}"
+	>
+		<template #body-content>
+			<div class="text-base">
+				<TabButtons :buttons="tabs" v-model="currentTab" class="w-fit" />
+				<div v-if="currentTab" class="mt-8">
+					<div class="grid grid-cols-[55%,40%] gap-5">
+						<div class="space-y-5 border rounded-md p-2 pt-4">
+							<div class="grid grid-cols-[70%,30%] text-sm text-ink-gray-5">
+								<div class="px-4">
+									{{ __('Member') }}
+								</div>
+								<div class="text-center">
+									{{ __('Watch Time') }}
+								</div>
+							</div>
+							<div
+								v-for="row in currentTabData"
+								class="hover:bg-surface-gray-1 cursor-pointer rounded-md py-1 px-2"
+							>
+								<router-link
+									:to="{
+										name: 'Profile',
+										params: { username: row.member_username },
+									}"
+								>
+									<div class="grid grid-cols-[70%,30%] items-center">
+										<div class="flex items-center space-x-2">
+											<Avatar
+												:image="row.member_image"
+												:label="row.member_name"
+												size="xl"
+											/>
+											<div class="space-y-1">
+												<div class="font-medium">
+													{{ row.member_name }}
+												</div>
+												<div class="text-sm text-ink-gray-6">
+													{{ row.member }}
+												</div>
+											</div>
+										</div>
+										<div class="text-center text-sm">
+											{{ row.watch_time }}
+										</div>
+									</div>
+								</router-link>
+							</div>
+						</div>
+						<div class="space-y-5">
+							<NumberChart
+								class="border rounded-md"
+								:config="{
+									title: __('Average Watch Time (seconds)'),
+									value: averageWatchTime,
+								}"
+							/>
+							<VideoBlock :file="currentTab" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Avatar,
+	createListResource,
+	Dialog,
+	NumberChart,
+	TabButtons,
+} from 'frappe-ui'
+import { computed, ref } from 'vue'
+import VideoBlock from '@/components/VideoBlock.vue'
+
+const show = defineModel<boolean | undefined>()
+const currentTab = ref<string>('')
+
+const props = defineProps<{
+	lessonName: string
+	lessonTitle: string
+}>()
+
+const statistics = createListResource({
+	doctype: 'LMS Video Watch Duration',
+	filters: {
+		lesson: props.lessonName,
+	},
+	fields: [
+		'name',
+		'member',
+		'member_name',
+		'member_image',
+		'member_username',
+		'source',
+		'watch_time',
+	],
+	auto: true,
+	cache: ['videoStatistics', props.lessonName],
+	onSuccess() {
+		currentTab.value = Object.keys(statisticsData.value)[0]
+	},
+})
+
+const statisticsData = computed(() => {
+	const grouped = <Record<string, any[]>>{}
+	statistics.data.forEach((item: { source: string }) => {
+		if (!grouped[item.source]) {
+			grouped[item.source] = []
+		}
+		grouped[item.source].push(item)
+	})
+	return grouped
+})
+
+const averageWatchTime = computed(() => {
+	let totalWatchTime = 0
+
+	currentTabData.value.forEach((item: { watch_time: string }) => {
+		totalWatchTime += parseFloat(item.watch_time)
+	})
+
+	return totalWatchTime / currentTabData.value.length
+})
+
+const currentTabData = computed(() => {
+	return statisticsData.value[currentTab.value] || []
+})
+
+const tabs = computed(() => {
+	return Object.keys(statisticsData.value).map((source, index) => ({
+		label: __(`Video ${index + 1}`),
+		value: source,
+	}))
+})
+</script>
diff --git a/frontend/src/components/VideoBlock.vue b/frontend/src/components/VideoBlock.vue
index 3f5963b6..42a22cd1 100644
--- a/frontend/src/components/VideoBlock.vue
+++ b/frontend/src/components/VideoBlock.vue
@@ -27,9 +27,9 @@
 				oncontextmenu="return false"
 				class="rounded-md border border-gray-100 cursor-pointer"
 				ref="videoRef"
-			>
-				<source :src="fileURL" :type="type" />
-			</video>
+				:src="fileURL"
+				:type="type"
+			></video>
 			<div
 				v-if="!playing"
 				class="absolute inset-0 flex items-center justify-center cursor-pointer"
@@ -181,7 +181,7 @@ const props = defineProps({
 		default: 'video/mp4',
 	},
 	readOnly: {
-		type: String,
+		type: Boolean,
 		default: true,
 	},
 	quizzes: {
@@ -190,6 +190,7 @@ const props = defineProps({
 	},
 	saveQuizzes: {
 		type: Function,
+		default: () => {},
 	},
 })
 
diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index 430c1b28..daa48934 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -12,6 +12,12 @@
 						</template>
 					</Button>
 				</Tooltip>
+				<Button v-if="canSeeStats()" @click="showVideoStats()">
+					<template #prefix>
+						<TrendingUp class="size-4 stroke-1.5" />
+					</template>
+					{{ __('Video Statistics') }}
+				</Button>
 				<CertificationLinks :courseName="courseName" />
 			</div>
 		</header>
@@ -100,26 +106,15 @@
 									<MessageCircleQuestion class="w-4 h-4 stroke-1.5" />
 								</template>
 							</Button>
-							<router-link
-								v-if="lesson.data.prev"
-								:to="{
-									name: 'Lesson',
-									params: {
-										courseName: courseName,
-										chapterNumber: lesson.data.prev.split('.')[0],
-										lessonNumber: lesson.data.prev.split('.')[1],
-									},
-								}"
-							>
-								<Button>
-									<template #prefix>
-										<ChevronLeft class="w-4 h-4 stroke-1" />
-									</template>
-									<span>
-										{{ __('Previous') }}
-									</span>
-								</Button>
-							</router-link>
+							<Button v-if="lesson.data.prev" @click="switchLesson('prev')">
+								<template #prefix>
+									<ChevronLeft class="w-4 h-4 stroke-1" />
+								</template>
+								<span>
+									{{ __('Previous') }}
+								</span>
+							</Button>
+
 							<router-link
 								v-if="allowEdit()"
 								:to="{
@@ -135,26 +130,16 @@
 									{{ __('Edit') }}
 								</Button>
 							</router-link>
-							<router-link
-								v-if="lesson.data.next"
-								:to="{
-									name: 'Lesson',
-									params: {
-										courseName: courseName,
-										chapterNumber: lesson.data.next.split('.')[0],
-										lessonNumber: lesson.data.next.split('.')[1],
-									},
-								}"
-							>
-								<Button>
-									<template #suffix>
-										<ChevronRight class="w-4 h-4 stroke-1" />
-									</template>
-									<span>
-										{{ __('Next') }}
-									</span>
-								</Button>
-							</router-link>
+
+							<Button v-if="lesson.data.next" @click="switchLesson('next')">
+								<template #suffix>
+									<ChevronRight class="w-4 h-4 stroke-1" />
+								</template>
+								<span>
+									{{ __('Next') }}
+								</span>
+							</Button>
+
 							<router-link
 								v-else
 								:to="{
@@ -262,13 +247,19 @@
 			</div>
 		</div>
 	</div>
+	<VideoStatistics
+		v-model="showStatsDialog"
+		:lessonName="lesson.data?.name"
+		:lessonTitle="lesson.data?.title"
+	/>
 </template>
 <script setup>
 import {
-	createResource,
 	Badge,
 	Breadcrumbs,
 	Button,
+	call,
+	createResource,
 	Tooltip,
 	usePageMeta,
 } from 'frappe-ui'
@@ -292,6 +283,7 @@ import {
 	Focus,
 	Info,
 	MessageCircleQuestion,
+	TrendingUp,
 } from 'lucide-vue-next'
 import Discussions from '@/components/Discussions.vue'
 import { getEditorTools, enablePlyr } from '@/utils'
@@ -302,6 +294,7 @@ import LessonContent from '@/components/LessonContent.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 import CertificationLinks from '@/components/CertificationLinks.vue'
+import VideoStatistics from '@/components/Modals/VideoStatistics.vue'
 
 const user = inject('$user')
 const socket = inject('$socket')
@@ -313,6 +306,7 @@ const instructorEditor = ref(null)
 const lessonProgress = ref(0)
 const lessonContainer = ref(null)
 const zenModeEnabled = ref(false)
+const showStatsDialog = ref(false)
 const hasQuiz = ref(false)
 const discussionsContainer = ref(null)
 const timer = ref(0)
@@ -337,7 +331,6 @@ const props = defineProps({
 
 onMounted(() => {
 	startTimer()
-	console.log(sidebarStore.isSidebarCollapsed)
 	sidebarStore.isSidebarCollapsed = true
 	document.addEventListener('fullscreenchange', attachFullscreenEvent)
 	socket.on('update_lesson_progress', (data) => {
@@ -362,6 +355,7 @@ const attachFullscreenEvent = () => {
 onBeforeUnmount(() => {
 	document.removeEventListener('fullscreenchange', attachFullscreenEvent)
 	sidebarStore.isSidebarCollapsed = false
+	trackVideoWatchDuration()
 })
 
 const lesson = createResource({
@@ -457,6 +451,23 @@ const breadcrumbs = computed(() => {
 	return items
 })
 
+const switchLesson = (direction) => {
+	trackVideoWatchDuration()
+	let lessonIndex =
+		direction === 'prev'
+			? lesson.data.prev.split('.')
+			: lesson.data.next.split('.')
+
+	router.push({
+		name: 'Lesson',
+		params: {
+			courseName: props.courseName,
+			chapterNumber: lessonIndex[0],
+			lessonNumber: lessonIndex[1],
+		},
+	})
+}
+
 watch(
 	[() => route.params.chapterNumber, () => route.params.lessonNumber],
 	(
@@ -464,29 +475,74 @@ watch(
 		[oldChapterNumber, oldLessonNumber]
 	) => {
 		if (newChapterNumber || newLessonNumber) {
-			editor.value = null
-			instructorEditor.value = null
-			allowDiscussions.value = false
-			lesson.submit({
-				chapter: newChapterNumber,
-				lesson: newLessonNumber,
-			})
-			clearInterval(timerInterval)
-			timer.value = 0
+			resetLessonState(newChapterNumber, newLessonNumber)
 			startTimer()
 			enablePlyr()
 		}
 	}
 )
 
+const resetLessonState = (newChapterNumber, newLessonNumber) => {
+	editor.value = null
+	instructorEditor.value = null
+	allowDiscussions.value = false
+	lesson.submit({
+		chapter: newChapterNumber,
+		lesson: newLessonNumber,
+	})
+	clearInterval(timerInterval)
+	timer.value = 0
+}
+
+const trackVideoWatchDuration = () => {
+	const videoDetails = []
+	const videos = document.querySelectorAll('video')
+	if (videos.length > 0 && lesson.data.membership) {
+		videos.forEach((video) => {
+			videoDetails.push({
+				source: video.src,
+				watch_time: video.currentTime,
+			})
+		})
+		call('lms.lms.api.track_video_watch_duration', {
+			lesson: lesson.data.name,
+			videos: videoDetails,
+		})
+	}
+}
+
 watch(
 	() => lesson.data,
 	(data) => {
 		setupLesson(data)
 		enablePlyr()
+		updateVideoWatchDuration()
 	}
 )
 
+const updateVideoWatchDuration = () => {
+	setTimeout(() => {
+		if (lesson.data.videos && lesson.data.videos.length > 0) {
+			lesson.data.videos.forEach((video) => {
+				const videos = document.querySelectorAll('video')
+				if (videos.length > 0) {
+					videos.forEach((vid) => {
+						if (vid.src === video.source) {
+							if (vid.readyState >= 1) {
+								vid.currentTime = video.watch_time
+							} else {
+								vid.addEventListener('loadedmetadata', () => {
+									vid.currentTime = video.watch_time
+								})
+							}
+						}
+					})
+				}
+			})
+		}
+	}, 10)
+}
+
 const startTimer = () => {
 	timerInterval = setInterval(() => {
 		timer.value++
@@ -553,6 +609,15 @@ const enrollStudent = () => {
 	)
 }
 
+const canSeeStats = () => {
+	if (user.data?.is_moderator || user.data?.is_instructor) return true
+	return false
+}
+
+const showVideoStats = () => {
+	showStatsDialog.value = true
+}
+
 const canGoZen = () => {
 	if (
 		user.data?.is_moderator ||
diff --git a/lms/lms/api.py b/lms/lms/api.py
index b6bf33f7..fca1f1c9 100644
--- a/lms/lms/api.py
+++ b/lms/lms/api.py
@@ -1559,3 +1559,38 @@ def update_test_cases(test_cases, submission):
 			}
 		)
 		test_case.insert()
+
+
+@frappe.whitelist()
+def track_video_watch_duration(lesson, videos):
+	"""
+	Track the watch duration of videos in a lesson.
+	"""
+	if not isinstance(videos, list):
+		videos = json.loads(videos)
+
+	for video in videos:
+		filters = {
+			"lesson": lesson,
+			"source": video.get("source"),
+			"member": frappe.session.user,
+		}
+
+		if frappe.db.exists("LMS Video Watch Duration", filters):
+			frappe.db.set_value(
+				"LMS Video Watch Duration",
+				filters,
+				"watch_time",
+				video.get("watch_time"),
+			)
+		else:
+			track_new_watch_time(lesson, video)
+
+
+def track_new_watch_time(lesson, video):
+	doc = frappe.new_doc("LMS Video Watch Duration")
+	doc.lesson = lesson
+	doc.source = video.get("source")
+	doc.watch_time = video.get("watch_time")
+	doc.member = frappe.session.user
+	doc.save()
diff --git a/lms/lms/doctype/lms_video_watch_duration/__init__.py b/lms/lms/doctype/lms_video_watch_duration/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.js b/lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.js
new file mode 100644
index 00000000..3be98799
--- /dev/null
+++ b/lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.js
@@ -0,0 +1,8 @@
+// Copyright (c) 2025, Frappe and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("LMS Video Watch Duration", {
+// 	refresh(frm) {
+
+// 	},
+// });
diff --git a/lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.json b/lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.json
new file mode 100644
index 00000000..23ec7aa6
--- /dev/null
+++ b/lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.json
@@ -0,0 +1,160 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "creation": "2025-06-30 13:00:22.655432",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "lesson",
+  "chapter",
+  "course",
+  "column_break_tmwj",
+  "member",
+  "member_name",
+  "member_image",
+  "member_username",
+  "section_break_fywc",
+  "source",
+  "column_break_uuyv",
+  "watch_time"
+ ],
+ "fields": [
+  {
+   "fieldname": "lesson",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "Lesson",
+   "options": "Course Lesson",
+   "reqd": 1
+  },
+  {
+   "fetch_from": "lesson.chapter",
+   "fieldname": "chapter",
+   "fieldtype": "Link",
+   "label": "Chapter",
+   "options": "Course Chapter",
+   "read_only": 1
+  },
+  {
+   "fetch_from": "lesson.course",
+   "fieldname": "course",
+   "fieldtype": "Link",
+   "label": "Course",
+   "options": "LMS Course",
+   "read_only": 1
+  },
+  {
+   "fieldname": "column_break_tmwj",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "member",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "Member",
+   "options": "User",
+   "reqd": 1
+  },
+  {
+   "fetch_from": "member.full_name",
+   "fieldname": "member_name",
+   "fieldtype": "Data",
+   "label": "Member Name"
+  },
+  {
+   "fetch_from": "member.user_image",
+   "fieldname": "member_image",
+   "fieldtype": "Attach Image",
+   "label": "Member Image"
+  },
+  {
+   "fetch_from": "member.username",
+   "fieldname": "member_username",
+   "fieldtype": "Data",
+   "label": "Member Username"
+  },
+  {
+   "fieldname": "section_break_fywc",
+   "fieldtype": "Section Break"
+  },
+  {
+   "fieldname": "source",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Source",
+   "reqd": 1
+  },
+  {
+   "fieldname": "column_break_uuyv",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "watch_time",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Watch Time",
+   "reqd": 1
+  }
+ ],
+ "grid_page_length": 50,
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2025-06-30 16:57:10.561660",
+ "modified_by": "sayali@frappe.io",
+ "module": "LMS",
+ "name": "LMS Video Watch Duration",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "LMS Student",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Moderator",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Course Creator",
+   "share": 1,
+   "write": 1
+  }
+ ],
+ "row_format": "Dynamic",
+ "sort_field": "creation",
+ "sort_order": "DESC",
+ "states": []
+}
diff --git a/lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.py b/lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.py
new file mode 100644
index 00000000..4a7c30b2
--- /dev/null
+++ b/lms/lms/doctype/lms_video_watch_duration/lms_video_watch_duration.py
@@ -0,0 +1,9 @@
+# Copyright (c) 2025, Frappe and contributors
+# For license information, please see license.txt
+
+# import frappe
+from frappe.model.document import Document
+
+
+class LMSVideoWatchDuration(Document):
+	pass
diff --git a/lms/lms/doctype/lms_video_watch_duration/test_lms_video_watch_duration.py b/lms/lms/doctype/lms_video_watch_duration/test_lms_video_watch_duration.py
new file mode 100644
index 00000000..0d818179
--- /dev/null
+++ b/lms/lms/doctype/lms_video_watch_duration/test_lms_video_watch_duration.py
@@ -0,0 +1,21 @@
+# Copyright (c) 2025, Frappe and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests import IntegrationTestCase
+
+
+# On IntegrationTestCase, the doctype test records and all
+# link-field test record dependencies are recursively loaded
+# Use these module variables to add/remove to/from that list
+EXTRA_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+IGNORE_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+
+
+class IntegrationTestLMSVideoWatchDuration(IntegrationTestCase):
+	"""
+	Integration tests for LMSVideoWatchDuration.
+	Use this class for testing interactions between multiple components.
+	"""
+
+	pass
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 7b9f491f..131fff51 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1324,9 +1324,18 @@ def get_lesson(course, chapter, lesson):
 	lesson_details.course_title = course_info.title
 	lesson_details.paid_certificate = course_info.paid_certificate
 	lesson_details.disable_self_learning = course_info.disable_self_learning
+	lesson_details.videos = get_video_details(lesson_name)
 	return lesson_details
 
 
+def get_video_details(lesson_name):
+	return frappe.get_all(
+		"LMS Video Watch Duration",
+		{"lesson": lesson_name, "member": frappe.session.user},
+		["source", "watch_time"],
+	)
+
+
 def get_neighbour_lesson(course, chapter, lesson):
 	numbers = []
 	current = f"{chapter}.{lesson}"