j1-template 2024.3.19 → 2024.3.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/assets/data/amplitude_app.html +174 -150
  3. data/assets/data/swiper_app.2.html +757 -0
  4. data/assets/data/swiper_app.4.html +769 -0
  5. data/assets/data/swiper_app.html +171 -27
  6. data/assets/theme/j1/adapter/js/amplitude.js +817 -165
  7. data/assets/theme/j1/adapter/js/swiper.js +63 -15
  8. data/assets/theme/j1/core/css/themes/bootstrap/bootstrap.css +111 -101
  9. data/assets/theme/j1/core/css/themes/bootstrap/bootstrap.min.css +1 -1
  10. data/assets/theme/j1/core/css/themes/unodark/bootstrap.css +111 -101
  11. data/assets/theme/j1/core/css/themes/unodark/bootstrap.min.css +1 -1
  12. data/assets/theme/j1/core/css/themes/unolight/bootstrap.css +111 -101
  13. data/assets/theme/j1/core/css/themes/unolight/bootstrap.min.css +1 -1
  14. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/amplitude.css +140 -219
  15. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/amplitude.min.css +1 -1
  16. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/compact.css +117 -23
  17. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/compact.min.css +1 -1
  18. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.css +323 -493
  19. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.min.css +1 -2
  20. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/mini.css +20 -73
  21. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/mini.min.css +1 -1
  22. data/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js +2062 -843
  23. data/assets/theme/j1/modules/amplitudejs/scss/theme/uno/dark/player/large.scss +439 -264
  24. data/assets/theme/j1/modules/swiperjs/css/modules/layoutBase.css +16 -0
  25. data/assets/theme/j1/modules/swiperjs/css/modules/layoutBase.min.css +16 -0
  26. data/assets/theme/j1/modules/swiperjs/css/modules/layoutExpanding.css +24 -24
  27. data/assets/theme/j1/modules/swiperjs/css/modules/layoutExpanding.min.css +1 -235
  28. data/assets/theme/j1/modules/swiperjs/css/modules/layoutNeighbor.min.css +2 -2
  29. data/assets/theme/j1/modules/swiperjs/css/modules/layoutParallax.css +16 -0
  30. data/assets/theme/j1/modules/swiperjs/css/modules/layoutParallax.min.css +16 -0
  31. data/assets/theme/j1/modules/swiperjs/css/modules/layoutStacked.css +6 -7
  32. data/assets/theme/j1/modules/swiperjs/css/modules/layoutStacked.min.css +1 -82
  33. data/assets/theme/j1/modules/swiperjs/css/modules/layoutThumbs.min.css +2 -29
  34. data/assets/theme/j1/modules/swiperjs/css/theme/uno.css +29 -12
  35. data/assets/theme/j1/modules/swiperjs/css/theme/uno.min.css +1 -1
  36. data/assets/theme/j1/modules/swiperjs/js/modules/layoutBase.js +25 -0
  37. data/assets/theme/j1/modules/swiperjs/js/modules/layoutBase.min.js +25 -0
  38. data/assets/theme/j1/modules/swiperjs/js/modules/layoutExpanding.js +1 -5
  39. data/assets/theme/j1/modules/swiperjs/js/modules/layoutExpanding.min.js +1 -5
  40. data/assets/theme/j1/modules/swiperjs/js/modules/layoutNeighbor.js +12 -14
  41. data/assets/theme/j1/modules/swiperjs/js/modules/layoutNeighbor.min.js +1 -17
  42. data/assets/theme/j1/modules/swiperjs/js/modules/layoutPanorama.js +0 -1
  43. data/assets/theme/j1/modules/swiperjs/js/modules/layoutParallax.js +25 -0
  44. data/assets/theme/j1/modules/swiperjs/js/modules/layoutParallax.min.js +25 -0
  45. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.0.js +114 -0
  46. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.1.js +93 -0
  47. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.js +42 -13
  48. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.min.js +17 -0
  49. data/assets/theme/j1/modules/swiperjs/js/modules/layoutThumbs.js +76 -25
  50. data/assets/theme/j1/modules/swiperjs/js/modules/layoutThumbs.min.js +1 -17
  51. data/assets/theme/j1/modules/swiperjs/js/swiper-bundle.js +9152 -9131
  52. data/assets/theme/j1/modules/swiperjs/js/swiper-bundle.min.js +1 -1
  53. data/lib/j1/version.rb +1 -1
  54. data/lib/starter_web/README.md +5 -5
  55. data/lib/starter_web/_config.yml +1 -1
  56. data/lib/starter_web/_data/modules/amplitude_app.yml +206 -23
  57. data/lib/starter_web/_data/modules/amplitude_playlists.yml +1122 -19
  58. data/lib/starter_web/_data/modules/defaults/{amplitude_app.yml → amplitude.yml} +70 -26
  59. data/lib/starter_web/_data/modules/swiper_app.yml +289 -155
  60. data/lib/starter_web/_data/modules/swiper_playlists.yml +51 -1
  61. data/lib/starter_web/_data/resources.yml +6 -2
  62. data/lib/starter_web/_data/templates/feed.xml +1 -1
  63. data/lib/starter_web/_plugins/filter/filters.rb +1 -11
  64. data/lib/starter_web/_plugins/index/lunr.rb +1 -1
  65. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-1.png +0 -0
  66. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-2.png +0 -0
  67. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-3.png +0 -0
  68. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-4.png +0 -0
  69. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-5.png +0 -0
  70. data/lib/starter_web/package.json +1 -1
  71. data/lib/starter_web/pages/public/tools/previewer/preview_amplitudejs.adoc +82 -34
  72. data/lib/starter_web/pages/public/tools/tester/app_tester_amplitudejs_yt.adoc +62 -15
  73. data/lib/starter_web/pages/public/tools/tester/app_tester_swiperjs.adoc +121 -36
  74. data/lib/starter_web/pages/public/tour/play_audio.adoc +60 -70
  75. data/lib/starter_web/pages/public/tour/play_video.adoc +1 -1
  76. metadata +29 -14
  77. data/assets/theme/j1/modules/swiperjs/js/highlightJS.js +0 -13376
  78. data/assets/theme/j1/modules/swiperjs/js/highlightJS.min.js +0 -1246
  79. data/assets/theme/j1/modules/swiperjs/js/modules/!readme +0 -3
  80. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/!info/!readme +0 -0
  81. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/!readme +0 -0
  82. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/1.jpg +0 -0
  83. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/2.jpg +0 -0
  84. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/3.jpg +0 -0
  85. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/4.jpg +0 -0
  86. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/5.jpg +0 -0
  87. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/6.jpg +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a4994373c815e04d8f71d9c5acab4f35b632d792596e3923008284876bf8a769
