From f61e42dc7e9a374c79d42a1d925795366114db58 Mon Sep 17 00:00:00 2001
From: Mason Ballengee <masaball@iu.edu>
Date: Fri, 17 Nov 2023 15:26:23 -0500
Subject: [PATCH] Display message when item is converting

---
 app/javascript/components/Ramp.jsx          | 193 ++++++++++----------
 app/models/iiif_canvas_presenter.rb         |  10 +
 app/views/media_objects/_item_view.html.erb |   3 +-
 config/locales/en.yml                       |   1 +
 spec/models/iiif_canvas_presenter_spec.rb   |  18 +-
 5 files changed, 124 insertions(+), 101 deletions(-)

diff --git a/app/javascript/components/Ramp.jsx b/app/javascript/components/Ramp.jsx
index 57e3dbb3a4..d9d84f63d5 100644
--- a/app/javascript/components/Ramp.jsx
+++ b/app/javascript/components/Ramp.jsx
@@ -47,7 +47,6 @@ const Ramp = ({
   share,
   timeline,
   playlist,
-  in_progress,
   cdl,
   has_files,
   has_transcripts
@@ -122,110 +121,108 @@ const Ramp = ({
   return (
     <IIIFPlayer manifestUrl={manifestUrl}>
       <Row className="ramp--all-components">
-        {!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-title">
-                          { <div className="object-title" dangerouslySetInnerHTML={{ __html: title.content }} /> }
-                        </div>
-                          <div className="ramp--rails-content">
-                            <Col className="ramp-button-group-1">
-                              { timeline.canCreate &&
-                                <button
-                                  id="timelineBtn"
-                                  className="btn btn-outline mr-1 text-nowrap"
-                                  type="button"
-                                  data-toggle="modal"
-                                  data-target="#timelineModal"
-                                  aria-expanded="false"
-                                  aria-controls="timelineModal"
-                                  disabled={true}
-                                >
-                                  Create Timeline
-                                </button>
-                              }
-                              { share.canShare &&
-                                <button
-                                  className="btn btn-outline mr-1 text-nowrap"
-                                  type="button"
-                                  data-toggle="collapse"
-                                  data-target="#shareResourcePanel"
-                                  aria-expanded="false"
-                                  aria-controls="shareResourcePanel"
-                                  id="shareBtn"
-                                >
-                                  <i className="fa fa-share-alt"></i>
-                                    Share
-                                </button>
-                              }
-                              { playlist.canCreate &&
-                                <button className="btn btn-outline text-nowrap mr-1"
-                                  id="addToPlaylistBtn"
-                                  type="button"
-                                  data-toggle="collapse"
-                                  data-target="#addToPlaylistPanel"
-                                  aria-expanded="false"
-                                  aria-controls="addToPlaylistPanel"
-                                  disabled={true}
-                                >
-                                  {/* Static SVG image in /app/assets/images/add_to_playlist_icon.svg */}
-                                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-                                     viewBox="-293 386 24 24" xmlSpace="preserve">
-                                     <path className="st1" fill="currentColor" d="M-279,395h-12v2h12V395z M-279,391h-12v2h12V391z M-275,399v-4h-2v4h-4v2h4v4h2v-4h4v-2H-275z M-291,401h8v-2h-8V401z"/>
-                                  </svg>
-                                  Add to Playlist
-                                </button>
-                              }
-                            </Col>
-                            { has_structure &&
-                              <Col className="ramp-button-group-2">
-                                <button
-                                  className="btn btn-outline expand-collapse-toggle-button expanded"
-                                  id="expand_all_btn"
-                                  onClick={handleCollapseExpand}
-                                  ref={expandCollapseBtnRef}
-                                >
-                                  <ExpandCollapseArrow />
-                                  {isClosed ? ' Expand' : ' Close'} {master_files_count > 1 ? `${master_files_count} Sections` : 'Section'}
-                                </button>
-                              </Col>
+        <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-title">
+                        { <div className="object-title" dangerouslySetInnerHTML={{ __html: title.content }} /> }
+                      </div>
+                        <div className="ramp--rails-content">
+                          <Col className="ramp-button-group-1">
+                            { timeline.canCreate &&
+                              <button
+                                id="timelineBtn"
+                                className="btn btn-outline mr-1 text-nowrap"
+                                type="button"
+                                data-toggle="modal"
+                                data-target="#timelineModal"
+                                aria-expanded="false"
+                                aria-controls="timelineModal"
+                                disabled={true}
+                              >
+                                Create Timeline
+                              </button>
                             }
-                          </div>
-                          <Row className="mx-0">
-                            <Col>
-                              <div dangerouslySetInnerHTML={{ __html: timeline.content}} />
-                            </Col>
-                            <Col md={12} lg={12} sm={12} className="px-0">
-                              <div className="collapse" id="addToPlaylistPanel">
-                                <div className="card card-body" dangerouslySetInnerHTML={{ __html: playlist.tab }} />
-                              </div>
-                            </Col>
-                            <Col md={12} lg={12} sm={12} className="px-0">
-                              <div className="collapse" id="shareResourcePanel">
-                                <div className="share-tabs" dangerouslySetInnerHTML={{ __html: share.content }} />
-                              </div>
+                            { share.canShare &&
+                              <button
+                                className="btn btn-outline mr-1 text-nowrap"
+                                type="button"
+                                data-toggle="collapse"
+                                data-target="#shareResourcePanel"
+                                aria-expanded="false"
+                                aria-controls="shareResourcePanel"
+                                id="shareBtn"
+                              >
+                                <i className="fa fa-share-alt"></i>
+                                  Share
+                              </button>
+                            }
+                            { playlist.canCreate &&
+                              <button className="btn btn-outline text-nowrap mr-1"
+                                id="addToPlaylistBtn"
+                                type="button"
+                                data-toggle="collapse"
+                                data-target="#addToPlaylistPanel"
+                                aria-expanded="false"
+                                aria-controls="addToPlaylistPanel"
+                                disabled={true}
+                              >
+                                {/* Static SVG image in /app/assets/images/add_to_playlist_icon.svg */}
+                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                                   viewBox="-293 386 24 24" xmlSpace="preserve">
+                                   <path className="st1" fill="currentColor" d="M-279,395h-12v2h12V395z M-279,391h-12v2h12V391z M-275,399v-4h-2v4h-4v2h4v4h2v-4h4v-2H-275z M-291,401h8v-2h-8V401z"/>
+                                </svg>
+                                Add to Playlist
+                              </button>
+                            }
+                          </Col>
+                          { has_structure &&
+                            <Col className="ramp-button-group-2">
+                              <button
+                                className="btn btn-outline expand-collapse-toggle-button expanded"
+                                id="expand_all_btn"
+                                onClick={handleCollapseExpand}
+                                ref={expandCollapseBtnRef}
+                              >
+                                <ExpandCollapseArrow />
+                                {isClosed ? ' Expand' : ' Close'} {master_files_count > 1 ? `${master_files_count} Sections` : 'Section'}
+                              </button>
                             </Col>
-                          </Row>
-                        <StructuredNavigation />
-                      </React.Fragment>
-                    }
-                  </React.Fragment>
-                )
-            }
-          </Col>
-        }
-        <Col sm={ (in_progress || master_files_count == 0) ? 12 : 4}>
+                          }
+                        </div>
+                        <Row className="mx-0">
+                          <Col>
+                            <div dangerouslySetInnerHTML={{ __html: timeline.content}} />
+                          </Col>
+                          <Col md={12} lg={12} sm={12} className="px-0">
+                            <div className="collapse" id="addToPlaylistPanel">
+                              <div className="card card-body" dangerouslySetInnerHTML={{ __html: playlist.tab }} />
+                            </div>
+                          </Col>
+                          <Col md={12} lg={12} sm={12} className="px-0">
+                            <div className="collapse" id="shareResourcePanel">
+                              <div className="share-tabs" dangerouslySetInnerHTML={{ __html: share.content }} />
+                            </div>
+                          </Col>
+                        </Row>
+                      <StructuredNavigation />
+                    </React.Fragment>
+                  }
+                </React.Fragment>
+              )
+          }
+        </Col>
+        <Col sm={ (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 && has_transcripts) &&
+            { (cdl.can_stream && master_files_count != 0 && has_transcripts) &&
               <Tab eventKey="transcripts" title="Transcripts">
                 <Transcript
                   playerID="iiif-media-player"
diff --git a/app/models/iiif_canvas_presenter.rb b/app/models/iiif_canvas_presenter.rb
index 6c24876d21..ec4961e373 100644
--- a/app/models/iiif_canvas_presenter.rb
+++ b/app/models/iiif_canvas_presenter.rb
@@ -67,6 +67,11 @@ def placeholder_content
                                             height: 720,
                                             type: 'Image',
                                             format: 'image/jpeg')
+    elsif section_processing?(@master_file)
+      IIIFManifest::V3::DisplayContent.new(nil,
+                                           label: I18n.t('media_object.conversion_msg'),
+                                           type: 'Text',
+                                           format: 'text/plain')
     else
       support_email = Settings.email.support
       IIIFManifest::V3::DisplayContent.new(nil,
@@ -116,6 +121,11 @@ def stream_urls
       end
     end
 
+    def section_processing?(master_file)
+      encode_gid = "gid://ActiveEncode/#{master_file.encoder_class}/#{master_file.workflow_id}"
+      ActiveEncode::EncodeRecord.find_by(global_id: encode_gid).state.to_s.upcase != 'COMPLETED'
+    end
+
     def supplemental_captions_transcripts
       files = master_file.supplemental_files(tag: 'caption') + master_file.supplemental_files(tag: 'transcript')
       files += [master_file.captions] if master_file.captions.present? && master_file.captions.persisted?
diff --git a/app/views/media_objects/_item_view.html.erb b/app/views/media_objects/_item_view.html.erb
index e74b049ea9..e822cd3ad3 100644
--- a/app/views/media_objects/_item_view.html.erb
+++ b/app/views/media_objects/_item_view.html.erb
@@ -38,7 +38,7 @@ Unless required by applicable law or agreed to in writing, software distributed
       <% end %>
     <% end %>
   </div>
-  <div class="<%= in_progress || !@currentStream ? 'col-sm-4' : 'col-sm-12' %>">
+  <div class="col-sm-12">
     <%= react_component("Ramp",
       {
         base_url: request.protocol+request.host_with_port,
@@ -49,7 +49,6 @@ Unless required by applicable law or agreed to in writing, software distributed
         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') },
         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') },
         has_files: @media_object.supplemental_files.present? || @media_object.sections_with_files.present?,
         has_transcripts: @media_object.sections_with_files(tag: 'transcript').present?
diff --git a/config/locales/en.yml b/config/locales/en.yml
index edd35fb42d..a6c6b535c8 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -29,6 +29,7 @@ en:
     empty_share_link: ""
     empty_share_link_notice: "After processing has started the embedded link will be available."
     empty_share_section_permalink_notice: "After processing has started the section link will be available."
+    conversion_msg: "This item is still processing. Please check back later."
     cdl:
       checkout_message: "<p>Borrow this item to access media resources.</p>"
       not_available_message: "<p>This resource is currently checked out by another user. </br></br> This item is due to be returned on </br><span data-utc-time='%{time}' />.</p>"
diff --git a/spec/models/iiif_canvas_presenter_spec.rb b/spec/models/iiif_canvas_presenter_spec.rb
index 2c4099f997..46a7b8e665 100644
--- a/spec/models/iiif_canvas_presenter_spec.rb
+++ b/spec/models/iiif_canvas_presenter_spec.rb
@@ -158,7 +158,7 @@
     end
 
     context 'when master file does not have derivatives' do
-      let(:master_file) { FactoryBot.build(:master_file, media_object: media_object) }
+      let(:master_file) { FactoryBot.build(:master_file, :completed_processing, media_object: media_object) }
 
       it 'has format' do
         expect(subject.format).to eq "text/plain"
@@ -172,6 +172,22 @@
         expect(subject.label).to eq I18n.t('errors.missing_derivatives_error') % [Settings.email.support, Settings.email.support]
       end
     end
+
+    context 'when master file is processing' do
+      let(:master_file) { FactoryBot.build(:master_file, media_object: media_object) }
+
+      it 'has format' do
+        expect(subject.format).to eq "text/plain"
+      end
+
+      it 'has type' do
+        expect(subject.type).to eq "Text"
+      end
+
+      it 'has label' do
+        expect(subject.label).to eq I18n.t('media_object.conversion_msg')
+      end
+    end
   end
 
   describe 'Supplemental file handling' do