Skip to content

Commit d2d3bb7

Browse files
boehlerlukasboehlerlukas
authored
Merge pull request #49 from GleapSDK/tooltip-mute-fix
Product tour mute button fix
2 parents 2cbfc60 + 9f9e8ea commit d2d3bb7

File tree

7 files changed

+60
-42
lines changed

7 files changed

+60
-42
lines changed

‎build/cjs/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/esm/index.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "gleap",
3-
"version": "13.8.5",
3+
"version": "13.8.6",
44
"main": "build/cjs/index.js",
55
"module": "build/esm/index.mjs",
66
"exports": {

‎published/13.8.6/index.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎published/latest/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/GleapProductTours.js

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,9 @@ export default class GleapProductTours {
102102
if (!gleapTourPopover.contains(evnt.target)) {
103103
const stepIndex = gleapTourObj.getActiveIndex();
104104
const step = steps[stepIndex];
105-
106105
const element = gleapTourObj.getActiveElement();
107-
if ((element && element.tagName === 'INPUT') || step.mode === "INPUT") {
106+
107+
if ((element && element.tagName === 'INPUT') || step.mode === "INPUT" || evnt?.target?.id.includes("tooltip-svg")) {
108108
// Prevent.
109109
} else {
110110
gleapTourObj.moveNext();
@@ -171,6 +171,7 @@ export default class GleapProductTours {
171171
}
172172

173173
const playingClass = 'gleap-tour-video--playing';
174+
const playPauseContainer = document.querySelector('.gleap-tour-video-playpause');
174175

175176
const videoElement = document.querySelector('.gleap-tour-video-obj');
176177
if (videoElement) {
@@ -186,36 +187,43 @@ export default class GleapProductTours {
186187
}
187188

188189
videoElement.addEventListener('ended', function () {
189-
playButtonElem.innerHTML = loadIcon("replay");
190+
playPauseContainer.innerHTML = loadIcon("replay");
191+
playPauseContainer.classList.add("gleap-tour-video-svg--fullscreen")
190192
videoContainer.classList.remove(playingClass);
191193
});
192194

193-
// Video player controller.
194-
const playButtonElem = document.querySelector('.gleap-tour-video-playpause');
195-
if (playButtonElem) {
196-
playButtonElem.addEventListener('click', () => {
197-
if (videoElement.muted) {
198-
self.unmuted = true;
199-
200-
videoElement.pause();
201-
videoElement.currentTime = 0;
202-
videoElement.muted = false;
203-
videoElement.play();
204-
205-
playButtonElem.innerHTML = loadIcon("mute");
206-
videoContainer.classList.add(playingClass);
207-
} else if (videoElement.paused) {
208-
videoElement.muted = false;
209-
videoElement.play();
210-
211-
playButtonElem.innerHTML = loadIcon("mute");
212-
videoContainer.classList.add(playingClass);
213-
} else {
214-
videoElement.pause();
215-
playButtonElem.innerHTML = loadIcon("unmute");
216-
videoContainer.classList.remove(playingClass);
217-
}
218-
});
195+
videoElement.addEventListener('play', function () {
196+
console.log("Video started");
197+
playPauseContainer.classList.remove("gleap-tour-video-svg--fullscreen")
198+
});
199+
200+
if (playPauseContainer) {
201+
playPauseContainer.addEventListener('click', () => clickVideo());
202+
}
203+
204+
const clickVideo = () => {
205+
if (videoElement.muted) {
206+
self.unmuted = true;
207+
208+
videoElement.pause();
209+
videoElement.currentTime = 0;
210+
videoElement.muted = false;
211+
videoElement.play();
212+
213+
playPauseContainer.innerHTML = loadIcon("mute");
214+
videoContainer.classList.add(playingClass);
215+
} else if (videoElement.paused) {
216+
videoElement.muted = false;
217+
videoElement.play();
218+
219+
playPauseContainer.innerHTML = loadIcon("mute");
220+
videoContainer.classList.add(playingClass);
221+
} else {
222+
videoElement.pause();
223+
playPauseContainer.innerHTML = loadIcon("unmute");
224+
videoContainer.classList.remove(playingClass);
225+
226+
}
219227
}
220228
}
221229
}

‎src/UI.js

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1828,6 +1828,15 @@ export const injectStyledCSS = (
18281828
max-width: 100%;
18291829
}
18301830
1831+
.gleap-tour-video-svg--fullscreen {
1832+
width: 100% !important;
1833+
height: 100% !important;
1834+
top: 0px !important;
1835+
left: 0px !important;
1836+
right: 0px !important;
1837+
bottom: 0px !important;
1838+
}
1839+
18311840
.gleap-tour-video--playing .gleap-tour-video-playpause {
18321841
opacity: 0;
18331842
}
@@ -1992,11 +2001,11 @@ export const injectStyledCSS = (
19922001
19932002
.gleap-tour-video-playpause {
19942003
position: absolute;
1995-
top: 0px;
1996-
left: 0px;
1997-
right: 0px;
1998-
width: 100%;
1999-
height: 100%;
2004+
bottom: 8px;
2005+
left: 8px;
2006+
width: 32px;
2007+
height: 32px;
2008+
padding: 4px;
20002009
background-color: rgba(0,0,0,0.5);
20012010
display: flex;
20022011
align-items: center;
@@ -2259,16 +2268,16 @@ export const loadIcon = function (name, color) {
22592268
}
22602269

22612270
if (name === "unmute") {
2262-
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>`;
2271+
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>`;
22632272
}
22642273

22652274
if (name === "mute") {
2266-
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>`;
2275+
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>`;
22672276
}
22682277

22692278
if (name === "replay") {
2270-
return `<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
2271-
<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" />
2279+
return `<svg id="tooltip-svg-replay" width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
2280+
<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" />
22722281
</svg>`;
22732282
}
22742283

0 commit comments

Comments
 (0)