Merge pull request #49 from GleapSDK/tooltip-mute-fix

Product tour mute button fix
GleapSDK · Jul 29, 2024 · d2d3bb7 · d2d3bb7
2 parents 2cbfc60 + 9f9e8ea
commit d2d3bb7
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 42 deletions.
diff --git a/build/cjs/index.js b/build/cjs/index.js
diff --git a/build/esm/index.mjs b/build/esm/index.mjs
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "13.8.5",
+  "version": "13.8.6",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {

diff --git a/published/13.8.6/index.js b/published/13.8.6/index.js
diff --git a/published/latest/index.js b/published/latest/index.js
diff --git a/src/GleapProductTours.js b/src/GleapProductTours.js
@@ -102,9 +102,9 @@ export default class GleapProductTours {
             if (!gleapTourPopover.contains(evnt.target)) {
                 const stepIndex = gleapTourObj.getActiveIndex();
                 const step = steps[stepIndex];
-
                 const element = gleapTourObj.getActiveElement();
-                if ((element && element.tagName === 'INPUT') || step.mode === "INPUT") {
+
+                if ((element && element.tagName === 'INPUT') || step.mode === "INPUT" || evnt?.target?.id.includes("tooltip-svg")) {
                     // Prevent.
                 } else {
                     gleapTourObj.moveNext();
@@ -171,6 +171,7 @@ export default class GleapProductTours {
                 }
 
                 const playingClass = 'gleap-tour-video--playing';
+                const playPauseContainer = document.querySelector('.gleap-tour-video-playpause');
 
                 const videoElement = document.querySelector('.gleap-tour-video-obj');
                 if (videoElement) {
@@ -186,36 +187,43 @@ export default class GleapProductTours {
                     }
 
                     videoElement.addEventListener('ended', function () {
-                        playButtonElem.innerHTML = loadIcon("replay");
+                        playPauseContainer.innerHTML = loadIcon("replay");
+                        playPauseContainer.classList.add("gleap-tour-video-svg--fullscreen")
                         videoContainer.classList.remove(playingClass);
                     });
 
-                    // Video player controller.
-                    const playButtonElem = document.querySelector('.gleap-tour-video-playpause');
-                    if (playButtonElem) {
-                        playButtonElem.addEventListener('click', () => {
-                            if (videoElement.muted) {
-                                self.unmuted = true;
-
-                                videoElement.pause();
-                                videoElement.currentTime = 0;
-                                videoElement.muted = false;
-                                videoElement.play();
-
-                                playButtonElem.innerHTML = loadIcon("mute");
-                                videoContainer.classList.add(playingClass);
-                            } else if (videoElement.paused) {
-                                videoElement.muted = false;
-                                videoElement.play();
-
-                                playButtonElem.innerHTML = loadIcon("mute");
-                                videoContainer.classList.add(playingClass);
-                            } else {
-                                videoElement.pause();
-                                playButtonElem.innerHTML = loadIcon("unmute");
-                                videoContainer.classList.remove(playingClass);
-                            }
-                        });
+                    videoElement.addEventListener('play', function () {
+                        console.log("Video started");
+                        playPauseContainer.classList.remove("gleap-tour-video-svg--fullscreen")
+                    });
+
+                    if (playPauseContainer) {
+                        playPauseContainer.addEventListener('click', () => clickVideo());
+                    }
+
+                    const clickVideo = () => {
+                        if (videoElement.muted) {
+                            self.unmuted = true;
+
+                            videoElement.pause();
+                            videoElement.currentTime = 0;
+                            videoElement.muted = false;
+                            videoElement.play();
+
+                            playPauseContainer.innerHTML = loadIcon("mute");
+                            videoContainer.classList.add(playingClass);
+                        } else if (videoElement.paused) {
+                            videoElement.muted = false;
+                            videoElement.play();
+
+                            playPauseContainer.innerHTML = loadIcon("mute");
+                            videoContainer.classList.add(playingClass);
+                        } else {
+                            videoElement.pause();
+                            playPauseContainer.innerHTML = loadIcon("unmute");
+                            videoContainer.classList.remove(playingClass);
+
+                        }
                     }
                 }
             }

diff --git a/src/UI.js b/src/UI.js
@@ -1828,6 +1828,15 @@ export const injectStyledCSS = (
       max-width: 100%;
     }
 
+    .gleap-tour-video-svg--fullscreen {
+      width: 100% !important;
+      height: 100% !important;
+      top: 0px !important;
+      left: 0px !important;
+      right: 0px !important;
+      bottom: 0px !important;
+    }
+
     .gleap-tour-video--playing .gleap-tour-video-playpause {
       opacity: 0;
     }
@@ -1992,11 +2001,11 @@ export const injectStyledCSS = (
 
     .gleap-tour-video-playpause {
       position: absolute;
-      top: 0px;
-      left: 0px;
-      right: 0px;
-      width: 100%;
-      height: 100%;
+      bottom: 8px;
+      left: 8px;
+      width: 32px;
+      height: 32px;
+      padding: 4px;
       background-color: rgba(0,0,0,0.5);
       display: flex;
       align-items: center;
@@ -2259,16 +2268,16 @@ export const loadIcon = function (name, color) {
   }
 
   if (name === "unmute") {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.1 386.2C556.7 352 576 306.3 576 256c0-60.1-27.7-113.8-70.9-149c-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C507.3 170.7 528 210.9 528 256c0 39.1-15.6 74.5-40.9 100.5L449 326.6c19-17.5 31-42.7 31-70.6c0-30.1-13.9-56.9-35.4-74.5c-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C425.1 227.6 432 241 432 256s-6.9 28.4-17.7 37.3c-1.3 1-2.4 2.2-3.4 3.4L352 250.6V64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L197.8 129.8 38.8 5.1zM352 373.3L82.9 161.3C53.8 167.4 32 193.1 32 224v64c0 35.3 28.7 64 64 64h67.8L298.7 471.9c9.4 8.4 22.9 10.4 34.4 5.3S352 460.6 352 448V373.3z"/></svg>`;
+    return `<svg id="tooltip-svg-unmute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path id="tooltip-svg-unmute-path" d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.1 386.2C556.7 352 576 306.3 576 256c0-60.1-27.7-113.8-70.9-149c-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C507.3 170.7 528 210.9 528 256c0 39.1-15.6 74.5-40.9 100.5L449 326.6c19-17.5 31-42.7 31-70.6c0-30.1-13.9-56.9-35.4-74.5c-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C425.1 227.6 432 241 432 256s-6.9 28.4-17.7 37.3c-1.3 1-2.4 2.2-3.4 3.4L352 250.6V64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L197.8 129.8 38.8 5.1zM352 373.3L82.9 161.3C53.8 167.4 32 193.1 32 224v64c0 35.3 28.7 64 64 64h67.8L298.7 471.9c9.4 8.4 22.9 10.4 34.4 5.3S352 460.6 352 448V373.3z"/></svg>`;
   }
 
   if (name === "mute") {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M533.6 32.5C598.5 85.3 640 165.8 640 256s-41.5 170.8-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"/></svg>`;
+    return `<svg id="tooltip-svg-mute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path id="tooltip-svg-mute-path" d="M533.6 32.5C598.5 85.3 640 165.8 640 256s-41.5 170.8-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"/></svg>`;
   }
 
   if (name === "replay") {
-    return `<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M48.5 224H40C26.7 224 16 213.3 16 200V72C16 62.3 21.8 53.5 30.8 49.8C39.8 46.1 50.1 48.1 57 55L98.6 96.6C186.2 10.1 327.3 10.4 414.4 97.6C501.9 185.1 501.9 326.9 414.4 414.4C326.9 501.9 185.1 501.9 97.6 414.4C85.1 401.9 85.1 381.6 97.6 369.1C110.1 356.6 130.4 356.6 142.9 369.1C205.4 431.6 306.7 431.6 369.2 369.1C431.7 306.6 431.7 205.3 369.2 142.8C307 80.6 206.5 80.3 143.9 141.8L185 183C191.9 189.9 193.9 200.2 190.2 209.2C186.5 218.2 177.7 224 168 224H48.5Z" />
+    return `<svg id="tooltip-svg-replay" width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path id="tooltip-svg-replay-path" d="M48.5 224H40C26.7 224 16 213.3 16 200V72C16 62.3 21.8 53.5 30.8 49.8C39.8 46.1 50.1 48.1 57 55L98.6 96.6C186.2 10.1 327.3 10.4 414.4 97.6C501.9 185.1 501.9 326.9 414.4 414.4C326.9 501.9 185.1 501.9 97.6 414.4C85.1 401.9 85.1 381.6 97.6 369.1C110.1 356.6 130.4 356.6 142.9 369.1C205.4 431.6 306.7 431.6 369.2 369.1C431.7 306.6 431.7 205.3 369.2 142.8C307 80.6 206.5 80.3 143.9 141.8L185 183C191.9 189.9 193.9 200.2 190.2 209.2C186.5 218.2 177.7 224 168 224H48.5Z" />
     </svg>`;
   }