├── src ├── components │ ├── filewait │ │ └── index.js │ ├── fileloader │ │ └── index.js │ ├── SocialSharing │ │ ├── style.css │ │ └── index.js │ ├── filemodal │ │ ├── style.css │ │ └── index.js │ ├── errorfilemodal │ │ ├── style.css │ │ └── index.js │ ├── imageModal │ │ ├── style.css │ │ └── index.js │ ├── static │ │ ├── lock.svg │ │ ├── hidden.svg │ │ ├── copylink.svg │ │ ├── Logo.svg │ │ ├── whatsapp.svg │ │ ├── avatars │ │ │ ├── 16-wittywalrus.svg │ │ │ ├── 26-pickypenguin.svg │ │ │ ├── 12-edgyeagle.svg │ │ │ ├── 4-bafflingbear.svg │ │ │ ├── 29-heavyhippo.svg │ │ │ ├── 43-timelessturtle.svg │ │ │ ├── 24-ominousowl.svg │ │ │ ├── 48-eliteelephant.svg │ │ │ ├── 47-rowdyrhino.svg │ │ │ └── 8-slowsloth.svg │ │ └── user.svg │ ├── avatar │ │ ├── index.js │ │ └── style.css │ ├── avatarSelector │ │ ├── style.scss │ │ ├── style.css.map │ │ ├── style.css │ │ └── index.js │ ├── avatarMain │ │ ├── index.js │ │ └── style.css │ ├── SocialSharingPublic │ │ ├── style.css │ │ └── index.js │ ├── footer │ │ ├── index.js │ │ └── style.css │ ├── privateContainer │ │ ├── index.js │ │ └── style.css │ ├── qrcode │ │ ├── index.js │ │ └── style.css │ ├── filedropper │ │ ├── style.css.map │ │ ├── style.scss │ │ ├── style.css │ │ └── index.js │ └── filedropper_Public │ │ ├── style.css.map │ │ ├── style.scss │ │ ├── style.css │ │ └── index.js ├── modules │ ├── IconButton │ │ ├── style.js │ │ ├── style.css │ │ └── index.js │ └── button │ │ ├── style.css │ │ └── index.js ├── setupTests.js ├── App.test.js ├── index.css ├── util │ ├── getip.js │ ├── pipe.js │ ├── downloader.js │ ├── clipimg.js │ └── randomAvatarGen.js ├── index.js ├── App.css ├── App.js ├── routes │ ├── style.css.map │ ├── style.scss │ ├── Public_Room.js │ └── style.css ├── logo.svg └── serviceWorker.js ├── .dockerignore ├── .vscode └── settings.json ├── .netlify └── state.json ├── public ├── favicon.ico ├── favicon32.png ├── logo192.png ├── logo512.png ├── favicon152.png ├── favicon167.png ├── favicon180.png ├── favicon192.png ├── favicon196.png ├── robots.txt ├── worker.js ├── manifest.json └── index.html ├── nginx └── nginx.conf ├── .gitignore ├── Dockerfile ├── LICENSE ├── package.json └── README.md /src/components/filewait/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/IconButton/style.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fileloader/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": false 3 | } -------------------------------------------------------------------------------- /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "2abc5b87-fa6d-416e-bb9b-e238e0a50d92" 3 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/veghfile/Frontend/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/veghfile/Frontend/HEAD/public/favicon32.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/veghfile/Frontend/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/veghfile/Frontend/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/favicon152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/veghfile/Frontend/HEAD/public/favicon152.png -------------------------------------------------------------------------------- /public/favicon167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/veghfile/Frontend/HEAD/public/favicon167.png -------------------------------------------------------------------------------- /public/favicon180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/veghfile/Frontend/HEAD/public/favicon180.png -------------------------------------------------------------------------------- /public/favicon192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/veghfile/Frontend/HEAD/public/favicon192.png -------------------------------------------------------------------------------- /public/favicon196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/veghfile/Frontend/HEAD/public/favicon196.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/SocialSharing/style.css: -------------------------------------------------------------------------------- 1 | .socialSharing{ 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-evenly; 5 | align-items: center; 6 | } 7 | .button-container{ 8 | width: 35%; 9 | } 10 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/modules/button/style.css: -------------------------------------------------------------------------------- 1 | .button-primary{ 2 | padding: 8%; 3 | width: 100%; 4 | border-radius: 10px; 5 | border: none; 6 | margin: 10px; 7 | transition: all ease 0.5s ; 8 | } 9 | 10 | 11 | .button-secondary{ 12 | padding: 2%; 13 | width: 50%; 14 | border-radius: 10px; 15 | border: none; 16 | margin: 10px; 17 | } -------------------------------------------------------------------------------- /nginx/nginx.conf: -------------------------------------------------------------------------------- 1 | server { 2 | 3 | listen 80; 4 | 5 | location / { 6 | root /usr/share/nginx/html; 7 | index index.html index.htm; 8 | try_files $uri $uri/ /index.html; 9 | } 10 | 11 | error_page 500 502 503 504 /50x.html; 12 | 13 | location = /50x.html { 14 | root /usr/share/nginx/html; 15 | } 16 | 17 | } -------------------------------------------------------------------------------- /public/worker.js: -------------------------------------------------------------------------------- 1 | let array = []; 2 | self.addEventListener("message", event => { 3 | if (event.data === "download") { 4 | const blob = new Blob(array); 5 | self.postMessage(blob); 6 | array = []; 7 | } else if (event.data === "abort") { 8 | array = []; 9 | } else { 10 | array.push(event.data); 11 | } 12 | }) -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | .openode 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/util/getip.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export function getip(setPubIp, socketRef) { 4 | 5 | axios 6 | .get(`https://api64.ipify.org/?format=json`) 7 | .then((response) => { 8 | let pubId = response.data.ip 9 | setPubIp(pubId) 10 | socketRef.emit("join room using ip", pubId); 11 | }) 12 | .catch(error => { 13 | error = new Error("NOT FOUND 404"); 14 | }) 15 | } -------------------------------------------------------------------------------- /src/modules/button/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './style.css' 3 | import {motion} from "framer-motion" 4 | 5 | 6 | const Button = (props) => { 7 | const { kind, ...other } = props; 8 | const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton"; 9 | return ; 11 | } 12 | 13 | export default Button 14 | -------------------------------------------------------------------------------- /src/components/filemodal/style.css: -------------------------------------------------------------------------------- 1 | .button { 2 | padding: 0.5em 1em; 3 | margin-top: 2em; 4 | margin-right: 0.8em; 5 | border-radius: 5%; 6 | cursor: pointer; 7 | } 8 | 9 | .close { 10 | border:solid 1px #9a9a9a; 11 | color: #9a9a9a; 12 | background: none; 13 | } 14 | 15 | .okay { 16 | background-color: #16BAC5; 17 | color: black; 18 | border: none; 19 | font-weight: 700; 20 | } 21 | 22 | /* h2 { 23 | color: white; 24 | } 25 | 26 | p { 27 | color: white; 28 | } */ -------------------------------------------------------------------------------- /src/components/errorfilemodal/style.css: -------------------------------------------------------------------------------- 1 | .button { 2 | padding: 0.5em 1em; 3 | margin-top: 2em; 4 | margin-right: 0.8em; 5 | border-radius: 5%; 6 | cursor: pointer; 7 | } 8 | 9 | .close { 10 | border:solid 1px #9a9a9a; 11 | color: #9a9a9a; 12 | background: none; 13 | } 14 | 15 | .okay { 16 | background-color: #16BAC5; 17 | color: black; 18 | border: none; 19 | font-weight: 700; 20 | } 21 | 22 | /* h2 { 23 | color: white; 24 | } 25 | 26 | p { 27 | color: white; 28 | } */ -------------------------------------------------------------------------------- /src/components/imageModal/style.css: -------------------------------------------------------------------------------- 1 | .button { 2 | padding: 0.5em 1em; 3 | margin-top: 2em; 4 | margin-right: 0.8em; 5 | border-radius: 5%; 6 | cursor: pointer; 7 | } 8 | 9 | .close { 10 | border:solid 1px #9a9a9a; 11 | color: #9a9a9a; 12 | background: none; 13 | } 14 | 15 | .okay { 16 | background-color: #16BAC5; 17 | color: black; 18 | border: none; 19 | font-weight: 700; 20 | } 21 | #preview{ 22 | width: 100%; 23 | } 24 | /* h2 { 25 | color: white; 26 | } 27 | 28 | p { 29 | color: white; 30 | } */ -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # build environment 2 | FROM node:13.12.0-alpine as build 3 | WORKDIR /app 4 | ENV PATH /app/node_modules/.bin:$PATH 5 | COPY package.json ./ 6 | COPY package-lock.json ./ 7 | RUN npm ci --silent 8 | RUN npm install react-scripts@3.4.1 -g --silent 9 | COPY . ./ 10 | RUN npm run build 11 | 12 | # production environment 13 | FROM nginx:stable-alpine 14 | COPY --from=build /app/build /usr/share/nginx/html 15 | # new 16 | COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf 17 | EXPOSE 80 18 | CMD ["nginx", "-g", "daemon off;"] 19 | -------------------------------------------------------------------------------- /src/components/static/lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /src/modules/IconButton/style.css: -------------------------------------------------------------------------------- 1 | .button-container{ 2 | width: 35%; 3 | } 4 | 5 | .button-primary{ 6 | background-color: #EDEDED; 7 | padding: 4%; 8 | width: 100%; 9 | border-radius: 10px; 10 | border: none; 11 | margin: 10px 0; 12 | font-weight: 400; 13 | font-size: calc(8px + 1vmin); 14 | } 15 | 16 | .button-secondary{ 17 | padding: 2%; 18 | width: 50%; 19 | border-radius: 10px; 20 | border: none; 21 | margin: 10px 0; 22 | } 23 | 24 | img{ 25 | width: 22%; 26 | } 27 | 28 | button{ 29 | display: flex; 30 | justify-content: space-evenly; 31 | align-items: center; 32 | } -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/modules/IconButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './style.css' 3 | import {motion} from 'framer-motion' 4 | const IconButton = ({svg,children,...other}) => { 5 | const transition = { duration : .1 }; 6 | return ( 7 |
8 | 10 | {children?children:"Share Link"} 11 | 12 | 13 |
14 | ) 15 | } 16 | 17 | export default IconButton 18 | -------------------------------------------------------------------------------- /src/util/pipe.js: -------------------------------------------------------------------------------- 1 | export async function pipe(readStream, writeStream) { 2 | const writer = writeStream.getWriter(); 3 | for await(const chunk of readStream) { 4 | await writer.write(chunk); 5 | } 6 | await writer.close(); 7 | } 8 | 9 | export function streamAsyncIterator(readableStream) { 10 | const reader = readableStream.getReader(); 11 | return { 12 | next() { 13 | return reader.read(); 14 | }, 15 | return() { 16 | return reader.cancel(); 17 | }, 18 | [Symbol.asyncIterator]() { 19 | return this; 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /src/components/avatar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {AvatarGen} from '../../util/randomAvatarGen' 3 | import UserSvg from '../static/user.svg' 4 | const Avatar = ({index,children,nameID,...other}) => { 5 | let UserInfo = AvatarGen(index) 6 | 7 | return ( 8 |
9 |
10 | 11 |
12 |
{UserInfo?children:null}
13 |

{UserInfo?UserInfo.name:null}

14 |
15 |
16 |
17 | ) 18 | } 19 | 20 | export default Avatar 21 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/util/downloader.js: -------------------------------------------------------------------------------- 1 | import {pipe, streamAsyncIterator} from './pipe'; 2 | import streamSaver from "streamsaver"; 3 | 4 | export async function down(event, fname, pname) { 5 | const stream = event 6 | .data 7 | .stream(); 8 | const fileStream = streamSaver.createWriteStream(fname); 9 | if (stream.pipeTo) { 10 | stream.pipeTo(fileStream); 11 | } else { 12 | //custom pipe function for unsupported browsers 13 | await pipe(streamAsyncIterator(event.data.stream()), fileStream); 14 | } 15 | if(pname){ 16 | const peer = pname; 17 | peer.write(JSON.stringify({wait: true})) 18 | } 19 | // Promise.resolve() 20 | // .then(() => 21 | // ).catch(console.log) 22 | } -------------------------------------------------------------------------------- /src/components/avatarSelector/style.scss: -------------------------------------------------------------------------------- 1 | .selector-wrapper { 2 | border: 3px solid #C7C7C7; 3 | border-radius: 10px; 4 | padding: 1.5% 1.5% 1.5% 1.5%; 5 | margin: 2%; 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: center; 9 | align-items: flex-end; 10 | width: 40%; 11 | max-width: 230px; 12 | 13 | .peer-avatar img { 14 | width: 35%; 15 | } 16 | 17 | 18 | @media only screen and (max-width: 768px) { 19 | .userInfo { 20 | font-size: calc(2px + 2vmin); 21 | } 22 | max-height: 200px; 23 | } 24 | 25 | .pretty { 26 | font-size: calc(14px + 2vmin); 27 | margin-right: 0.3em; 28 | } 29 | 30 | 31 | 32 | .pretty.p-default input:checked~.state label:after { 33 | background-color: #16BAC5 !important; 34 | } 35 | 36 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {MainPublicProvider} from './context/Maincontext'; 3 | import { BrowserRouter, Route, Switch } from "react-router-dom"; 4 | import Room from "./routes/Room"; 5 | import PublicRoom from "./routes/Public_Room"; 6 | import {AnimatePresence} from "framer-motion"; 7 | 8 | function App() { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /src/util/clipimg.js: -------------------------------------------------------------------------------- 1 | 2 | export async function clipimg(setFile,setConfirmSend,setGotImg,setImgSrc) { 3 | 4 | 5 | document.addEventListener('paste', function(event) { 6 | var items = (event.clipboardData || event.originalEvent.clipboardData).items; 7 | var blob = null; 8 | for (var i = 0; i < items.length; i++) { 9 | if (items[i].type.indexOf("image") === 0) { 10 | blob = items[i].getAsFile(); 11 | } 12 | } 13 | // load image if there is a pasted image 14 | if (blob !== null) { 15 | // return blob 16 | setGotImg(true) 17 | setConfirmSend(true) 18 | setFile(blob) 19 | const reader = new FileReader(); 20 | reader.onload = (evt) => { 21 | setImgSrc(evt.target.result) 22 | }; 23 | reader.readAsDataURL(blob); 24 | } 25 | }); 26 | } -------------------------------------------------------------------------------- /src/components/avatarMain/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {AvatarGen} from '../../util/randomAvatarGen' 3 | import UserSvg from '../static/user.svg' 4 | import './style.css' 5 | import {motion} from 'framer-motion' 6 | const Avatar = ({index,children,...other}) => { 7 | let UserInfo = AvatarGen(index) 8 | 9 | 10 | return ( 11 | 12 |
13 | 14 |

{UserInfo?UserInfo.name:null}

15 | {UserInfo?children:null} 16 | 17 | 18 |
19 | 20 | ) 21 | } 22 | 23 | export default Avatar 24 | -------------------------------------------------------------------------------- /src/components/avatarSelector/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,iBAAiB,CAAC;EAChB,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,mBAAmB;EAC5B,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,QAAQ;EACrB,KAAK,EAAE,GAAG;EACV,SAAS,EAAE,KAAK;CAyBjB;;AAnCD,AAYE,iBAZe,CAYf,YAAY,CAAC,GAAG,CAAC;EACf,KAAK,EAAE,GAAG;CACX;;AAGD,MAAM,MAAM,MAAM,MAAM,SAAS,EAAE,KAAK;EAjB1C,AAAA,iBAAiB,CAAC;IAqBd,UAAU,EAAE,KAAK;GAcpB;EAnCD,AAkBI,iBAlBa,CAkBb,SAAS,CAAC;IACR,SAAS,EAAE,iBAAiB;GAC7B;;;AApBL,AAwBE,iBAxBe,CAwBf,OAAO,CAAC;EACN,SAAS,EAAE,kBAAkB;EAC7B,YAAY,EAAE,KAAK;CACpB;;AA3BH,AA+BE,iBA/Be,CA+Bf,OAAO,AAAA,UAAU,CAAC,KAAK,AAAA,QAAQ,GAAC,MAAM,CAAC,KAAK,AAAA,MAAM,CAAC;EACjD,gBAAgB,EAAE,kBAAkB;CACrC", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /src/components/errorfilemodal/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import 'react-responsive-modal/styles.css'; 3 | import { Modal } from 'react-responsive-modal'; 4 | import './style.css'; 5 | export default class FileModal extends React.Component { 6 | state = { 7 | open: this.props.openModal, 8 | mssg: this.props.children, 9 | }; 10 | 11 | onCloseModal = () => { 12 | this.setState({ open: false }); 13 | this.props.handleAbort() 14 | }; 15 | render() { 16 | const { open } = this.state; 17 | return ( 18 |
19 | 20 |

:(

21 |

{this.state.mssg}

22 | 23 | 24 |
25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/imageModal/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import 'react-responsive-modal/styles.css'; 3 | import { Modal } from 'react-responsive-modal'; 4 | import './style.css'; 5 | export default class FileModal extends React.Component { 6 | state = { 7 | open: this.props.openModal, 8 | mssg: this.props.children, 9 | }; 10 | 11 | onCloseModal = () => { 12 | this.setState({ open: false }); 13 | }; 14 | render() { 15 | const { open } = this.state; 16 | return ( 17 |
18 | 19 |

Preview captured from clipboard

20 | 21 | 22 | 23 |
24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/SocialSharingPublic/style.css: -------------------------------------------------------------------------------- 1 | .socialSharing{ 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-evenly; 5 | align-items: center; 6 | } 7 | .button-container{ 8 | width: 35%; 9 | } 10 | 11 | .copyLink{ 12 | margin: 0px 7px; 13 | } 14 | .PrivateLink img{ 15 | width: 19% !important; 16 | } 17 | .PrivateLink button{ 18 | background-color: #16BAC5; 19 | color: white; 20 | } 21 | @media only screen and (min-width: 768px) { 22 | .PrivateLink{ 23 | display: none; 24 | } 25 | .private-text{ 26 | display: none; 27 | } 28 | } 29 | @media only screen and (max-width: 768px) { 30 | button{ 31 | font-size:calc(3px + 2vmin) !important; 32 | } 33 | p{ 34 | text-align: center; 35 | font-size:calc(3px + 2vmin) !important; 36 | margin: 5px; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './style.css'; 3 | import Logo from '../static/Logo.svg' 4 | import {motion} from 'framer-motion'; 5 | 6 | const Footer = () => { 7 | return ( 8 |
9 | 10 | Vegh Logo 11 |
12 |

About |

13 |

Terms of Service |

14 |

Privacy

15 |
16 | 17 |
18 | ) 19 | } 20 | 21 | export default Footer 22 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | Vegh | Fast P2P File Transfer 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/filemodal/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import 'react-responsive-modal/styles.css'; 3 | import { Modal } from 'react-responsive-modal'; 4 | import './style.css'; 5 | export default class FileModal extends React.Component { 6 | state = { 7 | open: this.props.openModal, 8 | }; 9 | 10 | onCloseModal = () => { 11 | this.setState({ open: false }); 12 | this.props.handleAbort() 13 | }; 14 | render() { 15 | const { open } = this.state; 16 | return ( 17 |
18 | 19 |

File Transfer Request

20 |

You have an incoming file transfer request. What would you like to do?

21 | 22 | 23 | 24 |
25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Vegh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/footer/style.css: -------------------------------------------------------------------------------- 1 | 2 | .linkContainer{ 3 | display: flex; 4 | margin: 0 0 0 70px; 5 | font-size: 1.2em; 6 | 7 | } 8 | .logo{ 9 | font-size: 1.5em; 10 | margin : 5px; 11 | width: 5%; 12 | } 13 | .footerContainer{ 14 | display: flex; 15 | padding : 0.5% 5%; 16 | justify-content: start; 17 | align-items: center; 18 | margin: 5px; 19 | } 20 | span { 21 | margin: 5px; 22 | } 23 | a{ 24 | text-decoration: none; 25 | color: black; 26 | } 27 | p{ 28 | text-align: center; 29 | } 30 | 31 | @media only screen and (max-width: 425px) { 32 | .footerContainer { 33 | flex-direction: column; 34 | justify-content: center; 35 | align-items: center; 36 | } 37 | .linkContainer{ 38 | justify-content: center; 39 | flex-direction: row; 40 | text-align: center; 41 | margin: auto; 42 | font-size: 1em; 43 | } 44 | p{ 45 | margin: 0.5ch; 46 | } 47 | .logo{ 48 | width: 20%; 49 | } 50 | } 51 | 52 | @media only screen and (max-width: 768px){ 53 | .logo{ 54 | width: 20%; 55 | } 56 | } -------------------------------------------------------------------------------- /src/components/avatarSelector/style.css: -------------------------------------------------------------------------------- 1 | .selector-wrapper { 2 | border: 3px solid #C7C7C7; 3 | border-radius: 10px; 4 | padding: 1.5% 1.5% 1.5% 1.5%; 5 | margin: 2%; 6 | display: -webkit-box; 7 | display: -ms-flexbox; 8 | display: flex; 9 | -webkit-box-orient: vertical; 10 | -webkit-box-direction: normal; 11 | -ms-flex-direction: column; 12 | flex-direction: column; 13 | -webkit-box-pack: center; 14 | -ms-flex-pack: center; 15 | justify-content: center; 16 | -webkit-box-align: end; 17 | -ms-flex-align: end; 18 | align-items: flex-end; 19 | width: 40%; 20 | max-width: 230px; 21 | } 22 | 23 | .selector-wrapper .peer-avatar img { 24 | width: 35%; 25 | } 26 | 27 | @media only screen and (max-width: 768px) { 28 | .selector-wrapper { 29 | max-height: 200px; 30 | } 31 | .selector-wrapper .userInfo { 32 | font-size: calc(2px + 2vmin); 33 | } 34 | } 35 | 36 | .selector-wrapper .pretty { 37 | font-size: calc(14px + 2vmin); 38 | margin-right: 0.3em; 39 | } 40 | 41 | .selector-wrapper .pretty.p-default input:checked ~ .state label:after { 42 | background-color: #16BAC5 !important; 43 | } 44 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /src/components/avatar/style.css: -------------------------------------------------------------------------------- 1 | .peer-avatar { 2 | height: 100%; 3 | width: 100%; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | flex-direction: column; 8 | } 9 | 10 | .peer-avatar { 11 | height: -webkit-fill-available; 12 | -webkit-box-orient: horizontal; 13 | -webkit-box-direction: normal; 14 | -ms-flex-direction: row; 15 | flex-direction: row; 16 | } 17 | 18 | .peer-avatar { 19 | -webkit-box-align: end; 20 | -ms-flex-align: end; 21 | align-items: flex-end; 22 | justify-content: flex-end; 23 | padding: 0; 24 | } 25 | .peer-info{ 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: flex-end; 29 | align-items: flex-end; 30 | } 31 | .peer-avatar img { 32 | width: 10ch; 33 | margin: 10px; 34 | } 35 | 36 | .peer-avatar p { 37 | text-align: center; 38 | padding: 5px; 39 | font-size: 1rem; 40 | margin: 0; 41 | } 42 | 43 | .flex-row-center { 44 | display: flex; 45 | justify-content: center; 46 | align-items: center; 47 | } 48 | 49 | @media only screen and (max-width: 768px) { 50 | .peer-avatar{ 51 | justify-content: center; 52 | } 53 | .flex-row-center { 54 | justify-content: center; 55 | flex-direction: column-reverse; 56 | } 57 | .peer-info{ 58 | align-items: center; 59 | } 60 | } -------------------------------------------------------------------------------- /src/components/privateContainer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import QRCode from 'qrcode.react' 3 | import './style.css' 4 | import hidden from './../static/hidden.svg' 5 | import publicRoom from './../static/Public_Room.svg'; 6 | import IconButton from '../../modules/IconButton/index'; 7 | import Button from '../../modules/button/index'; 8 | import {createBrowserHistory} from 'history'; 9 | import Lock from '../static/lock.svg' 10 | import {hri} from 'human-readable-ids' 11 | 12 | 13 | 14 | const PrivateContainer = (props) => { 15 | const {qrUrl} = props 16 | const history = createBrowserHistory({ 17 | forceRefresh: true 18 | }); 19 | function create() { 20 | const id = hri.random(); 21 | history.push(`/room/${id}`); 22 | } 23 | 24 | 25 | 26 | return ( 27 |
28 |
29 |
30 | 31 |

Private rooms can only be accessed by the second device using a link or QR Code. You do not need to be on the same network.

32 |
33 |
34 | create()} svg = {Lock}>Private Room 35 |
36 |
37 |
38 | ) 39 | } 40 | 41 | export default PrivateContainer 42 | -------------------------------------------------------------------------------- /src/components/SocialSharing/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './style.css' 3 | import IconButton from './../../modules/IconButton/index' 4 | import whatsAppIcon from './../static/whatsapp.svg' 5 | import copyLink from './../static/copylink.svg' 6 | import { useAlert as UseAlert } from 'react-alert' 7 | const socialSharing = ({params}) => { 8 | 9 | function copyToClipboard() { 10 | /* Get the text field */ 11 | var input = document.createElement('input'); 12 | input.setAttribute('value', params); 13 | document.body.appendChild(input); 14 | input.select(); 15 | input.setSelectionRange(0, 99999); /*For mobile devices*/ 16 | var result = document.execCommand('copy'); 17 | document.body.removeChild(input) 18 | /* Copy the text inside the text field */ 19 | alert.show('Copied to Clipboard!') 20 | } 21 | 22 | const alert = UseAlert() 23 | return ( 24 |
25 |
26 | {/* */} 27 | window.open(`https://web.whatsapp.com/send?text=Quick Join Now ${params}`)} svg = {whatsAppIcon}> 28 | 29 |
30 |
31 | 34 |
35 |
36 | ) 37 | } 38 | 39 | export default socialSharing 40 | -------------------------------------------------------------------------------- /src/components/avatarMain/style.css: -------------------------------------------------------------------------------- 1 | .peer-avatar-You { 2 | height: 100%; 3 | width: 100%; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | flex-direction: column; 8 | } 9 | 10 | .peer-avatar-You { 11 | height: -webkit-fill-available; 12 | -webkit-box-orient: horizontal; 13 | -webkit-box-direction: normal; 14 | -ms-flex-direction: row; 15 | flex-direction: row; 16 | } 17 | 18 | .peer-avatar-You { 19 | -webkit-box-align: end; 20 | -ms-flex-align: end; 21 | align-items: flex-end; 22 | justify-content: flex-end; 23 | padding: 0; 24 | } 25 | .peer-info{ 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: flex-end; 29 | align-items: flex-end; 30 | } 31 | .peer-avatar-You img { 32 | width: calc(69px + 2vmin); 33 | margin: 10px; 34 | } 35 | 36 | .peer-avatar-You h2 { 37 | font-size: calc(15px + 1vmin); 38 | text-align: center; 39 | margin: 10px; 40 | } 41 | 42 | .userInfo-You{ 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: flex-end; 46 | align-items: flex-end; 47 | } 48 | 49 | .flex-col-center-You{ 50 | display: flex; 51 | justify-content: flex-end; 52 | align-items: center; 53 | } 54 | 55 | @media only screen and (max-width: 768px) { 56 | .peer-avatar-You{ 57 | display: flex; 58 | align-items: center; 59 | justify-content: center; 60 | } 61 | .userInfo-You{ 62 | justify-content: center; 63 | align-items: center; 64 | } 65 | .userInfo{ 66 | display: flex 67 | } 68 | .flex-col-center-You{ 69 | justify-content: center; 70 | flex-direction: column-reverse; 71 | } 72 | } -------------------------------------------------------------------------------- /src/components/static/hidden.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 12 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@mdi/font": "^5.5.55", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "axios": "^0.19.2", 11 | "buffer": "^5.6.0", 12 | "dotenv": "^8.2.0", 13 | "framer-motion": "^2.5.3", 14 | "human-readable-ids": "^1.0.4", 15 | "pretty-checkbox": "^3.0.3", 16 | "pretty-checkbox-react": "^2.0.0", 17 | "qrcode.react": "^1.0.0", 18 | "react": "^16.13.1", 19 | "react-alert": "^7.0.2", 20 | "react-alert-template-basic": "^1.0.0", 21 | "react-dom": "^16.13.1", 22 | "react-dropzone": "^11.0.2", 23 | "react-gradient-progress": "^1.0.3", 24 | "react-responsive-modal": "^5.0.2", 25 | "react-router-dom": "^5.1.2", 26 | "react-scripts": "3.4.1", 27 | "react-spinners": "^0.9.0", 28 | "react-sweet-progress": "^1.1.2", 29 | "simple-peer": "^9.7.0", 30 | "socket.io-client": "^2.3.0", 31 | "streamsaver": "^2.0.4", 32 | "string-codec": "^0.1.0", 33 | "web-streams-polyfill": "^2.0.5" 34 | }, 35 | "scripts": { 36 | "start": "react-scripts start", 37 | "build": "react-scripts build", 38 | "test": "react-scripts test", 39 | "eject": "react-scripts eject" 40 | }, 41 | "eslintConfig": { 42 | "extends": "react-app" 43 | }, 44 | "browserslist": { 45 | "production": [ 46 | ">0.2%", 47 | "not dead", 48 | "not op_mini all" 49 | ], 50 | "development": [ 51 | "last 1 chrome version", 52 | "last 1 firefox version", 53 | "last 1 safari version" 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/qrcode/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import QRCode from 'qrcode.react' 3 | import './style.css' 4 | import hidden from './../static/hidden.svg' 5 | import {motion,AnimatePresence} from "framer-motion" 6 | 7 | const qrCode = (props) => { 8 | const {qrUrl,params} = props 9 | 10 | const showQr = () =>{ 11 | let qr = document.getElementById("qrBlur").style.visibility 12 | if (qr == "visible"){ 13 | document.getElementById("qrBlur").style.visibility = "hidden" 14 | } 15 | else { 16 | document.getElementById("qrBlur").style.visibility = "visible" 17 | } 18 | 19 | } 20 | 21 | return ( 22 |
23 |
24 |
25 | 26 |
27 |
28 |

room ID

29 |

{params}

30 |
31 |
32 | 33 |
34 | {/* */} 35 |
36 |

SHOW QR CODE

37 |
38 |
39 | 40 |
41 |
42 |

room ID

43 |

{params}

44 |
45 |
46 |
47 | ) 48 | } 49 | 50 | export default qrCode 51 | -------------------------------------------------------------------------------- /src/routes/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,OAAO,CAAC,4EAAI;AAEZ,AAAA,CAAC,CAAC;EACA,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;EACtB,WAAW,EAAE,6BAA6B;EAC1C,sBAAsB,EAAE,IAAI;EAAE,gBAAgB;EAC/C,oBAAoB,EAAE,IAAI;EAAI,gDAAgD;EAC9E,gBAAgB,EAAE,IAAI;EAAK,aAAa;EACxC,eAAe,EAAE,IAAI;EAAG,qBAAqB;EAC7C,WAAW,EAAE,IAAI;CACjB;;AAED,AAAA,IAAI,EAAC,IAAI,CAAA;EACP,MAAM,EAAE,sBAAsB;CAC/B;;AAED,AAAA,QAAQ,CAAC;EACP,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,WAAW;CACrB;;AAED,AAAA,MAAM,CAAA;EACJ,MAAM,EAAE,OAAO;CAChB;;AAED,AAAA,WAAW,CAAC;EACV,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,GAAG;EAC1B,kBAAkB,EAAE,eAAe;EACnC,mBAAmB,EACjB,sBAEM;EACR,kCAAkC;EAClC,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,MAAM;CAEhB;;AAED,AAAA,SAAS,CAAC;EACR,SAAS,EAAE,IAAI;CAEhB;;AAED,AAAA,OAAO,CAAC;EACN,OAAO,EAAE,WAAW;EACpB,SAAS,EAAE,IAAI;CAEhB;;AAED,AAAA,YAAY,CAAC;EACX,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;CAChB;;AAED,AAAA,OAAO,CAAC;EACN,SAAS,EAAE,IAAI;CAEhB;;AACD,AAAA,KAAK,CAAA;EACH,MAAM,EAAE,IAAI;CACb;;AACD,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,OAAO;EAC9B,kBAAkB,EAAE,GAAG;EACvB,mBAAmB,EACjB,wBACW;EAEb,MAAM,EAAE,IAAI;CACb;;AAID,MAAM,MAAM,MAAM,MAAM,SAAS,EAAE,KAAK;EACtC,AAAA,IAAI,CAAC;IACH,OAAO,EAAE,IAAI;IACb,qBAAqB,EAAE,GAAG;IAC1B,kBAAkB,EAAE,iBAAiB;IACrC,mBAAmB,EACjB,sBAEM;IACR,MAAM,EAAE,KAAK;GACd;EAID,AAAA,WAAW,CAAC;IACV,qBAAqB,EAAE,OAAO;IAC9B,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EACnB,wBACW;IACX,QAAQ,EAAE,EAAE;IACZ,aAAa,EAAE,IAAI;IACnB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,mBAAmB;IAC3B,UAAU,EAAE,mBAAmB,CAAC,UAAU;GAC3C;EAED,AAAA,YAAY,CAAC;IACX,qBAAqB,EAAE,OAAO;IAC9B,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EACjB,mCACsB;IACxB,QAAQ,EAAE,EAAE;IACZ,aAAa,EAAE,eAAe;IAC9B,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,mBAAmB;IAC3B,UAAU,EAAE,mBAAmB,CAAC,UAAU;GAK3C;EAfD,AAWE,YAXU,CAWV,gBAAgB,CAAA;IACd,aAAa,EAAE,GAAG;IAClB,cAAc,EAAE,GAAG;GACpB;EAEH,AAAA,QAAQ,CAAC;IACP,UAAU,EAAE,mBAAmB,CAAC,UAAU;IAC1C,MAAM,EAAE,mBAAmB;GAC5B;EACD,AAAA,YAAY,CAAA;IACV,UAAU,EAAE,gBAAgB;IAC5B,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,WAAW;GACpB", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /src/components/filedropper/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /src/components/qrcode/style.css: -------------------------------------------------------------------------------- 1 | .qrBox { 2 | position: relative; 3 | } 4 | #hiddeneye{ 5 | position: absolute; 6 | z-index: 10; 7 | display:flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | width: 100%; 12 | } 13 | #hiddeneye img { 14 | width: calc(100px + 2vmin); 15 | padding:calc(5px + 1vmin); 16 | } 17 | #hiddeneye p { 18 | border-top:3px solid white; 19 | width: 50%; 20 | text-align: center; 21 | padding:calc(5px + 1vmin); 22 | color:#fcfbfd; 23 | font-weight: bold; 24 | font-size:calc(15px + 1vmin) ; 25 | } 26 | 27 | .stackTop{ 28 | display: flex; 29 | background: #a7a6a8; 30 | justify-content: space-evenly; 31 | align-items: center; 32 | width: 100%; 33 | position: absolute; 34 | top: 0%; 35 | height: 100%; 36 | flex-direction: column; 37 | visibility: visible; 38 | border : solid white 1px; 39 | border-radius: 20px; 40 | } 41 | .stackTop .qrCode,.stackTop .qrText{ 42 | filter: blur(10px); 43 | } 44 | .qrContainer { 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: space-evenly; 48 | align-items: center; 49 | border : solid black 1px; 50 | border-radius: 20px; 51 | padding: calc(3px + 2vmin); 52 | height: 100%; 53 | } 54 | 55 | .qrCode canvas { 56 | 57 | width: 60%; 58 | 59 | } 60 | .qrCode{ 61 | text-align: center; 62 | 63 | } 64 | .qrText{ 65 | font-weight: bold; 66 | margin-top: 2%; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | align-items: center; 71 | } 72 | 73 | .room-lable{ 74 | font-size: calc(10px + 2vmin); 75 | color: #c3c3c3; 76 | } 77 | 78 | .room-ID{ 79 | font-size: calc(15px + 2vmin); 80 | user-select: all; 81 | } 82 | 83 | @media only screen and (max-width: 768px) { 84 | .room-lable{ 85 | font-size: calc(10px + 1vmin); 86 | color: #c3c3c3; 87 | } 88 | 89 | 90 | .room-ID{ 91 | font-size: calc(15px + 1vmin); 92 | } 93 | 94 | #hiddeneye img { 95 | width: calc(60px + 2vmin); 96 | } 97 | #hiddeneye p { 98 | font-size:calc(10px + 1vmin) ; 99 | } 100 | 101 | } 102 | -------------------------------------------------------------------------------- /src/components/static/copylink.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 11 | 12 | 14 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/components/SocialSharingPublic/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './style.css'; 3 | import IconButton from '../../modules/IconButton/index'; 4 | import whatsAppIcon from './../static/whatsapp.svg'; 5 | import copyLink from './../static/copylink.svg'; 6 | import Lock from '../static/lock.svg' 7 | import Button from '../../modules/button/index'; 8 | import {hri} from 'human-readable-ids' 9 | import {createBrowserHistory} from 'history'; 10 | import { useAlert as UseAlert } from 'react-alert' 11 | 12 | 13 | const socialSharing = ({params}) => { 14 | const history = createBrowserHistory({ 15 | forceRefresh: true 16 | }); 17 | function create() { 18 | const id = hri.random(); 19 | history.push(`/room/${id}`); 20 | } 21 | 22 | function copyToClipboard() { 23 | /* Get the text field */ 24 | var input = document.createElement('input'); 25 | input.setAttribute('value', params); 26 | document.body.appendChild(input); 27 | input.select(); 28 | input.setSelectionRange(0, 99999); /*For mobile devices*/ 29 | var result = document.execCommand('copy'); 30 | document.body.removeChild(input) 31 | /* Copy the text inside the text field */ 32 | alert.show('Copied to Clipboard!') 33 | } 34 | 35 | const alert = UseAlert() 36 | 37 | return ( 38 |
39 |

Private rooms can only be accessed by the second device using a link or QR Code. You do not need to be on the same network.

40 |
41 |
42 | {/* */} 43 | window.open(`https://web.whatsapp.com/send?text=Quick Join Now ${params}`)}> 44 | 45 |
46 |
47 | 48 |
49 |
50 | create()} svg = {Lock}>Private Room 51 |
52 |
53 |
54 | ) 55 | } 56 | 57 | export default socialSharing 58 | -------------------------------------------------------------------------------- /src/components/privateContainer/style.css: -------------------------------------------------------------------------------- 1 | .qrBox { 2 | position: relative; 3 | } 4 | #hiddeneye{ 5 | position: absolute; 6 | z-index: 10; 7 | display:flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | width: 100%; 12 | } 13 | #hiddeneye img { 14 | width: calc(100px + 2vmin); 15 | padding:calc(5px + 1vmin); 16 | } 17 | #hiddeneye p { 18 | border-top:3px solid white; 19 | width: 50%; 20 | text-align: center; 21 | padding:calc(5px + 1vmin); 22 | color:#fcfbfd; 23 | font-weight: bold; 24 | font-size:calc(15px + 1vmin) ; 25 | } 26 | 27 | .stackTop{ 28 | display: flex; 29 | background: #a7a6a8; 30 | justify-content: space-evenly; 31 | align-items: center; 32 | width: 100%; 33 | position: absolute; 34 | top: 0%; 35 | height: 100%; 36 | flex-direction: column; 37 | visibility: visible; 38 | border : solid white 1px; 39 | border-radius: 20px; 40 | } 41 | .stackTop .qrCode,.stackTop .qrText{ 42 | filter: blur(10px); 43 | } 44 | .qrContainer { 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: space-evenly; 48 | align-items: center; 49 | border-radius: 20px; 50 | padding: calc(3px + 2vmin); 51 | height: 100%; 52 | } 53 | .publicContainer{ 54 | border : none; 55 | } 56 | .button-primary { 57 | padding: 10%; 58 | } 59 | 60 | .qrCode canvas { 61 | 62 | width: 60%; 63 | 64 | } 65 | .qrCode{ 66 | text-align: center; 67 | 68 | } 69 | .qrCode img{ 70 | width: 70%; 71 | } 72 | .qrText{ 73 | font-weight: bold; 74 | margin-top: 2%; 75 | display: flex; 76 | flex-direction: column; 77 | justify-content: center; 78 | align-items: center; 79 | } 80 | 81 | .qrText{ 82 | width: 45%; 83 | } 84 | 85 | .room-lable{ 86 | font-size: calc(10px + 2vmin); 87 | color: #c3c3c3; 88 | } 89 | 90 | .room-ID{ 91 | font-size: calc(15px + 2vmin); 92 | } 93 | 94 | p{ 95 | /* display: block !important; 96 | text-align: center; */ 97 | } 98 | 99 | .privateButton button{ 100 | background-color: #68C6A3; 101 | color: white; 102 | } 103 | 104 | .privateButton img{ 105 | filter: invert(1); 106 | } 107 | 108 | @media only screen and (max-width: 768px) { 109 | .public-box{ 110 | display: none; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/components/avatarSelector/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import './style.css'; 3 | import { Checkbox } from 'pretty-checkbox-react'; 4 | import 'pretty-checkbox' 5 | import Avatar from '../avatar/index' 6 | import {motion, AnimatePresence} from 'framer-motion' 7 | 8 | 9 | const AvatarSelector = ({nameID,index,peersAddCallback,peersRemoveCallback,checkReset,checkCallback,check}) => { 10 | 11 | const [checked, setChecked] = useState(false); 12 | const [name,setName] = useState("") 13 | 14 | 15 | 16 | const handleChange = React.useCallback((e) => { 17 | document.getElementById(nameID).style.border = check===false&& checked?"3px solid rgb(199 199 199)":"3px solid #16BAC5"; 18 | setChecked(prev => !prev); 19 | setName(e.target.name) 20 | }, [check,checked]); 21 | 22 | useEffect(()=>{ 23 | setChecked(false) 24 | document.getElementById(nameID).style.border = document.getElementById(nameID).style.border = "3px solid rgb(199 199 199)"; 25 | checkCallback() 26 | },[checkReset]) 27 | 28 | useEffect(()=>{ 29 | setChecked(false) 30 | document.getElementById(nameID).style.border = check? "3px solid rgb(22, 186, 197)":"3px solid rgb(199 199 199)"; 31 | checkCallback() 32 | },[check]) 33 | 34 | 35 | useEffect(()=>{ 36 | setChecked(false) 37 | checkCallback() 38 | },[]) 39 | 40 | useEffect(() => { 41 | if (checked) { 42 | peersAddCallback(name) 43 | } else{ 44 | peersRemoveCallback(name) 45 | } 46 | }, [checked]); 47 | 48 | return ( 49 | 50 | 51 | 53 |
54 | 55 | 56 | 57 |
58 | 59 | 60 | 61 | 62 | ) 63 | } 64 | 65 | export default AvatarSelector 66 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/filedropper/style.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='3' stroke-dasharray='5%2c15' stroke-dashoffset='23' stroke-linecap='square'/%3e%3c/svg%3e"); 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | .dropzone, 10 | .file-container, 11 | .peer-avatar { 12 | height: 100%; 13 | width: 100%; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | flex-direction: column; 18 | } 19 | 20 | .sweet-loading{ 21 | padding: 10px; 22 | } 23 | 24 | .file-container, 25 | .peer-avatar { 26 | height: -webkit-fill-available; 27 | flex-direction: row; 28 | } 29 | 30 | .avatar-wrapper{ 31 | width: inherit; 32 | height: inherit; 33 | display: flex; 34 | justify-content: center; 35 | align-items: flex-end; 36 | } 37 | 38 | .peer-avatar { 39 | padding-bottom: 4ch; 40 | 41 | img { 42 | width: 10ch; 43 | margin: 10px; 44 | } 45 | p{ 46 | text-align: center; 47 | padding: 5px; 48 | font-size: 1.5em; 49 | margin: 0 5ch; 50 | color: #707070; 51 | } 52 | } 53 | 54 | .file-container { 55 | align-items: flex-start; 56 | } 57 | 58 | .confirm-inputs{ 59 | display: flex; 60 | align-items: center; 61 | } 62 | 63 | .input-cont { 64 | display: flex; 65 | flex-direction: column; 66 | align-items: center; 67 | font-size: 1.3em !important; 68 | width: 35%; 69 | .button-primary { 70 | background: #16BAC5; 71 | color: white; 72 | max-width: 200px; 73 | padding: 4%; 74 | width: 100%; 75 | border-radius: 5px; 76 | border: none; 77 | margin: 10px; 78 | } 79 | 80 | .focusBtn{ 81 | background: #68C6A3; 82 | color: white; 83 | } 84 | 85 | .button-secondary { 86 | min-width: 90px; 87 | padding: 5%; 88 | width: 50%; 89 | border-radius: 5px; 90 | border: none; 91 | margin: 10px; 92 | } 93 | 94 | p { 95 | margin: 0.5rem; 96 | } 97 | 98 | @media only screen and (max-width: 768px) { 99 | .button-primary{ 100 | padding: 15%; 101 | min-width: calc(122px + 2vmin); 102 | } 103 | } 104 | } 105 | 106 | .privacy-cont { 107 | display: flex; 108 | align-items: center; 109 | justify-content: center; 110 | margin-bottom: 35px; 111 | 112 | img { 113 | width: 1.5rem; 114 | } 115 | 116 | p { 117 | font-size: 1.5rem; 118 | font-weight: bold; 119 | margin: 0 10px; 120 | color:#C7C7C7 121 | } 122 | } 123 | 124 | .align-center { 125 | align-items: center; 126 | } 127 | 128 | .flex-col-center { 129 | display: flex; 130 | flex-direction: column; 131 | justify-content: center; 132 | align-items: center; 133 | } -------------------------------------------------------------------------------- /src/routes/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Source Sans Pro', sans-serif; 8 | -youbkit-touch-callout: none; /* iOS Safari */ 9 | -youbkit-user-select: none; /* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */ 10 | -moz-user-select: none; /* Firefox */ 11 | -ms-user-select: none; /* IE 10+ and Edge */ 12 | user-select: none; 13 | } 14 | 15 | html,body{ 16 | height: -webkit-fill-available; 17 | } 18 | 19 | .dropper { 20 | grid-area: box1; 21 | padding: 5% 5% 2% 5%; 22 | } 23 | 24 | button{ 25 | cursor: pointer; 26 | } 27 | 28 | .share-info { 29 | display: grid; 30 | grid-template-columns: 1fr; 31 | grid-template-rows: 0.5fr 2fr 0.5fr; 32 | grid-template-areas: 33 | "con1" 34 | "con2" 35 | "con3"; 36 | /* background-color: lightblue; */ 37 | grid-area: box2; 38 | padding: 5% 13%; 39 | 40 | } 41 | 42 | .userInfo { 43 | grid-area: con1; 44 | 45 | } 46 | 47 | .qrCont { 48 | display: inline-grid; 49 | grid-area: con2; 50 | 51 | } 52 | 53 | .sharingCont { 54 | display: flex; 55 | justify-content: center; 56 | align-items: center; 57 | grid-area: con3; 58 | } 59 | 60 | .footer { 61 | grid-area: box3; 62 | 63 | } 64 | #root{ 65 | height: 100%; 66 | } 67 | main { 68 | display: grid; 69 | grid-template-columns: 2fr 1fr; 70 | grid-template-rows: 1fr; 71 | grid-template-areas: 72 | "box1 box2" 73 | "box3 box3"; 74 | // height: 100vh; 75 | height: 100%; 76 | } 77 | 78 | 79 | 80 | @media only screen and (max-width: 768px) { 81 | main { 82 | display: grid; 83 | grid-template-columns: 1fr; 84 | grid-template-rows: 0.1fr 1.5fr 0.2fr; 85 | grid-template-areas: 86 | "box2" 87 | "box1" 88 | "box3"; 89 | height: 100vh; 90 | } 91 | 92 | 93 | 94 | .share-info { 95 | grid-template-columns: 1fr 1fr; 96 | grid-template-rows: 4fr 0.5fr; 97 | grid-template-areas: 98 | "con1 con2" 99 | "con3 con3"; 100 | grid-gap: 2%; 101 | margin-bottom: 50px; 102 | padding: 5%; 103 | height: calc(15rem + 2vmin); 104 | max-height: calc(300px + 2vmin) !important; 105 | } 106 | 107 | .public-info { 108 | grid-template-columns: 1fr 1fr; 109 | grid-template-rows: 4fr 0.5fr; 110 | grid-template-areas: 111 | "con1 con1" 112 | "con3 con3" !important; 113 | grid-gap: 2%; 114 | margin-bottom: 90px !important; 115 | padding: 5%; 116 | height: calc(13rem + 2vmin); 117 | max-height: calc(312px + 2vmin) !important; 118 | .peer-avatar-You{ 119 | margin-bottom: 2px; 120 | padding-bottom: 1px; 121 | } 122 | } 123 | .dropper { 124 | max-height: calc(400px + 2vmin) !important; 125 | height: calc(400px + 2vmin); 126 | } 127 | .public-drop{ 128 | max-height: 600px !important; 129 | margin: 0 0 50px; 130 | height: max-content; 131 | } 132 | } -------------------------------------------------------------------------------- /src/components/filedropper_Public/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /src/routes/Public_Room.js: -------------------------------------------------------------------------------- 1 | import React, {useContext } from "react"; 2 | import io from "socket.io-client"; 3 | import Peer from "simple-peer"; 4 | import { WritableStream ,ReadableStream } from 'web-streams-polyfill/ponyfill'; 5 | import streamSaver from "streamsaver"; 6 | import {down} from '../util/downloader'; 7 | import {getip} from '../util/getip'; 8 | import {clipimg} from '../util/clipimg'; 9 | import axios from 'axios'; 10 | import codec from 'string-codec' 11 | import Filedropper from '../components/filedropper_Public/index'; 12 | import PrivateContainer from '../components/privateContainer/index'; 13 | import FileModal from '../components/filemodal/index'; 14 | import ErrorFileModal from '../components/errorfilemodal/index'; 15 | import ImageFileModal from '../components/imageModal/index'; 16 | import Avatar from '../components/avatarMain/index'; 17 | import './style.css'; 18 | import {throttle,debounce} from 'lodash'; 19 | import Footer from '../components/footer/index' 20 | import SocialButton from '../components/SocialSharingPublic/index'; 21 | import { transitions, positions, Provider as AlertProvider,types } from 'react-alert'; 22 | import AlertTemplate from 'react-alert-template-basic'; 23 | import { PublicMainContext } from '../context/Maincontext'; 24 | 25 | const worker = new Worker("../worker.js"); 26 | const options = { 27 | // you can also just use 'bottom center' 28 | position: positions.BOTTOM_CENTER, 29 | timeout: 5000, 30 | offset: '30px', 31 | // you can also just use 'scale' 32 | transition: transitions.SCALE, 33 | type: types.SUCCESS 34 | } 35 | const PublicRoom = (props) => { 36 | 37 | //TODO code splitting components 38 | const {gotFile,download,downloadAbort,error,errorMssg,setGotFile,imgsrc,hostName,gotImg}= useContext(PublicMainContext) 39 | 40 | 41 | return ( 42 | 43 |
44 |
45 | 46 | {gotFile?:null} 47 | {error?{errorMssg}:null} 48 | {gotImg?:null} 49 | 50 |
51 |
52 |
53 | 54 |

