From 20b0389f57c8b21e782d095a49be64bb32af35a9 Mon Sep 17 00:00:00 2001 From: Ross Cutler <46252169+rosscutler@users.noreply.github.com> Date: Wed, 4 Jun 2025 16:34:00 -0700 Subject: [PATCH] Add error handling for video loading --- src/template/ACR_template.html | 69 ++++++++++++++++++------------ src/template/DCR_template.html | 71 +++++++++++++++++++------------ src/template/avatar_template.html | 65 +++++++++++++++++----------- 3 files changed, 125 insertions(+), 80 deletions(-) diff --git a/src/template/ACR_template.html b/src/template/ACR_template.html index 10a4aea..3215407 100644 --- a/src/template/ACR_template.html +++ b/src/template/ACR_template.html @@ -987,14 +987,26 @@ /** Called when downloading of all videos took too long, show a message and block the hit. **/ -function show_message_too_long_loading(){ - if(page_loading_timer){ - clearTimeout(page_loading_timer); - page_loading_timer= null; - } - alert('It looks like that your Internet connection is too slow for this task. Please return this hit and try again later with a better network connection. Thanks'); - disableTheHIT(Hide_HIT_REASON.AUTO_TEST_FAILED); -} +function show_message_too_long_loading(){ + if(page_loading_timer){ + clearTimeout(page_loading_timer); + page_loading_timer= null; + } + alert('It looks like that your Internet connection is too slow for this task. Please return this hit and try again later with a better network connection. Thanks'); + disableTheHIT(Hide_HIT_REASON.AUTO_TEST_FAILED); +} + +/** + Called when a video element cannot be loaded +**/ +function show_message_video_load_error(url){ + if(page_loading_timer){ + clearTimeout(page_loading_timer); + page_loading_timer= null; + } + alert('Failed to load video: '+url+'. Please ensure the file is publicly accessible and that CORS is enabled.'); + disableTheHIT(Hide_HIT_REASON.AUTO_TEST_FAILED); +} /** called when all videos are loaded @@ -2341,25 +2353,28 @@ req.open('GET', src, true); req.responseType = 'blob'; - req.onload = function(){ - if (this.status === 200) { - loading_duration = Date.now()- download_start.get(id); - download_duration.set(id, loading_duration); - console.log("Loading duration for "+id+":"+loading_duration); - let size = this.getResponseHeader('content-length'); - let tmp = ((size /1024)/1024) - video_size_MB = video_size_MB + tmp; - var videoBlob = this.response; - var vurl = URL.createObjectURL(videoBlob); - document.getElementById(id).src = vurl; - }else{ - console.log(this.status + ' ERROR: '+id+ ', src:'+tmp_src); - load_videos_to_storage(id); - } - }; - req.onerror = function() { - console.log('Error on loading '+id); - } + req.onload = function(){ + if (this.status === 200) { + loading_duration = Date.now()- download_start.get(id); + download_duration.set(id, loading_duration); + console.log("Loading duration for "+id+":"+loading_duration); + let size = this.getResponseHeader('content-length'); + let tmp = ((size /1024)/1024) + video_size_MB = video_size_MB + tmp; + var videoBlob = this.response; + var vurl = URL.createObjectURL(videoBlob); + document.getElementById(id).src = vurl; + }else{ + console.log(this.status + ' ERROR: '+id+ ', src:'+tmp_src); + recordError('VIDEO_LOAD_STATUS_'+this.status, tmp_src); + show_message_video_load_error(tmp_src); + } + }; + req.onerror = function() { + console.log('Error on loading '+id); + recordError('VIDEO_LOAD_ERROR', tmp_src); + show_message_video_load_error(tmp_src); + } download_start.set(id, Date.now()); if (start_page_load==null){ start_page_load = Date.now(); diff --git a/src/template/DCR_template.html b/src/template/DCR_template.html index 0fe8bf6..2118551 100644 --- a/src/template/DCR_template.html +++ b/src/template/DCR_template.html @@ -1071,14 +1071,26 @@ /** Called when downloading of all videos took too long, show a message and block the hit. **/ -function show_message_too_long_loading(){ - if(page_loading_timer){ - clearTimeout(page_loading_timer); - page_loading_timer= null; - } - alert('It looks like that your Internet connection is too slow for this task. Please return this hit and try it later with a better network connection. Thanks'); - disableTheHIT(Hide_HIT_REASON.AUTO_TEST_FAILED); -} +function show_message_too_long_loading(){ + if(page_loading_timer){ + clearTimeout(page_loading_timer); + page_loading_timer= null; + } + alert('It looks like that your Internet connection is too slow for this task. Please return this hit and try it later with a better network connection. Thanks'); + disableTheHIT(Hide_HIT_REASON.AUTO_TEST_FAILED); +} + +/** + Called when a video element cannot be loaded +**/ +function show_message_video_load_error(url){ + if(page_loading_timer){ + clearTimeout(page_loading_timer); + page_loading_timer= null; + } + alert('Failed to load video: '+url+'. Please ensure the file is publicly accessible and that CORS is enabled.'); + disableTheHIT(Hide_HIT_REASON.AUTO_TEST_FAILED); +} /** Called when all videos are loaded @@ -2582,26 +2594,29 @@ req.open('GET', src, true); req.responseType = 'blob'; - req.onload = function(){ - if (this.status === 200) { - loading_duration = Date.now()- download_start.get(id); - download_duration.set(id, loading_duration); - console.log("Loading duration for "+id+":"+loading_duration); - let size = this.getResponseHeader('content-length'); - let tmp = ((size /1024)/1024) - console.log(tmp_src+': '+tmp); - video_size_MB = video_size_MB + tmp; - var videoBlob = this.response; - var vurl = URL.createObjectURL(videoBlob); - document.getElementById(id).src = vurl; - }else{ - console.log(this.status + ' ERROR: '+id+ ', src:'+tmp_src); - load_videos_to_storage(id); - } - }; - req.onerror = function() { - console.log('Error on loading '+id); - } + req.onload = function(){ + if (this.status === 200) { + loading_duration = Date.now()- download_start.get(id); + download_duration.set(id, loading_duration); + console.log("Loading duration for "+id+":"+loading_duration); + let size = this.getResponseHeader('content-length'); + let tmp = ((size /1024)/1024) + console.log(tmp_src+': '+tmp); + video_size_MB = video_size_MB + tmp; + var videoBlob = this.response; + var vurl = URL.createObjectURL(videoBlob); + document.getElementById(id).src = vurl; + }else{ + console.log(this.status + ' ERROR: '+id+ ', src:'+tmp_src); + recordError('VIDEO_LOAD_STATUS_'+this.status, tmp_src); + show_message_video_load_error(tmp_src); + } + }; + req.onerror = function() { + console.log('Error on loading '+id); + recordError('VIDEO_LOAD_ERROR', tmp_src); + show_message_video_load_error(tmp_src); + } download_start.set(id, Date.now()); if (start_page_load==null){ diff --git a/src/template/avatar_template.html b/src/template/avatar_template.html index 73cf157..43d232d 100644 --- a/src/template/avatar_template.html +++ b/src/template/avatar_template.html @@ -1185,12 +1185,24 @@ Called when downloading of all videos took too long, show a message and block the hit. **/ function show_message_too_long_loading(){ - if(page_loading_timer){ - clearTimeout(page_loading_timer); - page_loading_timer= null; - } - alert('It looks like that your Internet connection is too slow for this task. Please return this hit and try again later with a better network connection. Thanks'); - disableTheHIT(Hide_HIT_REASON.AUTO_TEST_FAILED); + if(page_loading_timer){ + clearTimeout(page_loading_timer); + page_loading_timer= null; + } + alert('It looks like that your Internet connection is too slow for this task. Please return this hit and try again later with a better network connection. Thanks'); + disableTheHIT(Hide_HIT_REASON.AUTO_TEST_FAILED); +} + +/** + Called when a video element cannot be loaded +**/ +function show_message_video_load_error(url){ + if(page_loading_timer){ + clearTimeout(page_loading_timer); + page_loading_timer= null; + } + alert('Failed to load video: '+url+'. Please ensure the file is publicly accessible and that CORS is enabled.'); + disableTheHIT(Hide_HIT_REASON.AUTO_TEST_FAILED); } /** @@ -2901,25 +2913,28 @@ req.open('GET', src, true); req.responseType = 'blob'; - req.onload = function(){ - if (this.status === 200) { - loading_duration = Date.now()- download_start.get(id); - download_duration.set(id, loading_duration); - console.log("Loading duration for "+id+":"+loading_duration); - let size = this.getResponseHeader('content-length'); - let tmp = ((size /1024)/1024) - video_size_MB = video_size_MB + tmp; - var videoBlob = this.response; - var vurl = URL.createObjectURL(videoBlob); - document.getElementById(id).src = vurl; - }else{ - console.log(this.status + ' ERROR: '+id+ ', src:'+tmp_src); - load_videos_to_storage(id); - } - }; - req.onerror = function() { - console.log('Error on loading '+id); - } + req.onload = function(){ + if (this.status === 200) { + loading_duration = Date.now()- download_start.get(id); + download_duration.set(id, loading_duration); + console.log("Loading duration for "+id+":"+loading_duration); + let size = this.getResponseHeader('content-length'); + let tmp = ((size /1024)/1024) + video_size_MB = video_size_MB + tmp; + var videoBlob = this.response; + var vurl = URL.createObjectURL(videoBlob); + document.getElementById(id).src = vurl; + }else{ + console.log(this.status + ' ERROR: '+id+ ', src:'+tmp_src); + recordError('VIDEO_LOAD_STATUS_'+this.status, tmp_src); + show_message_video_load_error(tmp_src); + } + }; + req.onerror = function() { + console.log('Error on loading '+id); + recordError('VIDEO_LOAD_ERROR', tmp_src); + show_message_video_load_error(tmp_src); + } download_start.set(id, Date.now()); if (start_page_load==null){ start_page_load = Date.now();