&lt;?php
/**
 * The Header template for ICR
 *
 * Displays all of the &lt;head&gt; section and everything up till &lt;div id=&quot;main&quot;&gt;
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?&gt;&lt;!DOCTYPE html&gt;
&lt;!--[if IE 7]&gt;
&lt;html class=&quot;ie ie7&quot; &lt;?php language_attributes(); ?&gt;&gt;
&lt;![endif]--&gt;
&lt;!--[if IE 8]&gt;
&lt;html class=&quot;ie ie8&quot; &lt;?php language_attributes(); ?&gt;&gt;
&lt;![endif]--&gt;
&lt;!--[if !(IE 7) &amp; !(IE 8)]&gt;&lt;!--&gt;
&lt;html &lt;?php language_attributes(); ?&gt;&gt;
&lt;!--&lt;![endif]--&gt;
&lt;head&gt;
	&lt;meta charset=&quot;&lt;?php bloginfo( &#039;charset&#039; ); ?&gt;&quot;&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
	&lt;title&gt;&lt;?php wp_title( &#039;|&#039;, true, &#039;right&#039; ); ?&gt;&lt;/title&gt;
	&lt;link rel=&quot;profile&quot; href=&quot;http://gmpg.org/xfn/11&quot;&gt;
	&lt;link rel=&quot;pingback&quot; href=&quot;&lt;?php echo esc_url( get_bloginfo( &#039;pingback_url&#039; ) ); ?&gt;&quot;&gt;
	&lt;!--[if lt IE 9]&gt;
	&lt;script src=&quot;&lt;?php echo get_template_directory_uri(); ?&gt;/js/html5.js&quot;&gt;&lt;/script&gt;
	&lt;![endif]--&gt;
	&lt;?php wp_head(); ?&gt;
	&lt;script&gt;
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
  const tabs = document.querySelectorAll(&quot;#master-schedule-tabs .master-schedule-tabs-day&quot;);
  const panels = document.querySelectorAll(&quot;#master-schedule-tab-panels .master-schedule-tabs-panel&quot;);

  function showDay(day, clickedTab) {
    tabs.forEach(function (tab) {
      tab.classList.remove(&quot;active-day-tab&quot;, &quot;current-day&quot;);
    });

    panels.forEach(function (panel) {
      panel.classList.remove(&quot;active-day-panel&quot;);
      panel.style.display = &quot;none&quot;;
    });

    clickedTab.classList.add(&quot;active-day-tab&quot;);

    const targetPanel = document.querySelector(&quot;.master-schedule-tabs-panel-&quot; + day);
    if (targetPanel) {
      targetPanel.classList.add(&quot;active-day-panel&quot;);
      targetPanel.style.display = &quot;grid&quot;;
    }
  }

  tabs.forEach(function (tab) {
    tab.addEventListener(&quot;click&quot;, function (event) {
      const heading = tab.querySelector(&quot;.master-schedule-tabs-headings&quot;);
      if (!heading) return;

      const day = heading.getAttribute(&quot;data-href&quot;);
      if (!day) return;

      event.preventDefault();
      showDay(day, tab);
    });
  });
});
&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
function gettrack() {
fetch(&#039;https://ipswichcommunityradio.com/player/rds/song.php&#039;)
.then(function(response3){
    // parse the fetch response
  return response3.text();
})
.then(function(myJson3){
  document.getElementById(&quot;np-tune&quot;).innerHTML = &quot;Now Playing: &quot; myJson3 ;
    console.log(myJson3);
});
}
setInterval(gettrack, 30000); // The interval set to 5 seconds

function getshow() {
fetch(&#039;https://ipswichcommunityradio.com/player/rds/&#039;)
.then(function(response3){
    // parse the fetch response
  return response3.text();
})
.then(function(myJson3){
  document.getElementById(&quot;oan&quot;).innerHTML = myJson3 ;
    console.log(myJson3);
});
}
setInterval(getshow, 30000); // The interval set to 5 seconds
&lt;/script&gt;
&lt;/head&gt;

&lt;body &lt;?php body_class(); ?&gt;&gt;
	&lt;?php wp_body_open(); ?&gt;
	&lt;div id=&quot;page&quot; class=&quot;hfeed site&quot;&gt;

  &lt;header class=&quot;site-header&quot;&gt;
    &lt;a href=&quot;https://www.ipswichcommunityradio.com/&quot;&gt;&lt;img class=&quot;logo&quot; src=&quot;https://www.ipswichcommunityradio.com/wp-content/uploads/2026/04/logo_icr_upscaled_820x820.png&quot; alt=&quot;ICR logo&quot; /&gt;&lt;/a&gt;
    &lt;div class=&quot;brand&quot;&gt;
      &lt;h1 class=&quot;brand-title&quot;&gt;Ipswich Community Radio&lt;/h1&gt;
      &lt;p class=&quot;brand-subtitle&quot;&gt;Your Local Community Radio Station&lt;/p&gt;
    &lt;/div&gt;
    &lt;nav class=&quot;header-actions&quot; aria-label=&quot;Header links&quot;&gt;
      &lt;a class=&quot;social instagram&quot; href=&quot;https://www.instagram.com/icrfm_1057/&quot; target=&quot;_blank&quot; aria-label=&quot;Instagram&quot;&gt;◎&lt;/a&gt;
      &lt;a class=&quot;social facebook&quot; href=&quot;https://www.facebook.com/icr105.7fm&quot; target=&quot;_blank&quot; aria-label=&quot;Facebook&quot;&gt;f&lt;/a&gt;
      &lt;a class=&quot;listen-btn&quot; href=&quot;#listen-live&quot; onclick=&quot;window.open(&#039;https://www.ipswichcommunityradio.com/player&#039;,&#039;RadioPlayer&#039;,&#039;resizable,height=660,width=380&#039;); return false;&quot;&gt;Listen live&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/header&gt;

		&lt;div id=&quot;main&quot; class=&quot;site-main&quot;&gt;


	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

	  <main>
    <section class="hero" id="listen-live" aria-label="Listen live">
                   <center><h1 class="entry-title">Indie Soup</h1></center>

                    
<div id="icr-fullscreen-player-page" class="icr-fullscreen-player-page">
	<div class="icr-fs-bg"></div>
	<div class="icr-fs-overlay"></div>

	<main class="icr-fs-shell">
		<section class="icr-fs-card">
			<div class="icr-fs-art-wrap">
				<img decoding="async" class="icr-fs-art" src="https://www.ipswichcommunityradio.com/wp-content/uploads/2016/02/Indie-Soup-Logo-Blue.png" alt="Indie Soup">
			</div>

			<div class="icr-fs-content">
				<div class="icr-fs-kicker">Listen Again</div>
				<h1 class="icr-fs-title">Indie Soup</h1>

									<p class="icr-fs-hosts">with Roly Arbon</p>
				
									<div class="icr-fs-pills">
													<span>Alternative</span>
													<span>Indie</span>
											</div>
				

	<div class="icr-fs-missing icr-fs-not-yet">
		<p>This programme is not available to playback yet! Please try again later.</p>
	</div>


				<div class="icr-fs-actions">
					<a href="https://www.ipswichcommunityradio.com/schedule/">Back to schedule</a>
											
									</div>
			</div>
		</section>

					<section class="icr-fs-info-grid">
									<div class="icr-fs-info-card">
						<h2>Show Times</h2>
						<ul>
															<li>Tuesday 4:00 pm - 6:00 pm</li>
															<li>Saturday 10:00 am - 12:00 pm</li>
													</ul>
					</div>
				
									<div class="icr-fs-info-card icr-fs-about">
						<h2>About this show</h2>
						<p>Join Roly as he guides you through drivetime with two hours of alternative tunes. You will hear Britpop, electronica, Indie rock and more.</p>
<p>The show broadcasts live on Tuesdays and repeated on Saturday mornings.</p>
<p>All shows are uploaded to the Indie Soup Mixcloud page <a href="http://www.mixcloud.com/indiesoup">www.mixcloud.com/indiesoup</a> and you can follow the show on Instagram <a href="http://www.instagram.com/indiesoupicr">www.instagram.com/indiesoupicr</a>.</p>
					</div>
							</section>
			</main>
</div>

<style>
.icr-fs-not-yet,
.icr-fs-live-now {
	margin-top: 26px;
}

.icr-fs-live-btn {
	display: inline-block;
	margin-top: 12px;
	background: #ff6600;
	color: #fff !important;
	border-radius: 999px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 900;
	text-decoration: none !important;
	box-shadow: 0 5px 0 #000;
}

.icr-fs-live-btn:hover {
	background: #1597ef;
	color: #fff !important;
}

h1.entry-title {
	display: none;
}

.icr-fullscreen-player-page {
	position: relative;
	min-height: 100vh;
	margin: 0 calc(50% - 50vw);
	padding: clamp(28px, 5vw, 70px) 18px;
	background: #000;
	color: #fff;
	font-family: Montserrat, Poppins, Arial, sans-serif;
	overflow: hidden;
}

.icr-fs-bg {
	position: fixed;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(26px) saturate(1.15);
	transform: scale(1.08);
	opacity: 0.34;
	z-index: 0;
	display: none;
}

.icr-fs-overlay {
	position: fixed;
	z-index: 1;
}

.icr-fs-shell {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
}

.icr-fs-card {
	display: grid;
	grid-template-columns: minmax(240px, 420px) 1fr;
	gap: clamp(22px, 4vw, 54px);
	align-items: center;
	background: rgba(0,0,0,0.72);
	border: 5px solid #ff6600;
	border-radius: 36px;
	padding: clamp(18px, 4vw, 46px);
	box-shadow: 0 18px 50px rgba(0,0,0,0.48);
	backdrop-filter: blur(10px);
}

.icr-fs-art-wrap {
	aspect-ratio: 1 / 1;
	border-radius: 34px;
	overflow: hidden;
	background: #ff6600;
	border: 5px solid #fff;
	box-shadow: 0 12px 0 #ff6600;
}

.icr-fs-art {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.icr-fs-kicker {
	display: inline-block;
	background: #ff6600;
	color: #fff;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.icr-fs-title {
	margin: 0;
	color: #fff;
	font-size: clamp(42px, 7vw, 92px);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.065em;
}

.icr-fs-hosts {
	margin: 16px 0 0;
	font-size: clamp(18px, 2vw, 26px);
	font-weight: 900;
	color: #ff6600;
}

.icr-fs-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.icr-fs-pills span {
	display: inline-block;
	background: #1597ef;
	color: #fff;
	border-radius: 999px;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 900;
}

.icr-fs-player {
	margin-top: 26px;
	background: #fff;
	color: #000;
	border-radius: 28px;
	padding: 16px;
	box-shadow: 0 8px 0 #ff6600;
}

#icr-fs-audio {
	display: none;
}

.icr-fs-controls {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 16px;
	align-items: center;
}

.icr-fs-playpause {
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 999px;
	background: #ff6600;
	color: #fff;
	font-size: 25px;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 0 6px 0 #000;
	display: grid;
	place-items: center;
	line-height: 1;
}

.icr-fs-playpause:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 0 #000;
}

.icr-fs-progress-wrap {
	min-width: 0;
}

.icr-fs-seek {
	width: 100%;
	accent-color: #ff6600;
	cursor: pointer;
}

.icr-fs-time {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 7px;
	font-size: 14px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

.icr-fs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.icr-fs-actions a {
	display: inline-block;
	background: #1597ef;
	color: #fff !important;
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 900;
	text-decoration: none !important;
	box-shadow: 0 5px 0 #fff;
}

.icr-fs-actions a:hover {
	background: #ff6600;
}

.icr-fs-missing {
	margin-top: 24px;
	background: #fff;
	color: #000;
	border-radius: 22px;
	padding: 16px;
	font-weight: 900;
}

.icr-fs-info-grid {
	display: grid;
	grid-template-columns: minmax(240px, 0.8fr) 1.2fr;
	gap: 18px;
	margin-top: 22px;
}

.icr-fs-info-card {
	background: rgba(255,255,255,0.96);
	color: #111;
	border-radius: 28px;
	padding: 24px;
	border: 4px solid #000;
	box-shadow: 0 8px 0 #ff6600;
}

.icr-fs-info-card h2 {
	margin: 0 0 14px;
	color: #ff6600;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -0.04em;
}

.icr-fs-info-card ul {
	margin: 0;
	padding-left: 18px;
}

.icr-fs-info-card li,
.icr-fs-info-card p {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

@media (max-width: 860px) {
	.icr-fs-card,
	.icr-fs-info-grid {
		grid-template-columns: 1fr;
	}

	.icr-fs-art-wrap {
		max-width: 360px;
		margin: 0 auto;
	}
}

@media (max-width: 520px) {
	.icr-fullscreen-player-page {
		padding: 18px 10px;
	}

	.icr-fs-card,
	.icr-fs-info-card {
		border-radius: 24px;
	}

	.icr-fs-controls {
		grid-template-columns: 54px 1fr;
		gap: 12px;
	}

	.icr-fs-playpause {
		width: 54px;
		height: 54px;
	}
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
	const audio = document.getElementById("icr-fs-audio");
	const playPause = document.getElementById("icr-fs-playpause");
	const seek = document.getElementById("icr-fs-seek");
	const current = document.getElementById("icr-fs-current");
	const duration = document.getElementById("icr-fs-duration");

	if (!audio || !playPause || !seek || !current || !duration) return;

	function formatTime(seconds) {
		if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
		const mins = Math.floor(seconds / 60);
		const secs = String(Math.floor(seconds % 60)).padStart(2, "0");
		return mins + ":" + secs;
	}

	function updatePlayButton() {
		if (audio.paused) {
			playPause.textContent = "▶";
			playPause.setAttribute("aria-label", "Play");
		} else {
			playPause.textContent = "❚❚";
			playPause.setAttribute("aria-label", "Pause");
		}
	}

	playPause.addEventListener("click", function () {
		if (audio.paused) {
			audio.play();
		} else {
			audio.pause();
		}
	});

	audio.addEventListener("play", updatePlayButton);
	audio.addEventListener("pause", updatePlayButton);

	audio.addEventListener("loadedmetadata", function () {
		seek.max = Number.isFinite(audio.duration) ? audio.duration : 100;
		duration.textContent = formatTime(audio.duration);
	});

	audio.addEventListener("timeupdate", function () {
		current.textContent = formatTime(audio.currentTime);
		if (!seek.matches(":active")) {
			seek.value = audio.currentTime || 0;
		}
	});

	seek.addEventListener("input", function () {
		audio.currentTime = Number(seek.value || 0);
		current.textContent = formatTime(audio.currentTime);
	});
});
</script>

                </section>

 
    </section>
  </main>

		</div><!-- #content -->
	</div><!-- #primary -->


    </div><!-- #main -->

<footer class="icr-footer">
  <div class="icr-footer-inner">

    <div class="icr-footer-brand">
      <img src="https://www.ipswichcommunityradio.com/storage/2017/09/author_default-150x150.jpg" alt="Ipswich Community Radio">
      <div>
        <h2>Ipswich Community Radio</h2>
        <p>Your local community radio station.</p>
      </div>
    </div>

    <div class="icr-footer-grid">

      <div class="icr-footer-card icr-footer-listen">
        <h3>Listen Live</h3>
        <p>Broadcasting across Ipswich on 105.7 and online.</p>
        <a class="icr-footer-btn" href="#listen-live" onclick="window.open('https://www.ipswichcommunityradio.com/player','RadioPlayer','resizable,height=660,width=380'); return false;">
          Listen Live
        </a>
      </div>

      <div class="icr-footer-card">
        <h3>ICR Index</h3>
        <ul>
          <li><a href="https://www.ipswichcommunityradio.com/public-file/">Public File</a></li>
          <li><a href="https://www.ipswichcommunityradio.com/presenters/">Presenters</a></li>
          <li><a href="https://www.ipswichcommunityradio.com/traffic/">Traffic & Travel</a></li>
          <li><a href="https://www.ipswichcommunityradio.com/privacy-notice/">Privacy Notice</a></li>
        </ul>
      </div>

      <div class="icr-footer-card">
        <h3>Get Involved</h3>
        <ul>
          <li><a href="https://www.ipswichcommunityradio.com/contact/">Contact Us</a></li>
          <li><a href="https://www.ipswichcommunityradio.com/contact/">Become a Member / Presenter</a></li>
          <li><a href="https://www.ipswichcommunityradio.com/contact/">Sponsor / Advertise</a></li>
          <li><a href="https://www.ipswichcommunityradio.com/donate/">Donate</a></li>
        </ul>
      </div>

      <div class="icr-footer-card">
        <h3>On Air</h3>
        <p class="icr-footer-bubble">105.7 FM</p>
        <p class="icr-footer-bubble">Online</p>
        <p class="icr-footer-bubble">ICR+ App</p>
        <p class="icr-footer-bubble">Alexa</p>
        <p class="icr-footer-bubble">RadioPlayer</p>
      </div>

    </div>

    <div class="icr-footer-bottom">
      <p>&copy; 2026 Ipswich Community Radio. All rights reserved. - Website by <a style="color: orange;" href="https://www.a14itservices.com/" target="_blank">A14 IT Services</a></p>
      <p class="icr-footer-tagline">Daring, Diverse and Different.</p>
    </div>

  </div>
</footer>

  </div><!-- #page -->

<style>
.icr-footer {
  background: #000;
  color: #fff;
  padding: 50px 20px 24px;
  font-family: Montserrat, Poppins, Arial, sans-serif;
  border-top: 10px solid #ff6600;
}

.icr-footer * {
  box-sizing: border-box;
}

.icr-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.icr-footer-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  color: #111;
  border-radius: 28px;
  padding: 18px;
  margin-bottom: 24px;
  box-shadow: 0 8px 0 #ff6600;
}

.icr-footer-brand img {
  width: 86px;
  height: 86px;
  border-radius: 22px;
  object-fit: cover;
  border: 4px solid #000;
}

.icr-footer-brand h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #ff6600;
}

.icr-footer-brand p {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 800;
  color: #111;
}

.icr-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 18px;
}

.icr-footer-card {
  background: #111;
  border: 3px solid #fff;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 7px 0 rgba(255,255,255,0.18);
}

.icr-footer-card h3 {
  margin: 0 0 14px;
  color: #ff6600;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.icr-footer-card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
}

.icr-footer-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icr-footer-card li {
  margin: 0 0 9px;
}

.icr-footer-card a {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.icr-footer-card a:hover {
  color: #ff6600;
  text-decoration: underline;
}

.icr-footer-btn {
  display: inline-block;
  background: #ff6600;
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 5px 0 #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.icr-footer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #fff;
  color: #fff !important;
}

.icr-footer-bubble {
  display: inline-block;
  background: #1597ef;
  color: #fff;
  border-radius: 999px;
  padding: 6px 11px;
  margin: 3px 3px 6px 0 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.icr-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 2px solid rgba(255,255,255,0.2);
  margin-top: 28px;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 800;
}

.icr-footer-bottom p {
  margin: 0;
}

.icr-footer-tagline {
  color: #ff6600;
}

@media (max-width: 950px) {
  .icr-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .icr-footer {
    padding: 35px 12px 22px;
  }

  .icr-footer-brand {
    align-items: flex-start;
  }

  .icr-footer-brand img {
    width: 72px;
    height: 72px;
  }

  .icr-footer-grid {
    grid-template-columns: 1fr;
  }

  .icr-footer-bottom {
    display: block;
  }

  .icr-footer-bottom p + p {
    margin-top: 8px;
  }
}


.icr-player-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999999;
  background: #000;
  color: #fff;
  border: 4px solid #ff6600;
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  padding: 14px;
  font-family: Montserrat, Poppins, Arial, sans-serif;
}

.icr-player-inner {
  display: grid;
  grid-template-columns: 82px minmax(180px, 1fr) minmax(220px, 480px) 42px;
  gap: 14px;
  align-items: center;
}

.icr-player-art-wrap {
  width: 82px;
  height: 82px;
  border-radius: 22px;
  overflow: hidden;
  border: 3px solid #fff;
  background: #ff6600;
  flex-shrink: 0;
}

.icr-player-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Live mode has a stronger radio feel */
.icr-player-bar.is-live {
  border-color: #ff6600;
}

