RubyGems - j1-template - Versions diffs - 2024.3.13 → 2024.3.15 - Mend

j1-template 2024.3.13 → 2024.3.15

Files changed (215) hide show

data/assets/data/amplitude.html CHANGED Viewed

@@ -76,28 +76,87 @@ amplitude_defaults: {{amplitude_defaults | debug}}
   <body>
   {% comment %} create player instances
+  player.volume_slider:             {{player.volume_slider | debug}}
+  amplitude_defaults.volume_slider: {{amplitude_defaults.player.volume_slider | debug}}
+  volume_slider:                    {{volume_slider}}
   ============================================================================== {% endcomment %}
   {% for player in amplitude_options.players %} {% if player.enabled %}
-    {% assign player_enabled  = player.enabled %}
-    {% assign player_id       = player.id %}
-    {% assign player_playlist = player.playlist.name | strip %}
-    {% comment %} detect|set player settings
+    {% comment %} player default settings
+    ---------------------------------------------------------------------------- {% endcomment %}
+    {% assign source_media                  = amplitude_defaults.player.source %}
+    {% assign song_progress_bar             = amplitude_defaults.player.song_progress_bar %}
+    {% assign audio_rating                  = amplitude_defaults.player.audio_rating %}
+    {% assign display_hours                 = amplitude_defaults.player.display_hours %}
+    {% assign volume_slider                 = amplitude_defaults.player.volume_slider.enabled %}
+    {% 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 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 %}
+    {% assign playlist_audio_info           = amplitude_defaults.player.playlist.audio_info %}
+    {% comment %} player settings
     ---------------------------------------------------------------------------- {% endcomment %}
+    {% assign player_enabled                = player.enabled %}
+    {% assign player_id                     = player.id %}
+    {% assign player_playlist               = player.playlist.name | strip %}
     {% if player.type %}
-      {% assign player_type   = player.type %}
-    {% else %}
-      {% assign player_type   = amplitude_defaults.player.type %}
+      {% assign player_type = player.type %}
     {% endif %}
     {% if player.playlist.controls %}
       {% assign playlist_controls = player.playlist.controls %}
+    {% endif %}
+    {% if player.song_progress_bar %}
+      {% assign song_progress_bar = player.song_progress_bar %}
+    {% endif %}
+    {% comment %} NOTE: slider VALUE is set by Adapter|Amplitude API (volume)
+    ---------------------------------------------------------------------------- {% endcomment %}
+    {% if player.volume_slider %}
+      {% assign volume_slider      = player.volume_slider.enabled %}
+      {% 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 %}
+    {% 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 %}
+    {% if player.repeat_button %}
+      {% assign repeat_button = player.repeat_button %}
+    {% endif %}
+    {% if player.skip_forward_backward_button %}
+      {% assign skip_forward_backward_button = player.skip_forward_backward_button %}
+    {% endif %}
+    {% if player.display_hours %}
+      {% assign display_hours = player.display_hours %}
+    {% endif %}
+    {% if player.playlist.audio_info %}
+      {% assign player_audio_info = player.playlist.audio_info %}
+    {% endif %}
+    {% if player.audio_rating %}
+      {% assign player_audio_rating = player.audio_rating %}
     {% else %}
-      {% assign playlist_controls = amplitude_defaults.player.playlist.controls %}
+      {% assign player_audio_rating = audio_rating %}
     {% endif %}
     {% comment %} unused
     ----------------------------------------------------------------------------
     {% unless player.playlist.scrollbar %}
@@ -110,11 +169,6 @@ amplitude_defaults: {{amplitude_defaults | debug}}
       {% endunless %}
     {% endunless %}
     ---------------------------------------------------------------------------- {% endcomment %}
-    {% if player.playlist.audio_info %}
-      {% assign player_audio_info = player.playlist.audio_info %}
-    {% else %}
-      {% assign player_audio_info = amplitude_defaults.player.playlist.audio_info %}
-    {% endif %}
     {% comment %} collect playlist items
