hr-design-system-handlebars 1.33.1 → 1.33.3

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.33.3 (Tue Jul 25 2023)
+
+#### 🐛 Bug Fix
+
+- Add hover effect to Ticker-Teaser headline [#687](https://github.com/mumprod/hr-design-system-handlebars/pull/687) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
+# v1.33.2 (Thu Jul 20 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2419  - JS-Fehler in der Konsole [#686](https://github.com/mumprod/hr-design-system-handlebars/pull/686) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.33.1 (Wed Jul 19 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2676,9 +2676,18 @@ video {
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
+.decoration-tickerTeaserHeadlineUnderline {
+  -webkit-text-decoration-color: #ffffff;
+          text-decoration-color: #ffffff;
+  -webkit-text-decoration-color: var(--color-ticker-teaser-headline-underline);
+          text-decoration-color: var(--color-ticker-teaser-headline-underline);
+}
 .decoration-1 {
   text-decoration-thickness: 1px;
 }
+.decoration-2 {
+  text-decoration-thickness: 2px;
+}
 .placeholder-primary::-webkit-input-placeholder {
   color: #005293;
   color: var(--color-primary-ds);
@@ -2817,7 +2826,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1689780802351;
+  counter-reset: cnt1690287794197;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3052,7 +3061,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1689780802351 1;
+  counter-increment: cnt1690287794197 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3068,7 +3077,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1689780802351);
+  content: counter(cnt1690287794197);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3240,6 +3249,7 @@ video {
     --color-ticker-teaser-footer: #ffffff;
     --search-border-color-desktop: transparent;
     --search-border-color-mobile: var(--color-primary-ds);
+    --color-ticker-teaser-headline-underline : #ffffff;
 }
 [data-theme='hessenschau'] {
     --color-primary-ds: #005293;
@@ -3319,10 +3329,10 @@ video {
     /* Border */
     --border-radius-hr: 1.5rem;
     /* ticker-Teaser*/
-    --color-ticker-teaser-headline: #ffffff;
     --color-ticker-teaser-label-byline: #ffffff;
     --color-ticker-teaser-timeline-score: #d34600;
     --color-ticker-teaser-footer: #ffffff;
+    --color-ticker-teaser-headline : #ffffff;
 }
 [data-theme='hr-fernsehen'] {
     --color-primary-ds: #a00d65;

package/dist/assets/vendor/js/podcast_player.alpine.js

@@ -56,103 +56,12 @@ export default function playaudio() {
             _player.init = false
             _player.firstPlay = true
 
-            _player.audioElement.addEventListener('play', handlePlay.bind(this))
-            _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
-            _player.audioElement.addEventListener('pause', handlePause.bind(this))
-            _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
-            _player.audioElement.addEventListener('ended', handleStopped.bind(this))
-
             // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
             this.playerCount++
 
             this.playlist[id] = _player
 
-            const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
-            const avContent = {
-                av_content_id: settings.piano.av_content_id,
-                av_content: settings.piano.av_content,
-                av_content_type: settings.piano.av_content_type,
-                av_content_duration: settings.piano.av_content_duration,
-                av_broadcasting_type: settings.piano.av_broadcasting_type,
-                av_content_theme1: settings.piano.av_content_theme1,
-                hr_document_type: settings.piano.hr_document_type,
-                site_level2_id: settings.piano.site_level2_id,
-            }
-
-            if (settings.piano.av_content_theme2) {
-                avContent.av_content_theme2 = settings.piano.av_content_theme2
-            }
-            if (settings.piano.av_content_theme3) {
-                avContent.av_content_theme3 = settings.piano.av_content_theme3
-            }
-
-            function handlePlay(event) {
-                this.dispatchCustomEvent('hr-avInsights:play', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-            }
-
-            function handlePlaying(event) {
-                if (_player.firstPlay) {
-                    this.dispatchCustomEvent('hr-avInsights:playback-start', {
-                        data: {
-                            playerId: getPlayerIdForAvInsights(),
-                            cursorPosition: _player.audioElement.currentTime * 1000,
-                            avContent: avContent,
-                        },
-                    })
-                    _player.firstPlay = false
-                } else {
-                    this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
-                        data: {
-                            playerId: getPlayerIdForAvInsights(),
-                            cursorPosition: _player.audioElement.currentTime * 1000,
-                            avContent: avContent,
-                        },
-                    })
-                }
-            }
-
-            function handleWaiting(event) {
-                this.dispatchCustomEvent('hr-avInsights:buffer-start', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-            }
-
-            function handlePause(event) {
-                this.dispatchCustomEvent('hr-avInsights:playback-paused', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-            }
-
-            function handleStopped(event) {
-                this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-                _player.firstPlay = true
-            }
-
-            function getPlayerIdForAvInsights() {
-                return _player.id + '-' + avContent.av_content_id
-            }
         },
-
         listenToGlobalStop() {
             console.log('global listener init')
             document.addEventListener(

package/dist/assets/vendor/js/podcast_player.alpine.new.js

@@ -0,0 +1,286 @@
+export default function playaudio() {
+    return {
+        dispatchCustomEvent(
+            eventName,
+            { data = undefined, element = document, handleIframe = false, id = undefined } = {}
+        ) {
+            let event
+
+            if (undefined != data) {
+                data = { detail: data }
+                event = new CustomEvent(eventName, data)
+            } else {
+                if (typeof Event === 'function') {
+                    event = new Event(eventName)
+                } else {
+                    event = document.createEvent('Event')
+                    event.initEvent(eventName, true, true)
+                }
+            }
+            if (undefined !== id) {
+                event.id = id
+            }
+
+            if (handleIframe) {
+                if (document.getElementById('js-iFrame')) {
+                    document.getElementById('js-iFrame').contentWindow.document.dispatchEvent(event)
+                }
+                if (this.inIframe()) {
+                    parent.document.dispatchEvent(event)
+                }
+            }
+
+            element.dispatchEvent(event)
+        },
+        inIframe() {
+            try {
+                return window.self !== window.top
+            } catch (e) {
+                return true
+            }
+        },
+        playerCount: 0,
+        playlist: {},
+        registerPlayer(duration, id) {
+            let _player = {}
+            _player.id = id
+            _player.button = document.querySelector('#playbutton' + id)
+            _player.playIcon = _player.button.querySelector('.js-playbutton')
+            _player.pauseIcon = _player.button.querySelector('.js-pausebutton')
+            _player.range = document.querySelector('#range' + id)
+            _player.timeDisplay = document.querySelector('#timedisplay' + id)
+            _player.audioElement = this.$el
+            _player.audioSrc = this.$el.querySelector('source').src
+            _player.duration = duration
+            _player.currentlyPlaying = false
+            _player.init = false
+            _player.firstPlay = true
+
+            _player.audioElement.addEventListener('play', handlePlay.bind(this))
+            _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
+            _player.audioElement.addEventListener('pause', handlePause.bind(this))
+            _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
+            _player.audioElement.addEventListener('ended', handleStopped.bind(this))
+
+            // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
+            this.playerCount++
+
+            this.playlist[id] = _player
+
+            const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
+            const avContent = {
+                av_content_id: settings.piano.av_content_id,
+                av_content: settings.piano.av_content,
+                av_content_type: settings.piano.av_content_type,
+                av_content_duration: settings.piano.av_content_duration,
+                av_broadcasting_type: settings.piano.av_broadcasting_type,
+                av_content_theme1: settings.piano.av_content_theme1,
+                hr_document_type: settings.piano.hr_document_type,
+                site_level2_id: settings.piano.site_level2_id,
+            }
+
+            if (settings.piano.av_content_theme2) {
+                avContent.av_content_theme2 = settings.piano.av_content_theme2
+            }
+            if (settings.piano.av_content_theme3) {
+                avContent.av_content_theme3 = settings.piano.av_content_theme3
+            }
+
+            function handlePlay(event) {
+                this.dispatchCustomEvent('hr-avInsights:play', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+            }
+
+            function handlePlaying(event) {
+                if (_player.firstPlay) {
+                    this.dispatchCustomEvent('hr-avInsights:playback-start', {
+                        data: {
+                            playerId: getPlayerIdForAvInsights(),
+                            cursorPosition: _player.audioElement.currentTime * 1000,
+                            avContent: avContent,
+                        },
+                    })
+                    _player.firstPlay = false
+                } else {
+                    this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
+                        data: {
+                            playerId: getPlayerIdForAvInsights(),
+                            cursorPosition: _player.audioElement.currentTime * 1000,
+                            avContent: avContent,
+                        },
+                    })
+                }
+            }
+
+            function handleWaiting(event) {
+                this.dispatchCustomEvent('hr-avInsights:buffer-start', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+            }
+
+            function handlePause(event) {
+                this.dispatchCustomEvent('hr-avInsights:playback-paused', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+            }
+
+            function handleStopped(event) {
+                this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+                _player.firstPlay = true
+            }
+
+            function getPlayerIdForAvInsights() {
+                return _player.id + '-' + avContent.av_content_id
+            }
+        },
+
+        listenToGlobalStop() {
+            console.log('global listener init')
+            document.addEventListener(
+                'hr:global:stopOtherAVs',
+                this.stopAllPlayersBecauseOfGlobalStop.bind(this)
+            )
+        },
+        rangeInput(id) {
+            if (this.playlist[id].init == false) {
+                this.playAndStop(id)
+                this.playAndStop(id)
+            }
+            this.playlist[id].audioElement.currentTime =
+                (this.playlist[id].range.value / 1000) * this.playlist[id].audioElement.duration
+        },
+        setTime(duration, id) {
+            console.log('time set: ' + duration)
+
+            let parts = duration.split(':')
+            if (parts.length < 3) {
+                let minutes = +parts[0]
+                let seconds = +parts[1]
+                var durationSeconds = (minutes * 60 + seconds).toFixed(3)
+            } else {
+                let hours = +parts[0]
+                let minutes = +parts[1]
+                let seconds = +parts[2]
+                var durationSeconds = (hours * 3600 + minutes * 60 + seconds).toFixed(3)
+            }
+
+            let range = document.getElementById('range' + id)
+            range.value = 0
+            this.$el.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat('0', false)
+            this.$el.querySelector('.js-audioDuration').innerHTML = this.fancyTimeFormat(
+                durationSeconds,
+                true
+            )
+        },
+
+        updateCurrentTime(range, timeDisplay, newTime, id) {
+            timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(
+                newTime,
+                false
+            )
+            range.style.background =
+                'linear-gradient(to right, var(--color-podcast) ' +
+                range.value / 10 +
+                '%, white ' +
+                range.value / 10 +
+                '% )'
+            range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
+        },
+
+        playAndStop(id) {
+            console.log('event target: ' + this.$event.currentTarget.id)
+            console.log('playlist: ', this.playlist)
+            if (this.playlist[id].init == true) {
+                this.stopAudio(id)
+            } else {
+                this.stopAllOtherPlayers(id, false)
+                this.startAudio(id)
+                this.playlist[id].range.parentNode.classList.remove('max-h-0')
+                this.playlist[id].range.parentNode.classList.add('max-h-9')
+                this.playlist[id].playIcon.classList.add('hidden')
+                this.playlist[id].pauseIcon.classList.remove('hidden')
+                this.dispatchCustomEvent('hr:global:stopOtherAVs', { handleIframe: true, id: id })
+            }
+        },
+
+        stopAllOtherPlayers(id, preventMinimize) {
+            for (const index in this.playlist) {
+                if (index != id) {
+                    console.log('STOP: ', index)
+                    this.stopAudio(index)
+                    if (!preventMinimize) {
+                        this.playlist[index].range.parentNode.classList.add('max-h-0')
+                        this.playlist[index].range.parentNode.classList.remove('max-h-9')
+                    }
+                }
+            }
+        },
+        stopAllPlayersBecauseOfGlobalStop(event) {
+            this.stopAllOtherPlayers(event.id, true)
+        },
+        startAudio(id) {
+            console.log('start audio ' + id)
+            if (this.playlist[id].init == false) {
+                this.initAudioEventListener(id)
+                this.playlist[id].init = true
+            }
+            this.playlist[id].audioElement.play()
+            this.playlist[id].currentlyPlaying = true
+        },
+
+        stopAudio(id) {
+            this.playlist[id].audioElement.pause()
+            this.playlist[id].init = false
+            this.playlist[id].currentlyPlaying = false
+            this.playlist[id].playIcon.classList.remove('hidden')
+            this.playlist[id].pauseIcon.classList.add('hidden')
+        },
+
+        initAudioEventListener(id) {
+            let _audioElement = this.playlist[id].audioElement
+            let _range = this.playlist[id].range
+            let _timeDisplay = this.playlist[id].timeDisplay
+            _audioElement.ontimeupdate = (event) => {
+                this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime, id)
+            }
+        },
+
+        fancyTimeFormat(duration, measure) {
+            var hrs = ~~(duration / 3600)
+            var mins = ~~((duration % 3600) / 60)
+            var secs = ~~duration % 60
+
+            var ret = ''
+            if (hrs > 0) {
+                ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+            }
+
+            ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+            ret += '' + secs
+
+            if (measure) {
+                hrs > 0 ? (ret += ' Std.') : (ret += ' Min.')
+            }
+            return ret
+        },
+    }
+}

package/dist/views/components/teaser/ticker/teaser_ticker_body.hbs

@@ -1,14 +1,14 @@
 <div class="h-full flex-col flex w-full{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
 
     {{#> components/teaser/components/teaser_header _css=(if this.isStandardTeaser "px-5" "px-5 md:px-0")}}
-        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link hover:text-toplineColor" }} 
+        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link" }} 
             {{#with this.label}}
                 {{#> components/label/label_group}}
                     {{> components/label/label _type=this.type _text=(loca this.loca) }}
                     {{> components/label/label_byline _css="ml-2 text-tickerTeaserlabelByline" _text=../../../this.tickerTopic }}
                 {{/components/label/label_group}}
             {{/with~}}
-            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
+            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto hover:underline decoration-2 decoration-tickerTeaserHeadlineUnderline"}}
                 {{> components/teaser/components/teaser_title _css="text-tickerTeaserHeadline" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
                 {{#if this.extendedTitle}}
                     {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.33.1",
+    "version": "1.33.3",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/tailwind.css

@@ -110,6 +110,7 @@
     --color-ticker-teaser-footer: theme('colors.white.DEFAULT');
     --search-border-color-desktop: theme('colors.transparent');
     --search-border-color-mobile: var(--color-primary-ds);
+    --color-ticker-teaser-headline-underline : theme('colors.white.DEFAULT');
 }
 
 [data-theme='hessenschau'] {
@@ -194,6 +195,7 @@
     --color-ticker-teaser-label-byline: theme('colors.white.DEFAULT');
     --color-ticker-teaser-timeline-score: theme('colors.orange.spicyCarrot');
     --color-ticker-teaser-footer: theme('colors.white.DEFAULT');
+    --color-ticker-teaser-headline : theme('colors.white.DEFAULT');
 }
 
 [data-theme='hr-fernsehen'] {

package/src/assets/vendor/js/podcast_player.alpine.js

@@ -56,103 +56,12 @@ export default function playaudio() {
             _player.init = false
             _player.firstPlay = true
 
-            _player.audioElement.addEventListener('play', handlePlay.bind(this))
-            _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
-            _player.audioElement.addEventListener('pause', handlePause.bind(this))
-            _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
-            _player.audioElement.addEventListener('ended', handleStopped.bind(this))
-
             // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
             this.playerCount++
 
             this.playlist[id] = _player
 
-            const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
-            const avContent = {
-                av_content_id: settings.piano.av_content_id,
-                av_content: settings.piano.av_content,
-                av_content_type: settings.piano.av_content_type,
-                av_content_duration: settings.piano.av_content_duration,
-                av_broadcasting_type: settings.piano.av_broadcasting_type,
-                av_content_theme1: settings.piano.av_content_theme1,
-                hr_document_type: settings.piano.hr_document_type,
-                site_level2_id: settings.piano.site_level2_id,
-            }
-
-            if (settings.piano.av_content_theme2) {
-                avContent.av_content_theme2 = settings.piano.av_content_theme2
-            }
-            if (settings.piano.av_content_theme3) {
-                avContent.av_content_theme3 = settings.piano.av_content_theme3
-            }
-
-            function handlePlay(event) {
-                this.dispatchCustomEvent('hr-avInsights:play', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-            }
-
-            function handlePlaying(event) {
-                if (_player.firstPlay) {
-                    this.dispatchCustomEvent('hr-avInsights:playback-start', {
-                        data: {
-                            playerId: getPlayerIdForAvInsights(),
-                            cursorPosition: _player.audioElement.currentTime * 1000,
-                            avContent: avContent,
-                        },
-                    })
-                    _player.firstPlay = false
-                } else {
-                    this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
-                        data: {
-                            playerId: getPlayerIdForAvInsights(),
-                            cursorPosition: _player.audioElement.currentTime * 1000,
-                            avContent: avContent,
-                        },
-                    })
-                }
-            }
-
-            function handleWaiting(event) {
-                this.dispatchCustomEvent('hr-avInsights:buffer-start', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-            }
-
-            function handlePause(event) {
-                this.dispatchCustomEvent('hr-avInsights:playback-paused', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-            }
-
-            function handleStopped(event) {
-                this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-                _player.firstPlay = true
-            }
-
-            function getPlayerIdForAvInsights() {
-                return _player.id + '-' + avContent.av_content_id
-            }
         },
-
         listenToGlobalStop() {
             console.log('global listener init')
             document.addEventListener(

package/src/assets/vendor/js/podcast_player.alpine.new.js

@@ -0,0 +1,286 @@
+export default function playaudio() {
+    return {
+        dispatchCustomEvent(
+            eventName,
+            { data = undefined, element = document, handleIframe = false, id = undefined } = {}
+        ) {
+            let event
+
+            if (undefined != data) {
+                data = { detail: data }
+                event = new CustomEvent(eventName, data)
+            } else {
+                if (typeof Event === 'function') {
+                    event = new Event(eventName)
+                } else {
+                    event = document.createEvent('Event')
+                    event.initEvent(eventName, true, true)
+                }
+            }
+            if (undefined !== id) {
+                event.id = id
+            }
+
+            if (handleIframe) {
+                if (document.getElementById('js-iFrame')) {
+                    document.getElementById('js-iFrame').contentWindow.document.dispatchEvent(event)
+                }
+                if (this.inIframe()) {
+                    parent.document.dispatchEvent(event)
+                }
+            }
+
+            element.dispatchEvent(event)
+        },
+        inIframe() {
+            try {
+                return window.self !== window.top
+            } catch (e) {
+                return true
+            }
+        },
+        playerCount: 0,
+        playlist: {},
+        registerPlayer(duration, id) {
+            let _player = {}
+            _player.id = id
+            _player.button = document.querySelector('#playbutton' + id)
+            _player.playIcon = _player.button.querySelector('.js-playbutton')
+            _player.pauseIcon = _player.button.querySelector('.js-pausebutton')
+            _player.range = document.querySelector('#range' + id)
+            _player.timeDisplay = document.querySelector('#timedisplay' + id)
+            _player.audioElement = this.$el
+            _player.audioSrc = this.$el.querySelector('source').src
+            _player.duration = duration
+            _player.currentlyPlaying = false
+            _player.init = false
+            _player.firstPlay = true
+
+            _player.audioElement.addEventListener('play', handlePlay.bind(this))
+            _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
+            _player.audioElement.addEventListener('pause', handlePause.bind(this))
+            _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
+            _player.audioElement.addEventListener('ended', handleStopped.bind(this))
+
+            // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
+            this.playerCount++
+
+            this.playlist[id] = _player
+
+            const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
+            const avContent = {
+                av_content_id: settings.piano.av_content_id,
+                av_content: settings.piano.av_content,
+                av_content_type: settings.piano.av_content_type,
+                av_content_duration: settings.piano.av_content_duration,
+                av_broadcasting_type: settings.piano.av_broadcasting_type,
+                av_content_theme1: settings.piano.av_content_theme1,
+                hr_document_type: settings.piano.hr_document_type,
+                site_level2_id: settings.piano.site_level2_id,
+            }
+
+            if (settings.piano.av_content_theme2) {
+                avContent.av_content_theme2 = settings.piano.av_content_theme2
+            }
+            if (settings.piano.av_content_theme3) {
+                avContent.av_content_theme3 = settings.piano.av_content_theme3
+            }
+
+            function handlePlay(event) {
+                this.dispatchCustomEvent('hr-avInsights:play', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+            }
+
+            function handlePlaying(event) {
+                if (_player.firstPlay) {
+                    this.dispatchCustomEvent('hr-avInsights:playback-start', {
+                        data: {
+                            playerId: getPlayerIdForAvInsights(),
+                            cursorPosition: _player.audioElement.currentTime * 1000,
+                            avContent: avContent,
+                        },
+                    })
+                    _player.firstPlay = false
+                } else {
+                    this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
+                        data: {
+                            playerId: getPlayerIdForAvInsights(),
+                            cursorPosition: _player.audioElement.currentTime * 1000,
+                            avContent: avContent,
+                        },
+                    })
+                }
+            }
+
+            function handleWaiting(event) {
+                this.dispatchCustomEvent('hr-avInsights:buffer-start', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+            }
+
+            function handlePause(event) {
+                this.dispatchCustomEvent('hr-avInsights:playback-paused', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+            }
+
+            function handleStopped(event) {
+                this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+                _player.firstPlay = true
+            }
+
+            function getPlayerIdForAvInsights() {
+                return _player.id + '-' + avContent.av_content_id
+            }
+        },
+
+        listenToGlobalStop() {
+            console.log('global listener init')
+            document.addEventListener(
+                'hr:global:stopOtherAVs',
+                this.stopAllPlayersBecauseOfGlobalStop.bind(this)
+            )
+        },
+        rangeInput(id) {
+            if (this.playlist[id].init == false) {
+                this.playAndStop(id)
+                this.playAndStop(id)
+            }
+            this.playlist[id].audioElement.currentTime =
+                (this.playlist[id].range.value / 1000) * this.playlist[id].audioElement.duration
+        },
+        setTime(duration, id) {
+            console.log('time set: ' + duration)
+
+            let parts = duration.split(':')
+            if (parts.length < 3) {
+                let minutes = +parts[0]
+                let seconds = +parts[1]
+                var durationSeconds = (minutes * 60 + seconds).toFixed(3)
+            } else {
+                let hours = +parts[0]
+                let minutes = +parts[1]
+                let seconds = +parts[2]
+                var durationSeconds = (hours * 3600 + minutes * 60 + seconds).toFixed(3)
+            }
+
+            let range = document.getElementById('range' + id)
+            range.value = 0
+            this.$el.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat('0', false)
+            this.$el.querySelector('.js-audioDuration').innerHTML = this.fancyTimeFormat(
+                durationSeconds,
+                true
+            )
+        },
+
+        updateCurrentTime(range, timeDisplay, newTime, id) {
+            timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(
+                newTime,
+                false
+            )
+            range.style.background =
+                'linear-gradient(to right, var(--color-podcast) ' +
+                range.value / 10 +
+                '%, white ' +
+                range.value / 10 +
+                '% )'
+            range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
+        },
+
+        playAndStop(id) {
+            console.log('event target: ' + this.$event.currentTarget.id)
+            console.log('playlist: ', this.playlist)
+            if (this.playlist[id].init == true) {
+                this.stopAudio(id)
+            } else {
+                this.stopAllOtherPlayers(id, false)
+                this.startAudio(id)
+                this.playlist[id].range.parentNode.classList.remove('max-h-0')
+                this.playlist[id].range.parentNode.classList.add('max-h-9')
+                this.playlist[id].playIcon.classList.add('hidden')
+                this.playlist[id].pauseIcon.classList.remove('hidden')
+                this.dispatchCustomEvent('hr:global:stopOtherAVs', { handleIframe: true, id: id })
+            }
+        },
+
+        stopAllOtherPlayers(id, preventMinimize) {
+            for (const index in this.playlist) {
+                if (index != id) {
+                    console.log('STOP: ', index)
+                    this.stopAudio(index)
+                    if (!preventMinimize) {
+                        this.playlist[index].range.parentNode.classList.add('max-h-0')
+                        this.playlist[index].range.parentNode.classList.remove('max-h-9')
+                    }
+                }
+            }
+        },
+        stopAllPlayersBecauseOfGlobalStop(event) {
+            this.stopAllOtherPlayers(event.id, true)
+        },
+        startAudio(id) {
+            console.log('start audio ' + id)
+            if (this.playlist[id].init == false) {
+                this.initAudioEventListener(id)
+                this.playlist[id].init = true
+            }
+            this.playlist[id].audioElement.play()
+            this.playlist[id].currentlyPlaying = true
+        },
+
+        stopAudio(id) {
+            this.playlist[id].audioElement.pause()
+            this.playlist[id].init = false
+            this.playlist[id].currentlyPlaying = false
+            this.playlist[id].playIcon.classList.remove('hidden')
+            this.playlist[id].pauseIcon.classList.add('hidden')
+        },
+
+        initAudioEventListener(id) {
+            let _audioElement = this.playlist[id].audioElement
+            let _range = this.playlist[id].range
+            let _timeDisplay = this.playlist[id].timeDisplay
+            _audioElement.ontimeupdate = (event) => {
+                this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime, id)
+            }
+        },
+
+        fancyTimeFormat(duration, measure) {
+            var hrs = ~~(duration / 3600)
+            var mins = ~~((duration % 3600) / 60)
+            var secs = ~~duration % 60
+
+            var ret = ''
+            if (hrs > 0) {
+                ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+            }
+
+            ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+            ret += '' + secs
+
+            if (measure) {
+                hrs > 0 ? (ret += ' Std.') : (ret += ' Min.')
+            }
+            return ret
+        },
+    }
+}

package/src/stories/views/components/teaser/ticker/teaser_ticker_body.hbs

@@ -1,14 +1,14 @@
 <div class="h-full flex-col flex w-full{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
 
     {{#> components/teaser/components/teaser_header _css=(if this.isStandardTeaser "px-5" "px-5 md:px-0")}}
-        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link hover:text-toplineColor" }} 
+        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link" }} 
             {{#with this.label}}
                 {{#> components/label/label_group}}
                     {{> components/label/label _type=this.type _text=(loca this.loca) }}
                     {{> components/label/label_byline _css="ml-2 text-tickerTeaserlabelByline" _text=../../../this.tickerTopic }}
                 {{/components/label/label_group}}
             {{/with~}}
-            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
+            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto hover:underline decoration-2 decoration-tickerTeaserHeadlineUnderline"}}
                 {{> components/teaser/components/teaser_title _css="text-tickerTeaserHeadline" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
                 {{#if this.extendedTitle}}
                     {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}

package/tailwind.config.js

@@ -376,7 +376,8 @@ module.exports = {
                 'tickerTeaserHeadline': 'var(--color-ticker-teaser-headline,#000)',
                 'tickerTeaserlabelByline': 'var(--color-ticker-teaser-label-byline)',
                 'tickerTeaserTimelineScore': 'var(--color-ticker-teaser-timeline-score)',
-                'tickerTeaserFooter': 'var(--color-ticker-teaser-footer)'
+                'tickerTeaserFooter': 'var(--color-ticker-teaser-footer)',
+                'tickerTeaserHeadlineUnderline': 'var(--color-ticker-teaser-headline-underline)'
             },
         },
     },