Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-19 10:29:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1305 from Stremio/refactor/file-drop-webkitgtk-support

Browse source 
Add file drop support for webkitgtk
This commit is contained in:
Tim 2026-06-15 11:40:11 +02:00 committed by GitHub
commit d509c5b4bd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 49 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/common/FileDrop/FileDrop.tsx
View file

@ -1,4 +1,4 @@
import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
import React, { ChangeEvent, createContext, useContext, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { isFileType, isFileTypeSupported } from './utils';
import styles from './styles.less';
@ -21,15 +21,6 @@ const FileDropProvider = ({ children }: Props) => {
const listeners = useRef<[FileType, FileDropListener][]>([]);
const [active, setActive] = useState(false);
const onDragOver = (event: DragEvent) => {
event.preventDefault();
setActive(true);
};
const onDragLeave = () => {
setActive(false);
};
const on = (type: FileType, listener: FileDropListener) => {
listeners.current = [...listeners.current, [type, listener]];
};
@ -38,45 +29,63 @@ const FileDropProvider = ({ children }: Props) => {
listeners.current = listeners.current.filter(([key, value]) => key !== type && value !== listener);
};
const onChange = (event: ChangeEvent) => {
event.preventDefault();
const input = event.target as HTMLInputElement;
if (input.files && input.files.length > 0) {
const file = input.files[0];
file
.arrayBuffer()
.then((buffer) => {
listeners.current
.filter(([type]) => type === '*')
.forEach(([, listener]) => listener(file, buffer, isFileTypeSupported(buffer)));
listeners.current
.filter(([type]) => type !== '*' && (file.type ? type === file.type : isFileType(buffer, type)))
.forEach(([, listener]) => listener(file, buffer, true));
})
.catch(console.error);
}
setActive(false);
input.files = new DataTransfer().files;
};
useEffect(() => {
const onDrop = (event: DragEvent) => {
const onDragStart = (event: DragEvent) => {
event.preventDefault();
const { dataTransfer } = event;
};
if (dataTransfer && dataTransfer?.files.length > 0) {
const file = dataTransfer.files[0];
file
.arrayBuffer()
.then((buffer) => {
listeners.current
.filter(([type]) => type === '*')
.forEach(([, listener]) => listener(file, buffer, isFileTypeSupported(buffer)));
listeners.current
.filter(([type]) => type !== '*' && (file.type ? type === file.type : isFileType(buffer, type)))
.forEach(([, listener]) => listener(file, buffer, true));
})
.catch(console.error);
}
const onDragOver = (event: DragEvent) => {
event.preventDefault();
setActive(true);
};
const onDragLeave = (event: DragEvent) => {
event.preventDefault();
setActive(false);
};
window.addEventListener('dragstart', onDragStart);
window.addEventListener('dragover', onDragOver);
window.addEventListener('dragleave', onDragLeave);
window.addEventListener('drop', onDrop);
return () => {
window.removeEventListener('dragstart', onDragStart);
window.removeEventListener('dragover', onDragOver);
window.removeEventListener('dragleave', onDragLeave);
window.removeEventListener('drop', onDrop);
};
}, []);
return (
<FileDropContext.Provider value={{ on, off }}>
{ children }
<div className={classNames(styles['file-drop-container'], { 'active': active })} />
<div className={classNames(styles['file-drop-container'], { 'active': active })}>
<input type={'file'} className={styles['file-input']} onChange={onChange} />
</div>
</FileDropContext.Provider>
);
};

10
src/common/FileDrop/styles.less
View file

@ -10,6 +10,16 @@
transition: border-color 0.25s ease-out;
&:global(.active) {
pointer-events: auto;
border-color: var(--primary-accent-color);
}
.file-input {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
}