@@ -140,7 +194,7 @@ amplitude_defaults: {{amplitude_defaults | debug}}
       {% comment %} MINI player
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
-      {% when 'mini' %}{% if player_enabled %}
+      {% when 'mini' %} {% if player_enabled %}
       <!-- START create player instance on ID: {{player_id}} of type: {{player_type}} -->
       <div id="{{player_id}}" class="mini-player">
@@ -148,15 +202,24 @@ amplitude_defaults: {{amplitude_defaults | debug}}
         <div class="mini-player-container">
           <!-- START progress bar -->
+          {% if song_progress_bar %}
           <progress
             class="mini-player-progress amplitude-song-played-progress"
             data-amplitude-playlist="{{player_playlist}}">
           </progress>
+          {% endif %}
           <!-- END progress bar -->
           <!-- START time container -->
           <div class="time-container">
             <span class="current-time">
+              {% if display_hours %}
+              <span
+                class="amplitude-current-hours"
+                data-amplitude-playlist="{{player_playlist}}">
+              </span>
+              :
+              {% endif %}
               <span
                 class="amplitude-current-minutes"
                 data-amplitude-playlist="{{player_playlist}}">
@@ -168,6 +231,13 @@ amplitude_defaults: {{amplitude_defaults | debug}}
               </span>
             </span>
             <span class="duration">
+              {% if display_hours %}
+              <span
+                class="amplitude-duration-hours"
+                data-amplitude-playlist="{{player_playlist}}">
+              </span>
+              :
+              {% endif %}
               <span
                 class="amplitude-duration-minutes"
                 data-amplitude-playlist="{{player_playlist}}">
@@ -222,9 +292,17 @@ amplitude_defaults: {{amplitude_defaults | debug}}
           <!-- START volume container -->
           <div class="mini-player volume-container">
+            {% if volume_slider %}
             <img src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg" alt="Volume Icon">
-            <!-- jadams, TODO: make range STEPS configurable -->
-            <input type="range" class="mini-player amplitude-volume-slider" step="1" aria-label="Amplitude Volume Slider">
+            <input
+              id="volume_slider_{{player_id}}"
+              class="mini-player amplitude-volume-slider"
+              type="range"
+              min="{{volume_slider_min}}"
+              max="{{volume_slider_max}}"
+              step="{{volume_slider_step}}"
+              aria-label="Amplitude Volume Slider">
+            {% endif %}
           </div>
           <!-- END volume container -->
@@ -241,7 +319,7 @@ amplitude_defaults: {{amplitude_defaults | debug}}
       {% comment %} COMPACT player
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
-      {% when 'compact' %}{% if player_enabled %}
+      {% when 'compact' %} {% if player_enabled %}
       <!-- START create player instance on ID: {{player_id}} of type: {{player_type}} -->
       <div id="{{player_id}}" class="compact-player">
         <div class="compact-player-container">
@@ -253,59 +331,105 @@ amplitude_defaults: {{amplitude_defaults | debug}}
               Hide Playlist
             </div> <!-- END playlist-screen header (toggle playlist) -->
-            <!-- jadams, 2024-07-06: controls configurable in player -->
             {% if playlist_controls %}
             <div class="playlist-screen-controls">
               <div class="playlist-screen-meta-container">
-                <span class="song-name" data-amplitude-playlist="{{player_playlist}}" data-amplitude-song-info="name"></span>
+                <span
+                  class="song-name" data-amplitude-playlist="{{player_playlist}}"
+                  data-amplitude-source="{{source_media_attribute}}"
+                  data-amplitude-song-info="name"></span>
                 <div class="song-artist-album">
-                  <span data-amplitude-playlist="{{player_playlist}}" data-amplitude-song-info="artist" data-amplitude-song-index="0"></span>
+                  <span
+                  data-amplitude-source="{{source_media_attribute}}"
+                  data-amplitude-playlist="{{player_playlist}}"
+                  data-amplitude-song-info="artist">
+                </span>
+                <!-- span class="song-artist-album-delimiter">·</span>
+                <span
+                  data-amplitude-source="audio"
+                  data-amplitude-playlist="{{player_playlist}}"
+                  data-amplitude-song-info="album">
+                </span -->
                 </div>
               </div>
               <div class="list-controls">