/* Listen Again mode uses the slick blue/orange style */
.icr-player-bar.is-again {
  background: linear-gradient(135deg, orange 0%, #111 48%, #1597ef 100%);
  border-color: #1597ef;
}

.icr-player-label {
  display: inline-block;
  background: #ff6600;
  color: #fff;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 6px;
  line-height: 1;
}

.icr-player-bar.is-again .icr-player-label {
  background: #1597ef;
}

.icr-player-title {
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.icr-player-now {
  margin-top: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  opacity: 0.95;
}

.icr-player-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#icr-audio-player {
  width: 100%;
  height: 42px;
}

/* Hide browser audio controls during live playback */
.icr-player-bar.is-live #icr-audio-player {
  display: none;
}

/* Show browser audio controls for Listen Again */
.icr-player-bar.is-again #icr-audio-player {
  display: block;
}

.icr-player-main-btn {
  border: 0;
  border-radius: 999px;
  background: #ff6600;
  color: #fff;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 0 #fff;
}

.icr-player-main-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #fff;
}

.icr-player-close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.icr-player-close:hover {
  background: #ff6600;
  color: #fff;
}

body.icr-player-active {
  padding-bottom: 125px;
}

@media (max-width: 820px) {
  .icr-player-bar {
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 22px;
  }

  .icr-player-inner {
    grid-template-columns: 64px 1fr 42px;
  }

  .icr-player-art-wrap {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .icr-player-info {
    min-width: 0;
  }

  .icr-player-controls {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  #icr-audio-player {
    width: 100%;
  }

  .icr-player-main-btn {
    width: 100%;
  }

  .icr-player-close {
    grid-column: 3;
    grid-row: 1;
  }

  body.icr-player-active {
    padding-bottom: 180px;
  }
}
/* Hide the raw audio element. We control it with our own UI. */
#icr-audio-player {
  display: none;
}

