hr-design-system-handlebars 0.49.2 → 0.49.3

package/.storybook/main.js

@@ -34,10 +34,11 @@ module.exports = {
             ...config.resolve.alias,
             scripts: path.resolve(__dirname, '../scripts'),
             components: path.resolve(__dirname, '../src/stories/views/components'),
+            base: path.resolve(__dirname, '../src/stories/views/base'),
             tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
-            hrQueryNew$: path.resolve(
+            hrQueryDs$: path.resolve(
                 __dirname,
-                '../src/stories/views/components/generic/hrQueryNew.js'
+                '../src/stories/views/components/generic/hrQueryDs.js'
             ),
             initializer$: path.resolve(
                 __dirname,

package/.storybook/preview.js

@@ -11,14 +11,21 @@ import loadFeature from '../build/webpack/feature-loader/initializer/loader'
 import 'components/site_header/header_alpine'
 
 function loadDelayedImages(){setTimeout((function(){var t,e=document.images,s=[],a=function(t){void 0!==window.picturefill&&window.picturefill({reevaluate:!0,elements:t})};for(var i=0;i<e.length;++i)(t=e[i].dataset?e[i].dataset.srcset:e[i].getAttribute("data-srcset"))&&(0===e[i].getBoundingClientRect().top?s.push(e[i]):e[i].setAttribute("srcset",t));a(e),setTimeout((function(){var t;for(var i=0;i<s.length;++i)t=s[i].dataset?s[i].dataset.srcset:s[i].getAttribute("data-srcset"),s[i].setAttribute("srcset",t);a(s)}),900)}),0)}
-    
-document.addEventListener('DOMContentLoaded', function (event) {
-    console.log('DOM fully loaded and parsed')
 
-    console.log('Start feature initialization')
+let eventSrcUrl = null;
+
+document.addEventListener('DOMContentLoaded', function (event) {
+    console.log('DOM fully loaded and parsed') 
+    if(eventSrcUrl != event.srcElement.URL) {
+        eventSrcUrl = event.srcElement.URL
+        
+        console.log('Start feature initialization' )
 
-    Initializer.run(document, loadFeature)
-    setTimeout(loadDelayedImages,200);
+        Initializer.run(document, loadFeature)
+        setTimeout(loadDelayedImages,200);
+    } else {
+        console.log("second DOMContentLoaded Event was blocked!");
+    }   
 })
 
 if (process.env.NODE_ENV !== 'production') {

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.49.3 (Tue Jul 05 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1588 [#261](https://github.com/mumprod/hr-design-system-handlebars/pull/261) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.49.2 (Tue Jul 05 2022)
 
 #### 🐛 Bug Fix

package/dist/views/base/tracking/{atiHelperNew.js → atiHelperDs.js}

@@ -1,5 +1,5 @@
 
-import TrackingCookie from '../../components/externalService/trackingCookie.subfeature'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
 
 const isTrackingAllowed = () => {
     const trackingCookie = new TrackingCookie()

package/dist/views/base/tracking/{atiMediaHelperNew.js → atiMediaHelperDs.js}

@@ -1,4 +1,4 @@
-import { isTrackingAllowed, pi } from '../tracking/atiHelperNew'
+import { isTrackingAllowed, pi } from 'base/tracking/atiHelperDs'
 
 const ATIMediaHelper = function (
     avType,

package/{src/stories/views/components/audio/audioElement.subfeature.js → dist/views/components/audio/audioElementDs.subfeature.js}

@@ -1,6 +1,6 @@
-import { fireEvent, hr$, listen } from 'hrQueryNew'
-import { uxAction } from '../../base/tracking/atiHelperNew'
-import ATIMediaHelper from '../../base/tracking/atiMediaHelperNew'
+import { fireEvent, hr$, listen } from 'hrQueryDs'
+import { uxAction } from 'base/tracking/atiHelperDs'
+import ATIMediaHelper from 'base/tracking/atiMediaHelperDs'
 
 const AudioElement = function (options, rootElement) {
     'use strict'

package/dist/views/components/button/button_round.hbs

@@ -4,6 +4,9 @@
     {{~#if _name}} name="{{_name}}"{{/if}} 
     class="bg-blue-500 hover:bg-blue-700 text-white rounded-full border-4 border-white p-1 {{_addClass}}{{#if _webview}} -webview{{/if}}"
     {{~#if _value}} value="{{_value}}"{{/if}}
+    {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}}
+
+
 >
     {{~#if _showIcon~}}
         {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}

package/{src/stories/views/components/externalService/trackingCookie.subfeature.js → dist/views/components/externalService/trackingCookieDs.subfeature.js}

@@ -1,4 +1,4 @@
-import { getJSONCookie, setJSONCookie } from 'hrQueryNew'
+import { getJSONCookie, setJSONCookie } from 'hrQueryDs'
 
 const TrackingCookie = function () {
     let cookie = {}

package/dist/views/components/foo.feature.js

@@ -1,4 +1,4 @@
-import { hr$ } from 'hrQueryNew'
+import { hr$ } from 'hrQueryDs'
 const Foo = (context) => {
     const { options } = context
     const { element: rootElement } = context

package/dist/views/components/mediaplayer/{mediaplayerLoader.feature.js → mediaplayerLoaderDs.feature.js}

@@ -1,8 +1,8 @@
-import { hr$, listenOnce } from 'hrQueryNew'
-import { uxAction } from '../../base/tracking/atiHelperNew'
-import VideoOnDemandPlayer from '../video/videoOnDemandPlayer.subfeature'
-import AudioElement from '../audio/audioElement.subfeature'
-import VideoLivestream from '../video/livestream/videoLivestream.subfeature'
+import { hr$, listenOnce, fireEvent, listen } from 'hrQueryDs'
+import { uxAction } from 'base/tracking/atiHelperDs'
+import VideoOnDemandPlayer from 'components/video/videoOnDemandPlayerDs.subfeature'
+import AudioElement from 'components/audio/audioElementDs.subfeature'
+import VideoLivestream from 'components/video/livestream/videoLivestreamDs.subfeature'
 
 const MediaplayerLoader = function (context) {
     'use strict'
@@ -14,9 +14,14 @@ const MediaplayerLoader = function (context) {
         position = options.position,
         teaserSize = options.teaserSize,
         config = options.config,
-        audioContent = hr$('.js-audioElement__audio', rootElement)[0],
-        mediaplayerButton = hr$('.js-mediaplayer__button', rootElement)[0]
-        
+        audioContent = hr$('.js-audioElement__audio', rootElement)[0],    
+        // containerId = options.containerId,
+        rootParent = rootElement.parentNode,
+        mediaplayerButton = hr$('.js-mediaplayer__button', rootParent)[0];
+    
+    let video = false; 
+
+
     const removeVideoHover = function () {
         rootElement.parentNode.parentNode.classList.remove('-imageHover')
         rootElement.parentNode.parentNode.parentNode.classList.remove('-imageHover')
@@ -35,11 +40,24 @@ const MediaplayerLoader = function (context) {
         uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
     }
 
-    const loadOnDemand = function () {
-        console.log("loadOnDemand");
-        new VideoOnDemandPlayer(options)
-        removeVideoHover()
-        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+    
+    const unloadPlayer = function() {
+        console.log("video.pause()");
+        video.pause();
+    }
+
+    const loadOnDemand = function () {    
+        if(!video){
+            console.log("loadOnDemand");
+            video = new VideoOnDemandPlayer(options)
+            removeVideoHover()
+            uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+            listenOnce('player_colosed', unloadPlayer)  
+        } else {
+            console.log("video.play()");
+            listenOnce('player_colosed', unloadPlayer) 
+            video.play();
+        }
     }
 
     const loadAudio = function () {
@@ -48,6 +66,8 @@ const MediaplayerLoader = function (context) {
         uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
     }
 
+
+   
     switch (type) {
         case 'live':
             console.log('live');
@@ -61,7 +81,8 @@ const MediaplayerLoader = function (context) {
         case 'ondemand':
             console.log('ondemand');
             if (position === 'teaser') {
-                listenOnce('click', loadOnDemand, mediaplayerButton)
+              // listenOnce('click', loadOnDemand, mediaplayerButton)
+              listen('click', loadOnDemand, mediaplayerButton)
             } else {
                 loadOnDemand()
             }
@@ -77,5 +98,6 @@ const MediaplayerLoader = function (context) {
             }
             break
     }
+    
 }
 export default MediaplayerLoader

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

@@ -1,8 +1,21 @@
-<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["js-is1to1 px-5 md:px-0 md:col-span-3 md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} "
+    x-data="{ videoStart: false }"
+    {{#switch this.teaserSize~}}
+        {{~#case "25"}}  
+        
+            :class="videoStart ? 'flex-col' : 'flex-row'"
+        {{/case~}}
+    {{~/switch~}}   
+    >
     <figure class="relative {{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">    
         {{> components/teaser/components/teaser_lead }}       
     </figure>
     <div class="{{inline-switch this.teaserSize '["25"]' '["basis-3/5 md:flex-full"]'}} ">
+        {{#switch this.teaserSize~}}
+            {{~#case "25"}}  
+                <button x-show="videoStart" @click="videoStart = false; $dispatch('player_colosed')" class="md:hidden">Video schließen</button>
+            {{/case~}}
+        {{~/switch~}}   
         <header class="md:px-0 {{inline-switch teaserSize '["25"]' '["","px-5"]'}}">
             {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }} 
                 {{> components/teaser/components/teaser_heading 

package/{src/stories/views/components/video/livestream/videoLivestream.subfeature.js → dist/views/components/video/livestream/videoLivestreamDs.subfeature.js}

@@ -1,5 +1,5 @@
-import { fireEvent, hr$, listen, loadScript } from 'hrQueryNew'
-import TrackingCookie from '../../externalService/trackingCookie.subfeature'
+import { fireEvent, hr$, listen, loadScript } from 'hrQueryDs'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
 
 const VideoLivestream = function (options, rootElement) {
     'use strict'

package/{src/stories/views/components/video/videoOnDemandPlayer.subfeature.js → dist/views/components/video/videoOnDemandPlayerDs.subfeature.js}

@@ -1,5 +1,5 @@
-import { fireEvent, hr$, listen, loadScript } from 'hrQueryNew'
-import TrackingCookie from '../externalService/trackingCookie.subfeature'
+import { fireEvent, hr$, listen, loadScript } from 'hrQueryDs'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
 
 const VideoOnDemandPlayer = function (options, rootElement) {
     'use strict'
@@ -28,8 +28,8 @@ console.log('VideoOnDemandPlayer');
         mediaCollection,
         mediaStreamArray = []
 
-     	console.log(skinPath);
-    /*    console.log(isAdaptiveStream);
+    /* 	console.log(skinPath);
+        console.log(isAdaptiveStream);
         console.log(basePlayerUrl);
         console.log(previewImageUrl);
         console.log(adaptiveStreamingUrl);
@@ -341,8 +341,14 @@ console.log('VideoOnDemandPlayer');
                 player.pause()
             }
         })
+        // listen('hr:global:startVideo:'+playerId, function (event) {
+        //     if (event.detail == 'ardplayer') {
+        //         player.play()
+        //     }
+        // })
+       
     }
-
+    
     if (trackingCookie.isTrackingAccepted('agf') && window.gfkConnector && agfMetadata) {
         gfkConnector.init(function (gfkLinkID) {
             agfMetadata.nol_c20 = 'p20,' + gfkLinkID
@@ -351,6 +357,15 @@ console.log('VideoOnDemandPlayer');
     } else {
         setupPlayer()
     }
+
+    return {
+        play: function() {
+            player.play()
+        },
+        pause: function() {
+            player.pause()
+        }
+    }
 }
 
 export default VideoOnDemandPlayer

package/dist/views/components/video/video_element.hbs

@@ -1,5 +1,5 @@
 <div class="c-videoplayer">
-    <div id="{{nextRandom}}" class="relative js-load" data-new-hr-mediaplayer-loader='{
+    <div x-show="videoStart" x-transition.duration.100ms id="{{nextRandom}}" class="js-load" data-new-hr-mediaplayer-loader-ds='{
         "type": "ondemand",
         "position": "{{if _isTeaser 'teaser' 'page'}}",
         "teaserSize" : "{{if ../../this.teasersize ../../this.teasersize '00' }}",
@@ -59,19 +59,26 @@
                 <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>
             {{/with~}}
         {{/unless}}
-        {{#if _isTeaser}}
-            {{#with _teaser}}
+        
+    </div>
+    
+    {{#if _isTeaser}}
+    <div class="relative" x-show="!videoStart" x-transition.duration.100ms>
+        {{#with _teaser}}
+            
                 {{~#if ../_isCopyText~}}
                     {{~> 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="ar__content" _noDelay=../_noDelay ~}}
                 {{else}}
                     {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
-                                 _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
-                                 _clickLabelPrefix2="mediaLink" }}                       
+                                _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
+                                _clickLabelPrefix2="mediaLink" }}                       
                         {{~> 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="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
                     {{/components/base/link }}
                 {{/if}}
-            {{/with}}
-            {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video"}}
-        {{/if}}
-    </div>
+             
+        {{/with}}
+        {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video" _alpineClick="videoStart = !videoStart"}}
+    </div>   
+    {{/if}}
+    
 </div>

package/package.json

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

package/src/assets/fixtures/teaser/teaser_standard_25_serif_av_consumption.json

@@ -0,0 +1,28 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "25"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "video"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "sm_4"
+            }
+        }
+    ]
+}

package/src/stories/views/base/tracking/{atiHelperNew.js → atiHelperDs.js}

@@ -1,5 +1,5 @@
 
-import TrackingCookie from '../../components/externalService/trackingCookie.subfeature'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
 
 const isTrackingAllowed = () => {
     const trackingCookie = new TrackingCookie()

package/src/stories/views/base/tracking/{atiMediaHelperNew.js → atiMediaHelperDs.js}

@@ -1,4 +1,4 @@
-import { isTrackingAllowed, pi } from '../tracking/atiHelperNew'
+import { isTrackingAllowed, pi } from 'base/tracking/atiHelperDs'
 
 const ATIMediaHelper = function (
     avType,

package/{dist/views/components/audio/audioElement.subfeature.js → src/stories/views/components/audio/audioElementDs.subfeature.js}

@@ -1,6 +1,6 @@
-import { fireEvent, hr$, listen } from 'hrQueryNew'
-import { uxAction } from '../../base/tracking/atiHelperNew'
-import ATIMediaHelper from '../../base/tracking/atiMediaHelperNew'
+import { fireEvent, hr$, listen } from 'hrQueryDs'
+import { uxAction } from 'base/tracking/atiHelperDs'
+import ATIMediaHelper from 'base/tracking/atiMediaHelperDs'
 
 const AudioElement = function (options, rootElement) {
     'use strict'

package/src/stories/views/components/button/button_round.hbs

@@ -4,6 +4,9 @@
     {{~#if _name}} name="{{_name}}"{{/if}} 
     class="bg-blue-500 hover:bg-blue-700 text-white rounded-full border-4 border-white p-1 {{_addClass}}{{#if _webview}} -webview{{/if}}"
     {{~#if _value}} value="{{_value}}"{{/if}}
+    {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}}
+
+
 >
     {{~#if _showIcon~}}
         {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}

package/{dist/views/components/externalService/trackingCookie.subfeature.js → src/stories/views/components/externalService/trackingCookieDs.subfeature.js}

@@ -1,4 +1,4 @@
-import { getJSONCookie, setJSONCookie } from 'hrQueryNew'
+import { getJSONCookie, setJSONCookie } from 'hrQueryDs'
 
 const TrackingCookie = function () {
     let cookie = {}

package/src/stories/views/components/foo.feature.js

@@ -1,4 +1,4 @@
-import { hr$ } from 'hrQueryNew'
+import { hr$ } from 'hrQueryDs'
 const Foo = (context) => {
     const { options } = context
     const { element: rootElement } = context

package/src/stories/views/components/mediaplayer/{mediaplayerLoader.feature.js → mediaplayerLoaderDs.feature.js}

@@ -1,8 +1,8 @@
-import { hr$, listenOnce } from 'hrQueryNew'
-import { uxAction } from '../../base/tracking/atiHelperNew'
-import VideoOnDemandPlayer from '../video/videoOnDemandPlayer.subfeature'
-import AudioElement from '../audio/audioElement.subfeature'
-import VideoLivestream from '../video/livestream/videoLivestream.subfeature'
+import { hr$, listenOnce, fireEvent, listen } from 'hrQueryDs'
+import { uxAction } from 'base/tracking/atiHelperDs'
+import VideoOnDemandPlayer from 'components/video/videoOnDemandPlayerDs.subfeature'
+import AudioElement from 'components/audio/audioElementDs.subfeature'
+import VideoLivestream from 'components/video/livestream/videoLivestreamDs.subfeature'
 
 const MediaplayerLoader = function (context) {
     'use strict'
@@ -14,9 +14,14 @@ const MediaplayerLoader = function (context) {
         position = options.position,
         teaserSize = options.teaserSize,
         config = options.config,
-        audioContent = hr$('.js-audioElement__audio', rootElement)[0],
-        mediaplayerButton = hr$('.js-mediaplayer__button', rootElement)[0]
-        
+        audioContent = hr$('.js-audioElement__audio', rootElement)[0],    
+        // containerId = options.containerId,
+        rootParent = rootElement.parentNode,
+        mediaplayerButton = hr$('.js-mediaplayer__button', rootParent)[0];
+    
+    let video = false; 
+
+
     const removeVideoHover = function () {
         rootElement.parentNode.parentNode.classList.remove('-imageHover')
         rootElement.parentNode.parentNode.parentNode.classList.remove('-imageHover')
@@ -35,11 +40,24 @@ const MediaplayerLoader = function (context) {
         uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
     }
 
-    const loadOnDemand = function () {
-        console.log("loadOnDemand");
-        new VideoOnDemandPlayer(options)
-        removeVideoHover()
-        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+    
+    const unloadPlayer = function() {
+        console.log("video.pause()");
+        video.pause();
+    }
+
+    const loadOnDemand = function () {    
+        if(!video){
+            console.log("loadOnDemand");
+            video = new VideoOnDemandPlayer(options)
+            removeVideoHover()
+            uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+            listenOnce('player_colosed', unloadPlayer)  
+        } else {
+            console.log("video.play()");
+            listenOnce('player_colosed', unloadPlayer) 
+            video.play();
+        }
     }
 
     const loadAudio = function () {
@@ -48,6 +66,8 @@ const MediaplayerLoader = function (context) {
         uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
     }
 
+
+   
     switch (type) {
         case 'live':
             console.log('live');
@@ -61,7 +81,8 @@ const MediaplayerLoader = function (context) {
         case 'ondemand':
             console.log('ondemand');
             if (position === 'teaser') {
-                listenOnce('click', loadOnDemand, mediaplayerButton)
+              // listenOnce('click', loadOnDemand, mediaplayerButton)
+              listen('click', loadOnDemand, mediaplayerButton)
             } else {
                 loadOnDemand()
             }
@@ -77,5 +98,6 @@ const MediaplayerLoader = function (context) {
             }
             break
     }
+    
 }
 export default MediaplayerLoader

package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif_av_consumption.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"25","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"https://picsum.photos/id/191/480/270","sources":[{"media":"all and (max-width: 39.938em)","sizes":"40vw","srcset":"https://picsum.photos/id/191/320/320 320w, https://picsum.photos/id/191/480/480 480w, https://picsum.photos/id/191/640/640 640w, https://picsum.photos/id/191/960/960 960w"},{"media":"all and (min-width: 40em) and (max-width: 58.938em)","sizes":"25vw","srcset":"https://picsum.photos/id/191/320/180 320w, https://picsum.photos/id/191/480/270 480w, https://picsum.photos/id/191/640/360 640w, https://picsum.photos/id/191/960/540 960w"},{"media":"all and (min-width: 59em)","sizes":"218px","srcset":"https://picsum.photos/id/191/320/180 320w, https://picsum.photos/id/191/480/270 480w, https://picsum.photos/id/191/640/360 640w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":"true","displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":{"isVideo":true,"videoUrl":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4","adaptiveStreamingUrl":"https://hr-vh.akamaihd.net/i/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","videoResolutionLevels":[{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_480x270-50p-700kbit.mp4","verticalResolution":"270"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4","verticalResolution":"288"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_640x360-50p-1200kbit.mp4","verticalResolution":"360"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_960x540-50p-1600kbit.mp4","verticalResolution":"540"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1280x720-50p-3200kbit.mp4","verticalResolution":"720"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1920x1080-50p-5000kbit.mp4","verticalResolution":"1080"}],"videoSubtitleUrl":"","mediaMetadata":"{\"agf\":{\"title\":\"hr-fernsehen__VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"livestream\":\"no\",\"type\":\"content\",\"airdate\":\"14.06.202200:00\",\"program\":\"hr-fernsehen\",\"assetid\":\"5f3912d337889c6c64e48879d80c562b\",\"uurl\":\"as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c2\":\"p2,Y\",\"nol_c5\":\"p5,hessenschau\",\"nol_c7\":\"p7,as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c8\":\"p8,19\",\"nol_c9\":\"p9,_VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"nol_c10\":\"p10,hr-fernsehen\",\"nol_c12\":\"p12,Content\",\"nol_c18\":\"p18,N\",\"length\":\"19\",\"nol_c20\":\"p20,GFKLinkID\"},\"ati\":{\"pageName\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"secondLevelId\":\"4\",\"documentName\":\"video-170288\",\"documentType\":\"hr-nt:video\",\"documentDate\":\"202206141656\",\"chapter\":\"\",\"mediaLabel\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"mediaTheme1\":\"hessenschau\",\"mediaTheme2\":\"\",\"atiSiteId\":\"551104\",\"atiTrackingHost\":\"https://logs1406\"}}","providerKeyWithSublines":"","teaseritem":[{"url":{"16to9":"https://www.hessenschau.de/gesellschaft/polizei-video-100~_t-1655214179068_v-16to9.jpg","16to9_retina":"https://www.hessenschau.de/gesellschaft/polizei-video-100~_t-1655214179068_v-16to9__retina.jpg"}}]},"image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"teaserSize":"hero","teaserType":"standard-ds","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_av_consumption copy.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"50","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":"true","displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":{"isVideo":true,"videoUrl":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4","adaptiveStreamingUrl":"https://hr-vh.akamaihd.net/i/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","videoResolutionLevels":[{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_480x270-50p-700kbit.mp4","verticalResolution":"270"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4","verticalResolution":"288"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_640x360-50p-1200kbit.mp4","verticalResolution":"360"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_960x540-50p-1600kbit.mp4","verticalResolution":"540"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1280x720-50p-3200kbit.mp4","verticalResolution":"720"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1920x1080-50p-5000kbit.mp4","verticalResolution":"1080"}],"videoSubtitleUrl":"","mediaMetadata":"{\"agf\":{\"title\":\"hr-fernsehen__VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"livestream\":\"no\",\"type\":\"content\",\"airdate\":\"14.06.202200:00\",\"program\":\"hr-fernsehen\",\"assetid\":\"5f3912d337889c6c64e48879d80c562b\",\"uurl\":\"as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c2\":\"p2,Y\",\"nol_c5\":\"p5,hessenschau\",\"nol_c7\":\"p7,as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c8\":\"p8,19\",\"nol_c9\":\"p9,_VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"nol_c10\":\"p10,hr-fernsehen\",\"nol_c12\":\"p12,Content\",\"nol_c18\":\"p18,N\",\"length\":\"19\",\"nol_c20\":\"p20,GFKLinkID\"},\"ati\":{\"pageName\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"secondLevelId\":\"4\",\"documentName\":\"video-170288\",\"documentType\":\"hr-nt:video\",\"documentDate\":\"202206141656\",\"chapter\":\"\",\"mediaLabel\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"mediaTheme1\":\"hessenschau\",\"mediaTheme2\":\"\",\"atiSiteId\":\"551104\",\"atiTrackingHost\":\"https://logs1406\"}}","providerKeyWithSublines":"","teaseritem":[{"url":{"16to9":"https://www.hessenschau.de/gesellschaft/polizei-video-100~_t-1655214179068_v-16to9.jpg","16to9_retina":"https://www.hessenschau.de/gesellschaft/polizei-video-100~_t-1655214179068_v-16to9__retina.jpg"}}]},"image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}}}}}

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

@@ -1,8 +1,21 @@
-<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["js-is1to1 px-5 md:px-0 md:col-span-3 md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} "
+    x-data="{ videoStart: false }"
+    {{#switch this.teaserSize~}}
+        {{~#case "25"}}  
+        
+            :class="videoStart ? 'flex-col' : 'flex-row'"
+        {{/case~}}
+    {{~/switch~}}   
+    >
     <figure class="relative {{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">    
         {{> components/teaser/components/teaser_lead }}       
     </figure>
     <div class="{{inline-switch this.teaserSize '["25"]' '["basis-3/5 md:flex-full"]'}} ">
+        {{#switch this.teaserSize~}}
+            {{~#case "25"}}  
+                <button x-show="videoStart" @click="videoStart = false; $dispatch('player_colosed')" class="md:hidden">Video schließen</button>
+            {{/case~}}
+        {{~/switch~}}   
         <header class="md:px-0 {{inline-switch teaserSize '["25"]' '["","px-5"]'}}">
             {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }} 
                 {{> components/teaser/components/teaser_heading 

package/src/stories/views/components/teaser/teaser_standard_av.stories.mdx

@@ -2,6 +2,7 @@ import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
 import teaser from './teaser_standard.hbs'
 
 import teaser50av from './fixtures/teaser_standard_50_serif_av_consumption.json'
+import teaser25av from './fixtures/teaser_standard_25_serif_av_consumption.json'
 
 <Meta
     title="Komponenten/Teaser/AV-Standard"
@@ -47,4 +48,7 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
     <Story name="Standard 50% AV" args={teaser50av.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
+    <Story name="Standard 25" args={teaser25av.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
 </Preview>

package/{dist/views/components/video/livestream/videoLivestream.subfeature.js → src/stories/views/components/video/livestream/videoLivestreamDs.subfeature.js}

@@ -1,5 +1,5 @@
-import { fireEvent, hr$, listen, loadScript } from 'hrQueryNew'
-import TrackingCookie from '../../externalService/trackingCookie.subfeature'
+import { fireEvent, hr$, listen, loadScript } from 'hrQueryDs'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
 
 const VideoLivestream = function (options, rootElement) {
     'use strict'

package/{dist/views/components/video/videoOnDemandPlayer.subfeature.js → src/stories/views/components/video/videoOnDemandPlayerDs.subfeature.js}

@@ -1,5 +1,5 @@
-import { fireEvent, hr$, listen, loadScript } from 'hrQueryNew'
-import TrackingCookie from '../externalService/trackingCookie.subfeature'
+import { fireEvent, hr$, listen, loadScript } from 'hrQueryDs'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
 
 const VideoOnDemandPlayer = function (options, rootElement) {
     'use strict'
@@ -28,8 +28,8 @@ console.log('VideoOnDemandPlayer');
         mediaCollection,
         mediaStreamArray = []
 
-     	console.log(skinPath);
-    /*    console.log(isAdaptiveStream);
+    /* 	console.log(skinPath);
+        console.log(isAdaptiveStream);
         console.log(basePlayerUrl);
         console.log(previewImageUrl);
         console.log(adaptiveStreamingUrl);
@@ -341,8 +341,14 @@ console.log('VideoOnDemandPlayer');
                 player.pause()
             }
         })
+        // listen('hr:global:startVideo:'+playerId, function (event) {
+        //     if (event.detail == 'ardplayer') {
+        //         player.play()
+        //     }
+        // })
+       
     }
-
+    
     if (trackingCookie.isTrackingAccepted('agf') && window.gfkConnector && agfMetadata) {
         gfkConnector.init(function (gfkLinkID) {
             agfMetadata.nol_c20 = 'p20,' + gfkLinkID
@@ -351,6 +357,15 @@ console.log('VideoOnDemandPlayer');
     } else {
         setupPlayer()
     }
+
+    return {
+        play: function() {
+            player.play()
+        },
+        pause: function() {
+            player.pause()
+        }
+    }
 }
 
 export default VideoOnDemandPlayer

package/src/stories/views/components/video/video_element.hbs

@@ -1,5 +1,5 @@
 <div class="c-videoplayer">
-    <div id="{{nextRandom}}" class="relative js-load" data-new-hr-mediaplayer-loader='{
+    <div x-show="videoStart" x-transition.duration.100ms id="{{nextRandom}}" class="js-load" data-new-hr-mediaplayer-loader-ds='{
         "type": "ondemand",
         "position": "{{if _isTeaser 'teaser' 'page'}}",
         "teaserSize" : "{{if ../../this.teasersize ../../this.teasersize '00' }}",
@@ -59,19 +59,26 @@
                 <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>
             {{/with~}}
         {{/unless}}
-        {{#if _isTeaser}}
-            {{#with _teaser}}
+        
+    </div>
+    
+    {{#if _isTeaser}}
+    <div class="relative" x-show="!videoStart" x-transition.duration.100ms>
+        {{#with _teaser}}
+            
                 {{~#if ../_isCopyText~}}
                     {{~> 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="ar__content" _noDelay=../_noDelay ~}}
                 {{else}}
                     {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
-                                 _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
-                                 _clickLabelPrefix2="mediaLink" }}                       
+                                _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
+                                _clickLabelPrefix2="mediaLink" }}                       
                         {{~> 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="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
                     {{/components/base/link }}
                 {{/if}}
-            {{/with}}
-            {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video"}}
-        {{/if}}
-    </div>
+             
+        {{/with}}
+        {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video" _alpineClick="videoStart = !videoStart"}}
+    </div>   
+    {{/if}}
+    
 </div>