-                <div class="list-previous amplitude-prev" data-amplitude-playlist="{{player_playlist}}"></div>
-                <div class="list-play-pause amplitude-play-pause" data-amplitude-playlist="{{player_playlist}}"></div>
-                <div class="list-next amplitude-next" data-amplitude-playlist="{{player_playlist}}"></div>
+                <div
+                  class="list-previous amplitude-prev"
+                  data-amplitude-source="{{source_media_attribute}}"
+                  data-amplitude-playlist="{{player_playlist}}">
+                </div>
+                <div
+                  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"
+                  data-amplitude-source="{{source_media_attribute}}"
+                  data-amplitude-playlist="{{player_playlist}}">
+                </div>
               </div>
             </div> <!-- END playlist controls -->
             {% endif %}
-            <!-- START playlist items -->
-            <div id="compact_player_title_list_{{player_playlist}}" class="compact-player-title-list">
+            <!-- START playlist items (COMPACT player )-->
+            <div
+              id="compact_player_title_list_{{player_playlist}}"
+              class="compact-player-title-list">
               {% for item in playlist_items %} {% if item.enabled %}
               <!-- START list item -->
               <div
                 class="song amplitude-song-container amplitude-play-pause"
+                data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-song-index="{{forloop.index0}}"
                 data-amplitude-playlist="{{player_playlist}}">
                 <span class="song-number-now-playing">
                   <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">
+                    <img
+                      class="now-playing"
+                      src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/now-playing.svg"
+                      alt="now-playing">
                   </span>
                 </span>
-                <div class="playlist-song-meta song-meta-container" data-amplitude-playlist="{{player_playlist}}">
+                <div
+                  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>
-                  <span class="song-artist-album">
+                  {% if player_audio_rating %}
+                  <span class="audio-rating">
+                    {{item.rating}}
+                    <i class="mdib mdib-star md-gray-400 mdib-18px"></i>
+                  </span>
+                  {% endif %}
+                  <!-- span class="song-artist-album">
                     <span>{{item.name}}</span>
                     <span class="song-artist-album-delimiter">·</span>
                     <span>{{item.artist}}</span>
+                  </span -->
+                  <span class="song-artist-album">
+                    <span>{{item.artist}}</span>
                   </span>
-                </div>
-                <a href="{{item.audio_info}}" class="audio-info-link" target="_blank">
                   {% if player_audio_info %}
-                  <img class="audio-info-blue" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/audio-info-blue.svg"   alt="audio-info" style="display: block">
-                  <img class="audio-info-white" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/audio-info-white.svg" alt="audio-info" style="display: none">
-                  {% else %}
-                  <img class="audio-info-blue" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/audio-info-blue.svg"   alt="audio-info" style="display: none">
-                  <img class="audio-info-white" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/audio-info-white.svg" alt="audio-info" style="display: none">
+                  <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>
                   {% endif %}
-                </a>
-                <span class="audio-duration">{{item.duration}}</span>
+                  <span class="audio-duration">{{item.duration}}</span>
+                </div> <!-- END song-meta-container -->
               </div>
               <!-- END list item -->
               {% endif %} {% endfor %}
@@ -321,32 +445,45 @@ amplitude_defaults: {{amplitude_defaults | debug}}
             <div id="show_playlist_{{player_id}}" class="compact-player-header show-playlist">
               <span>
                 <span
+                  data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}"
                   data-amplitude-song-info="artist">
                 </span>
                 <span class="song-artist-album-delimiter">·</span>
                 <span
+                  data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}"
                   data-amplitude-song-info="album">
                 </span>
             </span>