You

55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 | 70 | 71 | 72 | ); 73 | }; 74 | 75 | export default PublicRoom; 76 | -------------------------------------------------------------------------------- /src/components/static/Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 31 | 32 | 33 | 34 | 36 | 37 | 39 | 42 | 43 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /src/routes/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | font-family: 'Source Sans Pro', sans-serif; 8 | -youbkit-touch-callout: none; 9 | /* iOS Safari */ 10 | -youbkit-user-select: none; 11 | /* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */ 12 | -moz-user-select: none; 13 | /* Firefox */ 14 | -ms-user-select: none; 15 | /* IE 10+ and Edge */ 16 | -webkit-user-select: none; 17 | user-select: none; 18 | } 19 | 20 | html, body { 21 | height: -webkit-fill-available; 22 | } 23 | 24 | .dropper { 25 | -ms-grid-row: 1; 26 | -ms-grid-column: 1; 27 | grid-area: box1; 28 | padding: 5% 5% 2% 5%; 29 | } 30 | 31 | button { 32 | cursor: pointer; 33 | } 34 | 35 | .share-info { 36 | display: -ms-grid; 37 | display: grid; 38 | grid-template-columns: 1fr; 39 | grid-template-rows: 0.5fr 2fr 0.5fr; 40 | grid-template-areas: "con1" "con2" "con3"; 41 | /* background-color: lightblue; */ 42 | -ms-grid-row: 1; 43 | -ms-grid-column: 2; 44 | grid-area: box2; 45 | padding: 5% 13%; 46 | } 47 | 48 | .userInfo { 49 | -ms-grid-row: 1; 50 | -ms-grid-column: 1; 51 | grid-area: con1; 52 | } 53 | 54 | .qrCont { 55 | display: -ms-inline-grid; 56 | display: inline-grid; 57 | -ms-grid-row: 2; 58 | -ms-grid-column: 1; 59 | grid-area: con2; 60 | } 61 | 62 | .sharingCont { 63 | display: -webkit-box; 64 | display: -ms-flexbox; 65 | display: flex; 66 | -webkit-box-pack: center; 67 | -ms-flex-pack: center; 68 | justify-content: center; 69 | -webkit-box-align: center; 70 | -ms-flex-align: center; 71 | align-items: center; 72 | -ms-grid-row: 3; 73 | -ms-grid-column: 1; 74 | grid-area: con3; 75 | } 76 | 77 | .footer { 78 | -ms-grid-row: 2; 79 | -ms-grid-column: 1; 80 | -ms-grid-column-span: 2; 81 | grid-area: box3; 82 | } 83 | 84 | #root { 85 | height: 100%; 86 | } 87 | 88 | main { 89 | display: -ms-grid; 90 | display: grid; 91 | -ms-grid-columns: 2fr 1fr; 92 | grid-template-columns: 2fr 1fr; 93 | -ms-grid-rows: 1fr; 94 | grid-template-rows: 1fr; 95 | grid-template-areas: "box1 box2" "box3 box3"; 96 | height: 100%; 97 | } 98 | 99 | @media only screen and (max-width: 768px) { 100 | main { 101 | display: -ms-grid; 102 | display: grid; 103 | -ms-grid-columns: 1fr; 104 | grid-template-columns: 1fr; 105 | -ms-grid-rows: 0.1fr 1.5fr 0.2fr; 106 | grid-template-rows: 0.1fr 1.5fr 0.2fr; 107 | grid-template-areas: "box2" "box1" "box3"; 108 | height: 100vh; 109 | } 110 | .share-info { 111 | -ms-grid-columns: 1fr 1fr; 112 | grid-template-columns: 1fr 1fr; 113 | -ms-grid-rows: 4fr 0.5fr; 114 | grid-template-rows: 4fr 0.5fr; 115 | grid-template-areas: "con1 con2" "con3 con3"; 116 | grid-gap: 2%; 117 | margin-bottom: 50px; 118 | padding: 5%; 119 | height: calc(15rem + 2vmin); 120 | max-height: calc(300px + 2vmin) !important; 121 | } 122 | .public-info { 123 | -ms-grid-columns: 1fr 1fr; 124 | grid-template-columns: 1fr 1fr; 125 | -ms-grid-rows: 4fr 0.5fr; 126 | grid-template-rows: 4fr 0.5fr; 127 | grid-template-areas: "con1 con1" "con3 con3" !important; 128 | grid-gap: 2%; 129 | margin-bottom: 90px !important; 130 | padding: 5%; 131 | height: calc(13rem + 2vmin); 132 | max-height: calc(312px + 2vmin) !important; 133 | } 134 | .public-info .peer-avatar-You { 135 | margin-bottom: 2px; 136 | padding-bottom: 1px; 137 | } 138 | .dropper { 139 | max-height: calc(400px + 2vmin) !important; 140 | height: calc(400px + 2vmin); 141 | } 142 | .public-drop { 143 | max-height: 600px !important; 144 | margin: 0 0 50px; 145 | height: -webkit-max-content; 146 | height: -moz-max-content; 147 | height: max-content; 148 | } 149 | } 150 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /src/components/filedropper_Public/style.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | min-height: 400px; 4 | background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='3' stroke-dasharray='5%2c15' stroke-dashoffset='23' stroke-linecap='square'/%3e%3c/svg%3e"); 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | @media only screen and (max-width: 768px) { 9 | max-height: 600px; 10 | } 11 | } 12 | 13 | .dropzone, 14 | .file-container, 15 | .peer-avatar { 16 | height: 100%; 17 | width: 100%; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | flex-direction: column; 22 | } 23 | 24 | .dropzone { 25 | margin: 20px; 26 | padding: 20px; 27 | 28 | 29 | } 30 | 31 | .sweet-loading{ 32 | padding: 10px; 33 | } 34 | 35 | .public-dropper{ 36 | @media only screen and (max-width: 768px) { 37 | height:100vh ; 38 | } 39 | } 40 | 41 | .file-container, 42 | .peer-avatar { 43 | height: -webkit-fill-available; 44 | flex-direction: row; 45 | } 46 | 47 | .avatar-wrapper { 48 | width: inherit; 49 | height: inherit; 50 | display: flex; 51 | justify-content: center; 52 | align-items: flex-end; 53 | flex-wrap: wrap; 54 | padding: 0 0px 10px 0; 55 | } 56 | .pretty.p-default.p-fill .state label:after { 57 | transform: scale(0.8) !important; 58 | } 59 | .pretty { 60 | margin: 10px 15px 10px auto; 61 | font-size: calc(10px + 1vmin); 62 | .state label { 63 | text-indent: -2.5em !important; 64 | } 65 | } 66 | .pretty.p-switch.p-fill input:checked~.state:before { 67 | border-color: #5a656b; 68 | background-color: #16BAC5 !important; 69 | } 70 | 71 | .peer-avatar { 72 | padding-bottom: 4ch; 73 | 74 | img { 75 | width: 10ch; 76 | margin: 10px; 77 | } 78 | 79 | p { 80 | text-align: center; 81 | padding: 5px; 82 | font-size: 1.5em; 83 | margin: 0 5ch; 84 | color: #707070; 85 | } 86 | } 87 | 88 | .file-container { 89 | align-items: flex-start; 90 | } 91 | 92 | .confirm-inputs { 93 | display: flex; 94 | align-items: center; 95 | } 96 | 97 | .input-cont { 98 | display: flex; 99 | flex-direction: column; 100 | align-items: center; 101 | font-size: 1.3em !important; 102 | width: 35%; 103 | 104 | .button-primary { 105 | background: #16BAC5; 106 | color: white; 107 | max-width: 200px; 108 | padding: 4%; 109 | width: 100%; 110 | border-radius: 5px; 111 | border: none; 112 | margin: 10px; 113 | } 114 | 115 | .focusBtn { 116 | background: #68C6A3; 117 | color: white; 118 | } 119 | 120 | .button-secondary { 121 | min-width: 90px; 122 | padding: 5%; 123 | width: 50%; 124 | border-radius: 5px; 125 | border: none; 126 | margin: 10px; 127 | } 128 | 129 | p { 130 | margin: 0.5rem; 131 | } 132 | @media only screen and (max-width: 768px) { 133 | .button-primary { 134 | padding: 15%; 135 | min-width: calc(122px + 2vmin); 136 | } 137 | p { 138 | display: none; 139 | } 140 | .privacy-cont { 141 | margin: 0 !important; 142 | } 143 | } 144 | } 145 | 146 | .privacy-cont { 147 | display: flex; 148 | align-items: center; 149 | justify-content: center; 150 | margin-bottom: 35px; 151 | 152 | img { 153 | width: 1.5rem; 154 | } 155 | 156 | p { 157 | font-size: 1.5rem; 158 | font-weight: bold; 159 | margin: 0 10px; 160 | color: #C7C7C7; 161 | } 162 | @media only screen and (max-width: 768px) { 163 | margin: 0 !important; 164 | } 165 | } 166 | @media only screen and (max-width: 768px) { 167 | .dropzone { 168 | max-height: 560px; 169 | position: relative; 170 | top: 20px; 171 | margin: auto 0; 172 | 173 | } 174 | } 175 | 176 | .align-center { 177 | align-items: center; 178 | } 179 | 180 | .flex-col-center { 181 | display: flex; 182 | flex-direction: column; 183 | justify-content: center; 184 | align-items: center; 185 | } 186 | -------------------------------------------------------------------------------- /src/components/static/whatsapp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/filedropper/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='3' stroke-dasharray='5%2c15' stroke-dashoffset='23' stroke-linecap='square'/%3e%3c/svg%3e"); 4 | display: -webkit-box; 5 | display: -ms-flexbox; 6 | display: flex; 7 | -webkit-box-pack: center; 8 | -ms-flex-pack: center; 9 | justify-content: center; 10 | -webkit-box-align: center; 11 | -ms-flex-align: center; 12 | align-items: center; 13 | } 14 | 15 | .dropzone, 16 | .file-container, 17 | .peer-avatar { 18 | height: 100%; 19 | width: 100%; 20 | display: -webkit-box; 21 | display: -ms-flexbox; 22 | display: flex; 23 | -webkit-box-pack: center; 24 | -ms-flex-pack: center; 25 | justify-content: center; 26 | -webkit-box-align: center; 27 | -ms-flex-align: center; 28 | align-items: center; 29 | -webkit-box-orient: vertical; 30 | -webkit-box-direction: normal; 31 | -ms-flex-direction: column; 32 | flex-direction: column; 33 | } 34 | 35 | .sweet-loading { 36 | padding: 10px; 37 | } 38 | 39 | .file-container, 40 | .peer-avatar { 41 | height: -webkit-fill-available; 42 | -webkit-box-orient: horizontal; 43 | -webkit-box-direction: normal; 44 | -ms-flex-direction: row; 45 | flex-direction: row; 46 | } 47 | 48 | .avatar-wrapper { 49 | width: inherit; 50 | height: inherit; 51 | display: -webkit-box; 52 | display: -ms-flexbox; 53 | display: flex; 54 | -webkit-box-pack: center; 55 | -ms-flex-pack: center; 56 | justify-content: center; 57 | -webkit-box-align: end; 58 | -ms-flex-align: end; 59 | align-items: flex-end; 60 | } 61 | 62 | .peer-avatar { 63 | padding-bottom: 4ch; 64 | } 65 | 66 | .peer-avatar img { 67 | width: 10ch; 68 | margin: 10px; 69 | } 70 | 71 | .peer-avatar p { 72 | text-align: center; 73 | padding: 5px; 74 | font-size: 1.5em; 75 | margin: 0 5ch; 76 | color: #707070; 77 | } 78 | 79 | .file-container { 80 | -webkit-box-align: start; 81 | -ms-flex-align: start; 82 | align-items: flex-start; 83 | } 84 | 85 | .confirm-inputs { 86 | display: -webkit-box; 87 | display: -ms-flexbox; 88 | display: flex; 89 | -webkit-box-align: center; 90 | -ms-flex-align: center; 91 | align-items: center; 92 | } 93 | 94 | .input-cont { 95 | display: -webkit-box; 96 | display: -ms-flexbox; 97 | display: flex; 98 | -webkit-box-orient: vertical; 99 | -webkit-box-direction: normal; 100 | -ms-flex-direction: column; 101 | flex-direction: column; 102 | -webkit-box-align: center; 103 | -ms-flex-align: center; 104 | align-items: center; 105 | font-size: 1.3em !important; 106 | width: 35%; 107 | } 108 | 109 | .input-cont .button-primary { 110 | background: #16BAC5; 111 | color: white; 112 | max-width: 200px; 113 | padding: 4%; 114 | width: 100%; 115 | border-radius: 5px; 116 | border: none; 117 | margin: 10px; 118 | } 119 | 120 | .input-cont .focusBtn { 121 | background: #68C6A3; 122 | color: white; 123 | } 124 | 125 | .input-cont .button-secondary { 126 | min-width: 90px; 127 | padding: 5%; 128 | width: 50%; 129 | border-radius: 5px; 130 | border: none; 131 | margin: 10px; 132 | } 133 | 134 | .input-cont p { 135 | margin: 0.5rem; 136 | } 137 | 138 | @media only screen and (max-width: 768px) { 139 | .input-cont .button-primary { 140 | padding: 15%; 141 | min-width: calc(122px + 2vmin); 142 | } 143 | } 144 | 145 | .privacy-cont { 146 | display: -webkit-box; 147 | display: -ms-flexbox; 148 | display: flex; 149 | -webkit-box-align: center; 150 | -ms-flex-align: center; 151 | align-items: center; 152 | -webkit-box-pack: center; 153 | -ms-flex-pack: center; 154 | justify-content: center; 155 | margin-bottom: 35px; 156 | } 157 | 158 | .privacy-cont img { 159 | width: 1.5rem; 160 | } 161 | 162 | .privacy-cont p { 163 | font-size: 1.5rem; 164 | font-weight: bold; 165 | margin: 0 10px; 166 | color: #C7C7C7; 167 | } 168 | 169 | .align-center { 170 | -webkit-box-align: center; 171 | -ms-flex-align: center; 172 | align-items: center; 173 | } 174 | 175 | .flex-col-center { 176 | display: -webkit-box; 177 | display: -ms-flexbox; 178 | display: flex; 179 | -webkit-box-orient: vertical; 180 | -webkit-box-direction: normal; 181 | -ms-flex-direction: column; 182 | flex-direction: column; 183 | -webkit-box-pack: center; 184 | -ms-flex-pack: center; 185 | justify-content: center; 186 | -webkit-box-align: center; 187 | -ms-flex-align: center; 188 | align-items: center; 189 | } 190 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /src/components/static/avatars/16-wittywalrus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 10 | 13 | 14 | 17 | 20 | 21 | 22 | 24 | 26 | 27 | 33 | 34 | 37 | 40 | 41 | 42 | 45 | 46 | 47 | 48 | 51 | 54 | 55 | 57 | 58 | 59 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 | [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/veghfile/frontend/graphs/commit-activity) [![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://veghfile.github.io/) [![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/) [![Open Source? Yes!](https://badgen.net/badge/Open%20Source%20%3F/Yes%21/blue?icon=github)](https://veghfile.github.io/) 8 | 9 | # Vegh - A simple & fast file sharing web app 10 |

