hr-design-system-handlebars 1.114.62 → 1.114.64

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.114.64 (Mon Jan 20 2025)
+
+#### 🐛 Bug Fix
+
+- Dpe 3517 [#1213](https://github.com/mumprod/hr-design-system-handlebars/pull/1213) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.114.63 (Fri Jan 17 2025)
+
+#### 🐛 Bug Fix
+
+- New label "Hessen am Abend" [#1212](https://github.com/mumprod/hr-design-system-handlebars/pull/1212) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.114.62 (Fri Jan 17 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hessenschau/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr1/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr2/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr3/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",
@@ -176,8 +177,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",

package/dist/assets/brand/you-fm/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/dist/assets/index.css

@@ -1136,18 +1136,27 @@ article #commentList {
   bottom: 0px;
   left: 0px;
 }
+.-bottom-20 {
+  bottom: -5rem;
+}
 .-left-4 {
   left: -1rem;
 }
 .-left-5 {
   left: -1.25rem;
 }
+.-right-80 {
+  right: -20rem;
+}
 .bottom-0 {
   bottom: 0px;
 }
 .bottom-11 {
   bottom: 2.75rem;
 }
+.bottom-12 {
+  bottom: 3rem;
+}
 .bottom-15 {
   bottom: 3.75rem;
 }
@@ -1179,6 +1188,9 @@ article #commentList {
 .right-11 {
   right: 2.75rem;
 }
+.right-12 {
+  right: 3rem;
+}
 .right-4 {
   right: 1rem;
 }
@@ -1788,6 +1800,9 @@ article #commentList {
 .w-12 {
   width: 3rem;
 }
+.w-135 {
+  width: 33.75rem;
+}
 .w-15\/12 {
   width: 120%;
 }
@@ -1842,6 +1857,9 @@ article #commentList {
 .w-9\.5 {
   width: 2.375rem;
 }
+.w-96 {
+  width: 24rem;
+}
 .w-\[19px\] {
   width: 19px;
 }
@@ -2744,6 +2762,11 @@ article #commentList {
   background-color: rgba(226, 232, 240, 1);
   background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
 }
+.bg-slate-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(148, 163, 184, 1);
+  background-color: rgba(148, 163, 184, var(--tw-bg-opacity));
+}
 .bg-slate-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(100, 116, 139, 1);
@@ -3711,7 +3734,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1737114207850;
+  counter-reset: cnt1737377355885;
 }
 html { scroll-behavior: smooth; }
 .placeholder-text-xs::-webkit-input-placeholder {
@@ -4126,7 +4149,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1737114207850 1;
+  counter-increment: cnt1737377355885 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4144,7 +4167,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1737114207850);
+  content: counter(cnt1737377355885);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/views/components/label/label.hbs

