SharaPlay Documentation

ShowRunnerTX is a professional browser-based media playout application designed for live broadcasting, streaming, and event production. It offers frame-accurate playback, dual-player architecture (A/B roll), and integrated graphics capabilities.

Frame Accuracy

Built on a high-precision internal clock to ensure tight scheduling and accurate runtimes.

Hybrid Playout

Mix local video files, images, and live HLS streams in a single seamless playlist.

Dynamic Graphics

Trigger overlays, lower thirds, and tickers directly from the playback timeline.

Quick Start

Prerequisite

ShowRunnerTX runs best in Chrome or Edge. Ensure you have your media files organized in a local folder.

  1. Open index.html or app.html in your browser.
  2. Click the Media Library tab on the left sidebar.
  3. Click the folder icon 📁 to select your local media folder. Grant permission if prompted.
  4. Drag and drop files from the library into the central Playlist area.
  5. Click the TAKE NEXT button to start playback.

Interface Overview

The application is divided into three main zones:

  • Left Sidebar (Drawers): Access to Media Library, Contingency (Emergency Slates/Crawls), GFX, and EPG.
  • Center (Playlist): The main timeline of events. Shows status, timings, and segment info.
  • Right Sidebar (Monitor & Controls): Program output preview (what is currently airing), audio meters, large timing displays, and transport controls.

The Top Bar contains the System Clock, OBS Connection status, and the button, which launches the clean Clean Feed output window for use with switchers or projectors.

Playlist Management

The playlist is the heart of ShowRunnerTX. It executes items sequentially.

Adding Content

  • Drag & Drop: Drag files from the Media Library drawer.
  • Add Button (+): Click the + button in the playlist toolbar to browse for files.
  • Live Stream (📡): Click the satellite dish icon to add an external HLS stream URL.

Reordering & Editing

You can drag rows to reorder them. Double-click a row to edit its specific properties (Start Time, Duration override). Dragging a file onto an existing row will insert it after that row.

Play Status

  • ► PLAYING: Currently on air.
  • CUED: Next item to play.
  • READY: Verified and ready.
  • ERROR: File missing or unplayable.

Playback Controls

TAKE NEXT

Cuts immediately to the next item in the playlist (the Cued item). If nothing is playing, it starts the playlist.

HOLD

Pauses the countdown/auto-take at the end of the current clip. The current clip will freeze on the last frame (or loop if configured).

LOOP

Toggles looping for the current item. Useful for background beds or holding patterns.

Live Stream Integration

ShowRunnerTX supports HLS (HTTP Live Streaming) input.

  1. Click the Add Live Stream (📡) button.
  2. Enter a title (e.g., "Field Report").
  3. Paste the m3u8 URL.
  4. Set a duration (or leave blank for open-ended).

Latency

The system uses hls.js. Expect typical HLS latency (10-30s depending on source). You can configure a pre-buffer time.

GFX & Overlays

The GFX system allows you to layer images (PNG/SVG) over video content.

Manual Triggering

Open the GFX Drawer. Select a graphic from the dropdown and click FADE ON or FADE OFF.

Scheduled GFX (Secondary Events)

You can schedule GFX to trigger automatically at specific times relative to a clip's start. These are treated as Secondary Events attached to the primary video/media.

To schedule a secondary event:

  1. Double-click a playlist item to open Event Settings.
  2. Go to the Secondary Events tab.
  3. Select a graphic, set the relative start time (e.g., 00:00:05), and choose a transition and duration.

Supported transitions: Fade, Wipe Left/Right/Up/Down.

Channel Bugs

A "Bug" is a persistent station logo usually in the corner of the screen.

Go to Settings (GEAR ICON) > Secondary Event: Channel Bug to upload, position, and set opacity for your bug. You can set a "Default Bug" that automatically applies to every new clip added to the playlist.

SVG Editor

The GFX Drawer includes a powerful built-in **SVG Editor** for creating and customizing graphics on the fly.

Element Control

Select individual elements within an SVG (like text blocks or shapes) directly from the preview window.

Live Customization

Edit text content, update fill colors, and change stroke borders. Perfect for updating names on lower thirds or changing team colors.

Save Copies

Once edited, click Save As Copy to create a new, unique GFX asset in your library without overwriting the original template.

Contingency & Emergency

Broadcast reliability tools located in the "Contingency" drawer.

Emergency Slate

Clicking EMERGENCY SLATE immediately cuts away from the playlist to a safe holding image/video. Use this if a feed fails or inappropriate content airs. Click again to return to program.

News Crawl / Ticker

A scrolling text ticker at the bottom of the screen. Type your text, hit SAVE, then PLAY.

EPG & Scheduling

The Electronic Programme Guide (EPG) drawer helps manage metadata for broadcast schedules.

  • Programme Groups: Group multiple clips into a logical "show" (e.g., "Morning News Block").
  • Exports: Export schedule as CSV or pollable XML for website integration.
  • Now/Next: The system can push live "Now Playing" and "Up Next" data to an endpoint.