BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

added background removal

Browse Source
This commit is contained in:
SethBurkart123
2023-10-20 07:09:38 +11:00
parent 7525a9041e
commit 310ff7a281
2 changed files with 67 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
interface/src/pages/Themes.tsx
+60 -50
View File
@@ -88,70 +88,80 @@ const Themes: FC = () => {
setBackgrounds(prev => prev.filter(bg => bg.id !== fileId)); setBackgrounds(prev => prev.filter(bg => bg.id !== fileId));
}; };
const selectNoBackground = (): void => {
setSelectedBackground(null);
localStorage.removeItem('selectedBackground');
};
useEffect(() => { useEffect(() => {
loadBackgrounds(); loadBackgrounds();
}, []); }, []);
return ( return (
<div> <div>
<button className="absolute top-0 right-0 p-2 text-lg text-blue-500" onClick={() => setIsEditMode(!isEditMode)}> <button className="p-2 my-4 text-white bg-red-600 rounded" onClick={() => selectNoBackground()}>
No Background
</button>
<div className="relative">
<button className="absolute top-0 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
{isEditMode ? 'Done' : 'Edit'} {isEditMode ? 'Done' : 'Edit'}
</button> </button>
<h2 className="py-2 text-lg font-bold">Images</h2> <h2 className="pb-2 text-lg font-bold">Images</h2>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{/* Image uploader swatch */} {/* Image uploader swatch */}
<div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900"> <div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900">
<div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500"> <div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
{/* Plus icon */} {/* Plus icon */}
</div>
<input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
</div> </div>
<input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" /> {backgrounds.filter(bg => bg.type === 'image').map(bg => (
<div key={bg.id}
onClick={() => selectBackground(bg.id)}
className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring ring-white ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'ring-2' : 'ring-0'}`}>
{isEditMode && (
<div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
onClick={() => deleteBackground(bg.id)}>
<div className="w-4 h-0.5 bg-white"></div>
</div>
)}
<img className="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
</div>
))}
</div> </div>
{backgrounds.filter(bg => bg.type === 'image').map(bg => (
<div key={bg.id}
onClick={() => selectBackground(bg.id)}
className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring ring-white ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'ring-2' : 'ring-0'}`}>
{isEditMode && (
<div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
onClick={() => deleteBackground(bg.id)}>
<div className="w-4 h-0.5 bg-white"></div>
</div>
)}
<img className="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
</div>
))}
</div>
<h2 className="py-2 text-lg font-bold">Videos</h2> <h2 className="py-2 text-lg font-bold">Videos</h2>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{/* Video uploader swatch */} {/* Video uploader swatch */}
<div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900"> <div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900">
<div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500"> <div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
{/* Plus icon */} {/* Plus icon */}
</div>
<input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
</div> </div>
<input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" /> {backgrounds.filter(bg => bg.type === 'video').map(bg => (
<div key={bg.id} onClick={() => selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring ring-white ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'ring-2' : 'ring-0'}`}>
{isEditMode && (
<div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
onClick={() => deleteBackground(bg.id)}>
<div className="w-4 h-0.5 bg-white"></div>
</div>
)}
<video muted loop autoPlay src={bg.url} className="object-cover w-full h-full rounded-xl" />
</div>
))}
</div> </div>
{backgrounds.filter(bg => bg.type === 'video').map(bg => (
<div key={bg.id} onClick={() => selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring ring-white ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'ring-2' : 'ring-0'}`}>
{isEditMode && (
<div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
onClick={() => deleteBackground(bg.id)}>
<div className="w-4 h-0.5 bg-white"></div>
</div>
)}
<video muted loop autoPlay src={bg.url} className="object-cover w-full h-full rounded-xl" />
</div>
))}
</div>
{ /* Preview section */ } { /* Preview section */ }
<div className="hidden"> <div className="hidden">
{backgrounds.filter(bg => bg.id === selectedBackground).map(bg => ( {backgrounds.filter(bg => bg.id === selectedBackground).map(bg => (
bg.type === 'image' ? bg.type === 'image' ?
<img key={bg.id} src={URL.createObjectURL(bg.blob)} alt="Selected Background" /> : <img key={bg.id} src={URL.createObjectURL(bg.blob)} alt="Selected Background" /> :
<video key={bg.id} src={URL.createObjectURL(bg.blob)} autoPlay loop muted /> <video key={bg.id} src={URL.createObjectURL(bg.blob)} autoPlay loop muted />
))} ))}
</div>
</div> </div>
</div> </div>
); );
public/backgrounds/background.js
+6
View File
@@ -37,6 +37,12 @@ const updateBackground = async () => {
const data = await readData(); const data = await readData();
if (!data) { if (!data) {
console.log("No data found in IndexedDB."); console.log("No data found in IndexedDB.");
const container = document.getElementById("media-container");
const currentMedia = container.querySelector(".current-media");
if (currentMedia) {
currentMedia.remove();
}
return; return;
} }