Hugging Face's logo

Spaces:
privateone
/
tubeone
Paused

App Files Community
tubeone
File size: 2,971 Bytes
bd903ab
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React, { useCallback, useContext, useEffect, useState } from "react";
import {
  Box,
  Flex,
  IconButton,
  Input,
  InputGroup,
  Text,
} from "@chakra-ui/react";
import { BiArrowBack, BiSearch } from "react-icons/bi";
import { MdKeyboardVoice } from "react-icons/md";
import { NavLink, useNavigate } from "react-router-dom";
import { debounce } from "lodash";

import YoutubeContext from "../../context/YoutubeContext";

const MobileSearch = () => {
  const { generateAutocomplete, autocomplete } = useContext(YoutubeContext);
  const [searchText, setSearchText] = useState("");

  const generateAutocompleteFun = useCallback(
    debounce((query) => {
      generateAutocomplete(query);
    }, 500),
    []
  );
  
  const navigate = useNavigate();

  const searchFun = () => {
    navigate(`/?query=${searchText}`);
  };

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <>
      <Box width={"100%"} minHeight={"100vh"} bg={"#0f0f0f"}>
        <Flex padding={"8px 15px"} align={"center"} gap={4}>
          <Text fontSize={"xl"} _hover={{ cursor: "pointer" }}>
            <NavLink to="/">
              <BiArrowBack color="white" />
            </NavLink>
          </Text>
          <InputGroup>
            <Input
              border={"none"}
              color={"white"}
              placeholder="Search YouTube"
              borderRadius={"30px"}
              bg={"#303030"}
              height={"fit-content"}
              padding={"5px 15px"}
              _focusVisible={false}
              value={searchText || ""}
              onChange={(e) => {
                setSearchText(e.target.value);
                generateAutocompleteFun(e.target.value);
              }}
              onKeyDown={(event) => {
                if (event.key === "Enter") {
                  searchFun();
                }
              }}
            />
          </InputGroup>
          {!searchText && (
            <IconButton
              size={"sm"}
              bg={"#303030"}
              _hover={{ bg: "#424242" }}
              borderRadius="100%"
              aria-label="Mice"
              icon={<MdKeyboardVoice color="white" size={"24px"} />}
            />
          )}
        </Flex>

        <AutoSuggetionMobile autocomplete={autocomplete} />
      </Box>
    </>
  );
};

export default MobileSearch;

const AutoSuggetionMobile = ({ autocomplete }) => (
  <>
    <Flex direction={"column"} gap={2} marginTop={"15px"}>
      {autocomplete &&
        autocomplete.slice(0, 9).map((text) => (
          <Box key={text} _hover={{ bg: "#3a3a3a" }}>
            <NavLink to={`/?query=${text}`}>
              <Flex padding={"10px 15px"} align={"center"} gap={5}>
                <Text fontSize={"xl"}>
                  <BiSearch color={"white"} />
                </Text>
                <Text color={"white"}>{text}</Text>
              </Flex>
            </NavLink>
          </Box>
        ))}
    </Flex>
  </>
);