/* Is the user using Safari iOS? */
var userAgent = window.navigator.userAgent;
var iOS = !!userAgent.match(/iPad/i) || !!userAgent.match(/iPhone/i) || !!userAgent.match(/iPod/i);
var webkit = !!userAgent.match(/WebKit/i);
var iOSSafari = iOS && webkit && !userAgent.match(/gsa/i) && !userAgent.match(/CriOS/i) && !userAgent.match(/FxiOS/i);

errorLogging += "userAgent: " + window.navigator.userAgent + "<br>iOS Match: " + iOS + "<br>webkit match: " + webkit + "<br>Not CriOS: " + !userAgent.match(/CriOS/i) + "<br>Not GSA: " + !userAgent.match(/gsa/i) + "<br>Not FxiOS: " + !userAgent.match(/FxiOS/i);

var pages = [
{
'handle': 'benson-linen-look-fabric-sofa-taupe',
'lang': {
'en': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/benson-linen-look-fabric-sofa-taupe_Matilda.mp3?v=1718814657',
'displayName': 'English'
},
'fr': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/benson-linen-look-fabric-sofa-taupe_Matilda_FR.mp3?v=1718815384',
'displayName': 'French'
},
'hi': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/benson-linen-look-fabric-sofa-taupe_Matilda_HI.mp3?v=1718815356',
'displayName': 'Hindi'
},
'zh': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/benson-linen-look-fabric-sofa-taupe_Matilda_ZH.mp3?v=1718815356',
'displayName': 'Chinese'
}
}
},
{
'handle': 'samsung-stainless-steel-24-dishwasher-dw80r9950us-ac',
'lang': {
'en': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/samsung-stainless-steel-24-dishwasher-dw80r9950us-ac-Clyde.mp3?v=1718298413',
'displayName': 'English'
}
}
},
{
'handle': 'tree-bookcase-green-brown',
'lang': {
'en': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/tree-bookcase-green-brown_Mimi.mp3?v=1718304693',
'displayName': 'English'
}
}
},
{
'handle': 'dallas-reclining-sofa-with-drop-down-table-mocha',
'lang': {
'en': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/dallas-reclining-sofa-with-drop-down-table-mocha_Nicole.mp3?v=1718503878',
'displayName': 'English'
},
'fr': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/dallas-reclining-sofa-with-drop-down-table-mocha_Nicole_FR.mp3?v=1718657412',
'displayName': 'French'
},
'hi': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/dallas-reclining-sofa-with-drop-down-table-mocha_Mimi_HI.mp3?v=1718658077',
'displayName': 'Hindi'
},
'zh': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/dallas-reclining-sofa-with-drop-down-table-mocha_Nicole_ZH.mp3?v=1718658258',
'displayName': 'Chinese'
}
}
},
{
'handle': 'maytag-stainless-steel-freestanding-gas-double-oven-6-cu-ft-mgt8800fz',
'lang': {
'en': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/maytag-stainless-steel-freestanding-gas-double-oven-6-cu-ft-mgt8800fz_Clyde.mp3?v=1718550471',
'displayName': 'English'
}
}
},
{
'handle': 'sealy-essentials-prodigy-medium-mattress-collection',
'lang': {
'en': {
'src': 'https://cdn.shopify.com/s/files/1/0003/9252/7936/files/sealy-essentials-prodigy-medium-mattress-collection_Matilda.mp3?v=1718551346',
'displayName': 'English'
}
}
}
]

var currentLang = 'en';
var availableLangs = '';

for (let i = 0; i < pages.length; i++) {
if (window.location.href.includes(pages[i].handle)) {
availableLangs = pages[i].lang;
if (Object.keys(availableLangs).length > 1) {

}
break;
}
}

if (availableLangs != '') {

let container = document.createElement("div");
container.innerHTML = `<div id="tmm" aria-hidden="true">
<div id="tmm-wraper">
<h2 class="gradient-text" onclick="togglePlay()">
<svg id="sparkle" viewBox="0 0 20 20" style="width: 25px;">
<path
d="M5.702 4.253a.625.625 0 0 1 1.096 0l.196.358c.207.378.517.688.895.895l.358.196a.625.625 0 0 1 0 1.097l-.358.196a2.25 2.25 0 0 0-.895.894l-.196.359a.625.625 0 0 1-1.096 0l-.196-.359a2.25 2.25 0 0 0-.895-.894l-.358-.196a.625.625 0 0 1 0-1.097l.358-.196a2.25 2.25 0 0 0 .895-.895l.196-.358Z"></path>
<path fill-rule="evenodd"
d="M12.948 7.89c-.18-1.167-1.852-1.19-2.064-.029l-.03.164a3.756 3.756 0 0 1-3.088 3.031c-1.15.189-1.173 1.833-.03 2.054l.105.02a3.824 3.824 0 0 1 3.029 3.029l.032.165c.233 1.208 1.963 1.208 2.196 0l.025-.129a3.836 3.836 0 0 1 3.077-3.045c1.184-.216 1.12-1.928-.071-2.107a3.789 3.789 0 0 1-3.18-3.154Zm-.944 6.887a5.34 5.34 0 0 1 2.542-2.647 5.305 5.305 0 0 1-2.628-2.548 5.262 5.262 0 0 1-2.488 2.508 5.329 5.329 0 0 1 2.574 2.687Z"></path>
</svg>Tell Me More<svg id="progress-bar" width="25" height="25" viewBox="0 0 250 250" class="circular-progress"
style="margin-left: 7px;">
<circle class="bg"></circle>
<circle class="fg"></circle>

style="width: 20px; margin-left: 3px;">
<path
d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm74.77 217.3l-114.45 69.14a10.78 10.78 0 01-16.32-9.31V186.87a10.78 10.78 0 0116.32-9.31l114.45 69.14a10.89 10.89 0 010 18.6z"></path>
</svg>
</svg>
</h2>

<div id="volume-control">

style="width: 20px; margin-right: 4px;">
<path
d="M157.65 192H88a8 8 0 00-8 8v112a8 8 0 008 8h69.65a16 16 0 0110.14 3.63l91.47 75a8 8 0 0012.74-6.46V119.83a8 8 0 00-12.74-6.44l-91.47 75a16 16 0 01-10.14 3.61zM352 320c9.74-19.41 16-40.81 16-64 0-23.51-6-44.4-16-64M400 368c19.48-34 32-64 32-112s-12-77.7-32-112"
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32">
</path>
</svg>
<input type="range" id="volume-slider">
</div>

<div id="lang-selector">
<label for="languages">Language: </label>

<select id="languages">
<option value="en">English</option>
<option value="fr">French</option>
<option value="hi">Hindi</option>
<option value="zh">Chinese</option>
</select>
</div>

#tmm-wraper {
overflow: hidden;
display: flex;
flex-flow: column;
align-items: flex-end;
}

#tmm h2 {
cursor: pointer;
font-size: 16px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
margin-top: 0px;
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
/* Edge, Chrome */
background-clip: text;
/* Safari, FF */
background-image: linear-gradient(to right,
#218bff,
#c084fc,
#db2777);
margin-bottom: 4px;
font-family: proxima-nova, TradeGothicLTW04-Bold, sans-serif;
}

#sparkle path {
fill: #6788fe;
}

#playPause path {
fill: #d248a6;
}

#volume-control {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 2px;
padding-right: 5px;
}

#volume-control svg {
cursor: pointer;
}

#volume-control path {
stroke: #6788fe;
cursor: pointer;
}

#volume-control path.fill {
fill: #6788fe;
}

::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #6788fe;
cursor: pointer;
}

#volume-slider {
/*max-width: 75%;*/
margin-bottom: 0px;
height: 5px;
transition: all 1s;
-webkit-appearance: none;
background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);
border-radius: 10px;
margin-top: 3px;
}

.circular-progress {
--size: 250px;
--half-size: calc(var(--size) / 2);
--stroke-width: 20px;
--radius: calc((var(--size) - var(--stroke-width)) / 2);
--circumference: calc(var(--radius) * pi * 2);
--dash: calc((0 * var(--circumference)) / 100);
margin-bottom: -2px;
/* animation: progress-animation 5s linear 0s 1 forwards; */
}

.circular-progress circle {
cx: var(--half-size);
cy: var(--half-size);
r: var(--radius);
stroke-width: var(--stroke-width);
fill: none;
stroke-linecap: round;
}

.circular-progress circle.bg {
stroke: #ddd;
}

.circular-progress circle.fg {
transform: rotate(-90deg);
transform-origin: var(--half-size) var(--half-size);
stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
transition: stroke-dasharray 0.3s linear 0s;
stroke: #5394fd;
}

#lang-selector {
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: baseline;
padding-left: 10px;
color: #585858;
/*margin-top: 2px;*/
visibility: hidden;
}

#lang-selector label {
font-weight: normal;
margin-bottom: 0px;
}

#lang-selector select {
border: none;
outline: none;
background: #f6f7f8;
border-radius: 10px;
}

@property --progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
}

@media screen and (min-width: 50px) and (max-width: 1200px) {
#tmm {
top: 105px;
}
}
</style>`;
document.getElementById("shopify-section-footer").before(container);

var myAudio = document.getElementById('myAudio');
var icon = document.getElementById("playPause");
var volumeControl = document.getElementById('volume-control');
var volumeIcon = document.querySelector('#volume-control svg');
var volumeSlider = document.getElementById('volume-slider');
var tmm = document.getElementById('tmm');
var progressBar = document.getElementById('progress-bar');
var played = false;
var volumeLevel = 50;

myAudio.volumeSlider = volumeLevel / 100;
volumeSlider.value = volumeLevel;
myAudio.volume = volumeLevel / 100;
volumeControl.dataset.volumeSlider = volumeLevel;
volumeControl.dataset.muted = 'false';

function playAudio() {
myAudio.play();
icon.innerHTML = `<path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-32 272a16 16 0 01-32 0V192a16 16 0 0132 0zm96 0a16 16 0 01-32 0V192a16 16 0 0132 0z"/>`;
if (volumeControl.dataset.muted == 'true') {
myAudio.volumeSlider = 0;
volumeSlider.value = 0;
myAudio.volume = 0;
volumeLevel = 0;
volumeControl.dataset.volumeSlider = 0;
volumeControl.dataset.muted = 'false';
setVolumeIcon();
}
}

function pauseAudio() {
myAudio.pause();
icon.innerHTML = `<path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm74.77 217.3l-114.45 69.14a10.78 10.78 0 01-16.32-9.31V186.87a10.78 10.78 0 0116.32-9.31l114.45 69.14a10.89 10.89 0 010 18.6z"></path>`;
}

function togglePlay() {
if (played == false && iOSSafari != true) {

if (Object.keys(availableLangs).length > 1) {
tmm.style.height = '75px';
document.getElementById("lang-selector").style.visibility = 'visible';
} else {
tmm.style.height = '57px';
}

played = true;
}
if (myAudio.paused) {
playAudio()
}else {
pauseAudio()
}
}

myAudio.addEventListener('ended', function(){
icon.innerHTML = `<path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm74.77 217.3l-114.45 69.14a10.78 10.78 0 01-16.32-9.31V186.87a10.78 10.78 0 0116.32-9.31l114.45 69.14a10.89 10.89 0 010 18.6z"></path>`;
tmm.style.height = '34px';
progressBar.style.setProperty('--dash', 'calc((0 * var(--circumference)) / 100)');
played = false;
});

myAudio.addEventListener('timeupdate', function() {
console.log('timeupdate triggered.' + 'current time: ' + this.currentTime + ' duration: ' + this.duration);
progressBar.style.setProperty('--dash', 'calc((' + ((this.currentTime / this.duration) * 100) + ' * var(--circumference)) / 100)');
});

function setVolumeIcon() {
if (volumeControl.dataset.muted == 'true') {
console.log('show MUTED icon');
volumeIcon.innerHTML = `<path class="fill" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M416 432L64 80"/><path class="fill" d="M224 136.92v33.8a4 4 0 001.17 2.82l24 24a4 4 0 006.83-2.82v-74.15a24.53 24.53 0 00-12.67-21.72 23.91 23.91 0 00-25.55 1.83 8.27 8.27 0 00-.66.51l-31.94 26.15a4 4 0 00-.29 5.92l17.05 17.06a4 4 0 005.37.26zM224 375.08l-78.07-63.92a32 32 0 00-20.28-7.16H64v-96h50.72a4 4 0 002.82-6.83l-24-24a4 4 0 00-2.82-1.17H56a24 24 0 00-24 24v112a24 24 0 0024 24h69.76l91.36 74.8a8.27 8.27 0 00.66.51 23.93 23.93 0 0025.85 1.69A24.49 24.49 0 00256 391.45v-50.17a4 4 0 00-1.17-2.82l-24-24a4 4 0 00-6.83 2.82zM125.82 336zM352 256c0-24.56-5.81-47.88-17.75-71.27a16 16 0 00-28.5 14.54C315.34 218.06 320 236.62 320 256q0 4-.31 8.13a8 8 0 002.32 6.25l19.66 19.67a4 4 0 006.75-2A146.89 146.89 0 00352 256zM416 256c0-51.19-13.08-83.89-34.18-120.06a16 16 0 00-27.64 16.12C373.07 184.44 384 211.83 384 256c0 23.83-3.29 42.88-9.37 60.65a8 8 0 001.9 8.26l16.77 16.76a4 4 0 006.52-1.27C410.09 315.88 416 289.91 416 256z"/><path class="fill" d="M480 256c0-74.26-20.19-121.11-50.51-168.61a16 16 0 10-27 17.22C429.82 147.38 448 189.5 448 256c0 47.45-8.9 82.12-23.59 113a4 4 0 00.77 4.55L443 391.39a4 4 0 006.4-1C470.88 348.22 480 307 480 256z"/>`;
} else if (volumeLevel == 0) {
console.log('show NO volume icon');
volumeIcon.innerHTML = `<path d="M237.65 192H168a8 8 0 00-8 8v112a8 8 0 008 8h69.65a16 16 0 0110.14 3.63l91.47 75a8 8 0 0012.74-6.46V119.83a8 8 0 00-12.74-6.44l-91.47 75a16 16 0 01-10.14 3.61z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>`;
} else if (volumeLevel < 33) {
console.log('show LOW volume icon');
volumeIcon.innerHTML = `<path d="M189.65 192H120a8 8 0 00-8 8v112a8 8 0 008 8h69.65a16 16 0 0110.14 3.63l91.47 75a8 8 0 0012.74-6.46V119.83a8 8 0 00-12.74-6.44l-91.47 75a16 16 0 01-10.14 3.61zM384 320c9.74-19.41 16-40.81 16-64 0-23.51-6-44.4-16-64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>`;
} else if (volumeLevel < 66) {
console.log('show MEDIUM volume icon');
volumeIcon.innerHTML = `<path d="M157.65 192H88a8 8 0 00-8 8v112a8 8 0 008 8h69.65a16 16 0 0110.14 3.63l91.47 75a8 8 0 0012.74-6.46V119.83a8 8 0 00-12.74-6.44l-91.47 75a16 16 0 01-10.14 3.61zM352 320c9.74-19.41 16-40.81 16-64 0-23.51-6-44.4-16-64M400 368c19.48-34 32-64 32-112s-12-77.7-32-112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>`;
} else {
console.log('show HIGH volume icon');
volumeIcon.innerHTML = `<path d="M126 192H56a8 8 0 00-8 8v112a8 8 0 008 8h69.65a15.93 15.93 0 0110.14 3.54l91.47 74.89A8 8 0 00240 392V120a8 8 0 00-12.74-6.43l-91.47 74.89A15 15 0 01126 192zM320 320c9.74-19.38 16-40.84 16-64 0-23.48-6-44.42-16-64M368 368c19.48-33.92 32-64.06 32-112s-12-77.74-32-112M416 416c30-46 48-91.43 48-160s-18-113-48-160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>`;
}
}

volumeIcon.addEventListener('click', function(){
if (volumeControl.dataset.muted == 'true') {
myAudio.volumeSlider = volumeLevel / 100;
volumeSlider.value = volumeLevel;
volumeControl.dataset.muted = 'false';
playAudio()
} else {
myAudio.volumeSlider = 0;
volumeSlider.value = 0;
volumeControl.dataset.muted = 'true';
pauseAudio()
}
console.log('mute button clicked.' + ' data-volume: ' + volumeControl.dataset.volumeSlider + ' muted: ' + volumeControl.dataset.muted);
setVolumeIcon();
});

volumeSlider.addEventListener("input", function(e) {
volumeLevel = volumeSlider.value;
volumeControl.dataset.volumeSlider = volumeLevel;
volumeControl.dataset.muted = 'false';
myAudio.volume = volumeLevel / 100;
console.log('updating volume slider.' + ' data-volume: ' + volumeControl.dataset.volumeSlider + ' muted: ' + volumeControl.dataset.muted);
setVolumeIcon();
})

document.getElementById("languages").addEventListener("change", function(e) {
if (this.value != currentLang) {
console.log('Language Updated from ' + currentLang + ' to ' + this.value);
currentLang = this.value;
pauseAudio();
myAudio.src = availableLangs[currentLang].src;
playAudio();
}
})
}
</script>