Poodll

{"name":"OncePlayerJS","key":"onceplayerjs","version":"","instructions":"This is an HTML5 audio player that will only play the audio file it manages once.","showatto":"0","showplayers":"1","requirecss":"//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css","requirejs":"","shim":"","defaults":"canpause=0,pause=fa-stop,play=fa-play,over=fa-minus,playing=fa-circle-o-notch","amd":"1","body":"<div id='@@AUTOID@@_container' class='poodll_onceplayer'>\n\n\t<div class=\"button-wrapper\">\n\t\t<button type='button'  id='@@AUTOID@@' class='poodll_onceplayer_button'>\n\t\t<audio id='@@AUTOID@@_player' class=\"onceplayerjs\" src=\"@@VIDEOURL@@\"></audio>\n\t\t<i class=\"fa fa-play fa-2x\" aria-hidden=\"true\"></i></button>\n\t</div>\n\t<div class=\"state-wrapper\">\n\t\t<div id='@@AUTOID@@_time' class='poodll_onceplayer_time'></div>\n\t\t<div id='@@AUTOID@@_state' class='poodll_onceplayer_state'></div>\n\t</div>\n\t<div style=\"clear: both;\"></div>\n\t<div class=\"volume-control\">\n\t\t<button class=\"vol-up vol-but\"></button>\n\t\t<div class=\"meter\">\n\t\t\t<div class=\"indicator\"></div>\n\t\t</div>\n\t\t<button class=\"vol-down vol-but\"></button>\t\n\t</div>\n\t\n\t\n</div>","bodyend":"","script":"$('.onceplayerjs').attr('playtime', 2);\n//get our player\nvar aplayer = $('#' + @@AUTOID@@).children().first();\nvar fa = $('#' + @@AUTOID@@ + ' .fa');\nvar thestate =$('#' + @@AUTOID@@ + '_state'); \nvar thetime = $('#' + @@AUTOID@@ + '_time'); \n\n$(fa).removeClass('fa-minus');\n//set status\nthestate.text('- ready -');\n\n\n// setting base volume for audio player\naplayer[0].volume = 0.2;\n\n\n\n/* Volume Control */\n$('.vol-up').click(function(){\n\t/* adding value to meter!*/\n\t$('.indicator').css(\"width\", '+=' + (0.1 * $('.meter').width()));\n\t\n\tif(aplayer[0].volume == 1.1){\n\t\tAlert(\"max Volume\");\n\t}else{\n\t\taplayer[0].volume+=0.1;\t\n\t\tconsole.log(aplayer[0].volume);\n\t}\n\t\n\t\n\t\n});\n$('.vol-down').click(function(){\n\t/* Subtracting value to meter!*/\n\t$('.indicator').css(\"width\", '-=' + (0.1 * $('.meter').width()));\n\tif(aplayer[0] == 0.0){\n\t\talert(\"audio is mute !\");\n\t}else{\n\t\taplayer[0].volume-=0.1;\t\n\t\tconsole.log(aplayer[0].volume);\n\t}\n\t\n});\n\n\n//player clicked event\n$('#' + @@AUTOID@@).click(function(){\n\tplay_audio();\n\t\n\taplayer[0].addEventListener('ended', function(){\n\t\tvar playtime = $('.onceplayerjs').attr('playtime');\n\t\t$(fa).removeClass(@@playing@@);\n\t\t$(fa).removeClass('fa-spin');\n\t\t$(fa).removeClass(@@play@@);\n\t\taplayer[0].pause();\t\n\t\t\n\t\t\n\t\tif(playtime > 0){\n\t\t\t$('.onceplayerjs').attr('playtime',1);\n\t\t\t$(fa).addClass('custom-pause');\n\t\t\t$(fa).removeClass('fa-minus');\n\t\t\tthestate.text('- Play Again -');\n\t\t\t\n\t\t\t$('#' + @@AUTOID@@).click(function(){\n\t\t\t\t$(fa).removeClass('custom-pause');\n\t\t\t\tplay_audio();\n\t\t\t\t$('.onceplayerjs').attr('playtime',0);\n\t\t\t\t$(\"#btnSubmit\").attr(\"disabled\", true);\n\t\t\t\tthestate.text('- finished -');\n\t\t\t\t$(this).attr(\"disabled\", true);\n\t\t\t});\n\t\t\t\n\t\t}else{\n\t\t\t$(fa).addClass('custom-pause');\n\t\t\tthestate.text('- finished -');\n\t\t}\n\t\t\n\t});\n   \n  \n});\n\n\nfunction play_audio(){\n\taplayer[0].play();\n\tthestate.text('- playing -');\n\t$(fa).removeClass(@@play@@);\n\t$(fa).addClass(@@playing@@);\n\t$(fa).addClass('fa-spin');\n}\n\t\n\t\n\t\n\t\n\t\n\n\n\n\n\n\n\n\n\n\n\n\n\naplayer.bind('durationchange',function(){thetime.text(poodll_op_fetchtime(aplayer));});\n\nvar is_https = M.cfg.wwwroot.indexOf('https:')==0;\nvar is_ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;\nif(is_https && is_ios){\n var xhr = new XMLHttpRequest();\n xhr.onreadystatechange = function(){\n    if (this.readyState == 4 && this.status == 200){\n        var url = window.URL || window.webkitURL;\n        aplayer[0].src = url.createObjectURL(this.response);\n    }\n }\n xhr.open('GET', @@VIDEOURL@@);\n xhr.responseType = 'blob';\n xhr.send();  \n}\n\n\n\n\n//time display function\nfunction poodll_op_sec2time(seconds){\n    var date = new Date(null);\n    date.setSeconds(seconds); \n    return date.toISOString().substr(11, 8);\n}\nfunction poodll_op_fetchtime(theplayer){\n     var a_currenttime= isNaN(theplayer[0].currentTime) ? 0 : theplayer[0].currentTime;\n     var a_duration= isNaN(theplayer[0].duration) ? 0 : theplayer[0].duration;\n     var currenttime = poodll_op_sec2time(Math.floor(a_currenttime));\n     var totaltime = poodll_op_sec2time(Math.floor(a_duration)); \n     var displaytime = currenttime + ' / ' +  totaltime;\n    return displaytime;\n}\n//The timer display\naplayer.on('timeupdate',function(e){\n var displaytime = poodll_op_fetchtime(aplayer)\n thetime.text(displaytime);\n});\n\n//show current time\n thetime.text(poodll_op_fetchtime(aplayer));\n\n\n\n\n\n\n","style":"/* //code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css */\n.poodll_onceplayer{\n\tborder: 3px solid #333;\n    width: 200px;\n    height: 100px;\n    text-align: center;\n    margin-bottom: 100px;\n    margin: 0 auto;\n    padding: 10px;\n    background-color: #333;\n    color: #fff;\n    position: relative;\n}\n.skin{\n\theight: 200px;\n    BACKGROUND-IMAGE: url(http://img.wennermedia.com/social/bruno-mars--press-photo-2---kai-z-feng-885f1d8b-0fc8-4ea6-a613-06ef6ce4e443.jpg);\n    background-repeat: no-repeat;\n    background-size: 100%;\n}\n.poodll_onceplayer_button{\n\tborder: none;\n\twidth: 50px;\n\theight: 42px;\n}\n.custom-pause:before{\n\n    content: \"\\f04c\";\n    font-family: FontAwesome;\n    font-style: normal;\n    font-weight: normal;\n    text-decoration: inherit;\n\n\t\n}\n.vol-but{\n    width: 25px;\n    float: right;\n    padding: 0px;\n}\n.volume-control .vol-up:before{\n\tcontent: \"\\f055\";\n    font-family: FontAwesome;\n    font-style: normal;\n    font-weight: normal;\n    text-decoration: inherit;\n}\n.volume-control .vol-down:before{\n\tcontent: \"\\f056\";\n    font-family: FontAwesome;\n    font-style: normal;\n    font-weight: normal;\n    text-decoration: inherit;\n}\n.meter{\n    width: 130px;\n    height: 15px;\n    border: 1px solid #333;\n    margin-top: 5px;\n    float: right;\n    margin-left: 5px;\n}\n.indicator{\n    height: 100%;\n    width: 20%;\n    background-color: red;\n\tmin-width: 0%;\n\tmax-width: 100%;\n}\n.button-wrapper{\n\twidth: 30%;\n\tfloat: left;\n}\n.state-wrapper{\n\twidth: 70%;\n\tfloat: left;\n}\n.volume-control{\n\tmargin-top: 20px;\n}","dataset":"","datasetvars":"","alternate":"<audio id=\"@@AUTOID@@\" controls=\"controls\">\n  <source src=\"@@VIDEOURL@@\" type=\"audio/mpeg\">\n</audio>","alternateend":""}

wrap long lines