hr-design-system-handlebars 1.87.2 → 1.88.1

package/src/stories/views/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/src/stories/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/src/stories/views/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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>