@revealui/core 0.0.1-pre.0

package/dist/ui/controls/PlayerContent.tsx

@@ -0,0 +1,205 @@
+// eslint-disable-next-line prettier/prettier
+
+import React, { useEffect, useState } from "react";
+import { Button, LikeButton } from "../buttons";
+
+const BsPauseFill = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="text-white"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M14 5H10V19H14V5ZM21 5H17V19H21V5Z"
+    />
+  </svg>
+);
+
+const BsPlayFill = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="text-white"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M9 5H7C5.89543 5 5 5.89543 5 7V17C5 18.1046 5.89543 19 7 19H9C10.1046 19 11 18.1046 11 17V7C11 5.89543 10.1046 5 9 5ZM19 5H17C15.8954 5 15 5.89543 15 7V17C15 18.1046 15.8954 19 17 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z"
+    />
+  </svg>
+);
+
+const HiSpeakerWave = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="text-white"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M14.1213 8.46447C15.2929 9.63604 15.2929 11.3639 14.1213 12.5355M17.5355 5.05025C19.8787 7.39339 19.8787 11.6066 17.5355 13.9497M20.9497 1.63604C23.2929 3.97918 23.2929 8.19239 20.9497 10.5355M10.6066 14.9497C8.26339 17.2929 3.05025 17.2929 0.707107 14.9497M5.05025 10.5355C2.70711 8.19239 2.70711 3.97918 5.05025 1.63604M8.46447 12.5355C7.29289 11.3639 7.29289 9.63604 8.46447 8.46447"
+    />
+  </svg>
+);
+
+const HiSpeakerXMark = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="text-white"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M13 10H11M17 10H15M9 16H7M15 16H13M12 20C15.3137 20 18 17.3137 18 14V4C18 2.89543 17.1046 2 16 2H8C6.89543 2 6 2.89543 6 4V14C6 17.3137 8.68629 20 12 20Z"
+    />
+
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M12 20C8.68629 20 6 17.3137 6 14V4C6 2.89543 6.89543 2 8 2H16C17.1046 2 18 2.89543 18 4V14C18 17.3137 15.3137 20 12 20Z"
+    />
+  </svg>
+);
+
+const AiFillStepBackward = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="text-white"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M11 19V5M5 12L11 5L11 19Z"
+    />
+  </svg>
+);
+
+const AiFillStepForward = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="text-white"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M13 5V19M19 12L13 19L13 5Z"
+    />
+  </svg>
+);
+
+const PlayerContent: React.FC<{
+  music: string;
+}> = ({ music }) => {
+  const [volume, setVolume] = useState<number>(1);
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [currentSongIndex, setCurrentSongIndex] = useState<number>(0);
+
+  const Icon = isPlaying ? BsPauseFill : BsPlayFill;
+  const VolumeIcon = volume === 0 ? HiSpeakerXMark : HiSpeakerWave;
+
+  useEffect(() => {
+    // Assuming 'music' is an array of song objects
+    if (music && music.length > 0) {
+      setCurrentSongIndex(0);
+      // Set the initial song or handle loading of songs
+    }
+  }, [music]);
+
+  const playSong = () => {
+    // Implement play functionality
+    setIsPlaying(true);
+    setVolume(1);
+    // Add logic to play the song, e.g., using an audio library or HTML5 audio
+  };
+
+  const pauseSong = () => {
+    // Implement pause functionality
+    setIsPlaying(false);
+    setVolume(0);
+    // Add logic to pause the song
+  };
+
+  // const onPlayNext = () => {
+  //   setCurrentSongIndex((prevIndex) => (prevIndex + 1) % music.length);
+  //   // Add logic to play next song
+  // };
+
+  // const onPlayPrevious = () => {
+  //   setCurrentSongIndex((prevIndex) => {
+  //     return prevIndex === 0 ? music.length - 1 : prevIndex - 1;
+  //   });
+  //   // Add logic to play previous song
+  // };
+
+  // const toggleMute = () => {
+  //   setVolume(volume === 0 ? 1 : 0);
+  //   // Add logic to adjust volume
+  // };
+  const id = music[currentSongIndex];
+  return (
+    <div className="grid h-full grid-cols-2 md:grid-cols-3">
+      {/* <MediaItem
+        data={music[currentSongIndex]}
+        onPlay={() => playSong()}
+        onClick={() => playSong()}
+      /> */}
+
+      <LikeButton songId={id} />
+
+      {/* Player Controls */}
+      <div className="flex items-center justify-between md:col-span-2 md:justify-center">
+        <AiFillStepBackward
+        // onClick={onPlayPrevious}
+        // className="cursor-pointer text-neutral-400 transition hover:text-white"
+        // size={30}
+        />
+        <Button
+          onClick={isPlaying ? pauseSong : playSong}
+          className="flex size-10 items-center justify-center rounded-full bg-white p-1"
+        >
+          <Icon />
+        </Button>
+        <AiFillStepForward
+        // onClick={onPlayNext}
+        // className="cursor-pointer text-neutral-400 transition hover:text-white"
+        // size={30}
+        />
+
+        {/* Volume Control */}
+        <div className="ml-6 hidden w-[120px] items-center md:flex">
+          <VolumeIcon
+          // onClick={toggleMute}
+          // className="cursor-pointer"
+          // size={20}
+          />
+          {/* <MusicSlider
+            value={volume}
+            onChange={(value) => setVolume(value)}
+            className="w-full"
+          /> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlayerContent;

package/dist/ui/controls/SearchContent.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import LikeButton from "../buttons/LikeButton";
+import MediaItem from "../forms/MediaItem";
+
+const SearchContent = ({
+  songs,
+}: {
+  songs: {
+    id: string;
+    name: string;
+    artist: {
+      name: string;
+    };
+  }[];
+}) => {
+  const [activeId, setId] = React.useState("");
+  const ids = songs.map((song) => song.id);
+
+  const handlePlay = (id: string) => {
+    setId(id);
+  };
+
+  if (songs.length === 0) {
+    return (
+      <div className="flex w-full flex-col gap-y-2 px-6 text-neutral-400">
+        No songs found.
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div>
+        {ids.map((id) => (
+          <button key={id} onClick={() => handlePlay(id)}>
+            {id === activeId ? "Playing" : "Play"} - Item {id}
+          </button>
+        ))}
+      </div>
+      <div className="flex w-full flex-col gap-y-2 px-6">
+        {songs.map((song) => (
+          <div key={song.id} className="flex w-full items-center gap-x-4">
+            <MediaItem
+              // onClick={() => onPlay}
+              data={song}
+              onPlay={() => {
+                handlePlay(song.id);
+              }}
+            />
+            <LikeButton songId={song.id} />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default SearchContent;

package/dist/ui/controls/SearchInput.tsx

@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line prettier/prettier
+
+import { useEffect, useState } from "react";
+import { Input } from "../forms";
+import React from "react";
+
+// const fetchResultsCached = cache(async (query) => {
+const fetchResultsCached = async (query: any) => {
+  const queryParams = new URLSearchParams({ title: query }).toString();
+  const url = `/search?${queryParams}`;
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const useDebounce = (value: unknown, delay: unknown) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay as any);
+
+    return () => clearTimeout(handler); // Cleanup to prevent memory leak
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+const SearchInput = () => {
+  const [value, setValue] = useState("");
+  const debouncedValue = useDebounce(value, 500);
+
+  useEffect(() => {
+    const performSearch = async () => {
+      if (!debouncedValue) return; // Exit early if debouncedValue is empty
+
+      try {
+        const results = await fetchResultsCached(debouncedValue);
+        console.log("Search Results:", results); // Logging or setting state with results
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    performSearch();
+  }, [debouncedValue]);
+
+  return (
+    <Input
+      placeholder="What do you want to listen to?"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};
+
+export default SearchInput;
+
+// const useDebounce = (value, delay) => {
+//   const [debouncedValue, setDebouncedValue] = useState(value);
+
+//   useEffect(() => {
+//     const handler = setTimeout(() => {
+//       setDebouncedValue(value);
+//     }, delay);
+
+//     return () => {
+//       clearTimeout(handler); // Correct use of clearTimeout for debounce
+//     };
+//   }, [value, delay]);
+
+//   return debouncedValue;
+// };
+
+// const SearchInput = () => {
+//   const [value, setValue] = useState("");
+//   const debouncedValue = useDebounce(value, 500);
+
+//   useEffect(() => {
+//     const fetchResults = async () => {
+//       if (!debouncedValue) return; // Exit early if debouncedValue is empty
+
+//       const queryParams = new URLSearchParams({
+//         title: debouncedValue,
+//       }).toString();
+//       const url = `/search?${queryParams}`;
+
+//       try {
+//         const response = await fetch(url);
+//         if (!response.ok) {
+//           throw new Error("Network response was not ok");
+//         }
+//         const data = await response.json();
+//         const results = data.results;
+//         return results;
+//       } catch (error) {
+//         console.error("Error fetching data:", error);
+//       }
+//     };
+
+//     fetchResults();
+//   }, [debouncedValue]);
+
+//   return (
+//     <Input
+//       placeholder="What do you want to listen to?"
+//       value={value}
+//       onChange={(e) => setValue(e.target.value)}
+//     />
+//   );
+// };
+
+// export default SearchInput;

package/dist/ui/controls/Searchbar.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line prettier/prettier
+import React from "react";
+import { useState } from "react";
+
+const FiSearch = ({ className }: { className: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const Searchbar = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      autoComplete="off"
+      className="text-scrapBlack focus-within:ring-scrapGreen dark:text-scrapWhite flex items-center rounded-md p-1 focus-within:ring-2"
+    >
+      <label htmlFor="search-field" className="sr-only">
+        Search
+      </label>
+      <FiSearch className="size-5" />
+      <input
+        id="search-field"
+        name="search-field"
+        className="placeholder:text-scrapBlack dark:text-scrapWhite dark:placeholder:text-scrapWhite flex-1 border-none bg-transparent p-2 text-base outline-none"
+        placeholder="Search"
+        type="search"
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+      />
+    </form>
+  );
+};
+
+export default Searchbar;

package/dist/ui/controls/SidebarItem.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+interface SidebarItemProps {
+  icon: React.ElementType;
+  label: string;
+  active: boolean;
+  href: string;
+}
+
+const SidebarItem: React.FC<SidebarItemProps> = ({
+  icon: Icon,
+  label,
+  active,
+  href = "/",
+}) => {
+  return (
+    <a
+      href={href}
+      className={`text-md text-scrapYellow hover:text-scrapWhite flex w-full cursor-pointer flex-row items-center gap-x-4 py-1 font-medium transition ${
+        active ? "text-scrapWhite" : ""
+      }`}
+    >
+      <Icon size={26} />
+      <p className="truncate">{label}</p>
+    </a>
+  );
+};
+
+export default SidebarItem;
+
+// import React from "react";
+
+// const SidebarItem = ({
+//   icon: Icon,
+//   label,
+//   active,
+//   href,
+// }: {
+//   icon: React.ElementType;
+//   label: string;
+//   active: boolean;
+//   href: string;
+// }) => {
+//   return (
+//     <a
+//       href={href}
+//       className={`text-md text-scrapYellow hover:text-scrapWhite flex w-full cursor-pointer flex-row items-center gap-x-4 py-1 font-medium transition ${
+//         active ? "text-scrapWhite" : ""
+//       }`}
+//     >
+//       <Icon size={26} />
+//       <p className=" truncate">{label}</p>
+//     </a>
+//   );
+// };
+
+// export default SidebarItem;

package/dist/ui/controls/SongItem.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import Image from "../images/Image";
+import { Field, FlexContainer, GridContainer } from "../shells";
+import Paragraph from "../text/Paragraph";
+import MusicPlayer from "./MusicPlayer.js";
+
+type MusicTrack = {
+  id: string;
+  name: string;
+  title: string;
+  artist: string;
+  cover: string;
+  audio: string;
+  captions: string;
+  color: string[];
+  active: boolean;
+};
+
+const SongItem = ({ music }: { music: MusicTrack }) => {
+  const songUrl = music.audio;
+
+  return (
+    <GridContainer className="border-scrapBlack/5 bg-scrapYellow/5 hover:bg-scrapWhite/20 group relative grid cursor-pointer grid-cols-1 items-center justify-center rounded-md border-2 transition hover:scale-105 hover:shadow-lg lg:grid-cols-2">
+      <Field className="relative aspect-square rounded-md">
+        <Image
+          className="rounded-md object-contain"
+          src={
+            "https://res.cloudinary.com/dpytkhyme/image/upload/v1693437335/scrap_records_logo_sdwhr8.png"
+          }
+          alt="Song"
+        />
+      </Field>
+      <FlexContainer className="m-5 flex flex-col items-center justify-center ">
+        <Paragraph className="truncate font-semibold">{music?.title}</Paragraph>
+        <Paragraph className="text-scrapRed mx-auto mb-2 w-60 max-w-sm truncate text-center text-sm md:max-w-md lg:max-w-lg xl:max-w-none">
+          {music?.artist}
+        </Paragraph>
+
+        <MusicPlayer audioUrl={songUrl} captionUrl={""} music={""} />
+      </FlexContainer>
+    </GridContainer>
+  );
+};
+
+export default SongItem;

package/dist/ui/controls/VideoPlayer.tsx

@@ -0,0 +1,36 @@
+// eslint-disable-next-line prettier/prettier
+
+import React, { useEffect, useRef } from "react";
+
+const VideoPlayer: React.FC = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.play(); // Ensures autoplay in certain browsers
+    }
+  }, []);
+
+  return (
+    <div className="relative z-0">
+      <video
+        ref={videoRef}
+        className="prose-video size-full bg-transparent object-cover"
+        autoPlay
+        muted
+        loop
+        onError={(e) => console.error("Error playing video", e)}
+      >
+        <source
+          src="https://res.cloudinary.com/dpytkhyme/video/upload/v1685951388/STREETBEEFS%20SCRAPYARD/smoke_jasao7.mp4"
+          type="video/mp4"
+        />
+        Your browser does not support the video tag.
+      </video>
+
+      <div className="bg-scrapBlack absolute left-0 top-0 size-full opacity-50" />
+    </div>
+  );
+};
+
+export default VideoPlayer;

package/dist/ui/controls/index.tsx

@@ -0,0 +1,13 @@
+export { default as MusicHeader } from "./MusicHeader.js";
+export { default as MusicPlayer } from "./MusicPlayer.js";
+export { default as MusicSidebar } from "./MusicSidebar.js";
+export { default as MusicSlider } from "./MusicSlider.js";
+export { default as MusicUpload } from "./MusicUpload.js";
+export { default as PlayerContent } from "./PlayerContent.js";
+export { default as PlayPause } from "./PlayPause.js";
+export { default as Searchbar } from "./Searchbar.js";
+export { default as SearchContent } from "./SearchContent.js";
+export { default as SearchInput } from "./SearchInput.js";
+export { default as SidebarItem } from "./SidebarItem.js";
+export { default as SongItem } from "./SongItem.js";
+export { default as VideoPlayer } from "./VideoPlayer.js";

package/dist/ui/dividers/Horizontal.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const HorizontalDivider: React.FC<{
+  className?: string;
+}> = ({ className }) => {
+  return (
+    <div className={`bg-scrapBlack relative ${className}`}>
+      <div
+        className="bg-scrapBlack absolute inset-0 flex items-center "
+        aria-hidden="true"
+      >
+        <div className="border-scrapBlack bg-scrapBlack w-full border shadow-2xl" />
+      </div>
+    </div>
+  );
+};
+
+export default HorizontalDivider;

package/dist/ui/dividers/Transparent.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const TransparentDivider = ({ height = "auto" }: { height: string }) => {
+  return <div className={`h-${height} absolute w-full bg-transparent`}></div>;
+};
+
+export default TransparentDivider;

package/dist/ui/dividers/index.tsx

@@ -0,0 +1,2 @@
+export { default as HorizontalDivider } from "./Horizontal.js";
+export { default as TransparentDivider } from "./Transparent.js";