stream/stream.ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

done ui

Browse Source
This commit is contained in:
claude
2026-03-11 02:43:33 +00:00
parent edc1a33547
commit dc06412f79
61 changed files with 7408 additions and 1606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1378
src/api/client.ts
View File

File diff suppressed because it is too large Load Diff

10
src/api/httpClientAdapter.client.ts
View File

@@ -1,6 +1,6 @@
export const customFetch = (url: string, options: RequestInit) => {
return fetch(url, {
...options,
credentials: "include",
export const customFetch: typeof fetch = (input, init) => {
return fetch(input, {
...init,
credentials: 'include',
});
}
};

23
src/components/AppTopLoadingBar.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRouteLoading } from '@/composables/useRouteLoading'
const { visible, progress } = useRouteLoading()
const barStyle = computed(() => ({
transform: `scaleX(${progress.value / 100})`,
opacity: visible.value ? '1' : '0',
}))
</script>
<template>
<div
class="pointer-events-none fixed inset-x-0 top-0 z-[9999] h-0.75"
aria-hidden="true"
>
<div
class="h-full origin-left rounded-r-full bg-primary/50 shadow-[0_0_12px_var(--colors-primary-DEFAULT)] transition-[transform,opacity] duration-200 ease-out"
:style="barStyle"
/>
</div>
</template>

141
src/components/NotificationDrawer.vue
View File

@@ -1,130 +1,51 @@
<script setup lang="ts">
import NotificationItem from '@/routes/notification/components/NotificationItem.vue';
import { useNotifications } from '@/composables/useNotifications';
import { onClickOutside } from '@vueuse/core';
import { computed, onMounted, ref, watch } from 'vue';
import { useTranslation } from 'i18next-vue';
// Ensure client-side only rendering to avoid hydration mismatch
const isMounted = ref(false);
onMounted(() => {
isMounted.value = true;
void notificationStore.fetchNotifications();
});
// Emit event when visibility changes
const emit = defineEmits(['change']);
type NotificationType = 'info' | 'success' | 'warning' | 'error' | 'video' | 'payment' | 'system';
interface Notification {
id: string;
type: NotificationType;
title: string;
message: string;
time: string;
read: boolean;
actionUrl?: string;
actionLabel?: string;
}
const visible = ref(false);
const drawerRef = ref(null);
const { t } = useTranslation();
const notificationStore = useNotifications();
// Mock notifications data
const notifications = computed<Notification[]>(() => [
{
id: '1',
type: 'video',
title: t('notification.mocks.videoProcessed.title'),
message: t('notification.mocks.videoProcessed.message'),
time: t('notification.time.minutesAgo', { count: 2 }),
read: false,
actionUrl: '/video',
actionLabel: t('notification.actions.viewVideo')
},
{
id: '2',
type: 'payment',
title: t('notification.mocks.paymentSuccess.title'),
message: t('notification.mocks.paymentSuccess.message'),
time: t('notification.time.hoursAgo', { count: 1 }),
read: false,
actionUrl: '/payments-and-plans',
actionLabel: t('notification.actions.viewReceipt')
},
{
id: '3',
type: 'warning',
title: t('notification.mocks.storageWarning.title'),
message: t('notification.mocks.storageWarning.message'),
time: t('notification.time.hoursAgo', { count: 3 }),
read: false,
actionUrl: '/payments-and-plans',
actionLabel: t('notification.actions.upgradePlan')
},
{
id: '4',
type: 'success',
title: t('notification.mocks.uploadSuccess.title'),
message: t('notification.mocks.uploadSuccess.message'),
time: t('notification.time.daysAgo', { count: 1 }),
read: true
}
]);
const mutableNotifications = ref<Notification[]>([]);
watch(notifications, (value) => {
mutableNotifications.value = value.map(item => ({ ...item }));
}, { immediate: true });
const unreadCount = computed(() => mutableNotifications.value.filter(n => !n.read).length);
const unreadCount = computed(() => notificationStore.unreadCount.value);
const mutableNotifications = computed(() => notificationStore.notifications.value.slice(0, 8));
const toggle = (event?: Event) => {
console.log(event);
// Prevent event propagation to avoid immediate closure by onClickOutside
if (event) {
// We don't stop propagation here to let other listeners work,
// but we might need to ignore the trigger element in onClickOutside
// However, since the trigger is outside this component, simple toggle logic works
// if we use a small delay or ignore ref.
// Best approach: "toggle" usually comes from a button click.
}
visible.value = !visible.value;
console.log(visible.value);
if (visible.value && !notificationStore.loaded.value) {
void notificationStore.fetchNotifications();
}
};
// Handle click outside
onClickOutside(drawerRef, (event) => {
// We can just set visible to false.
// Note: If the toggle button is clicked, it might toggle it back on immediately
// if the click event propagates.
// The user calls `toggle` from the parent's button click handler.
// If that button is outside `drawerRef` (which it is), this will fire.
// To avoid conflict, we usually check if the target is the trigger.
// But we don't have access to the trigger ref here.
// A common workaround is to use `ignore` option if we had the ref,
// or relying on the fact that if this fires, it sets specific state to false.
// If the button click then fires `toggle`, it might set it true again.
// Optimization: check if visible is true before closing.
onClickOutside(drawerRef, () => {
if (visible.value) {
visible.value = false;
}
}, {
ignore: ['[name="Notification"]'] // Assuming the trigger button has this class or we can suggest adding a class to the trigger
ignore: ['[name="Notification"]']
});
const handleMarkRead = (id: string) => {
const notification = mutableNotifications.value.find(n => n.id === id);
if (notification) notification.read = true;
const handleMarkRead = async (id: string) => {
await notificationStore.markRead(id);
};
const handleDelete = (id: string) => {
mutableNotifications.value = mutableNotifications.value.filter(n => n.id !== id);
const handleDelete = async (id: string) => {
await notificationStore.deleteNotification(id);
};
const handleMarkAllRead = () => {
mutableNotifications.value.forEach(n => n.read = true);
const handleMarkAllRead = async () => {
await notificationStore.markAllRead();
};
watch(visible, (val) => {
@@ -142,7 +63,6 @@ defineExpose({ toggle });
leave-to-class="opacity-0 -translate-x-4">
<div v-if="visible" ref="drawerRef"
class="fixed top-0 left-[80px] bottom-0 w-[380px] bg-white rounded-2xl border border-gray-300 p-3 z-50 flex flex-col shadow-lg my-3">
<!-- Header -->
<div class="flex items-center justify-between p-4">
<div class="flex items-center gap-2">
<h3 class="font-semibold text-gray-900">{{ t('notification.title') }}</h3>
@@ -157,9 +77,19 @@ defineExpose({ toggle });
</button>
</div>
<!-- Notification List -->
<div class="flex flex-col flex-1 overflow-y-auto gap-2">
<template v-if="mutableNotifications.length > 0">
<template v-if="notificationStore.loading.value">
<div v-for="i in 4" :key="i" class="p-4 rounded-xl border border-gray-200 animate-pulse">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-gray-200"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-200 rounded w-1/3"></div>
<div class="h-3 bg-gray-200 rounded w-2/3"></div>
</div>
</div>
</div>
</template>
<template v-else-if="mutableNotifications.length > 0">
<div v-for="notification in mutableNotifications" :key="notification.id"
class="border-b border-gray-50 last:border-0">
<NotificationItem :notification="notification" @mark-read="handleMarkRead"
@@ -167,14 +97,12 @@ defineExpose({ toggle });
</div>
</template>
<!-- Empty state -->
<div v-else class="py-12 text-center">
<span class="i-lucide-bell-off w-12 h-12 text-gray-300 mx-auto block mb-3"></span>
<p class="text-gray-500 text-sm">{{ t('notification.empty.title') }}</p>
</div>
</div>
<!-- Footer -->
<div v-if="mutableNotifications.length > 0" class="p-3 border-t border-gray-100 bg-gray-50/50">
<router-link to="/notification"
class="block w-full text-center text-sm text-primary font-medium hover:underline"
@@ -186,16 +114,3 @@ defineExpose({ toggle });
</Transition>
</Teleport>
</template>
<!-- <style>
.notification-popover {
border-radius: 16px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
overflow: hidden;
}
.notification-popover .p-popover-content {
padding: 0 !important;
}
</style> -->

9
src/components/RootLayout.vue
View File

@@ -1,3 +1,10 @@
<template>
<ClientOnly>
<AppTopLoadingBar />
</ClientOnly>
<router-view/>
</template>
</template>
<script setup lang="ts">
import ClientOnly from '@/components/ClientOnly';
import AppTopLoadingBar from '@/components/AppTopLoadingBar.vue'
</script>

4
src/components/icons/Bell.vue
View File

@@ -1,5 +1,5 @@
<template>
<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 532"><path d="M10 391c0 19 16 35 36 35h376c20 0 36-16 36-35 0-9-3-16-8-23l-10-12c-30-37-46-84-46-132v-22c0-77-55-142-128-157v-3c0-18-14-32-32-32s-32 14-32 32v3C129 60 74 125 74 202v22c0 48-16 95-46 132l-10 12c-5 7-8 14-8 23z" fill="#a6acb9"/><path d="M172 474c7 28 32 48 62 48s55-20 62-48H172z" fill="#1e3050"/></svg>
<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 532"><path d="M10 391c0 19 16 35 36 35h376c20 0 36-16 36-35 0-9-3-16-8-23l-10-12c-30-37-46-84-46-132v-22c0-77-55-142-128-157v-3c0-18-14-32-32-32s-32 14-32 32v3C129 60 74 125 74 202v22c0 48-16 95-46 132l-10 12c-5 7-8 14-8 23z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M172 474c7 28 32 48 62 48s55-20 62-48H172z" fill="var(--colors-primary-DEFAULT)"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -258 468 532">
<path
d="M224-248c-13 0-24 11-24 24v10C119-203 56-133 56-48v15C56 4 46 41 27 74L5 111c-3 6-5 13-5 19 0 21 17 38 38 38h372c21 0 38-17 38-38 0-6-2-13-5-19l-22-37c-19-33-29-70-29-108v-14c0-85-63-155-144-166v-10c0-13-11-24-24-24zm168 368H56l12-22c24-40 36-85 36-131v-15c0-66 54-120 120-120s120 54 120 120v15c0 46 12 91 36 131l12 22zm-236 96c10 28 37 48 68 48s58-20 68-48H156z"
@@ -8,4 +8,4 @@
</template>
<script lang="ts" setup>
defineProps<{ filled?: boolean }>();
</script>
</script>

7
src/components/icons/CoinsIcon.vue
View File

@@ -5,9 +5,6 @@ defineProps<{
</script>
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9"/>
<path d="M12 16V8"/>
<path d="M9.5 10a2.5 2.5 0 0 1 5 0v4a2.5 2.5 0 0 1-5 0"/>
</svg>
<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 532"><path d="M26 427c0-121 70-194 157-273h134c87 79 157 152 157 273 0 44-35 79-79 79H105c-44 0-79-35-79-79zM138 42c0-9 7-16 16-16h192c9 0 16 7 16 16 0 3 0 5-2 8l-46 88H187l-47-88c-1-3-2-5-2-8zm56 267c0 21 15 38 36 42l38 6c13 2 22 13 22 26 0 15-12 27-27 27h-53c-4 0-8 4-8 8s4 8 8 8h32v16c0 4 4 8 8 8s8-4 8-8v-16h5c24 0 43-19 43-43 0-20-15-38-36-42l-38-6c-12-2-22-13-22-26 0-15 12-27 27-27h45c4 0 8-3 8-8 0-4-4-8-8-8h-24v-16c0-4-4-8-8-8s-8 4-8 8v16h-5c-24 0-43 19-43 43z" fill="#a6acb9"/><path d="M346 26c9 0 16 7 16 16 0 3-1 5-2 8l-46 88H187l-47-88c-1-3-2-5-2-8 0-9 7-16 16-16h192zM126 57l45 86C85 222 10 299 10 427c0 52 43 95 95 95h290c52 0 95-43 95-95 0-128-75-205-161-284l45-86c3-5 4-10 4-15 0-18-14-32-32-32H154c-18 0-32 14-32 32 0 5 1 10 4 15zM26 427c0-121 70-194 157-273h134c87 79 157 152 157 273 0 44-35 79-79 79H105c-44 0-79-35-79-79zm224-185c-4 0-8 4-8 8v16h-5c-24 0-43 19-43 43 0 20 15 38 36 42l38 6c13 2 22 13 22 26 0 15-12 27-27 27h-53c-4 0-8 4-8 8s4 8 8 8h32v16c0 4 4 8 8 8s8-4 8-8v-16h5c24 0 43-19 43-43 0-20-15-38-36-42l-38-6c-12-2-22-13-22-26 0-15 12-27 27-27h45c4 0 8-3 8-8 0-4-4-8-8-8h-24v-16c0-4-4-8-8-8z" fill="currentColor"/></svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" width="500" height="532" viewBox="6 -258 500 532"><path d="m379-191-46 81c84 77 163 154 163 279 0 52-43 95-95 95H111c-52 0-95-43-95-95C16 44 96-33 179-110l-46-81c-3-6-5-12-5-19 0-21 17-38 38-38h180c21 0 38 17 38 38 0 7-2 13-5 19zM227-88l-1 1C134-4 64 61 64 169c0 26 21 47 47 47h290c26 0 47-21 47-47C448 61 378-4 286-87l-1-1h-58zm-7-48h72l37-64H183l37 64zm40 96c11 0 20 9 20 20v4h8c11 0 20 9 20 20s-9 20-20 20h-47c-7 0-13 6-13 13 0 6 4 11 10 12l42 7c25 4 44 26 44 52s-19 47-44 51v5c0 11-9 20-20 20s-20-9-20-20v-4h-24c-11 0-20-9-20-20s9-20 20-20h56c6 0 12-5 12-12 0-6-4-12-10-13l-42-7c-25-4-44-26-44-51 0-29 23-53 52-53v-4c0-11 9-20 20-20z" fill="currentColor"/></svg>
</template>

6
src/components/icons/Home.vue
View File

@@ -1,10 +1,10 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 539 535">
<path d="M61 281c2-1 4-3 6-5L269 89l202 187c2 2 4 4 6 5v180c0 35-29 64-64 64H125c-35 0-64-29-64-64V281z"
fill="#a6acb9" />
fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)" />
<path
d="M247 22c13-12 32-12 44 0l224 208c13 12 13 32 1 45s-32 14-45 2L269 89 67 276c-13 12-33 12-45-1s-12-33 1-45L247 22z"
fill="#1e3050" />
fill="var(--colors-primary-DEFAULT)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-11 -259 535 533">
<path
@@ -14,4 +14,4 @@
</template>
<script lang="ts" setup>
defineProps<{ filled?: boolean }>();
</script>
</script>

2
src/components/icons/SettingsIcon.vue
View File

@@ -1,5 +1,5 @@
<template>
<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567 580"><path d="M18 190c-8 14-6 32 5 43l37 36v42l-37 36c-11 12-13 29-5 43l46 80c8 14 24 21 40 17l50-14c11 8 23 15 36 21l13 50c4 15 18 26 34 26h93c16 0 30-11 34-26l13-50c13-6 25-13 36-21l50 14c15 4 32-3 40-17l46-80c8-14 6-31-6-43l-37-36c1-7 1-14 1-21s0-14-1-21l37-36c12-11 14-29 6-43l-46-80c-8-14-24-21-40-17l-50 14c-11-8-23-15-36-21l-13-50c-4-15-18-26-34-26h-93c-16 0-30 11-34 26l-13 50c-13 6-25 13-36 21l-50-13c-16-5-32 2-40 16l-46 80zm377 100c1 41-20 79-55 99-35 21-79 21-114 0-35-20-56-58-54-99-2-41 19-79 54-99 35-21 79-21 114 0 35 20 56 58 55 99zm-195 0c-2 31 14 59 40 75 27 15 59 15 86 0 26-16 42-44 41-75 1-31-15-59-41-75-27-15-59-15-86 0-26 16-42 44-40 75z" fill="#a6acb9"/><path d="M283 206c46 0 84 37 84 84 0 46-37 84-83 84-47 0-85-37-85-84 0-46 37-84 84-84zm1 196c61 0 111-51 111-112 0-62-51-112-112-112-62 0-112 51-112 112 0 62 51 112 113 112z" fill="#1e3050"/></svg>
<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567 580"><path d="M18 190c-8 14-6 32 5 43l37 36v42l-37 36c-11 12-13 29-5 43l46 80c8 14 24 21 40 17l50-14c11 8 23 15 36 21l13 50c4 15 18 26 34 26h93c16 0 30-11 34-26l13-50c13-6 25-13 36-21l50 14c15 4 32-3 40-17l46-80c8-14 6-31-6-43l-37-36c1-7 1-14 1-21s0-14-1-21l37-36c12-11 14-29 6-43l-46-80c-8-14-24-21-40-17l-50 14c-11-8-23-15-36-21l-13-50c-4-15-18-26-34-26h-93c-16 0-30 11-34 26l-13 50c-13 6-25 13-36 21l-50-13c-16-5-32 2-40 16l-46 80zm377 100c1 41-20 79-55 99-35 21-79 21-114 0-35-20-56-58-54-99-2-41 19-79 54-99 35-21 79-21 114 0 35 20 56 58 55 99zm-195 0c-2 31 14 59 40 75 27 15 59 15 86 0 26-16 42-44 41-75 1-31-15-59-41-75-27-15-59-15-86 0-26 16-42 44-40 75z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M283 206c46 0 84 37 84 84 0 46-37 84-83 84-47 0-85-37-85-84 0-46 37-84 84-84zm1 196c61 0 111-51 111-112 0-62-51-112-112-112-62 0-112 51-112 112 0 62 51 112 113 112z" fill="var(--colors-primary-DEFAULT)"/></svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path

6
src/components/icons/Video.vue
View File

@@ -1,9 +1,9 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 532 404">
<path d="M10 74v256c0 35 29 64 64 64h256c35 0 64-29 64-64V74c0-35-29-64-64-64H74c-35 0-64 29-64 64z"
fill="#a6acb9" />
fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)" />
<path d="M394 135v134l90 72c4 3 9 5 14 5 13 0 24-11 24-24V82c0-13-11-24-24-24-5 0-10 2-14 5l-90 72z"
fill="#1e3050" />
fill="var(--colors-primary-DEFAULT)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="22 -194 564 404">
<path
@@ -13,4 +13,4 @@
</template>
<script lang="ts" setup>
defineProps<{ filled?: boolean }>();
</script>
</script>

128
src/composables/useNotifications.ts Normal file
View File

@@ -0,0 +1,128 @@
import { client } from '@/api/client';
import { computed, ref } from 'vue';
import { useTranslation } from 'i18next-vue';
export type NotificationType = 'info' | 'success' | 'warning' | 'error' | 'video' | 'payment' | 'system';
export type AppNotification = {
id: string;
type: NotificationType;
title: string;
message: string;
time: string;
read: boolean;
actionUrl?: string;
actionLabel?: string;
createdAt?: string;
};
type NotificationApiItem = {
id?: string;
type?: string;
title?: string;
message?: string;
read?: boolean;
actionUrl?: string;
actionLabel?: string;
action_url?: string;
action_label?: string;
created_at?: string;
};
const notifications = ref<AppNotification[]>([]);
const loading = ref(false);
const loaded = ref(false);
const normalizeType = (value?: string): NotificationType => {
switch ((value || '').toLowerCase()) {
case 'video':
case 'payment':
case 'warning':
case 'error':
case 'success':
case 'system':
return value as NotificationType;
default:
return 'info';
}
};
export function useNotifications() {
const { t, i18next } = useTranslation();
const formatRelativeTime = (value?: string) => {
if (!value) return '';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return '';
const diffMs = Date.now() - date.getTime();
const minutes = Math.max(1, Math.floor(diffMs / 60000));
if (minutes < 60) return t('notification.time.minutesAgo', { count: minutes });
const hours = Math.floor(minutes / 60);
if (hours < 24) return t('notification.time.hoursAgo', { count: hours });
const days = Math.floor(hours / 24);
return t('notification.time.daysAgo', { count: Math.max(1, days) });
};
const mapNotification = (item: NotificationApiItem): AppNotification => ({
id: item.id || '',
type: normalizeType(item.type),
title: item.title || '',
message: item.message || '',
time: formatRelativeTime(item.created_at),
read: Boolean(item.read),
actionUrl: item.actionUrl || item.action_url || undefined,
actionLabel: item.actionLabel || item.action_label || undefined,
createdAt: item.created_at,
});
const fetchNotifications = async () => {
loading.value = true;
try {
const response = await client.notifications.notificationsList({ baseUrl: '/r' });
notifications.value = (((response.data as any)?.data?.notifications || []) as NotificationApiItem[]).map(mapNotification);
loaded.value = true;
return notifications.value;
} finally {
loading.value = false;
}
};
const markRead = async (id: string) => {
if (!id) return;
await client.notifications.readCreate(id, { baseUrl: '/r' });
const item = notifications.value.find(notification => notification.id === id);
if (item) item.read = true;
};
const deleteNotification = async (id: string) => {
if (!id) return;
await client.notifications.notificationsDelete2(id, { baseUrl: '/r' });
notifications.value = notifications.value.filter(notification => notification.id !== id);
};
const markAllRead = async () => {
await client.notifications.readAllCreate({ baseUrl: '/r' });
notifications.value = notifications.value.map(item => ({ ...item, read: true }));
};
const clearAll = async () => {
await client.notifications.notificationsDelete({ baseUrl: '/r' });
notifications.value = [];
};
const unreadCount = computed(() => notifications.value.filter(item => !item.read).length);
return {
notifications,
loading,
loaded,
unreadCount,
locale: computed(() => i18next.resolvedLanguage),
fetchNotifications,
markRead,
deleteNotification,
markAllRead,
clearAll,
};
}

59
src/composables/useRouteLoading.ts Normal file
View File

@@ -0,0 +1,59 @@
import { ref } from 'vue'
const visible = ref(false)
const progress = ref(0)
let timer: ReturnType<typeof setInterval> | null = null
function start() {
if (timer) clearInterval(timer)
visible.value = true
progress.value = 8
timer = setInterval(() => {
if (progress.value < 80) {
progress.value += Math.random() * 12
} else if (progress.value < 95) {
progress.value += Math.random() * 3
}
}, 200)
}
function finish() {
if (timer) {
clearInterval(timer)
timer = null
}
progress.value = 100
setTimeout(() => {
visible.value = false
progress.value = 0
}, 250)
}
function fail() {
if (timer) {
clearInterval(timer)
timer = null
}
progress.value = 100
setTimeout(() => {
visible.value = false
progress.value = 0
}, 250)
}
export function useRouteLoading() {
return {
visible,
progress,
start,
finish,
fail,
}
}

127
src/composables/useSettingsPreferencesQuery.ts Normal file
View File

@@ -0,0 +1,127 @@
import { client, type PreferencesSettingsPreferencesRequest } from '@/api/client';
import { useQuery } from '@pinia/colada';
export const SETTINGS_PREFERENCES_QUERY_KEY = ['settings', 'preferences'] as const;
export type SettingsPreferencesSnapshot = {
emailNotifications: boolean;
pushNotifications: boolean;
marketingNotifications: boolean;
telegramNotifications: boolean;
autoplay: boolean;
loop: boolean;
muted: boolean;
showControls: boolean;
pip: boolean;
airplay: boolean;
chromecast: boolean;
};
export type NotificationSettingsDraft = {
email: boolean;
push: boolean;
marketing: boolean;
telegram: boolean;
};
export type PlayerSettingsDraft = {
autoplay: boolean;
loop: boolean;
muted: boolean;
showControls: boolean;
pip: boolean;
airplay: boolean;
chromecast: boolean;
encrytion_m3u8: boolean;
};
type PreferencesResponse = {
data?: {
preferences?: PreferencesSettingsPreferencesRequest;
};
};
const DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT: SettingsPreferencesSnapshot = {
emailNotifications: true,
pushNotifications: true,
marketingNotifications: false,
telegramNotifications: false,
autoplay: false,
loop: false,
muted: false,
showControls: true,
pip: true,
airplay: true,
chromecast: true,
};
const normalizePreferencesSnapshot = (responseData: unknown): SettingsPreferencesSnapshot => {
const preferences = (responseData as PreferencesResponse | undefined)?.data?.preferences;
return {
emailNotifications: preferences?.email_notifications ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.emailNotifications,
pushNotifications: preferences?.push_notifications ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.pushNotifications,
marketingNotifications: preferences?.marketing_notifications ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.marketingNotifications,
telegramNotifications: preferences?.telegram_notifications ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.telegramNotifications,
autoplay: preferences?.autoplay ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.autoplay,
loop: preferences?.loop ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.loop,
muted: preferences?.muted ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.muted,
showControls: preferences?.show_controls ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.showControls,
pip: preferences?.pip ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.pip,
airplay: preferences?.airplay ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.airplay,
chromecast: preferences?.chromecast ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.chromecast,
};
};
export const createNotificationSettingsDraft = (
snapshot: SettingsPreferencesSnapshot = DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT,
): NotificationSettingsDraft => ({
email: snapshot.emailNotifications,
push: snapshot.pushNotifications,
marketing: snapshot.marketingNotifications,
telegram: snapshot.telegramNotifications,
});
export const createPlayerSettingsDraft = (
snapshot: SettingsPreferencesSnapshot = DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT,
): PlayerSettingsDraft => ({
autoplay: snapshot.autoplay,
loop: snapshot.loop,
muted: snapshot.muted,
showControls: snapshot.showControls,
pip: snapshot.pip,
airplay: snapshot.airplay,
chromecast: snapshot.chromecast,
encrytion_m3u8: snapshot.chromecast
});
export const toNotificationPreferencesPayload = (
draft: NotificationSettingsDraft,
): PreferencesSettingsPreferencesRequest => ({
email_notifications: draft.email,
push_notifications: draft.push,
marketing_notifications: draft.marketing,
telegram_notifications: draft.telegram,
});
export const toPlayerPreferencesPayload = (
draft: PlayerSettingsDraft,
): PreferencesSettingsPreferencesRequest => ({
autoplay: draft.autoplay,
loop: draft.loop,
muted: draft.muted,
show_controls: draft.showControls,
pip: draft.pip,
airplay: draft.airplay,
chromecast: draft.chromecast,
});
export function useSettingsPreferencesQuery() {
return useQuery({
key: () => SETTINGS_PREFERENCES_QUERY_KEY,
query: async () => {
const response = await client.settings.preferencesList({ baseUrl: '/r' });
return normalizePreferencesSnapshot(response.data);
},
});
}

23
src/composables/useUploadQueue.ts
View File

@@ -1,3 +1,4 @@
import { client, ContentType } from '@/api/client';
import { computed, ref } from 'vue';
export interface QueueItem {
@@ -12,6 +13,9 @@ export interface QueueItem {
thumbnail?: string;
file?: File; // Keep reference to file for local uploads
url?: string; // Keep reference to url for remote uploads
playbackUrl?: string;
videoId?: string;
mergeId?: string;
// Upload chunk tracking
activeChunks?: number;
uploadedUrls?: string[];
@@ -299,6 +303,25 @@ export function useUploadQueue() {
throw new Error(data.error || t('upload.errors.mergeFailed'));
}
const playbackUrl = data.playback_url || data.play_url;
if (!playbackUrl) {
throw new Error('Playback URL missing after merge');
}
const createResponse = await client.videos.videosCreate({
title: item.file.name.replace(/\.[^.]+$/, ''),
description: '',
url: playbackUrl,
size: item.file.size,
duration: 0,
format: item.file.type || 'video/mp4',
}, { baseUrl: '/r' });
const createdVideo = (createResponse.data as any)?.data?.video || (createResponse.data as any)?.data;
item.videoId = createdVideo?.id;
item.mergeId = data.id;
item.playbackUrl = playbackUrl;
item.url = playbackUrl;
item.status = 'complete';
item.progress = 100;
item.uploaded = item.total;

40
src/composables/useUsageQuery.ts Normal file
View File

@@ -0,0 +1,40 @@
import { client } from '@/api/client';
import { useQuery } from '@pinia/colada';
export const USAGE_QUERY_KEY = ['usage'] as const;
export type UsageSnapshot = {
totalVideos: number;
totalStorage: number;
};
type UsageResponse = {
data?: {
total_videos?: number;
total_storage?: number;
};
};
const DEFAULT_USAGE_SNAPSHOT: UsageSnapshot = {
totalVideos: 0,
totalStorage: 0,
};
const normalizeUsageSnapshot = (responseData: unknown): UsageSnapshot => {
const usage = (responseData as UsageResponse | undefined)?.data;
return {
totalVideos: usage?.total_videos ?? DEFAULT_USAGE_SNAPSHOT.totalVideos,
totalStorage: usage?.total_storage ?? DEFAULT_USAGE_SNAPSHOT.totalStorage,
};
};
export function useUsageQuery() {
return useQuery({
key: () => USAGE_QUERY_KEY,
query: async () => {
const response = await client.usage.usageList({ baseUrl: '/r' });
return normalizeUsageSnapshot(response.data);
},
});
}

4
src/lib/translation/index.ts
View File

@@ -1,5 +1,4 @@
import i18next from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import I18NextHttpBackend, { HttpBackendOptions } from "i18next-http-backend";
const backendOptions: HttpBackendOptions = {
loadPath: 'http://localhost:5173/locales/{{lng}}/{{ns}}.json',
@@ -27,7 +26,6 @@ const i18n = i18next.createInstance();
i18n
.use(I18NextHttpBackend)
.use(LanguageDetector)
.init({
lng,
supportedLngs: ["en", "vi"],
@@ -41,4 +39,4 @@ i18n
});
return i18n;
};
export default createI18nInstance;
export default createI18nInstance;

71
src/routes/auth/google-finalize.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<div class="flex flex-col items-center gap-3 py-6 text-center">
<div class="i-svg-spinners-90-ring-with-bg h-10 w-10 text-blue-600"></div>
<p class="text-sm text-gray-600">{{ message }}</p>
</div>
</template>
<script setup lang="ts">
import { useAppToast } from '@/composables/useAppToast';
import { useAuthStore } from '@/stores/auth';
import { computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const auth = useAuthStore();
const route = useRoute();
const router = useRouter();
const toast = useAppToast();
const status = computed(() => String(route.query.status ?? 'error'));
const reason = computed(() => String(route.query.reason ?? 'google_login_failed'));
const reasonMessages: Record<string, string> = {
missing_state: 'Google login session is invalid. Please try again.',
invalid_state: 'Google login session has expired. Please try again.',
missing_code: 'Google did not return an authorization code.',
access_denied: 'Google login was cancelled.',
exchange_failed: 'Failed to sign in with Google.',
userinfo_failed: 'Failed to load your Google account information.',
userinfo_parse_failed: 'Failed to read your Google account information.',
missing_email: 'Your Google account did not provide an email address.',
create_user_failed: 'Failed to create your account.',
update_user_failed: 'Failed to update your account.',
reload_user_failed: 'Failed to finish signing you in.',
session_failed: 'Failed to create your sign-in session.',
fetch_me_failed: 'Signed in with Google, but failed to load your account.',
google_login_failed: 'Google login failed. Please try again.',
};
const errorMessage = computed(() => reasonMessages[reason.value] ?? reasonMessages.google_login_failed);
const message = computed(() => status.value === 'success' ? 'Signing you in with Google...' : errorMessage.value);
onMounted(async () => {
if (status.value !== 'success') {
toast.add({
severity: 'error',
summary: 'Google login failed',
detail: errorMessage.value,
life: 5000,
});
await router.replace({ name: 'login', query: { reason: reason.value } });
return;
}
try {
const user = await auth.fetchMe();
if (!user) {
throw new Error('missing_user');
}
await router.replace({ name: 'overview' });
} catch {
toast.add({
severity: 'error',
summary: 'Google login failed',
detail: 'Signed in with Google, but failed to load your account.',
life: 5000,
});
await router.replace({ name: 'login', query: { reason: 'fetch_me_failed' } });
}
});
</script>

5
src/routes/auth/layout.vue
View File

@@ -45,6 +45,11 @@ const content = computed(() => ({
title: t('auth.layout.forgot.title'),
subtitle: t('auth.layout.forgot.subtitle'),
headTitle: t('auth.layout.forgot.headTitle')
},
'google-auth-finalize': {
title: 'Google sign in',
subtitle: 'Completing your Google sign in.',
headTitle: 'Google sign in - Holistream'
}
}));
</script>

39
src/routes/index.ts
View File

@@ -1,3 +1,4 @@
import { useRouteLoading } from "@/composables/useRouteLoading";
import { useAuthStore } from "@/stores/auth";
import { headSymbol, type ReactiveHead, type ResolvableValue } from "@unhead/vue";
import { inject } from "vue";
@@ -68,6 +69,11 @@ const routes: RouteData[] = [
name: "forgot",
component: () => import("./auth/forgot.vue"),
},
{
path: "auth/google/finalize",
name: "google-auth-finalize",
component: () => import("./auth/google-finalize.vue"),
},
],
},
{
@@ -85,16 +91,6 @@ const routes: RouteData[] = [
},
},
},
// {
// path: "upload",
// name: "upload",
// component: () => import("./upload/Upload.vue"),
// meta: {
// head: {
// title: "Upload - Holistream",
// },
// },
// },
{
path: "videos",
children: [
@@ -114,16 +110,6 @@ const routes: RouteData[] = [
},
},
},
// {
// path: ":id",
// name: "video-detail",
// component: () => import("./video/DetailVideo.vue"),
// meta: {
// head: {
// title: "Edit Video - Holistream",
// },
// },
// },
],
},
{
@@ -255,16 +241,27 @@ const createAppRouter = () => {
},
});
const loading = useRouteLoading()
router.beforeEach((to, from) => {
const auth = useAuthStore();
const head = inject(headSymbol);
(head as any).push(to.meta.head || {});
(head as any).push(to.meta.head || {});
if (to.fullPath !== from.fullPath && !import.meta.env.SSR) {
loading.start()
}
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!auth.user) {
return { name: "login" };
}
}
});
router.afterEach(() => {
loading.finish()
})
router.onError(() => {
loading.fail()
})
return router;
};

