j1-template 2024.3.18 → 2024.3.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a170a81f8709bcfaec5bc0b818946359eb389833c0bbe91f0b535c754a8ba9b7
-  data.tar.gz: c6603cd575e924309b25a332051c434302af050b1b84368623681f92f2a1a1c8
+  metadata.gz: c6941217e9123d4e29dab8b3ebdf75975a569d788186bdea21848a03389494de
+  data.tar.gz: 806feeb9b9d9f7eb2fe87118a15b754f4863f20c0307d848ca8fee8c345f91c7
 SHA512:
-  metadata.gz: 5cea7fa21b1448d9478b155bfeab4d515902accd0dec4684acb163461c103b624596ec96b7f9d15f030d4fa99b9cc7696f3ffd3c1982386a4aed1ae0c08162cf
-  data.tar.gz: daef498baf642ccdadf2bc883c48cafe16afd4ef65ee3b062a0109b6c4b4156205c0f8848ff58faf733d528f3003a196109cd27d2cc3d9fe79140ce19b7f9dfb
+  metadata.gz: dd62208be439105f868d6356ce70f190eea65a1d24f9fdd5565eba3e3a1fc5f8afe6db109757e57c923ba257827b3da5a475c0ed772ba409856304386bd5c280
+  data.tar.gz: 152f065d2c6c37b8c05f13bc72815ecc9e887bffc2d2ec0e6b22efe1f3c6415958e21dfa694ec0c2badd3a451a1dd1e26677f647bca5f85117e1a944c0346143

data/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (C) 2023, 2024 Juergen Adams
+Copyright (C) 2023-2025 Juergen Adams
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/_includes/themes/j1/modules/searcher/procedures/topsearch.proc

@@ -94,7 +94,7 @@ topsearch_options.enabled: {{topsearch_options.enabled | debug}}
               <div class="form-group">
                 <div class="input-group">
                   <span class="input-group-addon"><i class="mdib mdib-magnify mdib-2x mr-2"></i></span>
-                  <input id="search-query" class="form-control" type="text" name="q" placeholder="{{placeholder}}" autocomplete="off">
+                  <input id="search-query" class="form-control" type="text" name="quick-search-query" placeholder="{{placeholder}}" autocomplete="off">
                   <span id="clear-topsearch" class="form-clear form-clear-searcher d-none"> <i class="mdib mdib-format-clear mdib-24px"></i> </span>
                   <span id="send-to-history"> <i class="mdib mdib-send mdib-24px" ></i> </span>
                 </div>

data/assets/data/{amplitude.html → amplitude_app.html}

@@ -7,8 +7,8 @@ exclude_from_search:                    true
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/data/amplitude.html
- # Liquid procedure to generate HTML (UI) portion for AmplitudeJS v4 Players
+ # ~/assets/data/amplitude_app.html
+ # Generate the HTML portion for all J1 Amplitude Apps (Player)
  #
  # Product/Info:
  # https://jekyll.one
@@ -39,7 +39,7 @@ exclude_from_search:                    true
 {% assign environment           = site.environment %}
 
 {% assign amplitude_defaults    = modules.defaults.amplitude.defaults %}
-{% assign amplitude_players     = modules.amplitude_players.settings %}
+{% assign amplitude_players     = modules.amplitude_app.settings %}
 {% assign amplitude_playlists   = modules.amplitude_playlists.settings %}
 
 {% comment %} set config options
@@ -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 %}
@@ -264,8 +261,8 @@ exclude_from_search:                    true
               data-amplitude-playlist="{{player_playlist}}">
             </div>
             <div
-              id="mini_player_play_pause"
-              class="amplitude-play-pause"
+              id="mini_player_play_pause_{{player_id}}"
+              class="amplitude-play-pause mini-player-play-pause amplitude-paused"
               data-amplitude-playlist="{{player_playlist}}">
             </div>
             <div
@@ -321,7 +318,7 @@ exclude_from_search:                    true
       {% endif %}
 
       {% comment %} END MINI player
-      ========================================================================== {% endcomment %}
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
 
 
       {% comment %} COMPACT player
@@ -336,9 +333,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 +344,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
@@ -378,17 +391,18 @@ exclude_from_search:                    true
               {% if playlist_controls %}
               <div class="list-controls">
                 <div
-                  class="list-previous amplitude-prev"
+                  class="list-previous amplitude-prev compact-player-previous"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
                 <div
+                  id="compact_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 compact-player-next"
                   data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
@@ -401,10 +415,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="song amplitude-song-container amplitude-song-container-compact-player amplitude-play-pause"
                 data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-song-index="{{forloop.index0}}"
                 data-amplitude-playlist="{{player_playlist}}">
@@ -423,33 +437,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 +461,7 @@ exclude_from_search:                    true
 
               </div>
               <!-- END list item -->
-              {% endif %} {% endfor %}
+              {% endif %}{% endfor %}
 
             </div> <!-- END  playlist items -->
 
@@ -529,8 +531,8 @@ exclude_from_search:                    true
                     </div>
                     {% endif %}
                     <div
-                      id="compact_player_previous"
-                      class="amplitude-prev"
+                      id="compact_player_previous_{{player_id}}"
+                      class="amplitude-prev compact-player-previous"
                       data-amplitude-source="{{source_media_attribute}}"
                       data-amplitude-playlist="{{player_playlist}}">
                     </div>
@@ -541,8 +543,8 @@ exclude_from_search:                    true
                    </div>
                    {% endif %}
                     <div
-                      id="compact_player_play_pause"
-                      class="amplitude-play-pause amplitude-paused"
+                      id="compact_player_play_pause_{{player_id}}"
+                      class="amplitude-play-pause compact-player-play-pause amplitude-paused"
                       data-amplitude-source="{{source_media_attribute}}"
                       data-amplitude-playlist="{{player_playlist}}">
                     </div>
@@ -553,8 +555,8 @@ exclude_from_search:                    true
                     </div>
                     {% endif %}
                     <div
-                      id="compact_player_next"
-                      class="amplitude-next"
+                      id="compact_player_next_{{player_id}}"
+                      class="amplitude-next compact-player-next"
                       data-amplitude-source="{{source_media_attribute}}"
                       data-amplitude-playlist="{{player_playlist}}">
                     </div>
@@ -590,7 +592,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 +679,7 @@ exclude_from_search:                    true
       {% endif %}
 
       {% comment %} END COMPACT player
-      ========================================================================== {% endcomment %}
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
 
 
       {% comment %} LARGE player
@@ -685,6 +687,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 +702,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 +749,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}}">
@@ -774,7 +778,7 @@ exclude_from_search:                    true
                 </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}}">
@@ -788,14 +792,14 @@ exclude_from_search:                    true
                 </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 +807,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="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 +836,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 +917,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 +932,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 +941,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 +956,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 +999,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 amplitude-song-container amplitude-song-container-large-player 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 +1101,7 @@ exclude_from_search:                    true
       {% endif %}
 
       {% comment %} END LARGE player
-      ========================================================================== {% endcomment %}
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
 
       {% comment %} Reset element variables (already processed)
       -------------------------------------------------------------------------- {% endcomment %}