/* Firecamp.jsx — CR #325: Fire Prevention Play video submissions + voting (/#firecamp) Sites upload their performance to YouTube, Google Drive, or OneDrive, submit the link with their PPR district + site name, and the video embeds below for voting. Vote tallies are dashboard-only (Fire Voting tab) — the public page never shows counts. Votes dedup server-side per device; localStorage greys out the button after voting. */ // CR #338: JJ extended the district selector to cover all 12 PPR districts. const FIRECAMP_DISTRICTS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]; const FIRE_VOTES_LS_KEY = "ppr_fire_votes"; // CR #344: one vote per device per day. The stored record is stamped with the // UTC day; a record from a prior day is ignored so the buttons re-enable. // Matches the server, which folds the same UTC day into the dedup hash. const fireVoteDay = () => new Date().toISOString().slice(0, 10); function readFireVotes() { try { const o = JSON.parse(localStorage.getItem(FIRE_VOTES_LS_KEY) || "{}") || {}; return (o.day === fireVoteDay() && o.voted) ? o.voted : {}; } catch (e) { return {}; } } function FirecampPage() { const blank = { district: "", siteName: "", videoUrl: "" }; const [data, setData] = React.useState(blank); const [submitted, setSubmitted] = React.useState(null); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(""); const [videos, setVideos] = React.useState([]); const [loadingVideos, setLoadingVideos] = React.useState(true); const [voted, setVoted] = React.useState(readFireVotes); const update = (k, v) => setData(d => ({ ...d, [k]: v })); const loadVideos = React.useCallback(() => { fetch("/api/data/firecamp") .then(r => r.json()) .then(j => setVideos(j.rows || [])) .catch(() => {}) .finally(() => setLoadingVideos(false)); }, []); React.useEffect(() => { loadVideos(); }, [loadVideos]); const onSubmit = async (e) => { e.preventDefault(); setSubmitting(true); setError(""); try { const res = await fetch("/api/data/firecamp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "submit", district: Number(data.district), site_name: data.siteName, video_url: data.videoUrl, }) }); const json = await res.json().catch(() => ({})); if (!res.ok || !json.ok) throw new Error(json.error || `error_${res.status}`); setSubmitted({ ref: json.ref }); loadVideos(); } catch (err) { const code = String(err && err.message || ""); setError( code === "already_submitted" ? "That video has already been submitted — it should be playing below." : code === "bad_video_url" ? "That link doesn't look like a YouTube, Google Drive, or OneDrive video link. Copy the share link straight from the app and try again." : code === "rate_limited" ? "Too many submissions from this connection — wait a few minutes and try again." : "Couldn't send right now. Please try again, or email Joseph.J.Pospiech@phila.gov." ); } finally { setSubmitting(false); } }; const onVote = async (videoId) => { if (voted[videoId]) return; // Optimistic: grey the button immediately; the server dedups per device // anyway, so a failed request just means the vote silently didn't count. const next = { ...voted, [videoId]: true }; setVoted(next); try { localStorage.setItem(FIRE_VOTES_LS_KEY, JSON.stringify({ day: fireVoteDay(), voted: next })); } catch (e) {} try { await fetch("/api/data/firecamp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "vote", video_id: videoId }) }); } catch (e) {} }; // Group live videos by district for the watch + vote section. const byDistrict = videos.reduce((acc, v) => { (acc[v.district] = acc[v.district] || []).push(v); return acc; }, {}); const districtsWithVideos = Object.keys(byDistrict).map(Number).sort((a, b) => a - b); return (
Put your site's
play on stage.} body="Rec sites across Philadelphia are performing the Fire Prevention Play. Record your site's performance, upload it to YouTube, Google Drive, or OneDrive using the steps below, and submit the link. Your video appears on this page for the citywide vote." bg="var(--c-primary)" logo={{ src: "/img/fire-dept-logo.png", alt: "Philadelphia Fire Department" }} /> {/* RULES + IMPORTANT DATES (CR #344) — sit above the submission steps */}
Before you submit

The rules.

  1. The performers must be 12 years of age and under.
  2. There is no restriction to the number of participants.
  3. No actual fires may be used. All fires must be simulated! No combustibles are permitted.
  4. All scripts must be original and developed by this year's participants.
  5. Each play must be longer than two minutes, but not longer than six minutes. If a play is under two minutes, ten points will be deducted from their cumulative total. If a play is over six minutes, ten points will be deducted from the cumulative total.
  6. Only one full performance can be considered for judging.
  7. The best representative play from each district will be selected to compete at the citywide level. All videos will be displayed and submitted on phillyperforms.com.
  8. The decision of the judges is final.
Important dates

Mark your calendar.

Submit by
July 22
All videos must be submitted.
District winners
July 24
One play selected per district.
Citywide competition
July 31
The Free Library, 1901 Vine Street.
{/* HOW TO UPLOAD */}
Step 1 — Upload your video

From your phone, three easy ways.

Option A — YouTube
  1. Open the YouTube app and sign in.
  2. Tap the + button at the bottom, then Upload a video.
  3. Pick your recording and give it a title (your site name works great).
  4. Set visibility to Public or Unlisted — not Private, or it won't play here.
  5. Once it finishes uploading, tap Share → Copy link.
Option B — Google Drive
  1. Open the Google Drive app.
  2. Tap + New → Upload and pick your recording.
  3. After it uploads, tap the ⋮ menu next to the file, then Share.
  4. Under General access, choose "Anyone with the link" — otherwise it won't play here.
  5. Tap Copy link.
Option C — OneDrive
  1. Open the OneDrive app and sign in.
  2. Tap + → Upload and pick your recording.
  3. After it uploads, tap the ⋯ menu next to the file, then Share.
  4. Set the link to "Anyone with the link can view" — otherwise it won't open here.
  5. Tap Copy link.

Then paste the copied link into the form below. Questions? Email{" "} Joseph.J.Pospiech@phila.gov.

{/* SUBMIT FORM */}
Step 2 — Submit your link

Enter your site for the vote.

{submitted ? (
✦

Got it — your video is in.

It's live in the voting section below. Reference: {submitted.ref}. Share this page with your families so they can vote for your site.

) : (
`District ${d}`))} value={data.district} onChange={v => update("district", v)} required /> update("siteName", v)} required placeholder="e.g. Athletic Recreation Center" /> update("videoUrl", v)} required placeholder="Paste your YouTube, Google Drive, or OneDrive link" /> {error &&

{error}

}
)}
{/* WATCH + VOTE */}
Step 3 — Watch & vote

The performances, by district.

One vote per video per device. Results are tallied by the Performing Arts Office at the end of the voting period.

{loadingVideos ? (

Loading videos…

) : districtsWithVideos.length === 0 ? (

No videos yet — yours could be the first. Submit above.

) : ( districtsWithVideos.map(d => (

District {d}

{byDistrict[d].length} {byDistrict[d].length === 1 ? "video" : "videos"}
{byDistrict[d].map(v => (
{v.video_kind === "onedrive" ? ( ▶ Watch on OneDrive Opens in a new tab ) : (