<.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/settings/media")} title={gettext("Instance Dimensions")} subtitle={gettext("Manage dimension presets for automatic file instance generation")} /> <%!-- Info Alert --%>
<.icon name="hero-information-circle" class="w-5 h-5" />

{gettext("Dimension Presets")}

{gettext( "Dimensions define the target sizes for automatic variant generation. Images are resized and videos are transcoded to these preset sizes." )} {gettext( "The migration seeds 8 default dimensions: 4 image sizes (thumbnail, small, medium, large) and 4 video variants (360p, 720p, 1080p, video_thumbnail)." )}

<%!-- Dimensions List --%>
<%= if length(@dimensions) == 0 do %>
<.icon name="hero-photo" class="w-16 h-16 mx-auto mb-4 text-base-content/30" />

{gettext("No dimensions configured")}

{gettext("Create your first dimension preset to start generating file variants.")}

<.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/image") } class="btn btn-info" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Image Dimension")} <.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/video") } class="btn btn-warning" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Video Dimension")}
<% else %> <%!-- Image Dimensions --%>

<.icon name="hero-photo" class="w-6 h-6 mr-2" /> {gettext("Image Dimensions")}

<.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/image") } class="btn btn-info" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Image Dimension")}
<% image_dims = Enum.filter(@dimensions, &(&1.applies_to in ["image", "both"])) %> <.table_default id="image-dimensions-table" variant="zebra" toggleable={true} items={image_dims} card_title={fn d -> d.name end} card_fields={ fn d -> [ %{ label: gettext("Size"), value: if(d.maintain_aspect_ratio, do: "#{d.width}px", else: format_dimension_size(d.width, d.height) ) }, %{ label: gettext("Mode"), value: if(d.maintain_aspect_ratio, do: gettext("Aspect Ratio"), else: gettext("Fixed") ) }, %{label: gettext("Quality"), value: "#{d.quality}%"}, %{ label: gettext("Format"), value: if(d.format, do: String.upcase(d.format), else: gettext("Original")) <> if((d.alternative_formats || []) != [], do: " + " <> Enum.map_join(d.alternative_formats, ", ", &String.upcase/1), else: "" ) }, %{ label: gettext("Status"), value: if(d.enabled, do: gettext("Enabled"), else: gettext("Disabled")) } ] end } > <.table_default_header> <.table_default_row> <.table_default_header_cell>{gettext("Name")} <.table_default_header_cell>{gettext("Size")} <.table_default_header_cell>{gettext("Mode")} <.table_default_header_cell>{gettext("Quality")} <.table_default_header_cell>{gettext("Format")} <.table_default_header_cell>{gettext("Status")} <.table_default_header_cell>{gettext("Actions")} <.table_default_body> <%= for dimension <- image_dims do %> <.table_default_row> <.table_default_cell>
{dimension.name}
<.table_default_cell> <%= if dimension.maintain_aspect_ratio do %> {dimension.width}px <% else %> {format_dimension_size(dimension.width, dimension.height)} <% end %> <.table_default_cell> <%= if dimension.maintain_aspect_ratio do %> {gettext("Aspect Ratio")} <% else %> {gettext("Fixed")} <% end %> <.table_default_cell> {dimension.quality}% <.table_default_cell> <%= if dimension.format do %> {dimension.format} <% else %> {gettext("Original")} <% end %> <%= if (dimension.alternative_formats || []) != [] do %> <%= for fmt <- dimension.alternative_formats do %> +{fmt} <% end %> <% end %> <.table_default_cell> <%= if dimension.enabled do %> {gettext("Enabled")} <% else %> {gettext("Disabled")} <% end %> <.table_default_cell> <.table_row_menu id={"img-dim-menu-#{dimension.uuid}"} label={gettext("Dimension actions")} > <.table_row_menu_link navigate={ PhoenixKit.Utils.Routes.path( "/admin/settings/media/dimensions/#{dimension.uuid}/edit" ) } icon="hero-pencil" label={gettext("Edit")} /> <.table_row_menu_button phx-click="toggle_dimension" phx-debounce="1000" phx-value-id={dimension.uuid} icon={if dimension.enabled, do: "hero-eye-slash", else: "hero-eye"} label={ if dimension.enabled, do: gettext("Disable"), else: gettext("Enable") } /> <.table_row_menu_button phx-click="delete_dimension" phx-debounce="1000" phx-value-id={dimension.uuid} data-confirm={ gettext("Are you sure you want to delete this dimension?") } icon="hero-trash" label={gettext("Delete")} class="text-error" /> <% end %> <:card_actions :let={dimension}> <.link navigate={ PhoenixKit.Utils.Routes.path( "/admin/settings/media/dimensions/#{dimension.uuid}/edit" ) } class="btn btn-xs btn-outline btn-info" > <.icon name="hero-pencil" class="w-3 h-3" /> {gettext("Edit")}
<%!-- Video Dimensions --%>

