feat: updates

packages/web/components/New/ArtistRow.tsx

@@ -1,5 +1,6 @@
 import { resizeImage } from '@/web/utils/common'
 import { css, cx } from '@emotion/css'
+import { memo } from 'react'
 import Image from './Image'
 
 const Artist = ({ artist }: { artist: Artist }) => {
@@ -82,4 +83,6 @@ const ArtistRow = ({
   )
 }
 
-export default ArtistRow
+const memoizedArtistRow = memo(ArtistRow)
+memoizedArtistRow.displayName = 'ArtistRow'
+export default memoizedArtistRow

packages/web/components/New/CoverRow.tsx

@@ -4,6 +4,48 @@ import { useNavigate } from 'react-router-dom'
 import Image from './Image'
 import { prefetchAlbum } from '@/web/api/hooks/useAlbum'
 import { prefetchPlaylist } from '@/web/api/hooks/usePlaylist'
+import { memo, useCallback } from 'react'
+
+const Album = ({ album }: { album: Album }) => {
+  const navigate = useNavigate()
+  const goTo = () => {
+    console.log('dsada')
+    navigate(`/album/${album.id}`)
+  }
+  const prefetch = () => {
+    prefetchAlbum({ id: album.id })
+  }
+
+  return (
+    <Image
+      onClick={goTo}
+      key={album.id}
+      src={resizeImage(album?.picUrl || '', 'md')}
+      className='aspect-square rounded-24'
+      onMouseOver={prefetch}
+    />
+  )
+}
+
+const Playlist = ({ playlist }: { playlist: Playlist }) => {
+  const navigate = useNavigate()
+  const goTo = useCallback(() => {
+    navigate(`/playlist/${playlist.id}`)
+  }, [navigate, playlist.id])
+  const prefetch = useCallback(() => {
+    prefetchPlaylist({ id: playlist.id })
+  }, [playlist.id])
+
+  return (
+    <Image
+      onClick={goTo}
+      key={playlist.id}
+      src={resizeImage(playlist.coverImgUrl || playlist?.picUrl || '', 'md')}
+      className='aspect-square rounded-24'
+      onMouseOver={prefetch}
+    />
+  )
+}
 
 const CoverRow = ({
   albums,
@@ -16,18 +58,6 @@ const CoverRow = ({
   albums?: Album[]
   playlists?: Playlist[]
 }) => {
-  const navigate = useNavigate()
-
-  const goTo = (id: number) => {
-    if (albums) navigate(`/album/${id}`)
-    if (playlists) navigate(`/playlist/${id}`)
-  }
-
-  const prefetch = (id: number) => {
-    if (albums) prefetchAlbum({ id })
-    if (playlists) prefetchPlaylist({ id })
-  }
-
   return (
     <div className={className}>
       {/* Title */}
@@ -38,33 +68,18 @@ const CoverRow = ({
       )}
 
       {/* Items */}
-      <div className='grid grid-cols-3 gap-4 lg:gap-10 xl:grid-cols-4 2xl:grid-cols-5'>
+      <div className='grid grid-cols-3 gap-4 lg:gap-6 xl:grid-cols-4 2xl:grid-cols-5'>
         {albums?.map(album => (
-          <Image
-            onClick={() => goTo(album.id)}
-            key={album.id}
-            alt={album.name}
-            src={resizeImage(album?.picUrl || '', 'md')}
-            className='aspect-square rounded-24'
-            onMouseOver={() => prefetch(album.id)}
-          />
+          <Album key={album.id} album={album} />
         ))}
         {playlists?.map(playlist => (
-          <Image
-            onClick={() => goTo(playlist.id)}
-            key={playlist.id}
-            alt={playlist.name}
-            src={resizeImage(
-              playlist.coverImgUrl || playlist?.picUrl || '',
-              'md'
-            )}
-            className='aspect-square rounded-24'
-            onMouseOver={() => prefetch(playlist.id)}
-          />
+          <Playlist key={playlist.id} playlist={playlist} />
         ))}
       </div>
     </div>
   )
 }
 
-export default CoverRow
+const memoizedCoverRow = memo(CoverRow)
+memoizedCoverRow.displayName = 'CoverRow'
+export default memoizedCoverRow

packages/web/components/New/CoverRowVirtual.tsx

@@ -0,0 +1,128 @@
+import { resizeImage } from '@/web/utils/common'
+import { cx } from '@emotion/css'
+import { useNavigate } from 'react-router-dom'
+import Image from './Image'
+import { prefetchAlbum } from '@/web/api/hooks/useAlbum'
+import { prefetchPlaylist } from '@/web/api/hooks/usePlaylist'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { CSSProperties, useRef } from 'react'
+
+const CoverRow = ({
+  albums,
+  playlists,
+  title,
+  className,
+  containerClassName,
+  containerStyle,
+}: {
+  title?: string
+  className?: string
+  albums?: Album[]
+  playlists?: Playlist[]
+  containerClassName?: string
+  containerStyle?: CSSProperties
+}) => {
+  const navigate = useNavigate()
+
+  const goTo = (id: number) => {
+    if (albums) navigate(`/album/${id}`)
+    if (playlists) navigate(`/playlist/${id}`)
+  }
+
+  const prefetch = (id: number) => {
+    if (albums) prefetchAlbum({ id })
+    if (playlists) prefetchPlaylist({ id })
+  }
+
+  // The scrollable element for your list
+  const parentRef = useRef<HTMLDivElement>(null)
+
+  type Item = Album | Playlist
+  const items: Item[] = albums || playlists || []
+  const rows = items.reduce((rows: Item[][], item: Item, index: number) => {
+    const rowIndex = Math.floor(index / 4)
+    if (rows.length < rowIndex + 1) {
+      rows.push([item])
+    } else {
+      rows[rowIndex].push(item)
+    }
+    return rows
+  }, [])
+
+  // The virtualizer
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    overscan: 5,
+    estimateSize: () => {
+      const containerWidth = parentRef.current?.clientWidth
+      console.log(parentRef.current?.clientWidth)
+      if (!containerWidth) {
+        return 192
+      }
+      const gridGapY = 24
+      const gridGapX = 40
+      const gridColumns = 4
+      console.log(
+        (containerWidth - (gridColumns - 1) * gridGapX) / gridColumns + gridGapY
+      )
+      return (
+        (containerWidth - (gridColumns - 1) * gridGapX) / gridColumns + gridGapY
+      )
+    },
+  })
+
+  return (
+    <div className={className}>
+      {/* Title */}
+      {title && (
+        <h4 className='mb-6 text-14 font-bold uppercase dark:text-neutral-300'>
+          {title}
+        </h4>
+      )}
+
+      <div
+        ref={parentRef}
+        className={cx('w-full overflow-auto', containerClassName)}
+        style={containerStyle}
+      >
+        <div
+          className='relative w-full'
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((row: any) => (
+            <div
+              key={row.index}
+              className='absolute top-0 left-0 grid w-full grid-cols-4 gap-4 lg:gap-10'
+              style={{
+                height: `${row.size}px`,
+                transform: `translateY(${row.start}px)`,
+              }}
+            >
+              {rows[row.index].map((item: Item) => (
+                <img
+                  onClick={() => goTo(item.id)}
+                  key={item.id}
+                  alt={item.name}
+                  src={resizeImage(
+                    item?.picUrl ||
+                      (item as Playlist)?.coverImgUrl ||
+                      item?.picUrl ||
+                      '',
+                    'md'
+                  )}
+                  className='aspect-square rounded-24'
+                  onMouseOver={() => prefetch(item.id)}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CoverRow

packages/web/components/New/Image.tsx

@@ -4,45 +4,46 @@ import { useEffect, useState } from 'react'
 import { ease } from '@/web/utils/const'
 import useIsMobile from '@/web/hooks/useIsMobile'
 
-const Image = ({
+type Props = {
+  src?: string
+  srcSet?: string
+  sizes?: string
+  className?: string
+  lazyLoad?: boolean
+  placeholder?: 'artist' | 'album' | 'playlist' | 'podcast' | 'blank' | false
+  onClick?: (e: React.MouseEvent<HTMLImageElement>) => void
+  onMouseOver?: (e: React.MouseEvent<HTMLImageElement>) => void
+  animation?: boolean
+}
+
+const ImageDesktop = ({
   src,
   srcSet,
   className,
-  alt,
   lazyLoad = true,
   sizes,
   placeholder = 'blank',
   onClick,
   onMouseOver,
   animation = true,
-}: {
-  src?: string
-  srcSet?: string
-  sizes?: string
-  className?: string
-  alt: string
-  lazyLoad?: boolean
-  placeholder?: 'artist' | 'album' | 'playlist' | 'podcast' | 'blank' | false
-  onClick?: (e: React.MouseEvent<HTMLImageElement>) => void
-  onMouseOver?: (e: React.MouseEvent<HTMLImageElement>) => void
-  animation?: boolean
-}) => {
-  const [loaded, setLoaded] = useState(false)
+}: Props) => {
   const [error, setError] = useState(false)
   const animate = useAnimation()
+  const placeholderAnimate = useAnimation()
   const isMobile = useIsMobile()
   const isAnimate = animation && !isMobile
   useEffect(() => setError(false), [src])
 
   const onLoad = async () => {
-    setLoaded(true)
-    if (isAnimate) animate.start({ opacity: 1 })
+    if (isAnimate) {
+      animate.start({ opacity: 1 })
+      placeholderAnimate.start({ opacity: 0 })
+    }
   }
   const onError = () => {
     setError(true)
   }
 
-  const hidden = error || !loaded
   const transition = { duration: 0.6, ease }
   const motionProps = isAnimate
     ? {
@@ -54,6 +55,7 @@ const Image = ({
     : {}
   const placeholderMotionProps = isAnimate
     ? {
+        animate: placeholderAnimate,
         initial: { opacity: 1 },
         exit: { opacity: 0 },
         transition,
@@ -62,6 +64,8 @@ const Image = ({
 
   return (
     <div
+      onClick={onClick}
+      onMouseOver={onMouseOver}
       className={cx(
         'overflow-hidden',
         className,
@@ -71,7 +75,6 @@ const Image = ({
       {/* Image */}
       <AnimatePresence>
         <motion.img
-          alt={alt}
           className='absolute inset-0 h-full w-full'
           src={src}
           srcSet={srcSet}
@@ -80,15 +83,13 @@ const Image = ({
           loading={lazyLoad ? 'lazy' : undefined}
           onError={onError}
           onLoad={onLoad}
-          onClick={onClick}
-          onMouseOver={onMouseOver}
           {...motionProps}
         />
       </AnimatePresence>
 
       {/* Placeholder / Error fallback */}
       <AnimatePresence>
-        {hidden && placeholder && (
+        {placeholder && (
           <motion.div
             {...placeholderMotionProps}
             className='absolute inset-0 h-full w-full bg-white dark:bg-neutral-800'
@@ -99,4 +100,36 @@ const Image = ({
   )
 }
 
+const ImageMobile = (props: Props) => {
+  const { src, className, srcSet, sizes, lazyLoad, onClick, onMouseOver } =
+    props
+  return (
+    <div
+      onClick={onClick}
+      onMouseOver={onMouseOver}
+      className={cx(
+        'overflow-hidden',
+        className,
+        className?.includes('absolute') === false && 'relative'
+      )}
+    >
+      {src && (
+        <img
+          className='absolute inset-0 h-full w-full'
+          src={src}
+          srcSet={srcSet}
+          sizes={sizes}
+          decoding='async'
+          loading={lazyLoad ? 'lazy' : undefined}
+        />
+      )}
+    </div>
+  )
+}
+
+const Image = (props: Props) => {
+  const isMobile = useIsMobile()
+  return isMobile ? <ImageMobile {...props} /> : <ImageDesktop {...props} />
+}
+
 export default Image

packages/web/components/New/Layout.tsx

@@ -5,6 +5,7 @@ import Topbar from '@/web/components/New/Topbar/TopbarDesktop'
 import { css, cx } from '@emotion/css'
 import { player } from '@/web/store'
 import { useSnapshot } from 'valtio'
+import Login from './Login'
 
 const Layout = () => {
   const playerSnapshot = useSnapshot(player)
@@ -36,6 +37,7 @@ const Layout = () => {
       <MenuBar />
       <Topbar />
       <Main />
+      <Login />
       {showPlayer && <Player />}
     </div>
   )

packages/web/components/New/LayoutMobile.tsx

@@ -7,13 +7,14 @@ import Router from '@/web/components/New/Router'
 import MenuBar from './MenuBar'
 import TopbarMobile from './Topbar/TopbarMobile'
 import { isIOS, isPWA, isSafari } from '@/web/utils/common'
+import Login from './Login'
 
 const LayoutMobile = () => {
   const playerSnapshot = useSnapshot(player)
   const showPlayer = !!playerSnapshot.track
 
   return (
-    <div id='layout' className='select-none bg-white pb-32 pt-3 dark:bg-black'>
+    <div id='layout' className='select-none bg-white pb-28 pt-3 dark:bg-black'>
       <main className='min-h-screen overflow-y-auto overflow-x-hidden pb-16'>
         <TopbarMobile />
         <Router />
@@ -48,6 +49,8 @@ const LayoutMobile = () => {
         <MenuBar />
       </div>
 
+      <Login />
+
       {/* Notch background */}
       {isIOS && isSafari && isPWA && (
         <div

packages/web/components/New/Login/Login.tsx

@@ -0,0 +1,80 @@
+import { cx, css } from '@emotion/css'
+import { useEffect, useRef, useState, useMemo } from 'react'
+import qrCode from 'qrcode'
+
+const QRCode = ({ className, text }: { className?: string; text: string }) => {
+  const [image, setImage] = useState<string>('')
+
+  useEffect(() => {
+    if (text) {
+      qrCode
+        .toString(text, {
+          margin: 0,
+          color: { light: '#ffffff00' },
+          type: 'svg',
+        })
+        .then(image => {
+          setImage(image)
+          console.log(image)
+        })
+    }
+  }, [text])
+
+  const encodedImage = useMemo(() => encodeURIComponent(image), [image])
+
+  return (
+    <img
+      className={cx('', className)}
+      src={`data:image/svg+xml;utf8,${encodedImage}`}
+    ></img>
+  )
+}
+
+const Login = () => {
+  return <div></div>
+  return (
+    <div className='fixed inset-0 z-30 flex justify-center rounded-24 bg-black/80 pt-56 backdrop-blur-3xl'>
+      <div className='flex flex-col items-center'>
+        <div
+          className={cx(
+            'rounded-48 bg-white/10 p-9',
+            css`
+              width: 392px;
+              height: fit-content;
+            `
+          )}
+        >
+          <div className='text-center text-18 font-medium text-night-600'>
+            Log in with NetEase QR
+          </div>
+
+          <div className='mt-4 rounded-24 bg-white p-2.5'>
+            <QRCode
+              text='tetesoahfoahdodaoshdoaish'
+              className={css`
+                border-radius: 17px;
+              `}
+            />
+          </div>
+
+          <div className='mt-4 flex items-center'>
+            <div className='h-px flex-grow bg-white/20'></div>
+            <div className='mx-2 text-16 font-medium text-white'>or</div>
+            <div className='h-px flex-grow bg-white/20'></div>
+          </div>
+
+          <div className='mt-4 flex justify-center'>
+            <button className='text-16 font-medium text-night-50'>
+              Use Phone or Email
+            </button>
+          </div>
+        </div>
+
+        {/* Close */}
+        <div className='mt-10 h-14 w-14 rounded-full bg-white/10'></div>
+      </div>
+    </div>
+  )
+}
+
+export default Login

packages/web/components/New/Login/index.tsx

@@ -0,0 +1,3 @@
+import Login from './Login'
+
+export default Login

packages/web/components/New/MenuBar.tsx

@@ -78,9 +78,12 @@ const TabName = () => {
 }
 
 const Tabs = () => {
+  const location = useLocation()
   const navigate = useNavigate()
   const controls = useAnimation()
-  const [active, setActive] = useState<string>(tabs[0].path)
+  const [active, setActive] = useState<string>(
+    location.pathname || tabs[0].path
+  )
 
   const animate = async (path: string) => {
     await controls.start((p: string) =>
@@ -96,7 +99,12 @@ const Tabs = () => {
           key={tab.name}
           animate={controls}
           transition={{ ease, duration: 0.18 }}
-          onMouseDown={() => animate(tab.path)}
+          onMouseDown={() => {
+            if ('vibrate' in navigator) {
+              navigator.vibrate(20)
+            }
+            animate(tab.path)
+          }}
           onClick={() => {
             setActive(tab.path)
             navigate(tab.path)

packages/web/components/New/PlayLikedSongsCard.tsx

@@ -1,93 +0,0 @@
-import useLyric from '@/web/api/hooks/useLyric'
-import usePlaylist from '@/web/api/hooks/usePlaylist'
-import useUserPlaylists from '@/web/api/hooks/useUserPlaylists'
-import { player } from '@/web/store'
-import { sample, chunk } from 'lodash-es'
-import { css, cx } from '@emotion/css'
-import { useState, useEffect, useMemo, useCallback } from 'react'
-import toast from 'react-hot-toast'
-import { useNavigate } from 'react-router-dom'
-
-const PlayLikedSongsCard = () => {
-  const navigate = useNavigate()
-
-  const { data: playlists } = useUserPlaylists()
-
-  const { data: likedSongsPlaylist } = usePlaylist({
-    id: playlists?.playlist?.[0].id ?? 0,
-  })
-
-  // Lyric
-  const [trackID, setTrackID] = useState(0)
-
-  useEffect(() => {
-    if (trackID === 0) {
-      setTrackID(
-        sample(likedSongsPlaylist?.playlist.trackIds?.map(t => t.id) ?? []) ?? 0
-      )
-    }
-  }, [likedSongsPlaylist?.playlist.trackIds, trackID])
-
-  const { data: lyric } = useLyric({
-    id: trackID,
-  })
-
-  const lyricLines = useMemo(() => {
-    return (
-      sample(
-        chunk(
-          lyric?.lrc.lyric
-            ?.split('\n')
-            ?.map(l => l.split(']').pop()?.trim())
-            ?.filter(
-              l =>
-                l &&
-                !l.includes('作词') &&
-                !l.includes('作曲') &&
-                !l.includes('纯音乐，请欣赏')
-            ),
-          4
-        )
-      ) ?? []
-    )
-  }, [lyric])
-
-  const handlePlay = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      if (!likedSongsPlaylist?.playlist.id) {
-        toast('无法播放歌单')
-        return
-      }
-      player.playPlaylist(likedSongsPlaylist.playlist.id)
-    },
-    [likedSongsPlaylist?.playlist.id]
-  )
-
-  return (
-    <div
-      className={cx(
-        'mx-2.5 flex flex-col justify-between rounded-24 p-8 dark:bg-white/10 lg:mx-0',
-        css`
-          height: 322px;
-        `
-      )}
-    >
-      <div className='text-18 font-medium text-white/20 lg:text-21'>
-        {lyricLines.map((line, index) => (
-          <div key={`${index}-${line}`}>{line}</div>
-        ))}
-      </div>
-      <div>
-        <button
-          onClick={handlePlay}
-          className='rounded-full bg-brand-700 py-5 px-6 text-16 font-medium text-white'
-        >
-          Play Now
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default PlayLikedSongsCard

packages/web/components/New/PlayingNext.tsx

@@ -112,7 +112,7 @@ const TrackList = ({ className }: { className?: string }) => {
     count: tracks.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 76,
-    overscan: 5,
+    overscan: 10,
   })
 
   return (

packages/web/components/New/Router.tsx

@@ -9,6 +9,7 @@ import React, { ReactNode, Suspense } from 'react'
 
 const My = React.lazy(() => import('@/web/pages/New/My'))
 const Discover = React.lazy(() => import('@/web/pages/New/Discover'))
+const Browse = React.lazy(() => import('@/web/pages/New/Browse'))
 const Album = React.lazy(() => import('@/web/pages/New/Album'))
 const Playlist = React.lazy(() => import('@/web/pages/New/Playlist'))
 
@@ -69,6 +70,7 @@ const Router = () => {
       <Routes location={location} key={location.pathname}>
         <Route path='/' element={lazy(<My />)} />
         <Route path='/discover' element={lazy(<Discover />)} />
+        <Route path='/browse' element={lazy(<Browse />)} />
         <Route path='/login' element={lazy(<Login />)} />
         <Route path='/album/:id' element={lazy(<Album />)} />
         <Route path='/playlist/:id' element={lazy(<Playlist />)} />

packages/web/components/New/Tabs.tsx

@@ -20,10 +20,10 @@ const Tabs = ({
         <div
           key={tab.id}
           className={cx(
-            'mr-2.5 rounded-12 py-3 px-6 text-16 font-medium ',
+            'mr-2.5 rounded-12 py-3 px-6 text-16 font-medium backdrop-blur transition duration-500',
             value === tab.id
               ? 'bg-brand-700 text-white'
-              : 'dark:bg-white/10 dark:text-white/20'
+              : 'dark:bg-white/10 dark:text-white/20 hover:dark:bg-white/20 hover:dark:text-white/40'
           )}
           onClick={() => onChange(tab.id)}
         >

packages/web/components/New/Topbar/SearchBox.tsx

@@ -20,7 +20,7 @@ const SearchBox = () => {
         className={cx(
           'flex-shrink bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200',
           css`
-            @media (max-width: 360px) {
+            @media (max-width: 420px) {
               width: 142px;
             }
           `

packages/web/components/New/Topbar/TopbarDesktop.tsx

@@ -4,6 +4,7 @@ import Avatar from './Avatar'
 import SearchBox from './SearchBox'
 import SettingsButton from './SettingsButton'
 import NavigationButtons from './NavigationButtons'
+import topbarBackground from '@/web/assets/images/topbar-background.png'
 
 const TopbarDesktop = () => {
   const location = useLocation()
@@ -11,13 +12,16 @@ const TopbarDesktop = () => {
   return (
     <div
       className={cx(
-        'app-region-drag fixed top-0 right-0 z-20 flex items-center justify-between overflow-hidden rounded-tr-24 pt-11 pb-10 pr-6 pl-10 ',
+        'app-region-drag fixed top-0 right-0 z-20 flex items-center justify-between overflow-hidden rounded-tr-24 bg-contain pt-11 pb-10 pr-6 pl-10',
         css`
           left: 104px;
         `,
         !location.pathname.startsWith('/album/') &&
           !location.pathname.startsWith('/playlist/') &&
-          'bg-gradient-to-b from-white dark:from-black'
+          !location.pathname.startsWith('/browse') &&
+          css`
+            background-image: url(${topbarBackground});
+          `
       )}
     >
       {/* Left Part */}

packages/web/components/New/TrackListHeader.tsx

@@ -12,7 +12,6 @@ import Image from './Image'
 import useIsMobile from '@/web/hooks/useIsMobile'
 import { memo, useEffect, useMemo, useRef } from 'react'
 import Hls from 'hls.js'
-import Plyr, { APITypes, PlyrProps, PlyrInstance } from 'plyr-react'
 import useVideoCover from '@/web/hooks/useVideoCover'
 import { motion } from 'framer-motion'
 import { ease } from '@/web/utils/const'
@@ -26,42 +25,20 @@ injectGlobal`
 `
 
 const VideoCover = ({ source }: { source?: string }) => {
-  const ref = useRef<APITypes>(null)
-  useEffect(() => {
-    const loadVideo = async () => {
-      if (!source || !Hls.isSupported()) return
-      const video = document.getElementById('plyr') as HTMLVideoElement
-      const hls = new Hls()
-      hls.loadSource(source)
-      hls.attachMedia(video)
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      ref.current!.plyr.media = video
+  const ref = useRef<HTMLVideoElement>(null)
+  const hls = useRef<Hls>(new Hls())
 
-      hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        // eslint-disable-next-line @typescript-eslint/no-extra-semi
-        ;(ref.current!.plyr as PlyrInstance).play()
-      })
+  useEffect(() => {
+    if (source && Hls.isSupported()) {
+      const video = document.querySelector('#video-cover') as HTMLVideoElement
+      hls.current.loadSource(source)
+      hls.current.attachMedia(video)
     }
-    loadVideo()
-  })
+  }, [source])
 
   return (
     <div className='z-10 aspect-square overflow-hidden rounded-24'>
-      <Plyr
-        id='plyr'
-        options={{
-          volume: 0,
-          controls: [],
-          autoplay: true,
-          clickToPlay: false,
-          loop: {
-            active: true,
-          },
-        }}
-        source={{} as PlyrProps['source']}
-        ref={ref}
-      />
+      <video id='video-cover' ref={ref} autoPlay muted loop />
     </div>
   )
 }
@@ -82,7 +59,6 @@ const Cover = memo(
           <Image
             className='absolute inset-0 h-full w-full'
             src={resizeImage(cover, 'lg')}
-            alt='Cover'
           />
 
           {videoCover && (