Add play button to signal playability

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';
+            imgWrapEl.style.display = 'none';
             this.annotator = new Annotator(
                 playerEl,
                 null, //"tags.json",
-                this.getAttribute('data-annotation-url'),
+                url_prefix + this.getAttribute('data-annotation-url'),
                 config
             );
         })
@@ -1611,6 +1614,30 @@ class AnnotationPlayer extends HTMLElement {
             overflow: hidden;
         }
 
+        div.imgWrap{
+            cursor:pointer;
+        }
+        div.imgWrap::before {
+            content: '\u25B6';
+            background: rgba(0,0,0,0.5);
+            height: 30px;
+            border-radius: 50%;
+            width: 50px;
+            display: block;
+            position: absolute;
+            left: calc(50% - 15px);
+            top: calc(50% - 15px);
+            text-align: center;
+            line-height: 47px;
+            height: 50px;
+            font-size: 20px;
+            pointer-events: none;
+            cursor:pointer;
+        }
+        div.imgWrap:hover::before{
+            background: rgba(0,0,0,0.2);
+        }
+
         div.play, div.imgWrap {
             padding: 10px;
             background: white;
@@ -1730,6 +1757,7 @@ class AnnotationPlayer extends HTMLElement {
             left: 5%;
             right: 0;
             width: 90%;
+            color:white;
         }
         svg .background {
             fill: white