hr-design-system-handlebars 1.69.3 → 1.70.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.70.0 (Tue Jun 11 2024)
+
+#### 🚀 Enhancement
+
+- :sparkles: Add audioplayer and audiolivestream player to mediaplayer config [#938](https://github.com/mumprod/hr-design-system-handlebars/pull/938) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.69.3 (Tue Jun 11 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3347,7 +3347,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1718095797713;
+  counter-reset: cnt1718097552969;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3726,7 +3726,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1718095797713 1;
+  counter-increment: cnt1718097552969 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3742,7 +3742,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1718095797713);
+  content: counter(cnt1718097552969);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4122,24 +4122,24 @@ article.indexTextDS .indexTextHighlighted .link {
         --ardplayer-color-primary-base: #006dc1;
         --ardplayer-color-primary-base-transparent-30: rgba(0, 109, 193, 0.7);
         --ardplayer-color-primary-dark-base: #eaf3fa;
-        --ardplayer-color-tertiary-base: #005293;
+        --ardplayer-color-tertiary-base: #006dc1;
         --ardplayer-color-lightest: #ffffff;
     }
 [data-theme='hessenschau'] .ardplayer .ardplayer-controlbar .ardplayer-controlbar-hover {
-                --ardplayer-color-lightest: #005293;
+                --ardplayer-color-lightest: #006dc1;
                 color: var(--ardplayer-color-lightest);
             }
 [data-theme='hessenschau'] .ardplayer .ardplayer-bottom-sheet-container {
-            --ardplayer-color-lightest: #005293;
+            --ardplayer-color-lightest: #006dc1;
         }
 [data-theme='hessenschau'] .ardplayer .ardplayer-bottom-sheet-container .ardplayer-option:hover {
                 color: #ffffff;
             }
 [data-theme='hessenschau'] .ardplayer .ardplayer-bottom-sheet-container .ardplayer-option:hover .ardplayer-icon {
-                    color: #005293;
+                    color: #006dc1;
                 }
 [data-theme='hessenschau'] .ardplayer.ardplayer-state-audio {
-        --ardplayer-color-lightest: #005293;
+        --ardplayer-color-lightest: #006dc1;
     }
 [data-theme='hr-fernsehen'] {
     --color-primary-ds: #007396;

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

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

package/src/assets/fixtures/mediaplayer/mediaplayer.json

@@ -48,5 +48,63 @@
             ]
         }
         
+    },
+    "audio":{
+        "ardPlayerConfig": {
+            "@->jsoninclude": "audio/audios.inc.json",
+            "@->contentpath": "audio-1"
+        },
+        "ardPlayerJsonConfig": {
+            "@->jsoninclude": "audio/audios.inc.json",
+            "@->contentpath": "audio-1",
+            "@->overrides": [
+                {
+                    "@->contentpath": "playerConfig.web.isForcedVideoView",
+                    "@->value": false
+                },
+                {
+                    "@->contentpath": "playerConfig.web.isForcedAutoplay",
+                    "@->value": false
+                },
+                {
+                    "@->contentpath": "playerConfig.generic.isAutoplay",
+                    "@->value": false
+                },
+                {
+                    "@->contentpath": "isAutoplay",
+                    "@->value": false
+                }
+            ]
+        }
+        
+    },
+    "audio_event_livestream":{
+        "ardPlayerConfig": {
+            "@->jsoninclude": "audio/audios.inc.json",
+            "@->contentpath": "audio-event-livestream"
+        },
+        "ardPlayerJsonConfig": {
+            "@->jsoninclude": "audio/audios.inc.json",
+            "@->contentpath": "audio-event-livestream",
+            "@->overrides": [
+                {
+                    "@->contentpath": "playerConfig.web.isForcedVideoView",
+                    "@->value": false
+                },
+                {
+                    "@->contentpath": "playerConfig.web.isForcedAutoplay",
+                    "@->value": false
+                },
+                {
+                    "@->contentpath": "playerConfig.generic.isAutoplay",
+                    "@->value": false
+                },
+                {
+                    "@->contentpath": "isAutoplay",
+                    "@->value": false
+                }
+            ]
+        }
+        
     }
 }

package/src/assets/tailwind.css

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

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

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

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

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

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

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

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

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

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

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