feat: add buttplug device recording feature (Phase 1 & 2)
Implemented complete infrastructure for recording, saving, and managing buttplug device patterns with precise event timing. **Phase 1: Backend & Infrastructure** - Added Directus schema for sexy_recordings collection with all fields (id, status, user_created, title, description, slug, duration, events, device_info, tags, linked_video, featured, public) - Created REST API endpoints in bundle extension: * GET /sexy/recordings - list user recordings with filtering * GET /sexy/recordings/:id - get single recording * POST /sexy/recordings - create new recording with validation * PATCH /sexy/recordings/:id - update recording (owner only) * DELETE /sexy/recordings/:id - soft delete by archiving - Added TypeScript types: RecordedEvent, DeviceInfo, Recording - Created frontend services: getRecordings(), deleteRecording() - Built RecordingCard component with stats, device info, and actions - Added Recordings tab to /me dashboard page with grid layout - Added i18n translations for recordings UI **Phase 2: Recording Capture** - Implemented recording state management in /play page - Added Start/Stop Recording buttons with visual indicators - Capture device events with precise timestamps during recording - Normalize actuator values (0-100) for cross-device compatibility - Created RecordingSaveDialog component with: * Recording stats display (duration, events, devices) * Form inputs (title, description, tags) * Device information preview - Integrated save recording API call from play page - Added success/error toast notifications - Automatic event filtering during recording **Technical Details** - Events stored as JSON array with timestamp, deviceIndex, deviceName, actuatorIndex, actuatorType, and normalized value - Device metadata includes name, index, and capability list - Slug auto-generated from title for SEO-friendly URLs - Status workflow: draft → published → archived - Permission checks: users can only access own recordings or public ones - Frontend uses performance.now() for millisecond precision timing **User Flow** 1. User scans and connects devices on /play page 2. Clicks "Start Recording" to begin capturing events 3. Manipulates device sliders - all changes are recorded 4. Clicks "Stop Recording" to end capture 5. Save dialog appears with recording preview and form 6. User enters title, description, tags and saves 7. Recording appears in dashboard /me Recordings tab 8. Can play back, edit, or delete recordings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Valknar XXX
@@ -57,5 +57,193 @@ export default {
|
||||
videos_count: videosCount[0].count,
|
||||
});
|
||||
});
|
||||
|
||||
// GET /sexy/recordings - List user's recordings
|
||||
router.get("/recordings", async (req, res) => {
|
||||
const { accountability } = context;
|
||||
if (!accountability?.user) {
|
||||
return res.status(401).json({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
const recordingsService = new ItemsService("sexy_recordings", {
|
||||
schema: await getSchema(),
|
||||
accountability,
|
||||
});
|
||||
|
||||
const { status, tags, linked_video, limit, page } = req.query;
|
||||
const filter: any = {
|
||||
user_created: {
|
||||
_eq: accountability.user,
|
||||
},
|
||||
};
|
||||
|
||||
if (status) filter.status = { _eq: status };
|
||||
if (tags) filter.tags = { _contains: tags };
|
||||
if (linked_video) filter.linked_video = { _eq: linked_video };
|
||||
|
||||
const recordings = await recordingsService.readByQuery({
|
||||
filter,
|
||||
limit: limit ? parseInt(limit as string) : 50,
|
||||
page: page ? parseInt(page as string) : 1,
|
||||
sort: ["-date_created"],
|
||||
});
|
||||
|
||||
res.json(recordings);
|
||||
});
|
||||
|
||||
// GET /sexy/recordings/:id - Get single recording
|
||||
router.get("/recordings/:id", async (req, res) => {
|
||||
const { accountability } = context;
|
||||
if (!accountability?.user) {
|
||||
return res.status(401).json({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
const recordingsService = new ItemsService("sexy_recordings", {
|
||||
schema: await getSchema(),
|
||||
accountability,
|
||||
});
|
||||
|
||||
try {
|
||||
const recording = await recordingsService.readOne(req.params.id);
|
||||
|
||||
// Check if user owns the recording or if it's public
|
||||
if (
|
||||
recording.user_created !== accountability.user &&
|
||||
!recording.public
|
||||
) {
|
||||
return res.status(403).json({ error: "Forbidden" });
|
||||
}
|
||||
|
||||
res.json(recording);
|
||||
} catch (error) {
|
||||
res.status(404).json({ error: "Recording not found" });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /sexy/recordings - Create new recording
|
||||
router.post("/recordings", async (req, res) => {
|
||||
const { accountability } = context;
|
||||
if (!accountability?.user) {
|
||||
return res.status(401).json({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
const recordingsService = new ItemsService("sexy_recordings", {
|
||||
schema: await getSchema(),
|
||||
accountability,
|
||||
});
|
||||
|
||||
const { title, description, duration, events, device_info, tags, linked_video, status } = req.body;
|
||||
|
||||
// Validate required fields
|
||||
if (!title || !duration || !events || !device_info) {
|
||||
return res.status(400).json({
|
||||
error: "Missing required fields: title, duration, events, device_info",
|
||||
});
|
||||
}
|
||||
|
||||
// Validate events structure
|
||||
if (!Array.isArray(events) || events.length === 0) {
|
||||
return res.status(400).json({ error: "Events must be a non-empty array" });
|
||||
}
|
||||
|
||||
// Generate slug from title
|
||||
const slug = title
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-|-$/g, "");
|
||||
|
||||
try {
|
||||
const recording = await recordingsService.createOne({
|
||||
title,
|
||||
description,
|
||||
slug,
|
||||
duration,
|
||||
events,
|
||||
device_info,
|
||||
tags: tags || [],
|
||||
linked_video: linked_video || null,
|
||||
status: status || "draft",
|
||||
public: false,
|
||||
});
|
||||
|
||||
res.status(201).json(recording);
|
||||
} catch (error: any) {
|
||||
res.status(500).json({ error: error.message || "Failed to create recording" });
|
||||
}
|
||||
});
|
||||
|
||||
// PATCH /sexy/recordings/:id - Update recording
|
||||
router.patch("/recordings/:id", async (req, res) => {
|
||||
const { accountability } = context;
|
||||
if (!accountability?.user) {
|
||||
return res.status(401).json({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
const recordingsService = new ItemsService("sexy_recordings", {
|
||||
schema: await getSchema(),
|
||||
accountability,
|
||||
});
|
||||
|
||||
try {
|
||||
const existing = await recordingsService.readOne(req.params.id);
|
||||
|
||||
// Only allow owner to update
|
||||
if (existing.user_created !== accountability.user) {
|
||||
return res.status(403).json({ error: "Forbidden" });
|
||||
}
|
||||
|
||||
const { title, description, tags, status, public: isPublic, linked_video } = req.body;
|
||||
const updates: any = {};
|
||||
|
||||
if (title !== undefined) {
|
||||
updates.title = title;
|
||||
updates.slug = title
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-|-$/g, "");
|
||||
}
|
||||
if (description !== undefined) updates.description = description;
|
||||
if (tags !== undefined) updates.tags = tags;
|
||||
if (status !== undefined) updates.status = status;
|
||||
if (isPublic !== undefined) updates.public = isPublic;
|
||||
if (linked_video !== undefined) updates.linked_video = linked_video;
|
||||
|
||||
const recording = await recordingsService.updateOne(req.params.id, updates);
|
||||
res.json(recording);
|
||||
} catch (error: any) {
|
||||
res.status(500).json({ error: error.message || "Failed to update recording" });
|
||||
}
|
||||
});
|
||||
|
||||
// DELETE /sexy/recordings/:id - Delete (archive) recording
|
||||
router.delete("/recordings/:id", async (req, res) => {
|
||||
const { accountability } = context;
|
||||
if (!accountability?.user) {
|
||||
return res.status(401).json({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
const recordingsService = new ItemsService("sexy_recordings", {
|
||||
schema: await getSchema(),
|
||||
accountability,
|
||||
});
|
||||
|
||||
try {
|
||||
const existing = await recordingsService.readOne(req.params.id);
|
||||
|
||||
// Only allow owner to delete
|
||||
if (existing.user_created !== accountability.user) {
|
||||
return res.status(403).json({ error: "Forbidden" });
|
||||
}
|
||||
|
||||
// Soft delete by setting status to archived
|
||||
await recordingsService.updateOne(req.params.id, {
|
||||
status: "archived",
|
||||
});
|
||||
|
||||
res.json({ success: true });
|
||||
} catch (error: any) {
|
||||
res.status(500).json({ error: error.message || "Failed to delete recording" });
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user