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

refactor: update video components to use AppButton and improve UI consistency

Browse Source 
- Refactored CardPopover.vue to enhance menu positioning and accessibility.
- Replaced Button components with AppButton in VideoEditForm.vue and VideoInfoHeader.vue for consistent styling.
- Simplified VideoSkeleton.vue by removing unused Skeleton imports and improving loading states.
- Updated VideoFilters.vue to replace PrimeVue components with native HTML elements for better performance.
- Enhanced VideoGrid.vue and VideoTable.vue with improved selection handling and UI updates.
- Removed unused PrimeVue styles and imports in SSR routes and configuration files.
This commit is contained in:
lethdat
2026-03-05 01:35:25 +07:00
parent 77ece5224d
commit e1ba24d1bf
32 changed files with 754 additions and 1483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,6 @@ import Credit from '@/components/icons/Credit.vue';
import Upload from '@/components/icons/Upload.vue';
import Video from '@/components/icons/Video.vue';
import { useUIState } from '@/stores/uiState';
import Skeleton from 'primevue/skeleton';
import { useRouter } from 'vue-router';
import Referral from './Referral.vue';
interface Props {
@@ -46,19 +45,19 @@ const quickActions = [
<template>
<div v-if="loading" class="mb-8">
<Skeleton width="10rem" height="1.5rem" class="mb-4"></Skeleton>
<div class="w-40 h-6 bg-gray-200 rounded animate-pulse mb-4" />
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div v-for="i in 4" :key="i" class="p-6 rounded-xl border border-gray-200">
<Skeleton shape="circle" size="3rem" class="mb-4"></Skeleton>
<Skeleton width="8rem" height="1.25rem" class="mb-2"></Skeleton>
<Skeleton width="100%" height="1rem"></Skeleton>
<div class="w-12 h-12 bg-gray-200 rounded-full animate-pulse mb-4" />
<div class="w-32 h-5 bg-gray-200 rounded animate-pulse mb-2" />
<div class="w-full h-4 bg-gray-200 rounded animate-pulse" />
</div>
</div>
<div class="flex flex-col justify-between p-6 rounded-xl border border-gray-200">
<Skeleton width="10rem" height="2rem"></Skeleton>
<Skeleton width="100%" height="1.25rem" class="my-4"></Skeleton>
<Skeleton width="100%" height="1rem"></Skeleton>
<div class="w-40 h-8 bg-gray-200 rounded animate-pulse" />
<div class="w-full h-5 bg-gray-200 rounded animate-pulse my-4" />
<div class="w-full h-4 bg-gray-200 rounded animate-pulse" />
</div>
</div>
</div>

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

@@ -2,7 +2,6 @@
import { ModelVideo } from '@/api/client';
import EmptyState from '@/components/dashboard/EmptyState.vue';
import { formatBytes, formatDate, formatDuration } from '@/lib/utils';
import Skeleton from 'primevue/skeleton';
import { useRouter } from 'vue-router';
interface Props {
@@ -28,16 +27,16 @@ const getStatusClass = (status?: string) => {
<div class="mb-8">
<div v-if="loading">
<div class="flex items-center justify-between mb-4">
<Skeleton width="8rem" height="1.5rem"></Skeleton>
<Skeleton width="5rem" height="1rem"></Skeleton>
<div class="w-32 h-6 bg-gray-200 rounded animate-pulse" />
<div class="w-20 h-4 bg-gray-200 rounded animate-pulse" />
</div>
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
<div class="p-4 border-b border-gray-200" v-for="i in 5" :key="i">
<div class="flex gap-4">
<Skeleton width="4rem" height="2.5rem" class="rounded"></Skeleton>
<div class="w-16 h-10 bg-gray-200 rounded animate-pulse" />
<div class="flex-1 space-y-2">
<Skeleton width="30%" height="1rem"></Skeleton>
<Skeleton width="20%" height="0.8rem"></Skeleton>
<div class="w-[30%] h-4 bg-gray-200 rounded animate-pulse" />
<div class="w-[20%] h-3 bg-gray-200 rounded animate-pulse" />
</div>
</div>
</div>

2
src/routes/overview/components/Referral.vue
View File

@@ -7,7 +7,7 @@
<p class="text-sm text-gray-600 font-medium">Share your referral link and earn commissions from
referred users!</p>
<div class="flex gap-2">
<InputText class="w-full" readonly type="text" :value="url" @click="copyToClipboard" />
<AppInput class="w-full" readonly type="text" :modelValue="url" @click="copyToClipboard" />
<button class="btn btn-primary" @click="copyToClipboard" :disabled="isCopied">
<svg v-if="!isCopied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"

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

@@ -1,7 +1,6 @@
<script setup lang="ts">
import StatsCard from '@/components/dashboard/StatsCard.vue';
import { formatBytes } from '@/lib/utils';
import Skeleton from 'primevue/skeleton';
interface Props {
loading: boolean;
@@ -22,12 +21,11 @@ defineProps<Props>();
<div v-for="i in 4" :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">
<Skeleton width="5rem" height="1rem" class="mb-2"></Skeleton>
<Skeleton width="8rem" height="2rem"></Skeleton>
<div class="w-20 h-4 bg-gray-200 rounded animate-pulse mb-2" />
<div class="w-32 h-8 bg-gray-200 rounded animate-pulse" />
</div>
<!-- <Skeleton shape="circle" size="3rem"></Skeleton> -->
</div>
<Skeleton width="4rem" height="1rem"></Skeleton>
<div class="w-16 h-4 bg-gray-200 rounded animate-pulse" />
</div>
</div>