kunthawat/ALwrity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve podcast avatar display and info banner

Browse Source 
- Avatar images now use full available width (max 280px, responsive)
- Auto-collapse info banner after 8 seconds
- Add 'Show tips' link to expand collapsed info
- Fix image sizing to use contain instead of cover for better visibility
This commit is contained in:
ajaysi
2026-03-31 20:13:24 +05:30
parent f737b24b49
commit d06ab77e60
2 changed files with 67 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/PodcastMaker/CreateStep/AvatarSelector.tsx
View File

@@ -160,17 +160,18 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
{loadingBrandAvatar ? (
<CircularProgress size={32} />
) : avatarPreview && avatarPreview === brandAvatarFromDb ? (
<Stack spacing={2} alignItems="center">
<Box sx={{ position: "relative" }}>
<Stack spacing={2} alignItems="center" sx={{ width: "100%", maxWidth: 280 }}>
<Box sx={{ position: "relative", width: "100%" }}>
<Box
component="img"
src={avatarPreviewBlobUrl || ""}
alt="Selected Brand Avatar"
sx={{
width: 160,
height: 160,
objectFit: "cover",
borderRadius: 2.5,
width: "100%",
height: "auto",
maxHeight: 200,
objectFit: "contain",
borderRadius: 2,
border: "2px solid #667eea",
boxShadow: "0 4px 12px rgba(102, 126, 234, 0.25)",
}}
@@ -203,16 +204,17 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
</Stack>
</Stack>
) : brandAvatarFromDb ? (
<Stack spacing={2} alignItems="center">
<Stack spacing={2} alignItems="center" sx={{ width: "100%", maxWidth: 280 }}>
<Box
component="img"
src={brandAvatarBlobUrl || ""}
alt="Available Brand Avatar"
sx={{
width: 160,
height: 160,
objectFit: "cover",
borderRadius: 2.5,
width: "100%",
height: "auto",
maxHeight: 200,
objectFit: "contain",
borderRadius: 2,
border: "1.5px solid #e2e8f0",
opacity: 0.8,
filter: "grayscale(0.3)",
@@ -317,16 +319,17 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
<Box>
{avatarFile && avatarPreview ? (
<Stack spacing={2} alignItems="center" sx={{ bgcolor: "#f8fafc", borderRadius: 2, p: 2 }}>
<Box sx={{ position: "relative", display: "inline-block" }}>
<Box sx={{ position: "relative", display: "inline-block", width: "100%", maxWidth: 280 }}>
<Box
component="img"
src={avatarPreviewBlobUrl || (avatarPreview.startsWith("data:") ? avatarPreview : "")}
alt="Selfie preview"
sx={{
width: 160,
height: 160,
objectFit: "cover",
borderRadius: 2.5,
width: "100%",
height: "auto",
maxHeight: 200,
objectFit: "contain",
borderRadius: 2,
border: "2px solid #e2e8f0",
boxShadow: "0 2px 8px rgba(15, 23, 42, 0.08)",
}}

69
frontend/src/components/PodcastMaker/CreateStep/CreateActions.tsx
View File

@@ -1,9 +1,11 @@
import React from "react";
import { Stack, Alert, Typography, alpha } from "@mui/material";
import React, { useState, useEffect } from "react";
import { Stack, Alert, Typography, alpha, IconButton, Collapse } from "@mui/material";
import {
Info as InfoIcon,
Refresh as RefreshIcon,
AutoAwesome as AutoAwesomeIcon,
ExpandMore as ExpandMoreIcon,
ExpandLess as ExpandLessIcon,
} from "@mui/icons-material";
import { PrimaryButton, SecondaryButton } from "../ui";
@@ -20,26 +22,51 @@ export const CreateActions: React.FC<CreateActionsProps> = ({
canSubmit,
isSubmitting,
}) => {
const [showInfo, setShowInfo] = useState(true);
useEffect(() => {
const timer = setTimeout(() => {
setShowInfo(false);
}, 8000);
return () => clearTimeout(timer);
}, []);
return (
<Stack spacing={3.5}>
{/* Info Banner */}
<Alert
severity="info"
icon={<InfoIcon sx={{ color: "#6366f1", fontSize: "1.125rem" }} />}
sx={{
background: alpha("#f0f4ff", 0.6),
border: "1px solid rgba(99, 102, 241, 0.15)",
borderRadius: 2,
boxShadow: "0 1px 3px rgba(99, 102, 241, 0.08)",
"& .MuiAlert-message": {
width: "100%",
},
}}
>
<Typography variant="body2" sx={{ fontSize: "0.875rem", color: "#475569", lineHeight: 1.6, fontWeight: 400 }}>
Podcast avatar Image is required, brand avatar is Default, you can choose existing images from asset library Or Upload your Picture. If not, AI Avatar will be generated automatically.
</Typography>
</Alert>
<Stack spacing={2}>
{/* Collapsible Info Banner */}
<Collapse in={showInfo}>
<Alert
severity="info"
icon={<InfoIcon sx={{ color: "#6366f1", fontSize: "1.125rem" }} />}
onClose={() => setShowInfo(false)}
sx={{
background: alpha("#f0f4ff", 0.6),
border: "1px solid rgba(99, 102, 241, 0.15)",
borderRadius: 2,
boxShadow: "0 1px 3px rgba(99, 102, 241, 0.08)",
"& .MuiAlert-message": {
width: "100%",
},
}}
>
<Typography variant="body2" sx={{ fontSize: "0.875rem", color: "#475569", lineHeight: 1.6, fontWeight: 400 }}>
Podcast avatar Image is required. Brand avatar is default. You can choose from asset library or upload your picture. If not, AI Avatar will be generated automatically.
</Typography>
</Alert>
</Collapse>
{!showInfo && (
<Stack direction="row" alignItems="center" spacing={1}>
<InfoIcon sx={{ fontSize: 16, color: "#6366f1" }} />
<Typography
variant="caption"
sx={{ color: "#6366f1", cursor: "pointer", "&:hover": { textDecoration: "underline" } }}
onClick={() => setShowInfo(true)}
>
Show tips
</Typography>
</Stack>
)}
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<SecondaryButton onClick={reset} startIcon={<RefreshIcon />}>