<%!-- --%> <%!-- MediaCanvasViewer — rendered inside a parent's modal shell (a --%> <%!-- in MediaViewer, a
in MediaBrowser). Owns the --%> <%!-- per-file content: close button, prev/next chevrons, image canvas / --%> <%!-- video / pdf / icon, composer popover, and sidebar (filename, Download, --%> <%!-- metadata, comments thread). --%> <%!-- --%> <%!-- All click events on the close + chevron buttons target the parent --%> <%!-- LiveComponent (`phx-target={"#" <> @parent_id}`) — the parent owns --%> <%!-- modal open/close state and file navigation, this component just --%> <%!-- displays whichever file's been handed to it. --%> <%!-- --%> <% f = @file %> <%!-- Close button — top-right of modal-box. Suppressed in viewer_only --%> <%!-- mode (standalone-page hosts provide their own back navigation). --%>
<%!-- Viewer column (image / video / pdf / icon) --%>
<%!-- Chevron positioning sits on a wrapper div, not the button. --%> <%!-- daisyUI's active-state CSS replaces `transform` with --%> <%!-- `scale(0.97)` on click, which would clobber a -translate-y-1/2 --%> <%!-- on the button itself and make it jump down 50% of its height. --%> <%= if @has_prev do %>
<% end %> <%= if @has_next do %>
<% end %> <%= cond do %> <% is_binary(f.mime_type) and String.starts_with?(f.mime_type, "image/") -> %> <%!-- Fresco canvas + Etcher annotation layer + Tessera zoom layer. --%> <%!-- --%> <%!-- - hosts the image at its base (medium) --%> <%!-- resolution; the Canvas struct is built in --%> <%!-- build_viewer_canvas/2 with the file's annotations stuffed --%> <%!-- into extensions.etcher — Etcher hydrates on mount via --%> <%!-- handle.getExtension("etcher"). --%> <%!-- - attaches via fresco_id; emits a single bulk --%> <%!-- etcher:annotations-changed event the parent handles. --%> <%!-- - swaps medium → large → original as the user --%> <%!-- zooms in, and (when urls["dzi"] is present) streams DZI tiles --%> <%!-- past the top raster for deep zoom on gigapixel images. Only --%> <%!-- variants that exist on the file are included; tile + manifest --%> <%!-- fetches are lazy so unviewed regions never hit storage. --%> <%= if @viewer_canvas do %> f.file_uuid} canvas={@viewer_canvas} class="w-full h-full lg:rounded" theme={:inherit} /> f.file_uuid} colors={@etcher_colors} line_params={@etcher_line_params} tools={[ :grabber, :rectangle, :circle, :polygon, :freehand, :marker, :callout, :text, :dimension, :line, :eraser ]} /> <%!-- Zoom ladder: medium → large, then for images over 4K we stream DZI tiles of the original (only the visible area) instead of ever loading the whole multi-MB original; for ≤4K images the full original raster is the top of the ladder (no tiles). DZI tiles also require the storage tile-generation setting (which is what populates urls["dzi"]). --%> <% over_4k = max(Map.get(f, :width) || 0, Map.get(f, :height) || 0) > 4096 has_dzi = is_binary(f.urls["dzi"]) and f.urls["dzi"] != "" use_tiles = over_4k and has_dzi tessera_sources = ([{f.urls["medium"], 800}, {f.urls["large"], 1920}] ++ if(use_tiles, do: [], else: [{f.urls["original"], Map.get(f, :width) || 4096}])) |> Enum.filter(fn {url, _w} -> is_binary(url) and url != "" end) |> Enum.map(fn {url, width} -> %{url: url, width: width} end) tessera_dzi = if use_tiles, do: f.urls["dzi"], else: nil %> <%= if tessera_sources != [] do %> f.file_uuid} sources={tessera_sources} dzi_url={tessera_dzi} /> <% end %> <% end %> <% is_binary(f.mime_type) and String.starts_with?(f.mime_type, "video/") -> %> <% f.mime_type == "application/pdf" -> %> <% true -> %>
<.icon name={file_icon(f.file_type)} class="w-32 h-32 mb-4" />

{String.upcase(f.file_type || gettext("FILE"))}

{f.mime_type}

<% end %> <%!-- Floating annotation composer — positioned above the just-drawn --%> <%!-- shape by the AnnotationComposerPosition JS hook (it looks up --%> <%!-- the shape via [data-uuid="…"]). Sidebar comments stay visible --%> <%!-- alongside; this popover is for the new shape only. --%> <%= if @composing_annotation_uuid && @current_user do %>
@composing_annotation_uuid} phx-hook="AnnotationComposerPosition" class="absolute z-30 w-80 max-w-[calc(100%-1rem)] bg-base-100 rounded-lg shadow-xl border border-base-300 p-3" style="left: 0px; top: 0px;" >
<.icon name="hero-pencil-square" class="w-4 h-4 text-warning" /> {gettext("Add a note to your annotation")}

{gettext( "Post to add the note. Cancel to skip — you can edit or delete the annotation later via the toolbar." )}

<.live_component module={PhoenixKitWeb.Components.AnnotationComposer} id={"annotation-composer-" <> @composing_annotation_uuid} annotation_uuid={@composing_annotation_uuid} file_uuid={f.file_uuid} current_user={@current_user} parent_id={@id} parent_module={PhoenixKitWeb.Components.MediaCanvasViewer} />
<% end %>
<%!-- Sidebar: filename + download + metadata + comments. Suppressed --%> <%!-- in viewer_only mode — standalone-page hosts render their own --%> <%!-- sidebar with admin actions / metadata editor / file details. --%>

{f.filename}

<%= if f.urls["original"] do %> <.icon name="hero-arrow-down-tray" class="w-4 h-4" /> {gettext("Download")} <% end %>
{gettext("Type:")} {String.upcase(f.file_type || gettext("FILE"))}
{gettext("MIME:")} {f.mime_type}
{gettext("Size:")} {format_file_size(f.size)}
{gettext("Uploaded:")} {Calendar.strftime(f.inserted_at, "%b %d, %Y at %H:%M")}
<%!-- Comments section — gated on the Comments module being --%> <%!-- installed AND enabled, plus a logged-in user. Keyed by --%> <%!-- file_uuid so prev/next remounts the component cleanly. --%> <%!-- --%> <%!-- The wrapper applies a compact-mode override: shrinks the --%> <%!-- comments component's typography, paddings, and avatars --%> <%!-- via descendant selectors so it fits inside the sidebar --%> <%!-- without truncation. The component itself isn't modified. --%> <%= if comments_enabled?() and @current_user do %>
<.live_component module={PhoenixKitComments.Web.CommentsComponent} id={"media-comments-" <> f.file_uuid} resource_type="file" resource_uuid={f.file_uuid} current_user={@current_user} show_likes={true} title={gettext("Comments")} comment_decorations={build_comment_decorations(@viewer_annotations)} parent_module={PhoenixKitWeb.Components.MediaCanvasViewer} parent_id={@id} />
<% end %>