From 6faaa2380b4d81e85abab6bef636e467d8732756 Mon Sep 17 00:00:00 2001
From: dananji <dwithana@iu.edu>
Date: Fri, 29 Jul 2022 13:52:44 -0400
Subject: [PATCH] SME with IIIF manifest usage

---
 Gemfile                                       |  3 +-
 Gemfile.lock                                  | 12 +++-
 .../components/ReactButtonContainer.jsx       | 28 +++++---
 app/models/iiif_canvas_presenter.rb           | 18 ++++-
 app/views/media_objects/_structure.html.erb   |  6 +-
 package.json                                  |  2 +-
 yarn.lock                                     | 69 +++++++++++--------
 7 files changed, 91 insertions(+), 47 deletions(-)

diff --git a/Gemfile b/Gemfile
index 0d4ffe2ce3..c368dd865c 100644
--- a/Gemfile
+++ b/Gemfile
@@ -51,7 +51,8 @@ gem 'avalon-about', git: 'https://github.com/avalonmediasystem/avalon-about.git'
 #gem 'bootstrap-sass', '< 3.4.1' # Pin to less than 3.4.1 due to change in behavior with popovers
 gem 'bootstrap-toggle-rails'
 gem 'bootstrap_form'
-gem 'iiif_manifest', '~> 0.6'
+# gem 'iiif_manifest', '~> 0.6'
+gem 'iiif_manifest', git: "https://github.com/samvera/iiif_manifest.git", branch: 'canvas_rendering'
 gem 'rack-cors', require: 'rack/cors'
 gem 'rails_same_site_cookie'
 gem 'recaptcha', require: 'recaptcha/rails'
diff --git a/Gemfile.lock b/Gemfile.lock
index 6fb6a6a090..ef8097243c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -71,6 +71,14 @@ GIT
       fugit (~> 1.1)
       sidekiq (>= 4.2.1)
 
+GIT
+  remote: https://github.com/samvera/iiif_manifest.git
+  revision: 329e7aedf7b3a19daa0d117102343afe98f0cd8f
+  branch: canvas_rendering
+  specs:
+    iiif_manifest (1.2.0)
+      activesupport (>= 4)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -487,8 +495,6 @@ GEM
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
     iconv (1.0.8)
-    iiif_manifest (0.6.0)
-      activesupport (>= 4)
     ims-lti (1.1.13)
       builder
       oauth (>= 0.4.5, < 0.6)
@@ -1029,7 +1035,7 @@ DEPENDENCIES
   hooks
   hydra-head (~> 12.0)
   iconv (~> 1.0.6)
-  iiif_manifest (~> 0.6)
+  iiif_manifest!
   ims-lti (~> 1.1.13)
   jbuilder (~> 2.0)
   jquery-datatables