/* Listen Again custom control panel */
.icr-again-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: center;
  background: #fff;
  color: #000;
  border-radius: 22px;
  padding: 12px;
  box-shadow: 0 6px 0 #ff6600;
}

.icr-player-bar.is-live .icr-again-controls {
  display: none !important;
}

.icr-player-bar.is-again .icr-again-controls {
  display: grid;
}

.icr-again-playpause {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: #ff6600;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 0 #000;
  display: grid;
  place-items: center;
  line-height: 1;
}

.icr-again-playpause:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #000;
}

.icr-again-progress-wrap {
  min-width: 0;
}

.icr-again-seek {
  width: 100%;
  accent-color: #ff6600;
  cursor: pointer;
}

.icr-again-time {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 900;
  color: #000;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .icr-again-controls {
    grid-template-columns: 48px 1fr;
    border-radius: 18px;
  }

  .icr-again-playpause {
    width: 48px;
    height: 48px;
  }
}
</style>


<script>
document.addEventListener("DOMContentLoaded", function () {
  const LIVE_STREAM_URL = "https://alexa.icrfm.com/ICR";
  const LIVE_NOW_PLAYING_URL = "https://ipswichcommunityradio.com/player/rds/song.txt";
  const DEFAULT_ART = "https://www.ipswichcommunityradio.com/storage/2017/09/author_default-150x150.jpg";

  const playerBar = document.getElementById("icr-player-bar");
  const audio = document.getElementById("icr-audio-player");
  const title = document.getElementById("icr-player-title");
  const label = document.getElementById("icr-player-label");
  const nowLine = document.getElementById("icr-player-now");
  const art = document.getElementById("icr-player-art");
  const closeBtn = document.getElementById("icr-player-close");
  const livePlayStopBtn = document.getElementById("icr-live-playstop");

  const againControls = document.getElementById("icr-again-controls");
  const againPlayPause = document.getElementById("icr-again-playpause");
  const againSeek = document.getElementById("icr-again-seek");
  const againCurrent = document.getElementById("icr-again-current");
  const againDuration = document.getElementById("icr-again-duration");

  let nowPlayingTimer = null;
  let liveArtTimer = null;
  let currentMode = null;

  if (!playerBar || !audio || !title || !label || !nowLine || !art || !closeBtn || !livePlayStopBtn) {
    return;
  }

  function getShowImageFromButton(button) {
    const card = button.closest(".master-schedule-tabs-show");
    const image = card ? card.querySelector(".show-image img") : null;
    return image ? image.currentSrc || image.src : DEFAULT_ART;
  }

function formatTime(seconds) {
  if (!Number.isFinite(seconds) || seconds < 0) {
    return "0:00";
  }

  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60).toString().padStart(2, "0");

  return mins + ":" + secs;
}

  function getLiveShowImage() {
    const liveCard = document.querySelector(".master-schedule-tabs-show.nowplaying .show-image img");
    return liveCard ? liveCard.currentSrc || liveCard.src : DEFAULT_ART;
  }

  function stopTimers() {
    if (nowPlayingTimer) {
      clearInterval(nowPlayingTimer);
      nowPlayingTimer = null;
    }

    if (liveArtTimer) {
      clearInterval(liveArtTimer);
      liveArtTimer = null;
    }
  }

  async function updateNowPlaying() {
    if (currentMode !== "live") return;

    try {
      const response = await fetch(LIVE_NOW_PLAYING_URL + "?t=" + Date.now(), {
        cache: "no-store"
      });

      const text = await response.text();
      const cleanText = text.trim();

      nowLine.hidden = false;
      nowLine.textContent = cleanText ? "Now Playing: " + cleanText : "Now Playing: Ipswich Community Radio";
    } catch (error) {
      nowLine.hidden = false;
      nowLine.textContent = "Now Playing: Ipswich Community Radio";
    }
  }

  function updateLiveArt() {
    if (currentMode !== "live") return;

    const liveImage = getLiveShowImage();
    art.src = liveImage || DEFAULT_ART;
  }

  function showPlayer() {
    playerBar.hidden = false;
    document.body.classList.add("icr-player-active");
  }

  function resetAudio() {
    audio.pause();
    audio.removeAttribute("src");
    audio.load();
  }

  function playLive(displayTitle, displayArt) {
    stopTimers();

    currentMode = "live";

    playerBar.classList.add("is-live");
    playerBar.classList.remove("is-again");
    againControls.hidden = true;
    audio.controls = false;
    showPlayer();

    label.textContent = "Listen Live";
    title.textContent = displayTitle || "Ipswich Community Radio";

    nowLine.hidden = false;
    nowLine.textContent = "Now Playing: Loading...";

    art.src = displayArt || getLiveShowImage() || DEFAULT_ART;

    livePlayStopBtn.hidden = false;
    livePlayStopBtn.textContent = "Stop";

    audio.controls = false;

    if (audio.src !== LIVE_STREAM_URL) {
      audio.src = LIVE_STREAM_URL;
    }

    audio.play().catch(function () {
      livePlayStopBtn.textContent = "Play";
    });

    updateNowPlaying();
    updateLiveArt();

    nowPlayingTimer = setInterval(updateNowPlaying, 15000);

    /*
      This updates the presenter/show image regularly.
      True hourly changes depend on the page having a refreshed .nowplaying card.
      This will pick up changes if the schedule plugin updates the nowplaying class,
      or when the page content is refreshed.
    */
    liveArtTimer = setInterval(updateLiveArt, 60000);
  }

  function playAgain(url, displayTitle, displayArt) {
    if (!url) return;

    stopTimers();

    currentMode = "again";

    playerBar.classList.remove("is-live");
    playerBar.classList.add("is-again");

    showPlayer();

    label.textContent = "Listen Again";
    title.textContent = displayTitle || "Listen Again";
    nowLine.hidden = true;
    nowLine.textContent = "";

    art.src = displayArt || DEFAULT_ART;

    livePlayStopBtn.hidden = true;

    audio.controls = false;
    againControls.hidden = false;
    againPlayPause.textContent = "❚❚";
    againPlayPause.setAttribute("aria-label", "Pause");

    if (audio.src !== url) {
      audio.src = url;
    }

    audio.play().catch(function () {
      // Browser may require manual play on some devices.
    });
  }

  function closePlayer() {
    stopTimers();
    resetAudio();

    againControls.hidden = true;
    againSeek.value = 0;
    againCurrent.textContent = "0:00";
    againDuration.textContent = "0:00";
    againPlayPause.textContent = "▶";

    currentMode = null;

    playerBar.hidden = true;
    playerBar.classList.remove("is-live", "is-again");
    document.body.classList.remove("icr-player-active");
  }

  livePlayStopBtn.addEventListener("click", function () {
    if (currentMode !== "live") return;

    if (audio.paused) {
      audio.play();
      livePlayStopBtn.textContent = "Stop";
    } else {
      audio.pause();
      livePlayStopBtn.textContent = "Play";
    }
  });

  closeBtn.addEventListener("click", closePlayer);

  document.addEventListener("click", function (event) {
    const button = event.target.closest(".listen-btn");
    if (!button) return;

    const type = button.getAttribute("data-player-type") || "";
    const audioUrl = button.getAttribute("data-audio-url") || button.getAttribute("href");
    const showTitle = button.getAttribute("data-show-title") ||
      button.closest(".show-info")?.querySelector(".show-title")?.innerText ||
      "Ipswich Community Radio";

    const showArt = getShowImageFromButton(button);

    event.preventDefault();

    if (type === "live") {
      playLive(showTitle, showArt);
    } else {
      playAgain(audioUrl, showTitle, showArt);
    }

againPlayPause.addEventListener("click", function () {
  if (currentMode !== "again") return;

  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
});

audio.addEventListener("play", function () {
  if (currentMode === "again") {
    againPlayPause.textContent = "❚❚";
    againPlayPause.setAttribute("aria-label", "Pause");
  }
});

audio.addEventListener("pause", function () {
  if (currentMode === "again") {
    againPlayPause.textContent = "▶";
    againPlayPause.setAttribute("aria-label", "Play");
  }
});

audio.addEventListener("loadedmetadata", function () {
  againDuration.textContent = formatTime(audio.duration);
  againSeek.max = Number.isFinite(audio.duration) ? audio.duration : 100;
});

audio.addEventListener("timeupdate", function () {
  if (currentMode !== "again") return;

  againCurrent.textContent = formatTime(audio.currentTime);

  if (!againSeek.matches(":active")) {
    againSeek.value = audio.currentTime || 0;
  }
});

againSeek.addEventListener("input", function () {
  if (currentMode !== "again") return;

  audio.currentTime = Number(againSeek.value || 0);
  againCurrent.textContent = formatTime(audio.currentTime);
});

  });
});
</script>


