https://htzfm.com/wp-content/themes/whiteoakstation-htzfm/js/audiobite.js?ver=6ab710fbb28f5

1// Wrap in IIFE to avoid polluting global scope, but store main data on window
2
3(function () {
4
5  window.omnyAudioData = window.omnyAudioData || [];
6
7  window.currentIndex = window.currentIndex || 0;
8
9  const itemsPerPage = 4;
10
11
12
13  const themeUrl = `/wp-content/themes/whiteoakstation-htzfm/`;
14
15
16
17  function bindAudioBiteEvents(container) {
18
19    const $container = jQuery(container);
20
21  
22
23    // Close button
24
25    $container.find("#audio-bite-close a").off("click").on("click", function () {
26
27      jQuery(".showpage-podcast-track").hide();
28
29      jQuery("#live-track").show();
30
31      jQuery(".player-mini-wrap #btnPause").click();
32
33    });
34
35  
36
37    // Listen button
38
39    //$container.find(".audio-bite-live").css('border','2px solid red')
40
41    $container.find(".audio-bite-live").off("click").on("click", function (e) {
42
43      e.preventDefault();
44
45      console.log("audio-bite-live clicked");
46
47  
48
49      jQuery(".showpage-podcast-track").show();
50
51      jQuery("#live-track").hide();
52
53      jQuery("#listen-live #btnPause").click();
54
55    });
56
57
58
59    
60
61  }
62
63  
64
65
66
67  // ✅ Convert single audio object to HTML
68
69  function convertToHtml(audio) {
70
71    console.log('audio',audio)
72
73    return `
74
75      <div class="audio-bite-list flex flex-vcenter" style="margin-bottom: 20px;">
76
77        <div class="audio-bite-wrap flex">
78
79          <div class="audio-bite-lt">
80
81            <div class="h6"><a href="javascript:void(0);" class="bites-audio" data-audiotitle="${audio.title}" data-audiourl="${audio.url}" data-image="${audio.image}">${audio.title}</a></div>
82
83            <ul class="audio-lists flex" style="list-style:none; padding-left: 0;">
84
85              <li style="margin-right: 10px;">Published at ${audio.pubDate}</li>
86
87              <li>${audio.duration}</li>
88
89            </ul>
90
91          </div>
92
93          <div class="waveform" data-author="${audio.author}" data-image="${audio.image}">
94
95            <figure class="object-fit">
96
97              <img src="/wp-content/themes/whiteoakstation-htzfm/images/[email protected]" alt="waveform">
98
99            </figure>
100
101          </div>
102
103        </div>
104
105        <div class="audio-bite-rt flex flex-vcenter">
106
107          <div class="episode-play-btn flex flex-vcenter"
108
109               data-audio-src="${audio.url}"
110
111               data-audio-title="${audio.title}"
112
113               data-audio-image="${audio.image}">
114
115            <a href="javascript:void(0);" class="bites-audio audio-bite-live flex flex-vcenter" data-audiotitle="${audio.title}" data-audiourl="${audio.url}" data-image="${audio.image}">
116
117              <i class="fa-sharp fa-solid fa-play" aria-hidden="true"></i>
118
119            </a>
120
121            <span>LISTEN</span>
122
123          </div>
124
125        </div>
126
127      </div>
128
129    `;
130
131  }
132
133
134
135  // ✅ Parse Omny JSON data from container
136
137  function getOmnyAudioData(container) {
138
139    const audioDataEl = container.querySelector("#omny-audio-data");
140
141    if (!audioDataEl) return [];
142
143    try {
144
145      return JSON.parse(audioDataEl.textContent.trim()) || [];
146
147    } catch (e) {
148
149      console.error("❌ Failed to parse omnyAudioData:", e);
150
151      return [];
152
153    }
154
155  }
156
157
158
159  // ✅ Load next batch of audio bites
160
161  function loadMoreItems(container, themeUrl) {
162
163    const biteContainer = container.querySelector("#audio-bite-container");
164

165    const loadMoreBtn = container.querySelector("#load-more-btn");
166
167    if (!biteContainer || !Array.isArray(window.omnyAudioData)) return;
168
169
170
171    const nextItems = window.omnyAudioData.slice(
172
173      window.currentIndex,
174
175      window.currentIndex + itemsPerPage
176
177    );
178
179    nextItems.forEach((audio) => {
180
181      biteContainer.insertAdjacentHTML("beforeend", convertToHtml(audio, themeUrl));
182
183    });
184
185
186
187    window.currentIndex += nextItems.length;
188
189
190
191    // Hide button if no more items left
192
193    if (loadMoreBtn && window.currentIndex >= window.omnyAudioData.length) {
194
195      loadMoreBtn.style.display = "none";
196
197    }
198
199  }
200
201
202
203  // ✅ Initialize audio bites
204
205  window.initAudioBites = function (container) {
206
207    window.omnyAudioData = getOmnyAudioData(container);
208
209    const biteContainer = container.querySelector("#audio-bite-container");
210
211    const loadMoreBtn = container.querySelector("#load-more-btn");
212
213    const themeUrl = window.themeUrl || ""; // define in PHP globally if needed
214
215
216
217    if (!biteContainer) return;
218
219
220
221    if (window.omnyAudioData.length > 0) {
222
223      biteContainer.innerHTML = "";
224
225      window.currentIndex = 0;
226
227      loadMoreItems(container, themeUrl);
228
229
230
231      if (loadMoreBtn) {
232
233        if (window.omnyAudioData.length > itemsPerPage) {
234
235          loadMoreBtn.style.display = "block"; // ✅ only show if more items exist
236
237          loadMoreBtn.onclick = () => loadMoreItems(container, themeUrl);
238
239        } else {
240
241          loadMoreBtn.style.display = "none"; // ✅ hide if all items fit on first load
242
243        }
244
245      }
246
247    } else {
248
249      biteContainer.innerHTML = "<h5>No Audio Bites Found!</h5>";
250
251      if (loadMoreBtn) loadMoreBtn.style.display = "none";
252
253    }
254
255  };
256
257
258
259  // ✅ First page load
260
261  document.addEventListener("DOMContentLoaded", () => {
262
263    window.initAudioBites(document);
264
265  });
266
267
268
269})();
270
271
272
273jQuery(function($){
274
275  $(document).on("click", "a.bites-audio", function (e) {
276
277    e.preventDefault();
278
279
280
281    $(".showpage-podcast-track, .barba-showpage-podcast-track").show();
282
283    $("#live-track").hide();
284
285    $("#listen-live #btnPause").click();
286
287
288
289    const audiourl = $(this).data("audiourl");
290
291    const audiotitle = $(this).data("audiotitle");
292
293    const audioimg = $(this).data("image");
294
295
296
297    if (!audiourl) return;
298
299
300
301    const player = $("#episode-audio")[0]; 
302
303
304
305    player.src = audiourl;
306
307    player.play().catch(err => console.warn("Autoplay blocked:", err));
308
309
310
311
312
313    console.log("Now playing:", audiourl);
314
315    $("#episode-title").text(audiotitle || "");
316
317    $("#episode-img").attr('src',audioimg);
318
319
320
321    $(".player-mini-wrap #btnPlay, .object-fit.pauseimg").hide();
322
323    $(".player-mini-wrap #btnPause, .object-fit.playimg").show();
324
325
326
327  });
328
329});
330
331
332
333
334
335
336