lato_cms 3.0.10 → 3.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 67cc56a05385cb8ed79d06de5407bae73f23444f0872e02021696ebc1dd4000b
-  data.tar.gz: 794483334a4c7906ad00a370448ce488650bc6a94b6755a5f84bd2c909fd3676
+  metadata.gz: 6fd8416ab840a11e364752d13f21440d8282862df78e4b4b67ef8f69432aa56b
+  data.tar.gz: 544411ddd79120e75f9f3df5cf7136d9d0d940cd3ba15abb0720fbf95ec368f7
 SHA512:
-  metadata.gz: d020a8b135ea587b61396ed1d8bc8314a9066a165d576e3a31aeb4c127894d0e0652729adf4c3c634a70ef07b075f54de1010d70dcff0ffbdb3f6218e3641fc7
-  data.tar.gz: 20a54bfd7811d1de1acfe2b44af5012fb5d1f810ab9fc2c84b037431e98b9f28541ae9c2a0dc17061db40670c72ce213670404e158ad40b991a35e2f6a534aec
+  metadata.gz: b0d6f6b71abf13818513d8921e6daa52254ea32209d9b0a44ff3b25f3d3d1e83e4dc90e262eeefba8f9ac08a7fe5bf65d518f6a3c638dfabcdfb072b238ba28d
+  data.tar.gz: f899bc4fbe56254e67359839b79a29598ba0507d05704d7e8cb8cded33f0675f3499bb6aac33666b0b4f2b5eae8f18614e3b3b0f2f0c68fb00c4b22f136af7ba

data/app/assets/javascripts/lato_cms/controllers/lato_cms_file_field_controller.js

