@file-viewer/renderer-media 2.0.11

package/LICENSE

@@ -0,0 +1,160 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, "control" means (i) the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+"Object" form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form,
+made available under the License, as indicated by a copyright notice that is
+included in or attached to the work.
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work by
+the copyright owner or by an individual or Legal Entity authorized to submit on
+behalf of the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent to the
+Licensor or its representatives, including but not limited to communication on
+electronic mailing lists, source code control systems, and issue tracking systems
+that are managed by, or on behalf of, the Licensor for the purpose of discussing
+and improving the Work, but excluding communication that is conspicuously marked
+or otherwise designated in writing by the copyright owner as "Not a
+Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+License, each Contributor hereby grants to You a perpetual, worldwide,
+non-exclusive, no-charge, royalty-free, irrevocable copyright license to
+reproduce, prepare Derivative Works of, publicly display, publicly perform,
+sublicense, and distribute the Work and such Derivative Works in Source or
+Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License,
+each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable (except as stated in this section) patent
+license to make, have made, use, offer to sell, sell, import, and otherwise
+transfer the Work, where such license applies only to those patent claims
+licensable by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s) with the Work to
+which such Contribution(s) was submitted. If You institute patent litigation
+against any entity (including a cross-claim or counterclaim in a lawsuit)
+alleging that the Work or a Contribution incorporated within the Work
+constitutes direct or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate as of the date
+such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or
+Derivative Works thereof in any medium, with or without modifications, and in
+Source or Object form, provided that You meet the following conditions:
+
+(a) You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+
+(b) You must cause any modified files to carry prominent notices stating that
+You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works that You
+distribute, all copyright, patent, trademark, and attribution notices from the
+Source form of the Work, excluding those notices that do not pertain to any part
+of the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its distribution, then
+any Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the Derivative
+Works; within the Source form or documentation, if provided along with the
+Derivative Works; or, within a display generated by the Derivative Works, if and
+wherever such third-party notices normally appear. The contents of the NOTICE
+file are for informational purposes only and do not modify the License. You may
+add Your own attribution notices within Derivative Works that You distribute,
+alongside or as an addendum to the NOTICE text from the Work, provided that such
+additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any
+Contribution intentionally submitted for inclusion in the Work by You to the
+Licensor shall be under the terms and conditions of this License, without any
+additional terms or conditions. Notwithstanding the above, nothing herein shall
+supersede or modify the terms of any separate license agreement you may have
+executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names,
+trademarks, service marks, or product names of the Licensor, except as required
+for reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in
+writing, Licensor provides the Work (and each Contributor provides its
+Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied, including, without limitation, any warranties or
+conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any risks
+associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in
+tort (including negligence), contract, or otherwise, unless required by
+applicable law (such as deliberate and grossly negligent acts) or agreed to in
+writing, shall any Contributor be liable to You for damages, including any
+direct, indirect, special, incidental, or consequential damages of any character
+arising as a result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill, work stoppage,
+computer failure or malfunction, or any and all other commercial damages or
+losses), even if such Contributor has been advised of the possibility of such
+damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or
+Derivative Works thereof, You may choose to offer, and charge a fee for,
+acceptance of support, warranty, indemnity, or other liability obligations and/or
+rights consistent with this License. However, in accepting such obligations, You
+may act only on Your own behalf and on Your sole responsibility, not on behalf of
+any other Contributor, and only if You agree to indemnify, defend, and hold each
+Contributor harmless for any liability incurred by, or claims asserted against,
+such Contributor by reason of your accepting any such warranty or additional
+liability.
+
+END OF TERMS AND CONDITIONS
+
+Copyright 2026 Flyfish Viewer

package/README.en.md

