Inconsistent thumbnail display

[ddcornwall]

Depending on where NARA thumbnail assets are house, using the API's thumbnail["@url"] does not always result in the display of the thumbnail.

Thoughts on problem:

Process

1. "No thumbnail conditions"
2. Single thumbnail conditions 2a. use thumbnail in thumbnail[@url] 2b. use NARA workaround
3. Array thumbnail conditions 3a. use thumbnail in thumbnail[@url] 3b. use NARA workaround

See https://github.com/usnationalarchives/Catalog-API/issues/9 for "workaround" thread.

Test solution against:

(Title: 1306-07 Barrow - 1940 Census) https://catalog.archives.gov/api/v1/?naIds=52204721

Workaround thumbnail url (broken as of 3/13/2018) https://catalog.archives.gov/catalogmedia/live/ent/seattle/rg-075/2655229/2655229-003-021-0001.jpg/opa-renditions/thumbnails/2655229-003-021-0001.jpg-thumb.jpg

API thumbnail url (works as of 3/13/2018) https://catalog.archives.gov/OpaAPI/media/52204721/opa-renditions/thumbnails/2655229-003-021-0001.jpg-thumb.jpg

(Title: Chifornak) https://catalog.archives.gov/api/v1/?naIds=72034258

Workaround thumbnail URL (working as of 3/13/2018) https://catalog.archives.gov/catalogmedia/live/seattle/rg-075/1870939/JPGs/1870939-001-008-0001.jpg/opa-renditions/thumbnails/1870939-001-008-0001.jpg-thumb.jpg

API thumbnail url (broken as of 3/13/2018) https://catalog.archives.gov/OpaAPI/media/72034258/opa-renditions/thumbnails/1870939-001-008-0001.jpg-thumb.jpg

Also need to research what (path? etc?) makes these two records different.

[ddcornwall]

This latest comment from the NARA thread above might hold an answer:

"@ddcornwall: Sorry for the delay! I don't yet have much news for you on this front. Our developers are working on rolling out a fix for the issue I mentioned elsewhere in which some fields are inaccessible via the API as their top priority. We view these object-related bugs (this and #8) as the highest priority after that, but don't yet have a timeline. We'll definitely update this issue with any news. For now, it may be necessary to implement some code that checks the HTTP status code of the file URL, and only tries the workaround if it's not 200, if that's possible? Sorry again for the inconvenience!"

I hadn't thought of checking the status code of the URL. I assume this is something that can actually be done and something I'll try soon.

[ddcornwall]

Between: https://www.w3schools.com/js/js_ajax_http_response.asp AND https://www.youtube.com/watch?v=rjmtYkRK1nM

I think this might be good code to start testing thumbnail URLs before trying to write them to a results page:

const xhr = new XMLHttpRequest():

xhr.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { Show the thumbnail; } };

xhr.open('get', URL, false); //false makes the request synchronous, which is what I think I want. xhr.send();

I don't have time tonight to experiment with this idea, but hopefully tomorrow.

[ddcornwall]

Tried this approach, which required some tweaking. Wound up having cross domain request issues. Current code in standalone status.js is:

`// Code goes here
console.log("Script is running.");

function doSomethingIfFound(url, status){
  console.log(url + " was found, status" + status);
}
function doSomethingIfNotFound(url, status){
  console.log(url + " was not found, status" + status);
}
function test(url) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      doSomethingIfFound(url, xhttp.status);
    } else if ( xhttp.readyState == 4 && xhttp.status != 200 ){
      doSomethingIfNotFound(url, xhttp.status);
    }
  };

  xhttp.open("GET", url, true);
  xhttp.send();
}

test("http://www.google.com/");
test("http://library.alaska.gov");
test("http://mydomain.notme");`

Next coding time will review https://stackoverflow.com/questions/220231/accessing-the-web-pages-http-headers-in-javascript

[ddcornwall]

The approach used by "https://stackoverflow.com/questions/220231/accessing-the-web-pages-http-headers-in-javascript" was not helpful. Will return to field analysis to build logic for using NARA workaround.

[ddcornwall]

Field analysis was helpful. Resulted in following code.

 if (typeof response.objects === 'undefined' || recType === 'itemAv' ) {
       console.log("Line 342 - response.objects undefined or recType is itemAV");
       $("#recent").append("No thumbnail available");
   } else if (typeof response.objects.object.length === 'undefined') {
      console.log("Line 341 - response.objects.object.length undefined");
      var filePath = response.objects.object.file["@path"]
      console.log("filePath:" + filePath);
      if (filePath.startsWith("/lz")) {
        filePath=response.objects.object.file["@path"].slice(4);
      $("#recent").append("<img class=\"img-thumbnail\" src = \"https://catalog.archives.gov/catalogmedia/live/" + filePath + "/" + response.objects.object.thumbnail["@path"] + "\">");
    } else {
      $("#recent").append("<img class=\"img-thumbnail\" src = \"" + response.objects.object.thumbnail["@url"] + "\">");
  }
   } else {
         console.log("Line 351 - multiple objects");
     var filePath = response.objects.object[0].file["@path"]
     console.log("filePath:" + filePath);
     if (filePath.startsWith("/lz")) {
       filePath=response.objects.object[0].file["@path"].slice(4); //where record below fails
     $("#recent").append("<img class=\"img-thumbnail\" src = \"https://catalog.archives.gov/catalogmedia/live/" + filePath + "/" + response.objects.object[0].thumbnail["@path"] + "\">");
   } else {
     $("#recent").append("<img class=\"img-thumbnail\" src = \"" + response.objects.object[0].thumbnail["@url"] + "\">");
 }
}

However, at least one record with non-image types files breaks this: https://catalog.archives.gov/api/v1/?naIds=75809390 with this error: SCRIPT5007: Unable to get property '@path' of undefined or null reference in line 356. Except that field seems to exist.

[ddcornwall]

Problem of record in last comment was that it lacked a thumbnail field. An appropriate "else if" test was created.