hr-design-system-handlebars 1.74.5 → 1.74.6

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.
Files changed (22) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/assets/index.css +24 -3
  3. package/dist/views/components/content/copytext/components/media/media_figure.hbs +4 -4
  4. package/dist/views/components/content/copytext/components/video/video.hbs +3 -3
  5. package/dist/views/components/mediaplayer/mediaplayer_button.hbs +2 -2
  6. package/dist/views/components/page/story/story_article.hbs +3 -0
  7. package/dist/views/components/teaser/components/teaser_media_player.hbs +1 -1
  8. package/dist/views_static/components/content/copytext/components/media/media_figure.hbs +4 -4
  9. package/dist/views_static/components/content/copytext/components/video/video.hbs +3 -3
  10. package/dist/views_static/components/mediaplayer/mediaplayer_button.hbs +2 -2
  11. package/dist/views_static/components/page/story/story_article.hbs +3 -0
  12. package/dist/views_static/components/teaser/components/teaser_media_player.hbs +1 -1
  13. package/package.json +1 -1
  14. package/src/assets/fixtures/page/story/story_with_video.json +76 -0
  15. package/src/stories/views/components/content/copytext/components/media/media_figure.hbs +4 -4
  16. package/src/stories/views/components/content/copytext/components/video/video.hbs +3 -3
  17. package/src/stories/views/components/mediaplayer/mediaplayer_button.hbs +2 -2
  18. package/src/stories/views/components/page/story/fixtures/story_with_video.json +1 -0
  19. package/src/stories/views/components/page/story/story_article.hbs +3 -0
  20. package/src/stories/views/components/page/story/story_main.stories.js +10 -0
  21. package/src/stories/views/components/teaser/components/teaser_media_player.hbs +1 -1
  22. package/tailwind.config.js +1 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ # v1.74.6 (Fri Jun 21 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - DPE-3164: Video im Aufmacher [#960](https://github.com/mumprod/hr-design-system-handlebars/pull/960) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
6
+
7
+ #### Authors: 2
8
+
9
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
10
+ - selbaciri (saad.elbaciri@hr.de)
11
+
12
+ ---
13
+
1
14
  # v1.74.5 (Thu Jun 20 2024)
2
15
 
3
16
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -3368,7 +3368,7 @@ article.indexTextDS .indexTextHighlighted .link {
3368
3368
  border-bottom-color: var(--color-secondary-ds);
3369
3369
  }
3370
3370
  .counter-reset {
3371
- counter-reset: cnt1718899728274;
3371
+ counter-reset: cnt1718968237262;
3372
3372
  }
3373
3373
  .hyphens-auto {
3374
3374
  -webkit-hyphens: auto;
@@ -3747,7 +3747,7 @@ article.indexTextDS .indexTextHighlighted .link {
3747
3747
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3748
3748
  }
3749
3749
  .-ordered {
3750
- counter-increment: cnt1718899728274 1;
3750
+ counter-increment: cnt1718968237262 1;
3751
3751
  }
3752
3752
  .-ordered::before {
3753
3753
  position: absolute;
@@ -3763,7 +3763,7 @@ article.indexTextDS .indexTextHighlighted .link {
3763
3763
  letter-spacing: .0125em;
3764
3764
  --tw-text-opacity: 1;
3765
3765
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3766
- content: counter(cnt1718899728274);
3766
+ content: counter(cnt1718968237262);
3767
3767
  }
3768
3768
  /*! ****************************/
3769
3769
  /*! DataPolicy stuff */
@@ -6118,6 +6118,11 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
6118
6118
  margin-bottom: 1rem;
6119
6119
  }
6120
6120
 
6121
+ .sm\:my-7 {
6122
+ margin-top: 1.75rem;
6123
+ margin-bottom: 1.75rem;
6124
+ }
6125
+
6121
6126
  .sm\:mb-14 {
6122
6127
  margin-bottom: 3.5rem;
6123
6128
  }
@@ -6126,6 +6131,10 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
6126
6131
  margin-bottom: 1.75rem;
6127
6132
  }
