feat: Add conditional iframe refresh button for animated HTML ads
- Add ReloadOutlined icon import for refresh functionality - Implement handleRefreshAd() to reload iframes with cache-busting timestamps - Add refresh button next to share button with consistent styling - Show refresh button only for ads containing HTML files (iframe content) - Add user feedback messages for successful refresh operations - Prevent unnecessary refresh buttons on image-only or video-only ads HTML ads with animations can now be restarted without full page reload. Button appears conditionally based on file type detection.
This commit is contained in:
@@ -58,13 +58,6 @@ export default function UserMenu({ user, onLogout, darkMode, onToggleDarkMode, s
|
|||||||
onClick: clearAdsCache,
|
onClick: clearAdsCache,
|
||||||
},
|
},
|
||||||
{ type: 'divider' },
|
{ type: 'divider' },
|
||||||
{
|
|
||||||
key: 'settings',
|
|
||||||
icon: <SettingOutlined />,
|
|
||||||
label: 'Einstellungen (bald)',
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
{ type: 'divider' },
|
|
||||||
{
|
{
|
||||||
key: 'logout',
|
key: 'logout',
|
||||||
icon: <LogoutOutlined />,
|
icon: <LogoutOutlined />,
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { useParams, useNavigate } from 'react-router-dom';
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
import { Tabs, Button, Spin, Skeleton, Result, Grid, Select, Layout, Tooltip, message } from 'antd';
|
import { Tabs, Button, Spin, Skeleton, Result, Grid, Select, Layout, Tooltip, message } from 'antd';
|
||||||
import { ArrowLeftOutlined, LoadingOutlined, LockOutlined, MinusOutlined, PlusOutlined, EllipsisOutlined, ShareAltOutlined } from '@ant-design/icons';
|
import { ArrowLeftOutlined, LoadingOutlined, LockOutlined, MinusOutlined, PlusOutlined, EllipsisOutlined, ShareAltOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||||
import UserMenu from '../components/UserMenu';
|
import UserMenu from '../components/UserMenu';
|
||||||
import FilePreview, { formatFileSize, formatDuration } from '../components/FilePreview';
|
import FilePreview, { formatFileSize, formatDuration } from '../components/FilePreview';
|
||||||
import debugLogger from '../utils/debugLogger';
|
import debugLogger from '../utils/debugLogger';
|
||||||
@@ -85,6 +85,32 @@ function ProjectDetail({ user, darkMode, onLogout, onToggleDarkMode, overridePar
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// iFrame Refresh Funktionalität
|
||||||
|
const handleRefreshAd = (adId, adName) => {
|
||||||
|
// Finde alle iFrames innerhalb des Ad-Containers
|
||||||
|
const adContainer = document.getElementById(adId);
|
||||||
|
if (adContainer) {
|
||||||
|
const iframes = adContainer.querySelectorAll('iframe');
|
||||||
|
let refreshedCount = 0;
|
||||||
|
|
||||||
|
iframes.forEach((iframe) => {
|
||||||
|
if (iframe.src) {
|
||||||
|
// Füge einen Timestamp als URL-Parameter hinzu, um den Cache zu umgehen
|
||||||
|
const url = new URL(iframe.src);
|
||||||
|
url.searchParams.set('refresh', Date.now().toString());
|
||||||
|
iframe.src = url.toString();
|
||||||
|
refreshedCount++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (refreshedCount > 0) {
|
||||||
|
message.success(`Animation${refreshedCount > 1 ? 'en' : ''} "${adName}" ${refreshedCount > 1 ? 'wurden' : 'wurde'} neu geladen!`);
|
||||||
|
} else {
|
||||||
|
message.info(`Keine Animationen in "${adName}" gefunden.`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchLogo() {
|
async function fetchLogo() {
|
||||||
if (!client || !project) {
|
if (!client || !project) {
|
||||||
@@ -153,6 +179,17 @@ function ProjectDetail({ user, darkMode, onLogout, onToggleDarkMode, overridePar
|
|||||||
onClick={() => handleCopyLink(adId, ad.name)}
|
onClick={() => handleCopyLink(adId, ad.name)}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
{/* Refresh-Button nur bei HTML-Dateien (iFrames) anzeigen */}
|
||||||
|
{Array.isArray(ad.files) && ad.files.some(file => file.type === 'html') && (
|
||||||
|
<Tooltip title="Animationen neu laden">
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
shape="circle"
|
||||||
|
icon={<ReloadOutlined />}
|
||||||
|
onClick={() => handleRefreshAd(adId, ad.name)}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{/* Dateien unterhalb des Ads anzeigen */}
|
{/* Dateien unterhalb des Ads anzeigen */}
|
||||||
{Array.isArray(ad.files) && ad.files.length > 0 ? (
|
{Array.isArray(ad.files) && ad.files.length > 0 ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user