Merge pull request #1005 from PRX/fix/non_mp3s_in_default_feed

Non-mp3s in default feed
PRX · Apr 29, 2024 · d6753b2 · d6753b2
2 parents e11abb9 + 721578a
commit d6753b2
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 6 deletions.
diff --git a/app/javascript/controllers/disable_controller.js b/app/javascript/controllers/disable_controller.js
@@ -17,14 +17,14 @@ export default class extends Controller {
     if (disable) {
       this.uploadCount++
     } else {
-      this.uploadCount--
+      this.uploadCount = Math.max(0, this.uploadCount - 1)
     }
     this.submitButtons().forEach((el) => {
       if (this.uploadCount > 0) {
         el.disabled = true
         el.dataset.disableOriginal = el.dataset.disableOriginal || el.value
         el.value = el.dataset.uploadWith || el.value
-      } else {
+      } else if (el.disabled) {
         el.disabled = false
         el.value = el.dataset.disableOriginal
       }

diff --git a/app/javascript/controllers/upload_controller.js b/app/javascript/controllers/upload_controller.js
@@ -21,6 +21,7 @@ export default class extends Controller {
     "success",
     "error",
     "errorMessage",
+    "nonMp3Warning",
   ]
 
   connect() {
@@ -31,8 +32,28 @@ export default class extends Controller {
     this.uploadSigningServiceUrl = this.getMeta("upload_signing_service_url")
   }
 
-  async upload(event) {
-    const config = this.getUploadConfig(event.target.files[0])
+  upload(event) {
+    const file = event.target.files[0]
+    if (this.hasNonMp3WarningTarget && file.type !== "audio/mpeg") {
+      this.modal = new bootstrap.Modal(this.nonMp3WarningTarget)
+      this.modal.show()
+    } else {
+      this.uploadFile(file)
+    }
+  }
+
+  modalCancel() {
+    this.modal.hide()
+    this.cancelUpload()
+  }
+
+  modalContinue() {
+    this.modal.hide()
+    this.uploadFile(this.fieldTarget.files[0])
+  }
+
+  async uploadFile(file) {
+    const config = this.getUploadConfig(file)
     try {
       this.evaporate = this.evaporate || (await this.getEvaporate())
       this.startUpload(config)
@@ -116,7 +137,9 @@ export default class extends Controller {
   }
 
   async cancelUpload(event) {
-    event.preventDefault()
+    if (event) {
+      event.preventDefault()
+    }
 
     // safely attempt to cancel
     if (this.evaporate) {
@@ -129,9 +152,9 @@ export default class extends Controller {
       }
     }
 
+    this.show("picker")
     this.fieldTarget.value = ""
     this.fieldTarget.dispatchEvent(new Event("change"))
-    this.show("picker")
   }
 
   show(type) {

diff --git a/app/views/episode_media/media/_new.html.erb b/app/views/episode_media/media/_new.html.erb
@@ -15,6 +15,7 @@
       <%= form.file_field :media_file, class: cls, accept: "video/*", name: nil, data: data %>
     <% else %>
       <%= form.file_field :media_file, class: cls, accept: "audio/*", name: nil, data: data %>
+      <%= render "episode_media/media/non_mp3_warning", episode: episode %>
     <% end %>
 
     <%# fake display field; real text area is opacity-0 on top of it %>

diff --git a/app/views/episode_media/media/_non_mp3_warning.html.erb b/app/views/episode_media/media/_non_mp3_warning.html.erb
@@ -0,0 +1,18 @@
+<% if episode.podcast.default_feed.audio_format.blank? %>
+  <div class="modal" tabindex="-1" data-upload-target="nonMp3Warning">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title"><%= t(".title") %></h5>
+        </div>
+        <div class="modal-body" data-turbo=false>
+          <%= t(".body_html", href: podcast_feeds_path(episode.podcast_id)) %>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-light" data-action="upload#modalCancel"><%= t(".cancel") %></button>
+          <button type="button" class="btn btn-danger" data-action="upload#modalContinue"><%= t(".continue") %></button>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -633,6 +633,11 @@ en:
         stereo: Stereo
       new:
         hint: Upload a file or drag it here
+      non_mp3_warning:
+        body_html: It appears you're uploading a file that isn't in MP3 format. We recommend configuring the Audio Format for your <a href="%{href}" target="_blank">Default Feed</a> to MP3 to ensure your episode is accessible on all platforms.<br/><br/>Once you've set a default format, your file will be automatically converted to the chosen file type and quality.
+        cancel: Cancel Upload
+        continue: Continue Upload
+        title: MP3 Not Provided
       processing:
         hint: Processing
     segmenter: