feat: implement core movie streaming features including dashboard, watch history, authentication, and dynamic media pages

2026-08-10 16:07:47 +00:00 · 2026-05-21 10:15:02 +07:00
parent bc881aee5b
commit 4a91b03678
16 changed files with 2204 additions and 78 deletions
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Clock3, Heart, Mail, UserRound } from 'lucide-vue-next'
+
+const { user, loading, initAuth } = useSupabaseAuth()
+
+const defaultAvatar = 'https://thumbs.dreamstime.com/b/avatar-vietnam-character-your-project-others-avatar-vietnam-character-274539000.jpg'
+const memberName = computed(() => {
+  const metadata = user.value?.user_metadata || {}
+  const name = metadata.name || metadata.full_name || metadata.user_name
+  if (typeof name === 'string' && name.trim()) return name.trim()
+  return user.value?.email?.split('@')[0] || 'Thành viên'
+})
+
+const memberAvatar = computed(() => {
+  const metadata = user.value?.user_metadata || {}
+  return typeof metadata.avatar_url === 'string' && metadata.avatar_url ? metadata.avatar_url : defaultAvatar
+})
+
+onMounted(() => {
+  initAuth()
+})
+
+useHead({
+  title: 'Trang cá nhân - KR Phim',
+})
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-950 text-white">
+    <AppHeader />
+
+    <section class="mx-auto max-w-390 px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pt-32 xl:px-10">
+      <div class="mb-6">
+        <p class="text-sm font-black uppercase text-sky-300">Thành viên</p>
+        <h1 class="mt-2 text-3xl font-black sm:text-4xl">Trang cá nhân</h1>
+      </div>
+
+      <div v-if="loading" class="rounded-lg border border-white/10 bg-white/6 p-5">
+        <div class="h-24 animate-pulse rounded-md bg-white/10" />
+      </div>
+
+      <div v-else-if="user" class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_22rem]">
+        <section class="rounded-lg border border-white/10 bg-white/6 p-5 sm:p-6">
+          <div class="flex flex-col gap-5 sm:flex-row sm:items-center">
+            <img :src="memberAvatar" :alt="memberName"
+              class="size-24 shrink-0 rounded-full object-cover ring-4 ring-sky-300/30">
+            <div class="min-w-0">
+              <h2 class="truncate text-2xl font-black">{{ memberName }}</h2>
+              <p class="mt-2 inline-flex items-center gap-2 text-sm font-semibold text-slate-300">
+                <Mail class="size-4 text-sky-300" />
+                {{ user.email }}
+              </p>
+              <p class="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
+                Tài khoản này dùng để đồng bộ lịch sử xem và các dữ liệu cá nhân của bạn trên KR Phim.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <aside class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
+          <NuxtLink to="/lich-su"
+            class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
+            <span class="grid size-10 place-items-center rounded-md bg-sky-300 text-slate-950">
+              <Clock3 class="size-5" />
+            </span>
+            <span>
+              <span class="block font-black">Lịch sử xem</span>
+              <span class="text-sm text-slate-400">Xem tiếp phim đang dở</span>
+            </span>
+          </NuxtLink>
+          <NuxtLink to="/yeu-thich"
+            class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
+            <span class="grid size-10 place-items-center rounded-md bg-white/10 text-sky-300">
+              <Heart class="size-5 fill-current" />
+            </span>
+            <span>
+              <span class="block font-black">Yêu thích</span>
+              <span class="text-sm text-slate-400">Phim bạn đã lưu</span>
+            </span>
+          </NuxtLink>
+        </aside>
+      </div>
+
+      <div v-else class="rounded-lg border border-white/10 bg-white/6 p-6">
+        <UserRound class="size-10 text-sky-300" />
+        <h2 class="mt-4 text-xl font-black">Bạn chưa đăng nhập</h2>
+        <p class="mt-2 text-sm leading-6 text-slate-300">
+          Bấm nút Thành viên trên header để đăng nhập hoặc đăng ký tài khoản.
+        </p>
+      </div>
+    </section>
+  </main>
+</template>