Update live features
This commit is contained in:
SocioWire
parent
eedebaea46
commit
15141835f2
|
|
@ -4,7 +4,7 @@ COPY package*.json ./
|
|||
RUN npm ci
|
||||
COPY . .
|
||||
ARG VITE_API_BASE_URL=
|
||||
ARG VITE_KC_URL=/auth
|
||||
ARG VITE_KC_URL=https://auth.sociowire.com
|
||||
ENV VITE_API_BASE_URL=${VITE_API_BASE_URL}
|
||||
ENV VITE_KC_URL=${VITE_KC_URL}
|
||||
RUN npm run build
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,6 +11,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^7.1.0",
|
||||
"livekit-client": "^2.0.0",
|
||||
"axios": "^1.13.2",
|
||||
"keycloak-js": "^26.2.1",
|
||||
"maplibre-gl": "^5.14.0",
|
||||
|
|
@ -27,9 +28,9 @@
|
|||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"vite": "npm:rolldown-vite@7.2.5"
|
||||
"vite": "^5.0.0"
|
||||
},
|
||||
"overrides": {
|
||||
"vite": "npm:rolldown-vite@7.2.5"
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -722,7 +722,6 @@ export function AuthProvider({ children }) {
|
|||
lastError: error || "",
|
||||
lastInfo: lastInfo || "",
|
||||
needsEmailVerification: !!needsEmailVerification,
|
||||
needsUsername: !!needsUsername,
|
||||
resendVerificationEmail,
|
||||
loginWithProvider,
|
||||
ssoEnabled: keycloakEnabled(),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
import React, { useState } from "react";
|
||||
import "./Live.css";
|
||||
|
||||
function formatRegionLabel(region) {
|
||||
if (!region) return "Unknown";
|
||||
return region.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
export default function CameraCard({ camera, selected, onSelect }) {
|
||||
const [thumbError, setThumbError] = useState(false);
|
||||
|
||||
if (!camera) return null;
|
||||
|
||||
const name = camera.name_fr || camera.name_en || "Camera";
|
||||
const region = formatRegionLabel(camera.region);
|
||||
const route = camera.route || "";
|
||||
const source = camera.source || "quebec511";
|
||||
|
||||
return (
|
||||
<article
|
||||
className={"post-card sw-wall-card sw-camera-card" + (selected ? " selected" : "")}
|
||||
onClick={() => onSelect && onSelect(camera)}
|
||||
>
|
||||
<div className="sw-wall-head">
|
||||
<div className="sw-wall-avatar sw-camera-avatar">
|
||||
<i className="fa-solid fa-video" />
|
||||
</div>
|
||||
<div className="sw-wall-meta">
|
||||
<div className="sw-wall-author">{name}</div>
|
||||
<div className="sw-wall-time">{region}</div>
|
||||
</div>
|
||||
<div className="sw-wall-badge sw-camera-badge">
|
||||
<i className="fa-solid fa-broadcast-tower" /> LIVE
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sw-wall-image sw-camera-thumbnail">
|
||||
{camera.thumbnail_url && !thumbError ? (
|
||||
<img
|
||||
src={camera.thumbnail_url}
|
||||
alt={name}
|
||||
loading="lazy"
|
||||
onError={() => setThumbError(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="sw-camera-thumb-fallback">
|
||||
<i className="fa-solid fa-video" />
|
||||
<span>LIVE FEED</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="sw-camera-live-indicator">
|
||||
<span className="sw-camera-dot" />
|
||||
<span>LIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sw-wall-title">{name}</div>
|
||||
{route && <div className="sw-wall-meta-line">Route {route}</div>}
|
||||
|
||||
<div className="sw-wall-stats">
|
||||
<span>
|
||||
<i className="fa-solid fa-map-marker-alt" /> {region}
|
||||
</span>
|
||||
<span>
|
||||
<i className="fa-solid fa-signal" /> {source}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="sw-wall-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-wall-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (onSelect) onSelect(camera);
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-play" /> Watch
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-wall-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const shareUrl = camera.embed_url || camera.video_url || "";
|
||||
if (navigator.share) {
|
||||
navigator.share({ title: name, url: shareUrl }).catch(() => {});
|
||||
} else if (navigator.clipboard && shareUrl) {
|
||||
navigator.clipboard.writeText(shareUrl);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-share-nodes" /> Share
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
import "./Live.css";
|
||||
|
||||
const API_BASE = "/live/api";
|
||||
const MAPTILER_KEY = "DvwhzlPmC55ZK28nLtXL";
|
||||
|
||||
function formatRegionLabel(region) {
|
||||
if (!region) return "Unknown";
|
||||
return region
|
||||
.replace(/_/g, " ")
|
||||
.replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
export default function CameraMiniMap({
|
||||
region = null,
|
||||
limit = 50,
|
||||
height = 280,
|
||||
onCameraClick,
|
||||
selectedCameraId = null,
|
||||
}) {
|
||||
const containerRef = useRef(null);
|
||||
const mapRef = useRef(null);
|
||||
const markersRef = useRef([]);
|
||||
const [cameras, setCameras] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
// Fetch cameras
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const url = region
|
||||
? `${API_BASE}/cameras?region=${encodeURIComponent(region)}`
|
||||
: `${API_BASE}/cameras`;
|
||||
|
||||
fetch(url)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to fetch cameras");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
if (cancelled) return;
|
||||
const cams = Array.isArray(data.cameras) ? data.cameras : [];
|
||||
setCameras(cams.slice(0, limit));
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (cancelled) return;
|
||||
console.error("Camera fetch error:", err);
|
||||
setError(err.message || "Error loading cameras");
|
||||
setLoading(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [region, limit]);
|
||||
|
||||
// Initialize map
|
||||
useEffect(() => {
|
||||
if (!containerRef.current || mapRef.current) return;
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
container: containerRef.current,
|
||||
style: `https://api.maptiler.com/maps/streets-v2-dark/style.json?key=${MAPTILER_KEY}`,
|
||||
center: [-71.2, 46.8], // Quebec City default
|
||||
zoom: 6,
|
||||
attributionControl: false,
|
||||
});
|
||||
|
||||
map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "top-right");
|
||||
|
||||
mapRef.current = map;
|
||||
|
||||
return () => {
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Add camera markers
|
||||
useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map || !cameras.length) return;
|
||||
|
||||
// Clear old markers
|
||||
markersRef.current.forEach((m) => m.remove());
|
||||
markersRef.current = [];
|
||||
|
||||
// Calculate bounds
|
||||
const bounds = new maplibregl.LngLatBounds();
|
||||
|
||||
cameras.forEach((cam) => {
|
||||
const lng = Number(cam.lng);
|
||||
const lat = Number(cam.lat);
|
||||
if (!Number.isFinite(lng) || !Number.isFinite(lat)) return;
|
||||
|
||||
bounds.extend([lng, lat]);
|
||||
|
||||
// Create marker element
|
||||
const el = document.createElement("div");
|
||||
el.className = "sw-camera-marker";
|
||||
if (selectedCameraId && cam.id === selectedCameraId) {
|
||||
el.classList.add("is-selected");
|
||||
}
|
||||
|
||||
// Camera icon
|
||||
el.innerHTML = `<i class="fa-solid fa-video"></i>`;
|
||||
|
||||
const marker = new maplibregl.Marker({ element: el })
|
||||
.setLngLat([lng, lat])
|
||||
.addTo(map);
|
||||
|
||||
el.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
if (onCameraClick) onCameraClick(cam);
|
||||
});
|
||||
|
||||
markersRef.current.push(marker);
|
||||
});
|
||||
|
||||
// Fit bounds if we have cameras
|
||||
if (cameras.length > 0 && !bounds.isEmpty()) {
|
||||
const tryFit = () => {
|
||||
if (!map || !map.loaded()) return false;
|
||||
try {
|
||||
map.fitBounds(bounds, {
|
||||
padding: 40,
|
||||
maxZoom: 10,
|
||||
duration: 500,
|
||||
});
|
||||
} catch {}
|
||||
return true;
|
||||
};
|
||||
|
||||
if (!tryFit()) {
|
||||
map.once("load", tryFit);
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
markersRef.current.forEach((m) => m.remove());
|
||||
markersRef.current = [];
|
||||
};
|
||||
}, [cameras, selectedCameraId, onCameraClick]);
|
||||
|
||||
return (
|
||||
<div className="sw-camera-minimap" style={{ height }}>
|
||||
<div className="sw-camera-minimap-header">
|
||||
<i className="fa-solid fa-video" />
|
||||
<span>Live Cameras</span>
|
||||
{region && <span className="sw-camera-region-badge">{formatRegionLabel(region)}</span>}
|
||||
<span className="sw-camera-count">{cameras.length}</span>
|
||||
</div>
|
||||
<div ref={containerRef} className="sw-camera-minimap-container" />
|
||||
{loading && (
|
||||
<div className="sw-camera-minimap-overlay">
|
||||
<div className="sw-camera-loader">
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Loading cameras...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="sw-camera-minimap-overlay sw-camera-error">
|
||||
<i className="fa-solid fa-exclamation-triangle" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,481 @@
|
|||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { useDualCamera } from "./useDualCamera";
|
||||
import { useWebRTCBroadcast } from "./useWebRTCBroadcast";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import { CREATE_CATEGORY_MAP } from "../Map/mapConfig";
|
||||
import "./Live.css";
|
||||
|
||||
const MAIN_CATEGORIES = ["News", "Events", "Friends", "Market"];
|
||||
|
||||
/**
|
||||
* LiveBroadcastModal - Host UI for live streaming
|
||||
*
|
||||
* Features:
|
||||
* - Dual camera preview (main + self PiP)
|
||||
* - Go Live / End Stream controls
|
||||
* - Title input
|
||||
* - Viewer count
|
||||
* - Join request management
|
||||
* - Participant grid
|
||||
*/
|
||||
export default function LiveBroadcastModal({ coords, onClose, onStreamCreated }) {
|
||||
const { username, token } = useAuth();
|
||||
const userID = username || `anon_${Date.now()}`;
|
||||
|
||||
// Generate stream ID
|
||||
const [streamID] = useState(() => `live_${userID}_${Date.now()}`);
|
||||
|
||||
// Form state
|
||||
const [title, setTitle] = useState("");
|
||||
const [category, setCategory] = useState("News");
|
||||
const [subCategory, setSubCategory] = useState(CREATE_CATEGORY_MAP.News[0]);
|
||||
const [showEndConfirm, setShowEndConfirm] = useState(false);
|
||||
const [saveAsPost, setSaveAsPost] = useState(true);
|
||||
|
||||
// Video refs
|
||||
const mainVideoRef = useRef(null);
|
||||
const selfVideoRef = useRef(null);
|
||||
const participantRefs = useRef({});
|
||||
|
||||
// Hooks
|
||||
const {
|
||||
mainStream,
|
||||
selfStream,
|
||||
isSwapped,
|
||||
error: cameraError,
|
||||
isStarting: cameraStarting,
|
||||
isSwapping,
|
||||
hasDualCameras,
|
||||
startCameras,
|
||||
swapCameras,
|
||||
stopCameras,
|
||||
toggleAudio,
|
||||
} = useDualCamera();
|
||||
|
||||
const {
|
||||
isLive,
|
||||
isConnecting,
|
||||
error: broadcastError,
|
||||
viewerCount,
|
||||
participants,
|
||||
joinRequests,
|
||||
startBroadcast,
|
||||
stopBroadcast,
|
||||
setStreamMeta,
|
||||
approveJoinRequest,
|
||||
denyJoinRequest,
|
||||
kickParticipant,
|
||||
} = useWebRTCBroadcast({ streamID, userID, username, token });
|
||||
|
||||
const [audioMuted, setAudioMuted] = useState(false);
|
||||
|
||||
// Start cameras on mount
|
||||
useEffect(() => {
|
||||
startCameras();
|
||||
return () => {
|
||||
stopCameras();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Attach main stream to video element
|
||||
useEffect(() => {
|
||||
if (mainVideoRef.current && mainStream) {
|
||||
mainVideoRef.current.srcObject = mainStream;
|
||||
}
|
||||
}, [mainStream]);
|
||||
|
||||
// Attach self stream to PiP video element
|
||||
useEffect(() => {
|
||||
if (selfVideoRef.current && selfStream) {
|
||||
selfVideoRef.current.srcObject = selfStream;
|
||||
}
|
||||
}, [selfStream]);
|
||||
|
||||
// Attach participant streams
|
||||
useEffect(() => {
|
||||
participants.forEach((p) => {
|
||||
const ref = participantRefs.current[p.userID];
|
||||
if (ref && p.stream) {
|
||||
ref.srcObject = p.stream;
|
||||
}
|
||||
});
|
||||
}, [participants]);
|
||||
|
||||
const handleGoLive = useCallback(async () => {
|
||||
console.log("[LiveBroadcast] handleGoLive clicked, title:", title, "mainStream:", !!mainStream);
|
||||
|
||||
// Remote log for debugging
|
||||
fetch('/api/debug-log', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
level: 'log',
|
||||
msg: `[LiveBroadcast] handleGoLive: title="${title}" hasMainStream=${!!mainStream} hasSelfStream=${!!selfStream}`,
|
||||
ts: new Date().toISOString(),
|
||||
src: 'broadcast'
|
||||
})
|
||||
}).catch(() => {});
|
||||
|
||||
if (!title.trim()) {
|
||||
alert("Please enter a title for your live stream");
|
||||
return;
|
||||
}
|
||||
|
||||
const meta = {
|
||||
title: title.trim(),
|
||||
lat: coords?.[1],
|
||||
lon: coords?.[0],
|
||||
category: category === "Events" ? "EVENT" : category.toUpperCase(),
|
||||
sub_category: subCategory,
|
||||
};
|
||||
|
||||
// Store metadata for post creation when stream ends
|
||||
setStreamMeta(meta);
|
||||
|
||||
console.log("[LiveBroadcast] Calling startBroadcast with meta:", meta);
|
||||
await startBroadcast(mainStream, selfStream, meta);
|
||||
|
||||
if (onStreamCreated) {
|
||||
onStreamCreated({ streamID, title: title.trim(), coords, category, subCategory });
|
||||
}
|
||||
}, [title, category, subCategory, mainStream, selfStream, coords, startBroadcast, setStreamMeta, streamID, onStreamCreated]);
|
||||
|
||||
const handleEndStream = useCallback(() => {
|
||||
setShowEndConfirm(true);
|
||||
}, []);
|
||||
|
||||
const confirmEndStream = useCallback(async () => {
|
||||
await stopBroadcast(saveAsPost);
|
||||
stopCameras();
|
||||
onClose?.();
|
||||
}, [saveAsPost, stopBroadcast, stopCameras, onClose]);
|
||||
|
||||
const handleToggleAudio = useCallback(() => {
|
||||
const newMuted = !audioMuted;
|
||||
setAudioMuted(newMuted);
|
||||
toggleAudio(newMuted);
|
||||
}, [audioMuted, toggleAudio]);
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget && !isLive) {
|
||||
stopCameras();
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
const error = cameraError || broadcastError;
|
||||
|
||||
return (
|
||||
<div className="sw-broadcast-modal" onClick={handleBackdropClick}>
|
||||
<div className="sw-broadcast-container">
|
||||
{/* Header */}
|
||||
<div className="sw-broadcast-header">
|
||||
<div className="sw-broadcast-header-left">
|
||||
<i className="fa-solid fa-broadcast-tower" />
|
||||
<span>{isLive ? "LIVE" : "Go Live"}</span>
|
||||
{isLive && (
|
||||
<div className="sw-broadcast-live-badge">
|
||||
<span className="sw-broadcast-dot" />
|
||||
<span>{viewerCount} watching</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-close"
|
||||
onClick={() => {
|
||||
if (isLive) {
|
||||
handleEndStream();
|
||||
} else {
|
||||
stopCameras();
|
||||
onClose?.();
|
||||
}
|
||||
}}
|
||||
aria-label="Close"
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="sw-broadcast-content">
|
||||
{/* Video preview area */}
|
||||
<div className="sw-broadcast-video-area">
|
||||
{/* Main video (fullscreen) */}
|
||||
<div className="sw-broadcast-main-video">
|
||||
{mainStream ? (
|
||||
<>
|
||||
<video
|
||||
ref={mainVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="sw-broadcast-video"
|
||||
/>
|
||||
{/* Camera label for debug */}
|
||||
<div className="sw-broadcast-camera-label">
|
||||
<i className="fa-solid fa-video" />
|
||||
<span>{isSwapped ? "Back" : "Front"} cam</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="sw-broadcast-video-placeholder">
|
||||
{cameraStarting ? (
|
||||
<>
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Starting camera...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="fa-solid fa-video-slash" />
|
||||
<span>Camera not available</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Self PiP (draggable corner) - show if we have dual cameras */}
|
||||
{selfStream && (
|
||||
<div className="sw-broadcast-pip">
|
||||
<video
|
||||
ref={selfVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="sw-broadcast-pip-video"
|
||||
/>
|
||||
<div className="sw-broadcast-pip-label">{isSwapped ? "Front" : "Back"}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No dual camera indicator */}
|
||||
{!selfStream && mainStream && !hasDualCameras && (
|
||||
<div className="sw-broadcast-no-pip">
|
||||
<i className="fa-solid fa-camera" />
|
||||
<span>Single camera</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Participant strip (when live with participants) */}
|
||||
{isLive && participants.length > 0 && (
|
||||
<div className="sw-broadcast-participants-strip">
|
||||
{participants.map((p) => (
|
||||
<div key={p.userID} className="sw-broadcast-participant">
|
||||
<video
|
||||
ref={(el) => {
|
||||
participantRefs.current[p.userID] = el;
|
||||
}}
|
||||
autoPlay
|
||||
playsInline
|
||||
className="sw-broadcast-participant-video"
|
||||
/>
|
||||
<div className="sw-broadcast-participant-name">{p.username}</div>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-kick-btn"
|
||||
onClick={() => kickParticipant(p.userID)}
|
||||
title="Remove"
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Camera controls overlay */}
|
||||
<div className="sw-broadcast-controls-overlay">
|
||||
<button
|
||||
type="button"
|
||||
className={`sw-broadcast-control-btn ${!hasDualCameras ? "is-disabled" : ""} ${isSwapping ? "is-swapping" : ""}`}
|
||||
onClick={hasDualCameras && !isSwapping ? swapCameras : undefined}
|
||||
title={hasDualCameras ? (isSwapping ? "Switching..." : "Swap cameras") : "Single camera only"}
|
||||
disabled={!hasDualCameras || isSwapping}
|
||||
>
|
||||
<i className={`fa-solid ${isSwapping ? "fa-spinner fa-spin" : "fa-camera-rotate"}`} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`sw-broadcast-control-btn ${audioMuted ? "is-muted" : ""}`}
|
||||
onClick={handleToggleAudio}
|
||||
title={audioMuted ? "Unmute" : "Mute"}
|
||||
>
|
||||
<i className={`fa-solid ${audioMuted ? "fa-microphone-slash" : "fa-microphone"}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="sw-broadcast-side">
|
||||
{/* Title input (before going live) */}
|
||||
{!isLive && (
|
||||
<div className="sw-broadcast-form">
|
||||
<label className="sw-broadcast-label">Stream Title</label>
|
||||
<input
|
||||
type="text"
|
||||
className="sw-broadcast-input"
|
||||
placeholder="What's happening?"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
maxLength={100}
|
||||
/>
|
||||
|
||||
<div className="sw-broadcast-category-row">
|
||||
<div className="sw-broadcast-field">
|
||||
<label className="sw-broadcast-label">Category</label>
|
||||
<select
|
||||
className="sw-broadcast-select"
|
||||
value={category}
|
||||
onChange={(e) => {
|
||||
const cat = e.target.value;
|
||||
setCategory(cat);
|
||||
setSubCategory((CREATE_CATEGORY_MAP[cat] || CREATE_CATEGORY_MAP.News)[0]);
|
||||
}}
|
||||
>
|
||||
{MAIN_CATEGORIES.map((cat) => (
|
||||
<option key={cat} value={cat}>{cat}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="sw-broadcast-field">
|
||||
<label className="sw-broadcast-label">Sub-category</label>
|
||||
<select
|
||||
className="sw-broadcast-select"
|
||||
value={subCategory}
|
||||
onChange={(e) => setSubCategory(e.target.value)}
|
||||
>
|
||||
{(CREATE_CATEGORY_MAP[category] || CREATE_CATEGORY_MAP.News).map((sub) => (
|
||||
<option key={sub} value={sub}>{sub}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sw-broadcast-hint">
|
||||
Location: {coords ? `${coords[1].toFixed(4)}, ${coords[0].toFixed(4)}` : "Unknown"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Live info */}
|
||||
{isLive && (
|
||||
<div className="sw-broadcast-live-info">
|
||||
<h3 className="sw-broadcast-title">{title}</h3>
|
||||
<div className="sw-broadcast-stats">
|
||||
<span><i className="fa-solid fa-eye" /> {viewerCount} viewers</span>
|
||||
<span><i className="fa-solid fa-users" /> {participants.length} participants</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Join requests (when live) */}
|
||||
{isLive && joinRequests.length > 0 && (
|
||||
<div className="sw-broadcast-requests">
|
||||
<h4>Join Requests</h4>
|
||||
{joinRequests.map((req) => (
|
||||
<div key={req.userID} className="sw-broadcast-request">
|
||||
<span className="sw-broadcast-request-name">{req.username}</span>
|
||||
<div className="sw-broadcast-request-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-request-btn approve"
|
||||
onClick={() => approveJoinRequest(req.userID)}
|
||||
>
|
||||
<i className="fa-solid fa-check" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-request-btn deny"
|
||||
onClick={() => denyJoinRequest(req.userID)}
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error display */}
|
||||
{error && (
|
||||
<div className="sw-broadcast-error">
|
||||
<i className="fa-solid fa-exclamation-triangle" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="sw-broadcast-actions">
|
||||
{!isLive ? (
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn primary"
|
||||
onClick={handleGoLive}
|
||||
disabled={isConnecting || !mainStream}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<>
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Connecting...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="fa-solid fa-broadcast-tower" />
|
||||
<span>Go Live</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn danger"
|
||||
onClick={handleEndStream}
|
||||
>
|
||||
<i className="fa-solid fa-stop" />
|
||||
<span>End Stream</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* End stream confirmation modal */}
|
||||
{showEndConfirm && (
|
||||
<div className="sw-broadcast-confirm-overlay">
|
||||
<div className="sw-broadcast-confirm">
|
||||
<h3>End Stream?</h3>
|
||||
<p>Your live stream will end for all viewers.</p>
|
||||
|
||||
<label className="sw-broadcast-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={saveAsPost}
|
||||
onChange={(e) => setSaveAsPost(e.target.checked)}
|
||||
/>
|
||||
<span>Save as post on the map</span>
|
||||
</label>
|
||||
|
||||
<div className="sw-broadcast-confirm-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn secondary"
|
||||
onClick={() => setShowEndConfirm(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn danger"
|
||||
onClick={confirmEndStream}
|
||||
>
|
||||
End Stream
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { useLiveKit } from "./useLiveKit";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import "./Live.css";
|
||||
|
||||
const API_BASE = (import.meta?.env?.VITE_API_BASE_URL || "").replace(/\/+$/, "");
|
||||
|
||||
/**
|
||||
* LiveKit-based broadcast component
|
||||
* Professional video streaming that works everywhere (5G, 4G, WiFi, firewalls)
|
||||
*/
|
||||
export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
||||
const { username, token: authToken } = useAuth();
|
||||
const userID = username || `anon_${Date.now()}`;
|
||||
|
||||
const [roomName] = useState(() => `live_${userID}_${Date.now()}`);
|
||||
const [title, setTitle] = useState("");
|
||||
const [localStream, setLocalStream] = useState(null);
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
const [livePostId, setLivePostId] = useState(null);
|
||||
|
||||
const videoRef = useRef(null);
|
||||
|
||||
const {
|
||||
isLive,
|
||||
isConnecting,
|
||||
error,
|
||||
viewerCount,
|
||||
startBroadcast,
|
||||
stopBroadcast,
|
||||
toggleAudio,
|
||||
} = useLiveKit({
|
||||
roomName,
|
||||
userID,
|
||||
username,
|
||||
token: authToken,
|
||||
});
|
||||
|
||||
// Start camera on mount
|
||||
useEffect(() => {
|
||||
const startCamera = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { facingMode: "user", width: 1280, height: 720 },
|
||||
audio: true,
|
||||
});
|
||||
setLocalStream(stream);
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = stream;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[LiveKit] Camera error:", err);
|
||||
}
|
||||
};
|
||||
startCamera();
|
||||
|
||||
return () => {
|
||||
if (localStream) {
|
||||
localStream.getTracks().forEach((t) => t.stop());
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Update video element when stream changes
|
||||
useEffect(() => {
|
||||
if (videoRef.current && localStream) {
|
||||
videoRef.current.srcObject = localStream;
|
||||
}
|
||||
}, [localStream]);
|
||||
|
||||
const handleGoLive = useCallback(async () => {
|
||||
if (!title.trim()) {
|
||||
alert("Please enter a title");
|
||||
return;
|
||||
}
|
||||
if (!localStream) {
|
||||
alert("Camera not ready");
|
||||
return;
|
||||
}
|
||||
|
||||
// Get video track from stream
|
||||
const videoTrack = localStream.getVideoTracks()[0];
|
||||
await startBroadcast(videoTrack, true);
|
||||
|
||||
if (onStreamCreated) {
|
||||
onStreamCreated({
|
||||
roomName,
|
||||
title: title.trim(),
|
||||
coords,
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/post`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: title.trim(),
|
||||
snippet: "Live now",
|
||||
category: "EVENT",
|
||||
sub_category: "Live",
|
||||
lat: coords?.lat,
|
||||
lon: coords?.lon,
|
||||
author: username,
|
||||
source: "sociowire",
|
||||
visibility: "public",
|
||||
content_type: "live",
|
||||
embed_url: `livekit://${roomName}`,
|
||||
}),
|
||||
});
|
||||
if (res.ok) {
|
||||
const post = await res.json();
|
||||
setLivePostId(post?.id || null);
|
||||
window.dispatchEvent(new CustomEvent("live-post-created", { detail: post }));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[LiveKit] Failed to create live post:", err);
|
||||
}
|
||||
}, [title, localStream, startBroadcast, roomName, coords, onStreamCreated, authToken, username]);
|
||||
|
||||
const handleEndStream = useCallback(async (save) => {
|
||||
await stopBroadcast();
|
||||
if (localStream) {
|
||||
localStream.getTracks().forEach((t) => t.stop());
|
||||
}
|
||||
if (livePostId) {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/live/finalize`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
post_id: livePostId,
|
||||
save: !!save,
|
||||
video_url: "",
|
||||
}),
|
||||
});
|
||||
if (res.ok && save) {
|
||||
const post = await res.json();
|
||||
window.dispatchEvent(new CustomEvent("live-post-updated", { detail: post }));
|
||||
}
|
||||
if (res.ok && !save) {
|
||||
window.dispatchEvent(new CustomEvent("live-post-deleted", { detail: { post_id: livePostId } }));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[LiveKit] Failed to finalize live post:", err);
|
||||
}
|
||||
}
|
||||
onClose?.();
|
||||
}, [stopBroadcast, localStream, onClose, livePostId, authToken, username]);
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget && !isLive) {
|
||||
if (localStream) {
|
||||
localStream.getTracks().forEach((t) => t.stop());
|
||||
}
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sw-broadcast-modal" onClick={handleBackdropClick}>
|
||||
<div className="sw-broadcast-container">
|
||||
{/* Header */}
|
||||
<div className="sw-broadcast-header">
|
||||
<div className="sw-broadcast-header-left">
|
||||
<i className="fa-solid fa-broadcast-tower" />
|
||||
<span>{isLive ? "LIVE" : "Go Live"}</span>
|
||||
{isLive && (
|
||||
<div className="sw-broadcast-live-badge">
|
||||
<span className="sw-broadcast-dot" />
|
||||
<span>{viewerCount} watching</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-close"
|
||||
onClick={() => {
|
||||
if (isLive) {
|
||||
setShowConfirm(true);
|
||||
} else {
|
||||
if (localStream) {
|
||||
localStream.getTracks().forEach((t) => t.stop());
|
||||
}
|
||||
onClose?.();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="sw-broadcast-content">
|
||||
{/* Video preview */}
|
||||
<div className="sw-broadcast-video-area">
|
||||
<div className="sw-broadcast-main-video">
|
||||
{localStream ? (
|
||||
<video
|
||||
ref={videoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="sw-broadcast-video"
|
||||
/>
|
||||
) : (
|
||||
<div className="sw-broadcast-video-placeholder">
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Starting camera...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLive && (
|
||||
<div className="sw-broadcast-live-indicator">
|
||||
<span className="sw-broadcast-dot" />
|
||||
<span>LIVE on LiveKit</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="sw-broadcast-side">
|
||||
{!isLive && (
|
||||
<div className="sw-broadcast-form">
|
||||
<label className="sw-broadcast-label">Stream Title</label>
|
||||
<input
|
||||
type="text"
|
||||
className="sw-broadcast-input"
|
||||
placeholder="What's happening?"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
maxLength={100}
|
||||
/>
|
||||
<div className="sw-broadcast-hint">
|
||||
Using LiveKit - works on 5G/4G/WiFi
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLive && (
|
||||
<div className="sw-broadcast-live-info">
|
||||
<h3 className="sw-broadcast-title">{title}</h3>
|
||||
<div className="sw-broadcast-stats">
|
||||
<span>
|
||||
<i className="fa-solid fa-eye" /> {viewerCount} viewers
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="sw-broadcast-error">
|
||||
<i className="fa-solid fa-exclamation-triangle" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="sw-broadcast-actions">
|
||||
{isLive ? (
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn danger"
|
||||
onClick={() => setShowConfirm(true)}
|
||||
>
|
||||
<i className="fa-solid fa-stop" />
|
||||
<span>End Stream</span>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn primary"
|
||||
onClick={handleGoLive}
|
||||
disabled={isConnecting || !localStream}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<>
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Connecting...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="fa-solid fa-broadcast-tower" />
|
||||
<span>Go Live</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confirm dialog */}
|
||||
{showConfirm && (
|
||||
<div className="sw-broadcast-confirm-overlay">
|
||||
<div className="sw-broadcast-confirm">
|
||||
<h3>End Stream?</h3>
|
||||
<p>Your live stream will end for all viewers.</p>
|
||||
<div className="sw-broadcast-confirm-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn secondary"
|
||||
onClick={() => setShowConfirm(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn danger"
|
||||
onClick={() => handleEndStream(false)}
|
||||
>
|
||||
End Stream
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn primary"
|
||||
onClick={() => handleEndStream(true)}
|
||||
>
|
||||
End & Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Room, RoomEvent } from "livekit-client";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import "./Live.css";
|
||||
|
||||
const LIVEKIT_URL = "wss://live.us1.sociowire.com";
|
||||
const LIVEKIT_API = "https://live.us1.sociowire.com";
|
||||
|
||||
function roomNameFromPost(post) {
|
||||
const raw = (post?.embed_url || post?.video_url || "").toString().trim();
|
||||
if (raw.startsWith("livekit://")) {
|
||||
return raw.slice("livekit://".length);
|
||||
}
|
||||
return raw;
|
||||
}
|
||||
|
||||
export default function LiveKitViewerModal({ post, onClose }) {
|
||||
const { username, token: authToken } = useAuth();
|
||||
const userID = username || `viewer_${Date.now()}`;
|
||||
const roomName = roomNameFromPost(post);
|
||||
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [viewerCount, setViewerCount] = useState(0);
|
||||
const [videoTrack, setVideoTrack] = useState(null);
|
||||
const roomRef = useRef(null);
|
||||
const videoRef = useRef(null);
|
||||
|
||||
const getToken = useCallback(async () => {
|
||||
const res = await fetch(`${LIVEKIT_API}/api/livekit/token`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
room: roomName,
|
||||
identity: userID,
|
||||
name: username || userID,
|
||||
canPublish: false,
|
||||
canSubscribe: true,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to get LiveKit token");
|
||||
}
|
||||
const data = await res.json();
|
||||
return data.token;
|
||||
}, [authToken, roomName, userID, username]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!roomName) {
|
||||
setError("Missing room name");
|
||||
return;
|
||||
}
|
||||
let mounted = true;
|
||||
const connect = async () => {
|
||||
setIsConnecting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const token = await getToken();
|
||||
if (!mounted) return;
|
||||
const room = new Room({ adaptiveStream: true, dynacast: true });
|
||||
roomRef.current = room;
|
||||
|
||||
room.on(RoomEvent.TrackSubscribed, (track) => {
|
||||
if (track.kind === "video") {
|
||||
setVideoTrack(track);
|
||||
}
|
||||
});
|
||||
|
||||
room.on(RoomEvent.ParticipantConnected, () => {
|
||||
setViewerCount((prev) => prev + 1);
|
||||
});
|
||||
room.on(RoomEvent.ParticipantDisconnected, () => {
|
||||
setViewerCount((prev) => Math.max(0, prev - 1));
|
||||
});
|
||||
room.on(RoomEvent.Disconnected, () => {
|
||||
setViewerCount(0);
|
||||
});
|
||||
|
||||
await room.connect(LIVEKIT_URL, token);
|
||||
setViewerCount(room.participants?.size || 0);
|
||||
} catch (err) {
|
||||
if (mounted) {
|
||||
setError(err.message || "Failed to connect");
|
||||
}
|
||||
} finally {
|
||||
if (mounted) setIsConnecting(false);
|
||||
}
|
||||
};
|
||||
connect();
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
if (roomRef.current) {
|
||||
roomRef.current.disconnect();
|
||||
roomRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [roomName, getToken]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!videoRef.current || !videoTrack) return;
|
||||
videoTrack.attach(videoRef.current);
|
||||
return () => {
|
||||
try { videoTrack.detach(videoRef.current); } catch {}
|
||||
};
|
||||
}, [videoTrack]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
if (roomRef.current) {
|
||||
roomRef.current.disconnect();
|
||||
roomRef.current = null;
|
||||
}
|
||||
onClose?.();
|
||||
}, [onClose]);
|
||||
|
||||
if (!post) return null;
|
||||
|
||||
return (
|
||||
<div className="sw-viewer-modal" onClick={(e) => {
|
||||
if (e.target === e.currentTarget) handleClose();
|
||||
}}>
|
||||
<div className="sw-viewer-container">
|
||||
<div className="sw-viewer-header">
|
||||
<div className="sw-viewer-header-left">
|
||||
<div className="sw-viewer-live-badge">
|
||||
<span className="sw-viewer-dot" />
|
||||
<span>LIVE</span>
|
||||
</div>
|
||||
<span className="sw-viewer-title">{post?.title || "Live Stream"}</span>
|
||||
</div>
|
||||
<div className="sw-viewer-header-right">
|
||||
<span className="sw-viewer-count">
|
||||
<i className="fa-solid fa-eye" /> {viewerCount}
|
||||
</span>
|
||||
<button type="button" className="sw-viewer-close" onClick={handleClose}>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sw-viewer-content">
|
||||
<div className="sw-viewer-video-area">
|
||||
{isConnecting ? (
|
||||
<div className="sw-viewer-video-placeholder">
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Connecting...</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="sw-viewer-video-placeholder error">
|
||||
<i className="fa-solid fa-exclamation-triangle" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="sw-viewer-main-video">
|
||||
<video ref={videoRef} autoPlay playsInline controls />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import { useWebRTCViewer } from "./useWebRTCViewer";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import "./Live.css";
|
||||
|
||||
const MAPTILER_KEY = "DvwhzlPmC55ZK28nLtXL";
|
||||
|
||||
/**
|
||||
* LiveViewerModal - Viewer UI for watching live streams
|
||||
*
|
||||
* Features:
|
||||
* - Main video + presenter PiP
|
||||
* - Participant grid
|
||||
* - Request to join
|
||||
* - Viewer count
|
||||
* - Location mini-map
|
||||
* - Share
|
||||
*/
|
||||
export default function LiveViewerModal({ streamID, streamData, onClose }) {
|
||||
const { username, token, authenticated } = useAuth();
|
||||
const userID = username || `viewer_${Date.now()}`;
|
||||
|
||||
// Video refs
|
||||
const mainVideoRef = useRef(null);
|
||||
const presenterVideoRef = useRef(null);
|
||||
const localVideoRef = useRef(null);
|
||||
const participantRefs = useRef({});
|
||||
const mapContainerRef = useRef(null);
|
||||
const mapRef = useRef(null);
|
||||
|
||||
// Viewer hook
|
||||
const {
|
||||
isConnected,
|
||||
isConnecting,
|
||||
error,
|
||||
mainStream,
|
||||
presenterStream,
|
||||
participantStreams,
|
||||
streamInfo,
|
||||
viewerCount,
|
||||
joinRequestStatus,
|
||||
isParticipant,
|
||||
localStream,
|
||||
connect,
|
||||
disconnect,
|
||||
requestToJoin,
|
||||
cancelJoinRequest,
|
||||
leaveAsParticipant,
|
||||
} = useWebRTCViewer({ streamID, userID, username, token });
|
||||
|
||||
// Connect on mount
|
||||
useEffect(() => {
|
||||
connect();
|
||||
return () => {
|
||||
disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Attach main stream
|
||||
useEffect(() => {
|
||||
if (mainVideoRef.current && mainStream) {
|
||||
mainVideoRef.current.srcObject = mainStream;
|
||||
}
|
||||
}, [mainStream]);
|
||||
|
||||
// Attach presenter stream to PiP
|
||||
useEffect(() => {
|
||||
if (presenterVideoRef.current && presenterStream) {
|
||||
presenterVideoRef.current.srcObject = presenterStream;
|
||||
}
|
||||
}, [presenterStream]);
|
||||
|
||||
// Attach local stream when participating
|
||||
useEffect(() => {
|
||||
if (localVideoRef.current && localStream) {
|
||||
localVideoRef.current.srcObject = localStream;
|
||||
}
|
||||
}, [localStream]);
|
||||
|
||||
// Attach participant streams
|
||||
useEffect(() => {
|
||||
participantStreams.forEach((p) => {
|
||||
const ref = participantRefs.current[p.userID];
|
||||
if (ref && p.stream) {
|
||||
ref.srcObject = p.stream;
|
||||
}
|
||||
});
|
||||
}, [participantStreams]);
|
||||
|
||||
// Initialize mini map
|
||||
useEffect(() => {
|
||||
if (!mapContainerRef.current) return;
|
||||
if (mapRef.current) return;
|
||||
|
||||
const lat = streamData?.lat || streamInfo?.lat;
|
||||
const lng = streamData?.lon || streamInfo?.lon;
|
||||
|
||||
if (!lat || !lng) return;
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
container: mapContainerRef.current,
|
||||
style: `https://api.maptiler.com/maps/streets-v2-dark/style.json?key=${MAPTILER_KEY}`,
|
||||
center: [lng, lat],
|
||||
zoom: 12,
|
||||
attributionControl: false,
|
||||
interactive: false,
|
||||
});
|
||||
|
||||
// Add marker
|
||||
const el = document.createElement("div");
|
||||
el.className = "sw-live-marker";
|
||||
el.innerHTML = `<i class="fa-solid fa-broadcast-tower"></i>`;
|
||||
|
||||
new maplibregl.Marker({ element: el }).setLngLat([lng, lat]).addTo(map);
|
||||
|
||||
mapRef.current = map;
|
||||
|
||||
return () => {
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
};
|
||||
}, [streamData, streamInfo]);
|
||||
|
||||
const handleShare = useCallback(() => {
|
||||
const shareUrl = `${window.location.origin}/live/${streamID}`;
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: streamInfo?.title || "Live Stream",
|
||||
text: "Watch this live stream!",
|
||||
url: shareUrl,
|
||||
}).catch(() => {});
|
||||
} else if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(shareUrl);
|
||||
// Could show toast here
|
||||
}
|
||||
}, [streamID, streamInfo]);
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
disconnect();
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
disconnect();
|
||||
onClose?.();
|
||||
};
|
||||
|
||||
const info = streamInfo || streamData || {};
|
||||
|
||||
return (
|
||||
<div className="sw-viewer-modal" onClick={handleBackdropClick}>
|
||||
<div className="sw-viewer-container">
|
||||
{/* Header */}
|
||||
<div className="sw-viewer-header">
|
||||
<div className="sw-viewer-header-left">
|
||||
<div className="sw-viewer-live-badge">
|
||||
<span className="sw-viewer-dot" />
|
||||
<span>LIVE</span>
|
||||
</div>
|
||||
<span className="sw-viewer-title">{info.title || "Live Stream"}</span>
|
||||
</div>
|
||||
<div className="sw-viewer-header-right">
|
||||
<span className="sw-viewer-count">
|
||||
<i className="fa-solid fa-eye" /> {viewerCount}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-close"
|
||||
onClick={handleClose}
|
||||
aria-label="Close"
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="sw-viewer-content">
|
||||
{/* Video area */}
|
||||
<div className="sw-viewer-video-area">
|
||||
{/* Main video */}
|
||||
<div className="sw-viewer-main-video">
|
||||
{isConnecting ? (
|
||||
<div className="sw-viewer-video-placeholder">
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Connecting...</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="sw-viewer-video-placeholder error">
|
||||
<i className="fa-solid fa-exclamation-triangle" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
) : mainStream ? (
|
||||
<video
|
||||
ref={mainVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
className="sw-viewer-video"
|
||||
/>
|
||||
) : (
|
||||
<div className="sw-viewer-video-placeholder">
|
||||
<i className="fa-solid fa-video" />
|
||||
<span>Waiting for stream...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Presenter PiP */}
|
||||
{presenterStream && (
|
||||
<div className="sw-viewer-pip">
|
||||
<video
|
||||
ref={presenterVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="sw-viewer-pip-video"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Participant strip */}
|
||||
{participantStreams.length > 0 && (
|
||||
<div className="sw-viewer-participants-strip">
|
||||
{participantStreams.map((p) => (
|
||||
<div key={p.userID} className="sw-viewer-participant">
|
||||
<video
|
||||
ref={(el) => {
|
||||
participantRefs.current[p.userID] = el;
|
||||
}}
|
||||
autoPlay
|
||||
playsInline
|
||||
className="sw-viewer-participant-video"
|
||||
/>
|
||||
<div className="sw-viewer-participant-name">{p.username}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Self view when participating */}
|
||||
{isParticipant && localStream && (
|
||||
<div className="sw-viewer-self-pip">
|
||||
<video
|
||||
ref={localVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="sw-viewer-pip-video"
|
||||
/>
|
||||
<div className="sw-viewer-pip-label">You</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="sw-viewer-side">
|
||||
{/* Stream info */}
|
||||
<div className="sw-viewer-info">
|
||||
<div className="sw-viewer-host">
|
||||
<i className="fa-solid fa-user" />
|
||||
<span>{info.broadcaster_name || "Host"}</span>
|
||||
</div>
|
||||
{info.title && <p className="sw-viewer-description">{info.title}</p>}
|
||||
</div>
|
||||
|
||||
{/* Mini map */}
|
||||
<div ref={mapContainerRef} className="sw-viewer-map" />
|
||||
|
||||
{/* Join section */}
|
||||
{authenticated && !isParticipant && (
|
||||
<div className="sw-viewer-join-section">
|
||||
{joinRequestStatus === null && (
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-btn primary"
|
||||
onClick={requestToJoin}
|
||||
>
|
||||
<i className="fa-solid fa-hand" />
|
||||
<span>Request to Join</span>
|
||||
</button>
|
||||
)}
|
||||
{joinRequestStatus === "pending" && (
|
||||
<div className="sw-viewer-join-pending">
|
||||
<i className="fa-solid fa-clock" />
|
||||
<span>Waiting for host approval...</span>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-btn-small"
|
||||
onClick={cancelJoinRequest}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{joinRequestStatus === "denied" && (
|
||||
<div className="sw-viewer-join-denied">
|
||||
<i className="fa-solid fa-times-circle" />
|
||||
<span>Join request denied</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Leave participant button */}
|
||||
{isParticipant && (
|
||||
<div className="sw-viewer-participant-controls">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-btn danger"
|
||||
onClick={leaveAsParticipant}
|
||||
>
|
||||
<i className="fa-solid fa-sign-out-alt" />
|
||||
<span>Leave as Participant</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="sw-viewer-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-action-btn"
|
||||
onClick={handleShare}
|
||||
>
|
||||
<i className="fa-solid fa-share-nodes" />
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import "./Live.css";
|
||||
|
||||
const MAPTILER_KEY = "DvwhzlPmC55ZK28nLtXL";
|
||||
|
||||
function formatRegionLabel(region) {
|
||||
if (!region) return "Unknown";
|
||||
return region.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
export default function VideoModal({ camera, onClose }) {
|
||||
const mapContainerRef = useRef(null);
|
||||
const mapRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!camera) return;
|
||||
|
||||
// Escape key handler
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === "Escape") {
|
||||
onClose && onClose();
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [camera, onClose]);
|
||||
|
||||
// Initialize mini map in modal
|
||||
useEffect(() => {
|
||||
if (!mapContainerRef.current || !camera) return;
|
||||
if (mapRef.current) return;
|
||||
|
||||
const lng = Number(camera.lng);
|
||||
const lat = Number(camera.lat);
|
||||
if (!Number.isFinite(lng) || !Number.isFinite(lat)) return;
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
container: mapContainerRef.current,
|
||||
style: `https://api.maptiler.com/maps/streets-v2-dark/style.json?key=${MAPTILER_KEY}`,
|
||||
center: [lng, lat],
|
||||
zoom: 12,
|
||||
attributionControl: false,
|
||||
interactive: true,
|
||||
});
|
||||
|
||||
// Add marker for camera
|
||||
const el = document.createElement("div");
|
||||
el.className = "sw-camera-marker is-selected";
|
||||
el.innerHTML = `<i class="fa-solid fa-video"></i>`;
|
||||
|
||||
new maplibregl.Marker({ element: el }).setLngLat([lng, lat]).addTo(map);
|
||||
|
||||
mapRef.current = map;
|
||||
|
||||
return () => {
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
};
|
||||
}, [camera]);
|
||||
|
||||
if (!camera) return null;
|
||||
|
||||
const name = camera.name_fr || camera.name_en || "Camera";
|
||||
const region = formatRegionLabel(camera.region);
|
||||
const route = camera.route || "";
|
||||
const embedUrl = camera.embed_url || "";
|
||||
const videoUrl = camera.video_url || "";
|
||||
const lat = camera.lat;
|
||||
const lng = camera.lng;
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose && onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const handleShare = () => {
|
||||
const shareUrl = embedUrl || videoUrl || "";
|
||||
if (navigator.share) {
|
||||
navigator.share({ title: name, text: `Live camera: ${name}`, url: shareUrl }).catch(() => {});
|
||||
} else if (navigator.clipboard && shareUrl) {
|
||||
navigator.clipboard.writeText(shareUrl);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenExternal = () => {
|
||||
const url = embedUrl || videoUrl;
|
||||
if (url) {
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sw-video-modal-backdrop" onClick={handleBackdropClick}>
|
||||
<div className="sw-video-modal">
|
||||
{/* Header */}
|
||||
<div className="sw-video-modal-header">
|
||||
<div className="sw-video-modal-avatar">
|
||||
<i className="fa-solid fa-video" />
|
||||
</div>
|
||||
<div className="sw-video-modal-meta">
|
||||
<div className="sw-video-modal-title">{name}</div>
|
||||
<div className="sw-video-modal-subtitle">
|
||||
{region}
|
||||
{route ? ` • Route ${route}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<div className="sw-video-modal-live-badge">
|
||||
<span className="sw-camera-dot" />
|
||||
<span>LIVE</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-video-modal-close"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Video Player */}
|
||||
<div className="sw-video-modal-content">
|
||||
<div className="sw-video-player">
|
||||
{embedUrl ? (
|
||||
<iframe
|
||||
src={embedUrl}
|
||||
title={name}
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
/>
|
||||
) : videoUrl ? (
|
||||
<video
|
||||
src={videoUrl}
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
controls
|
||||
style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
|
||||
/>
|
||||
) : (
|
||||
<div className="sw-video-player-fallback">
|
||||
<i className="fa-solid fa-video-slash" />
|
||||
<span>Stream unavailable</span>
|
||||
{camera.video_url && (
|
||||
<a
|
||||
href={camera.video_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Open direct link
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Location Info with Mini Map */}
|
||||
<div className="sw-video-modal-info">
|
||||
<div className="sw-video-modal-location">
|
||||
<i className="fa-solid fa-map-marker-alt" />
|
||||
<span>{region}</span>
|
||||
{lat && lng && (
|
||||
<span style={{ opacity: 0.7, fontSize: "0.75rem" }}>
|
||||
({Number(lat).toFixed(4)}, {Number(lng).toFixed(4)})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div ref={mapContainerRef} className="sw-video-modal-map" />
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="sw-video-modal-actions">
|
||||
<button type="button" className="sw-wall-btn" onClick={handleShare}>
|
||||
<i className="fa-solid fa-share-nodes" /> Share
|
||||
</button>
|
||||
<button type="button" className="sw-wall-btn" onClick={handleOpenExternal}>
|
||||
<i className="fa-solid fa-external-link" /> Open External
|
||||
</button>
|
||||
{camera.video_url && (
|
||||
<a
|
||||
href={camera.video_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="sw-wall-btn"
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
<i className="fa-solid fa-link" /> Direct Stream
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
export { default as CameraMiniMap } from "./CameraMiniMap";
|
||||
export { default as CameraCard } from "./CameraCard";
|
||||
export { default as VideoModal } from "./VideoModal";
|
||||
export { default as LiveBroadcastModal } from "./LiveBroadcastModal";
|
||||
export { default as LiveKitBroadcast } from "./LiveKitBroadcast";
|
||||
export { default as LiveKitViewerModal } from "./LiveKitViewerModal";
|
||||
export { default as LiveViewerModal } from "./LiveViewerModal";
|
||||
export { useDualCamera } from "./useDualCamera";
|
||||
export { useWebRTCBroadcast } from "./useWebRTCBroadcast";
|
||||
export { useWebRTCViewer } from "./useWebRTCViewer";
|
||||
export { useLiveKit } from "./useLiveKit";
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
|
||||
// Remote debug logger - temporary
|
||||
const remoteLog = async (level, ...args) => {
|
||||
const msg = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
|
||||
console[level](...args);
|
||||
try {
|
||||
await fetch('/api/debug-log', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ level, msg, ts: new Date().toISOString(), src: 'camera' })
|
||||
}).catch(() => {});
|
||||
} catch {}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hook for managing camera stream with swap capability
|
||||
* Most mobile devices can't open both cameras simultaneously,
|
||||
* so we open one at a time and swap on demand.
|
||||
*/
|
||||
export function useDualCamera() {
|
||||
const [mainStream, setMainStream] = useState(null);
|
||||
const [selfStream, setSelfStream] = useState(null); // Always null on mobile (no simultaneous dual cam)
|
||||
const [isSwapped, setIsSwapped] = useState(false); // false = front camera, true = back camera
|
||||
const [error, setError] = useState(null);
|
||||
const [isStarting, setIsStarting] = useState(false);
|
||||
const [isSwapping, setIsSwapping] = useState(false);
|
||||
const [permissions, setPermissions] = useState({ video: false, audio: false });
|
||||
const [canSwap, setCanSwap] = useState(false); // True if we detected 2 cameras
|
||||
|
||||
// Track available camera device IDs
|
||||
const frontDeviceIdRef = useRef(null);
|
||||
const backDeviceIdRef = useRef(null);
|
||||
const currentStreamRef = useRef(null);
|
||||
const audioStreamRef = useRef(null); // Keep audio separate so we don't lose it on swap
|
||||
|
||||
const checkPermissions = useCallback(async () => {
|
||||
try {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const hasVideo = devices.some((d) => d.kind === "videoinput");
|
||||
const hasAudio = devices.some((d) => d.kind === "audioinput");
|
||||
setPermissions({ video: hasVideo, audio: hasAudio });
|
||||
return { video: hasVideo, audio: hasAudio };
|
||||
} catch (err) {
|
||||
console.error("[useDualCamera] Permission check failed:", err);
|
||||
return { video: false, audio: false };
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Track both streams for dual camera mode (when device supports it)
|
||||
const frontStreamRef = useRef(null);
|
||||
const backStreamRef = useRef(null);
|
||||
|
||||
const startCameras = useCallback(async () => {
|
||||
if (isStarting) return;
|
||||
setIsStarting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// First request any camera to get permissions (labels are empty until permission granted)
|
||||
const tempStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
|
||||
tempStream.getTracks().forEach(t => t.stop());
|
||||
|
||||
// Small delay after releasing temp stream
|
||||
await new Promise(r => setTimeout(r, 300));
|
||||
|
||||
// Now list available cameras with labels
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const videoDevices = devices.filter((d) => d.kind === "videoinput");
|
||||
remoteLog("log", "[useDualCamera] Available cameras:", videoDevices.map(d => ({
|
||||
id: d.deviceId?.slice(0,8),
|
||||
label: d.label,
|
||||
})));
|
||||
|
||||
// Try to identify front vs back by label
|
||||
for (const device of videoDevices) {
|
||||
const label = (device.label || "").toLowerCase();
|
||||
if (label.includes("front") || label.includes("user") || label.includes("selfie")) {
|
||||
frontDeviceIdRef.current = device.deviceId;
|
||||
} else if (label.includes("back") || label.includes("rear") || label.includes("environment")) {
|
||||
backDeviceIdRef.current = device.deviceId;
|
||||
}
|
||||
}
|
||||
|
||||
// If we couldn't identify by label, use first two devices
|
||||
if (!frontDeviceIdRef.current && !backDeviceIdRef.current && videoDevices.length >= 2) {
|
||||
frontDeviceIdRef.current = videoDevices[0].deviceId;
|
||||
backDeviceIdRef.current = videoDevices[1].deviceId;
|
||||
} else if (!frontDeviceIdRef.current && videoDevices.length >= 1) {
|
||||
frontDeviceIdRef.current = videoDevices[0].deviceId;
|
||||
}
|
||||
|
||||
const hasTwoCameras = !!(frontDeviceIdRef.current && backDeviceIdRef.current);
|
||||
setCanSwap(hasTwoCameras);
|
||||
|
||||
remoteLog("log", "[useDualCamera] Detected devices:", {
|
||||
front: frontDeviceIdRef.current?.slice(0,8),
|
||||
back: backDeviceIdRef.current?.slice(0,8),
|
||||
hasTwoCameras
|
||||
});
|
||||
|
||||
// Open FRONT camera first (main view with audio)
|
||||
remoteLog("log", "[useDualCamera] Opening front camera...");
|
||||
const frontStream = await navigator.mediaDevices.getUserMedia({
|
||||
video: frontDeviceIdRef.current
|
||||
? { deviceId: { exact: frontDeviceIdRef.current }, width: { ideal: 1280 }, height: { ideal: 720 } }
|
||||
: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } },
|
||||
audio: true,
|
||||
});
|
||||
frontStreamRef.current = frontStream;
|
||||
currentStreamRef.current = frontStream;
|
||||
audioStreamRef.current = frontStream; // Audio comes from this stream
|
||||
|
||||
const frontTrack = frontStream.getVideoTracks()[0];
|
||||
remoteLog("log", "[useDualCamera] Front camera opened:", frontTrack?.label);
|
||||
|
||||
// Try to open BACK camera simultaneously (for PiP on devices that support it)
|
||||
let backStream = null;
|
||||
if (hasTwoCameras) {
|
||||
await new Promise(r => setTimeout(r, 500));
|
||||
|
||||
try {
|
||||
remoteLog("log", "[useDualCamera] Trying to open back camera simultaneously...");
|
||||
backStream = await navigator.mediaDevices.getUserMedia({
|
||||
video: backDeviceIdRef.current
|
||||
? { deviceId: { exact: backDeviceIdRef.current }, width: { ideal: 640 }, height: { ideal: 480 } }
|
||||
: { facingMode: { exact: "environment" }, width: { ideal: 640 }, height: { ideal: 480 } },
|
||||
audio: false,
|
||||
});
|
||||
backStreamRef.current = backStream;
|
||||
const backTrack = backStream.getVideoTracks()[0];
|
||||
remoteLog("log", "[useDualCamera] Back camera opened (dual mode):", backTrack?.label);
|
||||
} catch (backErr) {
|
||||
remoteLog("warn", "[useDualCamera] Back camera failed (single cam mode):", backErr.name, backErr.message);
|
||||
// Device doesn't support dual cameras - that's ok, we'll swap on demand
|
||||
}
|
||||
}
|
||||
|
||||
setMainStream(frontStream);
|
||||
setSelfStream(backStream);
|
||||
setIsSwapped(false);
|
||||
setPermissions({ video: true, audio: true });
|
||||
|
||||
remoteLog("log", "[useDualCamera] Cameras started:", {
|
||||
front: !!frontStream,
|
||||
back: !!backStream,
|
||||
canSwap: hasTwoCameras
|
||||
});
|
||||
} catch (err) {
|
||||
remoteLog("error", "[useDualCamera] Failed to start cameras:", err.name, err.message);
|
||||
setError(err.message || "Failed to access camera");
|
||||
|
||||
if (err.name === "NotAllowedError") {
|
||||
setError("Camera permission denied. Please allow camera access.");
|
||||
} else if (err.name === "NotFoundError") {
|
||||
setError("No camera found on this device.");
|
||||
} else if (err.name === "NotReadableError") {
|
||||
setError("Camera is already in use by another app.");
|
||||
} else if (err.name === "OverconstrainedError") {
|
||||
setError("Camera constraints not supported. Try again.");
|
||||
}
|
||||
} finally {
|
||||
setIsStarting(false);
|
||||
}
|
||||
}, [isStarting]);
|
||||
|
||||
// Swap cameras - works in both dual and single camera modes
|
||||
const swapCameras = useCallback(async () => {
|
||||
if (!canSwap || isSwapping) {
|
||||
remoteLog("warn", "[useDualCamera] Cannot swap - no second camera or already swapping");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if we have both streams open (dual camera mode)
|
||||
if (frontStreamRef.current && backStreamRef.current) {
|
||||
// Dual camera mode - just swap the streams
|
||||
setIsSwapped((prev) => {
|
||||
const newSwapped = !prev;
|
||||
remoteLog("log", "[useDualCamera] Swapping streams (dual mode), newSwapped:", newSwapped);
|
||||
|
||||
if (newSwapped) {
|
||||
setMainStream(backStreamRef.current);
|
||||
setSelfStream(frontStreamRef.current);
|
||||
currentStreamRef.current = backStreamRef.current;
|
||||
} else {
|
||||
setMainStream(frontStreamRef.current);
|
||||
setSelfStream(backStreamRef.current);
|
||||
currentStreamRef.current = frontStreamRef.current;
|
||||
}
|
||||
|
||||
return newSwapped;
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Single camera mode - close current and open other
|
||||
setIsSwapping(true);
|
||||
const newSwapped = !isSwapped;
|
||||
remoteLog("log", "[useDualCamera] Swapping cameras (single mode), switching to:", newSwapped ? "back" : "front");
|
||||
|
||||
try {
|
||||
// Stop current video track (keep audio)
|
||||
const currentStream = currentStreamRef.current;
|
||||
if (currentStream) {
|
||||
currentStream.getVideoTracks().forEach(t => t.stop());
|
||||
}
|
||||
|
||||
// Open the other camera
|
||||
const targetDeviceId = newSwapped ? backDeviceIdRef.current : frontDeviceIdRef.current;
|
||||
const facingMode = newSwapped ? "environment" : "user";
|
||||
|
||||
remoteLog("log", "[useDualCamera] Opening camera:", { targetDeviceId: targetDeviceId?.slice(0,8), facingMode });
|
||||
|
||||
const newStream = await navigator.mediaDevices.getUserMedia({
|
||||
video: targetDeviceId
|
||||
? { deviceId: { exact: targetDeviceId }, width: { ideal: 1280 }, height: { ideal: 720 } }
|
||||
: { facingMode: { exact: facingMode }, width: { ideal: 1280 }, height: { ideal: 720 } },
|
||||
audio: false, // Don't request audio again
|
||||
});
|
||||
|
||||
// Create a combined stream with new video + existing audio
|
||||
const audioTrack = audioStreamRef.current?.getAudioTracks()[0];
|
||||
const combinedStream = new MediaStream();
|
||||
newStream.getVideoTracks().forEach(t => combinedStream.addTrack(t));
|
||||
if (audioTrack) {
|
||||
combinedStream.addTrack(audioTrack);
|
||||
}
|
||||
|
||||
// Update refs
|
||||
if (newSwapped) {
|
||||
if (frontStreamRef.current) {
|
||||
frontStreamRef.current.getVideoTracks().forEach(t => t.stop());
|
||||
}
|
||||
backStreamRef.current = newStream;
|
||||
frontStreamRef.current = null;
|
||||
} else {
|
||||
if (backStreamRef.current) {
|
||||
backStreamRef.current.getVideoTracks().forEach(t => t.stop());
|
||||
}
|
||||
frontStreamRef.current = newStream;
|
||||
backStreamRef.current = null;
|
||||
}
|
||||
|
||||
currentStreamRef.current = combinedStream;
|
||||
setMainStream(combinedStream);
|
||||
setSelfStream(null); // No PiP in single camera mode
|
||||
setIsSwapped(newSwapped);
|
||||
|
||||
const newTrack = newStream.getVideoTracks()[0];
|
||||
remoteLog("log", "[useDualCamera] Camera swapped to:", newTrack?.label);
|
||||
|
||||
} catch (err) {
|
||||
remoteLog("error", "[useDualCamera] Failed to swap cameras:", err.name, err.message);
|
||||
setError("Failed to swap cameras: " + err.message);
|
||||
} finally {
|
||||
setIsSwapping(false);
|
||||
}
|
||||
}, [canSwap, isSwapped, isSwapping]);
|
||||
|
||||
const stopCameras = useCallback(() => {
|
||||
if (frontStreamRef.current) {
|
||||
frontStreamRef.current.getTracks().forEach(t => t.stop());
|
||||
frontStreamRef.current = null;
|
||||
}
|
||||
if (backStreamRef.current) {
|
||||
backStreamRef.current.getTracks().forEach(t => t.stop());
|
||||
backStreamRef.current = null;
|
||||
}
|
||||
if (audioStreamRef.current && audioStreamRef.current !== frontStreamRef.current) {
|
||||
audioStreamRef.current.getTracks().forEach(t => t.stop());
|
||||
}
|
||||
audioStreamRef.current = null;
|
||||
currentStreamRef.current = null;
|
||||
frontDeviceIdRef.current = null;
|
||||
backDeviceIdRef.current = null;
|
||||
|
||||
setMainStream(null);
|
||||
setSelfStream(null);
|
||||
setIsSwapped(false);
|
||||
setError(null);
|
||||
setCanSwap(false);
|
||||
|
||||
remoteLog("log", "[useDualCamera] Cameras stopped");
|
||||
}, []);
|
||||
|
||||
// Mute/unmute audio
|
||||
const toggleAudio = useCallback((muted) => {
|
||||
const stream = audioStreamRef.current;
|
||||
if (stream) {
|
||||
stream.getAudioTracks().forEach((track) => {
|
||||
track.enabled = !muted;
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Enable/disable video
|
||||
const toggleVideo = useCallback((disabled) => {
|
||||
const stream = currentStreamRef.current;
|
||||
if (stream) {
|
||||
stream.getVideoTracks().forEach((track) => {
|
||||
track.enabled = !disabled;
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
stopCameras();
|
||||
};
|
||||
}, [stopCameras]);
|
||||
|
||||
return {
|
||||
mainStream,
|
||||
selfStream,
|
||||
isSwapped,
|
||||
error,
|
||||
isStarting,
|
||||
isSwapping,
|
||||
permissions,
|
||||
hasDualCameras: canSwap, // Can we swap between cameras?
|
||||
startCameras,
|
||||
swapCameras,
|
||||
stopCameras,
|
||||
toggleAudio,
|
||||
toggleVideo,
|
||||
checkPermissions,
|
||||
};
|
||||
}
|
||||
|
||||
export default useDualCamera;
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import {
|
||||
Room,
|
||||
RoomEvent,
|
||||
VideoPresets,
|
||||
createLocalVideoTrack,
|
||||
createLocalAudioTrack,
|
||||
} from "livekit-client";
|
||||
|
||||
const LIVEKIT_URL = "wss://live.us1.sociowire.com";
|
||||
const LIVEKIT_API = "https://live.us1.sociowire.com";
|
||||
|
||||
/**
|
||||
* Hook for LiveKit-based live streaming
|
||||
* Much more reliable than raw WebRTC - handles TURN/ICE automatically
|
||||
*/
|
||||
export function useLiveKit({ roomName, userID, username, token: authToken }) {
|
||||
const [isLive, setIsLive] = useState(false);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [viewerCount, setViewerCount] = useState(0);
|
||||
const [participants, setParticipants] = useState([]);
|
||||
|
||||
const roomRef = useRef(null);
|
||||
const localVideoTrackRef = useRef(null);
|
||||
const localAudioTrackRef = useRef(null);
|
||||
|
||||
// Get LiveKit token from backend
|
||||
const getToken = useCallback(async (isHost = true) => {
|
||||
try {
|
||||
const res = await fetch(`${LIVEKIT_API}/api/livekit/token`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
room: roomName,
|
||||
identity: userID,
|
||||
name: username,
|
||||
canPublish: isHost,
|
||||
canSubscribe: true,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to get LiveKit token");
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
return data.token;
|
||||
} catch (err) {
|
||||
console.error("[LiveKit] Token error:", err);
|
||||
throw err;
|
||||
}
|
||||
}, [roomName, userID, username, authToken]);
|
||||
|
||||
// Start broadcasting
|
||||
const startBroadcast = useCallback(async (videoTrack, audioEnabled = true) => {
|
||||
if (isConnecting || isLive) return;
|
||||
|
||||
setIsConnecting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Get token
|
||||
const token = await getToken(true);
|
||||
|
||||
// Create room
|
||||
const room = new Room({
|
||||
adaptiveStream: true,
|
||||
dynacast: true,
|
||||
videoCaptureDefaults: {
|
||||
resolution: VideoPresets.h720.resolution,
|
||||
},
|
||||
});
|
||||
|
||||
// Set up event handlers
|
||||
room.on(RoomEvent.ParticipantConnected, (participant) => {
|
||||
console.log("[LiveKit] Participant joined:", participant.identity);
|
||||
setParticipants((prev) => [
|
||||
...prev.filter((p) => p.identity !== participant.identity),
|
||||
{
|
||||
identity: participant.identity,
|
||||
name: participant.name || participant.identity,
|
||||
},
|
||||
]);
|
||||
setViewerCount((prev) => prev + 1);
|
||||
});
|
||||
|
||||
room.on(RoomEvent.ParticipantDisconnected, (participant) => {
|
||||
console.log("[LiveKit] Participant left:", participant.identity);
|
||||
setParticipants((prev) =>
|
||||
prev.filter((p) => p.identity !== participant.identity)
|
||||
);
|
||||
setViewerCount((prev) => Math.max(0, prev - 1));
|
||||
});
|
||||
|
||||
room.on(RoomEvent.Disconnected, () => {
|
||||
console.log("[LiveKit] Disconnected from room");
|
||||
setIsLive(false);
|
||||
});
|
||||
|
||||
room.on(RoomEvent.Reconnecting, () => {
|
||||
console.log("[LiveKit] Reconnecting...");
|
||||
});
|
||||
|
||||
room.on(RoomEvent.Reconnected, () => {
|
||||
console.log("[LiveKit] Reconnected");
|
||||
});
|
||||
|
||||
// Connect to room
|
||||
await room.connect(LIVEKIT_URL, token);
|
||||
console.log("[LiveKit] Connected to room:", room.name);
|
||||
|
||||
// Create and publish video track from provided stream
|
||||
if (videoTrack) {
|
||||
// If a MediaStreamTrack is provided, use it
|
||||
const track = videoTrack instanceof MediaStreamTrack
|
||||
? videoTrack
|
||||
: videoTrack.getVideoTracks()[0];
|
||||
|
||||
if (track) {
|
||||
await room.localParticipant.publishTrack(track, {
|
||||
name: "camera",
|
||||
simulcast: true,
|
||||
videoCodec: "vp8",
|
||||
});
|
||||
localVideoTrackRef.current = track;
|
||||
}
|
||||
} else {
|
||||
// Create default camera track
|
||||
const videoTrack = await createLocalVideoTrack({
|
||||
facingMode: "user",
|
||||
resolution: VideoPresets.h720.resolution,
|
||||
});
|
||||
await room.localParticipant.publishTrack(videoTrack);
|
||||
localVideoTrackRef.current = videoTrack;
|
||||
}
|
||||
|
||||
// Create and publish audio track
|
||||
if (audioEnabled) {
|
||||
const audioTrack = await createLocalAudioTrack();
|
||||
await room.localParticipant.publishTrack(audioTrack);
|
||||
localAudioTrackRef.current = audioTrack;
|
||||
}
|
||||
|
||||
roomRef.current = room;
|
||||
setIsLive(true);
|
||||
console.log("[LiveKit] Broadcasting started");
|
||||
} catch (err) {
|
||||
console.error("[LiveKit] Failed to start broadcast:", err);
|
||||
setError(err.message || "Failed to start broadcast");
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
}, [isConnecting, isLive, getToken]);
|
||||
|
||||
// Stop broadcasting
|
||||
const stopBroadcast = useCallback(async () => {
|
||||
if (roomRef.current) {
|
||||
// Unpublish tracks
|
||||
if (localVideoTrackRef.current) {
|
||||
roomRef.current.localParticipant.unpublishTrack(localVideoTrackRef.current);
|
||||
localVideoTrackRef.current.stop();
|
||||
localVideoTrackRef.current = null;
|
||||
}
|
||||
if (localAudioTrackRef.current) {
|
||||
roomRef.current.localParticipant.unpublishTrack(localAudioTrackRef.current);
|
||||
localAudioTrackRef.current.stop();
|
||||
localAudioTrackRef.current = null;
|
||||
}
|
||||
|
||||
// Disconnect from room
|
||||
await roomRef.current.disconnect();
|
||||
roomRef.current = null;
|
||||
}
|
||||
|
||||
setIsLive(false);
|
||||
setViewerCount(0);
|
||||
setParticipants([]);
|
||||
console.log("[LiveKit] Broadcast stopped");
|
||||
}, []);
|
||||
|
||||
// Toggle audio
|
||||
const toggleAudio = useCallback((muted) => {
|
||||
if (localAudioTrackRef.current) {
|
||||
localAudioTrackRef.current.enabled = !muted;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Toggle video
|
||||
const toggleVideo = useCallback((disabled) => {
|
||||
if (localVideoTrackRef.current) {
|
||||
localVideoTrackRef.current.enabled = !disabled;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (roomRef.current) {
|
||||
roomRef.current.disconnect();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isLive,
|
||||
isConnecting,
|
||||
error,
|
||||
viewerCount,
|
||||
participants,
|
||||
startBroadcast,
|
||||
stopBroadcast,
|
||||
toggleAudio,
|
||||
toggleVideo,
|
||||
room: roomRef.current,
|
||||
};
|
||||
}
|
||||
|
||||
export default useLiveKit;
|
||||
|
|
@ -0,0 +1,537 @@
|
|||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
|
||||
const STREAM_SERVER = "https://stream.sociowire.com";
|
||||
const API_BASE = (import.meta?.env?.VITE_API_BASE_URL || "").replace(/\/+$/, "");
|
||||
|
||||
// Remote debug logger - temporary
|
||||
const remoteLog = async (level, ...args) => {
|
||||
const msg = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
|
||||
console[level](...args);
|
||||
try {
|
||||
await fetch('/api/debug-log', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ level, msg, ts: new Date().toISOString(), src: 'broadcast' })
|
||||
}).catch(() => {});
|
||||
} catch {}
|
||||
};
|
||||
const ICE_SERVERS = [
|
||||
{ urls: "stun:stun.l.google.com:19302" },
|
||||
{
|
||||
urls: "turns:turn.us2.sociowire.com:443",
|
||||
username: "sociowire",
|
||||
credential: "sociowire123",
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Hook for WebRTC broadcasting with multi-participant support
|
||||
*/
|
||||
export function useWebRTCBroadcast({ streamID, userID, username, token }) {
|
||||
const [isLive, setIsLive] = useState(false);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [viewerCount, setViewerCount] = useState(0);
|
||||
const [participants, setParticipants] = useState([]); // Other participants
|
||||
const [joinRequests, setJoinRequests] = useState([]); // Pending join requests
|
||||
|
||||
const pcRef = useRef(null);
|
||||
const wsRef = useRef(null);
|
||||
const participantPCsRef = useRef(new Map()); // userID -> PeerConnection for each participant
|
||||
|
||||
// Connect to WebSocket for real-time events
|
||||
const connectEventSocket = useCallback(() => {
|
||||
if (!streamID) return;
|
||||
|
||||
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
const wsUrl = `${protocol}://stream.sociowire.com/api/streams/${streamID}/events`;
|
||||
|
||||
try {
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log("[Broadcast] Event socket connected");
|
||||
// Authenticate
|
||||
ws.send(JSON.stringify({ type: "auth", token, userID, role: "host" }));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const msg = JSON.parse(event.data);
|
||||
handleEventMessage(msg);
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to parse event:", err);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log("[Broadcast] Event socket closed");
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error("[Broadcast] Event socket error:", err);
|
||||
};
|
||||
|
||||
wsRef.current = ws;
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to connect event socket:", err);
|
||||
}
|
||||
}, [streamID, token, userID]);
|
||||
|
||||
const handleEventMessage = useCallback((msg) => {
|
||||
switch (msg.type) {
|
||||
case "viewer_count":
|
||||
setViewerCount(msg.count || 0);
|
||||
break;
|
||||
|
||||
case "join_request":
|
||||
setJoinRequests((prev) => [
|
||||
...prev.filter((r) => r.userID !== msg.userID),
|
||||
{ userID: msg.userID, username: msg.username, requestedAt: Date.now() },
|
||||
]);
|
||||
break;
|
||||
|
||||
case "join_request_cancelled":
|
||||
setJoinRequests((prev) => prev.filter((r) => r.userID !== msg.userID));
|
||||
break;
|
||||
|
||||
case "participant_joined":
|
||||
// Another user joined as co-host, set up peer connection to receive their stream
|
||||
handleParticipantJoined(msg);
|
||||
break;
|
||||
|
||||
case "participant_left":
|
||||
handleParticipantLeft(msg.userID);
|
||||
break;
|
||||
|
||||
case "participant_offer":
|
||||
// Incoming offer from a participant
|
||||
handleParticipantOffer(msg);
|
||||
break;
|
||||
|
||||
case "participant_ice":
|
||||
// ICE candidate from participant
|
||||
handleParticipantICE(msg);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log("[Broadcast] Unknown event:", msg.type);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleParticipantJoined = useCallback(async (msg) => {
|
||||
const { userID: participantID, username: participantName } = msg;
|
||||
|
||||
// Add to participants list
|
||||
setParticipants((prev) => [
|
||||
...prev.filter((p) => p.userID !== participantID),
|
||||
{ userID: participantID, username: participantName, stream: null },
|
||||
]);
|
||||
|
||||
// Remove from join requests
|
||||
setJoinRequests((prev) => prev.filter((r) => r.userID !== participantID));
|
||||
}, []);
|
||||
|
||||
const handleParticipantLeft = useCallback((participantID) => {
|
||||
setParticipants((prev) => prev.filter((p) => p.userID !== participantID));
|
||||
|
||||
// Close their peer connection
|
||||
const pc = participantPCsRef.current.get(participantID);
|
||||
if (pc) {
|
||||
pc.close();
|
||||
participantPCsRef.current.delete(participantID);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleParticipantOffer = useCallback(async (msg) => {
|
||||
const { userID: participantID, sdp } = msg;
|
||||
|
||||
try {
|
||||
const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
|
||||
|
||||
pc.ontrack = (event) => {
|
||||
// Received participant's video/audio
|
||||
setParticipants((prev) =>
|
||||
prev.map((p) =>
|
||||
p.userID === participantID ? { ...p, stream: event.streams[0] } : p
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
pc.onicecandidate = (event) => {
|
||||
if (event.candidate && wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "ice_candidate",
|
||||
targetUserID: participantID,
|
||||
candidate: event.candidate,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
await pc.setRemoteDescription({ type: "offer", sdp });
|
||||
const answer = await pc.createAnswer();
|
||||
await pc.setLocalDescription(answer);
|
||||
|
||||
participantPCsRef.current.set(participantID, pc);
|
||||
|
||||
// Send answer back via WebSocket
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "participant_answer",
|
||||
targetUserID: participantID,
|
||||
sdp: answer.sdp,
|
||||
})
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to handle participant offer:", err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleParticipantICE = useCallback((msg) => {
|
||||
const { userID: participantID, candidate } = msg;
|
||||
const pc = participantPCsRef.current.get(participantID);
|
||||
if (pc && candidate) {
|
||||
pc.addIceCandidate(new RTCIceCandidate(candidate)).catch((err) => {
|
||||
console.error("[Broadcast] Failed to add ICE candidate:", err);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Start broadcasting
|
||||
const startBroadcast = useCallback(
|
||||
async (mainStream, selfStream, metadata = {}) => {
|
||||
// Synchronous log first to ensure it fires
|
||||
console.log("[Broadcast] startBroadcast ENTRY:", {
|
||||
hasMainStream: !!mainStream,
|
||||
hasSelfStream: !!selfStream,
|
||||
isConnecting,
|
||||
isLive
|
||||
});
|
||||
|
||||
// Remote log (async but fire-and-forget)
|
||||
await remoteLog("log", "[Broadcast] startBroadcast called:", {
|
||||
hasMainStream: !!mainStream,
|
||||
hasSelfStream: !!selfStream,
|
||||
metadata,
|
||||
isConnecting,
|
||||
isLive
|
||||
});
|
||||
|
||||
if (isConnecting || isLive) {
|
||||
remoteLog("warn", "[Broadcast] startBroadcast early return:", { isConnecting, isLive });
|
||||
return;
|
||||
}
|
||||
setIsConnecting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Create stream on server first
|
||||
remoteLog("log", "[Broadcast] Creating stream on server:", STREAM_SERVER);
|
||||
const createRes = await fetch(`${STREAM_SERVER}/api/streams`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: streamID,
|
||||
type: "webrtc",
|
||||
title: metadata.title || "Live Stream",
|
||||
lat: metadata.lat,
|
||||
lon: metadata.lon,
|
||||
broadcaster_id: userID,
|
||||
broadcaster_name: username,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!createRes.ok) {
|
||||
const errData = await createRes.json().catch(() => ({}));
|
||||
remoteLog("error", "[Broadcast] Failed to create stream:", errData);
|
||||
throw new Error(errData.error || "Failed to create stream");
|
||||
}
|
||||
|
||||
remoteLog("log", "[Broadcast] Stream created on server, setting up WebRTC...");
|
||||
|
||||
// Create peer connection
|
||||
const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
|
||||
|
||||
// Add main stream tracks (video + audio)
|
||||
if (mainStream) {
|
||||
mainStream.getTracks().forEach((track) => {
|
||||
pc.addTrack(track, mainStream);
|
||||
});
|
||||
}
|
||||
|
||||
// Add self/presenter stream (video only, labeled)
|
||||
if (selfStream) {
|
||||
selfStream.getVideoTracks().forEach((track) => {
|
||||
const sender = pc.addTrack(track, selfStream);
|
||||
// The server will identify this as the presenter track by stream ID
|
||||
});
|
||||
}
|
||||
|
||||
// Handle ICE candidates
|
||||
pc.onicecandidate = (event) => {
|
||||
if (event.candidate && wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "ice_candidate",
|
||||
candidate: event.candidate,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
pc.onconnectionstatechange = () => {
|
||||
console.log("[Broadcast] Connection state:", pc.connectionState);
|
||||
if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
|
||||
setError("Connection lost");
|
||||
setIsLive(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Create and send offer
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
|
||||
const res = await fetch(
|
||||
`${STREAM_SERVER}/api/webrtc/broadcast/${streamID}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sdp: offer.sdp,
|
||||
userID,
|
||||
username,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
remoteLog("error", "[Broadcast] WebRTC broadcast failed:", errData);
|
||||
throw new Error(errData.error || "Failed to start broadcast");
|
||||
}
|
||||
|
||||
const { sdp: answerSDP } = await res.json();
|
||||
await pc.setRemoteDescription({ type: "answer", sdp: answerSDP });
|
||||
|
||||
pcRef.current = pc;
|
||||
setIsLive(true);
|
||||
|
||||
// Connect event socket for real-time updates
|
||||
connectEventSocket();
|
||||
|
||||
remoteLog("log", "[Broadcast] Started successfully, isLive=true");
|
||||
} catch (err) {
|
||||
remoteLog("error", "[Broadcast] Failed to start:", err.message);
|
||||
setError(err.message || "Failed to start broadcast");
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
},
|
||||
[streamID, userID, username, token, isConnecting, isLive, connectEventSocket]
|
||||
);
|
||||
|
||||
// Store stream metadata for post creation
|
||||
const streamMetaRef = useRef(null);
|
||||
|
||||
const setStreamMeta = useCallback((meta) => {
|
||||
streamMetaRef.current = meta;
|
||||
}, []);
|
||||
|
||||
// Stop broadcasting
|
||||
const stopBroadcast = useCallback(async (saveAsPost = false) => {
|
||||
remoteLog("log", "[Broadcast] stopBroadcast called:", { saveAsPost, hasMeta: !!streamMetaRef.current });
|
||||
// Close peer connection
|
||||
if (pcRef.current) {
|
||||
pcRef.current.close();
|
||||
pcRef.current = null;
|
||||
}
|
||||
|
||||
// Close participant connections
|
||||
participantPCsRef.current.forEach((pc) => pc.close());
|
||||
participantPCsRef.current.clear();
|
||||
|
||||
// Close WebSocket
|
||||
if (wsRef.current) {
|
||||
wsRef.current.close();
|
||||
wsRef.current = null;
|
||||
}
|
||||
|
||||
// Stop recording and get video URL
|
||||
let videoURL = "";
|
||||
try {
|
||||
const stopRes = await fetch(`${STREAM_SERVER}/api/webrtc/stop/${streamID}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
});
|
||||
if (stopRes.ok) {
|
||||
const data = await stopRes.json();
|
||||
videoURL = data.video_url || "";
|
||||
remoteLog("log", "[Broadcast] Recording stopped, video URL:", videoURL);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to stop recording:", err);
|
||||
}
|
||||
|
||||
// If saveAsPost, create a post on the main backend
|
||||
if (saveAsPost && streamMetaRef.current) {
|
||||
const meta = streamMetaRef.current;
|
||||
try {
|
||||
remoteLog("log", "[Broadcast] Creating post with meta:", meta, "API_BASE:", API_BASE, "videoURL:", videoURL);
|
||||
const postData = {
|
||||
title: meta.title || "Live stream",
|
||||
snippet: `Live stream by ${username}`,
|
||||
category: meta.category || "NEWS",
|
||||
sub_category: meta.sub_category || "Local",
|
||||
lat: meta.lat,
|
||||
lon: meta.lon,
|
||||
author: username,
|
||||
source: "sociowire",
|
||||
visibility: "public",
|
||||
video_url: videoURL || undefined, // Include video URL if available
|
||||
};
|
||||
remoteLog("log", "[Broadcast] POST data:", postData);
|
||||
const res = await fetch(`${API_BASE}/api/post`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
if (res.ok) {
|
||||
const post = await res.json();
|
||||
remoteLog("log", "[Broadcast] Created post from live:", post?.id || post);
|
||||
// Dispatch event so MapView can add the post to the map immediately
|
||||
window.dispatchEvent(new CustomEvent('live-post-created', { detail: post }));
|
||||
} else {
|
||||
const errText = await res.text();
|
||||
remoteLog("error", "[Broadcast] Failed to create post:", res.status, errText);
|
||||
}
|
||||
} catch (err) {
|
||||
remoteLog("error", "[Broadcast] Error creating post:", err.message);
|
||||
}
|
||||
}
|
||||
|
||||
setIsLive(false);
|
||||
setViewerCount(0);
|
||||
setParticipants([]);
|
||||
setJoinRequests([]);
|
||||
setError(null);
|
||||
streamMetaRef.current = null;
|
||||
|
||||
console.log("[Broadcast] Stopped");
|
||||
}, [streamID, token, username]);
|
||||
|
||||
// Approve join request
|
||||
const approveJoinRequest = useCallback(
|
||||
async (requestUserID) => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/approve/${requestUserID}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to approve join request");
|
||||
}
|
||||
|
||||
// Will receive participant_joined event via WebSocket
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to approve join:", err);
|
||||
setError(err.message);
|
||||
}
|
||||
},
|
||||
[streamID, token]
|
||||
);
|
||||
|
||||
// Deny join request
|
||||
const denyJoinRequest = useCallback(
|
||||
async (requestUserID) => {
|
||||
try {
|
||||
await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/deny/${requestUserID}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setJoinRequests((prev) => prev.filter((r) => r.userID !== requestUserID));
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to deny join:", err);
|
||||
}
|
||||
},
|
||||
[streamID, token]
|
||||
);
|
||||
|
||||
// Kick participant
|
||||
const kickParticipant = useCallback(
|
||||
async (participantID) => {
|
||||
try {
|
||||
await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/kick/${participantID}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
handleParticipantLeft(participantID);
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to kick participant:", err);
|
||||
}
|
||||
},
|
||||
[streamID, token, handleParticipantLeft]
|
||||
);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (isLive) {
|
||||
stopBroadcast(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isLive,
|
||||
isConnecting,
|
||||
error,
|
||||
viewerCount,
|
||||
participants,
|
||||
joinRequests,
|
||||
startBroadcast,
|
||||
stopBroadcast,
|
||||
setStreamMeta,
|
||||
approveJoinRequest,
|
||||
denyJoinRequest,
|
||||
kickParticipant,
|
||||
};
|
||||
}
|
||||
|
||||
export default useWebRTCBroadcast;
|
||||
|
|
@ -0,0 +1,426 @@
|
|||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
|
||||
const STREAM_SERVER = "https://stream.sociowire.com";
|
||||
const ICE_SERVERS = [
|
||||
{ urls: "stun:stun.l.google.com:19302" },
|
||||
{ urls: "stun:stun1.l.google.com:19302" },
|
||||
];
|
||||
|
||||
/**
|
||||
* Hook for WebRTC viewing with join-as-participant capability
|
||||
*/
|
||||
export function useWebRTCViewer({ streamID, userID, username, token }) {
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
// Video streams received
|
||||
const [mainStream, setMainStream] = useState(null); // Host's main camera
|
||||
const [presenterStream, setPresenterStream] = useState(null); // Host's self-view
|
||||
const [participantStreams, setParticipantStreams] = useState([]); // Other participants
|
||||
|
||||
// Stream metadata
|
||||
const [streamInfo, setStreamInfo] = useState(null);
|
||||
const [viewerCount, setViewerCount] = useState(0);
|
||||
|
||||
// Join request state
|
||||
const [joinRequestStatus, setJoinRequestStatus] = useState(null); // null, 'pending', 'approved', 'denied'
|
||||
const [isParticipant, setIsParticipant] = useState(false);
|
||||
|
||||
const pcRef = useRef(null);
|
||||
const wsRef = useRef(null);
|
||||
const localStreamRef = useRef(null); // Our camera when we join as participant
|
||||
|
||||
// Connect to event WebSocket
|
||||
const connectEventSocket = useCallback(() => {
|
||||
if (!streamID) return;
|
||||
|
||||
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
const wsUrl = `${protocol}://stream.sociowire.com/api/streams/${streamID}/events`;
|
||||
|
||||
try {
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log("[Viewer] Event socket connected");
|
||||
ws.send(JSON.stringify({ type: "auth", token, userID, role: "viewer" }));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const msg = JSON.parse(event.data);
|
||||
handleEventMessage(msg);
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to parse event:", err);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log("[Viewer] Event socket closed");
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error("[Viewer] Event socket error:", err);
|
||||
};
|
||||
|
||||
wsRef.current = ws;
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to connect event socket:", err);
|
||||
}
|
||||
}, [streamID, token, userID]);
|
||||
|
||||
const handleEventMessage = useCallback((msg) => {
|
||||
switch (msg.type) {
|
||||
case "stream_info":
|
||||
setStreamInfo(msg.stream);
|
||||
break;
|
||||
|
||||
case "viewer_count":
|
||||
setViewerCount(msg.count || 0);
|
||||
break;
|
||||
|
||||
case "join_approved":
|
||||
setJoinRequestStatus("approved");
|
||||
// Now we can send our video
|
||||
startParticipating();
|
||||
break;
|
||||
|
||||
case "join_denied":
|
||||
setJoinRequestStatus("denied");
|
||||
break;
|
||||
|
||||
case "participant_joined":
|
||||
handleParticipantJoined(msg);
|
||||
break;
|
||||
|
||||
case "participant_left":
|
||||
handleParticipantLeft(msg.userID);
|
||||
break;
|
||||
|
||||
case "host_answer":
|
||||
// Host sent us an answer for our participant offer
|
||||
handleHostAnswer(msg);
|
||||
break;
|
||||
|
||||
case "host_ice":
|
||||
handleHostICE(msg);
|
||||
break;
|
||||
|
||||
case "stream_ended":
|
||||
setError("Stream has ended");
|
||||
disconnect();
|
||||
break;
|
||||
|
||||
case "kicked":
|
||||
setError("You have been removed from the stream");
|
||||
setIsParticipant(false);
|
||||
stopLocalStream();
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log("[Viewer] Unknown event:", msg.type);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleParticipantJoined = useCallback((msg) => {
|
||||
const { userID: participantID, username: participantName } = msg;
|
||||
|
||||
setParticipantStreams((prev) => [
|
||||
...prev.filter((p) => p.userID !== participantID),
|
||||
{ userID: participantID, username: participantName, stream: null },
|
||||
]);
|
||||
}, []);
|
||||
|
||||
const handleParticipantLeft = useCallback((participantID) => {
|
||||
setParticipantStreams((prev) => prev.filter((p) => p.userID !== participantID));
|
||||
}, []);
|
||||
|
||||
const handleHostAnswer = useCallback(async (msg) => {
|
||||
const { sdp } = msg;
|
||||
if (pcRef.current && sdp) {
|
||||
try {
|
||||
await pcRef.current.setRemoteDescription({ type: "answer", sdp });
|
||||
setIsParticipant(true);
|
||||
console.log("[Viewer] Now participating with video");
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to set host answer:", err);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleHostICE = useCallback((msg) => {
|
||||
const { candidate } = msg;
|
||||
if (pcRef.current && candidate) {
|
||||
pcRef.current.addIceCandidate(new RTCIceCandidate(candidate)).catch((err) => {
|
||||
console.error("[Viewer] Failed to add host ICE candidate:", err);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Connect as viewer (receive only)
|
||||
const connect = useCallback(async () => {
|
||||
if (isConnecting || isConnected) return;
|
||||
setIsConnecting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Get stream info first
|
||||
const infoRes = await fetch(`${STREAM_SERVER}/api/streams/${streamID}`);
|
||||
if (!infoRes.ok) {
|
||||
throw new Error("Stream not found or has ended");
|
||||
}
|
||||
const info = await infoRes.json();
|
||||
setStreamInfo(info);
|
||||
|
||||
// Create peer connection
|
||||
const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
|
||||
|
||||
// We need to add transceivers to receive video/audio
|
||||
pc.addTransceiver("video", { direction: "recvonly" });
|
||||
pc.addTransceiver("video", { direction: "recvonly" }); // For presenter track
|
||||
pc.addTransceiver("audio", { direction: "recvonly" });
|
||||
|
||||
pc.ontrack = (event) => {
|
||||
const track = event.track;
|
||||
const stream = event.streams[0];
|
||||
|
||||
console.log("[Viewer] Received track:", track.kind, stream?.id);
|
||||
|
||||
// Determine which stream this is based on stream ID or order
|
||||
// First video stream is main, second is presenter
|
||||
if (track.kind === "video") {
|
||||
setMainStream((prev) => {
|
||||
if (!prev) return stream;
|
||||
setPresenterStream(stream);
|
||||
return prev;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
pc.onicecandidate = (event) => {
|
||||
if (event.candidate && wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "ice_candidate",
|
||||
candidate: event.candidate,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
pc.onconnectionstatechange = () => {
|
||||
console.log("[Viewer] Connection state:", pc.connectionState);
|
||||
if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
|
||||
setError("Connection lost");
|
||||
setIsConnected(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Create offer
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
|
||||
// Send to server
|
||||
const res = await fetch(`${STREAM_SERVER}/api/webrtc/watch/${streamID}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sdp: offer.sdp,
|
||||
userID,
|
||||
username,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.error || "Failed to connect to stream");
|
||||
}
|
||||
|
||||
const { sdp: answerSDP } = await res.json();
|
||||
await pc.setRemoteDescription({ type: "answer", sdp: answerSDP });
|
||||
|
||||
pcRef.current = pc;
|
||||
setIsConnected(true);
|
||||
|
||||
// Connect event socket
|
||||
connectEventSocket();
|
||||
|
||||
console.log("[Viewer] Connected successfully");
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to connect:", err);
|
||||
setError(err.message || "Failed to connect");
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
}, [streamID, userID, username, token, isConnecting, isConnected, connectEventSocket]);
|
||||
|
||||
// Disconnect
|
||||
const disconnect = useCallback(() => {
|
||||
if (pcRef.current) {
|
||||
pcRef.current.close();
|
||||
pcRef.current = null;
|
||||
}
|
||||
|
||||
if (wsRef.current) {
|
||||
wsRef.current.close();
|
||||
wsRef.current = null;
|
||||
}
|
||||
|
||||
stopLocalStream();
|
||||
|
||||
setIsConnected(false);
|
||||
setMainStream(null);
|
||||
setPresenterStream(null);
|
||||
setParticipantStreams([]);
|
||||
setIsParticipant(false);
|
||||
setJoinRequestStatus(null);
|
||||
|
||||
console.log("[Viewer] Disconnected");
|
||||
}, []);
|
||||
|
||||
// Request to join as participant
|
||||
const requestToJoin = useCallback(async () => {
|
||||
if (joinRequestStatus === "pending") return;
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/join-request`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({ userID, username }),
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to send join request");
|
||||
}
|
||||
|
||||
setJoinRequestStatus("pending");
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to request join:", err);
|
||||
setError(err.message);
|
||||
}
|
||||
}, [streamID, userID, username, token, joinRequestStatus]);
|
||||
|
||||
// Cancel join request
|
||||
const cancelJoinRequest = useCallback(async () => {
|
||||
try {
|
||||
await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/join-request/${userID}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
setJoinRequestStatus(null);
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to cancel join request:", err);
|
||||
}
|
||||
}, [streamID, userID, token]);
|
||||
|
||||
// Start participating (send our video after approval)
|
||||
const startParticipating = useCallback(async () => {
|
||||
try {
|
||||
// Get our camera
|
||||
const localStream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { facingMode: "user", width: 640, height: 480 },
|
||||
audio: true,
|
||||
});
|
||||
localStreamRef.current = localStream;
|
||||
|
||||
// Create new peer connection for sending our stream
|
||||
// (or reuse existing one with renegotiation)
|
||||
if (pcRef.current) {
|
||||
// Add our tracks
|
||||
localStream.getTracks().forEach((track) => {
|
||||
pcRef.current.addTrack(track, localStream);
|
||||
});
|
||||
|
||||
// Renegotiate
|
||||
const offer = await pcRef.current.createOffer();
|
||||
await pcRef.current.setLocalDescription(offer);
|
||||
|
||||
// Send offer to host via WebSocket
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "participant_offer",
|
||||
sdp: offer.sdp,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to start participating:", err);
|
||||
setError("Failed to access camera");
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Stop local stream
|
||||
const stopLocalStream = useCallback(() => {
|
||||
if (localStreamRef.current) {
|
||||
localStreamRef.current.getTracks().forEach((track) => track.stop());
|
||||
localStreamRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Leave as participant (become viewer again)
|
||||
const leaveAsParticipant = useCallback(async () => {
|
||||
stopLocalStream();
|
||||
setIsParticipant(false);
|
||||
|
||||
// Notify server
|
||||
try {
|
||||
await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/leave`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({ userID }),
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to notify leave:", err);
|
||||
}
|
||||
}, [streamID, userID, token, stopLocalStream]);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isConnected,
|
||||
isConnecting,
|
||||
error,
|
||||
mainStream,
|
||||
presenterStream,
|
||||
participantStreams,
|
||||
streamInfo,
|
||||
viewerCount,
|
||||
joinRequestStatus,
|
||||
isParticipant,
|
||||
localStream: localStreamRef.current,
|
||||
connect,
|
||||
disconnect,
|
||||
requestToJoin,
|
||||
cancelJoinRequest,
|
||||
leaveAsParticipant,
|
||||
};
|
||||
}
|
||||
|
||||
export default useWebRTCViewer;
|
||||
|
|
@ -6,6 +6,7 @@ import "../../styles/posts.css";
|
|||
import "../../styles/filters.css";
|
||||
|
||||
import { createPost, fetchPostPreview, resolveAssetRef } from "../../api/client";
|
||||
import { LiveKitBroadcast, LiveKitViewerModal } from "../Live";
|
||||
import {
|
||||
FILTER_MAIN_CATEGORIES,
|
||||
FILTER_CATEGORY_MAP,
|
||||
|
|
@ -174,6 +175,11 @@ export default function MapView({
|
|||
|
||||
// Profile state (selectedIsland is now passed from App.jsx)
|
||||
const [selectedProfile, setSelectedProfile] = useState(null);
|
||||
|
||||
// Live broadcast state
|
||||
const [showLiveBroadcast, setShowLiveBroadcast] = useState(false);
|
||||
const [activeLivePost, setActiveLivePost] = useState(null);
|
||||
const [liveCoords, setLiveCoords] = useState(null);
|
||||
const openedPostRef = useRef(null);
|
||||
const queryPostRef = useRef(false);
|
||||
const overlayTimerRef = useRef(null);
|
||||
|
|
@ -255,7 +261,7 @@ export default function MapView({
|
|||
[mapRef]
|
||||
);
|
||||
|
||||
const { status, debugStatus, visiblePosts, loadingPosts, loadError, handleIncomingPost, handlePostUpdate } =
|
||||
const { status, debugStatus, visiblePosts, loadingPosts, loadError, handleIncomingPost, handlePostUpdate, handlePostDelete } =
|
||||
usePostsEngine({
|
||||
theme,
|
||||
mapRef,
|
||||
|
|
@ -711,12 +717,58 @@ export default function MapView({
|
|||
}
|
||||
if (msg.type === "post_update") {
|
||||
handlePostUpdate(msg);
|
||||
return;
|
||||
}
|
||||
if (msg.type === "post_delete") {
|
||||
handlePostDelete(msg);
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
};
|
||||
|
||||
return () => ws && ws.close();
|
||||
}, [handleIncomingPost, handlePostUpdate]);
|
||||
}, [handleIncomingPost, handlePostUpdate, handlePostDelete]);
|
||||
|
||||
// Listen for live post created event (from LiveBroadcastModal)
|
||||
useEffect(() => {
|
||||
const onLivePostCreated = (e) => {
|
||||
if (e.detail && e.detail.id) {
|
||||
handleIncomingPost(e.detail);
|
||||
}
|
||||
};
|
||||
window.addEventListener('live-post-created', onLivePostCreated);
|
||||
return () => window.removeEventListener('live-post-created', onLivePostCreated);
|
||||
}, [handleIncomingPost]);
|
||||
|
||||
useEffect(() => {
|
||||
const onLivePostUpdated = (e) => {
|
||||
if (e.detail && e.detail.id) {
|
||||
handlePostUpdate({ post_id: e.detail.id, post: e.detail });
|
||||
}
|
||||
};
|
||||
const onLivePostDeleted = (e) => {
|
||||
const postId = e.detail?.post_id || e.detail?.id;
|
||||
if (postId) {
|
||||
handlePostDelete({ post_id: postId });
|
||||
}
|
||||
};
|
||||
window.addEventListener('live-post-updated', onLivePostUpdated);
|
||||
window.addEventListener('live-post-deleted', onLivePostDeleted);
|
||||
return () => {
|
||||
window.removeEventListener('live-post-updated', onLivePostUpdated);
|
||||
window.removeEventListener('live-post-deleted', onLivePostDeleted);
|
||||
};
|
||||
}, [handlePostUpdate, handlePostDelete]);
|
||||
|
||||
useEffect(() => {
|
||||
const onLiveOpen = (e) => {
|
||||
if (e.detail) {
|
||||
setActiveLivePost(e.detail);
|
||||
}
|
||||
};
|
||||
window.addEventListener('livekit-open', onLiveOpen);
|
||||
return () => window.removeEventListener('livekit-open', onLiveOpen);
|
||||
}, []);
|
||||
|
||||
const handleFlyToMe = () => {
|
||||
const map = mapRef.current;
|
||||
|
|
@ -1853,6 +1905,32 @@ export default function MapView({
|
|||
type="button"
|
||||
className="chip-pill create-panel-btn primary"
|
||||
onClick={() => {
|
||||
// For live mode, open broadcast modal after step 0 (crosshair placement)
|
||||
if (contentMode === "live" && createStep === 0) {
|
||||
const map = mapRef.current;
|
||||
if (map) {
|
||||
const stage = stageRef.current;
|
||||
const crosshairEl = stage ? stage.querySelector(".crosshair-aim") : null;
|
||||
const containerEl = map.getContainer();
|
||||
let coords = null;
|
||||
if (crosshairEl && containerEl) {
|
||||
const crossRect = crosshairEl.getBoundingClientRect();
|
||||
const containerRect = containerEl.getBoundingClientRect();
|
||||
const px = crossRect.left + crossRect.width / 2 - containerRect.left;
|
||||
const py = crossRect.top + crossRect.height / 2 - containerRect.top;
|
||||
const correctedLngLat = map.unproject([px, py]);
|
||||
coords = [correctedLngLat.lng, correctedLngLat.lat];
|
||||
} else {
|
||||
const center = map.getCenter();
|
||||
coords = [center.lng, center.lat];
|
||||
}
|
||||
setLiveCoords(coords);
|
||||
setShowLiveBroadcast(true);
|
||||
setIsCreating(false);
|
||||
setModeChosen(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (createStep < 2) {
|
||||
setCreateStep((prev) => prev + 1);
|
||||
} else {
|
||||
|
|
@ -1861,7 +1939,7 @@ export default function MapView({
|
|||
}}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{createStep === 2 ? (isSaving ? "Posting..." : "Post") : "Next"}
|
||||
{createStep === 2 ? (isSaving ? "Posting..." : "Post") : (contentMode === "live" && createStep === 0 ? "Go Live" : "Next")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1878,6 +1956,27 @@ export default function MapView({
|
|||
onVisitIsland={handleProfileVisitIsland}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Live Broadcast Modal - Using LiveKit */}
|
||||
{showLiveBroadcast && (
|
||||
<LiveKitBroadcast
|
||||
coords={liveCoords}
|
||||
onClose={() => {
|
||||
setShowLiveBroadcast(false);
|
||||
setLiveCoords(null);
|
||||
}}
|
||||
onStreamCreated={({ roomName, title, coords }) => {
|
||||
console.log("[MapView] LiveKit stream created:", roomName, title, coords);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeLivePost && (
|
||||
<LiveKitViewerModal
|
||||
post={activeLivePost}
|
||||
onClose={() => setActiveLivePost(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -235,27 +235,31 @@ function applyPostDetails(modalWrap, post) {
|
|||
const summaryEl = modalWrap.querySelector(".sw-modal-summary");
|
||||
if (summaryEl) summaryEl.textContent = summary;
|
||||
|
||||
const heroGallery = collectGalleryImages(post);
|
||||
const heroImageSrc = heroGallery[0] || heroImageForPost(post);
|
||||
const heroFullSrc = heroGallery[0] || fullImageForPost(post);
|
||||
const heroHasGallery = heroGallery.length > 1;
|
||||
const hero = modalWrap.querySelector(".sw-modal-hero");
|
||||
const clusterHero = modalWrap.querySelector(".sw-cluster-hero-media");
|
||||
if (hero || clusterHero) {
|
||||
const target = hero || clusterHero;
|
||||
const heroImageHtml = heroImageSrc
|
||||
? `<img src="${escapeHtml(heroImageSrc)}" data-fullsrc="${escapeHtml(heroFullSrc)}" alt="" loading="lazy" data-gallery-index="0" />`
|
||||
: `<div class="sw-modal-hero-fallback"><div class="sw-modal-hero-fallback-inner"><i class="${categoryIconClass(post)}"></i><span>${escapeHtml(normCatLabel(post))}</span></div></div>`;
|
||||
const arrowHtml = heroHasGallery
|
||||
? `<button class="sw-modal-hero-arrow left" type="button" aria-label="Previous image"><i class="fa-solid fa-chevron-left"></i></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right"></i></button>`
|
||||
: "";
|
||||
const indicatorHtml = heroHasGallery
|
||||
? `<div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>`
|
||||
: "";
|
||||
target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`;
|
||||
bindHeroLightbox(modalWrap);
|
||||
if (heroHasGallery) {
|
||||
initModalGallery(modalWrap, heroGallery);
|
||||
// Skip hero replacement for camera posts - they have video content
|
||||
const isCamera = post?.content_type === 'camera';
|
||||
if (!isCamera) {
|
||||
const heroGallery = collectGalleryImages(post);
|
||||
const heroImageSrc = heroGallery[0] || heroImageForPost(post);
|
||||
const heroFullSrc = heroGallery[0] || fullImageForPost(post);
|
||||
const heroHasGallery = heroGallery.length > 1;
|
||||
const hero = modalWrap.querySelector(".sw-modal-hero");
|
||||
const clusterHero = modalWrap.querySelector(".sw-cluster-hero-media");
|
||||
if (hero || clusterHero) {
|
||||
const target = hero || clusterHero;
|
||||
const heroImageHtml = heroImageSrc
|
||||
? `<img src="${escapeHtml(heroImageSrc)}" data-fullsrc="${escapeHtml(heroFullSrc)}" alt="" loading="lazy" data-gallery-index="0" />`
|
||||
: `<div class="sw-modal-hero-fallback"><div class="sw-modal-hero-fallback-inner"><i class="${categoryIconClass(post)}"></i><span>${escapeHtml(normCatLabel(post))}</span></div></div>`;
|
||||
const arrowHtml = heroHasGallery
|
||||
? `<button class="sw-modal-hero-arrow left" type="button" aria-label="Previous image"><i class="fa-solid fa-chevron-left"></i></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right"></i></button>`
|
||||
: "";
|
||||
const indicatorHtml = heroHasGallery
|
||||
? `<div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>`
|
||||
: "";
|
||||
target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`;
|
||||
bindHeroLightbox(modalWrap);
|
||||
if (heroHasGallery) {
|
||||
initModalGallery(modalWrap, heroGallery);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -411,6 +415,23 @@ function escapeHtml(str) {
|
|||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
// Extract camera ID from Quebec 511 URL like https://www.quebec511.info/Carte/Fenetres/FenetreVideo.html?id=3978
|
||||
function extractCameraId(url) {
|
||||
if (!url) return null;
|
||||
const match = url.match(/[?&]id=(\d+)/);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
// Build stream proxy URL for camera
|
||||
function getCameraStreamUrl(postData) {
|
||||
const embedUrl = postData?.embed_url || postData?.video_url || '';
|
||||
const cameraId = extractCameraId(embedUrl);
|
||||
if (cameraId) {
|
||||
return `/live/api/stream/${cameraId}`;
|
||||
}
|
||||
return embedUrl;
|
||||
}
|
||||
|
||||
function renderTagPills(tags) {
|
||||
if (!Array.isArray(tags) || tags.length === 0) return "";
|
||||
const uniq = [];
|
||||
|
|
@ -818,9 +839,159 @@ function closeCenteredOverlay(map, opts = {}) {
|
|||
} catch {}
|
||||
}
|
||||
|
||||
function openCameraOverlay({ map, post, theme, fullScreen, interactionState }) {
|
||||
const postData = post || {};
|
||||
const title = postData.title || "Live Camera";
|
||||
const region = postData.region || "";
|
||||
const embedUrl = postData.embed_url || "";
|
||||
const videoUrl = postData.video_url || "";
|
||||
const lat = postData.lat;
|
||||
const lon = postData.lon;
|
||||
const postID = postData.id || 0;
|
||||
|
||||
trackEvent("camera_open", {
|
||||
post_id: postID,
|
||||
source: postData.source || "",
|
||||
region: region,
|
||||
});
|
||||
|
||||
const backdrop = document.createElement("div");
|
||||
backdrop.className = "sw-centered-backdrop sw-camera-backdrop";
|
||||
if (fullScreen) backdrop.classList.add("sw-modal-fullscreen");
|
||||
backdrop.style.cssText = `
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999999;
|
||||
background: rgba(0,0,0,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
`;
|
||||
|
||||
const modalWrap = document.createElement("div");
|
||||
modalWrap.className = "sw-camera-modal";
|
||||
modalWrap.style.cssText = `
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
max-height: 90vh;
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.6);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 30px rgba(56,189,248,0.3);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const coordsInfo = (lat && lon) ? `(${Number(lat).toFixed(4)}, ${Number(lon).toFixed(4)})` : "";
|
||||
|
||||
modalWrap.innerHTML = `
|
||||
<div class="sw-camera-modal-header" style="display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:rgba(15,23,42,0.95);border-bottom:1px solid rgba(148,163,184,0.3);">
|
||||
<div style="width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,rgba(56,189,248,0.25),rgba(59,130,246,0.25));border:1px solid rgba(56,189,248,0.6);display:flex;align-items:center;justify-content:center;">
|
||||
<i class="fa-solid fa-video" style="font-size:18px;color:#38bdf8;"></i>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-size:1rem;font-weight:800;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${escapeHtml(title)}</div>
|
||||
<div style="font-size:0.78rem;color:#94a3b8;">${escapeHtml(region)}</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:0.35rem;padding:0.3rem 0.7rem;border-radius:999px;background:rgba(239,68,68,0.85);color:#fff;font-size:0.7rem;font-weight:800;letter-spacing:0.08em;">
|
||||
<span style="width:6px;height:6px;border-radius:50%;background:#fff;animation:sw-camera-pulse 1.5s ease-in-out infinite;"></span>
|
||||
LIVE
|
||||
</div>
|
||||
<button class="sw-camera-close" style="width:36px;height:36px;border-radius:50%;border:1px solid rgba(148,163,184,0.4);background:rgba(15,23,42,0.8);color:#e5e7eb;font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;min-height:0;overflow:auto;">
|
||||
<div style="position:relative;width:100%;padding-top:56.25%;background:linear-gradient(135deg,rgba(15,23,42,1),rgba(30,41,59,1));">
|
||||
<div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem;">
|
||||
<div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,rgba(56,189,248,0.2),rgba(59,130,246,0.2));border:2px solid rgba(56,189,248,0.4);display:flex;align-items:center;justify-content:center;">
|
||||
<i class="fa-solid fa-video" style="font-size:32px;color:#38bdf8;"></i>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:1.1rem;font-weight:700;color:#f8fafc;margin-bottom:0.5rem;">Live Traffic Camera</div>
|
||||
<div style="font-size:0.85rem;color:#94a3b8;">Click below to view the live stream</div>
|
||||
</div>
|
||||
${(embedUrl || videoUrl)
|
||||
? `<a href="${escapeHtml(embedUrl || videoUrl)}" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:linear-gradient(135deg,#0ea5e9,#3b82f6);color:#fff;font-weight:700;font-size:0.9rem;border-radius:999px;text-decoration:none;box-shadow:0 4px 15px rgba(14,165,233,0.4);">
|
||||
<i class="fa-solid fa-external-link-alt"></i>
|
||||
Open Live Stream
|
||||
</a>`
|
||||
: `<div style="color:#94a3b8;font-size:0.85rem;">Stream URL unavailable</div>`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0.75rem 1rem;border-top:1px solid rgba(148,163,184,0.2);">
|
||||
<div style="display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:#94a3b8;margin-bottom:0.5rem;">
|
||||
<i class="fa-solid fa-map-marker-alt" style="color:#38bdf8;"></i>
|
||||
<span>${escapeHtml(region)}</span>
|
||||
${coordsInfo ? `<span style="opacity:0.7;font-size:0.75rem;">${coordsInfo}</span>` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:0.5rem;padding:0.75rem 1rem;border-top:1px solid rgba(148,163,184,0.2);flex-wrap:wrap;">
|
||||
<button class="sw-camera-share sw-wall-btn" style="border:1px solid rgba(56,189,248,0.35);background:rgba(15,23,42,0.6);color:#e2f2ff;font-weight:800;font-size:0.75rem;padding:0.35rem 0.6rem;border-radius:999px;cursor:pointer;">
|
||||
<i class="fa-solid fa-share-nodes"></i> Share
|
||||
</button>
|
||||
${embedUrl ? `<a href="${escapeHtml(embedUrl)}" target="_blank" rel="noopener noreferrer" class="sw-wall-btn" style="border:1px solid rgba(56,189,248,0.35);background:rgba(15,23,42,0.6);color:#e2f2ff;font-weight:800;font-size:0.75rem;padding:0.35rem 0.6rem;border-radius:999px;cursor:pointer;text-decoration:none;">
|
||||
<i class="fa-solid fa-external-link"></i> Open External
|
||||
</a>` : ""}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const closeModal = () => {
|
||||
try {
|
||||
backdrop.remove();
|
||||
map.__swCenteredOverlay = null;
|
||||
if (interactionState.dragPan) map.dragPan?.enable?.();
|
||||
if (interactionState.scrollZoom) map.scrollZoom?.enable?.();
|
||||
if (interactionState.doubleClickZoom) map.doubleClickZoom?.enable?.();
|
||||
if (interactionState.touchZoomRotate) map.touchZoomRotate?.enable?.();
|
||||
} catch {}
|
||||
};
|
||||
|
||||
backdrop.addEventListener("click", (e) => {
|
||||
if (e.target === backdrop) closeModal();
|
||||
});
|
||||
|
||||
const closeBtn = modalWrap.querySelector(".sw-camera-close");
|
||||
if (closeBtn) closeBtn.addEventListener("click", closeModal);
|
||||
|
||||
const shareBtn = modalWrap.querySelector(".sw-camera-share");
|
||||
if (shareBtn) {
|
||||
shareBtn.addEventListener("click", () => {
|
||||
const shareUrl = embedUrl || videoUrl || "";
|
||||
if (navigator.share) {
|
||||
navigator.share({ title, url: shareUrl }).catch(() => {});
|
||||
} else if (navigator.clipboard && shareUrl) {
|
||||
navigator.clipboard.writeText(shareUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", function escHandler(e) {
|
||||
if (e.key === "Escape") {
|
||||
closeModal();
|
||||
document.removeEventListener("keydown", escHandler);
|
||||
}
|
||||
});
|
||||
|
||||
backdrop.appendChild(modalWrap);
|
||||
document.body.appendChild(backdrop);
|
||||
map.__swCenteredOverlay = { el: backdrop, postId: postID };
|
||||
}
|
||||
|
||||
export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
|
||||
if (!map) return;
|
||||
|
||||
if (post?.content_type === "live") {
|
||||
try {
|
||||
window.dispatchEvent(new CustomEvent("livekit-open", { detail: post }));
|
||||
} catch {}
|
||||
return;
|
||||
}
|
||||
|
||||
closeCenteredOverlay(map, { force: true, reason: "switch", skipHistory: true });
|
||||
|
||||
const interactionState = {
|
||||
|
|
@ -835,6 +1006,21 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
|
|||
try { if (map.touchZoomRotate) map.touchZoomRotate.disable(); } catch {}
|
||||
|
||||
let postData = { ...(post || {}) };
|
||||
|
||||
// Debug: log post data to see if content_type is present
|
||||
console.log('[openCenteredOverlay] postData:', {
|
||||
id: postData.id,
|
||||
content_type: postData.content_type,
|
||||
source: postData.source,
|
||||
title: postData.title?.substring(0, 30)
|
||||
});
|
||||
|
||||
// Camera posts now use the regular modal with video content
|
||||
const isCamera = postData.content_type === 'camera';
|
||||
if (isCamera) {
|
||||
console.log('[openCenteredOverlay] Opening camera as regular post with video');
|
||||
}
|
||||
|
||||
const data = adaptPostToTemplateData(postData, { size: "full" });
|
||||
const cat = normCatLabel(postData);
|
||||
const templateKey = getTemplateKeyForPost(postData);
|
||||
|
|
@ -975,7 +1161,14 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
|
|||
<div class="post-card sw-expanded-shell sw-modal" data-template="${escapeHtml(templateKey)}" data-category="${escapeHtml((postData?.category || "").toString().toUpperCase())}">
|
||||
<div class="sw-modal-toprow">
|
||||
<div class="sw-modal-left">
|
||||
${isCamera ? `
|
||||
<div class="sw-modal-badge" style="background:linear-gradient(135deg,#dc2626,#ef4444);display:flex;align-items:center;gap:0.4rem;">
|
||||
<span style="width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.5s infinite;"></span>
|
||||
LIVE CAMERA
|
||||
</div>
|
||||
` : `
|
||||
<div class="sw-modal-badge">${escapeHtml(cat)}</div>
|
||||
`}
|
||||
<div class="sw-modal-meta">
|
||||
${author ? `<div class="sw-modal-author-avatar" data-username="${escapeHtml(author)}"></div>` : ""}
|
||||
${metaLeft ? `<span class="sw-author-link" data-author="${escapeHtml(author)}" style="cursor: pointer; text-decoration: underline;">${escapeHtml(metaLeft)}</span>` : ""}
|
||||
|
|
@ -988,6 +1181,7 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
|
|||
</div>
|
||||
|
||||
<div class="sw-modal-hero-row">
|
||||
${!isCamera ? `
|
||||
<div class="sw-truth-rail" data-score="${truth}">
|
||||
<button class="sw-truth-rail-btn sw-truth-rail-btn-up" type="button">TRUE</button>
|
||||
<div class="sw-truth-rail-bar">
|
||||
|
|
@ -996,9 +1190,27 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
|
|||
<div class="sw-truth-rail-score">${truth}</div>
|
||||
<button class="sw-truth-rail-btn sw-truth-rail-btn-down" type="button">FALSE</button>
|
||||
</div>
|
||||
<div class="sw-modal-hero">
|
||||
${
|
||||
img
|
||||
` : ''}
|
||||
<div class="sw-modal-hero" ${isCamera ? 'style="flex:1;max-width:100%;"' : ''}>
|
||||
${isCamera ? `
|
||||
<div class="sw-camera-hero" style="position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:12px;overflow:hidden;">
|
||||
<video
|
||||
controls
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;"
|
||||
src="${escapeHtml(getCameraStreamUrl(postData))}"
|
||||
>
|
||||
<source src="${escapeHtml(getCameraStreamUrl(postData))}" type="video/mp4">
|
||||
</video>
|
||||
<div class="sw-camera-live-badge" style="position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(220,38,38,0.9);border-radius:4px;font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;">
|
||||
<span style="width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.5s infinite;"></span>
|
||||
LIVE
|
||||
</div>
|
||||
</div>
|
||||
` : img
|
||||
? `<img src="${escapeHtml(img)}" data-fullsrc="${escapeHtml(fullImageForPost(postData))}" alt="" loading="lazy" />`
|
||||
: `<div class="sw-modal-hero-fallback"><div class="sw-modal-hero-fallback-inner"><i class="${categoryIconClass(postData)}"></i><span>${escapeHtml(normCatLabel(postData))}</span></div></div>`
|
||||
}
|
||||
|
|
@ -1020,15 +1232,21 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
|
|||
</div>
|
||||
|
||||
<div class="sw-modal-cta-row">
|
||||
${isCamera ? `
|
||||
<a class="sw-cta-primary sw-cta-camera" href="${escapeHtml(postData.video_url || postData.embed_url || '')}" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none;background:linear-gradient(135deg,#dc2626,#ef4444);">
|
||||
<i class="fa-solid fa-video"></i> Watch Live Stream
|
||||
</a>
|
||||
` : `
|
||||
<button class="sw-cta-primary" type="button" ${url ? "" : "disabled"} data-url="${escapeHtml(url)}">
|
||||
Open source
|
||||
</button>
|
||||
`}
|
||||
|
||||
<div class="sw-cta-actions">
|
||||
<button class="post-card-btn" type="button">Contact</button>
|
||||
${!isCamera ? `<button class="post-card-btn" type="button">Contact</button>` : ''}
|
||||
<button class="post-card-btn" type="button" data-action="like">Like</button>
|
||||
<button class="post-card-btn" type="button" data-action="share">Share</button>
|
||||
<button class="post-card-btn" type="button">Fix</button>
|
||||
${!isCamera ? `<button class="post-card-btn" type="button">Fix</button>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1539,14 +1757,17 @@ export function createMarkerForPost(post, mapRef, markersRef, expandedElRef, the
|
|||
root.addEventListener("click", (ev) => {
|
||||
ev.stopPropagation();
|
||||
|
||||
// Use root.__post to get the most up-to-date post data (may have been refreshed)
|
||||
const currentPost = root.__post || post;
|
||||
|
||||
const existing = map.__swCenteredOverlay;
|
||||
if (existing && existing.postId === post?.id) {
|
||||
if (existing && existing.postId === currentPost?.id) {
|
||||
if (existing.openedAt && Date.now() - existing.openedAt < 800) return;
|
||||
closeCenteredOverlay(map, { force: true });
|
||||
return;
|
||||
}
|
||||
|
||||
openCenteredOverlay({ map, post, theme, fullScreen: false });
|
||||
openCenteredOverlay({ map, post: currentPost, theme, fullScreen: false });
|
||||
if (expandedElRef) expandedElRef.current = null;
|
||||
});
|
||||
}
|
||||
|
|
@ -1592,7 +1813,20 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
|||
|
||||
function renderSimple() {
|
||||
const activePost = root.__post || post;
|
||||
const color = getMarkerColorForCategory(activePost?.category);
|
||||
const isCamera = activePost?.content_type === 'camera';
|
||||
const isLive = activePost?.content_type === 'live';
|
||||
const liveColor = 'linear-gradient(135deg, rgba(220,38,38,0.95), rgba(239,68,68,0.95))';
|
||||
const livePin = 'rgba(220,38,38,0.95)';
|
||||
const color = isLive
|
||||
? liveColor
|
||||
: isCamera
|
||||
? 'linear-gradient(135deg, rgba(56, 189, 248, 0.9), rgba(59, 130, 246, 0.9))'
|
||||
: getMarkerColorForCategory(activePost?.category);
|
||||
const pinColor = isLive
|
||||
? livePin
|
||||
: isCamera
|
||||
? 'rgba(56, 189, 248, 0.9)'
|
||||
: getMarkerColorForCategory(activePost?.category);
|
||||
const img = normalizeImageUrl(activePost?.image_small || "");
|
||||
root.__lastTemplateKey = getTemplateKeyForPost(activePost);
|
||||
root.__lastImage = img || "";
|
||||
|
|
@ -1600,13 +1834,13 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
|||
|
||||
// Marqueur pin avec image en haut et pointe en bas
|
||||
root.innerHTML = `
|
||||
<div class="sw-simple-marker" style="
|
||||
<div class="sw-simple-marker ${isCamera ? 'sw-camera-marker' : ''} ${isLive ? 'sw-live-marker' : ''}" style="
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: ${color};
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
border: 2px solid ${isCamera ? 'rgba(255,255,255,0.85)' : isLive ? 'rgba(255,255,255,0.9)' : 'white'};
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3)${isCamera ? ', 0 0 10px rgba(56, 189, 248, 0.5)' : isLive ? ', 0 0 12px rgba(239,68,68,0.6)' : ''};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -1614,7 +1848,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
|||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
z-index: 2;
|
||||
">
|
||||
${img ? `<img src="${img}" alt="" style="width:100%;height:100%;object-fit:cover;" />` : `
|
||||
${isLive ? `<i class="fa-solid fa-broadcast-tower" style="font-size:14px;color:#fff;"></i>` : isCamera ? `<i class="fa-solid fa-video" style="font-size:14px;color:#fff;"></i>` : img ? `<img src="${img}" alt="" style="width:100%;height:100%;object-fit:cover;" />` : `
|
||||
<div style="
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
|
@ -1629,7 +1863,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
|||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 16px solid ${color};
|
||||
border-top: 16px solid ${pinColor};
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
|
||||
margin-top: -2px;
|
||||
z-index: 1;
|
||||
|
|
@ -1653,6 +1887,9 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
|||
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
|
||||
white-space: normal;
|
||||
">
|
||||
${isCamera ? `<div style="display:inline-flex;align-items:center;gap:4px;padding:2px 6px;margin-bottom:4px;border-radius:999px;background:rgba(239,68,68,0.85);color:#fff;font-size:9px;font-weight:800;">
|
||||
<span style="width:5px;height:5px;border-radius:50%;background:#fff;"></span>LIVE
|
||||
</div>` : ""}
|
||||
<div style="font-weight: 900; font-size: 12px; color: #e8f5ff; margin-bottom: 4px;">
|
||||
${escapeHtml(activePost?.title || "Untitled")}
|
||||
</div>
|
||||
|
|
@ -1660,7 +1897,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
|||
${escapeHtml((activePost?.snippet || "").substring(0, 80))}${(activePost?.snippet || "").length > 80 ? "..." : ""}
|
||||
</div>
|
||||
<div style="margin-top: 6px; font-size: 9px; color: rgba(232, 245, 255, 0.6);">
|
||||
${normCatLabel(activePost)} • ${formatRelativeTime(activePost?.created_at || activePost?.CreatedAt)}
|
||||
${isCamera ? `<i class="fa-solid fa-video" style="margin-right:4px;"></i>` : ""}${normCatLabel(activePost)} • ${isCamera ? (activePost?.region || "Quebec") : formatRelativeTime(activePost?.created_at || activePost?.CreatedAt)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1706,14 +1943,26 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
|||
root.addEventListener("click", (ev) => {
|
||||
ev.stopPropagation();
|
||||
|
||||
// Use root.__post to get the most up-to-date post data (may have been refreshed)
|
||||
const currentPost = root.__post || post;
|
||||
|
||||
// Debug logging
|
||||
console.log('[SimpleMarker click] currentPost:', {
|
||||
id: currentPost?.id,
|
||||
content_type: currentPost?.content_type,
|
||||
source: currentPost?.source,
|
||||
hasRootPost: !!root.__post,
|
||||
rootPostContentType: root.__post?.content_type
|
||||
});
|
||||
|
||||
const existing = map.__swCenteredOverlay;
|
||||
if (existing && existing.postId === post?.id) {
|
||||
if (existing && existing.postId === currentPost?.id) {
|
||||
if (existing.openedAt && Date.now() - existing.openedAt < 800) return;
|
||||
closeCenteredOverlay(map, { force: true });
|
||||
return;
|
||||
}
|
||||
|
||||
openCenteredOverlay({ map, post, theme, fullScreen: false });
|
||||
openCenteredOverlay({ map, post: currentPost, theme, fullScreen: false });
|
||||
if (expandedElRef) expandedElRef.current = null;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1398,5 +1398,34 @@ export function usePostsEngine({
|
|||
[mapRef, refreshVisibleAndMarkers, timeHours]
|
||||
);
|
||||
|
||||
return { status, debugStatus, visiblePosts, loadingPosts, loadError, handleIncomingPost, handlePostUpdate };
|
||||
const handlePostDelete = useCallback(
|
||||
(payload) => {
|
||||
const postId = payload?.post_id || payload?.postId || payload?.id;
|
||||
if (!postId) return;
|
||||
|
||||
const map = mapRef.current;
|
||||
const overlay = map?.__swCenteredOverlay;
|
||||
if (overlay && overlay.postId === postId) {
|
||||
try { overlay.el?.remove?.(); } catch {}
|
||||
map.__swCenteredOverlay = null;
|
||||
}
|
||||
|
||||
allPostsRef.current = (allPostsRef.current || []).filter((p) => (p?.id || p?.ID) !== postId);
|
||||
setVisiblePosts((current) => current.filter((p) => (p?.id || p?.ID) !== postId));
|
||||
|
||||
const markers = markersRef.current || [];
|
||||
const nextMarkers = [];
|
||||
for (const item of markers) {
|
||||
if (!item || item.id !== postId) {
|
||||
nextMarkers.push(item);
|
||||
continue;
|
||||
}
|
||||
try { item.marker?.remove?.(); } catch {}
|
||||
}
|
||||
markersRef.current = nextMarkers;
|
||||
},
|
||||
[mapRef, markersRef]
|
||||
);
|
||||
|
||||
return { status, debugStatus, visiblePosts, loadingPosts, loadError, handleIncomingPost, handlePostUpdate, handlePostDelete };
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue