From 2466f12a9ffe7f2bca49385babb057fd50305866 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Thu, 23 Mar 2023 14:23:28 +0100
Subject: [PATCH] Add play button to signal playability

---
 app/www/annotate.js | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/www/annotate.js b/app/www/annotate.js
index ec169b9..a5a5b95 100644
--- a/app/www/annotate.js
+++ b/app/www/annotate.js
@@ -1597,7 +1597,7 @@ class AnnotationPlayer extends HTMLElement {
 
         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",
@@ -1614,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;
@@ -1733,6 +1757,7 @@ class AnnotationPlayer extends HTMLElement {
             left: 5%;
             right: 0;
             width: 90%;
+            color:white;
         }
         svg .background {
             fill: white