Added vertical stories with Swiper

front/package.json

@@ -22,7 +22,8 @@
     "react-insta-stories": "^2.6.1",
     "react-leaflet": "^4.2.1",
     "react-leaflet-custom-control": "^1.3.5",
-    "react-router-dom": "^6.14.1"
+    "react-router-dom": "^6.14.1",
+    "swiper": "^11.0.6"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",

front/src/components/AnnouncementDetails.tsx

@@ -26,31 +26,43 @@ const styles = {
 }
 
 type ViewProps = {
-    myId: number,
+    myId: number
-    announcement: Announcement,
+    announcement: Announcement
 }
 
 const View = ({
     myId,
-    announcement: { name, category, bestBy, description, lat, lng, address, metro, userId },
+    announcement: {
+        name,
+        category,
+        bestBy,
+        description,
+        lat,
+        lng,
+        address,
+        metro,
+        userId,
+    },
 }: ViewProps) => (
     <>
         <h1>{name}</h1>
 
         <span>{categoryNames[category]}</span>
-        <span className='m-2'>&#x2022;</span>{/* dot */}
+        <span className="m-2">&#x2022;</span>
+        {/* dot */}
         <span>Годен до {bestBy}</span>
 
-        <p className='mb-0'>{description}</p>
+        <p className="mb-0">{description}</p>
 
-        <p className='mb-3'>
+        <p className="mb-3">
-            Рейтинг пользователя: <StarRating dynamic={myId !== userId} userId={userId} />
+            Рейтинг пользователя:{' '}
+            <StarRating dynamic={myId !== userId} userId={userId} />
         </p>
 
         <MapContainer style={styles.map} center={[lat, lng]} zoom={16}>
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
 
             <StudentLocations />
@@ -67,9 +79,9 @@ const View = ({
 )
 
 type ControlProps = {
-    myId: number,
+    myId: number
-    closeRefresh: () => void,
+    closeRefresh: () => void
-    announcement: Announcement,
+    announcement: Announcement
     showDispose: () => void
 }
 
@@ -86,25 +98,44 @@ function Control({
     return (
         <>
             <p>Забронировали {bookedBy + (bookButton.disabled ? 1 : 0)} чел.</p>
-            {(myId === userId) ? (
+            {myId === userId ? (
-                <div className='m-0'>
+                <div className="m-0">
-                    <Button className='m-1' variant='success' onClick={showDispose}>Утилизировать</Button>
+                    <Button
-                    <Button className='m-1' variant='success' onClick={() => void handleRemove(id)} {...removeButton} />
+                        className="m-1"
+                        variant="success"
+                        onClick={showDispose}
+                    >
+                        Утилизировать
+                    </Button>
+                    <Button
+                        className="m-1"
+                        variant="success"
+                        onClick={() => void handleRemove(id)}
+                        {...removeButton}
+                    />
                 </div>
             ) : (
-                <Button variant='success' onClick={() => void handleBook(id)} {...bookButton} />
+                <Button
+                    variant="success"
+                    onClick={() => void handleBook(id)}
+                    {...bookButton}
+                />
             )}
         </>
     )
 }
 
 type AnnouncementDetailsProps = {
-    close: () => void,
+    className?: string
-    refresh: () => void,
+    show: boolean
-    announcement: Announcement,
+    close: () => void
+    refresh: () => void
+    announcement: Announcement
 }
 
 function AnnouncementDetails({
+    className,
+    show,
     close,
     refresh,
     announcement,
@@ -119,15 +150,16 @@ function AnnouncementDetails({
     const myId = useId()
 
     return (
-        <div
+        <Modal
-            className='modal'
+            centered
-            style={styles.container}
+            show={show}
+            onHide={close}
+            keyboard
+            className={className}
+            // backdrop={false}
         >
-            <Modal.Dialog centered className='modal-dialog'>
             <Modal.Header closeButton onHide={close}>
-                    <Modal.Title>
+                <Modal.Title>Подробнее</Modal.Title>
-                        Подробнее
-                    </Modal.Title>
             </Modal.Header>
 
             <Modal.Body>
@@ -142,12 +174,14 @@ function AnnouncementDetails({
                     announcement={announcement}
                 />
             </Modal.Footer>
-            </Modal.Dialog>
+            <Modal
-            <Modal centered show={disposeShow} onHide={() => setDisposeShow(false)} style={{ zIndex: 100000 }}>
+                centered
+                show={disposeShow}
+                onHide={() => setDisposeShow(false)}
+                style={{ zIndex: 100000 }}
+            >
                 <Modal.Header closeButton>
-                    <Modal.Title>
+                    <Modal.Title>Утилизация</Modal.Title>
-                        Утилизация
-                    </Modal.Title>
                 </Modal.Header>
                 <SelectDisposalTrashbox
                     annId={announcement.id}
@@ -156,7 +190,7 @@ function AnnouncementDetails({
                     closeRefresh={closeRefresh}
                 />
             </Modal>
-        </div>
+        </Modal>
     )
 }
 

front/src/hooks/useStoryIndex.ts

@@ -8,39 +8,68 @@ function useStoryIndex(annLength: number | undefined) {
 
     const [searchParams, setSearchParams] = useSearchParams()
 
-    const withReset = <T>(f: SetState<T>) => (...args: Parameters<SetState<T>>) => {
+    const withReset =
+        <T>(f: SetState<T>) =>
+        (...args: Parameters<SetState<T>>) => {
             setIndex(0)
-        setSearchParams(prev => ({
+            setSearchParams(
+                (prev) => ({
                     ...Object.fromEntries(prev),
                     storyIndex: '0',
-        }), { replace: true })
+                }),
+                { replace: true }
+            )
             f(...args)
         }
 
     useEffect(() => {
-        setIndex(annLength ?
+        setIndex(
-            Number.parseInt(searchParams.get('storyIndex') || '0') :
+            annLength
-            0)
+                ? Number.parseInt(searchParams.get('storyIndex') || '0')
+                : 0
+        )
         // searchParams have actual query string at first render
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [annLength])
 
-    const increment = () => setIndex(prev => {
+    const increment = () =>
+        setIndex((prev) => {
             const newIndex = (prev + 1) % (annLength || 1)
-        setSearchParams(prev => ({
+            setSearchParams(
+                (prev) => ({
                     ...Object.fromEntries(prev),
                     storyIndex: newIndex.toString(),
-        }), { replace: true })
+                }),
+                { replace: true }
+            )
 
             return newIndex
         })
 
-    const decrement = () => setIndex(prev => {
+    const decrement = () =>
-        const newIndex = prev > 0 ? (prev - 1) : 0
+        setIndex((prev) => {
-        setSearchParams(prev => ({
+            const newIndex = prev > 0 ? prev - 1 : 0
+            setSearchParams(
+                (prev) => ({
                     ...Object.fromEntries(prev),
                     storyIndex: newIndex.toString(),
-        }), { replace: true })
+                }),
+                { replace: true }
+            )
+
+            return newIndex
+        })
+
+    const set = (n: number) =>
+        setIndex(() => {
+            const newIndex = n % (annLength || 1)
+            setSearchParams(
+                (prev) => ({
+                    ...Object.fromEntries(prev),
+                    storyIndex: newIndex.toString(),
+                }),
+                { replace: true }
+            )
 
             return newIndex
         })
@@ -50,6 +79,7 @@ function useStoryIndex(annLength: number | undefined) {
         withReset,
         increment,
         decrement,
+        set,
     }
 }
 

front/src/pages/HomePage.tsx

@@ -1,6 +1,8 @@
 import { CSSProperties, useEffect, useMemo, useState } from 'react'
-import Stories from 'react-insta-stories'
+// import Stories from 'react-insta-stories'
-import { Story } from 'react-insta-stories/dist/interfaces'
+// import { Story } from 'react-insta-stories/dist/interfaces'
+import { Swiper, SwiperSlide, useSwiper, useSwiperSlide } from 'swiper/react'
+import { Virtual, Keyboard, Mousewheel, Zoom, Autoplay } from 'swiper/modules'
 
 import { BottomNavBar, AnnouncementDetails, Filters } from '../components'
 import { useFilters, useStoryDimensions, useStoryIndex } from '../hooks'
@@ -9,77 +11,149 @@ import { Announcement } from '../api/announcement/types'
 import { categoryGraphics } from '../assets/category'
 import { UseFetchReturn, gotError } from '../hooks/useFetch'
 
+import 'swiper/css'
+import 'swiper/css/virtual'
+import 'swiper/css/zoom'
+import 'swiper/css/keyboard'
+import 'swiper/css/mousewheel'
+import 'swiper/css/autoplay'
+
 import puffSpinner from '../assets/puff.svg'
-
+import { SetState } from '../utils/types'
-function generateStories(announcements: Announcement[], refresh: () => void): Story[] {
+import { Button } from 'react-bootstrap'
-    return announcements.map(announcement => {
+import { throttle } from '../utils'
-        return ({
-            id: announcement.id,
-            url: announcement.src || categoryGraphics[announcement.category],
-            type: announcement.src?.endsWith('mp4') ? 'video' : undefined,
-            seeMore: ({ close }: { close: () => void }) => (
-                <AnnouncementDetails close={close} refresh={refresh} announcement={announcement} />
-            ),
-        })
-    })
-}
-
-function fallbackGenerateStories(announcements: UseFetchReturn<Announcement[]>) {
-    if (announcements.loading) {
-        return fallbackStory()
-    }
-
-    if (gotError(announcements)) {
-        return fallbackStory(announcements.error, true)
-    }
-
-    if (announcements.data.length === 0) {
-        return [{ url: '/static/empty.png' }]
-    }
-
-    const stories = generateStories(announcements.data, announcements.refetch)
-
-    return stories
-}
-
-const fallbackStory = (text = '', isError = false): Story[] => [{
-    content: ({ action }) => {
-        // ESLint can't detect that it is a component
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => {
-            action('pause')
-        }, [action])
-
-        return (
-            <div className={`m-auto ${isError ? 'text-danger' : ''}`}>
-                {text || <img src={puffSpinner} />}
-            </div>
-        )
-    },
-}]
 
 const styles = {
     container: {
         display: 'flex',
         justifyContent: 'center',
         backgroundColor: 'rgb(17, 17, 17)',
+        height: 'calc(100dvh - 56px)',
     } as CSSProperties,
+    detailsContainer: {
+        position: 'fixed',
+        top: 0,
+        zIndex: 1000,
+        textAlign: 'initial',
+    } as CSSProperties,
+    cardContainer: {
+        height: '100%',
+        margin: '0 auto',
+        position: 'relative',
+    } as CSSProperties,
+    cardMedia: {
+        height: '100%',
+    } as CSSProperties,
+    cardDetails: {
+        position: 'absolute',
+        width: '100%',
+        bottom: 0,
+        textAlign: 'center',
+        height: '56px',
+        boxShadow: 'inset 0px -50px 36px -28px rgba(0, 0, 0, 0.35)',
+    } as CSSProperties,
+    progressBar: {
+        height: '0.5dvh',
+        width: 'calc(100% - 2dvh)',
+        left: '1dvh',
+        position: 'absolute',
+        top: '1dvh',
+        zIndex: 1000,
+    } as CSSProperties,
+}
+
+type CardProps = {
+    announcement: Announcement
+    detailsShown: boolean
+    percentage: number
+    setDetailsShown: SetState<boolean>
+}
+
+const Card = ({
+    announcement,
+    detailsShown,
+    percentage,
+    setDetailsShown,
+}: CardProps) => {
+    const swiperSlide = useSwiperSlide()
+    const swiper = useSwiper()
+
+    useEffect(() => {
+        if (detailsShown) swiper.autoplay.stop()
+        else swiper.autoplay.start()
+    }, [detailsShown])
+
+    return (
+        <>
+            <AnnouncementDetails
+                className="swiper-no-swiping"
+                show={detailsShown && swiperSlide.isActive}
+                announcement={announcement}
+                close={() => setDetailsShown(false)}
+                refresh={() => {}}
+            />
+
+            <div style={styles.cardContainer}>
+                {swiperSlide.isActive && (
+                    <div style={styles.progressBar}>
+                        <div
+                            style={{
+                                background: 'white',
+                                height: '100%',
+                                width: (1 - percentage) * 100 + '%',
+                                transition: 'width 0.1s linear',
+                            }}
+                        ></div>
+                    </div>
+                )}
+                <div className="swiper-zoom-container">
+                    {announcement.src?.endsWith('mp4') ||
+                    announcement.src?.endsWith('webm') ? (
+                        <video
+                            style={styles.cardMedia}
+                            src={announcement.src}
+                            autoPlay={swiperSlide.isActive}
+                        />
+                    ) : (
+                        <img
+                            style={styles.cardMedia}
+                            src={
+                                announcement.src ||
+                                categoryGraphics[announcement.category]
+                            }
+                            loading="lazy"
+                        />
+                    )}
+                </div>
+                <div style={styles.cardDetails}>
+                    <Button
+                        variant="success"
+                        onClick={() => setDetailsShown(true)}
+                    >
+                        Подробности
+                    </Button>
+                </div>
+            </div>
+        </>
+    )
 }
 
 function HomePage() {
     const { height, width } = useStoryDimensions(16 / 9)
 
     const [filterShown, setFilterShown] = useState(false)
+    const [detailsShown, setDetailsShown] = useState(false)
 
     const [filter, setFilter] = useFilters()
 
     const announcements = useAnnouncements(filter)
 
-    const stories = useMemo(() => fallbackGenerateStories(announcements), [announcements])
-
     const index = useStoryIndex(announcements.data?.length)
 
-    return (<>
+    const [autoplayPercentage, setAutoplayPercentage] = useState(0)
+
+    return (
+        <>
             <Filters
                 filter={filter}
                 setFilter={index.withReset(setFilter)}
@@ -87,24 +161,62 @@ function HomePage() {
                 setFilterShown={setFilterShown}
             />
             <div style={styles.container}>
-            <Stories
+                {!announcements.loading && !gotError(announcements) && (
-                currentIndex={index.n % stories.length}
+                    <Swiper
-                onStoryEnd={index.increment}
+                        autoplay={{ delay: 11000, stopOnLastSlide: true }}
-                onNext={index.increment}
+                        direction="vertical"
-                onPrevious={index.decrement}
+                        keyboard
-                stories={stories}
+                        loop
-                defaultInterval={11000}
+                        modules={[
-                height={height}
+                            Autoplay,
-                width={width}
+                            Keyboard,
-                loop={true}
+                            Mousewheel,
-                keyboardNavigation={true}
+                            Virtual,
+                            Zoom,
+                        ]}
+                        mousewheel
+                        onAutoplayTimeLeft={throttle(
+                            (_: unknown, __: unknown, percentage: number) =>
+                                setAutoplayPercentage(percentage),
+                            100
+                        )}
+                        noSwiping={true}
+                        onActiveIndexChange={(s) => index.set(s.activeIndex)}
+                        slidesPerView={1}
+                        spaceBetween={0}
+                        virtual
+                        zoom={{}}
+                        initialSlide={index.n}
+                        onZoomChange={(s, scale) => {
+                            if (scale == 1) {
+                                s.enable()
+                                s.autoplay.start()
+                            } else {
+                                s.disable()
+                                s.autoplay.stop()
+                            }
+                        }}
+                    >
+                        {announcements.data.map((announcement, i) => (
+                            <SwiperSlide
+                                key={announcement.id}
+                                virtualIndex={i}
+                                zoom
+                            >
+                                <Card
+                                    announcement={announcement}
+                                    detailsShown={detailsShown}
+                                    percentage={autoplayPercentage}
+                                    setDetailsShown={setDetailsShown}
                                 />
+                            </SwiperSlide>
+                        ))}
+                    </Swiper>
+                )}
             </div>
-        <BottomNavBar
+            <BottomNavBar toggleFilters={setFilterShown} width={width} />
-            toggleFilters={setFilterShown}
+        </>
-            width={width}
+    )
-        />
-    </>)
 }
 
 export default HomePage

front/src/utils/index.ts

@@ -1,6 +1,5 @@
-const isAborted = <T>(err: Error): err is AbortError<T> => (
+const isAborted = <T>(err: Error): err is AbortError<T> =>
     err.name === 'AbortError'
-)
 
 type AbortErrorMessage = 'resent' | 'unmount' | 'cancel'
 
@@ -30,4 +29,27 @@ function handleHTTPErrors(res: Response) {
     }
 }
 
-export { isAborted, AbortError, handleHTTPErrors }
+const throttle = (fn: Function, wait: number = 300) => {
+    let inThrottle: boolean,
+        lastFn: ReturnType<typeof setTimeout>,
+        lastTime: number
+    return function (this: any) {
+        const context = this,
+            args = arguments
+        if (!inThrottle) {
+            fn.apply(context, args)
+            lastTime = Date.now()
+            inThrottle = true
+        } else {
+            clearTimeout(lastFn)
+            lastFn = setTimeout(() => {
+                if (Date.now() - lastTime >= wait) {
+                    fn.apply(context, args)
+                    lastTime = Date.now()
+                }
+            }, Math.max(wait - (Date.now() - lastTime), 0))
+        }
+    }
+}
+
+export { isAborted, AbortError, handleHTTPErrors, throttle }