6128
6133
 
6134
+ .sm\:mb-8 {
6135
+ margin-bottom: 2rem;
6136
+ }
6137
+
6129
6138
  .sm\:ml-4 {
6130
6139
  margin-left: 1rem;
6131
6140
  }
@@ -6158,6 +6167,10 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
6158
6167
  margin-top: 3rem;
6159
6168
  }
6160
6169
 
6170
+ .sm\:mt-14 {
6171
+ margin-top: 3.5rem;
6172
+ }
6173
+
6161
6174
  .sm\:mt-7 {
6162
6175
  margin-top: 1.75rem;
6163
6176
  }
@@ -6564,6 +6577,10 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
6564
6577
  height: 3rem;
6565
6578
  }
6566
6579
 
6580
+ .md\:h-18 {
6581
+ height: 4.5rem;
6582
+ }
6583
+
6567
6584
  .md\:h-6 {
6568
6585
  height: 1.5rem;
6569
6586
  }
@@ -6600,6 +6617,10 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
6600
6617
  width: 3rem;
6601
6618
  }
6602
6619
 
6620
+ .md\:w-18 {
6621
+ width: 4.5rem;
6622
+ }
6623
+
6603
6624
  .md\:w-22 {
6604
6625
  width: 5.5rem;
6605
6626
  }
