DONE: enable sound by default on display tv, disable build images when pushing to main branch
This commit is contained in:
@@ -2,8 +2,8 @@ name: Build Docker Image
|
|||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
tags:
|
tags:
|
||||||
- "v*"
|
- "v*"
|
||||||
|
|
||||||
|
|||||||
@@ -76,22 +76,41 @@ export default function AdCarousel({ tenantCode }) {
|
|||||||
const video = videoRef.current;
|
const video = videoRef.current;
|
||||||
if (!video || currentAd?.mediaType !== 'VIDEO') return undefined;
|
if (!video || currentAd?.mediaType !== 'VIDEO') return undefined;
|
||||||
|
|
||||||
|
let removeUnmuteListener = () => {};
|
||||||
|
|
||||||
const onEnded = () => goNext();
|
const onEnded = () => goNext();
|
||||||
|
const scheduleFallbackAdvance = () => {
|
||||||
|
clearTimer();
|
||||||
|
const durationMs = Math.max(5, Number(currentAd.durationSeconds) || 15) * 1000;
|
||||||
|
timerRef.current = setTimeout(goNext, durationMs);
|
||||||
|
};
|
||||||
|
|
||||||
video.addEventListener('ended', onEnded);
|
video.addEventListener('ended', onEnded);
|
||||||
video.muted = true;
|
video.muted = false;
|
||||||
video.playsInline = true;
|
video.playsInline = true;
|
||||||
|
|
||||||
const playPromise = video.play();
|
const playPromise = video.play();
|
||||||
if (playPromise?.catch) {
|
if (playPromise?.catch) {
|
||||||
playPromise.catch(() => {
|
playPromise.catch(() => {
|
||||||
// Autoplay blocked — advance after durationSeconds fallback
|
// Unmuted autoplay blocked — keep video playing muted, then unmute on gesture.
|
||||||
clearTimer();
|
video.muted = true;
|
||||||
const durationMs = Math.max(5, Number(currentAd.durationSeconds) || 15) * 1000;
|
const mutedPlay = video.play();
|
||||||
timerRef.current = setTimeout(goNext, durationMs);
|
if (mutedPlay?.catch) {
|
||||||
|
mutedPlay.catch(scheduleFallbackAdvance);
|
||||||
|
}
|
||||||
|
|
||||||
|
const unmute = () => {
|
||||||
|
video.muted = false;
|
||||||
|
video.play()?.catch(() => {});
|
||||||
|
};
|
||||||
|
window.addEventListener('pointerdown', unmute, { once: true });
|
||||||
|
removeUnmuteListener = () => window.removeEventListener('pointerdown', unmute);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
video.removeEventListener('ended', onEnded);
|
video.removeEventListener('ended', onEnded);
|
||||||
|
removeUnmuteListener();
|
||||||
};
|
};
|
||||||
}, [currentAd, goNext, clearTimer]);
|
}, [currentAd, goNext, clearTimer]);
|
||||||
|
|
||||||
@@ -127,7 +146,6 @@ export default function AdCarousel({ tenantCode }) {
|
|||||||
ref={videoRef}
|
ref={videoRef}
|
||||||
className="branch-display__ad-media"
|
className="branch-display__ad-media"
|
||||||
src={src}
|
src={src}
|
||||||
muted
|
|
||||||
playsInline
|
playsInline
|
||||||
autoPlay
|
autoPlay
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -32,23 +32,6 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.branch-display__sound-enable {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.75rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
z-index: 20;
|
|
||||||
border: 1px solid var(--bd-accent-deep);
|
|
||||||
background: linear-gradient(180deg, var(--bd-accent-bright) 0%, var(--bd-accent) 100%);
|
|
||||||
color: #1a2e14;
|
|
||||||
border-radius: 999px;
|
|
||||||
padding: 0.45rem 1rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 2px 12px rgba(240, 208, 96, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.branch-display__header {
|
.branch-display__header {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -29,7 +29,6 @@ export default function BranchDisplayPage() {
|
|||||||
const [goldUpdatedAt, setGoldUpdatedAt] = useState(null);
|
const [goldUpdatedAt, setGoldUpdatedAt] = useState(null);
|
||||||
const [goldError, setGoldError] = useState(null);
|
const [goldError, setGoldError] = useState(null);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
const [soundReady, setSoundReady] = useState(false);
|
|
||||||
const goldTableWrapRef = useRef(null);
|
const goldTableWrapRef = useRef(null);
|
||||||
const previousServingRef = useRef(null);
|
const previousServingRef = useRef(null);
|
||||||
|
|
||||||
@@ -192,29 +191,7 @@ export default function BranchDisplayPage() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="branch-display" onClick={unlockQueueCallSound}>
|
||||||
className="branch-display"
|
|
||||||
onClick={() => {
|
|
||||||
if (!soundReady) {
|
|
||||||
unlockQueueCallSound();
|
|
||||||
setSoundReady(true);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{!soundReady ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="branch-display__sound-enable"
|
|
||||||
onClick={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
unlockQueueCallSound();
|
|
||||||
setSoundReady(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Enable call sound
|
|
||||||
</button>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<header className="branch-display__header">
|
<header className="branch-display__header">
|
||||||
<div className="branch-display__brand">
|
<div className="branch-display__brand">
|
||||||
<img
|
<img
|
||||||
|
|||||||
Reference in New Issue
Block a user