From 4bab75ca5bd1ea701a57492bc64734894a4eb5da Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Thu, 23 Mar 2023 14:22:53 +0100
Subject: [PATCH] Optional url prefix to put audio and poster into subdir

---
 app/www/annotate.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/www/annotate.js b/app/www/annotate.js
index e3c3f83..ec169b9 100644
--- a/app/www/annotate.js
+++ b/app/www/annotate.js
@@ -147,6 +147,7 @@ class Annotator extends EventTarget {
             crop_to_fit: config && config.hasOwnProperty('crop_to_fit') ? config.crop_to_fit : false, // DEPRECATED don't animate viewport, but show the whole drawing
             crop: config && config.hasOwnProperty('crop') && Object.values(CropOptions).indexOf(config.crop) !== -1 ? config.crop : CropOptions.Fit_Selection, // don't animate viewport, but show the whole drawing
             autoplay: config && config.hasOwnProperty('autoplay') ? config.autoplay : false, // immediately start playback 
+            url_prefix: config && config.hasOwnProperty('url_prefix') ? config.url_prefix : '',
         }
 
         this.formatter = wNumb({
@@ -772,10 +773,10 @@ class Annotator extends EventTarget {
 
         if ((metadata && metadata.hasOwnProperty('audio')) || (drawing.hasOwnProperty('audio') && drawing.audio)) {
             if (metadata && metadata.hasOwnProperty('audio')) {
-                this.audioFile = metadata.audio.file
+                this.audioFile = this.config.url_prefix + metadata.audio.file
                 this.audioOffset = Number.parseFloat(metadata.audio.offset);
             } else {
-                this.audioFile = drawing.audio.file
+                this.audioFile = this.config.url_prefix + drawing.audio.file
                 this.audioOffset = Number.parseFloat(drawing.audio.offset);
             }
             this._currentTimeMs = this.audioOffset < 0 ? this.audioOffset * 1000 : 0;
@@ -1584,21 +1585,23 @@ class AnnotationPlayer extends HTMLElement {
         imgWrapEl.appendChild(imgEl);
 
         const playerEl = document.createElement('div');
+        const url_prefix = this.hasAttribute('data-url-prefix') ? this.getAttribute('data-url-prefix') + '/' : '';
 
         const config = {
             is_player: true,
             crop: this.hasAttribute('data-crop') ? this.getAttribute('data-crop') : null,
             autoplay: true,
+            url_prefix: url_prefix,
         }
 
 
-        imgEl.src = this.getAttribute('data-poster-url');
+        imgEl.src = url_prefix + this.getAttribute('data-poster-url');
         imgEl.addEventListener('click', () => {
             imgEl.style.display = 'none';
             this.annotator = new Annotator(
                 playerEl,
                 null, //"tags.json",
-                this.getAttribute('data-annotation-url'),
+                url_prefix + this.getAttribute('data-annotation-url'),
                 config
             );
         })