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)",
}}

37
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,12 +22,23 @@ 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 */}
<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)",
@@ -37,9 +50,23 @@ export const CreateActions: React.FC<CreateActionsProps> = ({
}}
>
<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.
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 />}>