@@ -0,0 +1,36 @@
+# @file-viewer/renderer-media
+
+Standalone audio and video renderer package for Flyfish File Viewer. It previews audio files, videos, HLS playlists, and MIDI files in the browser while loading `hls.js` and `@tonejs/midi` only for the formats that need them.
+
+## Usage
+
+```ts
+import { mediaRenderer } from '@file-viewer/renderer-media'
+
+const options = {
+  builtinRenderers: 'none',
+  renderers: [mediaRenderer],
+}
+```
+
+Or compose it through the full preset:
+
+```ts
+import { allRenderers } from '@file-viewer/preset-all'
+
+const options = {
+  builtinRenderers: 'none',
+  renderers: allRenderers,
+}
+```
+
+## Features
+
+- MP4, WebM, and common audio formats use native browser `<video>` / `<audio>` controls first.
+- HLS `.m3u8` uses native playback when available and dynamically imports `hls.js` only as a fallback.
+- MIDI / MID dynamically imports `@tonejs/midi` only when opened, then renders name, duration, PPQ, tracks, and note summaries.
+- Unmount cleanup revokes object URLs, resets media elements, and destroys the HLS instance for long-lived business applications.
+
+## Migration Note
+
+`@file-viewer/core` no longer bundles media renderers and no longer depends directly on `hls.js` or `@tonejs/midi`. Install this package explicitly for audio, video, HLS, or MIDI preview, or use `@file-viewer/preset-all`, which aggregates this renderer automatically.

package/README.md

@@ -0,0 +1,36 @@
+# @file-viewer/renderer-media
+
+Flyfish File Viewer 的独立音视频 renderer 包。它负责音频、视频、HLS 清单和 MIDI 文件的浏览器端预览，并让 `hls.js`、`@tonejs/midi` 只在命中对应格式时加载。
+
+## 使用
+
+```ts
+import { mediaRenderer } from '@file-viewer/renderer-media'
+
+const options = {
+  builtinRenderers: 'none',
+  renderers: [mediaRenderer],
+}
+```
+
+也可以通过全量 preset 自动装配：
+
+```ts
+import { allRenderers } from '@file-viewer/preset-all'
+
+const options = {
+  builtinRenderers: 'none',
+  renderers: allRenderers,
+}
+```
+
+## 能力
+
+- MP4、WebM 和常见音频格式优先使用浏览器原生 `<video>` / `<audio>` 控件。
+- HLS `.m3u8` 优先使用浏览器原生能力，不支持时才按需加载 `hls.js`。
+- MIDI / MID 只在命中格式时按需加载 `@tonejs/midi`，展示曲名、时长、PPQ、轨道和音符摘要。
+- 所有资源在卸载时清理对象 URL、播放器状态和 HLS 实例，适合长时间运行的后台系统。
+
+## 迁移说明
+
+`@file-viewer/core` 已不再内置 media renderer，也不再直接依赖 `hls.js` 和 `@tonejs/midi`。需要音频、视频、HLS 或 MIDI 预览时，请显式安装本包，或使用会自动聚合本包的 `@file-viewer/preset-all`。

package/dist/audio.d.ts

@@ -0,0 +1,8 @@
+import type { FileViewerRenderedInstance } from '@file-viewer/core';
+/**
+ * Pure TypeScript audio renderer.
+ *
+ * Regular audio files use the browser's native `<audio>` element. MIDI stays in
+ * the same async chunk and lazily imports `@tonejs/midi` only for `.mid/.midi`.
+ */
+export default function renderAudio(buffer: ArrayBuffer, target: HTMLDivElement, type?: string): Promise<FileViewerRenderedInstance>;

package/dist/audio.js

