Update universalviewer from 3 to 4, use package via yarn

app/assets/stylesheets/components/viewer.scss

@@ -31,4 +31,5 @@
     left: 0;
     width: 100%;
     height: 100%;
+    border: none;
 }

app/controllers/downloads_controller.rb

@@ -34,7 +34,7 @@ def send_hls
     playlist.items.each do |item|
       item.segment = "#{item.segment}?auth_token=#{params[:auth_token]}"
     end
-    render plain: playlist.to_s
+    send_data(playlist.to_s, type: "application/x-mpegurl", disposition: :inline)
   end
 
   def send_fgdc

app/javascript/entrypoints/viewer.js

@@ -1,9 +1,4 @@
 import UVManager from '@viewer/uv_manager'
 import 'leaflet/dist/leaflet.css'
 const UVManagerInstance = new UVManager()
-let timer = window.setInterval(() => {
-  if (window.UV !== undefined) {
-    UVManagerInstance.initialize()
-    window.clearInterval(timer)
-  }
-}, 5)
+UVManagerInstance.initialize()

app/javascript/test/viewer/uv_manager.spec.js

@@ -1,6 +1,21 @@
+import { init, IIIFURLAdapter } from 'universalviewer';
 import UVManager from '@viewer/uv_manager'
 import jQ from 'jquery'
 vi.mock('viewer/cdl_timer')