4
- data.tar.gz: f19dde448880ce5ce78e63ba6d1593845a7ab6b4a7d5599d23e2efa5f54cd530
3
+ metadata.gz: c6941217e9123d4e29dab8b3ebdf75975a569d788186bdea21848a03389494de
4
+ data.tar.gz: 806feeb9b9d9f7eb2fe87118a15b754f4863f20c0307d848ca8fee8c345f91c7
5
5
  SHA512:
6
- metadata.gz: 8985e89fa1c9e2620ae937f621df82c0d2e6c5a3314cb9d843034abc38d1ba7ccdb6927fcdd7dcd67350b3bfb6495ead97798872daeb125da29f003e724b46d3
7
- data.tar.gz: 4076171834b368cfcf7bc6d9a95db1e571325d700f04badd74bc01f3655ba4000f3b0b58044f4c71ecf7266c39d0ca7b86e8fc803b6964e024382d784349933e
6
+ metadata.gz: dd62208be439105f868d6356ce70f190eea65a1d24f9fdd5565eba3e3a1fc5f8afe6db109757e57c923ba257827b3da5a475c0ed772ba409856304386bd5c280
7
+ data.tar.gz: 152f065d2c6c37b8c05f13bc72815ecc9e887bffc2d2ec0e6b22efe1f3c6415958e21dfa694ec0c2badd3a451a1dd1e26677f647bca5f85117e1a944c0346143
@@ -38,7 +38,7 @@ exclude_from_search: true
38
38
  -------------------------------------------------------------------------------- {% endcomment %}
39
39
  {% assign environment = site.environment %}
40
40
 
41
- {% assign amplitude_defaults = modules.defaults.amplitude_app.defaults %}
41
+ {% assign amplitude_defaults = modules.defaults.amplitude.defaults %}
42
42
  {% assign amplitude_players = modules.amplitude_app.settings %}
43
43
  {% assign amplitude_playlists = modules.amplitude_playlists.settings %}
44
44
 
@@ -61,6 +61,7 @@ exclude_from_search: true
61
61
  {% assign production = true %}
62
62
  {% endif %}
63
63
 
64
+ {% assign image_rating_path = '/assets/image/pattern/rating/scalable' %}
64
65
 
65
66
  {% comment %} main
66
67
  ================================================================================ {% endcomment %}
@@ -93,7 +94,7 @@ exclude_from_search: true
93
94
  {% assign volume_slider_min = amplitude_defaults.player.volume_slider.min_value %}
94
95
  {% assign volume_slider_max = amplitude_defaults.player.volume_slider.max_value %}
95
96
  {% assign volume_slider_step = amplitude_defaults.player.volume_slider.slider_step %}
96
- {% assign shuffle_repeat_button = amplitude_defaults.player.shuffle_repeat_button %}
97
+ {% assign repeat_button = amplitude_defaults.player.repeat_button %}
97
98
  {% assign shuffle_button = amplitude_defaults.player.shuffle_button %}
98
99
  {% assign skip_forward_backward_button = amplitude_defaults.player.skip_forward_backward_button %}
99
100
  {% assign playlist_controls = amplitude_defaults.player.playlist.controls %}
@@ -129,10 +130,6 @@ exclude_from_search: true
129
130
  {% assign volume_slider_step = amplitude_defaults.player.volume_slider.slider_step %}
130
131
  {% endif %}
131
132
 
132
- {% if player.shuffle_repeat_button %}
133
- {% assign shuffle_repeat_button = player.shuffle_repeat_button %}
134
- {% endif %}
135
-
136
133
  {% if player.shuffle_button %}
137
134
  {% assign shuffle_button = player.shuffle_button %}
138
135
  {% endif %}
@@ -264,8 +261,8 @@ exclude_from_search: true
264
261
  data-amplitude-playlist="{{player_playlist}}">
265
262
  </div>
266
263
  <div
267
- id="mini_player_play_pause"
268
- class="amplitude-play-pause"
264
+ id="mini_player_play_pause_{{player_id}}"
265
+ class="amplitude-play-pause mini-player-play-pause amplitude-paused"
269
266
  data-amplitude-playlist="{{player_playlist}}">
270
267
  </div>
271
268
  <div
@@ -321,7 +318,7 @@ exclude_from_search: true
321
318
  {% endif %}
322
319
 
323
320
  {% comment %} END MINI player
324
- ========================================================================== {% endcomment %}
321
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
325
322
 
326
323
 
327
324
  {% comment %} COMPACT player
@@ -336,9 +333,10 @@ exclude_from_search: true
336
333
  <div id="hide_playlist_{{player_id}}" class="compact-player-header hide-playlist">
337
334
  <img class="compact-player-header-arrows" src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/playlist-hide.svg" alt="Hide Playlist">
338
335
  Playlist
339
- </div> <!-- END playlist-screen header (toggle playlist) -->
340
-
341
- <div class="playlist-screen-controls">
336
+ </div>
337
+ <!-- END playlist-screen header (toggle playlist) -->
338
+
339
+ <div class="playlist-screen-controls screen-controls-compact-player">
342
340
  <div class="playlist-screen-meta-container">
343
341
  <span
344
342
  class="song-name" data-amplitude-playlist="{{player_playlist}}"
@@ -346,20 +344,35 @@ exclude_from_search: true
346
344
  data-amplitude-song-info="name">
347
345
  </span>
348
346
 
349
- <!-- START player_audio_info -->
350
- <!-- load initial (first) info URL -->
351
- {% for item in playlist_items %} {% if item.enabled %}
352
- {% if playlist_audio_info and forloop.first %}
353
- <span class="audio-info">
354
- <a class="audio-info-link" href="{{item.audio_info}}" target="_blank">
355
- <i class="mdib mdib-information md-gray-400 mdib-24px"></i>
356
- </a>
357
- </span>
358
- {% else %}
359
- {% break %}
360
- {% endif %}
361
- {% endif %} {% endfor %}
362
- <!-- END player_audio_info -->
347
+ <!-- START player_audio_info (COMPACT player) -->
348
+ {% for item in playlist_items %}{% if item.enabled %}
349
+
350
+ <!-- place initial (first) info URL -->
351
+ {% if playlist_audio_info and forloop.first %}
352
+ <span class="amplitude-audio-info">
353
+ <a class="audio-info-link" href="{{item.audio_info}}" target="_blank">
354
+ <i class="mdib mdib-information md-gray-400 mdib-24px"></i>
355
+ </a>
356
+ </span>
357
+ {% else %}
358
+ {% break %}
359
+ {% endif %}
360
+
361
+ <!-- place initial (first) audio rating for screen controls -->
362
+ {% if playlist_audio_rating and forloop.first %}
363
+ {% capture rating_image %}{{image_rating_path}}/{{item.rating}}-star.svg{% endcapture %}
364
+ <span
365
+ class="audio-rating audio-rating-screen-controls"
366
+ data-amplitude-playlist="{{player_playlist}}"
367
+ data-player-type="compact">
368
+ <img src="{{rating_image}}" alt="song rating">
369
+ </span>
370
+ {% else %}
371
+ {% break %}
372
+ {% endif %}
373
+
374
+ {% endif %}{% endfor %}
375
+ <!-- END place place initial audio_info|audio_rating (COMPACT player) -->
363
376
 
