Merge pull request #5323 from avalonmediasystem/ramp-itemview-page

Ramp itemview page
avalonmediasystem · Aug 28, 2023 · f70f124 · f70f124
2 parents ff79c69 + cf47711
commit f70f124
Show file tree

Hide file tree

Showing 13 changed files with 222 additions and 287 deletions.
diff --git a/app/assets/javascripts/ramp_utils.js b/app/assets/javascripts/ramp_utils.js
@@ -1,16 +1,18 @@
-// Copyright 2011-2022, The Trustees of Indiana University and Northwestern
-//   University.  Licensed under the Apache License, Version 2.0 (the "License");
-//   you may not use this file except in compliance with the License.
-//
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software distributed
-//   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
-//   CONDITIONS OF ANY KIND, either express or implied. See the License for the
-//   specific language governing permissions and limitations under the License.
-
+/* 
+ * Copyright 2011-2023, The Trustees of Indiana University and Northwestern
+ *   University.  Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ * 
+ * You may obtain a copy of the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software distributed
+ *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ *   specific language governing permissions and limitations under the License.
+ * ---  END LICENSE_HEADER BLOCK  ---
+*/
 
 /**
  * Get new timeline scopes for active section playing

diff --git a/app/javascript/components/Ramp.jsx b/app/javascript/components/Ramp.jsx
@@ -1,46 +1,90 @@
+/* 
+ * Copyright 2011-2023, The Trustees of Indiana University and Northwestern
+ *   University.  Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ * 
+ * You may obtain a copy of the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software distributed
+ *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ *   specific language governing permissions and limitations under the License.
+ * ---  END LICENSE_HEADER BLOCK  ---
+*/
+
 import React from 'react';
-import { Transcript, IIIFPlayer, MediaPlayer, StructuredNavigation } from "@samvera/ramp";
+import { 
+  Transcript, 
+  IIIFPlayer, 
+  MediaPlayer, 
+  StructuredNavigation, 
+  MetadataDisplay, 
+  SupplmentalFiles 
+} from "@samvera/ramp";
 import 'video.js/dist/video-js.css';
 import "@samvera/ramp/dist/ramp.css";
-import { Col, Row } from 'react-bootstrap';
+import { Col, Row, Tab, Tabs } from 'react-bootstrap';
 import './Ramp.scss';
 
