@revealui/core 0.0.1-pre.0 → 0.0.1-pre.2

package/dist/ui/controls/MusicPlayer.tsx

@@ -1,76 +0,0 @@
-// 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

@@ -1,118 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,296 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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;