mirror of
https://github.com/Kizuren/SauceKudasai.git
synced 2025-12-21 13:06:16 +01:00
Initial commit
This commit is contained in:
MarcUs7i
commit
880a5e58cc
51 changed files with 37278 additions and 0 deletions
34
.github/workflows/manual.yml
vendored
Normal file
34
.github/workflows/manual.yml
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
name: Build Manually
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v1
|
||||
|
||||
- name: Login to GitHub Container Registry
|
||||
uses: docker/login-action@v1
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Build and push Docker image
|
||||
uses: docker/build-push-action@v2
|
||||
with:
|
||||
context: .
|
||||
push: true
|
||||
platforms: linux/amd64, linux/arm64/v8, linux/arm/v7
|
||||
tags: ghcr.io/marcus7i/saucekudasai:${{ github.ref_name }},ghcr.io/marcus7i/saucekudasai:latest
|
||||
35
.github/workflows/release.yml
vendored
Normal file
35
.github/workflows/release.yml
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
name: Build on Release
|
||||
|
||||
on:
|
||||
release:
|
||||
types: [created]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v1
|
||||
|
||||
- name: Login to GitHub Container Registry
|
||||
uses: docker/login-action@v1
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Build and push Docker image
|
||||
uses: docker/build-push-action@v2
|
||||
with:
|
||||
context: .
|
||||
push: true
|
||||
platforms: linux/amd64, linux/arm64/v8, linux/arm/v7
|
||||
tags: ghcr.io/marcus7i/saucekudasai:${{ github.ref_name }},ghcr.io/marcus7i/saucekudasai:latest
|
||||
26
.gitignore
vendored
Normal file
26
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
/.vscode
|
||||
/.eslintcache
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
7
Dockerfile
Normal file
7
Dockerfile
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
FROM node:16-alpine
|
||||
WORKDIR /app
|
||||
COPY package*.json .
|
||||
RUN npm install
|
||||
COPY . .
|
||||
EXPOSE 3006
|
||||
CMD ["npm", "run"]
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2021 Ayush
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
44
README.md
Normal file
44
README.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!-- @format -->
|
||||
|
||||
<h1 align="center">SauceKudasai</h1>
|
||||
|
||||
|
||||
|
||||
> A Frontend Search Engine that fetches anime info based on the image provided using <a href="https://github.com/soruly/trace.moe" target="_blank">trace.moe </a> and <a href="https://anilist.gitbook.io/anilist-apiv2-docs/" target="_blank"> AniList</a> API
|
||||
|
||||
## Requirements
|
||||
|
||||
### Development:
|
||||
- Node.JS
|
||||
|
||||
### Deployment:
|
||||
- docker
|
||||
|
||||
## Development
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run getsauce
|
||||
```
|
||||
|
||||
## Deployment via docker:
|
||||
|
||||
Using image:
|
||||
```sh
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
Building image:
|
||||
```sh
|
||||
docker compose -f docker-compose-build.yml up -d
|
||||
```
|
||||
|
||||
## Author
|
||||
|
||||
Original: **Ayush Gupta**<br>
|
||||
- Github: https://github.com/ayushgptaa
|
||||
|
||||
Modified by: **MarcUs7i**<br>
|
||||
- GitHub: https://github.com/MarcUs7i
|
||||
|
||||
Original repository: https://github.com/ayushgptaa/SauceKudasai
|
||||
8
docker-compose-build.yml
Normal file
8
docker-compose-build.yml
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
services:
|
||||
app:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "3006:3006"
|
||||
command: "npm start"
|
||||
7
docker-compose.yml
Normal file
7
docker-compose.yml
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
services:
|
||||
saucekudasai:
|
||||
image: ghcr.io/marcus7i/saucekudasai:latest
|
||||
container_name: saucekudasai
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "3006:3006"
|
||||
5
jsconfig.json
Normal file
5
jsconfig.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./src"
|
||||
}
|
||||
}
|
||||
35105
package-lock.json
generated
Normal file
35105
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
56
package.json
Normal file
56
package.json
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
{
|
||||
"name": "saucekudasai",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"description": "A Anime search engine that fetches anime info based on the image provided.",
|
||||
"keywords": [
|
||||
"Anime",
|
||||
"React",
|
||||
"Anilist",
|
||||
"Search-Engine",
|
||||
"Trace-moe",
|
||||
"anime-search"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/MarcUs7i/SauceKudasai"
|
||||
},
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"axios": "^1.8.3",
|
||||
"framer-motion": "^12.5.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-dropzone": "^14.3.8",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"styled-components": "^6.1.16",
|
||||
"web-vitals": "^4.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
"getsauce": "set PORT=3006 && react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
public/SauceKudasai.png
Normal file
BIN
public/SauceKudasai.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
public/favicon/favicon-16x16.png
Normal file
BIN
public/favicon/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 904 B |
BIN
public/favicon/favicon-192x192.png
Normal file
BIN
public/favicon/favicon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
public/favicon/favicon-32x32.png
Normal file
BIN
public/favicon/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
BIN
public/favicon/favicon.ico
Normal file
BIN
public/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/icons/icon-180x180.png
Normal file
BIN
public/icons/icon-180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
public/icons/icon-192x192.png
Normal file
BIN
public/icons/icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
public/icons/icon-256x256.png
Normal file
BIN
public/icons/icon-256x256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
public/icons/icon-384x384.png
Normal file
BIN
public/icons/icon-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
BIN
public/icons/icon-512x512.png
Normal file
BIN
public/icons/icon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
94
public/index.html
Normal file
94
public/index.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<!-- @format -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<link rel="icon" href="favicon/favicon.ico" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon//favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon//favicon-16x16.png" />
|
||||
<link rel="icon" type="image/png" sizes="192x19" href="favicon/favicon-192x192.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" type="image/png" href="icons/icon-180x180.png" />
|
||||
<link rel="apple-touch-icon" sizes="192x192" type="image/png" href="icons/icon-192x192.png" />
|
||||
<link rel="apple-touch-icon" sizes="256x256" type="image/png" href="icons/icon-1256x256.png" />
|
||||
<link rel="apple-touch-icon" sizes="382-384" type="image/png" href="icons/icon-382-384.png" />
|
||||
<link rel="apple-touch-icon" sizes="512x512" type="image/png" href="icons/icon-512x512.png" />
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="application-name" content="Saucekudasai" />
|
||||
<meta name="apple-mobile-web-app-title" content="Saucekudasai" />
|
||||
<meta name="theme-color" content="#E5DFF6" />
|
||||
<meta name="msapplication-navbutton-color" content="#E5DFF6" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="#E5DFF6" />
|
||||
<meta name="msapplication-starturl" content="." />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>SauceKudasai - Search any Anime by Image</title>
|
||||
<meta name="title" content="SauceKudasai - Search any Anime by Image" />
|
||||
<meta name="description" content=" Anime search engine that fetches anime info based on the image provided." />
|
||||
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Saucekudasai, saucekudasai, SauceKudasai.com, sauce, what anime, myanimelist, Anime, free, Search, Tracemoe, Anilist, image, Demon slayer, アニメ, Anime scene search, Image Search, Search Engine"
|
||||
/>
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://saucekudasai.com/" />
|
||||
<meta property="og:title" content="SauceKudasai - Search any Anime by Image" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Anime search engine that fetches anime info based on the image provided."
|
||||
/>
|
||||
<meta property="og:image" content="https://saucekudasai.com/SauceKudasai.png" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://saucekudasai.com" />
|
||||
<meta property="twitter:title" content="SauceKudasai - Search any Anime by Image" />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="Anime search engine that fetches anime info based on the image provided."
|
||||
/>
|
||||
<meta property="twitter:image" content="https://saucekudasai.com/SauceKudasai.png" />
|
||||
<meta name="twitter:image:alt" content="SauceKudasai - Search any Anime by Image" />
|
||||
<meta name="twitter:creator" content="@ayushgptaa" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-98879STR66"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-98879STR66');
|
||||
</script>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3151427902838816" crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
#root {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
max-height: 100vh;
|
||||
background: linear-gradient(116.2deg, #d9e5fa -0.48%, #fad9f3 102.36%);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
40
public/manifest.json
Normal file
40
public/manifest.json
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"short_name": "Saucekudasai",
|
||||
"name": "Saucekudasai ",
|
||||
"lang": "en",
|
||||
"description": "An anime search engine that provide animeinfo based on image or url provided using trace.moe Api",
|
||||
"background_color": "#E5DFF6",
|
||||
"theme_color": "#E5DFF6",
|
||||
"dir": "auto",
|
||||
"display": "standalone",
|
||||
"orientation": "portrait",
|
||||
"start_url": ".",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icons/icon-180x180.png",
|
||||
"sizes": "180x180",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-256x256.png",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-384x384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"prefer_related_applications": false
|
||||
}
|
||||
53
src/Api/constant.js
Normal file
53
src/Api/constant.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/** @format */
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
export const TRACE_MOE_QUERY = 'https://api.trace.moe/search';
|
||||
|
||||
export const ANILIST_QUERY = 'https://graphql.anilist.co';
|
||||
|
||||
// General options for Axios instance
|
||||
export const options = {
|
||||
headers: {
|
||||
' Accept': 'application/json',
|
||||
"x-trace-key": process.env.API_KEY,
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Axios instance
|
||||
*any data provided in instance.get will be merged with options
|
||||
*/
|
||||
export const instance = axios.create({
|
||||
baseURL: TRACE_MOE_QUERY,
|
||||
options,
|
||||
});
|
||||
|
||||
// Query data for Anilist GraphQL Api
|
||||
export const query = `
|
||||
query ($id: Int) {
|
||||
Media (id:$id , type: ANIME) {
|
||||
id
|
||||
title {
|
||||
english
|
||||
native
|
||||
}
|
||||
description(asHtml:false)
|
||||
seasonYear
|
||||
coverImage {
|
||||
large
|
||||
}
|
||||
bannerImage
|
||||
genres
|
||||
externalLinks {
|
||||
id
|
||||
url
|
||||
site
|
||||
}
|
||||
averageScore
|
||||
siteUrl
|
||||
}
|
||||
}
|
||||
|
||||
`;
|
||||
68
src/App.js
Normal file
68
src/App.js
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/** @format */
|
||||
import { useEffect, useContext } from 'react';
|
||||
import Fileupload from 'Components/Fileupload/Fileupload';
|
||||
import Results from 'Components/Resultcard/Results';
|
||||
import { GlobalStyle } from 'styles/GlobalStyle';
|
||||
import Navbar from 'Components/Navbar';
|
||||
import { Footertext } from 'Components/Footer/Footertext';
|
||||
import { ContextProvider, Context } from 'store/Context-Provider';
|
||||
import { ServerError, UserError } from 'Components/Ui/Errorcard';
|
||||
|
||||
function AppContent() {
|
||||
const ctx = useContext(Context);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.height = window.innerHeight + 'px';
|
||||
const setheight = () => {
|
||||
document.body.style.height = window.innerHeight + 'px';
|
||||
};
|
||||
window.addEventListener('resize', setheight);
|
||||
|
||||
// Clipboard paste event listener
|
||||
const handlePaste = (e) => {
|
||||
const items = e.clipboardData?.items;
|
||||
if (!items) return;
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
const file = items[i].getAsFile();
|
||||
|
||||
// Pass as array
|
||||
ctx.imagehandler([file]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('paste', handlePaste);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', setheight);
|
||||
window.removeEventListener('paste', handlePaste);
|
||||
};
|
||||
}, [ctx]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Fileupload />
|
||||
<Results />
|
||||
<UserError />
|
||||
<ServerError />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<GlobalStyle />
|
||||
<Navbar />
|
||||
<ContextProvider>
|
||||
<AppContent />
|
||||
</ContextProvider>
|
||||
<Footertext />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
85
src/Components/Fileupload/DropZone/DropZone.js
Normal file
85
src/Components/Fileupload/DropZone/DropZone.js
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
/** @format */
|
||||
|
||||
import { useContext } from 'react';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import styled from 'styled-components';
|
||||
import Previewimage from 'Components/Preview/Previewimage';
|
||||
import { Imagecontainer, respondTo } from 'styles/mixins';
|
||||
import Urlinput from 'Components/Ui/Urlinput';
|
||||
import { Context } from 'store/Context-Provider';
|
||||
|
||||
const Dropcontainer = styled.div`
|
||||
color: #000;
|
||||
box-sizing: border-box;
|
||||
height: 75%;
|
||||
margin: 0.3rem;
|
||||
background: var(--lavenderlight);
|
||||
border-radius: 20px;
|
||||
user-select: none;
|
||||
padding-top: 1.1rem;
|
||||
${respondTo.sm`
|
||||
height: 80%;
|
||||
`}
|
||||
${respondTo.md`
|
||||
height: 75%;
|
||||
`}
|
||||
|
||||
${respondTo.lg`
|
||||
height: 78%;
|
||||
border-radius: 25px;
|
||||
margin: 0.8rem 1.5rem;
|
||||
`}
|
||||
`;
|
||||
|
||||
const PreviewContainer = styled(Imagecontainer)`
|
||||
position: relative;
|
||||
height: 120px;
|
||||
width: 200px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
border-radius: calc(var(--radius) / 2);
|
||||
${respondTo.xs`
|
||||
height: 150px;
|
||||
width: 250px;
|
||||
`}
|
||||
${respondTo.sm`
|
||||
height: 160px;
|
||||
width: 280px;
|
||||
`}
|
||||
/* ${respondTo.md`
|
||||
height: 200px;
|
||||
width: 330px;
|
||||
`} */
|
||||
${respondTo.lg`{
|
||||
height: 75%;
|
||||
width: 45%;
|
||||
`}
|
||||
`;
|
||||
const DropZone = ({ showurl, toggleurl }) => {
|
||||
const ctx = useContext(Context);
|
||||
const { imagehandler, urlhandler, url } = ctx;
|
||||
return (
|
||||
<>
|
||||
<Dropzone onDrop={imagehandler} accept="image/*" multiple={false} noClick={true}>
|
||||
{({ getRootProps, getInputProps, open }) => (
|
||||
<Dropcontainer {...getRootProps()}>
|
||||
<input {...getInputProps()} />
|
||||
<PreviewContainer>
|
||||
<Previewimage open={open} />
|
||||
</PreviewContainer>
|
||||
<Urlinput
|
||||
url={url}
|
||||
toggleurl={toggleurl}
|
||||
urlhandler={urlhandler}
|
||||
showurl={showurl}
|
||||
open={open}
|
||||
/>
|
||||
{/* <Filebtn open={open} toggleurl={toggleurl} showurl={showurl} /> */}
|
||||
</Dropcontainer>
|
||||
)}
|
||||
</Dropzone>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropZone;
|
||||
21
src/Components/Fileupload/Fileupload.js
Normal file
21
src/Components/Fileupload/Fileupload.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/** @format */
|
||||
import { useState } from 'react';
|
||||
import Searchbtn from '../Ui/Searchbtn';
|
||||
import Dropzone from './DropZone/DropZone';
|
||||
import { Container } from './Fileuploadstyle';
|
||||
|
||||
export const Fileupload = () => {
|
||||
const [showurl, setShowurl] = useState(false);
|
||||
const toggleurl = () => {
|
||||
setShowurl(prevstate => !prevstate);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Dropzone showurl={showurl} toggleurl={toggleurl} />
|
||||
<Searchbtn />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Fileupload;
|
||||
48
src/Components/Fileupload/Fileuploadstyle.js
Normal file
48
src/Components/Fileupload/Fileuploadstyle.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/** @format */
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { respondTo } from '../../styles/mixins';
|
||||
|
||||
export const Container = styled.div`
|
||||
background: var(--primary);
|
||||
width: 88%;
|
||||
height: 310px;
|
||||
padding: 1.3rem;
|
||||
padding-bottom: 0.5rem;
|
||||
margin: 1.5em auto;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 5px 29px -4px rgba(0, 0, 0, 0.25), inset 0px 1px 5px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 30px;
|
||||
|
||||
& p {
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
${respondTo.xs`
|
||||
padding-bottom:0;
|
||||
height: 320px;
|
||||
width: 400px;
|
||||
`}
|
||||
${respondTo.sm`
|
||||
height: 350px;
|
||||
width: 450px;
|
||||
padding:1.7rem;
|
||||
padding-bottom:1rem;
|
||||
`}
|
||||
|
||||
${respondTo.md`
|
||||
height: 350px;
|
||||
width: 550px;
|
||||
padding-bottom:0rem;
|
||||
`}
|
||||
|
||||
${respondTo.lg` {
|
||||
margin-top: 30px;
|
||||
height: 370px;
|
||||
width: 750px;
|
||||
padding:1rem;
|
||||
`}
|
||||
`;
|
||||
35
src/Components/Footer/Footertext.js
Normal file
35
src/Components/Footer/Footertext.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/** @format */
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Footer = styled.footer`
|
||||
letter-spacing: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: #000;
|
||||
font-weight: var(--semi-bold);
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
font-size: 1.15rem;
|
||||
font-weight: var(--medium);
|
||||
}
|
||||
`;
|
||||
export const Footertext = () => {
|
||||
return (
|
||||
<Footer>
|
||||
<p>
|
||||
Powered by
|
||||
<a href="https://github.com/soruly/trace.moe" target="_blank" rel="noreferrer">
|
||||
trace.moe
|
||||
</a>
|
||||
</p>
|
||||
</Footer>
|
||||
);
|
||||
};
|
||||
65
src/Components/Navbar/index.js
Normal file
65
src/Components/Navbar/index.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/** @format */
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { IconContext } from 'react-icons';
|
||||
import { BsGithub } from 'react-icons/bs';
|
||||
import { respondTo } from 'styles/mixins';
|
||||
|
||||
const Navbar = styled.nav`
|
||||
padding: 0.5em 1.5rem;
|
||||
background: var(--nav);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 30px;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
margin-top: 1rem;
|
||||
mix-blend-mode: normal;
|
||||
filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
|
||||
|
||||
${respondTo.xs`
|
||||
width: 400px;
|
||||
`}
|
||||
${respondTo.sm`
|
||||
width: 450px;
|
||||
`}
|
||||
|
||||
${respondTo.lg`
|
||||
margin-top: 1.5rem;
|
||||
width: 700px;
|
||||
padding: 0.8rem 2rem;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Title = styled.h1`
|
||||
font-size: 1rem;
|
||||
font-weight: var(--medium);
|
||||
color: #000;
|
||||
|
||||
${respondTo.lg`
|
||||
font-size: 1.2rem;
|
||||
`}
|
||||
`;
|
||||
|
||||
const index = () => {
|
||||
return (
|
||||
<>
|
||||
<Navbar>
|
||||
<Title>SauceKudasai</Title>
|
||||
<a
|
||||
href="https://github.com/MarcUs7i/SauceKudasai"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="Github link">
|
||||
<IconContext.Provider value={{ size: '1.4rem', color: '#000000' }}>
|
||||
<BsGithub />
|
||||
</IconContext.Provider>
|
||||
</a>
|
||||
</Navbar>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default index;
|
||||
21
src/Components/Preview/PreviewStyles.js
Normal file
21
src/Components/Preview/PreviewStyles.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/** @format */
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Image = styled.img`
|
||||
border-radius: calc(var(--radius) / 3);
|
||||
`;
|
||||
export const Loadingimg = styled(Image)`
|
||||
filter: blur(2.5px);
|
||||
`;
|
||||
|
||||
export const Video = styled.video`
|
||||
border-radius: calc(var(--radius) / 2);
|
||||
`;
|
||||
|
||||
export const Mutebtn = styled.button`
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
bottom: 5px;
|
||||
`;
|
||||
69
src/Components/Preview/Previewimage.js
Normal file
69
src/Components/Preview/Previewimage.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/** @format */
|
||||
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
import { Loader } from 'Components/Ui/loader';
|
||||
import { Image, Loadingimg, Video, Mutebtn } from './PreviewStyles';
|
||||
import { Uploadinfo } from 'Components/Ui/Uploadinfo/Uploadinfo';
|
||||
import { Context } from 'store/Context-Provider';
|
||||
import { IconContext } from 'react-icons';
|
||||
import { GoUnmute, GoMute } from 'react-icons/go';
|
||||
|
||||
const Previewimage = ({ open }) => {
|
||||
const ctx = useContext(Context);
|
||||
const { image, url, loading, video } = ctx;
|
||||
const [preview, setpreview] = useState(null);
|
||||
const [mute, setmute] = useState(true);
|
||||
const mutehandler = () => {
|
||||
setmute(prevstate => !prevstate);
|
||||
};
|
||||
// This is use to set preview to the image selected by the user
|
||||
useEffect(() => {
|
||||
if (image) return setpreview(URL.createObjectURL(image));
|
||||
setmute(true);
|
||||
}, [image]);
|
||||
|
||||
// This is use to set preview to the url selected by the user
|
||||
useEffect(() => {
|
||||
if (url) setpreview(url);
|
||||
setmute(true);
|
||||
}, [url]);
|
||||
|
||||
return (
|
||||
/* This code Checks first if the the video Exits
|
||||
If the video exits the video tag is set to the video
|
||||
If the video doesnot exits then it checks if the loading exits
|
||||
If loading exits then loading is rendered on the screen otherwise
|
||||
preview is rendered */
|
||||
<>
|
||||
{video === null ? (
|
||||
loading ? (
|
||||
<>
|
||||
<Loadingimg src={preview} alt="Loading..." />
|
||||
<Loader />
|
||||
</>
|
||||
) : preview ? (
|
||||
<Image src={preview} alt="Your Search image" onClick={e => e.stopPropagation()} />
|
||||
) : (
|
||||
<Uploadinfo open={open} />
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<Video autoPlay loop muted={mute} src={video}></Video>
|
||||
<Mutebtn onClick={mutehandler}>
|
||||
{mute ? (
|
||||
<IconContext.Provider value={{ size: '1.3rem', color: '#d9d9f9' }}>
|
||||
<GoMute></GoMute>
|
||||
</IconContext.Provider>
|
||||
) : (
|
||||
<IconContext.Provider value={{ size: '1.3rem', color: '#d9d9f9' }}>
|
||||
<GoUnmute></GoUnmute>
|
||||
</IconContext.Provider>
|
||||
)}
|
||||
</Mutebtn>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Previewimage;
|
||||
125
src/Components/Resultcard/Results.js
Normal file
125
src/Components/Resultcard/Results.js
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
/** @format */
|
||||
import { useContext } from 'react';
|
||||
import { Context } from 'store/Context-Provider';
|
||||
import { AiOutlineInfoCircle } from 'react-icons/ai';
|
||||
import { IoIosArrowForward } from 'react-icons/io';
|
||||
import Overlay from '../Ui/Overlay';
|
||||
import { Closebtn } from 'Components/Ui/Closebtn';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Animecard,
|
||||
Bannerimg,
|
||||
Banner,
|
||||
Banneroverlay,
|
||||
Cover,
|
||||
Coverimg,
|
||||
Animeinfo,
|
||||
Animetext,
|
||||
Title,
|
||||
Info,
|
||||
Details,
|
||||
Summary,
|
||||
Links,
|
||||
Resultfooter,
|
||||
Moreinfo,
|
||||
StyledLink,
|
||||
Similarity,
|
||||
} from './Resultstyle';
|
||||
|
||||
const variants = {
|
||||
initial: { y: '100%' },
|
||||
animate: {
|
||||
y: '0',
|
||||
transition: {
|
||||
duration: 0.5,
|
||||
ease: 'easeInOut',
|
||||
type: 'linear',
|
||||
delay: 0.1,
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
y: '100%',
|
||||
transition: {
|
||||
delay: 0.1,
|
||||
ease: 'easeInOut',
|
||||
type: 'linear',
|
||||
duration: 0.8,
|
||||
},
|
||||
},
|
||||
};
|
||||
const Results = () => {
|
||||
const ctx = useContext(Context);
|
||||
const truncate = (str, num) => {
|
||||
if (str.length <= num) return str;
|
||||
return str.substring(0, num).concat('...');
|
||||
};
|
||||
const closeResult = () => {
|
||||
ctx.cardhandler();
|
||||
};
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{ctx.animeinfoexits ? (
|
||||
<>
|
||||
<Overlay key="Overlay" onClick={closeResult} />
|
||||
<Animecard key="animecard" variants={variants} initial="initial" animate="animate" exit="exit">
|
||||
<Banner>
|
||||
<Closebtn onClick={closeResult}></Closebtn>
|
||||
{ctx.animeinfo.bannerImage ? (
|
||||
<>
|
||||
<Bannerimg src={ctx.animeinfo.bannerImage}></Bannerimg>
|
||||
<Banneroverlay></Banneroverlay>{' '}
|
||||
</>
|
||||
) : null}
|
||||
</Banner>
|
||||
<Animeinfo>
|
||||
<Cover>
|
||||
<Coverimg src={ctx.animeinfo.coverImage.large} alt=""></Coverimg>
|
||||
</Cover>
|
||||
<Animetext>
|
||||
<Title>{ctx.animeinfo.title.english || ctx.animeinfo.title.native}</Title>
|
||||
<Info>
|
||||
<Details>
|
||||
<h3>Ep {ctx.animeinfo.episode}</h3>
|
||||
<h3>at {(ctx.animeinfo.time / 60).toFixed(2).replace('.', ':')}</h3>
|
||||
<h3>{ctx.animeinfo.seasonYear}</h3>
|
||||
<Similarity props={ctx.animeinfo.similarity.toFixed(2) * 100}>
|
||||
{ctx.animeinfo.similarity.toFixed(2) * 100}%
|
||||
</Similarity>
|
||||
</Details>
|
||||
</Info>
|
||||
<Summary>
|
||||
<p>{ctx.animeinfo.description ? truncate(ctx.animeinfo.description, 250) : null}</p>
|
||||
<Links>
|
||||
{ctx.animeinfo.externalLinks.map(({ id, site, url }) => {
|
||||
return (
|
||||
<li key={id}>
|
||||
<StyledLink href={url} target="_blank">
|
||||
{site}
|
||||
</StyledLink>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</Links>
|
||||
</Summary>
|
||||
</Animetext>
|
||||
<Resultfooter>
|
||||
<Moreinfo href={ctx.animeinfo.siteUrl} target="_blank">
|
||||
<AiOutlineInfoCircle size={15} />
|
||||
<span>More Info</span>
|
||||
<IoIosArrowForward size={15} />
|
||||
</Moreinfo>
|
||||
<span>
|
||||
Information by{' '}
|
||||
<StyledLink href="https://anilist.com" target="_blank">
|
||||
Anilist
|
||||
</StyledLink>
|
||||
</span>
|
||||
</Resultfooter>
|
||||
</Animeinfo>
|
||||
</Animecard>
|
||||
</>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
export default Results;
|
||||
248
src/Components/Resultcard/Resultstyle.js
Normal file
248
src/Components/Resultcard/Resultstyle.js
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
/** @format */
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { motion } from 'framer-motion';
|
||||
import { respondTo } from 'styles/mixins';
|
||||
|
||||
export const Animecard = styled(motion.div)`
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 50%;
|
||||
width: 100vw;
|
||||
background: var(--cardbg);
|
||||
border-radius: var(--card-radius);
|
||||
`;
|
||||
|
||||
export const Banner = styled.div`
|
||||
background-color: var(--cardbg);
|
||||
height: 30%;
|
||||
position: relative;
|
||||
border-radius: var(--card-radius);
|
||||
${respondTo.lg`
|
||||
height: 35%;
|
||||
`}
|
||||
`;
|
||||
export const Bannerimg = styled.img`
|
||||
border-radius: var(--card-radius);
|
||||
background-color: var(--cardbg);
|
||||
`;
|
||||
|
||||
export const Banneroverlay = styled.div`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 2;
|
||||
border-radius: var(--card-radius);
|
||||
`;
|
||||
|
||||
export const Cover = styled.div`
|
||||
width: 120px;
|
||||
height: 170px;
|
||||
border-radius: 0.2rem;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
bottom: 30px;
|
||||
|
||||
${respondTo.sm`
|
||||
width: 140px;
|
||||
height: 200px;
|
||||
`}
|
||||
${respondTo.tab`
|
||||
width: 160px;
|
||||
height: 230px;
|
||||
bottom: 50px;
|
||||
`}
|
||||
|
||||
${respondTo.tab`
|
||||
width: 160px;
|
||||
height: 230px;
|
||||
bottom: 60px;
|
||||
`}
|
||||
|
||||
${respondTo.lg`
|
||||
width: 180px;
|
||||
height: 250px;
|
||||
bottom:85px;
|
||||
`}
|
||||
${respondTo.xl`
|
||||
width: 210px;
|
||||
height: 270px;
|
||||
bottom:90px;
|
||||
`}
|
||||
`;
|
||||
|
||||
export const Coverimg = styled.img`
|
||||
border-radius: inherit;
|
||||
`;
|
||||
export const Animeinfo = styled.div`
|
||||
padding: 0 0.8rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-column-gap: 10px;
|
||||
${respondTo.tab`
|
||||
gap: 20px;
|
||||
`}
|
||||
`;
|
||||
export const Animetext = styled.div`
|
||||
padding-top: 0.4rem;
|
||||
color: var(--lavender);
|
||||
`;
|
||||
|
||||
export const Title = styled.h1`
|
||||
font-size: 1.2rem;
|
||||
font-weight: var(--bold);
|
||||
${respondTo.md`
|
||||
font-size: 1.8rem;
|
||||
`}
|
||||
${respondTo.lg`
|
||||
font-size: 2.3rem;
|
||||
`}
|
||||
`;
|
||||
|
||||
export const Info = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
export const Details = styled.div`
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
font-size: 0.65rem;
|
||||
${respondTo.tab`
|
||||
font-size: 0.7rem;
|
||||
margin-top: 0.2rem;
|
||||
`}
|
||||
${respondTo.lg`
|
||||
font-size: 1rem;
|
||||
width:60%;
|
||||
& > h3 {
|
||||
&:nth-child(2) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
& > h3 {
|
||||
font-weight: var(--semi-medium);
|
||||
}
|
||||
`;
|
||||
export const Similarity = styled.h3`
|
||||
font-weight: var(--semi-medium);
|
||||
color: ${props => (props.props > 90 ? '#15f115' : '#c7e423')};
|
||||
`;
|
||||
export const Summary = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
margin-top: 0.7rem;
|
||||
overflow: hidden;
|
||||
${respondTo.tab`
|
||||
grid-gap:15px;
|
||||
`}
|
||||
|
||||
${respondTo.lg`
|
||||
grid-template-columns: 66% 30%;
|
||||
grid-gap:45px;
|
||||
`}
|
||||
|
||||
& > p {
|
||||
display: none;
|
||||
font-size: 0.8rem;
|
||||
font-weight: var(--regular);
|
||||
${respondTo.tab`
|
||||
display:block;
|
||||
`}
|
||||
${respondTo.md`
|
||||
font-size: 0.9rem;
|
||||
`}
|
||||
${respondTo.lg`
|
||||
font-size: 0.9rem;
|
||||
`}
|
||||
${respondTo.xl`
|
||||
font-size: 1.1rem;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
export const Genre = styled.div`
|
||||
display: none;
|
||||
width: 30%;
|
||||
${respondTo.xl`
|
||||
// display:block;
|
||||
`};
|
||||
`;
|
||||
export const Links = styled.div`
|
||||
font-size: 0.85rem;
|
||||
overflow: hidden;
|
||||
${respondTo.lg`
|
||||
font-size: 0.9rem;
|
||||
`}
|
||||
${respondTo.xl`
|
||||
font-size: 1.1rem;
|
||||
`}
|
||||
& > li {
|
||||
padding-right: 0.6rem;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
`;
|
||||
export const Resultfooter = styled.div`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.25);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.7rem 1rem;
|
||||
|
||||
${respondTo.tab`
|
||||
padding: 0.8rem;
|
||||
`}
|
||||
${respondTo.lg`
|
||||
padding: 0.6rem 1.5rem;
|
||||
`}
|
||||
& > span {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Moreinfo = styled.a`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: var(--semi-medium);
|
||||
gap: 4px;
|
||||
& > span {
|
||||
font-size: 0.7rem;
|
||||
${respondTo.lg`
|
||||
font-size: 1rem;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
export const StyledLink = styled.a`
|
||||
color: var(--Styledlinks);
|
||||
`;
|
||||
export const Closebtn = styled.div`
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
right: 0.8rem;
|
||||
border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
`;
|
||||
26
src/Components/Ui/Closebtn.js
Normal file
26
src/Components/Ui/Closebtn.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/** @format */
|
||||
|
||||
import React from 'react';
|
||||
import { IoMdClose } from 'react-icons/io';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const CloseBtn = styled.div`
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
right: 0.8rem;
|
||||
border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
`;
|
||||
export const Closebtn = ({ onClick }) => {
|
||||
return (
|
||||
<CloseBtn onClick={onClick}>
|
||||
<IoMdClose color={'black'} size={20} />
|
||||
</CloseBtn>
|
||||
);
|
||||
};
|
||||
127
src/Components/Ui/Errorcard.js
Normal file
127
src/Components/Ui/Errorcard.js
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
/** @format */
|
||||
|
||||
import { useContext } from 'react';
|
||||
import Overlay from '../Ui/Overlay';
|
||||
import styled from 'styled-components';
|
||||
import Chikagif from 'Components/Ui/images/chika.gif';
|
||||
import Kaguyasama from 'Components/Ui/images/kaguya-sama.gif';
|
||||
import { respondTo } from '../../styles/mixins';
|
||||
import { Closebtn } from './Closebtn';
|
||||
import { Context } from 'store/Context-Provider';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
const Container = styled(motion.div)`
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
z-index: 200;
|
||||
background: var(--cardbg);
|
||||
border-radius: 15px;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
|
||||
${respondTo.xs`
|
||||
height: 320px;
|
||||
width: 400px;
|
||||
`}
|
||||
${respondTo.sm`
|
||||
height: 400px;
|
||||
width: 450px;
|
||||
`}
|
||||
|
||||
${respondTo.lg` {
|
||||
height: 450px;
|
||||
width: 600px;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Gif = styled.div`
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
border-radius: 15px 15px 0 0;
|
||||
user-select: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const Errormsg = styled.div`
|
||||
text-align: center;
|
||||
color: var(--lavender);
|
||||
padding: 1rem;
|
||||
|
||||
h3 {
|
||||
font-weight: var(--regular);
|
||||
font-size: 1.3rem;
|
||||
margin-top: 0.5rem;
|
||||
${respondTo.sm`
|
||||
font-size: 1.5rem;
|
||||
`}
|
||||
${respondTo.lg`
|
||||
font-size: 1.6rem;
|
||||
font-weight: var(--semi-medium);
|
||||
`}
|
||||
}
|
||||
`;
|
||||
const variants = {
|
||||
initial: { scale: 0, x: '-50%', y: '-50%' },
|
||||
animate: {
|
||||
scale: 1,
|
||||
transition: {
|
||||
duration: 0.9,
|
||||
ease: 'easeInOut',
|
||||
type: 'spring',
|
||||
delay: 0.1,
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
scale: 0,
|
||||
transition: {
|
||||
duration: 0.6,
|
||||
delay: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
export const Errorcard = ({ image, error, errormsg }) => {
|
||||
const ctx = useContext(Context);
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{error ? (
|
||||
<>
|
||||
<Overlay />
|
||||
<Container variants={variants} key="Errorcard" initial="initial" animate="animate" exit="exit">
|
||||
<Gif>
|
||||
<img src={image} alt="Server Error" />
|
||||
<Closebtn
|
||||
onClick={() => {
|
||||
ctx.errorhandler();
|
||||
}}
|
||||
/>
|
||||
</Gif>
|
||||
<Errormsg>
|
||||
<h3>{errormsg}</h3>
|
||||
</Errormsg>
|
||||
</Container>
|
||||
</>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export const UserError = () => {
|
||||
const ctx = useContext(Context);
|
||||
const error = ctx.usererror;
|
||||
return (
|
||||
<Errorcard
|
||||
image={Kaguyasama}
|
||||
errormsg="Looks like you are offline or using wrong image/url 👉👈"
|
||||
error={error}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export const ServerError = () => {
|
||||
const ctx = useContext(Context);
|
||||
const error = ctx.servererror;
|
||||
return <Errorcard image={Chikagif} errormsg="Saba-chan is a little busy at the moment 😓" error={error} />;
|
||||
};
|
||||
51
src/Components/Ui/Filebtn.js
Normal file
51
src/Components/Ui/Filebtn.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/** @format */
|
||||
|
||||
import React from 'react';
|
||||
import { FiFolderPlus, FiLink2 } from 'react-icons/fi';
|
||||
import { IconContext } from 'react-icons';
|
||||
import styled from 'styled-components';
|
||||
import { respondTo } from 'styles/mixins';
|
||||
|
||||
const Button = styled.button`
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border: none;
|
||||
background: var(--lavender);
|
||||
cursor: pointer;
|
||||
margin: 1.4rem 0.5rem 0 0;
|
||||
cursor: pointer;
|
||||
& > svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
${respondTo.xs`
|
||||
margin: 0.6rem 0.6rem 0 0;
|
||||
`}
|
||||
${respondTo.sm`
|
||||
margin: 1rem 0.6rem 0 0;
|
||||
`}
|
||||
${respondTo.md`
|
||||
margin: 0.8rem 0.6rem 0 0;
|
||||
`}
|
||||
`;
|
||||
|
||||
export const Filebtn = ({ open, toggleurl, key1, key2 }) => {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={open} key={key1} aria-label="Fileupload button">
|
||||
<IconContext.Provider value={{ size: '1.1rem', color: '#303133' }}>
|
||||
<FiFolderPlus />
|
||||
</IconContext.Provider>
|
||||
</Button>
|
||||
<Button onClick={toggleurl} key={key2} aria-label="Url button">
|
||||
<IconContext.Provider value={{ size: '1.1rem', color: '#303133' }}>
|
||||
<FiLink2 />
|
||||
</IconContext.Provider>
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
21
src/Components/Ui/Overlay.js
Normal file
21
src/Components/Ui/Overlay.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/** @format */
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Overlay = styled.div`
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
z-index: 98;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const overlay = ({ onClick }) => {
|
||||
return <Overlay onClick={onClick} />;
|
||||
};
|
||||
|
||||
export default overlay;
|
||||
49
src/Components/Ui/Searchbtn.js
Normal file
49
src/Components/Ui/Searchbtn.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/** @format */
|
||||
import { useContext, useState, useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { respondTo } from '../../styles/mixins';
|
||||
import { Context } from 'store/Context-Provider';
|
||||
|
||||
const Search = styled.button`
|
||||
border: none;
|
||||
padding: 0.8rem 1.7rem;
|
||||
background: var(--lavender);
|
||||
font-family: inherit;
|
||||
font-weight: var(--semi-medium);
|
||||
color: #000;
|
||||
border-radius: calc(var(--radius) * 2);
|
||||
margin-top: 0.5rem;
|
||||
letter-spacing: 0;
|
||||
font-size: 1rem;
|
||||
filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25));
|
||||
cursor: ${props => (props.image || props.url ? 'pointer' : 'not-allowed')};
|
||||
|
||||
${respondTo.md`
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.9rem 2rem;
|
||||
`}
|
||||
|
||||
${respondTo.lg`
|
||||
margin-top: 0rem;
|
||||
font-weight: var(--semi-medium);
|
||||
font-size: 1.1rem;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Searchbtn = () => {
|
||||
const [disable, setdisable] = useState(true);
|
||||
const ctx = useContext(Context);
|
||||
const { image, url, fileUpload } = ctx;
|
||||
useEffect(() => {
|
||||
if (image || url) return setdisable(false);
|
||||
}, [image, url]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Search onClick={fileUpload} type="submit" disabled={disable} image={image} url={url}>
|
||||
Search
|
||||
</Search>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Searchbtn;
|
||||
65
src/Components/Ui/Uploadinfo/Uploadinfo.js
Normal file
65
src/Components/Ui/Uploadinfo/Uploadinfo.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/** @format */
|
||||
|
||||
import Upload from '../images/Ei-share-apple.svg';
|
||||
import styled from 'styled-components';
|
||||
import { respondTo } from '../../../styles/mixins';
|
||||
|
||||
export const Uploadimg = styled.img`
|
||||
height: 65px;
|
||||
width: 40px;
|
||||
opacity: 75%;
|
||||
|
||||
${respondTo.sm`
|
||||
height: 80px;
|
||||
width: 60px;
|
||||
|
||||
`}
|
||||
|
||||
${respondTo.lg`{
|
||||
margin-top: 0.9rem;
|
||||
height: 80px;
|
||||
width: 60px;
|
||||
opacity: 75%;
|
||||
`}
|
||||
`;
|
||||
export const Uploadtext = styled.div`
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0px;
|
||||
font-weight: var(--semi-medium);
|
||||
opacity: 80%;
|
||||
|
||||
span {
|
||||
color: var(--lightblue);
|
||||
cursor: pointer;
|
||||
}
|
||||
${respondTo.xs`
|
||||
font-size: 1.4rem;
|
||||
`}
|
||||
${respondTo.md`
|
||||
font-size: 1.3rem;
|
||||
`}
|
||||
${respondTo.lg`
|
||||
font-weight: var(--semi-medium);
|
||||
font-size: 1.6rem;
|
||||
`}
|
||||
`;
|
||||
|
||||
export const PasteHint = styled.div`
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
opacity: 70%;
|
||||
font-style: italic;
|
||||
`;
|
||||
|
||||
export const Uploadinfo = ({ open }) => {
|
||||
return (
|
||||
<>
|
||||
<Uploadimg src={Upload} alt="Upload" />
|
||||
<Uploadtext>
|
||||
Drop your images, <span onClick={open}> browse </span> or import from
|
||||
</Uploadtext>
|
||||
<PasteHint>Or paste from clipboard (Ctrl+V)</PasteHint>
|
||||
</>
|
||||
);
|
||||
};
|
||||
116
src/Components/Ui/Urlinput.js
Normal file
116
src/Components/Ui/Urlinput.js
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
/** @format */
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { motion } from 'framer-motion';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { Filebtn } from 'Components/Ui/Filebtn';
|
||||
import { respondTo } from 'styles/mixins';
|
||||
import { IoMdClose } from 'react-icons/io';
|
||||
|
||||
const UrlContainer = styled.div`
|
||||
position: relative;
|
||||
height: 40px;
|
||||
width: 220px;
|
||||
display: inline-block;
|
||||
margin-top: 1.4rem;
|
||||
|
||||
${respondTo.xs`
|
||||
margin: 0.6rem 0.6rem 0 0;
|
||||
`}
|
||||
${respondTo.sm`
|
||||
margin-top: 1rem;
|
||||
`}
|
||||
${respondTo.md`
|
||||
margin-top: 0.8rem ;
|
||||
font-size: 1rem;
|
||||
`}
|
||||
`;
|
||||
const Url = styled(motion.input)`
|
||||
position: relative;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--lavender);
|
||||
padding: 0rem 2.5rem;
|
||||
height: 40px;
|
||||
font-family: inherit;
|
||||
color: #000;
|
||||
border-radius: calc(var(--radius) * 2);
|
||||
font-size: 1rem;
|
||||
&::placeholder {
|
||||
font-size: 1rem;
|
||||
font-weight: var(--semi-medium);
|
||||
color: inherit;
|
||||
}
|
||||
`;
|
||||
|
||||
const UrlClosebtn = motion.div;
|
||||
|
||||
export const CloseBtn = styled.div`
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0.8rem;
|
||||
border-radius: 50%;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
`;
|
||||
|
||||
const Urlinput = ({ url, toggleurl, urlhandler, showurl, open }) => {
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence exitBeforeEnter={true}>
|
||||
{showurl ? (
|
||||
<UrlContainer>
|
||||
<Url
|
||||
key="urlbtn"
|
||||
onClick={e => e.stopPropagation()}
|
||||
onBlur={toggleurl}
|
||||
type="url"
|
||||
name="url"
|
||||
id="url"
|
||||
placeholder="Paste your url"
|
||||
pattern="https://.*"
|
||||
autoComplete="off"
|
||||
onChange={urlhandler}
|
||||
value={url}
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: '220px' }}
|
||||
exit={{
|
||||
width: 0,
|
||||
padding: 0,
|
||||
transition: {
|
||||
duration: 1,
|
||||
ease: 'easeInOut',
|
||||
},
|
||||
}}
|
||||
transition={{
|
||||
duration: 1,
|
||||
ease: 'easeInOut',
|
||||
type: 'spring',
|
||||
}}
|
||||
/>
|
||||
<UrlClosebtn
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{
|
||||
delay: 1,
|
||||
}}>
|
||||
<CloseBtn onClick={toggleurl}>
|
||||
<IoMdClose color={'black'} size={20} />
|
||||
</CloseBtn>
|
||||
</UrlClosebtn>
|
||||
</UrlContainer>
|
||||
) : (
|
||||
<Filebtn open={open} toggleurl={toggleurl} key1="btn1" key2="btn2" />
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Urlinput;
|
||||
1
src/Components/Ui/images/Ei-share-apple.svg
Normal file
1
src/Components/Ui/images/Ei-share-apple.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><path d="M30.3 13.7L25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z"/><path d="M24 7h2v21h-2z"/><path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z"/></svg>
|
||||
|
After Width: | Height: | Size: 361 B |
BIN
src/Components/Ui/images/chika.gif
Normal file
BIN
src/Components/Ui/images/chika.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 471 KiB |
BIN
src/Components/Ui/images/kaguya-sama.gif
Normal file
BIN
src/Components/Ui/images/kaguya-sama.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
49
src/Components/Ui/loader.js
Normal file
49
src/Components/Ui/loader.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/** @format */
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Loaderdiv = styled.div`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
`;
|
||||
|
||||
const Svg = styled.svg`
|
||||
> path,
|
||||
rect {
|
||||
fill: var(--lavender);
|
||||
/* opacity: 0.5; */
|
||||
}
|
||||
`;
|
||||
|
||||
export const Loader = () => {
|
||||
return (
|
||||
<Loaderdiv>
|
||||
<Svg
|
||||
version="1.1"
|
||||
id="loader-1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="40px"
|
||||
height="40px"
|
||||
viewBox="0 0 50 50">
|
||||
<path
|
||||
fill="#000"
|
||||
d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
|
||||
<animateTransform
|
||||
attributeType="xml"
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 25 25"
|
||||
to="360 25 25"
|
||||
dur="0.6s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
</Svg>
|
||||
</Loaderdiv>
|
||||
);
|
||||
};
|
||||
12
src/index.js
Normal file
12
src/index.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/** @format */
|
||||
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import * as serviceworker from './serviceWorkerRegistration';
|
||||
|
||||
import App from './App';
|
||||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
root.render(<App />);
|
||||
serviceworker.register();
|
||||
36
src/service-worker.js
Normal file
36
src/service-worker.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/* eslint-disable */
|
||||
import { clientsClaim } from 'workbox-core';
|
||||
import { ExpirationPlugin } from 'workbox-expiration';
|
||||
import { precacheAndRoute } from 'workbox-precaching';
|
||||
import { registerRoute } from 'workbox-routing';
|
||||
import { CacheFirst } from 'workbox-strategies';
|
||||
import * as googleAnalytics from 'workbox-google-analytics';
|
||||
|
||||
clientsClaim();
|
||||
googleAnalytics.initialize();
|
||||
// Precache all of the assets generated by your build process.
|
||||
// Their URLs are injected into the manifest variable below.
|
||||
precacheAndRoute(self.__WB_MANIFEST);
|
||||
|
||||
// An example runtime caching route for requests that aren't handled by the
|
||||
// precache, in this case same-origin .png requests like those from in public/
|
||||
registerRoute(
|
||||
// Add in any other file extensions or routing criteria as needed.
|
||||
({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
|
||||
new CacheFirst({
|
||||
cacheName: 'images',
|
||||
plugins: [
|
||||
// Ensure that once this runtime cache reaches a maximum size the
|
||||
// least-recently used images are removed.
|
||||
new ExpirationPlugin({ maxEntries: 10 }),
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
// This allows the web app to trigger skipWaiting via
|
||||
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
|
||||
self.addEventListener('message', event => {
|
||||
if (event.data && event.data.type === 'SKIP_WAITING') {
|
||||
self.skipWaiting();
|
||||
}
|
||||
});
|
||||
132
src/serviceWorkerRegistration.js
Normal file
132
src/serviceWorkerRegistration.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
/** @format */
|
||||
|
||||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://cra.link/PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.0/8 are considered localhost for IPv4.
|
||||
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
|
||||
);
|
||||
|
||||
export function register(config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log('This web app is being served cache-first by a service worker.');
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl, config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all tabs for this page are closed'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl, {
|
||||
headers: { 'Service-Worker': 'script' },
|
||||
})
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('No internet connection found. App is running in offline mode.');
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready
|
||||
.then(registration => {
|
||||
registration.unregister();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
153
src/store/Context-Provider.js
Normal file
153
src/store/Context-Provider.js
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
/** @format */
|
||||
|
||||
import { createContext, useState } from 'react';
|
||||
import { instance, TRACE_MOE_QUERY, ANILIST_QUERY, query } from '../Api/constant';
|
||||
import React from 'react';
|
||||
|
||||
const defaultstate = {
|
||||
imagehandler: () => {},
|
||||
image: null,
|
||||
urlhandler: () => {},
|
||||
url: null,
|
||||
fileUpload: () => {},
|
||||
video: null,
|
||||
loading: false,
|
||||
animeinfo: null,
|
||||
animeinfoexits: false,
|
||||
cardhandler: () => {},
|
||||
servererror: false,
|
||||
usererror: false,
|
||||
errorhandler: () => {},
|
||||
};
|
||||
|
||||
export const Context = createContext(defaultstate);
|
||||
|
||||
export const ContextProvider = props => {
|
||||
const [image, setimage] = useState(null);
|
||||
const [url, seturl] = useState('');
|
||||
const [video, setvideo] = useState(null);
|
||||
const [loading, setloading] = useState(false);
|
||||
const [animeinfoexits, setanimeinfoexits] = useState(false);
|
||||
const [animeinfo, setanimeinfo] = useState({});
|
||||
const [servererror, setServerError] = useState(false);
|
||||
const [usererror, setUserError] = useState(false);
|
||||
|
||||
// This is used to Change states to default when new image or url is used
|
||||
const Changestates = () => {
|
||||
seturl('');
|
||||
setimage(null);
|
||||
setloading(false);
|
||||
setvideo(null);
|
||||
setanimeinfo({});
|
||||
setanimeinfoexits(false);
|
||||
};
|
||||
|
||||
// This function is used to Remove the Result card
|
||||
const cardhandler = () => {
|
||||
setanimeinfoexits(false);
|
||||
};
|
||||
|
||||
// This function is used to Remove the Error card
|
||||
const errorhandler = () => {
|
||||
setServerError(false);
|
||||
setUserError(false);
|
||||
};
|
||||
|
||||
const fechanimeinfo = async (anilistid, episode, from, similarity) => {
|
||||
var variables = {
|
||||
id: anilistid,
|
||||
};
|
||||
const body = {
|
||||
query: query,
|
||||
variables: variables,
|
||||
};
|
||||
try {
|
||||
const { data } = await instance.post(ANILIST_QUERY, body);
|
||||
setanimeinfo({
|
||||
episode: episode,
|
||||
time: from,
|
||||
similarity: similarity,
|
||||
...data.data.Media,
|
||||
});
|
||||
setanimeinfoexits(true);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
// Function to get the image when image is selected
|
||||
const imagehandler = async acceptedfile => {
|
||||
Changestates();
|
||||
const file = acceptedfile[0];
|
||||
if (file && file.type.substr(0, 5) === 'image') return setimage(file);
|
||||
return setimage(null);
|
||||
};
|
||||
|
||||
// Function to get the url when url is used
|
||||
const urlhandler = async e => {
|
||||
Changestates();
|
||||
const url = e.target.value;
|
||||
if (url) return seturl(url);
|
||||
return seturl('');
|
||||
};
|
||||
|
||||
// Get data from the trace.moe API and calls Anilist APi to get animeinfo
|
||||
const getdata = data => {
|
||||
const { anilist, video, episode, from, similarity } = data.result[0];
|
||||
setvideo(video);
|
||||
setloading(false);
|
||||
fechanimeinfo(anilist, episode, from, similarity);
|
||||
};
|
||||
|
||||
const fileUpload = async e => {
|
||||
e.stopPropagation();
|
||||
setloading(false);
|
||||
let formData = new FormData();
|
||||
formData.set('image', image);
|
||||
const body = formData;
|
||||
if (image || url) {
|
||||
setloading(true);
|
||||
}
|
||||
try {
|
||||
if (url) {
|
||||
const { data } = await instance.get(`?url=${encodeURIComponent(url)}`);
|
||||
getdata(data);
|
||||
} else if (image) {
|
||||
const { data } = await instance.post(TRACE_MOE_QUERY, body);
|
||||
getdata(data);
|
||||
}
|
||||
} catch (error) {
|
||||
setloading(false);
|
||||
|
||||
if (error.response) {
|
||||
const status = Array.from(String(error.response.status), Number);
|
||||
if (status[0] === 4) return setUserError(true);
|
||||
console.log('Something went wrong in the backend', error);
|
||||
return setServerError(true);
|
||||
}
|
||||
if (error.request) {
|
||||
console.log('Due to network issue or image not provided', error);
|
||||
return setUserError(true);
|
||||
}
|
||||
return console.log('something else happened', error);
|
||||
}
|
||||
};
|
||||
|
||||
const createContext = {
|
||||
imagehandler,
|
||||
image,
|
||||
urlhandler,
|
||||
url,
|
||||
fileUpload,
|
||||
loading,
|
||||
video,
|
||||
animeinfo,
|
||||
animeinfoexits,
|
||||
cardhandler,
|
||||
servererror,
|
||||
usererror,
|
||||
errorhandler,
|
||||
};
|
||||
|
||||
return <Context.Provider value={createContext}>{props.children}</Context.Provider>;
|
||||
};
|
||||
90
src/styles/GlobalStyle.js
Normal file
90
src/styles/GlobalStyle.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
/** @format */
|
||||
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
export const GlobalStyle = createGlobalStyle`
|
||||
:root {
|
||||
/* Colors */
|
||||
--lavender: #d9d9f9;
|
||||
--lavenderlight: #f0f3ff;
|
||||
--lightblue: #2b2bde;
|
||||
--link: #0019f6;
|
||||
--nav: #fff;
|
||||
--cardbg: #151515;
|
||||
--Styledlinks: #394ae4;
|
||||
|
||||
--border: 1.5px solid #fff;
|
||||
--radius: 0.9rem;
|
||||
--card-radius: 15px 15px 0px 0px;
|
||||
--box-shadow: 0px 5px 29px -4px rgba(0, 0, 0, 0.25), inset 0px 1px 5px rgba(0, 0, 0, 0.25);
|
||||
|
||||
/* Font Weights */
|
||||
--regular: 400;
|
||||
--semi-medium: 500;
|
||||
--medium: 600;
|
||||
--semi-bold: 700;
|
||||
--bold: 800;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
max-height: 100vh;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(116.2deg, #d9e5fa -0.48%, #fad9f3 102.36%);
|
||||
text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
-moz-text-size-adjust: none;
|
||||
-ms-text-size-adjust: none;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline;
|
||||
}
|
||||
div,
|
||||
p {
|
||||
outline: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
li {
|
||||
/* display: inline-block; */
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
`;
|
||||
30
src/styles/mixins.js
Normal file
30
src/styles/mixins.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/** @format */
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { css } from 'styled-components';
|
||||
|
||||
export const Imagecontainer = styled.div`
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
`;
|
||||
|
||||
const breakpoints = {
|
||||
xs: '450px',
|
||||
sm: '550px',
|
||||
tab: '660px',
|
||||
md: '750px',
|
||||
lg: '900px',
|
||||
xl: '1100px',
|
||||
};
|
||||
|
||||
export const respondTo = Object.keys(breakpoints).reduce(
|
||||
(accumulator, label) => {
|
||||
accumulator[label] = (...args) => css`
|
||||
@media (min-width: ${breakpoints[label]}) {
|
||||
${css(...args)};
|
||||
}
|
||||
`;
|
||||
return accumulator;
|
||||
},
|
||||
{}
|
||||
);
|
||||
Loading…
Add table
Add a link
Reference in a new issue