From 31963968ccf5f4eb1582fea037779fd1204f6cda Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Tue, 21 Dec 2021 14:31:02 +0100 Subject: [PATCH] Separate Playlist --- webserver.py | 19 ++++++++++++-- www/annotate.html | 43 ++++++++++-------------------- www/annotate.js | 47 +++++---------------------------- www/core.css | 57 ++++++++++++++++++++++++++++++++++++++++ www/play.html | 43 ++++++++++++++---------------- www/play.js | 36 ++----------------------- www/playlist.js | 67 +++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 184 insertions(+), 128 deletions(-) create mode 100644 www/core.css create mode 100644 www/playlist.js diff --git a/webserver.py b/webserver.py index ac0f792..910e9d5 100644 --- a/webserver.py +++ b/webserver.py @@ -143,8 +143,23 @@ class AnimationHandler(tornado.web.RequestHandler): self.set_header("Content-Type", "application/json") # filename = self.get_argument("file", None) if filename == '': - names = sorted([f"/files/{name[:-16]}" for name in os.listdir(self.config.storage) if name.endswith('json_appendable')]) - self.write(json.dumps(names)) + files = [] + names = [name for name in os.listdir(self.config.storage) if name.endswith('json_appendable')] + for name in names: + with open(os.path.join(self.config.storage, name), 'r') as fp: + first_line = fp.readline().strip() + if first_line.endswith(','): + first_line = first_line[:-1] + print(first_line) + metadata = json.loads(first_line) + files.append({ + 'name': f"/files/{name[:-16]}", + "time": metadata[0], + "dimensions": [metadata[1], metadata[2]], + }) + + files.sort(key=lambda k: k['time']) + self.write(json.dumps(files)) else: path = os.path.join(self.config.storage,os.path.basename(filename)+".json_appendable") drawing = { diff --git a/www/annotate.html b/www/annotate.html index 24c8d60..d81f2c1 100644 --- a/www/annotate.html +++ b/www/annotate.html @@ -71,29 +71,7 @@ background: rgba(255, 255, 255, 0.7); } - html, - body { - height: 100%; - width: 100%; - margin: 0; - font-family: sans-serif; - } - - .playlist { - position: absolute; - left: 0; - top: 0; - z-index: 50; - } - - .playlist li { - cursor: pointer; - line-height: 1.5; - } - - .playlist li:hover { - color: blue; - } + input[type='range'] { /* position: absolute; @@ -151,7 +129,8 @@ transition: width .3s; pointer-events: none; border: none; - direction: rtl; /* hide behind bar, instead into nothing */ + direction: rtl; + /* hide behind bar, instead into nothing */ } .selected-annotation .tags li.annotation-rm { @@ -230,6 +209,7 @@ } + @@ -238,12 +218,17 @@ + diff --git a/www/annotate.js b/www/annotate.js index 8eba35c..8255886 100644 --- a/www/annotate.js +++ b/www/annotate.js @@ -110,7 +110,7 @@ class StrokeSlice { } class Annotator { - constructor(wrapperEl, tags) { + constructor(wrapperEl, tags, fileurl) { this.wrapperEl = wrapperEl; this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.wrapperEl.appendChild(this.svgEl); @@ -184,7 +184,9 @@ class Annotator { this.strokeGroups[group] = new StrokeGroup(groupEl, this); }); - this.annotations = [] + this.annotations = []; + + this.play(fileurl); } updateAnnotations(save) { @@ -263,41 +265,6 @@ class Annotator { this.updateAnnotations(false); // selects the right tag & highlights the annotation } - // TODO: to separate class which then instantiates a player for the given file - playlist(url) { - const request = new Request(url, { - method: 'GET', - }); - - - fetch(request) - .then(response => response.json()) - .then(data => { - let playlist = this.wrapperEl.querySelector('.playlist'); - if (!playlist) { - playlist = document.createElement('nav'); - playlist.classList.add('playlist'); - this.wrapperEl.appendChild(playlist) - } - else { - playlist.innerHTML = ""; - } - - const listEl = document.createElement("ul"); - for (let fileUrl of data) { - const liEl = document.createElement("li"); - liEl.innerText = fileUrl - liEl.addEventListener('click', (e) => { - this.play(fileUrl); - playlist.style.display = "none"; - }); - listEl.appendChild(liEl); - } - playlist.appendChild(listEl); - // do something with the data sent in the request - }); - } - play(file) { const request = new Request(file, { method: 'GET', @@ -491,11 +458,11 @@ class Annotator { this.updateAnnotations(false); this.setupAudioConfig(); - + // this.playStrokePosition(0, 1); } - setupAudioConfig(){ + setupAudioConfig() { // audio config let audioConfigEl = document.createElement('div'); audioConfigEl.classList.add('audioconfig') @@ -532,7 +499,7 @@ class Annotator { this.audioEl = document.createElement('audio'); - if(this.audioFile) { + if (this.audioFile) { this.audioEl.setAttribute('src', this.audioFile); } this.audioEl.addEventListener('canplaythrough', (ev) => { diff --git a/www/core.css b/www/core.css new file mode 100644 index 0000000..85b7b1c --- /dev/null +++ b/www/core.css @@ -0,0 +1,57 @@ +html, +body { + height: 100%; + width: 100%; + margin: 0; + font-family: sans-serif; +} + +.playlist { + position: absolute; + left: 0; + top: 0; + z-index: 50; + /* font-size: 15px; */ +} + +.playlist::before { + content: 'files'; + padding: 20px; + margin: 20px; + font-size: 300%; + /* display: list-item?; */ +} + +.playlist li { + /* cursor: pointer; */ + list-style: none; + ; + line-height: 1.5; + /* margin: 20px; */ + border-bottom: solid darkgray 1px; + padding: 20px 0; +} + +.playlist li a:hover { + color: blue; +} + +.playlist .links { + display: block; +} + +.playlist li .name { + padding-left: 20px +} + +.playlist .links::before { + content: '['; +} + +.playlist .links::after { + content: ']'; +} + +.playlist .links a { + margin: 0 10px; +} \ No newline at end of file diff --git a/www/play.html b/www/play.html index 1f8d663..ff02709 100644 --- a/www/play.html +++ b/www/play.html @@ -62,37 +62,27 @@ font-family: sans-serif; } - .playlist { + + input[type='range'] { position: absolute; + z-index: 100; + bottom: 0; left: 0; - top: 0; - z-index: 50; + right: 0; + width: 90%; } - .playlist li{ - cursor: pointer; - line-height: 1.5; - } - .playlist li:hover{ - color: blue; - } - - input[type='range']{ + .scrubber { position: absolute; z-index: 100; bottom: 0; - left:0; - right: 0;width: 90%; - } - .scrubber{ - position: absolute; - z-index: 100; - bottom: 0; - left:0; - right: 0;width: 90%; + left: 0; + right: 0; + width: 90%; } + @@ -100,9 +90,16 @@ + diff --git a/www/play.js b/www/play.js index a100cfc..af60efb 100644 --- a/www/play.js +++ b/www/play.js @@ -1,6 +1,6 @@ class Player { - constructor(wrapperEl) { + constructor(wrapperEl, fileurl) { this.wrapperEl = wrapperEl; this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.wrapperEl.appendChild(this.svgEl); @@ -23,40 +23,8 @@ class Player { this.outPointPosition = null; this.currentTime = 0; this.isPlaying = false; - } - playlist(url) { - const request = new Request(url, { - method: 'GET', - }); - - - fetch(request) - .then(response => response.json()) - .then(data => { - let playlist = this.wrapperEl.querySelector('.playlist'); - if (!playlist) { - playlist = document.createElement('nav'); - playlist.classList.add('playlist'); - this.wrapperEl.appendChild(playlist) - } - else { - playlist.innerHTML = ""; - } - - const listEl = document.createElement("ul"); - for (let fileUrl of data) { - const liEl = document.createElement("li"); - liEl.innerText = fileUrl - liEl.addEventListener('click', (e) => { - this.play(fileUrl); - playlist.style.display = "none"; - }); - listEl.appendChild(liEl); - } - playlist.appendChild(listEl); - // do something with the data sent in the request - }); + this.play(fileurl); } play(file) { diff --git a/www/playlist.js b/www/playlist.js new file mode 100644 index 0000000..881fd50 --- /dev/null +++ b/www/playlist.js @@ -0,0 +1,67 @@ +class Playlist { + constructor(wrapperEl, url) { + this.wrapperEl = wrapperEl; + + const request = new Request(url, { + method: 'GET', + }); + + fetch(request) + .then(response => response.json()) + .then(data => { + let playlist = this.wrapperEl.querySelector('.playlist'); + if (!playlist) { + playlist = document.createElement('nav'); + playlist.classList.add('playlist'); + this.wrapperEl.appendChild(playlist) + } + else { + playlist.innerHTML = ""; + } + + const listEl = document.createElement("ul"); + for (let file of data) { + const liEl = document.createElement("li"); + + const dateEl = document.createElement("span"); + dateEl.classList.add('date'); + dateEl.innerText = file.time; + liEl.append(dateEl); + + const nameEl = document.createElement("span"); + nameEl.classList.add('name'); + nameEl.innerText = file.name; + liEl.append(nameEl); + + const linksEl = document.createElement("span"); + linksEl.classList.add('links'); + liEl.append(linksEl); + + const playEl = document.createElement("a"); + playEl.classList.add('play'); + playEl.innerText = "Play"; + playEl.href = location; + playEl.pathname = "play.html"; + playEl.search = "?"+file.name; + linksEl.append(playEl); + + const annotateEl = document.createElement("a"); + annotateEl.classList.add('annotate'); + annotateEl.innerText = "Annotate"; + annotateEl.href = location; + annotateEl.pathname = "annotate.html"; + annotateEl.search = "?"+file.name; + linksEl.append(annotateEl); + + // liEl.addEventListener('click', (e) => { + // this.play(fileUrl); + // playlist.style.display = "none"; + // }); + listEl.appendChild(liEl); + } + playlist.appendChild(listEl); + // do something with the data sent in the request + }); + + } +} \ No newline at end of file