pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[enhancement]: add codec column for tracks

Browse source
This commit is contained in:
Kendall Garner 2024-02-19 23:04:41 -08:00
parent 860dd8b499
commit 77e220c873
No known key found for this signature in database
GPG key ID: 18D2767419676C87
1 changed files with 41 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/renderer/components/grid-carousel/index.tsx
View file

@ -115,6 +115,7 @@ export const SwiperGridCarousel = ({
isLoading, isLoading,
uniqueId, uniqueId,
}: SwiperGridCarouselProps) => { }: SwiperGridCarouselProps) => {
const containerRef = useRef<HTMLDivElement>(null);
const swiperRef = useRef<SwiperCore | any>(null); const swiperRef = useRef<SwiperCore | any>(null);
const playButtonBehavior = usePlayButtonBehavior(); const playButtonBehavior = usePlayButtonBehavior();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
@ -247,7 +248,9 @@ export const SwiperGridCarousel = ({
useLayoutEffect(() => { useLayoutEffect(() => {
const handleResize = () => { const handleResize = () => {
const { activeIndex, params, slides, width } = // Use the container div ref and not swiper width, as this value is more accurate
const width = containerRef.current?.clientWidth;
const { activeIndex, params, slides } =
(swiperRef.current as SwiperCore | undefined) ?? {}; (swiperRef.current as SwiperCore | undefined) ?? {};
if (width) { if (width) {
@ -279,41 +282,43 @@ export const SwiperGridCarousel = ({
className="grid-carousel" className="grid-carousel"
spacing="md" spacing="md"
> >
{title ? ( <div ref={containerRef}>
<Title {title ? (
{...title} <Title
handleNext={handleNext} {...title}
handlePrev={handlePrev} handleNext={handleNext}
pagination={pagination} handlePrev={handlePrev}
/> pagination={pagination}
) : null} />
<Swiper ) : null}
ref={swiperRef} <Swiper
resizeObserver ref={swiperRef}
modules={[Virtual]} resizeObserver
slidesPerView={slideCount} modules={[Virtual]}
spaceBetween={20} slidesPerView={slideCount}
style={{ height: '100%', width: '100%' }} spaceBetween={20}
onBeforeInit={(swiper) => { style={{ height: '100%', width: '100%' }}
swiperRef.current = swiper; onBeforeInit={(swiper) => {
}} swiperRef.current = swiper;
onReachBeginning={handleOnReachBeginning} }}
onReachEnd={handleOnReachEnd} onReachBeginning={handleOnReachBeginning}
onSlideChange={handleOnSlideChange} onReachEnd={handleOnReachEnd}
onZoomChange={handleOnZoomChange} onSlideChange={handleOnSlideChange}
{...swiperProps} onZoomChange={handleOnZoomChange}
> {...swiperProps}
{slides.map((slideContent, index) => { >
return ( {slides.map((slideContent, index) => {
<SwiperSlide return (
key={`${uniqueId}-${slideContent?.props?.data?.id}-${index}`} <SwiperSlide
virtualIndex={index} key={`${uniqueId}-${slideContent?.props?.data?.id}-${index}`}
> virtualIndex={index}
{slideContent} >
</SwiperSlide> {slideContent}
); </SwiperSlide>
})} );
</Swiper> })}
</Swiper>
</div>
</CarouselContainer> </CarouselContainer>
); );
}; };