Link up podcast & clips playlists on YouTube

assets/app/layout/show.scss

@@ -233,13 +233,12 @@
         flex-wrap: wrap;
 
         &-item {
-          height: 20px;
+          height: 30px;
           margin: 0 8px 12px;
           padding: 4px 0 0 30px;
-          background-size: 20px 20px;
+          background-size: 30px 30px;
           background-repeat: no-repeat;
-          font-size: 0.74em;
-          line-height: 1;
+          font-size: 0;
           color: $white;
           transition: color 0.1s $base-easing;
 
@@ -270,6 +269,9 @@
           &--youtube-music {
             background-image: url("../images/icons/podcast_icon-youtube-music.png");
           }
+          &--youtube {
+            background-image: url("../images/icons/podcast_icon-youtube.png");
+          }
           &--bandcamp {
             background-image: url("../images/icons/podcast_icon-bandcamp.png");
           }

lib/changelog/schema/podcast/podcast.ex

@@ -26,20 +26,23 @@ defmodule Changelog.Podcast do
     field :welcome, :string
     field :description, :string
     field :extended_description, :string
-
-    field :vanity_domain, :string
     field :keywords, :string
+    field :vanity_domain, :string
+    field :schedule_note, :string
+    field :recorded_live, :boolean, default: false
+
     field :mastodon_handle, :string
     field :mastodon_token, :string
     field :twitter_handle, :string
     field :apple_url, :string
     field :spotify_url, :string
     field :riverside_url, :string
-    field :chartable_id, :string
-    field :schedule_note, :string
+    field :youtube_url, :string
+    field :clips_url, :string
+
     field :download_count, :float
     field :reach_count, :integer
-    field :recorded_live, :boolean, default: false
+
     field :partner, :boolean, default: false
     field :position, :integer
     field :subscribers, :map
@@ -82,6 +85,8 @@ defmodule Changelog.Podcast do
       keywords: "changelog, open source, oss, software, development, developer, hacker",
       apple_url: "https://podcasts.apple.com/us/podcast/changelog-master-feed/id1164554936",
       spotify_url: "https://open.spotify.com/show/0S1h5K7jm2YvOcM7y1ZMXY",
+      youtube_url: "https://www.youtube.com/changelog",
+      clips_url: "https://www.youtube.com/playlist?list=PLCzseuA9sYreJ1p9RXR6Z667mrMyHXAeH",
       cover: true,
       active_hosts: [],
       retired_hosts: []
@@ -105,6 +110,8 @@ defmodule Changelog.Podcast do
         "changelog, open source, software, development, code, programming, hacker, change log, software engineering",
       apple_url: "https://podcasts.apple.com/us/podcast/the-changelog/id341623264",
       spotify_url: "https://open.spotify.com/show/5bBki72YeKSLUqyD94qsuJ",
+      youtube_url: "https://www.youtube.com/playlist?list=PLCzseuA9sYrf9nHWFF1dQsk-X5cghL6UH",
+      clips_url: "https://www.youtube.com/playlist?list=PLCzseuA9sYreumc6MQV7C8FiRuaMczhjK",
       cover: true,
       active_hosts: Person.with_ids([1, 2]) |> Person.newest_first() |> Repo.all()
     }
@@ -135,7 +142,7 @@ defmodule Changelog.Podcast do
     podcast
     |> cast(
       attrs,
-      ~w(name slug status vanity_domain schedule_note welcome description extended_description keywords mastodon_handle mastodon_token twitter_handle apple_url spotify_url riverside_url chartable_id recorded_live partner position)a
+      ~w(name slug status vanity_domain schedule_note welcome description extended_description keywords mastodon_handle mastodon_token twitter_handle apple_url spotify_url riverside_url youtube_url clips_url recorded_live partner position)a
     )
     |> validate_required([:name, :slug, :status])
     |> validate_format(:vanity_domain, Regexp.http(), message: Regexp.http_message())

lib/changelog_web/plugs/vanity_domains.ex

@@ -75,6 +75,7 @@ defmodule ChangelogWeb.Plug.VanityDomains do
       ["apple"] -> PodcastView.subscribe_on_apple_url(podcast)
       ["android"] -> PodcastView.subscribe_on_android_url(podcast)
       ["spotify"] -> PodcastView.subscribe_on_spotify_url(podcast)
+      ["youtube"] -> PodcastView.subscribe_on_youtube_url(podcast)
       ["overcast"] -> PodcastView.subscribe_on_overcast_url(podcast)
       ["pcast"] -> PodcastView.subscribe_on_pocket_casts_url(podcast)
       ["rss"] -> changelog_destination([podcast.slug, "feed"])

lib/changelog_web/templates/admin/podcast/_form.html.heex

@@ -198,6 +198,18 @@
     <%= AdminHelpers.error_message(f, :riverside_url) %>
   </div>
 
+  <div class={"field #{AdminHelpers.error_class(f, :youtube_url)}"}>
+    <%= label(f, :youtube_url, "YouTube URL") %>
+    <%= text_input(f, :youtube_url) %>
+    <%= AdminHelpers.error_message(f, :youtube_url) %>
+  </div>
+
+  <div class={"field #{AdminHelpers.error_class(f, :clips_url)}"}>
+    <%= label(f, :clips_url, "Clips URL") %>
+    <%= text_input(f, :clips_url) %>
+    <%= AdminHelpers.error_message(f, :clips_url) %>
+  </div>
+
   <div class="ui hidden divider"></div>
   <div class="ui equal width stackable grid">
   <%= if !AdminHelpers.is_persisted(f.data) do %>

lib/changelog_web/templates/podcast/_feed.html.heex

@@ -0,0 +1,32 @@
+<%= if @podcast.status == :inactive do %>
+  <p class="feed-note">This podcast is not in production. Please browse and enjoy the archive below.</p>
+<% end %>
+
+<nav class="subnav">
+  <ul class="subnav-list">
+    <li class={"subnav-list-item #{SharedHelpers.active_class(@conn, "show")}"}>
+      <%= link("Recent", to: ~p"/#{@podcast.slug}" <> "#feed", title: "Recent episodes of #{@podcast.name}", alt: "Recent Episodes") %>
+    </li>
+  <%= if @podcast.clips_url do %>
+    <li class="subnav-list-item">
+      <%= link("Clips", to: @podcast.clips_url, title: "Clips from #{@podcast.name}", alt: "#{@podcast.name} Clips") %>
+    </li>
+  <% end %>
+    <li class={"subnav-list-item #{SharedHelpers.active_class(@conn, "recommended")}"}>
+      <%= link("Recommended", to: ~p"/#{@podcast.slug}/recommended" <> "#feed", title: "Recommended episodes of #{@podcast.name}", alt: "Recommended Episodes") %>
+    </li>
+    <li class={"subnav-list-item #{SharedHelpers.active_class(@conn, "popular")}"}>
+      <%= link("Popular", to: ~p"/#{@podcast.slug}/popular" <> "#feed", title: "Popular episodes of #{@podcast.name}", alt: "Popular Episodes") %>
+    </li>
+    <li class="subnav-list-item subnav-list-item--right">
+      <%= link("🙏 Request!", to: ~p"/request/#{@podcast.slug}", title: "Request an episode of #{@podcast.name}", alt: "Request an Episode") %>
+    </li>
+  </ul>
+</nav>
+
+<%= if Enum.any?(@page) do %>
+  <%= render_many(@page, EpisodeView, "_item.html") %>
+  <%= render(SharedView, "_more_button.html", assigns) %>
+<% else %>
+  <p class="feed-note">Nothing to see here. Move along.</p>
+<% end %>

lib/changelog_web/templates/podcast/_subscribe_buttons.html.heex

@@ -4,11 +4,16 @@
     <%= link("RSS", to: subscribe_via_rss_url(@podcast), class: "show-header-subscribe-buttons-item show-header-subscribe-buttons-item--rss", title: "Subscribe via RSS") %>
   <%= if @podcast.apple_url do %>
     <%= link("Apple", to: subscribe_on_apple_url(@podcast), class: "show-header-subscribe-buttons-item show-header-subscribe-buttons-item--apple", title: "Subscribe on Apple") %>
