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:
parent
f4fe10d804
commit
6bec96cc19
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue