hr-design-system-handlebars 1.36.3 → 1.37.0

package/dist/assets/index.css

@@ -1147,6 +1147,12 @@ video {
 .col-span-12 {
   grid-column: span 12 / span 12;
 }
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+.col-span-8 {
+  grid-column: span 8 / span 8;
+}
 .col-span-full {
   grid-column: 1 / -1;
 }
@@ -3034,7 +3040,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1693578855316;
+  counter-reset: cnt1694081209121;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3269,7 +3275,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1693578855316 1;
+  counter-increment: cnt1694081209121 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3285,7 +3291,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1693578855316);
+  content: counter(cnt1694081209121);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5609,10 +5615,6 @@ video {
     padding-top: 1rem;
   }
 
-  .md\:pt-5 {
-    padding-top: 1.25rem;
-  }
-
   .md\:pt-7 {
     padding-top: 1.75rem;
   }

package/dist/assets/js/components/article/components/podcast/podcastChannelRemainingEpisodesLoader.feature.js

@@ -0,0 +1,47 @@
+import { fireEvent, hr$, listen } from 'hrQuery'
+import $ from 'zepto-modules'
+
+require('zepto-modules/callbacks')
+require('zepto-modules/deferred')
+const PodcastChannelRemainingEpisodesLoader = function (context) {
+    'use strict'
+    const { options } = context,
+        { element: rootElement } = context,
+        dynLoadTrigSelector = options.dynLoadTrigSelector,
+        dynLoadTrigElement = hr$(dynLoadTrigSelector, rootElement)[0],
+        dynLoadReplaceSelector = options.dynLoadReplaceSelector,
+        url = options.url
+
+    const handleDynLoad = function (event) {
+        event.preventDefault()
+        dynLoadTrigElement.classList.add('-loading')
+        ajaxLoad(event.currentTarget, true)
+    }
+    const ajaxLoad = function (target, push, cache) {
+        $.ajax({
+            type: 'GET',
+            dataType: 'html',
+            url: url,
+            timeout: 90 * 1000,
+            cache: cache && true,
+            beforeSend: function () {
+                console.log('beforeSend')
+            },
+        })
+            .done(function (data, status, xhr) {
+                hr$(dynLoadReplaceSelector)[0].outerHTML = data
+
+                setTimeout(function () {
+                    fireEvent('hr:podcastChannel:episodeReload')
+                    dynLoadTrigElement.remove()
+                }, 1000)
+            })
+            .fail(function (data, status, xhr) {
+                dynLoadTrigElement.classList.remove('-loading')
+                console.log('fail')
+            })
+    }
+    listen('click', handleDynLoad, dynLoadTrigElement)
+}
+
+export default PodcastChannelRemainingEpisodesLoader

package/dist/views/components/article/components/podcast/podcast_episode_article.hbs