116
src/routes/notification/Notification.vue
View File

@@ -1,117 +1,49 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { useTranslation } from 'i18next-vue';
import PageHeader from '@/components/dashboard/PageHeader.vue';
import NotificationActions from './components/NotificationActions.vue';
import NotificationList from './components/NotificationList.vue';
import NotificationTabs from './components/NotificationTabs.vue';
import { useNotifications } from '@/composables/useNotifications';
type NotificationType = 'info' | 'success' | 'warning' | 'error' | 'video' | 'payment' | 'system';
interface Notification {
id: string;
type: NotificationType;
title: string;
message: string;
time: string;
read: boolean;
actionUrl?: string;
actionLabel?: string;
}
const loading = ref(false);
const activeTab = ref('all');
const { t } = useTranslation();
const notificationStore = useNotifications();
const notifications = ref<Notification[]>([
{
id: '1',
type: 'video',
title: t('notification.mocks.videoProcessed.title'),
message: t('notification.mocks.videoProcessed.message'),
time: t('notification.time.minutesAgo', { count: 2 }),
read: false,
actionUrl: '/video',
actionLabel: t('notification.actions.viewVideo')
},
{
id: '2',
type: 'payment',
title: t('notification.mocks.paymentSuccess.title'),
message: t('notification.mocks.paymentSuccess.message'),
time: t('notification.time.hoursAgo', { count: 1 }),
read: false,
actionUrl: '/payments-and-plans',
actionLabel: t('notification.actions.viewReceipt')
},
{
id: '3',
type: 'warning',
title: t('notification.mocks.storageWarning.title'),
message: t('notification.mocks.storageWarning.message'),
time: t('notification.time.hoursAgo', { count: 3 }),
read: false,
actionUrl: '/payments-and-plans',
actionLabel: t('notification.actions.upgradePlan')
},
{
id: '4',
type: 'success',
title: t('notification.mocks.uploadSuccess.title'),
message: t('notification.mocks.uploadSuccess.message'),
time: t('notification.time.daysAgo', { count: 1 }),
read: true
},
{
id: '5',
type: 'system',
title: t('notification.mocks.maintenance.title'),
message: t('notification.mocks.maintenance.message'),
time: t('notification.time.daysAgo', { count: 2 }),
read: true
},
{
id: '6',
type: 'info',
title: t('notification.mocks.newFeature.title'),
message: t('notification.mocks.newFeature.message'),
time: t('notification.time.daysAgo', { count: 3 }),
read: true,
actionUrl: '/video',
actionLabel: t('notification.actions.tryNow')
}
]);
onMounted(() => {
void notificationStore.fetchNotifications();
});
const unreadCount = computed(() => notifications.value.filter(n => !n.read).length);
const unreadCount = computed(() => notificationStore.unreadCount.value);
const tabs = computed(() => [
{ key: 'all', label: t('notification.tabs.all'), icon: 'i-lucide-inbox', count: notifications.value.length },
{ key: 'all', label: t('notification.tabs.all'), icon: 'i-lucide-inbox', count: notificationStore.notifications.value.length },
{ key: 'unread', label: t('notification.tabs.unread'), icon: 'i-lucide-bell-dot', count: unreadCount.value },
{ key: 'video', label: t('notification.tabs.videos'), icon: 'i-lucide-video', count: notifications.value.filter(n => n.type === 'video').length },
{ key: 'payment', label: t('notification.tabs.payments'), icon: 'i-lucide-credit-card', count: notifications.value.filter(n => n.type === 'payment').length }
{ key: 'video', label: t('notification.tabs.videos'), icon: 'i-lucide-video', count: notificationStore.notifications.value.filter(n => n.type === 'video').length },
{ key: 'payment', label: t('notification.tabs.payments'), icon: 'i-lucide-credit-card', count: notificationStore.notifications.value.filter(n => n.type === 'payment').length },
]);
const filteredNotifications = computed(() => {
if (activeTab.value === 'all') return notifications.value;
if (activeTab.value === 'unread') return notifications.value.filter(n => !n.read);
return notifications.value.filter(n => n.type === activeTab.value);
if (activeTab.value === 'all') return notificationStore.notifications.value;
if (activeTab.value === 'unread') return notificationStore.notifications.value.filter(n => !n.read);
return notificationStore.notifications.value.filter(n => n.type === activeTab.value);
});
const handleMarkRead = (id: string) => {
const notification = notifications.value.find(n => n.id === id);
if (notification) notification.read = true;
const handleMarkRead = async (id: string) => {
await notificationStore.markRead(id);
};
const handleDelete = (id: string) => {
notifications.value = notifications.value.filter(n => n.id !== id);
const handleDelete = async (id: string) => {
await notificationStore.deleteNotification(id);
};
const handleMarkAllRead = () => {
notifications.value.forEach(n => n.read = true);
const handleMarkAllRead = async () => {
await notificationStore.markAllRead();
};
const handleClearAll = () => {
notifications.value = [];
const handleClearAll = async () => {
await notificationStore.clearAll();
};
</script>
@@ -128,8 +60,8 @@ const handleClearAll = () => {
<div class="w-full max-w-4xl mx-auto mt-6">
<div class="notification-container bg-white rounded-2xl border border-gray-200 p-6 shadow-sm">
<NotificationActions
:loading="loading"
:total-count="notifications.length"
:loading="notificationStore.loading.value"
:total-count="notificationStore.notifications.value.length"
:unread-count="unreadCount"
@mark-all-read="handleMarkAllRead"
@clear-all="handleClearAll"
@@ -143,7 +75,7 @@ const handleClearAll = () => {
<NotificationList
:notifications="filteredNotifications"
:loading="loading"
:loading="notificationStore.loading.value"
@mark-read="handleMarkRead"
@delete="handleDelete"
/>

50
src/routes/overview/Overview.vue
View File

@@ -1,48 +1,42 @@
<script setup lang="tsx">
import { client, type ModelVideo } from '@/api/client';
import { useUsageQuery } from '@/composables/useUsageQuery';
import PageHeader from '@/components/dashboard/PageHeader.vue';
import { onMounted, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import NameGradient from './components/NameGradient.vue';
import QuickActions from './components/QuickActions.vue';
import RecentVideos from './components/RecentVideos.vue';
import StatsOverview from './components/StatsOverview.vue';
const loading = ref(true);
const recentVideosLoading = ref(true);
const recentVideos = ref<ModelVideo[]>([]);
const { data: usageSnapshot, isPending: isUsagePending } = useUsageQuery();
const stats = ref({
totalVideos: 0,
totalViews: 0,
storageUsed: 0,
const stats = computed(() => ({
totalVideos: usageSnapshot.value?.totalVideos ?? 0,
totalViews: recentVideos.value.reduce((sum, v: any) => sum + (v.views || 0), 0),
storageUsed: usageSnapshot.value?.totalStorage ?? 0,
storageLimit: 10737418240,
uploadsThisMonth: 0
});
}));
const statsLoading = computed(() => recentVideosLoading.value || (isUsagePending.value && !usageSnapshot.value));
const fetchDashboardData = async () => {
loading.value = true;
recentVideosLoading.value = true;
try {
const response = await client.videos.videosList({ page: 1, limit: 5 });
const response = await client.videos.videosList({ page: 1, limit: 5 }, { baseUrl: '/r' });
const body = response.data as any;
if (body.data && Array.isArray(body.data)) {
recentVideos.value = body.data;
stats.value.totalVideos = body.data.length;
} else if (Array.isArray(body)) {
recentVideos.value = body;
stats.value.totalVideos = body.length;
}
const videos = Array.isArray(body?.data?.videos)
? body.data.videos
: Array.isArray(body?.videos)
? body.videos
: [];
stats.value.totalViews = recentVideos.value.reduce((sum, v: any) => sum + (v.views || 0), 0);
stats.value.storageUsed = recentVideos.value.reduce((sum, v) => sum + (v.size || 0), 0);
stats.value.uploadsThisMonth = recentVideos.value.filter(v => {
const uploadDate = new Date(v.created_at || '');
const now = new Date();
return uploadDate.getMonth() === now.getMonth() && uploadDate.getFullYear() === now.getFullYear();
}).length;
recentVideos.value = videos;
} catch (err) {
console.error('Failed to fetch dashboard data:', err);
} finally {
loading.value = false;
recentVideosLoading.value = false;
}
};
@@ -57,11 +51,11 @@ onMounted(() => {
{ label: $t('pageHeader.dashboard') }
]" />
<StatsOverview :loading="loading" :stats="stats" />
<StatsOverview :loading="statsLoading" :stats="stats" />
<QuickActions :loading="loading" />
<QuickActions :loading="recentVideosLoading" />
<RecentVideos :loading="loading" :videos="recentVideos" />
<RecentVideos :loading="recentVideosLoading" :videos="recentVideos" />
<!-- <StorageUsage :loading="loading" :stats="stats" /> -->
</div>

4
src/routes/overview/components/QuickActions.vue
View File

@@ -30,7 +30,7 @@ const quickActions = computed(() => [
title: t('overview.quickActions.videoLibrary.title'),
description: t('overview.quickActions.videoLibrary.description'),
icon: Video,
onClick: () => router.push('/video')
onClick: () => router.push('/videos')
},
{
title: t('overview.quickActions.analytics.title'),
@@ -42,7 +42,7 @@ const quickActions = computed(() => [
title: t('overview.quickActions.managePlan.title'),
description: t('overview.quickActions.managePlan.description'),
icon: Credit,
onClick: () => router.push('/payments-and-plans')
onClick: () => router.push('/settings/billing')
},
]);
</script>

6
src/routes/overview/components/RecentVideos.vue
View File

@@ -4,6 +4,7 @@ import EmptyState from '@/components/dashboard/EmptyState.vue';
import { formatDate, formatDuration } from '@/lib/utils';
import { useTranslation } from 'i18next-vue';
import { useRouter } from 'vue-router';
import { useUIState } from '@/stores/uiState';
interface Props {
loading: boolean;
@@ -13,6 +14,7 @@ interface Props {
defineProps<Props>();
const router = useRouter();
const uiState = useUIState();
const { t } = useTranslation();
const getStatusClass = (status?: string) => {
@@ -48,7 +50,7 @@ const getStatusClass = (status?: string) => {
<div v-else>
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold">{{ t('overview.recentVideos.title') }}</h2>
<router-link to="/video"
<router-link to="/videos"
class="text-sm text-primary hover:underline font-medium flex items-center gap-1">
{{ t('overview.recentVideos.viewAll') }}
<span class="i-heroicons-arrow-right w-4 h-4" />
@@ -58,7 +60,7 @@ const getStatusClass = (status?: string) => {
<EmptyState v-if="videos.length === 0" :title="t('overview.recentVideos.emptyTitle')"
:description="t('overview.recentVideos.emptyDescription')"
imageUrl="https://cdn-icons-png.flaticon.com/512/7486/7486747.png" :actionLabel="t('overview.recentVideos.emptyAction')"
:onAction="() => router.push('/upload')" />
:onAction="() => uiState.toggleUploadDialog()" />
<div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden">
<div class="overflow-x-auto">

10
src/routes/overview/components/StatsOverview.vue
View File

@@ -11,7 +11,6 @@ interface Props {
totalViews: number;
storageUsed: number;
storageLimit: number;
uploadsThisMonth: number;
};
}
@@ -21,8 +20,8 @@ const localeTag = computed(() => i18next.resolvedLanguage === 'vi' ? 'vi-VN' : '
</script>
<template>
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div v-for="i in 4" :key="i" class="bg-surface rounded-xl border border-gray-200 p-6">
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div v-for="i in 3" :key="i" class="bg-surface rounded-xl border border-gray-200 p-6">
<div class="flex items-center justify-between mb-4">
<div class="space-y-2">
<div class="w-20 h-4 bg-gray-200 rounded animate-pulse mb-2" />
@@ -33,7 +32,7 @@ const localeTag = computed(() => i18next.resolvedLanguage === 'vi' ? 'vi-VN' : '
</div>
</div>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<StatsCard :title="t('overview.stats.totalVideos')" :value="stats.totalVideos" :trend="{ value: 12, isPositive: true }" />
<StatsCard :title="t('overview.stats.totalViews')" :value="stats.totalViews.toLocaleString(localeTag)"
@@ -41,8 +40,5 @@ const localeTag = computed(() => i18next.resolvedLanguage === 'vi' ? 'vi-VN' : '
<StatsCard :title="t('overview.stats.storageUsed')"
:value="`${formatBytes(stats.storageUsed)} / ${formatBytes(stats.storageLimit)}`" color="warning" />
<StatsCard :title="t('overview.stats.uploadsThisMonth')" :value="stats.uploadsThisMonth" color="success"
:trend="{ value: 25, isPositive: true }" />
</div>
</template>

490
src/routes/settings/AdsVast/AdsVast.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { client } from '@/api/client';
import AppButton from '@/components/app/AppButton.vue';
import AppDialog from '@/components/app/AppDialog.vue';
import AppInput from '@/components/app/AppInput.vue';
@@ -12,11 +13,15 @@ import { useAppConfirm } from '@/composables/useAppConfirm';
import { useAppToast } from '@/composables/useAppToast';
import SettingsNotice from '@/routes/settings/components/SettingsNotice.vue';
import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
import { computed, ref } from 'vue';
import SettingsTableSkeleton from '@/routes/settings/components/SettingsTableSkeleton.vue';
import { useAuthStore } from '@/stores/auth';
import { useQuery } from '@pinia/colada';
import { computed, ref, watch } from 'vue';
import { useTranslation } from 'i18next-vue';
const toast = useAppToast();
const confirm = useAppConfirm();
const auth = useAuthStore();
const { t } = useTranslation();
interface VastTemplate {
@@ -26,39 +31,97 @@ interface VastTemplate {
adFormat: 'pre-roll' | 'mid-roll' | 'post-roll';
duration?: number;
enabled: boolean;
isDefault: boolean;
createdAt: string;
}
const templates = ref<VastTemplate[]>([
{
id: '1',
name: 'Main Pre-roll Ad',
vastUrl: 'https://ads.example.com/vast/pre-roll.xml',
adFormat: 'pre-roll',
enabled: true,
createdAt: '2024-01-10',
},
{
id: '2',
name: 'Mid-roll Ad Break',
vastUrl: 'https://ads.example.com/vast/mid-roll.xml',
adFormat: 'mid-roll',
duration: 30,
enabled: false,
createdAt: '2024-02-15',
},
]);
type AdTemplateApiItem = {
id?: string;
name?: string;
vast_tag_url?: string;
ad_format?: 'pre-roll' | 'mid-roll' | 'post-roll';
duration?: number | null;
is_active?: boolean;
is_default?: boolean;
created_at?: string;
};
const adFormatOptions = ['pre-roll', 'mid-roll', 'post-roll'] as const;
const showAddDialog = ref(false);
const editingTemplate = ref<VastTemplate | null>(null);
const saving = ref(false);
const deletingId = ref<string | null>(null);
const togglingId = ref<string | null>(null);
const defaultingId = ref<string | null>(null);
const formData = ref({
name: '',
vastUrl: '',
adFormat: 'pre-roll' as 'pre-roll' | 'mid-roll' | 'post-roll',
duration: undefined as number | undefined,
isDefault: false,
});
const isFreePlan = computed(() => !auth.user?.plan_id);
const isMutating = computed(() => saving.value || deletingId.value !== null || togglingId.value !== null || defaultingId.value !== null);
const canMarkAsDefaultInDialog = computed(() => !isFreePlan.value && (!editingTemplate.value || editingTemplate.value.enabled));
const mapTemplate = (item: AdTemplateApiItem): VastTemplate => ({
id: item.id || `${item.name || 'template'}:${item.vast_tag_url || item.created_at || ''}`,
name: item.name || '',
vastUrl: item.vast_tag_url || '',
adFormat: item.ad_format || 'pre-roll',
duration: typeof item.duration === 'number' ? item.duration : undefined,
enabled: Boolean(item.is_active),
isDefault: Boolean(item.is_default),
createdAt: item.created_at || '',
});
const { data: templatesSnapshot, error, isPending, refetch } = useQuery({
key: () => ['settings', 'ad-templates'],
query: async () => {
const response = await client.adTemplates.adTemplatesList({ baseUrl: '/r' });
return ((((response.data as any)?.data?.templates) || []) as AdTemplateApiItem[]).map(mapTemplate);
},
});
const templates = computed(() => templatesSnapshot.value || []);
const isInitialLoading = computed(() => isPending.value && !templatesSnapshot.value);
const refetchTemplates = () => refetch((fetchError) => {
throw fetchError;
});
const getErrorMessage = (value: any, fallback: string) => value?.error?.message || value?.message || value?.data?.message || fallback;
const showActionErrorToast = (value: any) => {
toast.add({
severity: 'error',
summary: t('settings.adsVast.toast.failedSummary'),
detail: getErrorMessage(value, t('settings.adsVast.toast.failedDetail')),
life: 5000,
});
};
const showUpgradeRequiredToast = () => {
toast.add({
severity: 'warn',
summary: t('settings.adsVast.toast.upgradeRequiredSummary'),
detail: t('settings.adsVast.toast.upgradeRequiredDetail'),
life: 4000,
});
};
const ensurePaidPlan = () => {
if (!isFreePlan.value) return true;
showUpgradeRequiredToast();
return false;
};
watch(error, (value, previous) => {
if (!value || value === previous || isMutating.value) return;
showActionErrorToast(value);
});
const resetForm = () => {
@@ -67,27 +130,47 @@ const resetForm = () => {
vastUrl: '',
adFormat: 'pre-roll',
duration: undefined,
isDefault: false,
};
editingTemplate.value = null;
};
const closeDialog = () => {
showAddDialog.value = false;
resetForm();
};
const openAddDialog = () => {
if (!ensurePaidPlan()) return;
resetForm();
showAddDialog.value = true;
};
const openEditDialog = (template: VastTemplate) => {
if (!ensurePaidPlan()) return;
formData.value = {
name: template.name,
vastUrl: template.vastUrl,
adFormat: template.adFormat,
duration: template.duration,
isDefault: template.isDefault,
};
editingTemplate.value = template;
showAddDialog.value = true;
};
const handleSave = () => {
const buildRequestBody = (enabled = true) => ({
name: formData.value.name.trim(),
vast_tag_url: formData.value.vastUrl.trim(),
ad_format: formData.value.adFormat,
duration: formData.value.adFormat === 'mid-roll' ? formData.value.duration : undefined,
is_active: enabled,
is_default: enabled ? formData.value.isDefault : false,
});
const handleSave = async () => {
if (saving.value || !ensurePaidPlan()) return;
if (!formData.value.name.trim()) {
toast.add({
severity: 'error',
@@ -117,7 +200,7 @@ const handleSave = () => {
});
return;
}
if (formData.value.adFormat === 'mid-roll' && !formData.value.duration) {
if (formData.value.adFormat === 'mid-roll' && (!formData.value.duration || formData.value.duration <= 0)) {
toast.add({
severity: 'error',
summary: t('settings.adsVast.toast.durationRequiredSummary'),
@@ -127,74 +210,146 @@ const handleSave = () => {
return;
}
if (editingTemplate.value) {
const index = templates.value.findIndex(template => template.id === editingTemplate.value!.id);
if (index !== -1) {
templates.value[index] = { ...templates.value[index], ...formData.value };
saving.value = true;
try {
if (editingTemplate.value) {
await client.adTemplates.adTemplatesUpdate(
editingTemplate.value.id,
buildRequestBody(editingTemplate.value.enabled),
{ baseUrl: '/r' },
);
toast.add({
severity: 'success',
summary: t('settings.adsVast.toast.updatedSummary'),
detail: t('settings.adsVast.toast.updatedDetail'),
life: 3000,
});
} else {
await client.adTemplates.adTemplatesCreate(buildRequestBody(true), { baseUrl: '/r' });
toast.add({
severity: 'success',
summary: t('settings.adsVast.toast.createdSummary'),
detail: t('settings.adsVast.toast.createdDetail'),
life: 3000,
});
}
toast.add({
severity: 'success',
summary: t('settings.adsVast.toast.updatedSummary'),
detail: t('settings.adsVast.toast.updatedDetail'),
life: 3000,
});
} else {
templates.value.push({
id: Math.random().toString(36).substring(2, 9),
...formData.value,
enabled: true,
createdAt: new Date().toISOString().split('T')[0],
});
toast.add({
severity: 'success',
summary: t('settings.adsVast.toast.createdSummary'),
detail: t('settings.adsVast.toast.createdDetail'),
life: 3000,
});
}
showAddDialog.value = false;
resetForm();
await refetchTemplates();
closeDialog();
} catch (value: any) {
console.error(value);
showActionErrorToast(value);
} finally {
saving.value = false;
}
};
const handleToggle = (template: VastTemplate) => {
template.enabled = !template.enabled;
toast.add({
severity: 'info',
summary: template.enabled
? t('settings.adsVast.toast.enabledSummary')
: t('settings.adsVast.toast.disabledSummary'),
detail: t('settings.adsVast.toast.toggleDetail', {
const handleToggle = async (template: VastTemplate, nextValue: boolean) => {
if (!ensurePaidPlan()) return;
togglingId.value = template.id;
try {
await client.adTemplates.adTemplatesUpdate(template.id, {
name: template.name,
state: template.enabled
? t('settings.adsVast.state.enabled')
: t('settings.adsVast.state.disabled'),
}),
life: 2000,
});
vast_tag_url: template.vastUrl,
ad_format: template.adFormat,
duration: template.adFormat === 'mid-roll' ? template.duration : undefined,
is_active: nextValue,
is_default: nextValue ? template.isDefault : false,
}, { baseUrl: '/r' });
await refetchTemplates();
toast.add({
severity: 'info',
summary: nextValue
? t('settings.adsVast.toast.enabledSummary')
: t('settings.adsVast.toast.disabledSummary'),
detail: t('settings.adsVast.toast.toggleDetail', {
name: template.name,
state: nextValue
? t('settings.adsVast.state.enabled')
: t('settings.adsVast.state.disabled'),
}),
life: 2000,
});
} catch (value: any) {
console.error(value);
showActionErrorToast(value);
} finally {
togglingId.value = null;
}
};
const handleSetDefault = async (template: VastTemplate) => {
if (template.isDefault || !template.enabled || !ensurePaidPlan()) return;
defaultingId.value = template.id;
try {
await client.adTemplates.adTemplatesUpdate(template.id, {
name: template.name,
vast_tag_url: template.vastUrl,
ad_format: template.adFormat,
duration: template.adFormat === 'mid-roll' ? template.duration : undefined,
is_active: template.enabled,
is_default: true,
}, { baseUrl: '/r' });
await refetchTemplates();
toast.add({
severity: 'success',
summary: t('settings.adsVast.toast.defaultUpdatedSummary'),
detail: t('settings.adsVast.toast.defaultUpdatedDetail', { name: template.name }),
life: 3000,
});
} catch (value: any) {
console.error(value);
showActionErrorToast(value);
} finally {
defaultingId.value = null;
}
};
const handleDelete = (template: VastTemplate) => {
if (!ensurePaidPlan()) return;
confirm.require({
message: t('settings.adsVast.confirm.deleteMessage', { name: template.name }),
header: t('settings.adsVast.confirm.deleteHeader'),
acceptLabel: t('settings.adsVast.confirm.deleteAccept'),
rejectLabel: t('settings.adsVast.confirm.deleteReject'),
accept: () => {
const index = templates.value.findIndex(item => item.id === template.id);
if (index !== -1) templates.value.splice(index, 1);
toast.add({
severity: 'info',
summary: t('settings.adsVast.toast.deletedSummary'),
detail: t('settings.adsVast.toast.deletedDetail'),
life: 3000,
});
accept: async () => {
deletingId.value = template.id;
try {
await client.adTemplates.adTemplatesDelete(template.id, { baseUrl: '/r' });
await refetchTemplates();
toast.add({
severity: 'info',
summary: t('settings.adsVast.toast.deletedSummary'),
detail: t('settings.adsVast.toast.deletedDetail'),
life: 3000,
});
} catch (value: any) {
console.error(value);
showActionErrorToast(value);
} finally {
deletingId.value = null;
}
},
});
};
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
} catch {
const textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
}
toast.add({
severity: 'success',
summary: t('settings.adsVast.toast.copiedSummary'),
@@ -228,7 +383,7 @@ const getAdFormatColor = (format: string) => {
bodyClass=""
>
<template #header-actions>
<AppButton size="sm" @click="openAddDialog">
<AppButton size="sm" :disabled="isFreePlan || isInitialLoading || isMutating" @click="openAddDialog">
<template #icon>
<PlusIcon class="w-4 h-4" />
</template>
@@ -240,7 +395,19 @@ const getAdFormatColor = (format: string) => {
{{ t('settings.adsVast.infoBanner') }}
</SettingsNotice>
<div class="border-b border-border mt-4">
<SettingsNotice
v-if="isFreePlan"
tone="warning"
:title="t('settings.adsVast.readOnlyTitle')"
class="rounded-none border-x-0 border-t-0 p-3"
contentClass="text-xs text-foreground/70"
>
{{ t('settings.adsVast.readOnlyMessage') }}
</SettingsNotice>
<SettingsTableSkeleton v-if="isInitialLoading" :columns="5" :rows="4" />
<div v-else class="border-b border-border mt-4">
<table class="w-full">
<thead class="bg-muted/30">
<tr>
@@ -252,57 +419,84 @@ const getAdFormatColor = (format: string) => {
</tr>
</thead>
<tbody class="divide-y divide-border">
<tr
v-for="template in templates"
:key="template.id"
class="hover:bg-muted/30 transition-all"
>
<td class="px-6 py-3">
<div>
<span class="text-sm font-medium text-foreground">{{ template.name }}</span>
<p class="text-xs text-foreground/50 mt-0.5">{{ t('settings.adsVast.createdOn', { date: template.createdAt }) }}</p>
</div>
</td>
<td class="px-6 py-3">
<span :class="['text-xs px-2 py-1 rounded-full font-medium', getAdFormatColor(template.adFormat)]">
{{ getAdFormatLabel(template.adFormat) }}
</span>
<span v-if="template.adFormat === 'mid-roll' && template.duration" class="text-xs text-foreground/50 ml-2">
({{ template.duration }}s)
</span>
</td>
<td class="px-6 py-3">
<div class="flex items-center gap-2 max-w-[200px]">
<code class="text-xs text-foreground/60 truncate">{{ template.vastUrl }}</code>
<AppButton variant="ghost" size="sm" @click="copyToClipboard(template.vastUrl)">
<template #icon>
<CheckIcon class="w-4 h-4" />
</template>
</AppButton>
</div>
</td>
<td class="px-6 py-3 text-center">
<AppSwitch
:model-value="template.enabled"
@update:model-value="handleToggle(template)"
/>
</td>
<td class="px-6 py-3 text-right">
<div class="flex items-center justify-end gap-1">
<AppButton variant="ghost" size="sm" @click="openEditDialog(template)">
<template #icon>
<PencilIcon class="w-4 h-4" />
</template>
</AppButton>
<AppButton variant="ghost" size="sm" @click="handleDelete(template)">
<template #icon>
<TrashIcon class="w-4 h-4 text-danger" />
</template>
</AppButton>
</div>
</td>
</tr>
<tr v-if="templates.length === 0">
<template v-if="templates.length > 0">
<tr
v-for="template in templates"
:key="template.id"
class="hover:bg-muted/30 transition-all"
>
<td class="px-6 py-3">
<div>
<div class="flex items-center gap-2 flex-wrap">
<span class="text-sm font-medium text-foreground">{{ template.name }}</span>
<span
v-if="template.isDefault"
class="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
>
{{ t('settings.adsVast.defaultBadge') }}
</span>
</div>
<p class="text-xs text-foreground/50 mt-0.5">{{ t('settings.adsVast.createdOn', { date: template.createdAt || '-' }) }}</p>
</div>
</td>
<td class="px-6 py-3">
<span :class="['text-xs px-2 py-1 rounded-full font-medium', getAdFormatColor(template.adFormat)]">
{{ getAdFormatLabel(template.adFormat) }}
</span>
<span v-if="template.adFormat === 'mid-roll' && template.duration" class="text-xs text-foreground/50 ml-2">
({{ template.duration }}s)
</span>
</td>
<td class="px-6 py-3">
<div class="flex items-center gap-2 max-w-[240px]">
<code class="text-xs text-foreground/60 truncate">{{ template.vastUrl }}</code>
<AppButton variant="ghost" size="sm" :disabled="isMutating" @click="copyToClipboard(template.vastUrl)">
<template #icon>
<CheckIcon class="w-4 h-4" />
</template>
</AppButton>
</div>
</td>
<td class="px-6 py-3 text-center">
<AppSwitch
:model-value="template.enabled"
:disabled="isFreePlan || saving || deletingId !== null || defaultingId !== null || togglingId === template.id"
@update:model-value="handleToggle(template, $event)"
/>
</td>
<td class="px-6 py-3 text-right">
<div class="flex items-center justify-end gap-2 flex-wrap">
<span
v-if="template.isDefault"
class="inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary"
>
{{ t('settings.adsVast.actions.default') }}
</span>
<AppButton
v-else
variant="ghost"
size="sm"
:loading="defaultingId === template.id"
:disabled="isFreePlan || saving || deletingId !== null || togglingId !== null || defaultingId !== null || !template.enabled"
@click="handleSetDefault(template)"
>
{{ t('settings.adsVast.actions.setDefault') }}
</AppButton>
<AppButton variant="ghost" size="sm" :disabled="isFreePlan || isMutating" @click="openEditDialog(template)">
<template #icon>
<PencilIcon class="w-4 h-4" />
</template>
</AppButton>
<AppButton variant="ghost" size="sm" :disabled="isFreePlan || isMutating" @click="handleDelete(template)">
<template #icon>
<TrashIcon class="w-4 h-4 text-danger" />
</template>
</AppButton>
</div>
</td>
</tr>
</template>
<tr v-else>
<td colspan="5" class="px-6 py-12 text-center">
<LinkIcon class="w-10 h-10 text-foreground/30 mb-3 block mx-auto" />
<p class="text-sm text-foreground/60 mb-1">{{ t('settings.adsVast.emptyTitle') }}</p>
@@ -315,9 +509,10 @@ const getAdFormatColor = (format: string) => {
<AppDialog
:visible="showAddDialog"
@update:visible="showAddDialog = $event"
:title="editingTemplate ? t('settings.adsVast.dialog.editTitle') : t('settings.adsVast.dialog.createTitle')"
maxWidthClass="max-w-lg"
@update:visible="showAddDialog = $event"
@close="closeDialog"
>
<div class="space-y-4">
<div class="grid gap-2">
@@ -325,6 +520,7 @@ const getAdFormatColor = (format: string) => {
<AppInput
id="name"
v-model="formData.name"
:disabled="isFreePlan || saving"
:placeholder="t('settings.adsVast.dialog.templateNamePlaceholder')"
/>
</div>
@@ -334,6 +530,7 @@ const getAdFormatColor = (format: string) => {
<AppInput
id="vastUrl"
v-model="formData.vastUrl"
:disabled="isFreePlan || saving"
:placeholder="t('settings.adsVast.dialog.vastUrlPlaceholder')"
/>
</div>
@@ -344,13 +541,16 @@ const getAdFormatColor = (format: string) => {
<button
v-for="format in adFormatOptions"
:key="format"
@click="formData.adFormat = format"
type="button"
:disabled="isFreePlan || saving"
:class="[
'px-3 py-2 border rounded-md text-sm font-medium transition-all',
'px-3 py-2 border rounded-md text-sm font-medium transition-all disabled:opacity-60 disabled:cursor-not-allowed',
formData.adFormat === format
? 'border-primary bg-primary/5 text-primary'
: 'border-border text-foreground/60 hover:border-primary/50'
]">
]"
@click="formData.adFormat = format"
>
{{ getAdFormatLabel(format) }}
</button>
</div>
@@ -361,20 +561,46 @@ const getAdFormatColor = (format: string) => {
<AppInput
id="duration"
v-model.number="formData.duration"
:disabled="isFreePlan || saving"
type="number"
:placeholder="t('settings.adsVast.dialog.adIntervalPlaceholder')"
:min="10"
:max="600"
/>
</div>
<div class="grid gap-2">
<label class="text-sm font-medium text-foreground">{{ t('settings.adsVast.dialog.defaultLabel') }}</label>
<label
:class="[
'flex items-start gap-3 rounded-md border border-border p-3',
canMarkAsDefaultInDialog && !saving ? 'cursor-pointer' : 'opacity-60 cursor-not-allowed'
]"
>
<input
v-model="formData.isDefault"
type="checkbox"
class="mt-1 h-4 w-4 rounded border-border"
:disabled="!canMarkAsDefaultInDialog || saving"
>
<div>
<p class="text-sm text-foreground">{{ t('settings.adsVast.dialog.defaultCheckbox') }}</p>
<p class="text-xs text-foreground/60 mt-0.5">
{{ editingTemplate && !editingTemplate.enabled
? t('settings.adsVast.dialog.defaultDisabledHint')
: t('settings.adsVast.dialog.defaultHint') }}
</p>
</div>
</label>
</div>
</div>
<template #footer>
<div class="flex justify-end gap-2">
<AppButton variant="secondary" size="sm" @click="showAddDialog = false">
<AppButton variant="secondary" size="sm" :disabled="saving" @click="closeDialog">
{{ t('common.cancel') }}
</AppButton>
<AppButton size="sm" @click="handleSave">
<AppButton size="sm" :loading="saving" :disabled="isFreePlan" @click="handleSave">
<template #icon>
<CheckIcon class="w-4 h-4" />
</template>

680
src/routes/settings/Billing/Billing.vue
View File

@@ -1,6 +1,10 @@
<script setup lang="ts">
import { client, type ModelPlan } from '@/api/client';
import AppButton from '@/components/app/AppButton.vue';
import AppDialog from '@/components/app/AppDialog.vue';
import AppInput from '@/components/app/AppInput.vue';
import { useAppToast } from '@/composables/useAppToast';
import { useUsageQuery } from '@/composables/useUsageQuery';
import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
import BillingHistorySection from '@/routes/settings/components/billing/BillingHistorySection.vue';
import BillingPlansSection from '@/routes/settings/components/billing/BillingPlansSection.vue';
@@ -10,23 +14,36 @@ import BillingWalletRow from '@/routes/settings/components/billing/BillingWallet
import { useAuthStore } from '@/stores/auth';
import { useQuery } from '@pinia/colada';
import { useTranslation } from 'i18next-vue';
import { computed, ref } from 'vue';
import { computed, ref, watch } from 'vue';
const toast = useAppToast();
const auth = useAuthStore();
const { t, i18next } = useTranslation();
const TERM_OPTIONS = [1, 3, 6, 12] as const;
type UpgradePaymentMethod = 'wallet' | 'topup';
const { data, isLoading } = useQuery({
key: () => ['payments-and-plans'],
query: () => client.plans.plansList(),
});
type PlansEnvelope = {
data?: {
plans?: ModelPlan[];
} | ModelPlan[];
};
const subscribing = ref<string | null>(null);
type PaymentHistoryApiItem = {
id?: string;
amount?: number;
currency?: string;
status?: string;
plan_name?: string;
invoice_id?: string;
kind?: string;
term_months?: number;
payment_method?: string;
expires_at?: string;
created_at?: string;
};
const topupDialogVisible = ref(false);
const topupAmount = ref<number | null>(0);
const topupLoading = ref(false);
const topupPresets = [10, 20, 50, 100];
type PaymentHistoryEnvelope = {
data?: {
payments?: PaymentHistoryApiItem[];
};
};
type PaymentHistoryItem = {
id: string;
@@ -35,44 +52,108 @@ type PaymentHistoryItem = {
plan: string;
status: string;
invoiceId: string;
currency: string;
kind: string;
details?: string[];
};
const paymentHistory = ref<PaymentHistoryItem[]>([
{ id: 'inv_001', date: 'Oct 24, 2025', amount: 9.99, plan: 'Basic Plan', status: 'success', invoiceId: 'INV-2025-001' },
{ id: 'inv_002', date: 'Nov 24, 2025', amount: 9.99, plan: 'Basic Plan', status: 'success', invoiceId: 'INV-2025-002' },
{ id: 'inv_003', date: 'Dec 24, 2025', amount: 19.99, plan: 'Pro Plan', status: 'failed', invoiceId: 'INV-2025-003' },
{ id: 'inv_004', date: 'Jan 24, 2026', amount: 19.99, plan: 'Pro Plan', status: 'pending', invoiceId: 'INV-2026-001' },
]);
type ApiErrorPayload = {
code?: number;
message?: string;
data?: Record<string, any>;
};
const storageUsed = computed(() => auth.user?.storage_used || 0);
const storageLimit = computed(() => 10737418240);
const uploadsUsed = ref(12);
const uploadsLimit = ref(50);
const toast = useAppToast();
const auth = useAuthStore();
const { t, i18next } = useTranslation();
const walletBalance = computed(() => auth.user?.wallet_balance || 0);
const { data: plansResponse, isLoading } = useQuery({
key: () => ['billing-plans'],
query: () => client.plans.plansList({ baseUrl: '/r' }),
});
const { data: usageSnapshot, refetch: refetchUsage } = useUsageQuery();
const currentPlanId = computed(() => {
if (auth.user?.plan_id) return auth.user.plan_id;
if (Array.isArray(data?.value?.data?.data.plans) && data?.value?.data?.data.plans.length > 0) return data.value.data.data.plans[0].id;
return undefined;
const topupDialogVisible = ref(false);
const topupAmount = ref<number | null>(null);
const topupLoading = ref(false);
const historyLoading = ref(false);
const downloadingInvoiceId = ref<string | null>(null);
const topupPresets = [10, 20, 50, 100];
const paymentHistory = ref<PaymentHistoryItem[]>([]);
const upgradeDialogVisible = ref(false);
const selectedPlan = ref<ModelPlan | null>(null);
const selectedTermMonths = ref<number>(1);
const selectedPaymentMethod = ref<UpgradePaymentMethod>('wallet');
const purchaseTopupAmount = ref<number | null>(null);
const purchaseLoading = ref(false);
const purchaseError = ref<string | null>(null);
const plans = computed(() => {
const body = plansResponse.value?.data as PlansEnvelope | undefined;
const payload = body?.data;
if (Array.isArray(payload)) return payload;
if (payload && typeof payload === 'object' && Array.isArray(payload.plans)) {
return payload.plans;
}
return [] as ModelPlan[];
});
const plans = computed(() => data.value?.data?.data.plans || []);
const currentPlanId = computed(() => auth.user?.plan_id || undefined);
const currentPlan = computed(() => plans.value.find(plan => plan.id === currentPlanId.value));
const currentPlanName = computed(() => currentPlan.value?.name || t('settings.billing.unknownPlan'));
const walletBalance = computed(() => auth.user?.wallet_balance || 0);
const storageUsed = computed(() => usageSnapshot.value?.totalStorage ?? 0);
const uploadsUsed = computed(() => usageSnapshot.value?.totalVideos ?? 0);
const storageLimit = computed(() => {
const activePlan = plans.value.find(plan => plan.id === currentPlanId.value);
return activePlan?.storage_limit || 10737418240;
});
const uploadsLimit = computed(() => {
const activePlan = plans.value.find(plan => plan.id === currentPlanId.value);
return activePlan?.upload_limit || 50;
});
const storagePercentage = computed(() =>
Math.min(Math.round((storageUsed.value / storageLimit.value) * 100), 100)
Math.min(Math.round((storageUsed.value / storageLimit.value) * 100), 100),
);
const uploadsPercentage = computed(() =>
Math.min(Math.round((uploadsUsed.value / uploadsLimit.value) * 100), 100)
Math.min(Math.round((uploadsUsed.value / uploadsLimit.value) * 100), 100),
);
const localeTag = computed(() => i18next.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US');
const currencyFormatter = computed(() => new Intl.NumberFormat(localeTag.value, {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 2,
}));
const shortDateFormatter = computed(() => new Intl.DateTimeFormat(localeTag.value, {
month: 'short',
day: 'numeric',
year: 'numeric',
}));
const selectedPlanId = computed(() => upgradeDialogVisible.value ? selectedPlan.value?.id || null : null);
const selectedPlanPrice = computed(() => selectedPlan.value?.price || 0);
const selectedTotalAmount = computed(() => selectedPlanPrice.value * selectedTermMonths.value);
const selectedShortfall = computed(() => Math.max(selectedTotalAmount.value - walletBalance.value, 0));
const selectedNeedsTopup = computed(() => selectedShortfall.value > 0.000001);
const canSubmitUpgrade = computed(() => {
if (!selectedPlan.value?.id || purchaseLoading.value) return false;
if (!selectedNeedsTopup.value) return true;
if (selectedPaymentMethod.value !== 'topup') return false;
return (purchaseTopupAmount.value || 0) >= selectedShortfall.value && (purchaseTopupAmount.value || 0) > 0;
});
const upgradeSubmitLabel = computed(() => {
if (selectedNeedsTopup.value && selectedPaymentMethod.value === 'topup') {
return t('settings.billing.upgradeDialog.topupAndUpgrade');
}
return t('settings.billing.upgradeDialog.payWithWallet');
});
const formatMoney = (amount: number) => currencyFormatter.value.format(amount);
const formatBytes = (bytes: number) => {
if (bytes === 0) return '0 B';
@@ -85,9 +166,33 @@ const formatBytes = (bytes: number) => {
const formatDuration = (seconds?: number) => {
if (!seconds) return t('settings.billing.durationMinutes', { minutes: 0 });
if (seconds < 0) return t('settings.billing.durationMinutes', { minutes: -1 }).replace("-1", "∞")
return t('settings.billing.durationMinutes', { minutes: Math.floor(seconds / 60) });
};
const formatHistoryDate = (value?: string) => {
if (!value) return '-';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return '-';
return shortDateFormatter.value.format(date);
};
const formatTermLabel = (months: number) => t('settings.billing.termOption', { months });
const formatPaymentMethodLabel = (value?: string) => {
switch ((value || '').toLowerCase()) {
case 'topup':
return t('settings.billing.paymentMethod.topup');
case 'wallet':
default:
return t('settings.billing.paymentMethod.wallet');
}
};
const getPlanStorageText = (plan: ModelPlan) => t('settings.billing.planStorage', { storage: formatBytes(plan.storage_limit || 0) });
const getPlanDurationText = (plan: ModelPlan) => t('settings.billing.planDuration', { duration: formatDuration(plan.duration_limit) });
const getPlanUploadsText = (plan: ModelPlan) => t('settings.billing.planUploads', { count: plan.upload_limit || 0 });
const getStatusStyles = (status: string) => {
switch (status) {
case 'success':
@@ -110,52 +215,274 @@ const getStatusLabel = (status: string) => {
return map[status] || status;
};
const formatMoney = (amount: number) => currencyFormatter.value.format(amount);
const normalizeHistoryStatus = (status?: string) => {
switch ((status || '').toLowerCase()) {
case 'success':
case 'succeeded':
case 'paid':
return 'success';
case 'failed':
case 'error':
case 'canceled':
case 'cancelled':
return 'failed';
case 'pending':
case 'processing':
default:
return 'pending';
}
};
const getPlanStorageText = (plan: ModelPlan) => t('settings.billing.planStorage', { storage: formatBytes(plan.storage_limit || 0) });
const getPlanDurationText = (plan: ModelPlan) => t('settings.billing.planDuration', { duration: formatDuration(plan.duration_limit) });
const getPlanUploadsText = (plan: ModelPlan) => t('settings.billing.planUploads', { count: plan.upload_limit });
const getApiErrorPayload = (error: unknown): ApiErrorPayload | null => {
if (!error || typeof error !== 'object') return null;
const candidate = error as { error?: ApiErrorPayload; data?: ApiErrorPayload; message?: string };
const subscribe = async (plan: ModelPlan) => {
if (!plan.id) return;
subscribing.value = plan.id;
if (candidate.error && typeof candidate.error === 'object') return candidate.error;
if (candidate.data && typeof candidate.data === 'object') return candidate.data;
if (candidate.message) return { message: candidate.message };
return null;
};
const getApiErrorMessage = (error: unknown, fallback: string) => {
const payload = getApiErrorPayload(error);
return payload?.message || fallback;
};
const getApiErrorData = (error: unknown) => getApiErrorPayload(error)?.data || null;
const mapHistoryItem = (item: PaymentHistoryApiItem): PaymentHistoryItem => {
const details: string[] = [];
if (item.kind !== 'wallet_topup' && item.term_months) {
details.push(formatTermLabel(item.term_months));
}
if (item.kind !== 'wallet_topup' && item.payment_method) {
details.push(formatPaymentMethodLabel(item.payment_method));
}
if (item.kind !== 'wallet_topup' && item.expires_at) {
details.push(t('settings.billing.history.validUntil', { date: formatHistoryDate(item.expires_at) }));
}
return {
id: item.id || '',
date: formatHistoryDate(item.created_at),
amount: item.amount || 0,
plan: item.kind === 'wallet_topup'
? t('settings.billing.walletTopup')
: (item.plan_name || t('settings.billing.unknownPlan')),
status: normalizeHistoryStatus(item.status),
invoiceId: item.invoice_id || '-',
currency: item.currency || 'USD',
kind: item.kind || 'subscription',
details,
};
};
const loadPaymentHistory = async () => {
historyLoading.value = true;
try {
await client.payments.paymentsCreate({
amount: plan.price || 0,
plan_id: plan.id,
});
const response = await client.payments.historyList({ baseUrl: '/r' });
const body = response.data as PaymentHistoryEnvelope | undefined;
paymentHistory.value = (body?.data?.payments || []).map(mapHistoryItem);
} catch (error) {
console.error(error);
paymentHistory.value = [];
} finally {
historyLoading.value = false;
}
};
const refetchUsageSnapshot = () => refetchUsage((fetchError) => {
throw fetchError;
});
const refreshBillingState = async () => {
await Promise.allSettled([
auth.fetchMe(),
loadPaymentHistory(),
refetchUsageSnapshot(),
]);
};
void loadPaymentHistory();
const subscriptionSummary = computed(() => {
const expiresAt = auth.user?.plan_expires_at;
const formattedDate = formatHistoryDate(expiresAt);
if (auth.user?.plan_id) {
if (auth.user?.plan_expiring_soon && expiresAt) {
return {
title: t('settings.billing.subscription.expiringTitle'),
description: t('settings.billing.subscription.expiringDescription', {
plan: currentPlanName.value,
date: formattedDate,
}),
tone: 'warning' as const,
};
}
if (expiresAt) {
return {
title: t('settings.billing.subscription.activeTitle'),
description: t('settings.billing.subscription.activeDescription', {
plan: currentPlanName.value,
date: formattedDate,
}),
tone: 'default' as const,
};
}
return {
title: t('settings.billing.subscription.activeTitle'),
description: currentPlanName.value,
tone: 'default' as const,
};
}
if (expiresAt) {
return {
title: t('settings.billing.subscription.expiredTitle'),
description: t('settings.billing.subscription.expiredDescription', { date: formattedDate }),
tone: 'warning' as const,
};
}
return {
title: t('settings.billing.subscription.freeTitle'),
description: t('settings.billing.subscription.freeDescription'),
tone: 'default' as const,
};
});
const resetUpgradeState = () => {
selectedPlan.value = null;
selectedTermMonths.value = 1;
selectedPaymentMethod.value = 'wallet';
purchaseTopupAmount.value = null;
purchaseError.value = null;
};
const openUpgradeDialog = (plan: ModelPlan) => {
selectedPlan.value = plan;
selectedTermMonths.value = 1;
purchaseError.value = null;
selectedPaymentMethod.value = walletBalance.value >= (plan.price || 0) ? 'wallet' : 'topup';
purchaseTopupAmount.value = null;
upgradeDialogVisible.value = true;
};
const closeUpgradeDialog = () => {
if (purchaseLoading.value) return;
upgradeDialogVisible.value = false;
resetUpgradeState();
};
const onUpgradeDialogVisibilityChange = (visible: boolean) => {
if (visible) {
upgradeDialogVisible.value = true;
return;
}
closeUpgradeDialog();
};
watch(selectedShortfall, (value) => {
if (!upgradeDialogVisible.value) return;
if (value <= 0) {
selectedPaymentMethod.value = 'wallet';
return;
}
if (selectedPaymentMethod.value === 'topup' && ((purchaseTopupAmount.value || 0) < value)) {
purchaseTopupAmount.value = Number(value.toFixed(2));
}
});
const selectUpgradePaymentMethod = (method: UpgradePaymentMethod) => {
selectedPaymentMethod.value = method;
purchaseError.value = null;
if (method === 'topup' && selectedShortfall.value > 0 && ((purchaseTopupAmount.value || 0) < selectedShortfall.value)) {
purchaseTopupAmount.value = Number(selectedShortfall.value.toFixed(2));
}
};
const updatePurchaseTopupAmount = (value: string | number | null) => {
if (typeof value === 'number' || value === null) {
purchaseTopupAmount.value = value;
return;
}
if (value === '') {
purchaseTopupAmount.value = null;
return;
}
const parsed = Number(value);
purchaseTopupAmount.value = Number.isNaN(parsed) ? null : parsed;
};
const submitUpgrade = async () => {
if (!selectedPlan.value?.id) return;
purchaseLoading.value = true;
purchaseError.value = null;
try {
const paymentMethod: UpgradePaymentMethod = selectedNeedsTopup.value ? selectedPaymentMethod.value : 'wallet';
const payload: Record<string, any> = {
plan_id: selectedPlan.value.id,
term_months: selectedTermMonths.value,
payment_method: paymentMethod,
};
if (paymentMethod === 'topup') {
payload.topup_amount = purchaseTopupAmount.value || selectedShortfall.value;
}
await client.payments.paymentsCreate(payload, { baseUrl: '/r' });
await refreshBillingState();
toast.add({
severity: 'success',
summary: t('settings.billing.toast.subscriptionSuccessSummary'),
detail: t('settings.billing.toast.subscriptionSuccessDetail', { plan: plan.name || '' }),
detail: t('settings.billing.toast.subscriptionSuccessDetail', {
plan: selectedPlan.value.name || '',
term: formatTermLabel(selectedTermMonths.value),
}),
life: 3000,
});
paymentHistory.value.unshift({
id: `inv_${Date.now()}`,
date: new Date().toLocaleDateString(localeTag.value, { month: 'short', day: 'numeric', year: 'numeric' }),
amount: plan.price || 0,
plan: plan.name || t('settings.billing.unknownPlan'),
status: 'success',
invoiceId: `INV-${new Date().getFullYear()}-${Math.floor(Math.random() * 1000)}`,
});
} catch (err: any) {
console.error(err);
toast.add({
severity: 'error',
summary: t('settings.billing.toast.subscriptionFailedSummary'),
detail: err.message || t('settings.billing.toast.subscriptionFailedDetail'),
life: 5000,
});
closeUpgradeDialog();
} catch (error) {
console.error(error);
const errorData = getApiErrorData(error);
const nextShortfall = typeof errorData?.shortfall === 'number'
? errorData.shortfall
: selectedShortfall.value;
if (nextShortfall > 0) {
selectedPaymentMethod.value = 'topup';
if ((purchaseTopupAmount.value || 0) < nextShortfall) {
purchaseTopupAmount.value = Number(nextShortfall.toFixed(2));
}
}
purchaseError.value = getApiErrorMessage(error, t('settings.billing.toast.subscriptionFailedDetail'));
} finally {
subscribing.value = null;
purchaseLoading.value = false;
}
};
const handleTopup = async (amount: number) => {
topupLoading.value = true;
try {
await new Promise(resolve => setTimeout(resolve, 1500));
await client.wallet.topupsCreate({ amount }, { baseUrl: '/r' });
await refreshBillingState();
toast.add({
severity: 'success',
@@ -165,11 +492,12 @@ const handleTopup = async (amount: number) => {
});
topupDialogVisible.value = false;
topupAmount.value = null;
} catch (e: any) {
} catch (error) {
console.error(error);
toast.add({
severity: 'error',
summary: t('settings.billing.toast.topupFailedSummary'),
detail: e.message || t('settings.billing.toast.topupFailedDetail'),
detail: getApiErrorMessage(error, t('settings.billing.toast.topupFailedDetail')),
life: 5000,
});
} finally {
@@ -177,7 +505,10 @@ const handleTopup = async (amount: number) => {
}
};
const handleDownloadInvoice = (item: PaymentHistoryItem) => {
const handleDownloadInvoice = async (item: PaymentHistoryItem) => {
if (!item.id) return;
downloadingInvoiceId.value = item.id;
toast.add({
severity: 'info',
summary: t('settings.billing.toast.downloadingSummary'),
@@ -185,14 +516,36 @@ const handleDownloadInvoice = (item: PaymentHistoryItem) => {
life: 2000,
});
setTimeout(() => {
try {
const response = await client.payments.invoiceList(item.id, { baseUrl: '/r', format: 'text' });
const content = typeof response.data === 'string' ? response.data : '';
const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = `${item.invoiceId}.txt`;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(url);
toast.add({
severity: 'success',
summary: t('settings.billing.toast.downloadedSummary'),
detail: t('settings.billing.toast.downloadedDetail', { invoiceId: item.invoiceId }),
life: 3000,
});
}, 1500);
} catch (error) {
console.error(error);
toast.add({
severity: 'error',
summary: t('settings.billing.toast.downloadFailedSummary'),
detail: getApiErrorMessage(error, t('settings.billing.toast.downloadFailedDetail')),
life: 5000,
});
} finally {
downloadingInvoiceId.value = null;
}
};
const openTopupDialog = () => {
@@ -214,6 +567,9 @@ const selectPreset = (amount: number) => {
:title="t('settings.billing.walletBalance')"
:description="t('settings.billing.currentBalance', { balance: formatMoney(walletBalance) })"
:button-label="t('settings.billing.topUp')"
:subscription-title="subscriptionSummary.title"
:subscription-description="subscriptionSummary.description"
:subscription-tone="subscriptionSummary.tone"
@topup="openTopupDialog"
/>
@@ -223,23 +579,23 @@ const selectPreset = (amount: number) => {
:is-loading="isLoading"
:plans="plans"
:current-plan-id="currentPlanId"
:subscribing="subscribing"
:selecting-plan-id="selectedPlanId"
:format-money="formatMoney"
:get-plan-storage-text="getPlanStorageText"
:get-plan-duration-text="getPlanDurationText"
:get-plan-uploads-text="getPlanUploadsText"
:current-plan-label="t('settings.billing.currentPlan')"
:processing-label="t('settings.billing.processing')"
:upgrade-label="t('settings.billing.upgrade')"
@subscribe="subscribe"
:selecting-label="t('settings.billing.upgradeDialog.selecting')"
:choose-label="t('settings.billing.upgradeDialog.choosePlan')"
@select="openUpgradeDialog"
/>
<BillingUsageSection
:storage-title="t('settings.billing.storage')"
:storage-description="t('settings.billing.storageUsedOfLimit', { used: formatBytes(storageUsed), limit: formatBytes(storageLimit) })"
:storage-percentage="storagePercentage"
:uploads-title="t('settings.billing.monthlyUploads')"
:uploads-description="t('settings.billing.uploadsUsedOfLimit', { used: uploadsUsed, limit: uploadsLimit })"
:uploads-title="t('settings.billing.totalVideos')"
:uploads-description="t('settings.billing.totalVideosUsedOfLimit', { used: uploadsUsed, limit: uploadsLimit })"
:uploads-percentage="uploadsPercentage"
/>
@@ -247,6 +603,8 @@ const selectPreset = (amount: number) => {
:title="t('settings.billing.paymentHistory')"
:description="t('settings.billing.paymentHistorySubtitle')"
:items="paymentHistory"
:loading="historyLoading"
:downloading-id="downloadingInvoiceId"
:format-money="formatMoney"
:get-status-styles="getStatusStyles"
:get-status-label="getStatusLabel"
@@ -261,6 +619,180 @@ const selectPreset = (amount: number) => {
/>
</SettingsSectionCard>
<AppDialog
:visible="upgradeDialogVisible"
:title="t('settings.billing.upgradeDialog.title')"
maxWidthClass="max-w-2xl"
@update:visible="onUpgradeDialogVisibilityChange"
@close="closeUpgradeDialog"
>
<div v-if="selectedPlan" class="space-y-5">
<div class="rounded-lg border border-border bg-muted/20 p-4">
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div>
<p class="text-xs font-medium uppercase tracking-[0.18em] text-foreground/50">
{{ t('settings.billing.upgradeDialog.selectedPlan') }}
</p>
<h3 class="mt-1 text-lg font-semibold text-foreground">{{ selectedPlan.name }}</h3>
<p class="mt-1 text-sm text-foreground/70">
{{ selectedPlan.description || t('settings.billing.availablePlansHint') }}
</p>
</div>
<div class="text-left md:text-right">
<p class="text-xs text-foreground/50">{{ t('settings.billing.upgradeDialog.basePrice') }}</p>
<p class="mt-1 text-2xl font-semibold text-foreground">{{ formatMoney(selectedPlan.price || 0) }}</p>
<p class="text-xs text-foreground/60">{{ t('settings.billing.upgradeDialog.perMonthBase') }}</p>
</div>
</div>
</div>
<div class="space-y-3">
<div>
<p class="text-sm font-medium text-foreground">{{ t('settings.billing.upgradeDialog.termTitle') }}</p>
<p class="mt-1 text-xs text-foreground/60">{{ t('settings.billing.upgradeDialog.termHint') }}</p>
</div>
<div class="grid grid-cols-2 gap-3 md:grid-cols-4">
<button
v-for="months in TERM_OPTIONS"
:key="months"
type="button"
:class="[
'rounded-lg border px-4 py-3 text-left transition-all',
selectedTermMonths === months
? 'border-primary bg-primary/5 text-primary'
: 'border-border bg-surface text-foreground hover:border-primary/30 hover:bg-muted/30',
]"
@click="selectedTermMonths = months"
>
<p class="text-sm font-medium">{{ formatTermLabel(months) }}</p>
<p class="mt-1 text-xs text-foreground/60">{{ formatMoney((selectedPlan.price || 0) * months) }}</p>
</button>
</div>
</div>
<div class="grid gap-3 md:grid-cols-3">
<div class="rounded-lg border border-border bg-surface p-4">
<p class="text-xs uppercase tracking-wide text-foreground/50">{{ t('settings.billing.upgradeDialog.totalLabel') }}</p>
<p class="mt-2 text-xl font-semibold text-foreground">{{ formatMoney(selectedTotalAmount) }}</p>
</div>
<div class="rounded-lg border border-border bg-surface p-4">
<p class="text-xs uppercase tracking-wide text-foreground/50">{{ t('settings.billing.upgradeDialog.walletBalanceLabel') }}</p>
<p class="mt-2 text-xl font-semibold text-foreground">{{ formatMoney(walletBalance) }}</p>
</div>
<div
class="rounded-lg border p-4"
:class="selectedNeedsTopup
? 'border-warning/30 bg-warning/10'
: 'border-success/20 bg-success/5'"
>
<p class="text-xs uppercase tracking-wide text-foreground/50">{{ t('settings.billing.upgradeDialog.shortfallLabel') }}</p>
<p class="mt-2 text-xl font-semibold" :class="selectedNeedsTopup ? 'text-warning' : 'text-success'">
{{ formatMoney(selectedShortfall) }}
</p>
</div>
</div>
<div v-if="selectedNeedsTopup" class="space-y-3">
<div>
<p class="text-sm font-medium text-foreground">{{ t('settings.billing.upgradeDialog.paymentMethodTitle') }}</p>
<p class="mt-1 text-xs text-foreground/60">{{ t('settings.billing.upgradeDialog.paymentMethodHint') }}</p>
</div>
<div class="grid gap-3 md:grid-cols-2">
<button
type="button"
:class="[
'rounded-lg border p-4 text-left transition-all',
selectedPaymentMethod === 'wallet'
? 'border-primary bg-primary/5'
: 'border-border bg-surface hover:border-primary/30 hover:bg-muted/30',
]"
@click="selectUpgradePaymentMethod('wallet')"
>
<p class="text-sm font-medium text-foreground">{{ t('settings.billing.paymentMethod.wallet') }}</p>
<p class="mt-1 text-xs text-foreground/60">
{{ t('settings.billing.upgradeDialog.walletOptionDescription') }}
</p>
</button>
<button
type="button"
:class="[
'rounded-lg border p-4 text-left transition-all',
selectedPaymentMethod === 'topup'
? 'border-primary bg-primary/5'
: 'border-border bg-surface hover:border-primary/30 hover:bg-muted/30',
]"
@click="selectUpgradePaymentMethod('topup')"
>
<p class="text-sm font-medium text-foreground">{{ t('settings.billing.paymentMethod.topup') }}</p>
<p class="mt-1 text-xs text-foreground/60">
{{ t('settings.billing.upgradeDialog.topupOptionDescription', { shortfall: formatMoney(selectedShortfall) }) }}
</p>
</button>
</div>
</div>
<div v-else class="rounded-lg border border-success/20 bg-success/5 p-4 text-sm text-success">
{{ t('settings.billing.upgradeDialog.walletCoveredHint') }}
</div>
<div v-if="selectedNeedsTopup && selectedPaymentMethod === 'topup'" class="grid gap-2">
<label class="text-sm font-medium text-foreground">{{ t('settings.billing.upgradeDialog.topupAmountLabel') }}</label>
<AppInput
:model-value="purchaseTopupAmount"
type="number"
min="0.01"
step="0.01"
:placeholder="t('settings.billing.upgradeDialog.topupAmountPlaceholder')"
@update:model-value="updatePurchaseTopupAmount"
/>
<p class="text-xs text-foreground/60">
{{ t('settings.billing.upgradeDialog.topupAmountHint', { shortfall: formatMoney(selectedShortfall) }) }}
</p>
</div>
<div
v-if="selectedNeedsTopup && selectedPaymentMethod === 'wallet'"
class="rounded-lg border border-warning/30 bg-warning/10 p-4 text-sm text-warning"
>
{{ t('settings.billing.upgradeDialog.walletInsufficientHint', { shortfall: formatMoney(selectedShortfall) }) }}
</div>
<div v-if="purchaseError" class="rounded-lg border border-danger bg-danger/10 p-4 text-sm text-danger">
{{ purchaseError }}
</div>
</div>
<template #footer>
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<p class="text-xs text-foreground/60">
{{ t('settings.billing.upgradeDialog.footerHint') }}
</p>
<div class="flex justify-end gap-3">
<AppButton
variant="secondary"
size="sm"
:disabled="purchaseLoading"
@click="closeUpgradeDialog"
>
{{ t('common.cancel') }}
</AppButton>
<AppButton
size="sm"
:loading="purchaseLoading"
:disabled="!canSubmitUpgrade"
@click="submitUpgrade"
>
{{ upgradeSubmitLabel }}
</AppButton>
</div>
</div>
</template>
</AppDialog>
<BillingTopupDialog
:visible="topupDialogVisible"
:title="t('settings.billing.topupDialog.title')"

74
src/routes/settings/DangerZone/DangerZone.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { client } from '@/api/client';
import AppButton from '@/components/app/AppButton.vue';
import AlertTriangleIcon from '@/components/icons/AlertTriangle.vue';
import SlidersIcon from '@/components/icons/SlidersIcon.vue';
@@ -8,25 +9,50 @@ import { useAppToast } from '@/composables/useAppToast';
import SettingsNotice from '@/routes/settings/components/SettingsNotice.vue';
import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
import { useAuthStore } from '@/stores/auth';
import { useTranslation } from 'i18next-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const auth = useAuthStore();
const router = useRouter();
const toast = useAppToast();
const confirm = useAppConfirm();
const { t } = useTranslation();
const deletingAccount = ref(false);
const clearingData = ref(false);
const handleDeleteAccount = () => {
confirm.require({
message: t('settings.dangerZone.confirm.deleteAccountMessage'),
header: t('settings.dangerZone.confirm.deleteAccountHeader'),
acceptLabel: t('settings.dangerZone.confirm.deleteAccountAccept'),
rejectLabel: t('settings.dangerZone.confirm.deleteAccountReject'),
accept: () => {
toast.add({
severity: 'info',
summary: t('settings.dangerZone.toast.deleteAccountSummary'),
detail: t('settings.dangerZone.toast.deleteAccountDetail'),
life: 5000,
});
accept: async () => {
deletingAccount.value = true;
try {
await client.me.deleteMe({ baseUrl: '/r' });
auth.$reset();
toast.add({
severity: 'success',
summary: t('settings.dangerZone.toast.deleteAccountSummary'),
detail: t('settings.dangerZone.toast.deleteAccountDetail'),
life: 5000,
});
await router.push('/login');
} catch (e: any) {
console.error(e);
toast.add({
severity: 'error',
summary: t('settings.dangerZone.toast.failedSummary'),
detail: e.message || t('settings.dangerZone.toast.failedDetail'),
life: 5000,
});
} finally {
deletingAccount.value = false;
}
},
});
};
@@ -37,13 +63,29 @@ const handleClearData = () => {
header: t('settings.dangerZone.confirm.clearDataHeader'),
acceptLabel: t('settings.dangerZone.confirm.clearDataAccept'),
rejectLabel: t('settings.dangerZone.confirm.clearDataReject'),
accept: () => {
toast.add({
severity: 'info',
summary: t('settings.dangerZone.toast.clearDataSummary'),
detail: t('settings.dangerZone.toast.clearDataDetail'),
life: 5000,
});
accept: async () => {
clearingData.value = true;
try {
await client.me.clearDataCreate({ baseUrl: '/r' });
await auth.fetchMe();
toast.add({
severity: 'success',
summary: t('settings.dangerZone.toast.clearDataSummary'),
detail: t('settings.dangerZone.toast.clearDataDetail'),
life: 5000,
});
} catch (e: any) {
console.error(e);
toast.add({
severity: 'error',
summary: t('settings.dangerZone.toast.failedSummary'),
detail: e.message || t('settings.dangerZone.toast.failedDetail'),
life: 5000,
});
} finally {
clearingData.value = false;
}
},
});
};
@@ -66,7 +108,7 @@ const handleClearData = () => {
</template>
<template #actions>
<AppButton variant="danger" size="sm" @click="handleDeleteAccount">
<AppButton variant="danger" size="sm" :loading="deletingAccount" :disabled="clearingData" @click="handleDeleteAccount">
<template #icon>
<TrashIcon class="w-4 h-4" />
</template>
@@ -90,7 +132,7 @@ const handleClearData = () => {
</template>
<template #actions>
<AppButton variant="danger" size="sm" @click="handleClearData">
<AppButton variant="danger" size="sm" :loading="clearingData" :disabled="deletingAccount" @click="handleClearData">
<template #icon>
<SlidersIcon class="w-4 h-4" />
</template>

260
src/routes/settings/DomainsDns/DomainsDns.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { client } from '@/api/client';
import AppButton from '@/components/app/AppButton.vue';
import AppDialog from '@/components/app/AppDialog.vue';
import AppInput from '@/components/app/AppInput.vue';
@@ -10,23 +11,99 @@ import { useAppConfirm } from '@/composables/useAppConfirm';
import { useAppToast } from '@/composables/useAppToast';
import SettingsNotice from '@/routes/settings/components/SettingsNotice.vue';
import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
import { computed, ref } from 'vue';
import SettingsTableSkeleton from '@/routes/settings/components/SettingsTableSkeleton.vue';
import { useQuery } from '@pinia/colada';
import { computed, ref, watch } from 'vue';
import { useTranslation } from 'i18next-vue';
const toast = useAppToast();
const confirm = useAppConfirm();
const { t } = useTranslation();
const domains = ref([
{ id: '1', name: 'example.com', addedAt: '2024-01-15' },
{ id: '2', name: 'mysite.org', addedAt: '2024-02-20' },
]);
type DomainApiItem = {
id?: string;
name?: string;
created_at?: string;
};
type DomainItem = {
id: string;
name: string;
addedAt: string;
};
const newDomain = ref('');
const showAddDialog = ref(false);
const adding = ref(false);
const removingId = ref<string | null>(null);
const handleAddDomain = () => {
if (!newDomain.value.trim()) {
const normalizeDomainInput = (value: string) => value
.trim()
.toLowerCase()
.replace(/^https?:\/\//, '')
.replace(/^www\./, '')
.replace(/\/$/, '');
const formatDate = (value?: string) => {
if (!value) return '-';
const date = new Date(value);
if (Number.isNaN(date.getTime())) {
return value.split('T')[0] || value;
}
return date.toISOString().split('T')[0];
};
const mapDomainItem = (item: DomainApiItem): DomainItem => ({
id: item.id || `${item.name || 'domain'}:${item.created_at || ''}`,
name: item.name || '',
addedAt: formatDate(item.created_at),
});
const { data: domainsSnapshot, error, isPending, refetch } = useQuery({
key: () => ['settings', 'domains'],
query: async () => {
const response = await client.domains.domainsList({ baseUrl: '/r' });
return ((((response.data as any)?.data?.domains) || []) as DomainApiItem[]).map(mapDomainItem);
},
});
const domains = computed(() => domainsSnapshot.value || []);
const isInitialLoading = computed(() => isPending.value && !domainsSnapshot.value);
const iframeCode = computed(() => '<iframe src="https://holistream.com/embed" width="100%" height="500" frameborder="0" allowfullscreen></iframe>');
const refetchDomains = () => refetch((fetchError) => {
throw fetchError;
});
watch(error, (value, previous) => {
if (!value || value === previous || adding.value || removingId.value !== null) return;
toast.add({
severity: 'error',
summary: t('settings.domainsDns.toast.failedSummary'),
detail: (value as any)?.message || t('settings.domainsDns.toast.failedDetail'),
life: 5000,
});
});
const openAddDialog = () => {
newDomain.value = '';
showAddDialog.value = true;
};
const closeAddDialog = () => {
showAddDialog.value = false;
newDomain.value = '';
};
const handleAddDomain = async () => {
if (adding.value) return;
const domainName = normalizeDomainInput(newDomain.value);
if (!domainName || !domainName.includes('.') || /[\/\s]/.test(domainName)) {
toast.add({
severity: 'error',
summary: t('settings.domainsDns.toast.invalidSummary'),
@@ -36,7 +113,7 @@ const handleAddDomain = () => {
return;
}
const exists = domains.value.some(d => d.name === newDomain.value.trim().toLowerCase());
const exists = domains.value.some(domain => domain.name === domainName);
if (exists) {
toast.add({
severity: 'error',
@@ -47,48 +124,95 @@ const handleAddDomain = () => {
return;
}
const domainName = newDomain.value.trim().toLowerCase();
domains.value.push({
id: Math.random().toString(36).substring(2, 9),
name: domainName,
addedAt: new Date().toISOString().split('T')[0],
});
adding.value = true;
try {
await client.domains.domainsCreate({
name: domainName,
}, { baseUrl: '/r' });
newDomain.value = '';
showAddDialog.value = false;
toast.add({
severity: 'success',
summary: t('settings.domainsDns.toast.addedSummary'),
detail: t('settings.domainsDns.toast.addedDetail', { domain: domainName }),
life: 3000,
});
await refetchDomains();
closeAddDialog();
toast.add({
severity: 'success',
summary: t('settings.domainsDns.toast.addedSummary'),
detail: t('settings.domainsDns.toast.addedDetail', { domain: domainName }),
life: 3000,
});
} catch (e: any) {
console.error(e);
const message = String(e?.message || '').toLowerCase();
if (message.includes('already exists')) {
toast.add({
severity: 'error',
summary: t('settings.domainsDns.toast.duplicateSummary'),
detail: t('settings.domainsDns.toast.duplicateDetail'),
life: 3000,
});
} else if (message.includes('invalid domain')) {
toast.add({
severity: 'error',
summary: t('settings.domainsDns.toast.invalidSummary'),
detail: t('settings.domainsDns.toast.invalidDetail'),
life: 3000,
});
} else {
toast.add({
severity: 'error',
summary: t('settings.domainsDns.toast.failedSummary'),
detail: e.message || t('settings.domainsDns.toast.failedDetail'),
life: 5000,
});
}
} finally {
adding.value = false;
}
};
const handleRemoveDomain = (domain: typeof domains.value[0]) => {
const handleRemoveDomain = (domain: DomainItem) => {
confirm.require({
message: t('settings.domainsDns.confirm.removeMessage', { domain: domain.name }),
header: t('settings.domainsDns.confirm.removeHeader'),
acceptLabel: t('settings.domainsDns.confirm.removeAccept'),
rejectLabel: t('settings.domainsDns.confirm.removeReject'),
accept: () => {
const index = domains.value.findIndex(d => d.id === domain.id);
if (index !== -1) {
domains.value.splice(index, 1);
accept: async () => {
removingId.value = domain.id;
try {
await client.domains.domainsDelete(domain.id, { baseUrl: '/r' });
await refetchDomains();
toast.add({
severity: 'info',
summary: t('settings.domainsDns.toast.removedSummary'),
detail: t('settings.domainsDns.toast.removedDetail', { domain: domain.name }),
life: 3000,
});
} catch (e: any) {
console.error(e);
toast.add({
severity: 'error',
summary: t('settings.domainsDns.toast.failedSummary'),
detail: e.message || t('settings.domainsDns.toast.failedDetail'),
life: 5000,
});
} finally {
removingId.value = null;
}
toast.add({
severity: 'info',
summary: t('settings.domainsDns.toast.removedSummary'),
detail: t('settings.domainsDns.toast.removedDetail', { domain: domain.name }),
life: 3000,
});
},
});
};
const iframeCode = computed(() => '<iframe src="https://holistream.com/embed" width="100%" height="500" frameborder="0" allowfullscreen></iframe>');
const copyIframeCode = async () => {
try {
await navigator.clipboard.writeText(iframeCode.value);
} catch {
const textArea = document.createElement('textarea');
textArea.value = iframeCode.value;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
}
const copyIframeCode = () => {
navigator.clipboard.writeText(iframeCode.value);
toast.add({
severity: 'success',
summary: t('settings.domainsDns.toast.copiedSummary'),
@@ -105,7 +229,7 @@ const copyIframeCode = () => {
bodyClass=""
>
<template #header-actions>
<AppButton size="sm" @click="showAddDialog = true">
<AppButton size="sm" :loading="adding" :disabled="isInitialLoading || removingId !== null" @click="openAddDialog">
<template #icon>
<PlusIcon class="w-4 h-4" />
</template>
@@ -117,7 +241,9 @@ const copyIframeCode = () => {
{{ t('settings.domainsDns.infoBanner') }}
</SettingsNotice>
<div class="border-b border-border mt-4">
<SettingsTableSkeleton v-if="isInitialLoading" :columns="3" :rows="4" />
<div v-else class="border-b border-border mt-4">
<table class="w-full">
<thead class="bg-muted/30">
<tr>
@@ -127,27 +253,34 @@ const copyIframeCode = () => {
</tr>
</thead>
<tbody class="divide-y divide-border">
<tr
v-for="domain in domains"
:key="domain.id"
class="hover:bg-muted/30 transition-all"
>
<td class="px-6 py-3">
<div class="flex items-center gap-2">
<LinkIcon class="w-4 h-4 text-foreground/40" />
<span class="text-sm font-medium text-foreground">{{ domain.name }}</span>
</div>
</td>
<td class="px-6 py-3 text-sm text-foreground/60">{{ domain.addedAt }}</td>
<td class="px-6 py-3 text-right">
<AppButton variant="ghost" size="sm" @click="handleRemoveDomain(domain)">
<template #icon>
<TrashIcon class="w-4 h-4 text-danger" />
</template>
</AppButton>
</td>
</tr>
<tr v-if="domains.length === 0">
<template v-if="domains.length > 0">
<tr
v-for="domain in domains"
:key="domain.id"
class="hover:bg-muted/30 transition-all"
>
<td class="px-6 py-3">
<div class="flex items-center gap-2">
<LinkIcon class="w-4 h-4 text-foreground/40" />
<span class="text-sm font-medium text-foreground">{{ domain.name }}</span>
</div>
</td>
<td class="px-6 py-3 text-sm text-foreground/60">{{ domain.addedAt }}</td>
<td class="px-6 py-3 text-right">
<AppButton
variant="ghost"
size="sm"
:disabled="adding || removingId !== null"
@click="handleRemoveDomain(domain)"
>
<template #icon>
<TrashIcon class="w-4 h-4 text-danger" />
</template>
</AppButton>
</td>
</tr>
</template>
<tr v-else>
<td colspan="3" class="px-6 py-12 text-center">
<LinkIcon class="w-10 h-10 text-foreground/30 mb-3 block mx-auto" />
<p class="text-sm text-foreground/60 mb-1">{{ t('settings.domainsDns.emptyTitle') }}</p>
@@ -176,9 +309,10 @@ const copyIframeCode = () => {
<AppDialog
:visible="showAddDialog"
@update:visible="showAddDialog = $event"
:title="t('settings.domainsDns.dialog.title')"
maxWidthClass="max-w-md"
@update:visible="showAddDialog = $event"
@close="closeAddDialog"
>
<div class="space-y-4">
<div class="grid gap-2">
@@ -202,15 +336,17 @@ const copyIframeCode = () => {
</div>
<template #footer>
<AppButton variant="secondary" size="sm" @click="showAddDialog = false">
<div class="flex justify-end gap-2">
<AppButton variant="secondary" size="sm" :disabled="adding" @click="closeAddDialog">
{{ t('common.cancel') }}
</AppButton>
<AppButton size="sm" @click="handleAddDomain">
<AppButton size="sm" :loading="adding" @click="handleAddDomain">
<template #icon>
<CheckIcon class="w-4 h-4" />
</template>
{{ t('settings.domainsDns.addDomain') }}
</AppButton>
</div>
</template>
</AppDialog>
</SettingsSectionCard>

88
src/routes/settings/NotificationSettings/NotificationSettings.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { client } from '@/api/client';
import AppButton from '@/components/app/AppButton.vue';
import AppSwitch from '@/components/app/AppSwitch.vue';
import BellIcon from '@/components/icons/BellIcon.vue';
@@ -6,22 +7,24 @@ import CheckIcon from '@/components/icons/CheckIcon.vue';
import MailIcon from '@/components/icons/MailIcon.vue';
import SendIcon from '@/components/icons/SendIcon.vue';
import TelegramIcon from '@/components/icons/TelegramIcon.vue';
import {
createNotificationSettingsDraft,
toNotificationPreferencesPayload,
useSettingsPreferencesQuery,
} from '@/composables/useSettingsPreferencesQuery';
import { useAppToast } from '@/composables/useAppToast';
import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
import SettingsRowSkeleton from '@/routes/settings/components/SettingsRowSkeleton.vue';
import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
import { computed, ref } from 'vue';
import { computed, ref, watch } from 'vue';
import { useTranslation } from 'i18next-vue';
const toast = useAppToast();
const { t } = useTranslation();
const notificationSettings = ref({
email: true,
push: true,
marketing: false,
telegram: false,
});
const { data: preferencesSnapshot, error, isPending, refetch } = useSettingsPreferencesQuery();
const notificationSettings = ref(createNotificationSettingsDraft());
const saving = ref(false);
const notificationTypes = computed(() => [
@@ -59,10 +62,40 @@ const notificationTypes = computed(() => [
},
]);
const isInitialLoading = computed(() => isPending.value && !preferencesSnapshot.value);
const isInteractionDisabled = computed(() => saving.value || isInitialLoading.value || !preferencesSnapshot.value);
const refetchPreferences = () => refetch((fetchError) => {
throw fetchError;
});
watch(preferencesSnapshot, (snapshot) => {
if (!snapshot) return;
notificationSettings.value = createNotificationSettingsDraft(snapshot);
}, { immediate: true });
watch(error, (value, previous) => {
if (!value || value === previous || saving.value) return;
toast.add({
severity: 'error',
summary: t('settings.notificationSettings.toast.failedSummary'),
detail: (value as any)?.message || t('settings.notificationSettings.toast.failedDetail'),
life: 5000,
});
});
const handleSave = async () => {
if (saving.value || !preferencesSnapshot.value) return;
saving.value = true;
try {
await new Promise(resolve => setTimeout(resolve, 1000));
await client.settings.preferencesUpdate(
toNotificationPreferencesPayload(notificationSettings.value),
{ baseUrl: '/r' },
);
await refetchPreferences();
toast.add({
severity: 'success',
summary: t('settings.notificationSettings.toast.savedSummary'),
@@ -88,7 +121,7 @@ const handleSave = async () => {
:description="t('settings.content.notifications.subtitle')"
>
<template #header-actions>
<AppButton size="sm" :loading="saving" @click="handleSave">
<AppButton size="sm" :loading="saving" :disabled="isInitialLoading || !preferencesSnapshot" @click="handleSave">
<template #icon>
<CheckIcon class="w-4 h-4" />
</template>
@@ -96,20 +129,29 @@ const handleSave = async () => {
</AppButton>
</template>
<SettingsRow
v-for="type in notificationTypes"
:key="type.key"
:title="type.title"
:description="type.description"
:iconBoxClass="type.bgColor"
>
<template #icon>
<component :is="type.icon" :class="[type.iconColor, 'w-5 h-5']" />
</template>
<template v-if="isInitialLoading">
<SettingsRowSkeleton
v-for="type in notificationTypes"
:key="type.key"
/>
</template>
<template #actions>
<AppSwitch v-model="notificationSettings[type.key]" />
</template>
</SettingsRow>
<template v-else>
<SettingsRow
v-for="type in notificationTypes"
:key="type.key"
:title="type.title"
:description="type.description"
:iconBoxClass="type.bgColor"
>
<template #icon>
<component :is="type.icon" :class="[type.iconColor, 'w-5 h-5']" />
</template>
<template #actions>
<AppSwitch v-model="notificationSettings[type.key]" :disabled="isInteractionDisabled" />
</template>
</SettingsRow>
</template>
</SettingsSectionCard>
</template>

191
src/routes/settings/PlayerSettings/PlayerSettings.vue
View File

@@ -1,94 +1,128 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useTranslation } from 'i18next-vue';
import { client } from '@/api/client';
import AppButton from '@/components/app/AppButton.vue';
import AppSwitch from '@/components/app/AppSwitch.vue';
import CheckIcon from '@/components/icons/CheckIcon.vue';
import {
createPlayerSettingsDraft,
toPlayerPreferencesPayload,
useSettingsPreferencesQuery,
} from '@/composables/useSettingsPreferencesQuery';
import { useAppToast } from '@/composables/useAppToast';
import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
import SettingsRowSkeleton from '@/routes/settings/components/SettingsRowSkeleton.vue';
import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
import { computed, ref, watch } from 'vue';
import { useTranslation } from 'i18next-vue';
const toast = useAppToast();
const { t } = useTranslation();
const playerSettings = ref({
autoplay: true,
loop: false,
muted: false,
showControls: true,
pip: true,
airplay: true,
Chromecast: false,
});
const { data: preferencesSnapshot, error, isPending, refetch } = useSettingsPreferencesQuery();
const playerSettings = ref(createPlayerSettingsDraft());
const saving = ref(false);
const settingsItems = computed(() => [
{
key: 'autoplay' as const,
title: 'settings.playerSettings.items.autoplay.title',
description: 'settings.playerSettings.items.autoplay.description',
svg: `<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 404"><path d="M26 45v314c0 10 9 19 19 19 5 0 9-2 13-5l186-157c4-3 6-9 6-14s-2-11-6-14L58 31c-4-3-8-5-13-5-10 0-19 9-19 19z" class="fill-primary/30"/><path d="M26 359c0 11 9 19 19 19 5 0 9-2 13-4l186-158c4-3 6-9 6-14s-2-11-6-14L58 31c-4-3-8-5-13-5-10 0-19 9-19 19v314zm-16 0V45c0-19 16-35 35-35 8 0 17 3 23 8l186 158c8 6 12 16 12 26s-4 20-12 26L68 386c-6 5-15 8-23 8-19 0-35-16-35-35zM378 18v368c0 4-4 8-8 8s-8-4-8-8V18c0-4 4-8 8-8s8 4 8 8zm144 0v368c0 4-4 8-8 8s-8-4-8-8V18c0-4 4-8 8-8s8 4 8 8z" class="fill-primary"/></svg>`,
},
{
key: 'loop' as const,
title: 'settings.playerSettings.items.loop.title',
description: 'settings.playerSettings.items.loop.description',
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 497 496"><path d="M80 248c0 30 8 58 21 82h65c8 0 14 6 14 14s-6 14-14 14h-45c31 36 76 58 127 58 93 0 168-75 168-168 0-30-8-58-21-82h-65c-8 0-14-6-14-14s6-14 14-14h45c-31-35-76-58-127-58-93 0-168 75-168 168z" class="fill-primary/30"/><path d="M70 358c37 60 103 100 179 100 116 0 210-94 210-210 0-8 6-14 14-14 7 0 14 6 14 14 0 131-107 238-238 238-82 0-154-41-197-104v90c0 8-6 14-14 14s-14-6-14-14V344c0-8 6-14 14-14h128c8 0 14 6 14 14s-6 14-14 14H70zm374-244V24c0-8 6-14 14-14s14 6 14 14v128c0 8-6 14-14 14H330c-8 0-14-6-14-14s6-14 14-14h96C389 78 323 38 248 38 132 38 38 132 38 248c0 8-7 14-14 14-8 0-14-6-14-14C10 117 116 10 248 10c81 0 153 41 196 104z" class="fill-primary"/></svg>`,
},
{
key: 'muted' as const,
title: 'settings.playerSettings.items.muted.title',
description: 'settings.playerSettings.items.muted.description',
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 549 468"><path d="M26 186v96c0 18 14 32 32 32h64c4 0 8 2 11 5l118 118c4 3 8 5 13 5 10 0 18-8 18-18V44c0-10-8-18-18-18-5 0-9 2-13 5L133 149c-3 3-7 5-11 5H58c-18 0-32 14-32 32z" class="fill-primary/30"/><path d="m133 319 118 118c4 3 8 5 13 5 10 0 18-8 18-18V44c0-10-8-18-18-18-5 0-9 2-13 5L133 149c-3 3-7 5-11 5H58c-18 0-32 14-32 32v96c0 18 14 32 32 32h64c4 0 8 2 11 5zM58 138h64L240 20c7-6 15-10 24-10 19 0 34 15 34 34v380c0 19-15 34-34 34-9 0-17-4-24-10L122 330H58c-26 0-48-21-48-48v-96c0-26 22-48 48-48zm322 18c3-3 9-3 12 0l66 67 66-67c3-3 8-3 12 0 3 3 3 9 0 12l-67 66 67 66c3 3 3 8 0 12-4 3-9 3-12 0l-66-67-66 67c-3 3-9 3-12 0-3-4-3-9 0-12l67-66-67-66c-3-3-3-9 0-12z" class="fill-primary"/></svg>`,
},
{
key: 'showControls' as const,
title: 'settings.playerSettings.items.showControls.title',
description: 'settings.playerSettings.items.showControls.description',
svg: `<svg class="h6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 468"><path d="M26 74v320c0 27 22 48 48 48h320c27 0 48-21 48-48V74c0-26-21-48-48-48H74c-26 0-48 22-48 48zm48 72c0-4 4-8 8-8h56v-24c0-18 14-32 32-32s32 14 32 32v24h184c4 0 8 4 8 8s-4 8-8 8H202v24c0 18-14 32-32 32s-32-14-32-32v-24H82c-4 0-8-4-8-8zm0 176c0-4 4-8 8-8h184v-24c0-18 14-32 32-32s32 14 32 32v24h56c4 0 8 4 8 8s-4 8-8 8h-56v24c0 18-14 32-32 32s-32-14-32-32v-24H82c-4 0-8-4-8-8z" class="fill-primary/30"/><path d="M442 74c0-26-21-48-48-48H74c-26 0-48 22-48 48v320c0 27 22 48 48 48h320c27 0 48-21 48-48V74zm16 320c0 35-29 64-64 64H74c-35 0-64-29-64-64V74c0-35 29-64 64-64h320c35 0 64 29 64 64v320zm-64-72c0 4-4 8-8 8h-56v24c0 18-14 32-32 32s-32-14-32-32v-24H82c-4 0-8-4-8-8s4-8 8-8h184v-24c0-18 14-32 32-32s32 14 32 32v24h56c4 0 8 4 8 8zm-112 0v32c0 9 7 16 16 16s16-7 16-16v-64c0-9-7-16-16-16s-16 7-16 16v32zm104-184c4 0 8 4 8 8s-4 8-8 8H202v24c0 18-14 32-32 32s-32-14-32-32v-24H82c-4 0-8-4-8-8s4-8 8-8h56v-24c0-18 14-32 32-32s32 14 32 32v24h184zm-232-24v64c0 9 7 16 16 16s16-7 16-16v-64c0-9-7-16-16-16s-16 7-16 16z" class="fill-primary"/></svg>`,
},
{
key: 'pip' as const,
title: 'settings.playerSettings.items.pip.title',
description: 'settings.playerSettings.items.pip.description',
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 468"><path d="M26 74c0-26 22-48 48-48h384c27 0 48 22 48 48v112H314c-53 0-96 43-96 96v160H74c-26 0-48-21-48-48V74z" class="fill-primary/30"/><path d="M458 10c35 0 64 29 64 64v112h-16V74c0-26-21-48-48-48H74c-26 0-48 22-48 48v320c0 27 22 48 48 48h144v16H68c-31-3-55-27-58-57V74c0-33 25-60 58-64h390zm16 224c27 0 48 22 48 48v133c-3 24-23 43-48 43H309c-22-2-40-20-43-43V282c0-26 22-48 48-48h160zm-160 16c-18 0-32 14-32 32v128c0 18 14 32 32 32h160c18 0 32-14 32-32V282c0-18-14-32-32-32H314z" class="fill-primary"/></svg>`,
},
{
key: 'airplay' as const,
title: 'settings.playerSettings.items.airplay.title',
description: 'settings.playerSettings.items.airplay.description',
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 436"><path d="M26 74c0-26 22-48 48-48h384c27 0 48 22 48 48v224c0 26-21 47-47 48-45-45-91-91-136-137-32-31-82-31-114 0-45 46-91 91-136 137-26-1-47-22-47-48V74z" class="fill-primary/30"/><path d="M458 26H74c-26 0-48 22-48 48v224c0 26 21 47 47 48l-14 14c-28-7-49-32-49-62V74c0-35 29-64 64-64h384c35 0 64 29 64 64v224c0 30-21 55-49 62l-14-14c26-1 47-22 47-48V74c0-26-21-48-48-48zM138 410h256c7 0 12-4 15-10 2-6 1-13-4-17L277 255c-6-6-16-6-22 0L127 383c-5 4-6 11-4 17 3 6 9 10 15 10zm279-39c9 10 12 23 7 35s-17 20-30 20H138c-13 0-25-8-30-20s-2-25 7-35l128-128c13-12 33-12 46 0l128 128z" class="fill-primary"/></svg>`,
},
{
key: 'chromecast' as const,
title: 'settings.playerSettings.items.chromecast.title',
description: 'settings.playerSettings.items.chromecast.description',
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 468"><path d="M26 74c0-26 22-48 48-48h384c27 0 48 22 48 48v320c0 27-21 48-48 48H314v-9c0-154-125-279-279-279h-9V74z" class="fill-primary/30"/><path d="M458 26H74c-26 0-48 22-48 48v80H10V74c0-35 29-64 64-64h384c35 0 64 29 64 64v320c0 35-29 64-64 64H314v-16h144c27 0 48-21 48-48V74c0-26-21-48-48-48zM18 202c137 0 248 111 248 248 0 4-4 8-8 8s-8-4-8-8c0-128-104-232-232-232-4 0-8-4-8-8s4-8 8-8zm40 224c0-9-7-16-16-16s-16 7-16 16 7 16 16 16 16-7 16-16zm-48 0c0-18 14-32 32-32s32 14 32 32-14 32-32 32-32-14-32-32zm0-120c0-4 4-8 8-8 84 0 152 68 152 152 0 4-4 8-8 8s-8-4-8-8c0-75-61-136-136-136-4 0-8-4-8-8z" class="fill-primary"/></svg>`,
},
{
key: 'encrytion_m3u8' as const,
title: 'settings.playerSettings.items.encrytion_m3u8.title',
description: 'settings.playerSettings.items.encrytion_m3u8.description',
svg: `<svg xmlns="http://www.w3.org/2000/svg" class="fill-primary/30" viewBox="0 0 564 564"><path d="M26 74c0-26 22-48 48-48h134c3 0 7 0 10 1v103c0 31 25 56 56 56h120v11c-38 18-64 56-64 101v29c-29 16-48 47-48 83v96H74c-26 0-48-21-48-48V74z"/><path d="M208 26H74c-26 0-48 22-48 48v384c0 27 22 48 48 48h208c0 6 1 11 1 16H74c-35 0-64-29-64-64V74c0-35 29-64 64-64h134c17 0 33 7 45 19l122 122c10 10 16 22 18 35H274c-31 0-56-25-56-56V27c-3-1-7-1-10-1zm156 137L241 40c-2-2-4-4-7-6v96c0 22 18 40 40 40h96c-2-3-4-5-6-7zm126 135c0-26-21-48-48-48-26 0-48 22-48 48v64h96v-64zM346 410v96c0 18 14 32 32 32h128c18 0 32-14 32-32v-96c0-18-14-32-32-32H378c-18 0-32 14-32 32zm160-112v64c27 0 48 22 48 48v96c0 27-21 48-48 48H378c-26 0-48-21-48-48v-96c0-26 22-48 48-48v-64c0-35 29-64 64-64s64 29 64 64z" class="fill-primary"/></svg>`,
},
]);
const isInitialLoading = computed(() => isPending.value && !preferencesSnapshot.value);
const isInteractionDisabled = computed(() => saving.value || isInitialLoading.value || !preferencesSnapshot.value);
watch(preferencesSnapshot, (snapshot) => {
if (!snapshot) return;
playerSettings.value = createPlayerSettingsDraft(snapshot);
}, { immediate: true });
watch(error, (value, previous) => {
if (!value || value === previous || saving.value) return;
toast.add({
severity: 'error',
summary: t('settings.playerSettings.toast.failedSummary'),
detail: (value as any)?.message || t('settings.playerSettings.toast.failedDetail'),
life: 5000,
});
});
const handleSave = async () => {
if (saving.value || !preferencesSnapshot.value) return;
saving.value = true;
try {
await new Promise(resolve => setTimeout(resolve, 1000));
await client.settings.preferencesUpdate(
toPlayerPreferencesPayload(playerSettings.value),
{ baseUrl: '/r' },
);
await refetch();
toast.add({
severity: 'success',
summary: t('settings.playerSettings.toast.savedSummary'),
detail: t('settings.playerSettings.toast.savedDetail'),
life: 3000
life: 3000,
});
} catch (e: any) {
toast.add({
severity: 'error',
summary: t('settings.playerSettings.toast.failedSummary'),
detail: e.message || t('settings.playerSettings.toast.failedDetail'),
life: 5000
life: 5000,
});
} finally {
saving.value = false;
}
};
const settingsItems = computed(() => [
{
key: 'autoplay' as const,
title: t('settings.playerSettings.items.autoplay.title'),
description: t('settings.playerSettings.items.autoplay.description'),
svg: `<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 404"><path d="M26 45v314c0 10 9 19 19 19 5 0 9-2 13-5l186-157c4-3 6-9 6-14s-2-11-6-14L58 31c-4-3-8-5-13-5-10 0-19 9-19 19z" class="fill-primary/30"/><path d="M26 359c0 11 9 19 19 19 5 0 9-2 13-4l186-158c4-3 6-9 6-14s-2-11-6-14L58 31c-4-3-8-5-13-5-10 0-19 9-19 19v314zm-16 0V45c0-19 16-35 35-35 8 0 17 3 23 8l186 158c8 6 12 16 12 26s-4 20-12 26L68 386c-6 5-15 8-23 8-19 0-35-16-35-35zM378 18v368c0 4-4 8-8 8s-8-4-8-8V18c0-4 4-8 8-8s8 4 8 8zm144 0v368c0 4-4 8-8 8s-8-4-8-8V18c0-4 4-8 8-8s8 4 8 8z" class="fill-primary"/></svg>`,
},
{
key: 'loop' as const,
title: t('settings.playerSettings.items.loop.title'),
description: t('settings.playerSettings.items.loop.description'),
svg: `<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 497 496"><path d="M80 248c0 30 8 58 21 82h65c8 0 14 6 14 14s-6 14-14 14h-45c31 36 76 58 127 58 93 0 168-75 168-168 0-30-8-58-21-82h-65c-8 0-14-6-14-14s6-14 14-14h45c-31-35-76-58-127-58-93 0-168 75-168 168z" class="fill-primary/30"/><path d="M70 358c37 60 103 100 179 100 116 0 210-94 210-210 0-8 6-14 14-14 7 0 14 6 14 14 0 131-107 238-238 238-82 0-154-41-197-104v90c0 8-6 14-14 14s-14-6-14-14V344c0-8 6-14 14-14h128c8 0 14 6 14 14s-6 14-14 14H70zm374-244V24c0-8 6-14 14-14s14 6 14 14v128c0 8-6 14-14 14H330c-8 0-14-6-14-14s6-14 14-14h96C389 78 323 38 248 38 132 38 38 132 38 248c0 8-7 14-14 14-8 0-14-6-14-14C10 117 116 10 248 10c81 0 153 41 196 104z" class="fill-primary"/></svg>`,
},
{
key: 'muted' as const,
title: t('settings.playerSettings.items.muted.title'),
description: t('settings.playerSettings.items.muted.description'),
svg: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 549 468"><path d="M26 186v96c0 18 14 32 32 32h64c4 0 8 2 11 5l118 118c4 3 8 5 13 5 10 0 18-8 18-18V44c0-10-8-18-18-18-5 0-9 2-13 5L133 149c-3 3-7 5-11 5H58c-18 0-32 14-32 32z" class="fill-primary/30"/><path d="m133 319 118 118c4 3 8 5 13 5 10 0 18-8 18-18V44c0-10-8-18-18-18-5 0-9 2-13 5L133 149c-3 3-7 5-11 5H58c-18 0-32 14-32 32v96c0 18 14 32 32 32h64c4 0 8 2 11 5zM58 138h64L240 20c7-6 15-10 24-10 19 0 34 15 34 34v380c0 19-15 34-34 34-9 0-17-4-24-10L122 330H58c-26 0-48-21-48-48v-96c0-26 22-48 48-48zm322 18c3-3 9-3 12 0l66 67 66-67c3-3 8-3 12 0 3 3 3 9 0 12l-67 66 67 66c3 3 3 8 0 12-4 3-9 3-12 0l-66-67-66 67c-3 3-9 3-12 0-3-4-3-9 0-12l67-66-67-66c-3-3-3-9 0-12z" class="fill-primary"/></svg>`,
},
{
key: 'showControls' as const,
title: t('settings.playerSettings.items.showControls.title'),
description: t('settings.playerSettings.items.showControls.description'),
svg: `<svg class="h6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 468"><path d="M26 74v320c0 27 22 48 48 48h320c27 0 48-21 48-48V74c0-26-21-48-48-48H74c-26 0-48 22-48 48zm48 72c0-4 4-8 8-8h56v-24c0-18 14-32 32-32s32 14 32 32v24h184c4 0 8 4 8 8s-4 8-8 8H202v24c0 18-14 32-32 32s-32-14-32-32v-24H82c-4 0-8-4-8-8zm0 176c0-4 4-8 8-8h184v-24c0-18 14-32 32-32s32 14 32 32v24h56c4 0 8 4 8 8s-4 8-8 8h-56v24c0 18-14 32-32 32s-32-14-32-32v-24H82c-4 0-8-4-8-8z" class="fill-primary/30"/><path d="M442 74c0-26-21-48-48-48H74c-26 0-48 22-48 48v320c0 27 22 48 48 48h320c27 0 48-21 48-48V74zm16 320c0 35-29 64-64 64H74c-35 0-64-29-64-64V74c0-35 29-64 64-64h320c35 0 64 29 64 64v320zm-64-72c0 4-4 8-8 8h-56v24c0 18-14 32-32 32s-32-14-32-32v-24H82c-4 0-8-4-8-8s4-8 8-8h184v-24c0-18 14-32 32-32s32 14 32 32v24h56c4 0 8 4 8 8zm-112 0v32c0 9 7 16 16 16s16-7 16-16v-64c0-9-7-16-16-16s-16 7-16 16v32zm104-184c4 0 8 4 8 8s-4 8-8 8H202v24c0 18-14 32-32 32s-32-14-32-32v-24H82c-4 0-8-4-8-8s4-8 8-8h56v-24c0-18 14-32 32-32s32 14 32 32v24h184zm-232-24v64c0 9 7 16 16 16s16-7 16-16v-64c0-9-7-16-16-16s-16 7-16 16z" class="fill-primary"/></svg>`
},
{
key: 'pip' as const,
title: t('settings.playerSettings.items.pip.title'),
description: t('settings.playerSettings.items.pip.description'),
svg: `<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 468"><path d="M26 74c0-26 22-48 48-48h384c27 0 48 22 48 48v112H314c-53 0-96 43-96 96v160H74c-26 0-48-21-48-48V74z" class="fill-primary/30"/><path d="M458 10c35 0 64 29 64 64v112h-16V74c0-26-21-48-48-48H74c-26 0-48 22-48 48v320c0 27 22 48 48 48h144v16H68c-31-3-55-27-58-57V74c0-33 25-60 58-64h390zm16 224c27 0 48 22 48 48v133c-3 24-23 43-48 43H309c-22-2-40-20-43-43V282c0-26 22-48 48-48h160zm-160 16c-18 0-32 14-32 32v128c0 18 14 32 32 32h160c18 0 32-14 32-32V282c0-18-14-32-32-32H314z" class="fill-primary"/></svg>`
},
{
key: 'airplay' as const,
title: t('settings.playerSettings.items.airplay.title'),
description: t('settings.playerSettings.items.airplay.description'),
svg: `<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 436"><path d="M26 74c0-26 22-48 48-48h384c27 0 48 22 48 48v224c0 26-21 47-47 48-45-45-91-91-136-137-32-31-82-31-114 0-45 46-91 91-136 137-26-1-47-22-47-48V74z" class="fill-primary/30"/><path d="M458 26H74c-26 0-48 22-48 48v224c0 26 21 47 47 48l-14 14c-28-7-49-32-49-62V74c0-35 29-64 64-64h384c35 0 64 29 64 64v224c0 30-21 55-49 62l-14-14c26-1 47-22 47-48V74c0-26-21-48-48-48zM138 410h256c7 0 12-4 15-10 2-6 1-13-4-17L277 255c-6-6-16-6-22 0L127 383c-5 4-6 11-4 17 3 6 9 10 15 10zm279-39c9 10 12 23 7 35s-17 20-30 20H138c-13 0-25-8-30-20s-2-25 7-35l128-128c13-12 33-12 46 0l128 128z" class="fill-primary"/></svg>`,
},
{
key: 'Chromecast' as const,
title: t('settings.playerSettings.items.chromecast.title'),
description: t('settings.playerSettings.items.chromecast.description'),
svg: `<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 468"><path d="M26 74c0-26 22-48 48-48h384c27 0 48 22 48 48v320c0 27-21 48-48 48H314v-9c0-154-125-279-279-279h-9V74z" class="fill-primary/30"/><path d="M458 26H74c-26 0-48 22-48 48v80H10V74c0-35 29-64 64-64h384c35 0 64 29 64 64v320c0 35-29 64-64 64H314v-16h144c27 0 48-21 48-48V74c0-26-21-48-48-48zM18 202c137 0 248 111 248 248 0 4-4 8-8 8s-8-4-8-8c0-128-104-232-232-232-4 0-8-4-8-8s4-8 8-8zm40 224c0-9-7-16-16-16s-16 7-16 16 7 16 16 16 16-7 16-16zm-48 0c0-18 14-32 32-32s32 14 32 32-14 32-32 32-32-14-32-32zm0-120c0-4 4-8 8-8 84 0 152 68 152 152 0 4-4 8-8 8s-8-4-8-8c0-75-61-136-136-136-4 0-8-4-8-8z" class="fill-primary"/></svg>`,
},
]);
</script>
<template>
@@ -97,7 +131,7 @@ const settingsItems = computed(() => [
:description="t('settings.content.player.subtitle')"
>
<template #header-actions>
<AppButton size="sm" :loading="saving" @click="handleSave">
<AppButton size="sm" :loading="saving" :disabled="isInitialLoading || !preferencesSnapshot" @click="handleSave">
<template #icon>
<CheckIcon class="w-4 h-4" />
</template>
@@ -105,20 +139,29 @@ const settingsItems = computed(() => [
</AppButton>
</template>
<SettingsRow
v-for="item in settingsItems"
:key="item.key"
:title="item.title"
:description="item.description"
iconBoxClass="bg-primary/10 text-primary"
>
<template #icon>
<span v-html="item.svg" />
</template>
<template v-if="isInitialLoading">
<SettingsRowSkeleton
v-for="item in settingsItems"
:key="item.key"
/>
</template>
<template #actions>
<AppSwitch v-model="playerSettings[item.key]" />
</template>
</SettingsRow>
<template v-else>
<SettingsRow
v-for="item in settingsItems"
:key="item.key"
:title="$t(item.title)"
:description="$t(item.description)"
iconBoxClass="bg-primary/10 text-primary"
>
<template #icon>
<span v-html="item.svg" class="h-6 w-6" />
</template>
<template #actions>
<AppSwitch v-model="playerSettings[item.key]" :disabled="isInteractionDisabled" />
</template>
</SettingsRow>
</template>
</SettingsSectionCard>
</template>

46
src/routes/settings/SecurityNConnected/SecurityNConnected.vue
View File

@@ -19,10 +19,10 @@ import { computed, ref } from 'vue';
const auth = useAuthStore();
const toast = useAppToast();
const confirm = useAppConfirm();
const { t } = useTranslation();
const { t, i18next } = useTranslation();
const languageSaving = ref(false);
const selectedLanguage = ref('en');
const selectedLanguage = ref<string>(auth.user?.language || "en");
const languageOptions = computed(() => supportedLocales.map((value) => ({
value,
label: t(`settings.securityConnected.language.options.${value}`)
@@ -282,7 +282,7 @@ const disconnectTelegram = async () => {
</template>
</SettingsRow>
<SettingsRow
<SettingsRow
:title="t('settings.securityConnected.twoFactor.label')"
:description="twoFactorEnabled ? t('settings.securityConnected.twoFactor.enabled') : t('settings.securityConnected.twoFactor.disabled')"
iconBoxClass="bg-primary/10"
@@ -314,26 +314,6 @@ const disconnectTelegram = async () => {
</template>
</SettingsRow>
<SettingsRow
:title="t('settings.securityConnected.logout.label')"
:description="t('settings.securityConnected.logout.detail')"
iconBoxClass="bg-danger/10"
hoverClass="hover:bg-danger/5"
>
<template #icon>
<XCircleIcon class="w-5 h-5 text-danger" />
</template>
<template #actions>
<AppButton variant="danger" size="sm" @click="handleLogout">
<template #icon>
<XCircleIcon class="w-4 h-4" />
</template>
{{ t('settings.securityConnected.logout.button') }}
</AppButton>
</template>
</SettingsRow>
<SettingsRow
:title="t('settings.securityConnected.email.label')"
:description="emailConnected ? t('settings.securityConnected.email.connected') : t('settings.securityConnected.email.disconnected')"
@@ -380,6 +360,26 @@ const disconnectTelegram = async () => {
</AppButton>
</template>
</SettingsRow>
<SettingsRow
:title="t('settings.securityConnected.logout.label')"
:description="t('settings.securityConnected.logout.detail')"
iconBoxClass="bg-danger/10"
hoverClass="hover:bg-danger/5"
>
<template #icon>
<XCircleIcon class="w-5 h-5 text-danger" />
</template>
<template #actions>
<AppButton variant="danger" size="sm" @click="handleLogout">
<template #icon>
<XCircleIcon class="w-4 h-4" />
</template>
{{ t('settings.securityConnected.logout.button') }}
</AppButton>
</template>
</SettingsRow>
</SettingsSectionCard>
<AppDialog

28
src/routes/settings/components/SettingsRowSkeleton.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup lang="ts">
import { cn } from '@/lib/utils';
const props = withDefaults(defineProps<{
actionClass?: string;
titleClass?: string;
descriptionClass?: string;
}>(), {
actionClass: 'h-6 w-11',
titleClass: 'w-32',
descriptionClass: 'w-56 max-w-full',
});
</script>
<template>
<div class="flex items-center justify-between gap-4 px-6 py-4 animate-pulse">
<div class="flex min-w-0 items-center gap-4">
<div class="h-10 w-10 rounded-md bg-muted/50 shrink-0" />
<div class="min-w-0 space-y-2">
<div :class="cn('h-4 rounded bg-muted/50', titleClass)" />
<div :class="cn('h-3 rounded bg-muted/40', descriptionClass)" />
</div>
</div>
<div :class="cn('shrink-0 rounded-full bg-muted/50', actionClass)" />
</div>
</template>

40
src/routes/settings/components/SettingsTableSkeleton.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup lang="ts">
const props = withDefaults(defineProps<{
columns?: number;
rows?: number;
}>(), {
columns: 3,
rows: 4,
});
</script>
<template>
<div class="border-b border-border mt-4">
<table class="w-full">
<thead class="bg-muted/30">
<tr>
<th
v-for="column in columns"
:key="column"
class="px-6 py-3"
>
<div class="h-3 w-20 rounded bg-muted/50 animate-pulse" />
</th>
</tr>
</thead>
<tbody class="divide-y divide-border">
<tr v-for="row in rows" :key="row" class="animate-pulse">
<td v-for="column in columns" :key="column" class="px-6 py-4">
<div class="space-y-2">
<div class="h-4 rounded bg-muted/50" :class="column === columns ? 'ml-auto w-16' : 'w-full max-w-[12rem]'" />
<div
v-if="column === 1"
class="h-3 w-24 rounded bg-muted/40"
/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>

79
src/routes/settings/components/billing/BillingHistorySection.vue
View File

@@ -8,12 +8,17 @@ type PaymentHistoryItem = {
plan: string;
status: string;
invoiceId: string;
currency: string;
kind: string;
details?: string[];
};
defineProps<{
title: string;
description: string;
items: PaymentHistoryItem[];
loading?: boolean;
downloadingId?: string | null;
formatMoney: (amount: number) => string;
getStatusStyles: (status: string) => string;
getStatusLabel: (status: string) => string;
@@ -52,42 +57,58 @@ const emit = defineEmits<{
<div class="col-span-2 text-right">{{ invoiceLabel }}</div>
</div>
<div v-if="items.length === 0" class="text-center py-12 text-foreground/60">
<div v-if="loading" class="px-4 py-6 space-y-3">
<div v-for="index in 3" :key="index" class="grid grid-cols-12 gap-4 items-center animate-pulse">
<div class="col-span-3 h-4 rounded bg-muted/50" />
<div class="col-span-2 h-4 rounded bg-muted/50" />
<div class="col-span-3 h-4 rounded bg-muted/50" />
<div class="col-span-2 h-6 rounded bg-muted/50" />
<div class="col-span-2 h-8 rounded bg-muted/50" />
</div>
</div>
<div v-else-if="items.length === 0" class="text-center py-12 text-foreground/60">
<div class="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-4">
<DownloadIcon class="w-8 h-8 text-foreground/40" />
</div>
<p>{{ emptyLabel }}</p>
</div>
<div
v-for="item in items"
:key="item.id"
class="grid grid-cols-12 gap-4 px-4 py-3 items-center hover:bg-muted/30 transition-all border-t border-border"
>
<div class="col-span-3">
<p class="text-sm font-medium text-foreground">{{ item.date }}</p>
<template v-else>
<div
v-for="item in items"
:key="item.id"
class="grid grid-cols-12 gap-4 px-4 py-3 items-center hover:bg-muted/30 transition-all border-t border-border"
>
<div class="col-span-3">
<p class="text-sm font-medium text-foreground">{{ item.date }}</p>
</div>
<div class="col-span-2">
<p class="text-sm text-foreground">{{ formatMoney(item.amount) }}</p>
</div>
<div class="col-span-3">
<p class="text-sm text-foreground">{{ item.plan }}</p>
<p v-if="item.details?.length" class="mt-1 text-xs text-foreground/60">
{{ item.details.join(' · ') }}
</p>
</div>
<div class="col-span-2">
<span :class="`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${getStatusStyles(item.status)}`">
{{ getStatusLabel(item.status) }}
</span>
</div>
<div class="col-span-2 flex justify-end">
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm text-foreground/70 hover:text-foreground hover:bg-muted/50 rounded-md transition-all disabled:opacity-60 disabled:cursor-wait"
:disabled="downloadingId === item.id"
@click="emit('download', item)"
>
<DownloadIcon class="w-4 h-4" />
<span>{{ downloadingId === item.id ? '...' : downloadLabel }}</span>
</button>
</div>
</div>
<div class="col-span-2">
<p class="text-sm text-foreground">{{ formatMoney(item.amount) }}</p>
</div>
<div class="col-span-3">
<p class="text-sm text-foreground">{{ item.plan }}</p>
</div>
<div class="col-span-2">
<span :class="`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${getStatusStyles(item.status)}`">
{{ getStatusLabel(item.status) }}
</span>
</div>
<div class="col-span-2 flex justify-end">
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm text-foreground/70 hover:text-foreground hover:bg-muted/50 rounded-md transition-all"
@click="emit('download', item)"
>
<DownloadIcon class="w-4 h-4" />
<span>{{ downloadLabel }}</span>
</button>
</div>
</div>
</template>
</div>
</div>
</template>

57
src/routes/settings/components/billing/BillingPlansSection.vue
View File

@@ -9,18 +9,18 @@ defineProps<{
isLoading: boolean;
plans: ModelPlan[];
currentPlanId?: string;
subscribing: string | null;
selectingPlanId?: string | null;
formatMoney: (amount: number) => string;
getPlanStorageText: (plan: ModelPlan) => string;
getPlanDurationText: (plan: ModelPlan) => string;
getPlanUploadsText: (plan: ModelPlan) => string;
currentPlanLabel: string;
processingLabel: string;
upgradeLabel: string;
selectingLabel: string;
chooseLabel: string;
}>();
const emit = defineEmits<{
(e: 'subscribe', plan: ModelPlan): void;
(e: 'select', plan: ModelPlan): void;
}>();
</script>
@@ -44,22 +44,32 @@ const emit = defineEmits<{
<div v-else class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div
v-for="plan in plans"
v-for="plan in plans.sort((a,b) => a.price - b.price)"
:key="plan.id"
class="border border-border rounded-lg p-4 hover:bg-muted/30 transition-all"
:class="[
'border rounded-lg p-4 hover:bg-muted/30 transition-all flex flex-col',
plan.id === currentPlanId ? 'border-primary/40 bg-primary/5' : 'border-border',
]"
>
<div class="mb-3">
<h3 class="text-lg font-semibold text-foreground">{{ plan.name }}</h3>
<div class="flex items-center justify-between gap-3">
<h3 class="text-lg font-semibold text-foreground">{{ plan.name }}</h3>
<span
v-if="plan.id === currentPlanId"
class="inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary"
>
{{ currentPlanLabel }}
</span>
</div>
<p class="text-sm text-foreground/60 mt-1 min-h-[2.5rem]">{{ plan.description }}</p>
</div>
<div class="mb-4">
<span class="text-2xl font-bold text-foreground">{{ formatMoney(plan.price || 0) }}</span>
<span class="text-foreground/60 text-sm">/{{ plan.cycle }}</span>
<span class="text-foreground/60 text-sm"> / {{ $t('settings.billing.cycle.'+plan.cycle) }}</span>
</div>
<ul class="space-y-2 mb-4 text-sm">
<li class="flex items-center gap-2 text-foreground/70">
<!-- <li class="flex items-center gap-2 text-foreground/70">
<CheckIcon class="w-4 h-4 text-success shrink-0" />
{{ getPlanStorageText(plan) }}
</li>
@@ -70,24 +80,29 @@ const emit = defineEmits<{
<li class="flex items-center gap-2 text-foreground/70">
<CheckIcon class="w-4 h-4 text-success shrink-0" />
{{ getPlanUploadsText(plan) }}
</li> -->
<li
v-for="feature in plan.features || []"
:key="feature"
class="flex items-center gap-2 text-foreground/70"
>
<CheckIcon class="w-4 h-4 text-success shrink-0" />
{{ feature }}
</li>
</ul>
<button
:disabled="!!subscribing || plan.id === currentPlanId"
v-if="plan.id !== currentPlanId"
:disabled="selectingPlanId === plan.id"
:class="[
'w-full py-2 px-4 rounded-md text-sm font-medium transition-all',
plan.id === currentPlanId
? 'bg-muted/50 text-foreground/60 cursor-not-allowed'
: subscribing === plan.id
? 'bg-muted/50 text-foreground/60 cursor-wait'
: 'bg-primary text-primary-foreground hover:bg-primary/90'
'w-full py-2 px-4 rounded-md text-sm font-medium transition-all mt-a',
selectingPlanId === plan.id
? 'bg-muted/50 text-foreground/60 cursor-wait'
: 'bg-primary text-white hover:bg-primary/90'
]"
@click="emit('subscribe', plan)"
@click="emit('select', plan)"
>
{{ plan.id === currentPlanId
? currentPlanLabel
: (subscribing === plan.id ? processingLabel : upgradeLabel) }}
{{ selectingPlanId === plan.id ? selectingLabel : chooseLabel }}
</button>
</div>
</div>

28
src/routes/settings/components/billing/BillingWalletRow.vue
View File

@@ -8,6 +8,9 @@ defineProps<{
title: string;
description: string;
buttonLabel: string;
subscriptionTitle?: string;
subscriptionDescription?: string;
subscriptionTone?: 'default' | 'warning';
}>();
const emit = defineEmits<{
@@ -22,12 +25,25 @@ const emit = defineEmits<{
</template>
<template #actions>
<AppButton size="sm" @click="emit('topup')">
<template #icon>
<PlusIcon class="w-4 h-4" />
</template>
{{ buttonLabel }}
</AppButton>
<div class="flex flex-col items-end gap-2">
<!-- <div
v-if="subscriptionTitle || subscriptionDescription"
class="rounded-md border px-3 py-2 text-right"
:class="subscriptionTone === 'warning'
? 'border-warning/30 bg-warning/10 text-warning'
: 'border-border bg-muted/30 text-foreground/70'"
>
<p v-if="subscriptionTitle" class="text-xs font-medium">{{ subscriptionTitle }}</p>
<p v-if="subscriptionDescription" class="mt-0.5 text-xs">{{ subscriptionDescription }}</p>
</div> -->
<AppButton size="sm" @click="emit('topup')">
<template #icon>
<PlusIcon class="w-4 h-4" />
</template>
{{ buttonLabel }}
</AppButton>
</div>
</template>
</SettingsRow>
</template>

14
src/routes/video/CopyVideoModal.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import type { ModelVideo } from '@/api/client';
import { fetchMockVideoById } from '@/mocks/videos';
import { client, type ModelVideo } from '@/api/client';
import { useAppToast } from '@/composables/useAppToast';
import { computed, ref, watch } from 'vue';
import { useTranslation } from 'i18next-vue';
@@ -22,7 +21,8 @@ const { t } = useTranslation();
const fetchVideo = async () => {
loading.value = true;
try {
const videoData = await fetchMockVideoById(props.videoId);
const response = await client.videos.videosDetail(props.videoId, { baseUrl: '/r' });
const videoData = (response.data as any)?.data?.video || (response.data as any)?.data;
if (videoData) {
video.value = videoData;
}
@@ -44,11 +44,13 @@ const baseUrl = computed(() => typeof window !== 'undefined' ? window.location.o
const shareLinks = computed(() => {
if (!video.value) return [];
const v = video.value;
const playbackPath = v.url || `/play/index/${v.id}`;
const playbackUrl = playbackPath.startsWith('http') ? playbackPath : `${baseUrl.value}${playbackPath}`;
return [
{
key: 'embed',
label: t('video.copyModal.embedPlayer'),
value: `${baseUrl.value}/play/index/${v.id}`,
value: playbackUrl,
},
{
key: 'thumbnail',
@@ -58,7 +60,7 @@ const shareLinks = computed(() => {
{
key: 'hls',
label: t('video.copyModal.hls'),
value: v.hls_path ? `${baseUrl.value}/hls/getlink/${v.id}/${v.hls_token}/${v.hls_path}` : '',
value: playbackUrl,
placeholder: t('video.copyModal.hlsPlaceholder'),
hint: t('video.copyModal.hlsHint'),
},
@@ -129,7 +131,7 @@ watch(() => props.videoId, (newId) => {
<p class="text-sm font-medium text-muted-foreground">{{ link.label }}</p>
<div class="flex gap-2">
<AppInput :model-value="link.value || ''" :placeholder="link.placeholder" readonly
input-class="!font-mono !text-xs" @click="($event.target as HTMLInputElement)?.select()" />
input-class="!font-mono !text-xs" wrapperClass="w-full" @click="($event.target as HTMLInputElement)?.select()" />
<AppButton variant="secondary" :disabled="!link.value || copiedField === link.key"
@click="copyToClipboard(link.value, link.key)" class="shrink-0">
<!-- Copy icon -->

233
src/routes/video/DetailVideo.vue
View File

@@ -1,233 +0,0 @@
<script setup lang="ts">
import type { ModelVideo } from '@/api/client';
import PageHeader from '@/components/dashboard/PageHeader.vue';
import { deleteMockVideo, fetchMockVideoById, updateMockVideo } from '@/mocks/videos';
import { useAppConfirm } from '@/composables/useAppConfirm';
import { useAppToast } from '@/composables/useAppToast';
import { computed, onMounted, ref } from 'vue';
import { useTranslation } from 'i18next-vue';
import { useRoute, useRouter } from 'vue-router';
import VideoEditForm from './components/Detail/VideoEditForm.vue';
import VideoHeader from './components/Detail/VideoInfoHeader.vue';
import VideoPlayer from './components/Detail/VideoPlayer.vue';
import VideoSkeleton from './components/Detail/VideoSkeleton.vue';
const route = useRoute();
const router = useRouter();
const toast = useAppToast();
const confirm = useAppConfirm();
const { t } = useTranslation();
const videoId = route.params.id as string;
const video = ref<ModelVideo | null>(null);
const loading = ref(true);
const saving = ref(false);
const isEditing = ref(false);
const form = ref({
title: '',
description: '',
});
const fetchVideo = async () => {
loading.value = true;
try {
const videoData = await fetchMockVideoById(videoId);
if (videoData) {
video.value = videoData;
form.value.title = videoData.title || '';
form.value.description = videoData.description || '';
}
} catch (error) {
console.error('Failed to fetch video:', error);
toast.add({
severity: 'error',
summary: t('video.detailModal.toast.loadErrorSummary'),
detail: t('video.detailModal.toast.loadErrorDetail'),
life: 3000
});
router.push('/video');
} finally {
loading.value = false;
}
};
const handleReload = async () => {
toast.add({
severity: 'info',
summary: t('video.detailPage.toast.reloadSummary'),
detail: t('video.detailPage.toast.reloadDetail'),
life: 2000
});
await fetchVideo();
};
const toggleEdit = () => {
isEditing.value = !isEditing.value;
if (!isEditing.value && video.value) {
form.value.title = video.value.title || '';
form.value.description = video.value.description || '';
}
};
const handleSave = async () => {
saving.value = true;
try {
await updateMockVideo(videoId, form.value);
if (video.value) {
video.value.title = form.value.title;
video.value.description = form.value.description;
}
toast.add({
severity: 'success',
summary: t('video.detailModal.toast.saveSuccessSummary'),
detail: t('video.detailModal.toast.saveSuccessDetail'),
life: 3000
});
isEditing.value = false;
} catch (error) {
console.error('Failed to save video:', error);
toast.add({
severity: 'error',
summary: t('video.detailModal.toast.saveErrorSummary'),
detail: t('video.detailModal.toast.saveErrorDetail'),
life: 3000
});
} finally {
saving.value = false;
}
};
const handleDelete = () => {
confirm.require({
message: t('video.detailPage.confirmDelete.message'),
header: t('video.detailPage.confirmDelete.header'),
acceptLabel: t('video.detailPage.confirmDelete.accept'),
rejectLabel: t('video.detailPage.confirmDelete.reject'),
accept: async () => {
try {
await deleteMockVideo(videoId);
toast.add({
severity: 'success',
summary: t('video.detailPage.toast.deleteSuccessSummary'),
detail: t('video.detailPage.toast.deleteSuccessDetail'),
life: 3000
});
router.push('/video');
} catch (error) {
console.error('Failed to delete video:', error);
toast.add({
severity: 'error',
summary: t('video.detailPage.toast.deleteErrorSummary'),
detail: t('video.detailPage.toast.deleteErrorDetail'),
life: 3000
});
}
},
reject: () => { }
});
};
const copyToClipboard = async (text: string, label: string) => {
try {
await navigator.clipboard.writeText(text);
} catch {
const textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
}
toast.add({
severity: 'success',
summary: t('video.detailPage.toast.copySummary'),
detail: t('video.detailPage.toast.copyDetail', { label }),
life: 2000
});
};
const origin = computed(() => typeof window !== 'undefined' ? window.location.origin : '');
const videoInfos = computed(() => {
if (!video.value) return [];
const embedUrl = `${origin.value}/embed/${video.value.id}`;
return [
{ label: t('video.detailPage.videoInfo.videoId'), value: video.value.id ?? '' },
{ label: t('video.detailPage.videoInfo.thumbnailUrl'), value: video.value.thumbnail ?? '' },
{ label: t('video.detailPage.videoInfo.embedUrl'), value: embedUrl },
{
label: t('video.detailPage.videoInfo.iframeCode'),
value: embedUrl ? `<iframe src="${embedUrl}" title="${video.value.title}" width="100%" height="400" frameborder="0" allowfullscreen></iframe>` : ''
},
{ label: t('video.detailPage.videoInfo.shareLink'), value: `${origin.value}/view/${video.value.id}` },
];
});
onMounted(() => {
fetchVideo();
});
</script>
<template>
<div>
<PageHeader :title="t('video.detailPage.title')" :description="t('video.detailPage.description')" :breadcrumbs="[
{ label: t('pageHeader.dashboard'), to: '/' },
{ label: t('nav.videos'), to: '/video' },
{ label: video?.title || t('video.detailPage.loadingBreadcrumb') }
]" />
<div class="mx-auto p-4 w-full">
<!-- Loading State -->
<VideoSkeleton v-if="loading" />
<!-- Content -->
<div v-else-if="video" class="flex flex-col lg:flex-row gap-4">
<VideoPlayer :video="video" class="lg:flex-1" />
<div class="bg-white rounded-lg border border-gray-200 max-w-full lg:max-w-md w-full flex flex-col">
<div class="px-6 py-4">
<VideoEditForm v-if="isEditing" v-model:title="form.title"
v-model:description="form.description" @save="handleSave" @toggle-edit="toggleEdit" :saving="saving" />
<div v-else>
<VideoHeader :video="video" @reload="handleReload" @toggle-edit="toggleEdit" @delete="handleDelete" />
<div class="mb-4">
<h3 class="text-lg font-medium text-gray-900 mb-4">{{ t('video.detailPage.detailsTitle') }}</h3>
<div class="flex flex-col gap-2">
<dl v-for="info in videoInfos" :key="info.label" class="space-y-2">
<div>
<dt class="text-sm font-medium text-gray-500">{{ info.label }}</dt>
<dd class="text-sm text-gray-900">
<div class="flex items-center space-x-2">
<input readonly
class="flex-1 px-2 py-1 text-xs border border-gray-300 rounded bg-gray-50 font-mono"
:value="info.value || '-'">
<button v-if="info.value"
@click="copyToClipboard(info.value, info.label)"
class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded transition-colors text-gray-700"
:title="t('video.detailPage.copyValueTitle')">
<svg class="w-4 h-4" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
</path>
</svg>
</button>
</div>
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

123
src/routes/video/DetailVideoModal.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { ModelVideo } from '@/api/client';
import { fetchMockVideoById, updateMockVideo } from '@/mocks/videos';
import { client, type ManualAdTemplate, type ModelVideo } from '@/api/client';
import { useAppToast } from '@/composables/useAppToast';
import { ref, watch } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { computed, ref, watch } from 'vue';
import { useTranslation } from 'i18next-vue';
const props = defineProps<{
@@ -14,17 +14,35 @@ const emit = defineEmits<{
}>();
const toast = useAppToast();
const auth = useAuthStore();
const video = ref<ModelVideo | null>(null);
const loading = ref(true);
const saving = ref(false);
const { t } = useTranslation();
type AdConfigPayload = {
ad_template_id: string;
template_name?: string;
vast_tag_url?: string;
ad_format?: string;
duration?: number;
};
const form = ref({
title: '',
description: '',
adTemplateId: '' as string,
});
const errors = ref<{ title?: string; description?: string }>({});
const currentAdConfig = ref<AdConfigPayload | null>(null);
const adTemplates = ref<ManualAdTemplate[]>([]);
const loadingTemplates = ref(false);
const errors = ref<{ title?: string }>({});
const isFreePlan = computed(() => !auth.user?.plan_id);
const activeTemplates = computed(() =>
adTemplates.value.filter(t => t.is_active),
);
const subtitleForm = ref({
file: null as File | null,
@@ -32,15 +50,33 @@ const subtitleForm = ref({
displayName: '',
});
const fetchAdTemplates = async () => {
loadingTemplates.value = true;
try {
const response = await client.adTemplates.adTemplatesList({ baseUrl: '/r' });
const items = ((response.data as any)?.data?.templates || []) as ManualAdTemplate[];
adTemplates.value = items;
} catch (error) {
console.error('Failed to fetch ad templates:', error);
} finally {
loadingTemplates.value = false;
}
};
const fetchVideo = async () => {
loading.value = true;
try {
const videoData = await fetchMockVideoById(props.videoId);
const response = await client.videos.videosDetail(props.videoId, { baseUrl: '/r' });
const data = (response.data as any)?.data;
const videoData = data?.video || data;
const adConfig = data?.ad_config as AdConfigPayload | undefined;
if (videoData) {
video.value = videoData;
currentAdConfig.value = adConfig || null;
form.value = {
title: videoData.title || '',
description: videoData.description || '',
adTemplateId: adConfig?.ad_template_id || '',
};
}
} catch (error) {
@@ -68,11 +104,27 @@ const onFormSubmit = async () => {
if (!validate()) return;
saving.value = true;
try {
await updateMockVideo(props.videoId, form.value);
const payload: Record<string, any> = {
title: form.value.title,
};
if (video.value) {
video.value.title = form.value.title;
video.value.description = form.value.description;
if (!isFreePlan.value) {
payload.ad_template_id = form.value.adTemplateId || '';
}
const response = await client.videos.videosUpdate(props.videoId, payload as any, { baseUrl: '/r' });
const data = (response.data as any)?.data;
const updatedVideo = data?.video as ModelVideo | undefined;
const updatedAdConfig = data?.ad_config as AdConfigPayload | undefined;
if (updatedVideo) {
video.value = updatedVideo;
currentAdConfig.value = updatedAdConfig || null;
form.value = {
title: updatedVideo.title || '',
adTemplateId: updatedAdConfig?.ad_template_id || '',
};
}
toast.add({
@@ -118,13 +170,14 @@ watch(() => props.videoId, (newId) => {
if (newId) {
errors.value = {};
fetchVideo();
fetchAdTemplates();
}
}, { immediate: true });
</script>
<template>
<AppDialog :visible="!!videoId" @update:visible="emit('close')" max-width-class="max-w-xl"
:title="loading ? '' : t('video.detailModal.title')">
:title="loading ? '' : $t('video.detailModal.title')">
<!-- Loading Skeleton -->
<div v-if="loading" class="flex flex-col gap-4">
@@ -133,10 +186,10 @@ watch(() => props.videoId, (newId) => {
<div class="w-12 h-3.5 bg-gray-200 rounded animate-pulse" />
<div class="w-full h-10 bg-gray-200 rounded-md animate-pulse" />
</div>
<!-- Description skeleton -->
<!-- ad-template selector skeleton -->
<div class="flex flex-col gap-2">
<div class="w-20 h-3.5 bg-gray-200 rounded animate-pulse" />
<div class="w-full h-24 bg-gray-200 rounded-md animate-pulse" />
<div class="w-24 h-3.5 bg-gray-200 rounded animate-pulse" />
<div class="w-full h-10 bg-gray-200 rounded-md animate-pulse" />
</div>
<!-- Subtitles section skeleton -->
<div class="flex flex-col gap-3 border-t border-gray-200 pt-4">
@@ -171,27 +224,47 @@ watch(() => props.videoId, (newId) => {
<p v-if="errors.title" class="text-xs text-red-500 mt-0.5">{{ errors.title }}</p>
</div>
<!-- Description -->
<!-- Ad Template Selector -->
<div class="flex flex-col gap-1">
<label for="edit-description" class="text-sm font-medium">{{ t('video.detailModal.descriptionLabel') }}</label>
<textarea id="edit-description" v-model="form.description" :placeholder="t('video.detailModal.descriptionPlaceholder')"
rows="4"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-y" />
<p v-if="errors.description" class="text-xs text-red-500 mt-0.5">{{ errors.description }}</p>
<label for="edit-ad-template" class="text-sm font-medium">{{ t('video.detailModal.adTemplateLabel') }}</label>
<select
id="edit-ad-template"
v-model="form.adTemplateId"
:disabled="isFreePlan || saving"
class="w-full px-3 py-2 border rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
:class="isFreePlan
? 'border-border bg-muted/50 text-foreground/50 cursor-not-allowed'
: 'border-border bg-background text-foreground cursor-pointer hover:border-primary/50'"
>
<option value="">{{ t('video.detailModal.adTemplateNone') }}</option>
<option
v-for="tmpl in activeTemplates"
:key="tmpl.id"
:value="tmpl.id"
>
{{ tmpl.name }}{{ tmpl.is_default ? ` (${t('video.detailModal.adTemplateDefault')})` : '' }}
</option>
</select>
<p v-if="isFreePlan" class="text-xs text-foreground/50 mt-0.5">
{{ t('video.detailModal.adTemplateUpgradeHint') }}
</p>
<p v-else-if="!form.adTemplateId" class="text-xs text-foreground/50 mt-0.5">
{{ t('video.detailModal.adTemplateNoAdsHint') }}
</p>
</div>
<!-- Subtitles Section -->
<div class="flex flex-col gap-3 border-t-2 border-gray-200 pt-4">
<div class="flex flex-col gap-3 border-t-2 border-border pt-4">
<div class="flex items-center justify-between">
<label class="text-sm font-medium">{{ t('video.detailModal.subtitlesTitle') }}</label>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-foreground/70">
{{ t('video.detailModal.subtitleTracks', { count: 0 }) }}
</span>
</div>
<p class="text-sm text-muted-foreground">{{ t('video.detailModal.noSubtitles') }}</p>
<!-- Upload Subtitle Form -->
<div class="flex flex-col gap-3 rounded-lg border border-gray-200 p-3">
<div class="flex flex-col gap-3 rounded-lg border border-border p-3">
<label class="text-sm font-medium">{{ t('video.detailModal.uploadSubtitle') }}</label>
<div class="flex flex-col gap-1">
@@ -224,7 +297,7 @@ watch(() => props.videoId, (newId) => {
</div>
<!-- Footer inside Form so submit works -->
<div class="flex justify-end gap-2 border-t border-gray-200 pt-4">
<div class="flex justify-end gap-2 border-t border-border pt-4">
<AppButton variant="ghost" type="button" @click="emit('close')">{{ t('video.detailModal.cancel') }}</AppButton>
<AppButton type="submit" :loading="saving">{{ t('video.detailModal.saveChanges') }}</AppButton>
</div>

62
src/routes/video/Videos.vue
View File

@@ -1,8 +1,7 @@
<script setup lang="ts">
import { type ModelVideo } from '@/api/client';
import { client, type ModelVideo } from '@/api/client';
import EmptyState from '@/components/dashboard/EmptyState.vue';
import PageHeader from '@/components/dashboard/PageHeader.vue';
import { fetchMockVideos } from '@/mocks/videos';
import { createStaticVNode, computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { useTranslation } from 'i18next-vue';
import { useRouter } from 'vue-router';
@@ -48,25 +47,18 @@ const fetchVideos = async () => {
loading.value = true;
error.value = null;
try {
// Attempt to fetch from API
// const response = await client.videos.videosList({ page: page.value, limit: limit.value });
// const body = response.data.data
// Use mock API
const response = await fetchMockVideos({
const response = await client.videos.videosList({
page: page.value,
limit: limit.value,
searchQuery: searchQuery.value,
status: selectedStatus.value
});
videos.value = response.data;
total.value = response.total;
search: searchQuery.value || undefined,
status: selectedStatus.value !== 'all' ? selectedStatus.value : undefined,
} as any, { baseUrl: '/r' });
videos.value = ((response.data as any)?.data?.videos ?? []) as ModelVideo[];
total.value = (response.data as any)?.data?.total ?? 0;
} catch (err: any) {
console.error(err);
// Fallback to empty on error
console.log('Using mock data due to API error');
error.value = err?.response?.data?.message || err?.message || t('video.page.retry');
videos.value = [];
total.value = 0;
} finally {
@@ -84,11 +76,6 @@ const handleFilter = () => {
fetchVideos();
};
const handlePageChange = (newPage: number) => {
page.value = newPage;
fetchVideos();
};
// Selection Logic
const selectedVideos = ref<ModelVideo[]>([]);
@@ -96,13 +83,22 @@ const deleteSelectedVideos = async () => {
if (!selectedVideos.value.length || !confirm(t('video.page.deleteSelectedConfirm', { count: selectedVideos.value.length }))) return;
try {
// Mock delete
const idsToDelete = selectedVideos.value.map(v => v.id);
videos.value = videos.value.filter(v => v.id && !idsToDelete.includes(v.id));
await Promise.all(
selectedVideos.value
.map(v => v.id)
.filter((id): id is string => Boolean(id))
.map(id => client.videos.videosDelete(id, { baseUrl: '/r' }))
);
selectedVideos.value = [];
// In real app: await client.videos.bulkDelete(...) or loop
await fetchVideos();
} catch (err) {
console.error('Failed to delete videos', err);
toast.add({
severity: 'error',
summary: t('video.detailPage.toast.deleteErrorSummary'),
detail: t('video.detailPage.toast.deleteErrorDetail'),
life: 3000,
});
}
};
@@ -110,11 +106,17 @@ const deleteVideo = async (videoId?: string) => {
if (!videoId || !confirm(t('video.page.deleteSingleConfirm'))) return;
try {
videos.value = videos.value.filter(v => v.id !== videoId);
// If deleted video was in selection, remove it
await client.videos.videosDelete(videoId, { baseUrl: '/r' });
selectedVideos.value = selectedVideos.value.filter(v => v.id !== videoId);
await fetchVideos();
} catch (err) {
console.error('Failed to delete video:', err);
toast.add({
severity: 'error',
summary: t('video.detailPage.toast.deleteErrorSummary'),
detail: t('video.detailPage.toast.deleteErrorDetail'),
life: 3000,
});
}
};
@@ -130,11 +132,11 @@ watch(() => uiState.uploadDialogVisible, (visible) => {
}
});
watch([searchQuery, selectedStatus, limit, page], () => {
watch([selectedStatus, limit, page], () => {
fetchVideos();
});
const editVideo = (videoId?: string) => {
detailVideoId.value = videoId || '';
detailVideoId.value = videoId || "";
};
const copyVideo = (videoId?: string) => {
@@ -257,7 +259,7 @@ onUnmounted(() => {
<EmptyState v-else-if="videos.length === 0 && !loading" :title="t('video.page.emptyTitle')"
:description="t('video.page.emptyDescription')"
imageUrl="https://cdn-icons-png.flaticon.com/512/7486/7486747.png" :actionLabel="t('video.page.emptyAction')"
:onAction="() => router.push('/upload')" />
:onAction="() => uiState.toggleUploadDialog()" />
<!-- Grid View -->
<!-- <VideoGrid :videos="videos" :loading="loading" v-model:selectedVideos="selectedVideos" @delete="deleteVideo" v-else-if="viewMode === 'grid'" /> -->

58
src/routes/video/components/Detail/VideoEditForm.vue
View File

@@ -1,58 +0,0 @@
<script setup lang="ts">
import { useTranslation } from 'i18next-vue';
defineProps<{
title: string;
description: string;
saving: boolean;
}>();
const emit = defineEmits<{
'update:title': [value: string];
'update:description': [value: string];
save: [];
toggleEdit: [];
}>();
const { t } = useTranslation();
</script>
<template>
<div class="mb-4 space-y-3">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ t('video.detailModal.titleLabel') }}</label>
<input :value="title" type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
:placeholder="t('video.detailModal.titlePlaceholder')"
@input="$emit('update:title', ($event.target as HTMLInputElement).value)">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ t('video.detailModal.descriptionLabel') }}</label>
<textarea :value="description" rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
:placeholder="t('video.detailModal.descriptionPlaceholder')"
@input="$emit('update:description', ($event.target as HTMLTextAreaElement).value)"></textarea>
</div>
<div class="float-right flex gap-2">
<AppButton size="sm"
:title="t('video.detailModal.saveChanges')" :disabled="saving" @click="$emit('save')">
<svg v-if="!saving" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span v-if="saving"
class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
<span class="hidden sm:inline">{{ saving ? t('video.detailPage.saving') : t('common.save') }}</span>
</AppButton>
<!-- Cancel Button (Edit Mode) -->
<AppButton variant="danger" size="sm" :title="t('video.detailPage.cancelEditTitle')"
@click="$emit('toggleEdit')">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
<span class="hidden sm:inline">{{ t('common.cancel') }}</span>
</AppButton>
</div>
</div>
</template>

125
src/routes/video/components/Detail/VideoInfoHeader.vue
View File

@@ -1,125 +0,0 @@
<script setup lang="ts">
import type { ModelVideo } from '@/api/client';
import { formatBytes, getStatusSeverity } from '@/lib/utils';
import { useTranslation } from 'i18next-vue';
import { computed } from 'vue';
const props = defineProps<{
video: ModelVideo;
}>();
const emit = defineEmits<{
reload: [];
toggleEdit: [];
delete: [];
}>();
const { t, i18next } = useTranslation();
const formatFileSize = (bytes?: number): string => {
if (!bytes) return '-';
return formatBytes(bytes);
};
const formatDuration = (seconds?: number): string => {
if (!seconds) return '-';
const hours = Math.floor(seconds / 3600);
const mins = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
if (hours > 0) {
return `${hours}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
return `${mins}:${secs.toString().padStart(2, '0')}`;
};
const formatDate = (dateStr?: string): string => {
if (!dateStr) return '-';
const date = new Date(dateStr);
return date.toLocaleString(i18next.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: '2-digit'
});
};
const severityClasses: Record<string, string> = {
success: 'bg-green-100 text-green-800',
info: 'bg-blue-100 text-blue-800',
warn: 'bg-yellow-100 text-yellow-800',
warning: 'bg-yellow-100 text-yellow-800',
danger: 'bg-red-100 text-red-800',
secondary: 'bg-gray-100 text-gray-800',
};
const statusLabel = computed(() => {
switch (props.video.status) {
case 'ready':
return t('video.filters.ready');
case 'processing':
return t('video.filters.processing');
case 'failed':
return t('video.filters.failed');
default:
return props.video.status;
}
});
</script>
<template>
<div class="flex flex-col items-start justify-between mb-4 gap-4">
<div class="flex-1">
<!-- View Mode: Title -->
<div class="mb-2">
<h1 class="text-2xl font-bold text-gray-900 mb-1">
{{ video.title }}
</h1>
<p v-if="video.description" class="text-sm text-gray-600 whitespace-pre-wrap">{{ video.description }}
</p>
</div>
<!-- Metadata -->
<div class="flex items-center space-x-4 text-sm text-gray-500">
<span>{{ formatDate(video.created_at) }}</span>
<span>{{ formatFileSize(video.size) }}</span>
<span>{{ formatDuration(video.duration) }}</span>
<span
class="capitalize px-2 py-0.5 text-xs font-medium rounded-full"
:class="severityClasses[getStatusSeverity(video.status) || 'secondary']">
{{ statusLabel }}
</span>
</div>
</div>
<!-- Action Buttons -->
<div class="flex items-center space-x-2">
<AppButton size="sm" variant="secondary"
:title="t('video.detailPage.reloadTitle')" @click="$emit('reload')">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
</path>
</svg>
<span class="hidden sm:inline">{{ t('video.detailPage.reloadButton') }}</span>
</AppButton>
<AppButton size="sm" variant="ghost"
:title="t('video.table.edit')" @click="$emit('toggleEdit')">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
</path>
</svg>
<span class="hidden sm:inline">{{ t('video.table.edit') }}</span>
</AppButton>
<AppButton variant="danger" size="sm"
:title="t('video.table.delete')" @click="$emit('delete')">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
</path>
</svg>
<span class="hidden sm:inline">{{ t('video.table.delete') }}</span>
</AppButton>
</div>
</div>
</template>

64
src/routes/video/components/Detail/VideoInfoPanel.vue
View File

@@ -1,64 +0,0 @@
<script setup lang="ts">
import type { ModelVideo } from '@/api/client';
import { computed } from 'vue';
import { useTranslation } from 'i18next-vue';
const props = defineProps<{
video: ModelVideo;
}>();
const emit = defineEmits<{
copy: [text: string, label: string];
}>();
const { t } = useTranslation();
const handleCopy = (text: string, label: string) => {
emit('copy', text, label);
};
const origin = computed(() => typeof window !== 'undefined' ? window.location.origin : '');
const videoInfos = computed(() => {
if (!props.video) return [];
const embedUrl = `${origin.value}/embed/${props.video.id}`;
return [
{ label: t('video.detailPage.videoInfo.videoId'), value: props.video.id },
{ label: t('video.detailPage.videoInfo.thumbnailUrl'), value: props.video.thumbnail },
{ label: t('video.detailPage.videoInfo.embedUrl'), value: embedUrl },
{ label: t('video.detailPage.videoInfo.iframeCode'), value: embedUrl ? `<iframe src="${embedUrl}" title="${props.video.title}" width="100%" height="400" frameborder="0" allowfullscreen></iframe>` : '' },
{ label: t('video.detailPage.videoInfo.shareLink'), value: `${origin.value}/view/${props.video.id}` },
];
});
</script>
<template>
<div class="">
<div class="mb-4">
<h3 class="text-lg font-medium text-gray-900 mb-4">{{ t('video.detailPage.detailsTitle') }}</h3>
<div class="flex flex-col gap-2">
<dl v-for="info in videoInfos" :key="info.label" class="space-y-2">
<div>
<dt class="text-sm font-medium text-gray-500">{{ info.label }}</dt>
<dd class="text-sm text-gray-900">
<div class="flex items-center space-x-2">
<input readonly
class="flex-1 px-2 py-1 text-xs border border-gray-300 rounded bg-gray-50 font-mono"
:value="info.value || '-'">
<button v-if="info.value" @click="handleCopy(info.value, info.label)"
class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded transition-colors text-gray-700"
:title="t('video.detailPage.copyValueTitle')">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
</path>
</svg>
</button>
</div>
</dd>
</div>
</dl>
</div>
</div>
</div>
</template>

34
src/routes/video/components/Detail/VideoPlayer.vue
View File

@@ -1,34 +0,0 @@
<script setup lang="ts">
import type { ModelVideo } from '@/api/client';
import { useTranslation } from 'i18next-vue';
defineProps<{
video: ModelVideo;
}>();
const { t } = useTranslation();
</script>
<template>
<div class="rounded-xl">
<div v-if="video.url" class="aspect-video rounded-xl bg-black overflow-hidden">
<video
:src="video.url"
controls
class="w-full h-full object-contain"
:poster="video.thumbnail">
{{ t('video.detailPage.videoTagFallback') }}
</video>
</div>
<div v-else class="w-full h-48 bg-gray-200 overflow-hidden flex-shrink-0">
<img
v-if="video.thumbnail"
:src="video.thumbnail"
:alt="video.title"
class="w-full h-full object-cover" />
<div v-else class="w-full h-full flex items-center justify-center">
<span class="i-heroicons-film text-gray-400 text-2xl" />
</div>
</div>
</div>
</template>

44
src/routes/video/components/Detail/VideoSkeleton.vue
View File

@@ -1,44 +0,0 @@
<template>
<div class="flex flex-col lg:flex-row gap-4">
<!-- Video Player Skeleton -->
<div class="md:flex-1 aspect-video rounded-xl bg-gray-200 animate-pulse" />
<!-- Info Card Skeleton -->
<div class="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
<!-- Header Skeleton -->
<div class="flex items-start justify-between mb-4">
<div class="flex-1 space-y-3">
<div class="w-3/5 h-8 bg-gray-200 rounded animate-pulse" />
<div class="flex items-center gap-4">
<div class="w-32 h-4 bg-gray-200 rounded animate-pulse" />
<div class="w-20 h-4 bg-gray-200 rounded animate-pulse" />
<div class="w-16 h-4 bg-gray-200 rounded animate-pulse" />
<div class="w-16 h-6 bg-gray-200 rounded animate-pulse" />
</div>
<div class="flex items-center gap-2">
<div class="w-20 h-8 bg-gray-200 rounded animate-pulse" />
<div class="w-16 h-8 bg-gray-200 rounded animate-pulse" />
<div class="w-[4.5rem] h-8 bg-gray-200 rounded animate-pulse" />
</div>
</div>
</div>
<!-- Content Grid Skeleton -->
<div class="grid grid-cols-1">
<!-- Left Column -->
<div class="space-y-4">
<div class="w-full h-6 bg-gray-200 rounded animate-pulse" />
<div class="space-y-3">
<div v-for="i in 6" :key="i" class="space-y-1">
<div class="w-full h-3.5 bg-gray-200 rounded animate-pulse" />
<div class="flex items-center gap-2">
<div class="w-full h-7 bg-gray-200 rounded animate-pulse" />
<div class="w-8 h-7 bg-gray-200 rounded animate-pulse" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

53
src/server/routes/display.ts
View File

@@ -1,23 +1,50 @@
import type { Hono } from 'hono';
import { saveImageFromStream } from '../modules/merge';
import { getManifest, saveImageFromStream, streamManifest } from '../modules/merge';
const guessContentType = (filename: string) => {
const lower = filename.toLowerCase();
if (lower.endsWith('.mp4')) return 'video/mp4';
if (lower.endsWith('.webm')) return 'video/webm';
if (lower.endsWith('.mov')) return 'video/quicktime';
if (lower.endsWith('.mkv')) return 'video/x-matroska';
if (lower.endsWith('.m3u8')) return 'application/vnd.apple.mpegurl';
return 'application/octet-stream';
};
const buildStreamResponse = async (id: string) => {
const manifest = await getManifest(id);
if (!manifest) {
return new Response(JSON.stringify({ error: 'Manifest not found' }), {
status: 404,
headers: { 'Content-Type': 'application/json' },
});
}
return new Response(streamManifest(manifest), {
status: 200,
headers: {
'Content-Type': guessContentType(manifest.filename),
'Cache-Control': 'public, max-age=3600',
'Content-Disposition': `inline; filename="${manifest.filename}"`,
},
});
};
export function registerDisplayRoutes(app: Hono) {
// app.get('/manifest/:id', async (c) => {
// const manifest = await getListFiles();
// if (!manifest) {
// return c.json({ error: "Manifest not found" }, 404);
// }
// return c.json(manifest);
// });
app.get('/display/:id', async (c) => buildStreamResponse(c.req.param('id')));
app.get('/play/index/:id', async (c) => buildStreamResponse(c.req.param('id')));
app.put('/display/:id/thumbnail', async (c) => {
const arrayBuffer = await c.req.arrayBuffer();
await saveImageFromStream(arrayBuffer, crypto.randomUUID());
await saveImageFromStream(arrayBuffer, c.req.param('id'));
return c.body('ok');
// nhận rawData, lưu vào storage, cập nhật url thumbnail vào database
});
app.put('/display/:id/metadata', async (c) => {
app.put('/display/:id/metadata', async (c) => {
return c.json({ status: 'not_implemented' }, 501);
});
app.post('/display/:id/subs', async (c) => {
return c.json({ status: 'not_implemented' }, 501);
});
app.post('/display/:id/subs', async (c) => {});
}

6
src/server/routes/manifest.ts
View File

@@ -1,11 +1,11 @@
import { getListFiles } from '@/server/modules/merge';
import { getManifest } from '@/server/modules/merge';
import type { Hono } from 'hono';
export function registerManifestRoutes(app: Hono) {
app.get('/manifest/:id', async (c) => {
const manifest = await getListFiles();
const manifest = await getManifest(c.req.param('id'));
if (!manifest) {
return c.json({ error: "Manifest not found" }, 404);
return c.json({ error: 'Manifest not found' }, 404);
}
return c.json(manifest);
});

3
src/server/routes/merge.ts
View File

@@ -48,6 +48,9 @@ export function registerMergeRoutes(app: Hono) {
filename: manifest.filename,
total_parts: manifest.total_parts,
size: manifest.size,
playback_url: `/display/${manifest.id}`,
play_url: `/play/index/${manifest.id}`,
manifest_url: `/manifest/${manifest.id}`,
});
} catch (e: any) {
return c.json({ error: e?.message ?? String(e) }, 500);

4
src/server/routes/ssr.ts
View File

@@ -33,7 +33,7 @@ export function registerSSRRoutes(app: Hono) {
const appStream = renderToWebStream(vueApp, ctx);
// HTML Head
await stream.write(`<!DOCTYPE html><html lang='${lang}'><head>`);
await stream.write(`<!DOCTYPE html><html lang='${auth.user?.language ?? lang}'><head>`);
await stream.write("<base href='" + url.origin + "'/>");
// SSR Head tags
@@ -63,7 +63,7 @@ export function registerSSRRoutes(app: Hono) {
Object.assign(ctx, {
$p: pinia.state.value,
$colada: serializeQueryCache(queryCache),
$locale: lang,
$locale: auth.user?.language ?? lang,
});
// App data script

57
src/stores/auth.ts
View File

@@ -1,4 +1,4 @@
import { client, type ModelUser, type ResponseResponse } from '@/api/client';
import { client, type AuthUserPayload, type ResponseResponse } from '@/api/client';
import { TinyMqttClient } from '@/lib/liteMqtt';
import { useTranslation } from 'i18next-vue';
import { defineStore } from 'pinia';
@@ -7,18 +7,17 @@ import { useRouter } from 'vue-router';
type ProfileUpdatePayload = {
username?: string;
email?: string;
language?: string;
locale?: string;
};
type AuthResponseBody = ResponseResponse & {
data?: ModelUser | { user?: ModelUser };
data?: AuthUserPayload | { user?: AuthUserPayload };
};
const mqttBrokerUrl = 'wss://mqtt-dashboard.com:8884/mqtt';
const extractUser = (body?: AuthResponseBody | null): ModelUser | null => {
const extractUser = (body?: AuthResponseBody | null): AuthUserPayload | null => {
const data = body?.data;
if (!data) return null;
@@ -26,7 +25,7 @@ const extractUser = (body?: AuthResponseBody | null): ModelUser | null => {
return data.user;
}
return data as ModelUser;
return data as AuthUserPayload;
};
const getGoogleLoginPath = () => {
@@ -35,9 +34,9 @@ const getGoogleLoginPath = () => {
};
export const useAuthStore = defineStore('auth', () => {
const user = ref<ModelUser | null>(null);
const user = ref<AuthUserPayload | null>(null);
const router = useRouter();
const { t } = useTranslation();
const { t, i18next } = useTranslation();
const loading = ref(false);
const error = ref<string | null>(null);
const initialized = ref(false);
@@ -61,7 +60,6 @@ export const useAuthStore = defineStore('auth', () => {
clearMqttClient();
if (!userId) return;
mqttClient = new TinyMqttClient(
mqttBrokerUrl,
[['ecos1231231', userId, '#'].join('/')],
@@ -71,21 +69,21 @@ export const useAuthStore = defineStore('auth', () => {
);
mqttClient.connect();
});
watch(() => user.value?.language, (lng) => i18next.changeLanguage(lng))
async function fetchMe() {
const response = await client.me.getMe({ baseUrl: '/r' });
const nextUser = extractUser(response.data as AuthResponseBody);
user.value = nextUser;
i18next.changeLanguage(nextUser?.language)
return nextUser;
}
async function init() {
if (initialized.value) return;
try {
const response = await client.request<AuthResponseBody, ResponseResponse>({
path: '/me',
method: 'GET',
format: 'json',
});
const nextUser = extractUser(response.data as AuthResponseBody);
if (nextUser) {
user.value = nextUser;
}
await fetchMe();
} catch {
user.value = null;
} finally {
@@ -149,16 +147,11 @@ export const useAuthStore = defineStore('auth', () => {
error.value = null;
try {
const response = await client.request<AuthResponseBody, ResponseResponse>({
path: '/me',
method: 'PUT',
body: data,
format: 'json',
});
const response = await client.me.putMe(data, { baseUrl: '/r' });
const nextUser = extractUser(response.data as AuthResponseBody);
if (nextUser) {
user.value = { ...(user.value ?? {}), ...nextUser } as ModelUser;
user.value = { ...(user.value ?? {}), ...nextUser } as AuthUserPayload;
}
return true;
@@ -189,15 +182,10 @@ export const useAuthStore = defineStore('auth', () => {
error.value = null;
try {
await client.request<ResponseResponse, ResponseResponse>({
path: '/auth/change-password',
method: 'POST',
body: {
current_password: currentPassword,
new_password: newPassword,
},
format: 'json',
});
await client.auth.changePasswordCreate({
current_password: currentPassword,
new_password: newPassword,
}, { baseUrl: '/r' });
return true;
} catch (e: any) {
console.error('Change password error', e);
@@ -230,6 +218,7 @@ export const useAuthStore = defineStore('auth', () => {
error,
initialized,
init,
fetchMe,
login,
loginWithGoogle,
register,

8
src/type.d.ts vendored
View File

@@ -1,6 +1,12 @@
/// <reference types="vite/client" />
/// <reference types="unplugin-vue-components/types/vue" />
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}
declare module "@httpClientAdapter" {
export const customFetch: (url: string, options: RequestInit) => Promise<Response>;
export const customFetch: typeof fetch;
}