Drop Zone Ops — v2 Feature Branch → Main

[cskonopka]

Drop Zone Ops — v2 Feature Branch → Main

Summary

This PR merges a substantial rebuild of Drop Zone Ops from a Flask/Python server app into a fully client-side, zero-dependency single HTML file. It also introduces a new Commercial Injection feature and updated documentation.

---

What Changed

🏗 Architecture — Flask → Client-Side

The original project required a Python server, virtual environment, pip dependencies, and a running Flask process. All of that has been removed.

• Removed Flask server (app.py), WebSocket integration, OBS scheduling, and requirements.txt dependency
• The entire application is now a single index.html — open in any browser, works immediately
• No install, no server, no command line required
• Compatible with Mac, Windows, and Linux
• Hostable on GitHub Pages, Netlify, or any static host

---

🪂 Playlist Builder — Core UI

The drag-and-drop playlist builder has been rebuilt from scratch as a clean two-panel layout.

Left panel — Drop Zone:

• Drag and drop local video files directly into the browser
• Browse local files via file picker
• Paste remote URLs (Dropbox, S3, HTTP) with optional display name
• Drag-to-reorder playlist items via handle

Right panel — Operations:

• Playlist name field (controls the exported filename)
• Export .M3U Playlist button
• Browse Local Files
• Import CSV / JSON
• Sort by Tag
• Clear Playlist
• 💉 Commercial Injection (new — see below)
• Live M3U preview (updates as you build)
• Playlist stats by tag + Total Time display

---

📁 Local Base Path

Solves the core OBS compatibility problem — browser security prevents access to full file paths when dropping files, so the base path field provides the folder prefix.

• Set once, applies to all dropped files automatically
• APPLY ALL button retroactively applies to existing items
• Field turns green when active
• Color-coded path status in playlist (green = absolute path, cyan = remote URL, orange = missing path warning)
• Export guard warns if items are missing a base path before allowing export

---

🏷 Tag System

Each playlist item has a tag categorizing its broadcast role:

• content — main programming
• commercial — ad spots
• bumper — station IDs, intro/outro clips
• interstitial — transitions, filler
• other — catch-all

Click the tag badge on any item to cycle through tags. Tags are written as tvg-type attributes in the exported .m3u.

---

✏️ Item Edit Modal

Click any item title to open a full edit modal:

• Display name
• File path / URL
• Duration (accepts human-readable MM:SS or H:MM:SS — no seconds conversion required)
• Tag selector
• Group / Block label (written as group-title in the .m3u)

---

📋 CSV / JSON Import

Bulk import playlists from structured data files. Supports both formats with flexible field mapping.

CSV headers: path, name, duration, tag, group

JSON fields: path, name, duration, tag, group (plus aliases: url, src, title, type, category, block)

Template files included: playlist-template.csv and playlist-template.json

---

📡 M3U Export

• Exports a correctly formatted .m3u with #EXTINF metadata per item
• Includes group-title and tvg-type attributes
• trimEnd() applied before writing — removes trailing newline that breaks OBS VLC Source
• Filename controlled by the Playlist Name field

---

💉 Commercial Injection

New feature. A full broadcast automation tool that slides in from the right as a panel over the existing UI.

Commercial Library (Column 1)

• Define a library base path for local commercial clips
• Add clips by filename or remote URL with display name and duration
• Library clips double as selectable bumpers

Injection Rules (Column 2)

• Default Rule — fires every N content items; set interval, min/max ads per break, selection mode
• Position Overrides — override the default rule at a specific item number with its own settings
• Optional bumpers per break — assign pre-break and/or post-break clips independently per rule

Selection modes: random, sequential, specific

JSON Template + Preview (Column 3)

• Live JSON updates as rules are configured
• Edit mode — unlock the JSON textarea to edit directly; validates on lock
• ↓ Save — downloads the template as a reusable .json file
• Import Template JSON — load a previously saved template
• Merged Preview — live color-coded preview of the final injected playlist order

Content source

• Auto-reads the current Drop Zone playlist
• Optionally import a separate .m3u or .json as the content source

Output

• 💉 INJECT & UPDATE PLAYLIST replaces the current Drop Zone playlist in place with the fully merged result
• Export the merged playlist as a .m3u as normal

---

🎨 UI / UX Polish

• About modal — "What is this?" button under the logo explains the project with links
• Footer — three live links: schwwaaa, subcarrier.tv, obs_scheduler attribution
• Scanline overlay for retro broadcast aesthetic
• Live clock in footer
• Item count pill in header status bar updates in real time
• Toast notifications for all actions

---

📄 Documentation

README.md fully rewritten to reflect the new client-side architecture:

• Removed all Flask/Python/server setup instructions
• Step-by-step how-to covering every feature with screenshots
• New Commercial Injection section with full template format reference
• OBS VLC Source compatibility notes
• M3U format example

---

Files Changed

File	Change
index.html	Full rebuild — replaces app.py + templates/index.html + static/style.css
README.md	Fully rewritten
playlist-template.csv	New — import template
playlist-template.json	New — import template
app.py	Removed
wstest.py	Removed
owncast-test.py	Removed
requirements.txt	Removed
templates/index.html	Removed
static/style.css	Removed

---

Testing

Tested and confirmed working on:

• macOS Apple Silicon — Chrome, Safari
• Windows 10/11 — Chrome, Edge
• Linux Ubuntu 24.04 — Firefox, Chrome

OBS VLC Source compatibility confirmed — .m3u output loads and plays correctly without trailing newline.