+vi.mock('universalviewer', () => ({
+    init: vi.fn().mockImplementation(() => {
+      return { on: vi.fn() }
+    }),
+    IIIFURLAdapter: vi.fn().mockImplementation(() => {
+      return {
+        get: global.getResult,
+        getInitialData: vi.fn().mockImplementation(() => {
+          return {}
+        })
+      }
+    })
+}))
+
 describe('UVManager', () => {
   const initialHTML =
     '<h1 id="title" class="lux-heading h1" style="display: none;"></h1>' +
@@ -72,13 +87,7 @@ describe('UVManager', () => {
         return 'https://figgy.princeton.edu/uv/uv_config.json'
       } else { return null }
     })
-
-    // This makes it so global.UV.URLDataProvider.get returns our mock data
-    const provider = vi.fn().mockImplementation(() => {
-      return { get: getResult }
-    })
-    global.UV = { URLDataProvider: provider }
-    global.createUV = vi.fn()
+    global.getResult = getResult
     // Allow window location assign
     const location = window.location
     vi.spyOn(location, 'assign').mockImplementation(() => true)

app/javascript/viewer/uv_manager.js

@@ -1,4 +1,5 @@
-/* global UV, $, createUV */
+import { init, IIIFURLAdapter } from "universalviewer";
+import "universalviewer/dist/esm/index.css";
 import CDLTimer from '@viewer/cdl_timer'
 import IIIFLogo from '@images/iiif-logo.svg'
 import StatementOnHarmfulContentIcon from '@images/statement.png'
@@ -24,7 +25,7 @@ export default class UVManager {
         return window.location.assign('/viewer/' + this.figgyId + '/auth')
       } else if (result.embed.status === 'authorized') {
         this.displayNotice(result)
-        this.createUV(null, null, result)
+        this.createUV(result)
         await this.buildLeafletViewer()
       }
     } else {
@@ -90,25 +91,46 @@ export default class UVManager {
     return this.leafletViewer.loadLeaflet()
   }
 
-  createUV (data, status, graphqlData) {
+  createUV (graphqlData) {
     this.tabManager.onTabSelect(() => setTimeout(() => this.resize(), 100))
     this.processTitle(graphqlData)
     this.uvElement.show()
-    this.uv = createUV('#uv', {
-      root: 'uv',
-      iiifResourceUri: this.manifest,
-      configUri: this.configURI,
-      collectionIndex: Number(this.urlDataProvider.get('c', 0)),
-      manifestIndex: Number(this.urlDataProvider.get('m', 0)),
-      sequenceIndex: Number(this.urlDataProvider.get('s', 0)),
-      canvasIndex: Number(this.urlDataProvider.get('cv', 0)),
-      rangeId: this.urlDataProvider.get('rid', 0),
-      rotation: Number(this.urlDataProvider.get('r', 0)),
-      xywh: this.urlDataProvider.get('xywh', ''),
+
+    // const opts = {
+    //   manifest: this.manifest,
+    //   embedded: true,
+    //   collectionIndex:
+    //     this.iiifUrlAdapter.get('c') !== undefined
+    //       ? Number(this.iiifUrlAdapter.get('c'))
+    //       : undefined,
+    //   manifestIndex: Number(this.iiifUrlAdapter.get('m', 0)),
+    //   canvasIndex: Number(this.iiifUrlAdapter.get('cv', 0)),
+    //   rotation: Number(this.iiifUrlAdapter.get('r', 0)),
+    //   rangeId: this.iiifUrlAdapter.get('rid', ''),
+    //   xywh: this.iiifUrlAdapter.get('xywh', ''),
+    //   sequenceIndex: Number(this.iiifUrlAdapter.get('s', 0))
+    // }
+
+    const opts = this.iiifUrlAdapter.getInitialData({
+      manifest: this.manifest,
       embedded: true
-    }, this.urlDataProvider)
+    })
+
     this.cdlTimer = new CDLTimer(this.figgyId)
     this.cdlTimer.initializeTimer()
+
+    let uv = init('uv', opts)
+
+    const configPath = this.configURI
+    uv.on('configure', function ({ config, cb }) {
+      cb(
+        new Promise(function (resolve) {
+          fetch(configPath).then(function (response) {
+            resolve(response.json())
+          })
+        })
+      )
+    })
   }
 
   addViewerIcons () {
@@ -187,7 +209,7 @@ export default class UVManager {
     if (this.isFiggyManifest) {
       return '/viewer/config/' + this.manifest.replace('/manifest', '').replace(/.*\//, '') + '.json'
     } else {
-      return this.urlDataProvider.get('config')
+      return this.iiifUrlAdapter.get('config')
     }
   }
 
@@ -213,7 +235,8 @@ export default class UVManager {
     this.uvElement.width(windowWidth)
     this.uvElement.height(windowHeight - titleHeight - tabHeight)
     this.uvElement.children('div').height(windowHeight - titleHeight - tabHeight)
-    this.waitForElementToDisplay('button.share', 1000, this.addViewerIcons.bind(this))
+    // TODO: Viewer icons method not working
+    // this.waitForElementToDisplay('button.share', 1000, this.addViewerIcons.bind(this))
     if (this.uv) { this.uv.resize() }
   }
 
@@ -237,12 +260,12 @@ export default class UVManager {
     })
   }
 
-  get urlDataProvider () {
-    return new UV.URLDataProvider(false)
+  get iiifUrlAdapter () {
+    return new IIIFURLAdapter()
   }
 
   get manifest () {
-    return this.urlDataProvider.get('manifest')
+    return this.iiifUrlAdapter.get('manifest')
   }
 
   get uvElement () {

app/services/manifest_builder.rb

@@ -637,7 +637,7 @@ def display_content
         format: "application/vnd.apple.mpegurl",
         label: resource.title.first,
         duration: file.duration.first.to_f,
-        type: "Audio" # required for the viewer to play audio correctly
+        type: "Sound" # required for the viewer to play audio correctly
       )
     end
 

app/services/manifest_builder/canvas_rendering_builder.rb

@@ -133,7 +133,7 @@ def mp3_file_hash
 
         {
           "id" => download_url,
-          "type" => "Audio",
+          "type" => "Sound",
           "label" => "Download the mp3",
           "format" => mp3_file.mime_type.first
         }

app/values/viewer_configuration.rb

@@ -7,15 +7,15 @@ def self.default_values
     {
       "modules" =>
       {
-        "pagingHeaderPanel" =>
+        "headerPanel" =>
         {
           "options" =>
           {
             "autoCompleteBoxEnabled" => false,
             "imageSelectionBoxEnabled" => true
           }
         },
-        "contentLeftPanel" =>
+        "leftPanel" =>
         {
           "options" =>
           {
@@ -30,17 +30,11 @@ def self.default_values
             "shareEnabled" => true
           }
         },
-        "avCenterPanel" =>
-        {
-          "options" =>
-          {
-            "posterImageExpanded" => true
-          }
-        },
-        "seadragonCenterPanel" =>
+        "centerPanel" =>
         {
           "options" =>
           {
+            "posterImageExpanded" => true,
             "immediateRender" => true,
             "maxZoomPixelRatio" => 1.0
           }

app/views/layouts/viewer_layout.html.erb

@@ -2,16 +2,12 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <%= csrf_meta_tag %>
-    <link rel="stylesheet" type="text/css" href="uv/uv.css">
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
     <%= vite_javascript_tag 'viewer' %>
     <%= stylesheet_link_tag 'viewer' %>
     <%= yield :head %>
-    <script type="text/javascript" src="/uv/lib/offline.js"></script>
-    <script type="text/javascript" src="/uv/lib/offline.js"></script>
-    <script type="text/javascript" src="/uv/helpers.js"></script>
   </head>
   <body>
     <%= yield %>
-    <script type="text/javascript" src="/uv/uv.js"></script>
   </body>
 </html>

package.json

@@ -17,6 +17,7 @@
     "flush-promises": "^1.0.2",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.9.2",
+    "hls.js": "^1.4.10",
     "leaflet": "^1.7.1",
     "lodash": "^4.17.21",
     "lux-design-system": "4.5.2",
@@ -33,6 +34,7 @@
     "sass": "^1.62.1",
     "unfetch": "^4.0.1",
     "uppy": "^3.9.1",
+    "universalviewer": "https://pkg.csb.dev/UniversalViewer/universalviewer/commit/3930eefe/universalviewer",
     "vue": "^2.5.17",
     "vue-details": "^1.1.0",
     "vue-loader": "^15.4.2",