Initial Commit
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
<!-- Avatar.vue -->
|
||||
<script setup lang="ts">
|
||||
import { proxyImage } from '@/lib/proxyImage';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
src?: string | null;
|
||||
alt?: string;
|
||||
}>(),
|
||||
{
|
||||
size: 'md',
|
||||
src: null,
|
||||
alt: '',
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="avatar" :class="`avatar--${size}`">
|
||||
<img
|
||||
v-if="src"
|
||||
:src="proxyImage(src)"
|
||||
:alt="alt"
|
||||
class="avatar__img"
|
||||
referrerpolicy="no-referrer"
|
||||
loading="lazy"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.avatar {
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
background: radial-gradient(circle at 35% 30%, #24485a, var(--midwater));
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.avatar__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.avatar--sm {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
.avatar--md {
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
}
|
||||
.avatar--lg {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import type { Post } from '@/types/dredge.types';
|
||||
import PostCard from './PostCard.vue';
|
||||
|
||||
const posts = ref<Post[]>([]);
|
||||
const loading = ref(true);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
async function fetchPosts() {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/posts');
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load posts');
|
||||
}
|
||||
|
||||
posts.value = await response.json();
|
||||
} catch (e) {
|
||||
error.value = 'Could not load your feed. Please try again.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onLike(id: string) {
|
||||
console.log('like', id);
|
||||
}
|
||||
|
||||
onMounted(fetchPosts);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="feed" >
|
||||
<p v-if="loading">Loading your feed…</p>
|
||||
<p v-else-if="error" role="alert">{{ error }}</p>
|
||||
<p v-else-if="posts.length === 0">No posts to show yet.</p>
|
||||
|
||||
<PostCard
|
||||
v-for="post in posts"
|
||||
v-else
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,353 @@
|
||||
<script setup lang="ts">
|
||||
import Avatar from '@/components/dredge/Avatar.vue';
|
||||
import type { Post } from '@/types/dredge.types';
|
||||
import { usePauseOffscreen } from '@/composables/usePauseOffScreen';
|
||||
import { ComponentPublicInstance, ref } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
post: Post;
|
||||
}>();
|
||||
|
||||
const displayCaption =
|
||||
props.post.caption ?? props.post.accessibility_caption ?? '';
|
||||
|
||||
const imageAlt =
|
||||
props.post.accessibility_caption ??
|
||||
(props.post.caption
|
||||
? `Post by ${props.post.username}: ${props.post.caption}`
|
||||
: `Photo posted by ${props.post.username}`);
|
||||
|
||||
const carouselSlides =
|
||||
props.post.is_carousel && props.post.carousel_images
|
||||
? props.post.carousel_images.map((item, i) => ({
|
||||
...item,
|
||||
alt:
|
||||
item.accessibility_caption ??
|
||||
`Slide ${i + 1} of ${props.post.carousel_images!.length} from ${props.post.username}`,
|
||||
}))
|
||||
: [];
|
||||
|
||||
const videoRefs = ref<HTMLVideoElement[]>([]);
|
||||
function registerVideo(el: Element | ComponentPublicInstance | null) {
|
||||
if (el instanceof HTMLVideoElement) {
|
||||
videoRefs.value.push(el);
|
||||
}
|
||||
}
|
||||
usePauseOffscreen(videoRefs);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="card">
|
||||
<header class="card__head">
|
||||
<Avatar
|
||||
size="md"
|
||||
:src="post.profile_pic_url"
|
||||
:alt="`${post.username}'s profile picture`"
|
||||
/>
|
||||
<div class="card__who">
|
||||
<span class="card__handle">{{ post.username }}</span>
|
||||
<span v-if="post.taken_at" class="card__depth">{{
|
||||
post.taken_at_date
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
v-if="post.permalink"
|
||||
:href="post.permalink"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="icon-btn icon-btn--ghost"
|
||||
aria-label="Open on Instagram"
|
||||
>
|
||||
<v-icon icon="mdi-open-in-new" size="18" />
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="card__specimen">
|
||||
<!-- Carousel: multiple images/videos -->
|
||||
<v-carousel
|
||||
v-if="post.is_carousel && carouselSlides.length"
|
||||
height="500"
|
||||
hide-delimiter-background
|
||||
:show-arrows="carouselSlides.length > 1"
|
||||
:cycle="false"
|
||||
:continuous="false"
|
||||
color="#fff"
|
||||
:style="{ '--slide-count': carouselSlides.length }"
|
||||
>
|
||||
<v-carousel-item v-for="(slide, i) in carouselSlides" :key="i">
|
||||
<video
|
||||
v-if="slide.video_url"
|
||||
:src="slide.video_url"
|
||||
:aria-label="slide.alt"
|
||||
:ref="registerVideo"
|
||||
controls
|
||||
preload="metadata"
|
||||
playsinline
|
||||
class="card__video"
|
||||
>
|
||||
Your browser doesn't support video playback.
|
||||
</video>
|
||||
<v-img
|
||||
v-else-if="slide.url"
|
||||
:src="slide.url"
|
||||
:alt="slide.alt"
|
||||
contain
|
||||
height="100%"
|
||||
width="100%"
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="card__scan" />
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="card__img-fallback">
|
||||
<v-icon
|
||||
icon="mdi-image-broken-variant"
|
||||
size="32"
|
||||
/>
|
||||
<span>Image unavailable</span>
|
||||
</div>
|
||||
</template>
|
||||
</v-img>
|
||||
<div v-else class="card__scan" />
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
|
||||
<!-- Single video -->
|
||||
<video
|
||||
v-else-if="post.is_video && post.video_url"
|
||||
:src="post.video_url"
|
||||
:aria-label="imageAlt"
|
||||
:ref="registerVideo"
|
||||
:poster="post.image_url ?? undefined"
|
||||
controls
|
||||
preload="metadata"
|
||||
playsinline
|
||||
class="card__video"
|
||||
>
|
||||
Your browser doesn't support video playback.
|
||||
</video>
|
||||
|
||||
<!-- Single image -->
|
||||
<v-img
|
||||
v-else-if="post.image_url"
|
||||
:src="post.image_url"
|
||||
:alt="imageAlt"
|
||||
contain
|
||||
height="100%"
|
||||
width="100%"
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="card__scan" />
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="card__img-fallback">
|
||||
<v-icon icon="mdi-image-broken-variant" size="32" />
|
||||
<span>Image unavailable</span>
|
||||
</div>
|
||||
</template>
|
||||
</v-img>
|
||||
|
||||
<div v-else class="card__scan" />
|
||||
|
||||
<v-chip
|
||||
v-if="post.is_carousel && carouselSlides.length"
|
||||
class="card__badge"
|
||||
size="small"
|
||||
prepend-icon="mdi-image-multiple"
|
||||
:aria-label="`This post has ${carouselSlides.length} items`"
|
||||
>
|
||||
{{ carouselSlides.length }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<footer class="card__foot">
|
||||
<p v-if="post.like_count" class="card__likes">
|
||||
{{ post.like_count }}
|
||||
{{ post.like_count === 1 ? 'like' : 'likes' }}
|
||||
</p>
|
||||
|
||||
<p v-if="displayCaption" class="card__caption">
|
||||
<span class="card__handle">{{ post.username }}</span>
|
||||
{{ displayCaption }}
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
<style scoped>
|
||||
.card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
padding: 0.85rem 1rem;
|
||||
}
|
||||
.card__who {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.25;
|
||||
flex: 1;
|
||||
}
|
||||
.card__handle {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
color: var(--sediment);
|
||||
}
|
||||
.card__depth {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--haze);
|
||||
}
|
||||
.card__specimen {
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(76, 224, 210, 0.05) 0px,
|
||||
rgba(76, 224, 210, 0.05) 1px,
|
||||
transparent 1px,
|
||||
transparent 4px
|
||||
),
|
||||
linear-gradient(160deg, #163041, #081722 65%);
|
||||
position: relative;
|
||||
}
|
||||
.card__scan {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
rgba(76, 224, 210, 0.12),
|
||||
transparent
|
||||
);
|
||||
background-size: 100% 260%;
|
||||
animation: scan 6s linear infinite;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card__scan {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@keyframes scan {
|
||||
0% {
|
||||
background-position: 0 -60%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 160%;
|
||||
}
|
||||
}
|
||||
.card__img-fallback {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
color: var(--haze);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.card__badge {
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
right: 0.6rem;
|
||||
}
|
||||
.card__foot {
|
||||
padding: 0.85rem 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.card__likes {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--sediment);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.card__caption {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: var(--sediment-dim);
|
||||
}
|
||||
.card__caption .card__handle {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.icon-btn {
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--midwater);
|
||||
color: var(--sediment);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
.icon-btn:hover,
|
||||
.icon-btn:focus-visible {
|
||||
border-color: var(--bioluminum);
|
||||
color: var(--bioluminum);
|
||||
}
|
||||
.icon-btn:focus-visible {
|
||||
outline: 2px solid var(--bioluminum);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.icon-btn--ghost {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.card__video {
|
||||
width: 100%;
|
||||
max-height: 600px;
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Delimiter row: allow it to fit or scroll instead of clipping */
|
||||
:deep(.v-carousel__controls) {
|
||||
background: transparent;
|
||||
padding: 4px 10px;
|
||||
gap: 10px;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
justify-content: safe center; /* was: flex-start */
|
||||
scrollbar-width: none;
|
||||
}
|
||||
:deep(.v-carousel__controls)::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Shrink dots as slide count grows, so 20 items fit without scrolling */
|
||||
:deep(.v-carousel__controls__item) {
|
||||
width: clamp(6px, calc(220px / var(--slide-count, 1)), 10px) !important;
|
||||
height: clamp(6px, calc(220px / var(--slide-count, 1)), 10px) !important;
|
||||
min-width: 0 !important;
|
||||
margin: 0 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Inactive dots: much higher contrast than Vuetify's default */
|
||||
:deep(.v-carousel__controls__item .v-icon) {
|
||||
color: var(--sediment) !important;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Active dot: full opacity + accent color (via the color prop above) */
|
||||
:deep(.v-carousel__controls__item.v-btn--active .v-icon),
|
||||
:deep(.v-carousel__controls__item[aria-pressed='true'] .v-icon) {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<header class="topbar">
|
||||
<span class="wordmark">Dredge<em>Gram</em></span>
|
||||
<span class="icons">
|
||||
<button class="icon-btn" aria-label="Notifications">
|
||||
<span class="mdi mdi-heart"></span>
|
||||
</button>
|
||||
<button class="icon-btn" aria-label="Messages">
|
||||
<span class="mdi mdi-message"></span>
|
||||
</button>
|
||||
</span>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wordmark {
|
||||
font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.wordmark em {
|
||||
font-style: normal;
|
||||
color: var(--bioluminum);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.85rem 1.5rem;
|
||||
background: rgba(5, 11, 20, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
transform 0.1s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.icon-btn .mdi {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.icon-btn:active {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.topbar {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.icons {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 2.9rem;
|
||||
height: 2.9rem;
|
||||
}
|
||||
|
||||
.icon-btn .mdi {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import Avatar from '@/components/dredge/Avatar.vue';
|
||||
|
||||
defineProps<{
|
||||
handle: string;
|
||||
role: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sidebar__profile">
|
||||
<Avatar size="lg" />
|
||||
<div>
|
||||
<span class="card__handle">{{ handle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar__profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.sidebar__profile > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!-- Sidebar.vue -->
|
||||
<script setup lang="ts">
|
||||
import ProfileSummary from './ProfileSummary.vue';
|
||||
import SuggestionRow from './SuggestionRow.vue';
|
||||
|
||||
const catches = [
|
||||
{ id: 1, tag: 'surface' },
|
||||
{ id: 2, tag: 'midwater' },
|
||||
{ id: 3, tag: 'trench' },
|
||||
{ id: 4, tag: 'vent' },
|
||||
{ id: 5, tag: 'benthic' },
|
||||
];
|
||||
|
||||
function follow(id: number) {
|
||||
console.log('follow', id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<ProfileSummary handle="generictravelphotos" role="crew member" />
|
||||
|
||||
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.75rem;
|
||||
position: sticky;
|
||||
top: 5.5rem;
|
||||
}
|
||||
.sidebar__suggest {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.sidebar__suggest-title {
|
||||
font-size: 0.75rem;
|
||||
color: var(--haze);
|
||||
text-transform: lowercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.sidebar {
|
||||
position: static;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!-- SuggestionRow.vue -->
|
||||
<script setup lang="ts">
|
||||
import Avatar from '@/components/dredge/Avatar.vue';
|
||||
|
||||
defineProps<{
|
||||
handle: string;
|
||||
following?: boolean;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
follow: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sidebar__suggest-row">
|
||||
<Avatar size="sm" />
|
||||
<span class="card__handle">{{ handle }}</span>
|
||||
<button class="follow-btn" @click="$emit('follow')">
|
||||
{{ following ? 'following' : 'follow' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar__suggest-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.sidebar__suggest-row .card__handle {
|
||||
flex: 1;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.follow-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--bioluminum);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.follow-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!-- StoriesRail.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import StoryRing from './StoryRing.vue';
|
||||
import StoryViewer from './StoryViewer.vue';
|
||||
import type { StoryLink } from '@/types/dredge.types';
|
||||
|
||||
const stories = ref<StoryLink[]>([]);
|
||||
const loading = ref(true);
|
||||
const error = ref<string | null>(null);
|
||||
const openUsername = ref<string | null>(null);
|
||||
|
||||
async function fetchStories() {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const response = await fetch('/api/stories');
|
||||
if (!response.ok) throw new Error('Failed to load stories');
|
||||
stories.value = await response.json();
|
||||
} catch (e) {
|
||||
error.value = 'Could not load stories.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openStory(username: string) {
|
||||
openUsername.value = username;
|
||||
}
|
||||
|
||||
async function closeStory() {
|
||||
openUsername.value = null;
|
||||
await fetchStories();
|
||||
}
|
||||
|
||||
onMounted(fetchStories);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="rail" aria-label="Surface catches">
|
||||
<p v-if="loading" class="rail__status">Loading stories…</p>
|
||||
<p v-else-if="error" class="rail__status" role="alert">{{ error }}</p>
|
||||
<p v-else-if="stories.length === 0" class="rail__status">
|
||||
No active stories.
|
||||
</p>
|
||||
|
||||
<template v-else>
|
||||
<StoryRing
|
||||
v-for="s in stories"
|
||||
:key="s.username"
|
||||
:username="s.username"
|
||||
:profile-pic-url="s.profile_pic_url"
|
||||
:is-unread="s.is_unread"
|
||||
:muted="s.muted"
|
||||
@select="openStory(s.username)"
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<StoryViewer
|
||||
v-if="openUsername"
|
||||
:username="openUsername"
|
||||
@close="closeStory"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rail {
|
||||
display: flex;
|
||||
gap: 1.1rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
min-width: 0; /* add */
|
||||
width: 100%; /* add */
|
||||
}
|
||||
.rail__status {
|
||||
font-size: 0.8rem;
|
||||
color: var(--haze);
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!-- StoryRing.vue -->
|
||||
<script setup lang="ts">
|
||||
import { proxyImage } from '@/lib/proxyImage';
|
||||
|
||||
const props = defineProps<{
|
||||
username: string;
|
||||
profilePicUrl: string | null;
|
||||
isUnread: boolean;
|
||||
muted: boolean;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
select: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="rail__item"
|
||||
:class="{ 'rail__item--muted': muted }"
|
||||
@click="$emit('select')"
|
||||
:aria-label="`${username}'s story, ${isUnread ? 'unread' : 'already viewed'}${muted ? ', muted' : ''}`"
|
||||
>
|
||||
<span
|
||||
class="rail__ring"
|
||||
:class="isUnread ? 'rail__ring--unread' : 'rail__ring--seen'"
|
||||
>
|
||||
<img
|
||||
v-if="profilePicUrl"
|
||||
:src="proxyImage(profilePicUrl)"
|
||||
:alt="''"
|
||||
class="rail__thumb-img"
|
||||
loading="lazy"
|
||||
/>
|
||||
<span v-else class="rail__thumb" />
|
||||
</span>
|
||||
<span class="rail__label">{{ username }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rail__item--muted .rail__ring{
|
||||
opacity: 0.26;
|
||||
}
|
||||
|
||||
.rail__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--haze);
|
||||
flex-shrink: 0; /* add — keeps rings from squashing, forces scroll instead */
|
||||
}
|
||||
|
||||
.rail__ring {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.rail__ring {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
.rail__thumb {
|
||||
width: 4.35rem;
|
||||
height: 4.35rem;
|
||||
}
|
||||
.rail__label {
|
||||
font-size: 0.75rem;
|
||||
max-width: 5.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rail__ring--unread {
|
||||
border: 1.5px solid var(--bioluminum);
|
||||
box-shadow: 0 0 10px -2px var(--bioluminum);
|
||||
}
|
||||
.rail__ring--seen {
|
||||
border: 1.5px solid var(--line);
|
||||
box-shadow: none;
|
||||
}
|
||||
.rail__thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.rail__thumb {
|
||||
width: 3.35rem;
|
||||
height: 3.35rem;
|
||||
border-radius: 999px;
|
||||
background: radial-gradient(circle at 35% 30%, #1d3644, var(--midwater));
|
||||
}
|
||||
.rail__label {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: lowercase;
|
||||
max-width: 4.2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,331 @@
|
||||
<!-- StoryViewer.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||
import { proxyImage } from '@/lib/proxyImage';
|
||||
import type { StoryDetail } from '@/types/dredge.types';
|
||||
|
||||
const props = defineProps<{
|
||||
username: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
}>();
|
||||
|
||||
const detail = ref<StoryDetail | null>(null);
|
||||
const loading = ref(true);
|
||||
const error = ref<string | null>(null);
|
||||
const currentIndex = ref(0);
|
||||
const progress = ref(0); // 0-1 for the current item
|
||||
|
||||
const IMAGE_DURATION_MS = 5000;
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
let elapsed = 0;
|
||||
|
||||
const currentItem = computed(
|
||||
() => detail.value?.items[currentIndex.value] ?? null,
|
||||
);
|
||||
|
||||
async function fetchStory() {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const response = await fetch(`/api/stories/${props.username}`);
|
||||
if (!response.ok) throw new Error('Failed to load story');
|
||||
detail.value = await response.json();
|
||||
currentIndex.value = detail.value?.start_index ?? 0;
|
||||
} catch (e) {
|
||||
error.value = 'Could not load this story.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function markViewed(storyId: string) {
|
||||
// fire-and-forget, don't block the viewer on this
|
||||
fetch(`/api/story-items/${storyId}/view`, { method: 'POST' }).catch(
|
||||
() => {},
|
||||
);
|
||||
}
|
||||
function startTimer() {
|
||||
clearTimer();
|
||||
elapsed = 0;
|
||||
progress.value = 0;
|
||||
|
||||
// Videos advance on their own 'ended' event instead of a fixed timer
|
||||
if (currentItem.value?.is_video) return;
|
||||
|
||||
const tick = 100;
|
||||
timer = setInterval(() => {
|
||||
elapsed += tick;
|
||||
progress.value = Math.min(elapsed / IMAGE_DURATION_MS, 1);
|
||||
if (elapsed >= IMAGE_DURATION_MS) {
|
||||
next();
|
||||
}
|
||||
}, tick);
|
||||
}
|
||||
|
||||
function clearTimer() {
|
||||
if (timer) clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
|
||||
function next() {
|
||||
if (!detail.value) return;
|
||||
if (currentIndex.value < detail.value.items.length - 1) {
|
||||
currentIndex.value++;
|
||||
} else {
|
||||
emit('close');
|
||||
}
|
||||
}
|
||||
|
||||
function prev() {
|
||||
if (currentIndex.value > 0) {
|
||||
currentIndex.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function onVideoEnded() {
|
||||
next();
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'ArrowRight') next();
|
||||
else if (e.key === 'ArrowLeft') prev();
|
||||
else if (e.key === 'Escape') emit('close');
|
||||
}
|
||||
|
||||
watch(currentIndex, () => {
|
||||
startTimer();
|
||||
if (currentItem.value) markViewed(currentItem.value.id);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchStory();
|
||||
if (detail.value?.items.length) {
|
||||
startTimer();
|
||||
if (currentItem.value) markViewed(currentItem.value.id);
|
||||
}
|
||||
window.addEventListener('keydown', onKeydown);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearTimer();
|
||||
window.removeEventListener('keydown', onKeydown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="viewer"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-label="`${username}'s story`"
|
||||
>
|
||||
<div class="viewer__backdrop" @click="emit('close')" />
|
||||
|
||||
<div class="viewer__content">
|
||||
<p v-if="loading" class="viewer__status">Loading story…</p>
|
||||
<p v-else-if="error" class="viewer__status" role="alert">
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
<template v-else-if="currentItem">
|
||||
<div class="viewer__progress" role="presentation">
|
||||
<div
|
||||
v-for="(item, i) in detail!.items"
|
||||
:key="item.id"
|
||||
class="viewer__segment"
|
||||
>
|
||||
<div
|
||||
class="viewer__segment-fill"
|
||||
:style="{
|
||||
width:
|
||||
i < currentIndex
|
||||
? '100%'
|
||||
: i === currentIndex
|
||||
? `${progress * 100}%`
|
||||
: '0%',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header class="viewer__header">
|
||||
<span class="viewer__username">{{ username }}</span>
|
||||
<span class="viewer__count"
|
||||
>{{ currentIndex + 1 }} /
|
||||
{{ detail!.items.length }}</span
|
||||
>
|
||||
<button
|
||||
class="viewer__close"
|
||||
@click="emit('close')"
|
||||
aria-label="Close story"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="viewer__media">
|
||||
<video
|
||||
v-if="currentItem.is_video && currentItem.video_url"
|
||||
:key="currentItem.id"
|
||||
:src="currentItem.video_url ?? undefined"
|
||||
:aria-label="
|
||||
currentItem.accessibility_caption ??
|
||||
`Story video from ${username}`
|
||||
"
|
||||
autoplay
|
||||
playsinline
|
||||
@ended="onVideoEnded"
|
||||
class="viewer__video"
|
||||
>
|
||||
Your browser doesn't support video playback.
|
||||
</video>
|
||||
<img
|
||||
v-else-if="currentItem.image_url"
|
||||
:src="proxyImage(currentItem.image_url) ?? undefined"
|
||||
:alt="
|
||||
currentItem.accessibility_caption ??
|
||||
`Story photo from ${username}`
|
||||
"
|
||||
class="viewer__image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav class="viewer__nav" aria-label="Story navigation">
|
||||
<button
|
||||
class="viewer__nav-btn"
|
||||
:disabled="currentIndex === 0"
|
||||
@click="prev"
|
||||
aria-label="Previous story"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
class="viewer__nav-btn"
|
||||
@click="next"
|
||||
aria-label="Next story"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</nav>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.viewer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.viewer__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(4, 12, 16, 0.92);
|
||||
}
|
||||
.viewer__content {
|
||||
position: relative;
|
||||
width: min(420px, 92vw);
|
||||
height: min(760px, 88vh);
|
||||
background: #000;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.viewer__status {
|
||||
margin: auto;
|
||||
color: var(--haze);
|
||||
}
|
||||
.viewer__progress {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
padding: 0.6rem 0.6rem 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.viewer__segment {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.viewer__segment-fill {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
.viewer__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem 0.9rem;
|
||||
color: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
.viewer__username {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.viewer__count {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.viewer__close {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
.viewer__media {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
}
|
||||
.viewer__image,
|
||||
.viewer__video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.viewer__nav {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0.4rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
.viewer__nav-btn {
|
||||
pointer-events: auto;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border: none;
|
||||
color: #fff;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 999px;
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.viewer__nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.viewer__segment-fill {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user