From c9dbc12a44e331a93d21abc30b5b655367dbe78a Mon Sep 17 00:00:00 2001
From: joylessorchid <mail@ciphral.com>
Date: Mon, 16 Mar 2026 06:47:10 +0300
Subject: [PATCH] feat: fullscreen stream on admin home, fix card titles 2-line
 clamp

- Remove greeting for admin view, render stream fullscreen (no scroll)
- AdminHome: stream fills full viewport height via flex layout
- StreamEmbed: fills parent height instead of fixed aspect-ratio
- Set Twitch channel to lofigirl
- CourseCard: clamp title to 2 lines with fixed min-height

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/CourseCard.vue  |   6 +-
 frontend/src/components/StreamEmbed.vue |   6 +-
 frontend/src/pages/Home/AdminHome.vue   | 250 ++----------------------
 frontend/src/pages/Home/Home.vue        |  49 ++---
 4 files changed, 42 insertions(+), 269 deletions(-)

diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 4c1b85ab..fcd5bfec 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -66,11 +66,11 @@
 
 		<!-- Card body -->
 		<div class="flex flex-col flex-1 p-4">
-			<!-- Title (when image present) -->
+			<!-- Title (when image present): max 2 lines -->
 			<div
 				v-if="course.image"
-				class="font-semibold text-ink-gray-9 leading-snug mb-1"
-				:class="course.title.length > 40 ? 'text-sm' : 'text-base'"
+				class="font-semibold text-ink-gray-9 leading-snug mb-1 line-clamp-2 text-sm"
+				style="min-height: 2.5rem"
 			>
 				{{ course.title }}
 			</div>
diff --git a/frontend/src/components/StreamEmbed.vue b/frontend/src/components/StreamEmbed.vue
index 501e9e4e..b425e6b0 100644
--- a/frontend/src/components/StreamEmbed.vue
+++ b/frontend/src/components/StreamEmbed.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="rounded-xl overflow-hidden border border-outline-gray-2 bg-surface-gray-9">
+	<div class="w-full h-full flex flex-col overflow-hidden bg-black">
 		<!-- Stream header -->
 		<div class="flex items-center justify-between px-4 py-3 bg-surface-gray-9 border-b border-outline-gray-7">
 			<div class="flex items-center gap-2.5">
@@ -45,8 +45,8 @@
 			</a>
 		</div>
 
-		<!-- Embed iframe -->
-		<div class="relative w-full" style="aspect-ratio: 16/9">
+		<!-- Embed iframe: fills remaining height -->
+		<div class="relative flex-1 min-h-0 w-full">
 			<iframe
 				v-if="embedUrl"
 				:src="embedUrl"
diff --git a/frontend/src/pages/Home/AdminHome.vue b/frontend/src/pages/Home/AdminHome.vue
index a652cba6..bb003dfa 100644
--- a/frontend/src/pages/Home/AdminHome.vue
+++ b/frontend/src/pages/Home/AdminHome.vue
@@ -1,258 +1,30 @@
 <template>
-	<div>
-		<!-- Stream embed -->
-		<div class="mt-10">
-			<div class="flex items-center justify-between mb-3">
-				<span class="font-semibold text-lg text-ink-gray-9">{{ __('Live') }}</span>
-			</div>
+	<!-- Fullscreen stream: fills all available space, no scroll -->
+	<div class="w-full h-full flex flex-col overflow-hidden">
+		<!-- Stream fills remaining height -->
+		<div class="flex-1 min-h-0 relative bg-black">
 			<StreamEmbed
 				:platform="streamConfig.platform"
 				:channel="streamConfig.channel"
 				:is-live="streamConfig.isLive"
+				class="h-full"
 			/>
 		</div>