364
377
  <div class="song-artist-album">
365
378
  <span
@@ -378,17 +391,18 @@ exclude_from_search: true
378
391
  {% if playlist_controls %}
379
392
  <div class="list-controls">
380
393
  <div
381
- class="list-previous amplitude-prev"
394
+ class="list-previous amplitude-prev compact-player-previous"
382
395
  data-amplitude-source="{{source_media_attribute}}"
383
396
  data-amplitude-playlist="{{player_playlist}}">
384
397
  </div>
385
398
  <div
399
+ id="compact_player_play_pause_{{player_id}}"
386
400
  class="list-play-pause amplitude-play-pause"
387
401
  data-amplitude-source="{{source_media_attribute}}"
388
402
  data-amplitude-playlist="{{player_playlist}}">
389
403
  </div>
390
404
  <div
391
- class="list-next amplitude-next"
405
+ class="list-next amplitude-next compact-player-next"
392
406
  data-amplitude-source="{{source_media_attribute}}"
393
407
  data-amplitude-playlist="{{player_playlist}}">
394
408
  </div>
@@ -401,10 +415,10 @@ exclude_from_search: true
401
415
  <div
402
416
  id="compact_player_title_list_{{player_playlist}}"
403
417
  class="amplitude-scroller-gradient compact-player-title-list">
404
- {% for item in playlist_items %} {% if item.enabled %}
418
+ {% for item in playlist_items %}{% if item.enabled %}
405
419
  <!-- START list item -->
406
420
  <div
407
- class="song amplitude-song-container amplitude-play-pause"
421
+ class="song amplitude-song-container amplitude-song-container-compact-player amplitude-play-pause"
408
422
  data-amplitude-source="{{source_media_attribute}}"
409
423
  data-amplitude-song-index="{{forloop.index0}}"
410
424
  data-amplitude-playlist="{{player_playlist}}">
@@ -423,33 +437,21 @@ exclude_from_search: true
423
437
  class="playlist-song-meta song-meta-container"
424
438
  data-amplitude-source="{{source_media_attribute}}"
425
439
  data-amplitude-playlist="{{player_playlist}}">
426
- <span class="song-name">{{item.title}}</span>
427
-
428
- {% comment %}
429
- {% if playlist_audio_rating %}
430
- <span class="audio-rating">
431
- {{item.rating}}
432
- <i class="mdib mdib-star md-gray-400 mdib-18px"></i>
433
- </span>
434
- {% endif %}
435
- {% endcomment %}
436
-
437
- <!-- span class="song-artist-album">
438
- <span>{{item.name}}</span>
439
- <span class="song-artist-album-delimiter">·</span>
440
- <span>{{item.artist}}</span>
441
- </span -->
442
440
 
441
+ <span class="song-name">{{item.title}}</span>
443
442
  <span class="song-artist-album">
444
443
  <span>{{item.artist}}</span>
445
444
  </span>
446
445
 
447
- {% if player_audio_infooo %}
448
- <span class="audio-info">
449
- <a href="{{item.audio_info}}" class="audio-info-link" target="_blank">
450
- <i class="mdib mdib-information md-gray-400 mdib-24px"></i>
451
- </a>
452
- </span>
446
+ <!-- place audio rating for playlist (COMPACT player) -->
447
+ {% if playlist_audio_rating %}
448
+ {% capture rating_image %}{{image_rating_path}}/{{item.rating}}-star.svg{% endcapture %}
449
+ <span class="audio-rating" data-amplitude-playlist="{{player_playlist}}">
450
+ <img src="{{rating_image}}" alt="song rating">
451
+ </span>
452
+ {% else %}
453
+ <!-- place empty (span) element (placeholder) -->
454
+ <span class="audio-rating audio-rating-screen-controls"></span>
453
455
  {% endif %}
454
456
 
455
457
  <span class="audio-duration">{{item.duration}}</span>
@@ -459,7 +461,7 @@ exclude_from_search: true
459
461
 
460
462
  </div>
461
463
  <!-- END list item -->
462
- {% endif %} {% endfor %}
464
+ {% endif %}{% endfor %}
463
465
 
464
466
  </div> <!-- END playlist items -->
465
467
 
@@ -529,8 +531,8 @@ exclude_from_search: true
529
531
  </div>
530
532
  {% endif %}
531
533
  <div
