lato_cms 3.0.13 → 3.1.1

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

@@ -1,180 +0,0 @@
-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'
-  }
-}