hr-design-system-handlebars 0.72.1 → 0.73.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 +12 -0
- package/build/handlebars/partials/handlebar-partials.js +7 -7
- package/dist/assets/brand/_default/conf/locatags.json +1 -1
- package/dist/assets/index.css +6 -3
- package/dist/assets/vendor/js/podcast_player.alpine.js +71 -82
- package/dist/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast_player.hbs +4 -3
- package/dist/views/components/teaser/podcast/podcast_player_ui.hbs +32 -10
- package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs +2 -2
- package/dist/views/components/teaser/podcast/podcast_timedisplay.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/brand/_default/conf/locatags.json +1 -1
- package/src/assets/brand/hessenschau/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr-bigband/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr-inforadio/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr-werbung/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr1/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr2/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr3/conf/locatags.merged.json +1 -1
- package/src/assets/brand/hr4/conf/locatags.merged.json +1 -1
- package/src/assets/brand/you-fm/conf/locatags.merged.json +1 -1
- package/src/assets/fixtures/teaser/teasersPodcastPlaylist.inc.json +1 -1
- package/src/assets/vendor/js/podcast_player.alpine.js +71 -82
- package/src/stories/views/components/teaser/fixtures/teaser_podcast_playlist.json +1 -1
- package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
- package/src/stories/views/components/teaser/podcast/podcast_player.hbs +4 -3
- package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs +32 -10
- package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs +2 -2
- package/src/stories/views/components/teaser/podcast/podcast_timedisplay.hbs +1 -1
- package/src/assets/js/podcastPlayer.alpine.js +0 -154
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.73.0 (Tue Nov 01 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- using json playlist instead of array [#356](https://github.com/mumprod/hr-design-system-handlebars/pull/356) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.72.1 (Tue Nov 01 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -52,18 +52,18 @@ module.exports['components/teaser/components/teaser_topline.hbs'] = '<span\n
|
|
|
52
52
|
module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="contentNavWrapper"\n x-ignore\n ax-load\n ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}\n x-data="contentNavigationHandler()"\n class="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>'
|
|
53
53
|
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}}'
|
|
54
54
|
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}}'
|
|
55
|
+
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>'
|
|
56
|
+
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">'
|
|
55
57
|
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>'
|
|
56
58
|
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>'
|
|
57
59
|
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>'
|
|
58
60
|
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}}'
|
|
59
|
-
module.exports['components/teaser/podcast/podcast_playbutton.hbs'] = '<button x-cloak x-on:keydown.tab="{{_alpineClick}}" x-on:click="{{_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>'
|
|
60
|
-
module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12"
|
|
61
|
-
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
|
|
62
|
-
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="
|
|
63
|
-
module.exports['components/teaser/podcast/podcast_timedisplay.hbs'] = '<div id="timedisplay{{_id}}" class="{{_containerCss}}">\n <span class="{{_currentTimeClasses}}" id="currentTime" >
|
|
61
|
+
module.exports['components/teaser/podcast/podcast_playbutton.hbs'] = '<button id="button{{_id}}" x-cloak 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>'
|
|
62
|
+
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}}\n\n<style>\n/* Modify the appearance of the slider thumb */\n.seek_slider::-webkit-slider-thumb{\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n.seek_slider::-moz-range-thumb{\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n</style>'
|
|
63
|
+
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 \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 _x-show="currentlyPlaying"\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 my-4 ">\n <input 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 class="h-1 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 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>'
|
|
64
|
+
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 <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 </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 border-white" >\n {{> components/teaser/podcast/podcast_player_ui \n _isPlaylistPlayer=true\n _podcastDuration=podcastDuration\n _title=title\n _id=(nextRandom)\n }} \n </div>\n {{/each}}\n {{/with}} \n</div>\n\n \n</div>\n \n\n<style>\n.seek_slider::-webkit-slider-thumb{\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n.seek_slider::-moz-range-thumb{\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n</style>'
|
|
65
|
+
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>'
|
|
64
66
|
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}}'
|
|
65
|
-
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>'
|
|
66
|
-
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">'
|
|
67
67
|
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~}}'
|
|
68
68
|
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 {{~> (lookup ../. \'includePath\')~}}\n {{~/if~}}\n {{~/with~}}\n{{~/with~}}'
|
|
69
69
|
module.exports['components/site_header/anchor_navigation/anchor_navigation.hbs'] = '<nav id="sprungmarken" aria-labelledby="anchorNavHeadline">\n <span id="anchorNavHeadline" class="hidden">{{loca "anchor_headline"}}</span>\n <ul>\n <li><a href="#brandNavWrapper" class="hidden">{{loca "anchor_brandNav"}}</a></li>\n <li><a href="#serviceNavWrapper" class="hidden">{{loca "anchor_serviceNav"}}</a></li>\n <li><a href="#sectionNavWrapper" class="hidden">{{loca "anchor_sectionNav"}}</a></li>\n {{{this.featureBoxAnchorSSI}}}\n <li><a href="#content" class="hidden">{{loca "anchor_mainContent"}}</a></li>\n </ul>\n</nav>'
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"anchor_serviceNav": "Servicenavigation anspringen",
|
|
7
7
|
"anchor_subNav": "Subnavigation des Bereichs {0} anspringen",
|
|
8
8
|
"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
|
|
9
|
-
"play_button_alpine_click": "playAndStop({0})
|
|
9
|
+
"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
|
|
10
10
|
"comment_anchor_1": "zu den ",
|
|
11
11
|
"comment_anchor_2": " Kommentaren des Artikels springen",
|
|
12
12
|
"comment_label_text": "Kommentar",
|
package/dist/assets/index.css
CHANGED
|
@@ -989,6 +989,9 @@ video {
|
|
|
989
989
|
.max-w-full {
|
|
990
990
|
max-width: 100%;
|
|
991
991
|
}
|
|
992
|
+
.max-w-3\/4 {
|
|
993
|
+
max-width: 75%;
|
|
994
|
+
}
|
|
992
995
|
.flex-initial {
|
|
993
996
|
-webkit-box-flex: 0;
|
|
994
997
|
-ms-flex: 0 1 auto;
|
|
@@ -2095,7 +2098,7 @@ video {
|
|
|
2095
2098
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2096
2099
|
}
|
|
2097
2100
|
.counter-reset {
|
|
2098
|
-
counter-reset:
|
|
2101
|
+
counter-reset: cnt1667310295213;
|
|
2099
2102
|
}
|
|
2100
2103
|
.line-clamp-4 {
|
|
2101
2104
|
overflow: hidden;
|
|
@@ -2484,7 +2487,7 @@ video {
|
|
|
2484
2487
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2485
2488
|
}
|
|
2486
2489
|
.-ordered {
|
|
2487
|
-
counter-increment:
|
|
2490
|
+
counter-increment: cnt1667310295213 1;
|
|
2488
2491
|
}
|
|
2489
2492
|
.-ordered::before {
|
|
2490
2493
|
position: absolute;
|
|
@@ -2500,7 +2503,7 @@ video {
|
|
|
2500
2503
|
letter-spacing: .0125em;
|
|
2501
2504
|
--tw-text-opacity: 1;
|
|
2502
2505
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2503
|
-
content: counter(
|
|
2506
|
+
content: counter(cnt1667310295213);
|
|
2504
2507
|
}
|
|
2505
2508
|
.\[-T\:\+Z\] {
|
|
2506
2509
|
--t: +Z;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
export default function playaudio(){
|
|
1
|
+
export default function playaudio(){
|
|
2
2
|
return {
|
|
3
3
|
audioDuration: 0,
|
|
4
4
|
playerCount: 0,
|
|
5
|
-
playlist:
|
|
6
|
-
|
|
5
|
+
playlist: {},
|
|
7
6
|
registerPlayer(duration,id){
|
|
8
7
|
let _player = {}
|
|
9
8
|
_player.id = id
|
|
@@ -18,22 +17,20 @@ export default function playaudio(){
|
|
|
18
17
|
|
|
19
18
|
this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
|
|
20
19
|
this.playerCount++
|
|
21
|
-
this.playlist.push(_player)
|
|
22
20
|
|
|
23
|
-
|
|
21
|
+
this.playlist[id] = _player
|
|
22
|
+
|
|
24
23
|
},
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
}
|
|
24
|
+
listenToGlobalStop(){
|
|
25
|
+
console.log('global listener init')
|
|
26
|
+
window.addEventListener('hr:global:stopOtherAVs', function(){ console.log("event catched"); this.stopAllOtherPlayers(0) })
|
|
27
|
+
},
|
|
28
|
+
rangeInput(id) {
|
|
29
|
+
if(this.playlist[id].init == false) {
|
|
30
|
+
this.playAndStop(id)
|
|
31
|
+
this.playAndStop(id)
|
|
32
|
+
}
|
|
33
|
+
this.playlist[id].audioElement.currentTime = (this.playlist[id].range.value/1000) * this.audioDuration
|
|
37
34
|
},
|
|
38
35
|
|
|
39
36
|
setTime(duration, id) {
|
|
@@ -48,104 +45,96 @@ export default function playaudio(){
|
|
|
48
45
|
let hours = +parts[0]
|
|
49
46
|
let minutes = +parts[1]
|
|
50
47
|
let seconds = +parts[2]
|
|
51
|
-
var durationSeconds = (hours * 3600 +minutes * 60 + seconds).toFixed(3);
|
|
48
|
+
var durationSeconds = (hours * 3600 + minutes * 60 + seconds).toFixed(3);
|
|
52
49
|
}
|
|
53
50
|
|
|
54
51
|
this.audioDuration = durationSeconds;
|
|
55
52
|
|
|
56
|
-
let el = document.getElementById("timedisplay"+id)
|
|
57
53
|
let range = document.getElementById("range"+id)
|
|
58
|
-
el.querySelector('#currentTime').innerHTML = "0:00"
|
|
59
|
-
el.querySelector('#audioDurationFancy').innerHTML = this.fancyTimeFormat(durationSeconds)
|
|
60
54
|
range.value = 0
|
|
55
|
+
this.$el.querySelector('#currentTime').innerHTML = this.fancyTimeFormat('0',false)
|
|
56
|
+
this.$el.querySelector('#audioDurationFancy').innerHTML = this.fancyTimeFormat(durationSeconds, true)
|
|
57
|
+
|
|
61
58
|
},
|
|
62
59
|
|
|
63
60
|
updateCurrentTime(range,timeDisplay,newTime) {
|
|
64
|
-
timeDisplay.querySelector('#currentTime').innerHTML = this.fancyTimeFormat(newTime,
|
|
61
|
+
timeDisplay.querySelector('#currentTime').innerHTML = this.fancyTimeFormat(newTime, false)
|
|
65
62
|
range.style.background = 'linear-gradient(to right, #006dc1 ' + range.value/10 + '%, white ' + range.value/10 + '% )'
|
|
66
63
|
range.value = ((100 * newTime) / this.audioDuration) * 10
|
|
67
64
|
},
|
|
68
65
|
|
|
69
66
|
playAndStop(id) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
} else {
|
|
84
|
-
this.stopAudio(this.playlist[i].id)
|
|
85
|
-
let buttonContainer = document.querySelector('#playbutton'+this.playlist[i].id)
|
|
86
|
-
buttonContainer.querySelector('.js-playbutton').classList.remove('hidden')
|
|
87
|
-
buttonContainer.querySelector('.js-pausebutton').classList.add('hidden')
|
|
88
|
-
this.playlist[i].range.parentNode.classList.add('hidden')
|
|
89
|
-
}
|
|
67
|
+
console.log('event target: ' + this.$event.currentTarget.id)
|
|
68
|
+
if(this.playlist[id].init == true){
|
|
69
|
+
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
|
+
} else {
|
|
73
|
+
this.$dispatch('stopotherplayers',{playerId: id});
|
|
74
|
+
let duration = this.playlist[id].audioElement.duration
|
|
75
|
+
this.startAudio(id, duration)
|
|
76
|
+
this.playlist[id].range.parentNode.classList.remove('hidden')
|
|
77
|
+
this.playlist[id].button.querySelector('.js-playbutton').classList.add('hidden')
|
|
78
|
+
this.playlist[id].button.querySelector('.js-pausebutton').classList.remove('hidden')
|
|
90
79
|
}
|
|
80
|
+
},
|
|
91
81
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
this.
|
|
100
|
-
this.
|
|
101
|
-
this.playlist[i].init = true;
|
|
82
|
+
stopAllOtherPlayers(id){
|
|
83
|
+
let players = document.querySelectorAll('audio.hidden')
|
|
84
|
+
for (let i=0; i<players.length; i++){
|
|
85
|
+
if ( !players[i].classList.contains(id) ){
|
|
86
|
+
this.playlist[id].init=false;
|
|
87
|
+
this.playlist[id].audioElement.pause()
|
|
88
|
+
this.playlist[id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
89
|
+
this.playlist[id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
90
|
+
this.playlist[id].range.parentNode.classList.add('hidden')
|
|
102
91
|
}
|
|
103
|
-
this.playlist[i].audioElement.play()
|
|
104
|
-
this.playlist[i].currentlyPlaying = true;
|
|
105
|
-
|
|
106
|
-
} else {
|
|
107
|
-
this.playlist[i].init = false
|
|
108
|
-
this.playlist[i].audioElement.pause()
|
|
109
|
-
this.playlist[i].currentlyPlaying = false;
|
|
110
|
-
|
|
111
92
|
}
|
|
112
|
-
|
|
93
|
+
|
|
113
94
|
},
|
|
114
95
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
96
|
+
startAudio(id, duration) {
|
|
97
|
+
console.log('start audio '+ id + ' duration: '+ duration)
|
|
98
|
+
if(this.playlist[id].init == false){
|
|
99
|
+
this.audioDuration = duration;
|
|
100
|
+
this.initAudioEventListener(id)
|
|
101
|
+
this.playlist[id].init = true;
|
|
102
|
+
|
|
121
103
|
}
|
|
104
|
+
this.playlist[id].audioElement.play()
|
|
105
|
+
this.playlist[id].currentlyPlaying = true;
|
|
122
106
|
},
|
|
123
107
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
_audioElement.ontimeupdate = (event) => {
|
|
131
|
-
this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime)
|
|
132
|
-
};
|
|
133
|
-
}
|
|
134
|
-
}
|
|
108
|
+
stopAudio(id) {
|
|
109
|
+
console.log('stop audio '+ id)
|
|
110
|
+
this.playlist[id].audioElement.pause()
|
|
111
|
+
this.playlist[id].init = false;
|
|
112
|
+
this.playlist[id].currentlyPlaying = false;
|
|
113
|
+
},
|
|
135
114
|
|
|
115
|
+
initAudioEventListener(id) {
|
|
116
|
+
let _audioElement = this.playlist[id].audioElement
|
|
117
|
+
let _range = this.playlist[id].range
|
|
118
|
+
let _timeDisplay = this.playlist[id].timeDisplay
|
|
119
|
+
_audioElement.ontimeupdate = (event) => {
|
|
120
|
+
this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime)
|
|
121
|
+
};
|
|
136
122
|
},
|
|
137
|
-
|
|
138
|
-
{
|
|
123
|
+
|
|
124
|
+
fancyTimeFormat(duration,measure) {
|
|
139
125
|
var hrs = ~~(duration / 3600);
|
|
140
126
|
var mins = ~~((duration % 3600) / 60);
|
|
141
127
|
var secs = ~~duration % 60;
|
|
128
|
+
|
|
142
129
|
var ret = "";
|
|
143
130
|
if (hrs > 0) {
|
|
144
131
|
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
|
|
145
|
-
}
|
|
132
|
+
}
|
|
133
|
+
|
|
146
134
|
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
|
|
147
135
|
ret += "" + secs;
|
|
148
|
-
|
|
136
|
+
|
|
137
|
+
if (measure){
|
|
149
138
|
hrs > 0 ? ret += " Std." : ret += " Min."
|
|
150
139
|
}
|
|
151
140
|
return ret;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<button x-cloak x-on:keydown.tab="{{_alpineClick}}" x-on:click="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">
|
|
1
|
+
<button id="button{{_id}}" x-cloak 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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div class="flex col-span-12">
|
|
1
|
+
<div class="flex col-span-12">
|
|
2
2
|
<div class="flex flex-col grow">
|
|
3
3
|
{{!-- First Row --}}
|
|
4
4
|
<div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">
|
|
@@ -51,11 +51,12 @@
|
|
|
51
51
|
{{!-- Player UI --}}
|
|
52
52
|
<div class="flex px-5 md:pl-5 md:pr-52 md:-mt-14"
|
|
53
53
|
x-data="playaudio()"
|
|
54
|
+
x-init="listenToGlobalStop()"
|
|
54
55
|
ax-load
|
|
55
56
|
x-ignore
|
|
56
|
-
ax-load-src="/js/
|
|
57
|
+
ax-load-src="/vendor/js/podcast_player.alpine.js">
|
|
57
58
|
{{> components/teaser/podcast/podcast_player_ui _isPlaylistPlayer=false
|
|
58
|
-
_podcastDuration=
|
|
59
|
+
_podcastDuration=podcastDuration _id=(nextRandom) }}
|
|
59
60
|
</div>
|
|
60
61
|
|
|
61
62
|
{{!-- Abo-Dropdown --}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div class="flex w-full">
|
|
2
2
|
<div class="flex flex-wrap w-full js-load"
|
|
3
|
-
|
|
3
|
+
>
|
|
4
4
|
|
|
5
5
|
<div class="flex {{#if _isPlaylistPlayer}}items-start{{else}}items-center{{/if}} w-full flex-nowrap">
|
|
6
6
|
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
{{> components/teaser/podcast/podcast_playbutton
|
|
10
10
|
_css="mr-4"
|
|
11
11
|
_x-show="currentlyPlaying"
|
|
12
|
+
_id = _id
|
|
12
13
|
_alpineClick=(loca "play_button_alpine_click" _id) }}
|
|
13
14
|
</div>
|
|
14
15
|
|
|
@@ -24,29 +25,40 @@
|
|
|
24
25
|
|
|
25
26
|
{{!-- Download --}}
|
|
26
27
|
<div class="flex self-end">
|
|
27
|
-
{{> components/teaser/podcast/podcast_downloadbutton
|
|
28
|
+
{{> components/teaser/podcast/podcast_downloadbutton
|
|
29
|
+
_addClass="ml-2"
|
|
28
30
|
_iconClass="h-6 w-6 text-blue-science fill-current"
|
|
29
31
|
_url=this.podcastDownloadUrl
|
|
30
32
|
}}
|
|
31
33
|
</div>
|
|
32
34
|
</div>
|
|
33
35
|
|
|
34
|
-
<div class="flex -mt-2 w-fit">
|
|
35
|
-
{{> components/teaser/podcast/podcast_item_title
|
|
36
|
+
<div class="flex -mt-2 w-fit max-w-3/4 ">
|
|
37
|
+
{{> components/teaser/podcast/podcast_item_title
|
|
38
|
+
_title=this.title
|
|
39
|
+
_teaserSize=this.teaserSize
|
|
40
|
+
_addClass="" }}
|
|
36
41
|
</div>
|
|
37
42
|
{{/if}}
|
|
38
43
|
|
|
39
44
|
{{!-- Range Slider --}}
|
|
40
45
|
<div class="flex w-full my-4 ">
|
|
41
|
-
<input x-ref="range"
|
|
46
|
+
<input x-ref="range"
|
|
47
|
+
id="range{{_id}}"
|
|
48
|
+
x-on:input="rangeInput({{_id}})"
|
|
49
|
+
type="range" {{!-- x-bind:value="currentTimePercentage" --}}
|
|
50
|
+
min="0"
|
|
51
|
+
max="1000"
|
|
52
|
+
class="h-1 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" >
|
|
42
53
|
</div>
|
|
43
54
|
|
|
44
55
|
{{#if _isPlaylistPlayer}}
|
|
45
56
|
{{!-- Meta Time usw. --}}
|
|
46
|
-
<div class="flex w-full">
|
|
57
|
+
<div x-init="setTime( '{{_podcastDuration}}', '{{_id}}' ); " class="flex w-full">
|
|
47
58
|
{{> components/teaser/podcast/podcast_timedisplay
|
|
48
59
|
_id=_id
|
|
49
|
-
_currentTimeClasses="font-bold text-orange-layout"
|
|
60
|
+
_currentTimeClasses="font-bold text-orange-layout"
|
|
61
|
+
_durationClasses="text-blue-science"
|
|
50
62
|
_containerCss="flex text-xs grow font-headingSerif" }}
|
|
51
63
|
</div>
|
|
52
64
|
{{/if}}
|
|
@@ -55,13 +67,23 @@
|
|
|
55
67
|
|
|
56
68
|
{{#unless _isPlaylistPlayer}}
|
|
57
69
|
{{!-- Meta Time usw. --}}
|
|
58
|
-
|
|
70
|
+
<div x-init="setTime( '{{_podcastDuration}}', '{{_id}}' ); " >
|
|
71
|
+
{{> components/teaser/podcast/podcast_timedisplay
|
|
72
|
+
_duration=podcastDuration
|
|
73
|
+
_currentTimeClasses="font-bold text-orange-layout"
|
|
74
|
+
_durationClasses="text-blue-science"
|
|
75
|
+
_containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}
|
|
76
|
+
</div>
|
|
59
77
|
{{/unless}}
|
|
60
78
|
|
|
61
79
|
{{!-- AudioElement --}}
|
|
62
80
|
{{~#with this.audioUrl ~}}
|
|
63
|
-
<audio
|
|
64
|
-
|
|
81
|
+
<audio
|
|
82
|
+
class="{{../_id}} hidden"
|
|
83
|
+
x-init="registerPlayer('{{../_podcastDuration}}','{{../_id}}')"
|
|
84
|
+
@stopotherplayers.window="stopAllOtherPlayers({{../_id}})">
|
|
85
|
+
<source src={{this}} type='audio/mp3'/>
|
|
86
|
+
|
|
65
87
|
</audio>
|
|
66
88
|
{{/with}}
|
|
67
89
|
</div>
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
{{#unless _isSinglePage}}
|
|
24
24
|
{{#unless this.hideShortText}}
|
|
25
25
|
{{~#with this.shorttext}}
|
|
26
|
-
<div class="
|
|
26
|
+
<div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
|
|
27
27
|
<span class="c-teaser__shorttext"> {{this}} </span>
|
|
28
28
|
</div>
|
|
29
29
|
{{/with~}}
|
|
@@ -126,6 +126,7 @@
|
|
|
126
126
|
{{!-- Player UI --}}
|
|
127
127
|
<div class="flex flex-col col-span-12 gap-5 px-5"
|
|
128
128
|
x-data="playaudio()"
|
|
129
|
+
x-init="listenToGlobalStop()"
|
|
129
130
|
ax-load
|
|
130
131
|
x-ignore
|
|
131
132
|
ax-load-src="/vendor/js/podcast_player.alpine.js">
|
|
@@ -148,7 +149,6 @@
|
|
|
148
149
|
|
|
149
150
|
|
|
150
151
|
<style>
|
|
151
|
-
/* Modify the appearance of the slider thumb */
|
|
152
152
|
.seek_slider::-webkit-slider-thumb{
|
|
153
153
|
-webkit-appearance: none;
|
|
154
154
|
-moz-appearance: none;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div id="timedisplay{{_id}}" class="{{_containerCss}}">
|
|
2
|
-
<span class="{{_currentTimeClasses}}" id="currentTime" >
|
|
2
|
+
<span class="{{_currentTimeClasses}} " id="currentTime" >00:00</span>
|
|
3
3
|
<span class="{{_durationClasses}} px-0.5"> / </span>
|
|
4
4
|
<span class="{{_durationClasses}}" id="audioDurationFancy"> </span>
|
|
5
5
|
</div>
|
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.73.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"anchor_serviceNav": "Servicenavigation anspringen",
|
|
7
7
|
"anchor_subNav": "Subnavigation des Bereichs {0} anspringen",
|
|
8
8
|
"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
|
|
9
|
-
"play_button_alpine_click": "playAndStop({0})
|
|
9
|
+
"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
|
|
10
10
|
"comment_anchor_1": "zu den ",
|
|
11
11
|
"comment_anchor_2": " Kommentaren des Artikels springen",
|
|
12
12
|
"comment_label_text": "Kommentar",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"anchor_serviceNav": "Servicenavigation anspringen",
|
|
7
7
|
"anchor_subNav": "Subnavigation des Bereichs {0} anspringen",
|
|
8
8
|
"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
|
|
9
|
-
"play_button_alpine_click": "playAndStop({0})
|
|
9
|
+
"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
|
|
10
10
|
"comment_anchor_1": "zu den ",
|
|
11
11
|
"comment_anchor_2": " Kommentaren des Artikels springen",
|
|
12
12
|
"comment_label_text": "Kommentar",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"anchor_serviceNav": "Servicenavigation anspringen",
|
|
7
7
|
"anchor_subNav": "Subnavigation des Bereichs {0} anspringen",
|
|
8
8
|
"close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
|
|
9
|
-
"play_button_alpine_click": "playAndStop({0})
|
|
9
|
+
"play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",
|
|
10
10
|
"comment_anchor_1": "zu den ",
|
|
11
11
|
"comment_anchor_2": " Kommentaren des Artikels springen",
|
|
12
12
|
"comment_label_text": "Kommentar",
|