https://www.kzst.com/wp-content/plugins/wpb-show-core/modules/jpla…/podcast_player_new.js?ver=8.1.0

1function subscribeMenu_New(unique_id_val) {
2	// Hide the mobile dropdown by default
3	jQuery( "#subscribe_menu_" + unique_id_val ).hide();
4	// Toggle the mobile dropdown on mobile-menu click
5	jQuery( "#subscribeMenuLink_" + unique_id_val ).on(
6		"click",
7		function (event) {
8			event.preventDefault(); // WPB-6959
9			event.stopPropagation();
10			jQuery( "#subscribe_menu_" + unique_id_val ).slideToggle( "fast" );
11		}
12	);
13	// Close the dropdown when the close button is clicked
14	jQuery( "#close-modal-" + unique_id_val ).on(
15		"click",
16		function () {
17			jQuery( "#subscribe_menu_" + unique_id_val ).slideUp( "fast" );
18		}
19	);
20}
21
22function podcastMenu_New(unique_id_val) {
23	// Hide the mobile dropdowns by default
24	jQuery( "#podcastMenu_" + unique_id_val + ", #speed-control-menu-" + unique_id_val ).hide();
25	// Toggle the mobile dropdown on menu link click
26	jQuery( "#podcastMenuLink_" + unique_id_val ).on(
27		"click",
28		function (event) { // WPB-6959
29			event.preventDefault(); // Prevents the browser from following href="#" and scrolling to top
30			event.stopPropagation(); // Prevents the click event from reaching the document
31			jQuery( "#podcastMenu_" + unique_id_val ).slideToggle( "fast" );
32		}
33	);
34
35	jQuery( "#speed-control-btn-" + unique_id_val ).on(
36		"click",
37		function (event) {
38			event.stopPropagation(); // Prevents the click event from reaching the document
39			jQuery( "#speed-control-menu-" + unique_id_val ).slideToggle( "fast" );
40		}
41	);
42
43	// Close the menus when clicking anywhere on the document
44	jQuery( document ).on(
45		"click",
46		function () {
47			jQuery( ".podcastMenu, .speed-control-menu" ).slideUp( "fast" );
48			jQuery( "#podcastMenu_" + unique_id_val + ", #speed-control-menu-" + unique_id_val ).slideUp( "fast" );
49		}
50	);
51}
52
53// --------------------------------------------------------
54
55// May not needed below funcs. later we will delete it.
56// for Customize Styles js code for demo purpose.
57
58// Function to toggle the visibility of .styling-actions
59function toggleStylingActions(unique_id_val) {
60	jQuery( "#styling-actions-" + unique_id_val ).slideToggle( "fast" );
61}
62
63function stylingActions_New (unique_id_val) {
64	// Hide .styling-actions by default
65	jQuery( "#styling-actions-" + unique_id_val ).hide();
66}
67
68// ***PLAYER BACKGROUND***//
69// Function to update background color and class color

