react-icons/ri#RiCloseLine JavaScript Examples

FloatingActionButton = ({ weekStart, setWeekStart, hiddenDays, setHiddenDays, darkMode, toggleDarkMode, hidden, setHiddenEvents, timeZone, setTimeZone }) => {
  const [menuOpen, setMenuOpen] = useState(false)
  return <div
    className={'fab' + (menuOpen ? ' fab--open' : '')}
    onMouseEnter={() => setMenuOpen(true)}
    onMouseLeave={() => setMenuOpen(false)}
  >
    <Button
      variant='secondary'
      className='fab-button'
      onClick={() => setMenuOpen(!menuOpen)}
    >
      {menuOpen ? <RiCloseLine size='2em' /> : <RiSettings4Fill size='2em' />}
    </Button>
    <div className='fab-actions'>
      <WeekStartAction {...{ setMenuOpen, weekStart, setWeekStart, hiddenDays }} />
      <HiddenDaysAction {...{ setMenuOpen, hiddenDays, setHiddenDays }} />
      <TimeZoneAction {...{ setMenuOpen, timeZone, setTimeZone, darkMode }} />
      <DarkModeAction {...{ darkMode, toggleDarkMode }} />
      {hidden.length ? <HiddenOccurrencesAction {...{ setMenuOpen, hidden, setHiddenEvents }} /> : <></>}
    </div>
  </div>
}

