2024.2 : rework music page & more icons fixes

Serphp · Mar 5, 2024 · a23c107 · a23c107
1 parent c67eb71
commit a23c107
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 73 deletions.
diff --git a/components/Auth/Login.jsx b/components/Auth/Login.jsx
@@ -21,7 +21,7 @@ export default function Login() {
       await Signin(emailRef.current.value, passwordRef.current.value)
       return navigate("/dashboard");
     } catch {
-      setError("Failed to log in")
+      setError("Email or password does not exist.")
     }
     setLoading(false)
   }

diff --git a/components/Auth/forgot-password.jsx b/components/Auth/forgot-password.jsx
@@ -29,7 +29,7 @@ export default function ForgotPassword() {
   return (
     <>
 
-        <div className="boxcontainer2">
+        <div className="mt-5 container">
           <h2 className="text-center mb-4">Password Reset</h2>
           {error && <Alert variant="danger">{error}</Alert>}
           {message && <Alert variant="success">{message}</Alert>}

diff --git a/components/Main/Navbar.jsx b/components/Main/Navbar.jsx
@@ -13,6 +13,7 @@ import { NavbarMIcon } from '../../src/assets/Mobile/Nhome';
 import { NavbarMProfile } from '../../src/assets/Mobile/NProfile';
 import { NavbarMList } from '../../src/assets/Mobile/NList';
 import { NavbarMVer } from '../../src/assets/Mobile/Nver';
+import { MusicIcon } from '../../src/assets/Music';
 //import { LogoIcon } from '../../src/assets/logo';
 
 export const NavBar = () => {
@@ -118,6 +119,13 @@ export const NavBar = () => {
     {
         ShowPip === false && (
         <>
+
+            <button className='navicon'>
+            <Link to='/Music'>
+            <div className="nicon"><MusicIcon/></div>
+            </Link>
+            </button>
+
             <button className='navicon' onClick={handleMute}>
                 <div className="nicon"> 
                 {videoPlayer.muted ? 
@@ -146,26 +154,29 @@ export const NavBar = () => {
                 }
                 </div>
                 </button>
+
+                <h1> | </h1>
         </>
         )
     }
-                {/* Principal interface */}
-                <button className='navicon' onClick={toggleTimer}>
-                <div className={`nicon ${buttonMove ? 'active' : ''}`}> 
-                    <div className='conticon'>
-                    {timer.isRunning ? 
-                    <>
-                    <PauseIcon/>
-                    <p className='dep'>PAUSE</p>
-                    </>
-                    : 
-                    <>
-                    <PlayIcon/>
-                    <p className='dep'>START</p>
-                    </>
-                    }
-                    </div>
-                </div>
+
+        {/* Principal interface */}
+        <button className='navicon' onClick={toggleTimer}>
+        <div className={`nicon ${buttonMove ? 'active' : ''}`}> 
+            <div className='conticon'>
+            {timer.isRunning ? 
+            <>
+            <PauseIcon/>
+            <p className='dep'>PAUSE</p>
+            </>
+            : 
+            <>
+            <PlayIcon/>
+            <p className='dep'>START</p>
+            </>
+            }
+            </div>
+            </div>
                 </button>
                 <button className='navicon' onClick={handleSignOut}>
                 <div className="nicon"> 

diff --git a/components/Timer.jsx b/components/Timer.jsx
@@ -27,7 +27,7 @@ function Contador() {
     const [tasks, setTasks] = useState(() => {
         const storedTasks = JSON.parse(localStorage.getItem('tasks'));
         return storedTasks || [];
-      });
+    });
 
     const titleStatus = timer.TecStatus ? 'Break time' : 'Inactive';
 
@@ -72,7 +72,6 @@ function Contador() {
                 </div>
                 </button> */}
                 </> : 
-
                 <h2 className='titulo'>{titleStatus}</h2>
 
                 }

diff --git a/src/Context/AuthContext.jsx b/src/Context/AuthContext.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, createContext } from "react"
 import { auth } from "../firebase"
-import { db } from "../firebase"
+//import { db } from "../firebase"
 
 export const AuthContext = createContext();
 

diff --git a/src/Context/PlayerContext.jsx b/src/Context/PlayerContext.jsx
@@ -24,6 +24,7 @@ export const PlayerProvider = ({ children }) => {
       volume: 0.5,
       muted: false,
       showVideo: false,
+      ShowPip: false,
     }
   });
 
