Pass live title/category from PostCreateModal to LiveKitBroadcast (v0.0.91)

- Add liveData state to MapView for title/category/subCategory
- Pass initialTitle, initialCategory, initialSubCategory to LiveKitBroadcast
- Skip form in LiveKitBroadcast when data provided from PostCreateModal
- Show ready state with title/category instead of redundant form
- Fix auto-scroll only on new comment (v0.0.90)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-01-20 07:12:56 +00:00
parent f4fe10d804
commit 6bec96cc19
4 changed files with 61 additions and 6 deletions

View File

@ -1,7 +1,7 @@
{ {
"name": "sociowire-frontend", "name": "sociowire-frontend",
"private": true, "private": true,
"version": "0.0.90", "version": "0.0.91",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite --host 0.0.0.0", "dev": "vite --host 0.0.0.0",

View File

@ -869,6 +869,34 @@ body[data-theme="light"] .sw-video-modal-subtitle {
color: #64748b; color: #64748b;
} }
.sw-broadcast-ready {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 12px;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.1));
border: 1px solid rgba(34, 197, 94, 0.3);
}
.sw-broadcast-ready .sw-broadcast-title {
font-size: 1.1rem;
font-weight: 800;
color: #f8fafc;
margin: 0;
}
.sw-broadcast-ready .sw-broadcast-stats {
flex-direction: row;
gap: 0.75rem;
}
.sw-broadcast-ready .sw-broadcast-hint {
margin-top: 0.5rem;
color: #4ade80;
}
.sw-broadcast-category-row { .sw-broadcast-category-row {
display: flex; display: flex;
gap: 0.75rem; gap: 0.75rem;

View File

@ -13,17 +13,20 @@ const LIVEKIT_API = "https://stream.sociowire.com";
* LiveKit-based broadcast component * LiveKit-based broadcast component
* Professional video streaming that works everywhere (5G, 4G, WiFi, firewalls) * Professional video streaming that works everywhere (5G, 4G, WiFi, firewalls)
*/ */
export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) { export default function LiveKitBroadcast({ coords, onClose, onStreamCreated, initialTitle, initialCategory, initialSubCategory }) {
const { username, token: authToken } = useAuth(); const { username, token: authToken } = useAuth();
const userID = username || `anon_${Date.now()}`; const userID = username || `anon_${Date.now()}`;
const [roomName] = useState(() => `live_${userID}_${Date.now()}`); const [roomName] = useState(() => `live_${userID}_${Date.now()}`);
const [title, setTitle] = useState(""); const [title, setTitle] = useState(initialTitle || "");
const [showConfirm, setShowConfirm] = useState(false); const [showConfirm, setShowConfirm] = useState(false);
const [livePostId, setLivePostId] = useState(null); const [livePostId, setLivePostId] = useState(null);
const liveCategoryOptions = FILTER_MAIN_CATEGORIES.filter((c) => c !== "All"); const liveCategoryOptions = FILTER_MAIN_CATEGORIES.filter((c) => c !== "All");
const [liveCategory, setLiveCategory] = useState("Events"); const [liveCategory, setLiveCategory] = useState(initialCategory || "Events");
const [liveSubCategory, setLiveSubCategory] = useState("Live"); const [liveSubCategory, setLiveSubCategory] = useState(initialSubCategory || "Live");
// If title was provided from PostCreateModal, skip the form
const skipForm = !!(initialTitle && initialTitle.trim());
// Timer state // Timer state
const [liveStartTime, setLiveStartTime] = useState(null); const [liveStartTime, setLiveStartTime] = useState(null);
@ -515,7 +518,7 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
{/* Side panel */} {/* Side panel */}
<div className="sw-broadcast-side"> <div className="sw-broadcast-side">
{!isLive && ( {!isLive && !skipForm && (
<div className="sw-broadcast-form"> <div className="sw-broadcast-form">
<label className="sw-broadcast-label">Stream Title</label> <label className="sw-broadcast-label">Stream Title</label>
<input <input
@ -556,6 +559,20 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
</div> </div>
)} )}
{!isLive && skipForm && (
<div className="sw-broadcast-ready">
<h3 className="sw-broadcast-title">{title}</h3>
<div className="sw-broadcast-stats">
<span>
<i className="fa-solid fa-tag" /> {liveCategory} · {liveSubCategory}
</span>
</div>
<div className="sw-broadcast-hint">
Camera ready - tap Go Live to start
</div>
</div>
)}
{isLive && ( {isLive && (
<> <>
<div className="sw-broadcast-live-info"> <div className="sw-broadcast-live-info">

View File

@ -298,6 +298,7 @@ export default function MapView({
const [shareData, setShareData] = useState({ url: '', text: '' }); const [shareData, setShareData] = useState({ url: '', text: '' });
const [activeLivePost, setActiveLivePost] = useState(null); const [activeLivePost, setActiveLivePost] = useState(null);
const [liveCoords, setLiveCoords] = useState(null); const [liveCoords, setLiveCoords] = useState(null);
const [liveData, setLiveData] = useState(null); // { title, category, subCategory }
// Weather modal state // Weather modal state
const [activeWeatherPost, setActiveWeatherPost] = useState(null); const [activeWeatherPost, setActiveWeatherPost] = useState(null);
// Nearest weather city (fetched from /api/weather?lat=X&lon=Y) // Nearest weather city (fetched from /api/weather?lat=X&lon=Y)
@ -2317,6 +2318,11 @@ export default function MapView({
coords = [c.lng, c.lat]; coords = [c.lng, c.lat];
} }
setLiveCoords(coords); setLiveCoords(coords);
setLiveData({
title: data.title || "",
category: data.category || "Events",
subCategory: data.subCategory || "Live",
});
setShowLiveBroadcast(true); setShowLiveBroadcast(true);
setIsCreating(false); setIsCreating(false);
}} }}
@ -2341,9 +2347,13 @@ export default function MapView({
{showLiveBroadcast && ( {showLiveBroadcast && (
<LiveKitBroadcast <LiveKitBroadcast
coords={liveCoords} coords={liveCoords}
initialTitle={liveData?.title}
initialCategory={liveData?.category}
initialSubCategory={liveData?.subCategory}
onClose={() => { onClose={() => {
setShowLiveBroadcast(false); setShowLiveBroadcast(false);
setLiveCoords(null); setLiveCoords(null);
setLiveData(null);
}} }}
onStreamCreated={({ roomName, title, coords }) => { onStreamCreated={({ roomName, title, coords }) => {
console.log("[MapView] LiveKit stream created:", roomName, title, coords); console.log("[MapView] LiveKit stream created:", roomName, title, coords);