@@ -27,6 +27,7 @@ export default class extends Controller {
 
     this.inputTarget.value = ''
     this.syncFileInput()
+    this.syncRequired()
   }
 
   remove(event) {
@@ -38,12 +39,14 @@ export default class extends Controller {
       item.remove()
       this.syncFileInput()
       if (!this.multipleValue) this.restoreReplacedItems()
+      this.syncRequired()
       return
     }
 
     item.classList.add('lato-cms-file-field__item--removing')
     item.querySelector('[data-lato-cms-file-field-target="removedNotice"]')?.classList.remove('d-none')
     this.ensureRemoveInput(item)
+    this.syncRequired()
   }
 
   undo(event) {
@@ -53,6 +56,19 @@ export default class extends Controller {
     item.classList.remove('lato-cms-file-field__item--removing')
     item.querySelector('[data-lato-cms-file-field-target="removedNotice"]')?.classList.add('d-none')
     item.querySelector('[data-remove-file-input]')?.remove()
+    this.syncRequired()
+  }
+
+  // The file input only has to be required while nothing survives the next save:
+  // a pending new file or a persisted attachment not marked for removal already
+  // satisfies the field, so keeping `required` would block every re-save (the
+  // form saves via fetch without reload, so the attribute must track state).
+  syncRequired() {
+    const hasActiveAttachment = this.newFileMap.size > 0 ||
+      this.itemTargets.some(item => {
+        return item.dataset.attachmentId && !item.classList.contains('lato-cms-file-field__item--removing')
+      })
+    this.inputTarget.required = this.fieldRequired && !hasActiveAttachment
   }
 
   ensureRemoveInput(item) {
@@ -124,6 +140,7 @@ export default class extends Controller {
       this.itemTargets
         .filter(item => item.querySelector('[data-remove-file-input]'))
         .forEach(item => item.remove())
+      this.syncRequired()
       return
     }
 
@@ -131,6 +148,7 @@ export default class extends Controller {
     field.attachments.forEach(attachment => {
       this.listTarget.appendChild(this.buildExistingItem(attachment))
     })
+    this.syncRequired()
   }
 
   findSavedField(fields) {
@@ -200,4 +218,8 @@ export default class extends Controller {
   get fieldId() {
     return this.element.dataset.fieldId
   }
+
+  get fieldRequired() {
+    return this.element.dataset.fieldRequired === 'true'
+  }
 }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_gallery_field_controller.js

@@ -38,6 +38,7 @@ export default class extends Controller {
     // Reset input then sync with DataTransfer
     this.fileInputTarget.value = ''
     this.syncFileInput()
+    this.syncRequired()
   }
 
   // ─── Remove ─────────────────────────────────────────────────────────────────
@@ -62,6 +63,7 @@ export default class extends Controller {
     item.remove()
     this.updateEmpty()
     this.updateOrderInputs()
+    this.syncRequired()
   }
 
   // ─── Drag & drop ─────────────────────────────────────────────────────────────
@@ -126,6 +128,17 @@ export default class extends Controller {
     this.emptyMsgTarget.classList.toggle('d-none', !!hasItems)
   }
 
+  // Required enforcement rides on native form validation: the file input is
+  // `visually-hidden` (not display:none) so the browser can focus it and anchor
+  // the validation bubble on the "Add images" button. `required` must be set
+  // only while no image survives the next save — pending files kept in the
+  // input via DataTransfer or surviving grid items satisfy the field.
+  syncRequired() {
+    const hasActiveItem = this.newFileMap.size > 0 ||
+      !!this.gridTarget.querySelector('[data-gallery-item]')
+    this.fileInputTarget.required = this.fieldRequired && !hasActiveItem
+  }
+
   buildItem(src, attachmentId, fileUid) {
     const div = document.createElement('div')
     div.setAttribute('data-gallery-item', '')
@@ -158,6 +171,7 @@ export default class extends Controller {
     })
     this.updateEmpty()
     this.updateOrderInputs()
+    this.syncRequired()
   }
 
   findSavedField(fields) {
@@ -169,4 +183,8 @@ export default class extends Controller {
   get removeLabel() {
     return this.element.dataset.removeLabel || 'Remove'
   }
+
+  get fieldRequired() {
+    return this.element.dataset.fieldRequired === 'true'
+  }
 }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_image_field_controller.js

@@ -45,6 +45,7 @@ export default class extends Controller {
     this.currentContainerTarget.classList.add('lato-cms-file-field__item--removing')
     this.removedNoticeTarget.classList.remove('d-none')
     this.ensureRemoveInput()
+    this.syncRequired()
   }
 
   undo() {
@@ -54,6 +55,16 @@ export default class extends Controller {
     this.removedNoticeTarget.classList.add('d-none')
     this.removeInput?.remove()
     this.removeInput = null
+    this.syncRequired()
+  }
+
+  // The file input only has to be required while no attachment survives the next
+  // save: a persisted attachment (not marked for removal) already satisfies the
+  // field, so keeping `required` on the emptied input would block every re-save.
+  syncRequired() {
+    const hasActiveAttachment = this.hasCurrentContainerTarget &&
+      !this.currentContainerTarget.classList.contains('lato-cms-file-field__item--removing')
+    this.inputTarget.required = this.fieldRequired && !hasActiveAttachment
   }
 
   ensureRemoveInput() {
@@ -82,6 +93,7 @@ export default class extends Controller {
     if (attachment) {
       this.element.insertBefore(this.buildCurrentContainer(attachment), this.newPreviewContainerTarget)
     }
+    this.syncRequired()
   }
 
   findSavedField(fields) {
@@ -139,6 +151,10 @@ export default class extends Controller {
     return this.element.dataset.fieldId
   }
 
+  get fieldRequired() {
+    return this.element.dataset.fieldRequired === 'true'
+  }
+
   get removeLabel() {
     return this.element.dataset.removeLabel || 'Remove'
   }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_video_field_controller.js

@@ -0,0 +1,180 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "newPreview", "newPreviewContainer", "newPreviewName", "newPreviewSize", "currentContainer", "currentVideo", "removedNotice"]
+
+  connect() {
+    this.afterSave = this.afterSave.bind(this)
+    this.element.closest('form')?.addEventListener('lato-cms:fields-save-success', this.afterSave)
+  }
+
+  disconnect() {
+    this.element.closest('form')?.removeEventListener('lato-cms:fields-save-success', this.afterSave)
+    this.revokeObjectUrl()
+  }
+
+  preview() {
+    const file = this.inputTarget.files[0]
+    if (!file || !file.type.startsWith('video/')) return
+
+    // Object URL instead of FileReader: videos can be large and the browser
+    // streams from the original file without loading it in memory.
+    this.revokeObjectUrl()
+    this.objectUrl = URL.createObjectURL(file)
+    this.newPreviewTarget.src = this.objectUrl
+    this.newPreviewNameTarget.textContent = file.name
+    this.newPreviewSizeTarget.textContent = `(${this.humanSize(file.size)})`
+    this.newPreviewContainerTarget.classList.remove('d-none')
+    this.undo()
+    if (this.hasCurrentContainerTarget) this.currentContainerTarget.classList.add('d-none')
+  }
+
+  removeNew() {
+    this.inputTarget.value = ''
+    this.revokeObjectUrl()
+    this.newPreviewTarget.removeAttribute('src')
+    this.newPreviewNameTarget.textContent = ''
+    this.newPreviewSizeTarget.textContent = ''
+    this.newPreviewContainerTarget.classList.add('d-none')
+    if (this.hasCurrentContainerTarget) this.currentContainerTarget.classList.remove('d-none')
+  }
+
+  remove() {
+    if (!this.hasCurrentContainerTarget) return
+
+    this.currentContainerTarget.classList.add('lato-cms-file-field__item--removing')
+    this.removedNoticeTarget.classList.remove('d-none')
+    this.ensureRemoveInput()
+    this.syncRequired()
+  }
+
+  undo() {
+    if (!this.hasCurrentContainerTarget) return
+
+    this.currentContainerTarget.classList.remove('lato-cms-file-field__item--removing')
+    this.removedNoticeTarget.classList.add('d-none')
+    this.removeInput?.remove()
+    this.removeInput = null
+    this.syncRequired()
+  }
+
+  // The file input only has to be required while no attachment survives the next
+  // save: a persisted attachment (not marked for removal) already satisfies the
+  // field, so keeping `required` on the emptied input would block every re-save.
+  syncRequired() {
+    const hasActiveAttachment = this.hasCurrentContainerTarget &&
+      !this.currentContainerTarget.classList.contains('lato-cms-file-field__item--removing')
+    this.inputTarget.required = this.fieldRequired && !hasActiveAttachment
+  }
+
+  ensureRemoveInput() {
+    if (this.removeInput) return
+
+    const input = document.createElement('input')
+    input.type = 'hidden'
+    input.name = this.inputTarget.name.replace(/\[files\]\[\]$/, '[remove_file_ids][]')
+    input.value = this.currentContainerTarget.dataset.attachmentId
+    this.element.appendChild(input)
+    this.removeInput = input
+  }
+
+  afterSave(event) {
+    if (!event.detail.success) return
+
+    this.inputTarget.value = ''
+    this.removeInput = null
+    this.revokeObjectUrl()
+    const field = this.findSavedField(event.detail.data?.fields || [])
+    if (!field) return
+
+    const attachment = field.attachments[0]
+    this.element.querySelector('[data-lato-cms-video-field-target="currentContainer"]')?.remove()
+    this.newPreviewContainerTarget.classList.add('d-none')
+
+    if (attachment) {
+      this.element.insertBefore(this.buildCurrentContainer(attachment), this.newPreviewContainerTarget)
+    }
+    this.syncRequired()
+  }
+
+  findSavedField(fields) {
+    return fields.find(field => {
+      return field.persisted_field_id === this.fieldId || field.field_id === this.fieldId
+    })
+  }
+
+  buildCurrentContainer(attachment) {
+    const container = document.createElement('div')
+    container.className = 'lato-cms-file-field__item lato-cms-video-field__item'
+    container.dataset.latoCmsVideoFieldTarget = 'currentContainer'
+    container.dataset.attachmentId = attachment.id
+    // poster_url is usually still null right after save: the poster is
+    // generated by a background job and shows up on the next page load.
+    const poster = attachment.poster_url ? ` poster="${attachment.poster_url}"` : ''
+    container.innerHTML = `
+      <div class="lato-cms-video-field__preview">
+        <video controls preload="metadata" class="lato-cms-video-field__player" src="${attachment.url}"${poster} data-lato-cms-video-field-target="currentVideo"></video>
+      </div>
+      <div class="lato-cms-file-field__info">
+        <i class="bi bi-film"></i>
+        <span>${this.escapeHtml(attachment.filename)}</span>
+        <span class="text-muted small">(${this.humanSize(attachment.byte_size || 0)})</span>
+      </div>
+      <button type="button" class="lato-cms-attachment-field__remove" title="${this.removeLabel}" aria-label="${this.removeLabel}" data-action="lato-cms-video-field#remove">
+        <i class="bi bi-trash"></i>
+      </button>
+      <div class="lato-cms-file-field__removed d-none" data-lato-cms-video-field-target="removedNotice">
+        <span class="text-danger small">
+          <i class="bi bi-trash me-1"></i>${this.removePendingLabel}
+        </span>
+        <button type="button" class="btn btn-link btn-sm p-0" data-action="lato-cms-video-field#undo">
+          ${this.undoLabel}
+        </button>
+      </div>
+    `
+    return container
+  }
+
+  revokeObjectUrl() {
+    if (!this.objectUrl) return
+
+    URL.revokeObjectURL(this.objectUrl)
+    this.objectUrl = null
+  }
+
+  humanSize(size) {
+    if (size < 1024) return `${size} B`
+    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
+    return `${(size / 1024 / 1024).toFixed(1)} MB`
+  }
+
+  escapeHtml(value) {
+    return value.replace(/[&<>"']/g, char => ({
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
+    }[char]))
+  }
+
+  get fieldId() {
+    return this.element.dataset.fieldId
+  }
+
+  get fieldRequired() {
+    return this.element.dataset.fieldRequired === 'true'
+  }
+
+  get removeLabel() {
+    return this.element.dataset.removeLabel || 'Remove'
+  }
+
+  get removePendingLabel() {
+    return this.element.dataset.removePendingLabel || 'Video will be removed on save'
+  }
+
+  get undoLabel() {
+    return this.element.dataset.undoLabel || 'Undo'
+  }
+}

data/app/assets/stylesheets/lato_cms/application.scss

@@ -268,6 +268,7 @@ body.controller-pages.action-show {
 
   .lato-cms-file-field__info,
   .lato-cms-image-field__preview,
+  .lato-cms-video-field__preview,
   .lato-cms-attachment-field__remove,
   > .btn {
     display: none;
@@ -339,6 +340,27 @@ body.controller-pages.action-show {
   font-size: 10px;
 }
 
+// ── Video field ────────────────────────────────────────────────────────────────
+.lato-cms-video-field__item {
+  align-items: stretch;
+}
+
+.lato-cms-video-field__preview {
+  align-self: center;
+  background: #000;
+  border: 1px solid rgba(33, 37, 41, 0.08);
+  border-radius: 6px;
+  flex: 0 0 auto;
+  overflow: hidden;
+  width: 180px;
+}
+
+.lato-cms-video-field__player {
+  display: block;
+  max-height: 110px;
+  width: 100%;
+}
+
 // ── Gallery field ──────────────────────────────────────────────────────────────
 .lato-cms-gallery-field__grid {
   display: flex;

data/app/controllers/lato_cms/pages_controller.rb

@@ -9,6 +9,10 @@ module LatoCms
       translations link_translation_action unlink_translation_action
     ].freeze
 
+    # Field types whose value lives in Active Storage attachments instead of
+    # `value`, so `required` must be checked against the attached files.
+    ATTACHMENT_FIELD_TYPES = %w[file image video gallery].freeze
+
     before_action { active_sidebar(:lato_cms_pages) }
     before_action :authenticate_lato_cms_admin, only: ADMIN_ONLY_ACTIONS
 
@@ -288,6 +292,15 @@ module LatoCms
 
       unless field.save
         errors << { field_id: persisted_field_id, errors: field.errors.full_messages }
+        return
+      end
+
+      # Attachments are attached/purged here in the controller, so the model
+      # cannot validate `required` for attachment fields. Backstop the
+      # client-side enforcement: a required field must end the save with at
+      # least one file, otherwise required would be bypassable.
+      if ATTACHMENT_FIELD_TYPES.include?(field_type) && field_config&.dig("required") == true && field.files.reload.empty?
+        errors << { field_id: persisted_field_id, errors: [t("lato_cms.field_required_attachment_error")] }
       end
     end
 
@@ -299,6 +312,9 @@ module LatoCms
       when 'image'
         field.save if field.new_record?
         replace_field_image(field, field_data)
+      when 'video'
+        field.save if field.new_record?
+        replace_field_video(field, field_data)
       when 'gallery'
         field.save if field.new_record?
         attach_field_files(field, field_data)
@@ -315,17 +331,20 @@ module LatoCms
       end
     end
 
-    def attach_field_files(field, field_data)
-      return unless field_data[:files].present?
+    # Browsers submit empty entries for file inputs with no selection: strip
+    # them so `attach` never receives a blank value and the required check
+    # sees the field as actually empty.
+    def submitted_files(field_data)
+      Array(field_data[:files]).reject(&:blank?)
+    end
 
-      Array(field_data[:files]).compact.each { |file| field.files.attach(file) }
+    def attach_field_files(field, field_data)
+      submitted_files(field_data).each { |file| field.files.attach(file) }
     end
 
     def assign_file_field_files(field, field_data)
-      if field.field_settings['multiple'] != true && field_data[:files].present?
-        new_file = Array(field_data[:files]).compact.first
-        return unless new_file
-
+      new_file = submitted_files(field_data).first
+      if field.field_settings['multiple'] != true && new_file
         field.files.each(&:purge)
         field.files.attach(new_file)
       else
@@ -343,10 +362,8 @@ module LatoCms
     end
 
     def replace_field_image(field, field_data)
-      if field_data[:files].present?
-        new_file = Array(field_data[:files]).compact.first
-        return unless new_file
-
+      new_file = submitted_files(field_data).first
+      if new_file
         field.files.each(&:purge)
         field.files.attach(new_file)
       else
@@ -354,6 +371,20 @@ module LatoCms
       end
     end
 
+    # Single-video semantics: uploading a new video replaces both the previous
+    # video and its auto-generated poster; removing the video drops the poster
+    # too. Poster generation runs in a background job to keep the save fast.
+    def replace_field_video(field, field_data)
+      new_file = submitted_files(field_data).first
+      if new_file
+        field.files.each(&:purge)
+        field.files.attach(new_file)
+        LatoCms::GenerateVideoPosterJob.perform_later(field.id)
+      elsif field_data[:remove_file_ids].present?
+        field.files.each(&:purge)
+      end
+    end
+
     def create_params
       params.require(:page).permit(:title, :locale)
     end

data/app/helpers/lato_cms/pages_helper.rb

@@ -1,6 +1,6 @@
 module LatoCms
   module PagesHelper
-    BUILTIN_FIELD_TYPES = %w[string textarea text number date datetime boolean select multiselect color json file image gallery].freeze
+    BUILTIN_FIELD_TYPES = %w[string textarea text number date datetime boolean select multiselect color json file image video gallery].freeze
 
     # Returns the path for an Active Storage attachment.
     # Using main_app avoids the missing `attachment_path` error inside the engine.

data/app/jobs/lato_cms/generate_video_poster_job.rb

@@ -0,0 +1,12 @@
+module LatoCms
+  # Generates the poster image for a video field in the background so the save
+  # request is not blocked by ffmpeg processing. Failures are swallowed by the
+  # model (logged as warnings): a missing poster must never break the field.
+  class GenerateVideoPosterJob < ApplicationJob
+    queue_as :default
+
+    def perform(page_field_id)
+      LatoCms::PageField.find_by(id: page_field_id)&.generate_video_poster!
+    end
+  end
+end

data/app/models/lato_cms/page_field.rb

@@ -75,6 +75,38 @@ module LatoCms
       field_config&.dig('settings') || {}
     end
 
+    # A video field stores two attachments in `files`: the video itself and an
+    # optional auto-generated poster image. Content type is the discriminator,
+    # so no extra column or naming convention is needed.
+    def video_attachment
+      files.find { |file| file.content_type.to_s.start_with?("video/") }
+    end
+
+    def poster_attachment
+      files.find { |file| file.content_type.to_s.start_with?("image/") }
+    end
+
+    # Generates a poster image from the video via Active Storage previews
+    # (ffmpeg) and attaches it alongside the video. Best effort: any failure is
+    # logged and the video keeps working without a poster.
+    def generate_video_poster!
+      video = video_attachment
+      return unless video
+      return if poster_attachment
+
+      unless video.previewable?
+        Rails.logger.warn("LatoCms: video preview unavailable (ffmpeg missing?) for attachment #{video.id}, skipping poster generation")
+        return
+      end
+
+      preview = video.preview(resize_to_limit: [1280, 720]).processed
+      preview.image.blob.open do |file|
+        files.attach(io: file, filename: "#{video.filename.base}_poster.jpg", content_type: preview.image.blob.content_type)
+      end
+    rescue StandardError => e
+      Rails.logger.warn("LatoCms: failed to generate video poster for field #{id}: #{e.message}")
+    end
+
     def as_json(_options = {})
       result = {
         id: id,
@@ -93,6 +125,9 @@ module LatoCms
       when 'image'
         attached = files.first
         result[:attachments] = attached ? [attachment_as_json(attached, with_variants: true)] : []
+      when 'video'
+        attached = video_attachment
+        result[:attachments] = attached ? [video_attachment_as_json(attached)] : []
       when 'gallery'
         order = value ? (JSON.parse(value) rescue []) : []
         all_files = files.to_a
@@ -119,6 +154,15 @@ module LatoCms
       json
     end
 
+    # Video attachment json gains a `poster_url` key (nil until the poster job
+    # runs) so API consumers get video and poster URLs in a single object.
+    def video_attachment_as_json(attachment)
+      poster = poster_attachment
+      attachment_as_json(attachment).merge(
+        poster_url: poster && Rails.application.routes.url_helpers.rails_blob_path(poster, only_path: true)
+      )
+    end
+
     # Builds a map of { size_name => variant_url } from the field's `settings.sizes`.
     # Variants are processed lazily by Active Storage on first request to their URL.
     def attachment_variant_urls(attachment)

data/app/views/lato_cms/pages/fields/_file.html.erb

@@ -13,6 +13,7 @@
 
 <div data-controller="lato-cms-file-field"
      data-field-id="<%= field_id %>"
+     data-field-required="<%= required %>"
      data-lato-cms-file-field-multiple-value="<%= multiple %>"
      data-new-badge-label="<%= t('lato_cms.field_file_new_badge') %>"
      data-remove-label="<%= t('lato_cms.field_file_remove') %>"
@@ -49,6 +50,7 @@
     id="<%= input_id %>"
     data-lato-cms-file-field-target="input"
     data-action="change->lato-cms-file-field#addFiles"
+    <%= 'required' if required && !page_field&.files&.attached? %>
     <%= 'multiple' if multiple %>
     <% if accept %>accept="<%= accept %>"<% end %>>
 </div>

data/app/views/lato_cms/pages/fields/_gallery.html.erb

@@ -20,7 +20,7 @@ end %>
   <%= label %><%= ' *' if required %>
 </label>
 
-<div data-controller="lato-cms-gallery-field" data-lato-cms-gallery-field-field-id-value="<%= field_id %>" data-lato-cms-gallery-field-input-name-prefix-value="<%= local_assigns[:input_name_prefix].presence || "fields[#{field_id}]" %>" data-remove-label="<%= t('lato_cms.field_file_remove') %>">
+<div data-controller="lato-cms-gallery-field" data-lato-cms-gallery-field-field-id-value="<%= field_id %>" data-lato-cms-gallery-field-input-name-prefix-value="<%= local_assigns[:input_name_prefix].presence || "fields[#{field_id}]" %>" data-field-required="<%= required %>" data-remove-label="<%= t('lato_cms.field_file_remove') %>">
   <div class="lato-cms-gallery-field__grid mb-2"
        data-lato-cms-gallery-field-target="grid"
        data-action="dragover->lato-cms-gallery-field#onGridDragOver drop->lato-cms-gallery-field#onGridDrop">
@@ -44,13 +44,17 @@ end %>
 
   <label class="btn btn-sm btn-outline-secondary">
     <i class="bi bi-plus-lg me-1"></i><%= t('lato_cms.field_gallery_add_images') %>
+    <%# visually-hidden (not d-none): a required display:none input makes native
+        validation fail silently with a "not focusable" error, while a clipped
+        1px input stays focusable so the browser can anchor its message here. %>
     <input type="file"
-      class="d-none"
+      class="visually-hidden"
       name="<%= files_input_name %>"
       accept="<%= accept %>"
       multiple
       data-lato-cms-gallery-field-target="fileInput"
-      data-action="change->lato-cms-gallery-field#addFiles">
+      data-action="change->lato-cms-gallery-field#addFiles"
+      <%= 'required' if required && ordered_files.empty? %>>
   </label>
   <small class="text-muted ms-2"><%= t('lato_cms.field_gallery_drag_to_reorder') %></small>
 </div>

data/app/views/lato_cms/pages/fields/_image.html.erb

@@ -13,6 +13,7 @@
 
 <div data-controller="lato-cms-image-field"
      data-field-id="<%= field_id %>"
+     data-field-required="<%= required %>"
      data-new-badge-label="<%= t('lato_cms.field_image_new_badge') %>"
      data-remove-label="<%= t('lato_cms.field_image_remove') %>"
      data-remove-pending-label="<%= t('lato_cms.field_image_remove_pending') %>"

data/app/views/lato_cms/pages/fields/_video.html.erb

@@ -0,0 +1,69 @@
+<% label = field_config['name'] || field_id.humanize %>
+<% required = field_config['required'] == true %>
+<% settings = field_config['settings'] || {} %>
+<% accept = settings['accept'] || 'video/*' %>
+<% current_file = page_field&.video_attachment %>
+<% poster_file = page_field&.poster_attachment %>
+<% files_input_name = lato_cms_field_input_name(field_id, 'files', input_name_prefix: local_assigns[:input_name_prefix], multiple: true) %>
+<% remove_input_name = lato_cms_field_input_name(field_id, 'remove_file_ids', input_name_prefix: local_assigns[:input_name_prefix], multiple: true) %>
+<% input_id = lato_cms_field_dom_id(field_id, 'files', dom_id_prefix: local_assigns[:dom_id_prefix]) %>
+
+<label class="form-label">
+  <%= label %><%= ' *' if required %>
+</label>
+
+<div data-controller="lato-cms-video-field"
+     data-field-id="<%= field_id %>"
+     data-field-required="<%= required %>"
+     data-new-badge-label="<%= t('lato_cms.field_video_new_badge') %>"
+     data-remove-label="<%= t('lato_cms.field_video_remove') %>"
+     data-remove-pending-label="<%= t('lato_cms.field_video_remove_pending') %>"
+     data-undo-label="<%= t('lato_cms.field_file_remove_undo') %>">
+  <% if current_file %>
+    <div class="lato-cms-file-field__item lato-cms-video-field__item" data-lato-cms-video-field-target="currentContainer" data-attachment-id="<%= current_file.id %>">
+      <div class="lato-cms-video-field__preview">
+        <video controls preload="metadata" class="lato-cms-video-field__player" src="<%= lato_cms_attachment_path(current_file) %>" <% if poster_file %>poster="<%= lato_cms_attachment_path(poster_file) %>"<% end %> data-lato-cms-video-field-target="currentVideo"></video>
+      </div>
+      <div class="lato-cms-file-field__info">
+        <i class="bi bi-film"></i>
+        <span><%= current_file.blob.filename %></span>
+        <span class="text-muted small">(<%= number_to_human_size(current_file.blob.byte_size) %>)</span>
+      </div>
+      <button type="button" class="lato-cms-attachment-field__remove" title="<%= t('lato_cms.field_video_remove') %>" aria-label="<%= t('lato_cms.field_video_remove') %>" data-action="lato-cms-video-field#remove">
+        <i class="bi bi-trash"></i>
+      </button>
+      <div class="lato-cms-file-field__removed d-none" data-lato-cms-video-field-target="removedNotice">
+        <span class="text-danger small">
+          <i class="bi bi-trash me-1"></i><%= t('lato_cms.field_video_remove_pending') %>
+        </span>
+        <button type="button" class="btn btn-link btn-sm p-0" data-action="lato-cms-video-field#undo">
+          <%= t('lato_cms.field_file_remove_undo') %>
+        </button>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="lato-cms-file-field__item lato-cms-file-field__item--new lato-cms-video-field__item d-none" data-lato-cms-video-field-target="newPreviewContainer">
+    <div class="lato-cms-video-field__preview">
+      <video controls preload="metadata" class="lato-cms-video-field__player" data-lato-cms-video-field-target="newPreview"></video>
+    </div>
+    <div class="lato-cms-file-field__info">
+      <i class="bi bi-film"></i>
+      <span data-lato-cms-video-field-target="newPreviewName"></span>
+      <span class="text-muted small" data-lato-cms-video-field-target="newPreviewSize"></span>
+      <span class="badge bg-success"><%= t('lato_cms.field_video_new_badge') %></span>
+    </div>
+    <button type="button" class="lato-cms-attachment-field__remove" title="<%= t('lato_cms.field_video_remove') %>" aria-label="<%= t('lato_cms.field_video_remove') %>" data-action="lato-cms-video-field#removeNew">
+      <i class="bi bi-trash"></i>
+    </button>
+  </div>
+
+  <input type="file"
+    class="form-control"
+    name="<%= files_input_name %>"
+    id="<%= input_id %>"
+    accept="<%= accept %>"
+    data-lato-cms-video-field-target="input"
+    data-action="change->lato-cms-video-field#preview"
+    <%= 'required' if required && !current_file %>>
+</div>

data/config/locales/en.yml

@@ -82,6 +82,7 @@ en:
     repeater_remove_item: Remove
     repeater_min_error: "At least %{count} items are required"
     repeater_max_error: "At most %{count} items are allowed"
+    field_required_attachment_error: "At least one file is required"
     fields_component_missing_alert_html: "Component <strong>%{component_id}</strong> not found. The component configuration may have been removed."
     fields_previously_saved_data: "Previously saved data:"
     field_file_remove: Remove
@@ -94,6 +95,9 @@ en:
     field_image_remove: Remove
     field_image_remove_pending: Image will be removed on save
     field_image_new_badge: New
+    field_video_remove: Remove
+    field_video_remove_pending: Video will be removed on save
+    field_video_new_badge: New
     field_multiselect_hint: Hold Ctrl/Cmd to select multiple
     field_select_placeholder: "-- Select --"
     field_text_toolbar_bold: Bold

data/config/locales/it.yml

@@ -82,6 +82,7 @@ it:
     repeater_remove_item: Rimuovi
     repeater_min_error: "Sono richiesti almeno %{count} elementi"
     repeater_max_error: "Sono ammessi al massimo %{count} elementi"
+    field_required_attachment_error: "È richiesto almeno un file"
     fields_component_missing_alert_html: "Componente <strong>%{component_id}</strong> non trovato. La configurazione del componente potrebbe essere stata rimossa."
     fields_previously_saved_data: "Dati salvati in precedenza:"
     field_file_remove: Rimuovi
@@ -94,6 +95,9 @@ it:
     field_image_remove: Rimuovi
     field_image_remove_pending: L'immagine verra rimossa al salvataggio
     field_image_new_badge: Nuovo
+    field_video_remove: Rimuovi
+    field_video_remove_pending: Il video verra rimosso al salvataggio
+    field_video_new_badge: Nuovo
     field_multiselect_hint: Tieni premuto Ctrl/Cmd per selezionare piu opzioni
     field_select_placeholder: "-- Seleziona --"
     field_text_toolbar_bold: Grassetto

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.0.10"
+  VERSION = "3.0.12"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato_cms
 version: !ruby/object:Gem::Version
-  version: 3.0.10
+  version: 3.0.12
 platform: ruby
 authors:
 - Gregorio Galante
@@ -103,6 +103,7 @@ files:
 - app/assets/javascripts/lato_cms/controllers/lato_cms_page_preview_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_repeater_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_text_field_controller.js
+- app/assets/javascripts/lato_cms/controllers/lato_cms_video_field_controller.js
 - app/assets/stylesheets/lato_cms/application.scss
 - app/controllers/lato_cms/api/pages_controller.rb
 - app/controllers/lato_cms/application_controller.rb
@@ -110,6 +111,7 @@ files:
 - app/helpers/lato_cms/application_helper.rb
 - app/helpers/lato_cms/pages_helper.rb
 - app/jobs/lato_cms/application_job.rb
+- app/jobs/lato_cms/generate_video_poster_job.rb
 - app/mailers/lato_cms/application_mailer.rb
 - app/models/lato_cms/page.rb
 - app/models/lato_cms/page_field.rb
@@ -136,6 +138,7 @@ files:
 - app/views/lato_cms/pages/fields/_string.html.erb
 - app/views/lato_cms/pages/fields/_text.html.erb
 - app/views/lato_cms/pages/fields/_textarea.html.erb
+- app/views/lato_cms/pages/fields/_video.html.erb
 - app/views/lato_cms/pages/index.html.erb
 - app/views/lato_cms/pages/show.html.erb
 - app/views/lato_cms/pages/translations.html.erb