359 lines
10 KiB
Vue
359 lines
10 KiB
Vue
<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
|
|
autoplay
|
|
muted
|
|
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%"
|
|
eager
|
|
>
|
|
<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
|
|
autoplay
|
|
muted
|
|
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>
|