<div id="icr-player-bar" class="icr-player-bar" hidden>
  <div class="icr-player-inner">

    <div class="icr-player-art-wrap">
      <img id="icr-player-art" class="icr-player-art" src="https://www.ipswichcommunityradio.com/storage/2017/09/author_default-150x150.jpg" alt="">
    </div>

    <div class="icr-player-info">
      <div class="icr-player-label" id="icr-player-label">Now Playing</div>
      <div class="icr-player-title" id="icr-player-title">Ipswich Community Radio</div>
      <div class="icr-player-now" id="icr-player-now" hidden>Now Playing: Loading...</div>
    </div>

<div class="icr-player-controls">
  <button type="button" id="icr-live-playstop" class="icr-player-main-btn" hidden>Stop</button>

  <div id="icr-again-controls" class="icr-again-controls" hidden>
    <button type="button" id="icr-again-playpause" class="icr-again-playpause" aria-label="Play">
      ▶
    </button>

    <div class="icr-again-progress-wrap">
      <input id="icr-again-seek" class="icr-again-seek" type="range" min="0" max="100" value="0" step="0.1">
      <div class="icr-again-time">
        <span id="icr-again-current">0:00</span>
        <span id="icr-again-duration">0:00</span>
      </div>
    </div>
  </div>

  <audio id="icr-audio-player" preload="none"></audio>
</div>

    <button type="button" id="icr-player-close" class="icr-player-close" aria-label="Close player">
      ×
    </button>

  </div>
</div>

  </body>
</html>