pages

client/src/pages/Home.js

@@ -1,4 +1,6 @@
+/* eslint-disable react/no-unescaped-entities */
 import '../css/Home.css';
+import React from 'react';
 
 const Home = () => {
   return (
@@ -26,6 +28,6 @@ const Home = () => {
 
     </div>
   );
-}
+};
 
 export default Home;

client/src/pages/Login.js

@@ -0,0 +1,57 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import '../css/Login.css';
+import { useLoginContext } from '../Structures/UserContext';
+import { login } from '../util/Util';
+
+const LoginPage = () => {
+
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [, updateUser] = useLoginContext();
+    const from = location.state?.from?.pathname || '/';
+
+    const _login = async () => {
+
+        await login();
+        //window.location.replace(`${proto}://${options.domain}/api/login`);
+        updateUser();
+        navigate(from, {replace: true});
+
+    };
+
+    return (
+        <div className='login'>
+            
+            <p>
+                Woah! You found the """secret""" page. ;)
+            </p>
+
+            <p>
+                You probably want to click that button. Can't really blame you, curiosity and all that.
+            </p>
+
+            <p>
+                Unfortunately for you it won't really do much for you. Or will it?
+            </p>
+
+            <p>
+                No, really, it won't do anything for you.
+            </p>
+
+            <p>
+                or... does it...?
+            </p>
+
+            <p>
+                Only one way to find out, I guess...
+            </p>
+
+            <button onClick={_login}>Login</button>
+        </div>
+    );
+
+};
+
+export default LoginPage;

client/src/pages/Media.js

@@ -1,41 +1,80 @@
-import { useEffect, useRef, useState } from 'react'
-import '../css/Media.css'
-const MediaComponent = ({src, width}) => {
+import React, { useEffect, useRef, useState } from 'react';
+import '../css/Media.css';
+
+const ClipEntry = ({ name, filename, uploader, thumbnail, duration, clickHandler }) => {
+    
+    const _uploader = `${ uploader.tag } (${ uploader.id })`;
 
     return (
-        <div className='media-content'>
-            <video controls width={width}>
-                <source src={src} type='video/mp4'></source>
+        <div className='clip-listing' onClick={clickHandler}>
+            <div className='flex-container'>
+                <div title={name} id='title' className='listing-element'>
+                    <p><strong>Title</strong>: {name}</p>
+                </div>
+                <div title={_uploader} id='uploader' className='listing-element'>
+                    <p> <strong>Uploader</strong>: {_uploader }</p>
+                </div>
+                <div title={filename} id='filename' className='listing-element'>
+                    <p> <strong>Filename</strong>: {filename}</p>
+                </div>
+                <div title={duration} id='duration' className='listing-element'>
+                    <p> <strong>Length</strong>: {duration}</p>
+                </div>
+            </div>
+            <img className='thumbnail' alt='Thumbnail' src={`/api/thumbnails/${thumbnail}`}/>
+        </div>
+    );
+
+};
+
+const VideoPlayer = ({ refF, video }) => {
+    
+    const { filename, name } = video;
+    const source = `/api/clips/${filename}`;
+
+    return (
+        <div ref={refF} className='video-popup'>
+            <div>
+                <h1 className='no-margin no-padding'>
+                    {name}
+                </h1>
+            </div>
+            <video className='video-player center' controls >
+                <source src={source} type='video/mp4' />
             </video>
         </div>
-    )
+    );
 
-}
+};
 
 const Media = () => {
 
-    const [index, updateIndex] = useState([])
-    const mediaPage = useRef(null);
+    const [index, updateIndex] = useState([]);
+    const [video, setVideo] = useState();
+    const ref = useRef(null);
+
+    document.addEventListener('mousedown', (event) => {
+        if(ref.current && !ref.current.contains(event.target)) setVideo(null);
+    });
 
     useEffect(() => {
 
         (async () => {
-            const response = await fetch(`/clips`);
+            const response = await fetch(`/api/clips`);
             if (response.status !== 200) return console.error('Failed to get clip index');
-            updateIndex([...index, ...await response.json()])
-        })()
-
+            updateIndex(await response.json());
+        })();
 
     }, []);
 
+    let i = 0;
     return (
-        <div className='media-page' ref={mediaPage}>
-            {index.map(elem => <MediaComponent
-                key={elem}
-                width={mediaPage.current.clientWidth-50}
-                src={`http://localhost:5000/clips/${elem}`} />)}
+        <div className='media-page'>
+            {index.map(entry => <ClipEntry clickHandler={() => setVideo(entry)} key={i++} {...entry} />)}
+            {video ? <VideoPlayer refF={ref} video={video} />:''}
         </div>
-    )
-}
+    );
+
+};
 
 export default Media;

client/src/pages/Panel.js

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { logout } from "../util/Util";
+import '../css/Panel.css';
+
+const Panel = () => {
+
+    const [selectedFile, updateSelection] = useState(null);
+    const [clipname, updateName] = useState('');
+
+    const submit = async () => {
+
+        const formData = new FormData();
+        formData.set('file', selectedFile, selectedFile.name);
+        formData.set('name', clipname);
+        //console.log(selectedFile)
+
+        for(const value of formData.values()) console.log('loop',value);
+        const response = await fetch('/api/upload', {
+            method: 'POST',
+            body: formData,
+            credentials: 'include'
+        });
+
+        console.log(response);
+
+    };
+
+    return ( 
+        <div className="panel">
+            
+            <div className="uploadform">
+
+                <table >
+                    <tbody>
+                        <tr>
+                            <td>
+                                <label htmlFor='file'>Choose clip to upload</label>
+                            </td>
+                            <td>
+                                <input
+                                    id='file'
+                                    type='file'
+                                    name='clip'
+                                    accept='.mp4'
+                                    onChange={event => updateSelection(event.target.files[0])}
+                                />
+                            </td>
+                        </tr>
+                        {selectedFile ?
+                            <tr>
+                                <td>
+                                    <label htmlFor='name'>Name the clip</label>
+                                </td>
+                                <td>
+                                    <input
+                                        id='name'
+                                        type='text'
+                                        onChange={event => updateName(event.target.value)}
+                                        autoComplete='off'
+                                    />
+                                </td>
+                            </tr>
+                            : <tr></tr>}
+                    </tbody>
+                </table>
+
+                {selectedFile && clipname.length ?
+                    <button onClick={submit}>
+                        SUBMIT
+                    </button>
+                    : ''}
+                
+            </div>
+
+            <div>
+                <button onClick={logout}>Logout</button>
+            </div>
+        </div>
+    );
+
+};
+
+export default Panel;