hr-design-system-handlebars 1.75.6 → 1.77.0

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",

package/src/stories/conventions-and-datastructure.mdx

@@ -236,7 +236,7 @@ Sollen an Subkomponenten, die in Partial-Blocks und/oder Inline-Partials aufgeru
 Dies ist leider notwendig, da [Handlebars.js](https://handlebarsjs.com) und [Handlebars.java](https://github.com/jknack/handlebars.java)
 innerhalb von Partial-Blocks und Inline-Partials die Datenkontexte anders auflösen. Der Wert des Parameters `_css` kann in
 Handlebars.js direkt, in Handlebars.java aber nur ausgelesen werden, wenn mittels `../../_css` zwei Ebenen nach oben gegangen wird.
-Durch setzen des Postfixes `-adjust_context` können mittels eines Gulp-Skriptes diese Vatriablen in Komponenten herausgefiltert werden
+Durch setzen des Postfixes `-adjust_context` können mittels eines Gulp-Skriptes diese Variablen in Komponenten herausgefiltert werden
 und je nachdem wofür gerade gebaut wird der Kontext automatisiert angepasst werden oder nicht. Hierzu ein kurzes Beispiel.
 
 ```handlebars
@@ -276,6 +276,43 @@ der Wert des Parameters korrekt ausgelesen werden kann.
 {{/with}}
 ```
 
+#### Besonderheiten bei Model Variablen in Partial-Blocks
+Auch bei Variablen, die direkt aus der Model Schicht in Partial-Blocks genutzt werden sollen, lassen sich Unterschiede zwischen Handlebars.js und
+Handlebars.java feststellen. Diese treten auf, wenn innerhalb des Partial-Blocks Kontext-Wechsel nötig werden.
+
+```handlebars
+{{~#> components/content/copytext/components/image/collapsible_caption this.teaseritem _cssClassCaption="mx-5 sm:mx-0"}}
+    {{#unless ../this.isAudio}}
+        {{~> components/content/copytext/components/image/image_caption_text}}
+    {{/unless}}
+    {{~> components/content/copytext/components/image/image_copyright}}
+    {{#if ../this.isAudio~}}
+        <span class="mx-1">|</span>
+        {{#with ../this.toModel.mediaBacklinkToStoryTeaser}}
+            {{~#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"~}}
+                <span>
+                    {{~this.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>
+            {{/components/base/link}}
+        {{/with}}
+    {{/if}}
+{{~/components/content/copytext/components/image/collapsible_caption}}
+```
+Das Beispiel zeigt die Verwendung der Komponente `components/content/copytext/components/image/collapsible_caption`. Um z.B. auf den Inhalt der 
+Variablen `this.isAudio` zugreifen zu können, muss in Handlebars.js  mit `../this.isAudio` im Kontext eine Ebene zurückgegangen werden. Damit das
+ganze in Handlebars.java exakt gleich funktioniert, muss mit `../../this.isAudio` hingegen im Kontext um zwei Ebenen zurückgegangen werden. Zwischen
+Handlebars.js und Handlebars.java besteht ein Unterschied von einer Kontext-Ebene. Um diesen Unterschied auszugleichen, muss, wie im vorigen Kapitel bei 
+Komponenten-Parametern gezeigt, an den Namen der Variablen das Postfix `-adjust_context` angefügt werden. Beim Build wird bei diesen Variablen eine 
+zusätzliche Ebene im Kontext nach oben gegangen. Aus `../this.isAudio` in Handlebars.js wird damit in Handlebars.java `../../this.isAudio`. 
+
+Das Anhängen des Postfixes `-adjust_context` ist nur nötig, wenn in Handlebars.js bereits mindestens eine Ebene zurückgegangen werden muss. Ist in 
+Handlebars.ja keine Kontextwechsel nötig, dann muss auch in Handlebars.java keiner erfolgen.
+
+
+
 ### JSON
 
 Im Designsystem werden Testdaten für Komponenten mittels JSON-Dateien bereitgestellt. Auch diese Dateinamen werden in Snake-Case Notation

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

@@ -18,7 +18,7 @@
                 Sendung:
                 {{#if this.link}}
                     {{#>components/base/link _link=this.link _css="text-link hover:underline"~}}
-                        <span>{{~ ../this.programLabel ~}}</span>{{/components/base/link~}}{{~#if this.date~}},
+                        <span>{{~ this.programLabel ~}}</span>{{/components/base/link~}}{{~#if this.date~}},
                         <span>
                                 <time datetime="{{#if this.displayWithTime}}{{this.date.htmlDateTime}}{{else}}{{this.date.date}}{{/if}}"
                                       class="{{#if _isArticle}}{{else}}{{/if}} ">

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

@@ -1,9 +1,5 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Audio-component</div>
-{{~else~}}    
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{/if}}
-{{~/if~}} 
+{{#if this.showFullSize.isTrue }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+{{else}}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 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" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+{{/if}}

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

@@ -1,9 +1,5 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Audioevent-Livestream-component</div>
-{{~else~}}
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{/if}}
-{{~/if~}}
+{{#if this.showFullSize.isTrue }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+{{else}}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 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" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+{{/if}}

package/src/stories/views/components/content/copytext/components/image/{figcaption.hbs → collapsible_caption.hbs}

@@ -12,17 +12,8 @@
             }"
             @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
     <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
-    {{#if _fullSize}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
-        {{#if this.caption}}
-            {{~#unless _hideCaption~}}
-                <span class="pr-3">
-                    {{this.caption}} 
-                </span>
-            {{~/unless~}}
-        {{/if}}
-        <span class="text-gray-scorpion dark:text-text-dark">
-            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
-        </span>
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{> @partial-block }}
     </div>
     <template x-if="truncated">
         <button x-cloak 

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

@@ -16,6 +16,9 @@
         {{/if}}
     {{/if}}
     {{#unless _voting-option}}
-        {{~> components/content/copytext/components/image/figcaption _fullSize=this.showFullSize.isTrue _cssClassCaption=_cssClassCaption~}}
+        {{~#> components/content/copytext/components/image/collapsible_caption _cssClassCaption=_cssClassCaption~}}
+                {{~> components/content/copytext/components/image/image_caption_text}}
+                {{~> components/content/copytext/components/image/image_copyright}}
+        {{/components/content/copytext/components/image/collapsible_caption }}
     {{/unless}}
 </figure>

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

@@ -0,0 +1,3 @@
+<span class="pr-3">
+    {{this.caption}} 
+</span>

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

@@ -0,0 +1,3 @@
+<span class="text-gray-scorpion dark:text-text-dark">
+    {{~loca "figures_copyright"}} {{{this.copyrightWithLinks}}} 
+</span>

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

@@ -1,24 +1,32 @@
-<figure class="relative ar-16-9 {{_addClass}}" x-data="{ avStart: false }">
+<figure class="relative {{_addClass}}" x-data="{ avStart: false }">
     {{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
     {{#unless _voting-option}}
-        <figcaption class="py-3 sm:py-4 border-t-[3px] border-gray-boulder dark:border-text-dark {{_cssClassCaption}}">
+        <div class="py-3 sm:py-4 border-t-[3px] border-gray-boulder dark:border-text-dark {{_cssClassCaption}}">
             {{#if this.label}}
                 {{#> components/label/label_group _css="dark:text-text-dark"}}
                     {{#with this.label}}
-                        {{> components/label/label _type=this.type _text=(loca this.loca) }}
-                        {{> components/label/label_byline _css="ml-2"}}
-                    {{/with}}
-                    {{> components/content/copytext/components/media/media_figure_byline this}}
+                        {{~> components/label/label _type=this.type _text=(loca this.loca) }}
+                        {{~> components/label/label_byline _css="ml-2"}}
+                    {{/with~}}
+                    {{~> components/content/copytext/components/media/media_figure_byline this}}
                 {{/components/label/label_group}}
             {{/if~}}
-            {{#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>
+            {{#if this.isVideo}}
+                {{#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}}
+            {{/if}}
+        </div>
     {{/unless}}
-    {{#if this.isVideo}}
+    {{#if this.isAudioOnDemand}}
+        {{~> components/mediaplayer/media_player this.toModel.audioElement _uiTestHook="ui-test-audio-ondemand-player" _isAudioView=true _addClassImg=_addClassImg ~}}
+    {{/if}}
+    {{#if this.isAudioEventLivestream}}
+        {{~> components/mediaplayer/media_player this.toModel.audioLivestreamElement _uiTestHook="ui-test-audio-livestream-player" _isAudioView=true _addClassImg=_addClassImg ~}}
+    {{/if}}
+    {{#if this.isVideoOnDemand}}
         {{~> components/mediaplayer/media_player this.toModel.videoElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
         {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
     {{/if}}
@@ -27,9 +35,27 @@
         {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLivestream=true _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
     {{/if}}
     {{#unless _voting-option}}
-        {{#with this.teaseritem}}
-            {{~> components/content/copytext/components/image/figcaption _fullSize=../_fullSize  _cssClassCaption=../_cssClassCaption~}}
-        {{/with}}
+        {{#if this.teaseritem}}
+            {{~#> components/content/copytext/components/image/collapsible_caption this.teaseritem _cssClassCaption="mx-5 sm:mx-0"}}
+                {{#unless ../this.isAudio-adjust_context}}
+                    {{~> components/content/copytext/components/image/image_caption_text}}
+                {{/unless}}
+                {{~> components/content/copytext/components/image/image_copyright}}
+                {{#if ../this.isAudio-adjust_context~}}
+                    <span class="mx-1">|</span>
+                    {{#with ../this.toModel.mediaBacklinkToStoryTeaser-adjust_context}}
+                        {{~#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"~}}
+                            <span>
+                                {{~this.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>
+                        {{/components/base/link}}
+                    {{/with}}
+                {{/if}}
+            {{~/components/content/copytext/components/image/collapsible_caption}}
+        {{/if}}
     {{/unless}}
     {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}
 </figure>

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

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

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

@@ -1,11 +1,11 @@
 <h3 class="mt-1">
-    {{> components/base/a11y/ariaLabelText _text=this.content.readMoreScreenreader }}
+    {{> components/base/a11y/ariaLabelText _text=this.readMoreScreenreader }}
     <span class="text-lg sm480:text-xl font-headingSerif dark:text-text-dark">
-        {{this.content.title}}
+        {{this.title}}
     </span>
-    {{~#if this.content.isForeignBrand}}
+    {{~#if this.isForeignBrand}}
         <span aria-hidden=true class="ml-4">
-            [{{this.content.readMore}}
+            [{{this.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~}}]

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

@@ -1,5 +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 my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _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 my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{/if}} 

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

@@ -1,5 +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 my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{/if}} 

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

@@ -1,6 +1,6 @@
 <div class="contents sm:block copytextWrapper">
     {{~#with this.leadAudio }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+        {{> components/content/copytext/components/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
     {{~/with}}    
     {{#each this.copytextParagraph }}
         {{~> components/content/copytext/copytext_body _isWebview=_isWebview ~}}

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

@@ -12,6 +12,8 @@ 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'
+import copytext_audio_json from './fixtures/copytext_audio.json'
+import copytext_audio_event_stream_json from './fixtures/copytext_audio_livestream.json'
 import copytext_livestream_json from './fixtures/copytext_livestream.json'
 
 const Template = ({ ...args }) => {
@@ -29,7 +31,7 @@ export default {
                     </div>`
         },
     ],
-    parameters:{layout:'fullscreen'}
+    parameters: { layout: 'fullscreen' }
 }
 
 export const Default = {
@@ -70,7 +72,7 @@ export const WithImage = {
 export const WithImageWebview = {
     render: Template.bind({}),
     name: 'Image Webview',
-    
+
     args: {
         ...copytext_image_json,
         _isWebview: true
@@ -123,3 +125,14 @@ export const WithLivestream = {
     name: 'Livestream',
     args: copytext_livestream_json,
 }
+export const WithAudio = {
+    render: Template.bind({}),
+    name: 'Audio',
+    args: copytext_audio_json,
+}
+
+export const WithAudioEventStream = {
+    render: Template.bind({}),
+    name: 'Audio-Livestream',
+    args: copytext_audio_event_stream_json,
+}

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

@@ -27,7 +27,7 @@
         {{~#if this.isNewsletter}}
             {{> components/content/copytext/components/newsletter }}
         {{/if~}}
-        {{~#if this.isAudio}}
+        {{~#if this.isAudioOnDemand}}
             {{> components/content/copytext/components/audio }}
         {{/if~}}
         {{~#if this.isAudioEventLivestream}}
@@ -36,7 +36,7 @@
         {{~#if this.isPodcastEpisode}}
             {{> components/content/copytext/components/podcastepisode }}
         {{/if~}}
-        {{~#if this.isVideo}}
+        {{~#if this.isVideoOnDemand}}
             {{> components/content/copytext/components/video/video }}
         {{/if~}}
         {{~#if this.isLivestream}}

package/src/stories/views/components/content/copytext/fixtures/copytext_audio copy.json

@@ -0,0 +1 @@
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Audio"},{"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":{"isAudio":true,"isAudioOnDemand":true,"showFullSize":{"isTrue":true},"label":{"type":"audio","loca":"label_audio","byline":{"bylineText":"00:39 Min."}},"copyright":"hr","audioAuthor":"Michael Pörtner","showAirdate":true,"airdateDate":{"htmlDateTime":"2024-06-21T14:30+0200","htmlDate":"21.06.2024","date":"21.06.24","dateSeparatorTime":"21.06.24, 14:30"},"toModel":{"audioElement":{"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"__xsmall"}]}},"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/hs/2024_06/240621093838_hsr_strongman_Poertner_Ost.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":39,"images":[{"kind":"preview","url":"images/strongman-100_v-1to1{size}.jpg"}],"title":"Strongman-WM in Fulda","synopsis":"Stromgman-WM in Fulda zieht Kraftsportler aus aller Welt an."},"pluginData":{},"geoBlocked":false},"playerId":"2565","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":"__xsmall"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"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/hs/2024_06/240621093838_hsr_strongman_Poertner_Ost.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":39,"images":[{"kind":"preview","url":"images/strongman-100_v-1to1{size}.jpg"}],"title":"Strongman-WM in Fulda","synopsis":"Stromgman-WM in Fulda zieht Kraftsportler aus aller Welt an."},"pluginData":{},"geoBlocked":false},"playerId":"2565","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"}},"mediaBacklinkToStoryTeaser":{"link":{"url":"/audioseite","isTargetBlank":false},"readMoreScreenreader":"zum hessenschau.de Audio","title":"Musik macht deinen Tag","isForeignBrand":false,"readMore":"zur Audioseite","hasIcon":false,"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"}]}},"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."}]}},{"paragraphBoxItem":{"isAudio":true,"isAudioOnDemand":true,"showFullSize":{"isTrue":false},"label":{"type":"audio","loca":"label_audio","byline":{"bylineText":"00:20 Min."}},"audioAuthor":"Karsten Hufer","showAirdate":true,"airdateDate":{"htmlDateTime":"2022-10-31T19:30+0200","htmlDate":"31.10.2022","date":"31.10.22","dateSeparatorTime":"31.10.22, 19:30"},"toModel":{"audioElement":{"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":"2564","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":true,"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":"2564","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"}},"mediaBacklinkToStoryTeaser":{"link":{"url":"/audioseite","isTargetBlank":false},"readMoreScreenreader":"zum Audio","title":"Musik macht deinen Tag","isForeignBrand":false,"readMore":"zur Audioseite","hasIcon":false,"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"}]}},"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."}]}}]}