moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Autoplay videos

This commit is contained in:
Alex Gleason 2025-02-05 23:55:35 -06:00
parent 18523c4e77
commit f1beb34b39
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/features/video/index.tsx
View File

@ -145,8 +145,8 @@ const Video: React.FC<IVideo> = ({
const [currentTime, setCurrentTime] = useState(0); const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0); const [duration, setDuration] = useState(0);
const [volume, setVolume] = useState(0.5); const [volume, setVolume] = useState(0);
const [preVolume, setPreVolume] = useState(0); const [preVolume, setPreVolume] = useState(1);
const [paused, setPaused] = useState(true); const [paused, setPaused] = useState(true);
const [dragging, setDragging] = useState(false); const [dragging, setDragging] = useState(false);
const [containerWidth, setContainerWidth] = useState(width); const [containerWidth, setContainerWidth] = useState(width);
@ -154,7 +154,7 @@ const Video: React.FC<IVideo> = ({
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false);
const [volumeHovered, setVolumeHovered] = useState(false); const [volumeHovered, setVolumeHovered] = useState(false);
const [seekHovered, setSeekHovered] = useState(false); const [seekHovered, setSeekHovered] = useState(false);
const [muted, setMuted] = useState(false); const [muted, setMuted] = useState(true);
const [buffer, setBuffer] = useState(0); const [buffer, setBuffer] = useState(0);
const setDimensions = () => { const setDimensions = () => {
@ -552,6 +552,7 @@ const Video: React.FC<IVideo> = ({
src={src} src={src}
loop loop
role='button' role='button'
autoPlay
tabIndex={0} tabIndex={0}
aria-label={alt} aria-label={alt}
title={alt} title={alt}
@ -569,6 +570,7 @@ const Video: React.FC<IVideo> = ({
onLoadedData={handleLoadedData} onLoadedData={handleLoadedData}
onProgress={handleProgress} onProgress={handleProgress}
onVolumeChange={handleVolumeChange} onVolumeChange={handleVolumeChange}
muted={muted}
/> />
<div <div
@ -645,11 +647,11 @@ const Video: React.FC<IVideo> = ({
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
}} }}
/> />
<div className={clsx('absolute left-0 top-1/2 block h-1 -translate-y-1/2 rounded-md bg-accent-500', { 'bottom-[27px]': fullscreen || detailed })} style={{ width: `${volume * 100}%` }} /> <div className={clsx('absolute left-0 top-1/2 block h-1 -translate-y-1/2 rounded-md bg-accent-500', { 'bottom-[27px]': fullscreen || detailed })} style={{ width: `${muted ? 0 : volume * 100}%` }} />
<span <span
className={clsx('absolute left-0 top-1/2 z-30 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 opacity-0 shadow-[1px_2px_6px_rgba(0,0,0,0.3)] transition-opacity duration-100', { 'opacity-100': volumeHovered, 'bottom-[23px]': fullscreen || detailed })} className={clsx('absolute left-0 top-1/2 z-30 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 opacity-0 shadow-[1px_2px_6px_rgba(0,0,0,0.3)] transition-opacity duration-100', { 'opacity-100': volumeHovered, 'bottom-[23px]': fullscreen || detailed })}
tabIndex={0} tabIndex={0}
style={{ left: `${volume * 100}%` }} style={{ left: `${muted ? 0 : volume * 100}%` }}
/> />
</div> </div>