Merge remote-tracking branch 'origin/main' into apple-retry-uploads

Gemfile.lock

@@ -448,7 +448,7 @@ GEM
     uber (0.1.0)
     unaccent (0.4.0)
     unicode-display_width (2.4.2)
-    uri (0.12.1)
+    uri (0.12.2)
     uri_template (0.7.0)
     web-console (4.2.0)
       actionview (>= 6.0.0)

app/assets/stylesheets/shared/episode-card.scss

@@ -37,7 +37,6 @@
     .episode-card-inner {
       display: flex;
       flex-direction: column;
-      overflow: hidden;
     }
 
     .episode-card-title {

app/assets/stylesheets/shared/form.scss

@@ -86,8 +86,11 @@
     border-radius: $input-border-radius;
   }
 
-  .ss-disabled ~ label:before {
-    background: transparent;
+  [disabled="disabled"],
+  .ss-disabled {
+    ~ label:before {
+      background: $input-disabled-bg;
+    }
   }
 
   .form-control {
@@ -110,7 +113,8 @@
   .form-select.is-changed:not(.is-invalid) {
     border-color: $orange;
 
-    &:focus {
+    &:focus,
+    &.form-control-focus {
       box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width rgba($orange, $input-btn-focus-color-opacity);
     }
 
@@ -120,26 +124,31 @@
   }
 
   // bootstrap5-tags need help
-  .form-floating {
-    > .form-tag-select ~ label {
-      opacity: $form-floating-label-opacity !important;
-      transform: $form-floating-label-transform !important;
+  .form-tag-select {
+    // tag field doesn't end up being first - so re-add radius
+    border-top-left-radius: $border-radius !important;
+    border-bottom-left-radius: $border-radius !important;
+
+    // no dropdown carat
+    background-image: none;
+
+    // re-implement focus styling
+    &.form-control-focus {
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
+      border-color: $input-focus-border-color;
+      outline: 0;
+      box-shadow: $input-focus-box-shadow;
+      ~ label {
+        transform: $form-floating-label-transform !important;
+      }
     }
-    > .form-tag-select.form-control-blank:not(.form-control-focus) ~ label {
-      opacity: 1 !important;
-      transform: none !important;
+
+    // inner input has no css classes, so height is wrong
+    input {
+      line-height: $line-height-base;
     }
   }
-  .is-changed ~ .form-tag-select {
-    border-color: $orange;
-  }
-  .form-tag-select.form-control-focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    box-shadow: $input-focus-box-shadow;
-  }
 
   .form-control[type="file"] {
     line-height: $line-height-base;
@@ -190,6 +199,10 @@
     // border: none;
   }
 
+  &.ss-disabled {
+    background-color: $input-disabled-bg;
+  }
+
   .ss-values .ss-single {
     margin-left: 0;
   }

app/assets/stylesheets/shared/layout.scss

@@ -24,5 +24,4 @@ h3 {
 .prx-main {
   position: relative;
   display: grid;
-  flex-grow: 1;
 }

app/controllers/episode_player_controller.rb

@@ -2,5 +2,9 @@ class EpisodePlayerController < ApplicationController
   def show
     @episode = Episode.find_by_guid!(params[:episode_id])
     @podcast = @episode.podcast
+
+    authorize @episode, :show?
+
+    @embed_player_type = params[:embed_player_type]
   end
 end

app/controllers/episodes_controller.rb

@@ -85,12 +85,13 @@ def destroy
     authorize @episode
 
     respond_to do |format|
-      if @episode.published?
-        flash.now[:error] = t(".error")
-        format.html { render :edit, status: :unprocessable_entity }
-      else
-        @episode.destroy
+      if @episode.destroy
         format.html { redirect_to podcast_episodes_url(@episode.podcast_id), notice: t(".notice") }
+      else
+        format.html do
+          flash.now[:error] = t(".error")
+          render :show, status: :unprocessable_entity
+        end
       end
     end
   end

app/controllers/feeds_controller.rb

@@ -20,6 +20,7 @@ def new
   # POST /feeds
   def create
     @feed = @podcast.feeds.new(feed_params)
+    @feed.slug = "" if @feed.slug.nil?
     authorize @feed
 
     respond_to do |format|

app/controllers/podcasts_controller.rb

@@ -98,13 +98,13 @@ def destroy
     authorize @podcast
 
     respond_to do |format|
-      # TODO: better/real validation?
-      if @podcast.episodes.published_by(10.years).any?
-        flash.now[:error] = t(".error")
-        format.html { render :edit, status: :unprocessable_entity }
-      else
-        @podcast.destroy
+      if @podcast.destroy
         format.html { redirect_to podcasts_url, notice: t(".notice") }
+      else
+        format.html do
+          flash.now[:error] = t(".error")
+          render :edit, status: :unprocessable_entity
+        end
       end
     end
   end

app/helpers/embed_player_helper.rb

@@ -4,18 +4,62 @@ module EmbedPlayerHelper
   EMBED_PLAYER_PATH = "/e"
   EMBED_PLAYER_FEED = "uf"
   EMBED_PLAYER_GUID = "ge"
+  EMBED_PLAYER_CARD = "ca"
+  EMBED_PLAYER_TITLE = "tt"
+  EMBED_PLAYER_SUBTITLE = "ts"
+  EMBED_PLAYER_IMAGE = "ui"
+  EMBED_PLAYER_RSS_URL = "us"
+  EMBED_PLAYER_AUDIO_URL = "ua"
+  DOVETAIL_TOKEN = "_t"
 
-  def embed_player_episode_url(ep, preview = false)
-    if preview && !episode.published?
-      # TODO: private token auth url
+  def embed_player_episode_url(ep, type = nil, preview = false)
+    params = {}
+
+    if preview && !ep.published?
+      params[EMBED_PLAYER_TITLE] = ep.title
+      params[EMBED_PLAYER_SUBTITLE] = ep.podcast.title
+      params[EMBED_PLAYER_IMAGE] = ep.ready_image&.url || ep.podcast.ready_image&.url
+      params[EMBED_PLAYER_RSS_URL] = ep.podcast_feed_url
+      params[EMBED_PLAYER_AUDIO_URL] = enclosure_with_token(ep)
     else
-      embed_params(EMBED_PLAYER_FEED => ep.podcast_feed_url, EMBED_PLAYER_GUID => ep.item_guid)
+      params[EMBED_PLAYER_FEED] = ep.podcast_feed_url
+      params[EMBED_PLAYER_GUID] = ep.item_guid
+    end
+
+    if type == "card" || type == "fixed_card"
+      params[EMBED_PLAYER_CARD] = "1"
     end
+
+    embed_params(params)
+  end
+
+  def embed_player_episode_iframe(ep, type = nil, preview = false)
+    src = embed_player_episode_url(ep, type, preview)
+    allow = "monetization"
+
+    if type == "card"
+      # TODO: this is NOW working, but I'm not sure how helpful this is to a producer that wishes to embed it.
+      tag.iframe src: src, allow: allow, width: "100%", height: "700", style: "--aspect-ratio: 2/3; width: 100%;"
+    elsif type == "fixed_card"
+      tag.iframe src: src, allow: allow, width: "500", height: "700"
+    else
+      tag.iframe src: src, allow: allow, width: "100%", height: "200"
+    end
+  end
+
+  def embed_player_type_options(selected)
+    opts = %w[standard card fixed_card].map { |v| [t("helpers.label.episode.embed_player_types.#{v}"), v] }
+    options_for_select(opts, selected)
   end
 
   private
 
   def embed_params(params)
     "#{play_root}#{EMBED_PLAYER_PATH}?#{params.to_query}"
   end
+
+  def enclosure_with_token(ep)
+    sep = ep.enclosure_url.include?("?") ? "&" : "?"
+    ep.enclosure_url + sep + {DOVETAIL_TOKEN => prx_jwt}.to_query
+  end
 end

app/javascript/controllers/click_controller.js

@@ -13,7 +13,7 @@ export default class extends Controller {
   submit() {
     if (this.hasSubmitTarget) {
       this.submitTarget.click()
-    } else {
+    } else if (this.element) {
       this.element.click()
     }
   }

app/javascript/controllers/confirm_field_controller.js

@@ -1,17 +1,35 @@
 import { Controller } from "@hotwired/stimulus"
 
+const ACTION = "blur->confirm-field#confirm keydown.enter->confirm-field#enter"
+
 export default class extends Controller {
-  static targets = ["modal", "message"]
+  static targets = ["modal", "message", "field"]
 
   connect() {
     this.modal = new bootstrap.Modal(this.modalTarget, { backdrop: "static", keyboard: false })
   }
 
+  fieldTargetConnected(field) {
+    if (!field.dataset.action) {
+      field.dataset.action = ACTION
+    } else {
+      field.dataset.action += ` ${ACTION}`
+    }
+  }
+
   confirm(event) {
     if (event.target.classList.contains("is-changed")) {
       this.field = event.target
       this.messageTarget.innerHTML = this.confirmMessage()
       this.modal.show()
+      return true
+    }
+  }
+
+  // prevent enter from submitting the form before we confirm the change
+  enter(event) {
+    if (this.confirm(event)) {
+      event.preventDefault()
     }
   }
 

app/javascript/controllers/podcast_metrics_controller.js

@@ -29,6 +29,7 @@ export default class extends Controller {
     jwt: String,
     podcast: Number,
     titles: Array,
+    warning: String,
   }
 
   connect() {
@@ -76,6 +77,9 @@ export default class extends Controller {
       (res) => {
         if (res.status === 200) {
           return res.json()
+        } else if (res.status === 403 || res.status == 404) {
+          // takes a bit for Castle to hear about the new podcast
+          this.showNotReady()
         } else {
           const err = new Error(`Got ${res.status} from ${url}`)
           console.error(err.message, err)
@@ -95,6 +99,14 @@ export default class extends Controller {
     )
   }
 
+  showNotReady() {
+    this.chartTarget.innerHTML = `
+      <div class="alert alert-primary" role="alert">
+        <p class="mb-0">${this.warningValue}</p>
+      </div>
+    `
+  }
+
   showError(err) {
     this.chartTarget.innerHTML = `
       <div class="alert alert-danger" role="alert">

app/javascript/controllers/tag_select_controller.js

@@ -3,34 +3,51 @@ import Tags from "bootstrap5-tags"
 
 export default class extends Controller {
   connect() {
-    if (!this.element.id) {
-      this.element.setAttribute("id", Math.random().toString(16))
-    }
-    Tags.init("#" + this.element.id, {})
+    this.tags = new Tags(this.element, {
+      addOnBlur: true,
+      hideNativeValidation: true,
+      onBlur: () => this.element.dispatchEvent(new Event("blur")),
+    })
 
     // fixup styles
-    this.tagContainer = this.element.nextSibling
+    this.tagContainer = this.element.previousSibling
     this.tagContainer.classList.add("form-tag-select")
     for (const cls of this.element.classList) {
-      if (cls !== "form-select") {
-        this.tagContainer.classList.add(cls)
-      }
+      this.tagContainer.classList.add(cls)
     }
 
-    // fixup blank field controller
+    // fixup blank/changed status
     this.bindChange = this.change.bind(this)
     this.element.addEventListener("change", this.bindChange)
   }
 
   disconnect() {
+    if (this.tags) {
+      this.tags.dispose()
+    }
     this.element.removeEventListener("change", this.bindChange)
   }
 
-  change(event) {
-    if (this.element.value) {
+  focus() {
+    this.element.classList.remove("form-control-blank")
+    this.tagContainer.classList.remove("form-control-blank")
+  }
+
+  change() {
+    const valueWas = this.element.dataset.valueWas
+    const values = Array.from(this.element.selectedOptions).map((o) => o.value)
+    const valueIs = JSON.stringify(values)
+
+    if (values.length) {
       this.tagContainer.classList.remove("form-control-blank")
     } else {
       this.tagContainer.classList.add("form-control-blank")
     }
+
+    if (valueWas === valueIs) {
+      this.tagContainer.classList.remove("is-changed")
+    } else {
+      this.tagContainer.classList.add("is-changed")
+    }
   }
 }