Merge pull request #51 from peersky/stop-button

Stop button
pull/49/head
Tim Pechersky 2021-08-03 21:41:40 +08:00 zatwierdzone przez GitHub
commit cda592d3f6
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
2 zmienionych plików z 19 dodań i 3 usunięć

Wyświetl plik

@ -123,7 +123,6 @@ const Homepage = () => {
}, [isInit, router]); }, [isInit, router]);
useLayoutEffect(() => { useLayoutEffect(() => {
console.log("rerender check");
const imageLoader720 = new Image(); const imageLoader720 = new Image();
imageLoader720.src = `${AWS_PATH}/background720.png`; imageLoader720.src = `${AWS_PATH}/background720.png`;
imageLoader720.onload = () => { imageLoader720.onload = () => {

Wyświetl plik

@ -31,6 +31,7 @@ import {
TagLabel, TagLabel,
TagCloseButton, TagCloseButton,
Spacer, Spacer,
useBoolean,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { useSubscriptions } from "../core/hooks"; import { useSubscriptions } from "../core/hooks";
import StreamEntry from "./StreamEntry"; import StreamEntry from "./StreamEntry";
@ -38,6 +39,7 @@ import UIContext from "../core/providers/UIProvider/context";
import { FaFilter } from "react-icons/fa"; import { FaFilter } from "react-icons/fa";
import useStream from "../core/hooks/useStream"; import useStream from "../core/hooks/useStream";
import { ImCancelCircle } from "react-icons/im"; import { ImCancelCircle } from "react-icons/im";
import { IoStopCircleOutline, IoPlayCircleOutline } from "react-icons/io5";
const pageSize = 25; const pageSize = 25;
const FILTER_TYPES = { const FILTER_TYPES = {
@ -61,6 +63,7 @@ const CONDITION = {
const EntriesNavigation = () => { const EntriesNavigation = () => {
const ui = useContext(UIContext); const ui = useContext(UIContext);
const [isStreamOn, setStreamState] = useBoolean(true);
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const { subscriptionsCache } = useSubscriptions(); const { subscriptionsCache } = useSubscriptions();
const [newFilterState, setNewFilterState] = useState([ const [newFilterState, setNewFilterState] = useState([
@ -80,7 +83,7 @@ const EntriesNavigation = () => {
pageSize, pageSize,
refreshRate: 1500, refreshRate: 1500,
searchQuery: ui.searchTerm, searchQuery: ui.searchTerm,
enabled: true, enabled: isStreamOn,
isContent: false, isContent: false,
}); });
@ -358,8 +361,22 @@ const EntriesNavigation = () => {
</DrawerFooter> </DrawerFooter>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
<Flex h="3rem" w="100%" bgColor="gray.200" alignItems="center"> <Flex h="3rem" w="100%" bgColor="gray.100" alignItems="center">
<Flex maxW="90%"> <Flex maxW="90%">
<Flex direction="column">
<IconButton
size="sm"
onClick={() => setStreamState.toggle()}
icon={
isStreamOn ? (
<IoStopCircleOutline size="32px" />
) : (
<IoPlayCircleOutline size="32px" />
)
}
colorScheme={isStreamOn ? "unsafe" : "suggested"}
/>
</Flex>
{filterState.map((filter, idx) => { {filterState.map((filter, idx) => {
if (filter.type === FILTER_TYPES.DISABLED) return ""; if (filter.type === FILTER_TYPES.DISABLED) return "";
return ( return (