j1-template 2024.3.14 → 2024.3.15

Sign up to get free protection for your applications and to get access to all the features.
Files changed (80) hide show
  1. checksums.yaml +4 -4
  2. data/assets/data/amplitude.html +104 -51
  3. data/assets/data/cookieconsent.html +8 -8
  4. data/assets/data/speak2me.html +11 -11
  5. data/assets/data/translator.html +29 -29
  6. data/assets/theme/j1/adapter/js/amplitude.js +14 -9
  7. data/assets/theme/j1/adapter/js/j1.js +4 -4
  8. data/assets/theme/j1/adapter/js/themes.js +42 -4
  9. data/assets/theme/j1/core/css/icon-fonts/mdib.css +24 -4
  10. data/assets/theme/j1/core/css/icon-fonts/mdib.css.map +1 -1
  11. data/assets/theme/j1/core/css/icon-fonts/mdib.min.css +1 -1
  12. data/assets/theme/j1/core/css/icon-fonts/mdib.min.css.map +1 -1
  13. data/assets/theme/j1/core/css/themes/unolight/bootstrap.css +2 -2
  14. data/assets/theme/j1/core/css/themes/unolight/bootstrap.css.map +1 -1
  15. data/assets/theme/j1/core/css/themes/unolight/bootstrap.min.css +1 -1
  16. data/assets/theme/j1/core/css/themes/unolight/bootstrap.min.css.map +1 -1
  17. data/assets/theme/j1/core/js/template.js +258 -275
  18. data/assets/theme/j1/core/js/template.min.js +7 -7
  19. data/assets/theme/j1/core/js/template.min.js.map +1 -1
  20. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/amplitude.css +50 -23
  21. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/amplitude.min.css +1 -1
  22. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/compact.css +100 -75
  23. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/compact.min.css +1 -1
  24. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.css +92 -76
  25. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.min.css +1 -1
  26. data/assets/theme/j1/modules/gemini/js/gemini.js.map +1 -1
  27. data/assets/theme/j1/modules/jquery/js/jquery.min.map +1 -1
  28. data/assets/theme/j1/modules/videojs/js/plugins/players/dm/dailymotion.js +2 -2
  29. data/lib/j1/version.rb +1 -1
  30. data/lib/starter_web/README.md +5 -5
  31. data/lib/starter_web/_config.yml +1 -1
  32. data/lib/starter_web/_data/modules/amplitude.yml +452 -32
  33. data/lib/starter_web/_data/modules/defaults/amplitude.yml +1 -0
  34. data/lib/starter_web/_data/modules/lazyLoader.yml +8 -8
  35. data/lib/starter_web/_data/modules/masterslider.yml +6 -6
  36. data/lib/starter_web/_data/resources.yml +1 -0
  37. data/lib/starter_web/_data/templates/feed.xml +1 -1
  38. data/lib/starter_web/_plugins/asciidoctor/carousel-block.rb +2 -1
  39. data/lib/starter_web/_plugins/asciidoctor/lightbox-block.rb +1 -1
  40. data/lib/starter_web/_plugins/asciidoctor/masterslider-block.rb +1 -1
  41. data/lib/starter_web/_plugins/asciidoctor/slick-block.rb +2 -1
  42. data/lib/starter_web/_plugins/index/lunr.rb +1 -1
  43. data/lib/starter_web/assets/audio/cover/spontanorama/spontanorama.jpg +0 -0
  44. data/lib/starter_web/assets/audio/cover/spontanorama/src/spontanorama.png +0 -0
  45. data/lib/starter_web/assets/audio/cover/spontanorama/src/spontanorama.psd +0 -0
  46. data/lib/starter_web/package.json +1 -1
  47. data/lib/starter_web/pages/{public/tour → tour}/asciidoc_extensions.adoc +1 -1
  48. data/lib/starter_web/pages/{public/tour → tour}/bootstrap_themes.adoc +1 -1
  49. data/lib/starter_web/pages/{public/tour → tour}/highlghter_rouge.adoc +1 -1
  50. data/lib/starter_web/pages/{public/tour → tour}/modal_extentions.adoc +1 -1
  51. data/lib/starter_web/pages/{public/tour → tour}/play_audio.adoc +35 -27
  52. data/lib/starter_web/pages/{public/tour → tour}/play_video.adoc +25 -8
  53. data/lib/starter_web/pages/{public/tour → tour}/present_images.adoc +17 -16
  54. data/lib/starter_web/pages/{public/tour → tour}/quicksearch.adoc +1 -1
  55. data/lib/starter_web/pages/{public/tour → tour}/responsive_tables.adoc +1 -1
  56. data/lib/starter_web/pages/{public/tour → tour}/typography.adoc +1 -1
  57. metadata +32 -35
  58. data/assets/data/amplitude.28.html +0 -887
  59. data/assets/data/amplitude.29.html +0 -923
  60. data/assets/theme/j1/adapter/js/amplitude.23.js +0 -1165
  61. data/assets/theme/j1/adapter/js/amplitude.24.js +0 -1164
  62. data/assets/theme/j1/adapter/js/amplitude.25.js +0 -1268
  63. data/lib/starter_web/_data/modules/lazyLoader.0.yml +0 -118
  64. /data/lib/starter_web/pages/{public/tour → tour}/_includes/attributes.asciidoc +0 -0
  65. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/100_gistblock.asciidoc +0 -0
  66. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_bottom_info.asciidoc +0 -0
  67. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_bottom_left_warning.asciidoc +0 -0
  68. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_bottom_right_danger.asciidoc +0 -0
  69. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_central_success.asciidoc +0 -0
  70. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_full_height_left_info.asciidoc +0 -0
  71. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_full_height_right_success.asciidoc +0 -0
  72. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_table_bs_modal_examples.asciidoc +0 -0
  73. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_top_info.asciidoc +0 -0
  74. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_top_left_info.asciidoc +0 -0
  75. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/410_top_right_success.asciidoc +0 -0
  76. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/419_advanced_modals_demo.asciidoc +0 -0
  77. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/tables/bs_modal_examples.asciidoc +0 -0
  78. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/themes_bootstrap.asciidoc +0 -0
  79. /data/lib/starter_web/pages/{public/tour → tour}/_includes/documents/themes_rouge.asciidoc +0 -0
  80. /data/lib/starter_web/pages/{public/tour → tour}/icon_fonts.adoc +0 -0
