calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

o2buvioma: Autoplay mobile feed videos muted when they snap into view, with a session mute toggle and tap to pause

Browse Source
This commit is contained in:
calcazar
2026-10-20 10:22:39 -06:00
parent 6af225afa5
commit e37ec780a9
5 changed files with 254 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/mobile.css
+26
View File
@@ -73,6 +73,32 @@
.slide-pending { display: grid; place-items: center; color: var(--ink-2); font-size: 14px; }
.slide-play { z-index: 4; }
.slide-dur { top: 128px; right: 16px; z-index: 4; }
/* Autoplay: a small frosted sound toggle on the video; a tap on the video pauses or resumes it. */
.slide-video[data-autoplay="true"] .slide-art { cursor: pointer; }
.slide-mute {
position: absolute;
top: calc(72px + env(safe-area-inset-top, 0px));
right: 16px;
z-index: 4;
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border: 0;
border-radius: 12px;
appearance: none;
color: var(--on-media);
background: var(--media-glass);
-webkit-backdrop-filter: blur(16px) saturate(1.6);
backdrop-filter: blur(16px) saturate(1.6);
box-shadow: inset 0 0 0 1px var(--on-media-line);
cursor: pointer;
transition: transform .2s var(--ease);
}
.slide-mute svg { width: 18px; height: 18px; }
.slide-mute:active { transform: scale(.92); }
/* Several media items: a sideways snap track; each pane is one full-slide item. */
.slide-track {