532
- id="compact_player_previous"
533
- class="amplitude-prev"
534
+ id="compact_player_previous_{{player_id}}"
535
+ class="amplitude-prev compact-player-previous"
534
536
  data-amplitude-source="{{source_media_attribute}}"
535
537
  data-amplitude-playlist="{{player_playlist}}">
536
538
  </div>
@@ -541,8 +543,8 @@ exclude_from_search: true
541
543
  </div>
542
544
  {% endif %}
543
545
  <div
544
- id="compact_player_play_pause"
545
- class="amplitude-play-pause amplitude-paused"
546
+ id="compact_player_play_pause_{{player_id}}"
547
+ class="amplitude-play-pause compact-player-play-pause amplitude-paused"
546
548
  data-amplitude-source="{{source_media_attribute}}"
547
549
  data-amplitude-playlist="{{player_playlist}}">
548
550
  </div>
@@ -553,8 +555,8 @@ exclude_from_search: true
553
555
  </div>
554
556
  {% endif %}
555
557
  <div
556
- id="compact_player_next"
557
- class="amplitude-next"
558
+ id="compact_player_next_{{player_id}}"
559
+ class="amplitude-next compact-player-next"
558
560
  data-amplitude-source="{{source_media_attribute}}"
559
561
  data-amplitude-playlist="{{player_playlist}}">
560
562
  </div>
@@ -590,7 +592,7 @@ exclude_from_search: true
590
592
  <!-- END controls container -->
591
593
  </div>
592
594
  </div>
593
- <!-- END LARGE player left MIDDLE -->
595
+ <!-- END COMPACT player left MIDDLE -->
594
596
 
595
597
  <!-- START COMPACT player BOTTOM -->
596
598
  <div class="player-bottom">
@@ -677,7 +679,7 @@ exclude_from_search: true
677
679
  {% endif %}
678
680
 
679
681
  {% comment %} END COMPACT player
680
- ========================================================================== {% endcomment %}
682
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
681
683
 
682
684
 
683
685
  {% comment %} LARGE player
@@ -685,6 +687,8 @@ exclude_from_search: true
685
687
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
686
688
  {% when 'large' %} {% if player_enabled %}
687
689
 
690
+ <!-- player.shuffle_button: {{player.shuffle_button}} -->
691
+
688
692
  {% if player.source %}
689
693
  {% assign source_media = player.source %}
690
694
  {% endif %}
@@ -698,7 +702,7 @@ exclude_from_search: true
698
702
  <!-- START create player instance on ID: {{player_id}} of type: {{player_type}} -->
699
703
  {% capture large_player_left_side %}
700
704
  <!-- START LARGE player left TOP -->
701
- <div class="player-left-top">
705
+ <div class="large-player-left-top">
702
706
 
703
707
  <div
704
708
  id="large_player_title_header_{{player_id}}"
@@ -745,22 +749,22 @@ exclude_from_search: true
745
749
  <!-- END LARGE player left TOP -->
746
750
 
747
751
  <!-- START LARGE player left MIDDLE -->
748
- <div class="player-left-middle">
752
+ <div class="large-player-left-middle">
749
753
  <!-- START controls container -->
750
- <div id="large_player_control_container">
751
- <div id="large_player_controls">
754
+ <div class="large-player-control-container">
755
+ <div id="large_player_controls" class="large_player_controls">
752
756
 
753
757
  <div class="large-player-controls-container">
754
758
  {% if shuffle_button %}
755
759
  <div
756
- id="large_player_shuffle"
760
+ id="large_player_shuffle_{{player_id}}"
757
761
  class="large-player-shuffle-{{player_id}} amplitude-shuffle amplitude-shuffle-off"
758
762
  data-amplitude-source="{{source_media_attribute}}"
759
763
  data-amplitude-playlist="{{player_playlist}}">
760
764
  </div>
761
765
  {% endif %}
762
766
  <div
763
- id="large_player_previous"
767
+ id="large_player_previous_{{player_id}}"
764
768
  class="large-player-previous-{{player_id}} large-player-previous amplitude-prev"
765
769
  data-amplitude-source="{{source_media_attribute}}"
766
770
  data-amplitude-playlist="{{player_playlist}}">
@@ -774,7 +778,7 @@ exclude_from_search: true
774
778
  </div>
775
779
  {% endif %}
776
780
  <div
777
- id="large_player_play_pause"
781
+ id="large_player_play_pause_{{player_id}}"
778
782
  class="large-player-play-pause-{{player_id}} large-player-play-pause amplitude-play-pause amplitude-paused"
779
783
  data-amplitude-source="{{source_media_attribute}}"
780
784
  data-amplitude-playlist="{{player_playlist}}">
@@ -788,14 +792,14 @@ exclude_from_search: true
788
792
  </div>
