307 lines
12 KiB
Vue
307 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { client, type ManualAdTemplate, type ModelVideo } from '@/api/client';
|
|
import { useAppToast } from '@/composables/useAppToast';
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import { computed, ref, watch } from 'vue';
|
|
import { useTranslation } from 'i18next-vue';
|
|
|
|
const props = defineProps<{
|
|
videoId: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'close'): void;
|
|
}>();
|
|
|
|
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: '',
|
|
adTemplateId: '' as 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,
|
|
language: 'en',
|
|
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 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 || '',
|
|
adTemplateId: adConfig?.ad_template_id || '',
|
|
};
|
|
}
|
|
} 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
|
|
});
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const validate = (): boolean => {
|
|
errors.value = {};
|
|
if (!form.value.title.trim()) {
|
|
errors.value.title = t('video.detailModal.errors.titleRequired');
|
|
}
|
|
return Object.keys(errors.value).length === 0;
|
|
};
|
|
|
|
const onFormSubmit = async () => {
|
|
if (!validate()) return;
|
|
saving.value = true;
|
|
try {
|
|
const payload: Record<string, any> = {
|
|
title: form.value.title,
|
|
};
|
|
|
|
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({
|
|
severity: 'success',
|
|
summary: t('video.detailModal.toast.saveSuccessSummary'),
|
|
detail: t('video.detailModal.toast.saveSuccessDetail'),
|
|
life: 3000
|
|
});
|
|
emit('close');
|
|
} 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 onSubtitleFileChange = (event: Event) => {
|
|
const target = event.target as HTMLInputElement;
|
|
subtitleForm.value.file = target.files?.[0] || null;
|
|
};
|
|
|
|
const canUploadSubtitle = computed(() => {
|
|
return subtitleForm.value.file && subtitleForm.value.language.trim();
|
|
});
|
|
|
|
const handleUploadSubtitle = () => {
|
|
if (!canUploadSubtitle.value) return;
|
|
toast.add({
|
|
severity: 'info',
|
|
summary: t('video.detailModal.toast.subtitleInfoSummary'),
|
|
detail: t('video.detailModal.toast.subtitleInfoDetail'),
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
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')">
|
|
|
|
<!-- Loading Skeleton -->
|
|
<div v-if="loading" class="flex flex-col gap-4">
|
|
<!-- Title skeleton -->
|
|
<div class="flex flex-col gap-2">
|
|
<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>
|
|
<!-- ad-template selector skeleton -->
|
|
<div class="flex flex-col gap-2">
|
|
<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">
|
|
<div class="flex items-center justify-between">
|
|
<div class="w-16 h-3.5 bg-gray-200 rounded animate-pulse" />
|
|
<div class="w-[4.5rem] h-6 bg-gray-200 rounded-full animate-pulse" />
|
|
</div>
|
|
<div class="w-3/5 h-3.5 bg-gray-200 rounded animate-pulse" />
|
|
<div class="flex flex-col gap-3 rounded-lg border border-gray-200 p-3">
|
|
<div class="w-24 h-3.5 bg-gray-200 rounded animate-pulse" />
|
|
<div class="w-full h-9 bg-gray-200 rounded-md animate-pulse" />
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="w-full h-9 bg-gray-200 rounded-md animate-pulse" />
|
|
<div class="w-full h-9 bg-gray-200 rounded-md animate-pulse" />
|
|
</div>
|
|
<div class="w-full h-10 bg-gray-200 rounded-md animate-pulse" />
|
|
</div>
|
|
</div>
|
|
<!-- Footer skeleton -->
|
|
<div class="flex justify-end gap-2 border-t border-gray-200 pt-4">
|
|
<div class="w-20 h-10 bg-gray-200 rounded-md animate-pulse" />
|
|
<div class="w-32 h-10 bg-gray-200 rounded-md animate-pulse" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Content -->
|
|
<form v-else @submit.prevent="onFormSubmit" class="flex flex-col gap-4">
|
|
<!-- Title -->
|
|
<div class="flex flex-col gap-1">
|
|
<label for="edit-title" class="text-sm font-medium">{{ t('video.detailModal.titleLabel') }}</label>
|
|
<AppInput id="edit-title" v-model="form.title" :placeholder="t('video.detailModal.titlePlaceholder')" />
|
|
<p v-if="errors.title" class="text-xs text-red-500 mt-0.5">{{ errors.title }}</p>
|
|
</div>
|
|
|
|
<!-- Ad Template Selector -->
|
|
<div class="flex flex-col gap-1">
|
|
<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-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-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-border p-3">
|
|
<label class="text-sm font-medium">{{ t('video.detailModal.uploadSubtitle') }}</label>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<label for="subtitle-file" class="text-xs font-medium">
|
|
{{ t('video.detailModal.subtitleFile') }}
|
|
</label>
|
|
<input id="subtitle-file" type="file"
|
|
accept=".vtt,.srt,.ass,.ssa,text/vtt,text/srt,application/x-subrip"
|
|
class="w-full text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-primary hover:file:bg-primary/20 cursor-pointer"
|
|
@change="onSubtitleFileChange" />
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="flex flex-col gap-1">
|
|
<label for="subtitle-language" class="text-xs font-medium">{{ t('video.detailModal.languageCode') }}</label>
|
|
<AppInput id="subtitle-language" v-model="subtitleForm.language" :placeholder="t('video.detailModal.languagePlaceholder')"
|
|
:maxlength="10" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label for="subtitle-name" class="text-xs font-medium">{{ t('video.detailModal.displayName') }}</label>
|
|
<AppInput id="subtitle-name" v-model="subtitleForm.displayName"
|
|
:placeholder="t('video.detailModal.displayNamePlaceholder')" />
|
|
</div>
|
|
</div>
|
|
|
|
<AppButton variant="secondary" class="w-full" :disabled="!canUploadSubtitle" @click="handleUploadSubtitle">
|
|
{{ t('video.detailModal.uploadSubtitleButton') }}
|
|
</AppButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer inside Form so submit works -->
|
|
<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>
|
|
</form>
|
|
</AppDialog>
|
|
</template>
|