Add frontend/src/components/SCTE35Trigger.tsx

frontend/src/components/SCTE35Trigger.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+interface SCTE35TriggerProps {
+  onInject: (eventId: number, durationSeconds: number) => Promise<void>;
+}
+
+export function SCTE35Trigger({ onInject }: SCTE35TriggerProps) {
+  const [duration, setDuration] = useState(30);
+  const [isInjecting, setIsInjecting] = useState(false);
+  const [lastInjected, setLastInjected] = useState<string | null>(null);
+
+  const handleInject = async () => {
+    setIsInjecting(true);
+    try {
+      // Generate event ID from current timestamp (Date.now() & 0xFFFFFFFF ensures 32-bit)
+      const eventId = Date.now() & 0xFFFFFFFF;
+      await onInject(eventId, duration);
+      setLastInjected(new Date().toLocaleTimeString());
+    } finally {
+      setIsInjecting(false);
+    }
+  };
+
+  return (
+    <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
+      <h3 className="text-white font-bold mb-3">SCTE35 Ad Marker</h3>
+
+      <div className="mb-3">
+        <label className="text-gray-300 text-sm block mb-1">Duration (seconds)</label>
+        <input
+          type="number"
+          min={1}
+          max={300}
+          value={duration}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDuration(Number(e.target.value))}
+          className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2"
+        />
+      </div>
+
+      <button
+        onClick={handleInject}
+        disabled={isInjecting}
+        className="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-600 text-white py-2 rounded font-medium"
+      >
+        {isInjecting ? 'Injecting...' : 'Inject Ad Break'}
+      </button>
+
+      {lastInjected && (
+        <p className="text-gray-400 text-xs mt-2">Last injected: {lastInje