lato_cms 3.1.0 → 3.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fe4976c31eee3bc5137206d66037755baf19825e152a1c37a4be32e5b715dd6d
-  data.tar.gz: a209a52cb918989ce0179da4c902e3f4f71f0bb0843b6c4e7fac83c8b901424c
+  metadata.gz: 2c31c3c48793c6d20d23de01e4ccf7e42d9086d299e7ae5b713061e5ddd8861b
+  data.tar.gz: 0f575950a6a54cf1f4321fd9127297a8c1941c4684b7b7ccaefbe251e67a4aa4
 SHA512:
-  metadata.gz: 469fa040c5c8ea3b04d630c1d664e0ff2db92a418089852eb2252c57899da646325c76969b4389dd219f20ff96c3f679b0581548107e19a354e9f47977bde3bd
-  data.tar.gz: 7638ec4ca940ab161bb361ec69fff832fb3950ab814dd656d3f4dabe422cafdf6b91ebff1962949dfcd89e86fd269d2bde9d95d17fff3f1a25eb16a36dc9413b
+  metadata.gz: d67ec60c551ffb117fc461d00b1279f058dfb2f8a3ffcd5b72a30f7eb4e05c5494811d4dedee733c41409fca5232774ac8818a90a3b30f70b7697fbeed72f86c
+  data.tar.gz: f09db9cfb78554e68063210c37f46621b42ce4131ed9e2d849d68409056a76e218cd26c2cc8af0dd9c771318052828147dde86ea2e7d306dc55f939cf0f17518

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