@@ -1,1268 +0,0 @@
1
- ---
2
- regenerate: true
3
- ---
4
-
5
- {%- capture cache -%}
6
-
7
- {% comment %}
8
- # -----------------------------------------------------------------------------
9
- # ~/assets/theme/j1/adapter/js/amplitude.js
10
- # Liquid template to adapt the AmplitudeJS v4 module
11
- #
12
- # Product/Info:
13
- # https://jekyll.one
14
- # Copyright (C) 2023, 2024 Juergen Adams
15
- #
16
- # J1 Template is licensed under the MIT License.
17
- # For details, see: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
18
- # -----------------------------------------------------------------------------
19
- # Test data:
20
- # {{ liquid_var | debug }}
21
- # amplitude_options: {{ amplitude_options | debug }}
22
- # -----------------------------------------------------------------------------
23
- {% endcomment %}
24
-
25
- {% comment %} Liquid procedures
26
- -------------------------------------------------------------------------------- {% endcomment %}
27
-
28
- {% comment %} Set global settings
29
- -------------------------------------------------------------------------------- {% endcomment %}
30
- {% assign environment = site.environment %}
31
- {% assign asset_path = "/assets/theme/j1" %}
32
-
33
- {% comment %} Process YML config data
34
- ================================================================================ {% endcomment %}
35
-
36
- {% comment %} Set config files
37
- -------------------------------------------------------------------------------- {% endcomment %}
38
- {% assign template_config = site.data.j1_config %}
39
- {% assign blocks = site.data.blocks %}
40
- {% assign modules = site.data.modules %}
41
-
42
- {% comment %} Set config data (settings only)
43
- -------------------------------------------------------------------------------- {% endcomment %}
44
- {% assign amplitude_defaults = modules.defaults.amplitude.defaults %}
45
- {% assign amplitude_settings = modules.amplitude.settings %}
46
-
47
- {% comment %} Set config options (settings only)
48
- -------------------------------------------------------------------------------- {% endcomment %}
49
- {% assign amplitude_options = amplitude_defaults | merge: amplitude_settings %}
50
-
51
- {% comment %} Variables
52
- -------------------------------------------------------------------------------- {% endcomment %}
53
- {% assign comments = amplitude_options.enabled %}
54
-
55
- {% comment %} Detect prod mode
56
- -------------------------------------------------------------------------------- {% endcomment %}
57
- {% assign production = false %}
58
- {% if environment == 'prod' or environment == 'production' %}
59
- {% assign production = true %}
60
- {% endif %}
61
-
62
- /*
63
- # -----------------------------------------------------------------------------
64
- # ~/assets/theme/j1/adapter/js/amplitude.js
65
- # J1 Adapter for the amplitude module
66
- #
67
- # Product/Info:
68
- # https://jekyll.one
69
- #
70
- # Copyright (C) 2023, 2024 Juergen Adams
71
- #
72
- # J1 Template is licensed under the MIT License.
73
- # For details, see: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
74
- # -----------------------------------------------------------------------------
75
- # Adapter generated: {{site.time}}
76
- # -----------------------------------------------------------------------------
77
- */
78
-
79
- // -----------------------------------------------------------------------------
80
- // ESLint shimming
81
- // -----------------------------------------------------------------------------
82
- /* eslint indent: "off" */
83
- // -----------------------------------------------------------------------------
84
-
85
- "use strict";
86
- j1.adapter.amplitude = ((j1, window) => {
87
-
88
- // göobal settings
89
- // ---------------------------------------------------------------------------
90
- var environment = '{{environment}}';
91
- var cookie_names = j1.getCookieNames();
92
- var user_state = j1.readCookie(cookie_names.user_state);
93
- var state = 'not_started';
94
-
95
- // module settings
96
- // ---------------------------------------------------------------------------
97
-
98
- // control|logging
99
- // ---------------
100
- var _this;
101
- var logger;
102
- var logText;
103
- var toJSON;
104
- var toText;
105
-
106
- // date|time monitoring
107
- //---------------------
108
- var startTime;
109
- var endTime;
110
- var startTimeModule;
111
- var endTimeModule;
112
- var timeSeconds;
113
-
114
- // amplitude api settings
115
- // ----------------------
116
- var ytpSongIndex = "0";
117
- var ytpAutoPlay = false;
118
- var ytpLoop = true;
119
- var playLists = {};
120
- var playersUILoaded = { state: false };
121
- var apiInitialized = { state: false };
122
- var playList;
123
- var playerID;
124
- var playerType;
125
- var playListTitle;
126
- var playListName;
127
- var amplitudePlayerState;
128
- var amplitudeDefaults;
129
- var amplitudeSettings;
130
- var amplitudeOptions;
131
- var ytPlayer;
132
- var ytpSettings;
133
-
134
- // amplitude player (instance) settings
135
- // NOTE: slider VALUE is set by Adapter|Amplitude API
136
- // ------------------------------------
137
- var xhrLoadState;
138
- var dependency;
139
- var playerCounter = 0;
140
- var load_dependencies = {};
141
- var playersProcessed = [];
142
- var playersHtmlLoaded = false;
143
- var processingPlayersFinished = false;
144
- var playerAudioInfo = ('{{amplitude_defaults.playlist.audio_info}}' === 'true') ? true : false;
145
- var playerDefaultType = '{{amplitude_defaults.player.type}}';
146
- var playerVolumeValue = '{{amplitude_defaults.player.volume_slider.preset_value}}';
147
- var playerVolumeSliderStep = '{{amplitude_defaults.player.volume_slider.slider_step}}';
148
- var playerRepeat = ('{{amplitude_defaults.player.repeat}}' === 'true') ? true : false;
149
- var playerShuffle = ('{{amplitude_defaults.player.shuffle}}' === 'true') ? true : false;
150
- var playerPlayNextTitle = ('{{amplitude_defaults.player.play_next_title}}' === 'true') ? true : false;
151
- var playerPauseNextTitle = ('{{amplitude_defaults.player.pause_next_title}}' === 'true') ? true : false;
152
- var playerDelayNextTitle = '{{amplitude_defaults.player.delay_next_title}}';
153
- var playerForwardBackwardSkipSeconds = '{{amplitude_defaults.player.forward_backward_skip_seconds}}';
154
-
155
- // unused settings
156
- // ---------------------------------------------------------------------------
157
- // var playerWaveformSampleRate = '{{amplitude_defaults.player.waveform_sample_rate}}';
158
-
159
- // ---------------------------------------------------------------------------
160
- // helper functions
161
- // ---------------------------------------------------------------------------
162
- $(function() {
163
-
164
- // Load the IFrame Player API code asynchronously
165
- var techScript;
166
-
167
- var tech = document.createElement('script');
168
- tech.id = 'yt_player_init';
169
- tech.src = "/assets/theme/j1/modules/amplitudejs/js/tech/ytPlayerInit.js";
170
- techScript = document.getElementsByTagName('script')[0];
171
-
172
- techScript.parentNode.insertBefore(tech, techScript);
173
-
174
- });
175
-
176
- // ---------------------------------------------------------------------------
177
- // YouTube Player (loaded early)
178
- // ---------------------------------------------------------------------------
179
- // function ytpAudioInit (options) {
180
- // ytpSettings = options;
181
- //
182
- // // load the IFrame Player API code asynchronously
183
- // //
184
- // var firstScriptTag;
185
- // var tag = document.createElement('script');
186
- // tag.id = 'iframe_api';
187
- // tag.src = '//youtube.com/iframe_api';
188
- // firstScriptTag = document.getElementsByTagName('script')[0];
189
- //
190
- // firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
191
- //
192
- // // Create an <iframe> (and the YouTube player) after the YT API code
193
- // // has been downloaded
194
- // function onYouTubeIframeAPIReady() {
195
- //
196
- // // logger.debug('\n' + 'YouTube IframeAPI: ready');
197
- //
198
- // var ytCtrl = document.getElementById("youtube_player_container");
199
- // ytCtrl.innerHTML = '<img id="youtube-icon1 src=""/> <div id="ytPlayer"></div>';
200
- // ytCtrl.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
201
- // // ytCtrl.onclick = toggleAudio1;
202
- //
203
- // ytPlayer = new YT.Player('ytPlayer', {
204
- // height: 0,
205
- // width: 0,
206
- // videoId: ytpSettings.ytpVideoID,
207
- // playerVars: {
208
- // autoplay: ytpSettings.ytpAutoPlay,
209
- // loop: ytpSettings.ytpLoop
210
- // },
211
- // events: {
212
- // onReady: onPlayerReady,
213
- // onStateChange: onPlayerStateChange
214
- // }
215
- // });
216
- // } // END onYouTubeIframeAPIReady
217
- //
218
- // function onPlayerReady(event) {
219
- // ytPlayer.setPlaybackQuality("small");
220
- // // document.getElementById("youtube-audio").style.display = "block";
221
- // // togglePlayButton1(ytPlayer.getPlayerState() !== 5);
222
- // } // END event onPlayerReady
223
- //
224
- // function onPlayerStateChange(event) {
225
- // if (event.data === 0) {
226
- // var bla = 'blupp'
227
- // // togglePlayButton1(false);
228
- // }
229
- // } // END event onPlayerStateChange
230
- //
231
- // // Create a new div element
232
- // const ytpContainer = document.createElement('div');
233
- //
234
- // // Set attributes for the div container
235
- // ytpContainer.id = 'youtube_player_container';
236
- // // ytpContainer.className = 'container';
237
- // // ytpContainer.setAttribute("data-video", "WxcWO9O4DSM");
238
- // // ytpContainer.setAttribute("data-autoplay", "0");
239
- // // ytpContainer.setAttribute("data-loop", "1");
240
- // // ytpContainer.innerHTML = 'data-video="WxcWO9O4DSM" data-autoplay="0" data-loop="1"';
241
- //
242
- // // Append the div container to the end of the body
243
- // document.body.appendChild(ytpContainer);
244
- //
245
- // }
246
-
247
- // ---------------------------------------------------------------------------
248
- // main
249
- // ---------------------------------------------------------------------------
250
- return {
251
-
252
- // -------------------------------------------------------------------------
253
- // adapter initializer
254
- // -------------------------------------------------------------------------
255
- init: (options) => {
256
-
257
- // -----------------------------------------------------------------------
258
- // default module settings
259
- // -----------------------------------------------------------------------
260
- var settings = $.extend({
261
- module_name: 'j1.adapter.amplitude',
262
- generated: '{{site.time}}'
263
- }, options);
264
-
265
- // -----------------------------------------------------------------------
266
- // global variable settings
267
- // -----------------------------------------------------------------------
268
- amplitudeDefaults = $.extend({}, {{amplitude_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
269
- amplitudeSettings = $.extend({}, {{amplitude_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
270
- amplitudeOptions = $.extend(true, {}, amplitudeDefaults, amplitudeSettings);
271
-
272
- // -----------------------------------------------------------------------
273
- // control|logging settings
274
- // -----------------------------------------------------------------------
275
- _this = j1.adapter.amplitude;
276
- logger = log4javascript.getLogger('j1.adapter.amplitude');
277
-
278
-
279
- // -----------------------------------------------------------------------
280
- // module initializer
281
- // -----------------------------------------------------------------------
282
- var dependencies_met_page_ready = setInterval (() => {
283
- var pageState = $('#content').css("display");
284
- var pageVisible = (pageState === 'block') ? true : false;
285
- var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
286
- // var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
287
-
288
- if (j1CoreFinished && pageVisible) {
289
- startTimeModule = Date.now();
290
-
291
- _this.setState('started');
292
- logger.debug('\n' + 'module state: ' + _this.getState());
293
- logger.info('\n' + 'module is being initialized');
294
-
295
- // jQuery('.scrollbar-rail').scrollbar();
296
-
297
- // -------------------------------------------------------------------
298
- // create global playlist (songs)
299
- // -------------------------------------------------------------------
300
- var songs = [];
301
- _this.songLoader(songs);
302
-
303
- // -------------------------------------------------------------------
304
- // load all players (HTML|UI)
305
- // -------------------------------------------------------------------
306
- _this.playerHtmlLoader(playersUILoaded);
307
- // _this.ytpAudioInit("bla");
308
-
309
- // -------------------------------------------------------------------
310
- // inititialize amplitude api
311
- // -------------------------------------------------------------------
312
- var dependencies_met_players_loaded = setInterval (() => {
313
- if (playersUILoaded.state) {
314
- _this.initApi(songs);
315
- // ytpAudioInit({
316
- // ytpVideoID: "qEhzpBJpUq0",
317
- // ytpAutoPlay: ytpAutoPlay,
318
- // ytpLoop: ytpLoop
319
- // });
320
-
321
- clearInterval(dependencies_met_players_loaded);
322
- } // END if playersUILoaded
323
- }, 10); // END dependencies_met_players_loaded
324
-
325
- // -------------------------------------------------------------------
326
- // initialize player specific UI events
327
- // -------------------------------------------------------------------
328
- var dependencies_met_api_initialized = setInterval (() => {
329
- if (apiInitialized.state) {
330
- _this.initPlayerUiEvents();
331
-
332
- clearInterval(dependencies_met_api_initialized);
333
- } // END if apiInitialized
334
- }, 10); // END dependencies_met_api_initialized
335
-
336
- clearInterval(dependencies_met_page_ready);
337
- } // END pageVisible
338
- }, 10); // END dependencies_met_page_ready
339
-
340
- // $(function() {
341
- //
342
- // // Load the IFrame Player API code asynchronously
343
- // var techScript;
344
- //
345
- // var tech = document.createElement('script');
346
- // tech.src = "/assets/theme/j1/modules/amplitudejs/js/tech/ytPlayerInit.js";
347
- // techScript = document.getElementsByTagName('script')[0];
348
- //
349
- // techScript.parentNode.insertBefore(tech, techScript);
350
- //
351
- // });
352
-
353
- }, // END init
354
-
355
- // -------------------------------------------------------------------------
356
- // Create global playlist|songs (API)
357
- // -------------------------------------------------------------------------
358
- songLoader: (songs) => {
359
-
360
- logger.info('\n' + 'creating global playlist (API): started');
361
-
362
- // -----------------------------------------------------------------------
363
- // initialize amplitude songs
364
- // -----------------------------------------------------------------------
365
- {% for playlist in amplitude_settings.playlists %} {% if playlist.enabled %}
366
- var song_items = $.extend({}, {{playlist.items | replace: 'nil', 'null' | replace: '=>', ':' }});
367
-
368
- for (var i = 0; i < Object.keys(song_items).length; i++) {
369
- if (song_items[i].enabled) {
370
- var item = song_items[i];
371
- var song = {};
372
-
373
- // map config settings|amplitude song items
374
- // -----------------------------------------------------------------
375
- for (const key in item) {
376
- // skip properties NOT needed for a song
377
- if (key === 'item' || key === 'audio_base' || key === 'enabled') {
378
- continue;
379
- } else if (key === 'audio') {
380
- song.url = item.audio_base + '/' + item[key];
381
- continue;
382
- } else if (key === 'title') {
383
- song.name = item[key];
384
- continue;
385
- } else if (key === 'name') {
386
- song.album = item[key];
387
- continue;
388
- } else if (key === 'cover_image') {
389
- song.cover_art_url = item[key];
390
- continue;
391
- } else if (key === 'audio_info') {
392
- if (playerAudioInfo) {
393
- song.audio_info = item[key];
394
- } else {
395
- song.audio_info = '';
396
- } // END if playerAudioInfo
397
- continue;
398
- } else {
399
- song[key] = item[key];
400
- } // END if key
401
- } // END for item
402
- } // END id enabled
403
-
404
- songs.push(song);
405
- } // END for song_items
406
-
407
- {% endif %} {% endfor %}
408
-
409
- logger.info('\n' + 'creating global playlist (API): finished');
410
- }, // END songLoader
411
-
412
- // -------------------------------------------------------------------------
413
- // load players HTML portion (UI)
414
- // -------------------------------------------------------------------------
415
- playerHtmlLoader: (playersLoaded) => {
416
- var playerExistsInPage;
417
-
418
- // -----------------------------------------------------------------------
419
- // initialize HTML portion (UI) for all players configured|enabled
420
- // -----------------------------------------------------------------------
421
- logger.info('\n' + 'loading player HTML components (UI): started');
422
-
423
- {% for player in amplitude_options.players %} {% if player.enabled %}
424
- {% assign xhr_data_path = amplitude_options.xhr_data_path %}
425
- {% capture xhr_container_id %}{{player.id}}_parent{% endcapture %}
426
-
427
- // load players only that are configured in current page
428
- //
429
- playerExistsInPage = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
430
- if (playerExistsInPage) {
431
- playerCounter++;
432
- logger.debug('\n' + 'load player UI on ID #{{player.id}}: started');
433
-
434
- j1.loadHTML({
435
- xhr_container_id: '{{xhr_container_id}}',
436
- xhr_data_path: '{{xhr_data_path}}',
437
- xhr_data_element: '{{player.id}}'
438
- },
439
- 'j1.adapter.amplitude',
440
- 'data_loaded'
441
- );
442
-
443
- // dynamic loader variable to setup the player on ID {{player.id}}
444
- dependency = 'dependencies_met_html_loaded_{{player.id}}';
445
- load_dependencies[dependency] = '';
446
-
447
- // ---------------------------------------------------------------------
448
- // initialize amplitude instance (when player UI loaded)
449
- // ---------------------------------------------------------------------
450
- load_dependencies['dependencies_met_html_loaded_{{player.id}}'] = setInterval (() => {
451
- // check if HTML portion of the player is loaded successfully
452
- xhrLoadState = j1.xhrDOMState['#' + '{{xhr_container_id}}'];
453
-
454
- if (xhrLoadState === 'success') {
455
- playersProcessed.push('{{xhr_container_id}}');
456
- logger.debug('\n' + 'load player UI on ID #{{player.id}}: finished');
457
-
458
- clearInterval(load_dependencies['dependencies_met_html_loaded_{{player.id}}']);
459
- }
460
- }, 10); // END dependencies_met_html_loaded
461
- } // END if playerExistsInPage
462
-
463
- {% endif %} {% endfor %}
464
-
465
- load_dependencies['dependencies_met_players_loaded'] = setInterval (() => {
466
-
467
- if (playersProcessed.length === playerCounter) {
468
- processingPlayersFinished = true;
469
- }
470
-
471
- if (processingPlayersFinished) {
472
- logger.info('\n' + 'loading player HTML components (UI): finished');
473
-
474
- clearInterval(load_dependencies['dependencies_met_players_loaded']);
475
- playersLoaded.state = true;
476
- }
477
- }, 10); // END dependencies_met_players_loaded
478
-
479
- }, // END playerHtmlLoader
480
-
481
- // -------------------------------------------------------------------------
482
- // initApi
483
- // -------------------------------------------------------------------------
484
- initApi: (songlist) => {
485
-
486
- logger.info('\n' + 'initialze API: started');
487
-
488
- {% comment %} collect playlists
489
- -------------------------------------------------------------------------- {% endcomment %}
490
- {% assign playlists_enabled = 0 %}
491
- {% for list in amplitude_settings.playlists %} {% if list.enabled %}
492
- {% assign playlists_enabled = playlists_enabled | plus: 1 %}
493
- {% endif %} {% endfor %}
494
-
495
- {% assign playlists_processed = 0 %}
496
- {% for list in amplitude_settings.playlists %} {% if list.enabled %}
497
- {% assign playlist_items = list.items %}
498
- {% assign playlist_name = list.name %}
499
- {% assign playlist_title = list.title %}
500
-
501
- {% comment %} collect song items
502
- ------------------------------------------------------------------------ {% endcomment %}
503
- {% for item in playlist_items %} {% if item.enabled %}
504
- {% capture song_item %}
505
- {
506
- "name": "{{item.title}}",
507
- "artist": "{{item.artist}}",
508
- "album": "{{item.name}}",
509
- "url": "{{item.audio_base}}/{{item.audio}}",
510
- "cover_art_url": "{{item.cover_image}}"
511
- }{% if forloop.last %}{% else %},{% endif %}
512
- {% endcapture %}
513
- {% capture song_items %}{{song_items}} {{song_item}}{% endcapture %}
514
-
515
- {% comment %} create playlist
516
- ---------------------------------------------------------------------- {% endcomment %}
517
- {% if forloop.last %}
518
- {% capture playlist %}
519
- "{{playlist_name}}": {
520
- "title": "{{playlist_title}}",
521
- "songs": [
522
- {{song_items}}
523
- ]
524
- }
525
- {% endcapture %}
526
- {% assign playlists_processed = playlists_processed | plus: 1 %}
527
-
528
- {% comment %} reset song_items
529
- -------------------------------------------------------------------- {% endcomment %}
530
- {% capture song_items %}{% endcapture %}
531
- {% endif %}
532
- {% endif %} {% endfor %}
533
-
534
- {% comment %} collect playlists players enabled
535
- ------------------------------------------------------------------------ {% endcomment %}
536
- {% capture playlists %}
537
- {{playlists}} {{playlist}} {% if playlists_processed == playlists_enabled %}{% else %},{% endif %}
538
- {% endcapture %}
539
-
540
- {% endif %} {% endfor %}
541
-
542
- // See: https://521dimensions.com/open-source/amplitudejs/docs
543
- // NOTE: slider VALUE (volume) is set by DEFAULT settings (player)
544
- Amplitude.init({
545
- bindings: {
546
- 33: 'play_pause',
547
- 37: 'prev',
548
- 39: 'next'
549
- },
550
- songs: songlist,
551
- playlists: {
552
- {{playlists}}
553
- },
554
- callbacks: {
555
- initialized: function() {
556
- var amplitudeConfig = Amplitude.getConfig();
557
- logger.info('\n' + 'initialze API: finished');
558
- // indicate api successfully initialized
559
- apiInitialized.state = true;
560
- },
561
- onInitError: function() {
562
- // indicate api failed on initialization
563
- apiInitialized.state = false;
564
- console.error('\n' + 'Amplitude API failed on initialization');
565
- },
566
- play: function() {
567
- var songMetaData = Amplitude.getActiveSongMetadata();
568
- logger.debug('\n' + 'playing title: ' + songMetaData.name);
569
- document.getElementById('album-art').style.visibility = 'hidden';
570
- document.getElementById('large-visualization').style.visibility = 'visible';
571
- },
572
- pause: function() {
573
- var songMetaData = Amplitude.getActiveSongMetadata();
574
- logger.debug('\n' + 'pause title: ' + songMetaData.name);
575
- document.getElementById('album-art').style.visibility = 'visible';
576
- document.getElementById('large-visualization').style.visibility = 'hidden';
577
- },
578
- song_change: function() {
579
- var songMetaData = Amplitude.getActiveSongMetadata();
580
- logger.debug('\n' + 'changed to title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
581
- },
582
- next: function() {
583
- var songMetaData = Amplitude.getActiveSongMetadata();
584
-
585
- if (playerDelayNextTitle) {
586
- logger.debug('\n' + 'delay on next title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
587
- }
588
-
589
- if (playerPauseNextTitle) {
590
- amplitudePlayerState = Amplitude.getPlayerState();
591
- if (amplitudePlayerState === 'playing' || amplitudePlayerState === 'stopped' ) {
592
- setTimeout(() => {
593
- // pause playback of next title
594
- logger.debug('\n' + 'paused on next title: ' + songMetaData.name);
595
- Amplitude.pause();
596
- }, 150);
597
- } // END if playing
598
- } // END if pause on next title
599
- },
600
- prev: function() {
601
- var songMetaData = Amplitude.getActiveSongMetadata();
602
-
603
- if (playerDelayNextTitle) {
604
- logger.debug('\n' + 'delay on previous title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
605
- }
606
-
607
- if (playerPauseNextTitle) {
608
- amplitudePlayerState = Amplitude.getPlayerState();
609
- if (amplitudePlayerState === 'playing' || amplitudePlayerState === 'stopped' ) {
610
- setTimeout(() => {
611
- // pause playback of next title
612
- logger.debug('\n' + 'paused on next title: ' + songMetaData.name);
613
- Amplitude.pause();
614
- }, 150);
615
- } // END if playing
616
- } // END if pause on next title
617
- }
618
- }, // END callbacks
619
- // waveforms: {
620
- // sample_rate: playerWaveformSampleRate
621
- // },
622
- continue_next: playerPlayNextTitle,
623
- volume: playerVolumeValue,
624
- volume_decrement: playerVolumeSliderStep,
625
- volume_increment: playerVolumeSliderStep
626
- }); // END Amplitude init
627
-
628
- }, // END initApi
629
-
630
- // -------------------------------------------------------------------------
631
- // initPlayerUiEvents
632
- // -------------------------------------------------------------------------
633
- initPlayerUiEvents: () => {
634
-
635
- var dependencies_met_player_instances_initialized = setInterval (() => {
636
- if (apiInitialized.state) {
637
- logger.info('\n' + 'initialize player specific UI events: started');
638
-
639
- {% for player in amplitude_options.players %} {% if player.enabled %}
640
- {% assign xhr_data_path = amplitude_options.xhr_data_path %}
641
- {% capture xhr_container_id %}{{player.id}}_parent{% endcapture %}
642
-
643
- playerID = '{{player.id}}';
644
- playerType = '{{player.type}}';
645
- playList = '{{player.playlist}}';
646
- playListName = '{{player.playlist.name}}'
647
- playListTitle = '{{player.playlist.title}}';
648
-
649
- logger.debug('\n' + 'set playlist {{player.playlist}} on id #{{player.id}} with title: ' + playListTitle);
650
-
651
- // dynamic loader variable to setup the player on ID {{player.id}}
652
- dependency = 'dependencies_met_player_loaded_{{player.id}}';
653
- load_dependencies[dependency] = '';
654
-
655
- // -----------------------------------------------------------------
656
- // initialize player instance (when player UI is loaded)
657
- // -----------------------------------------------------------------
658
- load_dependencies['dependencies_met_player_loaded_{{player.id}}'] = setInterval (() => {
659
- // check if HTML portion of the player is loaded successfully
660
- var xhrLoadState = j1.xhrDOMState['#' + '{{xhr_container_id}}'];
661
-
662
- if (xhrLoadState === 'success') {
663
-
664
- // set song (title) specific audio info links
665
- // -------------------------------------------------------------
666
- if (playerAudioInfo) {
667
- var infoLinks = document.getElementsByClassName('audio-info-link');
668
- _this.setAudioInfo(infoLinks);
669
- }
670
-
671
- // jadams, 2024-10-19: (song) events DISABLED
672
- // set song (title) specific UI events
673
- // -------------------------------------------------------------
674
- // var songElements = document.getElementsByClassName('song');
675
- // _this.songEvents(songElements);
676
-
677
- // player specific UI events
678
- // -------------------------------------------------------------
679
- logger.debug('\n' + 'setup player specific UI events on ID #{{player.id}}: started');
680
-
681
- var dependencies_met_api_initialized = setInterval (() => {
682
- if (apiInitialized.state) {
683
- amplitudePlayerState = Amplitude.getPlayerState();
684
-
685
- {% if player.id contains 'mini' %}
686
- // ---------------------------------------------------------
687
- // START mini player UI events
688
- //
689
- if (document.getElementById('{{player.id}}') !== null) {
690
-
691
- // click on progress bar
692
- // -------------------------------------------------------
693
-
694
- // getElementsByClassName returns an Array-like object
695
- var progressBars = document.getElementsByClassName("mini-player-progress");
696
-
697
- // add listeners to all progress bars found
698
- for (var i=0; i<progressBars.length; i++) {
699
- progressBars[i].addEventListener('click', function(event) {
700
- var offset = this.getBoundingClientRect();
701
- var xpos = event.pageX - offset.left;
702
-
703
- Amplitude.setSongPlayedPercentage(
704
- (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
705
- });
706
- }
707
-
708
- } // END mini player UI events
709
- {% endif %}
710
-
711
- {% if player.id contains 'compact' %}
712
- // ---------------------------------------------------------
713
- // START compact player UI events
714
- //
715
- if (document.getElementById('{{player.id}}') !== null) {
716
-
717
- // show|hide scrollbar in playlist
718
- // -------------------------------------------------------
719
- const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
720
- if (songsInPlaylist.length <= 8) {
721
- const titleListCompactPlayer = document.getElementById('compact_player_title_list_' + playListName);
722
- if (titleListCompactPlayer !== null) {
723
- titleListCompactPlayer.classList.add('hide-scrollbar');
724
- }
725
- }
726
-
727
- // show|hide playlist
728
- // -------------------------------------------------------
729
-
730
- // show playlist
731
- var showPlaylist = document.getElementById("show_playlist_{{player.id}}");
732
- if (showPlaylist !== null) {
733
- showPlaylist.addEventListener('click', function(event) {
734
- var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
735
-
736
- // scroll player to top position
737
- const targetDiv = document.getElementById("show_playlist_{{player.id}}");
738
- const targetDivPosition = targetDiv.offsetParent.offsetTop;
739
- window.scrollTo(0, targetDivPosition + scrollOffset);
740
-
741
- // open playlist
742
- var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
743
-
744
- playlistScreen.classList.remove('slide-out-top');
745
- playlistScreen.classList.add('slide-in-top');
746
- playlistScreen.style.display = "block";
747
- playlistScreen.style.zIndex = "999";
748
-
749
- // disable scrolling (if window viewport >= BS Medium and above)
750
- if (window.innerWidth >= 720) {
751
- if ($('body').hasClass('stop-scrolling')) {
752
- return false;
753
- } else {
754
- $('body').addClass('stop-scrolling');
755
- }
756
- }
757
- }); // END EventListener 'click' (compact player|show playlist)
758
- }
759
-
760
- // hide playlist
761
- var hidePlaylist = document.getElementById("hide_playlist_{{player.id}}");
762
- if (hidePlaylist !== null) {
763
- hidePlaylist.addEventListener('click', function(event) {
764
- var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
765
-
766
- playlistScreen.classList.remove('slide-in-top');
767
- playlistScreen.classList.add('slislide-out-top');
768
- playlistScreen.style.display = "none";
769
- playlistScreen.style.zIndex = "1";
770
-
771
- // enable scrolling
772
- if ($('body').hasClass('stop-scrolling')) {
773
- $('body').removeClass('stop-scrolling');
774
- }
775
- }); // END EventListener 'click' (compact player|show playlist)
776
- }
777
-
778
- // click on progress bar
779
- // -------------------------------------------------------
780
-
781
- // getElementsByClassName returns an Array-like object
782
- var progressBars = document.getElementsByClassName("compact-player-progress");
783
-
784
- // add listeners to all progress bars found
785
- for (var i=0; i<progressBars.length; i++) {
786
- progressBars[i].addEventListener('click', function(event) {
787
- var offset = this.getBoundingClientRect();
788
- var xpos = event.pageX - offset.left;
789
-
790
- Amplitude.setSongPlayedPercentage(
791
- (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
792
- }); // END EventListener 'click'
793
- }
794
-
795
- // click on skip forward|backward (compact player)
796
- // See: https://github.com/serversideup/amplitudejs/issues/384
797
- // -------------------------------------------------------
798
-
799
- // add listeners to all SkipForwardButtons found
800
- var compactPlayerSkipForwardButtons = document.getElementsByClassName("compact-player-skip-forward");
801
- for (var i=0; i<compactPlayerSkipForwardButtons.length; i++) {
802
- if (compactPlayerSkipForwardButtons[i].id === 'skip-forward_{{player.id}}') {
803
- compactPlayerSkipForwardButtons[i].addEventListener('click', function(event) {
804
- const skipOffset = parseFloat(playerForwardBackwardSkipSeconds);
805
- const duration = Amplitude.getSongDuration();
806
- const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
807
- const targetTime = parseFloat(currentTime + skipOffset);
808
-
809
- if (currentTime > 0) {
810
- Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
811
- } // END EventListener 'click'
812
- });
813
- } // END if ID
814
- } // END for SkipForwardButtons
815
-
816
- // add listeners to all SkipBackwardButtons found
817
- var compactPlayerSkipBackwardButtons = document.getElementsByClassName("compact-player-skip-backward");
818
- for (var i=0; i<compactPlayerSkipBackwardButtons.length; i++) {
819
- if (compactPlayerSkipBackwardButtons[i].id === 'skip-backward_{{player.id}}') {
820
- compactPlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
821
- const skipOffset = parseFloat(playerForwardBackwardSkipSeconds);
822
- const duration = Amplitude.getSongDuration();
823
- const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
824
- const targetTime = parseFloat(currentTime - skipOffset);
825
-
826
- if (currentTime > 0) {
827
- Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
828
- } // END EventListener 'click'
829
- });
830
- } // END if ID
831
- } // END for SkipBackwardButtons
832
-
833
- // click on shuffle button
834
- var compactPlayerShuffleButton = document.getElementById('compact_player_shuffle');
835
- if (compactPlayerShuffleButton) {
836
- compactPlayerShuffleButton.addEventListener('click', function(event) {
837
- var shuffleState = (document.getElementById('compact_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
838
- Amplitude.setShuffle(shuffleState)
839
- }); // END EventListener 'click'
840
- } // END compactPlayerShuffleButton
841
-
842
- // click on repeat button
843
- var compactPlayerRepeatButton = document.getElementById('compact_player_repeat');
844
- if (compactPlayerRepeatButton) {
845
- compactPlayerRepeatButton.addEventListener('click', function(event) {
846
- var repeatState = (document.getElementById('compact_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
847
- Amplitude.setRepeat(repeatState)
848
- }); // END EventListener 'click'
849
- } // END compactPlayerRepeatButton
850
-
851
- } // END compact player UI events
852
- {% endif %}
853
-
854
- {% if player.id contains 'large' %}
855
- // START large player UI events
856
- //
857
- if (document.getElementById('{{player.id}}') !== null) {
858
-
859
- // listener overloads for Youtube video (large player)
860
- // -------------------------------------------------------
861
-
862
- // click on prev button
863
- var largePlayerPreviousButton = document.getElementById('large_player_previous');
864
- if (largePlayerPreviousButton && largePlayerPreviousButton.getAttribute("data-amplitude-source") === 'youtube') {
865
- largePlayerPreviousButton.addEventListener('click', function(event) {
866
- var playlist = this.getAttribute("data-amplitude-playlist");
867
- var songIndex = ytpSongIndex; // Amplitude.getActiveIndex();
868
-
869
- }); // END EventListener 'click'
870
- }
871
-
872
- // click on play_pause button
873
- var largePlayerPlayButton = document.getElementById('large_player_play_pause');
874
- if (largePlayerPlayButton && largePlayerPlayButton.getAttribute("data-amplitude-source") === 'youtube') {
875
- largePlayerPlayButton.addEventListener('click', function(event) {
876
- var playlist = this.getAttribute("data-amplitude-playlist");
877
- var songMetaData = Amplitude.getSongAtIndex(ytpSongIndex);
878
- var songURL = songMetaData.url;
879
- // Amplitude.getActiveIndex();
880
- var songIndex = ytpSongIndex;
881
- }); // END EventListener 'click'
882
- }
883
-
884
- // click on next button
885
- var largePlayerNextButton = document.getElementById('large_player_next');
886
- if (largePlayerNextButton && largePlayerPlayButton.getAttribute("data-amplitude-source") === 'youtube') {
887
- largePlayerNextButton.addEventListener('click', function(event) {
888
- var playlist = this.getAttribute("data-amplitude-playlist");
889
- var songIndex = ytpSongIndex; // Amplitude.getActiveIndex();
890
- }); // END EventListener 'click'
891
- }
892
-
893
- // click on song container
894
- var largetPlayerSongContainer = document.getElementsByClassName("song amplitude-song-container");
895
- for (var i=0; i<largetPlayerSongContainer.length; i++) {
896
- if (largetPlayerSongContainer[i].dataset.amplitudeSource === 'youtube') {
897
- largetPlayerSongContainer[i].addEventListener('click', function(event) {
898
- var playlist = this.getAttribute("data-amplitude-playlist");
899
- var playlistLength = largetPlayerSongContainer.length;
900
- ytpSongIndex = this.getAttribute("data-amplitude-song-index");
901
- });
902
- } // END if Attribute
903
- } // END for
904
-
905
- // add listeners to all progress bars found
906
- // -------------------------------------------------------
907
- var progressBars = document.getElementsByClassName("large-player-progress");
908
- for (var i=0; i<progressBars.length; i++) {
909
- progressBars[i].addEventListener('click', function(event) {
910
- var offset = this.getBoundingClientRect();
911
- var xpos = event.pageX - offset.left;
912
-
913
- Amplitude.setSongPlayedPercentage(
914
- (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
915
- }); // END EventListener 'click'
916
- }
917
-
918
- // click on skip forward|backward (large player)
919
- // See: https://github.com/serversideup/amplitudejs/issues/384
920
- // -------------------------------------------------------
921
-
922
- // add listeners to all SkipForwardButtons found
923
- var largePlayerSkipForwardButtons = document.getElementsByClassName("large-player-skip-forward");
924
- for (var i=0; i<largePlayerSkipForwardButtons.length; i++) {
925
- if (largePlayerSkipForwardButtons[i].id === 'skip-forward_{{player.id}}') {
926
- if (largePlayerSkipForwardButtons[i].dataset.amplitudeSource === 'youtube') {
927
- largePlayerSkipForwardButtons[i].addEventListener('click', function(event) {
928
- const skipOffset = parseFloat(playerForwardBackwardSkipSeconds);
929
- //const duration = Amplitude.getSongDuration();
930
- //const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
931
- //const targetTime = parseFloat(currentTime + skipOffset);
932
-
933
- // if (currentTime > 0) {
934
- // Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
935
- // }
936
- }); // END EventListener 'click
937
- } else {
938
- largePlayerSkipForwardButtons[i].addEventListener('click', function(event) {
939
- const skipOffset = parseFloat(playerForwardBackwardSkipSeconds);
940
- const duration = Amplitude.getSongDuration();
941
- const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
942
- const targetTime = parseFloat(currentTime + skipOffset);
943
-
944
- if (currentTime > 0) {
945
- Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
946
- }
947
- }); // END EventListener 'click
948
- }
949
-
950
- } // END if ID
951
- } // END for SkipForwardButtons
952
-
953
- // add listeners to all SkipBackwardButtons found
954
- var largePlayerSkipBackwardButtons = document.getElementsByClassName("large-player-skip-backward");
955
- for (var i=0; i<largePlayerSkipBackwardButtons.length; i++) {
956
- if (largePlayerSkipBackwardButtons[i].id === 'skip-backward_{{player.id}}') {
957
- if (largePlayerSkipBackwardButtons[i].dataset.amplitudeSource === 'youtube') {
958
- largePlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
959
- const skipOffset = parseFloat(playerForwardBackwardSkipSeconds);
960
- }); // END EventListener 'click'
961
- } else {
962
- largePlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
963
- const skipOffset = parseFloat(playerForwardBackwardSkipSeconds);
964
- const duration = Amplitude.getSongDuration();
965
- const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
966
- const targetTime = parseFloat(currentTime - skipOffset);
967
-
968
- if (currentTime > 0) {
969
- Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
970
- }
971
- }); // END EventListener 'click'
972
- }
973
-
974
- } // END if ID
975
- } // END for SkipBackwardButtons
976
-
977
- // click on shuffle button
978
- var largePlayerShuffleButton = document.getElementById('large_player_shuffle');
979
- if (largePlayerShuffleButton) {
980
- largePlayerShuffleButton.addEventListener('click', function(event) {
981
- var shuffleState = (document.getElementById('large_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
982
- Amplitude.setShuffle(shuffleState)
983
- }); // END EventListener 'click'
984
- } // END largePlayerShuffleButton
985
-
986
- // click on repeat button
987
- var largePlayerRepeatButton = document.getElementById('large_player_repeat');
988
- if (largePlayerShuffleButton) {
989
- largePlayerRepeatButton.addEventListener('click', function(event) {
990
- var repeatState = (document.getElementById('large_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
991
- Amplitude.setRepeat(repeatState)
992
- }); // END EventListener 'click'
993
- } // END largePlayerRepeatButton
994
-
995
- // enable|disable scrolling on playlist
996
- // -------------------------------------------------------
997
- if (document.getElementById('large_player_right') !== null) {
998
-
999
- // show|hide scrollbar in playlist
1000
- // -------------------------------------------------------
1001
- const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
1002
-
1003
- if (songsInPlaylist.length <= 8) {
1004
- const titleListLargePlayer = document.getElementById('large_player_title_list_' + playListName);
1005
- if (titleListLargePlayer !== null) {
1006
- titleListLargePlayer.classList.add('hide-scrollbar');
1007
- }
1008
- }
1009
-
1010
- // scroll to player top position
1011
- // -------------------------------------------------------
1012
- var playlistHeader = document.getElementById("playlist_header_{{player.id}}");
1013
-
1014
- playlistHeader.addEventListener('click', function(event) {
1015
- var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
1016
-
1017
- // scroll player to top position
1018
- const targetDiv = document.getElementById("playlist_header_{{player.id}}");
1019
- const targetDivPosition = targetDiv.offsetTop;
1020
- window.scrollTo(0, targetDivPosition + scrollOffset);
1021
- }); // END EventListener 'click'
1022
-
1023
- // disable scrolling (if window viewport >= BS Medium and above)
1024
- document.getElementById('large_player_right').addEventListener('mouseenter', function() {
1025
- if (window.innerWidth >= 720) {
1026
- if ($('body').hasClass('stop-scrolling')) {
1027
- return false;
1028
- } else {
1029
- $('body').addClass('stop-scrolling');
1030
- }
1031
- }
1032
- }); // END EventListener 'mouseenter'
1033
-
1034
- // enable scrolling
1035
- document.getElementById('large_player_right').addEventListener('mouseleave', function() {
1036
- if ($('body').hasClass('stop-scrolling')) {
1037
- $('body').removeClass('stop-scrolling');
1038
- }
1039
- }); // END EventListener 'mouseleave'
1040
-
1041
- } // END enable|disable scrolling on playlist
1042
-
1043
- } // END large player UI events
1044
- {% endif %}
1045
-
1046
- // ---------------------------------------------------------
1047
- // START configured player features
1048
-
1049
- logger.debug('\n' + 'set play next title: ' + playerPlayNextTitle);
1050
- logger.debug('\n' + 'set delay between titles: ' + playerDelayNextTitle + 'ms');
1051
- logger.debug('\n' + 'set repeat (album): ' + playerRepeat);
1052
- logger.debug('\n' + 'set shuffle (album): ' + playerShuffle);
1053
-
1054
- // set delay between titles (songs)
1055
- Amplitude.setDelay(playerDelayNextTitle);
1056
- // set repeat (album)
1057
- Amplitude.setRepeat(playerRepeat);
1058
- // set shuffle (album)
1059
- Amplitude.setShuffle(playerShuffle);
1060
-
1061
- // ---------------------------------------------------------
1062
- // END configured player features
1063
-
1064
- // finished messages
1065
- // ---------------------------------------------------------
1066
- logger.debug('\n' + 'current player state: ' + amplitudePlayerState);
1067
- logger.debug('\n' + 'setup player specific UI events on ID #{{player.id}}: finished');
1068
-
1069
- clearInterval(dependencies_met_api_initialized);
1070
- } // END if apiInitialized
1071
- }, 10); // END dependencies_met_api_initialized
1072
-
1073
- clearInterval(load_dependencies['dependencies_met_player_loaded_{{player.id}}']);
1074
- } // END if xhrLoadState success
1075
- }, 10); // END dependencies_met_html_loaded
1076
-
1077
- {% endif %} {% endfor %}
1078
-
1079
- logger.info('\n' + 'initialize player specific UI events: finished');
1080
-
1081
- _this.setState('finished');
1082
- logger.debug('\n' + 'module state: ' + _this.getState());
1083
- logger.info('\n' + 'module initialized successfully');
1084
-
1085
- endTimeModule = Date.now();
1086
- logger.info('\n' + 'module initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
1087
-
1088
- clearInterval(dependencies_met_player_instances_initialized);
1089
- } // END if apiInitialized
1090
- }, 10); // END initialize player specific UI events
1091
- }, // END initPlayerUiEvents
1092
-
1093
- // -------------------------------------------------------------------------
1094
- // START setAudioInfo
1095
- setAudioInfo: (audioInfo) => {
1096
- // jadams: ??? new config setting 'pause_on_audio_info' ???
1097
- // when the audioInfo link is clicked, stop all propagation so
1098
- // AmplitudeJS doesn't play the song.
1099
- for (var i=0; i<audioInfo.length; i++) {
1100
- audioInfo[i].addEventListener('click', function (event) {
1101
- event.stopPropagation();
1102
- });
1103
- }
1104
- }, // END setAudioInfo
1105
-
1106
- // -------------------------------------------------------------------------
1107
- // songEvents
1108
- // -------------------------------------------------------------------------
1109
- songEvents: (songs) => {
1110
- logger.debug('\n' + 'initializing title events for player on ID ' + '#' + playerID + ': started');
1111
-
1112
- for (var i = 0; i < songs.length; i++) {
1113
- // ensure that on mouseover, CSS styles don't get messed up for active songs
1114
- songs[i].addEventListener('mouseover', function() {
1115
- // active song indicator (mini play button) in playlist
1116
- if (!this.classList.contains('amplitude-active-song-container')) {
1117
- if (this.querySelectorAll('.play-button-container')[0] !== undefined) {
1118
- this.querySelectorAll('.play-button-container')[0].style.display = 'block';
1119
- }
1120
- } // END mini play button in playlist
1121
- }); // END EventListener 'mouseover' (songlist)
1122
-
1123
- // ensure that on mouseout, CSS styles don't get messed up for active songs
1124
- songs[i].addEventListener('mouseout', function() {
1125
- if (this.querySelectorAll('.play-button-container')[0] !== undefined) {
1126
- this.querySelectorAll('.play-button-container')[0].style.display = 'none';
1127
- }
1128
- }); // END EventListener 'mouseout' (songlist)
1129
-
1130
- // show|hide the (mini) play button when the song is clicked
1131
- songs[i].addEventListener('click', function () {
1132
- if (this.querySelectorAll('.play-button-container')[0] !== undefined) {
1133
- this.querySelectorAll('.play-button-container')[0].style.display = 'none';
1134
- }
1135
- }); // END EventListener 'click' (songlist)
1136
- }
1137
-
1138
- logger.debug('\n' + 'initializing title events for player on ID ' + '#' + playerID + ': finished');
1139
- }, // END songEvents
1140
-
1141
- // -------------------------------------------------------------------------
1142
- // Init YT Player
1143
- // -------------------------------------------------------------------------
1144
- // ytpAudioInit: (options) => {
1145
- // const ytpSettings = options;
1146
- //
1147
- // // Create a new div element
1148
- // // Set attributes for the div container
1149
- // const ytpContainer = document.createElement('div');
1150
- // ytpContainer.id = 'youtube_player_container';
1151
- // // ytpContainer.className = 'container';
1152
- // // ytpContainer.setAttribute("data-video", "WxcWO9O4DSM");
1153
- // // ytpContainer.setAttribute("data-autoplay", "0");
1154
- // // ytpContainer.setAttribute("data-loop", "1");
1155
- // // ytpContainer.innerHTML = 'data-video="WxcWO9O4DSM" data-autoplay="0" data-loop="1"';
1156
- //
1157
- // // Append the div container
1158
- // document.body.appendChild(ytpContainer);
1159
- //
1160
- // // load the IFrame Player API code asynchronously
1161
- // //
1162
- // var firstScriptTag;
1163
- // var tag = document.createElement('script');
1164
- // tag.id = 'iframe_api';
1165
- // tag.src = '//youtube.com/iframe_api';
1166
- // firstScriptTag = document.getElementsByTagName('script')[0];
1167
- //
1168
- // // Append the script
1169
- // firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
1170
- //
1171
- // // Create an <iframe> (and the YouTube player) after the YT API code
1172
- // // has been downloaded
1173
- // function onYouTubeIframeAPIReady() {
1174
- //
1175
- // logger.debug('\n' + 'YouTube IframeAPI: ready');
1176
- //
1177
- // var ytCtrl = document.getElementById("youtube_player_container");
1178
- // ytCtrl.innerHTML = '<img id="youtube-icon1 src=""/> <div id="ytPlayer"></div>';
1179
- // ytCtrl.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
1180
- // // ytCtrl.onclick = toggleAudio1;
1181
- //
1182
- // ytPlayer = new YT.Player('ytPlayer', {
1183
- // height: 0,
1184
- // width: 0,
1185
- // videoId: ytpSettings.ytpVideoID,
1186
- // playerVars: {
1187
- // autoplay: ytpSettings.ytpAutoPlay,
1188
- // loop: ytpSettings.ytpLoop
1189
- // },
1190
- // events: {
1191
- // onReady: onPlayerReady,
1192
- // onStateChange: onPlayerStateChange
1193
- // }
1194
- // });
1195
- // } // END onYouTubeIframeAPIReady
1196
- //
1197
- // function onPlayerReady(event) {
1198
- // ytPlayer.setPlaybackQuality("small");
1199
- // // document.getElementById("youtube-audio").style.display = "block";
1200
- // // togglePlayButton1(ytPlayer.getPlayerState() !== 5);
1201
- // } // END event onPlayerReady
1202
- //
1203
- // function onPlayerStateChange(event) {
1204
- // if (event.data === 0) {
1205
- // var bla = 'blupp'
1206
- // // togglePlayButton1(false);
1207
- // }
1208
- // } // END event onPlayerStateChange
1209
- //
1210
- // }, // END ytpAudioInit
1211
-
1212
- // -------------------------------------------------------------------------
1213
- // messageHandler()
1214
- // manage messages send from other J1 modules
1215
- // -------------------------------------------------------------------------
1216
- messageHandler: (sender, message) => {
1217
- var json_message = JSON.stringify(message, undefined, 2);
1218
-
1219
- logText = '\n' + 'received message from ' + sender + ': ' + json_message;
1220
- logger.debug(logText);
1221
-
1222
- // -----------------------------------------------------------------------
1223
- // process commands|actions
1224
- // -----------------------------------------------------------------------
1225
- if (message.type === 'command' && message.action === 'module_initialized') {
1226
-
1227
- //
1228
- // place handling of command|action here
1229
- //
1230
-
1231
- logger.info('\n' + message.text);
1232
- }
1233
-
1234
- //
1235
- // place handling of other command|action here
1236
- //
1237
-
1238
- return true;
1239
- }, // END messageHandler
1240
-
1241
- // -------------------------------------------------------------------------
1242
- // setState()
1243
- // sets the current (processing) state of the module
1244
- // -------------------------------------------------------------------------
1245
- setState: (stat) => {
1246
- _this.state = stat;
1247
- }, // END setState
1248
-
1249
- // -------------------------------------------------------------------------
1250
- // getState()
1251
- // Returns the current (processing) state of the module
1252
- // -------------------------------------------------------------------------
1253
- getState: () => {
1254
- return _this.state;
1255
- } // END getState
1256
-
1257
- }; // END main (return)
1258
- })(j1, window);
1259
-
1260
- {%- endcapture -%}
1261
-
1262
- {%- if production -%}
1263
- {{ cache|minifyJS }}
1264
- {%- else -%}
1265
- {{ cache|strip_empty_lines }}
1266
- {%- endif -%}
1267
-
1268
- {%- assign cache = false -%}