diff --git a/embed/core.js b/embed/core.js index 64ad322d..565a99da 100644 --- a/embed/core.js +++ b/embed/core.js @@ -298,8 +298,11 @@ MistPlayer.prototype.buildMistControls = function(){ var pos0 = sound.getBoundingClientRect().top - parseInt(style.borderTopWidth,10); var perc = (ypos - pos0 * zoom) / sound.offsetHeight / zoom; - var secs = Math.max(0,perc) * ele.duration; - return 1 - Math.min(1,Math.max(0,perc)); + + perc = 1 - Math.min(1,Math.max(0,perc)); //linear range between 0 and 1 + perc = -1 * Math.pow((1-perc),2) + 1; //transform to quadratic range between 0 and 1 + + return perc; } volume.className = 'volume'; sound.title = 'Volume'; @@ -313,6 +316,7 @@ MistPlayer.prototype.buildMistControls = function(){ }; var mouseup = function(e){ document.removeEventListener('mousemove',mousemove); + controls.removeEventListener('mousemove',mousemove); document.removeEventListener('touchmove',mousemove); document.removeEventListener('mouseup',mouseup); document.removeEventListener('touchend',mouseup); @@ -322,6 +326,7 @@ MistPlayer.prototype.buildMistControls = function(){ catch (e) {} }; document.addEventListener('mousemove',mousemove); + controls.addEventListener('mousemove',mousemove); //this one is added because the controls hiding mechanism stops propagation to the document document.addEventListener('touchmove',mousemove); document.addEventListener('mouseup',mouseup); document.addEventListener('touchend',mouseup); @@ -510,7 +515,9 @@ MistPlayer.prototype.buildMistControls = function(){ play.setAttribute('data-state','paused'); }); ele.addEventListener('volumechange',function(){ - volume.style.height = ele.volume*100+'%'; + //-1 * Math.pow((1-sound.getPos(e.clientY)),2) + 1; //transform to quadratic range between 0 and 1 + var vol = 1 - Math.pow(1-ele.volume,0.5); + volume.style.height = vol*100+'%'; //transform back from quadratic if (ele.volume == 0) { speaker.setAttribute('data-muted',''); } @@ -615,6 +622,9 @@ MistPlayer.prototype.askNextCombo = function(msg){ me.nextCombo(); } var button = document.createElement('button'); + var i = document.createElement('div'); //a css countdown clock for 10sec + i.className = 'countdown10'; + button.appendChild(i); var t = document.createTextNode('Reload this player'); button.appendChild(t); err.appendChild(button); @@ -628,6 +638,12 @@ MistPlayer.prototype.askNextCombo = function(msg){ this.target.appendChild(err); this.element.style.opacity = '0.2'; + + //after 10 seconds, reload the player + err.timeOut = setTimeout(function(){ + button.click(); + },10e3); + }; MistPlayer.prototype.cancelAskNextCombo = function(){ if (this.errorstate) { @@ -637,6 +653,7 @@ MistPlayer.prototype.cancelAskNextCombo = function(){ var err = this.target.querySelector('.error'); if (err) { this.target.removeChild(err); + if (err.timeOut) { clearTimeout(err.timeOut); } } } }; @@ -1152,9 +1169,14 @@ function mistPlay(streamName,options) { element.checkStalledTimeout = false; player.cancelAskNextCombo(); } + if (element.checkStalledTimeout) { + clearTimeout(element.checkStalledTimeout); + element.checkStalledTimeout = false; + player.cancelAskNextCombo(); + } }; - //element.addEventListener('progress',progress,true); - //element.addEventListener('playing',progress,true); + element.addEventListener('progress',progress,true); + element.addEventListener('playing',progress,true); element.addEventListener('play',function(){ player.paused = false; if ((!element.checkProgressTimeout) && (player.element) && ('currentTime' in player.element)) { @@ -1162,11 +1184,10 @@ function mistPlay(streamName,options) { var lasttime = player.element.currentTime; element.checkProgressTimeout = setInterval(function(){ var newtime = player.element.currentTime; - progress(); if (newtime == 0) { return; } - var progressed = newtime - lasttime; + var progress = newtime - lasttime; lasttime = newtime; - if (progressed == 0) { + if (progress == 0) { var msg = 'There should be playback but nothing was played'; var r = { type: 'playback', @@ -1188,8 +1209,8 @@ function mistPlay(streamName,options) { return; } player.cancelAskNextCombo(); - if (progressed < 1) { - var msg = 'It seems playback is lagging (progressed '+Math.round(progressed*100)/100+'/2s)' + if (progress < 4) { + var msg = 'It seems playback is lagging (progressed '+Math.round(progress*100)/100+'/8s)' player.addlog(msg); player.report({ type: 'playback', @@ -1197,7 +1218,7 @@ function mistPlay(streamName,options) { }); return; } - },2e3); + },8e3); } },true); element.addEventListener('pause',function(){ diff --git a/embed/mist.css b/embed/mist.css index 71fddc0c..7aa74c8e 100644 --- a/embed/mist.css +++ b/embed/mist.css @@ -350,6 +350,39 @@ transform: rotate(360deg); } } + +.countdown10 { + height: 1em; + width: 1em; + display: inline-block; + vertical-align: bottom; + border-radius: 50%; + background-image: linear-gradient(to right,black 50%,#ddd 0); + border: 1px solid black; + margin: 0 0.2em; + opacity: 0; + animation: appear 10s step-start 1; +} +.countdown10:before { + content: ''; + display: block; + margin-left: 50%; + height: 100%; + border-radius: 0 100% 100% 0 / 50%; + background-color: black; + transform-origin: 0 50%; + animation: rotate 5s linear 2, bg 10s step-end 1; +} +@keyframes rotate { + to { transform: rotate(.5turn); } +} +@keyframes bg { + 50% { background: #ddd; } +} +@keyframes appear { + to { opacity: 1; } +} + .video-js .vjs-big-play-button:before, .video-js .vjs-control:before, .video-js .vjs-modal-dialog, .vjs-modal-dialog .vjs-modal-dialog-content { position: absolute; top: 0;