-              <img class="compact-player-header-arrows" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/down.svg" alt="Down Arrow">
+              <img
+                class="compact-player-header-arrows"
+                src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/down.svg"
+                alt="Down Arrow">
             </div> <!-- END compact player header (toggle playlist) -->
             <div class="player-top">
-              <!-- jadams, DEFAULT album cover image replaced by AmplidudeJS (based on playlist) -->
-              <img
-                src="/assets/audio/cover/default/placeholder-blue.jpg"
-                data-amplitude-playlist="{{player_playlist}}"
-                data-amplitude-song-info="cover_art_url"
-                alt="album cover">
+              <!-- NOTE: album cover image (replaced by AJS API based on playlist) -->
+              <div class="album-cover-image">
+                <img
+                  src="/assets/audio/cover/default/placeholder-blue.jpg"
+                  data-amplitude-playlist="{{player_playlist}}"
+                  data-amplitude-source="{{source_media_attribute}}"
+                  data-amplitude-song-info="cover_art_url"
+                  alt="album cover image"
+                >
+              </div>
             </div>
-            <!-- progress bar -->
+            <!-- START progress bar -->
+            {% if song_progress_bar %}
             <progress
               class="compact-player-progress amplitude-song-played-progress"
+              data-amplitude-source="{{source_media_attribute}}"
               data-amplitude-playlist="{{player_playlist}}">
             </progress>
+            <!-- END progress bar -->
+            {% endif %}
             <!-- END COMPACT player TOP -->
             <!-- START COMPACT player MIDDLE -->
@@ -356,42 +493,68 @@ amplitude_defaults: {{amplitude_defaults | debug}}
                 <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"
+                      data-amplitude-source="{{source_media_attribute}}"
                       data-amplitude-playlist="{{player_playlist}}">
                     </div>
+                    {% endif %}
                     <div
                       id="compact_player_previous"
                       class="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">
+                   </div>
+                   {% endif %}
                     <div
                       id="compact_player_play_pause"
                       class="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">
+                    </div>
+                    {% endif %}
                     <div
                       id="compact_player_next"
                       class="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"
+                      data-amplitude-source="{{source_media_attribute}}"
             				  data-amplitude-playlist="{{player_playlist}}">
             			  </div>
+                    {% endif %}
                     <!-- START volume container -->
                     <div class="compact-player-volume-container">
+                      {% if volume_slider %}
                       <div class="volume-controls">
                         <div class="amplitude-mute amplitude-not-muted"></div>
                         <input
-                          type="range"
+                          id="volume_slider_{{player_id}}"
                           class="amplitude-volume-slider"
-                          step="1"
+                          type="range"
+                          min="{{volume_slider_min}}"
+                          max="{{volume_slider_max}}"
+                          step="{{volume_slider_step}}"
                           aria-label="Amplitude Volume Slider">
                       </div>
+                      {% endif %}
                     </div>
                     <!-- END volume container -->
                   </div>
@@ -407,24 +570,44 @@ amplitude_defaults: {{amplitude_defaults | debug}}
               <!-- time container -->
               <div class="time-container">
                 <span class="current-time">
+                  {% if display_hours %}
+                  <span
+                    class="amplitude-current-hours"
+                    data-amplitude-source="{{source_media_attribute}}"
+                    data-amplitude-playlist="{{player_playlist}}">
+                  </span>
+                  :
+                  {% endif %}
                   <span
                     class="amplitude-current-minutes"
+                    data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}">
                   </span>
                   :
                   <span
                     class="amplitude-current-seconds"
+                    data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}">
                   </span>
                 </span>
                 <span class="duration">
+                  {% if display_hours %}
+                  <span
+                    class="amplitude-duration-hours"
+                    data-amplitude-source="{{source_media_attribute}}"
+                    data-amplitude-playlist="{{player_playlist}}">
+                  </span>
+                  :
+                  {% endif %}
                   <span
                     class="amplitude-duration-minutes"
+                    data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}">
                   </span>
                   :
                   <span
                     class="amplitude-duration-seconds"