-    <%= link("Overcast", to: subscribe_on_overcast_url(@podcast), class: "show-header-subscribe-buttons-item show-header-subscribe-buttons-item--overcast", title: "Subscribe on Overcast") %>
-    <%= link("Pocket Casts", to: subscribe_on_pocket_casts_url(@podcast), class: "show-header-subscribe-buttons-item show-header-subscribe-buttons-item--pocket-casts", title: "Subscribe on Pocket Casts") %>
   <% end %>
   <%= if @podcast.spotify_url do %>
     <%= link("Spotify", to: subscribe_on_spotify_url(@podcast), class: "show-header-subscribe-buttons-item show-header-subscribe-buttons-item--spotify", title: "Subscribe on Spotify") %>
+  <% end %>
+  <%= if @podcast.youtube_url do %>
+    <%= link("YouTube", to: subscribe_on_youtube_url(@podcast), class: "show-header-subscribe-buttons-item show-header-subscribe-buttons-item--youtube", title: "Subscribe on YouTube") %>
+  <% end %>
+  <%= if @podcast.apple_url do %>
+    <%= link("Overcast", to: subscribe_on_overcast_url(@podcast), class: "show-header-subscribe-buttons-item show-header-subscribe-buttons-item--overcast", title: "Subscribe on Overcast") %>
+    <%= link("Pocket Casts", to: subscribe_on_pocket_casts_url(@podcast), class: "show-header-subscribe-buttons-item show-header-subscribe-buttons-item--pocket-casts", title: "Subscribe on Pocket Casts") %>
   <% end %>
     <%= link("Android", to: subscribe_on_android_url(@podcast), class: "show-header-subscribe-buttons-item show-header-subscribe-buttons-item--android", title: "Subscribe on Android") %>
   <%= if @podcast.mastodon_handle do %>

lib/changelog_web/templates/podcast/_subscribe_tooltip.html.heex

@@ -6,11 +6,16 @@
       <li><%= link("Direct (RSS)", to: subscribe_via_rss_url(@podcast)) %></li>
     <%= if @podcast.apple_url do %>
       <li><%= link("Apple Podcasts", to: subscribe_on_apple_url(@podcast)) %></li>
-      <li><%= link("Overcast", to: subscribe_on_overcast_url(@podcast)) %></li>
-      <li><%= link("Pocket Casts", to: subscribe_on_pocket_casts_url(@podcast)) %></li>
     <% end %>
     <%= if @podcast.spotify_url do %>
       <li><%= link("Spotify", to: subscribe_on_spotify_url(@podcast)) %></li>
+    <% end %>
+    <%= if @podcast.youtube_url do %>
+      <li><%= link("YouTube", to: subscribe_on_youtube_url(@podcast)) %></li>
+    <% end %>
+    <%= if @podcast.apple_url do %>
+      <li><%= link("Overcast", to: subscribe_on_overcast_url(@podcast)) %></li>
+      <li><%= link("Pocket Casts", to: subscribe_on_pocket_casts_url(@podcast)) %></li>
     <% end %>
       <li><%= link("Android", to: subscribe_on_android_url(@podcast)) %></li>
     <%= if @podcast.mastodon_handle do %>

lib/changelog_web/views/podcast_view.ex

@@ -136,6 +136,11 @@ defmodule ChangelogWeb.PodcastView do
 
   def subscribe_on_spotify_url(podcast), do: podcast.spotify_url
 
+  def subscribe_on_youtube_url(%{vanity_domain: vanity}) when not is_nil(vanity),
+    do: vanity <> "/youtube"
+
+  def subscribe_on_youtube_url(podcast), do: podcast.youtube_url
+
   def subscribe_via_rss_url(%{vanity_domain: vanity}) when not is_nil(vanity),
     do: vanity <> "/rss"
 

priv/repo/migrations/20240813144053_add_youtube_urls_to_podcasts.exs

@@ -0,0 +1,11 @@
+defmodule Changelog.Repo.Migrations.AddYoutubeUrlsToPodcasts do
+  use Ecto.Migration
+
+  def change do
+    alter table(:podcasts) do
+      add :youtube_url, :string
+      add :clips_url, :string
+      remove :chartable_id
+    end
+  end
+end