From 9bbc738dc366534dd9bfc66bd93e64504ee802e8 Mon Sep 17 00:00:00 2001
From: Mac Siri <krairit.siri@gmail.com>
Date: Mon, 8 Feb 2021 13:53:12 -0500
Subject: [PATCH] Fix broken Podcast liquid tag (#11511)

---
 app/views/podcast_episodes/_liquid.html.erb   | 40 +------------------
 .../podcast_episodes/_podcast_bar.html.erb    | 12 +++---
 app/views/podcast_episodes/show.html.erb      |  2 +-
 3 files changed, 9 insertions(+), 45 deletions(-)

diff --git a/app/views/podcast_episodes/_liquid.html.erb b/app/views/podcast_episodes/_liquid.html.erb
index 8353b0caf..8d5c2aad5 100644
--- a/app/views/podcast_episodes/_liquid.html.erb
+++ b/app/views/podcast_episodes/_liquid.html.erb
@@ -19,42 +19,6 @@
                             optimizer_options: { crop: "fill" },
                             image_options: { class: "podcastliquidtag__podcastimage", id: "podcastimage-#{episode.slug}", alt: podcast.title }) %>
   </div>
-  <div class="hidden-audio" id="hidden-audio-<%= episode.slug %>" style="display:none" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
-    <audio id="audio" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
-      <source src="<%= episode.media_url %>" type="audio/mpeg">
-      Your browser does not support the audio element.
-    </audio>
-    <div id="progressBar" class="audio-player-display">
-      <a href="/<%= podcast.slug + "/" + episode.slug %>">
-        <%= optimized_image_tag(episode.image_url || podcast.image_url,
-                                optimizer_options: { crop: "fill", width: 420, height: 420 },
-                                image_options: { id: "episode-profile-image", alt: episode.title }) %>
-        <img id="animated-bars" src="/assets/animated-bars.gif" alt="animated volume bars">
-      </a>
-      <span id="barPlayPause">
-        <img class="butt play-butt" src="/assets/playbutt.png" alt="play">
-        <img class="butt pause-butt" src="/assets/pausebutt.png" alt="pause">
-      </span>
-      <span id="volume">
-        <span id="volumeindicator" class="volume-icon-wrapper showing">
-          <span id="volbutt">
-            <%= image_tag("/assets/volume.png", alt: "volume", class: "icon-img", height: 16, width: 16) %>
-          </span>
-          <span class="range-wrapper">
-            <input type="range" name="points" id="volumeslider" value="50" min="0" max="100" data-show-value="true">
-          </span>
-        </span>
-        <span id="mutebutt" class="volume-icon-wrapper hidden">
-          <%= image_tag("/assets/volume-mute.png", alt: "mute", class: "icon-img", height: 16, width: 16) %>
-        </span>
-        <span class="speed" id="speed" data-speed=1>1x</span>
-      </span>
-      <span class="buffer-wrapper" id="bufferwrapper">
-        <span id="buffer"></span>
-        <span id="progress"></span>
-        <span id="time">initializing...</span>
-        <span id="closebutt">×</span>
-      </span>
-    </div>
-  </div>
+
+  <%= render "podcast_episodes/podcast_bar", podcast: podcast, episode: episode %>
 </div>
diff --git a/app/views/podcast_episodes/_podcast_bar.html.erb b/app/views/podcast_episodes/_podcast_bar.html.erb
index a97e83cac..0ed889645 100644
--- a/app/views/podcast_episodes/_podcast_bar.html.erb
+++ b/app/views/podcast_episodes/_podcast_bar.html.erb
@@ -1,13 +1,13 @@
-<div class="hidden-audio" id="hidden-audio-<%= @episode.slug %>" style="display:none" data-episode="<%= @episode.slug %>" data-podcast="<%= @podcast.slug %>">
-  <audio id="audio" data-episode="<%= @episode.slug %>" data-podcast="<%= @podcast.slug %>">
-    <source src="<%= @episode.media_url %>" type="audio/mpeg">
+<div class="hidden-audio" id="hidden-audio-<%= episode.slug %>" style="display:none" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
+  <audio id="audio" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
+    <source src="<%= episode.media_url %>" type="audio/mpeg">
     Your browser does not support the audio element.
   </audio>
   <div id="progressBar" class="audio-player-display">
-    <a href="/<%= @podcast.slug %>/<%= @episode.slug %>">
-      <%= optimized_image_tag(@episode.image_url || @podcast.image_url,
+    <a href="/<%= podcast.slug %>/<%= episode.slug %>">
+      <%= optimized_image_tag(episode.image_url || podcast.image_url,
                               optimizer_options: { crop: "fill", width: 420, height: 420 },
-                              image_options: { id: "episode-profile-image", alt: @episode.title }) %>
+                              image_options: { id: "episode-profile-image", alt: episode.title }) %>
       <img id="animated-bars" src="<%= asset_path("animated-bars.gif") %>" alt="animated volume bars">
     </a>
     <span id="barPlayPause">
diff --git a/app/views/podcast_episodes/show.html.erb b/app/views/podcast_episodes/show.html.erb
index 1aaf2c8c0..7a435aaaa 100644
--- a/app/views/podcast_episodes/show.html.erb
+++ b/app/views/podcast_episodes/show.html.erb
@@ -108,4 +108,4 @@
   </div>
 </div>
 
-<%= render "podcast_episodes/podcast_bar" %>
+<%= render "podcast_episodes/podcast_bar", podcast: @podcast, episode: @episode %>