+                    data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}">
                   </span>
                 </span>
@@ -435,15 +618,18 @@ amplitude_defaults: {{amplitude_defaults | debug}}
               <div class="meta-container compact-player">
                 <span
                   class="song-name"
+                  data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}"
                   data-amplitude-song-info="name">
                 </span>
                 <div class="audio-artist-album">
                   <span
+                    data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}"
                     data-amplitude-song-info="artist">
                   </span>
                   <span
+                    data-amplitude-source="{{source_media_attribute}}"
                     data-amplitude-playlist="{{player_playlist}}"
                     data-amplitude-song-info="album">
                   </span>
@@ -452,6 +638,7 @@ amplitude_defaults: {{amplitude_defaults | debug}}
               <!-- END meta container -->
             </div>
             <!-- START COMPACT player BOTTOM -->
           </div>
           <!-- END compact player -->
@@ -465,38 +652,62 @@ amplitude_defaults: {{amplitude_defaults | debug}}
       {% comment %} LARGE player
+      player.source:  {{source_media}}
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
       {% when 'large' %} {% if player_enabled %}
+      {% if player.source %}
+        {% assign source_media = player.source %}
+      {% endif %}
+      {% if player.source == 'video' %}
+        {% assign source_media_attribute = 'youtube' %}
+      {% else %}
+        {% assign source_media_attribute = 'audio' %}
+      {% endif %}
       <!-- START create player instance on ID: {{player_id}} of type: {{player_type}} -->
       {% capture large_player_left_side %}
         <!-- START LARGE player left TOP -->
         <div div class="player-left-top">
           <div class="large-player-playlist-header">
             <span class="audio-artist">
               <span
                 data-amplitude-playlist="{{player_playlist}}"
+                data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-song-info="artist">
               </span>
               <span class="song-artist-album-delimiter">·</span>
               <span
                 data-amplitude-playlist="{{player_playlist}}"
+                data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-song-info="album">
               </span>
             </span>
           </div>
-          <!-- DEFAULT album cover image (replaced by AJS API based on playlist) -->
-          <img
-            src="/assets/audio/cover/default/placeholder-blue.jpg"
-            data-amplitude-playlist="{{player_playlist}}"
-            data-amplitude-song-info="cover_art_url"
-            alt="album cover"
-          >
-          <!-- progress bar -->
+          <!-- NOTE: album cover image (replaced by AJS API based on playlist) -->
+          <div class="album-cover-image">
+            <img
+              src="/assets/audio/cover/default/placeholder-blue.jpg"
+              data-amplitude-playlist="{{player_playlist}}"
+              data-amplitude-source="{{source_media_attribute}}"
+              data-amplitude-song-info="cover_art_url"
+              alt="album cover image"
+            >
+          </div>
+          <!-- START progress bar -->
+          {% if song_progress_bar %}
           <progress
             class="large-player-progress amplitude-song-played-progress"
+            data-amplitude-source="{{source_media_attribute}}"
             data-amplitude-playlist="{{player_playlist}}">
           </progress>
+          {% endif %}
+          <!-- END progress bar -->
         </div>
         <!-- END LARGE player left TOP -->
@@ -507,42 +718,70 @@ amplitude_defaults: {{amplitude_defaults | debug}}
             <div id="large_player_controls">
               <div class="large-player-controls-container">
+                {% if shuffle_button %}
                 <div
                   id="large_player_shuffle"
                   class="amplitude-shuffle amplitude-shuffle-off"
+                  data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
+                {% endif %}
                 <div
                   id="large_player_previous"
                   class="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="large-player-skip-backward"
+                  data-amplitude-source="{{source_media_attribute}}">
+                </div>
+                {% endif %}
                 <div
                   id="large_player_play_pause"
                   class="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="large-player-skip-forward"
+                  data-amplitude-source="{{source_media_attribute}}">
+                </div>
+                {% endif %}
                 <div
                   id="large_player_next"
                   class="amplitude-next"
+                  data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
+                {% if repeat_button %}
                 <div
-                  id="repeat_container_large_player"
+                  id="large_player_repeat"
                   class="amplitude-repeat amplitude-repeat-off"
+                  data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
                 </div>
+                {% endif %}
                 <!-- START volume container -->
                 <div class="compact-player-volume-container">
+                  {% if volume_slider %}
                   <div class="volume-controls">
                     <div class="amplitude-mute amplitude-not-muted"></div>
                     <input
-                      type="range"
+                      id="volume_slider_{{player_id}}"
                       class="amplitude-volume-slider"
-                      step="1"
+                      type="range"
+                      min="{{volume_slider_min}}"
+                      max="{{volume_slider_max}}"
+                      step="{{volume_slider_step}}"
                       aria-label="Amplitude Volume Slider">
                   </div>
+                  {% endif %}
                 </div>
                 <!-- END volume container -->
               </div>
@@ -559,24 +798,44 @@ amplitude_defaults: {{amplitude_defaults | debug}}
           <!-- time container -->
           <div class="time-container">
             <span class="current-time">
+              {% if display_hours %}
+              <span
+                class="amplitude-current-hours"
+                data-amplitude-source="{{source_media_attribute}}"
+                data-amplitude-playlist="{{player_playlist}}">
+              </span>
+              :
+              {% endif %}
               <span
                 class="amplitude-current-minutes"
+                data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-playlist="{{player_playlist}}">
               </span>
               :
               <span
                 class="amplitude-current-seconds"
+                data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-playlist="{{player_playlist}}">
               </span>
             </span>
             <span class="duration">
+              {% if display_hours %}
+              <span
+                class="amplitude-duration-hours"
+                data-amplitude-source="{{source_media_attribute}}"
+                data-amplitude-playlist="{{player_playlist}}">
+              </span>
+              :
+              {% endif %}
               <span
                 class="amplitude-duration-minutes"
+                data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-playlist="{{player_playlist}}">
               </span>
               :
               <span
                 class="amplitude-duration-seconds"
+                data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-playlist="{{player_playlist}}">
               </span>
             </span>
@@ -586,15 +845,18 @@ amplitude_defaults: {{amplitude_defaults | debug}}
           <div class="meta-container large-player">
             <span
               class="song-name"
+              data-amplitude-source="{{source_media_attribute}}"
               data-amplitude-playlist="{{player_playlist}}"
               data-amplitude-song-info="name">
             </span>
             <div class="audio-artist-album">
               <span
+              data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-playlist="{{player_playlist}}"
                 data-amplitude-song-info="artist">
               </span>
               <span
+              data-amplitude-source="{{source_media_attribute}}"
                 data-amplitude-playlist="{{player_playlist}}"
                 data-amplitude-song-info="album">
               </span>
@@ -617,66 +879,122 @@ amplitude_defaults: {{amplitude_defaults | debug}}
             <!-- END Large Player|Left Side -->
             <!-- Large Player|Right Side (playlist) -->
-            <div id="large_player_right" class="hide-scrollbar" data-amplitude-playlist="{{player_playlist}}">
-              <div id="playlist_header_{{player_id}}" class="large-player-playlist-header">Playlist</div>
+            <div
+              id="large_player_right" class="hide-scrollbar"
+              data-amplitude-source="{{source_media_attribute}}"
+              data-amplitude-playlist="{{player_playlist}}">
+              <div
+                id="playlist_header_{{player_id}}"
+                class="large-player-playlist-header">Playlist
+              </div>
-              <!-- jadams, 2024-07-06: controls configurable in player -->
               {% if playlist_controls %}
               <div class="playlist-screen-controls large-player">
                 <div class="playlist-screen-meta-container">
-                  <span class="song-name" data-amplitude-playlist="{{player_playlist}}" data-amplitude-song-info="name"></span>
+                  <span
+                    class="song-name"
+                    data-amplitude-source="{{source_media_attribute}}"
+                    data-amplitude-playlist="{{player_playlist}}"
+                    data-amplitude-song-info="name">
+                  </span>
                   <div class="song-artist-album">
