From 34c418282e79be62e3453f70d2e49b5bcf046fd6 Mon Sep 17 00:00:00 2001
From: Dananji Withana <dwithana@iu.edu>
Date: Tue, 9 Jan 2024 14:22:05 -0800
Subject: [PATCH] Fix add playlist current track enable/disable with section
 switching (#5552)

* Fix add playlist current track enable/disable with section switching

* Fix from code review
---
 app/assets/javascripts/ramp_utils.js          |  7 +--
 .../media_objects/_add_to_playlist.html.erb   | 50 ++++++++++---------
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/ramp_utils.js b/app/assets/javascripts/ramp_utils.js
index 47075dd3f7..f21fb904fc 100644
--- a/app/assets/javascripts/ramp_utils.js
+++ b/app/assets/javascripts/ramp_utils.js
@@ -204,11 +204,12 @@ function collapseMoreDetails() {
  * @param {String} sectionTitle name of the current section 
  */
 function disableEnableCurrentTrack(activeTrack, currentTime, isSeeked, sectionTitle) {
-  let title = sectionTitle;
-  // Return when add to playlist panel is not expanded
-  if($('#addToPlaylistPanel.show').length === 0) {
+   // Return when add to playlist form is not visible
+  let playlistForm = $('#add_to_playlist')[0];
+  if(!playlistForm) {
     return;
   }
+  let title = sectionTitle;
   if(activeTrack != undefined) {
     streamId = activeTrack.streamId;
     let { label, times, sectionLabel } = activeTrack;
diff --git a/app/views/media_objects/_add_to_playlist.html.erb b/app/views/media_objects/_add_to_playlist.html.erb
index c79fec1ced..253985efd4 100644
--- a/app/views/media_objects/_add_to_playlist.html.erb
+++ b/app/views/media_objects/_add_to_playlist.html.erb
@@ -38,14 +38,14 @@ Unless required by applicable law or agreed to in writing, software distributed
 
         <div id="add-to-playlist-form-group">
           <div class="form-check">
-            <label class="form-check-label" onclick="collapseMoreDetails()">
-              <input type="radio" name="post[playlistitem_scope]" id="playlistitem_scope_track" aria-label="playlist item current track">
+            <label class="form-check-label">
+              <input type="radio" onclick="collapseMoreDetails()" name="post[playlistitem_scope]" id="playlistitem_scope_track" aria-label="playlist item current track">
                 <span id="current-track-text">Current Track (<span id="current-track-name"></span>)</span>
             </label>
           </div>
           <div class="form-check">
-            <label class="form-check-label" onclick="collapseMoreDetails()">
-              <input type="radio" name="post[playlistitem_scope]" id="playlistitem_timeselection" aria-label="playlist item time selection">
+            <label class="form-check-label">
+              <input type="radio" onclick="collapseMoreDetails()" name="post[playlistitem_scope]" id="playlistitem_timeselection" aria-label="playlist item time selection">
               Custom Timespan
             </label>
             <input type="text" name="playlist_item_start" id="playlist_item_start" pattern="(\d+:){0,2}\d+(\.\d+)?" value="" aria-label="start time">
@@ -169,27 +169,29 @@ Unless required by applicable law or agreed to in writing, software distributed
       }
 
       function addPlayerEventListeners(player) {
-        player.on('loadedmetadata', () => {
-          enableAddToPlaylist();
-        });
-        player.on('seeked', () => {
-          if(getActiveItem() != undefined) {
-            activeTrack = getActiveItem(false);
-            if(activeTrack != undefined) {
-              streamId = activeTrack.streamId;
+        if (player && player != undefined) {
+          player.on('loadedmetadata', () => {
+            enableAddToPlaylist();
+          });
+          player.on('seeked', () => {
+            if(getActiveItem() != undefined) {
+              activeTrack = getActiveItem(false);
+              if(activeTrack != undefined) {
+                streamId = activeTrack.streamId;
+              }
+              disableEnableCurrentTrack(activeTrack, player.currentTime(), true, currentSectionLabel);
             }
-            disableEnableCurrentTrack(activeTrack, player.currentTime(), true, currentSectionLabel);
-          }
-        });
-        player.on('dispose', () => {
-          let addToPlaylistBtn = document.getElementById('addToPlaylistBtn');
-          currentSectionLabel = undefined;
-          $('#addToPlaylistPanel').collapse('hide');
-          resetAddToPlaylistForm();
-          if (addToPlaylistBtn) {
-            addToPlaylistBtn.disabled = true;
-          }
-        });
+          });
+          player.on('dispose', () => {
+            let addToPlaylistBtn = document.getElementById('addToPlaylistBtn');
+            currentSectionLabel = undefined;
+            $('#addToPlaylistPanel').collapse('hide');
+            resetAddToPlaylistForm();
+            if (addToPlaylistBtn) {
+              addToPlaylistBtn.disabled = true;
+            }
+          });
+        }
       }
 
       function enableAddToPlaylist() {