hr-design-system-handlebars 1.87.2 → 1.88.1

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

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 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" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 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/dist/views_static/components/content/copytext/components/audioeventlivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 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" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 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/dist/views_static/components/content/copytext/components/media/media_figure.hbs

@@ -21,18 +21,22 @@
         </div>
     {{/unless}}
     {{#if this.isAudioOnDemand}}
-        {{~> components/mediaplayer/media_player this.toModel.audioElement _uiTestHook="ui-test-audio-ondemand-player" _isAudioView=true _addClassImg=_addClassImg ~}}
+        {{~> components/mediaplayer/media_player this.toModel.audioElement _playerLocation=_playerLocation _playerSize=_playerSize _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 ~}}
+        {{~> components/mediaplayer/media_player this.toModel.audioLivestreamElement _playerLocation=_playerLocation _playerSize=_playerSize _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=_isLead }}
+        {{#with this.toModel.videoElement}}
+            {{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
+            {{~> components/teaser/components/teaser_media_player ../this _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
+        {{/with}}
     {{/if}}
     {{#if this.isLivestream}}
-        {{~> components/mediaplayer/media_player this.toModel.videoLivestreamElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
-        {{~> 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=_isLead }}
+        {{#with this.toModel.videoLivestreamElement}}
+            {{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
+            {{~> components/teaser/components/teaser_media_player ../this _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLivestream=true _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
+        {{/with}}
     {{/if}}
     {{#unless _voting-option}}
         {{#if this.teaseritem}}

package/dist/views_static/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 mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _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 _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 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 _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 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/dist/views_static/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 mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _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 _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 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 _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 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/dist/views_static/components/content/copytext/copytext.hbs

@@ -1,6 +1,6 @@
 <div class="mt-2 contents sm:block copytextWrapper">
     {{~#with this.leadAudio }}
-        {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+        {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden article-full-width mt-12 mb-6 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
     {{~/with}}    
     {{#each this.copytextParagraph }}
         {{~> components/content/copytext/copytext_body _isWebview=../_isWebview ~}}

package/dist/views_static/components/event/calendar/event_calendar_nav.hbs

@@ -9,9 +9,9 @@
         <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
             {{#each this}}
                 <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
-                    this.isCurrentMonth}} -currentMonth{{/if}}{{#if
                     this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
-                    <span class="block font-heading font-bold w-24 sticky left-0 px-2 py-3">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
+                    <span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3  {{#if
+                    this.isCurrentMonth}} -currentMonth{{else}}text-slate-500{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
                     <ul class="flex">
                         {{#each this.days}}
                             <li class="inline-block h-full group cursor-pointer js-ns-item{{#if

package/dist/views_static/components/mediaplayer/media_player.hbs

@@ -1,2 +1,2 @@
-<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 !h-auto{{else}}ar-16-9 h-full{{/if}}{{~#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 _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 !h-auto{{else}}ar-16-9 h-full{{/if}}{{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-mediaplayer-tracking='{"playerLocation": "{{_playerLocation}}","playerSize": "{{if _playerSize _playerSize ""}}" }' data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
 </div>

package/dist/views_static/components/mediaplayer/mediaplayer_button.hbs

@@ -1,5 +1,5 @@
 {{#with this}}
-    {{#> components/button/button _variant="icon-button"  _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
+    {{#> components/button/button _variant="icon-button"  _type="button" _css=_css _alpineClick=(loca "mediaplayer_play_button_alpine_click" _playerId)}}
         {{#with this}}
             {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "fill-white group-hover:text-white inline ") _icon=_icon}}
             {{#*inline "css"}} {{~#if _isLead~}} md:w-18 md:h-18 w-10 h-10 {{else}} w-10 h-10 {{/if}} {{/inline}}

package/dist/views_static/components/page/story/story_article.hbs

@@ -20,10 +20,10 @@
                     _noDelay=true}}
             {{/if}}
             {{#if this.isVideoOnDemand}}
-               {{> components/content/copytext/components/media/media_figure _isLead=true _fullSize=true _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+               {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
             {{/if}}
             {{#if this.isLivestream}}
-               {{> components/content/copytext/components/media/media_figure _isLead=true _fullSize=true _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+               {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
             {{/if}}
         {{/with}}
     {{/unless}}

package/dist/views_static/components/podcast/components/podcast_player_ui.hbs

@@ -7,7 +7,7 @@
                 {{> components/podcast/components/podcast_playbutton 
                 _css="mr-4" 
                 _id = _id
-                _alpineClick=(loca "play_button_alpine_click" _id) }}
+                _alpineClick=(loca "podcastplayer_play_button_alpine_click" _id) }}
             </div>
 
             <div class="flex flex-wrap items-start w-full -mt-0.5">

package/dist/views_static/components/teaser/components/teaser_av_consumption.hbs

@@ -1,7 +1,7 @@
 {{#with this.teaserLead.avDocument}}
      {{~#if this.isVideoOnDemand ~}}
           {{#with this.toModel.videoElement}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}
+               {{~> components/mediaplayer/media_player _playerLocation="Teaser" _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 _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}
@@ -12,7 +12,7 @@
      {{~/if~}}
      {{~#if this.isAudioOnDemand ~}}
           {{#with this.toModel.audioElementForVideoView}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}                  
+               {{~> components/mediaplayer/media_player _playerLocation="Teaser" _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 _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}
@@ -23,7 +23,7 @@
      {{~/if~}}
      {{~#if this.isPodcast ~}}
           {{#with this.toModel.audioElementForVideoView}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _playerLocation="Teaser" _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 _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}
@@ -34,7 +34,7 @@
      {{~/if~}}
      {{~#if this.isAudioEventLivestream ~}}
           {{#with this.toModel.audioLivestreamElementForVideoView}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-livestream-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _playerLocation="Teaser" _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 _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}
@@ -45,7 +45,7 @@
      {{~/if~}}
      {{~#if this.isLivestream ~}}
           {{#with this.toModel.videoLivestreamElement}}
-               {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-livestream-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
+               {{~> components/mediaplayer/media_player _playerLocation="Teaser" _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 _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}

package/dist/views_static/components/teaser/components/teaser_media_player.hbs

@@ -14,6 +14,6 @@
 
 
     {{#with this}}
-        {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLead=_isLead _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}   
+        {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _playerId=_playerId _isLead=_isLead _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}   
     {{/with}} 
 </div>

package/package.json

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

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

@@ -12,7 +12,8 @@
     "banner_image_copyright": "Banner Bild ©",
     "broadcast": "Sendung",
     "close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-    "play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+    "podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+    "mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
     "comment_anchor_1": "zu den ",
     "comment_anchor_2": " Kommentaren des Artikels springen",
     "comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -12,7 +12,8 @@
 	"banner_image_copyright": "Banner Bild ©",
 	"broadcast": "Sendung",
 	"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
-	"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"podcastplayer_play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
+	"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
 	"comment_anchor_1": "zu den ",
 	"comment_anchor_2": " Kommentaren des Artikels springen",
 	"comment_label_text": "Kommentar",

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

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 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" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 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,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 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" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 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/media/media_figure.hbs

@@ -21,18 +21,22 @@
         </div>
     {{/unless}}
     {{#if this.isAudioOnDemand}}
-        {{~> components/mediaplayer/media_player this.toModel.audioElement _uiTestHook="ui-test-audio-ondemand-player" _isAudioView=true _addClassImg=_addClassImg ~}}
+        {{~> components/mediaplayer/media_player this.toModel.audioElement _playerLocation=_playerLocation _playerSize=_playerSize _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 ~}}
+        {{~> components/mediaplayer/media_player this.toModel.audioLivestreamElement _playerLocation=_playerLocation _playerSize=_playerSize _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=_isLead }}
+        {{#with this.toModel.videoElement}}
+            {{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
+            {{~> components/teaser/components/teaser_media_player ../this _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
+        {{/with}}
     {{/if}}
     {{#if this.isLivestream}}
-        {{~> components/mediaplayer/media_player this.toModel.videoLivestreamElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
-        {{~> 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=_isLead }}
+        {{#with this.toModel.videoLivestreamElement}}
+            {{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
+            {{~> components/teaser/components/teaser_media_player ../this _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLivestream=true _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
+        {{/with}}
     {{/if}}
     {{#unless _voting-option}}
         {{#if this.teaseritem}}

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 mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _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 _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 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 _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 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 mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _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 _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow 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="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 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 _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 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="mt-2 contents sm:block copytextWrapper">
     {{~#with this.leadAudio }}
-        {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+        {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden article-full-width mt-12 mb-6 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _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/event/calendar/event_calendar_nav.hbs

@@ -9,9 +9,9 @@
         <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
             {{#each this}}
                 <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
-                    this.isCurrentMonth}} -currentMonth{{/if}}{{#if
                     this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
-                    <span class="block font-heading font-bold w-24 sticky left-0 px-2 py-3">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
+                    <span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3  {{#if
+                    this.isCurrentMonth}} -currentMonth{{else}}text-slate-500{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
                     <ul class="flex">
                         {{#each this.days}}
                             <li class="inline-block h-full group cursor-pointer js-ns-item{{#if

package/src/stories/views/components/event/filtererDs.feature.js

@@ -1,3 +1,4 @@
+import { color } from '@storybook/theming'
 import { pi, uxAction } from 'base/tracking/pianoHelper.subfeature'
 import { hr$, isString, listen, reinitializeFeature, simulateClickOn } from 'hrQuery'
 import $ from 'zepto-modules'
@@ -22,9 +23,14 @@ const Filterer = (context) => {
         errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement),
         errorDomNodes = hr$(`.${errorClass}`),
         contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
-    let targetDomNodes = hr$(`.${targetClass}`, rootElement)
+    let targetDomNodes = hr$(`.${targetClass}`, rootElement),
+         currentMonth = document.getElementsByClassName('-currentMonth')[0];
+
+    const init = function () {          
+            currentMonth.classList.add('text-white');
+            currentMonth.classList.add('bg-black');
+
 
-    const init = function () {
         for (let i = 0; i < triggerDomNodes.length; i++) {
             triggerDomNodes[i].addEventListener('click', doSetSelectedFilter.bind(this))
             triggerDomNodes[i].addEventListener('touch', doSetSelectedFilter.bind(this))
@@ -68,9 +74,22 @@ const Filterer = (context) => {
 
     const doSetSelectedFilter = function (e, forceReset) {
         clearSelected()
-
+        
+        
+        let monthWrapper = e.currentTarget.closest('.js-ns-month');
+        let monthName = monthWrapper.querySelector('.js-monthName');    
+       
         if (!forceReset) {
-            e.currentTarget.classList.add(navItemSelectedCssTrigger)
+            e.currentTarget.classList.add(navItemSelectedCssTrigger)      
+            if (monthWrapper) {
+                
+                if (monthName) {
+                    monthName.classList.remove('text-slate-500')
+                    monthName.classList.remove('bg-white')
+                    monthName.classList.add('text-white');
+                    monthName.classList.add('bg-black');
+                }
+            }
         }
 
         //hacky weil e beim start auch kein Event sein kann
@@ -82,7 +101,20 @@ const Filterer = (context) => {
     const clearSelected = function () {
         let triggerDomNodes = hr$(`.${triggerClass}.${navItemSelectedCssTrigger}`, rootElement)
 
+        // hacky die würde bald verändert
+        currentMonth.classList.remove('text-white');
+        currentMonth.classList.remove('bg-black');
+        currentMonth.classList.add('text-slate-500');
+        currentMonth.classList.add('bg-white');
+
+        
         triggerDomNodes.forEach(function (triggerDomNode) {
+
+            // hacky die würde bald verändert
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.remove('text-white');
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.remove('bg-black');
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.add('text-slate-500');
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.add('bg-white');
             triggerDomNode.classList.remove(navItemSelectedCssTrigger)
         })
     }