-                    <span data-amplitude-playlist="{{player_playlist}}" data-amplitude-song-info="artist" data-amplitude-song-index="0"></span>
+                    <span
+                      data-amplitude-source="{{source_media_attribute}}"
+                      data-amplitude-playlist="{{player_playlist}}"
+                      data-amplitude-song-info="artist">
+                    </span>
+                    <!-- span class="song-artist-album-delimiter">·</span>
+                    <span
+                      data-amplitude-source="audio"
+                      data-amplitude-playlist="{{player_playlist}}"
+                      data-amplitude-song-info="album">
+                    </span -->
                   </div>
                 </div>
                 <div class="list-controls">
-                  <div class="list-previous amplitude-prev" data-amplitude-playlist="{{player_playlist}}"></div>
-                  <div class="list-play-pause amplitude-play-pause" data-amplitude-playlist="{{player_playlist}}"></div>
-                  <div class="list-next amplitude-next" data-amplitude-playlist="{{player_playlist}}"></div>
+                  <div
+                    class="list-previous amplitude-prev"
+                    data-amplitude-source="{{source_media_attribute}}"
+                    data-amplitude-playlist="{{player_playlist}}">
+                  </div>
+                  <div
+                    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"
+                    data-amplitude-source="{{source_media_attribute}}"
+                    data-amplitude-playlist="{{player_playlist}}"></div>
                 </div>
               </div> <!-- END playlist controls -->
               {% endif %}
-              <!-- START playlist items -->
-              <div id="large_player_title_list_{{player_playlist}}" class="large-player-title-list">
+              <!-- START playlist items (Large Player) -->
+              <div
+                id="large_player_title_list_{{player_playlist}}"
+                class="large-player-title-list">
                 {% for item in playlist_items %}{% if item.enabled %}
                 <!-- START list item -->
                 <div
                   class="song amplitude-song-container amplitude-play-pause"
                   data-amplitude-song-index="{{forloop.index0}}"
+                  data-amplitude-source="{{source_media_attribute}}"
                   data-amplitude-playlist="{{player_playlist}}">
-                  <div class="song-now-playing-icon-container" data-amplitude-playlist="{{player_playlist}}">
+                  <div
+                    class="song-number-now-playing"
+                    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">
+                      <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}}">
+                  <div
+                    class="audio-meta-data"
+                    data-amplitude-playlist="{{player_playlist}}">
                     <span class="audio-title">{{item.title}}</span>
+                    {% if player_audio_rating %}
+                    <span class="audio-rating">
+                      {{item.rating}}
+                      <i class="mdib mdib-star md-gray-400 mdib-18px"></i>
+                    </span>
+                    {% endif %}
                     <span class="audio-artist">
-                      <span>{{item.name}}</span>
-                      <span class="song-artist-album-delimiter">·</span>
                       <span>{{item.artist}}</span>
+                      <!-- span class="song-artist-album-delimiter">·</span>
+                      <span>{{item.name}}</span -->
+                      {% if player_audio_info %}
+                      <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>
+                      {% endif %}
                     </span>
                   </div>
-                  <a href="{{item.audio_info}}" class="audio-info-link" target="_blank">
-                    {% if player_audio_info %}
-                    <img class="audio-info-blue" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/audio-info-blue.svg"   alt="audio-info" style="display: block">
-                    <img class="audio-info-white" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/audio-info-white.svg" alt="audio-info" style="display: none">
-                    {% else %}
-                    <img class="audio-info-blue" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/audio-info-blue.svg"   alt="audio-info" style="display: none">
-                    <img class="audio-info-white" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/audio-info-white.svg" alt="audio-info" style="display: none">
-                    {% endif %}
-                  </a>
+                  <!-- 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 %}
               </div>
-              <!-- EBD playlist items -->
+              <!-- END playlist items (Large Player) -->
             </div> <!-- END Large Player|Right Side -->