Merge pull request #5466 from avalonmediasystem/vanish_tabs

Do not display transcript and file tabs when none are present

app/javascript/components/Ramp.jsx

@@ -31,8 +31,8 @@ import './Ramp.scss';
 const ExpandCollapseArrow = () => {
   return (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" className="expand-collapse-svg" fill="currentColor" viewBox="0 0 16 16">
-    <path 
-      fillRule="evenodd" 
+    <path
+      fillRule="evenodd"
       d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z">
     </path>
   </svg>);
@@ -48,7 +48,9 @@ const Ramp = ({
   timeline,
   playlist,
   in_progress,
-  cdl
+  cdl,
+  has_files,
+  has_transcripts
 }) => {
   const [manifestUrl, setManifestUrl] = React.useState('');
   const [isClosed, setIsClosed] = React.useState(false);
@@ -64,7 +66,7 @@ const Ramp = ({
     if(has_structure) {
       interval = setInterval(addPlayerEventListeners, 500);
     }
-    
+
     // Clear interval upon component unmounting
     return () => clearInterval(interval);
   }, []);
@@ -180,12 +182,12 @@ const Ramp = ({
                                 </button>
                               }
                             </Col>
-                            { has_structure && 
+                            { has_structure &&
                               <Col className="ramp-button-group-2">
-                                <button 
+                                <button
                                   className="btn btn-outline expand-collapse-toggle-button expanded"
-                                  id="expand_all_btn" 
-                                  onClick={handleCollapseExpand} 
+                                  id="expand_all_btn"
+                                  onClick={handleCollapseExpand}
                                   ref={expandCollapseBtnRef}
                                 >
                                   <ExpandCollapseArrow />
@@ -223,17 +225,19 @@ const Ramp = ({
             <Tab eventKey="details" title="Details">
               <MetadataDisplay showHeading={false} displayTitle={false}/>
             </Tab>
-            { (cdl.can_stream && master_files_count != 0 && !in_progress) &&
+            { (cdl.can_stream && master_files_count != 0 && !in_progress && has_transcripts) &&
               <Tab eventKey="transcripts" title="Transcripts">
                 <Transcript
                   playerID="iiif-media-player"
                   manifestUrl={manifestUrl}
                 />
               </Tab>
             }
-            <Tab eventKey="files" title="Files">
-              <SupplementalFiles showHeading={false} />
-            </Tab>
+            { (has_files) &&
+              <Tab eventKey="files" title="Files">
+                <SupplementalFiles showHeading={false} />
+              </Tab>
+            }
           </Tabs>
         </Col>
       </Row>

app/models/media_object.rb

@@ -411,4 +411,8 @@ def collect_ips_for_index ip_strings
       end
       ips.flatten.compact.uniq || []
     end
+
+    def sections_with_files(tag: '*')
+      ordered_master_file_ids.select { |m| SpeedyAF::Proxy::MasterFile.find(m).supplemental_files(tag: tag).present? }
+    end
 end

app/presenters/speedy_af/proxy/media_object.rb

@@ -1,11 +1,11 @@
 # 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
@@ -140,6 +140,10 @@ def governing_policies
     @governing_policies ||= Array(attrs[:isGovernedBy]).collect { |id| SpeedyAF::Base.find(id) }
   end
 
+  def sections_with_files(tag: '*')
+    ordered_master_file_ids.select { |m| SpeedyAF::Proxy::MasterFile.find(m).supplemental_files(tag: tag).present? }
+  end
+
   protected
 
   # Overrides from SpeedyAF::Base

app/views/media_objects/_item_view.html.erb

@@ -50,7 +50,9 @@ Unless required by applicable law or agreed to in writing, software distributed
         timeline: { canCreate: (current_ability.can? :create, Timeline), content: lending_enabled?(@media_object) ? (render('timeline') if can_stream) : render('timeline') },
         playlist: { canCreate: (current_ability.can? :create, Playlist), tab: render('add_to_playlist') },
         in_progress: in_progress,
-        cdl: { enabled: lending_enabled?(@media_object), can_stream: can_stream, embed: render('embed_checkout'), destroy: render('destroy_checkout') }
+        cdl: { enabled: lending_enabled?(@media_object), can_stream: can_stream, embed: render('embed_checkout'), destroy: render('destroy_checkout') },
+        has_files: @media_object.supplemental_files.present? || @media_object.sections_with_files.present?,
+        has_transcripts: @media_object.sections_with_files(tag: 'transcript').present?
       }
     ) %>
   </div>
@@ -61,7 +63,10 @@ Unless required by applicable law or agreed to in writing, software distributed
     // When viewing video on smaller devices scroll to page content to fully
     // display the video player
     $(document).ready(function () {
+      const sectionIds = <%= @media_object.ordered_master_file_ids.to_json.html_safe %>;
+      const transcriptSections = <%= @media_object.sections_with_files(tag: 'transcript').to_json.html_safe %>;
       let scrollInterval = setInterval(autoScroll, 500);
+      let timeCheck = setInterval(initTranscriptCheck, 500);
 
       function autoScroll () {
         const isVideo = <%= @currentStream ? @currentStreamInfo[:is_video] : false %>;
@@ -77,6 +82,36 @@ Unless required by applicable law or agreed to in writing, software distributed
           clearInterval(scrollInterval);
         }
       }
+
+      function initTranscriptCheck() {
+        let player = document.getElementById('iiif-media-player');
+        if(player) {
+          addPlayerEventListeners(player.player, () => {
+            clearInterval(timeCheck);
+          });
+        }
+      }
+
+      function addPlayerEventListeners(player) {
+        player.on('loadedmetadata', () => {
+          transcriptCheck();
+        });
+      }
+
+      function transcriptCheck() {
+        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;
+
+        if(!transcriptSections.includes(sectionId)) {
+          // If transcript tab is the active tab when it is hidden, the tab goes away but the box still displays
+          // the missing transcript file message. Force change over to a different tab to avoid this case.
+          if (transcriptTab.getAttribute('aria-selected') === "true") { detailTab.click(); }
+          transcriptTab.style.display = 'none';
+        } else if (transcriptSections.includes(sectionId) && transcriptTab.style.display === 'none') {
+          transcriptTab.style.display = '';
+        }
+      }
     });
 </script>
 <% end %>