Non-mp3s in default feed

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
       }

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) {

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 %>

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 %>

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: