j1-template 2024.3.19 → 2024.3.21

data/assets/data/amplitude_app.html

@@ -38,7 +38,7 @@ exclude_from_search:                    true
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign environment           = site.environment %}
 
-{% assign amplitude_defaults    = modules.defaults.amplitude_app.defaults %}
+{% assign amplitude_defaults    = modules.defaults.amplitude.defaults %}
 {% assign amplitude_players     = modules.amplitude_app.settings %}
 {% assign amplitude_playlists   = modules.amplitude_playlists.settings %}
 
@@ -61,6 +61,7 @@ exclude_from_search:                    true
   {% assign production = true %}
 {% endif %}
 
+{% assign image_rating_path = '/assets/image/pattern/rating/scalable' %}
 
 {% comment %} main
 ================================================================================ {% endcomment %}
@@ -93,7 +94,7 @@ exclude_from_search:                    true
     {% assign volume_slider_min             = amplitude_defaults.player.volume_slider.min_value %}
     {% assign volume_slider_max             = amplitude_defaults.player.volume_slider.max_value %}
     {% assign volume_slider_step            = amplitude_defaults.player.volume_slider.slider_step %}
-    {% assign shuffle_repeat_button         = amplitude_defaults.player.shuffle_repeat_button %}
+    {% assign repeat_button                 = amplitude_defaults.player.repeat_button %}
     {% assign shuffle_button                = amplitude_defaults.player.shuffle_button %}
     {% assign skip_forward_backward_button  = amplitude_defaults.player.skip_forward_backward_button %}
     {% assign playlist_controls             = amplitude_defaults.player.playlist.controls %}
@@ -129,10 +130,6 @@ exclude_from_search:                    true
       {% assign volume_slider_step = amplitude_defaults.player.volume_slider.slider_step %}
     {% endif %}
 
-    {% if player.shuffle_repeat_button %}
-      {% assign shuffle_repeat_button = player.shuffle_repeat_button %}
-    {% endif %}
-
     {% if player.shuffle_button %}
       {% assign shuffle_button = player.shuffle_button %}
     {% endif %}
@@ -261,17 +258,20 @@ exclude_from_search:                    true
             <div
               id="mini_player_previous"
               class="amplitude-prev"
-              data-amplitude-playlist="{{player_playlist}}">
+              data-amplitude-playlist="{{player_playlist}}"
+              data-amplitude-source="audio">
             </div>
             <div
-              id="mini_player_play_pause"
-              class="amplitude-play-pause"
-              data-amplitude-playlist="{{player_playlist}}">
+              id="mini_player_play_pause_{{player_id}}"
+              class="mini-player-play-pause amplitude-play-pause amplitude-paused"
+              data-amplitude-playlist="{{player_playlist}}"
+              data-amplitude-source="audio">
             </div>
             <div
               id="mini_player_next"
               class="amplitude-next"
-              data-amplitude-playlist="{{player_playlist}}">
+              data-amplitude-playlist="{{player_playlist}}"
+              data-amplitude-source="audio">
             </div>
           </div>
           <!-- END control container  -->
@@ -321,7 +321,7 @@ exclude_from_search:                    true
       {% endif %}
 
       {% comment %} END MINI player
-      ========================================================================== {% endcomment %}
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
 
 
       {% comment %} COMPACT player
@@ -336,9 +336,10 @@ exclude_from_search:                    true
             <div id="hide_playlist_{{player_id}}" class="compact-player-header hide-playlist">
               <img class="compact-player-header-arrows" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/playlist-hide.svg" alt="Hide Playlist">
               Playlist
-            </div> <!-- END playlist-screen header (toggle playlist) -->
-            
-            <div class="playlist-screen-controls">
+            </div>
+            <!-- END playlist-screen header (toggle playlist) -->
+
+            <div class="playlist-screen-controls screen-controls-compact-player">
               <div class="playlist-screen-meta-container">
                 <span
                   class="song-name" data-amplitude-playlist="{{player_playlist}}"
@@ -346,20 +347,35 @@ exclude_from_search:                    true
                   data-amplitude-song-info="name">
                 </span>
 
-                <!-- START player_audio_info -->
-                <!-- load initial (first) info URL -->
-                {% for item in playlist_items %} {% if item.enabled %}
-                {% if playlist_audio_info and forloop.first %}
-                <span class="audio-info">
-                  <a class="audio-info-link" href="{{item.audio_info}}" target="_blank">
-                    <i class="mdib mdib-information md-gray-400 mdib-24px"></i>
-                  </a>
-                </span>
-                {% else %}
-                  {% break %}
-                {% endif %}
-                {% endif %} {% endfor %}
-                <!-- END player_audio_info -->
+                <!-- START player_audio_info (COMPACT player) -->
+                {% for item in playlist_items %}{% if item.enabled %}
+
+                  <!-- place initial (first) info URL -->
+                  {% if playlist_audio_info and forloop.first %}
+                    <span class="amplitude-audio-info">
+                      <a class="audio-info-link" href="{{item.audio_info}}" target="_blank">
+                        <i class="mdib mdib-information md-gray-400 mdib-24px"></i>
+                      </a>
+                    </span>
+                  {% else %}
+                    {% break %}                  
+                  {% endif %}
+
+                  <!-- place initial (first) audio rating for screen controls -->
+                  {% if playlist_audio_rating and forloop.first %}
+                    {% capture rating_image %}{{image_rating_path}}/{{item.rating}}-star.svg{% endcapture %}
+                    <span 
+                     class="audio-rating audio-rating-screen-controls"
+                     data-amplitude-playlist="{{player_playlist}}"
+                     data-player-type="compact">
+                      <img src="{{rating_image}}" alt="song rating">
+                    </span>
+                  {% else %}
+                    {% break %}
+                  {% endif %}
+
+                {% endif %}{% endfor %}
+                <!-- END place place initial audio_info|audio_rating (COMPACT player) -->
 
                 <div class="song-artist-album">
                   <span
@@ -376,19 +392,22 @@ exclude_from_search:                    true
                 </div>
               </div>
               {% if playlist_controls %}
-              <div class="list-controls">
+              <div class="compact-player-list-controls list-controls">
                 <div
-                  class="list-previous amplitude-prev"
+                  id="compact_player_list_previous_{{player_id}}"
+                  class="compact-player-previous list-previous amplitude-prev"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
                 <div
-                  class="list-play-pause amplitude-play-pause"
+                  id="compact_player_list_play_pause_{{player_id}}"
+                  class="compact-player-play-pause amplitude-play-pause amplitude-paused"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
                 <div
-                  class="list-next amplitude-next"
+                  id="compact_player_list_next_{{player_id}}"
+                  class="compact-player-next list-next amplitude-next"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
@@ -401,10 +420,10 @@ exclude_from_search:                    true
             <div
               id="compact_player_title_list_{{player_playlist}}"
               class="amplitude-scroller-gradient compact-player-title-list">
-              {% for item in playlist_items %} {% if item.enabled %}
+              {% for item in playlist_items %}{% if item.enabled %}
               <!-- START list item -->
               <div
-                class="song amplitude-song-container amplitude-play-pause"
+                class="amplitude-song-container-compact-player song amplitude-song-container amplitude-play-pause amplitude-paused"
                 data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-song-index="{{forloop.index0}}"
                 data-amplitude-playlist="{{player_playlist}}">
@@ -423,33 +442,21 @@ exclude_from_search:                    true
                   class="playlist-song-meta song-meta-container"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
-                  <span class="song-name">{{item.title}}</span>
-
-                  {% comment %}
-                  {% if playlist_audio_rating %}
-                  <span class="audio-rating">
-                    {{item.rating}}
-                    <i class="mdib mdib-star md-gray-400 mdib-18px"></i>
-                  </span>
-                  {% endif %}
-                  {% endcomment %}
-
-                  <!-- span class="song-artist-album">
-                    <span>{{item.name}}</span>
-                    <span class="song-artist-album-delimiter">·</span>
-                    <span>{{item.artist}}</span>
-                  </span -->
 
+                  <span class="song-name">{{item.title}}</span>
                   <span class="song-artist-album">
                     <span>{{item.artist}}</span>
                   </span>
 
-                  {% if player_audio_infooo %}
-                  <span class="audio-info">
-                    <a href="{{item.audio_info}}" class="audio-info-link" target="_blank">
-                      <i class="mdib mdib-information md-gray-400 mdib-24px"></i>
-                    </a>
-                  </span>
+                  <!-- place audio rating for playlist (COMPACT player) -->
+                  {% if playlist_audio_rating %}
+                    {% capture rating_image %}{{image_rating_path}}/{{item.rating}}-star.svg{% endcapture %}
+                    <span class="audio-rating" data-amplitude-playlist="{{player_playlist}}">
+                      <img src="{{rating_image}}" alt="song rating">
+                    </span>
+                  {% else %}
+                    <!-- place empty (span) element (placeholder) -->
+                    <span class="audio-rating audio-rating-screen-controls"></span>
                   {% endif %}
 
                   <span class="audio-duration">{{item.duration}}</span>
@@ -459,7 +466,7 @@ exclude_from_search:                    true
 
               </div>
               <!-- END list item -->
-              {% endif %} {% endfor %}
+              {% endif %}{% endfor %}
 
             </div> <!-- END  playlist items -->
 
@@ -516,52 +523,52 @@ exclude_from_search:                    true
             <!-- START COMPACT player MIDDLE -->
             <div class="compact-player-middle">
               <!-- START controls container -->
-              <div id="compact_player_control_container">
+              <div id="compact_player_control_container" class="compact-player-control-container">
                 <div id="compact_player_controls">
 
                   <div class="compact-player-controls-container">
                     {% if shuffle_button %}
                     <div
                       id="compact_player_shuffle"
-                      class="amplitude-shuffle amplitude-shuffle-off"
+                      class="compact-player-shuffle amplitude-shuffle amplitude-shuffle-off"
                       data-amplitude-source="{{source_media_attribute}}"
                       data-amplitude-playlist="{{player_playlist}}">
                     </div>
                     {% endif %}
                     <div
-                      id="compact_player_previous"
-                      class="amplitude-prev"
+                      id="compact_player_previous_{{player_id}}"
+                      class="compact-player-previous amplitude-prev"
                       data-amplitude-source="{{source_media_attribute}}"
                       data-amplitude-playlist="{{player_playlist}}">
                     </div>
                     {% if skip_forward_backward_button %}
                     <div
                       id="skip-backward_{{player_id}}"
-                      class="compact-player-skip-backward">
+                      class="compact-player-skip-backward amplitude-skip-backward">
                    </div>
                    {% endif %}
                     <div
-                      id="compact_player_play_pause"
-                      class="amplitude-play-pause amplitude-paused"
+                      id="compact_player_play_pause_{{player_id}}"
+                      class="compact-player-play-pause amplitude-play-pause amplitude-paused"
                       data-amplitude-source="{{source_media_attribute}}"
                       data-amplitude-playlist="{{player_playlist}}">
                     </div>
                     {% if skip_forward_backward_button %}
                     <div
                       id="skip-forward_{{player_id}}"
-                      class="compact-player-skip-forward">
+                      class="compact-player-skip-forward amplitude-skip-forward">
                     </div>
                     {% endif %}
                     <div
-                      id="compact_player_next"
-                      class="amplitude-next"
+                      id="compact_player_next_{{player_id}}"
+                      class="compact-player-next amplitude-next"
                       data-amplitude-source="{{source_media_attribute}}"
                       data-amplitude-playlist="{{player_playlist}}">
                     </div>
                     {% if repeat_button %}
             			  <div
             				  id="compact_player_repeat"
-            				  class="amplitude-repeat amplitude-repeat-off"
+            				  class="compact-player-repeat amplitude-repeat amplitude-repeat-off"
                       data-amplitude-source="{{source_media_attribute}}"
             				  data-amplitude-playlist="{{player_playlist}}">
             			  </div>
@@ -571,7 +578,7 @@ exclude_from_search:                    true
                     <div class="compact-player-volume-container">
                       {% if volume_slider %}
                       <div class="volume-controls">
-                        <div class="amplitude-mute amplitude-not-muted"></div>
+                        <div class="compact-player-amplitude-mute amplitude-mute amplitude-not-muted"></div>
                         <input
                           id="volume_slider_{{player_id}}"
                           class="amplitude-volume-slider"
@@ -590,7 +597,7 @@ exclude_from_search:                    true
                 <!-- END controls container -->
               </div>
             </div>
-            <!-- END LARGE player left MIDDLE -->
+            <!-- END COMPACT player left MIDDLE -->
 
             <!-- START COMPACT player BOTTOM -->
             <div class="player-bottom">
@@ -677,7 +684,7 @@ exclude_from_search:                    true
       {% endif %}
 
       {% comment %} END COMPACT player
-      ========================================================================== {% endcomment %}
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
 
 
       {% comment %} LARGE player
@@ -685,6 +692,8 @@ exclude_from_search:                    true
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
       {% when 'large' %} {% if player_enabled %}
 
+      <!-- player.shuffle_button:  {{player.shuffle_button}} -->
+
       {% if player.source %}
         {% assign source_media = player.source %}
       {% endif %}
@@ -698,7 +707,7 @@ exclude_from_search:                    true
       <!-- START create player instance on ID: {{player_id}} of type: {{player_type}} -->
       {% capture large_player_left_side %}
         <!-- START LARGE player left TOP -->
-        <div class="player-left-top">
+        <div class="large-player-left-top">
 
           <div
             id="large_player_title_header_{{player_id}}"
@@ -745,22 +754,22 @@ exclude_from_search:                    true
         <!-- END LARGE player left TOP -->
 
         <!-- START LARGE player left MIDDLE -->
-        <div class="player-left-middle">
+        <div class="large-player-left-middle">
           <!-- START controls container -->
-          <div id="large_player_control_container">
-            <div id="large_player_controls">
+          <div class="large-player-control-container">
+            <div id="large_player_controls" class="large_player_controls">
 
               <div class="large-player-controls-container">
                 {% if shuffle_button %}
                 <div
-                  id="large_player_shuffle"
+                  id="large_player_shuffle_{{player_id}}"
                   class="large-player-shuffle-{{player_id}} amplitude-shuffle amplitude-shuffle-off"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
                 {% endif %}
                 <div
-                  id="large_player_previous"
+                  id="large_player_previous_{{player_id}}"
                   class="large-player-previous-{{player_id}} large-player-previous amplitude-prev"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
@@ -768,13 +777,13 @@ exclude_from_search:                    true
                 {% if skip_forward_backward_button %}
                 <div
                   id="skip-backward_{{player_id}}"
-                  class="large-player-skip-backward-{{player_id}} large-player-skip-backward"
+                  class="large-player-skip-backward-{{player_id}} large-player-skip-backward amplitude-skip-backward"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
                 {% endif %}
                 <div
-                  id="large_player_play_pause"
+                  id="large_player_play_pause_{{player_id}}"
                   class="large-player-play-pause-{{player_id}} large-player-play-pause amplitude-play-pause amplitude-paused"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
@@ -782,20 +791,20 @@ exclude_from_search:                    true
                 {% if skip_forward_backward_button %}
                 <div
                   id="skip-forward_{{player_id}}"
-                  class="large-player-skip-forward-{{player_id}} large-player-skip-forward"
+                  class="large-player-skip-forward-{{player_id}} large-player-skip-forward amplitude-skip-forward"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
                 {% endif %}
                 <div
-                  id="large_player_next"
+                  id="large_player_next_{{player_id}}"
                   class="large-player-next-{{player_id}} large-player-next amplitude-next"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
                 {% if repeat_button %}
                 <div
-                  id="large_player_repeat"
+                  id="large_player_repeat_{{player_id}}"
                   class="large-player-repeat-{{player_id}} large-player-repeat amplitude-repeat amplitude-repeat-off"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
@@ -803,19 +812,22 @@ exclude_from_search:                    true
                 {% endif %}
 
                 <!-- START volume container -->
-                <div class="compact-player-volume-container">
+                <div class="large-player-volume-container">
                   {% if volume_slider %}
-                  <div class="volume-controls">
-                    <div class="amplitude-mute amplitude-not-muted"></div>
-                    <input
-                      id="volume_slider_{{player_id}}"
-                      class="amplitude-volume-slider"
-                      type="range"
-                      min="{{volume_slider_min}}"
-                      max="{{volume_slider_max}}"
-                      step="{{volume_slider_step}}"
-                      aria-label="Amplitude Volume Slider">
+                  <div
+                    id="amplitude-mute_{{player_id}}"
+                    class="large-player-amplitude-mute amplitude-mute amplitude-not-muted"
+                    data-amplitude-source="{{source_media_attribute}}">
                   </div>
+                  <input
+                    id="volume_slider_{{player_id}}"
+                    class="amplitude-volume-slider"
+                    data-amplitude-source="{{source_media_attribute}}"
+                    type="range"
+                    min="{{volume_slider_min}}"
+                    max="{{volume_slider_max}}"
+                    step="{{volume_slider_step}}"
+                    aria-label="Amplitude Volume Slider">
                   {% endif %}
                 </div>
                 <!-- END volume container -->
@@ -829,7 +841,7 @@ exclude_from_search:                    true
 
         <!-- START LARGE player left BOTTOM -->
         <!-- div class="player-left-bottom" -->
-        <div class="player-bottom">
+        <div class="large-player-left-bottom">
           <!-- time container -->
           <div class="time-container">
             <span class="current-time">
@@ -910,14 +922,14 @@ exclude_from_search:                    true
           <div class="large-player-container">
 
             <!-- Large Player|Left Side -->
-            <div id="large_player_left">
+            <div id="large_player_left" class="large-player-left">
             {{large_player_left_side}}
             </div>
             <!-- END Large Player|Left Side -->
 
             <!-- Large Player|Right Side (playlist) -->
             <div
-              id="large_player_right" class="hide-scrollbar"
+              id="large_player_right" class="large-player-right hide-scrollbar"
               data-amplitude-source="{{source_media_attribute}}"
               data-amplitude-playlist="{{player_playlist}}">
               <div
@@ -925,7 +937,7 @@ exclude_from_search:                    true
                 class="large-player-playlist-header">Playlist
               </div>
 
-              <div class="playlist-screen-controls large-player">
+              <div class="playlist-screen-controls screen-controls-large-player large-player">
                 <div class="playlist-screen-meta-container">
                   <span
                     class="song-name-{{player_playlist}} song-name"
@@ -934,12 +946,14 @@ exclude_from_search:                    true
                     data-amplitude-song-info="name">
                   </span>
 
-                  <!-- START player_audio_info -->
-                  <!-- load initial (first element) info URL -->
-                  {% for item in playlist_items %} {% if item.enabled %}
+                  <!-- START player_audio_info (LARGE player) -->
+                  
+                  {% for item in playlist_items %}{% if item.enabled %}
                   {% if playlist_audio_info and forloop.first %}
-                  <span class="audio-info">
-                    <a class="audio-info-link-{player_playlist}} audio-info-link" href="{{item.audio_info}}" target="_blank">
+
+                  <!-- place initial (first element) info URL -->
+                  <span class="amplitude-audio-info">
+                    <a class="audio-info-link-{{player_playlist}} audio-info-link" href="{{item.audio_info}}" target="_blank">
                       <i class="mdib mdib-information md-gray-400 mdib-24px"></i>
                     </a>
                   </span>
@@ -947,21 +961,25 @@ exclude_from_search:                    true
                     {% break %}
                   {% endif %}
 
-                  <!-- load initial (first element) rating -->
+                  <!-- place initial (first) audio rating for screen controls (LARGE player) -->
                   {% if playlist_audio_rating and forloop.first %}
+                    {% capture rating_image %}{{image_rating_path}}/{{item.rating}}-star.svg{% endcapture %}
                     {% if item.rating %}
-                    <span class="audio-rating-{player_playlist}} audio-rating">
-                      {{item.rating}}
-                      <i class="mdib mdib-star md-gray-400 mdib-18px"></i>
+                    <span
+                     class="audio-rating audio-rating-screen-controls"
+                     data-amplitude-playlist="{{player_playlist}}"
+                     data-player-type="large">
+                      <img src="{{rating_image}}" alt="song rating">
                     </span>
                     {% else %}
-                    <!-- place empty (span) element (placeholder) -->
-                    <span class="audio-rating-{player_playlist}} audio-rating"></span>
+                      <!-- place empty (span) element (placeholder) -->
+                      <span class="audio-rating"></span>
                     {% endif %}
                   {% else %}
                     {% break %}
                   {% endif %}
-                  {% endif %} {% endfor %}
+
+                  {% endif %}{% endfor %}
                   <!-- END playlist_audio_info -->
 
                   <div class="song-artist-album">
@@ -986,85 +1004,96 @@ exclude_from_search:                    true
                 {% if playlist_controls %}
                 <div class="list-controls">
                   <div
-                    class="list-previous amplitude-prev"
+                    class="list-previous amplitude-prev large-player-previous"
                     data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}">
                   </div>
                   <div
+                    id="large_player_play_pause_{{player_id}}"
                     class="list-play-pause amplitude-play-pause"
                     data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}">
                   </div>
                   <div
-                    class="list-next amplitude-next"
+                    class="list-next amplitude-next large-player-next"
                     data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}">
                   </div>
-                </div>
+                </div><!-- Large Player|Left Side -->
                 {% endif %}
 
               </div> <!-- END playlist controls -->
 
-
               <!-- START playlist items (Large Player) -->
-              <div
+              <ul
                 id="large_player_title_list_{{player_playlist}}"
-                class="amplitude-scroller-gradient large-player-title-list">
-                {% for item in playlist_items %}{% if item.enabled %}
-                <!-- START list item -->
-                <div
-                  class="amplitude-song-container-large-player-{{player_id}} song amplitude-song-container amplitude-play-pause"
-                  data-amplitude-song-index="{{forloop.index0}}"
-                  data-amplitude-source="{{source_media_attribute}}"
-                  data-amplitude-playlist="{{player_playlist}}">
-
+                class="amplitude-scroller-gradient large-player-title-list"
+                style="margin-bottom: 0px; padding-left: 0px;">
+
+                <!-- START Playlist item -->
+                <li>
+                  {% for item in playlist_items %}{% if item.enabled %}
+                  <!-- START list item -->
+                  <!-- class="amplitude-song-container-large-player-{{player_id}} amplitude-song-container-large-player amplitude-song-container amplitude-song amplitude-play-pause amplitude-player-large" -->
+                  <!-- class="amplitude-song amplitude-song-container amplitude-song-container-large-player amplitude-play-pause amplitude-paused" -->
                   <div
-                    class="song-number-now-playing"
+                    class="amplitude-song-container-large-player-{{player_id}} amplitude-song-container-large-player amplitude-song-container amplitude-song amplitude-play-pause amplitude-paused"
+                    data-amplitude-song-index="{{forloop.index0}}"
                     data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}">
-                    <span class="title-number">{{forloop.index}}
-                      <img
-                        class="now-playing"
-                        src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/now-playing.svg"
-                        alt="now-playing">
-                    </span>
-                  </div>
 
-                  <div
-                    class="audio-meta-data"
-                    data-amplitude-playlist="{{player_playlist}}"
-                    data-amplitude-song-index="{{forloop.index0}}">
-                    <span class="audio-title">{{item.title}}</span>
-
-                    {% comment %} 
-                    {% if playlist_audio_rating %}
-                    <span class="audio-rating">
-                      {{item.rating}}
-                      <i class="mdib mdib-star md-gray-400 mdib-18px"></i>
-                    </span>
+                    <div class="audio-meta-data"
+                      data-amplitude-playlist="{{player_playlist}}"
+                      data-amplitude-song-index="{{forloop.index0}}">
+
+                        <div
+                          class="amplitude-song-container"
+                          data-amplitude-source="{{source_media_attribute}}"
+                          data-amplitude-playlist="{{player_playlist}}">
+                          <span class="title-number">Track {{forloop.index}}
+                          <!-- span class="title-number">{{forloop.index}} -->
+                            <img
+                              class="now-playing"
+                              src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/now-playing.svg"
+                              alt="now-playing">
+                          </span>
+                        </div>
+
+                        <span class="audio-title">{{item.title}}</span>
+
+                        <span class="audio-artist">
+                          <span>{{item.artist}}</span>
+                          <!-- span class="song-artist-album-delimiter">·</span>
+                          <span>{{item.name}}</span -->            
+                        </span>
+                      
+                    </div> <!-- END audio-meta-data -->
+
+                    <!-- jadams, 2024-11-05: ??? -->
+                    {% if player.display_hours %}
+                    <span class="audio-duration">{{item.duration}}</span>
+                    {% else %}
+                    <span class="audio-duration">{{item.duration}}</span>
                     {% endif %}
-                    {% endcomment %}
 
-                    <span class="audio-artist">
-                      <span>{{item.artist}}</span>
-                      <!-- span class="song-artist-album-delimiter">·</span>
-                      <span>{{item.name}}</span -->            
+                    <!-- load audio rating for playlist (LARGE player) -->
+                    {% if item.rating %}
+                    <span class="audio-rating" data-amplitude-playlist="{{player_playlist}}">
+                      {% capture rating_image %}{{image_rating_path}}/{{item.rating}}-star.svg{% endcapture %}
+                      <img src="{{rating_image}}" alt="song rating">
                     </span>
-                  </div>
+                    {% else %}
+                    <!-- place empty (span) element (placeholder) -->
+                    <span class="audio-rating"></span>
+                    {% endif %}
 
-                  <!-- jadams, 2024-11-05: workaround -->
-                  {% if player.display_hours %}
-                  <span class="audio-duration">{{item.duration}}</span>
-                  {% else %}
-                  <span class="audio-duration" style="margin-left: 50px;">{{item.duration}}</span>
-                  <!-- span class="audio-duration">{{item.duration}}</span -->
-                  {% endif %}
-                  
+                  </div>
+                  <!-- END list item -->
+                  {% endif %}{% endfor %}
+                </li>                
+                <!-- END Playlist item -->
 
-                </div>
-                <!-- END list item -->
-                {% endif %}{% endfor %}
-              </div>
+              </ul>
               <!-- END playlist items (Large Player) -->
 
             </div> <!-- END Large Player|Right Side -->
@@ -1077,7 +1106,7 @@ exclude_from_search:                    true
       {% endif %}
 
       {% comment %} END LARGE player
-      ========================================================================== {% endcomment %}
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
 
       {% comment %} Reset element variables (already processed)
       -------------------------------------------------------------------------- {% endcomment %}