dist/waveform-playlist/css/main.css

@@ -104,7 +104,8 @@
     text-align: center; }
   .playlist .annotations .annotation-box {
     border: 2px dashed grey;
-    padding: 0 10px; }
+    padding: 0 10px;
+    box-sizing: border-box; }
     .playlist .annotations .annotation-box .resize-handle {
       background: grey;
       opacity: 0.3;

ghpages/_sass/_playlist.scss

@@ -165,6 +165,7 @@
     .annotation-box {
       border: 2px dashed grey;
       padding: 0 10px;
+      box-sizing: border-box;
 
       .resize-handle {
         background: grey;

package.json

@@ -54,7 +54,9 @@
     "fade-maker": "^1.0.3",
     "inline-worker": "^1.1.0",
     "lodash.assign": "^4.0.0",
+    "lodash.clamp": "^4.0.3",
     "lodash.defaults": "^4.0.0",
+    "lodash.defaultsdeep": "^4.6.1",
     "lodash.forown": "^4.0.0",
     "mucss": "^1.1.5",
     "uuid": "^2.0.1",
@@ -65,14 +67,15 @@
     "clean": "rm -Rf dist && rm -Rf lib && rm -Rf styles",
     "styles": "mkdir -p styles && cp ghpages/_sass/_playlist.scss styles/playlist.scss",
     "compile": "babel src --out-dir lib",
+    "compile-watch": "babel src --out-dir lib -w",
     "jekyll": "jekyll build -s ghpages -d dist/waveform-playlist",
     "jekyll:dev": "jekyll build -s ghpages -d dist/waveform-playlist --watch &",
     "ghpages": "gh-pages --repo https://$GH_TOKEN@github.com/naomiaro/waveform-playlist.git -d dist/waveform-playlist",
     "build": "npm run clean && npm run jekyll && webpack",
     "preversion": "npm run clean",
     "version": "npm run build && git add -A dist",
     "postversion": "git push && git push --tags",
-    "prepublish": "npm run compile && npm run styles",
+    "prepare": "npm run compile && npm run styles",
     "webpack:server": "node_modules/webpack-dev-server/bin/webpack-dev-server.js --content-base dist/ --colors --host 0.0.0.0 --inline",
     "start": "npm run webpack:server",
     "dev": "npm run jekyll:dev && npm run webpack:server",

src/Playlist.js

@@ -1,3 +1,4 @@
+import _clamp from 'lodash.clamp';
 import _defaults from 'lodash.defaults';
 
 import h from 'virtual-dom/h';
@@ -146,6 +147,7 @@ export default class {
     this.annotationList = new AnnotationList(
       this,
       config.annotations,
+      config.annotationFormat,
       config.controls,
       config.editable,
       config.linkEndpoints,
@@ -173,17 +175,11 @@ export default class {
       this.drawRequest();
     });
 
-    ee.on('select', (start, end, track) => {
-      if (this.isPlaying()) {
-        this.lastSeeked = start;
-        this.pausedAt = undefined;
-        this.restartPlayFrom(start);
-      } else {
-        // reset if it was paused.
-        this.seek(start, end, track);
-        this.ee.emit('timeupdate', start);
-        this.drawRequest();
-      }
+    ee.on('select', (chosenStart, chosenEnd, track) => {
+      const start = (chosenStart !== undefined) ? _clamp(chosenStart, 0, this.duration) : undefined;
+      const end = (chosenEnd !== undefined) ? _clamp(chosenEnd, 0, this.duration) : undefined;
+      this.setTimeSelection(start, end);
+      this.seek(start, end, track);
     });
 
     ee.on('startaudiorendering', (type) => {
@@ -592,7 +588,11 @@ export default class {
   *   returns the current point of time in the playlist in seconds.
   */
   getCurrentTime() {
-    const cursorPos = this.lastSeeked || this.pausedAt || this.cursor;
+    const cursorPos = (this.lastSeeked !== undefined)
+      ? this.lastSeeked
+      : (this.pausedAt !== undefined)
+        ? this.pausedAt
+        : this.cursor;
 
     return cursorPos + this.getElapsedTime();
   }
@@ -622,10 +622,14 @@ export default class {
     const selected = this.getTimeSelection();
     const playoutPromises = [];
 
-    const start = startTime || this.pausedAt || this.cursor;
+    const start = (startTime !== undefined)
+      ? startTime
+      : (this.pausedAt !== undefined)
+        ? this.pausedAt
+        : this.cursor;
     let end = endTime;
 
-    if (!end && selected.end !== selected.start && selected.end > start) {
+    if (end === undefined && selected.end !== selected.start && selected.end > start) {
       end = selected.end;
     }
 
@@ -712,6 +716,7 @@ export default class {
       this.duration = 0;
       this.scrollLeft = 0;
 
+      this.setTimeSelection(0, 0);
       this.seek(0, 0, undefined);
     });
   }
@@ -751,10 +756,11 @@ export default class {
       // reset if it was paused.
       this.setActiveTrack(track || this.tracks[0]);
       this.pausedAt = start;
-      this.setTimeSelection(start, end);
       if (this.getSeekStyle() === 'fill') {
         this.playbackSeconds = start;
       }
+      this.ee.emit('timeupdate', start);
+      this.drawRequest();
     }
   }
 
@@ -765,7 +771,7 @@ export default class {
   updateEditor(cursor) {
     const currentTime = this.ac.currentTime;
     const selection = this.getTimeSelection();
-    const cursorPos = cursor || this.cursor;
+    const cursorPos = (cursor !== undefined) ? cursor : this.cursor;
     const elapsed = currentTime - this.lastDraw;
 
     if (this.isPlaying()) {
@@ -791,7 +797,7 @@ export default class {
         this.lastSeeked = undefined;
         this.setState(this.getState());
 
-        this.playbackSeconds = 0;
+        this.playbackSeconds = this.getTimeSelection().start;
         this.draw(this.render());
       }, 0);
     }

src/Track.js

@@ -407,10 +407,11 @@ export default class {
       }
     }
 
+    const left = playbackX - 0.5; // subtract half the cursor's width to center it.
     const waveformChildren = [
       h('div.cursor', {
         attributes: {
-          style: `position: absolute; width: 1px; margin: 0; padding: 0; top: 0; left: ${playbackX}px; bottom: 0; z-index: 5;`,
+          style: `position: absolute; width: 1px; margin: 0; padding: 0; top: 0; left: ${left}px; bottom: 0; z-index: 5;`,
         },
       }),
     ];
@@ -525,10 +526,18 @@ export default class {
 
     // draw cursor selection on active track.
     if (data.isActive === true) {
-      const cStartX = secondsToPixels(data.timeSelection.start, data.resolution, data.sampleRate);
-      const cEndX = secondsToPixels(data.timeSelection.end, data.resolution, data.sampleRate);
-      const cWidth = (cEndX - cStartX) + 1;
-      const cClassName = (cWidth > 1) ? '.segment' : '.point';
+      const isPoint = data.timeSelection.start === data.timeSelection.end;
+      let cStartX = secondsToPixels(data.timeSelection.start, data.resolution, data.sampleRate);
+      let cClassName, cWidth;
+      if (isPoint) {
+        cClassName = '.point';
+        cWidth = 1;
+        cStartX -= 0.5;
+      } else {
+        cClassName = '.segment';
+        const cEndX = secondsToPixels(data.timeSelection.end, data.resolution, data.sampleRate);
+        cWidth = cEndX - cStartX;
+      }
 
       waveformChildren.push(h(`div.selection${cClassName}`, {
         attributes: {

src/annotation/AnnotationList.js

@@ -7,15 +7,27 @@ import DragInteraction from '../interaction/DragInteraction';
 import ScrollTopHook from './render/ScrollTopHook';
 import timeformat from '../utils/timeformat';
 
+const annotationConverters = {
+  'aeneas': { input: inputAeneas, output: outputAeneas },
+  'raw': { input: a => a, output: a => a },
+}
+
 class AnnotationList {
-  constructor(playlist, annotations, controls = [], editable = false,
+  constructor(playlist, annotations, annotationFormat, controls = [], editable = false,
     linkEndpoints = false, isContinuousPlay = false) {
     this.playlist = playlist;
     this.resizeHandlers = [];
     this.editable = editable;
-    this.annotations = annotations.map(a =>
-      // TODO support different formats later on.
-      inputAeneas(a),
+
+    const converters = annotationConverters[annotationFormat];
+    if (converters === undefined) {
+      throw new Error(`Unknown annotation format ${annotationFormat}`);
+    }
+    this.inputAnnotation = converters.input;
+    this.outputAnnotation = converters.output;
+
+    this.annotations = annotations.map(annotation =>
+      this.inputAnnotation(annotation),
     );
     this.setupInteractions();
 
@@ -109,7 +121,7 @@ class AnnotationList {
   }
 
   export() {
-    const output = this.annotations.map(a => outputAeneas(a));
+    const output = this.annotations.map(a => this.outputAnnotation(a));
     const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(output))}`;
     const a = document.createElement('a');
 
@@ -181,15 +193,26 @@ class AnnotationList {
         const sampleRate = this.playlist.sampleRate;
         const pixPerSec = sampleRate / samplesPerPixel;
         const pixOffset = secondsToPixels(this.playlist.scrollLeft, samplesPerPixel, sampleRate);
-        const left = Math.floor((note.start * pixPerSec) - pixOffset);
-        const width = Math.ceil((note.end * pixPerSec) - (note.start * pixPerSec));
+        let left = note.start * pixPerSec - pixOffset;
+        let className;
+        let width;
+        if (note.end !== undefined && note.end !== 0 && note.end !== note.start) {
+          className = '.segment-annotation';
+          width = note.end * pixPerSec - note.start * pixPerSec;
+        } else {
+          className = '.point-annotation';
+          width = 30;
+          left -= 15;
+        }
+        const element = note.elementType || 'div';
 
-        return h('div.annotation-box',
+        return h(`${element}.annotation-box${className}`,
           {
             attributes: {
               style: `position: absolute; height: 30px; width: ${width}px; left: ${left}px`,
               'data-id': note.id,
             },
+            ...note.elementAttributes,
           },
           [
             this.renderResizeLeft(i),

src/annotation/input/aeneas.js

@@ -14,7 +14,7 @@ import uuid from 'uuid';
 
 export default function (aeneas) {
   const annotation = {
-    id: aeneas.id || uuid.v4(),
+    id: (aeneas.id !== undefined) ? aeneas.id : uuid.v4(),
     start: Number(aeneas.begin) || 0,
     end: Number(aeneas.end) || 0,
     lines: aeneas.lines || [''],

src/app.js

@@ -1,4 +1,4 @@
-import _assign from 'lodash.assign';
+import _defaultsDeep from 'lodash.defaultsdeep';
 import createElement from 'virtual-dom/create-element';
 import EventEmitter from 'event-emitter';
 import Playlist from './Playlist';
@@ -37,6 +37,7 @@ export function init(options = {}, ee = EventEmitter()) {
     zoomLevels: [512, 1024, 2048, 4096],
     annotationList: {
       annotations: [],
+      annotationFormat: 'aeneas',
       controls: [],
       editable: false,
       linkEndpoints: false,
@@ -45,7 +46,7 @@ export function init(options = {}, ee = EventEmitter()) {
     isAutomaticScroll: false,
   };
 
-  const config = _assign(defaults, options);
+  const config = _defaultsDeep(options, defaults);
   const zoomIndex = config.zoomLevels.indexOf(config.samplesPerPixel);
 
   if (zoomIndex === -1) {

src/render/ScrollHook.js

@@ -15,7 +15,9 @@ export default class {
 
       if (playlist.isAutomaticScroll) {
         const rect = node.getBoundingClientRect();
-        const cursorRect = node.querySelector('.cursor').getBoundingClientRect();
+        const cursor = node.querySelector('.cursor');
+        if (!cursor) return;
+        const cursorRect = cursor.getBoundingClientRect();
 
         if (cursorRect.right > rect.right || cursorRect.right < 0) {
           playlist.scrollLeft = playlist.playbackSeconds;