feat: add audio control

phukon · Jan 24, 2024 · 13f388c · 13f388c
1 parent d2cbfa9
commit 13f388c
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 53 deletions.
diff --git a/app/about/page1.tsx b/app/about/page1.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -36,8 +36,7 @@ export default function RootLayout({
     <html lang="en">
       <body
         className={`${localTektur.variable} ${localOrbitron.variable} ${localPixel1.variable} ${localInter.variable}  ${localPixel2.variable} ${localhandwritten.variable}`}
-      >
-        <AudioPlayer />
+      ><AudioPlayer/>
         <Toaster />
         {children}
       </body>

diff --git a/components/AudioPlayer.tsx b/components/AudioPlayer.tsx
@@ -5,14 +5,15 @@ import Draggable from "react-draggable";
 const AudioPlayer = () => {
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
+  var tap = 0;
 
   useEffect(() => {
     const createAudioElement = () => {
       if (typeof document === "undefined") return null;
 
       const audioElement = document.createElement("audio");
       audioElement.id = "audio_tag";
-      audioElement.src = "/music/riki.mp3";
+      audioElement.src = "/music/fx.mp3";
       audioElement.loop = true;
       document.body.appendChild(audioElement);
       return audioElement;
@@ -34,14 +35,18 @@ const AudioPlayer = () => {
   };
 
   return (
-    <Draggable bounds="parent" defaultPosition={{ x: 100, y: 100 }}>
-      <div className="flex flex-col fixed max-h-[150px] max-w-[150px] z-50 --local-inter tracking-[-2px] md:tracking-[-1px] hover:cursor-move">
-        {isPlaying ? (
-          <img className="hover:cursor-pointer" onClick={togglePlay} width={50} src="/icons/pause.svg" />
-        ) : (
-          <img className="hover:cursor-pointer" onClick={togglePlay} width={50} src="/icons/play.svg" />
-        )}
-        hoool here
+    <Draggable bounds="parent" defaultPosition={{ x: 100, y: 300 }}>
+      <div className=" fixed flex flex-col items-center --local-inter hover:cursor-move z-50 w-fit">
+        <img
+          className="hover:cursor-pointer"
+          onTouchStart={togglePlay}
+          onClick={togglePlay}
+          width={35}
+          src={isPlaying ? "/icons/pause.svg" : "/icons/play.svg"}
+        />
+        <span>---</span>
+        <p>---grab---</p>
+        <span>---</span>
       </div>
     </Draggable>
   );

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -4,7 +4,6 @@ import Link from "next/link";
 import React from "react";
 import { useState, useEffect } from "react";
 import { twMerge } from "tailwind-merge";
-// import AudioPlayer from "./AudioPlayer";
 
 type HeaderProps = {
   className?: string;
@@ -35,7 +34,7 @@ const Header = (props: HeaderProps = { className: "", isTitle: true }) => {
             } items-center`}
           >
             {props.isTitle && (
-              <div className="h-[24px] w-[104px] md:h-[28px] md:w-[120px]">
+              <div className=" flex flex-row h-[24px] w-[104px] md:h-[28px] md:w-[120px]">
                 <Link href="/">
                   <span className="text-lg">
                     binary<b>dreams</b>
@@ -49,9 +48,6 @@ const Header = (props: HeaderProps = { className: "", isTitle: true }) => {
               }`}
             >
               <ul className="container px-4 md:px-0 mx-auto flex flex-1 flex-col min-h-full md:flex-row md:gap-x-8 md:items-center relative">
-                {/* <li className="my-4 md:my-3 underline font-semibold decoration-neutral-400">
-                  <AudioPlayer />
-                </li> */}
                 <li className="my-4 md:my-3 underline font-semibold decoration-neutral-400">
                   <p className="text-5xl font-bold md:text-base">
                     <a
@@ -62,17 +58,6 @@ const Header = (props: HeaderProps = { className: "", isTitle: true }) => {
                     </a>
                   </p>
                 </li>
-                {/* <li className="my-4 md:my-3 underline font-semibold decoration-neutral-400">
-                  <p className="text-5xl font-bold md:text-base">
-                    <a
-                      href="/about"
-                      className="tracking-[-2px] md:tracking-[-1px]"
-                    >
-                      stories
-                    </a>
-                  </p>
-                </li> */}
-
                 <li className="my-4 md:my-3 underline font-semibold decoration-neutral-400">
                   <p className="text-5xl font-bold md:text-base">
                     <a

diff --git a/components/select/CustomOption.tsx b/components/select/CustomOption.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { GroupBase, OptionProps, components } from "react-select"
 
 export default function CustomOption(
@@ -10,9 +11,11 @@ export default function CustomOption(
   return (
     <components.Option {...option}>
       <div className="flex items-center space-x-2 group">
-        <img
+        <Image
           src={`${option.data.src}`}
           alt={option.data.label}
+          width={100}
+          height={100}
           className="w-12 md:w-40 h-auto mr-2"
         />
         <span>{option.data.label}</span>

diff --git a/public/music/fx.mp3 b/public/music/fx.mp3