From f95870188600c2ba7a144004a0d1af4da0108964 Mon Sep 17 00:00:00 2001
From: Dananji Withana <dwithana@iu.edu>
Date: Wed, 10 Apr 2024 09:51:45 -0400
Subject: [PATCH] Display comments, tags for an empty playlist (#5773)

* Display comments, tags for an empty playlist

* Ramp build with related changes
---
 app/javascript/components/PlaylistRamp.jsx | 81 ++++++++++++----------
 package.json                               |  2 +-
 yarn.lock                                  |  5 +-
 3 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/app/javascript/components/PlaylistRamp.jsx b/app/javascript/components/PlaylistRamp.jsx
index 7bbd1a2e09..8d8da5aed6 100644
--- a/app/javascript/components/PlaylistRamp.jsx
+++ b/app/javascript/components/PlaylistRamp.jsx
@@ -61,12 +61,12 @@ const Ramp = ({
     let url = `${base_url}/playlists/${playlist_id}/manifest.json`;
     if (token) url += `?token=${token}`;
 
-    let [fullpath, position] = fullpath_url.split('?position=');
-    let start_canvas = playlist_item_ids[position - 1]
+    let [_, position] = fullpath_url.split('?position=');
+    let start_canvas = playlist_item_ids[position - 1];
     setStartCanvasId(
       start_canvas && start_canvas != undefined
-      ? `${base_url}/playlists/${playlist_id}/manifest/canvas/${start_canvas}`
-      : undefined
+        ? `${base_url}/playlists/${playlist_id}/manifest/canvas/${start_canvas}`
+        : undefined
     );
     setManifestUrl(url);
 
@@ -97,40 +97,43 @@ const Ramp = ({
   return (
     <IIIFPlayer manifestUrl={manifestUrl}
       customErrorMessage='This playlist is empty.'
+      emptyManifestMessage='This playlist currently has no playable items.'
       startCanvasId={startCanvasId}>
       <Row className="ramp--all-components ramp--playlist">
         <Col sm={8}>
           <MediaPlayer enableFileDownload={false} />
-          <Card className="ramp--playlist-accordion">
-            <Card.Header>
-              <h4>{activeItemTitle}</h4>
-              {activeItemSummary && <div>{activeItemSummary}</div>}
-            </Card.Header>
-            <Card.Body>
-              <Accordion>
-                <Card>
-                  <Accordion.Collapse eventKey="0" id="markers">
-                    <Card.Body>
-                      <MarkersDisplay showHeading={false} />
-                    </Card.Body>
-                  </Accordion.Collapse>
-                  <Accordion.Toggle as={Card.Header} variant="link" eventKey="0" className="ramp--playlist-accordion-header">
-                    <ExpandCollapseArrow /> Markers
-                  </Accordion.Toggle>
-                </Card>
-                <Card>
-                  <Accordion.Collapse eventKey="1">
-                    <Card.Body className="p-3">
-                      <MetadataDisplay displayOnlyCanvasMetadata={true} showHeading={false} />
-                    </Card.Body>
-                  </Accordion.Collapse>
-                  <Accordion.Toggle as={Card.Header} variant="link" eventKey="1" className="ramp--playlist-accordion-header">
-                    <ExpandCollapseArrow /> Source Item Details
-                  </Accordion.Toggle>
-                </Card>
-              </Accordion>
-            </Card.Body>
-          </Card>
+          {playlist_item_ids?.lenght > 0 && (
+            <Card className="ramp--playlist-accordion">
+              <Card.Header>
+                <h4>{activeItemTitle}</h4>
+                {activeItemSummary && <div>{activeItemSummary}</div>}
+              </Card.Header>
+              <Card.Body>
+                <Accordion>
+                  <Card>
+                    <Accordion.Collapse eventKey="0" id="markers">
+                      <Card.Body>
+                        <MarkersDisplay showHeading={false} />
+                      </Card.Body>
+                    </Accordion.Collapse>
+                    <Accordion.Toggle as={Card.Header} variant="link" eventKey="0" className="ramp--playlist-accordion-header">
+                      <ExpandCollapseArrow /> Markers
+                    </Accordion.Toggle>
+                  </Card>
+                  <Card>
+                    <Accordion.Collapse eventKey="1">
+                      <Card.Body className="p-3">
+                        <MetadataDisplay displayOnlyCanvasMetadata={true} showHeading={false} />
+                      </Card.Body>
+                    </Accordion.Collapse>
+                    <Accordion.Toggle as={Card.Header} variant="link" eventKey="1" className="ramp--playlist-accordion-header">
+                      <ExpandCollapseArrow /> Source Item Details
+                    </Accordion.Toggle>
+                  </Card>
+                </Accordion>
+              </Card.Body>
+            </Card>
+          )}
         </Col>
         <Col sm={4} className={`ramp--playlist-items-column ${IS_MOBILE ? 'mobile-view' : ''}`}>
           <Row>
@@ -154,7 +157,7 @@ const Ramp = ({
               }
             </Col>
           </Row>
-          <Row className="mx-0">
+          <Row className="mx-0 mb-2">
             <Col md={12} lg={12} sm={12} className="px-0">
               <div className="collapse" id="shareList">
                 <div dangerouslySetInnerHTML={{ __html: share.content }} />
@@ -162,8 +165,12 @@ const Ramp = ({
             </Col>
           </Row>
           <div dangerouslySetInnerHTML={{ __html: comment_tag.content }} />
-          <h4 className="mt-3">Playlist Items</h4>
-          <StructuredNavigation />
+          {playlist_item_ids?.length > 0 && (
+            <React.Fragment>
+              <h4 className="mt-3">Playlist Items</h4>
+              <StructuredNavigation />
+            </React.Fragment>
+          )}
         </Col>
       </Row>
     </IIIFPlayer>
diff --git a/package.json b/package.json
index f2a9cc741c..a2325d5cd3 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "7",
-    "@samvera/ramp": "^3.1.0",
+    "@samvera/ramp": "https://github.com/samvera-labs/ramp.git",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "buffer": "^6.0.3",
diff --git a/yarn.lock b/yarn.lock
index 7516286e5b..eeedbe696a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1440,10 +1440,9 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@samvera/ramp@^3.1.0":
+"@samvera/ramp@https://github.com/samvera-labs/ramp.git":
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@samvera/ramp/-/ramp-3.1.0.tgz#6254646f34b9a434ff6e6046f1e013130d036e28"
-  integrity sha512-B5UiU0DDxi7Ub+DfbKC7j80zjMCmkuLnmDJNUqnftjO1L2gocdMOuUfYZ30pAh9SO9HbMCEtAFtLUHPlizPz3A==
+  resolved "https://github.com/samvera-labs/ramp.git#e3b34b978f8f8448317b3717db2ae52b359481da"
   dependencies:
     "@rollup/plugin-json" "^6.0.1"
     "@silvermine/videojs-quality-selector" "^1.2.4"