@@ -0,0 +1,219 @@
+const AUDIO_MIME_MAP = {
+    aac: 'audio/aac',
+    flac: 'audio/flac',
+    m4a: 'audio/mp4',
+    mp3: 'audio/mpeg',
+    mpeg: 'audio/mpeg',
+    oga: 'audio/ogg',
+    ogg: 'audio/ogg',
+    opus: 'audio/ogg; codecs=opus',
+    wav: 'audio/wav',
+    weba: 'audio/webm'
+};
+const audioStyle = `
+.fv-audio-viewer{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:28px;background:linear-gradient(135deg,rgba(14,116,144,.1),transparent 34%),linear-gradient(180deg,#f5f8fb 0%,#edf2f7 100%);box-sizing:border-box}
+.fv-audio-card{width:min(100%,640px);display:grid;grid-template-columns:86px minmax(0,1fr);gap:18px;align-items:center;padding:24px;border-radius:8px;border:1px solid rgba(15,23,42,.08);background:rgba(255,255,255,.92);box-shadow:0 20px 52px rgba(15,23,42,.13);box-sizing:border-box}
+.fv-audio-art{position:relative;width:86px;height:86px;border-radius:8px;background:linear-gradient(135deg,#0f766e,#2dd4bf);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
+.fv-audio-art span{position:absolute;inset:18px;border-radius:999px;border:8px solid rgba(255,255,255,.88)}
+.fv-audio-art i{position:absolute;right:18px;bottom:20px;width:18px;height:36px;border-radius:10px 10px 4px 4px;background:rgba(255,255,255,.9)}
+.fv-audio-copy{min-width:0}
+.fv-audio-kicker{color:#0f766e;font-size:12px;font-weight:800;letter-spacing:0}
+.fv-audio-copy strong{display:block;margin-top:5px;color:#132235;font-size:23px;line-height:1.15}
+.fv-audio-copy p{margin:8px 0 0;color:#64748b;font-size:13px;line-height:1.7}
+.fv-audio-meter{grid-column:1/-1;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px;color:#64748b;font-size:12px;font-variant-numeric:tabular-nums}
+.fv-audio-progress{height:6px;overflow:hidden;border-radius:999px;background:rgba(15,118,110,.12)}
+.fv-audio-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0f766e,#2dd4bf);transition:width .18s ease}
+.fv-audio-control{grid-column:1/-1;width:100%;height:42px}
+.fv-midi-viewer{min-height:100%;padding:28px;background:#eef1f4;box-sizing:border-box}
+.fv-midi-card{max-width:960px;margin:0 auto;border-radius:8px;border:1px solid rgba(15,23,42,.08);background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.12);overflow:hidden}
+.fv-midi-card header{padding:18px 22px;border-bottom:1px solid rgba(15,23,42,.08)}
+.fv-midi-card header span{display:block;color:#0f766e;font-size:12px;font-weight:800}
+.fv-midi-card header strong{display:block;margin-top:6px;color:#132235;font-size:22px}
+.fv-midi-state{padding:28px 22px;color:#64748b}
+.fv-midi-error{color:#b42318}
+.fv-midi-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(15,23,42,.08)}
+.fv-midi-stats div{padding:16px;background:#f8fafc}
+.fv-midi-stats span{display:block;color:#64748b;font-size:12px}
+.fv-midi-stats strong{display:block;margin-top:4px;color:#132235;font-size:20px}
+.fv-midi-table-wrap{overflow:auto}
+.fv-midi-table{width:100%;border-collapse:collapse;color:#132235;font-size:14px}
+.fv-midi-table th,.fv-midi-table td{padding:12px 16px;border-top:1px solid rgba(15,23,42,.08);text-align:left}
+.fv-midi-table th{color:#64748b;background:#f8fafc;font-weight:700}
+@media (max-width:700px){.fv-midi-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
+`;
+const createElement = (tagName, className, text) => {
+    const element = document.createElement(tagName);
+    if (className) {
+        element.className = className;
+    }
+    if (typeof text === 'string') {
+        element.textContent = text;
+    }
+    return element;
+};
+const formatDuration = (seconds) => {
+    if (!Number.isFinite(seconds) || seconds <= 0) {
+        return '00:00';
+    }
+    const minutes = Math.floor(seconds / 60);
+    const rest = Math.round(seconds % 60);
+    return `${String(minutes).padStart(2, '0')}:${String(rest).padStart(2, '0')}`;
+};
+const createStyle = () => {
+    const style = document.createElement('style');
+    style.textContent = audioStyle;
+    return style;
+};
+const clearTarget = (target) => {
+    target.replaceChildren();
+};
+const createRenderedInstance = (target, cleanup) => ({
+    $el: target,
+    unmount() {
+        cleanup();
+        clearTarget(target);
+    }
+});
+const renderAudioElement = (buffer, target, type) => {
+    const normalizedType = type.trim().toLowerCase() || 'mp3';
+    const mimeType = AUDIO_MIME_MAP[normalizedType] || 'audio/*';
+    const sourceUrl = URL.createObjectURL(new Blob([buffer], { type: mimeType }));
+    const root = createElement('div', 'fv-audio-viewer');
+    const card = createElement('section', 'fv-audio-card');
+    const art = createElement('div', 'fv-audio-art');
+    art.append(createElement('span'), createElement('i'));
+    const copy = createElement('div', 'fv-audio-copy');
+    copy.append(createElement('span', 'fv-audio-kicker', normalizedType.toUpperCase() || 'AUDIO'), createElement('strong', '', '音频预览'), createElement('p', '', '使用浏览器原生播放器打开，兼容性取决于当前浏览器支持的音频编码。'));
+    const currentTimeText = createElement('span', '', '00:00');
+    const durationText = createElement('span', '', '--:--');
+    const progressFill = createElement('i');
+    const progress = createElement('div', 'fv-audio-progress');
+    progress.setAttribute('aria-hidden', 'true');
+    progress.append(progressFill);
+    const meter = createElement('div', 'fv-audio-meter');
+    meter.append(currentTimeText, progress, durationText);
+    const audio = createElement('audio', 'fv-audio-control');
+    audio.src = sourceUrl;
+    audio.controls = true;
+    audio.preload = 'metadata';
+    audio.textContent = '当前浏览器不支持音频播放。';
+    const handleLoadedMetadata = () => {
+        durationText.textContent = Number.isFinite(audio.duration) && audio.duration > 0
+            ? formatDuration(audio.duration)
+            : '--:--';
+    };
+    const handleTimeUpdate = () => {
+        currentTimeText.textContent = formatDuration(audio.currentTime);
+        const percent = Number.isFinite(audio.duration) && audio.duration > 0
+            ? Math.min(100, Math.max(0, audio.currentTime / audio.duration * 100))
+            : 0;
+        progressFill.style.width = `${percent}%`;
+    };
+    audio.addEventListener('loadedmetadata', handleLoadedMetadata);
+    audio.addEventListener('timeupdate', handleTimeUpdate);
+    card.append(art, copy, meter, audio);
+    root.append(card);
+    target.replaceChildren(createStyle(), root);
+    return createRenderedInstance(target, () => {
+        audio.pause();
+        audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
+        audio.removeEventListener('timeupdate', handleTimeUpdate);
+        URL.revokeObjectURL(sourceUrl);
+    });
+};
+const renderMidiElement = (buffer, target) => {
+    let disposed = false;
+    const root = createElement('div', 'fv-midi-viewer');
+    const card = createElement('section', 'fv-midi-card');
+    const header = document.createElement('header');
+    const title = createElement('strong', '', 'MIDI 文件');
+    header.append(createElement('span', '', 'MIDI'), title);
+    const body = createElement('div', 'fv-midi-state', '正在解析 MIDI 轨道...');
+    card.append(header, body);
+    root.append(card);
+    target.replaceChildren(createStyle(), root);
+    const renderError = (message) => {
+        body.className = 'fv-midi-state fv-midi-error';
+        body.textContent = message;
+    };
+    const renderTrackTable = (tracks) => {
+        const wrap = createElement('div', 'fv-midi-table-wrap');
+        const table = createElement('table', 'fv-midi-table');
+        const thead = document.createElement('thead');
+        const headerRow = document.createElement('tr');
+        for (const label of ['轨道', '乐器', '通道', '音符数', '时长']) {
+            headerRow.append(createElement('th', '', label));
+        }
+        thead.append(headerRow);
+        const tbody = document.createElement('tbody');
+        for (const track of tracks) {
+            const row = document.createElement('tr');
+            row.append(createElement('td', '', track.name), createElement('td', '', track.instrument), createElement('td', '', String(track.channel + 1)), createElement('td', '', String(track.notes)), createElement('td', '', formatDuration(track.duration)));
+            tbody.append(row);
+        }
+        table.append(thead, tbody);
+        wrap.append(table);
+        return wrap;
+    };
+    const renderSummary = (input) => {
+        title.textContent = input.name;
+        const totalNotes = input.tracks.reduce((sum, track) => sum + track.notes, 0);
+        const stats = createElement('div', 'fv-midi-stats');
+        for (const [label, value] of [
+            ['时长', formatDuration(input.duration)],
+            ['PPQ', String(input.ppq)],
+            ['轨道', String(input.tracks.length)],
+            ['音符', String(totalNotes)]
+        ]) {
+            const stat = document.createElement('div');
+            stat.append(createElement('span', '', label), createElement('strong', '', value));
+            stats.append(stat);
+        }
+        body.replaceWith(stats, renderTrackTable(input.tracks));
+    };
+    void (async () => {
+        try {
+            const { Midi } = await import('@tonejs/midi');
+            const midi = new Midi(buffer);
+            if (disposed) {
+                return;
+            }
+            renderSummary({
+                name: midi.name || 'MIDI 文件',
+                duration: midi.duration,
+                ppq: midi.header.ppq,
+                tracks: midi.tracks.map((track, index) => {
+                    var _a, _b;
+                    return ({
+                        name: track.name || `Track ${index + 1}`,
+                        instrument: ((_a = track.instrument) === null || _a === void 0 ? void 0 : _a.name) || ((_b = track.instrument) === null || _b === void 0 ? void 0 : _b.family) || 'Unknown',
+                        channel: track.channel,
+                        notes: track.notes.length,
+                        duration: track.duration
+                    });
+                })
+            });
+        }
+        catch (error) {
+            if (!disposed) {
+                renderError(error instanceof Error ? error.message : 'MIDI 解析失败');
+            }
+        }
+    })();
+    return createRenderedInstance(target, () => {
+        disposed = true;
+    });
+};
+/**
+ * Pure TypeScript audio renderer.
+ *
+ * Regular audio files use the browser's native `<audio>` element. MIDI stays in
+ * the same async chunk and lazily imports `@tonejs/midi` only for `.mid/.midi`.
+ */
+export default async function renderAudio(buffer, target, type) {
+    const normalizedType = (type || 'mp3').toLowerCase();
+    if (normalizedType === 'midi' || normalizedType === 'mid') {
+        return renderMidiElement(buffer, target);
+    }
+    return renderAudioElement(buffer, target, normalizedType);
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { type FileRenderHandler, type FileViewerRenderedInstance, type FileViewerRendererPlugin, type RendererDefinition } from '@file-viewer/core';
+export declare const mediaRendererDefinitions: RendererDefinition[];
+export declare const renderFileViewerAudio: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
+export declare const renderFileViewerVideo: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
+export declare const mediaRenderer: FileViewerRendererPlugin<FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>>;
+export default mediaRenderer;

package/dist/index.js

@@ -0,0 +1,25 @@
+import { DEFAULT_RENDERER_DEFINITIONS, } from '@file-viewer/core';
+const mediaRendererIds = ['audio', 'video'];
+const mediaDefinitions = DEFAULT_RENDERER_DEFINITIONS.filter(definition => mediaRendererIds.includes(definition.id));
+if (mediaDefinitions.length !== mediaRendererIds.length) {
+    throw new Error('@file-viewer/renderer-media could not locate the shared audio/video format definitions.');
+}
+export const mediaRendererDefinitions = mediaDefinitions;
+export const renderFileViewerAudio = (buffer, target, type) => import('./audio.js').then(({ default: renderAudio }) => renderAudio(buffer, target, type));
+export const renderFileViewerVideo = (buffer, target, type, context) => import('./video.js').then(({ default: renderVideo }) => renderVideo(buffer, target, type, context));
+export const mediaRenderer = {
+    id: 'file-viewer-renderer-media',
+    label: 'Flyfish File Viewer media renderer',
+    definitions: mediaRendererDefinitions,
+    handlers: [
+        {
+            rendererId: 'audio',
+            handler: renderFileViewerAudio,
+        },
+        {
+            rendererId: 'video',
+            handler: renderFileViewerVideo,
+        },
+    ],
+};
+export default mediaRenderer;

package/dist/video.d.ts

@@ -0,0 +1,8 @@
+import type { FileRenderContext, FileViewerRenderedInstance } from '@file-viewer/core';
+/**
+ * Pure TypeScript video renderer.
+ *
+ * MP4/WebM use the native `<video>` element. HLS uses native browser support
+ * first and imports `hls.js` only when the current browser needs it.
+ */
+export default function renderVideo(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/video.js

@@ -0,0 +1,108 @@
+const videoStyle = `
+.fv-video-viewer{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:28px;background:#eef1f4;box-sizing:border-box}
+.fv-video-shell{width:min(100%,960px);border-radius:8px;border:1px solid rgba(15,23,42,.1);background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.14);overflow:hidden}
+.fv-video-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid rgba(15,23,42,.08)}
+.fv-video-heading span{color:#0f766e;font-size:12px;font-weight:800}
+.fv-video-heading strong{color:#132235;font-size:16px}
+.fv-video-player{display:block;width:100%;aspect-ratio:16/9;background:#05070a}
+.fv-video-hint{margin:0;padding:12px 18px 16px;color:#64748b;font-size:13px;line-height:1.7}
+`;
+const VIDEO_MIME_MAP = {
+    m3u8: 'application/vnd.apple.mpegurl',
+    mp4: 'video/mp4',
+    webm: 'video/webm'
+};
+const createElement = (tagName, className, text) => {
+    const element = document.createElement(tagName);
+    if (className) {
+        element.className = className;
+    }
+    if (typeof text === 'string') {
+        element.textContent = text;
+    }
+    return element;
+};
+const createStyle = () => {
+    const style = document.createElement('style');
+    style.textContent = videoStyle;
+    return style;
+};
+const createRenderedInstance = (target, cleanup) => ({
+    $el: target,
+    unmount() {
+        cleanup();
+        target.replaceChildren();
+    }
+});
+const getMimeType = (type) => {
+    return VIDEO_MIME_MAP[type] || 'video/*';
+};
+const createLocalUrl = (buffer, type) => {
+    return URL.createObjectURL(new Blob([buffer], { type: getMimeType(type) }));
+};
+/**
+ * Pure TypeScript video renderer.
+ *
+ * MP4/WebM use the native `<video>` element. HLS uses native browser support
+ * first and imports `hls.js` only when the current browser needs it.
+ */
+export default async function renderVideo(buffer, target, type, context) {
+    const normalizedType = (type || 'mp4').toLowerCase();
+    let disposed = false;
+    let objectUrl = '';
+    let hls = null;
+    const root = createElement('div', 'fv-video-viewer');
+    const shell = createElement('section', 'fv-video-shell');
+    const heading = createElement('div', 'fv-video-heading');
+    heading.append(createElement('span', '', normalizedType.toUpperCase() || 'VIDEO'), createElement('strong', '', '视频预览'));
+    const video = createElement('video', 'fv-video-player');
+    video.controls = true;
+    video.preload = 'metadata';
+    video.textContent = '当前浏览器不支持该视频格式。';
+    shell.append(heading, video);
+    if (normalizedType === 'm3u8') {
+        shell.append(createElement('p', 'fv-video-hint', 'HLS 会优先使用原始 URL 加载分片；如果传入的是本地单文件清单，请确保分片地址可被浏览器访问。'));
+    }
+    root.append(shell);
+    target.replaceChildren(createStyle(), root);
+    const resolveSource = () => {
+        if (normalizedType === 'm3u8' && (context === null || context === void 0 ? void 0 : context.url)) {
+            return context.url;
+        }
+        objectUrl = createLocalUrl(buffer, normalizedType);
+        return objectUrl;
+    };
+    const mountVideo = async () => {
+        const source = resolveSource();
+        if (normalizedType === 'm3u8') {
+            if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = source;
+                return;
+            }
+            const { default: HlsConstructor } = await import('hls.js');
+            if (disposed) {
+                return;
+            }
+            if (HlsConstructor.isSupported()) {
+                hls = new HlsConstructor({ enableWorker: true, lowLatencyMode: false });
+                hls.loadSource(source);
+                hls.attachMedia(video);
+                return;
+            }
+        }
+        video.src = source;
+    };
+    void mountVideo();
+    return createRenderedInstance(target, () => {
+        disposed = true;
+        hls === null || hls === void 0 ? void 0 : hls.destroy();
+        hls = null;
+        video.pause();
+        video.removeAttribute('src');
+        video.load();
+        if (objectUrl) {
+            URL.revokeObjectURL(objectUrl);
+            objectUrl = '';
+        }
+    });
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@file-viewer/renderer-media",
+  "version": "2.0.11",
+  "private": false,
+  "type": "module",
+  "description": "Standalone audio and video renderer plugin for Flyfish File Viewer with native media playback, HLS fallback, MIDI parsing, and offline-friendly lazy loading.",
+  "keywords": [
+    "file-viewer",
+    "renderer",
+    "audio",
+    "video",
+    "hls",
+    "midi",
+    "document-preview",
+    "document-viewer",
+    "file-preview",
+    "self-hosted"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": {
+    "name": "Wangyu",
+    "email": "wybaby168@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flyfish-dev/file-viewer-renderer-media.git",
+    "directory": "packages/renderers/media"
+  },
+  "homepage": "https://doc.file-viewer.app/guide/on-demand-renderers",
+  "bugs": {
+    "url": "https://github.com/flyfish-dev/file-viewer-renderer-media/issues"
+  },
+  "funding": {
+    "type": "individual",
+    "url": "https://dev.flyfish.group/shop"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README.en.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@file-viewer/core": "^2.0.11",
+    "@tonejs/midi": "^2.0.28",
+    "hls.js": "^1.6.16"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "type-check": "tsc -b tsconfig.json"
+  }
+}