789
793
  {% endif %}
790
794
  <div
791
- id="large_player_next"
795
+ id="large_player_next_{{player_id}}"
792
796
  class="large-player-next-{{player_id}} large-player-next amplitude-next"
793
797
  data-amplitude-source="{{source_media_attribute}}"
794
798
  data-amplitude-playlist="{{player_playlist}}">
795
799
  </div>
796
800
  {% if repeat_button %}
797
801
  <div
798
- id="large_player_repeat"
802
+ id="large_player_repeat_{{player_id}}"
799
803
  class="large-player-repeat-{{player_id}} large-player-repeat amplitude-repeat amplitude-repeat-off"
800
804
  data-amplitude-source="{{source_media_attribute}}"
801
805
  data-amplitude-playlist="{{player_playlist}}">
@@ -803,19 +807,22 @@ exclude_from_search: true
803
807
  {% endif %}
804
808
 
805
809
  <!-- START volume container -->
806
- <div class="compact-player-volume-container">
810
+ <div class="large-player-volume-container">
807
811
  {% if volume_slider %}
808
- <div class="volume-controls">
809
- <div class="amplitude-mute amplitude-not-muted"></div>
810
- <input
811
- id="volume_slider_{{player_id}}"
812
- class="amplitude-volume-slider"
813
- type="range"
814
- min="{{volume_slider_min}}"
815
- max="{{volume_slider_max}}"
816
- step="{{volume_slider_step}}"
817
- aria-label="Amplitude Volume Slider">
812
+ <div
813
+ id="amplitude-mute_{{player_id}}"
814
+ class="amplitude-mute amplitude-not-muted"
815
+ data-amplitude-source="{{source_media_attribute}}">
818
816
  </div>
817
+ <input
818
+ id="volume_slider_{{player_id}}"
819
+ class="amplitude-volume-slider"
820
+ data-amplitude-source="{{source_media_attribute}}"
821
+ type="range"
822
+ min="{{volume_slider_min}}"
823
+ max="{{volume_slider_max}}"
824
+ step="{{volume_slider_step}}"
825
+ aria-label="Amplitude Volume Slider">
819
826
  {% endif %}
820
827
  </div>
821
828
  <!-- END volume container -->
@@ -829,7 +836,7 @@ exclude_from_search: true
829
836
 
830
837
  <!-- START LARGE player left BOTTOM -->
831
838
  <!-- div class="player-left-bottom" -->
832
- <div class="player-bottom">
839
+ <div class="large-player-left-bottom">
833
840
  <!-- time container -->
834
841
  <div class="time-container">
835
842
  <span class="current-time">
@@ -910,14 +917,14 @@ exclude_from_search: true
910
917
  <div class="large-player-container">
911
918
 
912
919
  <!-- Large Player|Left Side -->
913
- <div id="large_player_left">
920
+ <div id="large_player_left" class="large-player-left">
914
921
  {{large_player_left_side}}
915
922
  </div>
916
923
  <!-- END Large Player|Left Side -->
917
924
 
918
925
  <!-- Large Player|Right Side (playlist) -->
919
926
  <div
920
- id="large_player_right" class="hide-scrollbar"
927
+ id="large_player_right" class="large-player-right hide-scrollbar"
921
928
  data-amplitude-source="{{source_media_attribute}}"
922
929
  data-amplitude-playlist="{{player_playlist}}">
923
930
  <div
@@ -925,7 +932,7 @@ exclude_from_search: true
925
932
  class="large-player-playlist-header">Playlist
926
933
  </div>
927
934
 
928
- <div class="playlist-screen-controls large-player">
935
+ <div class="playlist-screen-controls screen-controls-large-player large-player">
929
936
  <div class="playlist-screen-meta-container">
930
937
  <span
931
938
  class="song-name-{{player_playlist}} song-name"
@@ -934,12 +941,14 @@ exclude_from_search: true
934
941
  data-amplitude-song-info="name">
935
942
  </span>
936
943
 
937
- <!-- START player_audio_info -->
938
- <!-- load initial (first element) info URL -->
939
- {% for item in playlist_items %} {% if item.enabled %}
944
+ <!-- START player_audio_info (LARGE player) -->
945
+
946
+ {% for item in playlist_items %}{% if item.enabled %}
940
947
  {% if playlist_audio_info and forloop.first %}
941
- <span class="audio-info">
942
- <a class="audio-info-link-{player_playlist}} audio-info-link" href="{{item.audio_info}}" target="_blank">
948
+
949
+ <!-- place initial (first element) info URL -->
950
+ <span class="amplitude-audio-info">
951
+ <a class="audio-info-link-{{player_playlist}} audio-info-link" href="{{item.audio_info}}" target="_blank">
943
952
  <i class="mdib mdib-information md-gray-400 mdib-24px"></i>
