Merge pull request #5544 from avalonmediasystem/ramp-start-canvas-time

Use start canvas and time props in Ramp for sections and custom start times

app/assets/javascripts/ramp_utils.js

@@ -221,7 +221,7 @@ function disableEnableCurrentTrack(activeTrack, currentTime, isSeeked, sectionTi
       $('#playlistitem_scope_track').closest('label').css('cursor', 'pointer');
     }
   } else {
-    // Whena activeTrack is undefined, disable the current track option
+    // When activeTrack is undefined, disable the current track option
     $('#playlistitem_scope_track')[0].disabled = true;
     $('#current-track-name').text('');
     $('#current-track-text').addClass('disabled-option');

app/javascript/components/MediaObjectRamp.jsx

@@ -39,8 +39,7 @@ const ExpandCollapseArrow = () => {
 };
 
 const Ramp = ({
-  base_url,
-  mo_id,
+  urls,
   master_files_count,
   has_structure,
   title,
@@ -52,13 +51,33 @@ const Ramp = ({
   has_transcripts
 }) => {
   const [manifestUrl, setManifestUrl] = React.useState('');
+  const [startCanvasId, setStartCanvasId] = React.useState();
+  const [startCanvasTime, setStartCanvasTime] = React.useState();
   const [isClosed, setIsClosed] = React.useState(false);
 
   let expandCollapseBtnRef = React.useRef();
   let interval;
 
   React.useEffect(() => {
+    const { base_url, fullpath_url } = urls;
+    // Split the current path from the time fragment in the format .../:id?t=time
+    let [ fullpath, start_time ] = fullpath_url.split('?t=');
+    // Split the current path in the format /media_objects/:mo_id/section/:mf_id
+    let [ _, __, mo_id, ___, start_canvas ] = fullpath.split('/');
+    // Build the manifest URL
     let url = `${base_url}/media_objects/${mo_id}/manifest.json`;
+
+    // Set start Canvas ID and start time in the state for Ramp
+    setStartCanvasId(
+      start_canvas && start_canvas != undefined
+      ? `${base_url}/media_objects/${mo_id}/manifest/canvas/${start_canvas}` 
+      : undefined
+      );
+    setStartCanvasTime(
+      start_time && start_time != undefined
+      ? parseFloat(start_time)
+      : undefined
+    )
     setManifestUrl(url);
 
     // Attach player event listeners when there's structure
@@ -120,7 +139,9 @@ const Ramp = ({
 
   return (
     <IIIFPlayer manifestUrl={manifestUrl} 
-      customErrorMessage='This page encountered an error. Please refresh or contact an administrator.'>
+      customErrorMessage='This page encountered an error. Please refresh or contact an administrator.'
+      startCanvasId={startCanvasId}
+      startCanvasTime={startCanvasTime}>
       <Row className="ramp--all-components ramp--itemview">
         <Col sm={8}>
           { (cdl.enabled && !cdl.can_stream)

app/views/media_objects/_item_view.html.erb

@@ -41,8 +41,7 @@ Unless required by applicable law or agreed to in writing, software distributed
   <div class="col-sm-12">
     <%= react_component("MediaObjectRamp",
       {
-        base_url: request.protocol+request.host_with_port,
-        mo_id: @media_object.id,
+        urls: { base_url: request.protocol + request.host_with_port, fullpath_url: request.fullpath },
         master_files_count: @media_object.master_files.size,
         has_structure: @media_object.master_files.any?{ |mf| mf.has_structuralMetadata? },
         title: { content: render('title') },
@@ -85,20 +84,21 @@ Unless required by applicable law or agreed to in writing, software distributed
       function initTranscriptCheck() {
         let player = document.getElementById('iiif-media-player');
         if(player) {
-          addPlayerEventListeners(player.player, () => {
+          addPlayerEventListeners(player, () => {
             clearInterval(timeCheck);
           });
         }
       }
 
       function addPlayerEventListeners(player) {
-        player.on('loadedmetadata', () => {
-          transcriptCheck();
+        player.player.on('loadedmetadata', () => {
+          let canvasindex = player.dataset['canvasindex'];
+          transcriptCheck(canvasindex);
         });
       }
 
-      function transcriptCheck() {
-        let sectionId = sectionIds[canvasIndex];
+      function transcriptCheck(canvasindex) {
+        let sectionId = sectionIds[canvasindex];
         let transcriptTab = document.evaluate('//a[text()="Transcripts"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
         let detailTab = document.evaluate('//a[text()="Details"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
 

app/views/media_objects/_share.html.erb

@@ -28,7 +28,7 @@ Unless required by applicable law or agreed to in writing, software distributed
 <script>
   let canvasIndex = 0;
   $(document).ready(function() {
-    const mediaObjectId = <% @media_object.id %>
+    const mediaObjectId = <%= @media_object.id.to_json.html_safe %>;
     const sectionIds = <%= @media_object.ordered_master_file_ids.to_json.html_safe %>;
     const event = new CustomEvent('canvasswitch', { detail: { lti_share_link: '', link_back_url: '', embed_code: '' } })
     function canvasIndexListener() {

app/views/media_objects/_timeline.html.erb

@@ -48,7 +48,7 @@ $(document).ready(function() {
     let player = document.getElementById('iiif-media-player');
     let scopes = [];
     let title, streamId;
-    if(player) {
+    if(player && player != undefined) {
       player.player.on('loadedmetadata', () => {
         let timelineBtn = document.getElementById('timelineBtn');
         if(timelineBtn) {

yarn.lock

@@ -1339,7 +1339,7 @@
 
 "@samvera/ramp@https://github.com/samvera-labs/ramp.git":
   version "2.0.0"
-  resolved "https://github.com/samvera-labs/ramp.git#a4773a5f879c55191555c485e307fbb44ecdeea3"
+  resolved "https://github.com/samvera-labs/ramp.git#7817d10be2c3d5a319d6e7624f781d9163986172"
   dependencies:
     "@rollup/plugin-json" "^6.0.1"
     "@silvermine/videojs-quality-selector" "^1.2.4"
@@ -4825,9 +4825,9 @@ react-dom@^17.0.1:
     scheduler "^0.20.2"
 
 react-error-boundary@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.11.tgz#36bf44de7746714725a814630282fee83a7c9a1c"
-  integrity sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.12.tgz#59f8f1dbc53bbbb34fc384c8db7cf4082cb63e2c"
+  integrity sha512-kJdxdEYlb7CPC1A0SeUY38cHpjuu6UkvzKiAmqmOFL21VRfMhOcWxTCBgLVCO0VEMh9JhFNcVaXlV4/BTpiwOA==
   dependencies:
     "@babel/runtime" "^7.12.5"