hr-design-system-handlebars 0.91.0 → 0.91.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.91.1 (Mon Nov 28 2022)
+
+#### 🐛 Bug Fix
+
+- Podcast delivery integration fixes [#401](https://github.com/mumprod/hr-design-system-handlebars/pull/401) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.91.0 (Mon Nov 28 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1256,6 +1256,9 @@ video {
   -ms-flex-pack: distribute;
       justify-content: space-around;
 }
+.gap-5 {
+  gap: 1.25rem;
+}
 .gap-1\.5 {
   gap: 0.375rem;
 }
@@ -1265,9 +1268,6 @@ video {
 .gap-2 {
   gap: 0.5rem;
 }
-.gap-5 {
-  gap: 1.25rem;
-}
 .gap-x-2 {
   -webkit-column-gap: 0.5rem;
      -moz-column-gap: 0.5rem;
@@ -2253,7 +2253,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1669645702651;
+  counter-reset: cnt1669646367612;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2639,7 +2639,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1669645702651 1;
+  counter-increment: cnt1669646367612 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2655,7 +2655,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1669645702651);
+  content: counter(cnt1669646367612);
 }
 .\[-T\:\+Z\] {
   --t: +Z;

package/dist/assets/vendor/js/podcast_player.alpine.js

@@ -6,6 +6,8 @@ export default function playaudio(){
                 let _player = {}
                 _player.id = id
                 _player.button = document.querySelector('#playbutton'+id)
+                _player.playIcon = _player.button.querySelector('.js-playbutton')
+                _player.pauseIcon = _player.button.querySelector('.js-pausebutton')
                 _player.range = document.querySelector('#range'+id)
                 _player.timeDisplay = document.querySelector('#timedisplay'+id)
                 _player.audioElement = this.$el
@@ -22,7 +24,7 @@ export default function playaudio(){
             },
             listenToGlobalStop(){
                 console.log('global listener init')
-                window.addEventListener('hr:global:stopOtherAVs', this.stopAllOtherPlayers)
+                window.addEventListener('hr:global:stopOtherAVs', this.stopAllPlayersBecauseOfGlobalStop.bind(this))
             },
             rangeInput(id) {                     
                 if(this.playlist[id].init == false) {
@@ -31,7 +33,6 @@ export default function playaudio(){
                 }      
                 this.playlist[id].audioElement.currentTime = (this.playlist[id].range.value/1000) * this.playlist[id].audioElement.duration               
             },
-
             setTime(duration, id) {
                 console.log('time set: ' + duration)
                 
@@ -67,35 +68,34 @@ export default function playaudio(){
                 if(this.playlist[id].init == true){
                     this.stopAudio(id)
                 } else {
-                   // this.$dispatch('stopotherplayers',{playerId: id});
-                    this.stopAllOtherPlayers(id)
-
+                    this.stopAllOtherPlayers(id, false)
                     this.startAudio(id)
                     this.playlist[id].range.parentNode.classList.remove('max-h-0')
                     this.playlist[id].range.parentNode.classList.add('max-h-9')
-                    this.playlist[id].button.querySelector('.js-playbutton').classList.add('hidden')
-                    this.playlist[id].button.querySelector('.js-pausebutton').classList.remove('hidden')
-                    //let event = new Event("hr:global:stopOtherAVs");
-                    //window.dispatchEvent(event);
+                    this.playlist[id].playIcon.classList.add('hidden')
+                    this.playlist[id].pauseIcon.classList.remove('hidden')
+                    let event = new Event("hr:global:stopOtherAVs");
+                    event.id = id;
+                    window.dispatchEvent(event);
                 }
             },
 
-            stopAllOtherPlayers(id){  //id=2
-                let players = document.querySelectorAll('audio.hidden')
-                for (let i=0; i<players.length; i++){
-                    if ( players[i].dataset.id != id){                            
-                        this.stopAudio(players[i].dataset.id)
-                        
-                        // this.playlist[players[i].dataset.id].init=false;
-                        // this.playlist[players[i].dataset.id].audioElement.pause()
-                        // this.playlist[players[i].dataset.id].button.querySelector('.js-playbutton').classList.remove('hidden')
-                        // this.playlist[players[i].dataset.id].button.querySelector('.js-pausebutton').classList.add('hidden')
-                        this.playlist[players[i].dataset.id].range.parentNode.classList.add('max-h-0')
-                        this.playlist[players[i].dataset.id].range.parentNode.classList.remove('max-h-9')
+            stopAllOtherPlayers(id, preventMinimize){  
+                for (const index in this.playlist) {
+                    if(index != id && this.playlist[index].currentlyPlaying == true){
+                        console.log("STOP: ", index)
+                        this.stopAudio(index)
+                        if(!preventMinimize){
+                            this.playlist[index].range.parentNode.classList.add('max-h-0')
+                            this.playlist[index].range.parentNode.classList.remove('max-h-9')
+                        }
                     }
-                }              
-            },
+                }
 
+            },
+            stopAllPlayersBecauseOfGlobalStop(event){
+                this.stopAllOtherPlayers(event.id, true);
+            },
             startAudio(id) {
                 console.log('start audio '+ id )
                 if(this.playlist[id].init == false){
@@ -111,8 +111,8 @@ export default function playaudio(){
                 this.playlist[id].audioElement.pause()
                 this.playlist[id].init = false; 
                 this.playlist[id].currentlyPlaying = false;  
-                this.playlist[id].button.querySelector('.js-playbutton').classList.remove('hidden')
-                this.playlist[id].button.querySelector('.js-pausebutton').classList.add('hidden')          
+                this.playlist[id].playIcon.classList.remove('hidden')
+                this.playlist[id].pauseIcon.classList.add('hidden')          
             },
 
             initAudioEventListener(id) {               

package/dist/views/components/teaser/podcast/podcast-playlist.hbs

@@ -1,4 +1,4 @@
 
-    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{~inline-switch this.teaserSize '["50","100"]' '[" md:col-span-6",""]'}}" >
+    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"," "]'}}" >
         {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
     </div>

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

@@ -1,3 +1,3 @@
-<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{~inline-switch this.teaserSize '["50","100"]' '[" md:col-span-6",""]'}}" > 
+<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{~inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
     {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}
 </div>

package/dist/views/components/teaser/podcast/podcast_downloadbutton.hbs

@@ -1,5 +1,5 @@
 <button class="flex {{#if _addClass}} {{_addClass}} {{/if}}">
-    <a href="{{_url}}" class="h-6 button js-load" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
+    <a href="{{_url}}" class="h-6 js-load" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
         {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
     </a>
 </button>

package/dist/views/components/teaser/podcast/podcast_player.hbs

@@ -37,9 +37,9 @@
       <div class="flex flex-col ">
         <div class="w-24 md:w-42">
           {{> components/base/image/responsive_image this.teaseritem 
-            _type=this.teaserType
+            _type="podcastEpisodePlayer"
             _variant="default"
-            _addClass=" overflow-hidden ar--100"
+            _addClass="overflow-hidden"
             _noDelay=this.dontLazyload 
             _addClassImg="w-full h-24 md:h-42 block"
           }}
@@ -54,91 +54,30 @@
       x-init="listenToGlobalStop()"
       ax-load
       x-ignore
-      ax-load-src="/vendor/js/podcast_player.alpine.js">
+      ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
       {{> components/teaser/podcast/podcast_player_ui 
         _isPlaylistPlayer=false
-        _podcastDuration=podcastDuration _id=(nextRandom) 
+        _podcastDuration=podcastDuration
+        _id=(nextRandom) 
         _first=true
       }}    
     </div>
   
     {{!-- Abo-Dropdown    --}}
     <div class="flex flex-row p-5 md:pr-0">
-      {{#with this.podcastChannel}}        
-        <div class="flex">
-          {{!-- Container  --}}
-          <div x-cloak x-data="{
-              open: false,
-              toggle() {
-                  if (this.open) {
-                      return this.close()
-                  }
-                  this.$refs.button.focus()
-                  this.open = true
-              },
-              close(focusAfter) {
-                  if (! this.open) return
-                  this.open = false
-                  focusAfter && focusAfter.focus()
-              }}"
-                x-on:keydown.escape.prevent.stop="close($refs.button)"
-                x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-                x-id="['dropdown-button']"
-                class="relative"
-          >
-
-            {{!-- Button --}}
-            <button
-              x-ref="button"
-              x-on:click="toggle()"
-              :aria-expanded="open"
-              :aria-controls="$id('dropdown-button')"
-              type="button"
-              class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren
-              <div x-show="open">
-                {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
-              </div>
-              <div x-show="!open">
-                {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}
-              </div>
-            </button>
-
-            {{!-- Flyout --}}
-            <div
-              x-ref="panel"
-              x-show="open"
-              x-transition.origin.top.left
-              x-on:click.outside="close($refs.button)"
-              :id="$id('dropdown-button')"
-              style="display: none;"
-              class="absolute left-0 flex flex-col w-full px-2 text-sm text-white shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"
-            >
-              {{#with this.podcastHoster}}
-                <ul>
-                  {{#each this}}
-                    <li class="border-b last:border-0"> 
-                      <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"
-                        title="{{this.podcastHosterName}}" 
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
-                    </li>
-                  {{/each}}
-                </ul>
-              {{/with}}
-               
-            </div>
-          </div>
-        </div>
+      {{#with this.podcastChannel}}       
+        {{> components/teaser/podcast/podcast_subscribe_button}}
       {{/with}}
 
-      {{!-- Sendungs-Link --}}
-      <div class="flex justify-end w-full pl-4 md:pr-52">
-        <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">
-          <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>
-          <a class="underline" href="#">{{#with this.teaserInfo}} {{~#if this.showTeaserInfoChannel}} <span class="text__byline">{{../this.podcastChannel.title}}</span>{{/if}} {{/with}}</a>
+      {{#with this.podcastChannel}}    
+        {{!-- Sendungs-Link --}}
+        <div class="flex justify-end w-full pl-4 md:pr-52">
+          <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">
+            <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>
+            <a class="underline" href="{{this.url}}">{{this.title}}</a>
+          </div>
         </div>
-      </div>
+      {{/with}}          
     </div>
   </div>  
 </div>

package/dist/views/components/teaser/podcast/podcast_player_ui.hbs

@@ -73,7 +73,8 @@
                 _duration=podcastDuration 
                 _currentTimeClasses="font-bold text-orange-layout" 
                 _durationClasses="text-blue-science" 
-                _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}
+                _id=_id
+                _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}              
             </div>
         {{/unless}}
         

package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -36,7 +36,7 @@
       <div class="flex flex-col ">
         <div class="w-24 md:w-42">
           {{> components/base/image/responsive_image this.teaseritem 
-            _type=this.teaserType
+            _type="podcastEpisodePlayer"
             _variant="default"
             _addClass="overflow-hidden"
             _noDelay=this.dontLazyload 
@@ -65,7 +65,7 @@
     x-init="listenToGlobalStop()"
     ax-load
     x-ignore
-    ax-load-src="/vendor/js/podcast_player.alpine.js">
+    ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
       {{#with this.playlistItems}}
         {{#each this}}
           <div class="flex pb-5 border-b {{#unless @last}}border-white{{/unless}}" >

package/dist/views/components/teaser/podcast/podcast_title.hbs

@@ -1,5 +1,5 @@
 {{#decorator 'components/base/link' _css="font-headingSerif font-bold text-base mt-2.5 text-toplineColor line-clamp-4 md:line-clamp-2 ..." }} 
-    <span class="block mt-0.5 group-hover:underline text-blue-science {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["100","50"]''["text-base md:text-2xl","text-base md:text-lg"]' ~}}">
-    {{~_title~}}
+    <span class="block mt-0.5 group-hover:underline text-blue-science {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
+        {{~_title~}}
     </span>
 {{/decorator}}

package/package.json

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

package/src/assets/vendor/js/podcast_player.alpine.js

@@ -6,6 +6,8 @@ export default function playaudio(){
                 let _player = {}
                 _player.id = id
                 _player.button = document.querySelector('#playbutton'+id)
+                _player.playIcon = _player.button.querySelector('.js-playbutton')
+                _player.pauseIcon = _player.button.querySelector('.js-pausebutton')
                 _player.range = document.querySelector('#range'+id)
                 _player.timeDisplay = document.querySelector('#timedisplay'+id)
                 _player.audioElement = this.$el
@@ -22,7 +24,7 @@ export default function playaudio(){
             },
             listenToGlobalStop(){
                 console.log('global listener init')
-                window.addEventListener('hr:global:stopOtherAVs', this.stopAllOtherPlayers)
+                window.addEventListener('hr:global:stopOtherAVs', this.stopAllPlayersBecauseOfGlobalStop.bind(this))
             },
             rangeInput(id) {                     
                 if(this.playlist[id].init == false) {
@@ -31,7 +33,6 @@ export default function playaudio(){
                 }      
                 this.playlist[id].audioElement.currentTime = (this.playlist[id].range.value/1000) * this.playlist[id].audioElement.duration               
             },
-
             setTime(duration, id) {
                 console.log('time set: ' + duration)
                 
@@ -67,35 +68,34 @@ export default function playaudio(){
                 if(this.playlist[id].init == true){
                     this.stopAudio(id)
                 } else {
-                   // this.$dispatch('stopotherplayers',{playerId: id});
-                    this.stopAllOtherPlayers(id)
-
+                    this.stopAllOtherPlayers(id, false)
                     this.startAudio(id)
                     this.playlist[id].range.parentNode.classList.remove('max-h-0')
                     this.playlist[id].range.parentNode.classList.add('max-h-9')
-                    this.playlist[id].button.querySelector('.js-playbutton').classList.add('hidden')
-                    this.playlist[id].button.querySelector('.js-pausebutton').classList.remove('hidden')
-                    //let event = new Event("hr:global:stopOtherAVs");
-                    //window.dispatchEvent(event);
+                    this.playlist[id].playIcon.classList.add('hidden')
+                    this.playlist[id].pauseIcon.classList.remove('hidden')
+                    let event = new Event("hr:global:stopOtherAVs");
+                    event.id = id;
+                    window.dispatchEvent(event);
                 }
             },
 
-            stopAllOtherPlayers(id){  //id=2
-                let players = document.querySelectorAll('audio.hidden')
-                for (let i=0; i<players.length; i++){
-                    if ( players[i].dataset.id != id){                            
-                        this.stopAudio(players[i].dataset.id)
-                        
-                        // this.playlist[players[i].dataset.id].init=false;
-                        // this.playlist[players[i].dataset.id].audioElement.pause()
-                        // this.playlist[players[i].dataset.id].button.querySelector('.js-playbutton').classList.remove('hidden')
-                        // this.playlist[players[i].dataset.id].button.querySelector('.js-pausebutton').classList.add('hidden')
-                        this.playlist[players[i].dataset.id].range.parentNode.classList.add('max-h-0')
-                        this.playlist[players[i].dataset.id].range.parentNode.classList.remove('max-h-9')
+            stopAllOtherPlayers(id, preventMinimize){  
+                for (const index in this.playlist) {
+                    if(index != id && this.playlist[index].currentlyPlaying == true){
+                        console.log("STOP: ", index)
+                        this.stopAudio(index)
+                        if(!preventMinimize){
+                            this.playlist[index].range.parentNode.classList.add('max-h-0')
+                            this.playlist[index].range.parentNode.classList.remove('max-h-9')
+                        }
                     }
-                }              
-            },
+                }
 
+            },
+            stopAllPlayersBecauseOfGlobalStop(event){
+                this.stopAllOtherPlayers(event.id, true);
+            },
             startAudio(id) {
                 console.log('start audio '+ id )
                 if(this.playlist[id].init == false){
@@ -111,8 +111,8 @@ export default function playaudio(){
                 this.playlist[id].audioElement.pause()
                 this.playlist[id].init = false; 
                 this.playlist[id].currentlyPlaying = false;  
-                this.playlist[id].button.querySelector('.js-playbutton').classList.remove('hidden')
-                this.playlist[id].button.querySelector('.js-pausebutton').classList.add('hidden')          
+                this.playlist[id].playIcon.classList.remove('hidden')
+                this.playlist[id].pauseIcon.classList.add('hidden')          
             },
 
             initAudioEventListener(id) {               

package/src/stories/views/components/teaser/podcast/podcast-playlist.hbs

@@ -1,4 +1,4 @@
 
-    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{~inline-switch this.teaserSize '["50","100"]' '[" md:col-span-6",""]'}}" >
+    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"," "]'}}" >
         {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
     </div>

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

@@ -1,3 +1,3 @@
-<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{~inline-switch this.teaserSize '["50","100"]' '[" md:col-span-6",""]'}}" > 
+<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{~inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
     {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}
 </div>

package/src/stories/views/components/teaser/podcast/podcast_downloadbutton.hbs

@@ -1,5 +1,5 @@
 <button class="flex {{#if _addClass}} {{_addClass}} {{/if}}">
-    <a href="{{_url}}" class="h-6 button js-load" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
+    <a href="{{_url}}" class="h-6 js-load" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
         {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
     </a>
 </button>

package/src/stories/views/components/teaser/podcast/podcast_player.hbs

@@ -37,9 +37,9 @@
       <div class="flex flex-col ">
         <div class="w-24 md:w-42">
           {{> components/base/image/responsive_image this.teaseritem 
-            _type=this.teaserType
+            _type="podcastEpisodePlayer"
             _variant="default"
-            _addClass=" overflow-hidden ar--100"
+            _addClass="overflow-hidden"
             _noDelay=this.dontLazyload 
             _addClassImg="w-full h-24 md:h-42 block"
           }}
@@ -54,91 +54,30 @@
       x-init="listenToGlobalStop()"
       ax-load
       x-ignore
-      ax-load-src="/vendor/js/podcast_player.alpine.js">
+      ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
       {{> components/teaser/podcast/podcast_player_ui 
         _isPlaylistPlayer=false
-        _podcastDuration=podcastDuration _id=(nextRandom) 
+        _podcastDuration=podcastDuration
+        _id=(nextRandom) 
         _first=true
       }}    
     </div>
   
     {{!-- Abo-Dropdown    --}}
     <div class="flex flex-row p-5 md:pr-0">
-      {{#with this.podcastChannel}}        
-        <div class="flex">
-          {{!-- Container  --}}
-          <div x-cloak x-data="{
-              open: false,
-              toggle() {
-                  if (this.open) {
-                      return this.close()
-                  }
-                  this.$refs.button.focus()
-                  this.open = true
-              },
-              close(focusAfter) {
-                  if (! this.open) return
-                  this.open = false
-                  focusAfter && focusAfter.focus()
-              }}"
-                x-on:keydown.escape.prevent.stop="close($refs.button)"
-                x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-                x-id="['dropdown-button']"
-                class="relative"
-          >
-
-            {{!-- Button --}}
-            <button
-              x-ref="button"
-              x-on:click="toggle()"
-              :aria-expanded="open"
-              :aria-controls="$id('dropdown-button')"
-              type="button"
-              class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren
-              <div x-show="open">
-                {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
-              </div>
-              <div x-show="!open">
-                {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}
-              </div>
-            </button>
-
-            {{!-- Flyout --}}
-            <div
-              x-ref="panel"
-              x-show="open"
-              x-transition.origin.top.left
-              x-on:click.outside="close($refs.button)"
-              :id="$id('dropdown-button')"
-              style="display: none;"
-              class="absolute left-0 flex flex-col w-full px-2 text-sm text-white shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"
-            >
-              {{#with this.podcastHoster}}
-                <ul>
-                  {{#each this}}
-                    <li class="border-b last:border-0"> 
-                      <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"
-                        title="{{this.podcastHosterName}}" 
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
-                    </li>
-                  {{/each}}
-                </ul>
-              {{/with}}
-               
-            </div>
-          </div>
-        </div>
+      {{#with this.podcastChannel}}       
+        {{> components/teaser/podcast/podcast_subscribe_button}}
       {{/with}}
 
-      {{!-- Sendungs-Link --}}
-      <div class="flex justify-end w-full pl-4 md:pr-52">
-        <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">
-          <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>
-          <a class="underline" href="#">{{#with this.teaserInfo}} {{~#if this.showTeaserInfoChannel}} <span class="text__byline">{{../this.podcastChannel.title}}</span>{{/if}} {{/with}}</a>
+      {{#with this.podcastChannel}}    
+        {{!-- Sendungs-Link --}}
+        <div class="flex justify-end w-full pl-4 md:pr-52">
+          <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">
+            <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>
+            <a class="underline" href="{{this.url}}">{{this.title}}</a>
+          </div>
         </div>
-      </div>
+      {{/with}}          
     </div>
   </div>  
 </div>

package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs

@@ -73,7 +73,8 @@
                 _duration=podcastDuration 
                 _currentTimeClasses="font-bold text-orange-layout" 
                 _durationClasses="text-blue-science" 
-                _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}
+                _id=_id
+                _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}              
             </div>
         {{/unless}}
         

package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -36,7 +36,7 @@
       <div class="flex flex-col ">
         <div class="w-24 md:w-42">
           {{> components/base/image/responsive_image this.teaseritem 
-            _type=this.teaserType
+            _type="podcastEpisodePlayer"
             _variant="default"
             _addClass="overflow-hidden"
             _noDelay=this.dontLazyload 
@@ -65,7 +65,7 @@
     x-init="listenToGlobalStop()"
     ax-load
     x-ignore
-    ax-load-src="/vendor/js/podcast_player.alpine.js">
+    ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
       {{#with this.playlistItems}}
         {{#each this}}
           <div class="flex pb-5 border-b {{#unless @last}}border-white{{/unless}}" >

package/src/stories/views/components/teaser/podcast/podcast_title.hbs

@@ -1,5 +1,5 @@
 {{#decorator 'components/base/link' _css="font-headingSerif font-bold text-base mt-2.5 text-toplineColor line-clamp-4 md:line-clamp-2 ..." }} 
-    <span class="block mt-0.5 group-hover:underline text-blue-science {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["100","50"]''["text-base md:text-2xl","text-base md:text-lg"]' ~}}">
-    {{~_title~}}
+    <span class="block mt-0.5 group-hover:underline text-blue-science {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
+        {{~_title~}}
     </span>
 {{/decorator}}