hr-design-system-handlebars 1.114.67 → 1.114.69

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v1.114.69 (Tue Jan 21 2025)
+
+#### 🐛 Bug Fix
+
+- Enhance media player sticky wrapper positioning based on subnavigation visibility [#1218](https://github.com/mumprod/hr-design-system-handlebars/pull/1218) ([@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.68 (Tue Jan 21 2025)
+
+#### 🐛 Bug Fix
+
+- DPE-1087 - Ticker: Livestreams ohne Unterbrechung (Enhancements) [#1217](https://github.com/mumprod/hr-design-system-handlebars/pull/1217) ([@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.67 (Mon Jan 20 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1136,27 +1136,18 @@ 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;
 }
@@ -1188,9 +1179,6 @@ article #commentList {
 .right-11 {
   right: 2.75rem;
 }
-.right-12 {
-  right: 3rem;
-}
 .right-4 {
   right: 1rem;
 }
@@ -1218,6 +1206,24 @@ article #commentList {
 .top-10 {
   top: 2.5rem;
 }
+.top-14 {
+  top: 3.5rem;
+}
+.top-16 {
+  top: 4rem;
+}
+.top-20 {
+  top: 5rem;
+}
+.top-31 {
+  top: 7.75rem;
+}
+.top-4 {
+  top: 1rem;
+}
+.top-40 {
+  top: 10rem;
+}
 .top-8 {
   top: 2rem;
 }
@@ -1794,6 +1800,9 @@ article #commentList {
 .w-0 {
   width: 0px;
 }
+.w-1\/2 {
+  width: 50%;
+}
 .w-10 {
   width: 2.5rem;
 }
@@ -1860,9 +1869,6 @@ article #commentList {
 .w-9\.5 {
   width: 2.375rem;
 }
-.w-96 {
-  width: 24rem;
-}
 .w-\[19px\] {
   width: 19px;
 }
@@ -1929,6 +1935,9 @@ article #commentList {
 .max-w-3\/4 {
   max-width: 75%;
 }
+.max-w-70 {
+  max-width: 17.5rem;
+}
 .max-w-\[480px\] {
   max-width: 480px;
 }
@@ -2101,6 +2110,36 @@ article #commentList {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@keyframes fade {
+
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+.animate-fade {
+  animation: fade 1s ease 0s 1 both;
+  animation: fade var(--tw-animate-duration, 1s) var(--tw-animate-easing, ease) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, 1) var(--tw-animate-fill, both);
+}
+@keyframes fade-right {
+
+  0% {
+    opacity: 0;
+    transform: translateX(-2rem);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.animate-fade-right {
+  animation: fade-right 1s ease 0s 1 both;
+  animation: fade-right var(--tw-animate-duration, 1s) var(--tw-animate-easing, ease) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, 1) var(--tw-animate-fill, both);
+}
 .animate-none {
   animation: none;
 }
@@ -2111,7 +2150,8 @@ article #commentList {
   }
 }
 .animate-spin {
-  animation: spin 1s linear infinite;
+  animation: spin 1s linear 0s infinite none;
+  animation: spin var(--tw-animate-duration, 1s) var(--tw-animate-easing, linear) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, infinite) var(--tw-animate-fill, none);
 }
 .\!cursor-not-allowed {
   cursor: not-allowed !important;
@@ -3737,7 +3777,22 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1737404341121;
+  counter-reset: cnt1737474959465;
+}
+.animate-duration-1000 {
+  --tw-animate-duration: 1000ms;
+  animation-duration: 1000ms;
+  animation-duration: var(--tw-animate-duration);
+}
+.animate-once {
+  --tw-animate-iteration: 1;
+  animation-iteration-count: 1;
+  animation-iteration-count: var(--tw-animate-iteration);
+}
+.animate-ease-in-out {
+  --tw-animate-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-timing-function: var(--tw-animate-easing);
 }
 html { scroll-behavior: smooth; }
 .placeholder-text-xs::-webkit-input-placeholder {
@@ -4152,7 +4207,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1737404341121 1;
+  counter-increment: cnt1737474959465 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4170,7 +4225,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(cnt1737404341121);
+  content: counter(cnt1737474959465);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6929,6 +6984,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     width: 58.333333%;
   }
 
