just-animate/dist/just-animate-tools.min.js

_Making Animation Simple_

this.just=this.just||{},this.just.tools=function(n){"use strict"
var t,e,a,o,i,u,d,s=!1,p='<div id="ja-controls">\n   <div id="ja-play">\n      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n         <path d="M3 22v-20l18 10-18 10z"/>\n      </svg>\n   </div>\n   <div id="ja-pause">\n      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n         <path d="M11 22h-4v-20h4v20zm6-20h-4v20h4v-20z"/>\n      </svg>\n   </div>\n   <div id="ja-reverse">\n      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n         <path d="M6 13v4l-6-5 6-5v4h3v2h-3zm9-2v2h3v4l6-5-6-5v4h-3zm-4-6v14h2v-14h-2z"/>\n      </svg>\n   </div>\n   <input id="ja-scrubber" type="range" min="0" step="1" max="1000" value="0" />\n   <input id="ja-seek" type="number" placeholder="0ms" />\n   <div>\n      <button data-ja-rate value=".1">10%</button>\n      <button data-ja-rate value=".5">50%</button>\n      <button data-ja-rate value="1" class="active">100%</button>\n   </div>\n</div>',r="#7AC7C4",c="1px 1px 1px #000000, 0px 0px 1px #0d0d0d",l="24px",b="4px",g="4px",h="#9ba6c0",v="0.2px solid #010101",x='<style style="display:none">\n#ja-controls { \n   position: fixed;\n   bottom: 10px;\n   right: 10px;\n   background-color: rgba(0, 0, 0, .8);\n   border: solid thin rgba(255, 255, 255, .4);\n   border-radius: 5px;\n   padding: 0;\n}\n\n#ja-controls > * { \n   vertical-align: middle;\n   display: inline-block;\n   padding: 2px 5px;\n}\n\n#ja-controls button[data-ja-rate] {\n   background: none;\n   border: solid thin rgb(175, 173, 173);\n   font-size: .8em;\n   border-radius: 4px;\n   cursor: pointer;\n}\n\n#ja-controls button[data-ja-rate]:hover {\n   background-color: black;\n}\n\n#ja-controls button[data-ja-rate].active {\n   background-color: #4f5d7d; \n}\n#ja-controls path {\n    fill: currentColor;\n}\n#ja-play, #ja-pause, #ja-reverse {\n   height: 1em;\n   width: 1em;\n   cursor: pointer;\n}\n#ja-seek {\n   width: 50px;\n   text-align: right; \n   font-size: .8em;\n   color: white;\n   background-color: transparent;\n   border: none;\n   -moz-appearance: textfield;\n} \n\n#ja-seek::-webkit-inner-spin-button, \n#ja-seek::-webkit-outer-spin-button { \n  -webkit-appearance: none; \n  margin: 0; \n}\n\n#ja-controls * { \n   font-family: Arial;\n   font-size: 12pt;\n   color: white; \n}\n#ja-controls > button[data-ja-rate] { \n   font-size: .8em;\n}\n\n#ja-controls > input[type=range] {\n  -webkit-appearance: none;\n  padding: 0;\n  height: 30px;\n  background-color: transparent;\n}\n#ja-controls > input[type=range]:focus {\n  outline: none;\n}\n#ja-controls > input[type=range]::-webkit-slider-runnable-track {\n  width: 100%;\n  height: '+g+";\n  cursor: pointer;\n  animate: 0.2s;\n  box-shadow: "+c+";\n  background: "+r+";\n  border-radius: 1.3px;\n  border: "+v+";\n}\n#ja-controls > input[type=range]::-webkit-slider-thumb {\n  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;\n  border: "+v+";\n  height: "+l+";\n  width: "+b+";\n  border-radius: 3px;\n  background: "+h+";\n  cursor: pointer;\n  -webkit-appearance: none;\n  margin-top: -10px;\n}\n#ja-controls > input[type=range]:focus::-webkit-slider-runnable-track {\n  background: "+r+";\n}\n#ja-controls > input[type=range]::-moz-range-track {\n  width: 100%;\n  height: "+g+";\n  cursor: pointer;\n  animate: 0.2s;\n  box-shadow:  "+c+";\n  background: "+r+";\n  border-radius: 1.3px;\n  border: "+v+";\n}\n#ja-controls > input[type=range]::-moz-range-thumb {\n  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;\n  border: "+v+";\n  height: "+l+";\n  width: "+b+";\n  border-radius: 3px;\n  background: "+h+";\n  cursor: pointer;\n}\n#ja-controls > input[type=range]::-ms-track {\n  width: 100%;\n  height: "+g+";\n  cursor: pointer; \n  background: transparent;\n  border-color: transparent;\n  border-width: 16px 0;\n  color: transparent;\n}\n#ja-controls > input[type=range]::-ms-fill-lower {\n  background: "+"#2a6495"+";\n  border: "+v+";\n  border-radius: 2.6px;\n  box-shadow: "+c+";\n}\n#ja-controls > input[type=range]::-ms-fill-upper {\n  background: "+r+";\n  border: "+v+";\n  border-radius: 2.6px;\n  box-shadow:  "+c+";\n}\n#ja-controls > input[type=range]::-ms-thumb {\n  box-shadow: "+c+";\n  border: "+v+";\n  height: "+l+";\n  width: "+b+";\n  margin-top: 1px;\n  border-radius: 3px;\n  background: #ffffff;\n  cursor: pointer;\n}\n#ja-controls > input[type=range]:focus::-ms-fill-lower {\n  background: "+r+";\n}\n#ja-controls > input[type=range]:focus::-ms-fill-upper {\n  background: "+r+";\n}\n\n</style>"
function j(n){return document.getElementById(n)}function m(n,t,r){n.addEventListener(t,r)}function f(n){n=Math.floor(+n),a.value=n+"",e.value=n+""}return n.player=function(n){t||(function(){var n=document.createElement("div")
n.id="ja-controls",n.innerHTML=x+p,document.body.appendChild(n),e=j("ja-scrubber"),a=j("ja-seek"),o=j("ja-play"),i=j("ja-pause"),u=j("ja-reverse"),a.value="0"
var t=function(n){var t=+n.currentTarget.value
f(d.currentTime=t)}
m(e,"input",t),m(e,"change",t),m(a,"mousedown",function(){d&&d.pause()}),m(e,"mousedown",function(){d&&(3===d.state&&(s=!0),d.pause())}),m(e,"mouseup",function(){d&&s&&(s=!1,d.play())}),m(a,"input",function(n){var t=+n.currentTarget.value
f(d.currentTime=t)}),m(o,"click",function(){d&&d.play()}),m(i,"click",function(){d&&d.pause()}),m(u,"click",function(){d&&d.reverse()})
var r=[].slice.call(document.querySelectorAll("#ja-controls [data-ja-rate]"))
r.forEach(function(t){m(t,"click",function(){if(r.forEach(function(n){return n.classList.remove("active")}),t.classList.add("active"),d){var n=d.playbackRate<0?-1:1
d.playbackRate=+t.value*n}})})}(),t=!0),d&&d.off("update",f),e.setAttribute("max",String(n.duration)),e.value=String(n.currentTime),n.on("update",f),n.on("config",function(){e.setAttribute("max",String(n.duration))}),d=n},n}({})