docbrown/app/views/podcast_episodes/show.html.erb

<% title @episode.title %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="<%= app_url("/#{@podcast.slug}/#{@episode.slug}") %>" />
  <meta name="description" content="<%= truncate(strip_tags(@episode.body), length: 140) %>">
  <%= meta_keywords_default %>

  <meta property="og:type" content="article" />
  <meta property="og:url" content="<%= app_url("/#{@podcast.slug}/#{@episode.slug}") %>" />
  <meta property="og:title" content="<%= @episode.title %>" />
  <meta property="og:description" content="<%= truncate(strip_tags(@episode.body), length: 140) %>" />
  <meta property="og:site_name" content="<%= community_name %>" />

  <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
  <meta name="twitter:creator" content="@software_daily">
  <meta name="twitter:title" content="<%= @episode.title %>">
  <meta name="twitter:description" content="<%= truncate(strip_tags(@episode.body), length: 140) %>" />

  <% if @episode.social_image.present? %>
    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:image" content="<%= Settings::General.main_social_image %>">
    <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
  <% else %>
    <meta name="twitter:card" content="summary">
    <meta property="og:image" content="<%= Settings::General.main_social_image %>">
    <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
  <% end %>

<% end %>

<main id="main-content" class="podcast-episode-container" data-meta="<%= @episode.decorate.mobile_player_metadata.to_json %>" data-creator-id="<%= @podcast.creator_id %>">
  <div class="hero">
    <div class="title" style="background:#<%= @podcast.main_color_hex %>">
      <h2>
        <a href="/<%= @podcast.slug %>">
          <img aria-hidden="true" alt="<%= @podcast.title %>" src="<%= optimized_image_url(@podcast.image_url, width: 60, quality: 80) %>" /><%= @podcast.title %>
        </a>
        <button
          id="user-follow-butt"
          class="crayons-btn follow-action-button"
          data-info='<%= DataInfo.to_json(object: @podcast) %>'>
          &nbsp;
        </button>
      </h2>
      <% if @episode.title.size > 60 %>
        <h1 class="smaller"><%= @episode.title %></h1>
      <% else %>
        <h1><%= @episode.title %></h1>
      <% end %>
      <% if @episode.published_at? %>
        <time class="published-at" datetime="<%= @episode.published_timestamp %>">
          <%= @episode.readable_publish_date %>
        </time>
      <% end %>
    </div>
    <button id="record-<%= @episode.slug %>" class="record-wrapper" data-podcast="<%= @podcast.slug %>" data-episode="<%= @episode.slug %>" aria-pressed="false">
      <div class="record" id="record">
        <%= optimized_image_tag(@podcast.image_url,
                                optimizer_options: { width: 420, height: 420, crop: "crop" },
                                image_options: { class: "main-image", alt: @podcast.title }) %>
        <img alt="Play podcast" class="butt play-butt" src="<%= image_path("playbutt.png") %>" />
        <img alt="Play podcast" class="butt pause-butt" src="<%= image_path("pausebutt.png") %>" />
        <div class="status-message" id="status-message-<%= @episode.slug %>">
          play
        </div>
      </div>
    </button>
  </div>
  <%# checking both podcast_episode and podcast status for now  %>
  <% unless @episode.https? %>
    <center>
      <h1 style="color: #e05252;">
        <%= t("views.podcasts.statuses.unplayable") %>
      </h1>
      <p>
        <a href="<%= @episode.media_url %>"><%= t("views.podcasts.listen") %></a>
      </p>
    </center>
  <% end %>

  <div class="crayons-layout crayons-layout--limited-l gap-0">
    <div class="crayons-card">
      <div class="text-padding text-styles">
        <% if @episode.podcast.feed_url.include?("soundcloud") %>
          <%= simple_format((@episode.processed_html || @episode.body), sanitize: true) %>
        <% else %>
          <%= sanitize (@episode.processed_html || ""),
                       tags: MarkdownProcessor::AllowedTags::PODCAST_SHOW,
                       attributes: MarkdownProcessor::AllowedAttributes::PODCAST_SHOW %>
        <% end %>

        <p><a href="<%= @episode.website_url %>"><%= t("views.podcasts.source") %></a></p>
      </div>

      <section
        class="comments-container text-padding"
        id="comments-container"
        data-commentable-id="<%= @episode.id %>"
        data-commentable-type="PodcastEpisode"
        data-follow-button-container="true">
        <%= javascript_include_tag "commentDropdowns", defer: true %>
        <%= render "/comments/form",
                   commentable: @episode,
                   commentable_type: "PodcastEpisode" %>
        <div class="comment-trees" id="comment-trees-container">
          <% podcast_comment_tree(@episode).each do |comment, sub_comments| %>
            <% cache ["comment_root_#{user_signed_in?}", comment] do %>
              <%= tree_for(comment, sub_comments, @episode) %>
            <% end %>
          <% end %>
        </div>
      </section>
    </div>
  </div>
</main>

<%= render "podcast_episodes/podcast_bar", podcast: @podcast, episode: @episode %>
<%= javascript_include_tag "followButtons", defer: true %>