hr-design-system-handlebars 1.75.6 → 1.76.0

package/src/assets/fixtures/page/podcast/podcast_player_episode.json

@@ -15,56 +15,56 @@
             "hasDwellTime": true,
             "isSingleChannel": false,
             "backLinkUrl": "#",
-            
+
             "topictags": {
                 "topic1": {
-                    "url":"#",
+                    "url": "#",
                     "title": "topictag1"
                 },
                 "topic2": {
-                    "url":"#",
+                    "url": "#",
                     "title": "topictag2"
                 },
                 "topic3": {
-                    "url":"#",
+                    "url": "#",
                     "title": "topictag mit extrem langem namen"
                 },
                 "topic4": {
-                    "url":"#",
+                    "url": "#",
                     "title": "topic tag schnack"
                 },
                 "topic5": {
-                    "url":"#",
+                    "url": "#",
                     "title": "topictag2Taggigtop"
                 }
             },
             "geotag": {
                 "GeoTag1": {
-                    "url":"#",
+                    "url": "#",
                     "title": "geotag1"
                 },
                 "GeoTag2": {
-                    "url":"#",
+                    "url": "#",
                     "title": "geotag mit extrem langem namen"
                 },
                 "GeoTag3": {
-                    "url":"#",
+                    "url": "#",
                     "title": "Far out"
                 },
                 "GeoTag4": {
-                    "url":"#",
+                    "url": "#",
                     "title": "Stuttgart"
                 },
                 "GeoTag5": {
-                    "url":"#",
+                    "url": "#",
                     "title": "FFM"
                 }
             },
             "socialSharing": {
-                "twitterLink" : "#",
-                "whatsappLink" : "#",
-                "facebookLink" : "#",
-                "mailtoLink" : "#"
+                "twitterLink": "#",
+                "whatsappLink": "#",
+                "facebookLink": "#",
+                "mailtoLink": "#"
             },
             "airdateDate": {
                 "htmlDateTime": "2022-10-31T19:30+0200",
@@ -79,10 +79,12 @@
                     "asPicture": false,
                     "asImage": true,
                     "fallback": "images/heiner-goebbels-102_v-1to1__medium.jpg",
-                    "sources": [{
-                        "sizes": "300px",
-                        "srcset": "images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"
-                    }]
+                    "sources": [
+                        {
+                            "sizes": "300px",
+                            "srcset": "images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"
+                        }
+                    ]
                 }
             },
             "duration": "14:35",
@@ -99,19 +101,24 @@
             "podcastChannel": {
                 "title": "hr2 Doppelkopf",
                 "url": "#ChannelURL",
-                "podcastHoster": [{
-                    "podcastHosterUrl": "https://podcasts.apple.com/podcast/hr2-doppelkopf/id212822590",
-                    "podcastHosterName": "ITunes"
-                }, {
-                    "podcastHosterUrl": "https://podcast.hr.de/hr2_doppelkopf/podcast.xml",
-                    "podcastHosterName": "RSS"
-                }, {
-                    "podcastHosterUrl": "https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2hyMl9kb3BwZWxrb3BmL3BvZGNhc3QueG1s?hl=de",
-                    "podcastHosterName": "Google Podcasts"
-                }, {
-                    "podcastHosterUrl": "https://www.ardaudiothek.de/episode/hr2-doppelkopf/ich-hoere-bei-jedem-geraeusch-gleich-die-tonhoehe-oder-komponist-und-theatermacher-heiner-goebbels-erneuert-das-musiktheater/hr2-kultur/12056783/",
-                    "podcastHosterName": "ARD Audiothek"
-                }]
+                "podcastHoster": [
+                    {
+                        "podcastHosterUrl": "https://podcasts.apple.com/podcast/hr2-doppelkopf/id212822590",
+                        "podcastHosterName": "ITunes"
+                    },
+                    {
+                        "podcastHosterUrl": "https://podcast.hr.de/hr2_doppelkopf/podcast.xml",
+                        "podcastHosterName": "RSS"
+                    },
+                    {
+                        "podcastHosterUrl": "https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2hyMl9kb3BwZWxrb3BmL3BvZGNhc3QueG1s?hl=de",
+                        "podcastHosterName": "Google Podcasts"
+                    },
+                    {
+                        "podcastHosterUrl": "https://www.ardaudiothek.de/episode/hr2-doppelkopf/ich-hoere-bei-jedem-geraeusch-gleich-die-tonhoehe-oder-komponist-und-theatermacher-heiner-goebbels-erneuert-das-musiktheater/hr2-kultur/12056783/",
+                        "podcastHosterName": "ARD Audiothek"
+                    }
+                ]
             },
             "audioUrl": "https://mp3podcasthr-a.akamaihd.net/mp3/podcast/der_tag_in_hessen/der_tag_in_hessen_20230816_98732247.mp3",
             "podcastDownloadUrl": "https://mp3podcasthr-a.akamaihd.net/mp3/podcast/der_tag_in_hessen/der_tag_in_hessen_20230816_98732247.mp3",