@@ -2,8 +2,8 @@
     class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading{{#if _css}} {{_css}}{{/if}} 
         {{inline-switch
             _type
-            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video","audio"]'
-            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia"]'
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","hessen-am-abend","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video","audio"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia"]'
         }}'
 >
     {{_text}}

package/dist/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs

@@ -0,0 +1,82 @@
+
+    <div x-data="stickyPlayer" x-init="init()" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.15="inViewport = false" x-intersect:enter.threshold.15="inViewport = true; videoWasStopedWhenSticky = false">
+        <div x-ref="videoElementWrapper"
+            class="" 
+            :class="{ 'ar-16-9 w-96 fixed right-12 bottom-12 z-300 ': shouldVideoBeFixed() }">
+            {{> @partial-block }} 	
+        </div>
+        	<div  class="absolute hidden bg-white -bottom-20 -right-80">
+        shouldVideoBeFixed: <span x-text="shouldVideoBeFixed()"></span><br>
+		inViewport: <span x-text="inViewport"></span><br>
+		videoStarted: <span x-text="videoStarted"></span><br>
+		videoStoped: <span x-text="videoStoped"></span><br>
+		videoPlaying: <span x-text="videoPlaying"></span><br>
+		videoWasStopedWhenSticky: <span x-text="videoWasStopedWhenSticky"></span><br>
+       
+
+	</div>
+        <script>
+            var stickyPlayer = () => {
+                return {
+                    eventListenerInitialized: false,
+                    inViewport: true, 
+                    videoStarted: false,
+                    videoStoped: true,
+                    videoPlaying: false,
+                    videoWasStopedWhenSticky: false,
+                    videoElement: null,
+                    shouldVideoBeFixed: function () {
+                        return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
+                        //return !this.inViewport;
+                    },
+                    setupVideoEventListeners: function () {
+                        console.log("setupVideoEventListeners");
+                        if(!this.eventListenerInitialized) {                          
+                            this.videoElement.addEventListener("play", () => {
+                                console.log("video:play");
+                                this.videoStarted = true;
+                                this.videoPlaying = true;
+                                this.videoStoped = false;
+                            });
+                            this.videoElement.addEventListener("pause", () => {
+                                console.log("video:pause");
+                                this.videoPlaying = false;
+                                this.videoStoped = true;
+                                if (!this.inViewport) {
+                                    this.videoWasStopedWhenSticky = true;
+                                }
+                            });
+                            this.eventListenerInitialized = true;
+                        }
+                    },
+                    init: function () {
+                        this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
+                        if(this.videoElement) {
+                            this.setupVideoEventListeners();
+                        } else {
+                            console.log("No video element found in sticky player.");
+                            const self = this; // Save a reference to the Alpine instance
+                            const observer = new MutationObserver(function() {
+                                console.log("MutationObserver: Mutation observed in sticky player.");
+                                
+                                // Re-check for the video element
+                                self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
+                                if (self.videoElement) {
+                                    console.log(self.videoElement)
+                                    self.setupVideoEventListeners();
+                                    observer.disconnect(); // Stop observing after the video is found
+                                }
+                            });
+
+                            observer.observe(this.$refs.videoElementWrapper, {
+                                subtree: true,
+                                childList: true
+                            });
+                        }
+                        
+                    },
+                }
+            }               
+        </script>
+    
+    </div>

package/dist/views_static/components/label/label.hbs

@@ -2,8 +2,8 @@
     class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading{{#if _css}} {{_css}}{{/if}} 
         {{inline-switch
             _type
-            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video","audio"]'
-            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia"]'
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","hessen-am-abend","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video","audio"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia"]'
         }}'
 >
     {{_text}}

package/dist/views_static/components/mediaplayer/mediaPlayer_stickyWrapper.hbs

@@ -0,0 +1,82 @@
+
+    <div x-data="stickyPlayer" x-init="init()" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.15="inViewport = false" x-intersect:enter.threshold.15="inViewport = true; videoWasStopedWhenSticky = false">
+        <div x-ref="videoElementWrapper"
+            class="" 
+            :class="{ 'ar-16-9 w-96 fixed right-12 bottom-12 z-300 ': shouldVideoBeFixed() }">
+            {{> @partial-block }} 	
+        </div>
+        	<div  class="absolute hidden bg-white -bottom-20 -right-80">
+        shouldVideoBeFixed: <span x-text="shouldVideoBeFixed()"></span><br>
+		inViewport: <span x-text="inViewport"></span><br>
+		videoStarted: <span x-text="videoStarted"></span><br>
+		videoStoped: <span x-text="videoStoped"></span><br>
+		videoPlaying: <span x-text="videoPlaying"></span><br>
+		videoWasStopedWhenSticky: <span x-text="videoWasStopedWhenSticky"></span><br>
+       
+
+	</div>
+        <script>
+            var stickyPlayer = () => {
+                return {
+                    eventListenerInitialized: false,
+                    inViewport: true, 
+                    videoStarted: false,
+                    videoStoped: true,
+                    videoPlaying: false,
+                    videoWasStopedWhenSticky: false,
+                    videoElement: null,
+                    shouldVideoBeFixed: function () {
+                        return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
+                        //return !this.inViewport;
+                    },
+                    setupVideoEventListeners: function () {
+                        console.log("setupVideoEventListeners");
+                        if(!this.eventListenerInitialized) {                          
+                            this.videoElement.addEventListener("play", () => {
+                                console.log("video:play");
+                                this.videoStarted = true;
+                                this.videoPlaying = true;
+                                this.videoStoped = false;
+                            });
+                            this.videoElement.addEventListener("pause", () => {
+                                console.log("video:pause");
+                                this.videoPlaying = false;
+                                this.videoStoped = true;
+                                if (!this.inViewport) {
+                                    this.videoWasStopedWhenSticky = true;
+                                }
+                            });
+                            this.eventListenerInitialized = true;
+                        }
+                    },
+                    init: function () {
+                        this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
+                        if(this.videoElement) {
+                            this.setupVideoEventListeners();
+                        } else {
+                            console.log("No video element found in sticky player.");
+                            const self = this; // Save a reference to the Alpine instance
+                            const observer = new MutationObserver(function() {
+                                console.log("MutationObserver: Mutation observed in sticky player.");
+                                
+                                // Re-check for the video element
+                                self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
+                                if (self.videoElement) {
+                                    console.log(self.videoElement)
+                                    self.setupVideoEventListeners();
+                                    observer.disconnect(); // Stop observing after the video is found
+                                }
+                            });
+
+                            observer.observe(this.$refs.videoElementWrapper, {
+                                subtree: true,
+                                childList: true
+                            });
+                        }
+                        
+                    },
+                }
+            }               
+        </script>
+    
+    </div>

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.114.62",
+  "version": "1.114.64",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/brand/_default/conf/locatags.json

@@ -65,6 +65,7 @@
     "label_gallery": "Bildergalerie",
     "label_glosse": "Glosse",
     "label_hessen-am-morgen": "Hessen am Morgen",
+    "label_hessen-am-abend": "Hessen am Abend",
     "label_how_to": "How To",
     "label_infografik": "Infografik",
     "label_interaktiv": "Interaktiv",

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",
@@ -176,8 +177,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -65,6 +65,7 @@
 	"label_gallery": "Bildergalerie",
 	"label_glosse": "Glosse",
 	"label_hessen-am-morgen": "Hessen am Morgen",
+	"label_hessen-am-abend": "Hessen am Abend",
 	"label_how_to": "How To",
 	"label_infografik": "Infografik",
 	"label_interaktiv": "Interaktiv",

package/src/stories/views/components/label/label.hbs

@@ -2,8 +2,8 @@
     class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading{{#if _css}} {{_css}}{{/if}} 
         {{inline-switch
             _type
-            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video","audio"]'
-            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia"]'
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","hessen-am-abend","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video","audio"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia"]'
         }}'
 >
     {{_text}}

package/src/stories/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs

@@ -0,0 +1,82 @@
+
+    <div x-data="stickyPlayer" x-init="init()" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.15="inViewport = false" x-intersect:enter.threshold.15="inViewport = true; videoWasStopedWhenSticky = false">
+        <div x-ref="videoElementWrapper"
+            class="" 
+            :class="{ 'ar-16-9 w-96 fixed right-12 bottom-12 z-300 ': shouldVideoBeFixed() }">
+            {{> @partial-block }} 	
+        </div>
+        	<div  class="absolute hidden bg-white -bottom-20 -right-80">
+        shouldVideoBeFixed: <span x-text="shouldVideoBeFixed()"></span><br>
+		inViewport: <span x-text="inViewport"></span><br>
+		videoStarted: <span x-text="videoStarted"></span><br>
+		videoStoped: <span x-text="videoStoped"></span><br>
+		videoPlaying: <span x-text="videoPlaying"></span><br>
+		videoWasStopedWhenSticky: <span x-text="videoWasStopedWhenSticky"></span><br>
+       
+
+	</div>
+        <script>
+            var stickyPlayer = () => {
+                return {
+                    eventListenerInitialized: false,
+                    inViewport: true, 
+                    videoStarted: false,
+                    videoStoped: true,
+                    videoPlaying: false,
+                    videoWasStopedWhenSticky: false,
+                    videoElement: null,
+                    shouldVideoBeFixed: function () {
+                        return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
+                        //return !this.inViewport;
+                    },
+                    setupVideoEventListeners: function () {
+                        console.log("setupVideoEventListeners");
+                        if(!this.eventListenerInitialized) {                          
+                            this.videoElement.addEventListener("play", () => {
+                                console.log("video:play");
+                                this.videoStarted = true;
+                                this.videoPlaying = true;
+                                this.videoStoped = false;
+                            });
+                            this.videoElement.addEventListener("pause", () => {
+                                console.log("video:pause");
+                                this.videoPlaying = false;
+                                this.videoStoped = true;
+                                if (!this.inViewport) {
+                                    this.videoWasStopedWhenSticky = true;
+                                }
+                            });
+                            this.eventListenerInitialized = true;
+                        }
+                    },
+                    init: function () {
+                        this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
+                        if(this.videoElement) {
+                            this.setupVideoEventListeners();
+                        } else {
+                            console.log("No video element found in sticky player.");
+                            const self = this; // Save a reference to the Alpine instance
+                            const observer = new MutationObserver(function() {
+                                console.log("MutationObserver: Mutation observed in sticky player.");
+                                
+                                // Re-check for the video element
+                                self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
+                                if (self.videoElement) {
+                                    console.log(self.videoElement)
+                                    self.setupVideoEventListeners();
+                                    observer.disconnect(); // Stop observing after the video is found
+                                }
+                            });
+
+                            observer.observe(this.$refs.videoElementWrapper, {
+                                subtree: true,
+                                childList: true
+                            });
+                        }
+                        
+                    },
+                }
+            }               
+        </script>
+    
+    </div>

package/src/stories/views/components/mediaplayer/mediaplayer.stories.js

@@ -8,11 +8,22 @@ const hbsTemplates = []
 hbsTemplates['mediaplayer'] = handlebars.compile(`
     {{> components/mediaplayer/media_player}}  
   `)
-
+hbsTemplates['stickyMediaplayer'] = handlebars.compile(` 
+    <div class="w-135">  
+    {{#> components/mediaplayer/mediaPlayer_stickyWrapper}}
+        {{> components/mediaplayer/media_player}}
+    {{/components/mediaplayer/mediaPlayer_stickyWrapper}}
+    </div>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>`)
 const Template = (args) => {
     return hbsTemplates['mediaplayer']({ ...args })
 }
-
+const Template2 = (args) => {
+    return hbsTemplates['stickyMediaplayer']({ ...args })
+}
 const snapshotTemplate = (args) => {
     return getSnapshotsTemplate({ hbsTemplates, args })
 }
@@ -43,7 +54,18 @@ export default {
         chromatic: { disableSnapshot: true }
     },
 }
-
+export const StickyVideoplayer = {
+    render: Template2.bind({}),
+    name: 'StickyVideoplayer',
+    decorators: [
+        (Story) => {
+            return `<div class="flex flex-row pt-5">
+                         ${Story()} 
+                     </div>`
+        },
+    ],
+    args: snapshotsJson.video.args,
+}
 export const Videoplayer = {
     render: Template.bind({}),
     name: 'Videoplayer',