hr-design-system-handlebars 0.83.1 → 0.85.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/build/handlebars/partials/handlebar-partials.js +9 -8
- package/dist/assets/index.css +29 -3
- package/dist/assets/vendor/js/podcast_player.alpine.js +35 -32
- package/dist/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast_player.hbs +6 -29
- package/dist/views/components/teaser/podcast/podcast_player_ui.hbs +8 -6
- package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs +23 -114
- package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs +65 -0
- package/dist/views/components/teaser/stage/stage_text.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/css/custom-components.css +25 -1
- package/src/assets/vendor/js/podcast_player.alpine.js +35 -32
- package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
- package/src/stories/views/components/teaser/podcast/podcast_player.hbs +6 -29
- package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs +8 -6
- package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs +23 -114
- package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs +65 -0
- package/src/stories/views/components/teaser/stage/stage_text.hbs +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v0.85.0 (Thu Nov 17 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- Podcast player refactoring [#388](https://github.com/mumprod/hr-design-system-handlebars/pull/388) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.84.0 (Thu Nov 17 2022)
|
|
14
|
+
|
|
15
|
+
#### 🚀 Enhancement
|
|
16
|
+
|
|
17
|
+
- BUGFIX: Title of externalProject is displayed [#389](https://github.com/mumprod/hr-design-system-handlebars/pull/389) ([@szuelch](https://github.com/szuelch))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- [@szuelch](https://github.com/szuelch)
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v0.83.1 (Thu Nov 17 2022)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
|
@@ -65,21 +65,22 @@ module.exports['components/teaser/components/teaser_text.hbs'] = '<span class=\'
|
|
|
65
65
|
module.exports['components/teaser/components/teaser_title.hbs'] = '<span class=\'block mt-0.5 group-hover:underline{{#if _css}} {{_css}}{{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}\'>\n {{~_text~}}\n</span>'
|
|
66
66
|
module.exports['components/teaser/components/teaser_title_classes.hbs'] = '{{! \nThis handlebars template is responisible to render the needed classnames for Teaser headlines\nAs we use tailwind css no cascade is used to style components. As Teaser Headline Sizes dependent\non 4 parameters the logic was outsourced to this file.\n\nthe 4 parameters are:\n- teaserType\n- size\n- _isMobile1to1\n- fontVariant\n\n}}\n\n{{~#switch _teaserType~}}\n {{~#case \'standard-ds\'~}}\n {{~#if _isMobile1to1~}}\n {{~inline-switch\n _size\n \'["hero","100","25"]\'\n \'["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]\'\n ~}}\n {{~else~}}\n {{~inline-switch\n _size\n \'["hero","100","25"]\'\n \'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]\'\n ~}}\n {{~/if~}}\n {{~/case~}}\n {{~#case \'tabbox-standard-ds\'~}}\n {{~#if _isMobile1to1~}}\n {{~inline-switch\n _size\n \'["hero","100","25"]\'\n \'["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]\'\n ~}}\n {{~else~}}\n {{~inline-switch\n _size\n \'["hero","100","25"]\'\n \'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]\'\n ~}}\n {{~/if~}}\n {{~/case~}}\n {{~#case \'alternative-ds\'~}}\n {{~inline-switch\n _size\n \'["hero","100","50"]\'\n \'["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]\'\n ~}}\n {{~/case~}}\n {{~#case \'tabbox-alternative-ds\'~}}\n {{~inline-switch\n _size\n \'["hero","100","50"]\'\n \'["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]\'\n ~}}\n {{~/case~}}\n {{~#case \'poster-ds\'~}}\n {{~inline-switch _size \'["50","33"]\' \'["text-2xl md:text-4xl","text-2xl"]\'~}}\n {{~/case~}}\n {{~#case \'cluster\'~}}\n {{#if _firstItem}}\n {{~inline-switch _size \'["100"]\' \'[" text-lg md:text-2xl"," text-lg"]\'}}\n {{else}}\n text-lg\n {{/if}}\n {{~/case~}}\n {{~#case \'stage\'~}}\n {{~inline-switch _size \'["100"]\' \'[" text-2xl md:text-4xl"," text-2xl"]\'}}\n {{~/case~}}\n{{~/switch~}}\n{{~inline-switch\n _fontVariant\n \'["serif", "sans-serif"]\'\n \'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]\'\n~}}'
|
|
67
67
|
module.exports['components/teaser/components/teaser_topline.hbs'] = '<span\n class=\'pt-px block text-base\n {{inline-switch _teaserType \'["poster-ds"]\' \'["text-white","text-toplineColor"]\'}}{{#if _css}} {{_css}}{{/if}}\n font-heading\'\n aria-label=\'{{_readMore}}: {{_text}}\'\n>\n {{_text}}\n</span>'
|
|
68
|
+
module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="{{nextRandom}}"\n x-ignore\n ax-load\n ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}\n x-data="contentNavigationHandler()"\n class="js-contentNavWrapper col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize \'["100","66","50","33","25"]\' \'["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]\'}}"\n>\n {{> components/content_nav/content_nav _teasersize=this.teasersize }} \n</div>'
|
|
68
69
|
module.exports['components/teaser/group_teaser/group_teaser.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} \n {{~#if this.hasGroupTitle}}\n <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n {{this.groupTitle}}\n {{~#if this.hasLink}}</a>{{/if~}}\n </h2>\n {{/if}} \n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n{{/components/grid/grid_group}}'
|
|
69
70
|
module.exports['components/teaser/group_teaser/group_teaser_accented.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}\n \n <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">\n\n {{~#if this.hasGroupTitle}}\n <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n {{this.groupTitle}}\n {{~#if this.hasLink}}</a>{{/if~}}\n </h2>\n {{/if}}\n\n </div>\n <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">\n \n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n \n </div>\n \n{{/components/grid/grid_group}}'
|
|
70
|
-
module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="{{nextRandom}}"\n x-ignore\n ax-load\n ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}\n x-data="contentNavigationHandler()"\n class="js-contentNavWrapper col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize \'["100","66","50","33","25"]\' \'["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]\'}}"\n>\n {{> components/content_nav/content_nav _teasersize=this.teasersize }} \n</div>'
|
|
71
|
-
module.exports['components/teaser/tabbox/group_tabbox.hbs'] = '<section \n x-show="tab === \'{{this.groupTitle}}\'"\n class="pb-10"\n>\n {{~#if this.hasGroupTitle~}}\n <h3 class="sr-only">\n <a class="" href="#tgp{{this.teaserIndex}}">\n <span class="">{{this.groupTitle}}</span>\n <span class="">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n {{> components/base/image/icon _icon="arrow-up" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n </span>\n </a>\n </h3>\n {{~/if~}}\n\n <a class="w-0" name="tgp{{this.teaserIndex}}"></a>\n <div class="grid content-start grid-cols-12 px-0 md:px-8 colspan-12 gap-x-6 gap-y-6">\n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n </div>\n {{~#if this.link~}}\n <div class="flex justify-center pt-8">\n {{~> components/button/button_pseudo _linkTitle=(loca "group_tabbed_more" this.title) ~}}\n </div>\n {{~/if~}}\n</section>'
|
|
72
|
-
module.exports['components/teaser/tabbox/teaser_tabbox.hbs'] = '</div>\n<div \n x-data="{ tab: \'{{this.tabbedGroup.[0].title}}\' }"\n class="grid grid-cols-12 pt-6 mx-0 col-full md:pt-7 bg-blue-accented md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"\n>\n <section class="col-span-full" data-hr-group-tabbed=\'{"wandaPageId":"{{this.wandaPageId}}"}\'>\n <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">\n {{~#each this.tabbedGroup~}}\n <button onclick="window.location.href=\'#tgp{{@index}}\';"\n :class="tab === \'{{this.title}}\' ? \'text-white bg-blue-congress border-blue-congress\' : \'bg-white text-toplineColor border-white hover:border-toplineColor\'" \n x-effect="$el.removeAttribute(\'onclick\')"\n x-on:click.prevent="tab = \'{{this.title}}\'" \n class="border text-base font-heading py-px px-2 m-1.5" \n type="button" \n role="tab"\n >\n {{this.title}}\n </button>\n {{~/each~}}\n </div>\n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
|
|
73
|
-
module.exports['components/teaser/stage/stage_text.hbs'] = '<div class="absolute left-2/4 right-auto bottom-15 lg:bottom-10 flex w-full px-5 sm:px-11.5 -translate-x-2/4 {{inline-switch this.stageTextPosition \'["right50"]\' \'[" justify-end"," justify-start"]\'}}">\n <div class="p-4 rounded-2xl bg-stageTextBox opacity-85{{inline-switch this.stageTextPosition \'["left100"]\' \'[" w-full"," max-w-xs sm:w-fit md:max-w-2/4"]\'}} ">\n {{#decorator \'components/base/link\'}}\n {{> components/teaser/components/teaser_heading _titleCss="text-stageText" _toplineCss="text-stageText" _labelCss="text-stageText" _title=this.title _label=this.label _topline=this.topline _headlineTag="h2" _size="100" _teaserType="stage" _fontVariant="sans-serif"}}\n {{#if this.showProfileInfoAsByline}}\n <p class="text-stageText font-headingSerif block my-3">{{this.profiles}}</p>\n {{/if}}\n {{#if this.showShorttext}}\n <p class="hidden sm:block text-stageText">{{this.shorttext}}</p>\n {{#if this.link.hasIcon}}\n <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}\n {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]\n </span>\n {{/if}}\n {{/if}}\n {{#with this.eventtags}}\n {{#with this.series}}\n <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n {{/with}}\n {{#with this.project}}\n <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n {{/with}}\n {{#with this.externalProject}}\n <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n {{/with}}\n {{/with}}\n {{#with this.location}}\n {{> components/base/loadSSI this.stageLocationSsi _templatePath=\'components/event/stage_location.ssi\' }} \n {{/with}}\n {{#if this.link.hasIcon}}\n <span class="block mt-4 hover:underline text-stageLink {{if this.showShorttext \'hidden\'}}">[{{this.link.readMoreText.readMore}}\n {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline w-5 h-5 fill-current ml-1" }}]\n </span>\n {{/if}}\n {{/decorator}}\n </div>\n</div>'
|
|
74
71
|
module.exports['components/teaser/podcast/podcast-playlist.hbs'] = '<div class="grid grid-cols-12 pt-5 md:pt-5 bg-[#dce8f0] mx-0 rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" >\n {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}\n </div>'
|
|
75
72
|
module.exports['components/teaser/podcast/podcast.hbs'] = '<div class="grid grid-cols-12 pt-5 md:pt-5 bg-[#dce8f0] mx-0 rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" > \n {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}\n </div>'
|
|
76
73
|
module.exports['components/teaser/podcast/podcast_downloadbutton.hbs'] = '<button class="flex {{#if _addClass}} {{_addClass}} {{/if}}">\n <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}}>\n {{> components/base/image/icon _icon=\'download-neu\' _addClass=_iconClass }}\n </a>\n</button>'
|
|
77
74
|
module.exports['components/teaser/podcast/podcast_item_title.hbs'] = '{{#decorator \'components/base/link\' _css="w-full font-heading text-base text-toplineColor line-clamp-4 ..." }} \n <span class="block group-hover:underline text-blue-science {{~ inline-switch _teaserSize \'["100","50"]\'\'[" text-base"," text-base"]\' ~}}">\n {{~_title~}}\n </span>\n{{/decorator}}'
|
|
78
|
-
module.exports['components/teaser/podcast/podcast_playbutton.hbs'] = '<button id="button{{_id}}" x-
|
|
79
|
-
module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12"> \n <div class="flex flex-col grow">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n <div class="flex flex-col grow"> \n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \n <div class="">\n <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\'>\n {{ loca this.loca }}\n </span>\n </div> \n {{/with}}\n \n {{~#with airdateDate}}\n <div class="flex grow pt-1.5 text-xs font-headingSerif text-blue-science">\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n </div>\n {{/with}}\n\n {{!-- Download --}}\n {{> components/teaser/podcast/podcast_downloadbutton \n _addClass="ml-2 pr-2 md:pr-5 "\n _iconClass="h-6 w-6 text-blue-science fill-current"\n _url=this.podcastDownloadUrl }}\n </div>\n\n {{!-- Überschrift: --}}\n <div class="flex pb-5 pr-2 md:pr-5"> \n {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }} \n </div>\n\n </div>\n\n {{!-- Podcast Image --}}\n <div class="flex flex-col ">\n <div class="w-24 md:w-42">\n {{> components/base/image/responsive_image this.teaseritem \n _type=this.teaserType\n _variant="default"\n _addClass=" overflow-hidden ar--100"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n\n {{!-- Player UI --}}\n <div class="flex px-5 md:pl-5 md:pr-52 md:-mt-14" \n x-data="playaudio()"\n x-init="listenToGlobalStop()"\n ax-load\n x-ignore\n ax-load-src="/vendor/js/podcast_player.alpine.js">\n {{> components/teaser/podcast/podcast_player_ui _isPlaylistPlayer=false\n _podcastDuration=podcastDuration _id=(nextRandom) }} \n </div>\n \n {{!-- Abo-Dropdown --}}\n <div class="flex flex-row p-5 md:pr-0">\n {{#with this.podcastChannel}} \n <div class="flex">\n {{!-- Container --}}\n <div x-cloak x-data="{\n open: false,\n toggle() {\n if (this.open) {\n return this.close()\n }\n this.$refs.button.focus()\n this.open = true\n },\n close(focusAfter) {\n if (! this.open) return\n this.open = false\n focusAfter && focusAfter.focus()\n }}"\n x-on:keydown.escape.prevent.stop="close($refs.button)"\n x-on:focusin.window="! $refs.panel.contains($event.target) && close()"\n x-id="[\'dropdown-button\']"\n class="relative"\n >\n\n {{!-- Button --}}\n <button\n x-ref="button"\n x-on:click="toggle()"\n :aria-expanded="open"\n :aria-controls="$id(\'dropdown-button\')"\n type="button"\n class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren\n <div x-show="open">\n {{> components/base/image/icon _icon=\'arrow-up\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\n <div x-show="!open">\n {{> components/base/image/icon _icon=\'arrow-down\' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}\n </div>\n </button>\n\n {{!-- Flyout --}}\n <div\n x-ref="panel"\n x-show="open"\n x-transition.origin.top.left\n x-on:click.outside="close($refs.button)"\n :id="$id(\'dropdown-button\')"\n style="display: none;"\n 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"\n >\n {{#with this.podcastHoster}}\n <ul>\n {{#each this}}\n <li class="border-b last:border-0"> \n <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"\n title="{{this.podcastHosterName}}" \n target="_blank"\n rel="noopener noreferrer"\n href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>\n </li>\n {{/each}}\n </ul>\n {{/with}}\n \n </div>\n </div>\n </div>\n {{/with}}\n\n {{!-- Sendungs-Link --}}\n <div class="flex justify-end w-full pl-4 md:pr-52">\n <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">\n <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>\n <a class="underline" href="#">{{#with this.teaserInfo}} {{~#if this.showTeaserInfoChannel}} <span class="text__byline">{{../this.podcastChannel.title}}</span>{{/if}} {{/with}}</a>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n{{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="col-span-12 px-5 pb-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">\n <span class="c-teaser__shorttext"> {{this}} </span>\n </div>\n {{/with~}}\n {{/unless}}\n{{/unless}}
|
|
80
|
-
module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class="flex w-full"> \n <div class="flex flex-wrap w-full js-load" \n >\n
|
|
81
|
-
module.exports['components/teaser/podcast/podcast_playlist_player.hbs'] = '<div class="flex col-span-12 pb-5 border-b border-white" >\n <div class="flex flex-col grow">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n\n <div class="flex flex-col pr-5 grow">\n\n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \n <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\'>\n {{ loca this.loca }}\n </span> \n {{/with}}\n </div>\n\n {{!-- Überschrift: --}}\n <div class="flex pb-5 pr-2 md:pr-5"> \n {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }} \n </div>\n\n {{!-- Shorttext --}}\n {{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">\n <span class="c-teaser__shorttext"> {{this}} </span>\n </div>\n {{/with~}}\n {{/unless}}\n {{/unless}}\n\n </div>\n\n {{!-- Podcast Image --}}\n <div class="flex flex-col ">\n <div class="w-24 md:w-42">\n {{> components/base/image/responsive_image this.teaseritem \n _type=this.teaserType\n _variant="default"\n _addClass="overflow-hidden"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n \n <div class="flex flex-row px-5 md:pr-0">\n\n {{!-- Abo-Dropdown --}}\n {{#with this.podcastChannel}} \n
|
|
75
|
+
module.exports['components/teaser/podcast/podcast_playbutton.hbs'] = '<button id="button{{_id}}" x-on:keydown.tab="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}"> \n <div class="text-white rounded-full js-playbutton bg-blue-science ring-white ring">\n {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}\n </div>\n <div class="hidden bg-white rounded-full js-pausebutton ring-blue-science ring text-blue-science">\n {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}\n </div> \n</button>'
|
|
76
|
+
module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12"> \n <div class="flex flex-col grow">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n <div class="flex flex-col grow"> \n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \n <div class="">\n <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\'>\n {{ loca this.loca }}\n </span>\n </div> \n {{/with}}\n \n {{~#with airdateDate}}\n <div class="flex grow pt-1.5 text-xs font-headingSerif text-blue-science">\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n </div>\n {{/with}}\n\n {{!-- Download --}}\n {{> components/teaser/podcast/podcast_downloadbutton \n _addClass="ml-2 pr-2 md:pr-5 "\n _iconClass="h-6 w-6 text-blue-science fill-current"\n _url=this.podcastDownloadUrl }}\n </div>\n\n {{!-- Überschrift: --}}\n <div class="flex pb-5 pr-2 md:pr-5"> \n {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }} \n </div>\n\n </div>\n\n {{!-- Podcast Image --}}\n <div class="flex flex-col ">\n <div class="w-24 md:w-42">\n {{> components/base/image/responsive_image this.teaseritem \n _type=this.teaserType\n _variant="default"\n _addClass=" overflow-hidden ar--100"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n\n {{!-- Player UI --}}\n <div class="flex px-5 md:pl-5 md:pr-52 md:-mt-14" \n x-data="playaudio()"\n x-init="listenToGlobalStop()"\n ax-load\n x-ignore\n ax-load-src="/vendor/js/podcast_player.alpine.js">\n {{> components/teaser/podcast/podcast_player_ui \n _isPlaylistPlayer=false\n _podcastDuration=podcastDuration _id=(nextRandom) \n _first=true\n }} \n </div>\n \n {{!-- Abo-Dropdown --}}\n <div class="flex flex-row p-5 md:pr-0">\n {{#with this.podcastChannel}} \n <div class="flex">\n {{!-- Container --}}\n <div x-cloak x-data="{\n open: false,\n toggle() {\n if (this.open) {\n return this.close()\n }\n this.$refs.button.focus()\n this.open = true\n },\n close(focusAfter) {\n if (! this.open) return\n this.open = false\n focusAfter && focusAfter.focus()\n }}"\n x-on:keydown.escape.prevent.stop="close($refs.button)"\n x-on:focusin.window="! $refs.panel.contains($event.target) && close()"\n x-id="[\'dropdown-button\']"\n class="relative"\n >\n\n {{!-- Button --}}\n <button\n x-ref="button"\n x-on:click="toggle()"\n :aria-expanded="open"\n :aria-controls="$id(\'dropdown-button\')"\n type="button"\n class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren\n <div x-show="open">\n {{> components/base/image/icon _icon=\'arrow-up\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\n <div x-show="!open">\n {{> components/base/image/icon _icon=\'arrow-down\' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}\n </div>\n </button>\n\n {{!-- Flyout --}}\n <div\n x-ref="panel"\n x-show="open"\n x-transition.origin.top.left\n x-on:click.outside="close($refs.button)"\n :id="$id(\'dropdown-button\')"\n style="display: none;"\n 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"\n >\n {{#with this.podcastHoster}}\n <ul>\n {{#each this}}\n <li class="border-b last:border-0"> \n <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"\n title="{{this.podcastHosterName}}" \n target="_blank"\n rel="noopener noreferrer"\n href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>\n </li>\n {{/each}}\n </ul>\n {{/with}}\n \n </div>\n </div>\n </div>\n {{/with}}\n\n {{!-- Sendungs-Link --}}\n <div class="flex justify-end w-full pl-4 md:pr-52">\n <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">\n <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>\n <a class="underline" href="#">{{#with this.teaserInfo}} {{~#if this.showTeaserInfoChannel}} <span class="text__byline">{{../this.podcastChannel.title}}</span>{{/if}} {{/with}}</a>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n{{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="col-span-12 px-5 pb-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">\n <span class="c-teaser__shorttext"> {{this}} </span>\n </div>\n {{/with~}}\n {{/unless}}\n{{/unless}}'
|
|
77
|
+
module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class="flex w-full"> \n <div class="flex flex-wrap w-full js-load" \n >\n <div class="flex {{#if _isPlaylistPlayer}}items-start{{else}}items-center{{/if}} w-full flex-nowrap">\n\n {{!-- Start/StopButton --}}\n <div id="playbutton{{_id}}" class="flex">\n {{> components/teaser/podcast/podcast_playbutton \n _css="mr-4" \n _id = _id\n _alpineClick=(loca "play_button_alpine_click" _id) }}\n </div>\n\n <div class="flex flex-wrap items-start w-full -mt-0.5">\n {{#if _isPlaylistPlayer}} \n <div class="flex w-full">\n {{!-- Airdate --}}\n {{~#with this.airdateDate}}\n <div class="flex text-xs grow font-headingSerif text-blue-science">\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n </div>\n {{/with}}\n\n {{!-- Download --}}\n <div class="flex self-end">\n {{> components/teaser/podcast/podcast_downloadbutton \n _addClass="ml-2"\n _iconClass="h-6 w-6 text-blue-science fill-current"\n _url=this.podcastDownloadUrl \n }}\n </div>\n </div>\n\n <div class="flex -mt-2 w-fit max-w-3/4 "> \n {{> components/teaser/podcast/podcast_item_title \n _title=this.title \n _teaserSize=this.teaserSize \n _addClass="" }} \n </div> \n {{/if}}\n\n {{!-- Range Slider --}}\n <div class="flex w-full transition-all overflow-hidden {{#if _first}}max-h-9{{else}}max-h-0{{/if}}">\n <input \n {{#unless @first}}x-cloak{{/unless}}\n x-ref="range" \n id="range{{_id}}" \n x-on:input="rangeInput({{_id}})" \n type="range" {{!-- x-bind:value="currentTimePercentage" --}} \n min="0" \n max="1000"\n value="0"\n class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" > \n </div>\n\n {{#if _isPlaylistPlayer}}\n {{!-- Meta Time usw. --}}\n <div x-init="setTime( \'{{_podcastDuration}}\', \'{{_id}}\' ); " class="flex w-full"> \n {{> components/teaser/podcast/podcast_timedisplay \n _id=_id\n _currentTimeClasses="font-bold text-orange-layout" \n _durationClasses="text-blue-science" \n _containerCss="flex text-xs grow font-headingSerif" }}\n </div>\n {{/if}}\n </div>\n </div>\n \n {{#unless _isPlaylistPlayer}}\n {{!-- Meta Time usw. --}}\n <div x-init="setTime( \'{{_podcastDuration}}\', \'{{_id}}\' ); " >\n {{> components/teaser/podcast/podcast_timedisplay \n _duration=podcastDuration \n _currentTimeClasses="font-bold text-orange-layout" \n _durationClasses="text-blue-science" \n _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}\n </div>\n {{/unless}}\n \n {{!-- AudioElement --}}\n {{~#with this.audioUrl ~}}\n <audio \n class="{{../_id}} hidden" \n data-id="{{../_id}}"\n x-init="registerPlayer(\'{{../_podcastDuration}}\',\'{{../_id}}\')"\n @stopotherplayers.window="stopAllOtherPlayers({{../_id}})">\n <source src={{this}} type=\'audio/mp3\'/>\n \n </audio>\n {{/with}}\n </div>\n</div>'
|
|
78
|
+
module.exports['components/teaser/podcast/podcast_playlist_player.hbs'] = '<div class="flex col-span-12 pb-5 border-b border-white" >\n <div class="flex flex-col grow">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n\n <div class="flex flex-col pr-5 grow">\n\n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \n <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\'>\n {{ loca this.loca }}\n </span> \n {{/with}}\n </div>\n\n {{!-- Überschrift: --}}\n <div class="flex pb-5 pr-2 md:pr-5"> \n {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }} \n </div>\n\n {{!-- Shorttext --}}\n {{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">\n <span class="c-teaser__shorttext"> {{this}} </span>\n </div>\n {{/with~}}\n {{/unless}}\n {{/unless}}\n\n </div>\n\n {{!-- Podcast Image --}}\n <div class="flex flex-col ">\n <div class="w-24 md:w-42">\n {{> components/base/image/responsive_image this.teaseritem \n _type=this.teaserType\n _variant="default"\n _addClass="overflow-hidden"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n \n <div class="flex flex-row px-5 md:pr-0">\n\n {{!-- Abo-Dropdown --}}\n {{#with this.podcastChannel}} \n {{> components/teaser/podcast/podcast_subscribe_button}}\n {{/with}}\n\n </div>\n \n </div> \n</div>\n\n {{!-- Player UI --}}\n <div class="flex flex-col col-span-12 gap-5 px-5" \n x-data="playaudio()"\n x-init="listenToGlobalStop()"\n ax-load\n x-ignore\n ax-load-src="/vendor/js/podcast_player.alpine.js">\n {{#with this.playlistItems}}\n {{#each this}}\n <div class="flex pb-5 border-b {{#unless @last}}border-white{{/unless}}" >\n {{> components/teaser/podcast/podcast_player_ui \n _isPlaylistPlayer=true\n _podcastDuration=podcastDuration\n _title=title\n _id=(nextRandom)\n _first=@first\n }}\n </div>\n {{/each}}\n {{/with}} \n </div>\n</div>'
|
|
79
|
+
module.exports['components/teaser/podcast/podcast_subscribe_button.hbs'] = '<div class="flex">\n {{!-- Container --}}\n <div x-data="{\n open: false,\n toggle() {\n if (this.open) {\n return this.close()\n }\n this.$refs.button.focus()\n this.open = true\n },\n close(focusAfter) {\n if (! this.open) return\n this.open = false\n focusAfter && focusAfter.focus()\n }}"\n x-on:keydown.escape.prevent.stop="close($refs.button)"\n x-on:focusin.window="! $refs.panel.contains($event.target) && close()"\n x-id="[\'dropdown-button\']"\n class="relative"\n >\n\n {{!-- Button --}}\n <button\n x-ref="button"\n x-on:click="toggle()"\n :aria-expanded="open"\n :aria-controls="$id(\'dropdown-button\')"\n type="button"\n class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren\n <div x-cloak x-show="open" class="w-3 h-3">\n {{> components/base/image/icon _icon=\'arrow-up\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\n <div x-show="!open" class="w-3 h-3">\n {{> components/base/image/icon _icon=\'arrow-down\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\n </button>\n\n {{!-- Flyout --}}\n <div\n x-ref="panel"\n x-show="open"\n x-transition.origin.top.left\n x-on:click.outside="close($refs.button)"\n :id="$id(\'dropdown-button\')"\n style="display: none;"\n 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"\n >\n {{~#with this.podcastHoster~}}\n <ul>\n {{~#each this~}}\n <li class="border-b last:border-0"> \n <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"\n title="{{this.podcastHosterName}}" \n target="_blank"\n rel="noopener noreferrer"\n href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>\n </li>\n {{~/each~}}\n </ul>\n {{~/with~}}\n \n </div>\n </div>\n</div>'
|
|
82
80
|
module.exports['components/teaser/podcast/podcast_timedisplay.hbs'] = '<div id="timedisplay{{_id}}" class="{{_containerCss}}">\n <span class="{{_currentTimeClasses}} " id="currentTime" >00:00</span>\n <span class="{{_durationClasses}} px-0.5"> / </span>\n <span class="{{_durationClasses}}" id="audioDurationFancy"> </span>\n</div>'
|
|
83
81
|
module.exports['components/teaser/podcast/podcast_title.hbs'] = '{{#decorator \'components/base/link\' _css="font-headingSerif font-bold text-base mt-2.5 text-toplineColor line-clamp-4 md:line-clamp-2 ..." }} \n <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"]\' ~}}">\n {{~_title~}}\n </span>\n{{/decorator}}'
|
|
82
|
+
module.exports['components/teaser/stage/stage_text.hbs'] = '<div class="absolute left-2/4 right-auto bottom-15 lg:bottom-10 flex w-full px-5 sm:px-11.5 -translate-x-2/4 {{inline-switch this.stageTextPosition \'["right50"]\' \'[" justify-end"," justify-start"]\'}}">\n <div class="p-4 rounded-2xl bg-stageTextBox opacity-85{{inline-switch this.stageTextPosition \'["left100"]\' \'[" w-full"," max-w-xs sm:w-fit md:max-w-2/4"]\'}} ">\n {{#decorator \'components/base/link\'}}\n {{> components/teaser/components/teaser_heading _titleCss="text-stageText" _toplineCss="text-stageText" _labelCss="text-stageText" _title=this.title _label=this.label _topline=this.topline _headlineTag="h2" _size="100" _teaserType="stage" _fontVariant="sans-serif"}}\n {{#if this.showProfileInfoAsByline}}\n <p class="text-stageText font-headingSerif block my-3">{{this.profiles}}</p>\n {{/if}}\n {{#if this.showShorttext}}\n <p class="hidden sm:block text-stageText">{{this.shorttext}}</p>\n {{#if this.link.hasIcon}}\n <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}\n {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]\n </span>\n {{/if}}\n {{/if}}\n {{#with this.eventtags}}\n {{#with this.series}}\n <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n {{/with}}\n {{#with this.project}}\n <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n {{/with}}\n {{#with this.externalProject}}\n <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this}}</span>\n {{/with}}\n {{/with}}\n {{#with this.location}}\n {{> components/base/loadSSI this.stageLocationSsi _templatePath=\'components/event/stage_location.ssi\' }} \n {{/with}}\n {{#if this.link.hasIcon}}\n <span class="block mt-4 hover:underline text-stageLink {{if this.showShorttext \'hidden\'}}">[{{this.link.readMoreText.readMore}}\n {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline w-5 h-5 fill-current ml-1" }}]\n </span>\n {{/if}}\n {{/decorator}}\n </div>\n</div>'
|
|
83
|
+
module.exports['components/teaser/tabbox/group_tabbox.hbs'] = '<section \n x-show="tab === \'{{this.groupTitle}}\'"\n class="pb-10"\n>\n {{~#if this.hasGroupTitle~}}\n <h3 class="sr-only">\n <a class="" href="#tgp{{this.teaserIndex}}">\n <span class="">{{this.groupTitle}}</span>\n <span class="">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n {{> components/base/image/icon _icon="arrow-up" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n </span>\n </a>\n </h3>\n {{~/if~}}\n\n <a class="w-0" name="tgp{{this.teaserIndex}}"></a>\n <div class="grid content-start grid-cols-12 px-0 md:px-8 colspan-12 gap-x-6 gap-y-6">\n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n </div>\n {{~#if this.link~}}\n <div class="flex justify-center pt-8">\n {{~> components/button/button_pseudo _linkTitle=(loca "group_tabbed_more" this.title) ~}}\n </div>\n {{~/if~}}\n</section>'
|
|
84
|
+
module.exports['components/teaser/tabbox/teaser_tabbox.hbs'] = '</div>\n<div \n x-data="{ tab: \'{{this.tabbedGroup.[0].title}}\' }"\n class="grid grid-cols-12 pt-6 mx-0 col-full md:pt-7 bg-blue-accented md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"\n>\n <section class="col-span-full" data-hr-group-tabbed=\'{"wandaPageId":"{{this.wandaPageId}}"}\'>\n <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">\n {{~#each this.tabbedGroup~}}\n <button onclick="window.location.href=\'#tgp{{@index}}\';"\n :class="tab === \'{{this.title}}\' ? \'text-white bg-blue-congress border-blue-congress\' : \'bg-white text-toplineColor border-white hover:border-toplineColor\'" \n x-effect="$el.removeAttribute(\'onclick\')"\n x-on:click.prevent="tab = \'{{this.title}}\'" \n class="border text-base font-heading py-px px-2 m-1.5" \n type="button" \n role="tab"\n >\n {{this.title}}\n </button>\n {{~/each~}}\n </div>\n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
|
|
84
85
|
module.exports['components/teaser/teaser_logic/teaser_logic.hbs'] = '{{~#each this.logicItems}}\n {{~#if this.isSsi~}} \n {{#if (isStorybook)}} \n {{> components/teaser/teaser_logic/teaser_logic.ssi }} \n {{else}}\n {{{this.ssi}}}\n {{/if}} \n {{~else}}\n {{~#with this.includeModel~}}\n {{~#if (isStorybook)~}}\n {{~> components/base/load_dynamic _templatePath=../includePath ~}} \n {{~else~}}\n {{~> (lookup ../. \'includePath\')~}}\n {{~/if~}}\n {{~/with~}}\n {{~/if~}}\n{{/each~}}'
|
|
85
86
|
module.exports['components/teaser/teaser_logic/teaser_logic.ssi.hbs'] = '{{~#with this.logicItem~}}\n {{~#with this.includeModel~}}\n {{~#if (isStorybook)~}}\n {{~> components/base/load_dynamic _templatePath=../includePath ~}}\n {{~else~}}\n {{~#with this.cacheKey~}}\n {{~addCacheEntry this ~}}\n {{~/with~}}\n {{~> (lookup ../. \'includePath\')~}}\n {{~/if~}}\n {{~/with~}}\n{{~/with~}}'
|
package/dist/assets/index.css
CHANGED
|
@@ -585,6 +585,29 @@ video {
|
|
|
585
585
|
margin: 3px 20px 0 0;
|
|
586
586
|
}
|
|
587
587
|
}
|
|
588
|
+
/* PODCAST SEEK SLIDER*/
|
|
589
|
+
.seek_slider::-webkit-slider-thumb{
|
|
590
|
+
-webkit-appearance: none;
|
|
591
|
+
-moz-appearance: none;
|
|
592
|
+
appearance: none;
|
|
593
|
+
width: 16px;
|
|
594
|
+
height: 16px;
|
|
595
|
+
background: #F07800;
|
|
596
|
+
border: 2px solid white;
|
|
597
|
+
cursor: pointer;
|
|
598
|
+
border-radius: 50%;
|
|
599
|
+
}
|
|
600
|
+
.seek_slider::-moz-range-thumb{
|
|
601
|
+
-webkit-appearance: none;
|
|
602
|
+
-moz-appearance: none;
|
|
603
|
+
appearance: none;
|
|
604
|
+
width: 12px;
|
|
605
|
+
height: 12px;
|
|
606
|
+
background: #F07800;
|
|
607
|
+
border: 2px solid white;
|
|
608
|
+
cursor: pointer;
|
|
609
|
+
border-radius: 50%;
|
|
610
|
+
}
|
|
588
611
|
.sr-only {
|
|
589
612
|
position: absolute;
|
|
590
613
|
width: 1px;
|
|
@@ -985,6 +1008,9 @@ video {
|
|
|
985
1008
|
.max-h-6 {
|
|
986
1009
|
max-height: 1.5rem;
|
|
987
1010
|
}
|
|
1011
|
+
.max-h-9 {
|
|
1012
|
+
max-height: 2.25rem;
|
|
1013
|
+
}
|
|
988
1014
|
.w-16 {
|
|
989
1015
|
width: 4rem;
|
|
990
1016
|
}
|
|
@@ -2222,7 +2248,7 @@ video {
|
|
|
2222
2248
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2223
2249
|
}
|
|
2224
2250
|
.counter-reset {
|
|
2225
|
-
counter-reset:
|
|
2251
|
+
counter-reset: cnt1668699743376;
|
|
2226
2252
|
}
|
|
2227
2253
|
.line-clamp-4 {
|
|
2228
2254
|
overflow: hidden;
|
|
@@ -2611,7 +2637,7 @@ video {
|
|
|
2611
2637
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2612
2638
|
}
|
|
2613
2639
|
.-ordered {
|
|
2614
|
-
counter-increment:
|
|
2640
|
+
counter-increment: cnt1668699743376 1;
|
|
2615
2641
|
}
|
|
2616
2642
|
.-ordered::before {
|
|
2617
2643
|
position: absolute;
|
|
@@ -2627,7 +2653,7 @@ video {
|
|
|
2627
2653
|
letter-spacing: .0125em;
|
|
2628
2654
|
--tw-text-opacity: 1;
|
|
2629
2655
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2630
|
-
content: counter(
|
|
2656
|
+
content: counter(cnt1668699743376);
|
|
2631
2657
|
}
|
|
2632
2658
|
.\[-T\:\+Z\] {
|
|
2633
2659
|
--t: +Z;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export default function playaudio(){
|
|
2
2
|
return {
|
|
3
|
-
audioDuration: 0,
|
|
4
3
|
playerCount: 0,
|
|
5
4
|
playlist: {},
|
|
6
5
|
registerPlayer(duration,id){
|
|
@@ -15,7 +14,7 @@ export default function playaudio(){
|
|
|
15
14
|
_player.currentlyPlaying = false
|
|
16
15
|
_player.init = false
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
// this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
|
|
19
18
|
this.playerCount++
|
|
20
19
|
|
|
21
20
|
this.playlist[id] = _player
|
|
@@ -23,14 +22,14 @@ export default function playaudio(){
|
|
|
23
22
|
},
|
|
24
23
|
listenToGlobalStop(){
|
|
25
24
|
console.log('global listener init')
|
|
26
|
-
window.addEventListener('hr:global:stopOtherAVs',
|
|
25
|
+
window.addEventListener('hr:global:stopOtherAVs', this.stopAllOtherPlayers)
|
|
27
26
|
},
|
|
28
27
|
rangeInput(id) {
|
|
29
28
|
if(this.playlist[id].init == false) {
|
|
30
29
|
this.playAndStop(id)
|
|
31
30
|
this.playAndStop(id)
|
|
32
31
|
}
|
|
33
|
-
this.playlist[id].audioElement.currentTime = (this.playlist[id].range.value/1000) * this.
|
|
32
|
+
this.playlist[id].audioElement.currentTime = (this.playlist[id].range.value/1000) * this.playlist[id].audioElement.duration
|
|
34
33
|
},
|
|
35
34
|
|
|
36
35
|
setTime(duration, id) {
|
|
@@ -48,8 +47,6 @@ export default function playaudio(){
|
|
|
48
47
|
var durationSeconds = (hours * 3600 + minutes * 60 + seconds).toFixed(3);
|
|
49
48
|
}
|
|
50
49
|
|
|
51
|
-
this.audioDuration = durationSeconds;
|
|
52
|
-
|
|
53
50
|
let range = document.getElementById("range"+id)
|
|
54
51
|
range.value = 0
|
|
55
52
|
this.$el.querySelector('#currentTime').innerHTML = this.fancyTimeFormat('0',false)
|
|
@@ -57,46 +54,51 @@ export default function playaudio(){
|
|
|
57
54
|
|
|
58
55
|
},
|
|
59
56
|
|
|
60
|
-
updateCurrentTime(range,timeDisplay,newTime) {
|
|
57
|
+
updateCurrentTime(range,timeDisplay,newTime, id) {
|
|
58
|
+
|
|
61
59
|
timeDisplay.querySelector('#currentTime').innerHTML = this.fancyTimeFormat(newTime, false)
|
|
62
|
-
range.style.background = 'linear-gradient(to right, #006dc1 ' + range.value/10
|
|
63
|
-
range.value = ((100 * newTime) / this.
|
|
60
|
+
range.style.background = 'linear-gradient(to right, #006dc1 ' + (range.value/10) + '%, white ' + (range.value/10) + '% )'
|
|
61
|
+
range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
|
|
64
62
|
},
|
|
65
63
|
|
|
66
64
|
playAndStop(id) {
|
|
67
65
|
console.log('event target: ' + this.$event.currentTarget.id)
|
|
66
|
+
console.log('playlist: ', this.playlist)
|
|
68
67
|
if(this.playlist[id].init == true){
|
|
69
68
|
this.stopAudio(id)
|
|
70
|
-
this.playlist[id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
71
|
-
this.playlist[id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
72
69
|
} else {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
this.
|
|
70
|
+
// this.$dispatch('stopotherplayers',{playerId: id});
|
|
71
|
+
this.stopAllOtherPlayers(id)
|
|
72
|
+
|
|
73
|
+
this.startAudio(id)
|
|
74
|
+
this.playlist[id].range.parentNode.classList.remove('max-h-0')
|
|
75
|
+
this.playlist[id].range.parentNode.classList.add('max-h-9')
|
|
77
76
|
this.playlist[id].button.querySelector('.js-playbutton').classList.add('hidden')
|
|
78
77
|
this.playlist[id].button.querySelector('.js-pausebutton').classList.remove('hidden')
|
|
78
|
+
//let event = new Event("hr:global:stopOtherAVs");
|
|
79
|
+
//window.dispatchEvent(event);
|
|
79
80
|
}
|
|
80
81
|
},
|
|
81
82
|
|
|
82
|
-
stopAllOtherPlayers(id){
|
|
83
|
+
stopAllOtherPlayers(id){ //id=2
|
|
83
84
|
let players = document.querySelectorAll('audio.hidden')
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
for (let i=0; i<players.length; i++){
|
|
86
|
+
if ( players[i].dataset.id != id){
|
|
87
|
+
this.stopAudio(players[i].dataset.id)
|
|
88
|
+
|
|
89
|
+
// this.playlist[players[i].dataset.id].init=false;
|
|
90
|
+
// this.playlist[players[i].dataset.id].audioElement.pause()
|
|
91
|
+
// this.playlist[players[i].dataset.id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
92
|
+
// this.playlist[players[i].dataset.id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
93
|
+
this.playlist[players[i].dataset.id].range.parentNode.classList.add('max-h-0')
|
|
94
|
+
this.playlist[players[i].dataset.id].range.parentNode.classList.remove('max-h-9')
|
|
92
95
|
}
|
|
93
|
-
|
|
96
|
+
}
|
|
94
97
|
},
|
|
95
98
|
|
|
96
|
-
startAudio(id
|
|
97
|
-
console.log('start audio '+ id
|
|
99
|
+
startAudio(id) {
|
|
100
|
+
console.log('start audio '+ id )
|
|
98
101
|
if(this.playlist[id].init == false){
|
|
99
|
-
this.audioDuration = duration;
|
|
100
102
|
this.initAudioEventListener(id)
|
|
101
103
|
this.playlist[id].init = true;
|
|
102
104
|
|
|
@@ -105,11 +107,12 @@ export default function playaudio(){
|
|
|
105
107
|
this.playlist[id].currentlyPlaying = true;
|
|
106
108
|
},
|
|
107
109
|
|
|
108
|
-
stopAudio(id) {
|
|
109
|
-
console.log('stop audio '+ id)
|
|
110
|
+
stopAudio(id) {
|
|
110
111
|
this.playlist[id].audioElement.pause()
|
|
111
112
|
this.playlist[id].init = false;
|
|
112
|
-
this.playlist[id].currentlyPlaying = false;
|
|
113
|
+
this.playlist[id].currentlyPlaying = false;
|
|
114
|
+
this.playlist[id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
115
|
+
this.playlist[id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
113
116
|
},
|
|
114
117
|
|
|
115
118
|
initAudioEventListener(id) {
|
|
@@ -117,7 +120,7 @@ export default function playaudio(){
|
|
|
117
120
|
let _range = this.playlist[id].range
|
|
118
121
|
let _timeDisplay = this.playlist[id].timeDisplay
|
|
119
122
|
_audioElement.ontimeupdate = (event) => {
|
|
120
|
-
this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime)
|
|
123
|
+
this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime, id)
|
|
121
124
|
};
|
|
122
125
|
},
|
|
123
126
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<button id="button{{_id}}" x-
|
|
1
|
+
<button id="button{{_id}}" x-on:keydown.tab="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">
|
|
2
2
|
<div class="text-white rounded-full js-playbutton bg-blue-science ring-white ring">
|
|
3
3
|
{{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
|
|
4
4
|
</div>
|
|
@@ -55,8 +55,11 @@
|
|
|
55
55
|
ax-load
|
|
56
56
|
x-ignore
|
|
57
57
|
ax-load-src="/vendor/js/podcast_player.alpine.js">
|
|
58
|
-
{{> components/teaser/podcast/podcast_player_ui
|
|
59
|
-
|
|
58
|
+
{{> components/teaser/podcast/podcast_player_ui
|
|
59
|
+
_isPlaylistPlayer=false
|
|
60
|
+
_podcastDuration=podcastDuration _id=(nextRandom)
|
|
61
|
+
_first=true
|
|
62
|
+
}}
|
|
60
63
|
</div>
|
|
61
64
|
|
|
62
65
|
{{!-- Abo-Dropdown --}}
|
|
@@ -148,30 +151,4 @@
|
|
|
148
151
|
</div>
|
|
149
152
|
{{/with~}}
|
|
150
153
|
{{/unless}}
|
|
151
|
-
{{/unless}}
|
|
152
|
-
|
|
153
|
-
<style>
|
|
154
|
-
/* Modify the appearance of the slider thumb */
|
|
155
|
-
.seek_slider::-webkit-slider-thumb{
|
|
156
|
-
-webkit-appearance: none;
|
|
157
|
-
-moz-appearance: none;
|
|
158
|
-
appearance: none;
|
|
159
|
-
width: 16px;
|
|
160
|
-
height: 16px;
|
|
161
|
-
background: #F07800;
|
|
162
|
-
border: 2px solid white;
|
|
163
|
-
cursor: pointer;
|
|
164
|
-
border-radius: 50%;
|
|
165
|
-
}
|
|
166
|
-
.seek_slider::-moz-range-thumb{
|
|
167
|
-
-webkit-appearance: none;
|
|
168
|
-
-moz-appearance: none;
|
|
169
|
-
appearance: none;
|
|
170
|
-
width: 12px;
|
|
171
|
-
height: 12px;
|
|
172
|
-
background: #F07800;
|
|
173
|
-
border: 2px solid white;
|
|
174
|
-
cursor: pointer;
|
|
175
|
-
border-radius: 50%;
|
|
176
|
-
}
|
|
177
|
-
</style>
|
|
154
|
+
{{/unless}}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
<div class="flex w-full">
|
|
2
2
|
<div class="flex flex-wrap w-full js-load"
|
|
3
3
|
>
|
|
4
|
-
|
|
5
4
|
<div class="flex {{#if _isPlaylistPlayer}}items-start{{else}}items-center{{/if}} w-full flex-nowrap">
|
|
6
5
|
|
|
7
6
|
{{!-- Start/StopButton --}}
|
|
8
7
|
<div id="playbutton{{_id}}" class="flex">
|
|
9
8
|
{{> components/teaser/podcast/podcast_playbutton
|
|
10
9
|
_css="mr-4"
|
|
11
|
-
_x-show="currentlyPlaying"
|
|
12
10
|
_id = _id
|
|
13
11
|
_alpineClick=(loca "play_button_alpine_click" _id) }}
|
|
14
12
|
</div>
|
|
@@ -42,14 +40,17 @@
|
|
|
42
40
|
{{/if}}
|
|
43
41
|
|
|
44
42
|
{{!-- Range Slider --}}
|
|
45
|
-
<div class="flex w-full
|
|
46
|
-
<input
|
|
43
|
+
<div class="flex w-full transition-all overflow-hidden {{#if _first}}max-h-9{{else}}max-h-0{{/if}}">
|
|
44
|
+
<input
|
|
45
|
+
{{#unless @first}}x-cloak{{/unless}}
|
|
46
|
+
x-ref="range"
|
|
47
47
|
id="range{{_id}}"
|
|
48
48
|
x-on:input="rangeInput({{_id}})"
|
|
49
49
|
type="range" {{!-- x-bind:value="currentTimePercentage" --}}
|
|
50
50
|
min="0"
|
|
51
|
-
max="1000"
|
|
52
|
-
|
|
51
|
+
max="1000"
|
|
52
|
+
value="0"
|
|
53
|
+
class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" >
|
|
53
54
|
</div>
|
|
54
55
|
|
|
55
56
|
{{#if _isPlaylistPlayer}}
|
|
@@ -80,6 +81,7 @@
|
|
|
80
81
|
{{~#with this.audioUrl ~}}
|
|
81
82
|
<audio
|
|
82
83
|
class="{{../_id}} hidden"
|
|
84
|
+
data-id="{{../_id}}"
|
|
83
85
|
x-init="registerPlayer('{{../_podcastDuration}}','{{../_id}}')"
|
|
84
86
|
@stopotherplayers.window="stopAllOtherPlayers({{../_id}})">
|
|
85
87
|
<source src={{this}} type='audio/mp3'/>
|
|
@@ -51,71 +51,7 @@
|
|
|
51
51
|
|
|
52
52
|
{{!-- Abo-Dropdown --}}
|
|
53
53
|
{{#with this.podcastChannel}}
|
|
54
|
-
|
|
55
|
-
{{!-- Container --}}
|
|
56
|
-
<div x-cloak x-data="{
|
|
57
|
-
open: false,
|
|
58
|
-
toggle() {
|
|
59
|
-
if (this.open) {
|
|
60
|
-
return this.close()
|
|
61
|
-
}
|
|
62
|
-
this.$refs.button.focus()
|
|
63
|
-
this.open = true
|
|
64
|
-
},
|
|
65
|
-
close(focusAfter) {
|
|
66
|
-
if (! this.open) return
|
|
67
|
-
this.open = false
|
|
68
|
-
focusAfter && focusAfter.focus()
|
|
69
|
-
}}"
|
|
70
|
-
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
71
|
-
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
72
|
-
x-id="['dropdown-button']"
|
|
73
|
-
class="relative"
|
|
74
|
-
>
|
|
75
|
-
|
|
76
|
-
{{!-- Button --}}
|
|
77
|
-
<button
|
|
78
|
-
x-ref="button"
|
|
79
|
-
x-on:click="toggle()"
|
|
80
|
-
:aria-expanded="open"
|
|
81
|
-
:aria-controls="$id('dropdown-button')"
|
|
82
|
-
type="button"
|
|
83
|
-
class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren
|
|
84
|
-
<div x-show="open">
|
|
85
|
-
{{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
86
|
-
</div>
|
|
87
|
-
<div x-show="!open">
|
|
88
|
-
{{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}
|
|
89
|
-
</div>
|
|
90
|
-
</button>
|
|
91
|
-
|
|
92
|
-
{{!-- Flyout --}}
|
|
93
|
-
<div
|
|
94
|
-
x-ref="panel"
|
|
95
|
-
x-show="open"
|
|
96
|
-
x-transition.origin.top.left
|
|
97
|
-
x-on:click.outside="close($refs.button)"
|
|
98
|
-
:id="$id('dropdown-button')"
|
|
99
|
-
style="display: none;"
|
|
100
|
-
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"
|
|
101
|
-
>
|
|
102
|
-
{{#with this.podcastHoster}}
|
|
103
|
-
<ul>
|
|
104
|
-
{{#each this}}
|
|
105
|
-
<li class="border-b last:border-0">
|
|
106
|
-
<a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"
|
|
107
|
-
title="{{this.podcastHosterName}}"
|
|
108
|
-
target="_blank"
|
|
109
|
-
rel="noopener noreferrer"
|
|
110
|
-
href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
|
|
111
|
-
</li>
|
|
112
|
-
{{/each}}
|
|
113
|
-
</ul>
|
|
114
|
-
{{/with}}
|
|
115
|
-
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
54
|
+
{{> components/teaser/podcast/podcast_subscribe_button}}
|
|
119
55
|
{{/with}}
|
|
120
56
|
|
|
121
57
|
</div>
|
|
@@ -123,52 +59,25 @@
|
|
|
123
59
|
</div>
|
|
124
60
|
</div>
|
|
125
61
|
|
|
126
|
-
{{!-- Player UI --}}
|
|
127
|
-
<div class="flex flex-col col-span-12 gap-5 px-5"
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
</div>
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<style>
|
|
152
|
-
.seek_slider::-webkit-slider-thumb{
|
|
153
|
-
-webkit-appearance: none;
|
|
154
|
-
-moz-appearance: none;
|
|
155
|
-
appearance: none;
|
|
156
|
-
width: 16px;
|
|
157
|
-
height: 16px;
|
|
158
|
-
background: #F07800;
|
|
159
|
-
border: 2px solid white;
|
|
160
|
-
cursor: pointer;
|
|
161
|
-
border-radius: 50%;
|
|
162
|
-
}
|
|
163
|
-
.seek_slider::-moz-range-thumb{
|
|
164
|
-
-webkit-appearance: none;
|
|
165
|
-
-moz-appearance: none;
|
|
166
|
-
appearance: none;
|
|
167
|
-
width: 12px;
|
|
168
|
-
height: 12px;
|
|
169
|
-
background: #F07800;
|
|
170
|
-
border: 2px solid white;
|
|
171
|
-
cursor: pointer;
|
|
172
|
-
border-radius: 50%;
|
|
173
|
-
}
|
|
174
|
-
</style>
|
|
62
|
+
{{!-- Player UI --}}
|
|
63
|
+
<div class="flex flex-col col-span-12 gap-5 px-5"
|
|
64
|
+
x-data="playaudio()"
|
|
65
|
+
x-init="listenToGlobalStop()"
|
|
66
|
+
ax-load
|
|
67
|
+
x-ignore
|
|
68
|
+
ax-load-src="/vendor/js/podcast_player.alpine.js">
|
|
69
|
+
{{#with this.playlistItems}}
|
|
70
|
+
{{#each this}}
|
|
71
|
+
<div class="flex pb-5 border-b {{#unless @last}}border-white{{/unless}}" >
|
|
72
|
+
{{> components/teaser/podcast/podcast_player_ui
|
|
73
|
+
_isPlaylistPlayer=true
|
|
74
|
+
_podcastDuration=podcastDuration
|
|
75
|
+
_title=title
|
|
76
|
+
_id=(nextRandom)
|
|
77
|
+
_first=@first
|
|
78
|
+
}}
|
|
79
|
+
</div>
|
|
80
|
+
{{/each}}
|
|
81
|
+
{{/with}}
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<div class="flex">
|
|
2
|
+
{{!-- Container --}}
|
|
3
|
+
<div x-data="{
|
|
4
|
+
open: false,
|
|
5
|
+
toggle() {
|
|
6
|
+
if (this.open) {
|
|
7
|
+
return this.close()
|
|
8
|
+
}
|
|
9
|
+
this.$refs.button.focus()
|
|
10
|
+
this.open = true
|
|
11
|
+
},
|
|
12
|
+
close(focusAfter) {
|
|
13
|
+
if (! this.open) return
|
|
14
|
+
this.open = false
|
|
15
|
+
focusAfter && focusAfter.focus()
|
|
16
|
+
}}"
|
|
17
|
+
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
18
|
+
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
19
|
+
x-id="['dropdown-button']"
|
|
20
|
+
class="relative"
|
|
21
|
+
>
|
|
22
|
+
|
|
23
|
+
{{!-- Button --}}
|
|
24
|
+
<button
|
|
25
|
+
x-ref="button"
|
|
26
|
+
x-on:click="toggle()"
|
|
27
|
+
:aria-expanded="open"
|
|
28
|
+
:aria-controls="$id('dropdown-button')"
|
|
29
|
+
type="button"
|
|
30
|
+
class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren
|
|
31
|
+
<div x-cloak x-show="open" class="w-3 h-3">
|
|
32
|
+
{{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
33
|
+
</div>
|
|
34
|
+
<div x-show="!open" class="w-3 h-3">
|
|
35
|
+
{{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
36
|
+
</div>
|
|
37
|
+
</button>
|
|
38
|
+
|
|
39
|
+
{{!-- Flyout --}}
|
|
40
|
+
<div
|
|
41
|
+
x-ref="panel"
|
|
42
|
+
x-show="open"
|
|
43
|
+
x-transition.origin.top.left
|
|
44
|
+
x-on:click.outside="close($refs.button)"
|
|
45
|
+
:id="$id('dropdown-button')"
|
|
46
|
+
style="display: none;"
|
|
47
|
+
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"
|
|
48
|
+
>
|
|
49
|
+
{{~#with this.podcastHoster~}}
|
|
50
|
+
<ul>
|
|
51
|
+
{{~#each this~}}
|
|
52
|
+
<li class="border-b last:border-0">
|
|
53
|
+
<a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"
|
|
54
|
+
title="{{this.podcastHosterName}}"
|
|
55
|
+
target="_blank"
|
|
56
|
+
rel="noopener noreferrer"
|
|
57
|
+
href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
|
|
58
|
+
</li>
|
|
59
|
+
{{~/each~}}
|
|
60
|
+
</ul>
|
|
61
|
+
{{~/with~}}
|
|
62
|
+
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>
|
|
22
22
|
{{/with}}
|
|
23
23
|
{{#with this.externalProject}}
|
|
24
|
-
<span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this
|
|
24
|
+
<span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this}}</span>
|
|
25
25
|
{{/with}}
|
|
26
26
|
{{/with}}
|
|
27
27
|
{{#with this.location}}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "0.
|
|
9
|
+
"version": "0.85.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
.btn--xl {
|
|
31
31
|
@apply px-6 py-3 text-lg;
|
|
32
32
|
}
|
|
33
|
-
|
|
34
33
|
.headline-barrier {
|
|
35
34
|
display: flex;
|
|
36
35
|
width: 100%;
|
|
@@ -51,6 +50,7 @@
|
|
|
51
50
|
margin: 3px 0 0 10px;
|
|
52
51
|
|
|
53
52
|
}
|
|
53
|
+
|
|
54
54
|
@media screen(md) {
|
|
55
55
|
.headline-barrier:after {
|
|
56
56
|
margin: 3px 0 0 20px;
|
|
@@ -59,4 +59,28 @@
|
|
|
59
59
|
margin: 3px 20px 0 0;
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
|
+
|
|
63
|
+
/* PODCAST SEEK SLIDER*/
|
|
64
|
+
.seek_slider::-webkit-slider-thumb{
|
|
65
|
+
-webkit-appearance: none;
|
|
66
|
+
-moz-appearance: none;
|
|
67
|
+
appearance: none;
|
|
68
|
+
width: 16px;
|
|
69
|
+
height: 16px;
|
|
70
|
+
background: #F07800;
|
|
71
|
+
border: 2px solid white;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
border-radius: 50%;
|
|
74
|
+
}
|
|
75
|
+
.seek_slider::-moz-range-thumb{
|
|
76
|
+
-webkit-appearance: none;
|
|
77
|
+
-moz-appearance: none;
|
|
78
|
+
appearance: none;
|
|
79
|
+
width: 12px;
|
|
80
|
+
height: 12px;
|
|
81
|
+
background: #F07800;
|
|
82
|
+
border: 2px solid white;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
border-radius: 50%;
|
|
85
|
+
}
|
|
62
86
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export default function playaudio(){
|
|
2
2
|
return {
|
|
3
|
-
audioDuration: 0,
|
|
4
3
|
playerCount: 0,
|
|
5
4
|
playlist: {},
|
|
6
5
|
registerPlayer(duration,id){
|
|
@@ -15,7 +14,7 @@ export default function playaudio(){
|
|
|
15
14
|
_player.currentlyPlaying = false
|
|
16
15
|
_player.init = false
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
// this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
|
|
19
18
|
this.playerCount++
|
|
20
19
|
|
|
21
20
|
this.playlist[id] = _player
|
|
@@ -23,14 +22,14 @@ export default function playaudio(){
|
|
|
23
22
|
},
|
|
24
23
|
listenToGlobalStop(){
|
|
25
24
|
console.log('global listener init')
|
|
26
|
-
window.addEventListener('hr:global:stopOtherAVs',
|
|
25
|
+
window.addEventListener('hr:global:stopOtherAVs', this.stopAllOtherPlayers)
|
|
27
26
|
},
|
|
28
27
|
rangeInput(id) {
|
|
29
28
|
if(this.playlist[id].init == false) {
|
|
30
29
|
this.playAndStop(id)
|
|
31
30
|
this.playAndStop(id)
|
|
32
31
|
}
|
|
33
|
-
this.playlist[id].audioElement.currentTime = (this.playlist[id].range.value/1000) * this.
|
|
32
|
+
this.playlist[id].audioElement.currentTime = (this.playlist[id].range.value/1000) * this.playlist[id].audioElement.duration
|
|
34
33
|
},
|
|
35
34
|
|
|
36
35
|
setTime(duration, id) {
|
|
@@ -48,8 +47,6 @@ export default function playaudio(){
|
|
|
48
47
|
var durationSeconds = (hours * 3600 + minutes * 60 + seconds).toFixed(3);
|
|
49
48
|
}
|
|
50
49
|
|
|
51
|
-
this.audioDuration = durationSeconds;
|
|
52
|
-
|
|
53
50
|
let range = document.getElementById("range"+id)
|
|
54
51
|
range.value = 0
|
|
55
52
|
this.$el.querySelector('#currentTime').innerHTML = this.fancyTimeFormat('0',false)
|
|
@@ -57,46 +54,51 @@ export default function playaudio(){
|
|
|
57
54
|
|
|
58
55
|
},
|
|
59
56
|
|
|
60
|
-
updateCurrentTime(range,timeDisplay,newTime) {
|
|
57
|
+
updateCurrentTime(range,timeDisplay,newTime, id) {
|
|
58
|
+
|
|
61
59
|
timeDisplay.querySelector('#currentTime').innerHTML = this.fancyTimeFormat(newTime, false)
|
|
62
|
-
range.style.background = 'linear-gradient(to right, #006dc1 ' + range.value/10
|
|
63
|
-
range.value = ((100 * newTime) / this.
|
|
60
|
+
range.style.background = 'linear-gradient(to right, #006dc1 ' + (range.value/10) + '%, white ' + (range.value/10) + '% )'
|
|
61
|
+
range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
|
|
64
62
|
},
|
|
65
63
|
|
|
66
64
|
playAndStop(id) {
|
|
67
65
|
console.log('event target: ' + this.$event.currentTarget.id)
|
|
66
|
+
console.log('playlist: ', this.playlist)
|
|
68
67
|
if(this.playlist[id].init == true){
|
|
69
68
|
this.stopAudio(id)
|
|
70
|
-
this.playlist[id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
71
|
-
this.playlist[id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
72
69
|
} else {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
this.
|
|
70
|
+
// this.$dispatch('stopotherplayers',{playerId: id});
|
|
71
|
+
this.stopAllOtherPlayers(id)
|
|
72
|
+
|
|
73
|
+
this.startAudio(id)
|
|
74
|
+
this.playlist[id].range.parentNode.classList.remove('max-h-0')
|
|
75
|
+
this.playlist[id].range.parentNode.classList.add('max-h-9')
|
|
77
76
|
this.playlist[id].button.querySelector('.js-playbutton').classList.add('hidden')
|
|
78
77
|
this.playlist[id].button.querySelector('.js-pausebutton').classList.remove('hidden')
|
|
78
|
+
//let event = new Event("hr:global:stopOtherAVs");
|
|
79
|
+
//window.dispatchEvent(event);
|
|
79
80
|
}
|
|
80
81
|
},
|
|
81
82
|
|
|
82
|
-
stopAllOtherPlayers(id){
|
|
83
|
+
stopAllOtherPlayers(id){ //id=2
|
|
83
84
|
let players = document.querySelectorAll('audio.hidden')
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
for (let i=0; i<players.length; i++){
|
|
86
|
+
if ( players[i].dataset.id != id){
|
|
87
|
+
this.stopAudio(players[i].dataset.id)
|
|
88
|
+
|
|
89
|
+
// this.playlist[players[i].dataset.id].init=false;
|
|
90
|
+
// this.playlist[players[i].dataset.id].audioElement.pause()
|
|
91
|
+
// this.playlist[players[i].dataset.id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
92
|
+
// this.playlist[players[i].dataset.id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
93
|
+
this.playlist[players[i].dataset.id].range.parentNode.classList.add('max-h-0')
|
|
94
|
+
this.playlist[players[i].dataset.id].range.parentNode.classList.remove('max-h-9')
|
|
92
95
|
}
|
|
93
|
-
|
|
96
|
+
}
|
|
94
97
|
},
|
|
95
98
|
|
|
96
|
-
startAudio(id
|
|
97
|
-
console.log('start audio '+ id
|
|
99
|
+
startAudio(id) {
|
|
100
|
+
console.log('start audio '+ id )
|
|
98
101
|
if(this.playlist[id].init == false){
|
|
99
|
-
this.audioDuration = duration;
|
|
100
102
|
this.initAudioEventListener(id)
|
|
101
103
|
this.playlist[id].init = true;
|
|
102
104
|
|
|
@@ -105,11 +107,12 @@ export default function playaudio(){
|
|
|
105
107
|
this.playlist[id].currentlyPlaying = true;
|
|
106
108
|
},
|
|
107
109
|
|
|
108
|
-
stopAudio(id) {
|
|
109
|
-
console.log('stop audio '+ id)
|
|
110
|
+
stopAudio(id) {
|
|
110
111
|
this.playlist[id].audioElement.pause()
|
|
111
112
|
this.playlist[id].init = false;
|
|
112
|
-
this.playlist[id].currentlyPlaying = false;
|
|
113
|
+
this.playlist[id].currentlyPlaying = false;
|
|
114
|
+
this.playlist[id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
115
|
+
this.playlist[id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
113
116
|
},
|
|
114
117
|
|
|
115
118
|
initAudioEventListener(id) {
|
|
@@ -117,7 +120,7 @@ export default function playaudio(){
|
|
|
117
120
|
let _range = this.playlist[id].range
|
|
118
121
|
let _timeDisplay = this.playlist[id].timeDisplay
|
|
119
122
|
_audioElement.ontimeupdate = (event) => {
|
|
120
|
-
this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime)
|
|
123
|
+
this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime, id)
|
|
121
124
|
};
|
|
122
125
|
},
|
|
123
126
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<button id="button{{_id}}" x-
|
|
1
|
+
<button id="button{{_id}}" x-on:keydown.tab="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">
|
|
2
2
|
<div class="text-white rounded-full js-playbutton bg-blue-science ring-white ring">
|
|
3
3
|
{{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
|
|
4
4
|
</div>
|
|
@@ -55,8 +55,11 @@
|
|
|
55
55
|
ax-load
|
|
56
56
|
x-ignore
|
|
57
57
|
ax-load-src="/vendor/js/podcast_player.alpine.js">
|
|
58
|
-
{{> components/teaser/podcast/podcast_player_ui
|
|
59
|
-
|
|
58
|
+
{{> components/teaser/podcast/podcast_player_ui
|
|
59
|
+
_isPlaylistPlayer=false
|
|
60
|
+
_podcastDuration=podcastDuration _id=(nextRandom)
|
|
61
|
+
_first=true
|
|
62
|
+
}}
|
|
60
63
|
</div>
|
|
61
64
|
|
|
62
65
|
{{!-- Abo-Dropdown --}}
|
|
@@ -148,30 +151,4 @@
|
|
|
148
151
|
</div>
|
|
149
152
|
{{/with~}}
|
|
150
153
|
{{/unless}}
|
|
151
|
-
{{/unless}}
|
|
152
|
-
|
|
153
|
-
<style>
|
|
154
|
-
/* Modify the appearance of the slider thumb */
|
|
155
|
-
.seek_slider::-webkit-slider-thumb{
|
|
156
|
-
-webkit-appearance: none;
|
|
157
|
-
-moz-appearance: none;
|
|
158
|
-
appearance: none;
|
|
159
|
-
width: 16px;
|
|
160
|
-
height: 16px;
|
|
161
|
-
background: #F07800;
|
|
162
|
-
border: 2px solid white;
|
|
163
|
-
cursor: pointer;
|
|
164
|
-
border-radius: 50%;
|
|
165
|
-
}
|
|
166
|
-
.seek_slider::-moz-range-thumb{
|
|
167
|
-
-webkit-appearance: none;
|
|
168
|
-
-moz-appearance: none;
|
|
169
|
-
appearance: none;
|
|
170
|
-
width: 12px;
|
|
171
|
-
height: 12px;
|
|
172
|
-
background: #F07800;
|
|
173
|
-
border: 2px solid white;
|
|
174
|
-
cursor: pointer;
|
|
175
|
-
border-radius: 50%;
|
|
176
|
-
}
|
|
177
|
-
</style>
|
|
154
|
+
{{/unless}}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
<div class="flex w-full">
|
|
2
2
|
<div class="flex flex-wrap w-full js-load"
|
|
3
3
|
>
|
|
4
|
-
|
|
5
4
|
<div class="flex {{#if _isPlaylistPlayer}}items-start{{else}}items-center{{/if}} w-full flex-nowrap">
|
|
6
5
|
|
|
7
6
|
{{!-- Start/StopButton --}}
|
|
8
7
|
<div id="playbutton{{_id}}" class="flex">
|
|
9
8
|
{{> components/teaser/podcast/podcast_playbutton
|
|
10
9
|
_css="mr-4"
|
|
11
|
-
_x-show="currentlyPlaying"
|
|
12
10
|
_id = _id
|
|
13
11
|
_alpineClick=(loca "play_button_alpine_click" _id) }}
|
|
14
12
|
</div>
|
|
@@ -42,14 +40,17 @@
|
|
|
42
40
|
{{/if}}
|
|
43
41
|
|
|
44
42
|
{{!-- Range Slider --}}
|
|
45
|
-
<div class="flex w-full
|
|
46
|
-
<input
|
|
43
|
+
<div class="flex w-full transition-all overflow-hidden {{#if _first}}max-h-9{{else}}max-h-0{{/if}}">
|
|
44
|
+
<input
|
|
45
|
+
{{#unless @first}}x-cloak{{/unless}}
|
|
46
|
+
x-ref="range"
|
|
47
47
|
id="range{{_id}}"
|
|
48
48
|
x-on:input="rangeInput({{_id}})"
|
|
49
49
|
type="range" {{!-- x-bind:value="currentTimePercentage" --}}
|
|
50
50
|
min="0"
|
|
51
|
-
max="1000"
|
|
52
|
-
|
|
51
|
+
max="1000"
|
|
52
|
+
value="0"
|
|
53
|
+
class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" >
|
|
53
54
|
</div>
|
|
54
55
|
|
|
55
56
|
{{#if _isPlaylistPlayer}}
|
|
@@ -80,6 +81,7 @@
|
|
|
80
81
|
{{~#with this.audioUrl ~}}
|
|
81
82
|
<audio
|
|
82
83
|
class="{{../_id}} hidden"
|
|
84
|
+
data-id="{{../_id}}"
|
|
83
85
|
x-init="registerPlayer('{{../_podcastDuration}}','{{../_id}}')"
|
|
84
86
|
@stopotherplayers.window="stopAllOtherPlayers({{../_id}})">
|
|
85
87
|
<source src={{this}} type='audio/mp3'/>
|
|
@@ -51,71 +51,7 @@
|
|
|
51
51
|
|
|
52
52
|
{{!-- Abo-Dropdown --}}
|
|
53
53
|
{{#with this.podcastChannel}}
|
|
54
|
-
|
|
55
|
-
{{!-- Container --}}
|
|
56
|
-
<div x-cloak x-data="{
|
|
57
|
-
open: false,
|
|
58
|
-
toggle() {
|
|
59
|
-
if (this.open) {
|
|
60
|
-
return this.close()
|
|
61
|
-
}
|
|
62
|
-
this.$refs.button.focus()
|
|
63
|
-
this.open = true
|
|
64
|
-
},
|
|
65
|
-
close(focusAfter) {
|
|
66
|
-
if (! this.open) return
|
|
67
|
-
this.open = false
|
|
68
|
-
focusAfter && focusAfter.focus()
|
|
69
|
-
}}"
|
|
70
|
-
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
71
|
-
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
72
|
-
x-id="['dropdown-button']"
|
|
73
|
-
class="relative"
|
|
74
|
-
>
|
|
75
|
-
|
|
76
|
-
{{!-- Button --}}
|
|
77
|
-
<button
|
|
78
|
-
x-ref="button"
|
|
79
|
-
x-on:click="toggle()"
|
|
80
|
-
:aria-expanded="open"
|
|
81
|
-
:aria-controls="$id('dropdown-button')"
|
|
82
|
-
type="button"
|
|
83
|
-
class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren
|
|
84
|
-
<div x-show="open">
|
|
85
|
-
{{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
86
|
-
</div>
|
|
87
|
-
<div x-show="!open">
|
|
88
|
-
{{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}
|
|
89
|
-
</div>
|
|
90
|
-
</button>
|
|
91
|
-
|
|
92
|
-
{{!-- Flyout --}}
|
|
93
|
-
<div
|
|
94
|
-
x-ref="panel"
|
|
95
|
-
x-show="open"
|
|
96
|
-
x-transition.origin.top.left
|
|
97
|
-
x-on:click.outside="close($refs.button)"
|
|
98
|
-
:id="$id('dropdown-button')"
|
|
99
|
-
style="display: none;"
|
|
100
|
-
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"
|
|
101
|
-
>
|
|
102
|
-
{{#with this.podcastHoster}}
|
|
103
|
-
<ul>
|
|
104
|
-
{{#each this}}
|
|
105
|
-
<li class="border-b last:border-0">
|
|
106
|
-
<a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"
|
|
107
|
-
title="{{this.podcastHosterName}}"
|
|
108
|
-
target="_blank"
|
|
109
|
-
rel="noopener noreferrer"
|
|
110
|
-
href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
|
|
111
|
-
</li>
|
|
112
|
-
{{/each}}
|
|
113
|
-
</ul>
|
|
114
|
-
{{/with}}
|
|
115
|
-
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
54
|
+
{{> components/teaser/podcast/podcast_subscribe_button}}
|
|
119
55
|
{{/with}}
|
|
120
56
|
|
|
121
57
|
</div>
|
|
@@ -123,52 +59,25 @@
|
|
|
123
59
|
</div>
|
|
124
60
|
</div>
|
|
125
61
|
|
|
126
|
-
{{!-- Player UI --}}
|
|
127
|
-
<div class="flex flex-col col-span-12 gap-5 px-5"
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
</div>
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<style>
|
|
152
|
-
.seek_slider::-webkit-slider-thumb{
|
|
153
|
-
-webkit-appearance: none;
|
|
154
|
-
-moz-appearance: none;
|
|
155
|
-
appearance: none;
|
|
156
|
-
width: 16px;
|
|
157
|
-
height: 16px;
|
|
158
|
-
background: #F07800;
|
|
159
|
-
border: 2px solid white;
|
|
160
|
-
cursor: pointer;
|
|
161
|
-
border-radius: 50%;
|
|
162
|
-
}
|
|
163
|
-
.seek_slider::-moz-range-thumb{
|
|
164
|
-
-webkit-appearance: none;
|
|
165
|
-
-moz-appearance: none;
|
|
166
|
-
appearance: none;
|
|
167
|
-
width: 12px;
|
|
168
|
-
height: 12px;
|
|
169
|
-
background: #F07800;
|
|
170
|
-
border: 2px solid white;
|
|
171
|
-
cursor: pointer;
|
|
172
|
-
border-radius: 50%;
|
|
173
|
-
}
|
|
174
|
-
</style>
|
|
62
|
+
{{!-- Player UI --}}
|
|
63
|
+
<div class="flex flex-col col-span-12 gap-5 px-5"
|
|
64
|
+
x-data="playaudio()"
|
|
65
|
+
x-init="listenToGlobalStop()"
|
|
66
|
+
ax-load
|
|
67
|
+
x-ignore
|
|
68
|
+
ax-load-src="/vendor/js/podcast_player.alpine.js">
|
|
69
|
+
{{#with this.playlistItems}}
|
|
70
|
+
{{#each this}}
|
|
71
|
+
<div class="flex pb-5 border-b {{#unless @last}}border-white{{/unless}}" >
|
|
72
|
+
{{> components/teaser/podcast/podcast_player_ui
|
|
73
|
+
_isPlaylistPlayer=true
|
|
74
|
+
_podcastDuration=podcastDuration
|
|
75
|
+
_title=title
|
|
76
|
+
_id=(nextRandom)
|
|
77
|
+
_first=@first
|
|
78
|
+
}}
|
|
79
|
+
</div>
|
|
80
|
+
{{/each}}
|
|
81
|
+
{{/with}}
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<div class="flex">
|
|
2
|
+
{{!-- Container --}}
|
|
3
|
+
<div x-data="{
|
|
4
|
+
open: false,
|
|
5
|
+
toggle() {
|
|
6
|
+
if (this.open) {
|
|
7
|
+
return this.close()
|
|
8
|
+
}
|
|
9
|
+
this.$refs.button.focus()
|
|
10
|
+
this.open = true
|
|
11
|
+
},
|
|
12
|
+
close(focusAfter) {
|
|
13
|
+
if (! this.open) return
|
|
14
|
+
this.open = false
|
|
15
|
+
focusAfter && focusAfter.focus()
|
|
16
|
+
}}"
|
|
17
|
+
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
18
|
+
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
19
|
+
x-id="['dropdown-button']"
|
|
20
|
+
class="relative"
|
|
21
|
+
>
|
|
22
|
+
|
|
23
|
+
{{!-- Button --}}
|
|
24
|
+
<button
|
|
25
|
+
x-ref="button"
|
|
26
|
+
x-on:click="toggle()"
|
|
27
|
+
:aria-expanded="open"
|
|
28
|
+
:aria-controls="$id('dropdown-button')"
|
|
29
|
+
type="button"
|
|
30
|
+
class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren
|
|
31
|
+
<div x-cloak x-show="open" class="w-3 h-3">
|
|
32
|
+
{{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
33
|
+
</div>
|
|
34
|
+
<div x-show="!open" class="w-3 h-3">
|
|
35
|
+
{{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
36
|
+
</div>
|
|
37
|
+
</button>
|
|
38
|
+
|
|
39
|
+
{{!-- Flyout --}}
|
|
40
|
+
<div
|
|
41
|
+
x-ref="panel"
|
|
42
|
+
x-show="open"
|
|
43
|
+
x-transition.origin.top.left
|
|
44
|
+
x-on:click.outside="close($refs.button)"
|
|
45
|
+
:id="$id('dropdown-button')"
|
|
46
|
+
style="display: none;"
|
|
47
|
+
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"
|
|
48
|
+
>
|
|
49
|
+
{{~#with this.podcastHoster~}}
|
|
50
|
+
<ul>
|
|
51
|
+
{{~#each this~}}
|
|
52
|
+
<li class="border-b last:border-0">
|
|
53
|
+
<a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"
|
|
54
|
+
title="{{this.podcastHosterName}}"
|
|
55
|
+
target="_blank"
|
|
56
|
+
rel="noopener noreferrer"
|
|
57
|
+
href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
|
|
58
|
+
</li>
|
|
59
|
+
{{~/each~}}
|
|
60
|
+
</ul>
|
|
61
|
+
{{~/with~}}
|
|
62
|
+
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>
|
|
22
22
|
{{/with}}
|
|
23
23
|
{{#with this.externalProject}}
|
|
24
|
-
<span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this
|
|
24
|
+
<span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this}}</span>
|
|
25
25
|
{{/with}}
|
|
26
26
|
{{/with}}
|
|
27
27
|
{{#with this.location}}
|