mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 10:27:49 +00:00
feat(branding): загрузка видео стартового меню бота
Парная фронтовая часть к /cabinet/branding/bot-start-video (бот: 524960c3). В «Брендинге» появилась карточка: загрузить/заменить/удалить видео, которое бот прикрепляет к сообщению /start вместо картинки-логотипа, и статус текущего состояния. Файл разово уходит в Telegram ради file_id — на нашей стороне не хранится. Видео в рассылках уже работало (кнопка в боте, загрузка в кабинете, доставка send_video) и не затронуто. Локали ru/en/zh/fa.
This commit is contained in:
@@ -149,6 +149,11 @@ export const initLogoPreload = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export interface BotStartVideoInfo {
|
||||||
|
has_video: boolean;
|
||||||
|
file_id?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
export const brandingApi = {
|
export const brandingApi = {
|
||||||
// Get current branding (public, no auth required)
|
// Get current branding (public, no auth required)
|
||||||
getBranding: async (): Promise<BrandingInfo> => {
|
getBranding: async (): Promise<BrandingInfo> => {
|
||||||
@@ -176,6 +181,29 @@ export const brandingApi = {
|
|||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// ── Видео стартового меню бота ────────────────────────────────────────
|
||||||
|
// Хранится как Telegram file_id: файл на нашей стороне не сохраняется.
|
||||||
|
|
||||||
|
getBotStartVideo: async (): Promise<BotStartVideoInfo> => {
|
||||||
|
const response = await apiClient.get<BotStartVideoInfo>('/cabinet/branding/bot-start-video');
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
uploadBotStartVideo: async (file: File): Promise<BotStartVideoInfo> => {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
const response = await apiClient.post<BotStartVideoInfo>(
|
||||||
|
'/cabinet/branding/bot-start-video',
|
||||||
|
formData,
|
||||||
|
);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteBotStartVideo: async (): Promise<BotStartVideoInfo> => {
|
||||||
|
const response = await apiClient.delete<BotStartVideoInfo>('/cabinet/branding/bot-start-video');
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
// Delete custom logo (admin only)
|
// Delete custom logo (admin only)
|
||||||
deleteLogo: async (): Promise<BrandingInfo> => {
|
deleteLogo: async (): Promise<BrandingInfo> => {
|
||||||
const response = await apiClient.delete<BrandingInfo>('/cabinet/branding/logo');
|
const response = await apiClient.delete<BrandingInfo>('/cabinet/branding/logo');
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ export function BrandingTab({ accentColor = '#3b82f6' }: BrandingTabProps) {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const startVideoInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
const [editingName, setEditingName] = useState(false);
|
const [editingName, setEditingName] = useState(false);
|
||||||
const [newName, setNewName] = useState('');
|
const [newName, setNewName] = useState('');
|
||||||
@@ -25,6 +26,12 @@ export function BrandingTab({ accentColor = '#3b82f6' }: BrandingTabProps) {
|
|||||||
queryFn: brandingApi.getBranding,
|
queryFn: brandingApi.getBranding,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Видео стартового меню бота: хранится как Telegram file_id
|
||||||
|
const { data: startVideo } = useQuery({
|
||||||
|
queryKey: ['bot-start-video'],
|
||||||
|
queryFn: brandingApi.getBotStartVideo,
|
||||||
|
});
|
||||||
|
|
||||||
const { data: fullscreenSettings } = useQuery({
|
const { data: fullscreenSettings } = useQuery({
|
||||||
queryKey: ['fullscreen-enabled'],
|
queryKey: ['fullscreen-enabled'],
|
||||||
queryFn: brandingApi.getFullscreenEnabled,
|
queryFn: brandingApi.getFullscreenEnabled,
|
||||||
@@ -100,6 +107,29 @@ export function BrandingTab({ accentColor = '#3b82f6' }: BrandingTabProps) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const uploadStartVideoMutation = useMutation({
|
||||||
|
mutationFn: brandingApi.uploadBotStartVideo,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['bot-start-video'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteStartVideoMutation = useMutation({
|
||||||
|
mutationFn: brandingApi.deleteBotStartVideo,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['bot-start-video'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleStartVideoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
uploadStartVideoMutation.mutate(file);
|
||||||
|
}
|
||||||
|
// Сбрасываем input, чтобы повторный выбор того же файла снова сработал
|
||||||
|
e.target.value = '';
|
||||||
|
};
|
||||||
|
|
||||||
const handleLogoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleLogoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
if (file) {
|
if (file) {
|
||||||
@@ -211,6 +241,57 @@ export function BrandingTab({ accentColor = '#3b82f6' }: BrandingTabProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Видео стартового меню бота */}
|
||||||
|
<div className="rounded-2xl border border-dark-700/50 bg-dark-800/50 p-6">
|
||||||
|
<h3 className="mb-1 text-lg font-semibold text-dark-100">
|
||||||
|
{t('admin.settings.botStartVideo')}
|
||||||
|
</h3>
|
||||||
|
<p className="mb-4 text-sm text-dark-400">{t('admin.settings.botStartVideoDesc')}</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<input
|
||||||
|
ref={startVideoInputRef}
|
||||||
|
type="file"
|
||||||
|
accept="video/*"
|
||||||
|
onChange={handleStartVideoUpload}
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => startVideoInputRef.current?.click()}
|
||||||
|
disabled={uploadStartVideoMutation.isPending}
|
||||||
|
className="rounded-xl bg-dark-700 px-4 py-2 text-sm text-dark-200 transition-colors hover:bg-dark-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{uploadStartVideoMutation.isPending
|
||||||
|
? t('common.loading')
|
||||||
|
: startVideo?.has_video
|
||||||
|
? t('admin.settings.botStartVideoReplace')
|
||||||
|
: t('admin.settings.botStartVideoUpload')}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{startVideo?.has_video && (
|
||||||
|
<button
|
||||||
|
onClick={() => deleteStartVideoMutation.mutate()}
|
||||||
|
disabled={deleteStartVideoMutation.isPending}
|
||||||
|
className="rounded-xl bg-dark-700 px-4 py-2 text-sm text-dark-400 transition-colors hover:bg-error-500/20 hover:text-error-400 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{t('admin.settings.botStartVideoRemove')}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<span className="text-sm text-dark-400">
|
||||||
|
{startVideo?.has_video
|
||||||
|
? t('admin.settings.botStartVideoActive')
|
||||||
|
: t('admin.settings.botStartVideoNone')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{uploadStartVideoMutation.isError && (
|
||||||
|
<div className="mt-3 text-sm text-error-400">
|
||||||
|
{t('admin.settings.botStartVideoError')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Animated Background Editor */}
|
{/* Animated Background Editor */}
|
||||||
<div className="rounded-2xl border border-dark-700/50 bg-dark-800/50 p-6">
|
<div className="rounded-2xl border border-dark-700/50 bg-dark-800/50 p-6">
|
||||||
<BackgroundEditor />
|
<BackgroundEditor />
|
||||||
|
|||||||
@@ -2320,7 +2320,15 @@
|
|||||||
"offlineConv": "Offline Conversions",
|
"offlineConv": "Offline Conversions",
|
||||||
"apiKey": "API Key",
|
"apiKey": "API Key",
|
||||||
"legalFooter": "Legal Footer",
|
"legalFooter": "Legal Footer",
|
||||||
"legalFooterDesc": "Links to the offer, privacy policy and recurring payments at the bottom of the login page"
|
"legalFooterDesc": "Links to the offer, privacy policy and recurring payments at the bottom of the login page",
|
||||||
|
"botStartVideo": "Bot start-menu video",
|
||||||
|
"botStartVideoDesc": "The bot attaches this video to the /start message instead of the logo image. The file is uploaded to Telegram once — we only keep its identifier.",
|
||||||
|
"botStartVideoUpload": "Upload video",
|
||||||
|
"botStartVideoReplace": "Replace video",
|
||||||
|
"botStartVideoRemove": "Remove",
|
||||||
|
"botStartVideoActive": "Video is set",
|
||||||
|
"botStartVideoNone": "No video — the menu uses the logo image",
|
||||||
|
"botStartVideoError": "Could not upload the video"
|
||||||
},
|
},
|
||||||
"bulkActions": {
|
"bulkActions": {
|
||||||
"title": "Bulk Actions",
|
"title": "Bulk Actions",
|
||||||
|
|||||||
@@ -1983,7 +1983,15 @@
|
|||||||
"offlineConv": "تبدیلهای آفلاین",
|
"offlineConv": "تبدیلهای آفلاین",
|
||||||
"apiKey": "کلید API",
|
"apiKey": "کلید API",
|
||||||
"legalFooter": "پاورقی حقوقی",
|
"legalFooter": "پاورقی حقوقی",
|
||||||
"legalFooterDesc": "پیوند به پیشنهاد، سیاست حریم خصوصی و پرداختهای مکرر در پایین صفحه ورود"
|
"legalFooterDesc": "پیوند به پیشنهاد، سیاست حریم خصوصی و پرداختهای مکرر در پایین صفحه ورود",
|
||||||
|
"botStartVideo": "ویدیوی منوی شروع ربات",
|
||||||
|
"botStartVideoDesc": "ربات این ویدیو را بهجای تصویر لوگو به پیام /start پیوست میکند. فایل یکبار در تلگرام بارگذاری میشود و ما فقط شناسه آن را نگه میداریم.",
|
||||||
|
"botStartVideoUpload": "بارگذاری ویدیو",
|
||||||
|
"botStartVideoReplace": "جایگزینی ویدیو",
|
||||||
|
"botStartVideoRemove": "حذف",
|
||||||
|
"botStartVideoActive": "ویدیو تنظیم شده است",
|
||||||
|
"botStartVideoNone": "ویدیویی تنظیم نشده — منو از تصویر لوگو استفاده میکند",
|
||||||
|
"botStartVideoError": "بارگذاری ویدیو ناموفق بود"
|
||||||
},
|
},
|
||||||
"buttons": {
|
"buttons": {
|
||||||
"color": "رنگ دکمه",
|
"color": "رنگ دکمه",
|
||||||
|
|||||||
@@ -2823,7 +2823,15 @@
|
|||||||
"offlineConv": "Офлайн-конверсии",
|
"offlineConv": "Офлайн-конверсии",
|
||||||
"apiKey": "API-ключ",
|
"apiKey": "API-ключ",
|
||||||
"legalFooter": "Юридический футер",
|
"legalFooter": "Юридический футер",
|
||||||
"legalFooterDesc": "Ссылки на оферту, политику и рекуррентные платежи внизу страницы входа"
|
"legalFooterDesc": "Ссылки на оферту, политику и рекуррентные платежи внизу страницы входа",
|
||||||
|
"botStartVideo": "Видео стартового меню бота",
|
||||||
|
"botStartVideoDesc": "Бот прикрепит это видео к сообщению /start вместо картинки-логотипа. Файл разово отправляется в Telegram — храним только его идентификатор.",
|
||||||
|
"botStartVideoUpload": "Загрузить видео",
|
||||||
|
"botStartVideoReplace": "Заменить видео",
|
||||||
|
"botStartVideoRemove": "Удалить",
|
||||||
|
"botStartVideoActive": "Видео подключено",
|
||||||
|
"botStartVideoNone": "Видео не задано — меню с картинкой-логотипом",
|
||||||
|
"botStartVideoError": "Не удалось загрузить видео"
|
||||||
},
|
},
|
||||||
"buttons": {
|
"buttons": {
|
||||||
"color": "Цвет кнопки",
|
"color": "Цвет кнопки",
|
||||||
|
|||||||
@@ -2050,7 +2050,15 @@
|
|||||||
"offlineConv": "离线转化",
|
"offlineConv": "离线转化",
|
||||||
"apiKey": "API 密钥",
|
"apiKey": "API 密钥",
|
||||||
"legalFooter": "法律页脚",
|
"legalFooter": "法律页脚",
|
||||||
"legalFooterDesc": "登录页面底部的要约、隐私政策和定期付款链接"
|
"legalFooterDesc": "登录页面底部的要约、隐私政策和定期付款链接",
|
||||||
|
"botStartVideo": "机器人开始菜单视频",
|
||||||
|
"botStartVideoDesc": "机器人会在 /start 消息中附带该视频,替代 logo 图片。文件仅上传到 Telegram 一次,我们只保存其标识符。",
|
||||||
|
"botStartVideoUpload": "上传视频",
|
||||||
|
"botStartVideoReplace": "替换视频",
|
||||||
|
"botStartVideoRemove": "删除",
|
||||||
|
"botStartVideoActive": "已设置视频",
|
||||||
|
"botStartVideoNone": "未设置视频 — 菜单使用 logo 图片",
|
||||||
|
"botStartVideoError": "视频上传失败"
|
||||||
},
|
},
|
||||||
"buttons": {
|
"buttons": {
|
||||||
"color": "按钮颜色",
|
"color": "按钮颜色",
|
||||||
|
|||||||
Reference in New Issue
Block a user