+  .sm\:w-70 {
+    width: 17.5rem;
+  }
+
   .sm\:w-\[220px\] {
     width: 220px;
   }
@@ -7223,6 +7282,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     top: 3rem;
   }
 
+  .md\:top-16 {
+    top: 4rem;
+  }
+
   .md\:top-auto {
     top: auto;
   }
@@ -7982,6 +8045,18 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     top: 3.75rem;
   }
 
+  .lg\:top-20 {
+    top: 5rem;
+  }
+
+  .lg\:top-31 {
+    top: 7.75rem;
+  }
+
+  .lg\:top-40 {
+    top: 10rem;
+  }
+
   .lg\:z-50 {
     z-index: 50;
   }
@@ -8407,6 +8482,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     filter: none;
   }
 
+  .lg\:transition-none {
+    transition-property: none;
+  }
+
   .lg\:duration-0 {
     transition-duration: 0ms;
   }

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

@@ -1,82 +1,92 @@
 
-    <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 x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
+    <div x-ref="videoElementWrapper"
+        class="transition-all lg:transition-none right-4" 
+        :class="{   'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
+                    'animate-fade animate-duration-1000 animate-ease-in-out': !shouldVideoBeFixed(),
+                    'top-14 md:top-16': $store.navIsVisible,
+                    'lg:top-31': $store.navIsVisible && !$store.subNavIsVisible,
+                    'lg:top-40': $store.navIsVisible && $store.subNavIsVisible,
+                    'top-4 lg:top-20': !$store.navIsVisible}">                   
+        {{> @partial-block }} 
+        <button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
+                :class="{'hidden': !shouldVideoBeFixed(),
+                        'flex': shouldVideoBeFixed()}">
+            <div class="flex items-center justify-center w-8 h-8 {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}}">
+                 {{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="" }}
+            </div>
+        </button>	
+    </div>
+    <script>
+        var stickyPlayer = () => {
+            return {
+                eventListenerInitialized: false,
+                inViewport: true, 
+                videoStarted: false,
+                videoStoped: true,
+                videoPlaying: false,
+                videoWasStopedWhenSticky: false,
+                videoWasStopedByUser: false,
+                videoElement: null,
 
-	</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) {
+                shouldVideoBeFixed: function () {
+                    return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
+                },
+                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 ) {
+                                if(this.videoWasStopedByUser){
+                                    this.videoWasStopedByUser = false
+                                } else {
                                     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
-                                }
-                            });
+                                }                               
+                            }
+                        });
+                        this.eventListenerInitialized = true;
+                    }
+                },
+                closeVideo: function () {
+                    this.videoElement.pause();
+                    this.videoWasStopedByUser = 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>
+                        observer.observe(this.$refs.videoElementWrapper, {
+                            subtree: true,
+                            childList: true
+                        });
+                    }
+                    
+                },
+            }
+        }               
+    </script>
+</div>

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

@@ -1,82 +1,92 @@
 
