hr-design-system-handlebars 0.49.13 → 0.49.14

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 (20) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/build/helpers/configProperty.js +3 -0
  3. package/dist/assets/index.css +8 -0
  4. package/dist/views/components/mediaplayer/mediaplayerLoaderDs.feature.js +13 -6
  5. package/dist/views/components/teaser/components/teaser_av_consumption.hbs +4 -1
  6. package/dist/views/components/video/livestream/videoLivestreamDs.subfeature.js +9 -0
  7. package/dist/views/components/video/livestream/video_livestream.hbs +69 -0
  8. package/dist/views/components/video/video_element.hbs +16 -16
  9. package/package.json +1 -1
  10. package/src/assets/fixtures/teaser/teaser_lead.inc.json +46 -0
  11. package/src/assets/fixtures/teaser/teaser_standard_25_serif_live.json +36 -0
  12. package/src/assets/fixtures/teaser/teaser_standard_50_serif_live.json +21 -0
  13. package/src/stories/views/components/mediaplayer/mediaplayerLoaderDs.feature.js +13 -6
  14. package/src/stories/views/components/teaser/components/teaser_av_consumption.hbs +4 -1
  15. package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif_live.json +1 -0
  16. package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_live.json +1 -0
  17. package/src/stories/views/components/teaser/teaser_standard_av.stories.mdx +11 -3
  18. package/src/stories/views/components/video/livestream/videoLivestreamDs.subfeature.js +9 -0
  19. package/src/stories/views/components/video/livestream/video_livestream.hbs +69 -0
  20. package/src/stories/views/components/video/video_element.hbs +16 -16
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v0.49.14 (Tue Jul 12 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Dpe 1683 [#271](https://github.com/mumprod/hr-design-system-handlebars/pull/271) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
1
13
  # v0.49.13 (Tue Jul 12 2022)
2
14
 
3
15
  #### 🐛 Bug Fix
package/build/helpers/configProperty.js ADDED
@@ -0,0 +1,3 @@
1
+ module.exports = function () {
2
+ return "test"
3
+ }
package/dist/assets/index.css CHANGED
@@ -1273,6 +1273,10 @@ video {
1273
1273
  --tw-bg-opacity: 1;
1274
1274
  background-color: rgba(220, 232, 240, var(--tw-bg-opacity));
1275
1275
  }
1276
+ .bg-red-500 {
1277
+ --tw-bg-opacity: 1;
1278
+ background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
1279
+ }
1276
1280
  .bg-gradient-to-r {
1277
1281
  background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
1278
1282
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -2487,6 +2491,10 @@ video {
2487
2491
  --tw-bg-opacity: 1;
2488
2492
  background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
2489
2493
  }
2494
+ .hover\:bg-red-700:hover {
2495
+ --tw-bg-opacity: 1;
2496
+ background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
2497
+ }
2490
2498
  .hover\:text-toplineColor:hover {
2491
2499
  color: #006dc1;
2492
2500
  color: var(--color-topline);
package/dist/views/components/mediaplayer/mediaplayerLoaderDs.feature.js CHANGED
@@ -21,17 +21,24 @@ const MediaplayerLoader = function (context) {
21
21
  let avObject = false;
22
22
  console.log("MediaplayerLoader", options);
23
23
 
24
- const loadLivestream = function () {
25
- new VideoLivestream(options)
26
-
27
- uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
28
- }
29
-
30
24
  const unloadPlayer = function() {
31
25
  console.log("video.pause()");
32
26
  avObject.pause();
33
27
  }
34
28
 
29
+ const loadLivestream = function () {
30
+ if(!avObject){
31
+ console.log("load Livestream");
32
+ avObject = new VideoLivestream(options)
33
+ uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
34
+ listenOnce('player_colosed', unloadPlayer)
35
+ } else {
36
+ console.log("video.play()");
37
+ listenOnce('player_colosed', unloadPlayer)
38
+ avObject.play();
39
+ }
40
+ }
41
+
35
42
  const loadOnDemand = function () {
36
43
  if(!avObject){
37
44
  console.log("load OnDemand");
package/dist/views/components/teaser/components/teaser_av_consumption.hbs CHANGED
@@ -1,8 +1,11 @@
1
1
  {{#with this.teaserLead.avDocument}}
2
2
  {{~#if this.isVideo ~}}
3
- {{~> components/video/video_element _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio ~}}
3
+ {{~> components/video/video_element _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio _teaserSize=../_teaserSize ~}}
4
4
  {{~/if~}}
5
5
  {{~#if this.isAudio ~}}
6
6
  {{~> components/audio/audio_element _isTeaser=true _teaser=../this _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _is25Teaser=../_is25Teaser _teaserSize=../_teaserSize~}}
7
7
  {{~/if~}}
8
+ {{~#if this.isLivestream ~}}
9
+ {{~> components/video/livestream/video_livestream _isTeaser=true _teaser=../this _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _is25Teaser=../_is25Teaser _teaserSize=../_teaserSize~}}
10
+ {{~/if~}}
8
11
  {{/with}}
package/dist/views/components/video/livestream/videoLivestreamDs.subfeature.js CHANGED
@@ -249,6 +249,15 @@ const VideoLivestream = function (options, rootElement) {
249
249
  } else {
250
250
  fetchPlayerStyle(skinPath).then(initPlayer())
251
251
  }
252
+
253
+ return {
254
+ play: function() {
255
+ player.play()
256
+ },
257
+ pause: function() {
258
+ player.pause()
259
+ }
260
+ }
252
261
  }
253
262
 
254
263
  export default VideoLivestream
package/dist/views/components/video/livestream/video_livestream.hbs ADDED
@@ -0,0 +1,69 @@
1
+ <div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-new-hr-mediaplayer-loader-ds='{
2
+ "type": "live",
3
+ "position": "{{if _isTeaser 'teaser' 'page'}}",
4
+ "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",
5
+ "config": {
6
+ "containerId": "{{getRandom}}",
7
+ {{#with _deactivateSubtitles}}
8
+ "deactivateSubtitles": "{{this}}",
9
+ {{/with}}
10
+ "streamUrl":"{{this.providerKey}}",
11
+ "skinPath":"{{resourceUrl 'assets/vendor/ardplayer/ardplayer-hr-6.3.4.055f7511.css'}}",
12
+ "mediaMetadata":{{this.mediaMetadata}},
13
+ "ardplayerUrl": "{{resourceUrl "assets/js/vendor/ardplayer-hr-6.3.4.d39f03b6.js"}}",
14
+ "smarttagUrl": "{{resourceUrl "assets/js/vendor/smarttagProd.js"}}",
15
+ "agfAppId": "{{configProperty "tracking.agf.apid"}}",
16
+ "baseUrl":"{{resourceUrl 'assets/vendor/ardplayer/'}}"
17
+ {{#if _posterImage~}}
18
+ ,"previewImageUrl":{
19
+ "s": "{{_posterImage.url.16to9}}",
20
+ "m": "{{_posterImage.url.16to9}}",
21
+ "l": "{{_posterImage.url.16to9}}",
22
+ "xl": "{{_posterImage.url.16to9_retina}}"
23
+ }
24
+ {{else}}
25
+ {{#if teaseritem ~}}
26
+ ,"previewImageUrl":{
27
+ "s": "{{if teaseritem.[0] teaseritem.[0].url.16to9 teaseritem.url.16to9 }}",
28
+ "m": "{{if teaseritem.[0] teaseritem.[0].url.16to9 teaseritem.url.16to9 }}",
29
+ "l": "{{if teaseritem.[0] teaseritem.[0].url.16to9 teaseritem.url.16to9 }}",
30
+ "xl": "{{if teaseritem.[0] teaseritem.[0].url.16to9_retina teaseritem.url.16to9_retina }}"
31
+ }
32
+ {{else}}
33
+ ,"previewImageUrl" : "{{resourceUrl 'assets/base/video/dummy.jpg'}}"
34
+ {{/if~}}
35
+ {{/if~}}
36
+ {{#if _overlay}}
37
+ ,"overlay":"true"
38
+ ,"overlayId":"{{getRandom}}"
39
+ {{else}}
40
+ ,"overlay":"false"
41
+ {{/if}}
42
+ {{#if _isTeaser}}
43
+ ,"autoplay":"true"
44
+ {{/if}}
45
+ }}'>
46
+ {{!-- geotag --}}
47
+ {{#unless _hideGeotag}}
48
+ {{~#with _geotag}}
49
+ <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>
50
+ {{/with~}}
51
+ {{/unless}}
52
+ </div>
53
+ {{#if _isTeaser}}
54
+ <div class="relative {{_aspectRatio}}" x-show="!avStart" >
55
+ {{#with _teaser}}
56
+ {{~#if _isCopyText~}}
57
+ {{~> components/base/image/responsive_image this.teaserImage _type='story' _variant='100-copytext' _addClassImg="ar__content" _noDelay=../_noDelay ~}}
58
+ {{else}}
59
+
60
+ {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
61
+ _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
62
+ _clickLabelPrefix2="mediaLink" }}
63
+ {{~> components/base/image/responsive_image this.teaserImage _type='story' _variant='100-copytext' _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
64
+ {{/components/base/link }}
65
+ {{/if}}
66
+ {{/with}}
67
+ {{> components/button/button_round _isButton="true" _addClass="bg-red-500 hover:bg-red-700 absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Live" _srOnly="true" _alpineClick="avStart = !avStart"}}
68
+ </div>
69
+ {{/if}}
package/dist/views/components/video/video_element.hbs CHANGED
@@ -1,7 +1,7 @@
1
1
  <div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-new-hr-mediaplayer-loader-ds='{
2
2
  "type": "ondemand",
3
3
  "position": "{{if _isTeaser 'teaser' 'page'}}",
4
- "teaserSize" : "{{if ../../this.teasersize ../../this.teasersize '00' }}",
4
+ "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",
5
5
  "containerId": "{{getRandom}}",
6
6
  "streamUrl":"{{this.videoUrl}}",
7
7
  "isAdaptiveStream": {{if this.adaptiveStreamingUrl "true" "false"}},
@@ -62,20 +62,20 @@
62
62
  </div>
63
63
 
64
64
  {{#if _isTeaser}}
65
- <div class="relative {{_aspectRatio}}" x-show="!avStart" >
66
- {{#with _teaser}}
67
-
68
- {{~#if ../_isCopyText~}}
69
- {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
70
- {{else}}
71
- {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
72
- _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
73
- _clickLabelPrefix2="mediaLink" }}
74
- {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
75
- {{/components/base/link }}
76
- {{/if}}
65
+ <div class="relative {{_aspectRatio}}" x-show="!avStart" >
66
+ {{#with _teaser}}
77
67
 
78
- {{/with}}
79
- {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video" _srOnly="true" _alpineClick="avStart = !avStart"}}
80
- </div>
68
+ {{~#if ../_isCopyText~}}
69
+ {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
70
+ {{else}}
71
+ {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
72
+ _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
73
+ _clickLabelPrefix2="mediaLink" }}
74
+ {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
75
+ {{/components/base/link }}
76
+ {{/if}}
77
+
78
+ {{/with}}
79
+ {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video" _srOnly="true" _alpineClick="avStart = !avStart"}}
80
+ </div>
81
81
  {{/if}}
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "0.49.13",
9
+ "version": "0.49.14",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/assets/fixtures/teaser/teaser_lead.inc.json CHANGED
@@ -59,5 +59,51 @@
59
59
  ]
60
60
  },
61
61
  "image": ""
62
+ },
63
+ "live": {
64
+ "avDocument": {
65
+ "isLivestream": true,
66
+ "videoUrl": "https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4",
67
+ "adaptiveStreamingUrl": "https://hr-vh.akamaihd.net/i/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8",
68
+ "videoResolutionLevels": [
69
+ {
70
+ "url": "https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_480x270-50p-700kbit.mp4",
71
+ "verticalResolution": "270"
72
+ },
73
+ {
74
+ "url": "https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4",
75
+ "verticalResolution": "288"
76
+ },
77
+ {
78
+ "url": "https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_640x360-50p-1200kbit.mp4",
79
+ "verticalResolution": "360"
80
+ },
81
+ {
82
+ "url": "https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_960x540-50p-1600kbit.mp4",
83
+ "verticalResolution": "540"
84
+ },
85
+ {
86
+ "url": "https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1280x720-50p-3200kbit.mp4",
87
+ "verticalResolution": "720"
88
+ },
89
+ {
90
+ "url": "https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1920x1080-50p-5000kbit.mp4",
91
+ "verticalResolution": "1080"
92
+ }
93
+ ],
94
+ "videoSubtitleUrl": "",
95
+ "mediaMetadata": "{\"agf\":{\"title\":\"hr-fernsehen__VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"livestream\":\"no\",\"type\":\"content\",\"airdate\":\"14.06.202200:00\",\"program\":\"hr-fernsehen\",\"assetid\":\"5f3912d337889c6c64e48879d80c562b\",\"uurl\":\"as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c2\":\"p2,Y\",\"nol_c5\":\"p5,hessenschau\",\"nol_c7\":\"p7,as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c8\":\"p8,19\",\"nol_c9\":\"p9,_VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"nol_c10\":\"p10,hr-fernsehen\",\"nol_c12\":\"p12,Content\",\"nol_c18\":\"p18,N\",\"length\":\"19\",\"nol_c20\":\"p20,GFKLinkID\"},\"ati\":{\"pageName\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"secondLevelId\":\"4\",\"documentName\":\"video-170288\",\"documentType\":\"hr-nt:video\",\"documentDate\":\"202206141656\",\"chapter\":\"\",\"mediaLabel\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"mediaTheme1\":\"hessenschau\",\"mediaTheme2\":\"\",\"atiSiteId\":\"551104\",\"atiTrackingHost\":\"https://logs1406\"}}",
96
+ "providerKeyWithSublines": "",
97
+ "providerKey":"https://hrhlsde.akamaized.net/hls/live/2024526/hrhlsde/index.m3u8",
98
+ "teaseritem": [
99
+ {
100
+ "url": {
101
+ "16to9": "https://www.hr-fernsehen.de/livestream/bild-tv_02_ausgabe_web-100~_t-1603117468342_v-16to9.jpg",
102
+ "16to9_retina": "https://www.hr-fernsehen.de/livestream/bild-tv_02_ausgabe_web-100~_t-1603117468342_v-16to9__retina.jpg"
103
+ }
104
+ }
105
+ ]
106
+ },
107
+ "image": ""
62
108
  }
63
109
  }
package/src/assets/fixtures/teaser/teaser_standard_25_serif_live.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "@->jsoninclude": "teaser/teasers.inc.json",
3
+ "@->contentpath": "teaser",
4
+ "@->overrides": [
5
+ {
6
+ "@->contentpath": "logicItem.includeModel.teaserSize",
7
+ "@->value": "25"
8
+ },
9
+ {
10
+ "@->contentpath": "logicItem.includeModel.is25Teaser",
11
+ "@->value": "true"
12
+ },
13
+ {
14
+ "@->contentpath": "logicItem.includeModel.link.content.is25Teaser",
15
+ "@->value": "true"
16
+ },
17
+ {
18
+ "@->contentpath": "logicItem.includeModel.allowAVConsumption",
19
+ "@->value": "true"
20
+ },
21
+ {
22
+ "@->contentpath": "logicItem.includeModel.teaserLead",
23
+ "@->value": {
24
+ "@->jsoninclude": "teaser/teaser_lead.inc.json",
25
+ "@->contentpath": "live"
26
+ }
27
+ },
28
+ {
29
+ "@->contentpath": "logicItem.includeModel.teaserImage",
30
+ "@->value": {
31
+ "@->jsoninclude": "teaser/teaser_images.inc.json",
32
+ "@->contentpath": "sm_4"
33
+ }
34
+ }
35
+ ]
36
+ }
package/src/assets/fixtures/teaser/teaser_standard_50_serif_live.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "@->jsoninclude": "teaser/teasers.inc.json",
3
+ "@->contentpath": "teaser",
4
+ "@->overrides": [
5
+ {
6
+ "@->contentpath": "logicItem.includeModel.teaserSize",
7
+ "@->value": "50"
8
+ },
9
+ {
10
+ "@->contentpath": "logicItem.includeModel.allowAVConsumption",
11
+ "@->value": "true"
12
+ },
13
+ {
14
+ "@->contentpath": "logicItem.includeModel.teaserLead",
15
+ "@->value": {
16
+ "@->jsoninclude": "teaser/teaser_lead.inc.json",
17
+ "@->contentpath": "live"
18
+ }
19
+ }
20
+ ]
21
+ }
package/src/stories/views/components/mediaplayer/mediaplayerLoaderDs.feature.js CHANGED
@@ -21,17 +21,24 @@ const MediaplayerLoader = function (context) {
21
21
  let avObject = false;
22
22
  console.log("MediaplayerLoader", options);
23
23
 
24
- const loadLivestream = function () {
25
- new VideoLivestream(options)
26
-
27
- uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
28
- }
29
-
30
24
  const unloadPlayer = function() {
31
25
  console.log("video.pause()");
32
26
  avObject.pause();
33
27
  }
34
28
 
29
+ const loadLivestream = function () {
30
+ if(!avObject){
31
+ console.log("load Livestream");
32
+ avObject = new VideoLivestream(options)
33
+ uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
34
+ listenOnce('player_colosed', unloadPlayer)
35
+ } else {
36
+ console.log("video.play()");
37
+ listenOnce('player_colosed', unloadPlayer)
38
+ avObject.play();
39
+ }
40
+ }
41
+
35
42
  const loadOnDemand = function () {
36
43
  if(!avObject){
37
44
  console.log("load OnDemand");
package/src/stories/views/components/teaser/components/teaser_av_consumption.hbs CHANGED
@@ -1,8 +1,11 @@
1
1
  {{#with this.teaserLead.avDocument}}
2
2
  {{~#if this.isVideo ~}}
3
- {{~> components/video/video_element _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio ~}}
3
+ {{~> components/video/video_element _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio _teaserSize=../_teaserSize ~}}
4
4
  {{~/if~}}
5
5
  {{~#if this.isAudio ~}}
6
6
  {{~> components/audio/audio_element _isTeaser=true _teaser=../this _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _is25Teaser=../_is25Teaser _teaserSize=../_teaserSize~}}
7
7
  {{~/if~}}
8
+ {{~#if this.isLivestream ~}}
9
+ {{~> components/video/livestream/video_livestream _isTeaser=true _teaser=../this _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _is25Teaser=../_is25Teaser _teaserSize=../_teaserSize~}}
10
+ {{~/if~}}
8
11
  {{/with}}
package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif_live.json ADDED
@@ -0,0 +1 @@
1
+ {"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-ds","teaserSize":"25","is25Teaser":"true","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"https://picsum.photos/id/191/480/270","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"https://picsum.photos/id/191/320/320 320w, https://picsum.photos/id/191/480/480 480w, https://picsum.photos/id/191/640/640 640w, https://picsum.photos/id/191/960/960 960w"},{"media":"all and (min-width: 48em) and (max-width: 58.938em)","sizes":"25vw","srcset":"https://picsum.photos/id/191/320/180 320w, https://picsum.photos/id/191/480/270 480w, https://picsum.photos/id/191/640/360 640w, https://picsum.photos/id/191/960/540 960w"},{"media":"all and (min-width: 59em)","sizes":"218px","srcset":"https://picsum.photos/id/191/320/180 320w, https://picsum.photos/id/191/480/270 480w, https://picsum.photos/id/191/640/360 640w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":"true","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.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":{"isLivestream":true,"videoUrl":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4","adaptiveStreamingUrl":"https://hr-vh.akamaihd.net/i/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","videoResolutionLevels":[{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_480x270-50p-700kbit.mp4","verticalResolution":"270"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4","verticalResolution":"288"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_640x360-50p-1200kbit.mp4","verticalResolution":"360"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_960x540-50p-1600kbit.mp4","verticalResolution":"540"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1280x720-50p-3200kbit.mp4","verticalResolution":"720"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1920x1080-50p-5000kbit.mp4","verticalResolution":"1080"}],"videoSubtitleUrl":"","mediaMetadata":"{\"agf\":{\"title\":\"hr-fernsehen__VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"livestream\":\"no\",\"type\":\"content\",\"airdate\":\"14.06.202200:00\",\"program\":\"hr-fernsehen\",\"assetid\":\"5f3912d337889c6c64e48879d80c562b\",\"uurl\":\"as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c2\":\"p2,Y\",\"nol_c5\":\"p5,hessenschau\",\"nol_c7\":\"p7,as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c8\":\"p8,19\",\"nol_c9\":\"p9,_VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"nol_c10\":\"p10,hr-fernsehen\",\"nol_c12\":\"p12,Content\",\"nol_c18\":\"p18,N\",\"length\":\"19\",\"nol_c20\":\"p20,GFKLinkID\"},\"ati\":{\"pageName\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"secondLevelId\":\"4\",\"documentName\":\"video-170288\",\"documentType\":\"hr-nt:video\",\"documentDate\":\"202206141656\",\"chapter\":\"\",\"mediaLabel\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"mediaTheme1\":\"hessenschau\",\"mediaTheme2\":\"\",\"atiSiteId\":\"551104\",\"atiTrackingHost\":\"https://logs1406\"}}","providerKeyWithSublines":"","providerKey":"https://hrhlsde.akamaized.net/hls/live/2024526/hrhlsde/index.m3u8","teaseritem":[{"url":{"16to9":"https://www.hr-fernsehen.de/livestream/bild-tv_02_ausgabe_web-100~_t-1603117468342_v-16to9.jpg","16to9_retina":"https://www.hr-fernsehen.de/livestream/bild-tv_02_ausgabe_web-100~_t-1603117468342_v-16to9__retina.jpg"}}]},"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"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"teaserSize":"hero","is25Teaser":"true","teaserType":"standard-ds","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}}}}}
package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_live.json ADDED
@@ -0,0 +1 @@
1
+ {"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-ds","teaserSize":"50","is25Teaser":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":"true","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.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":{"isLivestream":true,"videoUrl":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4","adaptiveStreamingUrl":"https://hr-vh.akamaihd.net/i/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","videoResolutionLevels":[{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_480x270-50p-700kbit.mp4","verticalResolution":"270"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4","verticalResolution":"288"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_640x360-50p-1200kbit.mp4","verticalResolution":"360"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_960x540-50p-1600kbit.mp4","verticalResolution":"540"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1280x720-50p-3200kbit.mp4","verticalResolution":"720"},{"url":"https://hr-a.akamaihd.net/video/as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_1920x1080-50p-5000kbit.mp4","verticalResolution":"1080"}],"videoSubtitleUrl":"","mediaMetadata":"{\"agf\":{\"title\":\"hr-fernsehen__VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"livestream\":\"no\",\"type\":\"content\",\"airdate\":\"14.06.202200:00\",\"program\":\"hr-fernsehen\",\"assetid\":\"5f3912d337889c6c64e48879d80c562b\",\"uurl\":\"as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c2\":\"p2,Y\",\"nol_c5\":\"p5,hessenschau\",\"nol_c7\":\"p7,as/hs/2022_06/hrLogo_220614153555_sf14xtiktokpolizeidieckmannhauffheinneuneu_18520763_512x288-25p-500kbit.mp4\",\"nol_c8\":\"p8,19\",\"nol_c9\":\"p9,_VideozeigtrassistischeBeleidigungdurchPolizisten_14.06.202200:00\",\"nol_c10\":\"p10,hr-fernsehen\",\"nol_c12\":\"p12,Content\",\"nol_c18\":\"p18,N\",\"length\":\"19\",\"nol_c20\":\"p20,GFKLinkID\"},\"ati\":{\"pageName\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"secondLevelId\":\"4\",\"documentName\":\"video-170288\",\"documentType\":\"hr-nt:video\",\"documentDate\":\"202206141656\",\"chapter\":\"\",\"mediaLabel\":\"video_zeigt_rassistische_beleidigung_durch_polizisten_video\",\"mediaTheme1\":\"hessenschau\",\"mediaTheme2\":\"\",\"atiSiteId\":\"551104\",\"atiTrackingHost\":\"https://logs1406\"}}","providerKeyWithSublines":"","providerKey":"https://hrhlsde.akamaized.net/hls/live/2024526/hrhlsde/index.m3u8","teaseritem":[{"url":{"16to9":"https://www.hr-fernsehen.de/livestream/bild-tv_02_ausgabe_web-100~_t-1603117468342_v-16to9.jpg","16to9_retina":"https://www.hr-fernsehen.de/livestream/bild-tv_02_ausgabe_web-100~_t-1603117468342_v-16to9__retina.jpg"}}]},"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"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"teaserSize":"hero","is25Teaser":false,"teaserType":"standard-ds","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}}}}}
package/src/stories/views/components/teaser/teaser_standard_av.stories.mdx CHANGED
@@ -5,6 +5,8 @@ import teaser50video from './fixtures/teaser_standard_50_serif_video.json'
5
5
  import teaser25video from './fixtures/teaser_standard_25_serif_video.json'
6
6
  import teaser50audio from './fixtures/teaser_standard_50_serif_audio.json'
7
7
  import teaser25audio from './fixtures/teaser_standard_25_serif_audio.json'
8
+ import teaser50live from './fixtures/teaser_standard_50_serif_live.json'
9
+ import teaser25live from './fixtures/teaser_standard_25_serif_live.json'
8
10
 
9
11
  <Meta
10
12
  title="Komponenten/Teaser/AV-Standard"
@@ -50,13 +52,19 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
50
52
  <Story name="Standard 50% Video" args={teaser50video.logicItem.includeModel}>
51
53
  {Template.bind({})}
52
54
  </Story>
53
- <Story name="Standard 25 Video" args={teaser25video.logicItem.includeModel}>
55
+ <Story name="Standard 25% Video" args={teaser25video.logicItem.includeModel}>
54
56
  {Template.bind({})}
55
57
  </Story>
56
- <Story name="Standard 50 Audio" args={teaser50audio.logicItem.includeModel}>
58
+ <Story name="Standard 50% Audio" args={teaser50audio.logicItem.includeModel}>
57
59
  {Template.bind({})}
58
60
  </Story>
59
- <Story name="Standard 25 Audio" args={teaser25audio.logicItem.includeModel}>
61
+ <Story name="Standard 25% Audio" args={teaser25audio.logicItem.includeModel}>
62
+ {Template.bind({})}
63
+ </Story>
64
+ <Story name="Standard 50% Livestream" args={teaser50live.logicItem.includeModel}>
65
+ {Template.bind({})}
66
+ </Story>
67
+ <Story name="Standard 25% Livestream" args={teaser25live.logicItem.includeModel}>
60
68
  {Template.bind({})}
61
69
  </Story>
62
70
  </Preview>
package/src/stories/views/components/video/livestream/videoLivestreamDs.subfeature.js CHANGED
@@ -249,6 +249,15 @@ const VideoLivestream = function (options, rootElement) {
249
249
  } else {
250
250
  fetchPlayerStyle(skinPath).then(initPlayer())
251
251
  }
252
+
253
+ return {
254
+ play: function() {
255
+ player.play()
256
+ },
257
+ pause: function() {
258
+ player.pause()
259
+ }
260
+ }
252
261
  }
253
262
 
254
263
  export default VideoLivestream
package/src/stories/views/components/video/livestream/video_livestream.hbs ADDED
@@ -0,0 +1,69 @@
1
+ <div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-new-hr-mediaplayer-loader-ds='{
2
+ "type": "live",
3
+ "position": "{{if _isTeaser 'teaser' 'page'}}",
4
+ "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",
5
+ "config": {
6
+ "containerId": "{{getRandom}}",
7
+ {{#with _deactivateSubtitles}}
8
+ "deactivateSubtitles": "{{this}}",
9
+ {{/with}}
10
+ "streamUrl":"{{this.providerKey}}",
11
+ "skinPath":"{{resourceUrl 'assets/vendor/ardplayer/ardplayer-hr-6.3.4.055f7511.css'}}",
12
+ "mediaMetadata":{{this.mediaMetadata}},
13
+ "ardplayerUrl": "{{resourceUrl "assets/js/vendor/ardplayer-hr-6.3.4.d39f03b6.js"}}",
14
+ "smarttagUrl": "{{resourceUrl "assets/js/vendor/smarttagProd.js"}}",
15
+ "agfAppId": "{{configProperty "tracking.agf.apid"}}",
16
+ "baseUrl":"{{resourceUrl 'assets/vendor/ardplayer/'}}"
17
+ {{#if _posterImage~}}
18
+ ,"previewImageUrl":{
19
+ "s": "{{_posterImage.url.16to9}}",
20
+ "m": "{{_posterImage.url.16to9}}",
21
+ "l": "{{_posterImage.url.16to9}}",
22
+ "xl": "{{_posterImage.url.16to9_retina}}"
23
+ }
24
+ {{else}}
25
+ {{#if teaseritem ~}}
26
+ ,"previewImageUrl":{
27
+ "s": "{{if teaseritem.[0] teaseritem.[0].url.16to9 teaseritem.url.16to9 }}",
28
+ "m": "{{if teaseritem.[0] teaseritem.[0].url.16to9 teaseritem.url.16to9 }}",
29
+ "l": "{{if teaseritem.[0] teaseritem.[0].url.16to9 teaseritem.url.16to9 }}",
30
+ "xl": "{{if teaseritem.[0] teaseritem.[0].url.16to9_retina teaseritem.url.16to9_retina }}"
31
+ }
32
+ {{else}}
33
+ ,"previewImageUrl" : "{{resourceUrl 'assets/base/video/dummy.jpg'}}"
34
+ {{/if~}}
35
+ {{/if~}}
36
+ {{#if _overlay}}
37
+ ,"overlay":"true"
38
+ ,"overlayId":"{{getRandom}}"
39
+ {{else}}
40
+ ,"overlay":"false"
41
+ {{/if}}
42
+ {{#if _isTeaser}}
43
+ ,"autoplay":"true"
44
+ {{/if}}
45
+ }}'>
46
+ {{!-- geotag --}}
47
+ {{#unless _hideGeotag}}
48
+ {{~#with _geotag}}
49
+ <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>
50
+ {{/with~}}
51
+ {{/unless}}
52
+ </div>
53
+ {{#if _isTeaser}}
54
+ <div class="relative {{_aspectRatio}}" x-show="!avStart" >
55
+ {{#with _teaser}}
56
+ {{~#if _isCopyText~}}
57
+ {{~> components/base/image/responsive_image this.teaserImage _type='story' _variant='100-copytext' _addClassImg="ar__content" _noDelay=../_noDelay ~}}
58
+ {{else}}
59
+
60
+ {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
61
+ _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
62
+ _clickLabelPrefix2="mediaLink" }}
63
+ {{~> components/base/image/responsive_image this.teaserImage _type='story' _variant='100-copytext' _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
64
+ {{/components/base/link }}
65
+ {{/if}}
66
+ {{/with}}
67
+ {{> components/button/button_round _isButton="true" _addClass="bg-red-500 hover:bg-red-700 absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Live" _srOnly="true" _alpineClick="avStart = !avStart"}}
68
+ </div>
69
+ {{/if}}
package/src/stories/views/components/video/video_element.hbs CHANGED
@@ -1,7 +1,7 @@
1
1
  <div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-new-hr-mediaplayer-loader-ds='{
2
2
  "type": "ondemand",
3
3
  "position": "{{if _isTeaser 'teaser' 'page'}}",
4
- "teaserSize" : "{{if ../../this.teasersize ../../this.teasersize '00' }}",
4
+ "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",
5
5
  "containerId": "{{getRandom}}",
6
6
  "streamUrl":"{{this.videoUrl}}",
7
7
  "isAdaptiveStream": {{if this.adaptiveStreamingUrl "true" "false"}},
@@ -62,20 +62,20 @@
62
62
  </div>
63
63
 
64
64
  {{#if _isTeaser}}
65
- <div class="relative {{_aspectRatio}}" x-show="!avStart" >
66
- {{#with _teaser}}
67
-
68
- {{~#if ../_isCopyText~}}
69
- {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
70
- {{else}}
71
- {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
72
- _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
73
- _clickLabelPrefix2="mediaLink" }}
74
- {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
75
- {{/components/base/link }}
76
- {{/if}}
65
+ <div class="relative {{_aspectRatio}}" x-show="!avStart" >
66
+ {{#with _teaser}}
77
67
 
78
- {{/with}}
79
- {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video" _srOnly="true" _alpineClick="avStart = !avStart"}}
80
- </div>
68
+ {{~#if ../_isCopyText~}}
69
+ {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
70
+ {{else}}
71
+ {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
72
+ _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
73
+ _clickLabelPrefix2="mediaLink" }}
74
+ {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
75
+ {{/components/base/link }}
76
+ {{/if}}
77
+
78
+ {{/with}}
79
+ {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video" _srOnly="true" _alpineClick="avStart = !avStart"}}
80
+ </div>
81
81
  {{/if}}