Merge pull request #753 from PRX/feat/podcast-embed-player

Feat/podcast embed player
PRX · Aug 10, 2023 · ebd6d97 · ebd6d97
2 parents c7f3897 + 3298554
commit ebd6d97
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 6 deletions.
diff --git a/app/controllers/podcast_player_controller.rb b/app/controllers/podcast_player_controller.rb
@@ -3,6 +3,13 @@ class PodcastPlayerController < ApplicationController
 
   # GET /podcasts/1/player
   def show
+    @player_options = {}
+    @player_options[:embed_player_type] = params[:embed_player_type] || "card"
+    @player_options[:all_episodes] = params[:all_episodes] || "all"
+
+    @player_options[:episode_number] = params[:episode_number]
+    @player_options[:season] = params[:season]
+    @player_options[:category] = params[:category]
   end
 
   private

diff --git a/app/helpers/embed_player_helper.rb b/app/helpers/embed_player_helper.rb
@@ -12,6 +12,9 @@ module EmbedPlayerHelper
   EMBED_PLAYER_RSS_URL = "us"
   EMBED_PLAYER_AUDIO_URL = "ua"
   DOVETAIL_TOKEN = "_t"
+  EMBED_PLAYER_PLAYLIST = "sp"
+  EMBED_PLAYER_SEASON = "se"
+  EMBED_PLAYER_CATEGORY = "ct"
 
   def embed_player_landing_url(podcast, ep = nil)
     params = {}
@@ -41,6 +44,22 @@ def embed_player_episode_url(ep, type = nil, preview = false)
     embed_params(params)
   end
 
+  def embed_player_podcast_url(podcast, options, preview = false)
+    params = {}
+    params[EMBED_PLAYER_FEED] = podcast.published_url
+
+    params[EMBED_PLAYER_PLAYLIST] = (options[:all_episodes] == "all") ? options[:all_episodes] : options[:episode_number]
+    params[EMBED_PLAYER_SEASON] = options[:season]
+    params[EMBED_PLAYER_CATEGORY] = options[:category]
+
+    # TODO: the height styling doesn't really work here in the way Play specifies how it needs to be for a playlist, so leaving this as a TODO for now.
+    # if options[:embed_player_type] == "card" || options[:embed_player_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"
@@ -55,11 +74,35 @@ def embed_player_episode_iframe(ep, type = nil, preview = false)
     end
   end
 
