@ai-matrx/ 媒体
媒体组成部分 只是工作时 具有持久文件系统。 制作人
图像、视频、音频和文件缩略图,这些缩略图需要持久的参考——a
file_id 或永久的公共 URL ——并拥有整个 URL 生命周期 :
解析, 认证运输, 负载错误回收, 键入不可用状态,
上传进度,并共享/下载/副本/打开动作.
货船 零运输所有数据形状都通过
一个注入端口 MediaClient。这就是重点:每一次媒体中断
我们曾经运送的代码 是手建的URL或 <img>这里
正确路径是类型允许的唯一路径.
@ai-matrx/media types only — MediaRef, DurableSrc, MediaClient, host ports
@ai-matrx/media/core headless React hooks (platform-free state machines)
@ai-matrx/media/react DOM components (Tailwind classes, inlined SVG icons)
@ai-matrx/media/share the complete share popover body (optional peer: @ai-matrx/associations)
执行的规则类型
- 软件包从不获取媒体 URL 本身 . 字节仅通过
MediaClient.getBlob。 。 。 . - 每一个部件都有一个参考,从来没有
src。 。 。 . 甚至一个呼叫器提供的 URL 字符串按resolve()从不相信. - 签名的 URL 是交接, 从来不是身份 . 媒体唯一的字符串
元素绑定是标记
DurableSrc,仅此MediaClient执行可以薄荷。 未到期的 URL 无法通过类型 不安全的铸造. - 股价未结清.
shareableUrl返回时null相当 发布一个签名的 URL; 未连接的动作会禁用 . - 一次复试政策. 装入错误路径通过
MediaClient.recoverLoadError(会场刷新) – 同- URL 重试 – (原始内容存档于2018-10-21). terminal. 套件本身没有重试逻辑.
快开始
import { MediaProvider } from "@ai-matrx/media/core";
import { InlineMediaRef, MediaThumbnail, MediaLightbox } from "@ai-matrx/media/react";
// `client` implements the MediaClient interface from "@ai-matrx/media".
// Matrx apps wire the canonical implementation from @ai-matrx/files/client;
// any structural implementation works.
<MediaProvider client={client} ports={{ ImageComponent, actions, playbackSession }}>
<InlineMediaRef ref={{ file_id }} size="md" fit="cover" />
<MediaThumbnail mediaRef={{ file_id }} fileName="report.pdf" />
</MediaProvider>
InlineMediaRef 接受一个 MediaRef (单位:千美元){ file_id, url?, mime_type? }页:1
赤裸的文件ID字符串,或外部的公开 URL 字符串——并制作一个
正确大小 <img> 编号 : <video> 编号 : <audio> 背负并提供信息
错误状态 . ref 是内容道具( 反应19); 使用 mediaElementRef 页:1
DOM进入.
无头钩( C)/core(中文(简体) )
| 钩子 | 它拥有的 |
|---|---|
useMediaResolution(ref) | 参考 MediaResolution 作为状态( e)empty 编号 : ready 编号 : unavailable 带有输入原因) |
useMediaLoadRecovery(src) | 重试键/误差机,以覆盖客户端的 ONE 回收政策 |
useMediaBlob(ref) | 有生命周期+释放的对象- URL 字节 |
useMediaUpload() | 单倍分批上传、进度和每个文件托盘(entries(中文(简体) ) |
useThumbnailSource(ref, opts) | 4级缩略图决定( 交接拇指 变体 活源 图标) |
useMediaActions(ref) | 共享/下载/复制/开放可用性+在注入动作端口执行 |
getFileKindDetails(name, mime) | 文件名/MIME = 类别、图标名称、颜色 |
构成部分(/react(中文(简体) )
InlineMediaRef • 妇女 MediaThumbnail • 妇女 FileIcon • 妇女 FileUploadDropzone (+ 数)
UploadProgressList, (中文(简体) ), useMediaDropzone· MediaActionToolbar • 妇女
MediaLightbox ——外加软件包自带的SVG图标集(无图标)
图书馆依赖).
动作和共享
主机注入 a MediaActionsPort (单位:千美元)share, (中文(简体) ), download, (中文(简体) ), copy, (中文(简体) ), open
管理人员和/或富人 SharePopover 页:1 工具栏和灯盒
使任何有线设备都无法工作
不碰这个包裹.
<MediaProvider client={client} ports={{ actions: { download, share, SharePopover } }}>
<MediaActionToolbar mediaRef={{ file_id }} fileName="photo.png" />
</MediaProvider>
完整的分享机构(/share(中文(简体) )
/share 船舱预留了船位
Matrx 分享经验 :
- 复制公共链接 ——一击问
MediaClient.shareableUrl(ref)页:1 真实永久的 URL( 主机执行重用或薄荷 a) 无过期共享链接, 或返回公共文件的永久 CDN URL) 并复制它.null失败已关闭 . - 外部参考 获得简化表面:安全的外部 URL 或 a 已禁用行.
- 管理所有链接 编号 : 谁能看到这个 属于主机槽
(单位:千美元)
manageLinks召回电话,AccessSummary——将库存与 可达性与宿主的iam表面相活. - 链接到/ 附加到.. - 协会负担,骑马
@ai-matrx/associations通过其公用钩. 他们点亮 当一个AssociationsProvider被挂在上方,在没有时被降解为缺席.
import { createMediaSharePopover } from "@ai-matrx/media/share";
const SharePopover = createMediaSharePopover({
manageLinks: (ctx) => openShareLinkDialog(ctx), // optional
AccessSummary, // optional host panel
notify: { success: toast.success, error: toast.error }, // optional
});
<MediaProvider client={client} ports={{ actions: { SharePopover, download, copy } }}>
{/* every toolbar/lightbox now opens the full share experience */}
</MediaProvider>
仅 /share 进口 @ai-matrx/associations 实际依赖,已安装
自动( 它带来 @ai-matrx/design-system 与它一样。 没有额外的
解析; 关联负担仍会降低到在运行时缺席, 如果没有
AssociationsProvider 包起树来. 其他的条目从来不碰它.
诊断——终极失败从不沉默
每死一死 resolve(),失败的私有像素字节,一个负载
错误 ONE 恢复重试无法修复, 失败的会话薄荷会释放
完全是一个严格型号 MediaFailureInfo —— 说 phase,持久 mediaRef
身份(从未签名的URL), status?, (中文(简体) ), retryOutcome?, (中文(简体) ), terminal, (中文(简体) ),
message - 每一个媒体身份都被绑住 所以重新投手永远不要垃圾邮件 捆绑
沉入错误系统 :
只有在React重新装入重试键后才能重新加价;
复制浏览器 error 来自会话中原元素的事件
刷新在飞行中被忽略 永远不要消耗真正的重试.
<MediaProvider
client={client}
ports={{ diagnostics: { capture: (info) => myErrorCapture(info) } }}
>
没有绑定的下沉软件包 console.error相同的有效载荷——通过
默认,绝不沉默。 狦 MediaClient.recoverLoadError 返回 a
MediaRecoveryReport 携带会话薄荷
secret_source: "ephemeral",软件包立即抓取全应用程序
警告私有制将突破服务器重启/启动.
文件查看器( E)/viewers(中文(简体) )
Full-pane 渲染 ONE 文件——预览面板,文件标签,代码编辑器
二进制文件倒置. MediaFileViewer 文件类型和船舶上的发送
文本、代码、SVG、HTML和未知文件的工作机构.
import { MediaFileViewer } from "@ai-matrx/media/viewers";
<MediaFileViewer
source={{ kind: "ref", ref: { file_id } }}
fileName={file.name}
fileSize={file.size}
generic={{ onDownload }}
/>;
Kinds的渲染是只使用重浏览器的引擎——PDF,Markdown, 电子表格, 办公室文件 - 是你的注册, 所以一个消费者只 显示从未带 PDF 引擎的文本文件 :
import { registerMediaViewer, registerMediaCodeHighlighter } from "@ai-matrx/media/viewers";
registerMediaViewer("pdf", MyPdfViewer); // gets MediaViewerProps
registerMediaCodeHighlighter(MyPrismHighlighter); // optional: color for code
在你注册之前,这种人会 宣布默认: 它的名称 缺少的引擎和补救, 仍然提供下载/ 视图- 文本。 这个 从来不是空白的窗帘。 (代码不同:没有显示器注册) 使完整——单空,行号,可复制——只是没有颜色, 所以它宣布什么也没有
正在注册软件包中已经使该软件包替换内置的 如何插入您自己的特定域查看器 .
这个 blob 源道( r){ kind: "blob", blob, url })使您成为字节
已经没有触摸过 MediaClient 一点也不.
下册.js/next(中文(简体) )
这个 ImageComponent 端口,已执行 next/image 所以你从不写
又是那个包裹. next 是一个可选的对等点——没有为您安装它,
并且没有其他条目进口.
import { NextMediaImage } from "@ai-matrx/media/next";
const ports: MediaHostPorts = { ImageComponent: NextMediaImage };
// or: createNextMediaImageComponent({ unoptimized: false, quality: 90 })
默认为 unoptimized,这对 Matrx 媒体是正确的: 耐用文件
URL为会话- cookie 认证, Next 的优化器从中获取
没有用户会话的服务器.
样式
/react 使用带有语义符号的 Tailwind 工具类(bg-muted, (中文(简体) ),
text-destructive(中文(简体) ). Tailwind v4 主机将软件包注册为源 :
@source "../node_modules/@ai-matrx/media";
安保部门/区域服务中心
根条目为服务器安全(类型+一纯函数). /core, (中文(简体) ), /react, (中文(简体) ),
/share, (中文(简体) ), /viewers 财务报告和审定财务报表 /next 是客户模块( e)"use client" 已盖章
每个条目). 没有触摸 window 在导入时间.
许可证
麻省理工学院. 复制自的内嵌图标路径 卢西德 (印度语).