-const Ramp = ({ base_url, mo_id, canvas_count, share, timeline }) => {
-  const [transcriptsProp, setTrancsriptProp] = React.useState([]);
+const Ramp = ({ 
+  base_url, 
+  mo_id, 
+  master_files_count, 
+  share, 
+  timeline, 
+  in_progress, 
+  cdl 
+}) => {
   const [manifestUrl, setManifestUrl] = React.useState('');
 
   React.useEffect(() => {
     let url = `${base_url}/media_objects/${mo_id}/manifest.json`;
     setManifestUrl(url);
-    buildTranscripts(url);
   }, []);
 
-  const buildTranscripts = (url) => {
-    let trProps = [];
-    for(let i = 0; i < canvas_count; i++) {
-      let canvasTrs = { canvasId: i, items: [] };
-      canvasTrs.items = [{ title: '', url }];
-      trProps.push(canvasTrs);
-    }
-    setTrancsriptProp(trProps);
-  };
-
   return (
     <IIIFPlayer manifestUrl={manifestUrl}>
-      <MediaPlayer enableFileDownload={false} />
-      <div className="ramp--rails-content">
-        { timeline.canCreate && <div className="mr-1" dangerouslySetInnerHTML={{ __html: timeline.content }} /> }
-        { share.canShare && <div className="share-tabs" dangerouslySetInnerHTML={{ __html: share.content }} /> }
-      </div>
       <Row>
-        <Col>
-          <StructuredNavigation />
-        </Col>
-        <Col>
-          <Transcript
-            playerID="iiif-media-player"
-            transcripts={transcriptsProp}
-          />
+        {!in_progress &&
+          <Col sm={8}>
+            { (cdl.enabled && !cdl.can_stream) 
+              ? (<div dangerouslySetInnerHTML={{ __html: cdl.embed }} />)
+              : ( <React.Fragment>
+                    { master_files_count > 0 && 
+                      <React.Fragment>
+                        <MediaPlayer enableFileDownload={false} />
+                        <div className="ramp--rails-content">
+                          { timeline.canCreate && <div className="mr-1" dangerouslySetInnerHTML={{ __html: timeline.content }} /> }
+                          { share.canShare && <div className="share-tabs" dangerouslySetInnerHTML={{ __html: share.content }} /> }
+                        </div>
+                        <StructuredNavigation />
+                      </React.Fragment>
+                    }
+                  </React.Fragment>
+                )
+            }
+          </Col>
+        }
+        <Col sm={ (in_progress || master_files_count == 0) ? 12 : 4}>
+          { cdl.enabled && <div dangerouslySetInnerHTML={{ __html: cdl.destroy }}/> }
+          <Tabs>
+            <Tab eventKey="details" title="Details">
+              <MetadataDisplay showHeading={false} displayTitle={false}/>
+            </Tab>
+            { (cdl.can_stream && master_files_count != 0 && !in_progress) && 
+              <Tab eventKey="transcripts" title="Transcripts">
+                <Transcript
+                  playerID="iiif-media-player"
+                  manifestUrl={manifestUrl}
+                />
+              </Tab>
+            }
+            <Tab eventKey="files" title="Files">
+              <SupplmentalFiles showHeading={false} />
+            </Tab>
+          </Tabs>
         </Col>
       </Row>
     </IIIFPlayer>

diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
@@ -1,3 +1,19 @@
+/* 
+ * Copyright 2011-2023, The Trustees of Indiana University and Northwestern
+ *   University.  Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ * 
+ * You may obtain a copy of the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software distributed
+ *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ *   specific language governing permissions and limitations under the License.
+ * ---  END LICENSE_HEADER BLOCK  ---
+*/
+
 .iiif-player {
   .ramp--structured-nav {
     float: left;
@@ -22,5 +38,16 @@
   #share-list {
     margin-left: -9.25rem;
   }
-
+}
+
+.ramp--supplemental-files {
+  .ramp--supplemental-files-display-content {
+    padding-left: 0;
+  }
+
+  h4 {
+    border-bottom: 0.1rem solid #ddd;
+    padding-bottom: 0.75rem;
+    font-size: 1.25rem;
+  }
 }
diff --git a/app/javascript/components/ReactButtonContainer.jsx b/app/javascript/components/ReactButtonContainer.jsx
@@ -1,3 +1,19 @@
+/* 
+ * Copyright 2011-2023, The Trustees of Indiana University and Northwestern
+ *   University.  Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ * 
+ * You may obtain a copy of the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software distributed
+ *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ *   specific language governing permissions and limitations under the License.
+ * ---  END LICENSE_HEADER BLOCK  ---
+*/
+
 import React, { Component } from 'react';
 import { Modal } from 'react-bootstrap';
 import ReactSME from 'react-structural-metadata-editor';

diff --git a/app/views/media_objects/_destroy_checkout.html.erb b/app/views/media_objects/_destroy_checkout.html.erb
@@ -74,25 +74,29 @@ Unless required by applicable law or agreed to in writing, software distributed
         }
       }
 
-      // Set timer on page load
-      setTime();
-      // Check for remaining time on a minute interval
-      var interval = setInterval(setTime, 60000);
+      // Set timer on page load with a delay for React to render
+      // the return button on page
+      setTimeout(() => {
+        setTime();
+
+        // Check for remaining time on a minute interval
+        var interval = setInterval(setTime, 60000);
+      }, 5000);
 
       /* Interval update remaining time in the lending period */
       function setTime() {
         if($('#return-btn').length > 0) {
-        let remainingTime = calcRemainingTime();
-        if(remainingTime == 'expired') {
-          clearInterval(interval);
-          $('#check-out-expired').modal('show');
-        } else {
-          const { days, hours, minutes } = remainingTime;
-          var daysText = `${days}<br />day${days > 1 ? 's': ''}`;
-          $('.days').html(daysText);
-          var timeText = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}<br />hh:mm`;
-          $('.time').html(timeText);
-        }
+          let remainingTime = calcRemainingTime();
+          if(remainingTime == 'expired') {
+            clearInterval(interval);
+            $('#check-out-expired').modal('show');
+          } else {
+            const { days, hours, minutes } = remainingTime;
+            var daysText = `${days}<br />day${days > 1 ? 's': ''}`;
+            $('.days').html(daysText);
+            var timeText = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}<br />hh:mm`;
+            $('.time').html(timeText);
+          }
         }
       }
     });

