JSFiddle - React, Tailwind, and code Playground
by D S
JavaScript
"use strict";
$(".shiPlayer").append('<div class="blur"></div><div class="mainSection"><div class="panel1"><div class="top"><div class="trackTitle">Track Title</div><div class="trackSinger">Track Artist</div></div><div class="middle"><div class="centered-vertically"></div><div class="play"><div class="playpausebtn icon-play-r"></div><div class="frontTiming">00:00 / </div></div></div></div><div class="panel2" style="display:none"><ul></ul></div><div class="panel3" style="display:none"><div class="rLogo" alt="" title=""></div><div class="rName"><span class="icon-radio-tower"></span><span class="ct"></span></div><div class="cListeners"><span class="icon-headphones"></span><span class="ct"></span></div><div class="pListeners"><span class="icon-power"></span><span class="ct"></span></div><div class="rSite"><span class="icon-link"></span><span class="ct"></span><a target="_blank" href="" title="Stream Website" >Stream Website</a></div><div class="rTags"><span class="icon-tag"></span></div></div></div><div class="dashboard"><div class="centered-vertically"></div><div class="icon-Info"></div><div class="icon-history2"></div><div class="live" style="width: 50px"><div class="bliking"></div><div class="icon"></div></div><div class="sound shake icon-volume-high"></div><div class="share-button "><div href="#" class="social-toggle icon-share"></div><div class="social-networks"><ul><li class="social-twitter icon-twitter"><a target="_blank" href="#"></a></li><li class="social-facebook icon-facebook"><a target="_blank" href="#"></a></li><li class="social-gplus icon-google-plus"><a target="_blank" href="#"></a></li><li class="social-email icon-email"><a target="_blank" href="#"></a></li></ul></div></div></div>'), $.fn.shiPlayer = function(options) {
function togglePlying(t, e) {
$(t).toggleClass("playing", e)
}
function playManagement() {
if (audio.paused) {
setTimeout(function() {
audio.play()
}, 150);
var t = $(".playpausebtn.playing");
...