944
953
  </a>
945
954
  </span>
@@ -947,21 +956,25 @@ exclude_from_search: true
947
956
  {% break %}
948
957
  {% endif %}
949
958
 
950
- <!-- load initial (first element) rating -->
959
+ <!-- place initial (first) audio rating for screen controls (LARGE player) -->
951
960
  {% if playlist_audio_rating and forloop.first %}
961
+ {% capture rating_image %}{{image_rating_path}}/{{item.rating}}-star.svg{% endcapture %}
952
962
  {% if item.rating %}
953
- <span class="audio-rating-{player_playlist}} audio-rating">
954
- {{item.rating}}
955
- <i class="mdib mdib-star md-gray-400 mdib-18px"></i>
963
+ <span
964
+ class="audio-rating audio-rating-screen-controls"
965
+ data-amplitude-playlist="{{player_playlist}}"
966
+ data-player-type="large">
967
+ <img src="{{rating_image}}" alt="song rating">
956
968
  </span>
957
969
  {% else %}
958
- <!-- place empty (span) element (placeholder) -->
959
- <span class="audio-rating-{player_playlist}} audio-rating"></span>
970
+ <!-- place empty (span) element (placeholder) -->
971
+ <span class="audio-rating"></span>
960
972
  {% endif %}
961
973
  {% else %}
962
974
  {% break %}
963
975
  {% endif %}
964
- {% endif %} {% endfor %}
976
+
977
+ {% endif %}{% endfor %}
965
978
  <!-- END playlist_audio_info -->
966
979
 
967
980
  <div class="song-artist-album">
@@ -986,85 +999,96 @@ exclude_from_search: true
986
999
  {% if playlist_controls %}
987
1000
  <div class="list-controls">
988
1001
  <div
989
- class="list-previous amplitude-prev"
1002
+ class="list-previous amplitude-prev large-player-previous"
990
1003
  data-amplitude-source="{{source_media_attribute}}"
991
1004
  data-amplitude-playlist="{{player_playlist}}">
992
1005
  </div>
993
1006
  <div
1007
+ id="large_player_play_pause_{{player_id}}"
994
1008
  class="list-play-pause amplitude-play-pause"
995
1009
  data-amplitude-source="{{source_media_attribute}}"
996
1010
  data-amplitude-playlist="{{player_playlist}}">
997
1011
  </div>
998
1012
  <div
999
- class="list-next amplitude-next"
1013
+ class="list-next amplitude-next large-player-next"
1000
1014
  data-amplitude-source="{{source_media_attribute}}"
1001
1015
  data-amplitude-playlist="{{player_playlist}}">
1002
1016
  </div>
1003
- </div>
1017
+ </div><!-- Large Player|Left Side -->
1004
1018
  {% endif %}
1005
1019
 
1006
1020
  </div> <!-- END playlist controls -->
1007
1021
 
1008
-
1009
1022
  <!-- START playlist items (Large Player) -->
1010
- <div
1023
+ <ul
1011
1024
  id="large_player_title_list_{{player_playlist}}"
1012
- class="amplitude-scroller-gradient large-player-title-list">
1013
- {% for item in playlist_items %}{% if item.enabled %}
1014
- <!-- START list item -->
1015
- <div
1016
- class="amplitude-song-container-large-player-{{player_id}} song amplitude-song-container amplitude-play-pause"
1017
- data-amplitude-song-index="{{forloop.index0}}"
1018
- data-amplitude-source="{{source_media_attribute}}"
1019
- data-amplitude-playlist="{{player_playlist}}">
1020
-
1025
+ class="amplitude-scroller-gradient large-player-title-list"
1026
+ style="margin-bottom: 0px; padding-left: 0px;">
1027
+
1028
+ <!-- START Playlist item -->
1029
+ <li>
1030
+ {% for item in playlist_items %}{% if item.enabled %}
1031
+ <!-- START list item -->
1032
+ <!-- class="amplitude-song-container-large-player-{{player_id}} amplitude-song-container-large-player amplitude-song-container amplitude-song amplitude-play-pause amplitude-player-large" -->
1033
+ <!-- class="amplitude-song amplitude-song-container amplitude-song-container-large-player amplitude-play-pause amplitude-paused" -->
1021
1034
  <div
1022
- class="song-number-now-playing"
1035
+ class="amplitude-song-container-large-player-{{player_id}} amplitude-song amplitude-song-container amplitude-song-container-large-player amplitude-play-pause amplitude-paused"
1036
+ data-amplitude-song-index="{{forloop.index0}}"
1023
1037
  data-amplitude-source="{{source_media_attribute}}"
