@ttt-productions/media-viewer 0.2.0 → 0.2.7
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/dist/audio-viewer.d.ts +2 -2
- package/dist/audio-viewer.d.ts.map +1 -1
- package/dist/audio-viewer.js +21 -10
- package/dist/audio-viewer.js.map +1 -1
- package/dist/components/media-job-status-list.d.ts +13 -0
- package/dist/components/media-job-status-list.d.ts.map +1 -0
- package/dist/components/media-job-status-list.js +57 -0
- package/dist/components/media-job-status-list.js.map +1 -0
- package/dist/fallback.d.ts +2 -2
- package/dist/fallback.d.ts.map +1 -1
- package/dist/fallback.js.map +1 -1
- package/dist/image-viewer.d.ts +2 -2
- package/dist/image-viewer.d.ts.map +1 -1
- package/dist/image-viewer.js +21 -9
- package/dist/image-viewer.js.map +1 -1
- package/dist/index.d.ts +6 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/media-viewer.d.ts +2 -2
- package/dist/media-viewer.d.ts.map +1 -1
- package/dist/media-viewer.js +0 -2
- package/dist/media-viewer.js.map +1 -1
- package/dist/types.d.ts +22 -17
- package/dist/types.d.ts.map +1 -1
- package/dist/video-viewer.d.ts +2 -2
- package/dist/video-viewer.d.ts.map +1 -1
- package/dist/video-viewer.js +30 -10
- package/dist/video-viewer.js.map +1 -1
- package/package.json +7 -3
package/dist/audio-viewer.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare function AudioViewer(props:
|
|
1
|
+
import type { MediaViewerProps } from "./types";
|
|
2
|
+
export declare function AudioViewer(props: MediaViewerProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=audio-viewer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"audio-viewer.d.ts","sourceRoot":"","sources":["../src/audio-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"audio-viewer.d.ts","sourceRoot":"","sources":["../src/audio-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAmDlD"}
|
package/dist/audio-viewer.js
CHANGED
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import { MediaFallbackLink, shouldShowFallback } from "./fallback";
|
|
4
3
|
export function AudioViewer(props) {
|
|
5
|
-
const { url, className, mediaClassName,
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
const { url, className, mediaClassName, controls = true, autoPlay, loop, } = props;
|
|
5
|
+
const audioRef = React.useRef(null);
|
|
6
|
+
// Only add "tap-to-toggle" when controls are OFF (prevents jank)
|
|
7
|
+
const togglePlay = React.useCallback(() => {
|
|
8
|
+
const el = audioRef.current;
|
|
9
|
+
if (!el)
|
|
10
|
+
return;
|
|
11
|
+
if (el.paused)
|
|
12
|
+
void el.play().catch(() => { });
|
|
13
|
+
else
|
|
14
|
+
el.pause();
|
|
15
|
+
}, []);
|
|
16
|
+
const onKeyDown = React.useCallback((e) => {
|
|
17
|
+
if (controls)
|
|
18
|
+
return;
|
|
19
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
togglePlay();
|
|
22
|
+
}
|
|
23
|
+
}, [controls, togglePlay]);
|
|
24
|
+
return (_jsx("div", { className: className, role: controls ? undefined : "button", tabIndex: controls ? undefined : 0, "aria-label": controls ? undefined : "Toggle audio playback", onClick: controls ? undefined : togglePlay, onKeyDown: controls ? undefined : onKeyDown, style: { outline: "none" }, children: _jsx("audio", { ref: audioRef, src: url, className: mediaClassName, controls: controls, autoPlay: autoPlay, loop: loop }) }));
|
|
14
25
|
}
|
|
15
26
|
//# sourceMappingURL=audio-viewer.js.map
|
package/dist/audio-viewer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"audio-viewer.js","sourceRoot":"","sources":["../src/audio-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"audio-viewer.js","sourceRoot":"","sources":["../src/audio-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,GAAG,EACH,SAAS,EACT,cAAc,EACd,QAAQ,GAAG,IAAI,EACf,QAAQ,EACR,IAAI,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE7D,iEAAiE;IACjE,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,EAAE,CAAC,MAAM;YAAE,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;;YACzC,EAAE,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,gBACtB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,EAC1D,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAC1C,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAE1B,gBACE,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACV,GACE,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { MediaJobStatusPayload } from "@ttt-productions/media-contracts";
|
|
2
|
+
export interface MediaJobStatusListProps {
|
|
3
|
+
items: MediaJobStatusPayload[];
|
|
4
|
+
className?: string;
|
|
5
|
+
/** default: 24 */
|
|
6
|
+
recentHours?: number;
|
|
7
|
+
/** default: true */
|
|
8
|
+
showOnlyRecent?: boolean;
|
|
9
|
+
/** default: 50 */
|
|
10
|
+
maxItems?: number;
|
|
11
|
+
}
|
|
12
|
+
export declare function MediaJobStatusList(props: MediaJobStatusListProps): import("react/jsx-runtime").JSX.Element | null;
|
|
13
|
+
//# sourceMappingURL=media-job-status-list.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-job-status-list.d.ts","sourceRoot":"","sources":["../../src/components/media-job-status-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAI9E,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oBAAoB;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA+BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,kDAyEhE"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Badge, Card, Progress, cn } from "@ttt-productions/ui-core";
|
|
4
|
+
import { AlertCircle, CheckCircle2, Clock3, Loader2, UploadCloud, XCircle } from "lucide-react";
|
|
5
|
+
function getUpdatedAtMs(x) {
|
|
6
|
+
const v = x.updatedAt;
|
|
7
|
+
if (!v)
|
|
8
|
+
return Date.now();
|
|
9
|
+
if (typeof v === "number")
|
|
10
|
+
return v;
|
|
11
|
+
const t = Date.parse(v);
|
|
12
|
+
return Number.isFinite(t) ? t : Date.now();
|
|
13
|
+
}
|
|
14
|
+
function statusMeta(status) {
|
|
15
|
+
switch (status) {
|
|
16
|
+
case "uploading":
|
|
17
|
+
return { label: "Uploading", icon: UploadCloud, badge: "secondary" };
|
|
18
|
+
case "queued":
|
|
19
|
+
return { label: "Queued", icon: Clock3, badge: "secondary" };
|
|
20
|
+
case "processing":
|
|
21
|
+
return { label: "AI Processing", icon: Loader2, badge: "secondary" };
|
|
22
|
+
case "ready":
|
|
23
|
+
return { label: "Ready", icon: CheckCircle2, badge: "default" };
|
|
24
|
+
case "rejected":
|
|
25
|
+
return { label: "Rejected", icon: XCircle, badge: "destructive" };
|
|
26
|
+
case "failed":
|
|
27
|
+
return { label: "Failed", icon: AlertCircle, badge: "destructive" };
|
|
28
|
+
case "selecting":
|
|
29
|
+
return { label: "Selecting", icon: Clock3, badge: "secondary" };
|
|
30
|
+
default:
|
|
31
|
+
return { label: String(status), icon: Clock3, badge: "secondary" };
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
export function MediaJobStatusList(props) {
|
|
35
|
+
const { items, className, recentHours = 24, showOnlyRecent = true, maxItems = 50, } = props;
|
|
36
|
+
const now = Date.now();
|
|
37
|
+
const cutoff = now - recentHours * 60 * 60 * 1000;
|
|
38
|
+
const list = items
|
|
39
|
+
.slice()
|
|
40
|
+
.sort((a, b) => getUpdatedAtMs(b) - getUpdatedAtMs(a))
|
|
41
|
+
.filter((x) => (showOnlyRecent ? getUpdatedAtMs(x) >= cutoff : true))
|
|
42
|
+
.slice(0, maxItems);
|
|
43
|
+
if (!list.length)
|
|
44
|
+
return null;
|
|
45
|
+
return (_jsxs(Card, { className: cn("p-3 space-y-2", className), children: [_jsx("div", { className: "text-sm font-medium", children: "Uploads" }), _jsx("div", { className: "space-y-2", children: list.map((it, idx) => {
|
|
46
|
+
const meta = statusMeta(it.status);
|
|
47
|
+
const Icon = meta.icon;
|
|
48
|
+
const progress = it.status === "uploading"
|
|
49
|
+
? Math.max(0, Math.min(100, Math.round((it.progress ?? 0) * 100)))
|
|
50
|
+
: it.status === "ready"
|
|
51
|
+
? 100
|
|
52
|
+
: undefined;
|
|
53
|
+
const updatedAt = new Date(getUpdatedAtMs(it)).toLocaleString();
|
|
54
|
+
return (_jsxs("div", { className: "rounded-lg border p-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(Icon, { className: cn("h-4 w-4", it.status === "processing" ? "animate-spin" : "") }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: meta.badge, children: meta.label }), it.mediaDocId ? (_jsx("span", { className: "text-xs text-muted-foreground truncate", children: it.mediaDocId })) : null] }), _jsx("div", { className: "text-xs text-muted-foreground truncate", children: updatedAt })] })] }), it.reasonCode ? (_jsx("span", { className: "text-xs text-muted-foreground", children: it.reasonCode })) : null] }), typeof progress === "number" ? (_jsxs("div", { className: "mt-2 space-y-1", children: [_jsx(Progress, { value: progress }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [progress, "%"] })] })) : null] }, `${it.mediaDocId ?? "item"}-${idx}`));
|
|
55
|
+
}) })] }));
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=media-job-status-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-job-status-list.js","sourceRoot":"","sources":["../../src/components/media-job-status-list.tsx"],"names":[],"mappings":"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"}
|
package/dist/fallback.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { FallbackMode } from "./types";
|
|
2
2
|
export declare function MediaFallbackLink(props: {
|
|
3
3
|
url: string;
|
|
4
4
|
filename?: string;
|
|
5
5
|
className?: string;
|
|
6
6
|
label?: string;
|
|
7
7
|
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export declare function shouldShowFallback(mode:
|
|
8
|
+
export declare function shouldShowFallback(mode: FallbackMode | undefined): boolean;
|
|
9
9
|
//# sourceMappingURL=fallback.d.ts.map
|
package/dist/fallback.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fallback.d.ts","sourceRoot":"","sources":["../src/fallback.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"fallback.d.ts","sourceRoot":"","sources":["../src/fallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAcA;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,CAE1E"}
|
package/dist/fallback.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fallback.js","sourceRoot":"","sources":["../src/fallback.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"fallback.js","sourceRoot":"","sources":["../src/fallback.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,iBAAiB,CAAC,KAKjC;IACC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElD,OAAO,CACL,YACE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,SAAS,EAAE,SAAS,YAEnB,KAAK,IAAI,UAAU,GAClB,CACL,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAA8B;IAC/D,OAAO,IAAI,KAAK,MAAM,CAAC;AACzB,CAAC"}
|
package/dist/image-viewer.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare function ImageViewer(props:
|
|
1
|
+
import type { MediaViewerProps } from "./types";
|
|
2
|
+
export declare function ImageViewer(props: MediaViewerProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=image-viewer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-viewer.d.ts","sourceRoot":"","sources":["../src/image-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"image-viewer.d.ts","sourceRoot":"","sources":["../src/image-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA+ClD"}
|
package/dist/image-viewer.js
CHANGED
|
@@ -1,15 +1,27 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import { MediaFallbackLink, shouldShowFallback } from "./fallback";
|
|
4
3
|
export function ImageViewer(props) {
|
|
5
|
-
const { url, alt, className, mediaClassName,
|
|
6
|
-
const [
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
const { url, alt, className, mediaClassName, enableZoom = true } = props;
|
|
5
|
+
const [zoomed, setZoomed] = React.useState(false);
|
|
6
|
+
const toggleZoom = React.useCallback(() => {
|
|
7
|
+
if (!enableZoom)
|
|
8
|
+
return;
|
|
9
|
+
setZoomed((z) => !z);
|
|
10
|
+
}, [enableZoom]);
|
|
11
|
+
const onKeyDown = React.useCallback((e) => {
|
|
12
|
+
if (!enableZoom)
|
|
13
|
+
return;
|
|
14
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
15
|
+
e.preventDefault();
|
|
16
|
+
toggleZoom();
|
|
17
|
+
}
|
|
18
|
+
}, [enableZoom, toggleZoom]);
|
|
19
|
+
return (_jsx("div", { className: className, role: enableZoom ? "button" : undefined, tabIndex: enableZoom ? 0 : undefined, "aria-pressed": enableZoom ? zoomed : undefined, "aria-label": enableZoom ? (zoomed ? "Zoom out image" : "Zoom in image") : undefined, onClick: toggleZoom, onKeyDown: onKeyDown, style: { outline: "none" }, children: _jsx("img", { src: url, alt: alt ?? "", draggable: false, className: mediaClassName, style: {
|
|
20
|
+
maxWidth: "100%",
|
|
21
|
+
maxHeight: "100%",
|
|
22
|
+
transition: "transform 0.15s ease",
|
|
23
|
+
transform: zoomed ? "scale(1.5)" : "scale(1)",
|
|
24
|
+
cursor: enableZoom ? (zoomed ? "zoom-out" : "zoom-in") : undefined,
|
|
13
25
|
} }) }));
|
|
14
26
|
}
|
|
15
27
|
//# sourceMappingURL=image-viewer.js.map
|
package/dist/image-viewer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-viewer.js","sourceRoot":"","sources":["../src/image-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"image-viewer.js","sourceRoot":"","sources":["../src/image-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,kBACtB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBACjC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAClF,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAE1B,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,IAAI,EAAE,EACd,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;gBAChB,SAAS,EAAE,MAAM;gBACjB,UAAU,EAAE,sBAAsB;gBAClC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;gBAC7C,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;aACnE,GACD,GACE,CACP,CAAC;AACJ,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
1
|
+
export { MediaViewer, MediaPreview } from "./media-viewer";
|
|
2
|
+
export type { MediaViewerProps, MediaViewerType, FallbackMode } from "./types";
|
|
3
|
+
export { ImageViewer } from "./image-viewer";
|
|
4
|
+
export { VideoViewer } from "./video-viewer";
|
|
5
|
+
export { AudioViewer } from "./audio-viewer";
|
|
6
|
+
export { MediaFallbackLink, shouldShowFallback } from "./fallback";
|
|
6
7
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3D,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
1
|
+
export { MediaViewer, MediaPreview } from "./media-viewer";
|
|
2
|
+
export { ImageViewer } from "./image-viewer";
|
|
3
|
+
export { VideoViewer } from "./video-viewer";
|
|
4
|
+
export { AudioViewer } from "./audio-viewer";
|
|
5
|
+
export { MediaFallbackLink, shouldShowFallback } from "./fallback";
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/media-viewer.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare function MediaViewer(props:
|
|
1
|
+
import type { MediaViewerProps } from "./types";
|
|
2
|
+
export declare function MediaViewer(props: MediaViewerProps): import("react/jsx-runtime").JSX.Element | null;
|
|
3
3
|
/** Back-compat alias */
|
|
4
4
|
export declare const MediaPreview: typeof MediaViewer;
|
|
5
5
|
//# sourceMappingURL=media-viewer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-viewer.d.ts","sourceRoot":"","sources":["../src/media-viewer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"media-viewer.d.ts","sourceRoot":"","sources":["../src/media-viewer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAmB,MAAM,SAAS,CAAC;AAcjE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAclD;AAED,wBAAwB;AACxB,eAAO,MAAM,YAAY,oBAAc,CAAC"}
|
package/dist/media-viewer.js
CHANGED
|
@@ -20,8 +20,6 @@ export function MediaViewer(props) {
|
|
|
20
20
|
return _jsx(VideoViewer, { ...props, type: "video" });
|
|
21
21
|
if (t === "audio")
|
|
22
22
|
return _jsx(AudioViewer, { ...props, type: "audio" });
|
|
23
|
-
// future: pdf
|
|
24
|
-
// if (t === "pdf") ...
|
|
25
23
|
return shouldShowFallback(fallbackMode) ? (_jsx("div", { className: className, children: _jsx(MediaFallbackLink, { url: url, filename: filename, label: fallbackLabel ?? "Download" }) })) : null;
|
|
26
24
|
}
|
|
27
25
|
/** Back-compat alias */
|
package/dist/media-viewer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-viewer.js","sourceRoot":"","sources":["../src/media-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAI1E,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,SAAS,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"media-viewer.js","sourceRoot":"","sources":["../src/media-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAI1E,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,SAAS,SAAS,CAAC,KAA+D;IAChF,IAAI,KAAK,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC,IAAI,CAAC;IAElC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC;IACnD,MAAM,UAAU,GAAwB,sBAAsB,CAAC,IAAI,CAAC,CAAC;IACrE,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,GAAG,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3B,IAAI,CAAC,KAAK,OAAO;QAAE,OAAO,KAAC,WAAW,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;IAClE,IAAI,CAAC,KAAK,OAAO;QAAE,OAAO,KAAC,WAAW,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;IAClE,IAAI,CAAC,KAAK,OAAO;QAAE,OAAO,KAAC,WAAW,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;IAElE,OAAO,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CACxC,cAAK,SAAS,EAAE,SAAS,YACvB,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,IAAI,UAAU,GAAI,GACnF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED,wBAAwB;AACxB,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,27 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
export type
|
|
3
|
-
export type
|
|
4
|
-
|
|
5
|
-
url: string;
|
|
6
|
-
/** Optional explicit type; otherwise inferred from mime/name/url. */
|
|
1
|
+
export type MediaViewerType = "image" | "video" | "audio" | "other";
|
|
2
|
+
export type FallbackMode = "none" | "link";
|
|
3
|
+
export type MediaViewerProps = {
|
|
4
|
+
/** If omitted, inferred from mime/name/url. */
|
|
7
5
|
type?: MediaViewerType;
|
|
8
|
-
/**
|
|
6
|
+
/** Required media URL */
|
|
7
|
+
url: string;
|
|
8
|
+
/** Optional hints for inference */
|
|
9
9
|
mime?: string;
|
|
10
10
|
name?: string;
|
|
11
|
+
/** Optional download filename (fallback link) */
|
|
12
|
+
filename?: string;
|
|
11
13
|
/** Wrapper class */
|
|
12
14
|
className?: string;
|
|
13
15
|
/** Media element class */
|
|
14
16
|
mediaClassName?: string;
|
|
15
|
-
/**
|
|
17
|
+
/** Accessibility for images */
|
|
16
18
|
alt?: string;
|
|
17
|
-
/**
|
|
18
|
-
|
|
19
|
-
/** Called when the underlying media element errors. */
|
|
20
|
-
onError?: (error: unknown) => void;
|
|
21
|
-
/** Generic fallback behavior when type is unknown or render fails. */
|
|
22
|
-
fallbackMode?: MediaViewerFallbackMode;
|
|
23
|
-
/** Link label override */
|
|
19
|
+
/** Fallback rendering */
|
|
20
|
+
fallbackMode?: FallbackMode;
|
|
24
21
|
fallbackLabel?: string;
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
/** Image */
|
|
23
|
+
enableZoom?: boolean;
|
|
24
|
+
/** Video */
|
|
25
|
+
controls?: boolean;
|
|
26
|
+
autoPlay?: boolean;
|
|
27
|
+
muted?: boolean;
|
|
28
|
+
loop?: boolean;
|
|
29
|
+
posterUrl?: string;
|
|
30
|
+
enableFullscreen?: boolean;
|
|
31
|
+
};
|
|
27
32
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AACpE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB,yBAAyB;IACzB,GAAG,EAAE,MAAM,CAAC;IAEZ,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0BAA0B;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yBAAyB;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,YAAY;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAI5B,CAAC"}
|
package/dist/video-viewer.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare function VideoViewer(props:
|
|
1
|
+
import type { MediaViewerProps } from "./types";
|
|
2
|
+
export declare function VideoViewer(props: MediaViewerProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=video-viewer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video-viewer.d.ts","sourceRoot":"","sources":["../src/video-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"video-viewer.d.ts","sourceRoot":"","sources":["../src/video-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsElD"}
|
package/dist/video-viewer.js
CHANGED
|
@@ -1,15 +1,35 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import { MediaFallbackLink, shouldShowFallback } from "./fallback";
|
|
4
3
|
export function VideoViewer(props) {
|
|
5
|
-
const { url, className, mediaClassName,
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
const { url, className, mediaClassName, controls = true, autoPlay, muted, loop, posterUrl, enableFullscreen = true, } = props;
|
|
5
|
+
const videoRef = React.useRef(null);
|
|
6
|
+
const requestFullscreen = React.useCallback(() => {
|
|
7
|
+
if (!enableFullscreen)
|
|
8
|
+
return;
|
|
9
|
+
const el = videoRef.current;
|
|
10
|
+
if (!el)
|
|
11
|
+
return;
|
|
12
|
+
const fn = el.requestFullscreen ||
|
|
13
|
+
el.webkitRequestFullscreen ||
|
|
14
|
+
el.mozRequestFullScreen ||
|
|
15
|
+
el.msRequestFullscreen;
|
|
16
|
+
if (typeof fn === "function") {
|
|
17
|
+
try {
|
|
18
|
+
fn.call(el);
|
|
19
|
+
}
|
|
20
|
+
catch {
|
|
21
|
+
// ignore
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}, [enableFullscreen]);
|
|
25
|
+
const onKeyDown = React.useCallback((e) => {
|
|
26
|
+
if (!enableFullscreen)
|
|
27
|
+
return;
|
|
28
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
29
|
+
e.preventDefault();
|
|
30
|
+
requestFullscreen();
|
|
31
|
+
}
|
|
32
|
+
}, [enableFullscreen, requestFullscreen]);
|
|
33
|
+
return (_jsx("div", { className: className, role: enableFullscreen ? "button" : undefined, tabIndex: enableFullscreen ? 0 : undefined, "aria-label": enableFullscreen ? "Open video fullscreen" : undefined, onDoubleClick: requestFullscreen, onKeyDown: onKeyDown, style: { outline: "none" }, children: _jsx("video", { ref: videoRef, src: url, className: mediaClassName, controls: controls, autoPlay: autoPlay, muted: muted, loop: loop, playsInline: true, poster: posterUrl, style: { width: "100%", height: "100%" } }) }));
|
|
14
34
|
}
|
|
15
35
|
//# sourceMappingURL=video-viewer.js.map
|
package/dist/video-viewer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video-viewer.js","sourceRoot":"","sources":["../src/video-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"video-viewer.js","sourceRoot":"","sources":["../src/video-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,GAAG,EACH,SAAS,EACT,cAAc,EACd,QAAQ,GAAG,IAAI,EACf,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,EACT,gBAAgB,GAAG,IAAI,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE7D,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC/C,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAC9B,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAc,CAAC;QACnC,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,EAAE,GACN,EAAE,CAAC,iBAAiB;YACpB,EAAE,CAAC,uBAAuB;YAC1B,EAAE,CAAC,oBAAoB;YACvB,EAAE,CAAC,mBAAmB,CAAC;QAEzB,IAAI,OAAO,EAAE,KAAK,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC;gBACH,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACd,CAAC;YAAC,MAAM,CAAC;gBACP,SAAS;YACX,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,iBAAiB,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,EACD,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CACtC,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7C,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC9B,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS,EAClE,aAAa,EAAE,iBAAiB,EAChC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAE1B,gBACE,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,WAAW,QACX,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GACxC,GACE,CACP,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttt-productions/media-viewer",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.7",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/ttt-productions/ttt-packages.git",
|
|
@@ -26,10 +26,14 @@
|
|
|
26
26
|
"typecheck": "tsc --noEmit",
|
|
27
27
|
"prepublishOnly": "npm run clean && npm run build"
|
|
28
28
|
},
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@ttt-productions/media-contracts": "^0.2.4",
|
|
31
|
+
"@ttt-productions/ui-core": "^0.2.3"
|
|
32
|
+
},
|
|
29
33
|
"peerDependencies": {
|
|
30
|
-
"@ttt-productions/media-contracts": ">=0.0.0",
|
|
31
34
|
"react": ">=18.0.0",
|
|
32
|
-
"react-dom": ">=18.0.0"
|
|
35
|
+
"react-dom": ">=18.0.0",
|
|
36
|
+
"lucide-react": ">=0.0.0"
|
|
33
37
|
},
|
|
34
38
|
"devDependencies": {
|
|
35
39
|
"typescript": "^5.8.3"
|