r/diversions
1
0
Fork 0
Code Pull requests Releases Activity

No pause when finished tagging. Resume where left of with tagging and playback. Two subs. Better playback duration.

Browse source
This commit is contained in:
Ruben van de Ven 2020-06-19 16:45:30 +02:00
parent 9eef55db16
commit 67945cc32f
2 changed files with 154 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
index.html
View file

@ -84,6 +84,22 @@
left: calc(50% - 150px);
font-size: 30px;
}
#resetButton, #resumeButton{
display:none;
}
body.finished #resetButton{
display:inline;
}
body.finished.paused #resumeButton{
display:block;
}
#nextButton{
}
body.finished #nextButton{
display:none;
}
</style>
@ -109,20 +125,28 @@
<!-- contents of template will come here through the javascript -->
</div>
<input type='button' value='Next image' id='nextButton'>
<input type='button' value='Restart weighing' id='resetButton'>
</div>
<!-- button is needed because audio cannot auto-start without a user clicking on the page -->
<input type='button' value='Resume interview' id='resumeButton'>
<audio id='interview'
src="/interview/interview-with-ellen.mp3">
<track default kind="captions"
<track kind="captions"
srclang="en"
src="/interview/interview-with-ellen_v3.mp3.vtt"/>
<track default kind="captions"
srclang="nl"
src="/interview/interview-with-ellen_v3.mp3 copy.vtt"/>
</audio>
</div>
<div id='subtitles'>
<div id='sub_nl'></div>
<div id='sub_en'></div>
</div>
<div id='workmsg'>

129
parade.js
View file