@@ -121,10 +128,12 @@
                     "asPicture": false,
                     "asImage": true,
                     "fallback": "images/heiner-goebbels-102_v-1to1__medium.jpg",
-                    "sources": [{
-                        "sizes": "300px",
-                        "srcset": "images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"
-                    }]
+                    "sources": [
+                        {
+                            "sizes": "300px",
+                            "srcset": "images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"
+                        }
+                    ]
                 }
             },
             "mediaMetadata": {
@@ -215,26 +224,31 @@
             "teaserLead": {
                 "isPodcast": true,
                 "toModel": {
-                    "audioElement": {
+                    "audioElementForVideoView": {
                         "isPodcast": true,
                         "ardPlayerConfig": {
                             "playerConfig": {
                                 "generic": {
                                     "isAutoplay": true,
                                     "imageTemplateConfig": {
-                                        "size": [{
-                                            "minWidth": 0,
-                                            "value": "480/270"
-                                        }, {
-                                            "minWidth": 480,
-                                            "value": "640/360"
-                                        }, {
-                                            "minWidth": 640,
-                                            "value": "960/540"
-                                        }, {
-                                            "minWidth": 960,
-                                            "value": "1920/1080"
-                                        }]
+                                        "size": [
+                                            {
+                                                "minWidth": 0,
+                                                "value": "480/270"
+                                            },
+                                            {
+                                                "minWidth": 480,
+                                                "value": "640/360"
+                                            },
+                                            {
+                                                "minWidth": 640,
+                                                "value": "960/540"
+                                            },
+                                            {
+                                                "minWidth": 960,
+                                                "value": "1920/1080"
+                                            }
+                                        ]
                                     }
                                 },
                                 "web": {
@@ -275,24 +289,32 @@
                                 }
                             },
                             "mediaCollection": {
-                                "streams": [{
-                                    "kind": "main",
-                                    "isAudioOnly": true,
-                                    "media": [{
-                                        "url": "https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3",
-                                        "mimeType": "audio/mp3",
-                                        "audios": [{
-                                            "kind": "standard",
-                                            "languageCode": "de"
-                                        }]
-                                    }]
-                                }],
+                                "streams": [
+                                    {
+                                        "kind": "main",
+                                        "isAudioOnly": true,
+                                        "media": [
+                                            {
+                                                "url": "https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3",
+                                                "mimeType": "audio/mp3",
+                                                "audios": [
+                                                    {
+                                                        "kind": "standard",
+                                                        "languageCode": "de"
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                ],
                                 "meta": {
                                     "durationSeconds": 3040,
-                                    "images": [{
-                                        "kind": "preview",
-                                        "url": "https://picsum.photos/id/101/{size}"
-                                    }],
+                                    "images": [
+                                        {
+                                            "kind": "preview",
+                                            "url": "https://picsum.photos/id/101/{size}"
+                                        }
+                                    ],
                                     "title": "Muslim Fashion. Mehr als ein Kopftuch.",
                                     "synopsis": "Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "
                                 },
@@ -312,19 +334,24 @@
                                 "generic": {
                                     "isAutoplay": true,
                                     "imageTemplateConfig": {
-                                        "size": [{
-                                            "minWidth": 0,
-                                            "value": "480/270"
-                                        }, {
-                                            "minWidth": 480,
-                                            "value": "640/360"
-                                        }, {
-                                            "minWidth": 640,
-                                            "value": "960/540"
-                                        }, {
-                                            "minWidth": 960,
-                                            "value": "1920/1080"
-                                        }]
+                                        "size": [
+                                            {
+                                                "minWidth": 0,
+                                                "value": "480/270"
+                                            },
+                                            {
+                                                "minWidth": 480,
+                                                "value": "640/360"
+                                            },
+                                            {
+                                                "minWidth": 640,
+                                                "value": "960/540"
+                                            },
+                                            {
+                                                "minWidth": 960,
+                                                "value": "1920/1080"
+                                            }
+                                        ]
                                     }
                                 },
                                 "web": {
@@ -365,24 +392,32 @@
                                 }
                             },
                             "mediaCollection": {
-                                "streams": [{
-                                    "kind": "main",
-                                    "isAudioOnly": true,
-                                    "media": [{
-                                        "url": "https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3",
-                                        "mimeType": "audio/mp3",
-                                        "audios": [{
-                                            "kind": "standard",
-                                            "languageCode": "de"
-                                        }]
-                                    }]
-                                }],
+                                "streams": [
+                                    {
+                                        "kind": "main",
+                                        "isAudioOnly": true,
+                                        "media": [
+                                            {
+                                                "url": "https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3",
+                                                "mimeType": "audio/mp3",
+                                                "audios": [
+                                                    {
+                                                        "kind": "standard",
+                                                        "languageCode": "de"
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                ],
                                 "meta": {
                                     "durationSeconds": 3040,
-                                    "images": [{
-                                        "kind": "preview",
-                                        "url": "https://picsum.photos/id/101/{size}"
-                                    }],
+                                    "images": [
+                                        {
+                                            "kind": "preview",
+                                            "url": "https://picsum.photos/id/101/{size}"
+                                        }
+                                    ],
                                     "title": "Muslim Fashion. Mehr als ein Kopftuch.",
                                     "synopsis": "Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "
                                 },
@@ -422,4 +457,4 @@
             }
         }
     }
-}
+}

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

@@ -1,13 +1,13 @@
 {
-
     "@->jsoninclude": "page/story/story.inc.json",
     "@->overrides": [
         {
             "@->contentpath": "teaseritemDS",
             "@->value": {
+                "isVideo": true,
                 "isLivestream": true,
                 "showFullSize": {
-                    "isTrue": false
+                    "isTrue": true
                 },
                 "isSsi": true,
                 "label": {
@@ -24,25 +24,23 @@
                             "@->jsoninclude": "video/videos.inc.json",
                             "@->contentpath": "video-livestream-hr-fernsehen"
                         }
-                        },
+                    },
                     "mediaBacklinkToStoryTeaser": {
                         "link": {
                             "url": "/livestreamseite",
                             "isTargetBlank": false
                         },
-                        "content": {
-                            "readMoreScreenreader": "zum hr3.de Livestream",
-                            "title": "Eröffnung der Frankfurter Buchmesse",
-                            "isForeignBrand": false,
-                            "readMore": "zum hr3.de Livestreamseite"
-                        },
+                        "readMoreScreenreader": "zum hr3.de Livestream",
+                        "title": "Eröffnung der Frankfurter Buchmesse",
+                        "isForeignBrand": false,
+                        "readMore": "zum hr3.de Livestreamseite",
                         "hasIcon": true,
                         "iconName": "extern"
                     }
                 },
                 "teaseritem": {
                     "@->jsoninclude": "teaser/teaser_images.inc.json",
-                    "@->contentpath": "copytext_image_50",
+                    "@->contentpath": "copytext_image_100",
                     "@->replaceToken": [
                         {
                             "@->token": "image",
@@ -53,7 +51,7 @@
 
                 "teaserImage": {
                     "@->jsoninclude": "teaser/teaser_images.inc.json",
-                    "@->contentpath": "copytext_image_50",
+                    "@->contentpath": "copytext_image_100",
                     "@->replaceToken": [
                         {
                             "@->token": "image",
@@ -63,5 +61,5 @@
                 }
             }
         }
-    ]    
-}
+    ]
+}

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

@@ -1,76 +1,76 @@
 {
-
     "@->jsoninclude": "page/story/story.inc.json",
     "@->overrides": [
         {
             "@->contentpath": "teaseritemDS",
             "@->value": {
-                    "isVideo": true,
-                    "showFullSize": {
-                        "isTrue": true
-                    },
-                    "label": {
-                        "type": "video",
-                        "loca": "label_video",
-                        "byline": {
-                            "bylineText": "03:20 Min."
-                        }
-                    },
-                    "copyright": "hessenschau",
-                    "airdateDate": {
-                        "htmlDateTime": "2022-10-31T19:30+0200",
-                        "htmlDate": "31.10.2022",
-                        "date": "31.10.22",
-                        "dateSeparatorTime": "31.10.22, 19:30"
-                    },
-                    "toModel": {
-                        "videoElement": {
-                            "ardPlayerConfig": {
-                                "@->jsoninclude": "video/videos.inc.json",
-                                "@->contentpath": "video-1"
-                            },
-                            "ardPlayerJsonConfig": {
-                                "@->jsoninclude": "video/videos.inc.json",
-                                "@->contentpath": "video-1"
-                            }
+                "isVideo": true,
+                "isVideoOnDemand": "true",
+                "showAirdate": true,
+                "showFullSize": {
+                    "isTrue": true
+                },
+                "label": {
+                    "type": "video",
+                    "loca": "label_video",
+                    "byline": {
+                        "bylineText": "03:20 Min."
+                    }
+                },
+                "copyright": "hessenschau",
+                "airdateDate": {
+                    "htmlDateTime": "2022-10-31T19:30+0200",
+                    "htmlDate": "31.10.2022",
+                    "date": "31.10.22",
+                    "dateSeparatorTime": "31.10.22, 19:30"
+                },
+                "toModel": {
+                    "videoElement": {
+                        "ardPlayerConfig": {
+                            "@->jsoninclude": "video/videos.inc.json",
+                            "@->contentpath": "video-1"
                         },
-                        "mediaBacklinkToStoryTeaser": {
-                            "link": {
-                                "url": "/videoseite",
-                                "isTargetBlank": false
-                            },
-                            "content": {
-                                "readMoreScreenreader": "zum hr3.de Video",
-                                "title": "Musik macht deinen Tag",
-                                "isForeignBrand": true,
-                                "readMore": "zum hr3.de Videoseite"
-                            },
-                            "hasIcon": true,
-                            "iconName": "extern"
+                        "ardPlayerJsonConfig": {
+                            "@->jsoninclude": "video/videos.inc.json",
+                            "@->contentpath": "video-1"
                         }
                     },
-                    "teaseritem": {
-                        "@->jsoninclude": "teaser/teaser_images.inc.json",
-                        "@->contentpath": "copytext_image_100",
-                        "@->replaceToken": [
-                            {
-                                "@->token": "image",
-                                "@->value": "lehrerin-ukraine-104"
-                            }
-                        ]
-                    },
-    
-                    "teaserImage": {
-                        "@->jsoninclude": "teaser/teaser_images.inc.json",
-                        "@->contentpath": "copytext_image_100",
-                        "@->replaceToken": [
-                            {
-                                "@->token": "image",
-                                "@->value": "lehrerin-ukraine-104"
-                            }
-                        ]
+                    "mediaBacklinkToStoryTeaser": {
+                        "link": {
+                            "url": "/videoseite",
+                            "isTargetBlank": false
+                        },
+                        "readMoreScreenreader": "zum hr3.de Video",
+                        "title": "Musik macht deinen Tag",
+                        "isForeignBrand": true,
+                        "readMore": "zur hr3.de Video-Einzelseite",
+
+                        "hasIcon": true,
+                        "iconName": "extern"
                     }
+                },
+                "teaseritem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_100",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                },
+
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_100",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                }
             }
         }
-    ]    
-}
+    ]
+}

package/src/assets/fixtures/teaser/teaser_lead.inc.json

@@ -21,7 +21,7 @@
         "avDocument": {
             "isAudio": true,
             "toModel": {
-                "audioElement": {
+                "audioElementForVideoView": {
                     "isPodcast": false,
                     "ardPlayerConfig": {
                         "@->jsoninclude": "audio/audios.inc.json",
@@ -40,7 +40,7 @@
         "avDocument": {
             "isAudioEventLivestream": true,
             "toModel": {
-                "audioLivestreamElement": {
+                "audioLivestreamElementForVideoView": {
                     "ardPlayerConfig": {
                         "@->jsoninclude": "audio/audios.inc.json",
                         "@->contentpath": "audio-event-livestream"
@@ -58,7 +58,7 @@
         "avDocument": {
             "isPodcast": true,
             "toModel": {
-                "audioElement": {
+                "audioElementForVideoView": {
                     "isPodcast": true,
                     "ardPlayerConfig": {
                         "@->jsoninclude": "audio/audios.inc.json",

package/src/assets/fixtures/teaser/teasers.inc.json

@@ -1549,7 +1549,7 @@
                 "teaserLead": {
                     "isPodcast": true,
                     "toModel": {
-                        "audioElement": {
+                        "audioElementForVideoView": {
                             "isPodcast": true,
                             "ardPlayerConfig": {
                                 "@->jsoninclude": "audio/audios.inc.json",