<%!-- A board (no file): an empty canvas with the drawing tools, nothing --%> <%!-- else — see the moduledoc's "A board instead of a file". --%> <%= if @board do %> <.board_canvas board={@board} viewer_canvas={@viewer_canvas} etcher_colors={@etcher_colors} etcher_line_params={@etcher_line_params} can_annotate={@can_annotate} /> <% else %> <%!-- --%> <%!-- 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. --%> <%!-- --%> <%!-- No file and no (valid) board: nothing to show. --%> <%= if @file do %> <% 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). Carries the --%> <%!-- EtcherTooltipActions hook: Etcher re-dispatches tooltip action --%> <%!-- buttons as a bubbling `etcher:tooltip-action` DOM event, and --%> <%!-- this ancestor routes them — Reply to this LiveComponent, Edit --%> <%!-- straight back into Etcher's label editor client-side. --%>
f.file_uuid} phx-hook="EtcherTooltipActions" class="flex-[7] relative flex items-center justify-center bg-base-200 overflow-hidden p-0 lg:p-2 min-h-[40vh] lg:min-h-0" > <%!-- 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} initial_rotation={@viewer_rotation} persist_rotation={@persist_rotation} /> <%!-- connectors={:off} is the HARD form (Etcher 0.13): the --%> <%!-- soft default loses to the user's saved toggle, which is --%> <%!-- shared across every Etcher surface in the browser — a --%> <%!-- toggle flipped on a board followed people here, where the --%> <%!-- anchors point at nothing (no arrow tool below). Hard off --%> <%!-- also hides the toggle from the toolbar. --%> f.file_uuid} colors={@etcher_colors} line_params={@etcher_line_params} connectors={:off} toolbar={@can_annotate} nav_buttons={if @can_annotate, do: nil, else: [:visibility]} tools={ if @can_annotate, do: [ :grabber, :image, :rectangle, :circle, :polygon, :freehand, :marker, :callout, :text, :dimension, :line, :eraser ], else: [] } /> <%!-- 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/") -> %> <%!-- w/h-full + object-contain, not max-w/h: max-* only caps, so a small-intrinsic video (or one whose metadata hasn't loaded — 300×150 until then) rendered as a tiny box floating in the lightbox. Filling the column and letterboxing via object-contain sizes the player like the image viewer sizes images, whatever the source dimensions. --%> <% f.mime_type == "application/pdf" -> %> <% audio?(f) -> %> <%!-- WaveformPlayer lazy-loads WaveSurfer (only when an audio file is open) and renders an interactive waveform driven by a single play/pause button. The hidden native
<%!-- Sidebar: filename + download + metadata + comments. Suppressed --%> <%!-- in viewer_only mode — standalone-page hosts render their own --%> <%!-- sidebar with admin actions / metadata editor / file details — --%> <%!-- and while collapsed via the viewer-corner toggle above. --%>

{f.filename}

<%= if f.urls["original"] do %> <.icon name="hero-arrow-down-tray" class="w-4 h-4" /> {gettext("Download")} <% end %> <%!-- Admin-context hosts pass details_path — full-page detail view --%> <%!-- with the metadata editor, variants, and storage locations. --%> <.link :if={@details_path} navigate={@details_path} class="btn btn-ghost btn-sm gap-2" > <.icon name="hero-arrow-top-right-on-square" class="w-4 h-4" /> {gettext("Details")}
{gettext("Type:")} {String.upcase(f.file_type || gettext("FILE"))}
{gettext("MIME:")} {f.mime_type}
{gettext("Size:")} {format_file_size(f.size)}
{gettext("Uploaded:")} {PhoenixKit.Utils.Date.format_short_datetime(f.inserted_at)}
<%!-- 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 %>
<% end %> <% end %>