diff --git a/app/views/media_objects/_embed_checkout.html.erb b/app/views/media_objects/_embed_checkout.html.erb
@@ -28,8 +28,4 @@ Unless required by applicable law or agreed to in writing, software distributed
       <% end %>
     </div>
   </div>
-<% else %>
-  <div class="alert">
-    <p>No media is associated with this item</p>
-  </div>
 <% end %>
diff --git a/app/views/media_objects/_item_view.html.erb b/app/views/media_objects/_item_view.html.erb
@@ -23,33 +23,24 @@ Unless required by applicable law or agreed to in writing, software distributed
 <% @page_type = @currentStreamInfo[:is_video] ? 'video' : 'audio' %>
 <% can_stream = lending_enabled?(@media_object) ? current_user && @media_object.current_checkout(current_user.id).present? : true %> 
 
-<% f_start, f_end = parse_media_fragment params['t'] %>
+<% in_progress = show_progress?(@masterFiles) %>
 <div class="row">
-  <div class="col-sm-8" id="left_column">
-    <% if lending_enabled?(@media_object) && !can_stream %>
-      <%= render 'embed_checkout' %>
-    <% elsif @currentStream %>
-      <%= render 'workflow_progress' %>
-      <%= react_component("Ramp", 
-        {
-          base_url: request.protocol+request.host_with_port, 
-          mo_id: @media_object.id, 
-          canvas_count: @media_object.master_files.size, 
-          share: { canShare: (will_partial_list_render? :share), content: render('share') },
-          timeline: { canCreate: (current_ability.can? :create, Timeline), content: render('timeline') }
-        }
-      ) %>
-    <% end %>
+  <div class="col-sm-8">
+    <%= render 'workflow_progress' %>
   </div>
-  <div class="col-sm-4" id="right-column">
-    <% if lending_enabled?(@media_object) %>
-      <%= render 'destroy_checkout' %>
-    <% end %>
-    <div id="metadata_container" class="col-sm-12">
-      <section id="metadata"><%= render "metadata_display" %></section>
-    </div>
+  <div class="<%= in_progress || !@currentStream ? 'col-sm-4' : 'col-sm-12' %>">
+    <%= react_component("Ramp", 
+      {
+        base_url: request.protocol+request.host_with_port, 
+        mo_id: @media_object.id, 
+        master_files_count: @media_object.master_files.size,
+        share: { canShare: (will_partial_list_render? :share), content: lending_enabled?(@media_object) ? (render('share') if can_stream) : render('share') },
+        timeline: { canCreate: (current_ability.can? :create, Timeline), content: lending_enabled?(@media_object) ? (render('timeline') if can_stream) : render('timeline') },
+        in_progress: in_progress,
+        cdl: { enabled: lending_enabled?(@media_object), can_stream: can_stream, embed: render('embed_checkout'), destroy: render('destroy_checkout') }
+      }
+    ) %>
   </div>
-
 </div>
 
 <% content_for :page_scripts do %>
@@ -60,7 +51,7 @@ Unless required by applicable law or agreed to in writing, software distributed
       let scrollInterval = setInterval(autoScroll, 500);
 
       function autoScroll () {
-        const isVideo = <%= @currentStreamInfo[:is_video] %>;
+        const isVideo = <%= @currentStream ? @currentStreamInfo[:is_video] : false %>;
         const player = document.getElementsByTagName('video');
         if(isVideo && player?.length > 0) {
           const screenHeight = screen.height;
@@ -74,6 +65,5 @@ Unless required by applicable law or agreed to in writing, software distributed
         }
       }
     });
-  </script>
-
+</script>
 <% end %>