samvera · dlpierce · Apr 17, 2019 · Mar 21, 2019 · Apr 17, 2019
diff --git a/app/assets/stylesheets/hyrax/_viewer.scss b/app/assets/stylesheets/hyrax/_viewer.scss
@@ -1,8 +1,19 @@
+// Default for smaller screens, uses mobile panel
 .viewer-wrapper {
-  height: 500px;
+  height: 390px;
 }
 
-.viewer {
+.viewer-wrapper iframe {
   height: 100%;
-  padding: 10px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
+
+// Show various footer, header, left and right panels on larger screens only
+@media only screen and (min-width: 640px) {
+  .viewer-wrapper {
+    height: 640px;
+  }
+}
diff --git a/app/helpers/hyrax/iiif_helper.rb b/app/helpers/hyrax/iiif_helper.rb
@@ -8,5 +8,13 @@ def iiif_viewer_display(work_presenter, locals = {})
     def iiif_viewer_display_partial(work_presenter)
       'hyrax/base/iiif_viewers/' + work_presenter.iiif_viewer.to_s
     end
+
+    def universal_viewer_base_url
+      "#{request&.base_url}/uv.html"
+    end
+
+    def universal_viewer_config_url
+      "#{request&.base_url}/uv_config.json"
+    end
   end
 end
diff --git a/app/views/hyrax/base/iiif_viewers/_universal_viewer.html.erb b/app/views/hyrax/base/iiif_viewers/_universal_viewer.html.erb
@@ -1,4 +1,7 @@
-<%= PulUvRails::UniversalViewer.script_tag %>
 <div class="viewer-wrapper">
-  <div class="uv viewer" data-uri="<%= main_app.polymorphic_url [main_app, :manifest, presenter], { locale: nil } %>"></div>
+  <iframe
+    src="<%= universal_viewer_base_url %>#?manifest=<%= main_app.polymorphic_url [main_app, :manifest, presenter], { locale: nil } %>&config=<%= universal_viewer_config_url %>" 
+    allowfullscreen="true" 
+    frameborder="0" 
+  ></iframe>
 </div>
diff --git a/hyrax.gemspec b/hyrax.gemspec
@@ -68,7 +68,6 @@ SUMMARY
   spec.add_dependency 'oauth2', '~> 1.2'
   spec.add_dependency 'posix-spawn'
   spec.add_dependency 'power_converter', '~> 0.1', '>= 0.1.2'
-  spec.add_dependency 'pul_uv_rails', '~> 2.0'
   spec.add_dependency 'qa', '>= 2', '< 4' # questioning_authority
   spec.add_dependency 'rails_autolink', '~> 1.1'
   spec.add_dependency 'rdf-rdfxml' # controlled vocabulary importer

diff --git a/lib/generators/hyrax/install_generator.rb b/lib/generators/hyrax/install_generator.rb
@@ -173,6 +173,12 @@ def riiif_image_server
       generate 'hyrax:riiif' unless options[:'skip-riiif']
     end
 
+    def universalviewer_files
+      copy_file 'package.json', 'package.json'
+      copy_file 'uv.html', 'public/uv.html'
+      copy_file 'uv_config.json', 'public/uv_config.json'
+    end
+
     # Blacklight::Controller will by default add an after_action filter to discard all flash messages on xhr requests.
     # This has caused problems when we perform a post-redirect-get cycle using xhr and turbolinks.
     # This injector will modify the generated ApplicationController to skip this action.

diff --git a/lib/generators/hyrax/templates/package.json b/lib/generators/hyrax/templates/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "hyrax",
+  "private": true,
+  "repository": "git@github.com:samvera/hyrax.git",
+  "scripts": {
+    "install-uv": "yarn install --modules-folder ./public/uv"
+  },
+  "dependencies": {
+    "universalviewer": "^3.0.16"
+  }
+}
diff --git a/lib/generators/hyrax/templates/uv.html b/lib/generators/hyrax/templates/uv.html
@@ -0,0 +1,87 @@
+
+<!--
+    This is what the embed iframe src links to. It doesn't need to communicate with the parent page, only fill the available space and look for #? parameters
+-->
+
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <link rel="icon" href="favicon.ico">
+        <link rel="stylesheet" type="text/css" href="uv/universalviewer/uv/uv.css">
+        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+        <script type="text/javascript" src="uv/universalviewer/uv/lib/offline.js"></script>
+        <script type="text/javascript" src="uv/universalviewer/uv/helpers.js"></script>
+        <style>
+            body {
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+            }
+        </style>
+        <script type="text/javascript">
+        window.addEventListener('uvLoaded', function(e) { 
+                urlDataProvider = new UV.URLDataProvider(true);
+                var formattedLocales;
+                var locales = urlDataProvider.get('locales', '');
+
+                if (locales) {
+                    var names = locales.split(',');
+                    formattedLocales = [];
+
+                    for (var i in names) {
+                        var nameparts = String(names[i]).split(':');
+                        formattedLocales[i] = {name: nameparts[0], label: nameparts[1]};
+                    }
+
+                } else {
+                    formattedLocales = [
+                        {
+                            name: 'en-GB'
+                        }
+                    ]
+                }
+
+                uv = createUV('#uv', {
+                    root: './uv/universalviewer/uv',
+                    iiifResourceUri: urlDataProvider.get('manifest'),
+                    configUri: urlDataProvider.get('config'),
+                    collectionIndex: Number(urlDataProvider.get('c', 0)),
+                    manifestIndex: Number(urlDataProvider.get('m', 0)),
+                    sequenceIndex: Number(urlDataProvider.get('s', 0)),
+                    canvasIndex: Number(urlDataProvider.get('cv', 0)),
+                    rangeId: urlDataProvider.get('rid', 0),
+                    rotation: Number(urlDataProvider.get('r', 0)),
+                    xywh: urlDataProvider.get('xywh', ''),
+                    embedded: true,
+                    locales: formattedLocales
+                }, urlDataProvider);
+            }, false);
+        </script>
+    </head>    
+    <body>
+
+        <div id="uv" class="uv"></div>
+
+        <script>
+            $(function() {
+
+                var $UV = $('#uv');
+
+                function resize() {
+                    var windowWidth = window.innerWidth;
+                    var windowHeight = window.innerHeight;
+                    $UV.width(windowWidth);
+                    $UV.height(windowHeight);
+                }
+
+                $(window).on('resize' ,function() {
+                    resize();
+                });
+
+                resize();
+            });
+
+        </script>
+        <script type="text/javascript" src="uv/universalviewer/uv/uv.js"></script>
+    </body>
+</html>
diff --git a/lib/generators/hyrax/templates/uv_config.json b/lib/generators/hyrax/templates/uv_config.json
@@ -0,0 +1,3 @@
+{
+
+}
diff --git a/lib/hyrax/engine.rb b/lib/hyrax/engine.rb
@@ -15,7 +15,6 @@ class Engine < ::Rails::Engine
     require 'qa'
     require 'clipboard/rails'
     require 'legato'
-    require 'pul_uv_rails'
 
     require 'hydra/derivatives'
     require 'hyrax/controller_resource'

diff --git a/spec/features/work_show_spec.rb b/spec/features/work_show_spec.rb
@@ -47,7 +47,11 @@
       end
 
       # IIIF manifest does not include locale query param
-      expect(find('div.viewer:first')['data-uri']).to eq "http://www.example.com/concern/generic_works/#{work.id}/manifest"
+      expect(find('div.viewer-wrapper iframe')['src']).to eq(
+        "http://www.example.com/uv.html#?manifest=" \
+        "http://www.example.com/concern/generic_works/#{work.id}/manifest&" \
+        "config=http://www.example.com/uv_config.json"
+      )
     end
 
     it "allows adding work to a collection", clean_repo: true, js: true do

diff --git a/spec/helpers/hyrax/iiif_helper_spec.rb b/spec/helpers/hyrax/iiif_helper_spec.rb
@@ -41,4 +41,20 @@
       it { is_expected.to eq 'hyrax/base/iiif_viewers/mirador' }
     end
   end
+
+  describe '#universal_viewer_base_url' do
+    subject { helper.universal_viewer_base_url }
+
+    it 'defaults to universal viewer base path' do
+      expect(subject).to eq "http://test.host/uv.html"
+    end
+  end
+
+  describe '#universal_viewer_config_url' do
+    subject { helper.universal_viewer_config_url }
+
+    it 'defaults to universal viewer base path' do
+      expect(subject).to eq "http://test.host/uv_config.json"
+    end
+  end
 end
diff --git a/spec/test_app_templates/lib/generators/test_app_generator.rb b/spec/test_app_templates/lib/generators/test_app_generator.rb
@@ -128,4 +128,9 @@ def configure_action_cable_to_use_redis
               "development:\n  adapter: async",
               "development:\n  adapter: redis\n  url: redis://localhost:6379"
   end
+
+  def install_universal_viewer
+    exec('yarn run install-uv')
+  end
+
 end
diff --git a/spec/views/hyrax/base/show.html.erb_spec.rb b/spec/views/hyrax/base/show.html.erb_spec.rb
@@ -80,15 +80,15 @@
       let(:viewer_enabled) { true }
 
       it 'renders the UniversalViewer' do
-        expect(page).to have_selector 'div.viewer'
+        expect(page).to have_selector 'div.viewer-wrapper'
       end
     end
 
     context 'when presenter says it is disabled' do
       let(:viewer_enabled) { false }
 
       it 'omits the UniversalViewer' do
-        expect(page).not_to have_selector 'div.viewer'
+        expect(page).not_to have_selector 'div.viewer-wrapper'
       end
     end
   end