hr-design-system-handlebars 1.94.0 → 1.95.1

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

@@ -7,9 +7,8 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
 
     const skinPath = options.cssUrl,
         ardplayerUrl = options.jsUrl,
-        smarttagUrl = options.atiSmarttagUrl,
-        playerId = options.playerId,
-        type = options.type,
+        playerId = isNaN(parseInt(options.playerId)) ? 0 : parseInt(options.playerId),
+        typeLabel = options.typeLabel,
         settingsCookie = new SettingsCookie(),
         isPlayerDebug = options.isPlayerDebug || false,
         playerLocation = trackingData.playerLocation || "Default",
@@ -52,20 +51,18 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
     }
 
     const createPlayer = function () {
-        if (!settingsCookie.isSettingsCookieAccepted('ati')) {
-            if (undefined != playerConfig.pluginData['trackingPiano@all'])
-                playerConfig.pluginData['trackingPiano@all'].isEnabled = false
+        if (undefined != playerConfig.pluginData['trackingPiano@all']) {
+            playerConfig.pluginData['trackingPiano@all'].isEnabled = settingsCookie.isSettingsCookieAccepted('ati')
         }
-        if (
-            !settingsCookie.isSettingsCookieAccepted('agf') &&
-            undefined != playerConfig.pluginData['trackingAgf@all']
-        ) {
-            playerConfig.pluginData['trackingAgf@all'].isEnabled = false
+        if (undefined != playerConfig.pluginData['trackingAgf@all']) {
+            playerConfig.pluginData['trackingAgf@all'].isEnabled = settingsCookie.isSettingsCookieAccepted('agf')
         }
         whenAvailable('ardplayer', function () {
-            player = new ardplayer.Player(playerId, playerConfig, mediaCollection)
+            player = new ardplayer.Player(playerId.toString(), playerConfig, mediaCollection)
 
-            player.setLightMode(isDarkmodeAllowed ? !darkModePreference.matches : true)
+            if (isDarkmodeAllowed) {
+                player.setLightMode(!darkModePreference.matches)
+            }
 
             if (isPlayerDebug) {
                 ardplayer.debug(true, true, true, true)
@@ -84,27 +81,6 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
         }, interval)
     }
 
-    const handleThemeSwitch = function (event) {
-        player.setLightMode(!event.matches)
-    }
-
-    const handlePlayStream = function (event) {
-        const geotag = hr$('.js-geotag', rootElement)[0]
-        if (!isPlayerStarted) {
-            trackPlayerStart()
-            isPlayerStarted = true
-        }
-        if (typeof geotag != 'undefined') {
-            geotag.classList.add('hide')
-        }
-        fireEvent('hr:global:stopOtherAVs', 'ardplayer', true)
-    }
-
-    const handlePlayerErrors = function (event) {
-        if (undefined !== videoKey) {
-            fireEvent('hr:global:ardPlayerError', { key: videoKey }, true)
-        }
-    }
 
     const bindPlayerEvents = function () {
         listen(ardplayer.Player.EVENT_PLAY_STREAM, handlePlayStream, player)
@@ -118,20 +94,14 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
         })
 
         listen('player_closed', function (event) {
-            let playerIdFromConfig = parseInt(playerId)
-            playerIdFromConfig = isNaN(playerIdFromConfig) ? 0 : playerIdFromConfig
-            if (playerIdFromConfig === event.detail.playerId) {
+            if (playerId === event.detail.playerId) {
                 player.stop()
             }
         })
 
-
-
         listen('player_start', function (event) {
             if (player) {
-                let playerIdFromConfig = parseInt(playerId)
-                playerIdFromConfig = isNaN(playerIdFromConfig) ? 0 : playerIdFromConfig
-                if (playerIdFromConfig === event.detail.playerId) {
+                if (playerId === event.detail.playerId) {
                     if (undefined != mediaCollection.live) {
                         player.seekToLive()
                     }
@@ -143,30 +113,33 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
         listen("change", handleThemeSwitch, darkModePreference)
     }
 
-    const trackPlayerStart = function () {
-        switch (type) {
-            case "audioOndemand":
-                console.debug(`Playbutton geklickt::Audio \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
-                uxAction(`Playbutton geklickt::Audio \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
-                break;
-            case "audioLivestream":
-                console.debug(`Playbutton geklickt::Audio-Event-Livestream \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
-                uxAction(`Playbutton geklickt::Audio-Event-Livestream \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
-                break;
-            case "videoOndemand":
-                console.debug(`Playbutton geklickt::Video \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
-                uxAction(`Playbutton geklickt::Video \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
-                break;
-            case "videoLivestream":
-                console.debug(`Playbutton geklickt::Video - Livestream \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
-                uxAction(`Playbutton geklickt::Video - Livestream \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
-                break;
+    const handlePlayStream = function (event) {
+        const geotag = hr$('.js-geotag', rootElement)[0]
+        if (!isPlayerStarted) {
+            trackPlayerStart()
+            isPlayerStarted = true
+        }
+        if (typeof geotag != 'undefined') {
+            geotag.classList.add('hide')
         }
+        fireEvent('hr:global:stopOtherAVs', 'ardplayer', true)
     }
 
-    setupPlayer()
-}
+    const handlePlayerErrors = function (event) {
+        if (undefined !== videoKey) {
+            fireEvent('hr:global:ardPlayerError', { key: videoKey }, true)
+        }
+    }
+
+    const handleThemeSwitch = function (event) {
+        player.setLightMode(!event.matches)
+    }
 
+    const trackPlayerStart = function () {
+        uxAction(`Playbutton geklickt::${typeLabel} \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
+    }
 
+    setupPlayer()
+}
 
 export default ArdPlayerLoader

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

@@ -1,5 +1,4 @@
-import { hr$, listenOnce, listen } from 'hrQuery'
-import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+import { hr$, listenOnce } from 'hrQuery'
 import ArdPlayerLoader from 'components/mediaplayer/ardPlayerLoader.subfeature'
 
 const MediaplayerLoader = function (context) {
@@ -8,7 +7,6 @@ const MediaplayerLoader = function (context) {
     const { options } = context,
         { element: rootElement } = context,
         isAutoplay = options.isAutoplay,
-        teaserSize = options.teaserSize,
         mediaplayerButton = hr$('.js-mediaplayer__button', rootElement.parentNode)[0],
         trackingData = rootElement.dataset.mediaplayerTracking ? JSON.parse(rootElement.dataset.mediaplayerTracking) : {}
 
@@ -22,11 +20,6 @@ const MediaplayerLoader = function (context) {
         removeVideoHover()
     }
 
-    if (isAutoplay) {
-        console.log('isAutoplay')
-        listenOnce('click', loadArdPlayerLoader, mediaplayerButton)
-    } else {
-        loadArdPlayerLoader()
-    }
+    isAutoplay ? listenOnce('click', loadArdPlayerLoader, mediaplayerButton) : loadArdPlayerLoader()
 }
 export default MediaplayerLoader

package/dist/views/components/social_sharing/social_sharing_icons.hbs

@@ -100,4 +100,18 @@
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
+{{/with}}
+{{~#with this.printLink}}
+<li class="">
+    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        title="{{loca "share_copy_linktitle" }}"
+        onclick="window.print()"
+        {{#with ../_trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::print"}]}'
+        {{/with}}
+    >
+        <span x-cloak class="flex items-center justify-center w-full h-full">{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="print-ds" _iconmap="icons" ~}}</span>
+
+    </button>
+</li>
 {{/with}}

package/dist/views_static/components/social_sharing/social_sharing_icons.hbs

@@ -100,4 +100,18 @@
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
+{{/with}}
+{{~#with this.printLink}}
+<li class="">
+    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        title="{{loca "share_copy_linktitle" }}"
+        onclick="window.print()"
+        {{#with ../_trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::print"}]}'
+        {{/with}}
+    >
+        <span x-cloak class="flex items-center justify-center w-full h-full">{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="print-ds" _iconmap="icons" ~}}</span>
+
+    </button>
+</li>
 {{/with}}

package/package.json

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

package/src/assets/fixtures/audio/audios.inc.json

@@ -56,6 +56,7 @@
         },
         "playerId": "2565",
         "type": "audioOndemand",
+        "typeLabel": "Audio-Ondemand",
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js",
         "isAutoplay": true,
@@ -115,6 +116,7 @@
         },
         "playerId": "2565",
         "type": "audioOndemand",
+        "typeLabel": "Audio-On-Demand",
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js",
         "isAutoplay": true,
@@ -199,6 +201,7 @@
         },
         "playerId": "4076",
         "type": "audioOndemand",
+        "typeLabel": "Audio-On-Demand",
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js",
         "isAutoplay": true,
@@ -263,6 +266,7 @@
         },
         "playerId": "1694",
         "type": "audioLivestream",
+        "typeLabel": "Audio-Event-Livestream",
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js",
         "isAutoplay": true,

package/src/assets/fixtures/page/story/story_with_label.json

@@ -2,6 +2,18 @@
 
     "@->jsoninclude": "page/story/story.inc.json",
     "@->overrides": [
+        {
+            "@->contentpath": "socialSharing",
+            "@->value": {
+                "twitterLink": "/twitterLink-url",
+                "facebookLink": "/facebookLink-url",
+                "whatsappLink": "/whatsappLink-url",
+                "mailtoLink": "/mailtoLink-url",
+                "copyToClipboardLink": "/copyToClipboard-url",
+                "printLink": true
+
+            }
+        },
         {
             "@->contentpath": "label",
             "@->value": 

package/src/assets/fixtures/video/videos.inc.json

@@ -69,6 +69,7 @@
         },
         "playerId": "8423",
         "type": "videoOndemand",
+        "typeLabel": "Video-On-Demand",
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js",
         "isAutoplay": true,
@@ -147,6 +148,7 @@
         },
         "playerId": "8424",
         "type": "videoOndemand",
+        "typeLabel": "Video-On-Demand",
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js",
         "isAutoplay": true,
@@ -216,6 +218,7 @@
         },
         "playerId": "6819",
         "type": "videoLivestream",
+        "typeLabel": "Video-Livestream",
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js",
         "teaserSize": "100",

package/src/assets/icons/icons/svgmap/print-ds.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 320 320">
+  <path d="M268.8,86.1h-19.9c0-.6,0-1.2,0-1.9v-39.5c0-11.4-9.3-20.7-20.7-20.7H90.8c-11.4,0-20.7,9.3-20.7,20.7v39.5c0,.6,0,1.3,0,1.9h-18.9c-15.6,0-28.2,12.7-28.2,28.2v96c0,15.6,12.7,28.2,28.2,28.2h18.8v36.7c0,11.4,9.3,20.7,20.7,20.7h137.5c11.4,0,20.7-9.3,20.7-20.7v-36.7h19.8c15.6,0,28.2-12.7,28.2-28.2v-96c0-15.6-12.7-28.2-28.2-28.2ZM88.9,44.7c0-1,.8-1.9,1.9-1.9h137.5c1,0,1.9.8,1.9,1.9v39.5c0,1-.8,1.9-1.9,1.9H90.8c-1,0-1.9-.8-1.9-1.9v-39.5ZM230.1,275.3c0,1-.8,1.9-1.9,1.9H90.8c-1,0-1.9-.8-1.9-1.9v-92.3c0-1,.8-1.9,1.9-1.9h137.5c1,0,1.9.8,1.9,1.9v92.3ZM278.2,210.4c0,5.2-4.2,9.4-9.4,9.4h-19.8v-36.7c0-11.4-9.3-20.7-20.7-20.7H90.8c-11.4,0-20.7,9.3-20.7,20.7v36.7h-18.8c-5.2,0-9.4-4.2-9.4-9.4v-96c0-5.2,4.2-9.4,9.4-9.4h217.5c5.2,0,9.4,4.2,9.4,9.4v96Z"/>
+  <path d="M207,194.8h-94.2c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4h94.2c5.2,0,9.4-4.2,9.4-9.4s-4.2-9.4-9.4-9.4Z"/>
+  <path d="M207,231.6h-94.2c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4h94.2c5.2,0,9.4-4.2,9.4-9.4s-4.2-9.4-9.4-9.4Z"/>
+</svg>