hr-design-system-handlebars 1.69.3 → 1.70.1

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

@@ -76,6 +76,83 @@
         "teaserSize": "100",
         "realTeaserSize": "100"
     },
+    "video-2": {
+        "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" }
+                    ]
+                }
+            },
+            "web": {
+                "baseUrl": "./vendor/ardplayer/",
+                "isForcedAutoplay": true,
+                "isForcedVideoView": true
+            },
+            "pluginData": {
+                "trackingAti@all": {
+                    "isEnabled": false
+                },
+                "trackingAgf@all": {
+                    "isEnabled": false
+                }
+            }
+        },
+        "mediaCollection": {
+            "streams": [
+                {
+                    "kind": "main",
+                    "videoLanguageCode": "de",
+                    "media": [
+                        {
+                            "url": "https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8",
+                            "mimeType": "application/vnd.apple.mpegurl",
+                            "isAdaptiveQualitySelectable": true,
+                            "audios": [{ "kind": "standard", "languageCode": "de" }]
+                        }
+                    ]
+                }
+            ],
+            "subTitles": [
+                {
+                    "kind": "normal",
+                    "languageCode": "de",
+                    "sources": [
+                        {
+                            "kind": "webvtt",
+                            "url": "https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"
+                        }
+                    ]
+                }
+            ],
+            "meta": {
+                "durationSeconds": 1644,
+                "images": [
+                    {
+                        "kind": "preview",
+                        "url": "https://picsum.photos/id/101/{size}"
+                    }
+                ],
+                "title": "Auszubildende dringend gesucht | hessenschau vom 17.03.2022",
+                "synopsis": "Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"
+            },
+            "pluginData": {},
+            "geoBlocked": false
+        },
+        "playerId": "8424",
+        "type": "videoOndemand",
+        "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css",
+        "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js",
+        "isAutoplay": true,
+        "isPlayerDebug": true,
+        "teaserSize": "100",
+        "realTeaserSize": "100"
+    },
     "video-livestream-hr-fernsehen": {
         "playerConfig": {
             "generic": {

package/src/assets/tailwind.css

@@ -290,30 +290,30 @@
         --ardplayer-color-primary-base: theme('colors.blue.science.hex');
         --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.blue.science.rgb') / 70%);
         --ardplayer-color-primary-dark-base: theme('colors.blue.accented');
-        --ardplayer-color-tertiary-base: theme('colors.blue.congress');
+        --ardplayer-color-tertiary-base: theme('colors.blue.science.hex');
         --ardplayer-color-lightest: theme('colors.white.DEFAULT');
 
         .ardplayer-controlbar {
             .ardplayer-controlbar-hover {
-                --ardplayer-color-lightest: theme('colors.blue.congress');
+                --ardplayer-color-lightest: theme('colors.blue.science.hex');
                 color: var(--ardplayer-color-lightest);
             }
         }
 
         .ardplayer-bottom-sheet-container {
-            --ardplayer-color-lightest: theme('colors.blue.congress');
+            --ardplayer-color-lightest: theme('colors.blue.science.hex');
 
             .ardplayer-option:hover {
                 color: theme('colors.white.DEFAULT');
                 .ardplayer-icon {
-                    color: theme('colors.blue.congress');
+                    color: theme('colors.blue.science.hex');
                 }
             }
         }
     }
 
     .ardplayer.ardplayer-state-audio {
-        --ardplayer-color-lightest: theme('colors.blue.congress');
+        --ardplayer-color-lightest: theme('colors.blue.science.hex');
     }
 }
 

package/src/stories/views/components/base/a11y/ariaLabelText.hbs

@@ -0,0 +1,23 @@
+{{!--@
+Creates a text element that is only relevant for screenreaders. It will not be visible at all.
+
+```hbs
+{{> base/a11y/hiddenText
+    _text="..."
+    _locaTag="..."
+    }}
+```
+
+`_text`     The text for the screen reader.<br>
+`_locaTag`  The loca tag for the text for the screen reader.<br>
+
+--}}
+<span aria-label="
+    {{~#if _text ~}}
+        {{~_text~}}
+    {{~else~}}
+        {{~#with _locaTag ~}}
+            {{~loca this ~}}
+        {{~/with~}}
+    {{~/if~}}
+    "></span>

package/src/stories/views/components/button/utilities/button_on_image_classes.hbs

@@ -1,4 +1,8 @@
-absolute bottom-0 right-0
+absolute 
+{{~#unless _isCopyText }}
+  bottom-0 right-0
+{{~/unless}}
+
 {{~#switch _teaserType~}}
     {{~#case 'standard'~}}
         {{~#if _isMobile1to1~}}

package/src/stories/views/components/content/copytext/components/media/media_figure.hbs

@@ -0,0 +1,32 @@
+<figure class="relative ar-16-9 my-6 sm480:my-7 {{_addClass}}" x-data="{ avStart: false }">
+    {{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
+    {{#unless _voting-option}}
+        <figcaption class="py-3 mx-5 sm:mx-0 sm:py-4 border-t-[3px] border-gray-boulder">
+            {{#with this.label}}
+                {{#> components/label/label_group}}
+                    {{> components/label/label _type=this.type _text=(loca this.loca) }}
+                    {{> components/label/label_byline _css="ml-2"}}
+                    {{#with ../this}}{{> components/content/copytext/components/media/media_figure_byline}}{{/with~}}
+                {{/components/label/label_group}}
+            {{/with~}}
+            {{#with this.toModel.mediaBacklinkToStoryTeaser}}
+                {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"}}
+                    {{> components/content/copytext/components/media/media_figure_headline}}
+                {{/components/base/link}}
+            {{/with}}
+        </figcaption>
+    {{/unless}}
+    {{#if this.isVideo}}
+        {{#if _isLead}}
+            {{~> components/content/copytext/components/video/video_element _isCopyText=true _teaser=this _isTeaser=true  _fullSize=_fullSize _addClassVideo="ar__content" _mediaMetadata=true _noDelay=true ~}}
+        {{else}}
+            {{~> components/content/copytext/components/video/video_element _isCopyText=true _teaser=this _isTeaser=true _fullSize=_fullSize _addClassVideo="ar__content" _mediaMetadata=true~}}
+        {{/if}}
+    {{/if}}
+    {{#unless _voting-option}}
+        {{#with this.teaseritem}}
+            {{~> components/content/copytext/components/image/figcaption  _cssClassCaption="mx-5 sm:mx-0"~}}
+        {{/with}}
+    {{/unless}}
+    {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}
+</figure>

package/src/stories/views/components/content/copytext/components/media/media_figure_byline.hbs

@@ -0,0 +1,35 @@
+<span class='text-xs text-inherit font-headingSerif{{#if _css}} {{_css}}{{/if}}'>
+    <span class="mx-1">|</span>
+    {{~#if this.isAudio}}
+        {{~#with this.audioAuthor}}
+            {{this}}{{#if ../this.airdateDate }}<span class="mx-1">|</span>{{/if}}
+        {{/with}}
+        {{~#with this.airdateDate ~}}
+            <time datetime="{{this.htmlDate}}">{{this.date}}</time>
+        {{~/with~}}
+    {{/if}}
+
+    {{~#if this.isPodcastEpisode}}
+        {{~#with this.audioAuthor}}
+            {{this}}{{#if ../this.airdateDate }}<span class="mx-1">|</span>{{/if}}
+        {{/with}}
+        {{~#with this.airdateDate ~}}
+            <time datetime="{{this.htmlDate}}">{{this.date}}</time>
+        {{~/with~}}
+    {{/if}}
+
+    {{~#if this.isVideo}}
+        {{~#with this.copyright}}
+            {{this}}{{#if ../this.airdateDate }} <span class="mx-1">|</span>{{/if}}
+        {{/with}}
+
+        {{~#with this.airdateDate ~}}
+            {{~#if ../this.airdateWithoutTime ~}}
+                <time datetime="{{this.htmlDate}}">{{this.date}}</time>
+            {{else}}
+                <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at"
+                                                                this.dateSeparatorTime }}</time>
+            {{~/if~}}
+        {{~/with~}}
+    {{/if}}
+</span>

package/src/stories/views/components/content/copytext/components/media/media_figure_headline.hbs

@@ -0,0 +1,14 @@
+<h3 class="mt-1">
+    {{> components/base/a11y/ariaLabelText _text=this.content.readMoreScreenreader }}
+    <span class="text-lg sm480:text-xl font-headingSerif dark:text-text-dark">
+        {{this.content.title}}
+    </span>
+    {{~#if this.content.isForeignBrand}}
+        <span aria-hidden=true class="ml-4">
+            [{{this.content.readMore}}
+            {{~#if this.hasIcon}}
+                {{~> components/base/image/icon _icon=this.iconName _iconmap="icons" _addClass="inline -mt-0.5 ml-1 w-5 h-5 fill-current"~}}
+            {{/if~}}]
+        </span>
+    {{/if~}}
+</h3>

package/src/stories/views/components/content/copytext/components/video/video.hbs

@@ -0,0 +1,5 @@
+{{#if this.showFullSize.isTrue }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+{{else}}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+{{/if}}

package/src/stories/views/components/content/copytext/components/video/video_element.hbs

@@ -0,0 +1,15 @@
+{{> components/content/copytext/components/video/video_element_ondemand this.toModel.videoElement 
+_isSinglePage=_isSinglePage 
+_isCopyText=_isCopyText 
+_isTeaser=_isTeaser 
+_teaser=_teaser 
+_poster=_poster 
+_geotag=_geotag 
+_hideGeotag=_hideGeotag 
+_posterImageVariant=_posterImageVariant 
+_posterImageType=_posterImageType 
+_noDelay=_noDelay
+_cypressHook="js-video-ondemand"
+_mediaButtonIcon="play_button"
+_mediaButtonLabel="Video" }}
+

package/src/stories/views/components/content/copytext/components/video/video_element_ondemand.hbs

@@ -0,0 +1,23 @@
+<div x-show="avStart" x-cloak id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full {{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isTeaser}} z-20{{/if}} js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream cy-mediaplayer" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
+</div>
+{{#if _isTeaser}}
+    <div class="relative flex items-center justify-center ar-16-9" x-show="!avStart" >
+        {{#unless _hideGeotag}}
+            {{~#with _geotag}}
+                {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1}}
+            {{/with~}}
+        {{/unless}}
+        {{#with _teaser}}
+            {{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1"{{#if (isUserConsentNeeded this.link.url)}} class="js-user-consent-needed"{{/if}}>{{/if}}
+                {{~> 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=(appendToDefault _addClassImg-adjust_context "ar__content ") _noDelay=this.dontLazyload ~}}                             
+            {{#if this.isTickerTeaser}}</a>
+            {{else}}
+            {{~> components/base/image/responsive_image this.content.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg=(appendToDefault _addClassImg-adjust_context "ar__content ") _noDelay=this.dontLazyload ~}}                             
+            {{/if}}
+        {{/with}}
+
+        {{#with this}}
+            {{> components/mediaplayer/mediaplayer_button _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}   
+        {{/with}} 
+    </div>
+{{/if}}

package/src/stories/views/components/content/copytext/copytext.hbs

@@ -43,7 +43,7 @@
                     {{> components/content/copytext/components/podcastepisode }}
                 {{/if~}}
                 {{~#if this.isVideo}}
-                    {{> components/content/copytext/components/video }}
+                    {{> components/content/copytext/components/video/video }}
                 {{/if~}}
                 {{~#if this.isLivestream}}
                     {{> components/content/copytext/components/livestream }}

package/src/stories/views/components/content/copytext/copytext.stories.js

@@ -11,6 +11,7 @@ import copytext_infobox_json from './fixtures/copytext_infobox.json'
 import copytext_downloadbox_json from './fixtures/copytext_downloadbox.json'
 import copytext_filedownload_json from './fixtures/copytext_filedownload.json'
 import copytext_externalservice_json from './fixtures/copytext_externalservice.json'
+import copytext_video_json from './fixtures/copytext_video.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -101,3 +102,9 @@ export const WithAdditionalInfo = {
     name: 'Zusatzinfo',
     args: copytext_additionalInfo_json,
 }
+
+export const WithVideo = {
+    render: Template.bind({}),
+    name: 'Video',
+    args: copytext_video_json,
+}

package/src/stories/views/components/content/copytext/fixtures/copytext_video.json

@@ -0,0 +1 @@
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Video"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"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":{"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"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"},"ardPlayerJsonConfig":{"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"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"}},"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"}},"teaseritem":{"isImage":true,"showFullSize":{"isTrue":true},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}},"content":{"teaserImage":{"isImage":true,"showFullSize":{"isTrue":true},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isVideo":true,"showFullSize":{"isTrue":false},"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":{"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"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8424","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"isPlayerDebug":true,"teaserSize":"100","realTeaserSize":"100"},"ardPlayerJsonConfig":{"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"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8424","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"isPlayerDebug":true,"teaserSize":"100","realTeaserSize":"100"}},"mediaBacklinkToStoryTeaser":{"link":{"url":"/videoseite","isTargetBlank":false},"content":{"readMoreScreenreader":"zum hr3.de Video","title":"Musik macht deinen Tag","isForeignBrand":false,"readMore":"zum hr3.de Videoseite"},"hasIcon":true,"iconName":"extern"}},"teaseritem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}},"content":{"teaserImage":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}

package/src/stories/views/components/label/label.hbs

@@ -2,8 +2,8 @@
     class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading{{#if _css}} {{_css}}{{/if}} 
         {{inline-switch
             _type
-            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic"]'
-            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment"]'
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia"]'
         }}'
 >
     {{_text}}

package/src/stories/views/components/mediaplayer/fixtures/mediaplayer.json

@@ -1 +1 @@
-{"video":{"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"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":false,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":false,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"}},"video_livestream":{"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hrhlsde.akamaized.net/hls/live/2024526/hrhlsde/index.m3u8","mimeType":"application/vnd.apple.mpegurl","maxHResolutionPx":8000,"isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Jetzt hr-fernsehen live sehen!"},"pluginData":{},"geoBlocked":false},"playerId":"6819","type":"videoLivestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","teaserSize":"100","realTeaserSize":"100","isAutoplay":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedVideoView":true,"isForcedAutoplay":false},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hrhlsde.akamaized.net/hls/live/2024526/hrhlsde/index.m3u8","mimeType":"application/vnd.apple.mpegurl","maxHResolutionPx":8000,"isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Jetzt hr-fernsehen live sehen!"},"pluginData":{},"geoBlocked":false},"playerId":"6819","type":"videoLivestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","teaserSize":"100","realTeaserSize":"100","isAutoplay":false}}}
+{"video":{"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"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":false,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":false,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"}},"video_livestream":{"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hrhlsde.akamaized.net/hls/live/2024526/hrhlsde/index.m3u8","mimeType":"application/vnd.apple.mpegurl","maxHResolutionPx":8000,"isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Jetzt hr-fernsehen live sehen!"},"pluginData":{},"geoBlocked":false},"playerId":"6819","type":"videoLivestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","teaserSize":"100","realTeaserSize":"100","isAutoplay":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedVideoView":true,"isForcedAutoplay":false},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hrhlsde.akamaized.net/hls/live/2024526/hrhlsde/index.m3u8","mimeType":"application/vnd.apple.mpegurl","maxHResolutionPx":8000,"isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Jetzt hr-fernsehen live sehen!"},"pluginData":{},"geoBlocked":false},"playerId":"6819","type":"videoLivestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","teaserSize":"100","realTeaserSize":"100","isAutoplay":false}},"audio":{"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"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"teaserSize":"100","realTeaserSize":"100"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":false,"isForcedVideoView":false},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":false,"teaserSize":"100","realTeaserSize":"100"}},"audio_event_livestream":{"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hlshr3.akamaized.net/hls/live/2016536/hr3/master.m3u8","mimeType":"application/vnd.apple.mpegurl","audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Test Audio Event","synopsis":"Das Sicherheitspersonal hat am frühen Dienstagmorgen seinen Warnstreik am Frankfurter Flughafen gestartet. Reisende ab Frankfurt können sich den Weg zum Airport direkt sparen. Ein spezielles Team kümmert sich um Gestrandete."},"pluginData":{},"geoBlocked":false},"playerId":"1694","type":"audioLivestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":false,"isForcedVideoView":false},"pluginData":{"trackingAti@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hlshr3.akamaized.net/hls/live/2016536/hr3/master.m3u8","mimeType":"application/vnd.apple.mpegurl","audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Test Audio Event","synopsis":"Das Sicherheitspersonal hat am frühen Dienstagmorgen seinen Warnstreik am Frankfurter Flughafen gestartet. Reisende ab Frankfurt können sich den Weg zum Airport direkt sparen. Ein spezielles Team kümmert sich um Gestrandete."},"pluginData":{},"geoBlocked":false},"playerId":"1694","type":"audioLivestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":false,"teaserSize":"50","realTeaserSize":"50"}}}

package/src/stories/views/components/mediaplayer/media_player.hbs

@@ -1,20 +1,2 @@
-<div{{#if _isTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full {{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
+<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#unless _isAudioView}}ar-16-9 {{/unless}}h-full {{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
 </div>
-{{#if _isTeaser}}
-    <div class="relative {{_aspectRatio}}" x-show="!avStart" >
-        {{#unless _hideGeotag}}
-            {{~#with _geotag}}
-                {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1}}
-            {{/with~}}
-        {{/unless}}
-        {{#with _teaser}}
-            {{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1"{{#if (isUserConsentNeeded this.link.url)}} class="js-user-consent-needed"{{/if}}>{{/if}}
-                {{~> 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=(appendToDefault _addClassImg-adjust_context "ar__content ") _noDelay=this.dontLazyload ~}}                             
-            {{#if this.isTickerTeaser}}</a>{{/if}}
-        {{/with}}
-
-        {{#with this}}
-            {{> components/mediaplayer/mediaplayer_button _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}   
-        {{/with}} 
-    </div>
-{{/if}}

package/src/stories/views/components/mediaplayer/mediaplayer.stories.js

@@ -1,5 +1,5 @@
 import { userEvent, within, waitFor } from '@storybook/testing-library';
-import videoJson from 'components/mediaplayer/fixtures/mediaplayer.json'
+import mediaplayerJson from 'components/mediaplayer/fixtures/mediaplayer.json'
 
 import mediaPlayer from 'components/mediaplayer/media_player.hbs'
 import { delay } from 'underscore';
@@ -45,13 +45,13 @@ export default {
 export const Videoplayer = {
     render: Template.bind({}),
     name: 'Videoplayer',
-    args: { "_isTeaser": false, ...videoJson.video },
+    args: { "_isTeaser": false, ...mediaplayerJson.video },
 }
 
 export const VideoplayerSettings = {
     render: Template.bind({}),
     name: 'Videoplayer Einstellungen',
-    args: { "_isTeaser": false, ...videoJson.video },
+    args: { "_isTeaser": false, ...mediaplayerJson.video },
     play: async ({ canvasElement }) => {
         let canvas = within(canvasElement);
         await userEvent.click(await canvas.findByTitle('Wiedergabe [Leertaste]'));
@@ -64,5 +64,17 @@ export const VideoplayerSettings = {
 export const VideoplayerLive = {
     render: Template.bind({}),
     name: 'Videoplayer Livestream',
-    args: { "_isTeaser": false, ...videoJson.video_livestream },
+    args: { "_isTeaser": false, ...mediaplayerJson.video_livestream },
+}
+
+export const Audioplayer = {
+    render: Template.bind({}),
+    name: 'Audioplayer',
+    args: { "_isTeaser": false, _isAudioView: true, ...mediaplayerJson.audio },
+}
+
+export const AudioplayerLivestream = {
+    render: Template.bind({}),
+    name: 'Audioplayer Livestream',
+    args: { "_isTeaser": false, _isAudioView: true, ...mediaplayerJson.audio_event_livestream },
 }

package/src/stories/views/components/teaser/components/teaser_av_consumption.hbs

@@ -1,7 +1,10 @@
 {{#with this.teaserLead.avDocument}}
      {{~#if this.isVideo ~}}
           {{#with this.toModel.videoElement}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-ondemand-player" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}
+               {{#with ../../this}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=_aspectRatio-adjust_context}}
+               {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -9,7 +12,10 @@
      {{~/if~}}
      {{~#if this.isAudio ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}                  
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}                  
+               {{#with ../../this}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _aspectRatio=_aspectRatio-adjust_context}}
+               {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -17,7 +23,10 @@
      {{~/if~}}
      {{~#if this.isPodcast ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
+               {{#with ../../this}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _aspectRatio=_aspectRatio-adjust_context}}
+               {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -25,7 +34,10 @@
      {{~/if~}}
      {{~#if this.isAudioEventLivestream ~}}
           {{#with this.toModel.audioLivestreamElement}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-livestream-player" _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 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-livestream-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
+               {{#with ../../this}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=_aspectRatio-adjust_context}}
+               {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -33,7 +45,10 @@
      {{~/if~}}
      {{~#if this.isLivestream ~}}
           {{#with this.toModel.videoLivestreamElement}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-livestream-player" _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 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-livestream-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
+               {{#with ../../this}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=_aspectRatio-adjust_context}}
+               {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}

package/src/stories/views/components/teaser/components/teaser_media_player.hbs

@@ -0,0 +1,15 @@
+<div class="relative {{_aspectRatio}}" x-show="!avStart" >
+    {{#unless this.hideGeotag}}
+        {{~#with this.geotag}}
+            {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../this.teaserSize _isMobile1to1=../this.isMobile1to1}}
+        {{/with~}}
+    {{/unless}}
+
+    {{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1"{{#if (isUserConsentNeeded this.link.url)}} class="js-user-consent-needed"{{/if}}>{{/if}}
+        {{~> 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=(appendToDefault _addClassImg-adjust_context "ar__content ") _noDelay=this.dontLazyload ~}}                             
+    {{#if this.isTickerTeaser}}</a>{{/if}}
+
+    {{#with this}}
+        {{> components/mediaplayer/mediaplayer_button _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}   
+    {{/with}} 
+</div>

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

@@ -1,9 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Video-component</div>
-{{~else~}}
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _fullSize=true _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _fullSize=false _addClass="copytext__box dontPrint" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
-    {{/if}}
-{{~/if~}}

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

@@ -1,9 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Video-component</div>
-{{~else~}}
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _fullSize=true _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _fullSize=false _addClass="copytext__box dontPrint" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
-    {{/if}}
-{{~/if~}}