TOOLS MODULE — VISUALIZATION
WordPress TimeLapse Viewer — Productivity Session Recording and Activity Playback
Record and play back productivity sessions inside your WordPress admin. Upload session recordings with video, event logs, and HTML reports. Browse sessions by task name, tag, or search. Play back recordings at variable speeds with frame-by-frame controls. See exactly what happened during a work session — every action and milestone preserved in a searchable activity timeline.
The Problem With Tracking Work Sessions and Activity
Work on WordPress sites happens in fragments. A developer adjusts code on Monday, a designer makes visual changes on Wednesday, and a content editor reworks a page on Friday. Two weeks later, someone asks what happened and when. Nobody remembers the exact sequence of actions, and the only evidence is a chain of vague commit messages or scattered Slack threads.
Revision history in WordPress tracks content changes, but it captures nothing about the process. You cannot see how work progressed, what was tried and reverted, or the exact sequence of actions someone took. Screenshots help, but they are static — you cannot see the progression between two states or identify exactly when a specific change happened.
LuperIQ TimeLapse Viewer solves this by storing complete work sessions as video with synchronized event timelines. Every action is captured in a playable recording that you can scrub through, speed up, slow down, or step through frame by frame. Sessions are stored with metadata, tagged for organization, and searchable by task name. When someone asks what happened and when, the answer is a recording you can play back in your WordPress admin.
Everything the TimeLapse Viewer Provides
Session Recording Upload
Video, Events, and Reports in One Package
Upload complete session recordings through the REST API or admin interface. Each upload accepts a video file (MP4), a thumbnail image (JPG), an events CSV with timestamped actions, and a JSON metadata payload. The module stores the video and thumbnail in a dedicated upload directory, imports events into a relational database table with foreign key constraints, creates a WordPress post of type luperiq_session, and links everything together with a unique session ID.
JavaScript Playback Viewer
Enhanced Video Player With Event Sync
The built-in session viewer provides playback controls beyond what a standard HTML5 video player offers. Eight playback speeds from 0.25x to 3x let you slow down critical moments or fast-forward through idle periods. Frame-by-frame stepping at 1/30th second increments lets you isolate exact moments of change. An event timeline panel displays every recorded action with its timestamp, and clicking an event seeks the video to that point in the session.
Session Management Dashboard
Browse, Search, and Organize Recordings
The Sessions admin page displays all recordings in a standard WordPress list table with columns for task name, duration, start time, end time, and uploader. Search sessions by task name with live debounce filtering. Paginate through large collections at 20 sessions per page. Bulk-select and delete multiple sessions at once with confirmation dialogs. Each session links to a detail view showing the full video player, HTML report, metadata, and up to 100 events in a sortable table.
Session Tags and Taxonomy
Organize Sessions by Project or Category
A custom taxonomy called luperiq_session_tag attaches to the luperiq_session post type. Tag sessions by project name, client, page, component, or any other organizing principle. Tags appear as a filterable admin column so you can quickly narrow the session list to a specific project or time period without relying on search alone.
REST API for Automation
Four Endpoints for Full Session Lifecycle
The luperiq-timelapse/v1 namespace exposes four REST endpoints. GET /sessions returns a paginated, filterable session list with search, date_from, and date_to parameters. POST /upload accepts multipart form data with video, thumbnail, and events files plus a JSON session_data payload. GET /sessions/{id} returns a single session with all its events. DELETE /sessions/{id} removes the session, its files, its events (via CASCADE), and its WordPress post. All endpoints use WordPress nonce authentication and capability checks.
Configurable Settings
Control Storage, Sharing, and Retention
The Settings page exposes four options. Auto-Delete After Days sets a retention window — sessions older than the configured number of days are automatically removed (set to 0 to keep sessions indefinitely). Maximum Video Size caps upload file size with a default of 500 MB. Public Sharing enables shareable session URLs for stakeholders who do not have WordPress admin access. Require Approval puts new uploads in a pending state until an administrator reviews and approves them.
How Session Recording Works
A recording session captures three types of data: video, events, and metadata. The video file is an MP4 recording of the visual state of the page or site as changes are made. The events file is a CSV with four columns — timestamp, event type, details, and additional data — that logs every discrete action taken during the session. The metadata payload is a JSON object containing the session ID, task name, start time, end time, duration in seconds, and any custom key-value pairs relevant to the session context.
When a session is uploaded through the REST API, the module creates a dedicated directory under wp-content/uploads/luperiq-timelapse-sessions/ named after the session ID. The video is saved as timelapse.mp4, the thumbnail as thumbnail.jpg, and the events as events.csv. The module then inserts a row into the luperiq_timelapse_sessions table with all session metadata, parses the events CSV (skipping the header row), and inserts each event into the luperiq_timelapse_events table with a foreign key reference to the session.
A WordPress post of type luperiq_session is also created with the task name as the title and the HTML report as the content. Two post meta fields — luperiq_session_id and luperiq_session_data — link the post back to the database record and store the full session data JSON. This dual-storage approach means sessions are accessible both through the custom database tables (for performance and complex queries) and through the WordPress post system (for taxonomy tagging and standard WordPress features).
How the Playback Viewer Works
The session viewer is a JavaScript class that wraps the standard HTML5 video element with enhanced controls and event synchronization. When initialized, it attaches to any container with the luperiq-timelapse-viewer class. It detects the video element inside the container, adds custom control panels below the player, registers keyboard shortcuts on the document, and loads session events either from a data attribute or via an AJAX call to the REST API.
Playback controls include a speed selector dropdown with eight preset speeds (0.25x, 0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x, and 3x), skip buttons for jumping 10 seconds forward or backward, and frame-by-frame stepping buttons that advance or rewind the video by 1/30th of a second. A live time display shows the current position and total duration in HH:MM:SS format, updating on every timeupdate event from the video element.
Seven keyboard shortcuts provide hands-free control. Spacebar toggles play and pause. Left and right arrow keys skip 5 seconds backward and forward. Up and down arrows adjust playback speed in 0.25x increments (minimum 0.25x, maximum 4x). The F key toggles fullscreen mode with cross-browser support for standard, WebKit, and MS prefixed APIs. The M key toggles mute. All shortcuts are scoped to fire only when the viewer container is visible, preventing interference with other page interactions.
How the Event Timeline Works
Each session can contain hundreds or thousands of discrete events recorded during the design process. These events are stored in the luperiq_timelapse_events table with a foreign key to the parent session and indexed on timestamp, event type, and session ID for fast retrieval. The foreign key uses ON DELETE CASCADE, so deleting a session automatically removes all its associated events without requiring a separate cleanup step.
When you open a session in the viewer, events are loaded and rendered as a table below the video player. Each row shows the timestamp, event type, and details. Clicking any event row seeks the video to the corresponding point in the recording, letting you jump directly to the moment a specific change was made. During playback, the viewer tracks the current video time and highlights the corresponding event in the timeline, so you always know what action is being performed on screen.
The session detail view in the admin shows up to 100 events in a sortable table. Sessions with more than 100 events display a count indicator showing how many total events exist. Events are always ordered chronologically by timestamp ascending, giving you a linear narrative of the entire design session from first action to last.
How the REST API Works
The REST API lives under the luperiq-timelapse/v1 namespace and provides the full session lifecycle through four endpoints. All read and delete operations require the manage_options capability. Upload operations require the upload_files capability. Every request is authenticated via WordPress nonce verification through the X-WP-Nonce header, and the API URL and nonce are localized to the admin JavaScript as luperiqTimelapse.apiUrl and luperiqTimelapse.nonce.
The list endpoint (GET /sessions) supports pagination with page and per_page parameters (default 20 per page), full-text search on task names, and date range filtering with date_from and date_to parameters. It returns the session list, total count, current page, items per page, and total pages — everything needed to build a paginated interface. The upload endpoint (POST /upload) accepts multipart form data with optional video, thumbnail, and events file fields plus a required session_data JSON string containing the session ID, task name, timestamps, duration, and optional report HTML and metadata.
The single session endpoint (GET /sessions/{id}) returns the complete session record including all associated events ordered by timestamp. The delete endpoint (DELETE /sessions/{id}) removes the session's video file from the filesystem, deletes the database record (which cascades to delete events), and removes the linked WordPress post with wp_delete_post using the force-delete flag to bypass the trash. Both endpoints validate the session exists before operating and return appropriate 404 errors for missing sessions.
Who This Module Is Built For
Any WordPress team that needs a visual record of work sessions and activity over time.
Design and Development Teams
- Record every work session so the team can review what was done without relying on memory or scattered screenshots.
- Use session tags to organize recordings by project, sprint, or component — filter the session list to see all related sessions in one view.
- Play back sessions at 2x or 3x speed during team reviews to quickly recap a week of work in minutes.
Agencies Managing Client Sites
- Enable public sharing to send session playback links to clients who do not have WordPress admin access — they see the recording without needing a login.
- Use the require-approval setting to review all uploaded sessions before they become visible, maintaining quality control on what clients can access.
- The HTML report attached to each session provides a written summary alongside the video, giving clients both visual and textual documentation of what changed.
Quality Assurance and Auditing
- Frame-by-frame playback at 1/30th second increments lets QA engineers identify exactly when a visual regression was introduced during a design session.
- The event timeline shows every discrete action taken during a session — click an event to jump directly to that moment in the recording.
- Configurable retention with auto-delete keeps storage manageable on long-running projects while preserving recent sessions for active review.
Frequently Asked Questions
Does this module require other LuperIQ modules?
No. TimeLapse Viewer is a standalone module with no dependencies on other LuperIQ modules. It optionally integrates with LuperIQ Data Core — if Data Core is active, upload, view, and delete events are published to the productivity.timelapse pipeline for analytics. But Data Core is not required for the module to function.
What file formats are supported for session recordings?
The module stores videos as MP4 files (timelapse.mp4) and thumbnails as JPG files (thumbnail.jpg). Events are imported from CSV files with four columns: timestamp, event_type, details, and additional_data. The session_data payload is a JSON string. These formats are standard and compatible with most screen recording tools.
How much storage do session recordings use?
Storage depends on video resolution, duration, and compression. The default maximum upload size is 500 MB per session, configurable in Settings. Each session also stores its events in the database (minimal storage) and an optional thumbnail image. You can monitor total storage used on the Settings page under Storage Information, which calculates the size of the luperiq-timelapse-sessions upload directory.
Can I control how long sessions are retained?
Yes. The Auto-Delete After Days setting on the Settings page specifies a retention window. Sessions older than the configured number of days are automatically removed. Set this value to 0 to disable auto-deletion and keep all sessions indefinitely. This is useful for managing disk space on servers with limited storage.
Who can upload sessions and who can view them?
Viewing, listing, and deleting sessions through the REST API requires the manage_options capability (administrators). Uploading sessions requires the upload_files capability, which is available to administrators and editors by default. The admin pages are restricted to users with manage_options. If public sharing is enabled in Settings, session playback links can be accessed without authentication.
Can I integrate the upload with external tools or CI pipelines?
Yes. The REST API upload endpoint accepts standard multipart form data, which any HTTP client can produce. Use WordPress Application Passwords for authentication — the Settings page links directly to the Application Passwords section of your profile. Send a POST request to /wp-json/luperiq-timelapse/v1/upload with video, thumbnail, and events files plus a session_data JSON field.
What happens when I delete a session?
Deleting a session removes the video file from the filesystem, deletes the session record from the database (which cascades to remove all associated events), and permanently deletes the linked WordPress post. This is a destructive operation — deleted sessions cannot be recovered. The admin interface requires confirmation before both single and bulk deletions.
Record and Replay Every Work Session in Your WordPress Admin
TimeLapse Viewer gives you session recording upload, variable-speed video playback with frame-by-frame controls, synchronized event timelines, tag-based organization, a full REST API, and configurable retention — all inside your WordPress admin.