mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Ivan VasilovandJoshen Lim
05a542ccea
* Add lucide-react to docs (to make the autocomplete work). * Migrate the docs app icons. * Migrate the ui-patterns. * Remove the old icons from ui package. * Migrate the www app from react-feather icons. * Migrate all of studio icons. * Migrate the only component in design-system. * Fix an old import in ui package. Revert an import in docs app. * Fix some pages in www. * Remove unneeded files used in generation of icons. * Fix a prettier error. * Fix more issues in www. * Fix an issue in Log Date picker. * Replace all string sizes with number sizes because the icons grew in some cases. * Fix more imports in security page. * Fix an extra import. * Remove the size prop from all icons if they're in a button and they match the button size. * Minor fixes for docs and www. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import { ArrowRight } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { useAudio } from 'react-use'
|
|
import { cn } from 'ui'
|
|
|
|
const Player = () => {
|
|
const [audio, state, controls, ref] = useAudio({
|
|
src: 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/audio/supabase-album/Bernard.m4a',
|
|
loop: true,
|
|
})
|
|
|
|
const isPlaying = state.playing
|
|
const trackName = audio.props.src?.split('/')?.slice(-1)?.toString()?.split('.')[0]
|
|
const duration = ref?.current?.duration ?? 0
|
|
const progress = (state.time * 100) / duration
|
|
const playerLength = 47
|
|
const playerProgress = -(progress * playerLength) / 100 - playerLength
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
{audio}
|
|
<Link
|
|
href="https://supabase.productions/"
|
|
target="_blank"
|
|
className={cn(
|
|
'opacity-0 outline-none group translate-x-2 !ease-[.24,0,.22,.99] duration-200 transition-all text-foreground-muted hover:text-foreground !leading-3 font-mono uppercase text-[10px] flex flex-col text-right',
|
|
isPlaying && 'opacity-100 translate-x-0'
|
|
)}
|
|
>
|
|
<span className="text-border-strong">Now playing</span>
|
|
<span className="tracking-widest flex justify-end gap-px text-right translate-x-0 transition-transform group-hover:-translate-x-2">
|
|
{trackName}
|
|
<ArrowRight className="w-3 h-3 opacity-0 group-hover:opacity-100 -mr-full absolute -right-3 text-current transition-opacity" />
|
|
</span>
|
|
</Link>
|
|
<button
|
|
onClick={isPlaying ? controls.pause : controls.play}
|
|
className="relative outline-border-muted w-7 h-7 opacity-70 hover:opacity-100 rounded-full flex items-center justify-center text-foreground-muted hover:text-foreground-lighter transition-opacity"
|
|
style={{
|
|
background: `radial-gradient(closest-side, #060809 79%, transparent 95% 100%),conic-gradient(hsl(var(--foreground-lighter)) ${progress.toFixed()}%, hsl(var(--border-muted)) 0)`,
|
|
}}
|
|
>
|
|
<svg
|
|
className="absolute inset-0 w-full h-full -rotate-90"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle opacity="0.1" cx="8" cy="8" r="7.5" stroke="hsl(var(--foreground-default))" />
|
|
<circle
|
|
cx="8"
|
|
cy="8"
|
|
r="7.5"
|
|
stroke="white"
|
|
opacity="0.4"
|
|
strokeLinecap="round"
|
|
className={cn('transition-opacity', isPlaying ? 'opacity-30' : 'opacity-10')}
|
|
strokeDasharray={playerLength}
|
|
strokeDashoffset={playerProgress}
|
|
/>
|
|
</svg>
|
|
|
|
{isPlaying ? (
|
|
<svg
|
|
className="w-2.5 h-2.5"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect x="1" width="4" height="12" fill="currentColor" />
|
|
<rect x="7" width="4" height="12" fill="currentColor" />
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
className="w-2.5 h-2.5 transform translate-x-px"
|
|
width="11"
|
|
height="12"
|
|
viewBox="0 0 11 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M11.0075 6L0.20752 0V12" fill="currentColor" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Player
|