lato_cms 3.0.10 → 3.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 67cc56a05385cb8ed79d06de5407bae73f23444f0872e02021696ebc1dd4000b
-  data.tar.gz: 794483334a4c7906ad00a370448ce488650bc6a94b6755a5f84bd2c909fd3676
+  metadata.gz: 18323c23906137ac104d760d833ca76cd64041f254372a8a7e037bee23a5d5c5
+  data.tar.gz: 5324f43d1305e9aea41bcf19b2b41c96e555edd70ace601b788e649f5cb80b7d
 SHA512:
-  metadata.gz: d020a8b135ea587b61396ed1d8bc8314a9066a165d576e3a31aeb4c127894d0e0652729adf4c3c634a70ef07b075f54de1010d70dcff0ffbdb3f6218e3641fc7
-  data.tar.gz: 20a54bfd7811d1de1acfe2b44af5012fb5d1f810ab9fc2c84b037431e98b9f28541ae9c2a0dc17061db40670c72ce213670404e158ad40b991a35e2f6a534aec
+  metadata.gz: d1c86cbe7a2a9dc66ffad24bb681f5a9022243c86f39ea4f2e8273c5500efec5f5ea20f610979a2f1bc49a4e85e96f1c5471faf00a5d42011b5df02da18cff5a
+  data.tar.gz: eebc417e788f0275c9b6daf1e50777487008358f8b080b75b48cab6f192f1cea94d70f177da537f881ee723b90cf58d365bdcf51f197dc2f9dc0c88c072c9919

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

@@ -0,0 +1,164 @@
+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()
+  }
+
+  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
+  }
+
+  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)
+    }
+  }
+
+  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 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

@@ -299,6 +299,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)
@@ -354,6 +357,22 @@ 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)
+      if field_data[:files].present?
+        new_file = Array(field_data[:files]).compact.first
+        return unless 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/_video.html.erb

@@ -0,0 +1,68 @@
+<% 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-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

@@ -94,6 +94,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

@@ -94,6 +94,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.11"
 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.11
 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