hr-design-system-handlebars 0.55.3 → 0.56.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.56.0 (Tue Aug 30 2022)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 1567 [#305](https://github.com/mumprod/hr-design-system-handlebars/pull/305) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.55.3 (Fri Aug 19 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -683,14 +683,6 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
-.my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-.mx-5 {
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
-}
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -699,6 +691,14 @@ video {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
 .mx-8 {
   margin-left: 2rem;
   margin-right: 2rem;
@@ -822,9 +822,6 @@ video {
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-10 {
   height: 2.5rem;
 }
@@ -837,6 +834,9 @@ video {
 .h-full {
   height: 100%;
 }
+.h-auto {
+  height: auto;
+}
 .h-0\.5 {
   height: 0.125rem;
 }
@@ -858,9 +858,6 @@ video {
 .h-2\/5 {
   height: 40%;
 }
-.h-auto {
-  height: auto;
-}
 .h-3\.5 {
   height: 0.875rem;
 }
@@ -882,15 +879,12 @@ video {
 .w-16 {
   width: 4rem;
 }
-.w-12 {
-  width: 3rem;
+.w-10 {
+  width: 2.5rem;
 }
 .w-full {
   width: 100%;
 }
-.w-10 {
-  width: 2.5rem;
-}
 .\!w-full {
   width: 100% !important;
 }
@@ -917,6 +911,9 @@ video {
 .w-40 {
   width: 10rem;
 }
+.w-12 {
+  width: 3rem;
+}
 .w-3\.5 {
   width: 0.875rem;
 }
@@ -1282,10 +1279,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
 }
-.bg-blue-jellyBean {
-  --tw-bg-opacity: 1;
-  background-color: rgba(39, 107, 158, var(--tw-bg-opacity));
-}
 .bg-blue-congress {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
@@ -1663,10 +1656,6 @@ video {
   --tw-text-opacity: 1 !important;
   color: rgba(20, 83, 45, var(--tw-text-opacity)) !important;
 }
-.text-blue-jellyBean {
-  --tw-text-opacity: 1;
-  color: rgba(39, 107, 158, var(--tw-text-opacity));
-}
 .text-white {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -1687,6 +1676,14 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
 }
+.text-orange-spicyCarrot {
+  --tw-text-opacity: 1;
+  color: rgba(211, 70, 0, var(--tw-text-opacity));
+}
+.text-blue-jellyBean {
+  --tw-text-opacity: 1;
+  color: rgba(39, 107, 158, var(--tw-text-opacity));
+}
 .text-black {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
@@ -1695,10 +1692,6 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 109, 193, var(--tw-text-opacity));
 }
-.text-orange-spicyCarrot {
-  --tw-text-opacity: 1;
-  color: rgba(211, 70, 0, var(--tw-text-opacity));
-}
 .text-opacity-50 {
   --tw-text-opacity: 0.5;
 }
@@ -1867,7 +1860,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1660939134937;
+  counter-reset: cnt1661851888889;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2250,7 +2243,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1660939134937 1;
+  counter-increment: cnt1661851888889 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2267,7 +2260,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1660939134937);
+  content: counter(cnt1661851888889);
 }
 /*! purgecss start ignore */
 :root,
@@ -2682,15 +2675,15 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
-.hover\:fill-blue-jellyBean:hover {
-  fill: #006dc1;
-}
 .hover\:fill-white:hover {
   fill: #ffffff;
 }
 .hover\:fill-orange-spicyCarrot:hover {
   fill: #d34600;
 }
+.hover\:fill-blue-jellyBean:hover {
+  fill: #006dc1;
+}
 .hover\:text-toplineColor:hover {
   color: #006dc1;
   color: var(--color-topline);

package/dist/assets/js/views/components/mediaplayer/ardPlayerLoader.subfeature.js

@@ -0,0 +1,132 @@
+import { fireEvent, hr$, listen, loadScript } from 'hrQuery'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
+
+const ArdPlayerLoader = function (options, rootElement) {
+    'use strict'
+
+    const skinPath = options.cssUrl,
+        ardplayerUrl = options.jsUrl,
+        smarttagUrl = options.atiSmarttagUrl,
+        playerId = options.playerId,
+        trackingCookie = new TrackingCookie()
+    let mediaCollection = options.mediaCollection,
+        playerConfig = options.playerConfig,
+        player
+
+    const setupPlayer = function () {
+        if (
+            undefined != playerConfig.pluginData['trackingAti@all'] &&
+            playerConfig.pluginData['trackingAti@all'].isEnabled
+        ) {
+            playerConfig.pluginData['trackingAti@all'].config.cookieSecure =
+                'https:' === document.location.protocol
+        }
+        loadArdPlayerScript()
+        fetchPlayerStyle(skinPath).then(createPlayer())
+    }
+
+    const loadArdPlayerScript = function () {
+        loadScript('js-ardplayerHr', ardplayerUrl)
+    }
+
+    const fetchPlayerStyle = function (url, id) {
+        return new Promise(function (resolve, reject) {
+            if (document.getElementById(id)) {
+                resolve('Style wurde bereits geladen')
+                console.log('style was already loaded before')
+            } else {
+                const link = document.createElement('link')
+                link.type = 'text/css'
+                link.rel = 'stylesheet'
+                link.id = id
+                link.onload = function () {
+                    resolve()
+                }
+                link.href = url
+
+                const headScript = document.querySelector('script')
+                headScript.parentNode.insertBefore(link, headScript)
+                resolve('Style wurde neu geladen')
+            }
+        })
+    }
+
+    const createPlayer = function () {
+        if (
+            trackingCookie.isTrackingAccepted('ati') &&
+            playerConfig.pluginData['trackingAti@all'].isEnabled
+        ) {
+            loadScript('js-smarttagProd', smarttagUrl)
+        } else {
+            playerConfig.pluginData['trackingAti@all'].isEnabled = false
+        }
+        if (!trackingCookie.isTrackingAccepted('agf')) {
+            playerConfig.pluginData['trackingAgf@all'].isEnabled = false
+        }
+        whenAvailable('ardplayer', function () {
+            player = new ardplayer.Player(playerId, playerConfig, mediaCollection)
+            bindPlayerEvents()
+        })
+    }
+
+    const whenAvailable = function (name, callback) {
+        const interval = 100 // ms
+        const intervalId = window.setInterval(function () {
+            if (typeof ardplayer != 'undefined') {
+                window.clearInterval(intervalId)
+                callback(window[name])
+            }
+        }, interval)
+    }
+
+    const bindPlayerEvents = function () {
+        player.$.on(ardplayer.Player.EVENT_PLAY_STREAM, function (event) {
+            const geotag = hr$('.js-geotag', rootElement)[0]
+            if (typeof geotag != 'undefined') {
+                geotag.classList.add('hide')
+            }
+
+            fireEvent('hr:global:stopOtherAVs', 'ardplayer', true)
+        })
+
+        player.$.on(ardplayer.Player.EVENT_ERROR, function (event) {
+            if (undefined !== videoKey) {
+                fireEvent('hr:global:ardPlayerError', { key: videoKey }, true)
+            }
+        })
+
+        listen('hr:global:stopOtherAVs', function (event) {
+            if (event.detail != 'ardplayer') {
+                player.pause()
+            }
+        })
+
+        listen('player_closed', function (event) {
+            player.stop()
+        })
+
+        listen('player_start', function (event) {
+            if (player) {
+                if (undefined != mediaCollection.live) {
+                    player.seekToLive()
+                }
+                player.play()
+            }
+        })
+    }
+
+    if (
+        trackingCookie.isTrackingAccepted('agf') &&
+        window.gfkConnector &&
+        playerConfig.pluginData['trackingAgf@all']
+    ) {
+        gfkConnector.init(function (gfkLinkID) {
+            playerConfig.pluginData['trackingAgf@all'].clipData.nol_c20 = 'p20,' + gfkLinkID
+            setupPlayer()
+        })
+    } else {
+        setupPlayer()
+    }
+}
+
+export default ArdPlayerLoader

package/dist/assets/js/views/components/mediaplayer/mediaplayerLoader.feature.js

@@ -0,0 +1,32 @@
+import { hr$, listenOnce, listen } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+import ArdPlayerLoader from 'components/mediaplayer/ardPlayerLoader.subfeature'
+
+const MediaplayerLoader = function (context) {
+    'use strict'
+
+    const { options } = context,
+        { element: rootElement } = context,
+        isAutoplay = options.isAutoplay,
+        teaserSize = options.teaserSize,
+        mediaplayerButton = hr$('.js-mediaplayer__button', rootElement)[0]
+
+    const removeVideoHover = function () {
+        rootElement.parentNode.parentNode.classList.remove('-imageHover')
+        rootElement.parentNode.parentNode.parentNode.classList.remove('-imageHover')
+    }
+
+    const loadArdPlayerLoader = function () {
+        new ArdPlayerLoader(options)
+        removeVideoHover()
+        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+    }
+
+    if (isAutoplay) {
+        console.log('isAutoplay')
+        listenOnce('click', loadArdPlayerLoader, mediaplayerButton)
+    } else {
+        loadArdPlayerLoader()
+    }
+}
+export default MediaplayerLoader

package/dist/views/components/mediaplayer/ardPlayerLoader.subfeature.js

@@ -0,0 +1,132 @@
+import { fireEvent, hr$, listen, loadScript } from 'hrQuery'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
+
+const ArdPlayerLoader = function (options, rootElement) {
+    'use strict'
+
+    const skinPath = options.cssUrl,
+        ardplayerUrl = options.jsUrl,
+        smarttagUrl = options.atiSmarttagUrl,
+        playerId = options.playerId,
+        trackingCookie = new TrackingCookie()
+    let mediaCollection = options.mediaCollection,
+        playerConfig = options.playerConfig,
+        player
+
+    const setupPlayer = function () {
+        if (
+            undefined != playerConfig.pluginData['trackingAti@all'] &&
+            playerConfig.pluginData['trackingAti@all'].isEnabled
+        ) {
+            playerConfig.pluginData['trackingAti@all'].config.cookieSecure =
+                'https:' === document.location.protocol
+        }
+        loadArdPlayerScript()
+        fetchPlayerStyle(skinPath).then(createPlayer())
+    }
+
+    const loadArdPlayerScript = function () {
+        loadScript('js-ardplayerHr', ardplayerUrl)
+    }
+
+    const fetchPlayerStyle = function (url, id) {
+        return new Promise(function (resolve, reject) {
+            if (document.getElementById(id)) {
+                resolve('Style wurde bereits geladen')
+                console.log('style was already loaded before')
+            } else {
+                const link = document.createElement('link')
+                link.type = 'text/css'
+                link.rel = 'stylesheet'
+                link.id = id
+                link.onload = function () {
+                    resolve()
+                }
+                link.href = url
+
+                const headScript = document.querySelector('script')
+                headScript.parentNode.insertBefore(link, headScript)
+                resolve('Style wurde neu geladen')
+            }
+        })
+    }
+
+    const createPlayer = function () {
+        if (
+            trackingCookie.isTrackingAccepted('ati') &&
+            playerConfig.pluginData['trackingAti@all'].isEnabled
+        ) {
+            loadScript('js-smarttagProd', smarttagUrl)
+        } else {
+            playerConfig.pluginData['trackingAti@all'].isEnabled = false
+        }
+        if (!trackingCookie.isTrackingAccepted('agf')) {
+            playerConfig.pluginData['trackingAgf@all'].isEnabled = false
+        }
+        whenAvailable('ardplayer', function () {
+            player = new ardplayer.Player(playerId, playerConfig, mediaCollection)
+            bindPlayerEvents()
+        })
+    }
+
+    const whenAvailable = function (name, callback) {
+        const interval = 100 // ms
+        const intervalId = window.setInterval(function () {
+            if (typeof ardplayer != 'undefined') {
+                window.clearInterval(intervalId)
+                callback(window[name])
+            }
+        }, interval)
+    }
+
+    const bindPlayerEvents = function () {
+        player.$.on(ardplayer.Player.EVENT_PLAY_STREAM, function (event) {
+            const geotag = hr$('.js-geotag', rootElement)[0]
+            if (typeof geotag != 'undefined') {
+                geotag.classList.add('hide')
+            }
+
+            fireEvent('hr:global:stopOtherAVs', 'ardplayer', true)
+        })
+
+        player.$.on(ardplayer.Player.EVENT_ERROR, function (event) {
+            if (undefined !== videoKey) {
+                fireEvent('hr:global:ardPlayerError', { key: videoKey }, true)
+            }
+        })
+
+        listen('hr:global:stopOtherAVs', function (event) {
+            if (event.detail != 'ardplayer') {
+                player.pause()
+            }
+        })
+
+        listen('player_closed', function (event) {
+            player.stop()
+        })
+
+        listen('player_start', function (event) {
+            if (player) {
+                if (undefined != mediaCollection.live) {
+                    player.seekToLive()
+                }
+                player.play()
+            }
+        })
+    }
+
+    if (
+        trackingCookie.isTrackingAccepted('agf') &&
+        window.gfkConnector &&
+        playerConfig.pluginData['trackingAgf@all']
+    ) {
+        gfkConnector.init(function (gfkLinkID) {
+            playerConfig.pluginData['trackingAgf@all'].clipData.nol_c20 = 'p20,' + gfkLinkID
+            setupPlayer()
+        })
+    } else {
+        setupPlayer()
+    }
+}
+
+export default ArdPlayerLoader

package/dist/views/components/mediaplayer/media_player.hbs

@@ -0,0 +1,30 @@
+<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
+    {{#unless _hideGeotag}}
+        {{~#with _geotag}}
+            <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>
+        {{/with~}}
+    {{/unless}}
+</div>
+{{#if _isTeaser}}
+    <div class="relative {{_aspectRatio}}" x-show="!avStart" > 
+        {{#with _teaser}}
+            {{~#if ../_isCopyText~}}
+                {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}                
+            {{else}}          
+                {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
+                        _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
+                        _clickLabelPrefix2="mediaLink" }}                                      
+                    {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../_noDelay ~}}                             
+                {{/components/base/link }}
+            {{/if}}
+        {{/with}}
+        {{> components/button/button_round _isButton="true" _addClass=(if _isLivestream 'absolute bottom-0 right-0 my-5 mx-5 text-orange-spicyCarrot hover:fill-orange-spicyCarrot js-mediaplayer__button' 'absolute bottom-0 right-0 my-5 mx-5 text-blue-jellyBean hover:fill-blue-jellyBean js-mediaplayer__button') _showIcon=true _icon=_mediaButtonIcon _label=_mediaButtonLabel _srOnly="true" _alpineClick="avStart = !avStart; $dispatch('player_start')"}}   
+        {{~#if _isPodcast~}}
+            <a href="{{this.podcastDownloadUrl}}" class="downloadLink button-invert js-load"{{#with
+                    this.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
+                {{> components/base/image/icon _icon='download-button' _addClass="icon--media"}}
+            </a>
+        {{~/if~}}
+    </div>
+{{/if}}

package/dist/views/components/mediaplayer/mediaplayerLoader.feature.js

@@ -0,0 +1,32 @@
+import { hr$, listenOnce, listen } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+import ArdPlayerLoader from 'components/mediaplayer/ardPlayerLoader.subfeature'
+
+const MediaplayerLoader = function (context) {
+    'use strict'
+
+    const { options } = context,
+        { element: rootElement } = context,
+        isAutoplay = options.isAutoplay,
+        teaserSize = options.teaserSize,
+        mediaplayerButton = hr$('.js-mediaplayer__button', rootElement)[0]
+
+    const removeVideoHover = function () {
+        rootElement.parentNode.parentNode.classList.remove('-imageHover')
+        rootElement.parentNode.parentNode.parentNode.classList.remove('-imageHover')
+    }
+
+    const loadArdPlayerLoader = function () {
+        new ArdPlayerLoader(options)
+        removeVideoHover()
+        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+    }
+
+    if (isAutoplay) {
+        console.log('isAutoplay')
+        listenOnce('click', loadArdPlayerLoader, mediaplayerButton)
+    } else {
+        loadArdPlayerLoader()
+    }
+}
+export default MediaplayerLoader

package/dist/views/components/teaser/components/teaser_av_consumption.hbs

@@ -1,14 +1,18 @@
 {{#with this.teaserLead.avDocument}}
     {{~#if this.isVideo ~}}
-        {{~> components/video/video_element _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio _teaserSize=../_teaserSize ~}}
+        {{~> components/mediaplayer/media_player this.toModel.videoElement _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio _teaserSize=../_teaserSize ~}}
     {{~/if~}}
     {{~#if this.isAudio ~}}
-         {{~> components/audio/audio_element _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             
+         {{~> components/mediaplayer/media_player this.toModel.audioElement _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../this _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             
+    {{~/if~}}
+    {{~#if this.isAudioEventLivestream ~}}
+         {{~> components/mediaplayer/media_player this.toModel.audioLivestreamElement _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             
     {{~/if~}}
     {{~#if this.isLivestream ~}}
-         {{~> components/video/livestream/video_livestream _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             
+         {{~> components/mediaplayer/media_player this.toModel.videoLivestreamElement _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             
     {{~/if~}}
+    
 {{/with}}
 {{#if _isMobile1to1~}}  
-        {{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick="avStart = false; $dispatch('player_colosed')"}}
+        {{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick="avStart = false; $dispatch('player_closed')"}}
 {{~/if~}}

package/package.json

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