@revealui/core 0.0.1-pre.0

package/dist/ui/controls/MusicPlayer.tsx

@@ -0,0 +1,76 @@
+// eslint-disable-next-line prettier/prettier
+
+import React, { useRef, useState } from "react";
+import { AudioTrack } from "../audio";
+import { MusicButton } from "../buttons";
+import { PlayPause } from "./index.js";
+
+const MusicPlayer: React.FC<{
+  audioUrl: string;
+  captionUrl: string;
+  music: string;
+}> = ({ audioUrl, captionUrl, music }) => {
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const handlePause = () => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.pause();
+      setIsPlaying(false);
+    }
+  };
+
+  const handlePlay = () => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.play();
+      setIsPlaying(true);
+    }
+  };
+
+  return (
+    <div className="mx-auto flex items-center justify-center p-1">
+      <div className="mr-10 flex items-center justify-center overflow-hidden">
+        <MusicButton
+          className={`linear bg-gradient border-scrapBlack bg-scrapRed text-scrapBlack z-10 mx-auto flex size-11 items-center justify-center rounded-full border motion-safe:animate-spin${
+            isPlaying
+              ? "linear transition-all delay-0 duration-1000 ease-in-out motion-safe:animate-spin"
+              : "mx-auto rotate-0 transition delay-0 duration-1000 ease-in-out"
+          }`}
+          onClick={togglePlay}
+          data={music || ""}
+          disabled={false}
+        >
+          <PlayPause
+            className="border-scrapRed bg-scrapRed text-scrapBlack z-10 border-2"
+            isPlaying={isPlaying}
+            togglePlay={togglePlay}
+            activeSong={audioRef.current?.src || audioUrl}
+            song={audioRef.current?.src || audioUrl}
+            handlePause={handlePause}
+            handlePlay={handlePlay}
+          />
+        </MusicButton>
+        <AudioTrack
+          audioRef={audioRef}
+          audioUrl={audioUrl}
+          captionUrl={captionUrl}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MusicPlayer;

package/dist/ui/controls/MusicSidebar.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import LikeButton from "../buttons/LikeButton";
+import MediaItem from "../forms/MediaItem";
+
+interface Song {
+  id: string;
+  name: string;
+  artist: {
+    name: string;
+  };
+}
+
+interface LibraryProps {
+  data: Song[];
+}
+
+const Library: React.FC<LibraryProps> = ({ data }) => {
+  const player = {
+    ids: [],
+    activeId: "",
+    setId: (id: string) => {
+      id;
+    },
+  };
+
+  const onPlay = (id: string) => {
+    player.setId(id);
+  };
+
+  return (
+    <div className="flex flex-col gap-y-2 px-6">
+      {data.map((song) => (
+        <div key={song.id} className="flex w-full items-center gap-x-4">
+          <div className="flex-1">
+            <MediaItem onPlay={onPlay} data={song} />
+          </div>
+          <LikeButton songId={song.id} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Library;
+
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// import React, { useMemo } from "react";
+// import LikeButton from "../buttons/LikeButton";
+// import MediaItem from "../forms/MediaItem";
+// import SidebarItem from "./SidebarItem";
+
+// const Library = ({ data }: { data: any }) => {
+//   const player = {
+//     ids: [],
+//     activeId: "",
+//     setId: (id: any) => {
+//       id;
+//     },
+//   };
+
+//   const onPlay = (id: any) => {
+//     player.setId(id);
+//   };
+
+//   return (
+//     <div className="flex flex-col gap-y-2 px-6">
+//       {data.map(
+//         (song: { id: any; name?: string; artist?: { name: string } }) => (
+//           <div key={song.id} className="flex w-full items-center gap-x-4">
+//             <div className="flex-1">
+//               <MediaItem onClick={onPlay(data.id)} data={data} />
+//             </div>
+//             <LikeButton songId={song.id} />
+//           </div>
+//         ),
+//       )}
+//     </div>
+//   );
+// };
+
+// const MusicSidebar = ({ children, songs }) => {
+//   const pathname = "/search";
+
+//   const routes = useMemo(
+//     () => [
+//       {
+//         icon: "",
+//         label: "Home",
+//         active: pathname !== "/search",
+//         href: "/",
+//       },
+//       {
+//         icon: "",
+//         label: "Search",
+//         href: "/search",
+//         active: pathname === "/search",
+//       },
+//     ],
+//     [pathname],
+//   );
+
+//   return (
+//     <>
+//       <div className="flex flex-col gap-y-4 px-5 py-4">
+//         {routes.map((item) => (
+//           <SidebarItem key={item.label} {...item} />
+//         ))}
+//       </div>
+
+//       <div className="h-full overflow-y-auto">
+//         <Library songs={songs} />
+//       </div>
+//       {children}
+//     </>
+//   );
+// };
+
+// export default MusicSidebar;

package/dist/ui/controls/MusicSlider.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+const MusicSlider: React.FC<{
+  value: number;
+  onChange: (value: number) => void;
+  className?: string;
+}> = ({ value, onChange, className }) => {
+  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(Number(event.target.value));
+  };
+
+  return (
+    <input
+      type="range"
+      min="0"
+      max="1"
+      step="0.01"
+      value={value}
+      onChange={handleSliderChange}
+      className={className}
+    />
+  );
+};
+
+export default MusicSlider;

package/dist/ui/controls/MusicUpload.tsx

@@ -0,0 +1,296 @@
+import React, { useState } from "react";
+
+const fetchUploadStatus = async () => {
+  const response = await fetch("/api/upload/status"); // Hypothetical API to check status
+  if (!response.ok) {
+    throw new Error("Failed to fetch status");
+  }
+  return response.json();
+};
+
+const MusicUpload: React.FC = () => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploadStatus, setUploadStatus] = useState<string>("");
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Use optional chaining to ensure we get a file or null
+    const file = e.target.files?.[0] ?? null;
+    setSelectedFile(file);
+    setUploadStatus("");
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      setUploadStatus("No file selected.");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", selectedFile);
+
+    try {
+      const response = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (response.ok) {
+        setUploadStatus("File uploaded successfully.");
+        const status = await fetchUploadStatus(); // Use cached fetch to get updated status
+        console.log(status); // Hypothetical use of fetched data
+      } else {
+        throw new Error(`Error: ${response.statusText}`);
+      }
+    } catch (error) {
+      console.error("Error uploading file:", error);
+      setUploadStatus("Error uploading file.");
+    }
+  };
+
+  return (
+    <div>
+      <h1>Upload Music</h1>
+      <input type="file" onChange={handleFileChange} />
+      <button onClick={handleUpload}>Upload</button>
+      {uploadStatus && <p>{uploadStatus}</p>}
+    </div>
+  );
+};
+
+export default MusicUpload;
+
+// import React, { useState } from "react";
+
+// const fetchUploadStatus = async () => {
+//   const response = await fetch("/api/upload/status"); // Hypothetical API to check status
+//   if (!response.ok) {
+//     throw new Error("Failed to fetch status");
+//   }
+//   return response.json();
+// };
+
+// const MusicUpload: React.FC = () => {
+//   const [selectedFile, setSelectedFile] = useState<File | null>(null);
+//   const [uploadStatus, setUploadStatus] = useState<string>("");
+
+//   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     // Ensure that a file is selected before setting the state
+//     const file = e.target.files ? e.target.files[0] : null;
+//     setSelectedFile(file);
+//     setUploadStatus("");
+//   };
+
+//   const handleUpload = async () => {
+//     if (!selectedFile) {
+//       setUploadStatus("No file selected.");
+//       return;
+//     }
+
+//     const formData = new FormData();
+//     formData.append("file", selectedFile);
+
+//     try {
+//       const response = await fetch("/api/upload", {
+//         method: "POST",
+//         body: formData,
+//       });
+
+//       if (response.ok) {
+//         setUploadStatus("File uploaded successfully.");
+//         const status = await fetchUploadStatus(); // Use cached fetch to get updated status
+//         console.log(status); // Hypothetical use of fetched data
+//       } else {
+//         throw new Error(`Error: ${response.statusText}`);
+//       }
+//     } catch (error) {
+//       console.error("Error uploading file:", error);
+//       setUploadStatus("Error uploading file.");
+//     }
+//   };
+
+//   return (
+//     <div>
+//       <h1>Upload Music</h1>
+//       <input type="file" onChange={handleFileChange} />
+//       <button onClick={handleUpload}>Upload</button>
+//       {uploadStatus && <p>{uploadStatus}</p>}
+//     </div>
+//   );
+// };
+
+// export default MusicUpload;
+
+// // eslint-disable-next-line prettier/prettier
+
+// import React, { useState } from "react";
+
+// const fetchUploadStatus = async () => {
+//   const response = await fetch("/api/upload/status"); // Hypothetical API to check status
+//   if (!response.ok) {
+//     throw new Error("Failed to fetch status");
+//   }
+//   return response.json();
+// };
+
+// const MusicUpload: React.FC = () => {
+//   const [selectedFile, setSelectedFile] = useState<File | null>(null);
+//   const [uploadStatus, setUploadStatus] = useState<string>("");
+
+//   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     if (e.target.files && e.target.files.length > 0) {
+//       setSelectedFile(e.target.files[0]);
+//     } else {
+//       setSelectedFile(null);
+//     }
+//     setUploadStatus("");
+//   };
+
+//   const handleUpload = async () => {
+//     if (!selectedFile) {
+//       setUploadStatus("No file selected.");
+//       return;
+//     }
+
+//     const formData = new FormData();
+//     formData.append("file", selectedFile);
+
+//     try {
+//       const response = await fetch("/api/upload", {
+//         method: "POST",
+//         body: formData,
+//       });
+
+//       if (response.ok) {
+//         setUploadStatus("File uploaded successfully.");
+//         const status = await fetchUploadStatus(); // Use cached fetch to get updated status
+//         console.log(status); // Hypothetical use of fetched data
+//       } else {
+//         throw new Error(`Error: ${response.statusText}`);
+//       }
+//     } catch (error) {
+//       console.error("Error uploading file:", error);
+//       setUploadStatus("Error uploading file.");
+//     }
+//   };
+
+//   return (
+//     <div>
+//       <h1>Upload Music</h1>
+//       <input type="file" onChange={handleFileChange} />
+//       <button onClick={handleUpload}>Upload</button>
+//       {uploadStatus && <p>{uploadStatus}</p>}
+//     </div>
+//   );
+// };
+
+// export default MusicUpload;
+
+// eslint-disable-next-line prettier/prettier
+// import React, { useState } from "react";
+
+// // const fetchUploadStatus = cache(async () => {
+// const fetchUploadStatus = async () => {
+//   const response = await fetch("/api/upload/status"); // Hypothetical API to check status
+//   if (!response.ok) {
+//     throw new Error("Failed to fetch status");
+//   }
+//   return response.json();
+// };
+
+// const MusicUpload = () => {
+//   const [selectedFile, setSelectedFile] = useState(null);
+//   const [uploadStatus, setUploadStatus] = useState("");
+
+//   const handleFileChange = (e: {
+//     target: { files: React.SetStateAction<null>[] };
+//   }) => {
+//     setSelectedFile(e.target.files[0]);
+//     setUploadStatus("");
+//   };
+
+//   const handleUpload = async () => {
+//     if (!selectedFile) {
+//       setUploadStatus("No file selected.");
+//       return;
+//     }
+
+//     const formData = new FormData();
+//     formData.append("file", selectedFile);
+
+//     try {
+//       const response = await fetch("/api/upload", {
+//         method: "POST",
+//         body: formData,
+//       });
+
+//       if (response.ok) {
+//         setUploadStatus("File uploaded successfully.");
+//         const status = await fetchUploadStatus(); // Use cached fetch to get updated status
+//         console.log(status); // Hypothetical use of fetched data
+//       } else {
+//         throw new Error(`Error: ${response.statusText}`);
+//       }
+//     } catch (error) {
+//       console.error("Error uploading file:", error);
+//       setUploadStatus("Error uploading file.");
+//     }
+//   };
+
+//   return (
+//     <div>
+//       <h1>Upload Music</h1>
+//       <input type="file" onChange={handleFileChange} />
+//       <button onClick={handleUpload}>Upload</button>
+//       {uploadStatus && <p>{uploadStatus}</p>}
+//     </div>
+//   );
+// };
+
+// export default MusicUpload;
+
+// const MusicUpload = () => {
+//   const [selectedFile, setSelectedFile] = useState(null);
+//   const [uploadStatus, setUploadStatus] = useState("");
+
+//   const handleFileChange = (e) => {
+//     setSelectedFile(e.target.files[0]);
+//     setUploadStatus("");
+//   };
+
+//   const handleUpload = async () => {
+//     if (!selectedFile) {
+//       setUploadStatus("No file selected.");
+//       return;
+//     }
+
+//     const formData = new FormData();
+//     formData.append("file", selectedFile);
+
+//     try {
+//       const response = await fetch("/api/upload", {
+//         method: "POST",
+//         body: formData,
+//       });
+
+//       if (response.ok) {
+//         setUploadStatus("File uploaded successfully.");
+//       } else {
+//         throw new Error(`Error: ${response.statusText}`);
+//       }
+//     } catch (error) {
+//       console.error("Error uploading file:", error);
+//       setUploadStatus("Error uploading file.");
+//     }
+//   };
+
+//   return (
+//     <div>
+//       <h1>Upload Music</h1>
+//       <input type="file" onChange={handleFileChange} />
+//       <button onClick={handleUpload}>Upload</button>
+//       {uploadStatus && <p>{uploadStatus}</p>}
+//     </div>
+//   );
+// };
+
+// export default MusicUpload;

package/dist/ui/controls/PlayPause.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+const FaPauseCircle: React.FC<{
+  onClick: () => void;
+  className: string;
+}> = ({ onClick, className }) => (
+  <svg
+    onClick={onClick}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    className={`border-scrapRed text-scrapBlack size-11 cursor-pointer border-2 ${className}`}
+  >
+    <path
+      fillRule="evenodd"
+      d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm5-2.25A.75.75 0 017.75 7h.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-.5a.75.75 0 01-.75-.75v-4.5zm4 0a.75.75 0 01.75-.75h.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-.5a.75.75 0 01-.75-.75v-4.5z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const FaPlayCircle: React.FC<{
+  onClick: () => void;
+  className: string;
+}> = ({ onClick, className }) => (
+  <svg
+    onClick={onClick}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    className={`border-scrapRed size-11 cursor-pointer border-2 text-scrapBlack${className}`}
+  >
+    <path
+      fillRule="evenodd"
+      d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm6.39-2.908a.75.75 0 01.766.027l3.5 2.25a.75.75 0 010 1.262l-3.5 2.25A.75.75 0 018 12.25v-4.5a.75.75 0 01.39-.658z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const PlayPause: React.FC<{
+  isPlaying: boolean;
+  activeSong: string;
+  song: string;
+  handlePause?: () => void;
+  handlePlay?: () => void;
+  togglePlay: () => void;
+  className: string;
+}> = ({
+  isPlaying,
+  activeSong,
+  song,
+  handlePause,
+  handlePlay,
+  togglePlay,
+  className,
+}) =>
+  isPlaying && activeSong === song ? (
+    <FaPauseCircle className={className} onClick={handlePause || togglePlay} />
+  ) : (
+    <FaPlayCircle className={className} onClick={handlePlay || togglePlay} />
+  );
+
+export default PlayPause;