feat: updates

2025-12-17 13:48:02 +00:00 · 2023-01-07 14:39:03 +08:00 · 2023-01-07 14:39:03 +08:00 · c6c59b2cd9
commit c6c59b2cd9
parent 884f3df41a
84 changed files with 3531 additions and 2616 deletions
--- a/packages/web/components/VideoPlayer/VideoPlayer.tsx
+++ b/packages/web/components/VideoPlayer/VideoPlayer.tsx
@ -0,0 +1,117 @@
+import { css, cx } from '@emotion/css'
+import { createPortal } from 'react-dom'
+import useMV, { useMVUrl } from '../../api/hooks/useMV'
+import { AnimatePresence, motion } from 'framer-motion'
+import { ease } from '@/web/utils/const'
+import Icon from '../Icon'
+import VideoInstance from './VideoInstance'
+import { toHttps } from '@/web/utils/common'
+import uiStates, { closeVideoPlayer } from '@/web/states/uiStates'
+import { useSnapshot } from 'valtio'
+import { useNavigate } from 'react-router-dom'
+
+const VideoPlayer = () => {
+  const { playingVideoID } = useSnapshot(uiStates)
+  const { fullscreen } = useSnapshot(uiStates)
+  const navigate = useNavigate()
+
+  const { data: mv, isLoading } = useMV({ mvid: playingVideoID || 0 })
+  const { data: mvDetails } = useMVUrl({ id: playingVideoID || 0 })
+  const mvUrl = toHttps(mvDetails?.data?.url)
+  const poster = toHttps(mv?.data.cover)
+
+  return createPortal(
+    <AnimatePresence>
+      {playingVideoID && (
+        <div
+          id='video-player'
+          className={cx(
+            'fixed inset-0 z-20 flex select-none items-center justify-center overflow-hidden',
+            window.env?.isElectron && !fullscreen && 'rounded-24'
+          )}
+        >
+          {/* Blur bg */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ ease, duration: 0.5 }}
+            className='absolute inset-0 bg-gray-50/80 backdrop-blur-3xl'
+          ></motion.div>
+
+          <motion.div
+            variants={{
+              visible: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                  duration: 0.3,
+                  ease,
+                  delay: 0.2,
+                },
+              },
+              hidden: {
+                opacity: 0,
+                y: 100,
+                transition: {
+                  duration: 0.3,
+                  ease,
+                },
+              },
+            }}
+            initial='hidden'
+            animate='visible'
+            exit='hidden'
+            className='relative'
+          >
+            {/* Video Title */}
+            <div className='absolute -top-16 flex cursor-default text-32 font-medium text-white transition-all'>
+              {isLoading ? (
+                <span className='rounded-full bg-white/10 text-transparent'>PLACEHOLDER2023</span>
+              ) : (
+                <>
+                  <div className='line-clamp-1' title={mv?.data.artistName + ' - ' + mv?.data.name}>
+                    <a
+                      onClick={() => {
+                        if (!mv?.data.artistId) return
+                        closeVideoPlayer()
+                        navigate('/artist/' + mv.data.artistId)
+                      }}
+                      className='transition duration-400 hover:underline'
+                    >
+                      {mv?.data.artistName}
+                    </a>{' '}
+                    - {mv?.data.name}
+                  </div>
+                  <div className='ml-4 text-white/20'>{mv?.data.publishTime.slice(0, 4)}</div>
+                </>
+              )}
+            </div>
+
+            {/* Video */}
+            <VideoInstance src={mvUrl} poster={poster} />
+
+            {/* Close button */}
+            <div className='absolute -bottom-24 flex w-full justify-center'>
+              <motion.div
+                layout='position'
+                transition={{ ease }}
+                onClick={() => {
+                  const video = document.querySelector('#video-player video') as HTMLVideoElement
+                  video?.pause()
+                  closeVideoPlayer()
+                }}
+                className='flex h-14 w-14 items-center justify-center rounded-full bg-white/10 text-white/50 transition-colors duration-300 hover:bg-white/20 hover:text-white/70'
+              >
+                <Icon name='x' className='h-6 w-6' />
+              </motion.div>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body
+  )
+}
+
+export default VideoPlayer