Add option to cover modal to get cover from IA

[Drini Cami]

Problem

Sometimes the IA cover loaded into Open Library is incorrect or low quality. In this case fetching the current cover from IA is a common editor/librarian action.

E.g.

Expected behaviour / screenshots (ex: Figma design screenshots for UI feature)

The "manage covers" dialog should have an option to fetch directly from IA. E.g.

Proposal & Constraints

What is the proposed solution / implementation?

I currently use a grease monkey extension to achieve this, which I've been making heavy use of! It would be good to cement this in.

Here's the JS; although this would be implemented in python in our template.

// ==UserScript==
// @name     Fetch IA Cover
// @version  1
// @grant    none
// @run-at   document-idle
// ==/UserScript==

async function main() {
  // Unclear why, but after submitting the form, the whole thing
  // gets run again!
  if (document.getElementById('dc-ia-cover')) return;

  const el = new DOMParser().parseFromString(`
  <div class="formElement" id="dc-ia-cover">
    <div class="label">
      <label>Or, use the the cover from Internet Archive</label>
    </div>
    <a href="#">
    	<img style="height: 200px" />
    </a>
    <div class="input" style="padding-top: 0">
      <input type="button" value="Use this image" disabled>
    </div>
  </div>
  `, 'text/html').body.firstChild;

  document.querySelector('.formElement:last-child').insertAdjacentElement("beforebegin", el);
  document.querySelector('.formElement:last-child').insertAdjacentElement("beforebegin", document.createElement('hr'));

  const olRecord = await fetch(`${location.protocol}//${location.host}${location.pathname.split('/').slice(0,3).join('/')}.json`).then(r => r.json());
  if (!olRecord.ocaid) {
    el.style.textDecoration = 'line-through';
  } else {
    const coverUrl = `https://archive.org/services/img/${olRecord.ocaid}/full/pct:600/0/default.jpg`;
    el.querySelector('img').src = coverUrl.replace('pct:600', 'full');
    el.querySelector('a').href = coverUrl;
    const btn = el.querySelector('input[type="button"]');
    btn.removeAttribute('disabled');
    btn.onclick = ev => {
      btn.setAttribute('disabled', '');
      document.querySelector('[name="url"]').value = coverUrl;
      el.closest('form').querySelector('button[type="submit"]').click();
    }
  }
}

main()

Leads

Related files

https://github.com/internetarchive/openlibrary/blob/86c18bfd57a566bd56b0bccd06dc53e4391186eb/openlibrary/templates/covers/add.html

Stakeholders

@rebecca-shoptaw @seabelis

---

Note: Before making a new branch or updating an existing one, please ensure your branch is up to date.

[rebecca shoptaw]

I'd be happy to take this on and/or be the lead for the issue! It's been a while since I returned to my old friend the cover form.