PlayerControls = ({
  token,
  play,
  authorized,
  login,
  logout,
  trackList,
  volume,
  setVolume,
  refreshToken,
}) => {
  const inside = useRef()
  const mainPlayer = useRef()
  const [closed, setClosed] = useLocalStorage("playerClosed", true)
  const [trackListOpen, { toggle: toggleTrackList, off: closeTrackList }] =
    useBoolean(false)
  const [volumeOpen, { toggle: toggleVolume, off: closeVolume }] =
    useBoolean(false)
  const [timedOut, setTimedOut] = useState(false)
  const timeoutTimer = useRef()
  const playbackState = usePlaybackState(true, 100)
  const player = useSpotifyPlayer()
  const playerDevice = usePlayerDevice()
  const scrollerColor = "bgSecondary"

  useOutsideClick({
    ref: inside,
    handler: () => {
      closeTrackList()
      closeVolume()
    },
  })

  function takeControl() {
    if (playerDevice?.device_id === undefined) return console.log("no device")

    if (token.current) {
      // https://developer.spotify.com/documentation/web-api/reference/#endpoint-transfer-a-users-playback
      fetch(`https://api.spotify.com/v1/me/player`, {
        method: "PUT",
        body: JSON.stringify({
          device_ids: [playerDevice.device_id],
          play: false,
        }),
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token.current}`,
        },
      })
    }
  }
  async function playSong(offset, isRetry = false) {
    const res = await play(playerDevice.device_id, trackListUris, offset)
    if (!res.ok && res.status === 401) {
      if (isRetry) {
        console.log(
          `Attempted to retry playing a song after a token refresh and it failed again`
        )
        return
      }
      refreshToken().then(() => {
        playSong(offset, true)
      })
    }
  }
  function handleClick(e) {
    e.preventDefault()
    if (!authorized || timedOut) {
      login()
      return
    }
    // we don't want to handle clicks from the surrounding components
    if (e.target !== mainPlayer.current) {
      return
    }
    if (player) {
      player.togglePlay()
    }
  }
  useEffect(() => {
    if (!playbackState && !timeoutTimer.current) {
      timeoutTimer.current = setTimeout(() => {
        setTimedOut(true)
      }, 6000)
      return
    }
    if (playbackState && timeoutTimer.current) {
      clearTimeout(timeoutTimer.current)
    }
    if (playbackState && timedOut) {
      setTimedOut(false)
    }
  }, [Boolean(playbackState)])
  useEffect(takeControl, [playerDevice?.device_id, authorized])
  const trackListUris = trackList?.tracks.items.map(item => item.uri)

  const trackName = playbackState?.track_window.current_track.name
  const albumName = playbackState?.track_window.current_track.artists[0].name
  const albumArt = playbackState?.track_window.current_track.album.images[0].url
  const thisMonth = months[new Date().getMonth()]

  return (
    <>
      <AnimatePresence>
        {closed && (
          <MotionBox
            position="fixed"
            bottom={[2, null, 4, 8]}
            left={[2, null, 4, 8]}
            cursor="pointer"
            onClick={() => setClosed(false)}
            initial={{ opacity: 1 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 1 }}
            zIndex={2}
          >
            <Box
              background="bgSecondary"
              borderRadius="lg"
              p={2}
              h={10}
              w={10}
              className="spotify-button"
            >
              <StaticImage
                quality="100"
                alt="Spotify logo"
                src="./spotify.png"
                placeholder="none"
                style={{
                  filter: playbackState?.paused
                    ? "grayscale(1)"
                    : "grayscale(0)",
                }}
              />
            </Box>
          </MotionBox>
        )}
      </AnimatePresence>

      <MotionFlex
        ref={inside}
        position="fixed"
        bottom={[2, 4, 8]}
        left={[2, 4, 8]}
        alignItems="center"
        zIndex={8}
        variants={{
          closed: { y: 200 },
          open: { y: 0 },
        }}
        transition={{ stiffness: 50 }}
        initial="closed"
        animate={closed ? "closed" : "open"}
        exit="open"
        cursor="pointer"
      >
        <Flex
          alignItems="center"
          flexFlow="column"
          ref={mainPlayer}
          onClick={handleClick}
        >
          <Flex position="relative" width="300px" background="bgSecondary">
            <Flex
              position="absolute"
              bottom="-40px"
              top="-30px"
              borderRadius="sm"
              overflow="hidden"
              left="100%"
              pointerEvents={volumeOpen ? "auto" : "none"}
            >
              <MotionBox
                ml={1}
                height="100%"
                overflow="hidden"
                css={{
                  "&::-webkit-scrollbar": {
                    width: "8px",
                  },
                  "&::-webkit-scrollbar-track": {
                    width: "8px",
                  },
                }}
                display="flex"
                justifyContent="center"
                flexDirection="column"
                width="30px"
                background="bgSecondary"
                transition={{ type: "tween", duration: 0.3 }}
                variants={{
                  open: { x: 0, opacity: 1 },
                  closed: { x: -40, opacity: 0 },
                }}
                initial="closed"
                animate={volumeOpen ? "open" : "closed"}
              >
                <Text fontSize="xs" color="text.400" textAlign="center" pt={2}>
                  {Math.floor(volume * 100)}
                </Text>
                <Box p={2} h="full">
                  <Slider
                    height="100%"
                    orientation="vertical"
                    value={volume * 100}
                    onChange={e => setVolume(e / 100)}
                  >
                    <SliderTrack background="bg.100">
                      <SliderFilledTrack bg="brandBackground.200" />
                    </SliderTrack>
                    <SliderThumb />
                  </Slider>
                </Box>
              </MotionBox>
            </Flex>
            <Box
              width="100%"
              position="absolute"
              bottom="100%"
              overflow="hidden"
              right={0}
              pointerEvents={trackListOpen ? "auto" : "none"}
            >
              <MotionBox
                background="bg.100"
                transition={{ type: "tween" }}
                variants={{
                  open: { y: 0 },
                  closed: { y: 700 },
                }}
                initial="closed"
                exit="closed"
                animate={trackListOpen ? "open" : "closed"}
              >
                <Flex
                  className="themed-scrollable"
                  maxHeight="600px"
                  overflowY="auto"
                  borderColor="borderSubtle"
                  borderWidth="1px"
                  spacing={4}
                  alignItems="flex-start"
                  overflowX="hidden"
                  flexFlow="column"
                >
                  {trackList.tracks.items.map((r, i) => {
                    // album images are sorted from biggest to smallest
                    const { images } = r.album
                    const albumArt = images[images.length - 1]
                    return (
                      <Flex
                        py={2}
                        px={3}
                        w="full"
                        key={r.uri}
                        _hover={{ background: scrollerColor }}
                        onClick={() => {
                          if (!authorized) {
                            return login()
                          }
                          if (timedOut || !playerDevice) {
                            return
                          }
                          playSong(i)
                        }}
                        alignItems="center"
                        background={
                          playbackState?.track_window.current_track.uri ===
                          r.uri
                            ? "bgSecondary"
                            : ""
                        }
                        filter={
                          timedOut || !authorized
                            ? "grayscale(1)"
                            : "grayscale(0)"
                        }
                      >
                        <Box
                          width={7}
                          whiteSpace="nowrap"
                          textAlign="right"
                          color="text.400"
                          fontSize="xs"
                          pr={3}
                        >
                          {i + 1}
                        </Box>
                        <Image
                          src={albumArt?.url}
                          alt={`Song: ${r.name}`}
                          h={8}
                          w={8}
                          marginInlineEnd={2}
                          loading="lazy"
                          // spotify CDN doesn't support HTTP2 and needs to be
                          // marked as low priority to prevent it from hogging
                          // precious bandwidth
                          fetchpriorit="low"
                        />
                        <VStack alignItems="flex-start" spacing={0}>
                          <Text
                            fontWeight="bold"
                            fontSize="sm"
                            lineHeight="1.2"
                          >
                            {r.name}
                          </Text>
                          <Text fontSize="xs" lineHeight="1.2">
                            {r.artists[0]?.name ?? "Unknown artist"}
                          </Text>
                        </VStack>
                      </Flex>
                    )
                  })}
                </Flex>
                <Text
                  as="h2"
                  textAlign="center"
                  width="65%"
                  ml={6}
                  mt={1}
                  py={2}
                  lineHeight="1.2"
                  fontSize="xs"
                  fontWeight="medium"
                  color="text.100"
                  letterSpacing="1.1px"
                  textTransform="uppercase"
                >
                  {thisMonth} favorites
                </Text>
              </MotionBox>
            </Box>
            <Flex
              position="absolute"
              bottom="100%"
              right={0}
              left={0}
              justifyContent="space-between"
            >
              {authorized ? (
                <Tooltip label="Logout">
                  <Flex
                    background="bgSecondary"
                    p={1}
                    mb={1}
                    borderRadius="sm"
                    onClick={logout}
                  >
                    <RiLogoutBoxLine size={BUTTON_SIZE} />
                  </Flex>
                </Tooltip>
              ) : (
                <Box />
              )}
              <HStack spacing={1} mb={1} justifyContent="flex-end">
                <AnimatePresence>
                  {!closed && (
                    <Tooltip
                      label={
                        trackListOpen ? "Hide tracklist" : "Show tracklist"
                      }
                    >
                      <MotionFlex
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        exit={{ y: -20, opacity: 0 }}
                        transition={{ delay: 0.15, stiffness: 20 }}
                        background="bgSecondary"
                        p={1}
                        borderRadius="sm"
                        onClick={e => {
                          e.stopPropagation()
                          toggleTrackList()
                        }}
                      >
                        <RiFolderMusicLine size={BUTTON_SIZE} />
                      </MotionFlex>
                    </Tooltip>
                  )}
                </AnimatePresence>
                {authorized && (
                  <Tooltip label="Volume">
                    <MotionFlex
                      background="bgSecondary"
                      p={1}
                      borderRadius="sm"
                      onClick={e => {
                        e.stopPropagation()
                        toggleVolume()
                      }}
                    >
                      <RiVolumeUpLine size={BUTTON_SIZE} />
                    </MotionFlex>
                  </Tooltip>
                )}
                <AnimatePresence>
                  {!closed && (
                    <Tooltip label="Minimize">
                      <MotionFlex
                        background="bgSecondary"
                        p={1}
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        exit={{ y: -20, opacity: 0 }}
                        transition={{ delay: 0.3, stiffness: 20 }}
                        borderRadius="sm"
                        onClick={e => {
                          e.stopPropagation()
                          closeTrackList()
                          closeVolume()
                          setClosed(true)
                        }}
                      >
                        <RiCloseLine size={BUTTON_SIZE} />
                      </MotionFlex>
                    </Tooltip>
                  )}
                </AnimatePresence>
              </HStack>
            </Flex>
            <Flex
              w="70px"
              h="70px"
              overflow="hidden"
              maxWidth="100%"
              alignItems="center"
              justifyContent="center"
            >
              <AlbumCover
                state={
                  playbackState
                    ? { type: "ready", src: albumArt }
                    : !authorized
                    ? { type: "notAuthorized" }
                    : timedOut
                    ? { type: "timedOut" }
                    : { type: "waiting" }
                }
              />
            </Flex>
            <HStack marginInlineStart={1} p={2}>
              <VStack spacing={2} alignItems="flex-start" color="text.300">
                {trackName ? (
                  <Text
                    fontSize="sm"
                    fontWeight="bold"
                    lineHeight="1.2"
                    color="text.100"
                  >
                    {trackName}
                  </Text>
                ) : !authorized ? (
                  <Text fontSize="sm" fontWeight="bold" lineHeight="1.2">
                    Got Spotify premium?
                  </Text>
                ) : timedOut ? (
                  <Text fontSize="sm" fontWeight="bold" lineHeight="1">
                    Couldn't connect to Spotify
                  </Text>
                ) : (
                  <Skeleton height="15px" width="80px" />
                )}
                {albumName ? (
                  <Text fontSize="xs" lineHeight="1.2">
                    {albumName}
                  </Text>
                ) : !authorized ? (
                  <Text fontSize="xs" lineHeight="1">
                    Click to vibe to my playlists
                  </Text>
                ) : timedOut ? (
                  <Text fontSize="xs" lineHeight="1">
                    Click to re-authorize
                  </Text>
                ) : (
                  <Skeleton height="8px" width="30px" />
                )}
              </VStack>
            </HStack>
            {playbackState && (
              <Tooltip label="Track's Spotify page">
                <Link
                  p={1}
                  borderColor="borderSubtle"
                  right={2}
                  bottom={2}
                  w={7}
                  h={7}
                  target="_blank"
                  rel="noopener noreferrer"
                  href={`https://open.spotify.com/track/${playbackState.track_window.current_track.id}`}
                  position="absolute"
                  borderWidth="1px"
                  borderRadius="lg"
                  overflow="hidden"
                >
                  <StaticImage
                    quality="100"
                    alt="Spotify logo"
                    src="./spotify.png"
                    placeholder="none"
                  />
                </Link>
              </Tooltip>
            )}
          </Flex>
          <Flex
            background="bgSecondary"
            mt={1}
            w="full"
            h="35px"
            position="relative"
            borderTopRadius="sm"
            alignItems="center"
            justifyContent="center"
          >
            {!authorized ? (
              <Text fontSize="xs" color="text.400">
                This widget connects to your Spotify account
              </Text>
            ) : timedOut ? (
              <Text fontSize="xs" color="text.300">
                Maybe change devices in your Spotify app?
              </Text>
            ) : playbackState ? (
              <HStack py={1}>
                <Box
                  p={1}
                  borderColor="borderSubtle"
                  borderWidth="1px"
                  borderRadius="lg"
                  overflow="hidden"
                  onClick={() => player?.previousTrack()}
                >
                  {!playbackState?.disallows.skipping_prev && (
                    <RiSkipBackLine size={BUTTON_SIZE} />
                  )}
                </Box>
                <Box
                  p={1}
                  borderColor="borderSubtle"
                  borderWidth="1px"
                  borderRadius="lg"
                  overflow="hidden"
                  onClick={() => player?.togglePlay()}
                >
                  {!playbackState && (
                    <Skeleton
                      height={BUTTON_SIZE}
                      width={BUTTON_SIZE}
                      borderRadius="lg"
                    />
                  )}
                  {playbackState?.disallows.resuming && (
                    <RiPauseLine size={BUTTON_SIZE} />
                  )}
                  {playbackState?.disallows.pausing && (
                    <RiPlayLine size={BUTTON_SIZE} />
                  )}
                </Box>
                <Box
                  p={1}
                  borderColor="borderSubtle"
                  borderWidth="1px"
                  borderRadius="lg"
                  overflow="hidden"
                  onClick={() => player?.nextTrack()}
                >
                  {!playbackState?.disallows.skipping_next && (
                    <RiSkipForwardLine size={BUTTON_SIZE} />
                  )}
                </Box>
              </HStack>
            ) : (
              <Skeleton w="full" h="35px" />
            )}
            {playbackState && (
              <Seeker
                position={playbackState.position}
                duration={playbackState.duration}
                seek={e => player.seek(e)}
              />
            )}
          </Flex>
        </Flex>
      </MotionFlex>
    </>
  )
}