Merge pull request #1483 from pateljannat/issues-101

fix: misc fixes

frontend/src/pages/BatchDetail.vue

@@ -14,13 +14,13 @@
 					{{ batch.data.description }}
 				</div>
 				<div
-					class="flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center space-x-5 lg:w-1/2"
+					class="flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center space-x-0 md:space-x-5 lg:w-1/2"
 				>
 					<div
 						v-if="batch.data?.courses?.length"
 						class="flex items-center text-ink-gray-7"
 					>
-						<BookOpen class="h-4 w-4 mr-2" />
+						<BookOpen class="h-4 w-4 mr-2 stroke-1.5" />
 						<span> {{ batch.data?.courses?.length }} {{ __('Courses') }} </span>
 					</div>
 					<span v-if="batch.data?.courses?.length" class="hidden lg:block"
@@ -34,7 +34,7 @@
 						>&middot;</span
 					>
 					<div class="flex items-center text-ink-gray-7">
-						<Clock class="h-4 w-4 mr-2" />
+						<Clock class="h-4 w-4 mr-2 stroke-1.5" />
 						<span>
 							{{ formatTime(batch.data.start_time) }} -
 							{{ formatTime(batch.data.end_time) }}

frontend/src/pages/Lesson.vue

@@ -294,15 +294,13 @@ import {
 	MessageCircleQuestion,
 } from 'lucide-vue-next'
 import Discussions from '@/components/Discussions.vue'
-import { getEditorTools } from '../utils'
+import { getEditorTools, enablePlyr } from '@/utils'
 import { sessionStore } from '@/stores/session'
 import EditorJS from '@editorjs/editorjs'
 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 Plyr from 'plyr'
-import 'plyr/dist/plyr.css'
 
 const user = inject('$user')
 const router = useRouter()
@@ -356,37 +354,6 @@ onBeforeUnmount(() => {
 	document.removeEventListener('fullscreenchange', attachFullscreenEvent)
 })
 
-const enablePlyr = () => {
-	setTimeout(() => {
-		const videoElement = document.getElementsByClassName('video-player')
-		if (videoElement.length === 0) return
-
-		const src = document
-			.getElementsByClassName('video-player')[0]
-			.getAttribute('src')
-		if (src) {
-			let videoID = src.split('/').pop()
-			document
-				.getElementsByClassName('video-player')[0]
-				.setAttribute('data-plyr-embed-id', videoID)
-		}
-		new Plyr('.video-player', {
-			youtube: {
-				noCookie: true,
-			},
-			controls: [
-				'play-large',
-				'play',
-				'progress',
-				'current-time',
-				'mute',
-				'volume',
-				'fullscreen',
-			],
-		})
-	}, 500)
-}
-
 const lesson = createResource({
 	url: 'lms.lms.utils.get_lesson',
 	makeParams(values) {

frontend/src/pages/LessonForm.vue

@@ -92,17 +92,14 @@ import {
 	inject,
 	ref,
 	onBeforeUnmount,
-	watch,
 } from 'vue'
 import { sessionStore } from '../stores/session'
 import EditorJS from '@editorjs/editorjs'
 import LessonHelp from '@/components/LessonHelp.vue'
-import { AppleIcon, ChevronRight } from 'lucide-vue-next'
-import { createToast, getEditorTools } from '@/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import { createToast, getEditorTools, enablePlyr } from '@/utils'
 import { capture } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
-import Plyr from 'plyr'
-import 'plyr/dist/plyr.css'
 
 const { brand } = sessionStore()
 const editor = ref(null)
@@ -470,37 +467,6 @@ const showToast = (title, text, icon) => {
 	})
 }
 
-const enablePlyr = () => {
-	setTimeout(() => {
-		const videoElement = document.getElementsByClassName('video-player')
-		if (videoElement.length === 0) return
-
-		const src = document
-			.getElementsByClassName('video-player')[0]
-			.getAttribute('src')
-		if (src) {
-			let videoID = src.split('/').pop()
-			document
-				.getElementsByClassName('video-player')[0]
-				.setAttribute('data-plyr-embed-id', videoID)
-		}
-		new Plyr('.video-player', {
-			youtube: {
-				noCookie: true,
-			},
-			controls: [
-				'play-large',
-				'play',
-				'progress',
-				'current-time',
-				'mute',
-				'volume',
-				'fullscreen',
-			],
-		})
-	}, 500)
-}
-
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{

frontend/src/pages/Programs.vue

@@ -217,7 +217,7 @@ const canCreateProgram = () => {
 
 const breadbrumbs = computed(() => [
 	{
-		label: 'Programs',
+		label: __('Programs'),
 	},
 ])
 

frontend/src/utils/index.js

@@ -15,6 +15,8 @@ import Embed from '@editorjs/embed'
 import SimpleImage from '@editorjs/simple-image'
 import Table from '@editorjs/table'
 import { usersStore } from '../stores/user'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
 
 const readOnlyMode = window.read_only_mode
 
@@ -550,3 +552,30 @@ export const canCreateCourse = () => {
 		(userResource.data?.is_instructor || userResource.data?.is_moderator)
 	)
 }
+
+export const enablePlyr = () => {
+	setTimeout(() => {
+		const videoElement = document.getElementsByClassName('video-player')
+		if (videoElement.length === 0) return
+
+		const src = videoElement[0].getAttribute('src')
+		if (src) {
+			let videoID = src.split('/').pop()
+			videoElement[0].setAttribute('data-plyr-embed-id', videoID)
+		}
+		new Plyr('.video-player', {
+			youtube: {
+				noCookie: true,
+			},
+			controls: [
+				'play-large',
+				'play',
+				'progress',
+				'current-time',
+				'mute',
+				'volume',
+				'fullscreen',
+			],
+		})
+	}, 500)
+}