70function updateBackgroundColor(unique_id_val,color, showBg) {
71	// var colorPicker = document.getElementById("backgroundColorPicker");
72	var selectedColor = color;
73	var targetElement = document.getElementById( "wpb-audio-player-" + unique_id_val );
74	var playIcon      = document.getElementsByClassName("fa-play"); // Select the element with class .fa-play
75	var pauseIcon     = document.getElementsByClassName( "jp-pause");
76	var playlist      = document.getElementById( "playlistContainer-" + unique_id_val );
77	// var speedDiv = document.getElementById("speed-control-menu-"+unique_id_val);
78
79	// Check if the checkbox is checked
80	// var showBackgroundCheckbox = document.getElementById(
81	// "showBackgroundCheckbox"
82	// );
83	var isCheckboxChecked = showBg;
84	// Reset the background color and class color if the checkbox is checked
85	if (isCheckboxChecked == "1") {
86		targetElement.style.backgroundColor = ""; // Reset to default background color or remove the style
87
88		for (var i = 0; i < playIcon.length; i++) {
89          playIcon[i].style.color = "";
90        }
91
92        for (var i = 0; i < pauseIcon.length; i++) {
93          pauseIcon[i].style.color = "";
94        }
95
96		if (playlist !== null) {
97			playlist.style.backgroundColor = '';
98		}
99		// speedDiv.style.backgroundColor='';
100	} else {
101		// Update the background color, class color, and color code if the checkbox is not checked
102		targetElement.style.backgroundColor = selectedColor;
103
104		for (var i = 0; i < playIcon.length; i++) {
105          playIcon[i].style.color = selectedColor;
106        }
107
108        for (var i = 0; i < pauseIcon.length; i++) {
109          pauseIcon[i].style.color = selectedColor;
110        }
111
112		if (playlist !== null) {
113			playlist.style.backgroundColor = selectedColor;
114		}
115		// speedDiv.style.backgroundColor=selectedColor;
116	}
117}
118
119// ***PRIMARY COLOR***//
120function updateFontColor(unique_id_val,color) {
121	// var colorPicker = document.getElementById("fontColorPicker");
122	var selectedColor = color;
123	// var speedDiv = document.getElementById("speed-control-menu-"+unique_id_val);
124
125	// Update the background color for the elements with class 'AudioSeek'
126	var audioSeekElements = document.getElementsByClassName( "AudioSeek" );
127	for (var i = 0; i < audioSeekElements.length; i++) {
128		audioSeekElements[i].style.backgroundColor = selectedColor;
129	}
130
131	// Update the color for the element with class 'podcastName'
132	var podcastNameElements = document.getElementsByClassName( "fa-circle" );
133	for (var j = 0; j < podcastNameElements.length; j++) {
134		podcastNameElements[j].style.color = selectedColor;
135	}
136
137    // Update the color for list overlay
138	var podcastNameElements = document.getElementsByClassName( "icon-overlay" );
139	for (var j = 0; j < podcastNameElements.length; j++) {
140		podcastNameElements[j].style.backgroundColor = selectedColor;
141	}
142	// speedDiv.style.color=selectedColor;
143}
144
145
146// ***MAIN TEXT COLOR***//
147function updateButtonColor(unique_id_val, color) {
148    // var colorPicker = document.getElementById("buttonColorPicker");
149    var selectedColor = color;
150    // Get all elements with the specified classes
151    var buttonElements = document.querySelectorAll(
152        ".fa, .fal, .far, .fab, .fas, .speed-control-btn, .podcastName, .episodeTitleInside, .jp-title, .podcastDescription, .jp-playlist-episode-info, .podcastTitle, .jp-playlist-load-more-status, .backword-btn-svg, .forword-btn-svg"
153    );
154    // Specify additional classes to skip
155    var classesToSkip = ["fa-play", "fa-pause", "fa-circle", "fa-code", "fa-cloud-download-alt", "fa-external-link-alt", "fa-rss", "fa-apple", "fa-heartbeat", "fa-spotify", "fa-google", "fa-amazon", "fa-times", "fa-cloud-download"]; // Add your additional classes here
156
157    // Loop through each button element and update the color
158    buttonElements.forEach(
159        function(buttonElement) {
160            // Skip elements with the specified classes
161            if (!classesToSkip.some(className => buttonElement.classList.contains(className))) {
162                // Check if it's an SVG element
163                if (buttonElement.tagName.toLowerCase() === 'svg') {
164                    // Set both fill and stroke colors for SVGs
165                    buttonElement.style.fill = selectedColor;
166                    buttonElement.style.stroke = selectedColor;
167                } else {
168                    // For other elements, set color normally
169                    buttonElement.style.color = selectedColor;
170                }
171            }
172        }
173    );
174}
175
176// ***TIMELINE BACKGROUND***//
177
178// Function to update timeline background color
179function updateTimelineColor(color) {
180	// var colorPicker = document.getElementById("timelineColorPicker");
181	var selectedColor = color;
182
183	var timelineElements = document.getElementsByClassName( "AudioBuffer" );
184	for (var j = 0; j < timelineElements.length; j++) {
185		timelineElements[j].style.backgroundColor = selectedColor;
186	}
187
188}
189
190// ***SECONDARY BACKGROUND COLOR***//
191
192// Function to update duration background color
193function updateDurationColor(color) {
194	// var colorPicker = document.getElementById("durationColorPicker");
195	var selectedColor = color;
196	// Get the elements with the classes 'AudioTimer_a' and 'AudioTimer_b'
197	var audioTimerAElements = document.getElementsByClassName( "AudioTimer_a" );
198	var audioTimerBElements = document.getElementsByClassName( "AudioTimer_b" );
199
200	// Update the background color for elements with class 'AudioTimer_a'
201	for (var i = 0; i < audioTimerAElements.length; i++) {
202		audioTimerAElements[i].style.backgroundColor = selectedColor;
203	}
204
205	// Update the background color for elements with class 'AudioTimer_b'
206	for (var j = 0; j < audioTimerBElements.length; j++) {
207		audioTimerBElements[j].style.backgroundColor = selectedColor;
208	}
209}
210
211// ***SECONDARY TEXT COLOR***//
212
213// Function to update duration text color
214function updateDurationtextColor(color) {
215	// var colorPicker = document.getElementById("durationtextColorPicker");
216	var selectedColor = color;
217
218	// Get the elements with the class 'podcast__time'
219	var durationTextElements = document.getElementsByClassName( "podcast__time" );
220
221	// Update the font color for elements with class 'podcast__time'
222	for (var i = 0; i < durationTextElements.length; i++) {
223		durationTextElements[i].style.color = selectedColor;
224	}
225}
226

