Aimpress/Shumiland
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

feat(video): add mute/unmute toggle button
Some checks are pending
CI / Type Check (push) Waiting to run
Details
CI / Lint (push) Waiting to run
Details
CI / Unit Tests (push) Waiting to run
Details
Deploy / Build & Push Image (push) Waiting to run
Details
Deploy / Deploy to VPS (push) Blocked by required conditions
Details

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-11 16:35:44 +01:00
parent b628a2bfb9
commit 683f06caae
1 changed files with 42 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/components/sections/VideoSection.tsx
View file

@ -1,7 +1,7 @@
'use client'
/* eslint-disable @next/next/no-img-element */
import { useState } from 'react'
import { useRef, useState } from 'react'
import type { Media } from '@/types/globals'
const DEFAULT_MP4 = '/videos/shumiland-reels.mp4'
@ -27,9 +27,18 @@ interface VideoSectionProps {
export function VideoSection({ poster, src }: VideoSectionProps) {
const [ytPlaying, setYtPlaying] = useState(false)
const [muted, setMuted] = useState(true)
const videoRef = useRef<HTMLVideoElement>(null)
const posterUrl = getMediaUrl(poster) ?? undefined
const youtubeEmbed = src ? getYouTubeEmbedUrl(src) : null
function toggleMute() {
const video = videoRef.current
if (!video) return
video.muted = !video.muted
setMuted(video.muted)
}
// If CMS src is a YouTube URL → use click-to-play embed
if (youtubeEmbed) {
return (
@ -69,19 +78,38 @@ export function VideoSection({ poster, src }: VideoSectionProps) {
return (
<section className="bg-[#396817] py-10 lg:py-16">
<div className="mx-auto max-w-[1204px] px-8">
<video
className="w-full rounded-[20px] object-cover"
style={{ display: 'block', maxHeight: '80vh' }}
autoPlay
muted
loop
playsInline
preload="metadata"
poster={posterUrl}
>
<source src={DEFAULT_WEBM} type="video/webm" />
<source src={DEFAULT_MP4} type="video/mp4" />
</video>
<div className="relative">
<video
ref={videoRef}
className="w-full rounded-[20px] object-cover"
style={{ display: 'block', maxHeight: '80vh' }}
autoPlay
muted
loop
playsInline
preload="metadata"
poster={posterUrl}
>
<source src={DEFAULT_WEBM} type="video/webm" />
<source src={DEFAULT_MP4} type="video/mp4" />
</video>
<button
onClick={toggleMute}
aria-label={muted ? 'Увімкнути звук' : 'Вимкнути звук'}
className="absolute right-4 bottom-4 flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm transition-colors hover:bg-black/70"
>
{muted ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
<path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM17.78 9.22a.75.75 0 1 0-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06l1.72-1.72 1.72 1.72a.75.75 0 1 0 1.06-1.06L20.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-1.72 1.72-1.72-1.72Z" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
<path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM18.584 5.106a.75.75 0 0 1 1.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 0 1-1.06-1.06 8.25 8.25 0 0 0 0-11.668.75.75 0 0 1 0-1.06Z" />
<path d="M15.932 7.757a.75.75 0 0 1 1.061 0 6 6 0 0 1 0 8.486.75.75 0 0 1-1.06-1.061 4.5 4.5 0 0 0 0-6.364.75.75 0 0 1 0-1.06Z" />
</svg>
)}
</button>
</div>
</div>
</section>
)