@@ -0,0 +1,40 @@
+<article class="grid grid-page">
+<div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+    {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
+</div>
+<div class="order-1 col-span-8 px-5">
+    {{> components/podcast/components/podcast_player_shorttext }}
+</div>
+<div class="order-3 col-span-8">
+    {{> components/content/content_footer/content_footer 
+        _author=this.audioAuthor
+        _showDate=this.hasDwellTime
+        _date=this.airdateDate
+        _copyright=this.copyright
+        _isArchiveContent=this.isArchiveContent
+        _posterCopyright="poster_copyright"}}
+</div>
+
+<aside class="order-4 col-full md:order-2 md:col-span-4"
+    aria-label='{{loca "appendix_title"}}'>
+    <div class="c-appendix">
+        {{#unless _webview}}
+            {{~#with this.backLinkUrl ~}}
+                {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
+            {{~/with~}}
+
+            {{~#with this.geotag ~}}
+                {{~> modules/geotag/geotag-list ~}}
+            {{~/with~}}
+
+            {{~#with this.topictags ~}}
+                {{~> modules/topictag/topictag-list ~}}
+            {{~/with~}}
+
+            {{~#with this.socialSharing ~}}
+                {{~> modules/socialmedia/shareit ~}}
+            {{~/with~}}
+        {{/unless}}
+    </div>
+</aside>    
+</article>

package/dist/views/components/article/components/podcast/podcast_playlist-inline.hbs

@@ -0,0 +1 @@
+{{> components/podcast/podcast_playlist_player-inline }}

package/dist/views/components/article/components/podcast/podcast_playlist_all_episodes.hbs

@@ -0,0 +1,45 @@
+<article class="grid grid-page">
+    <div class="grid grid-cols-12 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">
+    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+        {{> components/podcast/podcast_playlist_player_all_episodes _isArticlePlayer=true}}      
+    </div>
+    <aside class="grid order-2 col-span-3" aria-label='{{loca "appendix_title"}}'>
+        <div class="c-appendix">
+            {{#unless _webview}}
+                {{~#with this.backLinkUrl ~}}
+                    {{~> base/link/backlink _addClass="appendix__backlink" ~}}
+                {{~/with~}}
+
+                {{~#with this.socialSharing ~}}
+                    {{~> modules/socialmedia/shareit ~}}
+                {{~/with~}}
+            {{/unless}}
+            {{~#with this.programReference~}}
+                {{~#if this.hasReference~}}
+                    <div class="appendix__entry">
+                        {{> modules/program_reference/program_reference }}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+            {{~#with this.appendixLinks~}}
+
+                <div class="appendix__entry">
+                    <div class="o-layout">
+                        <h4 class="appendix__headline text__headline">{{../this.appendixLinksTitle}}</h4>
+                        <ul class="list -appendix -vertical">
+                            {{#each this}}
+                                <li class="list__item -noIndent">
+                                    {{#decorator "base/link/link" _cssClasses="touchArea"}}
+                                        {{this.content.title}}{{~#if
+                                            this.hasIcon}}{{~> components/base/image/icon _icon=this.iconName _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if~}}
+                                    {{/decorator}}
+                                </li>
+                            {{/each}}
+                        </ul>
+                    </div>
+                </div>
+            {{~/with~}}
+        </div>
+    </aside>
+    </div>
+</article>

package/dist/views/components/article/components/podcast/podcast_playlist_article.hbs

@@ -0,0 +1,60 @@
+<article class="grid grid-page">
+    <div class="grid grid-cols-12 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">
+    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+        {{> components/podcast/podcast_playlist_player _isArticlePlayer=true}}
+
+        {{~#if this.remainingPlaylistItems}}
+            <div class="flex items-center justify-center pb-5 js-load"
+                 data-hr-podcast-channel-remaining-episodes-loader='{"dynLoadTrigSelector":".js-load-remaining-items-button","dynLoadReplaceSelector":".js-placeholder-reload", "url":"{{this.reloadUrl}}"}'>
+                {{#> components/button/link_button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
+                    {{> components/button/components/button_label _label="Weitere Episoden laden"}}
+                    {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
+                {{/components/button/link_button}}
+                {{#*inline "htmlProperties"}}
+                    data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}'
+                {{/inline}}
+            </div>
+            <div class="js-placeholder-reload"></div>
+        {{~/if~}}
+    </div>
+
+    <aside class="grid order-2 col-span-3 py-6" aria-label='{{loca "appendix_title"}}'>
+        <div class="c-appendix">
+            {{#unless _webview}}
+                {{~#with this.backLinkUrl ~}}
+                    {{~> base/link/backlink _addClass="appendix__backlink" ~}}
+                {{~/with~}}
+
+                {{~#with this.socialSharing ~}}
+                    {{~> modules/socialmedia/shareit ~}}
+                {{~/with~}}
+            {{/unless}}
+            {{~#with this.programReference~}}
+                {{~#if this.hasReference~}}
+                    <div class="appendix__entry">
+                        {{> modules/program_reference/program_reference }}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+            {{~#with this.appendixLinks~}}
+
+                <div class="appendix__entry">
+                    <div class="o-layout">
+                        <h4 class="appendix__headline text__headline">{{../this.appendixLinksTitle}}</h4>
+                        <ul class="list -appendix -vertical">
+                            {{#each this}}
+                                <li class="list__item -noIndent">
+                                    {{#decorator "base/link/link" _cssClasses="touchArea"}}
+                                        {{this.content.title}}{{~#if
+                                            this.hasIcon}}{{~> components/base/image/icon _icon=this.iconName _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if~}}
+                                    {{/decorator}}
+                                </li>
+                            {{/each}}
+                        </ul>
+                    </div>
+                </div>
+            {{~/with~}}
+        </div>
+    </aside>
+    </div>
+</article>

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

@@ -1,7 +1,7 @@
 {{#unless _isSinglePage}}
   {{#unless this.hideShortText}}
       {{~#with this.shorttext}}
-          <div class="col-span-12 px-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
+          <div class="col-span-12 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
               <span class="c-teaser__shorttext"> {{this}} </span>
           </div>
       {{/with~}}

package/dist/views/components/podcast/podcast_playlist_player-inline.hbs

@@ -0,0 +1,22 @@
+{{~#with this.remainingPlaylistItems}}
+
+  <div  class="flex flex-col col-span-12 gap-5 px-5"
+    x-data="playaudio()" 
+    x-init="listenToGlobalStop()" 
+    ax-load 
+    x-ignore
+    ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+      {{#each this}}
+        <div class="flex pb-5 {{#if @first}}pt-5 border-t border-white {{/if}}{{#unless @last}}border-white border-b{{/unless}}">
+          {{> components/podcast/components/podcast_player_ui
+            _isPlaylistPlayer=true
+            _podcastDuration=this.duration
+            _title=this.title
+            _id=(nextRandom)
+            _first=@first
+          }}
+        </div>
+      {{/each}}
+  </div>
+
+{{/with~}}

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

@@ -1,4 +1,4 @@
-<div class="flex col-span-12 pb-5 border-b border-white">
+<div class="flex w-full py-5 border-b border-white">
   <div class="flex flex-col grow">
     {{!-- First Row --}}
     <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">
@@ -18,25 +18,17 @@
           {{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
         </div>
 
-        {{!-- {{#switch this.realTeaserSize }}
-          {{#case "100"}}
-            {{> components/podcast/components/podcast_playlist_shorttext}}
-          {{/case}}
-        {{/switch}} --}}
-
         {{> components/podcast/components/podcast_playlist_shorttext}}
 
         {{!-- Abo-Dropdown --}}
         {{#if this.isSingleChannel}}
-          
             {{> components/podcast/components/podcast_subscribe_button}}
-          
         {{/if}} 
       </div>
 
       {{!-- Podcast Image --}}
       <div class="flex flex-col pb-5">
-        <div class="w-22 {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}">
+        <div class="w-22 {{#if _isArticlePlayer}} md:w-32 lg:w-42{{else}}{{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}{{/if}} ">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
             _variant="default"
@@ -47,21 +39,11 @@
         </div>
       </div>
     </div>
-
-    {{!-- {{#switch this.realTeaserSize }}
-      {{#case "50"}}
-        <div class="flex flex-row w-full px-5 md:pl-5">
-          {{> components/podcast/components/podcast_playlist_shorttext}}
-        </div>
-      {{/case}}
-    {{/switch}} --}}
-    
-    
   </div>
 </div>
 
 {{!-- Player UI --}}
-<div  class="flex flex-col col-span-12 gap-5 px-5"
+<div  class="flex flex-col col-span-12 gap-5 px-5 {{#if _isArticlePlayer }}pt-5 {{/if}} "
   x-data="playaudio()" 
   x-init="listenToGlobalStop()" 
   ax-load 

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

@@ -0,0 +1,65 @@
+<div class="flex w-full pb-5 border-b border-white">
+  <div class="flex flex-col grow">
+    {{!-- First Row --}}
+    <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">
+      <div class="flex flex-col pr-5 grow">
+        <div class="flex max-h-6">
+          {{!-- Label / Airdate --}}
+          {{#with label}}
+            <span
+              class='sb-label mr-2 rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading bg-labelMedia'>
+              {{ loca this.loca }}
+            </span>
+          {{/with}}
+        </div>
+
+        {{!-- Überschrift: --}}
+        <div class="flex pb-5 pr-2 md:pr-5">
+          {{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
+        </div>
+
+        {{> components/podcast/components/podcast_playlist_shorttext}}
+
+        {{!-- Abo-Dropdown --}}
+        {{#if this.isSingleChannel}}         
+            {{> components/podcast/components/podcast_subscribe_button}}
+        {{/if}} 
+      
+      </div>
+
+      {{!-- Podcast Image --}}
+      <div class="flex flex-col pb-5">
+        <div class="w-22 {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}">
+          {{> components/base/image/responsive_image this.teaseritem
+            _type="podcastEpisodePlayer"
+            _variant="default"
+            _addClass="overflow-hidden"
+            _noDelay=this.dontLazyload
+            _addClassImg="w-full block"
+          }}
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</div>
+
+{{!-- Player UI --}}
+<div  class="flex flex-col col-span-12 gap-5 px-5"
+  x-data="playaudio()" 
+  x-init="listenToGlobalStop()" 
+  ax-load 
+  x-ignore
+  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+    {{#each this.allPlaylistItems}}
+      <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
+        {{> components/podcast/components/podcast_player_ui
+          _isPlaylistPlayer=true
+          _podcastDuration=this.duration
+          _title=this.title
+          _id=(nextRandom)
+          _first=@first
+        }}
+      </div>
+    {{/each}}
+</div>

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

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

package/dist/views_static/components/article/components/podcast/podcast_episode_article.hbs

@@ -0,0 +1,40 @@
+<article class="grid grid-page">
+<div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+    {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
+</div>
+<div class="order-1 col-span-8 px-5">
+    {{> components/podcast/components/podcast_player_shorttext }}
+</div>
+<div class="order-3 col-span-8">
+    {{> components/content/content_footer/content_footer 
+        _author=this.audioAuthor
+        _showDate=this.hasDwellTime
+        _date=this.airdateDate
+        _copyright=this.copyright
+        _isArchiveContent=this.isArchiveContent
+        _posterCopyright="poster_copyright"}}
+</div>
+
+<aside class="order-4 col-full md:order-2 md:col-span-4"
+    aria-label='{{loca "appendix_title"}}'>
+    <div class="c-appendix">
+        {{#unless _webview}}
+            {{~#with this.backLinkUrl ~}}
+                {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
+            {{~/with~}}
+
+            {{~#with this.geotag ~}}
+                {{~> modules/geotag/geotag-list ~}}
+            {{~/with~}}
+
+            {{~#with this.topictags ~}}
+                {{~> modules/topictag/topictag-list ~}}
+            {{~/with~}}
+
+            {{~#with this.socialSharing ~}}
+                {{~> modules/socialmedia/shareit ~}}
+            {{~/with~}}
+        {{/unless}}
+    </div>
+</aside>    
+</article>

package/dist/views_static/components/article/components/podcast/podcast_playlist-inline.hbs

@@ -0,0 +1 @@
+{{> components/podcast/podcast_playlist_player-inline }}

package/dist/views_static/components/article/components/podcast/podcast_playlist_all_episodes.hbs

@@ -0,0 +1,45 @@
+<article class="grid grid-page">
+    <div class="grid grid-cols-12 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">
+    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+        {{> components/podcast/podcast_playlist_player_all_episodes _isArticlePlayer=true}}      
+    </div>
+    <aside class="grid order-2 col-span-3" aria-label='{{loca "appendix_title"}}'>
+        <div class="c-appendix">
+            {{#unless _webview}}
+                {{~#with this.backLinkUrl ~}}
+                    {{~> base/link/backlink _addClass="appendix__backlink" ~}}
+                {{~/with~}}
+
+                {{~#with this.socialSharing ~}}
+                    {{~> modules/socialmedia/shareit ~}}
+                {{~/with~}}
+            {{/unless}}
+            {{~#with this.programReference~}}
+                {{~#if this.hasReference~}}
+                    <div class="appendix__entry">
+                        {{> modules/program_reference/program_reference }}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+            {{~#with this.appendixLinks~}}
+
+                <div class="appendix__entry">
+                    <div class="o-layout">
+                        <h4 class="appendix__headline text__headline">{{../this.appendixLinksTitle}}</h4>
+                        <ul class="list -appendix -vertical">
+                            {{#each this}}
+                                <li class="list__item -noIndent">
+                                    {{#decorator "base/link/link" _cssClasses="touchArea"}}
+                                        {{this.content.title}}{{~#if
+                                            this.hasIcon}}{{~> components/base/image/icon _icon=this.iconName _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if~}}
+                                    {{/decorator}}
+                                </li>
+                            {{/each}}
+                        </ul>
+                    </div>
+                </div>
+            {{~/with~}}
+        </div>
+    </aside>
+    </div>
+</article>

package/dist/views_static/components/article/components/podcast/podcast_playlist_article.hbs

@@ -0,0 +1,60 @@
+<article class="grid grid-page">
+    <div class="grid grid-cols-12 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">
+    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+        {{> components/podcast/podcast_playlist_player _isArticlePlayer=true}}
+
+        {{~#if this.remainingPlaylistItems}}
+            <div class="flex items-center justify-center pb-5 js-load"
+                 data-hr-podcast-channel-remaining-episodes-loader='{"dynLoadTrigSelector":".js-load-remaining-items-button","dynLoadReplaceSelector":".js-placeholder-reload", "url":"{{this.reloadUrl}}"}'>
+                {{#> components/button/link_button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
+                    {{> components/button/components/button_label _label="Weitere Episoden laden"}}
+                    {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
+                {{/components/button/link_button}}
+                {{#*inline "htmlProperties"}}
+                    data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}'
+                {{/inline}}
+            </div>
+            <div class="js-placeholder-reload"></div>
+        {{~/if~}}
+    </div>
+
+    <aside class="grid order-2 col-span-3 py-6" aria-label='{{loca "appendix_title"}}'>
+        <div class="c-appendix">
+            {{#unless _webview}}
+                {{~#with this.backLinkUrl ~}}
+                    {{~> base/link/backlink _addClass="appendix__backlink" ~}}
+                {{~/with~}}
+
+                {{~#with this.socialSharing ~}}
+                    {{~> modules/socialmedia/shareit ~}}
+                {{~/with~}}
+            {{/unless}}
+            {{~#with this.programReference~}}
+                {{~#if this.hasReference~}}
+                    <div class="appendix__entry">
+                        {{> modules/program_reference/program_reference }}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+            {{~#with this.appendixLinks~}}
+
+                <div class="appendix__entry">
+                    <div class="o-layout">
+                        <h4 class="appendix__headline text__headline">{{../this.appendixLinksTitle}}</h4>
+                        <ul class="list -appendix -vertical">
+                            {{#each this}}
+                                <li class="list__item -noIndent">
+                                    {{#decorator "base/link/link" _cssClasses="touchArea"}}
+                                        {{this.content.title}}{{~#if
+                                            this.hasIcon}}{{~> components/base/image/icon _icon=this.iconName _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if~}}
+                                    {{/decorator}}
+                                </li>
+                            {{/each}}
+                        </ul>
+                    </div>
+                </div>
+            {{~/with~}}
+        </div>
+    </aside>
+    </div>
+</article>

package/dist/views_static/components/podcast/components/podcast_player_shorttext.hbs

@@ -1,7 +1,7 @@
 {{#unless _isSinglePage}}
   {{#unless this.hideShortText}}
       {{~#with this.shorttext}}
-          <div class="col-span-12 px-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
+          <div class="col-span-12 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
               <span class="c-teaser__shorttext"> {{this}} </span>
           </div>
       {{/with~}}

package/dist/views_static/components/podcast/podcast_playlist_player-inline.hbs

@@ -0,0 +1,22 @@
+{{~#with this.remainingPlaylistItems}}
+
+  <div  class="flex flex-col col-span-12 gap-5 px-5"
+    x-data="playaudio()" 
+    x-init="listenToGlobalStop()" 
+    ax-load 
+    x-ignore
+    ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+      {{#each this}}
+        <div class="flex pb-5 {{#if @first}}pt-5 border-t border-white {{/if}}{{#unless @last}}border-white border-b{{/unless}}">
+          {{> components/podcast/components/podcast_player_ui
+            _isPlaylistPlayer=true
+            _podcastDuration=this.duration
+            _title=this.title
+            _id=(nextRandom)
+            _first=@first
+          }}
+        </div>
+      {{/each}}
+  </div>
+
+{{/with~}}

package/dist/views_static/components/podcast/podcast_playlist_player.hbs

@@ -1,4 +1,4 @@
-<div class="flex col-span-12 pb-5 border-b border-white">
+<div class="flex w-full py-5 border-b border-white">
   <div class="flex flex-col grow">
     {{!-- First Row --}}
     <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">
@@ -18,25 +18,17 @@
           {{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
         </div>
 
-        {{!-- {{#switch this.realTeaserSize }}
-          {{#case "100"}}
-            {{> components/podcast/components/podcast_playlist_shorttext}}
-          {{/case}}
-        {{/switch}} --}}
-
         {{> components/podcast/components/podcast_playlist_shorttext}}
 
         {{!-- Abo-Dropdown --}}
         {{#if this.isSingleChannel}}
-          
             {{> components/podcast/components/podcast_subscribe_button}}
-          
         {{/if}} 
       </div>
 
       {{!-- Podcast Image --}}
       <div class="flex flex-col pb-5">
-        <div class="w-22 {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}">
+        <div class="w-22 {{#if _isArticlePlayer}} md:w-32 lg:w-42{{else}}{{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}{{/if}} ">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
             _variant="default"
@@ -47,21 +39,11 @@
         </div>
       </div>
     </div>
-
-    {{!-- {{#switch this.realTeaserSize }}
-      {{#case "50"}}
-        <div class="flex flex-row w-full px-5 md:pl-5">
-          {{> components/podcast/components/podcast_playlist_shorttext}}
-        </div>
-      {{/case}}
-    {{/switch}} --}}
-    
-    
   </div>
 </div>
 
 {{!-- Player UI --}}
-<div  class="flex flex-col col-span-12 gap-5 px-5"
+<div  class="flex flex-col col-span-12 gap-5 px-5 {{#if _isArticlePlayer }}pt-5 {{/if}} "
   x-data="playaudio()" 
   x-init="listenToGlobalStop()" 
   ax-load