feat: Upgrade Universal Viewer to v4 (#52)

* feat: Upgrade Universal Viewer to v4

* ci: keep UV3 for audio, use UV4 for images

Author: sourcefilter

.github/workflows/ci.yml

@@ -49,8 +49,6 @@ jobs:
                 ;;
             esac
           fi
-      - uses: actions/setup-node@fd4bd829f2dd6b6c1420bd94a93449c54612ffc2
-        if: env.DESTINATION_DIR
       - run: npm install && npm run build
         if: env.DESTINATION_DIR
       - name: deploy

.gitignore

@@ -2,8 +2,11 @@
 node_modules
 /dist
 /public/uv
+/public/uv3
 /public/mejs
 /public/jquery
+/cypress/screenshots
+/cypress/videos
 
 
 # local env files

cypress.json

@@ -1,5 +1,7 @@
 {
     "baseUrl": "http://localhost:8080",
-    "defaultCommandTimeout": 10000
+    "defaultCommandTimeout": 10000,
+    "viewportWidth": 1200,
+    "viewportHeight": 660
 }
 

cypress/integration/audio.spec.js

@@ -6,19 +6,19 @@ describe('An audio object', () => {
 
       // UV loads inside an iframe
       cy.frameLoaded("#universalviewer-iframe", {
-        url: '/uv.html' + URL_PARAMETERS,
+        url: '/uv3.html' + URL_PARAMETERS,
       });
     })
 
 
     it('loads in Universal Viewer!', () => {
-      cy.visit('/uv.html' + URL_PARAMETERS)
+      cy.visit('/uv3.html' + URL_PARAMETERS)
 
       // Shows track title
       cy.contains("Side A").should("exist").should("be.visible")
 
       // Settings Button
-      cy.contains("button", "Settings").should("exist").should("be.visible")
+      cy.get("button.settings").should("exist").should("be.visible")
 
       // left panel is enabled
       cy.get(".leftPanel").should("exist").should("be.visible")
@@ -27,7 +27,7 @@ describe('An audio object', () => {
       cy.contains("Print").should("not.exist")
 
       // "Share" is disabled
-      cy.contains("Share").should("exist").should("not.be.visible")
+      cy.get("button.share").should("exist").should("not.be.visible")
 
       // Enter / exit fullcreen view
       cy.contains("Full Screen").should("exist").should("be.visible")

cypress/integration/image.spec.js

@@ -15,10 +15,10 @@ describe('A simple image', () => {
     cy.visit('/uv.html' + URL_PARAMETERS)
 
     // Shows title
-    cy.contains('div.title', "1985 - The California Poppy").should("exist").should("be.visible")
+    cy.contains('.title', "1985 - The California Poppy").should("exist").should("be.visible")
 
     // Settings Button
-    cy.contains("button", "Settings").should("exist").should("be.visible")
+    cy.get("button.settings").should("exist").should("be.visible")
 
     // left panel is disabled
     cy.get(".leftPanel").should("exist").should("not.be.visible")

cypress/integration/manuscript.spec.js

@@ -10,32 +10,31 @@ describe('A manuscript', () => {
     });
   })
 
-
   it('loads in Universal Viewer!', () => {
     cy.visit('/uv.html' + URL_PARAMETERS)
 
     // Shows title
-    cy.contains('div.title', "Manuscript No. 1: Gladzor Gospels").should("exist").should("be.visible")
+    cy.contains('.title', "Manuscript No. 1: Gladzor Gospels").should("exist").should("be.visible")
 
     // Settings Button
-    cy.contains("button", "Settings").should("exist").should("be.visible")
+    cy.get("button.settings").should("exist").should("be.visible")
 
     // left panel
     // is visible, first page selected
     cy.get(".leftPanel").should("exist").should("be.visible")
-      .get("#thumb0").should("have.class", "selected")
+      .get("#thumb-0 > .thumb").should("have.class", "selected")
     // navigate to 3rd page by clicking thumbnail
-    cy.get("#thumb2").should("not.have.class", "selected")
-      .get("#thumb2 > div.wrap.loaded > img").click()
-      .get("#thumb0").should("not.have.class", "selected")
-      .get("#thumb1").should("have.class", "selected")
-      .get("#thumb2").should("have.class", "selected")
+    cy.get("#thumb-2 > .thumb").should("not.have.class", "selected")
+      .get("#thumb-2 img").click()
+      .get("#thumb-0 > .thumb").should("not.have.class", "selected")
+      .get("#thumb-1 > .thumb").should("have.class", "selected")
+      .get("#thumb-2 > .thumb").should("have.class", "selected")
     // navigate to 4th page by clicking thumbnail
-    cy.get("#thumb3").should("not.have.class", "selected")
+    cy.get("#thumb-3 > .thumb").should("not.have.class", "selected")
       .contains("[Gladzor Gospels: page 2]").click()
-      .get("#thumb2").should("not.have.class", "selected")
-      .get("#thumb3").should("have.class", "selected")
-      .get("#thumb4").should("have.class", "selected")
+      .get("#thumb-2 > .thumb").should("not.have.class", "selected")
+      .get("#thumb-3 > .thumb").should("have.class", "selected")
+      .get("#thumb-4 > .thumb").should("have.class", "selected")
     // collapse left panel
     cy.get(".expandFullButton").should("exist").should("not.be.visible")
       .get(".collapseButton").should("exist").should("be.visible").click()