@ -6,7 +6,8 @@ var config = {
distanceFactor: 20, // distance between the shapes
startOffset: 0.001, // starting position
shapeWidth: 100, // 8 shape of animation: width
shapeHeight: 1300 // 8 shape of animation: height;
shapeHeight: 1300, // 8 shape of animation: height;
playDuration: 16, // seconds. how long should audio play after dragging/pressing next. Something like audio duration / nr of images. Note that if everything is sorted interview will just continue;
}
// polyfill
@ -35,7 +36,6 @@ fetch(request)
// loaded data from json, initialise interface
const canvas = document.getElementById("renderCanvas");
parade = new Parade(canvas, data['image'], config);
parade.createScene();
// parade.scene.debugLayer.show();
}).catch(error => {
console.error(error);
@ -50,6 +50,7 @@ class Parade {
this.canvasEl = canvasEl;
this.engine = new BABYLON.Engine(canvasEl, true); // create 3d engine
this.isPlaying = false;
this.t = 0; // playback timer
// initialise image objects:
this.images = [];
@ -80,6 +81,7 @@ class Parade {
this.setupSubtitles();
this.setupSorter();
this.restoreTime();
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
@ -88,26 +90,47 @@ class Parade {
//Register a render loop to repeatedly render the scene
this.engine.runRenderLoop(this.renderLoop.bind(this));
this.createScene();
// browsers block auto-play of audio
// if(this.imagesToSort.length < 1){
// this.play();
// }
}
setupSubtitles() {
this.audioEl = document.getElementById('interview'); // audio player
this.subtitleEl = document.getElementById('subtitles'); // the subtitle div
this.trackEl = this.audioEl.querySelector('track'); // the subtitle track
this.subtitleEls = {
'en': document.getElementById('sub_en'),
'nl': document.getElementById('sub_nl'),
};
this.trackEls = this.audioEl.querySelectorAll('track'); // the subtitle track
this.timeEl = document.getElementById('time'); // the subtitle track
// set up subtitles:
this.trackEl.addEventListener("cuechange", (event) => {
for(let trackEl of this.trackEls){
trackEl.addEventListener("cuechange", (event) => {
let lang = event.srcElement.srclang;
let cues = event.target.track.activeCues;
let content = "";
for(let cue of cues) {
content += "<p>"+cue.text+"</p>";
}
this.subtitleEl.innerHTML = content;
this.subtitleEls[lang].innerHTML = content;
});
}
for(let track of this.audioEl.textTracks){
// by default only one (or none) is set to showing.
// for some reason setting it on trackEl doesn't work, while this does the trick.
track.mode = 'showing';
}
this.audioEl.addEventListener('timeupdate', this.updateTimestring.bind(this));
this.audioEl.addEventListener('timeupdate', this.storeTime.bind(this));
this.updateTimestring();
}
@ -123,25 +146,87 @@ class Parade {
this.timeEl.innerHTML = timestring;
}
storeTime() {
// do we use this.t or audioEl...?
localStorage.setItem('playhead', String(this.audioEl.currentTime))
}
restoreTime() {
let time = localStorage.getItem('playhead');
this.audioEl.addEventListener('playing', (e) => {
if(!this.isPlaying) this.play(); // make sure we're playing.
});
// causes odd glitch
// this.audioEl.addEventListener('pause', (e) => {
// if(this.isPlaying) this.pause(true); // make sure we're playing.
// });
this.audioEl.addEventListener('seeking',(e)=>{
this.t = parseInt(e.target.currentTime * 1000);
console.log('restore timer',this.t,e);
});
if(!time) return;
time = parseFloat(time);
this.audioEl.currentTime = time;
}
setupSorter() {
this.sorterTemplate = document.getElementById('annotationContentTemplate');
this.sorter = document.getElementById('annotation');
this.pauseTimeout = null;
this.imagesToSort = this.images.slice(); // we will keep track of images that needs weighing (clone by reference)
let imagesToSort = localStorage.getItem('imagesToSort');
if(imagesToSort) {
this.imagesToSort = JSON.parse(imagesToSort);
}
// else or invalid:
if(!imagesToSort || this.imagesToSort.length > this.images.length) {
console.log('createimages to sort')
this.imagesToSort = []; // we will keep track of images that needs weighing
for (let index = 0; index < this.images.length; index++) {
this.imagesToSort[index] = index;
}
}
let nextButton = document.getElementById('nextButton');
nextButton.addEventListener('click', this.nextSorterImage.bind(this));
let resetButton = document.getElementById('resetButton');
resetButton.addEventListener('click', this.resetSortedImages.bind(this));
let resumeButton = document.getElementById('resumeButton');
resumeButton.addEventListener('click', this.play.bind(this));
// set maximum to last image index
this.sorterTemplate.content.querySelector('.weight').max = this.images.length - 1;
this.changeSorterImage();
}
resetSortedImages() {
this.imagesToSort = []; // we will keep track of images that needs weighing
for (let index = 0; index < this.images.length; index++) {
this.imagesToSort[index] = index;
}
this.changeSorterImage(); // display an image to sort
this.play(); // make sure playback timer gets set
}
changeSorterImage() {
let sorterContent = this.sorter.querySelector('#annotationContent');
if(!this.imagesToSort.length) {
document.body.classList.add('finished');
sorterContent.innerHTML = "";
this.audioEl.controls = true;
return;
} else {
document.body.classList.remove('finished');
this.audioEl.controls = false;
}
// pick random image
this.imageToSort = this.imagesToSort[Math.floor(Math.random()*this.imagesToSort.length)];
// this.imageToSort = this.imagesToSort[0]; // always the first instead of random
this.imageIdToSort = this.imagesToSort[Math.floor(Math.random()*this.imagesToSort.length)];
this.imageToSort = this.images[this.imageIdToSort];
let clone = this.sorterTemplate.content.cloneNode(true);
let imgEl = clone.querySelector(".img");
@ -156,7 +241,6 @@ class Parade {
weightEl.value = parseInt(this.imageToSort.position); // don't use weight, but the image's actual position
weightEl.addEventListener('input', this.changeSorterWeight.bind(this));
let sorterContent = this.sorter.querySelector('#annotationContent');
sorterContent.innerHTML = "";
sorterContent.appendChild(clone);
}
@ -190,8 +274,10 @@ class Parade {
nextSorterImage() {
this.play();
let i = this.imagesToSort.indexOf(this.imageToSort);
this.imagesToSort.splice(i, 1); // remove from images to position
let idx = this.imagesToSort.indexOf(this.imageIdToSort);
this.imagesToSort.splice(idx, 1); // remove from images to position
// store the array
localStorage.setItem('imagesToSort', JSON.stringify(this.imagesToSort));
this.changeSorterImage();
}
@ -199,23 +285,32 @@ class Parade {
play() {
// play audio for n seconds:
// extend timeout if it's already playing
const duration = 10; // seconds
const duration = this.config.playDuration; // seconds
if(this.pauseTimeout) {
clearTimeout(this.pauseTimeout);
}
if(this.imagesToSort.length > 0){
this.pauseTimeout = setTimeout(() => {
this.pause();
}, duration * 1000);
} else {
// don't pause anymore when everything is sorted.
this.pauseTimeout = null;
}
this.audioEl.play();
document.body.classList.remove('paused');
this.isPlaying = true;
}
pause() {
pause(dopause) {
if(this.imagesToSort.length < 1 && (typeof dopause == 'undefined' || false)){
console.log('do not pause');
return;
}
// pause audio and animation
this.audioEl.pause();
document.body.classList.add('paused');
this.isPlaying = false;
this.audioEl.pause();
}
renderLoop() {
@ -237,6 +332,8 @@ class Parade {
if(this.isPlaying) {
// todo: make it come to a slow halt, instead of sudden;
dt = n - this.lastRenderTime;
if(dt < 0)
console.log('change',dt);
this.t += dt;
}
this.lastRenderTime = n; // also increment when paused;
@ -270,7 +367,6 @@ class Parade {
// This attaches the camera to the canvas
camera.attachControl(this.canvasEl, true);
let radius = 60;
for(let i in this.images) {
// create the Meshes with the images in the scene
this.images[i].makeMesh(this.scene);
@ -278,7 +374,6 @@ class Parade {
this.lastRenderTime = window.performance.now();
this.t = 0; // playback timer
return this.scene;
}
}