-    <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 x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
+    <div x-ref="videoElementWrapper"
+        class="transition-all lg:transition-none right-4" 
+        :class="{   'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
+                    'animate-fade animate-duration-1000 animate-ease-in-out': !shouldVideoBeFixed(),
+                    'top-14 md:top-16': $store.navIsVisible,
+                    'lg:top-31': $store.navIsVisible && !$store.subNavIsVisible,
+                    'lg:top-40': $store.navIsVisible && $store.subNavIsVisible,
+                    'top-4 lg:top-20': !$store.navIsVisible}">                   
+        {{> @partial-block }} 
+        <button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
+                :class="{'hidden': !shouldVideoBeFixed(),
+                        'flex': shouldVideoBeFixed()}">
+            <div class="flex items-center justify-center w-8 h-8 {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}}">
+                 {{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="" }}
+            </div>
+        </button>	
+    </div>
+    <script>
+        var stickyPlayer = () => {
+            return {
+                eventListenerInitialized: false,
+                inViewport: true, 
+                videoStarted: false,
+                videoStoped: true,
+                videoPlaying: false,
+                videoWasStopedWhenSticky: false,
+                videoWasStopedByUser: false,
+                videoElement: null,
 
-	</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) {
+                shouldVideoBeFixed: function () {
+                    return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
+                },
+                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 ) {
+                                if(this.videoWasStopedByUser){
+                                    this.videoWasStopedByUser = false
+                                } else {
                                     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
-                                }
-                            });
+                                }                               
+                            }
+                        });
+                        this.eventListenerInitialized = true;
+                    }
+                },
+                closeVideo: function () {
+                    this.videoElement.pause();
+                    this.videoWasStopedByUser = 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>
+                        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.67",
+  "version": "1.114.69",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",
@@ -121,6 +121,7 @@
     "checkcss": "^2.0.9",
     "dialog-polyfill": "^0.5.6",
     "storybook-addon-pseudo-states": "^4.0.2",
+    "tailwindcss-animated": "^1.1.2",
     "tailwindcss-counter": "^1.1.3"
   },
   "prettier": {

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

@@ -1,82 +1,92 @@
 
-    <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 x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
+    <div x-ref="videoElementWrapper"
+        class="transition-all lg:transition-none right-4" 
+        :class="{   'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
+                    'animate-fade animate-duration-1000 animate-ease-in-out': !shouldVideoBeFixed(),
+                    'top-14 md:top-16': $store.navIsVisible,
+                    'lg:top-31': $store.navIsVisible && !$store.subNavIsVisible,
+                    'lg:top-40': $store.navIsVisible && $store.subNavIsVisible,
+                    'top-4 lg:top-20': !$store.navIsVisible}">                   
+        {{> @partial-block }} 
+        <button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
+                :class="{'hidden': !shouldVideoBeFixed(),
+                        'flex': shouldVideoBeFixed()}">
+            <div class="flex items-center justify-center w-8 h-8 {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}}">
+                 {{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="" }}
+            </div>
+        </button>	
+    </div>
+    <script>
+        var stickyPlayer = () => {
+            return {
+                eventListenerInitialized: false,
+                inViewport: true, 
+                videoStarted: false,
+                videoStoped: true,
+                videoPlaying: false,
+                videoWasStopedWhenSticky: false,
+                videoWasStopedByUser: false,
+                videoElement: null,
 
-	</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) {
+                shouldVideoBeFixed: function () {
+                    return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
+                },
+                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 ) {
+                                if(this.videoWasStopedByUser){
+                                    this.videoWasStopedByUser = false
+                                } else {
                                     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
-                                }
-                            });
+                                }                               
+                            }
+                        });
+                        this.eventListenerInitialized = true;
+                    }
+                },
+                closeVideo: function () {
+                    this.videoElement.pause();
+                    this.videoWasStopedByUser = 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>
+                        observer.observe(this.$refs.videoElementWrapper, {
+                            subtree: true,
+                            childList: true
+                        });
+                    }
+                    
+                },
+            }
+        }               
+    </script>
+</div>

package/tailwind.config.js

@@ -154,6 +154,7 @@ module.exports = {
                 '22': '5.5rem',
                 '26': '6.5rem',
                 '30': '7.5rem',
+                '31': '7.75rem',
                 '35': '8.75rem',
                 '37': '9.25rem',
                 '-37': '-9.25rem',
@@ -452,5 +453,6 @@ module.exports = {
             addUtilities(utilities, variants('borderColor'))
         },
         require('tailwindcss-counter')(),
+        require('tailwindcss-animated')
     ],
 }