import prettyMilliseconds from 'pretty-ms'; import {createTippy} from '../modules/tippy.js'; import {GET} from '../modules/fetch.js'; import {hideElem, showElem} from '../utils/dom.js'; const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config; let stopwatchTippy; export function initStopwatch() { if (!enableTimeTracking) { return; } const stopwatchEl = document.querySelector('.active-stopwatch-trigger'); const stopwatchPopup = document.querySelector('.active-stopwatch-popup'); if (!stopwatchEl || !stopwatchPopup) { return; } stopwatchEl.removeAttribute('href'); // intended for noscript mode only stopwatchTippy = createTippy(stopwatchEl, { content: stopwatchPopup, placement: 'bottom-end', trigger: 'click', maxWidth: 'none', interactive: true, hideOnClick: true, theme: 'default', }); // global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used. const currSeconds = document.querySelector('.stopwatch-time')?.getAttribute('data-seconds'); if (currSeconds) { updateStopwatchTime(currSeconds); } let usingPeriodicPoller = false; const startPeriodicPoller = (timeout) => { if (timeout <= 0 || !Number.isFinite(timeout)) return; usingPeriodicPoller = true; setTimeout(() => updateStopwatchWithCallback(startPeriodicPoller, timeout), timeout); }; // if the browser supports EventSource and SharedWorker, use it instead of the periodic poller if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) { // Try to connect to the event source via the shared worker first const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker'); worker.addEventListener('error', (event) => { console.error('worker error', event); }); worker.port.addEventListener('messageerror', () => { console.error('unable to deserialize message'); }); worker.port.postMessage({ type: 'start', url: `${window.location.origin}${appSubUrl}/user/events`, }); worker.port.addEventListener('message', (event) => { if (!event.data || !event.data.type) { console.error('unknown worker message event', event); return; } if (event.data.type === 'stopwatches') { updateStopwatchData(JSON.parse(event.data.data)); } else if (event.data.type === 'no-event-source') { // browser doesn't support EventSource, falling back to periodic poller if (!usingPeriodicPoller) startPeriodicPoller(notificationSettings.MinTimeout); } else if (event.data.type === 'error') { console.error('worker port event error', event.data); } else if (event.data.type === 'logout') { if (event.data.data !== 'here') { return; } worker.port.postMessage({ type: 'close', }); worker.port.close(); window.location.href = `${appSubUrl}/`; } else if (event.data.type === 'close') { worker.port.postMessage({ type: 'close', }); worker.port.close(); } }); worker.port.addEventListener('error', (e) => { console.error('worker port error', e); }); worker.port.start(); window.addEventListener('beforeunload', () => { worker.port.postMessage({ type: 'close', }); worker.port.close(); }); return; } startPeriodicPoller(notificationSettings.MinTimeout); } async function updateStopwatchWithCallback(callback, timeout) { const isSet = await updateStopwatch(); if (!isSet) { timeout = notificationSettings.MinTimeout; } else if (timeout < notificationSettings.MaxTimeout) { timeout += notificationSettings.TimeoutStep; } callback(timeout); } async function updateStopwatch() { const response = await GET(`${appSubUrl}/user/stopwatches`); if (!response.ok) { console.error('Failed to fetch stopwatch data'); return false; } const data = await response.json(); return updateStopwatchData(data); } function updateStopwatchData(data) { const watch = data[0]; const btnEl = document.querySelector('.active-stopwatch-trigger'); if (!watch) { clearStopwatchTimer(); hideElem(btnEl); } else { const {repo_owner_name, repo_name, issue_index, seconds} = watch; const issueUrl = `${appSubUrl}/${repo_owner_name}/${repo_name}/issues/${issue_index}`; document.querySelector('.stopwatch-link')?.setAttribute('href', issueUrl); document.querySelector('.stopwatch-commit')?.setAttribute('action', `${issueUrl}/times/stopwatch/toggle`); document.querySelector('.stopwatch-cancel')?.setAttribute('action', `${issueUrl}/times/stopwatch/cancel`); const stopwatchIssue = document.querySelector('.stopwatch-issue'); if (stopwatchIssue) stopwatchIssue.textContent = `${repo_owner_name}/${repo_name}#${issue_index}`; updateStopwatchTime(seconds); showElem(btnEl); } return Boolean(data.length); } let updateTimeIntervalId = null; // holds setInterval id when active function clearStopwatchTimer() { if (updateTimeIntervalId !== null) { clearInterval(updateTimeIntervalId); updateTimeIntervalId = null; } } function updateStopwatchTime(seconds) { const secs = parseInt(seconds); if (!Number.isFinite(secs)) return; clearStopwatchTimer(); const stopwatch = document.querySelector('.stopwatch-time'); // TODO: replace with similar to how system status up time is shown const start = Date.now(); const updateUi = () => { const delta = Date.now() - start; const dur = prettyMilliseconds(secs * 1000 + delta, {compact: true}); if (stopwatch) stopwatch.textContent = dur; // refresh the tippy so that the triangle updates to the correct position stopwatchTippy.hide(); stopwatchTippy.show(); }; updateUi(); updateTimeIntervalId = setInterval(updateUi, 1000); }