11 | 12 | 13 | 14 | Front-end sponsored and hosted by opeNode.io 15 |

16 | 17 | Vegh is a file sharing progressive web app(PWA) that allows users to send files between multiple devices. 18 | It works similar to the SHAREit or Google Files app but uses web technology to complete the installation process 19 | traditional apps for different devices and applications. It also supports current file sharing on multiple devices at the same time as many file sharing applications are lacking. 20 | 21 | Vegh uses WebSockets and WebRTC to transfer files between multiple devices. 22 | It currently uses `socket.io` to make real-time connections on `express` backend. The frontend is built on [React](https://reactjs.org). 23 | The current method of sharing files involves sharing file as chunks of ArrayBuffer. This may change to increase the efficiency of the file transfer. 24 | 25 | ## Table of Contents 26 | - [Project structure](#project-structure) 27 | - [Backend](#backend) 28 | - [Frontend](#frontend) 29 | - [`static` folder](#static-folder) 30 | - [`public` folder](#public-folder) 31 | - [Build process](#build-process) 32 | - [Contributing](#contributing) 33 | - [Running Vegh in production](#running-Vegh-in-production) 34 | - [Building the frontend](#building-the-frontend) 35 | - [Building the backend](#building-the-backend) 36 | - [Starting the server](#starting-the-server) 37 | - [License](#license) 38 | 39 | 40 | ## Project structure 41 | The project is divided into the backend and the frontend. 42 | 43 | ### Backend 44 | Backend code is present on this repo [Backend](https://github.com/vegh-fileshare/Backend) the server.js file contains all the socket connection code. It is built on `express` and `socket.io` which allows usage of WebSockets and WebRTC.There are different routes for admin panel and database connections. 45 | 46 | ### Frontend 47 | The frontend code is present on this repo [Frontend](https://github.com/vegh-fileshare/Frontend). Once the frontend is built for production (using npm run build), all the built files are stored in `build` folder which can be deployed along with the server code. 48 | 49 | #### `static` folder 50 | This folder is used to store the static files such as images, fonts, and JavaScript files that shouldn't be bundled with the rest of the code. 51 | 52 | - React is used for the UI of the app. 53 | - No UI library is being used as of now. 54 | - Sass is used for CSS pre-processing. 55 | ### Build process 56 | Build process is setup using NPM run build. It builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. 57 | 58 | ## Contributing 59 | Thanks for contributing to Vegh! Make sure to **Fork** this repository into your account before making any commits. Then use the following commands to set up the project 60 | ### Frontend 61 | ```bash 62 | git clone https://github.com/vegh-fileshare/Frontend.git 63 | npm install 64 | ``` 65 | 66 | ### Backend 67 | ```bash 68 | git clone https://github.com/vegh-fileshare/Backend.git 69 | npm install 70 | ``` 71 | 72 | All development happens on the `staging` branch. The `master` branch contains the known stable version of Vegh. To make your contributions, create a new branch from `staging`. 73 | ```bash 74 | git checkout -b my-branch staging 75 | ``` 76 | 77 | Start the live development server. The server would run at port `3000` for frontend and the app can be accessed on `localhost:3000` 78 | ```bash 79 | npm run start 80 | ``` 81 | 82 | Start the live development server. The server would run at port `8000` for backend . 83 | ```bash 84 | npm run start 85 | ``` 86 | Now you make sure you make changes needed in the `.env` files 87 | 88 | Now you can make your changes, and commit them. Make sure you have a clear and summarized message for your commits 89 | ```bash 90 | git add . 91 | git commit -m "My fixes" 92 | ``` 93 | 94 | 95 | Push the changes to your fork. 96 | ```bash 97 | git push origin my-branch 98 | ``` 99 | 100 | This is a good time, to open a pull request in this repository with the changes you have made. Make sure you open a pull request to merge to `staging` branch and not the `master` branch directly. 101 | ## Running Vegh in production 102 | 103 | ### Building the frontend 104 | ```bash 105 | npm run build 106 | ``` 107 | The frontend built code would be located in the `build` folder. 108 | ### Starting the frontend server 109 | ```bash 110 | npm start 111 | ``` 112 | Vegh should be running on port `3000`. 113 | ### Building and Starting the backend 114 | ```bash 115 | node server.js 116 | ``` 117 | 118 | 119 | ## License 120 | Vegh is [MIT Licensed](https://github.com/veghfile/veghfile.github.io/blob/master/LICENSE) -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/components/static/avatars/26-pickypenguin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 13 | 17 | 21 | 22 | 23 | 28 | 35 | 37 | 38 | 41 | 44 | 45 | 46 | 49 | 50 | 51 | 52 | 55 | 58 | 59 | 61 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /src/components/filedropper_Public/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | min-height: 400px; 4 | background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='3' stroke-dasharray='5%2c15' stroke-dashoffset='23' stroke-linecap='square'/%3e%3c/svg%3e"); 5 | display: -webkit-box; 6 | display: -ms-flexbox; 7 | display: flex; 8 | -webkit-box-pack: center; 9 | -ms-flex-pack: center; 10 | justify-content: center; 11 | -webkit-box-align: center; 12 | -ms-flex-align: center; 13 | align-items: center; 14 | } 15 | 16 | @media only screen and (max-width: 768px) { 17 | .container { 18 | max-height: 600px; 19 | } 20 | } 21 | 22 | .dropzone, 23 | .file-container, 24 | .peer-avatar { 25 | height: 100%; 26 | width: 100%; 27 | display: -webkit-box; 28 | display: -ms-flexbox; 29 | display: flex; 30 | -webkit-box-pack: center; 31 | -ms-flex-pack: center; 32 | justify-content: center; 33 | -webkit-box-align: center; 34 | -ms-flex-align: center; 35 | align-items: center; 36 | -webkit-box-orient: vertical; 37 | -webkit-box-direction: normal; 38 | -ms-flex-direction: column; 39 | flex-direction: column; 40 | } 41 | 42 | .dropzone { 43 | margin: 20px; 44 | padding: 20px; 45 | } 46 | 47 | .sweet-loading { 48 | padding: 10px; 49 | } 50 | 51 | @media only screen and (max-width: 768px) { 52 | .public-dropper { 53 | height: 100vh; 54 | } 55 | } 56 | 57 | .file-container, 58 | .peer-avatar { 59 | height: -webkit-fill-available; 60 | -webkit-box-orient: horizontal; 61 | -webkit-box-direction: normal; 62 | -ms-flex-direction: row; 63 | flex-direction: row; 64 | } 65 | 66 | .avatar-wrapper { 67 | width: inherit; 68 | height: inherit; 69 | display: -webkit-box; 70 | display: -ms-flexbox; 71 | display: flex; 72 | -webkit-box-pack: center; 73 | -ms-flex-pack: center; 74 | justify-content: center; 75 | -webkit-box-align: end; 76 | -ms-flex-align: end; 77 | align-items: flex-end; 78 | -ms-flex-wrap: wrap; 79 | flex-wrap: wrap; 80 | padding: 0 0px 10px 0; 81 | } 82 | 83 | .pretty.p-default.p-fill .state label:after { 84 | -webkit-transform: scale(0.8) !important; 85 | transform: scale(0.8) !important; 86 | } 87 | 88 | .pretty { 89 | margin: 10px 15px 10px auto; 90 | font-size: calc(10px + 1vmin); 91 | } 92 | 93 | .pretty .state label { 94 | text-indent: -2.5em !important; 95 | } 96 | 97 | .pretty.p-switch.p-fill input:checked ~ .state:before { 98 | border-color: #5a656b; 99 | background-color: #16BAC5 !important; 100 | } 101 | 102 | .peer-avatar { 103 | padding-bottom: 4ch; 104 | } 105 | 106 | .peer-avatar img { 107 | width: 10ch; 108 | margin: 10px; 109 | } 110 | 111 | .peer-avatar p { 112 | text-align: center; 113 | padding: 5px; 114 | font-size: 1.5em; 115 | margin: 0 5ch; 116 | color: #707070; 117 | } 118 | 119 | .file-container { 120 | -webkit-box-align: start; 121 | -ms-flex-align: start; 122 | align-items: flex-start; 123 | } 124 | 125 | .confirm-inputs { 126 | display: -webkit-box; 127 | display: -ms-flexbox; 128 | display: flex; 129 | -webkit-box-align: center; 130 | -ms-flex-align: center; 131 | align-items: center; 132 | } 133 | 134 | .input-cont { 135 | display: -webkit-box; 136 | display: -ms-flexbox; 137 | display: flex; 138 | -webkit-box-orient: vertical; 139 | -webkit-box-direction: normal; 140 | -ms-flex-direction: column; 141 | flex-direction: column; 142 | -webkit-box-align: center; 143 | -ms-flex-align: center; 144 | align-items: center; 145 | font-size: 1.3em !important; 146 | width: 35%; 147 | } 148 | 149 | .input-cont .button-primary { 150 | background: #16BAC5; 151 | color: white; 152 | max-width: 200px; 153 | padding: 4%; 154 | width: 100%; 155 | border-radius: 5px; 156 | border: none; 157 | margin: 10px; 158 | } 159 | 160 | .input-cont .focusBtn { 161 | background: #68C6A3; 162 | color: white; 163 | } 164 | 165 | .input-cont .button-secondary { 166 | min-width: 90px; 167 | padding: 5%; 168 | width: 50%; 169 | border-radius: 5px; 170 | border: none; 171 | margin: 10px; 172 | } 173 | 174 | .input-cont p { 175 | margin: 0.5rem; 176 | } 177 | 178 | @media only screen and (max-width: 768px) { 179 | .input-cont .button-primary { 180 | padding: 15%; 181 | min-width: calc(122px + 2vmin); 182 | } 183 | .input-cont p { 184 | display: none; 185 | } 186 | .input-cont .privacy-cont { 187 | margin: 0 !important; 188 | } 189 | } 190 | 191 | .privacy-cont { 192 | display: -webkit-box; 193 | display: -ms-flexbox; 194 | display: flex; 195 | -webkit-box-align: center; 196 | -ms-flex-align: center; 197 | align-items: center; 198 | -webkit-box-pack: center; 199 | -ms-flex-pack: center; 200 | justify-content: center; 201 | margin-bottom: 35px; 202 | } 203 | 204 | .privacy-cont img { 205 | width: 1.5rem; 206 | } 207 | 208 | .privacy-cont p { 209 | font-size: 1.5rem; 210 | font-weight: bold; 211 | margin: 0 10px; 212 | color: #C7C7C7; 213 | } 214 | 215 | @media only screen and (max-width: 768px) { 216 | .privacy-cont { 217 | margin: 0 !important; 218 | } 219 | } 220 | 221 | @media only screen and (max-width: 768px) { 222 | .dropzone { 223 | max-height: 560px; 224 | position: relative; 225 | top: 20px; 226 | margin: auto 0; 227 | } 228 | } 229 | 230 | .align-center { 231 | -webkit-box-align: center; 232 | -ms-flex-align: center; 233 | align-items: center; 234 | } 235 | 236 | .flex-col-center { 237 | display: -webkit-box; 238 | display: -ms-flexbox; 239 | display: flex; 240 | -webkit-box-orient: vertical; 241 | -webkit-box-direction: normal; 242 | -ms-flex-direction: column; 243 | flex-direction: column; 244 | -webkit-box-pack: center; 245 | -ms-flex-pack: center; 246 | justify-content: center; 247 | -webkit-box-align: center; 248 | -ms-flex-align: center; 249 | align-items: center; 250 | } 251 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /src/util/randomAvatarGen.js: -------------------------------------------------------------------------------- 1 | import svg1 from '../components/static/avatars/1-panickypanda.svg'; 2 | import svg2 from '../components/static/avatars/2-lawlesslion.svg'; 3 | import svg3 from '../components/static/avatars/3-terrifictiger.svg'; 4 | import svg4 from '../components/static/avatars/4-bafflingbear.svg'; 5 | import svg5 from '../components/static/avatars/5-paltryparrot.svg'; 6 | import svg6 from '../components/static/avatars/6-radicalrabbit.svg'; 7 | import svg7 from '../components/static/avatars/7-callouschameleon.svg'; 8 | import svg8 from '../components/static/avatars/8-slowsloth.svg'; 9 | import svg9 from '../components/static/avatars/9-eccentricelk.svg'; 10 | import svg10 from '../components/static/avatars/10-lamellama.svg'; 11 | import svg11 from '../components/static/avatars/11-ableanteater.svg'; 12 | import svg12 from '../components/static/avatars/12-edgyeagle.svg'; 13 | import svg13 from '../components/static/avatars/13-crispycrocodile.svg'; 14 | import svg14 from '../components/static/avatars/14-ballisticbeaver.svg'; 15 | import svg15 from '../components/static/avatars/15-hastyhamster.svg'; 16 | import svg16 from '../components/static/avatars/16-wittywalrus.svg'; 17 | import svg17 from '../components/static/avatars/17-beardedbear.svg'; 18 | import svg18 from '../components/static/avatars/18-cosmiccheetah.svg'; 19 | import svg19 from '../components/static/avatars/19-keenkangaroo.svg'; 20 | import svg20 from '../components/static/avatars/20-deadlyduck.svg'; 21 | import svg21 from '../components/static/avatars/21-gaudygoose.svg'; 22 | import svg22 from '../components/static/avatars/22-leisurelylemur.svg'; 23 | import svg23 from '../components/static/avatars/23-oddostrich.svg'; 24 | import svg24 from '../components/static/avatars/24-ominousowl.svg'; 25 | import svg25 from '../components/static/avatars/25-bipolarboar.svg'; 26 | import svg26 from '../components/static/avatars/26-pickypenguin.svg'; 27 | import svg27 from '../components/static/avatars/27-cageycamel.svg'; 28 | import svg28 from '../components/static/avatars/28-rationalraccoon.svg'; 29 | import svg29 from '../components/static/avatars/29-heavyhippo.svg'; 30 | import svg30 from '../components/static/avatars/30-manicmonkey.svg'; 31 | import svg31 from '../components/static/avatars/31-martialmeerkat.svg'; 32 | import svg32 from '../components/static/avatars/32-slitheringsnake.svg'; 33 | import svg33 from '../components/static/avatars/33-zestyzebra.svg'; 34 | import svg34 from '../components/static/avatars/34-defunctdonkey.svg'; 35 | import svg35 from '../components/static/avatars/35-blindbull.svg'; 36 | import svg36 from '../components/static/avatars/36-gigglygoat.svg'; 37 | import svg37 from '../components/static/avatars/37-giftedgoat.svg'; 38 | import svg38 from '../components/static/avatars/38-handyhorse.svg'; 39 | import svg39 from '../components/static/avatars/39-wackywolf.svg'; 40 | import svg40 from '../components/static/avatars/40-kindkoala.svg'; 41 | import svg41 from '../components/static/avatars/41-highhedgehog.svg'; 42 | import svg42 from '../components/static/avatars/42-futilefrog.svg'; 43 | import svg43 from '../components/static/avatars/43-timelessturtle.svg'; 44 | import svg44 from '../components/static/avatars/44-gentlegorilla.svg'; 45 | import svg45 from '../components/static/avatars/45-giantgiraffe.svg'; 46 | import svg46 from '../components/static/avatars/46-dashingdeer.svg'; 47 | import svg47 from '../components/static/avatars/47-rowdyrhino.svg'; 48 | import svg48 from '../components/static/avatars/48-eliteelephant.svg'; 49 | import svg49 from '../components/static/avatars/49-paceypuma.svg'; 50 | import svg50 from '../components/static/avatars/50-finickyfox.svg'; 51 | 52 | let avatars = [{ 53 | path:svg1, 54 | name:"Panicky Panda" 55 | },{ 56 | path:svg2, 57 | name:"Lawless Lion" 58 | }, 59 | { 60 | path:svg3, 61 | name:"Terrific Tiger" 62 | }, 63 | { 64 | path:svg4, 65 | name:"Baffling Bear" 66 | }, 67 | { 68 | path:svg5, 69 | name:"Paltry Parrot" 70 | }, 71 | { 72 | path:svg6, 73 | name:"Radical Rabbit" 74 | }, 75 | { 76 | path:svg7, 77 | name:"Callous Chameleon" 78 | }, 79 | { 80 | path:svg8, 81 | name:"Slow Sloth" 82 | }, 83 | { 84 | path:svg9, 85 | name:"Eccentric Elk" 86 | }, 87 | { 88 | path:svg10, 89 | name:"Lame Llama" 90 | }, 91 | { 92 | path:svg11, 93 | name:"Able Anteater" 94 | }, 95 | { 96 | path:svg12, 97 | name:"Edgy Eagle" 98 | }, 99 | { 100 | path:svg13, 101 | name:"Crispy Crocodile" 102 | }, 103 | { 104 | path:svg14, 105 | name:"Ballistic Beaver" 106 | }, 107 | { 108 | path:svg15, 109 | name:"Hasty Hamster" 110 | }, 111 | { 112 | path:svg16, 113 | name:"Witty Walrus" 114 | }, 115 | { 116 | path:svg17, 117 | name:"Bearded Bear" 118 | }, 119 | { 120 | path:svg18, 121 | name:"Cosmic Cheetah" 122 | }, 123 | { 124 | path:svg19, 125 | name:"Keen Kangaroo" 126 | }, 127 | { 128 | path:svg20, 129 | name:"Deadly Duck" 130 | }, 131 | { 132 | path:svg21, 133 | name:"Gaudy Goose" 134 | }, 135 | { 136 | path:svg22, 137 | name:"Leisurely Lemur" 138 | }, 139 | { 140 | path:svg23, 141 | name:"Odd Ostrich" 142 | }, 143 | { 144 | path:svg24, 145 | name:"Ominous Owl" 146 | }, 147 | { 148 | path:svg25, 149 | name:"Bipolar Bear" 150 | }, 151 | { 152 | path:svg26, 153 | name:"Picky Penguin" 154 | }, 155 | { 156 | path:svg27, 157 | name:"Cagey Camel" 158 | }, 159 | { 160 | path:svg28, 161 | name:"Rational Raccoon" 162 | }, 163 | { 164 | path:svg29, 165 | name:"Heavy Hippo" 166 | }, 167 | { 168 | path:svg30, 169 | name:"Manic Monkey" 170 | }, 171 | { 172 | path:svg31, 173 | name:"Martial Meerkat" 174 | }, 175 | { 176 | path:svg32, 177 | name:"Slithering Snake" 178 | }, 179 | { 180 | path:svg33, 181 | name:"Zesty Zebra" 182 | }, 183 | { 184 | path:svg34, 185 | name:"Defunct Donkey" 186 | }, 187 | { 188 | path:svg35, 189 | name:"Blind Bull" 190 | }, 191 | { 192 | path:svg36, 193 | name:"Giggly Goat" 194 | }, 195 | { 196 | path:svg37, 197 | name:"Gifted Goat" 198 | }, 199 | { 200 | path:svg38, 201 | name:"Handy Horse" 202 | }, 203 | { 204 | path:svg39, 205 | name:"Wacky Wolf" 206 | }, 207 | { 208 | path:svg40, 209 | name:"Kind Koala" 210 | }, 211 | { 212 | path:svg41, 213 | name:"High Hedgehog" 214 | }, 215 | { 216 | path:svg42, 217 | name:"Futile Frog" 218 | }, 219 | { 220 | path:svg43, 221 | name:"Timless Turtle" 222 | }, 223 | { 224 | path:svg44, 225 | name:"Gentle Gorilla" 226 | }, 227 | { 228 | path:svg45, 229 | name:"Giant Giraffe" 230 | }, 231 | { 232 | path:svg46, 233 | name:"Dashing Deer" 234 | }, 235 | { 236 | path:svg47, 237 | name:"Rowdy Rhino" 238 | }, 239 | { 240 | path:svg48, 241 | name:"Elite Elephant" 242 | }, 243 | { 244 | path:svg49, 245 | name:"Pacey Puma" 246 | }, 247 | { 248 | path:svg50, 249 | name:"Finicky Fox" 250 | },{ 251 | path:svg50, 252 | name:"Finicky Fox" 253 | }] 254 | 255 | export function AvatarGen (i){ 256 | 257 | return avatars[i] 258 | } 259 | 260 | 261 | -------------------------------------------------------------------------------- /src/components/static/avatars/12-edgyeagle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 13 | 14 | 17 | 19 | 20 | 22 | 31 | 37 | 38 | 41 | 44 | 45 | 46 | 49 | 50 | 51 | 52 | 55 | 58 | 59 | 62 | 65 | 69 | 70 | 72 | 74 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /src/components/static/avatars/4-bafflingbear.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 13 | 17 | 21 | 22 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 33 | 42 | 45 | 46 | 48 | 52 | 53 | 55 | 56 | 57 | 60 | 63 | 64 | 65 | 68 | 69 | 70 | 71 | 74 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /src/components/filedropper/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState,useEffect} from 'react'; 2 | import {useDropzone} from 'react-dropzone'; 3 | import {CircleProgress} from 'react-gradient-progress' 4 | import Usersvg from '../static/user.svg' 5 | import Avatar from '../avatar/index' 6 | import AvatarSelector from '../avatarSelector/index' 7 | import { css } from "@emotion/core"; 8 | import ClipLoader from "react-spinners/BarLoader"; 9 | import Lock from '../static/lock.svg' 10 | import Button from '../../modules/button/index'; 11 | import { Progress } from 'react-sweet-progress'; 12 | import "./style.css"; 13 | import {motion} from 'framer-motion'; 14 | 15 | 16 | 17 | function Filedropper(props) { 18 | const {fileCallback,wait,connectionEstablished,setBtnWait,load,receiver,confirmSend,sendConfirm,isloading,maxLoad,users,position} = props 19 | const {getRootProps, getInputProps, open, acceptedFiles} = useDropzone({ 20 | // Dropzone options and events 21 | noClick: true, 22 | noKeyboard: true, 23 | disabled: wait, 24 | onDrop: (acceptedFiles) => { 25 | acceptedFiles.map((file) => fileCallback(file)) 26 | } 27 | }); 28 | 29 | 30 | 31 | return ( 32 | 33 |
34 | <> 35 | {!connectionEstablished? 36 |
37 |
38 |

There is no one in the room!

39 |

Once you have a peer connection, you will be able to share files

40 |
41 |
: 42 | //add avatar module here 43 |
44 | {users.map((item,index) => item.name!=position?:null)} 45 |
46 | } 47 |
48 | 49 |

Private Room

50 |
51 | { 52 | confirmSend? 53 |
54 |
55 |

Do you want to send ?

56 |
57 | 60 | 63 |
64 |
65 |
66 | : 67 | load? 68 |
69 |
70 |

Sending File

71 |
72 | 79 |
80 |
81 |
82 | : 83 | receiver? 84 |
85 |
86 |

Receiving File

87 | 104 |
105 |
106 | : 107 | wait? 108 |
109 |
110 |

Wait till the user accepts the file

111 | 114 |
115 |
116 | : 117 |
118 |
119 | 120 |

Drag a File here to Send

121 |

OR

122 | 125 |
126 |
127 | } 128 | 129 | 130 |
131 | 132 | ); 133 | } 134 | 135 | export default Filedropper -------------------------------------------------------------------------------- /src/components/static/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 32 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /src/components/static/avatars/29-heavyhippo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 10 | 13 | 15 | 18 | 20 | 22 | 24 | 26 | 28 | 32 | 33 | 41 | 44 | 47 | 48 | 49 | 52 | 53 | 54 | 55 | 58 | 61 | 62 | 67 | 68 | 69 | 70 | 71 | 72 | 79 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /src/components/static/avatars/43-timelessturtle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 33 | 36 | 40 | 43 | 46 | 50 | 51 | 57 | 60 | 63 | 64 | 65 | 68 | 69 | 70 | 71 | 74 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /src/components/filedropper_Public/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState,useContext} from 'react'; 2 | import {useDropzone} from 'react-dropzone'; 3 | import {CircleProgress} from 'react-gradient-progress' 4 | import Usersvg from '../static/user.svg' 5 | import Avatar from '../avatar/index' 6 | import AvatarSelector from '../avatarSelector/index' 7 | import Lock from '../static/lock.svg' 8 | import Button from '../../modules/button/index'; 9 | import ClipLoader from "react-spinners/BarLoader"; 10 | import { Progress } from 'react-sweet-progress'; 11 | import { Checkbox } from 'pretty-checkbox-react'; 12 | import 'pretty-checkbox' 13 | import "react-sweet-progress/lib/style.css"; 14 | import "./style.css"; 15 | import {motion} from "framer-motion" 16 | import { PublicMainContext } from '../../context/Maincontext'; 17 | 18 | 19 | function Filedropper(props) { 20 | const {fileCallback,wait,connectionEstablished,setBtnWait,load,receiver,confirmSend,sendConfirm,isloading,maxLoad,users,position,setPeers,delPeers,checkReset,checkCallback,checked,setChecked} = useContext(PublicMainContext) 21 | // let array = new Set() 22 | const {getRootProps, getInputProps, open, acceptedFiles} = useDropzone({ 23 | // Dropzone options and events 24 | noClick: true, 25 | noKeyboard: true, 26 | disabled: wait, 27 | onDrop: (acceptedFiles) => { 28 | acceptedFiles.map((file) => fileCallback(file)) 29 | } 30 | }); 31 | 32 | const handleChange = React.useCallback((e) => { 33 | setChecked(prev => !prev); 34 | }, []); 35 | 36 | const handleUsers = (name)=>{ 37 | setPeers(name) 38 | } 39 | 40 | const removeUsers = (name)=>{ 41 | delPeers(name) 42 | } 43 | 44 | return ( 45 | 46 |
47 | <> 48 | {!connectionEstablished? 49 |
50 |
51 |

There is no one in the room!

52 |

Once you have a peer connection, you will be able to share files

53 |
54 |
: 55 | //add avatar module here 56 | <> 57 | 58 | 59 | 60 |
61 | {users.map((item,index) => item.name!=position?:null)} 62 |
63 | 64 | } 65 |
66 | 67 |

Private Room

68 |
69 | { 70 | confirmSend? 71 |
72 |
73 |

Do you want to send ?

74 |
75 | 78 | 81 |
82 |
83 |
84 | : 85 | load? 86 |
87 |
88 |

Sending File

89 |
90 | 97 |
98 |
99 |
100 | : 101 | receiver? 102 |
103 |
104 |

Receiving File

105 | 122 |
123 |
124 | : 125 | wait? 126 |
127 |
128 | Wait till the user accepts the file 129 | 132 |
133 |
134 | : 135 |
136 |
137 | 138 |

Drag a File here to Send

139 |

OR

140 | 143 |
144 |
145 | } 146 | 147 | 148 |
149 | 150 | ); 151 | } 152 | 153 | export default Filedropper -------------------------------------------------------------------------------- /src/components/static/avatars/24-ominousowl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 13 | 17 | 21 | 25 | 26 | 28 | 29 | 33 | 42 | 43 | 54 | 57 | 63 | 66 | 69 | 72 | 75 | 78 | 81 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /src/components/static/avatars/48-eliteelephant.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 16 | 21 | 22 | 28 | 31 | 35 | 36 | 39 | 42 | 43 | 44 | 46 | 47 | 50 | 51 | 53 | 55 | 56 | 57 | 59 | 61 | 62 | 67 | 68 | 71 | 74 | 75 | 76 | 79 | 80 | 81 | 82 | 85 | 88 | 89 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /src/components/static/avatars/47-rowdyrhino.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 22 | 34 | 35 | 39 | 42 | 46 | 47 | 51 | 52 | 53 | 54 | 56 | 58 | 60 | 62 | 63 | 66 | 69 | 70 | 71 | 74 | 75 | 76 | 77 | 80 | 83 | 84 | 85 | 86 | 87 | 88 | 90 | 92 | 94 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /src/components/static/avatars/8-slowsloth.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 14 | 23 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 45 | 48 | 57 | 60 | 64 | 67 | 68 | 71 | 74 | 75 | 76 | 79 | 80 | 81 | 82 | 85 | 88 | 89 | 90 | 92 | 94 | 95 | 97 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | --------------------------------------------------------------------------------