@taskp3/react 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +258 -0
- package/dist/changelog-hooks.d.ts +46 -0
- package/dist/changelog-hooks.d.ts.map +1 -0
- package/dist/changelog-hooks.js +163 -0
- package/dist/changelog-hooks.js.map +1 -0
- package/dist/changelog.d.ts +17 -0
- package/dist/changelog.d.ts.map +1 -0
- package/dist/changelog.js +86 -0
- package/dist/changelog.js.map +1 -0
- package/dist/context.d.ts +33 -0
- package/dist/context.d.ts.map +1 -0
- package/dist/context.js +62 -0
- package/dist/context.js.map +1 -0
- package/dist/fetch.d.ts +3 -0
- package/dist/fetch.d.ts.map +1 -0
- package/dist/fetch.js +19 -0
- package/dist/fetch.js.map +1 -0
- package/dist/hooks.d.ts +50 -0
- package/dist/hooks.d.ts.map +1 -0
- package/dist/hooks.js +140 -0
- package/dist/hooks.js.map +1 -0
- package/dist/icons.d.ts +52 -0
- package/dist/icons.d.ts.map +1 -0
- package/dist/icons.js +40 -0
- package/dist/icons.js.map +1 -0
- package/dist/index.d.ts +33 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +43 -0
- package/dist/index.js.map +1 -0
- package/dist/loom-recorder.d.ts +9 -0
- package/dist/loom-recorder.d.ts.map +1 -0
- package/dist/loom-recorder.js +92 -0
- package/dist/loom-recorder.js.map +1 -0
- package/dist/past-submissions.d.ts +10 -0
- package/dist/past-submissions.d.ts.map +1 -0
- package/dist/past-submissions.js +198 -0
- package/dist/past-submissions.js.map +1 -0
- package/dist/recorder/audio.d.ts +6 -0
- package/dist/recorder/audio.d.ts.map +1 -0
- package/dist/recorder/audio.js +30 -0
- package/dist/recorder/audio.js.map +1 -0
- package/dist/recorder/capture.d.ts +6 -0
- package/dist/recorder/capture.d.ts.map +1 -0
- package/dist/recorder/capture.js +32 -0
- package/dist/recorder/capture.js.map +1 -0
- package/dist/recorder/finalize-recording-worker-source.d.ts +2 -0
- package/dist/recorder/finalize-recording-worker-source.d.ts.map +1 -0
- package/dist/recorder/finalize-recording-worker-source.js +6 -0
- package/dist/recorder/finalize-recording-worker-source.js.map +1 -0
- package/dist/recorder/finalize-recording-worker.d.ts +2 -0
- package/dist/recorder/finalize-recording-worker.d.ts.map +1 -0
- package/dist/recorder/finalize-recording-worker.js +16 -0
- package/dist/recorder/finalize-recording-worker.js.map +1 -0
- package/dist/recorder/finalizeRecording.d.ts +12 -0
- package/dist/recorder/finalizeRecording.d.ts.map +1 -0
- package/dist/recorder/finalizeRecording.js +92 -0
- package/dist/recorder/finalizeRecording.js.map +1 -0
- package/dist/recorder/finalizeRecordingInWorker.d.ts +3 -0
- package/dist/recorder/finalizeRecordingInWorker.d.ts.map +1 -0
- package/dist/recorder/finalizeRecordingInWorker.js +49 -0
- package/dist/recorder/finalizeRecordingInWorker.js.map +1 -0
- package/dist/recorder/index.d.ts +7 -0
- package/dist/recorder/index.d.ts.map +1 -0
- package/dist/recorder/index.js +14 -0
- package/dist/recorder/index.js.map +1 -0
- package/dist/recorder/session.d.ts +19 -0
- package/dist/recorder/session.d.ts.map +1 -0
- package/dist/recorder/session.js +237 -0
- package/dist/recorder/session.js.map +1 -0
- package/dist/recorder/support.d.ts +8 -0
- package/dist/recorder/support.d.ts.map +1 -0
- package/dist/recorder/support.js +41 -0
- package/dist/recorder/support.js.map +1 -0
- package/dist/recorder/timer-worker.d.ts +5 -0
- package/dist/recorder/timer-worker.d.ts.map +1 -0
- package/dist/recorder/timer-worker.js +28 -0
- package/dist/recorder/timer-worker.js.map +1 -0
- package/dist/recorder/types.d.ts +26 -0
- package/dist/recorder/types.d.ts.map +1 -0
- package/dist/recorder/types.js +3 -0
- package/dist/recorder/types.js.map +1 -0
- package/dist/recorder-preview-player.d.ts +9 -0
- package/dist/recorder-preview-player.d.ts.map +1 -0
- package/dist/recorder-preview-player.js +136 -0
- package/dist/recorder-preview-player.js.map +1 -0
- package/dist/screen-recorder-context.d.ts +16 -0
- package/dist/screen-recorder-context.d.ts.map +1 -0
- package/dist/screen-recorder-context.js +124 -0
- package/dist/screen-recorder-context.js.map +1 -0
- package/dist/screen-recorder.d.ts +16 -0
- package/dist/screen-recorder.d.ts.map +1 -0
- package/dist/screen-recorder.js +126 -0
- package/dist/screen-recorder.js.map +1 -0
- package/dist/styles.d.ts +3 -0
- package/dist/styles.d.ts.map +1 -0
- package/dist/styles.js +841 -0
- package/dist/styles.js.map +1 -0
- package/dist/triage-attachments.d.ts +5 -0
- package/dist/triage-attachments.d.ts.map +1 -0
- package/dist/triage-attachments.js +44 -0
- package/dist/triage-attachments.js.map +1 -0
- package/dist/triage-button.d.ts +26 -0
- package/dist/triage-button.d.ts.map +1 -0
- package/dist/triage-button.js +228 -0
- package/dist/triage-button.js.map +1 -0
- package/dist/triage-rich-content.d.ts +6 -0
- package/dist/triage-rich-content.d.ts.map +1 -0
- package/dist/triage-rich-content.js +121 -0
- package/dist/triage-rich-content.js.map +1 -0
- package/dist/triage-slate-editor.d.ts +8 -0
- package/dist/triage-slate-editor.d.ts.map +1 -0
- package/dist/triage-slate-editor.js +112 -0
- package/dist/triage-slate-editor.js.map +1 -0
- package/dist/triage-slate.d.ts +20 -0
- package/dist/triage-slate.d.ts.map +1 -0
- package/dist/triage-slate.js +64 -0
- package/dist/triage-slate.js.map +1 -0
- package/dist/triage-ui-controller.d.ts +52 -0
- package/dist/triage-ui-controller.d.ts.map +1 -0
- package/dist/triage-ui-controller.js +146 -0
- package/dist/triage-ui-controller.js.map +1 -0
- package/dist/triage-ui-notifications.d.ts +5 -0
- package/dist/triage-ui-notifications.d.ts.map +1 -0
- package/dist/triage-ui-notifications.js +10 -0
- package/dist/triage-ui-notifications.js.map +1 -0
- package/dist/use-past-submissions.d.ts +43 -0
- package/dist/use-past-submissions.d.ts.map +1 -0
- package/dist/use-past-submissions.js +240 -0
- package/dist/use-past-submissions.js.map +1 -0
- package/dist/use-recorder-controller.d.ts +33 -0
- package/dist/use-recorder-controller.d.ts.map +1 -0
- package/dist/use-recorder-controller.js +309 -0
- package/dist/use-recorder-controller.js.map +1 -0
- package/dist/use-screen-recorder.d.ts +25 -0
- package/dist/use-screen-recorder.d.ts.map +1 -0
- package/dist/use-screen-recorder.js +34 -0
- package/dist/use-screen-recorder.js.map +1 -0
- package/dist/whats-new.d.ts +16 -0
- package/dist/whats-new.d.ts.map +1 -0
- package/dist/whats-new.js +72 -0
- package/dist/whats-new.js.map +1 -0
- package/package.json +58 -0
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Recorder session state machine.
|
|
3
|
+
* idle -> requesting -> recording <-> paused -> stopping -> preview | error
|
|
4
|
+
*/
|
|
5
|
+
export type RecorderState = "idle" | "requesting" | "recording" | "paused" | "stopping" | "preview" | "error";
|
|
6
|
+
export interface RecorderSessionConfig {
|
|
7
|
+
maxDurationMs: number;
|
|
8
|
+
videoBitsPerSecond: number;
|
|
9
|
+
cameraBitsPerSecond: number;
|
|
10
|
+
}
|
|
11
|
+
export interface CaptureResult {
|
|
12
|
+
screenStream: MediaStream;
|
|
13
|
+
cameraStream: MediaStream | null;
|
|
14
|
+
release: () => void;
|
|
15
|
+
}
|
|
16
|
+
export interface MixedAudioResult {
|
|
17
|
+
stream: MediaStream;
|
|
18
|
+
release: () => void;
|
|
19
|
+
}
|
|
20
|
+
export interface RecordingFinalization {
|
|
21
|
+
screenBlob: Blob;
|
|
22
|
+
screenMimeType: string;
|
|
23
|
+
cameraBlob: Blob | null;
|
|
24
|
+
cameraMimeType: string | null;
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/recorder/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,UAAU,GACV,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,IAAI,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/recorder/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface RecorderPreviewPlayerProps {
|
|
2
|
+
previewUrl: string | null;
|
|
3
|
+
cameraPreviewUrl: string | null;
|
|
4
|
+
duration: number;
|
|
5
|
+
pipWidth: string;
|
|
6
|
+
}
|
|
7
|
+
export declare function RecorderPreviewPlayer({ previewUrl, cameraPreviewUrl, duration, pipWidth, }: RecorderPreviewPlayerProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=recorder-preview-player.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"recorder-preview-player.d.ts","sourceRoot":"","sources":["../src/recorder-preview-player.tsx"],"names":[],"mappings":"AAGA,UAAU,0BAA0B;IAClC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAeD,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,QAAQ,GACT,EAAE,0BAA0B,2CA8M5B"}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.RecorderPreviewPlayer = RecorderPreviewPlayer;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const icons_1 = require("./icons");
|
|
7
|
+
function formatTime(seconds) {
|
|
8
|
+
const safeSeconds = Math.max(0, Math.floor(seconds));
|
|
9
|
+
const m = Math.floor(safeSeconds / 60);
|
|
10
|
+
const s = safeSeconds % 60;
|
|
11
|
+
return `${m}:${s.toString().padStart(2, "0")}`;
|
|
12
|
+
}
|
|
13
|
+
function RecorderPreviewPlayer({ previewUrl, cameraPreviewUrl, duration, pipWidth, }) {
|
|
14
|
+
const containerRef = (0, react_1.useRef)(null);
|
|
15
|
+
const videoRef = (0, react_1.useRef)(null);
|
|
16
|
+
const cameraRef = (0, react_1.useRef)(null);
|
|
17
|
+
const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
|
|
18
|
+
const [currentTime, setCurrentTime] = (0, react_1.useState)(0);
|
|
19
|
+
const [resolvedDuration, setResolvedDuration] = (0, react_1.useState)(duration);
|
|
20
|
+
(0, react_1.useEffect)(() => {
|
|
21
|
+
setIsPlaying(false);
|
|
22
|
+
setCurrentTime(0);
|
|
23
|
+
setResolvedDuration(duration);
|
|
24
|
+
}, [previewUrl, duration]);
|
|
25
|
+
const syncCameraTime = (0, react_1.useCallback)(() => {
|
|
26
|
+
const video = videoRef.current;
|
|
27
|
+
const camera = cameraRef.current;
|
|
28
|
+
if (!video || !camera)
|
|
29
|
+
return;
|
|
30
|
+
try {
|
|
31
|
+
camera.currentTime = video.currentTime;
|
|
32
|
+
}
|
|
33
|
+
catch {
|
|
34
|
+
// Ignore camera sync failures in browsers that block exact seeking.
|
|
35
|
+
}
|
|
36
|
+
}, []);
|
|
37
|
+
const syncCameraPlayback = (0, react_1.useCallback)(() => {
|
|
38
|
+
const video = videoRef.current;
|
|
39
|
+
const camera = cameraRef.current;
|
|
40
|
+
if (!video || !camera)
|
|
41
|
+
return;
|
|
42
|
+
syncCameraTime();
|
|
43
|
+
if (video.paused || video.ended) {
|
|
44
|
+
camera.pause();
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
camera.play().catch(() => { });
|
|
48
|
+
}, [syncCameraTime]);
|
|
49
|
+
const handleLoadedMetadata = (0, react_1.useCallback)(() => {
|
|
50
|
+
const video = videoRef.current;
|
|
51
|
+
if (!video)
|
|
52
|
+
return;
|
|
53
|
+
if (Number.isFinite(video.duration) && video.duration > 0) {
|
|
54
|
+
setResolvedDuration(Math.max(duration, Math.ceil(video.duration)));
|
|
55
|
+
}
|
|
56
|
+
}, [duration]);
|
|
57
|
+
const handleDurationChange = (0, react_1.useCallback)(() => {
|
|
58
|
+
const video = videoRef.current;
|
|
59
|
+
if (!video)
|
|
60
|
+
return;
|
|
61
|
+
if (Number.isFinite(video.duration) && video.duration > 0) {
|
|
62
|
+
setResolvedDuration((current) => Math.max(current, Math.ceil(video.duration)));
|
|
63
|
+
}
|
|
64
|
+
}, []);
|
|
65
|
+
const handleTimeUpdate = (0, react_1.useCallback)(() => {
|
|
66
|
+
const video = videoRef.current;
|
|
67
|
+
if (!video)
|
|
68
|
+
return;
|
|
69
|
+
setCurrentTime(video.currentTime);
|
|
70
|
+
}, []);
|
|
71
|
+
const handleEnded = (0, react_1.useCallback)(() => {
|
|
72
|
+
setIsPlaying(false);
|
|
73
|
+
setCurrentTime(Math.max(duration, resolvedDuration));
|
|
74
|
+
cameraRef.current?.pause();
|
|
75
|
+
}, [duration, resolvedDuration]);
|
|
76
|
+
const togglePlayback = (0, react_1.useCallback)(() => {
|
|
77
|
+
const video = videoRef.current;
|
|
78
|
+
if (!video)
|
|
79
|
+
return;
|
|
80
|
+
if (video.paused || video.ended) {
|
|
81
|
+
video.play().catch(() => { });
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
video.pause();
|
|
85
|
+
}, []);
|
|
86
|
+
const handleSeek = (0, react_1.useCallback)((event) => {
|
|
87
|
+
const video = videoRef.current;
|
|
88
|
+
if (!video)
|
|
89
|
+
return;
|
|
90
|
+
const nextTime = Number(event.target.value);
|
|
91
|
+
video.currentTime = nextTime;
|
|
92
|
+
setCurrentTime(nextTime);
|
|
93
|
+
syncCameraTime();
|
|
94
|
+
}, [syncCameraTime]);
|
|
95
|
+
const handleFullscreen = (0, react_1.useCallback)(() => {
|
|
96
|
+
const container = containerRef.current;
|
|
97
|
+
const video = videoRef.current;
|
|
98
|
+
const candidates = [container, video].filter((candidate) => candidate != null);
|
|
99
|
+
void (async () => {
|
|
100
|
+
for (const candidate of candidates) {
|
|
101
|
+
try {
|
|
102
|
+
if (typeof candidate.requestFullscreen === "function") {
|
|
103
|
+
await candidate.requestFullscreen();
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
if (typeof candidate.webkitRequestFullscreen === "function") {
|
|
107
|
+
await candidate.webkitRequestFullscreen();
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
if (typeof candidate.msRequestFullscreen === "function") {
|
|
111
|
+
await candidate.msRequestFullscreen();
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
catch {
|
|
116
|
+
// Try the next fullscreen API candidate.
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
try {
|
|
120
|
+
video?.webkitEnterFullscreen?.();
|
|
121
|
+
}
|
|
122
|
+
catch {
|
|
123
|
+
// Ignore final fullscreen fallback failures.
|
|
124
|
+
}
|
|
125
|
+
})();
|
|
126
|
+
}, []);
|
|
127
|
+
const totalDuration = Math.max(duration, resolvedDuration, 1);
|
|
128
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "p3-rec-player", ref: containerRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "p3-rec-player-stage", children: [(0, jsx_runtime_1.jsx)("video", { ref: videoRef, src: previewUrl ?? undefined, playsInline: true, className: "p3-rec-player-video", onClick: togglePlayback, onLoadedMetadata: handleLoadedMetadata, onDurationChange: handleDurationChange, onTimeUpdate: handleTimeUpdate, onPlay: () => {
|
|
129
|
+
setIsPlaying(true);
|
|
130
|
+
syncCameraPlayback();
|
|
131
|
+
}, onPause: () => {
|
|
132
|
+
setIsPlaying(false);
|
|
133
|
+
cameraRef.current?.pause();
|
|
134
|
+
}, onSeeked: syncCameraTime, onEnded: handleEnded }), !isPlaying && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-player-overlay", onClick: togglePlayback, "aria-label": "Play recording", children: (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, { size: 22 }) })), cameraPreviewUrl && ((0, jsx_runtime_1.jsx)("video", { ref: cameraRef, src: cameraPreviewUrl, muted: true, playsInline: true, style: { width: pipWidth }, className: "p3-rec-player-camera" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "p3-rec-player-controls", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-player-btn", onClick: togglePlayback, "aria-label": isPlaying ? "Pause recording preview" : "Play recording preview", children: isPlaying ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, { size: 14 }) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, { size: 14 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "p3-rec-player-time", children: [formatTime(currentTime), " / ", formatTime(totalDuration)] }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: 0, max: totalDuration, step: 0.1, value: Math.min(currentTime, totalDuration), onChange: handleSeek, className: "p3-rec-player-slider", "aria-label": "Seek recording preview" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-player-btn", onClick: handleFullscreen, "aria-label": "Open recording preview fullscreen", children: (0, jsx_runtime_1.jsx)(icons_1.MaximizeIcon, { size: 14 }) })] })] }));
|
|
135
|
+
}
|
|
136
|
+
//# sourceMappingURL=recorder-preview-player.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"recorder-preview-player.js","sourceRoot":"","sources":["../src/recorder-preview-player.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useRecorderController, type RecorderControllerOptions, type RecorderAttachmentMetadata } from "./use-recorder-controller";
|
|
3
|
+
import type { TriageUploadTarget } from "./triage-ui-controller";
|
|
4
|
+
export interface ScreenRecorderContextValue {
|
|
5
|
+
setOnAttach: (cb: ((blob: Blob, metadata?: RecorderAttachmentMetadata) => void) | null) => void;
|
|
6
|
+
setTargetOnAttach: (target: TriageUploadTarget, cb: ((blob: Blob, metadata?: RecorderAttachmentMetadata) => void) | null) => void;
|
|
7
|
+
setActiveTarget: (target: TriageUploadTarget) => void;
|
|
8
|
+
recorder: ReturnType<typeof useRecorderController>;
|
|
9
|
+
}
|
|
10
|
+
export declare function useScreenRecorderContext(): ScreenRecorderContextValue | null;
|
|
11
|
+
export interface ScreenRecorderProviderProps extends RecorderControllerOptions {
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
onAttach?: (blob: Blob, metadata?: RecorderAttachmentMetadata) => void | Promise<void>;
|
|
14
|
+
}
|
|
15
|
+
export declare function ScreenRecorderProvider({ children, onAttach: providerOnAttach, ...opts }: ScreenRecorderProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
//# sourceMappingURL=screen-recorder-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"screen-recorder-context.d.ts","sourceRoot":"","sources":["../src/screen-recorder-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,qBAAqB,EACrB,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAChC,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAyBjE,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,CACX,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,0BAA0B,KAAK,IAAI,CAAC,GAAG,IAAI,KACrE,IAAI,CAAC;IACV,iBAAiB,EAAE,CACjB,MAAM,EAAE,kBAAkB,EAC1B,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,0BAA0B,KAAK,IAAI,CAAC,GAAG,IAAI,KACrE,IAAI,CAAC;IACV,eAAe,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtD,QAAQ,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;CACpD;AAID,wBAAgB,wBAAwB,IAAI,0BAA0B,GAAG,IAAI,CAE5E;AAED,MAAM,WAAW,2BAA4B,SAAQ,yBAAyB;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,IAAI,EACV,QAAQ,CAAC,EAAE,0BAA0B,KAClC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3B;AAED,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,EAAE,gBAAgB,EAC1B,GAAG,IAAI,EACR,EAAE,2BAA2B,2CAgM7B"}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.useScreenRecorderContext = useScreenRecorderContext;
|
|
37
|
+
exports.ScreenRecorderProvider = ScreenRecorderProvider;
|
|
38
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
|
+
const react_1 = __importStar(require("react"));
|
|
40
|
+
const react_dom_1 = require("react-dom");
|
|
41
|
+
const use_recorder_controller_1 = require("./use-recorder-controller");
|
|
42
|
+
const icons_1 = require("./icons");
|
|
43
|
+
const recorder_preview_player_1 = require("./recorder-preview-player");
|
|
44
|
+
const FIXED_STYLE = {
|
|
45
|
+
position: "fixed",
|
|
46
|
+
bottom: 16,
|
|
47
|
+
left: 16,
|
|
48
|
+
zIndex: 2147483647,
|
|
49
|
+
boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
|
|
50
|
+
};
|
|
51
|
+
function formatTime(seconds) {
|
|
52
|
+
const m = Math.floor(seconds / 60);
|
|
53
|
+
const s = seconds % 60;
|
|
54
|
+
return `${m}:${s.toString().padStart(2, "0")}`;
|
|
55
|
+
}
|
|
56
|
+
const ScreenRecorderContext = (0, react_1.createContext)(null);
|
|
57
|
+
function useScreenRecorderContext() {
|
|
58
|
+
return (0, react_1.useContext)(ScreenRecorderContext);
|
|
59
|
+
}
|
|
60
|
+
function ScreenRecorderProvider({ children, onAttach: providerOnAttach, ...opts }) {
|
|
61
|
+
const recorder = (0, use_recorder_controller_1.useRecorderController)(opts);
|
|
62
|
+
const [isAttaching, setIsAttaching] = (0, react_1.useState)(false);
|
|
63
|
+
const onAttachRef = (0, react_1.useRef)(null);
|
|
64
|
+
const targetAttachRefs = (0, react_1.useRef)({
|
|
65
|
+
submission: null,
|
|
66
|
+
reply: null,
|
|
67
|
+
});
|
|
68
|
+
const activeTargetRef = (0, react_1.useRef)("submission");
|
|
69
|
+
const setOnAttach = (0, react_1.useCallback)((cb) => {
|
|
70
|
+
onAttachRef.current = cb;
|
|
71
|
+
}, []);
|
|
72
|
+
const setTargetOnAttach = (0, react_1.useCallback)((target, cb) => {
|
|
73
|
+
targetAttachRefs.current[target] = cb;
|
|
74
|
+
}, []);
|
|
75
|
+
const setActiveTarget = (0, react_1.useCallback)((target) => {
|
|
76
|
+
activeTargetRef.current = target;
|
|
77
|
+
}, []);
|
|
78
|
+
const handleAttach = (0, react_1.useCallback)(async () => {
|
|
79
|
+
setIsAttaching(true);
|
|
80
|
+
try {
|
|
81
|
+
const targetCb = targetAttachRefs.current[activeTargetRef.current];
|
|
82
|
+
const cb = targetCb ?? providerOnAttach ?? onAttachRef.current;
|
|
83
|
+
const finalized = await recorder.ensureFinalizedBlob();
|
|
84
|
+
if (!finalized) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (cb) {
|
|
88
|
+
await Promise.resolve(cb(finalized.blob, finalized.metadata));
|
|
89
|
+
recorder.discard();
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
recorder.discard();
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
finally {
|
|
96
|
+
setIsAttaching(false);
|
|
97
|
+
}
|
|
98
|
+
}, [recorder, providerOnAttach]);
|
|
99
|
+
const value = react_1.default.useMemo(() => ({ setOnAttach, setTargetOnAttach, setActiveTarget, recorder }), [setActiveTarget, setOnAttach, setTargetOnAttach, recorder]);
|
|
100
|
+
const pipWidth = opts.pipScale
|
|
101
|
+
? `${Math.round(opts.pipScale * 100)}%`
|
|
102
|
+
: "20%";
|
|
103
|
+
const canPortal = typeof document !== "undefined" && document.body;
|
|
104
|
+
let globalUI = null;
|
|
105
|
+
if (recorder.state === "recording" || recorder.state === "paused") {
|
|
106
|
+
const isPaused = recorder.state === "paused";
|
|
107
|
+
globalUI = ((0, jsx_runtime_1.jsx)("div", { style: FIXED_STYLE, className: "p3-rec-bar-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: "p3-rec-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: "p3-rec-dot", style: isPaused
|
|
108
|
+
? { animationPlayState: "paused", opacity: 0.4 }
|
|
109
|
+
: undefined }), (0, jsx_runtime_1.jsx)("span", { className: "p3-rec-timer", children: formatTime(recorder.duration) }), (0, jsx_runtime_1.jsxs)("span", { className: "p3-rec-controls", children: [isPaused ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-ctrl", onClick: recorder.resume, "aria-label": "Resume", "data-tooltip": "Resume", children: (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, { size: 12 }) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-ctrl", onClick: recorder.pause, "aria-label": "Pause", "data-tooltip": "Pause", children: (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, { size: 12 }) })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-ctrl", onClick: recorder.restart, "aria-label": "Restart", "data-tooltip": "Restart", children: (0, jsx_runtime_1.jsx)(icons_1.RestartIcon, { size: 12 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-ctrl p3-rec-ctrl--danger", onClick: recorder.discard, "aria-label": "Discard", "data-tooltip": "Discard", children: (0, jsx_runtime_1.jsx)(icons_1.TrashIcon, { size: 12 }) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "p3-rec-stop", onClick: recorder.stop, children: [(0, jsx_runtime_1.jsx)(icons_1.StopCircleIcon, { size: 12 }), "Stop"] })] })] }) }));
|
|
110
|
+
}
|
|
111
|
+
else if (recorder.state === "stopping") {
|
|
112
|
+
globalUI = ((0, jsx_runtime_1.jsx)("div", { style: FIXED_STYLE, className: "p3-rec-bar-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "p3-rec-bar", style: {
|
|
113
|
+
background: "#f0f9ff",
|
|
114
|
+
borderColor: "#bae6fd",
|
|
115
|
+
}, children: (0, jsx_runtime_1.jsx)("span", { className: "p3-rec-timer", style: { color: "#0369a1" }, children: "Processing\u2026" }) }) }));
|
|
116
|
+
}
|
|
117
|
+
else if (recorder.state === "preview") {
|
|
118
|
+
globalUI = ((0, jsx_runtime_1.jsx)("div", { style: FIXED_STYLE, className: "p3-rec-bar-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: "p3-rec-preview", children: [(0, jsx_runtime_1.jsx)(recorder_preview_player_1.RecorderPreviewPlayer, { previewUrl: recorder.previewUrl, cameraPreviewUrl: recorder.cameraPreviewUrl, duration: recorder.duration, pipWidth: pipWidth }), (0, jsx_runtime_1.jsxs)("div", { className: "p3-rec-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "p3-rec-attach", onClick: () => void handleAttach(), disabled: isAttaching || recorder.isFinalizing, children: [(0, jsx_runtime_1.jsx)(icons_1.CheckCircleIcon, { size: 12 }), isAttaching || recorder.isFinalizing ? "Preparing..." : "Attach"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "p3-rec-discard", onClick: recorder.discard, children: [(0, jsx_runtime_1.jsx)(icons_1.TrashIcon, { size: 12 }), "Discard"] })] })] }) }));
|
|
119
|
+
}
|
|
120
|
+
return ((0, jsx_runtime_1.jsxs)(ScreenRecorderContext.Provider, { value: value, children: [children, canPortal && globalUI
|
|
121
|
+
? (0, react_dom_1.createPortal)(globalUI, document.body)
|
|
122
|
+
: null] }));
|
|
123
|
+
}
|
|
124
|
+
//# sourceMappingURL=screen-recorder-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"screen-recorder-context.js","sourceRoot":"","sources":["../src/screen-recorder-context.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type RecorderControllerOptions, type RecorderAttachmentMetadata } from "./use-recorder-controller";
|
|
3
|
+
import type { TriageUploadTarget } from "./triage-ui-controller";
|
|
4
|
+
export interface ScreenRecorderProps extends RecorderControllerOptions {
|
|
5
|
+
/** Called when the user clicks "Attach" with the recorded blob. */
|
|
6
|
+
onAttach: (blob: Blob, metadata?: RecorderAttachmentMetadata) => void | Promise<void>;
|
|
7
|
+
/** Hide the idle/requesting trigger so a host app can launch recording itself. */
|
|
8
|
+
hideIdleTrigger?: boolean;
|
|
9
|
+
/** Shared recorder attach target when using ScreenRecorderProvider. */
|
|
10
|
+
target?: TriageUploadTarget;
|
|
11
|
+
}
|
|
12
|
+
export interface ScreenRecorderHandle {
|
|
13
|
+
start: () => Promise<void>;
|
|
14
|
+
}
|
|
15
|
+
export declare const ScreenRecorder: React.ForwardRefExoticComponent<ScreenRecorderProps & React.RefAttributes<ScreenRecorderHandle>>;
|
|
16
|
+
//# sourceMappingURL=screen-recorder.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"screen-recorder.d.ts","sourceRoot":"","sources":["../src/screen-recorder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAChC,MAAM,2BAA2B,CAAC;AAYnC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB;IACpE,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,0BAA0B,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtF,kFAAkF;IAClF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAgBD,eAAO,MAAM,cAAc,kGAwPzB,CAAC"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.ScreenRecorder = void 0;
|
|
37
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const react_dom_1 = require("react-dom");
|
|
40
|
+
const use_recorder_controller_1 = require("./use-recorder-controller");
|
|
41
|
+
const screen_recorder_context_1 = require("./screen-recorder-context");
|
|
42
|
+
const icons_1 = require("./icons");
|
|
43
|
+
const recorder_preview_player_1 = require("./recorder-preview-player");
|
|
44
|
+
function formatTime(seconds) {
|
|
45
|
+
const m = Math.floor(seconds / 60);
|
|
46
|
+
const s = seconds % 60;
|
|
47
|
+
return `${m}:${s.toString().padStart(2, "0")}`;
|
|
48
|
+
}
|
|
49
|
+
const FIXED_BAR_STYLE = {
|
|
50
|
+
position: "fixed",
|
|
51
|
+
bottom: 16,
|
|
52
|
+
left: 16,
|
|
53
|
+
zIndex: 2147483647,
|
|
54
|
+
boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
|
|
55
|
+
};
|
|
56
|
+
exports.ScreenRecorder = react_1.default.forwardRef(function ScreenRecorder({ onAttach, hideIdleTrigger = false, target = "submission", ...opts }, ref) {
|
|
57
|
+
const ctx = (0, screen_recorder_context_1.useScreenRecorderContext)();
|
|
58
|
+
const localRecorder = (0, use_recorder_controller_1.useRecorderController)(opts);
|
|
59
|
+
const [isAttaching, setIsAttaching] = (0, react_1.useState)(false);
|
|
60
|
+
const recorder = ctx?.recorder ?? localRecorder;
|
|
61
|
+
const useGlobalUI = ctx != null;
|
|
62
|
+
(0, react_1.useEffect)(() => {
|
|
63
|
+
if (!useGlobalUI)
|
|
64
|
+
return;
|
|
65
|
+
ctx.setOnAttach(onAttach);
|
|
66
|
+
ctx.setTargetOnAttach(target, onAttach);
|
|
67
|
+
}, [useGlobalUI, onAttach, ctx, target]);
|
|
68
|
+
const startRecording = (0, react_1.useCallback)(async () => {
|
|
69
|
+
ctx?.setActiveTarget(target);
|
|
70
|
+
await recorder.start();
|
|
71
|
+
}, [ctx, recorder, target]);
|
|
72
|
+
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
73
|
+
start: startRecording,
|
|
74
|
+
}), [startRecording]);
|
|
75
|
+
const { state, duration, previewUrl, cameraPreviewUrl, error, isSupported, stop, pause, resume, restart, discard, isFinalizing, ensureFinalizedBlob, } = recorder;
|
|
76
|
+
const handleAttach = (0, react_1.useCallback)(async () => {
|
|
77
|
+
setIsAttaching(true);
|
|
78
|
+
try {
|
|
79
|
+
const finalized = await ensureFinalizedBlob();
|
|
80
|
+
if (finalized) {
|
|
81
|
+
await Promise.resolve(onAttach(finalized.blob, finalized.metadata ?? { durationSeconds: duration }));
|
|
82
|
+
discard();
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
finally {
|
|
86
|
+
setIsAttaching(false);
|
|
87
|
+
}
|
|
88
|
+
}, [ensureFinalizedBlob, onAttach, discard, duration]);
|
|
89
|
+
if (!isSupported)
|
|
90
|
+
return null;
|
|
91
|
+
if (hideIdleTrigger && state === "idle") {
|
|
92
|
+
return null;
|
|
93
|
+
}
|
|
94
|
+
if (state === "idle" || state === "error") {
|
|
95
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "p3-rec", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-icon-btn", onClick: startRecording, "aria-label": "Start screen recording", title: "Start screen recording", children: (0, jsx_runtime_1.jsx)(icons_1.VideoCameraFrontOutlinedIcon, { size: 16 }) }), error && (0, jsx_runtime_1.jsx)("p", { className: "p3-rec-error", children: error.message })] }));
|
|
96
|
+
}
|
|
97
|
+
if (hideIdleTrigger && state === "requesting") {
|
|
98
|
+
return null;
|
|
99
|
+
}
|
|
100
|
+
if (state === "requesting") {
|
|
101
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "p3-rec", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-icon-btn", disabled: true, "aria-label": "Starting screen recording", title: "Starting screen recording", children: (0, jsx_runtime_1.jsx)(icons_1.VideoCameraFrontOutlinedIcon, { size: 16 }) }) }));
|
|
102
|
+
}
|
|
103
|
+
if (useGlobalUI)
|
|
104
|
+
return null;
|
|
105
|
+
if (state === "recording" || state === "paused") {
|
|
106
|
+
const isPaused = state === "paused";
|
|
107
|
+
const barContent = ((0, jsx_runtime_1.jsx)("div", { style: FIXED_BAR_STYLE, className: "p3-rec-bar-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: "p3-rec-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: "p3-rec-dot", style: isPaused ? { animationPlayState: "paused", opacity: 0.4 } : undefined }), (0, jsx_runtime_1.jsx)("span", { className: "p3-rec-timer", children: formatTime(duration) }), (0, jsx_runtime_1.jsxs)("span", { className: "p3-rec-controls", children: [isPaused ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-ctrl", onClick: resume, "aria-label": "Resume", "data-tooltip": "Resume", children: (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, { size: 12 }) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-ctrl", onClick: pause, "aria-label": "Pause", "data-tooltip": "Pause", children: (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, { size: 12 }) })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-ctrl", onClick: restart, "aria-label": "Restart", "data-tooltip": "Restart", children: (0, jsx_runtime_1.jsx)(icons_1.RestartIcon, { size: 12 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "p3-rec-ctrl p3-rec-ctrl--danger", onClick: discard, "aria-label": "Discard", "data-tooltip": "Discard", children: (0, jsx_runtime_1.jsx)(icons_1.TrashIcon, { size: 12 }) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "p3-rec-stop", onClick: stop, children: [(0, jsx_runtime_1.jsx)(icons_1.StopCircleIcon, { size: 12 }), "Stop"] })] })] }) }));
|
|
108
|
+
if (typeof document !== "undefined" && document.body) {
|
|
109
|
+
return (0, react_dom_1.createPortal)(barContent, document.body);
|
|
110
|
+
}
|
|
111
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "p3-rec", children: (0, jsx_runtime_1.jsx)("div", { className: "p3-rec-bar", children: barContent.props.children }) }));
|
|
112
|
+
}
|
|
113
|
+
if (state === "stopping") {
|
|
114
|
+
const processingContent = ((0, jsx_runtime_1.jsx)("div", { style: FIXED_BAR_STYLE, className: "p3-rec-bar-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "p3-rec-bar", style: { background: "#f0f9ff", borderColor: "#bae6fd" }, children: (0, jsx_runtime_1.jsx)("span", { className: "p3-rec-timer", style: { color: "#0369a1" }, children: "Processing\u2026" }) }) }));
|
|
115
|
+
if (typeof document !== "undefined" && document.body) {
|
|
116
|
+
return (0, react_dom_1.createPortal)(processingContent, document.body);
|
|
117
|
+
}
|
|
118
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "p3-rec", children: (0, jsx_runtime_1.jsx)("div", { className: "p3-rec-bar", style: { background: "#f0f9ff", borderColor: "#bae6fd" }, children: (0, jsx_runtime_1.jsx)("span", { className: "p3-rec-timer", style: { color: "#0369a1" }, children: "Processing\u2026" }) }) }));
|
|
119
|
+
}
|
|
120
|
+
// state === "preview"
|
|
121
|
+
const pipWidth = opts.pipScale
|
|
122
|
+
? `${Math.round(opts.pipScale * 100)}%`
|
|
123
|
+
: "20%";
|
|
124
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "p3-rec", children: (0, jsx_runtime_1.jsxs)("div", { className: "p3-rec-preview", children: [(0, jsx_runtime_1.jsx)(recorder_preview_player_1.RecorderPreviewPlayer, { previewUrl: previewUrl, cameraPreviewUrl: cameraPreviewUrl, duration: duration, pipWidth: pipWidth }), (0, jsx_runtime_1.jsxs)("div", { className: "p3-rec-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "p3-rec-attach", onClick: () => void handleAttach(), disabled: isAttaching || isFinalizing, children: [(0, jsx_runtime_1.jsx)(icons_1.CheckCircleIcon, { size: 12 }), isAttaching || isFinalizing ? "Preparing..." : "Attach"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "p3-rec-discard", onClick: discard, children: [(0, jsx_runtime_1.jsx)(icons_1.TrashIcon, { size: 12 }), "Discard"] })] })] }) }));
|
|
125
|
+
});
|
|
126
|
+
//# sourceMappingURL=screen-recorder.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"screen-recorder.js","sourceRoot":"","sources":["../src/screen-recorder.tsx"],"names":[],"mappings":"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"}
|
package/dist/styles.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,wBAAgB,UAAU,CAAC,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAG,MAAM,CAo0B3D"}
|