<%!-- --%> <%!-- 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 --%>
<%!-- 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 0.5 canvas + Etcher 0.3 layer. hosts --%> <%!-- the image as a single-image canvas built in --%> <%!-- build_viewer_canvas/2 with the file's annotations stuffed --%> <%!-- into extensions.etcher — Etcher hydrates on mount via --%> <%!-- handle.getExtension("etcher"). --%> <%= if @viewer_canvas do %> f.file_uuid} canvas={@viewer_canvas} class="w-full h-full lg:rounded" theme={:inherit} /> f.file_uuid} tools={[ :rectangle, :circle, :polygon, :freehand, :callout, :text, :dimension, :line, :eraser ]} /> <% 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 --%>

{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")} />
<% end %>