VideoAnnotator

import '@blukavantui/community/theme.css'

import {createVideoAnnotator} from '@blukavantui/pro/video-annotator';
import type {BluVideoAnnotation} from '@blukavantui/pro/video-annotator';
import '@blukavantui/community/theme.css';
import '@blukavantui/pro/video-annotator.css';
export function mount(host:HTMLElement) {
  // Supply your own licensed, same-origin video and optional WebVTT captions.
  const target=document.createElement('div'),reload=document.createElement('button');
  reload.textContent='Reload saved review';reload.type='button';host.append(reload,target);
  const storageKey='my-app:video-review';let revision=0;
  let saved:BluVideoAnnotation[]=JSON.parse(localStorage.getItem(storageKey)||'[]');
  const component=createVideoAnnotator(target,{
    SourceUrl:'/media/review.mp4',PosterUrl:'/media/review.jpg',Title:'Creative review',
    Annotations:saved,Resources:[{Key:'maya',Name:'Maya Chen',Position:'Creative lead',Color:'Purple'}],CurrentUserKey:'maya',ShowPopups:true,
  },{
    SaveRequested:(requestId,annotations)=>{
      try {
        // Replace localStorage with an authenticated API and await its successful response.
        localStorage.setItem(storageKey,JSON.stringify(annotations));saved=structuredClone(annotations);
        queueMicrotask(()=>component.update({SaveResultRequestId:requestId,SaveResultSuccess:true,SaveResultMessage:'Review saved.'}));
      } catch {queueMicrotask(()=>component.update({SaveResultRequestId:requestId,SaveResultSuccess:false,SaveResultMessage:'Could not save. Your changes remain.'}));}
    },
    Exported:(_dataUrl,seconds)=>{reload.textContent='Reload saved review · exported '+seconds.toFixed(2)+'s';},
  });
  reload.onclick=()=>component.update({Annotations:structuredClone(saved),ResetKey:String(++revision)});
  return {destroy(){component.destroy();reload.remove();target.remove();}};
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()