diff --git a/src/components/Editor.test.tsx b/src/components/Editor.test.tsx
index 22d53e9c..ef3dbc42 100644
--- a/src/components/Editor.test.tsx
+++ b/src/components/Editor.test.tsx
@@ -49,11 +49,15 @@ const blockNoteViewState = vi.hoisted(() => ({
// Mock BlockNote components
vi.mock('@blocknote/core', () => ({
+ audioParse: vi.fn(() => undefined),
BlockNoteSchema: { create: () => ({ extend: () => ({}) }) },
+ createAudioBlockConfig: vi.fn(() => ({})),
createCodeBlockSpec: vi.fn(() => ({})),
createExtension: (factory: unknown) => () => factory,
+ createVideoBlockConfig: vi.fn(() => ({})),
defaultInlineContentSpecs: {},
filterSuggestionItems: vi.fn(() => []),
+ videoParse: vi.fn(() => undefined),
}))
vi.mock('@blocknote/code-block', () => ({
@@ -71,8 +75,12 @@ const capturedGetItemsByTrigger: Record
Promise Promise) | null = null
vi.mock('@blocknote/react', () => ({
+ AudioBlock: () => null,
+ AudioToExternalHTML: () => null,
createReactBlockSpec: () => () => ({}),
createReactInlineContentSpec: () => ({ render: () => null }),
+ VideoBlock: () => null,
+ VideoToExternalHTML: () => null,
useCreateBlockNote: (options: unknown) => {
blockNoteCreation.options.push(options)
return mockEditor
diff --git a/src/components/FilePreview.test.tsx b/src/components/FilePreview.test.tsx
index e6b94f73..2c3cd699 100644
--- a/src/components/FilePreview.test.tsx
+++ b/src/components/FilePreview.test.tsx
@@ -3,7 +3,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { FilePreview } from './FilePreview'
import type { VaultEntry } from '../types'
-const { trackEventMock } = vi.hoisted(() => ({
+const { externalMediaPreviewMock, trackEventMock } = vi.hoisted(() => ({
+ externalMediaPreviewMock: vi.fn(() => false),
trackEventMock: vi.fn(),
}))
@@ -15,6 +16,10 @@ vi.mock('../lib/telemetry', () => ({
trackEvent: trackEventMock,
}))
+vi.mock('../utils/mediaPreviewRuntime', () => ({
+ useExternalMediaPreview: externalMediaPreviewMock,
+}))
+
const imageEntry: VaultEntry = {
path: '/vault/Attachments/photo.png',
filename: 'photo.png',
@@ -69,6 +74,7 @@ const videoEntry: VaultEntry = {
describe('FilePreview', () => {
beforeEach(() => {
+ externalMediaPreviewMock.mockReturnValue(false)
trackEventMock.mockClear()
})
@@ -138,6 +144,19 @@ describe('FilePreview', () => {
expect(trackEventMock).toHaveBeenCalledWith('file_preview_opened', { preview_kind: 'video' })
})
+ it('uses the external-open fallback for media when native playback is unsafe', () => {
+ const onOpenExternalFile = vi.fn()
+ externalMediaPreviewMock.mockReturnValue(true)
+
+ render()
+
+ expect(screen.queryByTestId('video-file-preview')).not.toBeInTheDocument()
+ expect(screen.getByTestId('file-preview-fallback')).toHaveTextContent('Preview unavailable')
+
+ fireEvent.click(screen.getByRole('button', { name: 'Open in default app' }))
+ expect(onOpenExternalFile).toHaveBeenCalledWith('/vault/Attachments/demo.mp4')
+ })
+
it('provides a graceful fallback when a PDF preview cannot render', () => {
render()
diff --git a/src/components/FilePreview.tsx b/src/components/FilePreview.tsx
index f011388f..0b952f27 100644
--- a/src/components/FilePreview.tsx
+++ b/src/components/FilePreview.tsx
@@ -4,6 +4,7 @@ import { ArrowSquareOut, ClipboardText, FileDashed, FilePdf, FolderOpen, ImageSq
import type { VaultEntry } from '../types'
import { trackFilePreviewAction, trackFilePreviewFailed, trackFilePreviewOpened } from '../lib/productAnalytics'
import { filePreviewKind, previewFileTypeLabel, type FilePreviewKind } from '../utils/filePreview'
+import { useExternalMediaPreview } from '../utils/mediaPreviewRuntime'
import { focusNoteListContainer } from '../utils/neighborhoodHistory'
import { openLocalFile } from '../utils/url'
import { Button } from './ui/button'
@@ -357,8 +358,17 @@ function useFilePreviewActions({
return { handleOpenExternal, handleRevealFile, handleCopyFilePath }
}
-function previewKindForBody(previewKind: FilePreviewKind | null, mediaFailed: boolean): FilePreviewKind | null {
- return mediaFailed ? null : previewKind
+function isMediaPreviewKind(previewKind: FilePreviewKind | null): boolean {
+ return previewKind === 'audio' || previewKind === 'video'
+}
+
+function previewKindForBody(
+ previewKind: FilePreviewKind | null,
+ mediaFailed: boolean,
+ externalMediaPreview: boolean,
+): FilePreviewKind | null {
+ if (mediaFailed || (externalMediaPreview && isMediaPreviewKind(previewKind))) return null
+ return previewKind
}
export function FilePreview({
@@ -370,6 +380,7 @@ export function FilePreview({
const previewKind = filePreviewKind(entry)
const assetSrc = useMemo(() => (previewKind ? convertFileSrc(entry.path) : null), [entry.path, previewKind])
const fileTypeLabel = previewFileTypeLabel(entry)
+ const externalMediaPreview = useExternalMediaPreview()
const failures = useFilePreviewFailureState(entry.path)
const actions = useFilePreviewActions({
entryPath: entry.path,
@@ -409,7 +420,7 @@ export function FilePreview({
{
+ it('keeps embedded audio and video blocks available in the editor schema', () => {
+ expect(schema.blockSpecs.audio.config.type).toBe('audio')
+ expect(schema.blockSpecs.video.config.type).toBe('video')
+ })
+
+ it('turns embedded media previews into file-name fallbacks for unsafe runtimes', () => {
+ const props = {
+ block: {
+ id: 'media-block',
+ props: {
+ name: 'demo.mp4',
+ showPreview: true,
+ url: 'asset://localhost/demo.mp4',
+ },
+ },
+ }
+
+ const fallbackProps = mediaBlockPropsForPreviewRuntime(props, true)
+
+ expect(fallbackProps).not.toBe(props)
+ expect(fallbackProps.block.props.showPreview).toBe(false)
+ expect(props.block.props.showPreview).toBe(true)
+ expect(mediaBlockPropsForPreviewRuntime(props, false)).toBe(props)
+ })
+})
diff --git a/src/components/editorSchema.tsx b/src/components/editorSchema.tsx
index 75a8251f..b7b1d973 100644
--- a/src/components/editorSchema.tsx
+++ b/src/components/editorSchema.tsx
@@ -1,11 +1,22 @@
/* eslint-disable react-refresh/only-export-components -- module-level schema, not a component file */
import {
+ audioParse,
createCodeBlockSpec,
BlockNoteSchema,
+ createAudioBlockConfig,
+ createVideoBlockConfig,
defaultInlineContentSpecs,
+ videoParse,
} from '@blocknote/core'
-import { createReactBlockSpec, createReactInlineContentSpec } from '@blocknote/react'
-import { lazy, Suspense } from 'react'
+import {
+ AudioBlock,
+ AudioToExternalHTML,
+ createReactBlockSpec,
+ createReactInlineContentSpec,
+ VideoBlock,
+ VideoToExternalHTML,
+} from '@blocknote/react'
+import { lazy, Suspense, type ComponentProps } from 'react'
import { resolveWikilinkColor as resolveColor } from '../utils/wikilinkColors'
import { resolveEntry } from '../utils/wikilink'
import { MATH_BLOCK_TYPE, MATH_INLINE_TYPE, renderMathToHtml } from '../utils/mathMarkdown'
@@ -17,10 +28,20 @@ import { NoteTitleIcon } from './NoteTitleIcon'
import { MermaidDiagram } from './MermaidDiagram'
import { SafeHtmlSpan } from './SafeMarkup'
import { updateTldrawBlockPropsSafely } from './tldrawBlockProps'
+import { useExternalMediaPreview } from '../utils/mediaPreviewRuntime'
const TldrawWhiteboard = lazy(() => import('./TldrawWhiteboard').then(module => ({
default: module.TldrawWhiteboard,
})))
+type AudioBlockProps = ComponentProps
+type VideoBlockProps = ComponentProps
+type MediaBlockPreviewProps = {
+ block: {
+ props: {
+ showPreview: boolean
+ }
+ }
+}
// Module-level cache so the WikiLink renderer (defined outside React) can access entries
export const _wikilinkEntriesRef: { current: VaultEntry[] } = { current: [] }
@@ -165,6 +186,54 @@ const MermaidBlock = createReactBlockSpec(
},
)
+export function mediaBlockPropsForPreviewRuntime(
+ props: T,
+ externalMediaPreview: boolean,
+): T {
+ if (!externalMediaPreview) return props
+
+ return {
+ ...props,
+ block: {
+ ...props.block,
+ props: {
+ ...props.block.props,
+ showPreview: false,
+ },
+ },
+ }
+}
+
+export function TolariaAudioBlock(props: AudioBlockProps) {
+ const externalMediaPreview = useExternalMediaPreview()
+ return
+}
+
+export function TolariaVideoBlock(props: VideoBlockProps) {
+ const externalMediaPreview = useExternalMediaPreview()
+ return
+}
+
+const AudioBlockSpec = createReactBlockSpec(
+ createAudioBlockConfig,
+ (config) => ({
+ render: TolariaAudioBlock,
+ parse: audioParse(config),
+ toExternalHTML: AudioToExternalHTML,
+ runsBefore: ['file'],
+ }),
+)
+
+const VideoBlockSpec = createReactBlockSpec(
+ createVideoBlockConfig,
+ (config) => ({
+ render: TolariaVideoBlock,
+ parse: videoParse(config),
+ toExternalHTML: VideoToExternalHTML,
+ runsBefore: ['file'],
+ }),
+)
+
const TldrawBlock = createReactBlockSpec(
{
type: TLDRAW_BLOCK_TYPE,
@@ -214,9 +283,11 @@ const TldrawBlock = createReactBlockSpec(
)
const codeBlock = createCodeBlockSpec(createTolariaCodeBlockOptions())
+const audioBlock = AudioBlockSpec()
const mathBlock = MathBlock()
const mermaidBlock = MermaidBlock()
const tldrawBlock = TldrawBlock()
+const videoBlock = VideoBlockSpec()
export const schema = BlockNoteSchema.create({
inlineContentSpecs: {
@@ -226,9 +297,11 @@ export const schema = BlockNoteSchema.create({
},
}).extend({
blockSpecs: {
+ audio: audioBlock,
mathBlock,
mermaidBlock,
tldrawBlock,
codeBlock,
+ video: videoBlock,
},
})
diff --git a/src/mock-tauri/mock-handlers.ts b/src/mock-tauri/mock-handlers.ts
index 7c8291bc..b3df69ce 100644
--- a/src/mock-tauri/mock-handlers.ts
+++ b/src/mock-tauri/mock-handlers.ts
@@ -421,6 +421,7 @@ export const mockHandlers: Record any> = {
return `[main abc1234] ${args.message}\n ${count} files changed`
},
get_build_number: () => 'bDEV',
+ should_use_external_media_preview: () => false,
get_last_commit_info: (): LastCommitInfo => ({ shortHash: 'a1b2c3d', commitUrl: 'https://github.com/lucaong/laputa-vault/commit/a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0' }),
is_git_repo: () => true,
init_git_repo: () => null,
diff --git a/src/utils/mediaPreviewRuntime.ts b/src/utils/mediaPreviewRuntime.ts
new file mode 100644
index 00000000..08fb47ec
--- /dev/null
+++ b/src/utils/mediaPreviewRuntime.ts
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { isTauri } from '../mock-tauri'
+import { isLinux } from './platform'
+
+let cachedExternalMediaPreview: boolean | null = null
+let pendingExternalMediaPreview: Promise | null = null
+
+function initialExternalMediaPreview(): boolean {
+ return isTauri() && isLinux()
+}
+
+async function loadExternalMediaPreview(): Promise {
+ if (!isTauri()) return false
+ if (cachedExternalMediaPreview !== null) return cachedExternalMediaPreview
+ if (pendingExternalMediaPreview) return pendingExternalMediaPreview
+
+ pendingExternalMediaPreview = invoke('should_use_external_media_preview')
+ .catch((error: unknown) => {
+ console.warn('[media] Failed to resolve media preview runtime:', error)
+ return false
+ })
+ .then((value) => {
+ cachedExternalMediaPreview = value
+ pendingExternalMediaPreview = null
+ return value
+ })
+
+ return pendingExternalMediaPreview
+}
+
+export function useExternalMediaPreview(): boolean {
+ const [externalMediaPreview, setExternalMediaPreview] = useState(
+ cachedExternalMediaPreview ?? initialExternalMediaPreview(),
+ )
+
+ useEffect(() => {
+ let cancelled = false
+
+ void loadExternalMediaPreview().then((value) => {
+ if (!cancelled) setExternalMediaPreview(value)
+ })
+
+ return () => {
+ cancelled = true
+ }
+ }, [])
+
+ return externalMediaPreview
+}