hr-design-system-handlebars 1.87.2 → 1.88.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.88.0 (Thu Aug 01 2024)
+
+#### 🚀 Enhancement
+
+- Bug/dpe 3277 [#1036](https://github.com/mumprod/hr-design-system-handlebars/pull/1036) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.87.2 (Mon Jul 29 2024)
 
 #### 🐛 Bug Fix

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/assets/index.css

@@ -3319,7 +3319,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1722256576841;
+  counter-reset: cnt1722527094501;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3727,7 +3727,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1722256576841 1;
+  counter-increment: cnt1722527094501 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3743,7 +3743,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1722256576841);
+  content: counter(cnt1722527094501);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/mediaplayer/ardPlayerLoader.subfeature.js

@@ -1,17 +1,22 @@
 import { fireEvent, hr$, listen, loadScript } from 'hrQuery'
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
 import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature'
 
-const ArdPlayerLoader = function (options, rootElement) {
+const ArdPlayerLoader = function (options, trackingData, rootElement) {
     'use strict'
 
     const skinPath = options.cssUrl,
         ardplayerUrl = options.jsUrl,
         smarttagUrl = options.atiSmarttagUrl,
         playerId = options.playerId,
+        type = options.type,
         settingsCookie = new SettingsCookie(),
-        isPlayerDebug = options.isPlayerDebug || false
+        isPlayerDebug = options.isPlayerDebug || false,
+        playerLocation = trackingData.playerLocation || "Default",
+        playerSize = trackingData.playerSize || options.teaserSize
     let mediaCollection = options.mediaCollection,
         playerConfig = options.playerConfig,
+        isPlayerStarted = false,
         player
 
     const setupPlayer = function () {
@@ -76,7 +81,13 @@ const ArdPlayerLoader = function (options, rootElement) {
 
     const bindPlayerEvents = function () {
         player.$.on(ardplayer.Player.EVENT_PLAY_STREAM, function (event) {
+            console.log(event.target)
+            console.debug(`options.teaserSize: ${options.teaserSize}`)
             const geotag = hr$('.js-geotag', rootElement)[0]
+            if (!isPlayerStarted) {
+                trackPlayerStart()
+                isPlayerStarted = true
+            }
             if (typeof geotag != 'undefined') {
                 geotag.classList.add('hide')
             }
@@ -105,15 +116,42 @@ const ArdPlayerLoader = function (options, rootElement) {
 
         listen('player_start', function (event) {
             if (player) {
-                if (undefined != mediaCollection.live) {
-                    player.seekToLive()
+                let playerIdFromConfig = parseInt(playerId)
+                playerIdFromConfig = isNaN(playerIdFromConfig) ? 0 : playerIdFromConfig
+                if (playerIdFromConfig === event.detail.playerId) {
+                    if (undefined != mediaCollection.live) {
+                        player.seekToLive()
+                    }
+                    player.play()
                 }
-                player.play()
             }
         })
     }
 
+    const trackPlayerStart = function () {
+        switch (type) {
+            case "audioOndemand":
+                console.debug(`Playbutton geklickt::Audio \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
+                uxAction(`Playbutton geklickt::Audio \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
+                break;
+            case "audioLivestream":
+                console.debug(`Playbutton geklickt::Audio-Event-Livestream \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
+                uxAction(`Playbutton geklickt::Audio-Event-Livestream \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
+                break;
+            case "videoOndemand":
+                console.debug(`Playbutton geklickt::Video \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
+                uxAction(`Playbutton geklickt::Video \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
+                break;
+            case "videoLivestream":
+                console.debug(`Playbutton geklickt::Video - Livestream \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
+                uxAction(`Playbutton geklickt::Video - Livestream \"${mediaCollection.meta.title}\"::${playerLocation}::Breite ${playerSize}`)
+                break;
+        }
+    }
+
     setupPlayer()
 }
 
+
+
 export default ArdPlayerLoader

package/dist/assets/js/components/mediaplayer/mediaplayerLoader.feature.js

@@ -9,7 +9,8 @@ const MediaplayerLoader = function (context) {
         { element: rootElement } = context,
         isAutoplay = options.isAutoplay,
         teaserSize = options.teaserSize,
-        mediaplayerButton = hr$('.js-mediaplayer__button', rootElement.parentNode)[0]
+        mediaplayerButton = hr$('.js-mediaplayer__button', rootElement.parentNode)[0],
+        trackingData = rootElement.dataset.mediaplayerTracking ? JSON.parse(rootElement.dataset.mediaplayerTracking) : {}
 
     const removeVideoHover = function () {
         rootElement.parentNode.parentNode.classList.remove('-imageHover')
@@ -17,9 +18,8 @@ const MediaplayerLoader = function (context) {
     }
 
     const loadArdPlayerLoader = function () {
-        new ArdPlayerLoader(options)
+        new ArdPlayerLoader(options, trackingData)
         removeVideoHover()
-        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
     }
 
     if (isAutoplay) {

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/views/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/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-adjust_context "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-adjust_context}}
             {{#*inline "css"}} {{~#if ../../_isLead-adjust_context~}} md:w-18 md:h-18 w-10 h-10 {{else}} w-10 h-10 {{/if}} {{/inline}}

package/dist/views/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/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/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-adjust_context _addClassImg=../../_addClassImg-adjust_context _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-adjust_context _addClassImg=../../_addClassImg-adjust_context _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-adjust_context _addClassImg=../../_addClassImg-adjust_context _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-adjust_context _addClassImg=../../_addClassImg-adjust_context _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-adjust_context _addClassImg=../../_addClassImg-adjust_context _noDelay=this.dontLazyload}}
                {{/with}}

package/dist/views/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/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/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}}