diff --git a/app/assets/stylesheets/components/viewer.scss b/app/assets/stylesheets/components/viewer.scss index f98699b94f..545281c454 100644 --- a/app/assets/stylesheets/components/viewer.scss +++ b/app/assets/stylesheets/components/viewer.scss @@ -31,4 +31,5 @@ left: 0; width: 100%; height: 100%; + border: none; } diff --git a/app/controllers/downloads_controller.rb b/app/controllers/downloads_controller.rb index d28850fd37..4172377e1a 100644 --- a/app/controllers/downloads_controller.rb +++ b/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 diff --git a/app/javascript/entrypoints/viewer.js b/app/javascript/entrypoints/viewer.js index e075ea31a1..712abddc9e 100644 --- a/app/javascript/entrypoints/viewer.js +++ b/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() diff --git a/app/javascript/test/viewer/uv_manager.spec.js b/app/javascript/test/viewer/uv_manager.spec.js index 713a1ff7dd..62b5005e0f 100644 --- a/app/javascript/test/viewer/uv_manager.spec.js +++ b/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 = '
' + @@ -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) diff --git a/app/javascript/viewer/uv_manager.js b/app/javascript/viewer/uv_manager.js index f5dd09a7d7..6feceac8a9 100644 --- a/app/javascript/viewer/uv_manager.js +++ b/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 () { diff --git a/app/services/manifest_builder.rb b/app/services/manifest_builder.rb index e09b2b00b1..bae22ead85 100644 --- a/app/services/manifest_builder.rb +++ b/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 diff --git a/app/services/manifest_builder/canvas_rendering_builder.rb b/app/services/manifest_builder/canvas_rendering_builder.rb index cba151e49a..608adf5f94 100644 --- a/app/services/manifest_builder/canvas_rendering_builder.rb +++ b/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 } diff --git a/app/values/viewer_configuration.rb b/app/values/viewer_configuration.rb index beb2d75098..6c0ed7a013 100644 --- a/app/values/viewer_configuration.rb +++ b/app/values/viewer_configuration.rb @@ -7,7 +7,7 @@ def self.default_values { "modules" => { - "pagingHeaderPanel" => + "headerPanel" => { "options" => { @@ -15,7 +15,7 @@ def self.default_values "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 } diff --git a/app/views/layouts/viewer_layout.html.erb b/app/views/layouts/viewer_layout.html.erb index c2602ba425..bdb758f817 100644 --- a/app/views/layouts/viewer_layout.html.erb +++ b/app/views/layouts/viewer_layout.html.erb @@ -2,16 +2,12 @@ <%= csrf_meta_tag %> - + <%= vite_javascript_tag 'viewer' %> <%= stylesheet_link_tag 'viewer' %> <%= yield :head %> - - - <%= yield %> -