Revise native oembed_controller.js to handle Kaltura embeds

app/assets/stylesheets/_contents.scss

@@ -79,6 +79,24 @@ h3.document-title-heading {
   margin-top: 0.3rem;
 }
 
+.al-digital-object a::after {
+  content: "";
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-left: 0.25rem;
+  vertical-align: -0.125em;
+  background-color: currentColor;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z'/%3E%3C/svg%3E");
+}
+
 .restrictions-preview {
   position: relative;
   background-color: var.$color-maize-200;
@@ -87,6 +105,14 @@ h3.document-title-heading {
   margin-bottom: 2rem;
 }
 
+.col .al-document-container {
+  margin-top: 0.3rem;
+}
+
+h3.document-title-heading {
+  margin-top: 0.3rem;
+}
+
 .restrictions-preview::before {
   content: "";
   position: absolute;
@@ -95,3 +121,4 @@ h3.document-title-heading {
   right: 0;
   border-top: 1px dotted var.$color-neutral-100;
 }
+

app/javascript/arclight/oembed_controller.js

@@ -0,0 +1,119 @@
+import { Controller } from '@hotwired/stimulus'
+
+const PARTNER_ID = '1758271'
+const UICONF_ID = '56928822'
+const PLAYER_HOST = 'https://cdnapisec.kaltura.com'
+const ENTRY_ID_PATTERN = /^\d_[a-z0-9]{8}$/i
+
+// Kaltura-backed hosts (kaltura.com and MediaSpace instances)
+const KALTURA_HOST_SUFFIXES = ['.kaltura.com', '.mivideo.it.umich.edu']
+
+export default class OembedController extends Controller {
+     static values = {
+          url: String
+     }
+
+     connect() {
+          if (this.element.getAttribute('loaded') === 'loaded') return
+
+          const entryId = this.findKalturaEntryId()
+          if (entryId) {
+               this.loadKalturaEmbed(entryId)
+               return
+          }
+
+          this.loadOEmbed()
+     }
+
+     findKalturaEntryId() {
+          let url
+
+          try {
+               url = new URL(this.urlValue, window.location.href)
+          } catch (error) {
+               console.warn(`Invalid oEmbed URL: ${this.urlValue}`, error)
+               return null
+          }
+
+          const isKalturaHost = url.hostname === 'kaltura.com'
+              || KALTURA_HOST_SUFFIXES.some((suffix) => url.hostname.endsWith(suffix))
+          if (!isKalturaHost) return null
+
+          const queryEntryId = url.searchParams.get('entry_id')
+          if (queryEntryId && ENTRY_ID_PATTERN.test(queryEntryId)) {
+               return queryEntryId
+          }
+
+          return url.pathname
+              .match(/(?:^|\/)(\d_[a-z0-9]{8})(?:\/|$)/i)?.[1] || null
+     }
+
+     loadKalturaEmbed(entryId) {
+          const linkContainer = this.element.querySelector('.al-digital-object')
+          if (!linkContainer) {
+               console.warn('Could not find .al-digital-object for Kaltura embed')
+               return
+          }
+
+          const params = new URLSearchParams({
+               iframeembed: 'true',
+               entry_id: entryId
+          })
+
+          const iframe = document.createElement('iframe')
+          iframe.src = `${PLAYER_HOST}/p/${PARTNER_ID}/embedPlaykitJs/uiconf_id/${UICONF_ID}?${params}`
+          iframe.setAttribute('allowfullscreen', '')
+          iframe.setAttribute('allow', 'autoplay; fullscreen; encrypted-media')
+          iframe.setAttribute(
+              'title',
+              this.element.querySelector('a')?.textContent?.trim() || 'Media player'
+          )
+          iframe.style.cssText = 'width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0;'
+
+          // Keep the original link as a fallback.
+          linkContainer.insertAdjacentElement('beforebegin', iframe)
+          this.element.setAttribute('loaded', 'loaded')
+     }
+
+     loadOEmbed() {
+          fetch(this.urlValue)
+              .then((response) => {
+                   if (response.ok) return response.text()
+                   throw new Error(`HTTP error, status = ${response.status}`)
+              })
+              .then((body) => {
+                   const endpoint = this.findOEmbedEndpoint(body)
+                   if (!endpoint) {
+                        console.warn(`No oEmbed endpoint found in <head> at ${this.urlValue}`)
+                        return null
+                   }
+
+                   return fetch(endpoint)
+              })
+              .then((response) => {
+                   if (!response) return null
+                   if (response.ok) return response.json()
+                   throw new Error(`HTTP error, status = ${response.status}`)
+              })
+              .then((json) => {
+                   if (!json?.html) return
+
+                   this.element.innerHTML = json.html
+                   this.element.setAttribute('loaded', 'loaded')
+              })
+              .catch((error) => {
+                   console.error(error)
+              })
+     }
+
+     findOEmbedEndpoint(body) {
+          const doc = new DOMParser().parseFromString(body, 'text/html')
+          const endpoint = doc
+              .querySelector('link[rel="alternate"][type="application/json+oembed"]')
+              ?.getAttribute('href')
+
+          if (!endpoint) return null
+
+          return new URL(endpoint, this.urlValue).toString()
+     }
+}

config/importmap.rb

@@ -11,7 +11,7 @@
 pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.js"
 pin "arclight", to: "arclight/arclight.js"
 # TODO: We may be able to move these to a single importmap for arclight.
-pin "arclight/oembed_controller", to: "arclight/oembed_controller.js"
+# pin "arclight/oembed_controller", to: "arclight/oembed_controller.js"
 # chart.js is dependency of blacklight-range-limit, currently is not working
 # as vendored importmaps, but instead must be pinned to CDN. You may want to update
 # versions perioidically.
@@ -20,3 +20,5 @@
 pin "@kurkle/color", to: "https://ga.jspm.io/npm:@kurkle/color@0.3.2/dist/color.esm.js"
 pin "aeonform"
 pin "arclight/truncate_controller", to: "arclight/truncate_controller.js"
+pin "arclight/oembed_controller", to: "arclight/oembed_controller.js"
+pin "arclight/iiif_controller", to: "arclight/iiif_controller.js"