Merge pull request #5868 from avalonmediasystem/playlist_desc

Make playlist description collapsible
avalonmediasystem · Jun 14, 2024 · 266aa86 · 266aa86
2 parents ae2494a + 9d75922
commit 266aa86
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 31 deletions.
diff --git a/app/javascript/components/PlaylistRamp.jsx b/app/javascript/components/PlaylistRamp.jsx
@@ -44,14 +44,19 @@ const Ramp = ({
   playlist_item_ids,
   token,
   share,
-  comment_tag
+  comment_label,
+  comment,
+  tags
 }) => {
   const [manifestUrl, setManifestUrl] = React.useState('');
   const [activeItemTitle, setActiveItemTitle] = React.useState();
   const [activeItemSummary, setActiveItemSummary] = React.useState();
   const [startCanvasId, setStartCanvasId] = React.useState();
+  const [expanded, setExpanded] = React.useState(false);
+  const [description, setDescription] = React.useState();
 
   let interval;
+  let descriptionCheck;
 
   const USER_AGENT = window.navigator.userAgent;
   const IS_MOBILE = (/Mobi/i).test(USER_AGENT);
@@ -71,9 +76,15 @@ const Ramp = ({
     setManifestUrl(url);
 
     interval = setInterval(addPlayerEventListeners, 500);
+    /**
+     * The passed in description is not immediately available for some reason.
+     * Use an interval to wait and set initial description.
+     */
+    descriptionCheck = setInterval(prepInitialDescription, 100);
 
     // Clear interval upon component unmounting
     return () => clearInterval(interval);
+    return () => clearInterval(descriptionCheck);
   }, []);
 
   /**
@@ -94,6 +105,34 @@ const Ramp = ({
     }
   };
 
+  const expandBtn = {
+    paddingLeft: '2px',
+    cursor: 'pointer'
+  };
+
+  const wordCount = 32;
+  const words = comment ? comment.split(' ') : [];
+
+  function prepInitialDescription() {
+    if (words !== undefined && words.length > 0) {
+      clearInterval(descriptionCheck);
+      let desc = words.length > wordCount
+        ? `${words.slice(0, wordCount).join(' ')}...`
+        : words.join(' ');
+
+      setDescription(desc);
+    } else if (words.length === 0) {
+      clearInterval(descriptionCheck);
+    }
+  }
+
+  const handleDescriptionMoreLessClick = () => {
+    setDescription(
+      expanded ? `${words.slice(0, wordCount).join(' ')}...` : words.join(' ')
+    );
+    setExpanded(!expanded);
+  };
+
   return (
     <IIIFPlayer manifestUrl={manifestUrl}
       customErrorMessage='This playlist is empty.'
@@ -164,7 +203,27 @@ const Ramp = ({
               </div>
             </Col>
           </Row>
-          <div dangerouslySetInnerHTML={{ __html: comment_tag.content }} />
+          <div>
+            {comment && (
+              <div>
+                <h4>{comment_label}</h4>
+                <div>
+                  <span dangerouslySetInnerHTML={{ __html: description }} />
+                  {words.length > wordCount && (
+                    <a className="btn-link" style={expandBtn} onClick={handleDescriptionMoreLessClick}>
+                      Show {expanded ? 'less' : 'more'}
+                    </a>
+                  )}
+                </div>
+              </div>
+            )}
+            {tags && (
+              <div>
+                <h4>Tags</h4>
+                <div className="tag-button-wrapper" dangerouslySetInnerHTML={{ __html: tags }} />
+              </div>
+            )}
+          </div>
           {playlist_item_ids?.length > 0 && (
             <React.Fragment>
               <h4 className="mt-3">Playlist Items</h4>

diff --git a/app/views/playlists/_description_and_tags.html.erb b/app/views/playlists/_description_and_tags.html.erb
diff --git a/app/views/playlists/show.html.erb b/app/views/playlists/show.html.erb
@@ -28,14 +28,21 @@ Unless required by applicable law or agreed to in writing, software distributed
   </div>
 
   <div class="col-sm-12 px-0">
+    <% # Replace 2 or more consecutive sets of line break characters with <br> tags %>
+    <% # This is because <p> tags force the show more link to a new line since it %>
+    <% # is outside the element(s) containing the text. Avoiding <p> allows the link to be inline %>
+    <% comment = @playlist.comment.gsub(/(\r?\n){2,}/m, "<br/><br/>") %>
+    <% tags = @playlist.tags.map { |tag| "<span class='btn btn-sm btn-info'>#{tag}</span>" }.join(' ') %>
     <%= react_component("PlaylistRamp",
       {
         urls: { base_url: request.protocol+request.host_with_port, fullpath_url: request.fullpath },
         playlist_id: @playlist.id,
         playlist_item_ids: @playlist.item_ids,
         token: @playlist_token,
         share: { canShare: (will_partial_list_render? :share), content: render('share') },
-        comment_tag: { content: render('description_and_tags') }
+        comment_label: t("activerecord.attributes.playlist.comment"),
+        comment: comment,
+        tags: tags
       }
     ) %>
   </div>