-
-		<div v-if="createdBatches.data?.length" class="mt-10">
-			<div class="flex items-center justify-between mb-3">
-				<span class="font-semibold text-lg text-ink-gray-9">
-					{{ __('Upcoming Batches') }}
-				</span>
-				<router-link
-					:to="{
-						name: 'Batches',
-					}"
-				>
-					<span class="flex items-center space-x-1 text-ink-gray-5 text-xs">
-						<span>
-							{{ __('See all') }}
-						</span>
-						<MoveRight class="size-3 stroke-1.5" />
-					</span>
-				</router-link>
-			</div>
-			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
-				<router-link
-					v-for="batch in createdBatches.data"
-					:to="{ name: 'BatchDetail', params: { batchName: batch.name } }"
-				>
-					<BatchCard :batch="batch" />
-				</router-link>
-			</div>
-		</div>
-
-		<div
-			v-if="!createdCourses.data?.length && !createdBatches.data?.length"
-			class="flex flex-col items-center justify-center mt-60"
-		>
-			<GraduationCap class="size-10 mx-auto stroke-1 text-ink-gray-5" />
-			<div class="text-lg font-semibold text-ink-gray-7 mb-1.5">
-				{{ __('No courses created') }}
-			</div>
-			<div
-				class="leading-5 text-base w-full md:w-2/5 text-base text-center text-ink-gray-7"
-			>
-				{{
-					__(
-						'There are no courses currently. Create your first course to get started!'
-					)
-				}}
-			</div>
-			<router-link
-				:to="{ name: 'Courses', query: { newCourse: '1' } }"
-				class="mt-4"
-			>
-				<Button>
-					<template #prefix>
-						<Plus class="size-4 stroke-1.5" />
-					</template>
-					{{ __('Create Course') }}
-				</Button>
-			</router-link>
-		</div>
-
-		<div class="grid grid-cols-2 gap-5 mt-10">
-			<div v-if="evals?.data?.length">
-				<div class="font-semibold text-lg text-ink-gray-9 mb-3">
-					{{ __('Upcoming Evaluations') }}
-				</div>
-				<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
-					<div
-						v-for="evaluation in evals?.data"
-						class="border hover:border-outline-gray-3 rounded-md p-3 flex flex-col h-full cursor-pointer"
-						@click="redirectToProfile()"
-					>
-						<div class="font-semibold text-ink-gray-9 text-lg leading-5 mb-1">
-							{{ evaluation.course_title }}
-						</div>
-						<div class="text-ink-gray-7 text-sm">
-							<div class="flex items-center mb-2">
-								<Calendar class="w-4 h-4 stroke-1.5" />
-								<span class="ml-2">
-									{{ dayjs(evaluation.date).format('DD MMMM YYYY') }}
-								</span>
-							</div>
-							<div class="flex items-center mb-2">
-								<Clock class="w-4 h-4 stroke-1.5" />
-								<span class="ml-2">
-									{{ formatTime(evaluation.start_time) }}
-								</span>
-							</div>
-							<div class="flex items-center">
-								<GraduationCap class="w-4 h-4 stroke-1.5" />
-								<span class="ml-2">
-									{{ evaluation.member_name }}
-								</span>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div v-if="liveClasses?.data?.length">
-				<div class="font-semibold text-lg text-ink-gray-9 mb-3">
-					{{ __('Upcoming Live Classes') }}
-				</div>
-				<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
-					<div
-						v-for="cls in liveClasses?.data"
-						class="border hover:border-outline-gray-3 rounded-md p-3"
-					>
-						<div class="font-semibold text-ink-gray-9 text-lg leading-5 mb-1">
-							{{ cls.title }}
-						</div>
-						<div class="text-ink-gray-7 text-sm leading-5 mb-4">
-							{{ cls.description }}
-						</div>
-						<div class="mt-auto space-y-3 text-ink-gray-7 text-sm">
-							<div class="flex items-center space-x-2">
-								<Calendar class="w-4 h-4 stroke-1.5" />
-								<span>
-									{{ dayjs(cls.date).format('DD MMMM YYYY') }}
-								</span>
-							</div>
-							<div class="flex items-center space-x-2">
-								<Clock class="w-4 h-4 stroke-1.5" />
-								<span>
-									{{ formatTime(cls.time) }} -
-									{{ dayjs(getClassEnd(cls)).format('HH:mm A') }}
-								</span>
-							</div>
-							<div
-								v-if="canAccessClass(cls)"
-								class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
-							>
-								<a
-									v-if="user.data?.is_moderator || user.data?.is_evaluator"
-									:href="cls.start_url"
-									target="_blank"
-									class="cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
-									:class="cls.join_url ? 'w-full' : 'w-1/2'"
-								>
-									<Monitor class="h-4 w-4 stroke-1.5" />
-									{{ __('Start') }}
-								</a>
-								<a
-									:href="cls.join_url"
-									target="_blank"
-									class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
-								>
-									<Video class="h-4 w-4 stroke-1.5" />
-									{{ __('Join') }}
-								</a>
-							</div>
-							<Tooltip
-								v-else-if="hasClassEnded(cls)"
-								:text="__('This class has ended')"
-								placement="right"
-							>
-								<div class="flex items-center space-x-2 text-ink-amber-3 w-fit">
-									<Info class="w-4 h-4 stroke-1.5" />
-									<span>
-										{{ __('Ended') }}
-									</span>
-								</div>
-							</Tooltip>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
 	</div>
 </template>
+
 <script setup lang="ts">
