Add a News archive page

thechangelog · Jul 2, 2024 · e5f7265 · e5f7265
1 parent 65e6e7e
commit e5f7265
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 22 deletions.
diff --git a/assets/app/news.js b/assets/app/news.js
@@ -7,17 +7,19 @@ export default class News {
     this.testimonialsPlayed = 0;
 
     document.querySelectorAll(".js-play-pause").forEach((el) => {
-      el.addEventListener("click", this.togglePlayPause);
+      el.addEventListener("click", this.togglePlayPause.bind(this));
     });
 
     window.onload = () => {
       this.goToTestimonial(Math.floor(Math.random() * 4));
     };
 
-    this.iframe.onload = () => {
-      this.resizeFrameToFit();
-      this.makeFrameLinksOpenInNewTab();
-    };
+    if (this.iframe) {
+      this.iframe.onload = () => {
+        this.resizeFrameToFit();
+        this.makeFrameLinksOpenInNewTab();
+      };
+    }
 
     window.onresize = () => {
       this.resizeFrameToFit();
@@ -90,16 +92,15 @@ export default class News {
   togglePlayPause(event) {
     event.preventDefault();
 
-    const button = event.target;
-    const issue = button.parentNode;
+    const issue = event.target.parentNode;
 
     if (!issue.audio) {
+      issue.button = event.target;
       issue.audio = new Audio();
-      issue.audio.type = "audio/mpeg";
       issue.audio.src = event.target.href;
+      issue.audio.type = "audio/mpeg";
       issue.title = event.target.getAttribute("data-title");
       issue.progress = 0;
-
       issue.audio.addEventListener("canplaythrough", function () {
         issue.audio.play();
         Log.track("News Player", { action: "Play", audio: issue.title });
@@ -121,18 +122,35 @@ export default class News {
     }
 
     if (issue.classList.contains("is-playing")) {
+      this.pauseIssue(issue);
+    } else {
+      this.playIssue(issue);
+    }
+  }
+
+  pauseIssue(issue) {
+    if (issue.audio) {
       issue.audio.pause();
       issue.classList.add("is-paused");
       issue.classList.remove("is-playing");
-      button.children[0].innerText = "PLAY";
-    } else {
-      issue.classList.remove("is-paused");
-      issue.classList.add("is-playing");
-      button.children[0].innerText = "PAUSE";
-      issue.audio.play();
+      issue.button.children[0].innerText = "PLAY";
     }
   }
 
+  playIssue(issue) {
+    // pause all other issues that might be playing
+    document.querySelectorAll(".js-issue").forEach((el) => {
+      if (el !== issue) {
+        this.pauseIssue(el);
+      }
+    });
+
+    issue.audio.play();
+    issue.classList.remove("is-paused");
+    issue.classList.add("is-playing");
+    issue.button.children[0].innerText = "PAUSE";
+  }
+
   toggleReasons() {
     const reasons = document.querySelector(".reasons");
     reasons.classList.toggle("is-visible");

diff --git a/lib/changelog_web/controllers/podcast_controller.ex b/lib/changelog_web/controllers/podcast_controller.ex
@@ -7,6 +7,31 @@ defmodule ChangelogWeb.PodcastController do
     render(conn, :index)
   end
 
+  def archive(conn, %{"slug" => "news"}) do
+    podcast = get_podcast_by_slug("news")
+
+    issues =
+      podcast
+      |> Podcast.get_episodes()
+      |> Episode.published()
+      |> Episode.newest_first()
+      |> Episode.preload_podcast()
+      |> Repo.all()
+
+    sub_count = Subscription.subscribed_count(podcast)
+
+    conn
+    |> assign(:sub_count, sub_count)
+    |> assign(:podcast, podcast)
+    |> assign(:issues, issues)
+    |> render(:archive, layout: {ChangelogWeb.LayoutView, "news.html"})
+  end
+
+  # Changelog News is the only podcast with an archive
+  def archive(conn, %{"slug" => slug}) do
+    redirect(conn, to: ~p"/#{slug}")
+  end
+
   # front the "actual" show function with this one that tries to fetch a
   # podcast, then falls back to find a (legacy) post and redirect appropriately
   def show(conn, params = %{"slug" => slug}) do

diff --git a/lib/changelog_web/router.ex b/lib/changelog_web/router.ex
@@ -273,7 +273,7 @@ defmodule ChangelogWeb.Router do
 
     get "/podcasts", PodcastController, :index, as: :podcast
 
-    for subpage <- ~w(popular recommended)a do
+    for subpage <- ~w(popular recommended archive)a do
       get "/:slug/#{subpage}", PodcastController, subpage, as: :podcast
     end
 

diff --git a/lib/changelog_web/templates/episode/news.html.heex b/lib/changelog_web/templates/episode/news.html.heex
@@ -14,8 +14,7 @@
 <div class="issue_list-pagination">
   <article class="issue_list-item issue_list-item--view_all">
     <div>
-      <p class="mono-sm">🚧 Coming Soon 🚧</p>
-      <h2 class="display-lg"><a href="javascript:void(0);" onclick="alert('Coming Soon!');">View the archive</a></h2>
+      <h2 class="display-lg"><%= link("View the archive", to: ~p"/news/archive") %></h2>
     </div>
   </article>
 <%= if @previous do %>

diff --git a/lib/changelog_web/templates/layout/news.html.heex b/lib/changelog_web/templates/layout/news.html.heex
@@ -169,7 +169,7 @@
 
           <div class="header-ctas">
             <button class="text_button m-b-sm" onclick="news.toggleReasons();">29 more reasons to subscribe</button>
-            <p class="mono-sm color-grey">Don't forget to check out <%= link("our other podcasts", to: ~p"/") %></p>
+            <p class="mono-sm color-grey">Check out our <%= link("other pods", to: ~p"/") %> or the <%= link("News archive", to: ~p"/news/archive") %></p>
           </div>
         </div>
       </header>

diff --git a/lib/changelog_web/templates/podcast/archive.html.heex b/lib/changelog_web/templates/podcast/archive.html.heex
@@ -0,0 +1,9 @@
+<%= for issue <- @issues do %>
+  <article class="issue_list-item js-issue">
+    <%= render(SharedView, "_news_issue_meta.html", issue: issue) %>
+    <a class="play_button js-play-pause" title="Play Audio" href={EpisodeView.audio_url(issue)} data-title={issue.title}>
+      <span class="mono-sm">PLAY</span>
+    </a>
+    <div class="progress_bar" style="--progress: 0%;"></div>
+  </article>
+<% end %>
diff --git a/lib/changelog_web/templates/podcast/news.html.heex b/lib/changelog_web/templates/podcast/news.html.heex
@@ -1,4 +1,4 @@
-<article class="issue_list-item issue_list-item--sticky">
+<article class="issue_list-item issue_list-item--sticky js-issue">
   <%= render(SharedView, "_news_issue_meta.html", issue: @episode) %>
   <a class="play_button js-play-pause" title="Play Audio" href={EpisodeView.audio_url(@episode)} data-title={@episode.title}>
     <span class="mono-sm">PLAY</span>
@@ -14,8 +14,7 @@
 <div class="issue_list-pagination">
   <article class="issue_list-item issue_list-item--view_all">
     <div>
-      <p class="mono-sm">🚧 Coming Soon 🚧</p>
-      <h2 class="display-lg"><a href="javascript:void(0);" onclick="alert('Coming Soon!');">View the archive</a></h2>
+      <h2 class="display-lg"><%= link("View the archive", to: ~p"/news/archive") %></h2>
     </div>
   </article>
   <article class="issue_list-item">