package/dist/views/components/content/copytext/components/media/media_figure.hbs CHANGED
@@ -1,7 +1,7 @@
1
- <figure class="relative ar-16-9 my-6 sm480:my-7 {{_addClass}}" x-data="{ avStart: false }">
1
+ <figure class="relative ar-16-9 {{_addClass}}" x-data="{ avStart: false }">
2
2
  {{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
3
3
  {{#unless _voting-option}}
4
- <figcaption class="py-3 mx-5 sm:mx-0 sm:py-4 border-t-[3px] border-gray-boulder">
4
+ <figcaption class="py-3 sm:py-4 border-t-[3px] border-gray-boulder {{_cssClassCaption}}">
5
5
  {{#if this.label}}
6
6
  {{#> components/label/label_group}}
7
7
  {{#with this.label}}
@@ -20,11 +20,11 @@
20
20
  {{/unless}}
21
21
  {{#if this.isVideo}}
22
22
  {{~> components/mediaplayer/media_player this.toModel.videoElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
23
- {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
23
+ {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
24
24
  {{/if}}
25
25
  {{#unless _voting-option}}
26
26
  {{#with this.teaseritem}}
27
- {{~> components/content/copytext/components/image/figcaption _cssClassCaption="mx-5 sm:mx-0"~}}
27
+ {{~> components/content/copytext/components/image/figcaption _cssClassCaption=../_cssClassCaption~}}
28
28
  {{/with}}
29
29
  {{/unless}}
30
30
  {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}
package/dist/views/components/content/copytext/components/video/video.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  {{#if this.showFullSize.isTrue }}
2
- {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
2
+ {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
3
3
  {{else}}
4
- {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
5
- {{/if}}
4
+ {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
5
+ {{/if}}
package/dist/views/components/mediaplayer/mediaplayer_button.hbs CHANGED
@@ -1,8 +1,8 @@
1
1
  {{#with this}}
2
2
  {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
3
3
  {{#with this}}
4
- {{> components/base/image/icon _addClass=(appendToDefault (if ../../_isLivestream-adjust_context "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "w-10 h-10 fill-white group-hover:text-white inline ") _icon=../../_icon-adjust_context}}
5
- {{#*inline "css"}}{{/inline}}
4
+ {{> components/base/image/icon _addClass=(appendToDefault (if ../../_isLivestream-adjust_context "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "fill-white group-hover:text-white inline ") _icon=../../_icon-adjust_context}}
5
+ {{#*inline "css"}} {{~#if ../../_isLead-adjust_context~}} md:w-18 md:h-18 w-10 h-10 {{else}} w-10 h-10 {{/if}} {{/inline}}
6
6
  {{/with}}
7
7
  {{>components/button/components/button_label _css="sr-only" _label=../../_label-adjust_context}}
8
8
  {{/components/button/button}}
package/dist/views/components/page/story/story_article.hbs CHANGED
@@ -18,6 +18,9 @@
18
18
  _isWebview=../../_isWebview
19
19
  _noDelay=true}}
20
20
  {{/if}}
21
+ {{#if this.isVideo}}
22
+ {{> components/content/copytext/components/media/media_figure _isLead=true _fullSize=true _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
23
+ {{/if}}
21
24
  {{/with}}
22
25
  {{/unless}}
23
26
 
package/dist/views/components/teaser/components/teaser_media_player.hbs CHANGED
@@ -14,6 +14,6 @@
14
14
 
15
15
 
16
16
  {{#with this}}
17
- {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
17
+ {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLead=_isLead _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
18
18
  {{/with}}
19
19
  </div>
package/dist/views_static/components/content/copytext/components/media/media_figure.hbs CHANGED
@@ -1,7 +1,7 @@
1
- <figure class="relative ar-16-9 my-6 sm480:my-7 {{_addClass}}" x-data="{ avStart: false }">
1
+ <figure class="relative ar-16-9 {{_addClass}}" x-data="{ avStart: false }">
2
2
  {{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
3
3
  {{#unless _voting-option}}
4
- <figcaption class="py-3 mx-5 sm:mx-0 sm:py-4 border-t-[3px] border-gray-boulder">
4
+ <figcaption class="py-3 sm:py-4 border-t-[3px] border-gray-boulder {{_cssClassCaption}}">
5
5
  {{#if this.label}}
6
6
  {{#> components/label/label_group}}
7
7
  {{#with this.label}}
@@ -20,11 +20,11 @@
20
20
  {{/unless}}
21
21
  {{#if this.isVideo}}
22
22
  {{~> components/mediaplayer/media_player this.toModel.videoElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
23
- {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
23
+ {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
24
24
  {{/if}}
25
25
  {{#unless _voting-option}}
26
26
  {{#with this.teaseritem}}
27
- {{~> components/content/copytext/components/image/figcaption _cssClassCaption="mx-5 sm:mx-0"~}}
27
+ {{~> components/content/copytext/components/image/figcaption _cssClassCaption=../_cssClassCaption~}}
28
28
  {{/with}}
29
29
  {{/unless}}
30
30
  {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}
package/dist/views_static/components/content/copytext/components/video/video.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  {{#if this.showFullSize.isTrue }}
2
- {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
2
+ {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
3
3
  {{else}}
4
- {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
5
- {{/if}}
4
+ {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
5
+ {{/if}}
package/dist/views_static/components/mediaplayer/mediaplayer_button.hbs CHANGED
@@ -1,8 +1,8 @@
1
1
  {{#with this}}
2
2
  {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
3
3
  {{#with this}}
4
- {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "w-10 h-10 fill-white group-hover:text-white inline ") _icon=_icon}}
5
- {{#*inline "css"}}{{/inline}}
4
+ {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "fill-white group-hover:text-white inline ") _icon=_icon}}
5
+ {{#*inline "css"}} {{~#if _isLead~}} md:w-18 md:h-18 w-10 h-10 {{else}} w-10 h-10 {{/if}} {{/inline}}
6
6
  {{/with}}
7
7
  {{>components/button/components/button_label _css="sr-only" _label=_label}}
8
8
  {{/components/button/button}}
package/dist/views_static/components/page/story/story_article.hbs CHANGED
@@ -18,6 +18,9 @@
18
18
  _isWebview=../../_isWebview
19
19
  _noDelay=true}}
20
20
  {{/if}}
21
+ {{#if this.isVideo}}
22
+ {{> components/content/copytext/components/media/media_figure _isLead=true _fullSize=true _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
23
+ {{/if}}
21
24
  {{/with}}
22
25
  {{/unless}}
23
26
 
package/dist/views_static/components/teaser/components/teaser_media_player.hbs CHANGED
@@ -14,6 +14,6 @@
14
14
 
15
15
 
16
16
  {{#with this}}
17
- {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
17
+ {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLead=_isLead _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
18
18
  {{/with}}
19
19
  </div>
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "1.74.5",
9
+ "version": "1.74.6",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/assets/fixtures/page/story/story_with_video.json ADDED
@@ -0,0 +1,76 @@
1
+ {
2
+
3
+ "@->jsoninclude": "page/story/story.inc.json",
4
+ "@->overrides": [
5
+ {
6
+ "@->contentpath": "teaseritemDS",
7
+ "@->value": {
8
+ "isVideo": true,
9
+ "showFullSize": {
10
+ "isTrue": true
11
+ },
12
+ "label": {
13
+ "type": "video",
14
+ "loca": "label_video",
15
+ "byline": {
16
+ "bylineText": "03:20 Min."
17
+ }
18
+ },
19
+ "copyright": "hessenschau",
20
+ "airdateDate": {
21
+ "htmlDateTime": "2022-10-31T19:30+0200",
22
+ "htmlDate": "31.10.2022",
23
+ "date": "31.10.22",
24
+ "dateSeparatorTime": "31.10.22, 19:30"
25
+ },
26
+ "toModel": {
27
+ "videoElement": {
28
+ "ardPlayerConfig": {
29
+ "@->jsoninclude": "video/videos.inc.json",
30
+ "@->contentpath": "video-1"
31
+ },
32
+ "ardPlayerJsonConfig": {
33
+ "@->jsoninclude": "video/videos.inc.json",
34
+ "@->contentpath": "video-1"
35
+ }
36
+ },
37
+ "mediaBacklinkToStoryTeaser": {
38
+ "link": {
39
+ "url": "/videoseite",
40
+ "isTargetBlank": false
41
+ },
42
+ "content": {
43
+ "readMoreScreenreader": "zum hr3.de Video",
44
+ "title": "Musik macht deinen Tag",
45
+ "isForeignBrand": true,
46
+ "readMore": "zum hr3.de Videoseite"
47
+ },
48
+ "hasIcon": true,
49
+ "iconName": "extern"
50
+ }
51
+ },
52
+ "teaseritem": {
53
+ "@->jsoninclude": "teaser/teaser_images.inc.json",
54
+ "@->contentpath": "copytext_image_100",
55
+ "@->replaceToken": [
56
+ {
57
+ "@->token": "image",
58
+ "@->value": "lehrerin-ukraine-104"
59
+ }
60
+ ]
61
+ },
62
+
63
+ "teaserImage": {
64
+ "@->jsoninclude": "teaser/teaser_images.inc.json",
65
+ "@->contentpath": "copytext_image_100",
66
+ "@->replaceToken": [
67
+ {
68
+ "@->token": "image",
69
+ "@->value": "lehrerin-ukraine-104"
70
+ }
71
+ ]
72
+ }
73
+ }
74
+ }
75
+ ]
76
+ }
package/src/stories/views/components/content/copytext/components/media/media_figure.hbs CHANGED
@@ -1,7 +1,7 @@
1
- <figure class="relative ar-16-9 my-6 sm480:my-7 {{_addClass}}" x-data="{ avStart: false }">
1
+ <figure class="relative ar-16-9 {{_addClass}}" x-data="{ avStart: false }">
2
2
  {{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
3
3
  {{#unless _voting-option}}
4
- <figcaption class="py-3 mx-5 sm:mx-0 sm:py-4 border-t-[3px] border-gray-boulder">
4
+ <figcaption class="py-3 sm:py-4 border-t-[3px] border-gray-boulder {{_cssClassCaption}}">
5
5
  {{#if this.label}}
6
6
  {{#> components/label/label_group}}
7
7
  {{#with this.label}}
@@ -20,11 +20,11 @@
20
20
  {{/unless}}
21
21
  {{#if this.isVideo}}
22
22
  {{~> components/mediaplayer/media_player this.toModel.videoElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
23
- {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
23
+ {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
24
24
  {{/if}}
25
25
  {{#unless _voting-option}}
26
26
  {{#with this.teaseritem}}
27
- {{~> components/content/copytext/components/image/figcaption _cssClassCaption="mx-5 sm:mx-0"~}}
27
+ {{~> components/content/copytext/components/image/figcaption _cssClassCaption=../_cssClassCaption~}}
28
28
  {{/with}}
29
29
  {{/unless}}
30
30
  {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}
package/src/stories/views/components/content/copytext/components/video/video.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  {{#if this.showFullSize.isTrue }}
2
- {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
2
+ {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
3
3
  {{else}}
4
- {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
5
- {{/if}}
4
+ {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
5
+ {{/if}}
package/src/stories/views/components/mediaplayer/mediaplayer_button.hbs CHANGED
@@ -1,8 +1,8 @@
1
1
  {{#with this}}
2
2
  {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
3
3
  {{#with this}}
4
- {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream-adjust_context "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "w-10 h-10 fill-white group-hover:text-white inline ") _icon=_icon-adjust_context}}
5
- {{#*inline "css"}}{{/inline}}
4
+ {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream-adjust_context "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "fill-white group-hover:text-white inline ") _icon=_icon-adjust_context}}
5
+ {{#*inline "css"}} {{~#if _isLead-adjust_context~}} md:w-18 md:h-18 w-10 h-10 {{else}} w-10 h-10 {{/if}} {{/inline}}
6
6
  {{/with}}
7
7
  {{>components/button/components/button_label _css="sr-only" _label=_label-adjust_context}}
8
8
  {{/components/button/button}}
package/src/stories/views/components/page/story/fixtures/story_with_video.json ADDED
@@ -0,0 +1 @@
1
+ {"topline":"Quer über den großen Sylter Deich","title":"Zwei flinke Boxer jagen die quirlige Eva und ihren Mops","shorttext":"Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. Fix quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.","hasMoreThanOneAuthor":false,"hasOneAuthor":true,"hasDwellTime":true,"isArchiveContent":false,"displayPageLead":{"isFalse":false},"teaseritemDS":{"isVideo":true,"showFullSize":{"isTrue":true},"label":{"type":"video","loca":"label_video","byline":{"bylineText":"03:20 Min."}},"copyright":"hessenschau","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/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/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":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"},"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/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/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":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"}},"mediaBacklinkToStoryTeaser":{"link":{"url":"/videoseite","isTargetBlank":false},"content":{"readMoreScreenreader":"zum hr3.de Video","title":"Musik macht deinen Tag","isForeignBrand":true,"readMore":"zum hr3.de Videoseite"},"hasIcon":true,"iconName":"extern"}},"teaseritem":{"isImage":true,"showFullSize":{"isTrue":true},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}},"teaserImage":{"isImage":true,"showFullSize":{"isTrue":true},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}}},"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"documentPublicationDate":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"userComments":{"HasOneComment":false,"quantity":"117"},"byline":"Bylinetext","authorTitle":"Steffen Rebhahn","authorImage":{"isImage":true,"caption":"Steffen Rebhahn","copyrightWithLinks":"hr","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1_small.jpg","sources":[{"sizes":"50px","srcset":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__xsmall.jpg 260w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__small.jpg 380w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__medium.jpg 480w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1.jpg 720w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__large.jpg 960w"}]}},"authorUrl":"/author-url","webviewAuthorUrl":"webview-author-url","authorItems":[{"hasProfileLink":false,"from":"Von","textAfterAuthor":"Horst Schlämmer","delimiter":", "},{"hasProfileLink":false,"from":"","textAfterAuthor":"Karl Dall","delimiter":" und "},{"hasProfileLink":true,"from":"","authorName":"Peter Lustig","delimiter":"","link":{"url":"/author-url","isTargetBlank":false}}],"copytextParagraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, 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='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, 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='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isHeadline":true,"text":"Zwischenüberschrift"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, 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='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}],"source":["Horst Schlämmer","hessenschau.de"],"geotag":[{"url":"/Frankfurt-url","title":"Frankfurt"},{"url":"/Offenbach-url","title":"Offenbach"},{"url":"/Darmstadt-url","title":"Darmstadt"},{"url":"/Kassel-url","title":"Kassel"},{"url":"/Hanau-url","title":"Hanau"}],"topictags":[{"url":"/Parteien-url","title":"Parteien"},{"url":"/Wahlen-url","title":"Wahlen"},{"url":"/Landtagswahl-url","title":"Landtagswahl"},{"url":"/Kriminalität-url","title":"Kriminalität"},{"url":"/Tiere-url","title":"Tiere"},{"url":"/Umwelt-url","title":"Umwelt"},{"url":"/Gesundheit-url","title":"Gesundheit"}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"},"programReference":{"hasReference":true,"name":"hessenschau","link":{"url":"/Program-url","isTargetBlank":true},"displayWithTime":true,"date":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","dateSeparatorTime":"19:30"}},"relatedContentSsi":{"relatedContent":{"hasLink":false,"link":"#gruppe1","hasGroupTitle":true,"hasGroupItems":true,"isRelatedContent":true,"groupTitle":"Das könnte Sie auch interessieren","teaserSize":"100","realTeaserSize":"100","logicItems":[{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"25","realTeaserSize":"25","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938rem)","sizes":"300px","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48rem) ","sizes":"220px","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}},{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Sieben Fakten zum Ehrenamt in Hessen","topline":"Engagement von Fußballtrainer bis Feuerwehrfrau","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"25","realTeaserSize":"25","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-10-11T06:57+0200","htmlDate":"11.10.2022","date":"11.10.22","dateSeparatorTime":"11.10.22, 06:57"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/jugendfeuerwehr-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938rem)","sizes":"300px","srcset":"images/jugendfeuerwehr-102_v-1to1__small.jpg 380w, images/jugendfeuerwehr-102_v-1to1__medium.jpg 480w, images/jugendfeuerwehr-102_v-1to1.jpg 720w, images/jugendfeuerwehr-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48rem) ","sizes":"220px","srcset":"images/jugendfeuerwehr-102_v-16to9__small.jpg 320w, images/jugendfeuerwehr-102_v-16to9__medium.jpg 480w, images/jugendfeuerwehr-102_v-16to9__medium__extended.jpg 640w, images/jugendfeuerwehr-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Zweieinhalb Millionen Hessinnen und Hessen engagieren sich ehrenamtlich - zum Beispiel in einem Sport- oder Musikverein. Und doch haben viele Vereine mit Nachwuchsproblemen zu kämpfen.","hideBylineAndShorttext":false,"sophoraId":"thema-ehrenamt-hessen-100","profiles":"Von Anja Engelke","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}},{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"23 Grad - Oktober verabschiedet sich \"sehr außergewöhnlich\"","topline":"T-Shirt statt Winterjacke","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"25","realTeaserSize":"25","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-10-23T16:04+0200","htmlDate":"23.10.2022","date":"23.10.22","dateSeparatorTime":"23.10.22, 16:04"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/sonniger-herbst-100_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938rem)","sizes":"300px","srcset":"images/sonniger-herbst-100_v-1to1__small.jpg 380w, images/sonniger-herbst-100_v-1to1__medium.jpg 480w, images/sonniger-herbst-100_v-1to1.jpg 720w, images/sonniger-herbst-100_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48rem) ","sizes":"220px","srcset":"images/sonniger-herbst-100_v-16to9__small.jpg 320w, images/sonniger-herbst-100_v-16to9__medium.jpg 480w, images/sonniger-herbst-100_v-16to9__medium__extended.jpg 640w, images/sonniger-herbst-100_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":true,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":true,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":true,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Dicke Winterjacken können weiterhin auf ihren Einsatz warten: Die kommenden Tage bleiben für den späten Oktober außergewöhnlich mild. Selbst Meteorologen sind gleich aus mehreren Gründen überrascht.","hideBylineAndShorttext":false,"sophoraId":"warmes-oktoberende-100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":{"isVideo":true,"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/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/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":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"},"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/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/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":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100"}}}},"image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}},{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Der Hasebe-Kane-Nahkampf geht in die zweite Runde","topline":"Eintracht trifft auf Tottenham","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"25","realTeaserSize":"25","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-10-11T19:46+0200","htmlDate":"11.10.2022","date":"11.10.22","dateSeparatorTime":"11.10.22, 19:46"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/hasebe-kane-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938rem)","sizes":"300px","srcset":"images/hasebe-kane-102_v-1to1__small.jpg 380w, images/hasebe-kane-102_v-1to1__medium.jpg 480w, images/hasebe-kane-102_v-1to1.jpg 720w, images/hasebe-kane-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48rem) ","sizes":"220px","srcset":"images/hasebe-kane-102_v-16to9__small.jpg 320w, images/hasebe-kane-102_v-16to9__medium.jpg 480w, images/hasebe-kane-102_v-16to9__medium__extended.jpg 640w, images/hasebe-kane-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":true,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":true,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":true,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Sport","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Beim Hinspiel brachte Altmeister Makoto Hasebe Sturm-Star Harry Kane bis an den Rande der Verzweiflung. Der bittet im Rückspiel nun zur Revanche. Vorher gibt es aber lobende Worte.","hideBylineAndShorttext":false,"sophoraId":"hasebe-kane-100","profiles":"Von Nicolas Herold aus London","teaserLead":{"avDocument":{"isAudio":true,"toModel":{"audioElement":{"isPodcast":false,"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","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"teaserSize":"100","realTeaserSize":"100"},"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","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js","isAutoplay":true,"teaserSize":"100","realTeaserSize":"100"}}}},"image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}]}},"trackingData":{"secondLevelId":"2","pageName":"bla"}}
package/src/stories/views/components/page/story/story_article.hbs CHANGED
@@ -18,6 +18,9 @@
18
18
  _isWebview=../../_isWebview
19
19
  _noDelay=true}}
20
20
  {{/if}}
21
+ {{#if this.isVideo}}
22
+ {{> components/content/copytext/components/media/media_figure _isLead=true _fullSize=true _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
23
+ {{/if}}
21
24
  {{/with}}
22
25
  {{/unless}}
23
26
 
package/src/stories/views/components/page/story/story_main.stories.js CHANGED
@@ -2,6 +2,7 @@ import story_template from './story_article.hbs'
2
2
  import data_story from './fixtures/story.json'
3
3
  import data_story_with_label from './fixtures/story_with_label.json'
4
4
  import data_story_with_square_image from './fixtures/story_with_square_image.json'
5
+ import data_story_with_video from './fixtures/story_with_video.json'
5
6
 
6
7
  const Template = ({ ...args }) => {
7
8
  // You can either use a function to create DOM elements or use a plain html string!
@@ -39,4 +40,13 @@ export const WithLabel = {
39
40
  layout: 'fullscreen',
40
41
  chromatic: { delay: 1000 }
41
42
  }
43
+ }
44
+
45
+ export const WithVideo = {
46
+ render: Template.bind({}),
47
+ name: 'Artikel mit Video im Aufmacher',
48
+ args: data_story_with_video,
49
+ parameters: {
50
+ layout: 'fullscreen',
51
+ }
42
52
  }
package/src/stories/views/components/teaser/components/teaser_media_player.hbs CHANGED
@@ -14,6 +14,6 @@
14
14
 
15
15
 
16
16
  {{#with this}}
17
- {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
17
+ {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLead=_isLead _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
18
18
  {{/with}}
19
19
  </div>
package/tailwind.config.js CHANGED
@@ -147,6 +147,7 @@ module.exports = {
147
147
  'footer-logo-lg': 'var(--width-footer-logo-lg)',
148
148
  },
149
149
  height: {
150
+ '18': '4.5rem',
150
151
  '22': '5.5rem',
151
152
  '30': '7.5rem',
152
153
  '35': '8.75rem',