Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

new viewed sys #94

Merged
merged 5 commits into from
Aug 19, 2022
Merged

new viewed sys #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f429a9
new viewed sys
RobzLegz Aug 19, 2022
e691a5e
remove IMAGE PREVIEW ON HOVER
RobzLegz Aug 19, 2022
1c516bd
checks
RobzLegz Aug 19, 2022
a087435
host
RobzLegz Aug 19, 2022
fcd1eb8
no top
RobzLegz Aug 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions frontend/pages/404.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,8 @@ export default function FourOhFour() {
return (
<div className="page">
<Head>
<title>kidala upload</title>
<meta
name="description"
content="Keep calm and be kidala 👑"
/>
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3564006936877547"
crossOrigin="anonymous"
></script>
<link rel="icon" href="/favicon.ico" />
<title>Kidala upload</title>
<meta name="description" content="Keep calm and be kidala 👑" />
</Head>

<FourOhFourContainer />
Expand Down
16 changes: 16 additions & 0 deletions frontend/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
return (
<Html lang="en">
<Head>
<link rel="icon" href="/favicon.ico" />
</Head>

<body>
<Main />
<NextScript />
</body>
</Html>
);
}
13 changes: 2 additions & 11 deletions frontend/pages/admin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,8 @@ export default function Home() {
return (
<div className="page">
<Head>
<title>kidala upload</title>
<meta
name="description"
content="kidala file hosting services"
/>
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3564006936877547"
crossOrigin="anonymous"
></script>
<link rel="icon" href="/favicon.ico" />
<title>Kidala upload | Admin</title>
<meta name="description" content="Kidala admin panel" />
</Head>

<AdminContainer />
Expand Down
5 changes: 2 additions & 3 deletions frontend/pages/gallery/[hash].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,15 @@ export default function Home() {
return (
<div className="page">
<Head>
<title>Kidala upload | Share file</title>
<title>Kidala upload | File</title>
<meta
content="/images/janisbataragsuzliso.png"
property="og:image"
/>
<meta
name="description"
content="Kidala life. Max kidala. Safe pacans. 🔥 stafaars. Max safe pacani utt. Only at kidala-upload.vercel.app. Kidala hosting services. 🌐🤙🏿🅿😱 KEEP CALM AND BE KIDALA"
content="View uploaded file 🔥 stafaars, max safe pacani only at kidala.life"
/>
<link rel="icon" href="/favicon.ico" />
</Head>

<SingleFileContainer />
Expand Down
8 changes: 1 addition & 7 deletions frontend/pages/gallery/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,8 @@ export default function Home() {
<title>Kidala upload | Files</title>
<meta
name="description"
content="Kidala life. Max kidala. Safe pacans 🔥 stafaars. Max safe pacani utt. Only at kidala-upload.vercel.app. Kidala hosting services. 🌐🤙🏿🅿😱"
content="Kidala life. Max kidala. Safe pacans 🔥 stafaars. Max safe pacani utt. Only at kidala.life"
/>
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3564006936877547"
crossOrigin="anonymous"
></script>
<link rel="icon" href="/favicon.ico" />
</Head>

<GalleryContainer />
Expand Down
7 changes: 0 additions & 7 deletions frontend/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import Head from 'next/head';
import HomePage from '../src/components/home/HomePage';
import Footer from '../src/components/navigation/Footer';

export default function Home() {
return (
Expand All @@ -11,12 +10,6 @@ export default function Home() {
name="description"
content="kidala file hosting services"
/>
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3564006936877547"
crossOrigin="anonymous"
></script>
<link rel="icon" href="/favicon.ico" />
</Head>

<HomePage />
Expand Down
7 changes: 7 additions & 0 deletions frontend/robots.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
User-agent: googlebot
Disallow: /admin/
Noindex: /admin/
Disallow: /api/
Noindex: /api/
Disallow: /images/
Noindex: /images/
102 changes: 70 additions & 32 deletions frontend/src/components/gallery/GalleryImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,86 @@ import { DocumentIcon } from '@heroicons/react/solid';
import Image from 'next/image';
import { useRouter } from 'next/router';
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { FileInterface } from '../../interfaces/file';
import { AppInfo, selectApp } from '../../redux/slices/appSlice';
import { AppInfo, selectApp, setPreviewIdx } from '../../redux/slices/appSlice';
import { BASE_URL } from '../../requests/routes';
import useWindowSize from '../hooks/useWindowSize';

const GalleryImage: React.FC<{ file: FileInterface; index: number }> = ({
file,
index,
}) => {
const GalleryImage: React.FC<{
file: FileInterface;
index: number;
isSeen: boolean;
}> = ({ file, index, isSeen }) => {
const windowSize = useWindowSize();
const router = useRouter();
const dispatch = useDispatch();

const appInfo: AppInfo = useSelector(selectApp);

const [isLeft, setIsLeft] = useState(true);
const [isTop, setIsTop] = useState(true);
const [isTop, setIsTop] = useState<boolean | null>(true);

const viewFile = () => {
if (appInfo.files && index + 1 >= appInfo.files.length) {
dispatch(setPreviewIdx(null));
} else {
dispatch(setPreviewIdx(index));
}
router.push(`/gallery/${file.hash}`);
};

const checkPosition = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
const { width, height } = windowSize;

if (width) {
if (e.clientX > width / 2) {
setIsLeft(false);
} else {
setIsLeft(true);
}

if (height && appInfo.files) {
let imgIdx = index + 1;
const fileLen = appInfo.files.length;
let fileLen = appInfo.files.length;

let colCount = 0;

const colSize5 = 640;
const colSize7 = 768;
const colSize10 = 1024;

if(width >= colSize10){
imgIdx += 30;
}else if(width >= colSize7){
imgIdx += 14;
}else if(width >= colSize5){
imgIdx += 10;
if (width >= colSize10) {
colCount = 20;
} else if (width >= colSize7) {
colCount = 14;
} else if (width >= colSize5) {
colCount = 10;
}

if(imgIdx >= fileLen){
setIsTop(false);
if (!isSeen) {
if (appInfo.previewIdx) {
imgIdx -= appInfo.previewIdx;
fileLen -= appInfo.previewIdx;
}

if (fileLen < colCount) {
setIsTop(null);
return;
}

if (imgIdx <= colCount + 1) {
setIsTop(true);
return;
}

if (imgIdx + colCount >= fileLen) {
setIsTop(false);
} else {
setIsTop(true);
}
} else {
setIsTop(null);
}
}
}
Expand All @@ -63,7 +99,7 @@ const GalleryImage: React.FC<{ file: FileInterface; index: number }> = ({
return (
<div
className="w-full h-full flex items-center justify-center group relative cursor-pointer"
onClick={() => router.push(`/gallery/${file.hash}`)}
onClick={viewFile}
onMouseOver={checkPosition}
>
<div className="w-[200px] h-[200px] max-w-full max-h-full relative flex flex-col items-center justify-center">
Expand All @@ -86,7 +122,7 @@ const GalleryImage: React.FC<{ file: FileInterface; index: number }> = ({
return (
<div
className="w-full h-full flex items-center justify-center group relative cursor-pointer"
onClick={() => router.push(`/gallery/${file.hash}`)}
onClick={viewFile}
onMouseOver={checkPosition}
>
<div className="w-[200px] h-[200px] max-w-full max-h-full relative">
Expand All @@ -105,21 +141,23 @@ const GalleryImage: React.FC<{ file: FileInterface; index: number }> = ({
}`}
/>

<div
className={`hidden sm:group-hover:flex absolute lg:w-[600px] z-10 ${
isLeft ? 'left-0 justify-start' : 'right-0 justify-end'
} ${isTop ? 'top-0' : 'bottom-0'}`}
>
<div className="max-w-full max-h-full w-96 h-96 2xl:w-[600px] 2xl:h-[600px] relative ">
<Image
src={`${BASE_URL}/${file.hash}`}
alt={file.name}
draggable={false}
objectFit="cover"
layout="fill"
/>
{isTop !== null ? (
<div
className={`hidden sm:group-hover:flex absolute lg:w-[600px] z-10 ${
isLeft ? 'left-0 justify-start' : 'right-0 justify-end'
} ${isTop ? 'top-0' : 'bottom-0'}`}
>
<div className="max-w-full max-h-full w-96 h-96 2xl:w-[600px] 2xl:h-[600px] relative ">
<Image
src={`${BASE_URL}/${file.hash}`}
alt={file.name}
draggable={false}
objectFit="cover"
layout="fill"
/>
</div>
</div>
</div>
) : null}
</div>
);
};
Expand Down
51 changes: 45 additions & 6 deletions frontend/src/components/gallery/GalleryImages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,51 @@ function GalleryImages() {
}, []);

return (
<div className="mt-2 grid grid-cols-3 place-content-center w-full overflow-hidden sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-10 gap-2">
{appInfo.files &&
appInfo.files.map(
(file, i) =>
file && <GalleryImage file={file} index={i} key={i} />
)}
<div className="">
<div className="mt-2 grid grid-cols-3 place-content-center w-full overflow-hidden sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-10 gap-2">
{appInfo.files &&
appInfo.files.map((file, i) => {
if (appInfo.previewIdx && i <= appInfo.previewIdx) {
return null;
}

return (
<GalleryImage
file={file}
index={i}
isSeen={false}
key={i}
/>
);
})}
</div>

{appInfo.previewIdx &&
appInfo.files &&
appInfo.files.length !== appInfo.previewIdx + 1 ? (
<div className="flex w-full items-center justify-start py-2 border-b-2 border-dashed border-white">
<strong className="text-white">Seen:</strong>
</div>
) : null}

<div className="mt-2 grid grid-cols-3 place-content-center w-full overflow-hidden sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-10 gap-2">
{appInfo.files &&
appInfo.previewIdx &&
appInfo.files.map((file, i) => {
if (appInfo.previewIdx && i > appInfo.previewIdx) {
return null;
}

return (
<GalleryImage
file={file}
index={i}
isSeen={true}
key={i}
/>
);
})}
</div>
</div>
);
}
Expand Down
19 changes: 17 additions & 2 deletions frontend/src/redux/slices/appSlice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { shuffle } from '../../utils/shuffleArray';

export interface AppInfo {
files: FileInterface[] | null;
previewIdx: number | null;
}

const initialState: AppInfo = {
files: null,
previewIdx: null,
};

export const appSlice = createSlice({
Expand Down Expand Up @@ -74,13 +76,26 @@ export const appSlice = createSlice({
files: newfiles,
};

return state;
},
setPreviewIdx: (state, action) => {
state = {
...state,
previewIdx: action.payload,
};

return state;
},
},
});

export const { setFiles, addNewFile, updateFileRdx, deleteFileRdx } =
appSlice.actions;
export const {
setFiles,
addNewFile,
updateFileRdx,
deleteFileRdx,
setPreviewIdx,
} = appSlice.actions;

export const selectApp = (state: any) => state.app;

Expand Down