hr-design-system-handlebars 1.114.137 → 1.114.139
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 +3 -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/teaser/components/teaser_media_player.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/teaser/components/teaser_media_player.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/teaser/components/teaser_media_player.hbs +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
# v1.114.139 (Fri May 16 2025)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Enhance vertical video support in media components [#1280](https://github.com/mumprod/hr-design-system-handlebars/pull/1280) ([@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.138 (Tue May 13 2025)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- 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))
|
|
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.137 (Fri May 09 2025)
|
|
2
28
|
|
|
3
29
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -3885,7 +3885,7 @@ article #commentList {
|
|
|
3885
3885
|
border-bottom-color: var(--color-secondary-ds);
|
|
3886
3886
|
}
|
|
3887
3887
|
.counter-reset {
|
|
3888
|
-
counter-reset:
|
|
3888
|
+
counter-reset: cnt1747389987070;
|
|
3889
3889
|
}
|
|
3890
3890
|
.animate-delay-100 {
|
|
3891
3891
|
--tw-animate-delay: 100ms;
|
|
@@ -4346,7 +4346,7 @@ html { scroll-behavior: smooth; }
|
|
|
4346
4346
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4347
4347
|
}
|
|
4348
4348
|
.-ordered {
|
|
4349
|
-
counter-increment:
|
|
4349
|
+
counter-increment: cnt1747389987070 1;
|
|
4350
4350
|
}
|
|
4351
4351
|
.-ordered::before {
|
|
4352
4352
|
position: absolute;
|
|
@@ -4364,7 +4364,7 @@ html { scroll-behavior: smooth; }
|
|
|
4364
4364
|
--tw-text-opacity: 1;
|
|
4365
4365
|
color: rgba(0, 0, 0, 1);
|
|
4366
4366
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4367
|
-
content: counter(
|
|
4367
|
+
content: counter(cnt1747389987070);
|
|
4368
4368
|
}
|
|
4369
4369
|
/*! ****************************/
|
|
4370
4370
|
/*! DataPolicy stuff */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figure class="relative {{_addClass}}" x-data="{ avStart: false }">
|
|
1
|
+
<figure class="relative {{_addClass}}{{#if _isVertical}} md:max-w-1/2 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 _isVertical=../_isVertical }}
|
|
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 _isVertical=../_isVertical }}
|
|
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>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{{/unless}}
|
|
10
10
|
|
|
11
11
|
{{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1"{{#if (isUserConsentNeeded this.link.url)}} class="js-user-consent-needed"{{/if}}>{{/if}}
|
|
12
|
-
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant (if _isLead '100-top-sb' (if _isFullsize '100-copytext' 'copytext'))) _addClassImg=_addClassImg _noDelay=_noDelay ~}}
|
|
12
|
+
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant (if _isLead '100-top-sb' (if _isVertical 'copytext-portrait' (if _isFullsize '100-copytext' 'copytext')))) _addClassImg=_addClassImg _noDelay=_noDelay ~}}
|
|
13
13
|
{{#if this.isTickerTeaser}}</a>{{/if}}
|
|
14
14
|
|
|
15
15
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<figure class="relative {{_addClass}}" x-data="{ avStart: false }">
|
|
1
|
+
<figure class="relative {{_addClass}}{{#if _isVertical}} md:max-w-1/2 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 _isVertical=../_isVertical }}
|
|
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 _isVertical=../_isVertical }}
|
|
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>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{{/unless}}
|
|
10
10
|
|
|
11
11
|
{{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1"{{#if (isUserConsentNeeded this.link.url)}} class="js-user-consent-needed"{{/if}}>{{/if}}
|
|
12
|
-
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant (if _isLead '100-top-sb' (if _isFullsize '100-copytext' 'copytext'))) _addClassImg=_addClassImg _noDelay=_noDelay ~}}
|
|
12
|
+
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant (if _isLead '100-top-sb' (if _isVertical 'copytext-portrait' (if _isFullsize '100-copytext' 'copytext')))) _addClassImg=_addClassImg _noDelay=_noDelay ~}}
|
|
13
13
|
{{#if this.isTickerTeaser}}</a>{{/if}}
|
|
14
14
|
|
|
15
15
|
|
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.139",
|
|
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}} md:max-w-1/2 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 _isVertical=../_isVertical }}
|
|
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 _isVertical=../_isVertical }}
|
|
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>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{{/unless}}
|
|
10
10
|
|
|
11
11
|
{{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1"{{#if (isUserConsentNeeded this.link.url)}} class="js-user-consent-needed"{{/if}}>{{/if}}
|
|
12
|
-
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant (if _isLead '100-top-sb' (if _isFullsize '100-copytext' 'copytext'))) _addClassImg=_addClassImg _noDelay=_noDelay ~}}
|
|
12
|
+
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant (if _isLead '100-top-sb' (if _isVertical 'copytext-portrait' (if _isFullsize '100-copytext' 'copytext')))) _addClassImg=_addClassImg _noDelay=_noDelay ~}}
|
|
13
13
|
{{#if this.isTickerTeaser}}</a>{{/if}}
|
|
14
14
|
|
|
15
15
|
|