diff --git a/app/javascript/components/ReactButtonContainer.jsx b/app/javascript/components/ReactButtonContainer.jsx
index 8956a5fa53..2a6dff5153 100644
--- a/app/javascript/components/ReactButtonContainer.jsx
+++ b/app/javascript/components/ReactButtonContainer.jsx
@@ -7,22 +7,25 @@ class ReactButtonContainer extends Component {
   constructor(props) {
     super(props);
 
-    const { audioURL, baseURL, initStructure, masterFileID, streamDuration } = this.props;
+    const {
+      baseURL,
+      masterFileID,
+      mediaObjectID,
+      canvasIndex,
+    } = this.props;
     this.state = {
       show: false,
       smeProps: {
         structureURL: baseURL + '/master_files/' + masterFileID + '/structure.json',
-        waveformURL: baseURL + '/master_files/' + masterFileID + '/waveform.json',
-        initStructure: initStructure,
-        audioURL: audioURL,
-        streamDuration: Number(streamDuration)
+        manifestURL: baseURL + '/media_objects/' + mediaObjectID + '/manifest.json',
+        canvasIndex: canvasIndex,
       },
       structureSaved: true
     };
   }
 
   handleClose = () => {
-    if(!this.state.structureSaved) {
+    if (!this.state.structureSaved) {
       if (confirm("Unsaved changes will be lost. Are you sure?")) {
         this.setState({
           show: false
@@ -44,10 +47,10 @@ class ReactButtonContainer extends Component {
 
   getStructureStatus = (value) => {
     this.setState({ structureSaved: value });
-  }
+  };
 
   render() {
-    const modalID = `edit_structure_${this.props.sectionIndex}`;
+    const modalID = `edit_structure_${this.props.canvasIndex}`;
     return (
       <div className="ReactButtonContainer">
         <button
@@ -57,7 +60,14 @@ class ReactButtonContainer extends Component {
           Edit Structure
         </button>
 
-        <Modal id={modalID} show={this.state.show} animation={false} onHide={this.handleClose} backdrop="static" className="sme-modal-wrapper" dialogClassName="modal-wrapper-body">
+        <Modal
+          id={modalID}
+          show={this.state.show}
+          animation={false}
+          onHide={this.handleClose}
+          backdrop="static"
+          className="sme-modal-wrapper"
+          dialogClassName="modal-wrapper-body">
           <Modal.Header closeButton>
             <Modal.Title>Edit Structure</Modal.Title>
           </Modal.Header>
diff --git a/app/models/iiif_canvas_presenter.rb b/app/models/iiif_canvas_presenter.rb
index 9cc8dad7dd..1b38909c99 100644
--- a/app/models/iiif_canvas_presenter.rb
+++ b/app/models/iiif_canvas_presenter.rb
@@ -37,6 +37,18 @@ def display_content
     master_file.is_video? ? video_content : audio_content
   end
 
+  def sequence_rendering
+    [
+      { 
+        "@id" => "#{master_file.waveform_master_file_url(master_file.id)}.json", 
+        "type" => "Dataset", 
+        "label" => "waveform.json",
+        "format" => "application/json"
+      }
+    ]
+  end
+
+
   private
 
     def video_content
@@ -77,7 +89,7 @@ def stream_urls
     def simple_iiif_range
       # TODO: embed_title?
       IiifManifestRange.new(
-        label: { '@none'.to_sym => [stream_info[:embed_title]] },
+        label: { "none" => [stream_info[:embed_title]] },
         items: [
           IiifCanvasPresenter.new(master_file: master_file, stream_info: stream_info, media_fragment: 't=0,')
         ]
@@ -102,7 +114,7 @@ def div_to_iiif_range(div_node)
       raise Nokogiri::XML::SyntaxError, "Empty root or Div node: #{div_node[:label]}" if items.empty?
 
       IiifManifestRange.new(
-        label: { '@none' => [div_node[:label]] },
+        label: { "none" => [div_node[:label]] },
         items: items
       )
     end
@@ -110,7 +122,7 @@ def div_to_iiif_range(div_node)
     def span_to_iiif_range(span_node)
       fragment = "t=#{parse_hour_min_sec(span_node[:begin])},#{parse_hour_min_sec(span_node[:end])}"
       IiifManifestRange.new(
-        label: { '@none' => [span_node[:label]] },
+        label: { "none" => [span_node[:label]] },
         items: [
           IiifCanvasPresenter.new(master_file: master_file, stream_info: stream_info, media_fragment: fragment)
         ]
diff --git a/app/views/media_objects/_structure.html.erb b/app/views/media_objects/_structure.html.erb
index 89a6813162..2a02cdb006 100644
--- a/app/views/media_objects/_structure.html.erb
+++ b/app/views/media_objects/_structure.html.erb
@@ -14,7 +14,7 @@ Unless required by applicable law or agreed to in writing, software distributed
 ---  END LICENSE_HEADER BLOCK  ---
 %>
 
-<p class="muted">Drag files to reorder them.</p>
+<p class="text-muted">Drag files to reorder them.</p>
 
 <% if @masterFiles.blank? %>
   <div class="well">There are no media files</div>
@@ -70,9 +70,9 @@ Unless required by applicable law or agreed to in writing, software distributed
             <div class="btn-toolbar">
               <label class="btn btn-primary btn-struct mr-1 file-upload-label" for="structure_<%= index %>_filedata"><%= section.structuralMetadata.present? ? 'Replace' : 'Upload'%></label>
               <% if section.structuralMetadata.valid? %>
-              <%= react_component("ReactButtonContainer", {sectionIndex: index, masterFileID: section.id, baseURL: request.protocol+request.host_with_port, streamDuration: section.duration, audioURL: stream_url, initStructure: section.structuralMetadata.as_json}) %>
+                <%= react_component("ReactButtonContainer", {canvasIndex: index, mediaObjectID: @media_object.id, masterFileID: section.id, baseURL: request.protocol+request.host_with_port}) %>
               <% else %>
-              <%= react_component("ReactButtonContainer", {sectionIndex: index, masterFileID: section.id, baseURL: request.protocol+request.host_with_port, streamDuration: section.duration, audioURL: stream_url, initStructure: { label: "#{item_label}", type: "div", items: [] }}, html_options={ class: 'react-button-container' }) %>
+                <%= react_component("ReactButtonContainer", {canvasIndex: index, mediaObjectID: @media_object.id, masterFileID: section.id, baseURL: request.protocol+request.host_with_port}, html_options={ class: 'react-button-container' }) %>
               <% end %>
               <button type="button" class="btn btn-primary btn-struct mr-1" value="Advanced Edit" data-toggle="modal"
                 data-target="#advanced_edit_structure_<%= index %>">Advanced Edit</button>
diff --git a/package.json b/package.json
index fa2041f6ef..8ef25aa0cd 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "react": "^16.8.4",
     "react-bootstrap": "^1.0.0",
     "react-dom": "^16.8.4",
-    "react-structural-metadata-editor": "https://github.com/avalonmediasystem/react-structural-metadata-editor",
+    "react-structural-metadata-editor": "https://github.com/avalonmediasystem/react-structural-metadata-editor#remove-initstructure",
     "react_ujs": "^2.4.4",
     "url-search-params-polyfill": "^7.0.1",
     "video.js": "^7.15.4",
diff --git a/yarn.lock b/yarn.lock
index 8e8d2663e9..5e0b220cd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -894,11 +894,11 @@
     "@babel/plugin-transform-react-pure-annotations" "^7.14.5"
 
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.15.4", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.3", "@babel/runtime@^7.9.2":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
-  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
+  integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
   dependencies:
-    regenerator-runtime "^0.13.4"
+    regenerator-runtime "^0.13.11"
 
 "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5":
   version "7.16.3"
@@ -1002,6 +1002,11 @@
   resolved "https://registry.yarnpkg.com/@iiif/vocabulary/-/vocabulary-1.0.21.tgz#5808f62da11b64ca42a895025844be088df9f48a"
   integrity sha512-XUD8RYeBiEzv8rdpC9tNBaQ0FMZuGWIkPsmcFhnqXW+5WjZmRLhgqycuoGwIjxt9nPsDgW1IxuiWduNgbLl9UA==
 
+"@iiif/vocabulary@^1.0.26":
+  version "1.0.26"
+  resolved "https://registry.yarnpkg.com/@iiif/vocabulary/-/vocabulary-1.0.26.tgz#557fab623100ca860daeddf6e4de46a8f94aaf86"
+  integrity sha512-yOsMDg5C90iMfD5HSydoTDzmOM/ki5zGiu4DbHpzRueM7D+12IcDHeai2A8QvEroS8HCJl5M1Edbju5rOlPIpg==
+
 "@jridgewell/gen-mapping@^0.3.0":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
@@ -1333,9 +1338,9 @@
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
 "@types/react-redux@^7.1.20":
-  version "7.1.24"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0"
-  integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==
+  version "7.1.25"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
+  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
   dependencies:
     "@types/hoist-non-react-statics" "^3.3.0"
     "@types/react" "*"
@@ -1892,11 +1897,6 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-base-64@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
-  integrity sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==
-
 base64-js@^1.0.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -2888,9 +2888,9 @@ csso@^4.0.2:
     css-tree "^1.1.2"
 
 csstype@^2.5.2:
-  version "2.6.20"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
-  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
+  version "2.6.21"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
 csstype@^3.0.2:
   version "3.0.9"
@@ -3869,9 +3869,9 @@ hex-color-regex@^1.1.0:
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
 hls.js@^1.1.2:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.2.1.tgz#09b0207c60fcb3340a88e8d3d1523799fe5fbedf"
-  integrity sha512-+m/5+ikSpmQQvb6FmVWZUZfzvTJMn/QVfiCGP1Oq9WW4RKrAvxlExkhhbcVGgGqLNPFk1kdFkVQur//wKu3JVw==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.3.1.tgz#2e43949aeaee8f3d54cabd7c4c1a9a718a03e7c2"
+  integrity sha512-6f4Qyrfj9sNUWMzNFKruqeD2KdisOwQ1GQJqnWAgMQ1hequlFK7e2dmF9qQD3mF/RI76hvztCMBptlPb+HcDow==
 
 "hls.js@https://github.com/avalonmediasystem/hls.js#stricter_ts_probing":
   version "0.13.1"
@@ -4832,6 +4832,16 @@ manifesto.js@^4.1.0:
     isomorphic-unfetch "^3.0.0"
     lodash "^4.17.21"
 
+manifesto.js@^4.2.14:
+  version "4.2.16"
+  resolved "https://registry.yarnpkg.com/manifesto.js/-/manifesto.js-4.2.16.tgz#084adf6662ac2b4df41a44c29939442acc6b08ae"
+  integrity sha512-eDwA1nv2rF0VlsHgXV+/La8XunOl0rYxBiLWDUhvNLHpqFctmjJ2PAMpwnq+SptzEL4HKHXsqcKl4KVBljFZhA==
+  dependencies:
+    "@edsilv/http-status-codes" "^1.0.3"
+    "@iiif/vocabulary" "^1.0.26"
+    isomorphic-unfetch "^3.0.0"
+    lodash "^4.17.21"
+
 map-cache@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
@@ -6581,9 +6591,9 @@ react-overlays@^5.1.1:
     warning "^4.0.3"
 
 react-redux@^7.2.6:
-  version "7.2.8"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"
-  integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==
+  version "7.2.9"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
+  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
   dependencies:
     "@babel/runtime" "^7.15.4"
     "@types/react-redux" "^7.1.20"
@@ -6592,9 +6602,9 @@ react-redux@^7.2.6:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
-"react-structural-metadata-editor@https://github.com/avalonmediasystem/react-structural-metadata-editor":
+"react-structural-metadata-editor@https://github.com/avalonmediasystem/react-structural-metadata-editor#remove-initstructure":
   version "1.1.0"
-  resolved "https://github.com/avalonmediasystem/react-structural-metadata-editor#649f6e415a414c04e231e9f400bf268915209956"
+  resolved "https://github.com/avalonmediasystem/react-structural-metadata-editor#3b57f0d2886b4fbb7419ec03ee674c2de65108db"
   dependencies:
     "@babel/runtime" "^7.4.4"
     "@fortawesome/fontawesome-svg-core" "^1.2.4"
@@ -6603,9 +6613,9 @@ react-redux@^7.2.6:
     "@material-ui/core" "^4.12.0"
     "@material-ui/icons" "4.2.1"
     axios "^0.21.2"
-    base-64 "^0.1.0"
     hls.js "^1.1.2"
     lodash "4.17.21"
+    manifesto.js "^4.2.14"
     peaks.js "^0.26.0"
     prop-types "^15.6.2"
     react-bootstrap "1.6.4"
@@ -6710,9 +6720,9 @@ readdirp@~3.6.0:
     picomatch "^2.2.1"
 
 redux-thunk@^2.3.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
-  integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
+  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
 
 redux@^4.0.0, redux@^4.0.1:
   version "4.2.0"
@@ -6733,6 +6743,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"