Compare commits

..

No commits in common. "2466f12a9ffe7f2bca49385babb057fd50305866" and "23283212d6d93251dc18ed106dda3dc42a5b397c" have entirely different histories.

View file

@ -147,7 +147,6 @@ 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_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 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 autoplay: config && config.hasOwnProperty('autoplay') ? config.autoplay : false, // immediately start playback
url_prefix: config && config.hasOwnProperty('url_prefix') ? config.url_prefix : '',
} }
this.formatter = wNumb({ this.formatter = wNumb({
@ -773,10 +772,10 @@ class Annotator extends EventTarget {
if ((metadata && metadata.hasOwnProperty('audio')) || (drawing.hasOwnProperty('audio') && drawing.audio)) { if ((metadata && metadata.hasOwnProperty('audio')) || (drawing.hasOwnProperty('audio') && drawing.audio)) {
if (metadata && metadata.hasOwnProperty('audio')) { if (metadata && metadata.hasOwnProperty('audio')) {
this.audioFile = this.config.url_prefix + metadata.audio.file this.audioFile = metadata.audio.file
this.audioOffset = Number.parseFloat(metadata.audio.offset); this.audioOffset = Number.parseFloat(metadata.audio.offset);
} else { } else {
this.audioFile = this.config.url_prefix + drawing.audio.file this.audioFile = drawing.audio.file
this.audioOffset = Number.parseFloat(drawing.audio.offset); this.audioOffset = Number.parseFloat(drawing.audio.offset);
} }
this._currentTimeMs = this.audioOffset < 0 ? this.audioOffset * 1000 : 0; this._currentTimeMs = this.audioOffset < 0 ? this.audioOffset * 1000 : 0;
@ -1585,23 +1584,21 @@ class AnnotationPlayer extends HTMLElement {
imgWrapEl.appendChild(imgEl); imgWrapEl.appendChild(imgEl);
const playerEl = document.createElement('div'); const playerEl = document.createElement('div');
const url_prefix = this.hasAttribute('data-url-prefix') ? this.getAttribute('data-url-prefix') + '/' : '';
const config = { const config = {
is_player: true, is_player: true,
crop: this.hasAttribute('data-crop') ? this.getAttribute('data-crop') : null, crop: this.hasAttribute('data-crop') ? this.getAttribute('data-crop') : null,
autoplay: true, autoplay: true,
url_prefix: url_prefix,
} }
imgEl.src = url_prefix + this.getAttribute('data-poster-url'); imgEl.src = this.getAttribute('data-poster-url');
imgEl.addEventListener('click', () => { imgEl.addEventListener('click', () => {
imgWrapEl.style.display = 'none'; imgEl.style.display = 'none';
this.annotator = new Annotator( this.annotator = new Annotator(
playerEl, playerEl,
null, //"tags.json", null, //"tags.json",
url_prefix + this.getAttribute('data-annotation-url'), this.getAttribute('data-annotation-url'),
config config
); );
}) })
@ -1614,30 +1611,6 @@ 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;
@ -1757,7 +1730,6 @@ 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