@@ -170,6 +171,16 @@ export const PlayerProvider = ({ children }) => {
   //   setUrl(newUrl);
   // };
 
+  const handleInputChange = (event) => {
+    const newUrl = event.target.value;
+    handleSaveUrl(newUrl);
+  };
+
+  const handleFormSubmit = (event) => {
+    event.preventDefault();
+    handleSaveProgress();
+  };
+
 
   return (
     <PlayerContext.Provider
@@ -199,38 +210,54 @@ export const PlayerProvider = ({ children }) => {
         <>
         <section>
         <div className=''> 
-        <ReactPlayer
-
-        url={videoPlayer.url}
-        playing={playing}
-        played={played}
-        playbackRate={1}
-        onPlay={true}
-        onPause={false}
-        onProgress={handleProgress}
-        onDuration={handleDuration}
-        volume={volume}
-        muted={muted}
-        //onMute={handleMute}
-        onSeek={handleSaveProgress}
-        onEnded={handleSaveProgress}
-        width="100%"
-        height="350px"
-        style={{ 
-        resize: 'both', 
-        overflow: 'hidden',
-
-        minWidth: '100%',
-        maxWidth: '500px',
-        minHeight: '100px',
-        maxHeight: '400px',
-        }}
-          className="buttonpip-content contenedorplayer"
-        /> 
-        </div>
-        <div className='buttonpip-close'>
-        <button onClick={handleTogglePip}>X</button>
+          <ReactPlayer
+
+          url={videoPlayer.url}
+          playing={playing}
+          played={played}
+          playbackRate={1}
+          onPlay={true}
+          onPause={false}
+          onProgress={handleProgress}
+          onDuration={handleDuration}
+          volume={volume}
+          muted={muted}
+          //onMute={handleMute}
+          onSeek={handleSaveProgress}
+          onEnded={handleSaveProgress}
+          width="100%"
+          height="350px"
+          style={{ 
+          resize: 'both', 
+          overflow: 'hidden',
+
+          minWidth: '100%',
+          maxWidth: '500px',
+          minHeight: '100px',
+          maxHeight: '400px',
+          }}
+            className="buttonpip-content contenedorplayer"
+          /> 
         </div>
+
+        <article className='musiccontenedor'> 
+            <form onSubmit={handleFormSubmit}>
+            <div className='inputplayer'>
+            <input type="text" value={videoPlayer.url} onChange={handleInputChange} />
+            <button type="submit">Reproducir</button>
+            </div>
+            </form>
+        </article>
+
+        <div class="slider">
+                <input type="range" min={0} max={1} step="any" value={volume} onChange={handleVolumeChange} />
+                <p className='slider-title'> volume </p>
+        </div>   
+
+          <div className='buttonpip-close'>
+          <button onClick={handleTogglePip}>X</button>
+          </div>
+
         </section>
 
         </>

diff --git a/src/Music.jsx b/src/Music.jsx
@@ -40,26 +40,24 @@ export function Music() {
       handleSaveProgress();
     };
 
+    console.log(videoPlayer.ShowPip);
 
     return (
       <section className="probootstrap-cover probootstrap-scene-0">
         <div className="container">
         <div className="row probootstrap-vh-75 align-items-center text-sm-center text-center">
         <div className="col-md-5 order-md-2">
-
+
+        {ShowPip ?  (<>
         <form onSubmit={handleFormSubmit}>
         <h1 className="display-4 lead mb-5">Music</h1>
-        <p className="">Reproduce tu musica favorita</p>
-
         <div className='inputplayer'>
         <input type="text" value={videoPlayer.url} onChange={handleInputChange} />
         <button type="submit">Reproducir</button>
-        <button onClick={handleMute}>Mute</button>
-        <button onClick={handleTogglePip}>
-            {ShowPip && "Desplegar" }
-        </button>
         </div>
         </form>
+        <button onClick={handleTogglePip}>Desplegar</button>
+        </>) : null }
 
         <br/>
           {/* {
@@ -73,16 +71,15 @@ export function Music() {
         <div className="col-md-7">
             <div className="mb-5 probootstrap-stagger ">
             <div className="probootstrap-animate">
-
             <div className='box1' style={{ display: ReactPlayer ? 'none' : 'block' }}>
 
           </div>
 
           {
             Showvideo && 
-            <h1> Hide </h1>
+            <h1> Pop UP active </h1>
           }
-            {ShowPip && (
+            {videoPlayer.ShowPip && (
                 <>
                 <div >
                 <ReactPlayer
@@ -106,7 +103,12 @@ export function Music() {
               />
                 </div>
 
+              <div class="slider">
                 <input type="range" min={0} max={1} step="any" value={volume} onChange={handleVolumeChange} />
+                <p id="rangeValue">100</p>   
+              </div>   
+
+                {/* <input className='volume' type="range" min={0} max={1} step="any" value={volume} onChange={handleVolumeChange} /> */}
 
                 </>
               )

diff --git a/src/assets/Music.jsx b/src/assets/Music.jsx
@@ -0,0 +1,7 @@
+export const MusicIcon = () => {
+    return (
+    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" d="M22 6a4 4 0 0 0-4.608-3.953l-7 1.077A4 4 0 0 0 7 7.078v8.763a3.5 3.5 0 1 0 2 3.163V7.078A2 2 0 0 1 10.696 5.1l7-1.077A2 2 0 0 1 20 6.001v6.84a3.5 3.5 0 1 0 2 3.163V6.001Zm-2 10.004a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm-13 3a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" clip-rule="evenodd"></path>
+    </svg>
+    )
+};
diff --git a/src/styles/Music.scss b/src/styles/Music.scss
@@ -13,6 +13,56 @@
     transition: all 0.5s ease;
 }
 
+.volume{
+    background-color: black;
+    border: red solid 10px;
+}
+
+// Hola
+.slider {
+    position: absolute;top: 24%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: 70%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+
+
+    .slider-title{
+        position: absolute;
+        top: 1px;
+        z-index: -1;
+        font-size: 0.7em;
+        font-weight: 600;
+        text-transform: uppercase;
+        font-family: inherit;
+    }
+}
+
+.slider input[type="range"] {
+    -webkit-appearance: none !important;
+    width: 50%;
+    height: 20px;
+    background: #ffffff41;
+    border-radius: 10px;
+    box-shadow: 0px 5px 8px rgba(128, 128, 128, 0.726);
+}
+.slider input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    width: 20px;
+    height: 20px;
+    background: ffffff41;
+    border: 2px solid #ffffff41;
+    border-radius: 50%;
+    cursor: pointer;
+}
+.slider input[type="range"]::-webkit-slider-thumb:hover {
+    background: ffffff41;
+} 
+// Hola end
+
 .contenedorplayer{ 
     // display: flex;
     // flex-direction: column;
@@ -67,17 +117,23 @@
 }
 
 .inputplayer {
+    position: absolute;
+    top: 300px;
     width: 100%;
-    height: 100px;
-    background-color: #ffffff41;
+    //height: 100px;
+    //background-color: #ffffff41;
+    margin: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-direction: column;
+    flex-direction: row;
     border-radius: 5px;
     border: none;
+    @media screen and (max-width: 490px) {
+        position: none;
+    }
     input {
-        width: 100%;
+        width: 30%;
         height: 30px;
         border: none;
         border-bottom: 1px solid rgba(0, 0, 0, 0.334);
@@ -92,7 +148,7 @@
         //margin-bottom: 10px;
     }
     button {
-        width: 100%;
+        //width: 100%;
         height: 30px;
         font-size: 12px;
         font-weight: bold;