ScheduledStreams: don't apply horiz scroll in Medium screen

This commit is contained in:
infinite-persistence 2022-03-02 10:15:06 +08:00 committed by Thomas Zarebczan
parent 82c4170e64
commit 19dc09b262

View file

@ -4,7 +4,7 @@ import React from 'react';
import * as CS from 'constants/claim_search'; import * as CS from 'constants/claim_search';
import moment from 'moment'; import moment from 'moment';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import { useIsMediumScreen, useIsLargeScreen } from 'effects/use-screensize'; import { useIsLargeScreen, useIsMobile } from 'effects/use-screensize';
import ClaimListDiscover from 'component/claimListDiscover'; import ClaimListDiscover from 'component/claimListDiscover';
import Button from 'component/button'; import Button from 'component/button';
import { LIVESTREAM_UPCOMING_BUFFER } from 'constants/livestream'; import { LIVESTREAM_UPCOMING_BUFFER } from 'constants/livestream';
@ -34,21 +34,21 @@ const ScheduledStreams = (props: Props) => {
onLoad, onLoad,
showHideSetting = true, showHideSetting = true,
} = props; } = props;
const isMediumScreen = useIsMediumScreen(); const isMobileScreen = useIsMobile();
const isLargeScreen = useIsLargeScreen(); const isLargeScreen = useIsLargeScreen();
const [totalUpcomingLivestreams, setTotalUpcomingLivestreams] = React.useState(0); const [totalUpcomingLivestreams, setTotalUpcomingLivestreams] = React.useState(0);
const [showAllUpcoming, setShowAllUpcoming] = React.useState(false); const [showAllUpcoming, setShowAllUpcoming] = React.useState(false);
const showUpcomingLivestreams = totalUpcomingLivestreams > 0; const showUpcomingLivestreams = totalUpcomingLivestreams > 0;
const useSwipeLayout = totalUpcomingLivestreams > 1 && isMediumScreen; const useSwipeLayout = totalUpcomingLivestreams > 1 && isMobileScreen;
const upcomingMax = React.useMemo(() => { const upcomingMax = React.useMemo(() => {
if (showAllUpcoming || useSwipeLayout) return 50; if (showAllUpcoming || useSwipeLayout) return 50;
if (isLargeScreen) return 6; if (isLargeScreen) return 6;
if (isMediumScreen) return 3; if (isMobileScreen) return 3;
return 4; return 4;
}, [showAllUpcoming, isMediumScreen, isLargeScreen, useSwipeLayout]); }, [showAllUpcoming, isMobileScreen, isLargeScreen, useSwipeLayout]);
const loadedCallback = (total) => { const loadedCallback = (total) => {
setTotalUpcomingLivestreams(total); setTotalUpcomingLivestreams(total);