Add play button to signal playability

This commit is contained in:
Ruben van de Ven 2023-03-23 14:23:28 +01:00
parent 4bab75ca5b
commit 2466f12a9f

View file

@ -1597,7 +1597,7 @@ class AnnotationPlayer extends HTMLElement {
imgEl.src = url_prefix + this.getAttribute('data-poster-url'); imgEl.src = url_prefix + this.getAttribute('data-poster-url');
imgEl.addEventListener('click', () => { imgEl.addEventListener('click', () => {
imgEl.style.display = 'none'; imgWrapEl.style.display = 'none';
this.annotator = new Annotator( this.annotator = new Annotator(
playerEl, playerEl,
null, //"tags.json", null, //"tags.json",
@ -1614,6 +1614,30 @@ class AnnotationPlayer extends HTMLElement {
overflow: hidden; 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 { div.play, div.imgWrap {
padding: 10px; padding: 10px;
background: white; background: white;
@ -1733,6 +1757,7 @@ class AnnotationPlayer extends HTMLElement {
left: 5%; left: 5%;
right: 0; right: 0;
width: 90%; width: 90%;
color:white;
} }
svg .background { svg .background {
fill: white fill: white