hr-design-system-handlebars 1.37.0 → 1.38.1

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 (9) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/index.css +3 -3
  3. package/dist/assets/js/base/tracking/clickTracking.feature.js +1 -1
  4. package/dist/assets/vendor/js/podcast_player.alpine.js +91 -0
  5. package/package.json +1 -1
  6. package/src/assets/vendor/js/podcast_player.alpine.js +91 -0
  7. package/src/stories/views/base/tracking/clickTracking.feature.js +1 -1
  8. package/dist/assets/vendor/js/podcast_player.alpine.new.js +0 -286
  9. package/src/assets/vendor/js/podcast_player.alpine.new.js +0 -286
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v1.38.1 (Thu Sep 07 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - FEATURE: piano tracking is used in podcast_player.alpine.js [#720](https://github.com/mumprod/hr-design-system-handlebars/pull/720) ([@szuelch](https://github.com/szuelch))
6
+
7
+ #### Authors: 1
8
+
9
+ - [@szuelch](https://github.com/szuelch)
10
+
11
+ ---
12
+
13
+ # v1.38.0 (Thu Sep 07 2023)
14
+
15
+ #### 🚀 Enhancement
16
+
17
+ - Reactivates PianoHelper in clickTracking.feature [#717](https://github.com/mumprod/hr-design-system-handlebars/pull/717) ([@szuelch](https://github.com/szuelch))
18
+
19
+ #### Authors: 1
20
+
21
+ - [@szuelch](https://github.com/szuelch)
22
+
23
+ ---
24
+
1
25
  # v1.37.0 (Thu Sep 07 2023)
2
26
 
3
27
  #### 🚀 Enhancement
package/dist/assets/index.css CHANGED
@@ -3040,7 +3040,7 @@ video {
3040
3040
  border-bottom-color: var(--color-secondary-ds);
3041
3041
  }
3042
3042
  .counter-reset {
3043
- counter-reset: cnt1694081209121;
3043
+ counter-reset: cnt1694100687720;
3044
3044
  }
3045
3045
  .hyphens-auto {
3046
3046
  -webkit-hyphens: auto;
@@ -3275,7 +3275,7 @@ video {
3275
3275
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3276
3276
  }
3277
3277
  .-ordered {
3278
- counter-increment: cnt1694081209121 1;
3278
+ counter-increment: cnt1694100687720 1;
3279
3279
  }
3280
3280
  .-ordered::before {
3281
3281
  position: absolute;
@@ -3291,7 +3291,7 @@ video {
3291
3291
  letter-spacing: .0125em;
3292
3292
  --tw-text-opacity: 1;
3293
3293
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3294
- content: counter(cnt1694081209121);
3294
+ content: counter(cnt1694100687720);
3295
3295
  }
3296
3296
  /*! ****************************/
3297
3297
  /*! DataPolicy stuff */
package/dist/assets/js/base/tracking/clickTracking.feature.js CHANGED
@@ -1,4 +1,4 @@
1
- import { download, pi, uxAction, uxNavigation } from 'base/tracking/atiHelper.subfeature'
1
+ import { download, pi, uxAction, uxNavigation } from 'base/tracking/pianoHelper.subfeature'
2
2
 
3
3
  const ClickTracking = function (context) {
4
4
  const { options } = context,
package/dist/assets/vendor/js/podcast_player.alpine.js CHANGED
@@ -56,12 +56,103 @@ export default function playaudio() {
56
56
  _player.init = false
57
57
  _player.firstPlay = true
58
58
 
59
+ _player.audioElement.addEventListener('play', handlePlay.bind(this))
60
+ _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
61
+ _player.audioElement.addEventListener('pause', handlePause.bind(this))
62
+ _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
63
+ _player.audioElement.addEventListener('ended', handleStopped.bind(this))
64
+
59
65
  // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
60
66
  this.playerCount++
61
67
 
62
68
  this.playlist[id] = _player
63
69
 
70
+ const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
71
+ const avContent = {
72
+ av_content_id: settings.piano.av_content_id,
73
+ av_content: settings.piano.av_content,
74
+ av_content_type: settings.piano.av_content_type,
75
+ av_content_duration: settings.piano.av_content_duration,
76
+ av_broadcasting_type: settings.piano.av_broadcasting_type,
77
+ av_content_theme1: settings.piano.av_content_theme1,
78
+ hr_document_type: settings.piano.hr_document_type,
79
+ site_level2_id: settings.piano.site_level2_id,
80
+ }
81
+
82
+ if (settings.piano.av_content_theme2) {
83
+ avContent.av_content_theme2 = settings.piano.av_content_theme2
84
+ }
85
+ if (settings.piano.av_content_theme3) {
86
+ avContent.av_content_theme3 = settings.piano.av_content_theme3
87
+ }
88
+
89
+ function handlePlay(event) {
90
+ this.dispatchCustomEvent('hr-avInsights:play', {
91
+ data: {
92
+ playerId: getPlayerIdForAvInsights(),
93
+ cursorPosition: _player.audioElement.currentTime * 1000,
94
+ avContent: avContent,
95
+ },
96
+ })
97
+ }
98
+
99
+ function handlePlaying(event) {
100
+ if (_player.firstPlay) {
101
+ this.dispatchCustomEvent('hr-avInsights:playback-start', {
102
+ data: {
103
+ playerId: getPlayerIdForAvInsights(),
104
+ cursorPosition: _player.audioElement.currentTime * 1000,
105
+ avContent: avContent,
106
+ },
107
+ })
108
+ _player.firstPlay = false
109
+ } else {
110
+ this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
111
+ data: {
112
+ playerId: getPlayerIdForAvInsights(),
113
+ cursorPosition: _player.audioElement.currentTime * 1000,
114
+ avContent: avContent,
115
+ },
116
+ })
117
+ }
118
+ }
119
+
120
+ function handleWaiting(event) {
121
+ this.dispatchCustomEvent('hr-avInsights:buffer-start', {
122
+ data: {
123
+ playerId: getPlayerIdForAvInsights(),
124
+ cursorPosition: _player.audioElement.currentTime * 1000,
125
+ avContent: avContent,
126
+ },
127
+ })
128
+ }
129
+
130
+ function handlePause(event) {
131
+ this.dispatchCustomEvent('hr-avInsights:playback-paused', {
132
+ data: {
133
+ playerId: getPlayerIdForAvInsights(),
134
+ cursorPosition: _player.audioElement.currentTime * 1000,
135
+ avContent: avContent,
136
+ },
137
+ })
138
+ }
139
+
140
+ function handleStopped(event) {
141
+ this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
142
+ data: {
143
+ playerId: getPlayerIdForAvInsights(),
144
+ cursorPosition: _player.audioElement.currentTime * 1000,
145
+ avContent: avContent,
146
+ },
147
+ })
148
+ _player.firstPlay = true
149
+ }
150
+
151
+ function getPlayerIdForAvInsights() {
152
+ return _player.id + '-' + avContent.av_content_id
153
+ }
64
154
  },
155
+
65
156
  listenToGlobalStop() {
66
157
  console.log('global listener init')
67
158
  document.addEventListener(
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "1.37.0",
9
+ "version": "1.38.1",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/assets/vendor/js/podcast_player.alpine.js CHANGED
@@ -56,12 +56,103 @@ export default function playaudio() {
56
56
  _player.init = false
57
57
  _player.firstPlay = true
58
58
 
59
+ _player.audioElement.addEventListener('play', handlePlay.bind(this))
60
+ _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
61
+ _player.audioElement.addEventListener('pause', handlePause.bind(this))
62
+ _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
63
+ _player.audioElement.addEventListener('ended', handleStopped.bind(this))
64
+
59
65
  // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
60
66
  this.playerCount++
61
67
 
62
68
  this.playlist[id] = _player
63
69
 
70
+ const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
71
+ const avContent = {
72
+ av_content_id: settings.piano.av_content_id,
73
+ av_content: settings.piano.av_content,
74
+ av_content_type: settings.piano.av_content_type,
75
+ av_content_duration: settings.piano.av_content_duration,
76
+ av_broadcasting_type: settings.piano.av_broadcasting_type,
77
+ av_content_theme1: settings.piano.av_content_theme1,
78
+ hr_document_type: settings.piano.hr_document_type,
79
+ site_level2_id: settings.piano.site_level2_id,
80
+ }
81
+
82
+ if (settings.piano.av_content_theme2) {
83
+ avContent.av_content_theme2 = settings.piano.av_content_theme2
84
+ }
85
+ if (settings.piano.av_content_theme3) {
86
+ avContent.av_content_theme3 = settings.piano.av_content_theme3
87
+ }
88
+
89
+ function handlePlay(event) {
90
+ this.dispatchCustomEvent('hr-avInsights:play', {
91
+ data: {
92
+ playerId: getPlayerIdForAvInsights(),
93
+ cursorPosition: _player.audioElement.currentTime * 1000,
94
+ avContent: avContent,
95
+ },
96
+ })
97
+ }
98
+
99
+ function handlePlaying(event) {
100
+ if (_player.firstPlay) {
101
+ this.dispatchCustomEvent('hr-avInsights:playback-start', {
102
+ data: {
103
+ playerId: getPlayerIdForAvInsights(),
104
+ cursorPosition: _player.audioElement.currentTime * 1000,
105
+ avContent: avContent,
106
+ },
107
+ })
108
+ _player.firstPlay = false
109
+ } else {
110
+ this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
111
+ data: {
112
+ playerId: getPlayerIdForAvInsights(),
113
+ cursorPosition: _player.audioElement.currentTime * 1000,
114
+ avContent: avContent,
115
+ },
116
+ })
117
+ }
118
+ }
119
+
120
+ function handleWaiting(event) {
121
+ this.dispatchCustomEvent('hr-avInsights:buffer-start', {
122
+ data: {
123
+ playerId: getPlayerIdForAvInsights(),
124
+ cursorPosition: _player.audioElement.currentTime * 1000,
125
+ avContent: avContent,
126
+ },
127
+ })
128
+ }
129
+
130
+ function handlePause(event) {
131
+ this.dispatchCustomEvent('hr-avInsights:playback-paused', {
132
+ data: {
133
+ playerId: getPlayerIdForAvInsights(),
134
+ cursorPosition: _player.audioElement.currentTime * 1000,
135
+ avContent: avContent,
136
+ },
137
+ })
138
+ }
139
+
140
+ function handleStopped(event) {
141
+ this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
142
+ data: {
143
+ playerId: getPlayerIdForAvInsights(),
144
+ cursorPosition: _player.audioElement.currentTime * 1000,
145
+ avContent: avContent,
146
+ },
147
+ })
148
+ _player.firstPlay = true
149
+ }
150
+
151
+ function getPlayerIdForAvInsights() {
152
+ return _player.id + '-' + avContent.av_content_id
153
+ }
64
154
  },
155
+
65
156
  listenToGlobalStop() {
66
157
  console.log('global listener init')
67
158
  document.addEventListener(
package/src/stories/views/base/tracking/clickTracking.feature.js CHANGED
@@ -1,4 +1,4 @@
1
- import { download, pi, uxAction, uxNavigation } from 'base/tracking/atiHelper.subfeature'
1
+ import { download, pi, uxAction, uxNavigation } from 'base/tracking/pianoHelper.subfeature'
2
2
 
3
3
  const ClickTracking = function (context) {
4
4
  const { options } = context,
package/dist/assets/vendor/js/podcast_player.alpine.new.js DELETED
@@ -1,286 +0,0 @@
1
- export default function playaudio() {
2
- return {
3
- dispatchCustomEvent(
4
- eventName,
5
- { data = undefined, element = document, handleIframe = false, id = undefined } = {}
6
- ) {
7
- let event
8
-
9
- if (undefined != data) {
10
- data = { detail: data }
11
- event = new CustomEvent(eventName, data)
12
- } else {
13
- if (typeof Event === 'function') {
14
- event = new Event(eventName)
15
- } else {
16
- event = document.createEvent('Event')
17
- event.initEvent(eventName, true, true)
18
- }
19
- }
20
- if (undefined !== id) {
21
- event.id = id
22
- }
23
-
24
- if (handleIframe) {
25
- if (document.getElementById('js-iFrame')) {
26
- document.getElementById('js-iFrame').contentWindow.document.dispatchEvent(event)
27
- }
28
- if (this.inIframe()) {
29
- parent.document.dispatchEvent(event)
30
- }
31
- }
32
-
33
- element.dispatchEvent(event)
34
- },
35
- inIframe() {
36
- try {
37
- return window.self !== window.top
38
- } catch (e) {
39
- return true
40
- }
41
- },
42
- playerCount: 0,
43
- playlist: {},
44
- registerPlayer(duration, id) {
45
- let _player = {}
46
- _player.id = id
47
- _player.button = document.querySelector('#playbutton' + id)
48
- _player.playIcon = _player.button.querySelector('.js-playbutton')
49
- _player.pauseIcon = _player.button.querySelector('.js-pausebutton')
50
- _player.range = document.querySelector('#range' + id)
51
- _player.timeDisplay = document.querySelector('#timedisplay' + id)
52
- _player.audioElement = this.$el
53
- _player.audioSrc = this.$el.querySelector('source').src
54
- _player.duration = duration
55
- _player.currentlyPlaying = false
56
- _player.init = false
57
- _player.firstPlay = true
58
-
59
- _player.audioElement.addEventListener('play', handlePlay.bind(this))
60
- _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
61
- _player.audioElement.addEventListener('pause', handlePause.bind(this))
62
- _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
63
- _player.audioElement.addEventListener('ended', handleStopped.bind(this))
64
-
65
- // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
66
- this.playerCount++
67
-
68
- this.playlist[id] = _player
69
-
70
- const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
71
- const avContent = {
72
- av_content_id: settings.piano.av_content_id,
73
- av_content: settings.piano.av_content,
74
- av_content_type: settings.piano.av_content_type,
75
- av_content_duration: settings.piano.av_content_duration,
76
- av_broadcasting_type: settings.piano.av_broadcasting_type,
77
- av_content_theme1: settings.piano.av_content_theme1,
78
- hr_document_type: settings.piano.hr_document_type,
79
- site_level2_id: settings.piano.site_level2_id,
80
- }
81
-
82
- if (settings.piano.av_content_theme2) {
83
- avContent.av_content_theme2 = settings.piano.av_content_theme2
84
- }
85
- if (settings.piano.av_content_theme3) {
86
- avContent.av_content_theme3 = settings.piano.av_content_theme3
87
- }
88
-
89
- function handlePlay(event) {
90
- this.dispatchCustomEvent('hr-avInsights:play', {
91
- data: {
92
- playerId: getPlayerIdForAvInsights(),
93
- cursorPosition: _player.audioElement.currentTime * 1000,
94
- avContent: avContent,
95
- },
96
- })
97
- }
98
-
99
- function handlePlaying(event) {
100
- if (_player.firstPlay) {
101
- this.dispatchCustomEvent('hr-avInsights:playback-start', {
102
- data: {
103
- playerId: getPlayerIdForAvInsights(),
104
- cursorPosition: _player.audioElement.currentTime * 1000,
105
- avContent: avContent,
106
- },
107
- })
108
- _player.firstPlay = false
109
- } else {
110
- this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
111
- data: {
112
- playerId: getPlayerIdForAvInsights(),
113
- cursorPosition: _player.audioElement.currentTime * 1000,
114
- avContent: avContent,
115
- },
116
- })
117
- }
118
- }
119
-
120
- function handleWaiting(event) {
121
- this.dispatchCustomEvent('hr-avInsights:buffer-start', {
122
- data: {
123
- playerId: getPlayerIdForAvInsights(),
124
- cursorPosition: _player.audioElement.currentTime * 1000,
125
- avContent: avContent,
126
- },
127
- })
128
- }
129
-
130
- function handlePause(event) {
131
- this.dispatchCustomEvent('hr-avInsights:playback-paused', {
132
- data: {
133
- playerId: getPlayerIdForAvInsights(),
134
- cursorPosition: _player.audioElement.currentTime * 1000,
135
- avContent: avContent,
136
- },
137
- })
138
- }
139
-
140
- function handleStopped(event) {
141
- this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
142
- data: {
143
- playerId: getPlayerIdForAvInsights(),
144
- cursorPosition: _player.audioElement.currentTime * 1000,
145
- avContent: avContent,
146
- },
147
- })
148
- _player.firstPlay = true
149
- }
150
-
151
- function getPlayerIdForAvInsights() {
152
- return _player.id + '-' + avContent.av_content_id
153
- }
154
- },
155
-
156
- listenToGlobalStop() {
157
- console.log('global listener init')
158
- document.addEventListener(
159
- 'hr:global:stopOtherAVs',
160
- this.stopAllPlayersBecauseOfGlobalStop.bind(this)
161
- )
162
- },
163
- rangeInput(id) {
164
- if (this.playlist[id].init == false) {
165
- this.playAndStop(id)
166
- this.playAndStop(id)
167
- }
168
- this.playlist[id].audioElement.currentTime =
169
- (this.playlist[id].range.value / 1000) * this.playlist[id].audioElement.duration
170
- },
171
- setTime(duration, id) {
172
- console.log('time set: ' + duration)
173
-
174
- let parts = duration.split(':')
175
- if (parts.length < 3) {
176
- let minutes = +parts[0]
177
- let seconds = +parts[1]
178
- var durationSeconds = (minutes * 60 + seconds).toFixed(3)
179
- } else {
180
- let hours = +parts[0]
181
- let minutes = +parts[1]
182
- let seconds = +parts[2]
183
- var durationSeconds = (hours * 3600 + minutes * 60 + seconds).toFixed(3)
184
- }
185
-
186
- let range = document.getElementById('range' + id)
187
- range.value = 0
188
- this.$el.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat('0', false)
189
- this.$el.querySelector('.js-audioDuration').innerHTML = this.fancyTimeFormat(
190
- durationSeconds,
191
- true
192
- )
193
- },
194
-
195
- updateCurrentTime(range, timeDisplay, newTime, id) {
196
- timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(
197
- newTime,
198
- false
199
- )
200
- range.style.background =
201
- 'linear-gradient(to right, var(--color-podcast) ' +
202
- range.value / 10 +
203
- '%, white ' +
204
- range.value / 10 +
205
- '% )'
206
- range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
207
- },
208
-
209
- playAndStop(id) {
210
- console.log('event target: ' + this.$event.currentTarget.id)
211
- console.log('playlist: ', this.playlist)
212
- if (this.playlist[id].init == true) {
213
- this.stopAudio(id)
214
- } else {
215
- this.stopAllOtherPlayers(id, false)
216
- this.startAudio(id)
217
- this.playlist[id].range.parentNode.classList.remove('max-h-0')
218
- this.playlist[id].range.parentNode.classList.add('max-h-9')
219
- this.playlist[id].playIcon.classList.add('hidden')
220
- this.playlist[id].pauseIcon.classList.remove('hidden')
221
- this.dispatchCustomEvent('hr:global:stopOtherAVs', { handleIframe: true, id: id })
222
- }
223
- },
224
-
225
- stopAllOtherPlayers(id, preventMinimize) {
226
- for (const index in this.playlist) {
227
- if (index != id) {
228
- console.log('STOP: ', index)
229
- this.stopAudio(index)
230
- if (!preventMinimize) {
231
- this.playlist[index].range.parentNode.classList.add('max-h-0')
232
- this.playlist[index].range.parentNode.classList.remove('max-h-9')
233
- }
234
- }
235
- }
236
- },
237
- stopAllPlayersBecauseOfGlobalStop(event) {
238
- this.stopAllOtherPlayers(event.id, true)
239
- },
240
- startAudio(id) {
241
- console.log('start audio ' + id)
242
- if (this.playlist[id].init == false) {
243
- this.initAudioEventListener(id)
244
- this.playlist[id].init = true
245
- }
246
- this.playlist[id].audioElement.play()
247
- this.playlist[id].currentlyPlaying = true
248
- },
249
-
250
- stopAudio(id) {
251
- this.playlist[id].audioElement.pause()
252
- this.playlist[id].init = false
253
- this.playlist[id].currentlyPlaying = false
254
- this.playlist[id].playIcon.classList.remove('hidden')
255
- this.playlist[id].pauseIcon.classList.add('hidden')
256
- },
257
-
258
- initAudioEventListener(id) {
259
- let _audioElement = this.playlist[id].audioElement
260
- let _range = this.playlist[id].range
261
- let _timeDisplay = this.playlist[id].timeDisplay
262
- _audioElement.ontimeupdate = (event) => {
263
- this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime, id)
264
- }
265
- },
266
-
267
- fancyTimeFormat(duration, measure) {
268
- var hrs = ~~(duration / 3600)
269
- var mins = ~~((duration % 3600) / 60)
270
- var secs = ~~duration % 60
271
-
272
- var ret = ''
273
- if (hrs > 0) {
274
- ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
275
- }
276
-
277
- ret += '' + mins + ':' + (secs < 10 ? '0' : '')
278
- ret += '' + secs
279
-
280
- if (measure) {
281
- hrs > 0 ? (ret += ' Std.') : (ret += ' Min.')
282
- }
283
- return ret
284
- },
285
- }
286
- }
package/src/assets/vendor/js/podcast_player.alpine.new.js DELETED
@@ -1,286 +0,0 @@
1
- export default function playaudio() {
2
- return {
3
- dispatchCustomEvent(
4
- eventName,
5
- { data = undefined, element = document, handleIframe = false, id = undefined } = {}
6
- ) {
7
- let event
8
-
9
- if (undefined != data) {
10
- data = { detail: data }
11
- event = new CustomEvent(eventName, data)
12
- } else {
13
- if (typeof Event === 'function') {
14
- event = new Event(eventName)
15
- } else {
16
- event = document.createEvent('Event')
17
- event.initEvent(eventName, true, true)
18
- }
19
- }
20
- if (undefined !== id) {
21
- event.id = id
22
- }
23
-
24
- if (handleIframe) {
25
- if (document.getElementById('js-iFrame')) {
26
- document.getElementById('js-iFrame').contentWindow.document.dispatchEvent(event)
27
- }
28
- if (this.inIframe()) {
29
- parent.document.dispatchEvent(event)
30
- }
31
- }
32
-
33
- element.dispatchEvent(event)
34
- },
35
- inIframe() {
36
- try {
37
- return window.self !== window.top
38
- } catch (e) {
39
- return true
40
- }
41
- },
42
- playerCount: 0,
43
- playlist: {},
44
- registerPlayer(duration, id) {
45
- let _player = {}
46
- _player.id = id
47
- _player.button = document.querySelector('#playbutton' + id)
48
- _player.playIcon = _player.button.querySelector('.js-playbutton')
49
- _player.pauseIcon = _player.button.querySelector('.js-pausebutton')
50
- _player.range = document.querySelector('#range' + id)
51
- _player.timeDisplay = document.querySelector('#timedisplay' + id)
52
- _player.audioElement = this.$el
53
- _player.audioSrc = this.$el.querySelector('source').src
54
- _player.duration = duration
55
- _player.currentlyPlaying = false
56
- _player.init = false
57
- _player.firstPlay = true
58
-
59
- _player.audioElement.addEventListener('play', handlePlay.bind(this))
60
- _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
61
- _player.audioElement.addEventListener('pause', handlePause.bind(this))
62
- _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
63
- _player.audioElement.addEventListener('ended', handleStopped.bind(this))
64
-
65
- // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
66
- this.playerCount++
67
-
68
- this.playlist[id] = _player
69
-
70
- const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
71
- const avContent = {
72
- av_content_id: settings.piano.av_content_id,
73
- av_content: settings.piano.av_content,
74
- av_content_type: settings.piano.av_content_type,
75
- av_content_duration: settings.piano.av_content_duration,
76
- av_broadcasting_type: settings.piano.av_broadcasting_type,
77
- av_content_theme1: settings.piano.av_content_theme1,
78
- hr_document_type: settings.piano.hr_document_type,
79
- site_level2_id: settings.piano.site_level2_id,
80
- }
81
-
82
- if (settings.piano.av_content_theme2) {
83
- avContent.av_content_theme2 = settings.piano.av_content_theme2
84
- }
85
- if (settings.piano.av_content_theme3) {
86
- avContent.av_content_theme3 = settings.piano.av_content_theme3
87
- }
88
-
89
- function handlePlay(event) {
90
- this.dispatchCustomEvent('hr-avInsights:play', {
91
- data: {
92
- playerId: getPlayerIdForAvInsights(),
93
- cursorPosition: _player.audioElement.currentTime * 1000,
94
- avContent: avContent,
95
- },
96
- })
97
- }
98
-
99
- function handlePlaying(event) {
100
- if (_player.firstPlay) {
101
- this.dispatchCustomEvent('hr-avInsights:playback-start', {
102
- data: {
103
- playerId: getPlayerIdForAvInsights(),
104
- cursorPosition: _player.audioElement.currentTime * 1000,
105
- avContent: avContent,
106
- },
107
- })
108
- _player.firstPlay = false
109
- } else {
110
- this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
111
- data: {
112
- playerId: getPlayerIdForAvInsights(),
113
- cursorPosition: _player.audioElement.currentTime * 1000,
114
- avContent: avContent,
115
- },
116
- })
117
- }
118
- }
119
-
120
- function handleWaiting(event) {
121
- this.dispatchCustomEvent('hr-avInsights:buffer-start', {
122
- data: {
123
- playerId: getPlayerIdForAvInsights(),
124
- cursorPosition: _player.audioElement.currentTime * 1000,
125
- avContent: avContent,
126
- },
127
- })
128
- }
129
-
130
- function handlePause(event) {
131
- this.dispatchCustomEvent('hr-avInsights:playback-paused', {
132
- data: {
133
- playerId: getPlayerIdForAvInsights(),
134
- cursorPosition: _player.audioElement.currentTime * 1000,
135
- avContent: avContent,
136
- },
137
- })
138
- }
139
-
140
- function handleStopped(event) {
141
- this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
142
- data: {
143
- playerId: getPlayerIdForAvInsights(),
144
- cursorPosition: _player.audioElement.currentTime * 1000,
145
- avContent: avContent,
146
- },
147
- })
148
- _player.firstPlay = true
149
- }
150
-
151
- function getPlayerIdForAvInsights() {
152
- return _player.id + '-' + avContent.av_content_id
153
- }
154
- },
155
-
156
- listenToGlobalStop() {
157
- console.log('global listener init')
158
- document.addEventListener(
159
- 'hr:global:stopOtherAVs',
160
- this.stopAllPlayersBecauseOfGlobalStop.bind(this)
161
- )
162
- },
163
- rangeInput(id) {
164
- if (this.playlist[id].init == false) {
165
- this.playAndStop(id)
166
- this.playAndStop(id)
167
- }
168
- this.playlist[id].audioElement.currentTime =
169
- (this.playlist[id].range.value / 1000) * this.playlist[id].audioElement.duration
170
- },
171
- setTime(duration, id) {
172
- console.log('time set: ' + duration)
173
-
174
- let parts = duration.split(':')
175
- if (parts.length < 3) {
176
- let minutes = +parts[0]
177
- let seconds = +parts[1]
178
- var durationSeconds = (minutes * 60 + seconds).toFixed(3)
179
- } else {
180
- let hours = +parts[0]
181
- let minutes = +parts[1]
182
- let seconds = +parts[2]
183
- var durationSeconds = (hours * 3600 + minutes * 60 + seconds).toFixed(3)
184
- }
185
-
186
- let range = document.getElementById('range' + id)
187
- range.value = 0
188
- this.$el.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat('0', false)
189
- this.$el.querySelector('.js-audioDuration').innerHTML = this.fancyTimeFormat(
190
- durationSeconds,
191
- true
192
- )
193
- },
194
-
195
- updateCurrentTime(range, timeDisplay, newTime, id) {
196
- timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(
197
- newTime,
198
- false
199
- )
200
- range.style.background =
201
- 'linear-gradient(to right, var(--color-podcast) ' +
202
- range.value / 10 +
203
- '%, white ' +
204
- range.value / 10 +
205
- '% )'
206
- range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
207
- },
208
-
209
- playAndStop(id) {
210
- console.log('event target: ' + this.$event.currentTarget.id)
211
- console.log('playlist: ', this.playlist)
212
- if (this.playlist[id].init == true) {
213
- this.stopAudio(id)
214
- } else {
215
- this.stopAllOtherPlayers(id, false)
216
- this.startAudio(id)
217
- this.playlist[id].range.parentNode.classList.remove('max-h-0')
218
- this.playlist[id].range.parentNode.classList.add('max-h-9')
219
- this.playlist[id].playIcon.classList.add('hidden')
220
- this.playlist[id].pauseIcon.classList.remove('hidden')
221
- this.dispatchCustomEvent('hr:global:stopOtherAVs', { handleIframe: true, id: id })
222
- }
223
- },
224
-
225
- stopAllOtherPlayers(id, preventMinimize) {
226
- for (const index in this.playlist) {
227
- if (index != id) {
228
- console.log('STOP: ', index)
229
- this.stopAudio(index)
230
- if (!preventMinimize) {
231
- this.playlist[index].range.parentNode.classList.add('max-h-0')
232
- this.playlist[index].range.parentNode.classList.remove('max-h-9')
233
- }
234
- }
235
- }
236
- },
237
- stopAllPlayersBecauseOfGlobalStop(event) {
238
- this.stopAllOtherPlayers(event.id, true)
239
- },
240
- startAudio(id) {
241
- console.log('start audio ' + id)
242
- if (this.playlist[id].init == false) {
243
- this.initAudioEventListener(id)
244
- this.playlist[id].init = true
245
- }
246
- this.playlist[id].audioElement.play()
247
- this.playlist[id].currentlyPlaying = true
248
- },
249
-
250
- stopAudio(id) {
251
- this.playlist[id].audioElement.pause()
252
- this.playlist[id].init = false
253
- this.playlist[id].currentlyPlaying = false
254
- this.playlist[id].playIcon.classList.remove('hidden')
255
- this.playlist[id].pauseIcon.classList.add('hidden')
256
- },
257
-
258
- initAudioEventListener(id) {
259
- let _audioElement = this.playlist[id].audioElement
260
- let _range = this.playlist[id].range
261
- let _timeDisplay = this.playlist[id].timeDisplay
262
- _audioElement.ontimeupdate = (event) => {
263
- this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime, id)
264
- }
265
- },
266
-
267
- fancyTimeFormat(duration, measure) {
268
- var hrs = ~~(duration / 3600)
269
- var mins = ~~((duration % 3600) / 60)
270
- var secs = ~~duration % 60
271
-
272
- var ret = ''
273
- if (hrs > 0) {
274
- ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
275
- }
276
-
277
- ret += '' + mins + ':' + (secs < 10 ? '0' : '')
278
- ret += '' + secs
279
-
280
- if (measure) {
281
- hrs > 0 ? (ret += ' Std.') : (ret += ' Min.')
282
- }
283
- return ret
284
- },
285
- }
286
- }