1024
1038
  data-amplitude-playlist="{{player_playlist}}">
1025
- <span class="title-number">{{forloop.index}}
1026
- <img
1027
- class="now-playing"
1028
- src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/now-playing.svg"
1029
- alt="now-playing">
1030
- </span>
1031
- </div>
1032
1039
 
1033
- <div
1034
- class="audio-meta-data"
1035
- data-amplitude-playlist="{{player_playlist}}"
1036
- data-amplitude-song-index="{{forloop.index0}}">
1037
- <span class="audio-title">{{item.title}}</span>
1038
-
1039
- {% comment %}
1040
- {% if playlist_audio_rating %}
1041
- <span class="audio-rating">
1042
- {{item.rating}}
1043
- <i class="mdib mdib-star md-gray-400 mdib-18px"></i>
1044
- </span>
1040
+ <div class="audio-meta-data"
1041
+ data-amplitude-playlist="{{player_playlist}}"
1042
+ data-amplitude-song-index="{{forloop.index0}}">
1043
+
1044
+ <div
1045
+ class="amplitude-song-container"
1046
+ data-amplitude-source="{{source_media_attribute}}"
1047
+ data-amplitude-playlist="{{player_playlist}}">
1048
+ <span class="title-number">Track {{forloop.index}}
1049
+ <!-- span class="title-number">{{forloop.index}} -->
1050
+ <img
1051
+ class="now-playing"
1052
+ src="/assets/theme/j1/modules/amplitudejs/icons/player/dark/now-playing.svg"
1053
+ alt="now-playing">
1054
+ </span>
1055
+ </div>
1056
+
1057
+ <span class="audio-title">{{item.title}}</span>
1058
+
1059
+ <span class="audio-artist">
1060
+ <span>{{item.artist}}</span>
1061
+ <!-- span class="song-artist-album-delimiter">·</span>
1062
+ <span>{{item.name}}</span -->
1063
+ </span>
1064
+
1065
+ </div> <!-- END audio-meta-data -->
1066
+
1067
+ <!-- jadams, 2024-11-05: ??? -->
1068
+ {% if player.display_hours %}
1069
+ <span class="audio-duration">{{item.duration}}</span>
1070
+ {% else %}
1071
+ <span class="audio-duration">{{item.duration}}</span>
1045
1072
  {% endif %}
1046
- {% endcomment %}
1047
1073
 
1048
- <span class="audio-artist">
1049
- <span>{{item.artist}}</span>
1050
- <!-- span class="song-artist-album-delimiter">·</span>
1051
- <span>{{item.name}}</span -->
1074
+ <!-- load audio rating for playlist (LARGE player) -->
1075
+ {% if item.rating %}
1076
+ <span class="audio-rating" data-amplitude-playlist="{{player_playlist}}">
1077
+ {% capture rating_image %}{{image_rating_path}}/{{item.rating}}-star.svg{% endcapture %}
1078
+ <img src="{{rating_image}}" alt="song rating">
1052
1079
  </span>
1053
- </div>
1080
+ {% else %}
1081
+ <!-- place empty (span) element (placeholder) -->
1082
+ <span class="audio-rating"></span>
1083
+ {% endif %}
1054
1084
 
1055
- <!-- jadams, 2024-11-05: workaround -->
1056
- {% if player.display_hours %}
1057
- <span class="audio-duration">{{item.duration}}</span>
1058
- {% else %}
1059
- <span class="audio-duration" style="margin-left: 50px;">{{item.duration}}</span>
1060
- <!-- span class="audio-duration">{{item.duration}}</span -->
1061
- {% endif %}
1062
-
1085
+ </div>
1086
+ <!-- END list item -->
1087
+ {% endif %}{% endfor %}
1088
+ </li>
1089
+ <!-- END Playlist item -->
1063
1090
 
1064
- </div>
1065
- <!-- END list item -->
1066
- {% endif %}{% endfor %}
1067
- </div>
1091
+ </ul>
1068
1092
  <!-- END playlist items (Large Player) -->
1069
1093
 
1070
1094
  </div> <!-- END Large Player|Right Side -->
@@ -1077,7 +1101,7 @@ exclude_from_search: true
1077
1101
  {% endif %}
1078
1102
 
1079
1103
  {% comment %} END LARGE player
1080
- ========================================================================== {% endcomment %}
1104
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {% endcomment %}
1081
1105
 
1082
1106
  {% comment %} Reset element variables (already processed)
1083
1107
  -------------------------------------------------------------------------- {% endcomment %}