Preview

Preview modal component for viewing media files.

Preview Header

Header with file name and close button.

Preview Info Panel

Side panel with file metadata.

Preview Footer

Footer with navigation and action buttons.

Preview Modal Content

Content to be inserted into the modal.

---

render_preview_content

def render_preview_content(
    file_info:FileInfo, # File to preview
    file_url:str, # URL to the file
    config:GalleryConfig, # Gallery configuration
    prev_url:Optional=None, # URL for previous file handler
    next_url:Optional=None, # URL for next file handler
    has_prev:bool=False, # Whether there's a previous file
    has_next:bool=False, # Whether there's a next file
    modal_id:Optional=None, # Modal ID to show (for auto-show script)
    text_content:Optional=None, # Pre-read text content for text files
    text_error:Optional=None, # Error message if text reading failed
)->Any: # Preview modal content with auto-show script

Render the preview modal content with script to show the modal.

from fasthtml.common import to_xml

# Test preview content
config = GalleryConfig()
file_info = FileInfo(
    name="photo.jpg", path="/photos/photo.jpg", is_directory=False,
    file_type=FileType.IMAGE, extension="jpg", size=1024000
)

content = render_preview_content(
    file_info=file_info,
    file_url="/media/photo.jpg",
    config=config,
    prev_url="/preview_prev",
    next_url="/preview_next",
    has_prev=True,
    has_next=True
)
html = to_xml(content)
assert "photo.jpg" in html
assert 'id="media-preview-content"' in html
assert "<img" in html  # Image player
assert "Download" in html
assert "Previous" in html
assert "Next" in html
assert "File Info" in html  # Info panel

# Verify the auto-show script is present
assert "<script>" in html
assert "showModal" in html
assert "media-preview-modal" in html  # Default modal ID in script

# Verify hx_vals with path is present for navigation
assert 'hx-vals' in html
assert '/photos/photo.jpg' in html  # Path should be in hx-vals

# Verify hx_target is set for navigation buttons
assert 'hx-target="#media-preview-modal"' in html

# Test without info panel
from cjm_fasthtml_media_gallery.core.config import PreviewConfig
no_info_config = GalleryConfig(preview=PreviewConfig(show_info_panel=False))
content = render_preview_content(
    file_info=file_info,
    file_url="/media/photo.jpg",
    config=no_info_config
)
html = to_xml(content)
assert "File Info" not in html

# Test with custom modal ID
content = render_preview_content(
    file_info=file_info,
    file_url="/media/photo.jpg",
    config=config,
    modal_id="custom-modal-id",
    prev_url="/preview_prev",
    next_url="/preview_next",
    has_prev=True,
    has_next=True
)
html = to_xml(content)
assert "custom-modal-id" in html
assert 'hx-target="#custom-modal-id"' in html  # Custom modal ID in hx-target

# Test with text content (code file)
py_file = FileInfo(
    name="script.py", path="/code/script.py", is_directory=False,
    file_type=FileType.CODE, extension="py", size=256
)
content = render_preview_content(
    file_info=py_file,
    file_url="/media/script.py",
    config=config,
    text_content="def hello():\n    print('Hello!')"
)
html = to_xml(content)
assert "<pre" in html
assert "def hello()" in html
assert "script.py" in html

# Test with text error
content = render_preview_content(
    file_info=py_file,
    file_url="/media/script.py",
    config=config,
    text_error="File too large"
)
html = to_xml(content)
assert "Unable to preview" in html
assert "File too large" in html

print("render_preview_content tests passed!")

render_preview_content tests passed!

Preview Modal Container

The modal dialog element that wraps the content.

---

render_preview_modal

def render_preview_modal(
    modal_id:str='media-preview-modal', # Modal ID
)->functools.partial(<function ft_hx at 0x7f56b578f1a0>, 'dialog'): # Preview modal container

Render the preview modal container (empty, content loaded via HTMX).

# Test preview modal container
modal_elem = render_preview_modal()
html = to_xml(modal_elem)
assert "<dialog" in html
assert 'id="media-preview-modal"' in html
assert "modal-box" in html
assert "modal-backdrop" in html

# Test with custom ID
modal_elem = render_preview_modal(modal_id="custom-preview")
html = to_xml(modal_elem)
assert 'id="custom-preview"' in html

print("render_preview_modal tests passed!")

render_preview_modal tests passed!