Merge branch 'annotation-on-video'

2406eda5 · Loïs Poujade · 4d7b50e6 · 047b2063 · 2406eda5 · 2406eda5
Verified Commit 2406eda5 authored 2 years ago by Loïs Poujade
--- a/.gitignore
+++ b/.gitignore
 dist/
 coverage/
 node_modules/
-package-lock.json
 *.log
 *.tgz
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
+upstream_tests:
+  image: ghcr.io/puppeteer/puppeteer:latest
+  before_script:
+    - npm ci
+    - npm run build
+  script:
+    - npm run test:ci
+  artifacts:
+    when: always
+    paths:
+      - junit.xml
+    reports:
+      junit: junit.xml
--- a/LICENSE
+++ b/LICENSE
+This project is dual-licensed under the Apache License 2.0 and the MIT license.
+Copyright 2021 Digital Humanities Initiative, Center for Evolving Humanities, Graduate School of Humanities and Sociology, The University of Tokyo
+Copyright 2021 International Institute for Digital Humanities
+Copyright 2021 Research Institute for Languages and Cultures of Asia and Africa, Tokyo University of Foreign Studies
+Copyright 2021 FLX Style
+Includes content from Mirador licensed under the Apache License 2.0.
 Copyright 2020 The Board of Trustees of the Leland Stanford Junior University
 Licensed under the Apache License, Version 2.0 (the "License");

--- a/README.md
+++ b/README.md
+## Mirador with support for displaying annotations on videos
+### Project
+https://dh.l.u-tokyo.ac.jp/activity/iiif/video-annotation
+### Demo
+- https://dzkimgs.l.u-tokyo.ac.jp/videos/m3/cat_video.html
+- https://dzkimgs.l.u-tokyo.ac.jp/videos/m3/video.html
+### Manifest Sample
+- https://dzkimgs.l.u-tokyo.ac.jp/videos/cat2020/manifest.json
+- https://dzkimgs.l.u-tokyo.ac.jp/videos/iiif_in_japan_2017/manifest.json
+### Prebuilt
+https://dzkimgs.l.u-tokyo.ac.jp/videos/m3/mirador.min.js
+### License
+This project is dual-licensed under the Apache License 2.0 and the MIT license. See [LICENSE](LICENSE) for details.
+---
 ⚠️ This project is for Mirador 3, the latest version of Mirador. For Mirador 2, please see [ProjectMirador/mirador2](https://github.com/projectmirador/mirador2) or legacy documentation on the [Mirador 2 wiki](https://github.com/ProjectMirador/mirador-2-wiki/wiki). Please note that the community's focus is on Mirador 3, and are unlikely to accept pull requests or provide support for Mirador 2.
 # Mirador
 ![Node.js CI](https://github.com/ProjectMirador/mirador/workflows/Node.js%20CI/badge.svg) [![codecov](https://codecov.io/gh/ProjectMirador/mirador/branch/master/graph/badge.svg)](https://codecov.io/gh/ProjectMirador/mirador) 

--- a/__tests__/fixtures/version-3/video.json
+++ b/__tests__/fixtures/version-3/video.json
+{
+  "@context": "http://iiif.io/api/presentation/3/context.json",
+  "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/manifest.json",
+  "type": "Manifest",
+  "label": {
+    "en": [
+      "Video Example 3"
+    ]
+  },
+  "items": [
+    {
+      "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas",
+      "type": "Canvas",
+      "height": 360,
+      "width": 640,
+      "duration": 1801.055,
+      "items": [
+        {
+          "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas/page",
+          "type": "AnnotationPage",
+          "items": [
+            {
+              "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas/page/annotation",
+              "type": "Annotation",
+              "motivation": "painting",
+              "body": {
+                "id": "https://fixtures.iiif.io/video/indiana/30-minute-clock/medium/30-minute-clock.mp4",
+                "type": "Video",
+                "height": 360,
+                "width": 640,
+                "duration": 1801.055,
+                "format": "video/mp4"
+              },
+              "target": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
--- a/__tests__/integration/mirador/auth.html
+++ b/__tests__/integration/mirador/auth.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/blank.html
+++ b/__tests__/integration/mirador/blank.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/collections.html
+++ b/__tests__/integration/mirador/collections.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/contentsearch.html
+++ b/__tests__/integration/mirador/contentsearch.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/embedding.html
+++ b/__tests__/integration/mirador/embedding.html
@@ -25,7 +25,6 @@
     }
    </style>
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <h1>This is the first instance</h1>

--- a/__tests__/integration/mirador/index.html
+++ b/__tests__/integration/mirador/index.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/layers.html
+++ b/__tests__/integration/mirador/layers.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/level0.html
+++ b/__tests__/integration/mirador/level0.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador - Level 0</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/minimalist.html
+++ b/__tests__/integration/mirador/minimalist.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/rtl.html
+++ b/__tests__/integration/mirador/rtl.html
@@ -27,7 +27,6 @@
       position: relative;
     }
    </style>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <h1>This is the first instance dir="rtl"</h1>

--- a/__tests__/integration/mirador/svg_annos.html
+++ b/__tests__/integration/mirador/svg_annos.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/toc.html
+++ b/__tests__/integration/mirador/toc.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador - Table of contents</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/v3.html
+++ b/__tests__/integration/mirador/v3.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador - Prezi v3</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/video.html
+++ b/__tests__/integration/mirador/video.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Mirador</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>
  <body>
    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>

--- a/__tests__/integration/mirador/video.test.js
+++ b/__tests__/integration/mirador/video.test.js
+describe('Basic end to end Mirador with video content', () => {
+  beforeAll(async () => {
+    await page.goto('http://localhost:4488/__tests__/integration/mirador/blank.html');
+  });
+  it('loads a manifest and displays it', async () => {
+    await page.waitForSelector('#addBtn');
+    await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
+    await expect(page).toFill('#manifestURL', 'http://localhost:4488/__tests__/fixtures/version-3/video.json');
+    await expect(page).toClick('#fetchBtn');
+    await expect(page).toMatchElement('[data-manifestid="http://localhost:4488/__tests__/fixtures/version-3/video.json"] button');
+    await expect(page).toClick('[data-manifestid="http://localhost:4488/__tests__/fixtures/version-3/video.json"] button');
+    await expect(page).toMatchElement(
+      'h2',
+      { text: /Video Example 3/ },
+    );
+  });
+  it('render subtitles', async () => {
+    await page.waitForSelector('#addBtn');
+    await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
+    await expect(page).toFill('#manifestURL', 'https://preview.iiif.io/cookbook/0219-using-caption-file/recipe/0219-using-caption-file/manifest.json');
+    await expect(page).toClick('#fetchBtn');
+    await expect(page).toMatchElement('[data-manifestid="https://preview.iiif.io/cookbook/0219-using-caption-file/recipe/0219-using-caption-file/manifest.json"] button');
+    await expect(page).toClick('[data-manifestid="https://preview.iiif.io/cookbook/0219-using-caption-file/recipe/0219-using-caption-file/manifest.json"] button');
+    await expect(page).toMatchElement('track[src="https://fixtures.iiif.io/video/indiana/lunchroom_manners/lunchroom_manners.vtt"]');
+  });
+});