hr-design-system-handlebars 1.70.0 → 1.70.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.70.1 (Tue Jun 11 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-323: add add copytext-video component [#928](https://github.com/mumprod/hr-design-system-handlebars/pull/928) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.70.0 (Tue Jun 11 2024)
 
 #### 🚀 Enhancement

package/dist/assets/brand/hessenschau/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

package/dist/assets/brand/hr/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

package/dist/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

package/dist/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

package/dist/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

package/dist/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

package/dist/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

package/dist/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

package/dist/assets/brand/hr1/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

package/dist/assets/brand/hr2/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

package/dist/assets/brand/hr3/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

package/dist/assets/brand/you-fm/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

package/dist/assets/index.css

@@ -2184,6 +2184,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .border-t {
   border-top-width: 1px;
 }
+.border-t-\[3px\] {
+  border-top-width: 3px;
+}
 .border-solid {
   border-style: solid;
 }
@@ -3347,7 +3350,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1718097552969;
+  counter-reset: cnt1718105127788;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3726,7 +3729,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1718097552969 1;
+  counter-increment: cnt1718105127788 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3742,7 +3745,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1718097552969);
+  content: counter(cnt1718105127788);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6234,6 +6237,11 @@ article.indexTextDS .indexTextHighlighted .link {
     padding-right: 2.375rem;
   }
 
+  .sm\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
   .sm\:pb-0 {
     padding-bottom: 0px;
   }

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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 "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 "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/dist/views_static/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/dist/views_static/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/package.json

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

package/src/assets/brand/_default/conf/locatags.json

@@ -160,6 +160,8 @@
     "ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
     "ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
     "story_infobox_intro_sr": "Weitere Informationen",
-    "story_infobox_outro_sr": "Ende der weiteren Informationen"
+    "story_infobox_outro_sr": "Ende der weiteren Informationen",
+    "story_video_intro_sr": "Videobeitrag",
+    "story_video_outro_sr": "Ende des Videobeitrags"
 
 }

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -161,6 +161,8 @@
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",
+	"story_video_intro_sr": "Videobeitrag",
+	"story_video_outro_sr": "Ende des Videobeitrags",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }