self-hosted/algora-tv
1
0
Fork 0
mirror of https://github.com/algora-io/tv.git synced 2025-10-30 23:07:56 +02:00
Code Releases Activity

Unmute overlay (#125)

Browse Source 
* show unmute overlay when autoplay is denied

* hide mute overlay when volume slider is used
This commit is contained in:
ty
2024-12-13 10:11:16 -05:00
committed by GitHub
parent f2db19a1d4
commit 2167e485c5
2 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/css/app.css
View File

@@ -169,3 +169,12 @@
text-decoration: none;
cursor: pointer;
}
#video-player.autoplay-muted::before,
#embed-player.autoplay-muted::before,
#home-player.autoplay-muted::before {
/* https://vidstack.io/icons/?lib=react&icon=mute */
content: url('data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M17.5091%2024.6594C17.5091%2025.2066%2016.8864%2025.5208%2016.4463%2025.1956L9.44847%2020.0252C9.42553%2020.0083%209.39776%2019.9991%209.36923%2019.9991H4.66667C4.29848%2019.9991%204%2019.7006%204%2019.3325V12.6658C4%2012.2976%204.29848%2011.9991%204.66667%2011.9991H9.37115C9.39967%2011.9991%209.42745%2011.99%209.45039%2011.973L16.4463%206.8036C16.8863%206.47842%2017.5091%206.79259%2017.5091%207.33977L17.5091%2024.6594Z%22%20fill%3D%22currentColor%22%20%2F%3E%20%3Cpath%20d%3D%22M28.8621%2013.6422C29.1225%2013.3818%2029.1225%2012.9597%2028.8621%2012.6994L27.9193%2011.7566C27.659%2011.4962%2027.2368%2011.4962%2026.9765%2011.7566L24.7134%2014.0197C24.6613%2014.0717%2024.5769%2014.0717%2024.5248%2014.0197L22.262%2011.7568C22.0016%2011.4964%2021.5795%2011.4964%2021.3191%2011.7568L20.3763%2012.6996C20.116%2012.9599%2020.116%2013.382%2020.3763%2013.6424L22.6392%2015.9053C22.6913%2015.9573%2022.6913%2016.0418%2022.6392%2016.0938L20.3768%2018.3562C20.1165%2018.6166%2020.1165%2019.0387%2020.3768%2019.299L21.3196%2020.2419C21.58%2020.5022%2022.0021%2020.5022%2022.2624%2020.2418L24.5248%2017.9795C24.5769%2017.9274%2024.6613%2017.9274%2024.7134%2017.9795L26.976%2020.2421C27.2363%2020.5024%2027.6585%2020.5024%2027.9188%2020.2421L28.8616%2019.2992C29.122%2019.0389%2029.122%2018.6168%2028.8616%2018.3564L26.599%2016.0938C26.547%2016.0418%2026.547%2015.9573%2026.599%2015.9053L28.8621%2013.6422Z%22%20fill%3D%22currentColor%22%20%2F%3E%3C%2Fsvg%3E');
transform: scale(4);
@apply invert absolute inset-0 flex justify-center items-center z-10;
}

35
assets/js/app.ts
View File

@@ -165,11 +165,36 @@ const Hooks = {
layout: new VidstackPlayerLayout(),
});
let unmuteTarget = document.getElementById(this.playerId)
const tryUnmute = (event) => {
if (this.player.muted) {
event.stopPropagation()
this.player.muted = false
hideMuted()
}
}
const hideMuted = () => {
if (unmuteTarget) {
unmuteTarget.classList.remove('autoplay-muted')
unmuteTarget.removeEventListener('click', tryUnmute)
}
}
const showMuted = () => {
if (unmuteTarget) {
unmuteTarget.classList.add('autoplay-muted')
unmuteTarget.addEventListener('click', tryUnmute)
}
}
this.player.subscribe(({ autoPlayError }) => {
if (autoPlayError) {
if (autoPlayError && !this.attemptedAutoplay) {
this.player.muted = true;
this.player.play();
this.attemptedAutoplay = true;
showMuted()
}
});
@@ -266,6 +291,14 @@ const Hooks = {
if (this.playerId === "video-player") {
this.pushEventTo("#clipper", "video_loaded", { id: opts.id });
}
const volumeSlider = document.querySelector("media-volume-slider");
volumeSlider?.addEventListener('value-change', (event) => {
if (event.detail > 0) {
hideMuted()
}
});
};
this.handleEvent("play_video", playVideo);