<.icon name="hero-video-camera" class="w-6 h-6 mr-2" /> {gettext( "Video Dimensions" )}

<.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/video") } class="btn btn-warning" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Video Dimension")}
<% video_dims = Enum.filter(@dimensions, &(&1.applies_to in ["video", "both"])) %> <.table_default id="video-dimensions-table" variant="zebra" toggleable={true} items={video_dims} card_title={fn d -> d.name end} card_fields={ fn d -> [ %{ label: gettext("Resolution"), value: if(d.maintain_aspect_ratio, do: "#{d.width}px", else: format_dimension_size(d.width, d.height) ) }, %{ label: gettext("Mode"), value: if(d.maintain_aspect_ratio, do: gettext("Aspect Ratio"), else: gettext("Fixed") ) }, %{label: gettext("Quality (CRF)"), value: "#{d.quality}"}, %{ label: gettext("Codec"), value: if(d.format, do: String.upcase(d.format), else: gettext("Original")) }, %{ label: gettext("Status"), value: if(d.enabled, do: gettext("Enabled"), else: gettext("Disabled")) } ] end } > <.table_default_header> <.table_default_row> <.table_default_header_cell>{gettext("Name")} <.table_default_header_cell> {gettext("Resolution")} <.table_default_header_cell>{gettext("Mode")} <.table_default_header_cell> {gettext("Quality (CRF)")} <.table_default_header_cell>{gettext("Codec")} <.table_default_header_cell>{gettext("Status")} <.table_default_header_cell>{gettext("Actions")} <.table_default_body> <%= for dimension <- video_dims do %> <.table_default_row> <.table_default_cell>
{dimension.name}
<.table_default_cell> <%= if dimension.maintain_aspect_ratio do %> {dimension.width}px <% else %> {format_dimension_size(dimension.width, dimension.height)} <% end %> <.table_default_cell> <%= if dimension.maintain_aspect_ratio do %> {gettext("Aspect Ratio")} <% else %> {gettext("Fixed")} <% end %> <.table_default_cell> {dimension.quality} <.table_default_cell> <%= if dimension.format do %> {dimension.format} <% else %> {gettext("Original")} <% end %> <%= if (dimension.alternative_formats || []) != [] do %> <%= for fmt <- dimension.alternative_formats do %> +{fmt} <% end %> <% end %> <.table_default_cell> <%= if dimension.enabled do %> {gettext("Enabled")} <% else %> {gettext("Disabled")} <% end %> <.table_default_cell> <.table_row_menu id={"vid-dim-menu-#{dimension.uuid}"} label={gettext("Dimension actions")} > <.table_row_menu_link navigate={ PhoenixKit.Utils.Routes.path( "/admin/settings/media/dimensions/#{dimension.uuid}/edit" ) } icon="hero-pencil" label={gettext("Edit")} /> <.table_row_menu_button phx-click="toggle_dimension" phx-debounce="1000" phx-value-id={dimension.uuid} icon={if dimension.enabled, do: "hero-eye-slash", else: "hero-eye"} label={ if dimension.enabled, do: gettext("Disable"), else: gettext("Enable") } /> <.table_row_menu_button phx-click="delete_dimension" phx-debounce="1000" phx-value-id={dimension.uuid} data-confirm={ gettext("Are you sure you want to delete this dimension?") } icon="hero-trash" label={gettext("Delete")} class="text-error" /> <% end %> <:card_actions :let={dimension}> <.link navigate={ PhoenixKit.Utils.Routes.path( "/admin/settings/media/dimensions/#{dimension.uuid}/edit" ) } class="btn btn-xs btn-outline btn-info" > <.icon name="hero-pencil" class="w-3 h-3" /> {gettext("Edit")}
<% end %>
<%!-- Help Section --%>
<.icon name="hero-light-bulb" class="w-5 h-5" />

{gettext("Variant Generation System")}

{gettext("Quality Settings:")} {gettext("Images use 1-100 scale (compression quality)")}
{gettext("Video Settings:")} {gettext("Videos use CRF 0-51 scale (lower = higher quality)")}
{gettext("Format Override:")} {gettext("Leave empty to preserve original format, or specify jpg/png/webp/mp4")}