hr-design-system-handlebars 1.36.2 → 1.37.0

package/src/stories/views/components/article/components/podcast/fixtures/podcast_player_playlist.json

@@ -0,0 +1 @@
+{"teaserPodcastPlaylist":{"logicItem":{"includePath":"components/article/components/podcast/podcast_playlist_article","includeModel":{"teaserSize":"100","realTeaserSize":"100","isSingleChannel":true,"url":"#url","title":"Im Haifischbecken - der Social-Media-Podcast","shortText":"shortText","dontLazyload":true,"genreImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/aufmacher-im-haifischbecken-100_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/aufmacher-im-haifischbecken-100_v-1to1__small.jpg 380w, images/aufmacher-im-haifischbecken-100_v-1to1__medium.jpg 480w, images/aufmacher-im-haifischbecken-100_v-1to1.jpg 720w, images/aufmacher-im-haifischbecken-100_v-1to1__large.jpg 960w"}]}},"remainingPlaylistItems":true,"allEpisodeUrl":{"url":"#","isTargetBlank":false},"playlistItems":[{"byline":"Byline","title":"Ein Podcast-Title","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"100","realTeaserSize":"100","isMobile1to1":false,"airdateDate":{"htmlDateTime":"2022-10-31T19:30+0200","htmlDate":"31.10.2022","date":"31.10.22","dateSeparatorTime":"31.10.22, 19:30"},"teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"duration":"53:13","hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"podcastChannel":{"title":"hr2 Doppelkopf","url":"#ChannelURL","podcastHoster":[{"podcastHosterUrl":"https://podcasts.apple.com/podcast/hr2-doppelkopf/id212822590","podcastHosterName":"ITunes"},{"podcastHosterUrl":"https://podcast.hr.de/hr2_doppelkopf/podcast.xml","podcastHosterName":"RSS"},{"podcastHosterUrl":"https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2hyMl9kb3BwZWxrb3BmL3BvZGNhc3QueG1s?hl=de","podcastHosterName":"Google Podcasts"},{"podcastHosterUrl":"https://www.ardaudiothek.de/episode/hr2-doppelkopf/ich-hoere-bei-jedem-geraeusch-gleich-die-tonhoehe-oder-komponist-und-theatermacher-heiner-goebbels-erneuert-das-musiktheater/hr2-kultur/12056783/","podcastHosterName":"ARD Audiothek"}]},"audioUrl":"https://mp3podcasthrdl-a.akamaihd.net/mp3/podcast/hr2_doppelkopf/hr2_doppelkopf_20221031_96251016.mp3","podcastDownloadUrl":"https://mp3podcasthrdl-a.akamaihd.net/mp3/podcast/hr2_doppelkopf/hr2_doppelkopf_20221031_96251016.mp3","teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"mediaMetadata":{"agf":{"title":"hr-fernsehen_Hessischer Rundfunk_Ein aufgewecktes Kerlchen_06.10.2022 04:40","livestream":"no","type":"content","airdate":"06.10.2022 04:40","program":"hr-fernsehen","nol_c18":"p18,N","uurl":"/mp3/podcast/hr4_polizeireport/hr4_polizeireport_20221006_95936793.mp3","nol_c7":"p7,/mp3/podcast/hr4_polizeireport/hr4_polizeireport_20221006_95936793.mp3","nol_c8":"p8,131","nol_c9":"p9,Hessischer Rundfunk_Ein aufgewecktes Kerlchen_06.10.2022 04:40","nol_c10":"p10,hr-fernsehen","nol_c12":"p12,Content","assetid":"hr4_polizeireport_95936793","nol_c2":"p2,N","nol_c5":"p5,hr4","length":"131","nol_c20":"p20,GFKLinkID"},"ati":{"pageName":"Ein aufgewecktes Kerlchen","secondLevelId":"2","documentName":"podcast-episode-108850","documentType":"hr-nt:podcastEpisode","documentDate":"2022-10-06T06:46:25+02:00","chapter":"podcast::polizeireport","mediaLabel":"Ein aufgewecktes Kerlchen","mediaTheme1":"hr4","mediaTheme2":"podcast::polizeireport","atiSiteId":"578129","atiTrackingHost":"https://logs1407"},"piano":{"av_content_id":"podcast-episode-108850","av_content":"Ein aufgewecktes Kerlchen","av_content_type":"Audio","av_content_duration":131000,"av_broadcasting_type":"OnDemand","av_content_level1":"hr4","av_content_level2":"podcast","av_content_level3":"polizeireport","hr_document_type":"hr-nt:podcastEpisode","site_level2_id":"2"}},"documentSection":"Kultur","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":false,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":true,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Stefan Fricke","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":true,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h2","icon":"ortsmarke","imageVariant":"topteaser","hideShortText":true,"shorttext":"Bla ..... 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 liebe Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"isPodcast":true,"toModel":{"audioElement":{"isPodcast":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50"}}}},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"podcast","loca":"label_podcast","byline":{"bylineSsi":"53:13 min","bylineText":""}}},{"byline":"Byline","title":"Ein anderer Podcast-Title","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"100","realTeaserSize":"100","isMobile1to1":false,"airdateDate":{"htmlDateTime":"2022-10-31T19:30+0200","htmlDate":"31.10.2022","date":"24.12.20","dateSeparatorTime":"31.10.22, 19:30"},"teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"duration":"13:11","hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"podcastChannel":{"title":"hr2 Doppelkopf","url":"#ChannelURL","podcastHoster":[{"podcastHosterUrl":"https://podcasts.apple.com/podcast/hr2-doppelkopf/id212822590","podcastHosterName":"ITunes"},{"podcastHosterUrl":"https://podcast.hr.de/hr2_doppelkopf/podcast.xml","podcastHosterName":"RSS"},{"podcastHosterUrl":"https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2hyMl9kb3BwZWxrb3BmL3BvZGNhc3QueG1s?hl=de","podcastHosterName":"Google Podcasts"},{"podcastHosterUrl":"https://www.ardaudiothek.de/episode/hr2-doppelkopf/ich-hoere-bei-jedem-geraeusch-gleich-die-tonhoehe-oder-komponist-und-theatermacher-heiner-goebbels-erneuert-das-musiktheater/hr2-kultur/12056783/","podcastHosterName":"ARD Audiothek"}]},"audioUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/der_tag_in_hessen/der_tag_in_hessen_20221021_96203008.mp3","podcastDownloadUrl":"https://mp3podcasthrdl-a.akamaihd.net/mp3/podcast/hr2_doppelkopf/hr2_doppelkopf_20221031_96251016.mp3","teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"mediaMetadata":{"agf":{"title":"hr-fernsehen_Hessischer Rundfunk_Ein aufgewecktes Kerlchen_06.10.2022 04:40","livestream":"no","type":"content","airdate":"06.10.2022 04:40","program":"hr-fernsehen","nol_c18":"p18,N","uurl":"/mp3/podcast/hr4_polizeireport/hr4_polizeireport_20221006_95936793.mp3","nol_c7":"p7,/mp3/podcast/hr4_polizeireport/hr4_polizeireport_20221006_95936793.mp3","nol_c8":"p8,131","nol_c9":"p9,Hessischer Rundfunk_Ein aufgewecktes Kerlchen_06.10.2022 04:40","nol_c10":"p10,hr-fernsehen","nol_c12":"p12,Content","assetid":"hr4_polizeireport_95936793","nol_c2":"p2,N","nol_c5":"p5,hr4","length":"131","nol_c20":"p20,GFKLinkID"},"ati":{"pageName":"Ein aufgewecktes Kerlchen","secondLevelId":"2","documentName":"podcast-episode-108850","documentType":"hr-nt:podcastEpisode","documentDate":"2022-10-06T06:46:25+02:00","chapter":"podcast::polizeireport","mediaLabel":"Ein aufgewecktes Kerlchen","mediaTheme1":"hr4","mediaTheme2":"podcast::polizeireport","atiSiteId":"578129","atiTrackingHost":"https://logs1407"},"piano":{"av_content_id":"podcast-episode-108850","av_content":"Ein aufgewecktes Kerlchen","av_content_type":"Audio","av_content_duration":131000,"av_broadcasting_type":"OnDemand","av_content_level1":"hr4","av_content_level2":"podcast","av_content_level3":"polizeireport","hr_document_type":"hr-nt:podcastEpisode","site_level2_id":"2"}},"documentSection":"Kultur","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":false,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":true,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Stefan Fricke","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":true,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h2","icon":"ortsmarke","imageVariant":"topteaser","hideShortText":true,"shorttext":"Bla ..... 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 liebe Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"isPodcast":true,"toModel":{"audioElement":{"isPodcast":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50"}}}},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"podcast","loca":"label_podcast","byline":{"bylineSsi":"53:13 min","bylineText":""}}},{"byline":"Byline","title":"Verurteilt! (73) - Der Todes-Drift","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"100","realTeaserSize":"100","isMobile1to1":false,"airdateDate":{"htmlDateTime":"2022-10-31T19:30+0200","htmlDate":"31.10.2022","date":"07.09.22","dateSeparatorTime":"31.10.22, 19:30"},"teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"duration":"70:26","hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"podcastChannel":{"title":"hr2 Doppelkopf","url":"#ChannelURL","podcastHoster":[{"podcastHosterUrl":"https://podcasts.apple.com/podcast/hr2-doppelkopf/id212822590","podcastHosterName":"ITunes"},{"podcastHosterUrl":"https://podcast.hr.de/hr2_doppelkopf/podcast.xml","podcastHosterName":"RSS"},{"podcastHosterUrl":"https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2hyMl9kb3BwZWxrb3BmL3BvZGNhc3QueG1s?hl=de","podcastHosterName":"Google Podcasts"},{"podcastHosterUrl":"https://www.ardaudiothek.de/episode/hr2-doppelkopf/ich-hoere-bei-jedem-geraeusch-gleich-die-tonhoehe-oder-komponist-und-theatermacher-heiner-goebbels-erneuert-das-musiktheater/hr2-kultur/12056783/","podcastHosterName":"ARD Audiothek"}]},"audioUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/verurteilt/verurteilt_20220907_95686133.mp3","podcastDownloadUrl":"https://mp3podcasthrdl-a.akamaihd.net/mp3/podcast/hr2_doppelkopf/hr2_doppelkopf_20221031_96251016.mp3","teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"mediaMetadata":{"agf":{"title":"hr-fernsehen_Hessischer Rundfunk_Ein aufgewecktes Kerlchen_06.10.2022 04:40","livestream":"no","type":"content","airdate":"06.10.2022 04:40","program":"hr-fernsehen","nol_c18":"p18,N","uurl":"/mp3/podcast/hr4_polizeireport/hr4_polizeireport_20221006_95936793.mp3","nol_c7":"p7,/mp3/podcast/hr4_polizeireport/hr4_polizeireport_20221006_95936793.mp3","nol_c8":"p8,131","nol_c9":"p9,Hessischer Rundfunk_Ein aufgewecktes Kerlchen_06.10.2022 04:40","nol_c10":"p10,hr-fernsehen","nol_c12":"p12,Content","assetid":"hr4_polizeireport_95936793","nol_c2":"p2,N","nol_c5":"p5,hr4","length":"131","nol_c20":"p20,GFKLinkID"},"ati":{"pageName":"Ein aufgewecktes Kerlchen","secondLevelId":"2","documentName":"podcast-episode-108850","documentType":"hr-nt:podcastEpisode","documentDate":"2022-10-06T06:46:25+02:00","chapter":"podcast::polizeireport","mediaLabel":"Ein aufgewecktes Kerlchen","mediaTheme1":"hr4","mediaTheme2":"podcast::polizeireport","atiSiteId":"578129","atiTrackingHost":"https://logs1407"},"piano":{"av_content_id":"podcast-episode-108850","av_content":"Ein aufgewecktes Kerlchen","av_content_type":"Audio","av_content_duration":131000,"av_broadcasting_type":"OnDemand","av_content_level1":"hr4","av_content_level2":"podcast","av_content_level3":"polizeireport","hr_document_type":"hr-nt:podcastEpisode","site_level2_id":"2"}},"documentSection":"Kultur","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":false,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":true,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Stefan Fricke","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":true,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h2","icon":"ortsmarke","imageVariant":"topteaser","hideShortText":true,"shorttext":"Bla ..... 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 liebe Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"isPodcast":true,"toModel":{"audioElement":{"isPodcast":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50"}}}},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"podcast","loca":"label_podcast","byline":{"bylineSsi":"53:13 min","bylineText":""}}}],"label":{"type":"podcast","loca":"label_podcast","byline":{"bylineSsi":"07:42 min","bylineText":""}},"hideShortText":false,"shorttext":"Der Podcast für alle, die sich täglich in sozialen Netzwerken bewegen. Wir geben euch einen Einblick, was hinter den Kulissen einer Social-Media-Redaktion passiert, diskutieren Trends, Shitstorms und warum gewisse Posts funktionieren - und andere nicht.","teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/aufmacher-im-haifischbecken-100_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/aufmacher-im-haifischbecken-100_v-1to1__small.jpg 380w, images/aufmacher-im-haifischbecken-100_v-1to1__medium.jpg 480w, images/aufmacher-im-haifischbecken-100_v-1to1.jpg 720w, images/aufmacher-im-haifischbecken-100_v-1to1__large.jpg 960w"}]}},"podcastHoster":[{"podcastHosterUrl":"https://itunes.apple.com/de/podcast/hr-info-der-tag-in-hessen/id273944140?mt=2","podcastHosterName":"ITunes Podcast"},{"podcastHosterUrl":"https://podcast.hr.de/der_tag_in_hessen/podcast.xml","podcastHosterName":"RSS-Feed"},{"podcastHosterUrl":"https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2Rlcl90YWdfaW5faGVzc2VuL3BvZGNhc3QueG1s?hl=de","podcastHosterName":"Google Podcasts"},{"podcastHosterUrl":"https://www.ardaudiothek.de/sendung/der-tag-ein-thema-viele-perspektiven/470522/","podcastHosterName":"ARDAudiothekSuperlong"}],"audioUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3","podcastDownloadUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}}

package/src/stories/views/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/src/stories/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/src/stories/views/components/article/components/podcast/{podcast_player_episode.mdx → podcast_episode_article.mdx}

@@ -1,5 +1,5 @@
 import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
-import * as PodcastPlayerEpisodeStories from './podcast_player_episode.stories'
+import * as PodcastPlayerEpisodeStories from './podcast_episode_article.stories'
 
 <Meta of={PodcastPlayerEpisodeStories} />
 
@@ -13,7 +13,7 @@ import * as PodcastPlayerEpisodeStories from './podcast_player_episode.stories'
 Die  Komponente wird in handlebars wie folgt eingebaut:
 
 ```html
-{{> components/article/components/podcast/podcast_player_episode }}
+{{> components/article/components/podcast/podcast_episode_article }}
 ```
 
 <Canvas withToolbar>

package/src/stories/views/components/article/components/podcast/{podcast_player_episode.stories.js → podcast_episode_article.stories.js}

@@ -1,10 +1,10 @@
-import podcast_player_episode from './podcast_player_episode.hbs'
+import podcast_episode_article from './podcast_episode_article.hbs'
 import podcastPlayerEpisodeJson from './fixtures/podcast_player_episode.json'
 
 const Template = ({ ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<span>${topline}</span>`;
-    return podcast_player_episode({ ...args })
+    return podcast_episode_article({ ...args })
 }
 
 export default {

package/src/stories/views/components/article/components/podcast/podcast_playlist-inline.hbs

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

package/src/stories/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/src/stories/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/src/stories/views/components/article/components/podcast/podcast_playlist_article.mdx

@@ -0,0 +1,21 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as PodcastPlayerPlaylistStories from './podcast_playlist_article.stories'
+
+<Meta of={PodcastPlayerPlaylistStories} />
+
+# Podcast Player Playlist (Channel)
+
+## Beschreibung
+
+
+## Verwendung
+
+Die  Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/article/components/podcast/podcast_playlist_article }}
+```
+
+<Canvas withToolbar>
+  <Story of={PodcastPlayerPlaylistStories.Default} />
+</Canvas>

package/src/stories/views/components/article/components/podcast/podcast_playlist_article.stories.js

@@ -0,0 +1,18 @@
+import podcast_playlist_article from './podcast_playlist_article.hbs'
+import podcastPlayerPlaylistJson from './fixtures/podcast_player_playlist.json'
+
+const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<span>${topline}</span>`;
+    return podcast_playlist_article({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Artikel/Komponenten/Podcast-Player (Channel)',
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'default',
+    args: podcastPlayerPlaylistJson.teaserPodcastPlaylist.logicItem.includeModel,
+}

package/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/components/article/components/podcast/podcast_player_episode.hbs

@@ -1,13 +0,0 @@
-<div class="w-full bg-highlight-1 rounded-tl-hr rounded-br-hr" > 
-    {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
-</div>
-<div class="pt-5">
-    {{> components/podcast/components/podcast_player_shorttext }}
-</div>
-{{> components/content/content_footer/content_footer 
-    _author=this.audioAuthor
-    _showDate=this.hasDwellTime
-    _date=this.airdateDate
-    _copyright=this.copyright
-    _isArchiveContent=this.isArchiveContent
-    _posterCopyright="poster_copyright"}}

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

@@ -1,13 +0,0 @@
-<div class="w-full bg-highlight-1 rounded-tl-hr rounded-br-hr" > 
-    {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
-</div>
-<div class="pt-5">
-    {{> components/podcast/components/podcast_player_shorttext }}
-</div>
-{{> components/content/content_footer/content_footer 
-    _author=this.audioAuthor
-    _showDate=this.hasDwellTime
-    _date=this.airdateDate
-    _copyright=this.copyright
-    _isArchiveContent=this.isArchiveContent
-    _posterCopyright="poster_copyright"}}

package/src/stories/views/components/article/components/podcast/podcast_player_episode.hbs

@@ -1,13 +0,0 @@
-<div class="w-full bg-highlight-1 rounded-tl-hr rounded-br-hr" > 
-    {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
-</div>
-<div class="pt-5">
-    {{> components/podcast/components/podcast_player_shorttext }}
-</div>
-{{> components/content/content_footer/content_footer 
-    _author=this.audioAuthor
-    _showDate=this.hasDwellTime
-    _date=this.airdateDate
-    _copyright=this.copyright
-    _isArchiveContent=this.isArchiveContent
-    _posterCopyright="poster_copyright"}}