227function updateBackgroundImage(backgroundImageChecked){
228   if(backgroundImageChecked==1){
229
230   	var targetElement = document.querySelector(".wpb-audio-player");
231    var playIcon = document.querySelector(".fa-play");
232    var playList = document.querySelector(".playlistMeta");
233    var colorCode = document.getElementById("code");
234    var playlistEpisode = document.querySelector(".playlistContainer");
235    var readMoreLink = document.querySelector(".podcast-read-more-link");
236  
237    for (var i = 0; i < targetElement.length; i++) {
238   	 targetElement[i].style.backgroundColor = "";
239    }	 
240
241    // Additional checks before updating style properties
242    for (var i = 0; i < playIcon.length; i++) {
243      playIcon[i].style.color = "";
244    }
245
246    if(playList!=null){
247     for (var i = 0; i < playList.length; i++) {
248      playList[i].style.backgroundColor = "";
249     }
250    }
251
252    if(playlistEpisode!=null){
253     for (var i = 0; i < playlistEpisode.length; i++) {
254      playlistEpisode[i].style.backgroundColor = "";
255     }
256    } 
257
258    if(readMoreLink != null){
259     for (var i = 0; i < readMoreLink.length; i++) {
260      readMoreLink[i].style.backgroundColor = "";
261     }
262    }
263
264   	var playerImages = document.getElementsByClassName( "jp-image" );
265	for (var i = 0; i < playerImages.length; i++) {
266	  	var eleId = playerImages[i].id;
267	  	var idstr=eleId.replace("jp-image-",'');
268	  	var backroundImage = $('#'+eleId).css('background-image');
269	  	 imageUrl = backroundImage.replace('url(','').replace(')','').replace(/\"/gi, "");
270	  	 console.log('#'+'player-interface-'+idstr);
271	  	 console.log($('#'+'player-interface-'+idstr));
272		  $('#'+'player-interface-'+idstr).addClass("show-background");
273	}
274 }
275}
276// --------------------------------------------------------
277
278function updatePlayerTheme(themeSetting){
279	jQuery( ".jp-jplayer" ).each(
280		function() {
281			var playerId = jQuery( this ).attr( 'id' );
282			if (playerId.indexOf( "player-" ) >= 0) {
283				unique_id_val = playerId.replace( "player-", "" );
284			} else if (playerId.indexOf( "jquery_jplayer_" ) >= 0) {
285				unique_id_val = playerId.replace( "jquery_jplayer_", "" );
286			}

287			updateBackgroundColor( unique_id_val, themeSetting['backgroundColorPicker'], themeSetting['showBackgroundCheckbox'] );
288			updateFontColor( unique_id_val,themeSetting['primaryColorPicker'] );
289			updateButtonColor( unique_id_val,themeSetting['textColorPicker'] );
290			updateTimelineColor( themeSetting['timelineColorPicker'] );
291			updateDurationColor( themeSetting['timelineDurationBgColorPicker'] );
292			updateDurationtextColor( themeSetting['durationtextColorPicker'] );
293			updateBackgroundImage(themeSetting['showBackgroundCheckbox'])
294		}
295	);
296}