grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
feat: add swipe left/right for story navigation on mobile
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+35
-1
+35
-1
app/lib/components/organisms/StoryViewer.svelte
+35
-1
app/lib/components/organisms/StoryViewer.svelte
···
185
185
toggleFav()
186
186
}
187
187
188
+
let swipeStartX = 0
189
+
let swipeStartY = 0
190
+
let swiping = false
191
+
192
+
function handlePointerDown(e: PointerEvent) {
193
+
if ((e.target as HTMLElement).closest('.story-bottom-bar, .contained-sheet-wrapper, dialog')) return
194
+
swipeStartX = e.clientX
195
+
swipeStartY = e.clientY
196
+
swiping = true
197
+
}
198
+
199
+
function handlePointerMove(e: PointerEvent) {
200
+
if (!swiping) return
201
+
const dx = e.clientX - swipeStartX
202
+
const dy = e.clientY - swipeStartY
203
+
// If vertical movement dominates, cancel swipe detection
204
+
if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 10) {
205
+
swiping = false
206
+
}
207
+
}
208
+
209
+
function handlePointerUp(e: PointerEvent) {
210
+
if (!swiping) return
211
+
swiping = false
212
+
const dx = e.clientX - swipeStartX
213
+
if (Math.abs(dx) > 50) {
214
+
if (dx < 0) next()
215
+
else prev()
216
+
// Prevent the tap handler from also firing
217
+
lastTapTime = 0
218
+
e.preventDefault()
219
+
}
220
+
}
221
+
188
222
let lastTapTime = 0
189
223
function handleTap(e: MouseEvent) {
190
224
if ((e.target as HTMLElement).closest('dialog')) return
···
295
329
296
330
<div bind:this={wrapper}>
297
331
<div class="story-overlay">
298
-
<div class="story-container" onclick={handleTap} onkeydown={handleKeydown} role="button" tabindex="0">
332
+
<div class="story-container" onclick={handleTap} onkeydown={handleKeydown} onpointerdown={handlePointerDown} onpointermove={handlePointerMove} onpointerup={handlePointerUp} role="button" tabindex="0">
299
333
<!-- Progress bars -->
300
334
<div class="progress-bars">
301
335
{#each Array(totalStories) as _, i}