+  def embed_player_podcast_iframe(podcast, options, preview = false)
+    src = embed_player_podcast_url(podcast, options, preview)
+    allow = "monetization"
+
+    if options[:embed_player_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 options[:embed_player_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
 
+  def embed_player_category_options(podcast, selected)
+    opts = podcast.feed_episodes.pluck(:categories).flatten.uniq
+    options_for_select(opts, selected)
+  end
+
+  def embed_player_all_episodes_options(selected)
+    opts = %w[all number].map { |v| [t("helpers.label.podcast_player.episodes_options.#{v}"), v] }
+    options_for_select(opts, selected)
+  end
+
   private
 
   def embed_params(params)

diff --git a/app/views/podcast_player/_form.html.erb b/app/views/podcast_player/_form.html.erb
@@ -0,0 +1,94 @@
+<%= turbo_frame_tag "embed-player", data: {controller: "morphdom"} do %>
+  <div class="col-12 mb-4">
+    <div class="form-floating input-group" data-controller="dynamic-form">
+      <%= select_tag :embed_player_type, embed_player_type_options(player_options[:embed_player_type]), class: "form-control", data: {action: "dynamic-form#change"} %>
+      <%= label_tag :embed_player_type, t("helpers.label.podcast_player.embed_player_type") %>
+      <a hidden href="<%= request.fullpath %>" data-dynamic-form-target="link"></a>
+    </div>
+
+    <div class="form-text">
+      <%= t(".help.types.#{player_options[:embed_player_type] || "standard"}") %>
+    </div>
+  </div>
+
+  <div class="card border-light mb-4">
+    <div class="card-header-light"><%= t(".title.playlist") %></div>
+
+    <div class="card-body">
+      <div class="form-text mb-4">
+        <%= t(".help.playlist") %>
+      </div>
+
+      <div class="row mb-4" data-controller="toggle-field">
+        <div class="col-6">
+          <div class="form-floating input-group" data-controller="dynamic-form">
+            <%= select_tag :all_episodes, embed_player_all_episodes_options(player_options[:all_episodes]), class: "form-control", data: {action: "dynamic-form#change toggle-field#displayOnlyThisField"}, include_blank: false %>
+            <%= label_tag t("helpers.label.podcast_player.episode_number") %>
+            <%= field_help_text t(".help.episode_number") %>
+            <a hidden href="<%= request.fullpath %>" data-dynamic-form-target="link"></a>
+          </div>
+        </div>
+
+        <div class="col-6">
+          <div class="<%= "d-none" unless player_options[:all_episodes] == "number" %> form-floating input-group" data-controller="dynamic-form" data-toggle-field-target="field" field="number">
+            <%= number_field_tag :episode_number, player_options[:episode_number], class: "form-control", data: {action: "dynamic-form#change"}, min: 1, autocomplete: "off" %>
+            <%= label_tag t("helpers.label.podcast_player.episode_number") %>
+            <a hidden href="<%= request.fullpath %>" data-dynamic-form-target="link"></a>
+          </div>
+        </div>
+      </div>
+
+      <div class="row mb-4">
+        <div class="col-6">
+          <div class="form-floating input-group" data-controller="dynamic-form">
+            <%= number_field_tag :season, player_options[:season], class: "form-control #{"form-control-blank" unless player_options[:season].present?}", data: {action: "dynamic-form#change"}, min: 0, autocomplete: "off" %>
+            <%= label_tag :season, t("helpers.label.podcast_player.season") %>
+            <%= field_help_text t(".help.season") %>
+            <a hidden href="<%= request.fullpath %>" data-dynamic-form-target="link"></a>
+          </div>
+        </div>
+
+        <div class="col-6">
+          <div class="form-floating input-group" data-controller="dynamic-form">
+            <%= select_tag :category, embed_player_category_options(podcast, player_options[:category]), include_blank: true, class: "form-control #{"form-control-blank" unless player_options[:category].present?}", data: {action: "dynamic-form#change"} %>
+            <%= label_tag :category, t("helpers.label.podcast_player.category") %>
+            <%= field_help_text t(".help.episode_category") %>
+            <a hidden href="<%= request.fullpath %>" data-dynamic-form-target="link"></a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-footer">
+  <%= link_to t(".clear"), podcast_player_path(podcast), class: "btn btn-primary" %>
+    </div>
+  </div>
+
+  <div class="col-12 mb-4">
+    <h3 class="fw-bold"><%= t(".title.copy") %></h3>
+
+    <div class="form-text mb-4">
+      <%= t(".help.copy") %>
+    </div>
+
+    <div class="form-floating input-group">
+      <%= text_field_tag :embed_player_url, embed_player_podcast_url(podcast, player_options), class: "form-control", disabled: true, autocomplete: "off" %>
+      <%= label_tag :embed_player_url, t("helpers.label.podcast_player.embed_player_url") %>
+      <%= field_link embed_player_podcast_url(podcast, player_options) %>
+      <%= field_copy embed_player_podcast_url(podcast, player_options) %>
+    </div>
+  </div>
+
+  <div class="col-12 mb-4">
+    <div class="form-floating input-group">
+      <%= text_field_tag :embed_player_iframe, embed_player_podcast_iframe(podcast, player_options), class: "form-control", disabled: true, autocomplete: "off" %>
+      <%= label_tag :embed_player_iframe, t("helpers.label.podcast_player.embed_player_iframe") %>
+      <%= field_copy embed_player_podcast_iframe(podcast, player_options) %>
+    </div>
+  </div>
+
+  <div class="col-12 mb-4">
+    <h3 class="fw-bold"><%= t(".title.preview") %></h3>
+
+    <%= embed_player_podcast_iframe(podcast, player_options, true) %>
+  </div>
+<% end %>
diff --git a/app/views/podcast_player/show.html.erb b/app/views/podcast_player/show.html.erb
@@ -1,3 +1,9 @@
 <%= render "podcasts/tabs" %>
 
-podcast player
+<div class="row my-4 mx-2">
+  <div class="col-lg-12">
+    <div class="row">
+      <%= render "form", podcast: @podcast, player_options: @player_options %>
+    </div>
+  </div>
+</div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -187,6 +187,16 @@ en:
           true: Serial
         subtitle: Teaser
         title: Title
+      podcast_player:
+        embed_player_type: Player Style
+        episode_number: Number of Episodes
+        season: Season Number
+        category: Category
+        embed_player_url: Embeddable Player Link
+        embed_player_iframe: Embeddable Player IFrame
+        episodes_options:
+          all: All Episodes
+          number: Capped Number of Episodes
   # specific pages/views
   episodes:
     confirm_destroy:
@@ -313,14 +323,14 @@ en:
   episode_player:
     form:
       enclosure_not_ready: No Media Files Uploaded
-      help:
+      help: &player_help
         copy: Copy the code for one of the following players, and place it on your webpage.
         types:
-          card: Something about a responsive card
-          card_fixed: Fixed width card something blah
-          standard: The standard player is responsive, meaning it automatically adjusts to the content column it is embedded in. Resize this panel to see how the player adjusts and looks at different widths.
+          card: The player style that shows off your podcast's artwork and will adjust to be responsive to the size of the user's screen and the website it is embedded on. Must always be 800px tall.
+          fixed_card: The player style that shows off your podcast's artwork. The size will NOT adjust to the user's screensize. Must always be 500px wide by 800px tall.
+          standard: Default view of the PRX Player, will adjust to be responsive to the size of the user's screen and the website it is embedded on. Must always be 200px tall.
         warning: It looks like your episode is not yet published, or very recently published. The player below is only a preview of how it will appear after your feed is updated with the new episode. Your copyable iframe/links will begin to function as expected within a few minutes of publishing.
-      title:
+      title: &player_title
         copy: Copy and Use your Embed Code
         preview: Player
         warning: Warning
@@ -643,6 +653,18 @@ en:
       end_date: End date
       month: Weeks of the Month
       period: Weekly interval
+  podcast_player:
+    form:
+      help:
+        <<: *player_help
+        episode_number: Choose between showing all episodes or only a number of episodes for this playlist.
+        season: (Optional) Choose a single season for this playlist. Leaving this blank or 0 will not add a season filter.
+        episode_category: (Optional) Choose a single category for this playlist. Leaving this blank will not add a category filter.
+        playlist: Add any options below to better specify the playlist you want to create.
+      title:
+        <<: *player_title
+        playlist: Make it a playlist
+      clear: Clear options
   podcast_switcher:
     dropdown:
       all: View all my Podcasts