lzy/sci-gui-agent-benchmark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat&fix: add task recording endpoint, enhance video player support, and improve mobile responsiveness

Browse Source
This commit is contained in:
adlsdztony
2025-06-01 06:50:02 +00:00
parent cb62b3c877
commit b5efb82172
5 changed files with 255 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
monitor/templates/task_detail.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Task Detail: {{ task_id }}</title>
<link rel="icon" href="/static/favicon.png" type="image/x-icon">
<link rel="shortcut icon" href="/static/favicon.png" type="image/x-icon">
@@ -61,6 +61,20 @@
{% endif %}
<dt>Result</dt>
<dd>{{ task_status.result }}</dd>
{% if task_status.status.startswith('Done') %}
<dt>Recording</dt>
<dd id="recording-container">
<div class="video-player">
<video id="task-recording" controls playsinline webkit-playsinline
preload="metadata" width="100%" controlslist="nodownload">
<source src="/task/{{ task_type }}/{{ task_id }}/recording" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="video-status" class="video-status">Loading video...</div>
</div>
</dd>
{% endif %}
</dl>
</div>
<div class="task-steps">
@@ -101,6 +115,57 @@
function refreshPage() {
window.location.reload();
}
// Handle video player with enhanced mobile support
document.addEventListener('DOMContentLoaded', function() {
const videoElement = document.getElementById('task-recording');
const videoStatus = document.getElementById('video-status');
if (videoElement) {
// Function to update status on successful video load
function updateSuccessStatus() {
videoStatus.textContent = 'Recording available';
videoStatus.className = 'video-status video-success';
}
// Multiple event listeners for different browser implementations
// The 'loadeddata' event might not fire on all mobile browsers
videoElement.addEventListener('loadeddata', updateSuccessStatus);
videoElement.addEventListener('loadedmetadata', updateSuccessStatus);
videoElement.addEventListener('canplay', updateSuccessStatus);
// Error handling for video
videoElement.addEventListener('error', function(e) {
console.error('Video error:', e);
videoStatus.textContent = 'Recording not available';
videoStatus.className = 'video-status video-error';
});
// Timeout for slow connections or browser issues
setTimeout(function() {
// If video is playable but events didn't fire correctly
if (videoElement.readyState >= 2 && videoStatus.textContent === 'Loading video...') {
updateSuccessStatus();
}
}, 2000);
// Directly check video source availability with fetch API
fetch('/task/{{ task_type }}/{{ task_id }}/recording', {method: 'HEAD'})
.then(function(response) {
if (response.ok && videoStatus.textContent === 'Loading video...') {
// If HEAD request succeeds but video events haven't fired
setTimeout(updateSuccessStatus, 500);
}
})
.catch(function() {
// Network error or CORS issue
if (videoStatus.textContent === 'Loading video...') {
videoStatus.textContent = 'Recording check failed';
videoStatus.className = 'video-status video-error';
}
});
}
});
</script>
</body>
</html>