diff --git a/.gitea/workflows/build.yml b/.gitea/workflows/build.yml index affa413..b5340fa 100644 --- a/.gitea/workflows/build.yml +++ b/.gitea/workflows/build.yml @@ -2,8 +2,8 @@ name: Build Docker Image on: push: - branches: - - main + # branches: + # - main tags: - "v*" diff --git a/fe/web/teller-app/src/pages/BranchDisplayPage/AdCarousel.jsx b/fe/web/teller-app/src/pages/BranchDisplayPage/AdCarousel.jsx index be8ee24..64a7101 100644 --- a/fe/web/teller-app/src/pages/BranchDisplayPage/AdCarousel.jsx +++ b/fe/web/teller-app/src/pages/BranchDisplayPage/AdCarousel.jsx @@ -76,22 +76,41 @@ export default function AdCarousel({ tenantCode }) { const video = videoRef.current; if (!video || currentAd?.mediaType !== 'VIDEO') return undefined; + let removeUnmuteListener = () => {}; + 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.muted = true; + video.muted = false; video.playsInline = true; + const playPromise = video.play(); if (playPromise?.catch) { playPromise.catch(() => { - // Autoplay blocked — advance after durationSeconds fallback - clearTimer(); - const durationMs = Math.max(5, Number(currentAd.durationSeconds) || 15) * 1000; - timerRef.current = setTimeout(goNext, durationMs); + // Unmuted autoplay blocked — keep video playing muted, then unmute on gesture. + video.muted = true; + const mutedPlay = video.play(); + 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 () => { video.removeEventListener('ended', onEnded); + removeUnmuteListener(); }; }, [currentAd, goNext, clearTimer]); @@ -127,7 +146,6 @@ export default function AdCarousel({ tenantCode }) { ref={videoRef} className="branch-display__ad-media" src={src} - muted playsInline autoPlay /> diff --git a/fe/web/teller-app/src/pages/BranchDisplayPage/BranchDisplayPage.css b/fe/web/teller-app/src/pages/BranchDisplayPage/BranchDisplayPage.css index 44aa694..f1e3f79 100644 --- a/fe/web/teller-app/src/pages/BranchDisplayPage/BranchDisplayPage.css +++ b/fe/web/teller-app/src/pages/BranchDisplayPage/BranchDisplayPage.css @@ -32,23 +32,6 @@ 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 { margin: 0; display: flex; diff --git a/fe/web/teller-app/src/pages/BranchDisplayPage/BranchDisplayPage.jsx b/fe/web/teller-app/src/pages/BranchDisplayPage/BranchDisplayPage.jsx index 44e7b0d..26d0849 100644 --- a/fe/web/teller-app/src/pages/BranchDisplayPage/BranchDisplayPage.jsx +++ b/fe/web/teller-app/src/pages/BranchDisplayPage/BranchDisplayPage.jsx @@ -29,7 +29,6 @@ export default function BranchDisplayPage() { const [goldUpdatedAt, setGoldUpdatedAt] = useState(null); const [goldError, setGoldError] = useState(null); const [error, setError] = useState(null); - const [soundReady, setSoundReady] = useState(false); const goldTableWrapRef = useRef(null); const previousServingRef = useRef(null); @@ -192,29 +191,7 @@ export default function BranchDisplayPage() { ); return ( -