1e:T1758,import { VideoPlayer } from './player.js'; import { InteractionRecorder } from './recorder.js'; import { formatTime, addEventToList } from './ui.js'; const video = document.getElementById('video'); const fileInput = document.getElementById('video-file'); const urlInput = document.getElementById('video-url'); const loadUrlBtn = document.getElementById('load-url'); const playBtn = document.getElementById('play'); const pauseBtn = document.getElementById('pause'); const stepBack = document.getElementById('step-back'); const stepFwd = document.getElementById('step-fwd'); const fpsInput = document.getElementById('fps'); const snapshotBtn = document.getElementById('snapshot'); const shots = document.getElementById('shots'); const seek = document.getElementById('seek'); const currentTimeEl = document.getElementById('current-time'); const durationEl = document.getElementById('duration'); const addEventBtn = document.getElementById('add-event'); const eventText = document.getElementById('event-text'); const eventsList = document.getElementById('events-list'); const mockRoot = document.getElementById('mock-root'); const toggleRecordBtn = document.getElementById('toggle-record'); const exportBtn = document.getElementById('export'); const importFile = document.getElementById('import-file'); const player = new VideoPlayer(video, fpsInput); const recorder = new InteractionRecorder(mockRoot); // Wire up file loading fileInput.addEventListener('change', (e) => { const f = e.target.files && e.target.files[0]; if (f) { player.loadFile(f); } }); loadUrlBtn.addEventListener('click', () => { const url = urlInput.value.trim(); if (url) player.loadUrl(url); }); // Controls playBtn.addEventListener('click', () => player.play()); pauseBtn.addEventListener('click', () => player.pause()); stepBack.addEventListener('click', () => { player.stepFrame(-1); updateUI(); }); stepFwd.addEventListener('click', () => { player.stepFrame(1); updateUI(); }); snapshotBtn.addEventListener('click', () => { const data = player.captureFrame(); if (data) { const img = document.createElement('img'); img.src = data; shots.prepend(img); } else { alert('Snapshot misslyckades (samma-origin policy eller video ej laddad).'); } }); // Seek bar and time display player.onTimeUpdate = () => updateUI(); video.addEventListener('loadedmetadata', () => { seek.max = Math.max(0, Math.floor(player.duration * 1000)); durationEl.textContent = formatTime(player.duration); updateUI(); }); seek.addEventListener('input', () => { const ms = Number(seek.value); player.currentTime = ms / 1000; }); function updateUI() { const t = player.currentTime; currentTimeEl.textContent = formatTime(t); seek.value = Math.floor(t * 1000); } // Events / Annotations addEventBtn.addEventListener('click', () => { const text = eventText.value.trim() || 'Annotation'; const t = player.currentTime; addEventToList(eventsList, t, text); eventText.value = ''; }); eventsList.addEventListener('goto-time', (e) => { player.currentTime = e.detail; updateUI(); }); // Record interactions in mock UI let recording = false; toggleRecordBtn.addEventListener('click', () => { if (!recording) { recorder.start(); toggleRecordBtn.textContent = 'Stop record UI'; recording = true; } else { recorder.stop(); toggleRecordBtn.textContent = 'Start record UI'; r