-import { Button, createResource, Tooltip } from 'frappe-ui'
-import { inject, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-	Calendar,
-	Clock,
-	GraduationCap,
-	Info,
-	Monitor,
-	MoveRight,
-	Plus,
-	Video,
-} from 'lucide-vue-next'
-import { formatTime } from '@/utils'
-import CourseCard from '@/components/CourseCard.vue'
-import BatchCard from '@/pages/Batches/components/BatchCard.vue'
+import { ref } from 'vue'
 import StreamEmbed from '@/components/StreamEmbed.vue'
 
-// Настройки стрима — укажи platform и channel
-const streamConfig = ref({
-	platform: 'twitch' as 'twitch' | 'youtube',
-	channel: '',   // например: 'imo_online' для Twitch или video ID для YouTube
-	isLive: false,
-})
-
-const user = inject<any>('$user')
-const dayjs = inject<any>('$dayjs')
-const router = useRouter()
-
 const props = defineProps<{
 	liveClasses?: { data?: any[] }
 	evals?: { data?: any[] }
 }>()
 
-const createdCourses = createResource({
-	url: 'lms.lms.api.get_created_courses',
-	auto: true,
+const streamConfig = ref({
+	platform: 'twitch' as 'twitch' | 'youtube',
+	channel: 'lofigirl',
+	isLive: true,
 })
-
-const createdBatches = createResource({
-	url: 'lms.lms.api.get_created_batches',
-	auto: true,
-})
-
-const getClassEnd = (cls: { date: string; time: string; duration: number }) => {
-	const classStart = new Date(`${cls.date}T${cls.time}`)
-	return new Date(classStart.getTime() + cls.duration * 60000)
-}
-
-const canAccessClass = (cls: {
-	date: string
-	time: string
-	duration: number
-}) => {
-	if (cls.date < dayjs().format('YYYY-MM-DD')) return false
-	if (cls.date > dayjs().format('YYYY-MM-DD')) return false
-	if (hasClassEnded(cls)) return false
-	return true
-}
-
-const hasClassEnded = (cls: {
-	date: string
-	time: string
-	duration: number
-}) => {
-	const classEnd = getClassEnd(cls)
-	const now = new Date()
-	return now > classEnd
-}
-
-const redirectToProfile = () => {
-	router.push({
-		name: 'ProfileEvaluationSchedule',
-		params: { username: user.data?.username },
-	})
-}
 </script>
diff --git a/frontend/src/pages/Home/Home.vue b/frontend/src/pages/Home/Home.vue
index ee742be5..fba7de90 100644
--- a/frontend/src/pages/Home/Home.vue
+++ b/frontend/src/pages/Home/Home.vue
@@ -1,39 +1,40 @@
 <template>
-	<div class="w-full px-5 pt-5 pb-10">
-		<div class="space-y-2">
+	<!-- Admin view: fullscreen stream, no header, no scroll -->
+	<div
+		v-if="isAdmin && currentTab === 'instructor'"
+		class="w-full h-full overflow-hidden"
+	>
+		<AdminHome
+			:liveClasses="adminLiveClasses"
+			:evals="adminEvals"
+		/>
+	</div>
+
+	<!-- Student view: greeting + content -->
+	<div v-else class="w-full px-5 pt-5 pb-10">
+		<div class="space-y-2 mb-6">
 			<div class="flex items-center justify-between">
 				<div class="text-xl font-bold text-ink-gray-9">
 					{{ __('Hey') }}, {{ user.data?.full_name }} 👋
 				</div>
-				<div>
-					<div
-						v-if="!isAdmin"
-						@click="showStreakModal = true"
-						class="bg-surface-amber-2 px-2 py-1 rounded-md cursor-pointer"
-					>
-						<span> 🔥 </span>
-						<span class="text-ink-gray-9">
-							{{ streakInfo.data?.current_streak }}
-						</span>
-					</div>
+				<div
+					@click="showStreakModal = true"
+					class="bg-surface-amber-2 px-2 py-1 rounded-md cursor-pointer"
+				>
+					<span> 🔥 </span>
+					<span class="text-ink-gray-9">
+						{{ streakInfo.data?.current_streak }}
+					</span>
 				</div>
 			</div>
-
-			<div class="text-lg text-ink-gray-6 leading-6">
+			<div class="text-base text-ink-gray-6 leading-6">
 				{{ subtitle }}
 			</div>
 		</div>
 
-		<AdminHome
-			v-if="isAdmin && currentTab === 'instructor'"
-			:liveClasses="adminLiveClasses"
-			:evals="adminEvals"
-		/>
-		<StudentHome
-			v-else-if="currentTab === 'student'"
-			:myLiveClasses="myLiveClasses"
-		/>
+		<StudentHome :myLiveClasses="myLiveClasses" />
 	</div>
+
 	<Streak v-model="showStreakModal" :streakInfo="streakInfo" />
 </template>
 <script setup lang="ts">