@@ -94,8 +94,10 @@ export default class extends Controller {
   appendItem (item) {
     if (!item || this.gridTarget.querySelector(`[data-media-id="${item.id}"]`)) return
 
+    const wide = !this.multipleValue && ['image', 'video'].includes(this.kindValue)
+
     const wrapper = document.createElement('div')
-    wrapper.className = 'lato-cms-media-field__tile lato-cms-media-field__item'
+    wrapper.className = `lato-cms-media-field__tile lato-cms-media-field__item${wide ? ' lato-cms-media-field__tile--wide' : ''}`
     wrapper.dataset.mediaId = item.id
     if (this.multipleValue) {
       wrapper.draggable = true
@@ -118,8 +120,7 @@ export default class extends Controller {
 
   previewMarkup (item) {
     if (this.kindValue === 'video') {
-      return `<video muted preload="metadata" class="lato-cms-media-field__player" src="${item.url}"></video>
-        <i class="bi bi-play-circle-fill lato-cms-media-field__badge"></i>`
+      return `<video controls preload="metadata" class="lato-cms-media-field__player" src="${item.url}"></video>`
     }
     if (item.thumbnailUrl || item.url) {
       return `<img src="${item.thumbnailUrl || item.url}" class="lato-cms-media-field__thumb">`

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

@@ -1,12 +1,17 @@
 import { Controller } from '@hotwired/stimulus'
 
-// Refreshes the enclosing turbo-frame (or the whole page) whenever a
-// Bootstrap modal on the page closes. Used after triggering a
+// Refreshes the enclosing turbo-frame (or the whole page) when the shared
+// `lato_operation` progress modal closes — used after triggering a
 // Lato::Operation (e.g. "Regenerate with AI", "Clone & translate") from a
 // link inside it: the underlying page/frame has no way to know when that
 // background job finishes, so once the admin dismisses the operation's
 // progress modal, refresh so the result is shown without a manual reload.
 //
+// Only reacts when the modal that just closed actually contains the
+// `#lato_operation` frame — every Bootstrap modal on the page fires
+// `hidden.bs.modal`, including ones with nothing to do with an operation
+// (e.g. this very form's own modal), and those must not trigger a reload.
+//
 // Mounted on an element INSIDE the turbo-frame's content, not on the frame
 // tag itself: when this frame is opened inside a modal, `lato-action`
 // pre-creates a bare `<turbo-frame>` via innerHTML before Turbo fetches
@@ -18,15 +23,17 @@ import { Controller } from '@hotwired/stimulus'
 // page (no frame at all, so it falls back to reloading the whole page).
 export default class extends Controller {
   connect () {
-    this.reload = this.reload.bind(this)
-    document.addEventListener('hidden.bs.modal', this.reload)
+    this.onModalHidden = this.onModalHidden.bind(this)
+    document.addEventListener('hidden.bs.modal', this.onModalHidden)
   }
 
   disconnect () {
-    document.removeEventListener('hidden.bs.modal', this.reload)
+    document.removeEventListener('hidden.bs.modal', this.onModalHidden)
   }
 
-  reload () {
+  onModalHidden (event) {
+    if (!event.target.querySelector('#lato_operation')) return
+
     const frame = this.element.closest('turbo-frame')
     if (frame && frame.getAttribute('src')) {
       frame.reload()

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

@@ -212,6 +212,15 @@ body.controller-pages.action-show {
   width: 110px;
 }
 
+// Single image/video fields (never galleries, never plain files): a full-width
+// preview reads much better than a 110px square, and gives a real video
+// player enough room to be usable.
+.lato-cms-media-field__tile--wide {
+  aspect-ratio: 16 / 9;
+  height: auto;
+  width: 100%;
+}
+
 .lato-cms-media-field__item {
   background: var(--bs-light);
   border: 1px solid rgba(33, 37, 41, 0.1);
@@ -253,16 +262,6 @@ body.controller-pages.action-show {
   width: 100%;
 }
 
-.lato-cms-media-field__badge {
-  bottom: 4px;
-  color: #fff;
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
-  font-size: 0.9rem;
-  pointer-events: none;
-  position: absolute;
-  right: 4px;
-}
-
 // Name overlay: hidden until the tile is hovered.
 .lato-cms-media-field__overlay {
   bottom: 0;

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

@@ -10,6 +10,7 @@
      lato_cms_field_input_name(field_id, 'media_ids', input_name_prefix: local_assigns[:input_name_prefix], multiple: true) :
      lato_cms_field_input_name(field_id, 'media_id', input_name_prefix: local_assigns[:input_name_prefix]) %>
 <% picker_type = kind == 'file' ? nil : kind %>
+<% wide = !multiple && %w[image video].include?(kind) %>
 
 <label class="form-label">
   <%= label %><%= ' *' if required %>
@@ -42,7 +43,7 @@
         default navigation itself and sets the frame's `src` explicitly
         (Turbo's documented, non-racy way to trigger a frame-scoped fetch). %>
     <%= link_to lato_cms.media_picker_action_path(frame_id: frame_id, multiple: multiple, type: picker_type),
-          class: "lato-cms-media-field__tile lato-cms-media-field__tile--add#{' d-none' if !multiple && current_media.any?}",
+          class: "lato-cms-media-field__tile lato-cms-media-field__tile--add#{' lato-cms-media-field__tile--wide' if wide}#{' d-none' if !multiple && current_media.any?}",
           data: {
             lato_cms_media_field_target: 'addTile',
             action: 'click->lato-cms-media-field#openPicker',

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

@@ -1,4 +1,5 @@
-<div class="lato-cms-media-field__tile lato-cms-media-field__item"
+<% wide = !multiple && %w[image video].include?(kind) %>
+<div class="lato-cms-media-field__tile lato-cms-media-field__item<%= ' lato-cms-media-field__tile--wide' if wide %>"
      data-media-id="<%= media.id %>"
      data-lato-cms-media-field-target="item"
      <% if multiple %>
@@ -7,8 +8,7 @@
        data-action="dragstart->lato-cms-media-reorder#onDragStart dragend->lato-cms-media-reorder#onDragEnd"
      <% end %>>
   <% if kind == 'video' %>
-    <video muted preload="metadata" class="lato-cms-media-field__player" src="<%= media.url %>"></video>
-    <i class="bi bi-play-circle-fill lato-cms-media-field__badge"></i>
+    <video controls preload="metadata" class="lato-cms-media-field__player" src="<%= media.url %>"></video>
   <% elsif media.thumbnail_url %>
     <img src="<%= media.thumbnail_url %>" class="lato-cms-media-field__thumb" alt="<%= media.alt_text %>">
   <% else %>

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.1.0"
+  VERSION = "3.1.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato_cms
 version: !ruby/object:Gem::Version
-  version: 3.1.0
+  version: 3.1.2
 platform: ruby
 authors:
 - Gregorio Galante