hr-design-system-handlebars 1.88.3 → 1.89.1

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

@@ -13,7 +13,9 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
         settingsCookie = new SettingsCookie(),
         isPlayerDebug = options.isPlayerDebug || false,
         playerLocation = trackingData.playerLocation || "Default",
-        playerSize = trackingData.playerSize || options.teaserSize
+        playerSize = trackingData.playerSize || options.teaserSize,
+        isDarkmodeAllowed = options.isDarkmodeAllowed,
+        darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
     let mediaCollection = options.mediaCollection,
         playerConfig = options.playerConfig,
         isPlayerStarted = false,
@@ -62,6 +64,9 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
         }
         whenAvailable('ardplayer', function () {
             player = new ardplayer.Player(playerId, playerConfig, mediaCollection)
+
+            player.setLightMode(isDarkmodeAllowed ? !darkModePreference.matches : true)
+
             if (isPlayerDebug) {
                 ardplayer.debug(true, true, true, true)
             }
@@ -79,10 +84,12 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
         }, interval)
     }
 
+    const handleThemeSwitch = function (event) {
+        player.setLightMode(!event.matches)
+    }
+
     const bindPlayerEvents = function () {
         player.$.on(ardplayer.Player.EVENT_PLAY_STREAM, function (event) {
-            console.log(event.target)
-            console.debug(`options.teaserSize: ${options.teaserSize}`)
             const geotag = hr$('.js-geotag', rootElement)[0]
             if (!isPlayerStarted) {
                 trackPlayerStart()
@@ -114,6 +121,8 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
             }
         })
 
+
+
         listen('player_start', function (event) {
             if (player) {
                 let playerIdFromConfig = parseInt(playerId)
@@ -126,6 +135,8 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
                 }
             }
         })
+
+        listen("change", handleThemeSwitch, darkModePreference)
     }
 
     const trackPlayerStart = function () {

package/dist/views/components/content/copytext/components/contentbox/contentbox.hbs

@@ -33,13 +33,13 @@
         {{#each this.paragraph}}
             {{#each this.text.split}}
                 {{#if this.isText}}
-                    <p class="mt-4 text-base copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+                    <p class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
                 {{/if}}
                 {{#if this.isUl}}
-                    <ul class="pl-5 mt-4 overflow-hidden text-base list-disc copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+                    <ul class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
                 {{/if}}
                 {{#if this.isOl}}
-                    <ol class="pl-5 mt-4 overflow-hidden text-base list-decimal copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+                    <ol class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
                 {{/if}}
             {{/each}}
         {{/each}}

package/dist/views/components/content/copytext/components/infobox.hbs

@@ -31,13 +31,13 @@
 
     {{#each this.text.split}}
         {{#if this.isText}}
-            <p class="mt-4 text-base copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+            <p class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
         {{/if}}
         {{#if this.isUl}}
-            <ul class="pl-5 mt-4 overflow-hidden text-base list-disc copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+            <ul class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
         {{/if}}
         {{#if this.isOl}}
-            <ol class="pl-5 mt-4 overflow-hidden text-base list-decimal copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+            <ol class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
         {{/if}}
     {{/each}}
     {{~#block "subParagraphs"}}{{/block~}}

package/dist/views/components/teaser/cluster/teaser_cluster.hbs

@@ -4,7 +4,7 @@
                 <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                     {{#if this.teaserLogo}}
                         <span>
-                            {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
+                            {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress-hex w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
                         </span>
                     {{/if}}
                     {{#if this.title}}

package/dist/views_static/components/content/copytext/components/contentbox/contentbox.hbs

@@ -33,13 +33,13 @@
         {{#each this.paragraph}}
             {{#each this.text.split}}
                 {{#if this.isText}}
-                    <p class="mt-4 text-base copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+                    <p class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
                 {{/if}}
                 {{#if this.isUl}}
-                    <ul class="pl-5 mt-4 overflow-hidden text-base list-disc copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+                    <ul class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
                 {{/if}}
                 {{#if this.isOl}}
-                    <ol class="pl-5 mt-4 overflow-hidden text-base list-decimal copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+                    <ol class="copytextParagraphDS {{#if ../../../this.title}} mt-4{{else}}{{#if ../../../this.copytextParagraph.[0].paragraphBoxItem}} mt-4{{else}}{{#if @../first}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
                 {{/if}}
             {{/each}}
         {{/each}}

package/dist/views_static/components/content/copytext/components/infobox.hbs

@@ -31,13 +31,13 @@
 
     {{#each this.text.split}}
         {{#if this.isText}}
-            <p class="mt-4 text-base copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+            <p class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
         {{/if}}
         {{#if this.isUl}}
-            <ul class="pl-5 mt-4 overflow-hidden text-base list-disc copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+            <ul class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
         {{/if}}
         {{#if this.isOl}}
-            <ol class="pl-5 mt-4 overflow-hidden text-base list-decimal copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+            <ol class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}} mt-4{{else}}{{#if ../this.paragraphBoxItem}} mt-4{{else}}{{#if @first}} -mt-0.5{{else}} mt-4{{/if}}{{/if}}{{/if}}  overflow-hidden pl-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
         {{/if}}
     {{/each}}
     {{~#block "subParagraphs"}}{{/block~}}

package/dist/views_static/components/teaser/cluster/teaser_cluster.hbs

@@ -4,7 +4,7 @@
                 <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                     {{#if this.teaserLogo}}
                         <span>
-                            {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
+                            {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress-hex w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
                         </span>
                     {{/if}}
                     {{#if this.title}}

package/package.json

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

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

@@ -60,7 +60,8 @@
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "isAutoplay": true,
         "teaserSize": "100",
-        "realTeaserSize": "100"
+        "realTeaserSize": "100",
+        "isDarkmodeAllowed": true
     },
     "audio-2": {
         "playerConfig": {
@@ -118,7 +119,8 @@
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "isAutoplay": true,
         "teaserSize": "100",
-        "realTeaserSize": "100"
+        "realTeaserSize": "100",
+        "isDarkmodeAllowed": true
     },
     "audio-podcast": {
         "playerConfig": {
@@ -265,6 +267,7 @@
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "isAutoplay": true,
         "teaserSize": "50",
-        "realTeaserSize": "50"
+        "realTeaserSize": "50",
+        "isDarkmodeAllowed": true
     }
 }

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

@@ -74,7 +74,8 @@
         "isAutoplay": true,
         "isPlayerDebug": false,
         "teaserSize": "100",
-        "realTeaserSize": "100"
+        "realTeaserSize": "100",
+        "isDarkmodeAllowed": true
     },
     "video-2": {
         "playerConfig": {
@@ -151,7 +152,8 @@
         "isAutoplay": true,
         "isPlayerDebug": true,
         "teaserSize": "100",
-        "realTeaserSize": "100"
+        "realTeaserSize": "100",
+        "isDarkmodeAllowed": true
     },
     "video-livestream-hr-fernsehen": {
         "playerConfig": {
@@ -218,6 +220,7 @@
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "teaserSize": "100",
         "realTeaserSize": "100",
-        "isAutoplay": true
+        "isAutoplay": true,
+        "isDarkmodeAllowed": true
     }
 }