hr-design-system-handlebars 1.114.136 → 1.114.138
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 +26 -0
- package/dist/assets/index.css +10 -3
- package/dist/views/components/content/copytext/components/media/media_figure.hbs +5 -5
- package/dist/views/components/content/copytext/components/video/video.hbs +2 -2
- package/dist/views/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views/components/mediaplayer/media_player.hbs +1 -1
- package/dist/views/components/site_header/header.hbs +1 -1
- package/dist/views_static/components/content/copytext/components/media/media_figure.hbs +5 -5
- package/dist/views_static/components/content/copytext/components/video/video.hbs +2 -2
- package/dist/views_static/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views_static/components/mediaplayer/media_player.hbs +1 -1
- package/dist/views_static/components/site_header/header.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/fixtures/content/copytext/copytext_video_vertical.json +182 -0
- package/src/assets/fixtures/teaser/teaser_images.inc.json +23 -0
- package/src/assets/fixtures/video/videos.inc.json +79 -0
- package/src/assets/images/hochkant-100_v-Xto9.jpg +0 -0
- package/src/assets/images/hochkant-100_v-Xto9__medium.jpg +0 -0
- package/src/assets/images/hochkant-100_v-Xto9__retina.jpg +0 -0
- package/src/assets/images/hochkant-100_v-Xto9__small.jpg +0 -0
- package/src/stories/views/components/content/copytext/components/media/media_figure.hbs +5 -5
- package/src/stories/views/components/content/copytext/components/video/video.hbs +2 -2
- package/src/stories/views/components/content/copytext/copytext.stories.js +6 -0
- package/src/stories/views/components/content/copytext/copytext_body.hbs +1 -1
- package/src/stories/views/components/content/copytext/fixtures/copytext_video_vertical.json +1 -0
- package/src/stories/views/components/mediaplayer/media_player.hbs +1 -1
- package/src/stories/views/components/site_header/header.hbs +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
# v1.114.138 (Tue May 13 2025)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Dpe 3585 [#1279](https://github.com/mumprod/hr-design-system-handlebars/pull/1279) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- [@eduardo-hr](https://github.com/eduardo-hr)
|
|
10
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# v1.114.137 (Fri May 09 2025)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- Add background color to site header to prevent background flash in 90… [#1278](https://github.com/mumprod/hr-design-system-handlebars/pull/1278) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
|
|
19
|
+
|
|
20
|
+
#### Authors: 2
|
|
21
|
+
|
|
22
|
+
- [@eduardo-hr](https://github.com/eduardo-hr)
|
|
23
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
1
27
|
# v1.114.136 (Wed Apr 30 2025)
|
|
2
28
|
|
|
3
29
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1978,6 +1978,9 @@ article #commentList {
|
|
|
1978
1978
|
.max-w-\[480px\] {
|
|
1979
1979
|
max-width: 480px;
|
|
1980
1980
|
}
|
|
1981
|
+
.max-w-\[600px\] {
|
|
1982
|
+
max-width: 600px;
|
|
1983
|
+
}
|
|
1981
1984
|
.max-w-\[724px\] {
|
|
1982
1985
|
max-width: 724px;
|
|
1983
1986
|
}
|
|
@@ -3885,7 +3888,7 @@ article #commentList {
|
|
|
3885
3888
|
border-bottom-color: var(--color-secondary-ds);
|
|
3886
3889
|
}
|
|
3887
3890
|
.counter-reset {
|
|
3888
|
-
counter-reset:
|
|
3891
|
+
counter-reset: cnt1747144487368;
|
|
3889
3892
|
}
|
|
3890
3893
|
.animate-delay-100 {
|
|
3891
3894
|
--tw-animate-delay: 100ms;
|
|
@@ -4346,7 +4349,7 @@ html { scroll-behavior: smooth; }
|
|
|
4346
4349
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4347
4350
|
}
|
|
4348
4351
|
.-ordered {
|
|
4349
|
-
counter-increment:
|
|
4352
|
+
counter-increment: cnt1747144487368 1;
|
|
4350
4353
|
}
|
|
4351
4354
|
.-ordered::before {
|
|
4352
4355
|
position: absolute;
|
|
@@ -4364,7 +4367,7 @@ html { scroll-behavior: smooth; }
|
|
|
4364
4367
|
--tw-text-opacity: 1;
|
|
4365
4368
|
color: rgba(0, 0, 0, 1);
|
|
4366
4369
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4367
|
-
content: counter(
|
|
4370
|
+
content: counter(cnt1747144487368);
|
|
4368
4371
|
}
|
|
4369
4372
|
/*! ****************************/
|
|
4370
4373
|
/*! DataPolicy stuff */
|
|
@@ -7736,6 +7739,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
7736
7739
|
max-width: 50%;
|
|
7737
7740
|
}
|
|
7738
7741
|
|
|
7742
|
+
.md\:max-w-88 {
|
|
7743
|
+
max-width: 22rem;
|
|
7744
|
+
}
|
|
7745
|
+
|
|
7739
7746
|
.md\:flex-auto {
|
|
7740
7747
|
flex: 1 1 auto;
|
|
7741
7748
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figure class="relative {{_addClass}}" x-data="{ avStart: false }">
|
|
1
|
+
<figure class="relative {{_addClass}}{{#if _isVertical}} max-w-[600px] md:max-w-88 mx-auto{{/if}}" x-data="{ avStart: false }">
|
|
2
2
|
{{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
|
|
3
3
|
{{#unless _voting-option}}
|
|
4
4
|
<div class="py-3 sm:py-4 {{#unless _noBorder}}border-t-[3px] border-gray-boulder dark:border-text-dark {{/unless}}{{_cssClassCaption}}">
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
{{#with this.toModel.videoElement}}
|
|
31
31
|
{{#if ../_isSticky}}
|
|
32
32
|
{{#> components/mediaplayer/mediaPlayer_stickyWrapper}}
|
|
33
|
-
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
|
|
34
|
-
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
|
|
33
|
+
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg _isVertical=../_isVertical~}}
|
|
34
|
+
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=(if ../_isVertical "ar-9-16" "ar-16-9") _noDelay=../_isLead }}
|
|
35
35
|
{{/components/mediaplayer/mediaPlayer_stickyWrapper}}
|
|
36
36
|
{{else}}
|
|
37
|
-
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
|
|
38
|
-
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
|
|
37
|
+
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg _isVertical=../_isVertical~}}
|
|
38
|
+
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=(if ../_isVertical "ar-9-16" "ar-16-9") _noDelay=../_isLead }}
|
|
39
39
|
{{/if}}
|
|
40
40
|
{{/with}}
|
|
41
41
|
{{/if}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{{#if this.showFullSize.isTrue }}
|
|
2
|
-
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=true _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
|
|
2
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=true _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" _isVertical=_isVertical}}
|
|
3
3
|
{{else}}
|
|
4
|
-
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=false _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
|
|
4
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=false _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" _isVertical=_isVertical}}
|
|
5
5
|
{{/if}}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
{{> components/content/copytext/components/podcastepisode }}
|
|
38
38
|
{{/if~}}
|
|
39
39
|
{{~#if this.isVideoOnDemand}}
|
|
40
|
-
{{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext }}
|
|
40
|
+
{{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext _isVertical=this.isVerticalVideo}}
|
|
41
41
|
{{/if~}}
|
|
42
42
|
{{~#if this.isLivestream}}
|
|
43
43
|
{{> components/content/copytext/components/videolivestream _isTickerCopytext=../_isTickerCopytext }}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 !h-auto{{else}}ar-16-9 h-full{{/if}}{{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-mediaplayer-tracking='{"playerLocation": "{{_playerLocation}}","playerSize": "{{if _playerSize _playerSize ""}}" }' data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
1
|
+
<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 !h-auto{{else}}{{#if _isVertical}}ar-9-16 h-full{{else}}ar-16-9 h-full{{/if}}{{/if}}{{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-mediaplayer-tracking='{"playerLocation": "{{_playerLocation}}","playerSize": "{{if _playerSize _playerSize ""}}" }' data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
2
2
|
</div>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
x-ref="headerWrapper"
|
|
6
6
|
@resize.window="resetNav()"
|
|
7
7
|
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
8
|
-
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
8
|
+
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full bg-white">
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
<div id="anchorNavWrapper"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figure class="relative {{_addClass}}" x-data="{ avStart: false }">
|
|
1
|
+
<figure class="relative {{_addClass}}{{#if _isVertical}} max-w-[600px] md:max-w-88 mx-auto{{/if}}" x-data="{ avStart: false }">
|
|
2
2
|
{{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
|
|
3
3
|
{{#unless _voting-option}}
|
|
4
4
|
<div class="py-3 sm:py-4 {{#unless _noBorder}}border-t-[3px] border-gray-boulder dark:border-text-dark {{/unless}}{{_cssClassCaption}}">
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
{{#with this.toModel.videoElement}}
|
|
31
31
|
{{#if ../_isSticky}}
|
|
32
32
|
{{#> components/mediaplayer/mediaPlayer_stickyWrapper}}
|
|
33
|
-
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
|
|
34
|
-
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
|
|
33
|
+
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg _isVertical=../_isVertical~}}
|
|
34
|
+
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=(if ../_isVertical "ar-9-16" "ar-16-9") _noDelay=../_isLead }}
|
|
35
35
|
{{/components/mediaplayer/mediaPlayer_stickyWrapper}}
|
|
36
36
|
{{else}}
|
|
37
|
-
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
|
|
38
|
-
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
|
|
37
|
+
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg _isVertical=../_isVertical~}}
|
|
38
|
+
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=(if ../_isVertical "ar-9-16" "ar-16-9") _noDelay=../_isLead }}
|
|
39
39
|
{{/if}}
|
|
40
40
|
{{/with}}
|
|
41
41
|
{{/if}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{{#if this.showFullSize.isTrue }}
|
|
2
|
-
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=true _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
|
|
2
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=true _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" _isVertical=_isVertical}}
|
|
3
3
|
{{else}}
|
|
4
|
-
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=false _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
|
|
4
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=false _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" _isVertical=_isVertical}}
|
|
5
5
|
{{/if}}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
{{> components/content/copytext/components/podcastepisode }}
|
|
38
38
|
{{/if~}}
|
|
39
39
|
{{~#if this.isVideoOnDemand}}
|
|
40
|
-
{{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext }}
|
|
40
|
+
{{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext _isVertical=this.isVerticalVideo}}
|
|
41
41
|
{{/if~}}
|
|
42
42
|
{{~#if this.isLivestream}}
|
|
43
43
|
{{> components/content/copytext/components/videolivestream _isTickerCopytext=../_isTickerCopytext }}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 !h-auto{{else}}ar-16-9 h-full{{/if}}{{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-mediaplayer-tracking='{"playerLocation": "{{_playerLocation}}","playerSize": "{{if _playerSize _playerSize ""}}" }' data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
1
|
+
<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 !h-auto{{else}}{{#if _isVertical}}ar-9-16 h-full{{else}}ar-16-9 h-full{{/if}}{{/if}}{{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-mediaplayer-tracking='{"playerLocation": "{{_playerLocation}}","playerSize": "{{if _playerSize _playerSize ""}}" }' data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
2
2
|
</div>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
x-ref="headerWrapper"
|
|
6
6
|
@resize.window="resetNav()"
|
|
7
7
|
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
8
|
-
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
8
|
+
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full bg-white">
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
<div id="anchorNavWrapper"
|
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": "1.114.
|
|
9
|
+
"version": "1.114.138",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
{
|
|
2
|
+
"copytextParagraph": [
|
|
3
|
+
{
|
|
4
|
+
"isHeadline": true,
|
|
5
|
+
"text": "Copytext mit Hochkant Video"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"paragraphBoxItem": {
|
|
12
|
+
"isVideo": true,
|
|
13
|
+
"isVideoOnDemand": true,
|
|
14
|
+
"isVerticalVideo": true,
|
|
15
|
+
"showFullSize": {
|
|
16
|
+
"isTrue": true
|
|
17
|
+
},
|
|
18
|
+
"label": {
|
|
19
|
+
"type": "video",
|
|
20
|
+
"loca": "label_video",
|
|
21
|
+
"byline": {
|
|
22
|
+
"bylineText": "03:20 Min."
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"copyright": "hessenschau",
|
|
26
|
+
"showAirdate": true,
|
|
27
|
+
"airdateDate": {
|
|
28
|
+
"htmlDateTime": "2022-10-31T19:30+0200",
|
|
29
|
+
"htmlDate": "31.10.2022",
|
|
30
|
+
"date": "31.10.22",
|
|
31
|
+
"dateSeparatorTime": "31.10.22, 19:30"
|
|
32
|
+
},
|
|
33
|
+
"toModel": {
|
|
34
|
+
"videoElement": {
|
|
35
|
+
"ardPlayerConfig": {
|
|
36
|
+
"@->jsoninclude": "video/videos.inc.json",
|
|
37
|
+
"@->contentpath": "video-hochkant"
|
|
38
|
+
},
|
|
39
|
+
"ardPlayerJsonConfig": {
|
|
40
|
+
"@->jsoninclude": "video/videos.inc.json",
|
|
41
|
+
"@->contentpath": "video-hochkant"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"mediaBacklinkToStoryTeaser": {
|
|
45
|
+
"link": {
|
|
46
|
+
"url": "/videoseite",
|
|
47
|
+
"isTargetBlank": false
|
|
48
|
+
},
|
|
49
|
+
"readMoreScreenreader": "zum hr3.de Video",
|
|
50
|
+
"title": "Musik macht deinen Tag",
|
|
51
|
+
"isForeignBrand": true,
|
|
52
|
+
"readMore": "zur hr3.de Video-Einzelseite",
|
|
53
|
+
"hasIcon": true,
|
|
54
|
+
"iconName": "extern"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
"teaseritem": {
|
|
58
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
59
|
+
"@->contentpath": "copytext_vertical_video",
|
|
60
|
+
"@->replaceToken": [
|
|
61
|
+
{
|
|
62
|
+
"@->token": "image",
|
|
63
|
+
"@->value": "hochkant-100"
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
|
|
68
|
+
"teaserImage": {
|
|
69
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
70
|
+
"@->contentpath": "copytext_vertical_video",
|
|
71
|
+
"@->replaceToken": [
|
|
72
|
+
{
|
|
73
|
+
"@->token": "image",
|
|
74
|
+
"@->value": "hochkant-100"
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"isHeadline": true,
|
|
82
|
+
"text": "Zwischenüberschrift unter Video"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"paragraphBoxItem": {
|
|
86
|
+
"isVideo": true,
|
|
87
|
+
"isVideoOnDemand": true,
|
|
88
|
+
"isVerticalVideo": true,
|
|
89
|
+
"showFullSize": {
|
|
90
|
+
"isTrue": false
|
|
91
|
+
},
|
|
92
|
+
"label": {
|
|
93
|
+
"type": "video",
|
|
94
|
+
"loca": "label_video",
|
|
95
|
+
"byline": {
|
|
96
|
+
"bylineText": "03:20 Min."
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
"copyright": "hessenschau",
|
|
100
|
+
"showAirdate": true,
|
|
101
|
+
"airdateDate": {
|
|
102
|
+
"htmlDateTime": "2022-10-31T19:30+0200",
|
|
103
|
+
"htmlDate": "31.10.2022",
|
|
104
|
+
"date": "31.10.22",
|
|
105
|
+
"dateSeparatorTime": "31.10.22, 19:30"
|
|
106
|
+
},
|
|
107
|
+
"toModel": {
|
|
108
|
+
"videoElement": {
|
|
109
|
+
"ardPlayerConfig": {
|
|
110
|
+
"@->jsoninclude": "video/videos.inc.json",
|
|
111
|
+
"@->contentpath": "video-hochkant",
|
|
112
|
+
"@->overrides": [
|
|
113
|
+
{
|
|
114
|
+
"@->contentpath": "playerId",
|
|
115
|
+
"@->value": "6666"
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
"ardPlayerJsonConfig": {
|
|
120
|
+
"@->jsoninclude": "video/videos.inc.json",
|
|
121
|
+
"@->contentpath": "video-hochkant",
|
|
122
|
+
"@->overrides": [
|
|
123
|
+
{
|
|
124
|
+
"@->contentpath": "playerId",
|
|
125
|
+
"@->value": "6666"
|
|
126
|
+
}
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
"mediaBacklinkToStoryTeaser": {
|
|
131
|
+
"link": {
|
|
132
|
+
"url": "/videoseite",
|
|
133
|
+
"isTargetBlank": false
|
|
134
|
+
},
|
|
135
|
+
"readMoreScreenreader": "zum hr3.de Video",
|
|
136
|
+
"title": "Musik macht deinen Tag",
|
|
137
|
+
"isForeignBrand": false,
|
|
138
|
+
"readMore": "zur hr3.de VideoEinzel-seite",
|
|
139
|
+
"hasIcon": true,
|
|
140
|
+
"iconName": "extern"
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
"teaseritem": {
|
|
144
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
145
|
+
"@->contentpath": "copytext_vertical_video",
|
|
146
|
+
"@->replaceToken": [
|
|
147
|
+
{
|
|
148
|
+
"@->token": "image",
|
|
149
|
+
"@->value": "hochkant-100"
|
|
150
|
+
}
|
|
151
|
+
]
|
|
152
|
+
},
|
|
153
|
+
|
|
154
|
+
"teaserImage": {
|
|
155
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
156
|
+
"@->contentpath": "copytext_vertical_video",
|
|
157
|
+
"@->replaceToken": [
|
|
158
|
+
{
|
|
159
|
+
"@->token": "image",
|
|
160
|
+
"@->value": "hochkant-100"
|
|
161
|
+
}
|
|
162
|
+
]
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"paragraphBoxItem": {
|
|
171
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
172
|
+
"@->contentpath": "copytext_vertical_video",
|
|
173
|
+
"@->replaceToken": [
|
|
174
|
+
{
|
|
175
|
+
"@->token": "image",
|
|
176
|
+
"@->value": "buchmesse-fahnen-102"
|
|
177
|
+
}
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
]
|
|
182
|
+
}
|
|
@@ -476,5 +476,28 @@
|
|
|
476
476
|
}
|
|
477
477
|
]
|
|
478
478
|
}
|
|
479
|
+
},
|
|
480
|
+
"copytext_vertical_video": {
|
|
481
|
+
"isImage": true,
|
|
482
|
+
"showFullSize": {
|
|
483
|
+
"isTrue": false
|
|
484
|
+
},
|
|
485
|
+
"showPortrait": {
|
|
486
|
+
"isTrue": false
|
|
487
|
+
},
|
|
488
|
+
"caption": "Ela und Pippa",
|
|
489
|
+
"copyrightWithLinks": "Vasco",
|
|
490
|
+
"imageJson": "Beispiel JSON",
|
|
491
|
+
"responsiveImage": {
|
|
492
|
+
"asPicture": false,
|
|
493
|
+
"asImage": true,
|
|
494
|
+
"fallback": "images/{#image}_v-Xto9__medium.jpg",
|
|
495
|
+
"sources": [
|
|
496
|
+
{
|
|
497
|
+
"sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
|
|
498
|
+
"srcset": "images/{#image}_v-Xto9__small.jpg 101w, images/{#image}_v-Xto9__medium.jpg 152w, images/{#image}_v-Xto9.jpg 152w, images/{#image}_v-Xto9__retina.jpg 608w"
|
|
499
|
+
}
|
|
500
|
+
]
|
|
501
|
+
}
|
|
479
502
|
}
|
|
480
503
|
}
|
|
@@ -78,6 +78,85 @@
|
|
|
78
78
|
"realTeaserSize": "100",
|
|
79
79
|
"isDarkmodeAllowed": true
|
|
80
80
|
},
|
|
81
|
+
"video-hochkant": {
|
|
82
|
+
"playerConfig": {
|
|
83
|
+
"generic": {
|
|
84
|
+
"isAutoplay": true,
|
|
85
|
+
"imageTemplateConfig": {
|
|
86
|
+
"size": [
|
|
87
|
+
{ "minWidth": 0, "value": "480/270" },
|
|
88
|
+
{ "minWidth": 480, "value": "640/360" },
|
|
89
|
+
{ "minWidth": 640, "value": "960/540" },
|
|
90
|
+
{ "minWidth": 960, "value": "1920/1080" }
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
"web": {
|
|
95
|
+
"baseUrl": "./vendor/ardplayer/",
|
|
96
|
+
"isForcedAutoplay": true,
|
|
97
|
+
"isForcedVideoView": true
|
|
98
|
+
},
|
|
99
|
+
"pluginData": {
|
|
100
|
+
"trackingAti@all": {
|
|
101
|
+
"isEnabled": false
|
|
102
|
+
},
|
|
103
|
+
"trackingAgf@all": {
|
|
104
|
+
"isEnabled": false
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
"mediaCollection": {
|
|
109
|
+
"streams": [
|
|
110
|
+
{
|
|
111
|
+
"kind": "main",
|
|
112
|
+
"videoLanguageCode": "de",
|
|
113
|
+
"media": [
|
|
114
|
+
{
|
|
115
|
+
"url": "https://hr-vh.akamaihd.net/i/odinson/202504/c772dcfd-def6-444b-96f7-bee1ffdf8e6c/4d97b06f-ea46-45b6-a791-1ecc619b7ef4/0fbb1119-4289-44e9-860a-c4fb79aed207_sendeton_,1080x1920-50p-5000,720x1280-50p-3200,540x960-50p-1600,360x640-50p-1200,270x480-50p-700,kbit.mp4/master.m3u8",
|
|
116
|
+
"mimeType": "application/vnd.apple.mpegurl",
|
|
117
|
+
"isAdaptiveQualitySelectable": true,
|
|
118
|
+
"audios": [{ "kind": "standard", "languageCode": "de" }]
|
|
119
|
+
}
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
],
|
|
123
|
+
"subTitles": [
|
|
124
|
+
{
|
|
125
|
+
"kind": "normal",
|
|
126
|
+
"languageCode": "de",
|
|
127
|
+
"sources": [
|
|
128
|
+
{
|
|
129
|
+
"kind": "webvtt",
|
|
130
|
+
"url": "https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"
|
|
131
|
+
}
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
],
|
|
135
|
+
"meta": {
|
|
136
|
+
"durationSeconds": 10,
|
|
137
|
+
"images": [
|
|
138
|
+
{
|
|
139
|
+
"kind": "preview",
|
|
140
|
+
"url": "https://picsum.photos/id/101/{size}"
|
|
141
|
+
}
|
|
142
|
+
],
|
|
143
|
+
"title": "Hochkantvideo | hessenschau vom 13.05.2025",
|
|
144
|
+
"synopsis": "Hochkantvideo"
|
|
145
|
+
},
|
|
146
|
+
"pluginData": {},
|
|
147
|
+
"geoBlocked": false
|
|
148
|
+
},
|
|
149
|
+
"playerId": "5413",
|
|
150
|
+
"type": "videoOndemand",
|
|
151
|
+
"typeLabel": "Video-On-Demand",
|
|
152
|
+
"cssUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css",
|
|
153
|
+
"jsUrl": "./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js",
|
|
154
|
+
"isAutoplay": true,
|
|
155
|
+
"isPlayerDebug": false,
|
|
156
|
+
"teaserSize": "100",
|
|
157
|
+
"realTeaserSize": "100",
|
|
158
|
+
"isDarkmodeAllowed": true
|
|
159
|
+
},
|
|
81
160
|
"video-2": {
|
|
82
161
|
"playerConfig": {
|
|
83
162
|
"generic": {
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figure class="relative {{_addClass}}" x-data="{ avStart: false }">
|
|
1
|
+
<figure class="relative {{_addClass}}{{#if _isVertical}} max-w-[600px] md:max-w-88 mx-auto{{/if}}" x-data="{ avStart: false }">
|
|
2
2
|
{{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
|
|
3
3
|
{{#unless _voting-option}}
|
|
4
4
|
<div class="py-3 sm:py-4 {{#unless _noBorder}}border-t-[3px] border-gray-boulder dark:border-text-dark {{/unless}}{{_cssClassCaption}}">
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
{{#with this.toModel.videoElement}}
|
|
31
31
|
{{#if ../_isSticky}}
|
|
32
32
|
{{#> components/mediaplayer/mediaPlayer_stickyWrapper}}
|
|
33
|
-
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
|
|
34
|
-
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
|
|
33
|
+
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg _isVertical=../_isVertical~}}
|
|
34
|
+
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=(if ../_isVertical "ar-9-16" "ar-16-9") _noDelay=../_isLead }}
|
|
35
35
|
{{/components/mediaplayer/mediaPlayer_stickyWrapper}}
|
|
36
36
|
{{else}}
|
|
37
|
-
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg ~}}
|
|
38
|
-
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=../_isLead }}
|
|
37
|
+
{{~> components/mediaplayer/media_player this _playerLocation=../_playerLocation _playerSize=../_playerSize _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../_addClassImg _isVertical=../_isVertical~}}
|
|
38
|
+
{{~> components/teaser/components/teaser_media_player ../this _isFullsize=../_isFullsize _playerId=this.ardPlayerConfig.playerId _css="flex items-center justify-center" _isLead=../_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=(if ../_isVertical "ar-9-16" "ar-16-9") _noDelay=../_isLead }}
|
|
39
39
|
{{/if}}
|
|
40
40
|
{{/with}}
|
|
41
41
|
{{/if}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{{#if this.showFullSize.isTrue }}
|
|
2
|
-
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=true _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
|
|
2
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=true _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" _isVertical=_isVertical}}
|
|
3
3
|
{{else}}
|
|
4
|
-
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=false _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
|
|
4
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=false _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" _isVertical=_isVertical}}
|
|
5
5
|
{{/if}}
|
|
@@ -14,6 +14,7 @@ import copytext_downloadbox_json from './fixtures/copytext_downloadbox.json'
|
|
|
14
14
|
import copytext_filedownload_json from './fixtures/copytext_filedownload.json'
|
|
15
15
|
import copytext_externalservice_json from './fixtures/copytext_externalservice.json'
|
|
16
16
|
import copytext_video_json from './fixtures/copytext_video.json'
|
|
17
|
+
import copytext_vertical_video_json from './fixtures/copytext_video_vertical.json'
|
|
17
18
|
import copytext_audio_json from './fixtures/copytext_audio.json'
|
|
18
19
|
import copytext_audio_event_stream_json from './fixtures/copytext_audio_livestream.json'
|
|
19
20
|
import copytext_livestream_json from './fixtures/copytext_livestream.json'
|
|
@@ -123,6 +124,11 @@ export const WithVideo = {
|
|
|
123
124
|
name: 'Video',
|
|
124
125
|
args: copytext_video_json,
|
|
125
126
|
}
|
|
127
|
+
export const WithVerticalVideo = {
|
|
128
|
+
render: Template.bind({}),
|
|
129
|
+
name: 'Hochkant Video',
|
|
130
|
+
args: copytext_vertical_video_json,
|
|
131
|
+
}
|
|
126
132
|
|
|
127
133
|
export const WithLivestream = {
|
|
128
134
|
render: Template.bind({}),
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
{{> components/content/copytext/components/podcastepisode }}
|
|
38
38
|
{{/if~}}
|
|
39
39
|
{{~#if this.isVideoOnDemand}}
|
|
40
|
-
{{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext }}
|
|
40
|
+
{{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext _isVertical=this.isVerticalVideo}}
|
|
41
41
|
{{/if~}}
|
|
42
42
|
{{~#if this.isLivestream}}
|
|
43
43
|
{{> components/content/copytext/components/videolivestream _isTickerCopytext=../_isTickerCopytext }}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Hochkant Video"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isVideo":true,"isVideoOnDemand":true,"isVerticalVideo":true,"showFullSize":{"isTrue":true},"label":{"type":"video","loca":"label_video","byline":{"bylineText":"03:20 Min."}},"copyright":"hessenschau","showAirdate":true,"airdateDate":{"htmlDateTime":"2022-10-31T19:30+0200","htmlDate":"31.10.2022","date":"31.10.22","dateSeparatorTime":"31.10.22, 19:30"},"toModel":{"videoElement":{"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/odinson/202504/c772dcfd-def6-444b-96f7-bee1ffdf8e6c/4d97b06f-ea46-45b6-a791-1ecc619b7ef4/0fbb1119-4289-44e9-860a-c4fb79aed207_sendeton_,1080x1920-50p-5000,720x1280-50p-3200,540x960-50p-1600,360x640-50p-1200,270x480-50p-700,kbit.mp4/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":10,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Hochkantvideo | hessenschau vom 13.05.2025","synopsis":"Hochkantvideo"},"pluginData":{},"geoBlocked":false},"playerId":"5413","type":"videoOndemand","typeLabel":"Video-On-Demand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/odinson/202504/c772dcfd-def6-444b-96f7-bee1ffdf8e6c/4d97b06f-ea46-45b6-a791-1ecc619b7ef4/0fbb1119-4289-44e9-860a-c4fb79aed207_sendeton_,1080x1920-50p-5000,720x1280-50p-3200,540x960-50p-1600,360x640-50p-1200,270x480-50p-700,kbit.mp4/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":10,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Hochkantvideo | hessenschau vom 13.05.2025","synopsis":"Hochkantvideo"},"pluginData":{},"geoBlocked":false},"playerId":"5413","type":"videoOndemand","typeLabel":"Video-On-Demand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true}},"mediaBacklinkToStoryTeaser":{"link":{"url":"/videoseite","isTargetBlank":false},"readMoreScreenreader":"zum hr3.de Video","title":"Musik macht deinen Tag","isForeignBrand":true,"readMore":"zur hr3.de Video-Einzelseite","hasIcon":true,"iconName":"extern"}},"teaseritem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Ela und Pippa","copyrightWithLinks":"Vasco","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hochkant-100_v-Xto9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/hochkant-100_v-Xto9__small.jpg 101w, images/hochkant-100_v-Xto9__medium.jpg 152w, images/hochkant-100_v-Xto9.jpg 152w, images/hochkant-100_v-Xto9__retina.jpg 608w"}]}},"teaserImage":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Ela und Pippa","copyrightWithLinks":"Vasco","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hochkant-100_v-Xto9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/hochkant-100_v-Xto9__small.jpg 101w, images/hochkant-100_v-Xto9__medium.jpg 152w, images/hochkant-100_v-Xto9.jpg 152w, images/hochkant-100_v-Xto9__retina.jpg 608w"}]}}}},{"isHeadline":true,"text":"Zwischenüberschrift unter Video"},{"paragraphBoxItem":{"isVideo":true,"isVideoOnDemand":true,"isVerticalVideo":true,"showFullSize":{"isTrue":false},"label":{"type":"video","loca":"label_video","byline":{"bylineText":"03:20 Min."}},"copyright":"hessenschau","showAirdate":true,"airdateDate":{"htmlDateTime":"2022-10-31T19:30+0200","htmlDate":"31.10.2022","date":"31.10.22","dateSeparatorTime":"31.10.22, 19:30"},"toModel":{"videoElement":{"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/odinson/202504/c772dcfd-def6-444b-96f7-bee1ffdf8e6c/4d97b06f-ea46-45b6-a791-1ecc619b7ef4/0fbb1119-4289-44e9-860a-c4fb79aed207_sendeton_,1080x1920-50p-5000,720x1280-50p-3200,540x960-50p-1600,360x640-50p-1200,270x480-50p-700,kbit.mp4/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":10,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Hochkantvideo | hessenschau vom 13.05.2025","synopsis":"Hochkantvideo"},"pluginData":{},"geoBlocked":false},"playerId":"6666","type":"videoOndemand","typeLabel":"Video-On-Demand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/odinson/202504/c772dcfd-def6-444b-96f7-bee1ffdf8e6c/4d97b06f-ea46-45b6-a791-1ecc619b7ef4/0fbb1119-4289-44e9-860a-c4fb79aed207_sendeton_,1080x1920-50p-5000,720x1280-50p-3200,540x960-50p-1600,360x640-50p-1200,270x480-50p-700,kbit.mp4/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":10,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Hochkantvideo | hessenschau vom 13.05.2025","synopsis":"Hochkantvideo"},"pluginData":{},"geoBlocked":false},"playerId":"6666","type":"videoOndemand","typeLabel":"Video-On-Demand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true}},"mediaBacklinkToStoryTeaser":{"link":{"url":"/videoseite","isTargetBlank":false},"readMoreScreenreader":"zum hr3.de Video","title":"Musik macht deinen Tag","isForeignBrand":false,"readMore":"zur hr3.de VideoEinzel-seite","hasIcon":true,"iconName":"extern"}},"teaseritem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Ela und Pippa","copyrightWithLinks":"Vasco","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hochkant-100_v-Xto9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/hochkant-100_v-Xto9__small.jpg 101w, images/hochkant-100_v-Xto9__medium.jpg 152w, images/hochkant-100_v-Xto9.jpg 152w, images/hochkant-100_v-Xto9__retina.jpg 608w"}]}},"teaserImage":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Ela und Pippa","copyrightWithLinks":"Vasco","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hochkant-100_v-Xto9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/hochkant-100_v-Xto9__small.jpg 101w, images/hochkant-100_v-Xto9__medium.jpg 152w, images/hochkant-100_v-Xto9.jpg 152w, images/hochkant-100_v-Xto9__retina.jpg 608w"}]}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Ela und Pippa","copyrightWithLinks":"Vasco","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-Xto9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-Xto9__small.jpg 101w, images/buchmesse-fahnen-102_v-Xto9__medium.jpg 152w, images/buchmesse-fahnen-102_v-Xto9.jpg 152w, images/buchmesse-fahnen-102_v-Xto9__retina.jpg 608w"}]}}}]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 !h-auto{{else}}ar-16-9 h-full{{/if}}{{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-mediaplayer-tracking='{"playerLocation": "{{_playerLocation}}","playerSize": "{{if _playerSize _playerSize ""}}" }' data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
1
|
+
<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 !h-auto{{else}}{{#if _isVertical}}ar-9-16 h-full{{else}}ar-16-9 h-full{{/if}}{{/if}}{{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-mediaplayer-tracking='{"playerLocation": "{{_playerLocation}}","playerSize": "{{if _playerSize _playerSize ""}}" }' data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
2
2
|
</div>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
x-ref="headerWrapper"
|
|
6
6
|
@resize.window="resetNav()"
|
|
7
7
|
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
8
|
-
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
8
|
+
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full bg-white">
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
<div id="anchorNavWrapper"
|