116 |
117 | )
118 | }
119 |
--------------------------------------------------------------------------------
/frontend/public/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
55 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 |
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 |
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 |
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/frontend/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | )
20 |
21 | export default function register () {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
34 |
35 | if (!isLocalhost) {
36 | // Is not local host. Just register service worker
37 | registerValidSW(swUrl)
38 | } else {
39 | // This is running on localhost. Lets check if a service worker still exists or not.
40 | checkValidServiceWorker(swUrl)
41 | }
42 | })
43 | }
44 | }
45 |
46 | function registerValidSW (swUrl) {
47 | navigator.serviceWorker
48 | .register(swUrl)
49 | .then(registration => {
50 | registration.onupdatefound = () => {
51 | const installingWorker = registration.installing
52 | installingWorker.onstatechange = () => {
53 | if (installingWorker.state === 'installed') {
54 | if (navigator.serviceWorker.controller) {
55 | // At this point, the old content will have been purged and
56 | // the fresh content will have been added to the cache.
57 | // It's the perfect time to display a "New content is
58 | // available; please refresh." message in your web app.
59 | console.log('New content is available; please refresh.')
60 | } else {
61 | // At this point, everything has been precached.
62 | // It's the perfect time to display a
63 | // "Content is cached for offline use." message.
64 | console.log('Content is cached for offline use.')
65 | }
66 | }
67 | }
68 | }
69 | })
70 | .catch(error => {
71 | console.error('Error during service worker registration:', error)
72 | })
73 | }
74 |
75 | function checkValidServiceWorker (swUrl) {
76 | // Check if the service worker can be found. If it can't reload the page.
77 | fetch(swUrl)
78 | .then(response => {
79 | // Ensure service worker exists, and that we really are getting a JS file.
80 | if (
81 | response.status === 404 ||
82 | response.headers.get('content-type').indexOf('javascript') === -1
83 | ) {
84 | // No service worker found. Probably a different app. Reload the page.
85 | navigator.serviceWorker.ready.then(registration => {
86 | registration.unregister().then(() => {
87 | window.location.reload()
88 | })
89 | })
90 | } else {
91 | // Service worker found. Proceed as normal.
92 | registerValidSW(swUrl)
93 | }
94 | })
95 | .catch(() => {
96 | console.log(
97 | 'No internet connection found. App is running in offline mode.'
98 | )
99 | })
100 | }
101 |
102 | export function unregister () {
103 | if ('serviceWorker' in navigator) {
104 | navigator.serviceWorker.ready.then(registration => {
105 | registration.unregister()
106 | })
107 | }
108 | }
--------------------------------------------------------------------------------
/frontend/src/components/FileUploadField/index.js:
--------------------------------------------------------------------------------
1 | import React, {useCallback, useEffect, useState, useRef} from "react"
2 | import classnames from "classnames"
3 | import md5 from "md5"
4 | import {useSnackbar} from "notistack"
5 |
6 | import DroppedFile from "../DroppedFile"
7 | import ExternalFile from "../ExternalFile"
8 |
9 | import styles from "./index.module.scss"
10 |
11 | const getFileId = file =>
12 | md5(`${file.name}${file.size}${file.lastModified}${new Date().valueOf()}`)
13 |
14 | const FileUploadField = props => {
15 | const {
16 | onChange: onChangeProp,
17 | onFinish,
18 | value,
19 | accept,
20 | placeholder,
21 | name,
22 | className,
23 | classes = {},
24 | } = props
25 |
26 | const {enqueueSnackbar} = useSnackbar()
27 |
28 | const [showFullScreenDrop, setShowFullScreenDrop] = useState(false)
29 | const fullScreenDropRef = useRef(null)
30 |
31 | const onChange = useCallback(
32 | e => {
33 | const files = Array.from(e.target?.files || [])
34 | onChangeProp(
35 | files.map(file => {
36 | file.id = getFileId(file)
37 | return {
38 | type: "file",
39 | data: file,
40 | }
41 | })
42 | )
43 | },
44 | [onChangeProp]
45 | )
46 |
47 | useEffect(() => {
48 | const fullScreenDropEl = fullScreenDropRef.current
49 | let entered = false
50 |
51 | const processItems = items => {
52 | const result = []
53 | let isHtml = false
54 | for (let i = 0; i < items.length; i += 1) {
55 | const item = items[i]
56 | if (item.kind === "string" && item.type === "text/html") {
57 | isHtml = true
58 | item.getAsString(async htmlString => {
59 | try {
60 | const htmlDOM = new DOMParser().parseFromString(
61 | htmlString,
62 | "text/html"
63 | )
64 | const src =
65 | htmlDOM.getElementsByTagName("img")[0]?.src ||
66 | htmlDOM.getElementsByTagName("a")[0]?.href
67 | if (!src) return
68 | onChangeProp({
69 | type: "url",
70 | data: src,
71 | })
72 | } catch (err) {
73 | enqueueSnackbar({
74 | variant: "error",
75 | message: "Couldn't read the dropped file",
76 | })
77 | console.error(err)
78 | }
79 | })
80 | } else if (item.kind === "file" && !isHtml) {
81 | const file = item.getAsFile()
82 | if (/^image\/.+$/.test(file.type)) {
83 | file.id = getFileId(file)
84 | result.push({
85 | type: "file",
86 | data: file,
87 | })
88 | }
89 | }
90 | }
91 |
92 | if (result.length) onChangeProp(result)
93 | }
94 |
95 | const onDragEnter = e => {
96 | e.preventDefault()
97 | if (entered) return
98 | entered = true
99 | setShowFullScreenDrop(true)
100 | }
101 |
102 | const onDragLeave = e => {
103 | e.preventDefault()
104 | entered = false
105 | setShowFullScreenDrop(false)
106 | }
107 |
108 | const onDrop = e => {
109 | onDragLeave(e)
110 | processItems(e.dataTransfer.items)
111 | }
112 |
113 | const onPaste = e => {
114 | const items = (e.clipboardData || e.originalEvent.clipboardData)
115 | .items
116 | processItems(items)
117 | }
118 |
119 | document.addEventListener("paste", onPaste)
120 | window.addEventListener("dragover", onDragEnter)
121 | //window.addEventListener("drop", onDrop)
122 | //window.addEventListener("dragend", onDragLeave)
123 | fullScreenDropEl.addEventListener("dragleave", onDragLeave)
124 | fullScreenDropEl.addEventListener("dragend", onDragLeave)
125 | fullScreenDropEl.addEventListener("drop", onDrop)
126 |
127 | return () => {
128 | document.removeEventListener("paste", onPaste)
129 | window.removeEventListener("dragover", onDragEnter)
130 | //window.removeEventListener("drop", onDrop)
131 | //window.removeEventListener("dragend", onDragLeave)
132 | fullScreenDropEl.removeEventListener("dragleave", onDragLeave)
133 | fullScreenDropEl.removeEventListener("dragend", onDragLeave)
134 | fullScreenDropEl.removeEventListener("drop", onDrop)
135 | }
136 | }, [onChangeProp, enqueueSnackbar])
137 |
138 | return (
139 |
Deta Black Hole
2 |
3 | Your personal image hosting based on [Deta Space](https://deta.space/) 🚀
4 |
5 | 
6 |
7 | ## Latest release
8 |
9 | [
](https://alpha.deta.space/discovery/@mikhailsdv/black_hole-3kf)
10 |
11 | ## Feedback
12 |
13 | If something goes wrong please [open an issues](https://github.com/mikhailsdv/deta-black-hole/issues/new). You can also PM me on Telegram [@mikhailsdv](https://t.me/mikhailsdv).
14 |
--------------------------------------------------------------------------------
/frontend/src/components/BottomPanel/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/variables.scss";
2 |
3 | .root {
4 | position: fixed;
5 | bottom: 0;
6 | z-index: 8;
7 | width: 100%;
8 | transform: translateY(100%);
9 | transition: $transition;
10 | &.visible {
11 | transform: translateY(0);
12 | }
13 |
14 | .container {
15 | position: relative;
16 |
17 | .panel {
18 | position: relative;
19 | padding: 8px;
20 | width: 100%;
21 | border-top-right-radius: 12px;
22 | border-top-left-radius: 12px;
23 | background-color: $block-placeholder-color;
24 | box-shadow: 0 -1px 5px -1px rgba(0, 0, 0, .4);
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useURLParams.js:
--------------------------------------------------------------------------------
1 | import {useMemo} from "react"
2 | import {useLocation} from "react-router-dom"
3 |
4 | export default function useURLParams({parseNumeric = false} = {}) {
5 | const location = useLocation()
6 |
7 | const params = useMemo(() => {
8 | const result = {}
9 | const urlParams = new URLSearchParams(location.search)
10 | for (const [key, value] of urlParams.entries()) {
11 | if (parseNumeric) {
12 | result[key] = /^\d+$/.test(value) ? Number(value) : value
13 | } else {
14 | result[key] = value
15 | }
16 | }
17 | return result
18 | }, [location.search, parseNumeric])
19 |
20 | return params
21 | }
22 |
--------------------------------------------------------------------------------
/frontend/src/components/CheckboxLabel/index.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import classnames from "classnames"
3 |
4 | import FormControlLabel from "@mui/material/FormControlLabel"
5 | import Checkbox from "@mui/material/Checkbox"
6 |
7 | import styles from "./index.module.scss"
8 |
9 | export default function CheckboxLabel(props) {
10 | const {label, checked, onChange, className, ...rest} = props
11 |
12 | return (
13 |