mirror of
https://github.com/Vendicated/Vencord.git
synced 2024-09-20 06:30:35 +00:00
Merge efb2e07fb6
into 8afd79dd50
This commit is contained in:
commit
4efb893fe4
18 changed files with 1108 additions and 0 deletions
8
src/plugins/remix/README.md
Normal file
8
src/plugins/remix/README.md
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
# Remix
|
||||||
|
Adds Remix from mobile to desktop cause discord is lazy
|
||||||
|
|
||||||
|
Right click any image and press "Remix" and do whatever, or press the + in the message bar and upload your own file
|
||||||
|
|
||||||
|
![Remix UI](https://github.com/Vendicated/Vencord/assets/84212701/ce212de8-9ea3-4f1a-9533-ca116e21c90c)
|
||||||
|
|
||||||
|
https://github.com/MrDiamondDog/Vencord/assets/84212701/ed3f7bf5-73dd-450c-a831-d68909bc3f26
|
54
src/plugins/remix/RemixModal.tsx
Normal file
54
src/plugins/remix/RemixModal.tsx
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
|
||||||
|
import { Button, Text } from "@webpack/common";
|
||||||
|
|
||||||
|
import { sendRemix } from ".";
|
||||||
|
import { brushCanvas, canvas, cropCanvas, ctx, exportImg, shapeCanvas } from "./editor/components/Canvas";
|
||||||
|
import { Editor } from "./editor/Editor";
|
||||||
|
import { resetBounds } from "./editor/tools/crop";
|
||||||
|
import { SendIcon } from "./icons/SendIcon";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
modalProps: ModalProps;
|
||||||
|
close: () => void;
|
||||||
|
url?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
resetBounds();
|
||||||
|
|
||||||
|
if (!ctx || !canvas) return;
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
brushCanvas.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
shapeCanvas.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
cropCanvas.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function closeModal(closeFunc: () => void, save?: boolean) {
|
||||||
|
if (save) sendRemix(await exportImg());
|
||||||
|
reset();
|
||||||
|
closeFunc();
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RemixModal({ modalProps, close, url }: Props) {
|
||||||
|
return (
|
||||||
|
<ModalRoot {...modalProps} size={ModalSize.LARGE}>
|
||||||
|
<ModalHeader>
|
||||||
|
<Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Remix</Text>
|
||||||
|
<ModalCloseButton onClick={() => closeModal(close)} />
|
||||||
|
</ModalHeader>
|
||||||
|
<ModalContent>
|
||||||
|
<Editor url={url} />
|
||||||
|
</ModalContent>
|
||||||
|
<ModalFooter className="vc-remix-modal-footer">
|
||||||
|
<Button onClick={() => closeModal(close, true)} className="vc-remix-send"><SendIcon /> Send</Button>
|
||||||
|
<Button onClick={() => closeModal(close)} color={Button.Colors.RED}>Close</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalRoot>
|
||||||
|
);
|
||||||
|
}
|
44
src/plugins/remix/editor/Editor.tsx
Normal file
44
src/plugins/remix/editor/Editor.tsx
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { findComponentByCodeLazy } from "@webpack";
|
||||||
|
import { useEffect, useState } from "@webpack/common";
|
||||||
|
|
||||||
|
import { Canvas } from "./components/Canvas";
|
||||||
|
import { Toolbar } from "./components/Toolbar";
|
||||||
|
import { imageToBlob, urlToImage } from "./utils/canvas";
|
||||||
|
|
||||||
|
const FileUpload = findComponentByCodeLazy("fileUploadInput,");
|
||||||
|
|
||||||
|
export const Editor = (props: { url?: string; }) => {
|
||||||
|
const [file, setFile] = useState<File | undefined>(undefined);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!props.url) return;
|
||||||
|
|
||||||
|
urlToImage(props.url).then(img => {
|
||||||
|
imageToBlob(img).then(blob => {
|
||||||
|
setFile(new File([blob], "remix.png"));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="vc-remix-editor">
|
||||||
|
{!file && <FileUpload
|
||||||
|
filename={undefined}
|
||||||
|
placeholder="Choose an image"
|
||||||
|
buttonText="Browse"
|
||||||
|
filters={[{ name: "Image", extensions: ["png", "jpeg"] }]}
|
||||||
|
onFileSelect={(file: File) => setFile(file)}
|
||||||
|
/>}
|
||||||
|
{file && (<>
|
||||||
|
<Toolbar />
|
||||||
|
<Canvas file={file!} />
|
||||||
|
</>)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
82
src/plugins/remix/editor/components/Canvas.tsx
Normal file
82
src/plugins/remix/editor/components/Canvas.tsx
Normal file
|
@ -0,0 +1,82 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useEffect, useRef } from "@webpack/common";
|
||||||
|
|
||||||
|
import { initInput } from "../input";
|
||||||
|
import { bounds } from "../tools/crop";
|
||||||
|
import { heightFromBounds, widthFromBounds } from "../utils/canvas";
|
||||||
|
|
||||||
|
export let canvas: HTMLCanvasElement | null = null;
|
||||||
|
export let ctx: CanvasRenderingContext2D | null = null;
|
||||||
|
|
||||||
|
export const brushCanvas = document.createElement("canvas")!.getContext("2d")!;
|
||||||
|
export const shapeCanvas = document.createElement("canvas")!.getContext("2d")!;
|
||||||
|
export const cropCanvas = document.createElement("canvas")!.getContext("2d")!;
|
||||||
|
|
||||||
|
export let image: HTMLImageElement;
|
||||||
|
|
||||||
|
export function exportImg(): Promise<Blob> {
|
||||||
|
return new Promise<Blob>(resolve => {
|
||||||
|
if (!canvas || !ctx) return;
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.drawImage(image, 0, 0);
|
||||||
|
ctx.drawImage(brushCanvas.canvas, 0, 0);
|
||||||
|
|
||||||
|
if (bounds.right === -1) bounds.right = canvas.width;
|
||||||
|
if (bounds.bottom === -1) bounds.bottom = canvas.height;
|
||||||
|
|
||||||
|
const renderCanvas = document.createElement("canvas");
|
||||||
|
renderCanvas.width = widthFromBounds(bounds);
|
||||||
|
renderCanvas.height = heightFromBounds(bounds);
|
||||||
|
|
||||||
|
const renderCtx = renderCanvas.getContext("2d")!;
|
||||||
|
renderCtx.drawImage(canvas, -bounds.left, -bounds.top);
|
||||||
|
renderCanvas.toBlob(blob => resolve(blob!));
|
||||||
|
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Canvas = ({ file }: { file: File; }) => {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
image = new Image();
|
||||||
|
image.src = URL.createObjectURL(file);
|
||||||
|
image.onload = () => {
|
||||||
|
canvas = canvasRef.current;
|
||||||
|
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
canvas.width = image.width;
|
||||||
|
canvas.height = image.height;
|
||||||
|
brushCanvas.canvas.width = image.width;
|
||||||
|
brushCanvas.canvas.height = image.height;
|
||||||
|
shapeCanvas.canvas.width = image.width;
|
||||||
|
shapeCanvas.canvas.height = image.height;
|
||||||
|
cropCanvas.canvas.width = image.width;
|
||||||
|
cropCanvas.canvas.height = image.height;
|
||||||
|
|
||||||
|
ctx = canvas.getContext("2d")!;
|
||||||
|
ctx.drawImage(image, 0, 0);
|
||||||
|
|
||||||
|
initInput();
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (<canvas ref={canvasRef} className="vc-remix-canvas"></canvas>);
|
||||||
|
};
|
||||||
|
|
||||||
|
export function render() {
|
||||||
|
if (!ctx || !canvas) return;
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.drawImage(image, 0, 0);
|
||||||
|
ctx.drawImage(brushCanvas.canvas, 0, 0);
|
||||||
|
ctx.drawImage(shapeCanvas.canvas, 0, 0);
|
||||||
|
ctx.drawImage(cropCanvas.canvas, 0, 0);
|
||||||
|
}
|
|
@ -0,0 +1,52 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2023 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
// brutally ripped out of usercss
|
||||||
|
// (remove when usercss is merged)
|
||||||
|
|
||||||
|
import "./colorStyles.css";
|
||||||
|
|
||||||
|
import { classNameFactory } from "@api/Styles";
|
||||||
|
import { findComponentByCodeLazy } from "@webpack";
|
||||||
|
import { Forms } from "@webpack/common";
|
||||||
|
|
||||||
|
interface ColorPickerProps {
|
||||||
|
color: number | null;
|
||||||
|
showEyeDropper?: boolean;
|
||||||
|
onChange(value: number | null): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ColorPicker = findComponentByCodeLazy<ColorPickerProps>(".BACKGROUND_PRIMARY).hex");
|
||||||
|
|
||||||
|
const cl = classNameFactory("vc-remix-settings-color-");
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
name: string;
|
||||||
|
color: number;
|
||||||
|
onChange(value: string): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hexToColorString(color: number): string {
|
||||||
|
return `#${color.toString(16).padStart(6, "0")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SettingColorComponent({ name, onChange, color }: Props) {
|
||||||
|
function handleChange(newColor: number) {
|
||||||
|
onChange(hexToColorString(newColor));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Forms.FormSection>
|
||||||
|
<div className={cl("swatch-row")}>
|
||||||
|
<ColorPicker
|
||||||
|
key={name}
|
||||||
|
color={color}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Forms.FormSection>
|
||||||
|
);
|
||||||
|
}
|
141
src/plugins/remix/editor/components/Toolbar.tsx
Normal file
141
src/plugins/remix/editor/components/Toolbar.tsx
Normal file
|
@ -0,0 +1,141 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Switch } from "@components/Switch";
|
||||||
|
import { Button, Forms, Select, Slider, useEffect, useState } from "@webpack/common";
|
||||||
|
|
||||||
|
import { BrushTool } from "../tools/brush";
|
||||||
|
import { CropTool, resetBounds } from "../tools/crop";
|
||||||
|
import { EraseTool } from "../tools/eraser";
|
||||||
|
import { currentShape, setShape, setShapeFill, Shape, ShapeTool } from "../tools/shape";
|
||||||
|
import { brushCanvas, canvas, cropCanvas, render, shapeCanvas } from "./Canvas";
|
||||||
|
import { SettingColorComponent } from "./SettingColorComponent";
|
||||||
|
|
||||||
|
export type Tool = "none" | "brush" | "erase" | "crop" | "shape";
|
||||||
|
|
||||||
|
export type ToolDefinition = {
|
||||||
|
selected: () => void;
|
||||||
|
unselected: () => void;
|
||||||
|
[key: string]: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const tools: Record<Tool, ToolDefinition | undefined> = {
|
||||||
|
none: undefined,
|
||||||
|
brush: BrushTool,
|
||||||
|
erase: EraseTool,
|
||||||
|
crop: CropTool,
|
||||||
|
shape: ShapeTool,
|
||||||
|
};
|
||||||
|
|
||||||
|
export let currentTool: Tool = "none";
|
||||||
|
export let currentColor = "#ff0000";
|
||||||
|
export let currentSize = 20;
|
||||||
|
export let currentFill = false;
|
||||||
|
|
||||||
|
function colorStringToHex(color: string): number {
|
||||||
|
return parseInt(color.replace("#", ""), 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Toolbar = () => {
|
||||||
|
const [tool, setTool] = useState<Tool>(currentTool);
|
||||||
|
const [color, setColor] = useState(currentColor);
|
||||||
|
const [size, setSize] = useState(currentSize);
|
||||||
|
const [fill, setFill] = useState(currentFill);
|
||||||
|
|
||||||
|
function changeTool(newTool: Tool) {
|
||||||
|
const oldTool = tool;
|
||||||
|
|
||||||
|
setTool(newTool);
|
||||||
|
onChangeTool(oldTool, newTool);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onChangeTool(old: Tool, newTool: Tool) {
|
||||||
|
tools[old]?.unselected();
|
||||||
|
tools[newTool]?.selected();
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
currentTool = tool;
|
||||||
|
currentColor = color;
|
||||||
|
currentSize = size;
|
||||||
|
currentFill = fill;
|
||||||
|
|
||||||
|
brushCanvas.fillStyle = color;
|
||||||
|
shapeCanvas.fillStyle = color;
|
||||||
|
|
||||||
|
brushCanvas.strokeStyle = color;
|
||||||
|
shapeCanvas.strokeStyle = color;
|
||||||
|
|
||||||
|
brushCanvas.lineWidth = size;
|
||||||
|
shapeCanvas.lineWidth = size;
|
||||||
|
|
||||||
|
brushCanvas.lineCap = "round";
|
||||||
|
brushCanvas.lineJoin = "round";
|
||||||
|
|
||||||
|
setShapeFill(currentFill);
|
||||||
|
}, [tool, color, size, fill]);
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
brushCanvas.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
shapeCanvas.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
resetBounds();
|
||||||
|
if (tool !== "crop") cropCanvas.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="vc-remix-toolbar">
|
||||||
|
<div className="vc-remix-tools">
|
||||||
|
<Button className={(tool === "brush" ? "tool-active" : "")} onClick={() => changeTool("brush")}>Brush</Button>
|
||||||
|
<Button className={(tool === "erase" ? "tool-active" : "")} onClick={() => changeTool("erase")}>Erase</Button>
|
||||||
|
<Button className={(tool === "crop" ? "tool-active" : "")} onClick={() => changeTool("crop")}>Crop</Button>
|
||||||
|
<Button className={(tool === "shape" ? "tool-active" : "")} onClick={() => changeTool("shape")}>Shape</Button>
|
||||||
|
</div>
|
||||||
|
<div className="vc-remix-settings">
|
||||||
|
<div className="vc-remix-setting-section">
|
||||||
|
{(tool === "brush" || tool === "shape") &&
|
||||||
|
<SettingColorComponent name="vc-remix-color-picker" onChange={setColor} color={colorStringToHex(color)} />
|
||||||
|
}
|
||||||
|
|
||||||
|
{(tool === "brush" || tool === "erase" || tool === "shape") &&
|
||||||
|
<Slider
|
||||||
|
minValue={1}
|
||||||
|
maxValue={500}
|
||||||
|
initialValue={size}
|
||||||
|
onValueChange={setSize}
|
||||||
|
markers={[1, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500]}
|
||||||
|
hideBubble
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
{(tool === "crop") && <Button onClick={resetBounds}>Reset</Button>}
|
||||||
|
<div className="vc-remix-setting-section">
|
||||||
|
{(tool === "shape") && (<>
|
||||||
|
<Select
|
||||||
|
select={setShape}
|
||||||
|
isSelected={v => v === currentShape}
|
||||||
|
serialize={v => String(v)}
|
||||||
|
placeholder="Shape"
|
||||||
|
options={
|
||||||
|
["Rectangle", "Ellipse", "Line", "Arrow"].map(v => ({
|
||||||
|
label: v,
|
||||||
|
value: v.toLowerCase() as Shape,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Forms.FormText className="vc-remix-setting-switch">Fill <Switch checked={fill} onChange={setFill} /></Forms.FormText>
|
||||||
|
</>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="vc-remix-misc">
|
||||||
|
<Button onClick={clear}>Clear</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
19
src/plugins/remix/editor/components/colorStyles.css
Normal file
19
src/plugins/remix/editor/components/colorStyles.css
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
.vc-remix-settings-color-swatch-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-remix-settings-color-swatch-row > span {
|
||||||
|
display: block;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: var(--header-primary);
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
57
src/plugins/remix/editor/input.ts
Normal file
57
src/plugins/remix/editor/input.ts
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { canvas } from "./components/Canvas";
|
||||||
|
import { EventEmitter } from "./utils/eventEmitter";
|
||||||
|
|
||||||
|
export const Mouse = {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
down: false,
|
||||||
|
dx: 0,
|
||||||
|
dy: 0,
|
||||||
|
prevX: 0,
|
||||||
|
prevY: 0,
|
||||||
|
event: new EventEmitter<MouseEvent>()
|
||||||
|
};
|
||||||
|
|
||||||
|
export function initInput() {
|
||||||
|
if (!canvas) return;
|
||||||
|
canvas.addEventListener("mousemove", e => {
|
||||||
|
Mouse.prevX = Mouse.x;
|
||||||
|
Mouse.prevY = Mouse.y;
|
||||||
|
|
||||||
|
const rect = canvas!.getBoundingClientRect();
|
||||||
|
const scaleX = canvas!.width / rect.width;
|
||||||
|
const scaleY = canvas!.height / rect.height;
|
||||||
|
|
||||||
|
Mouse.x = (e.clientX - rect.left) * scaleX;
|
||||||
|
Mouse.y = (e.clientY - rect.top) * scaleY;
|
||||||
|
|
||||||
|
Mouse.dx = Mouse.x - Mouse.prevX;
|
||||||
|
Mouse.dy = Mouse.y - Mouse.prevY;
|
||||||
|
|
||||||
|
Mouse.event.emit("move", e);
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("mousedown", e => {
|
||||||
|
Mouse.down = true;
|
||||||
|
|
||||||
|
Mouse.event.emit("down", e);
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("mouseup", e => {
|
||||||
|
Mouse.down = false;
|
||||||
|
|
||||||
|
Mouse.event.emit("up", e);
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("mouseleave", e => {
|
||||||
|
Mouse.down = false;
|
||||||
|
|
||||||
|
Mouse.event.emit("up", e);
|
||||||
|
});
|
||||||
|
}
|
31
src/plugins/remix/editor/tools/brush.ts
Normal file
31
src/plugins/remix/editor/tools/brush.ts
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { brushCanvas, ctx, render } from "../components/Canvas";
|
||||||
|
import { currentSize, ToolDefinition } from "../components/Toolbar";
|
||||||
|
import { Mouse } from "../input";
|
||||||
|
import { line } from "../utils/canvas";
|
||||||
|
|
||||||
|
export const BrushTool: ToolDefinition = {
|
||||||
|
onMouseMove() {
|
||||||
|
if (!Mouse.down || !ctx) return;
|
||||||
|
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
|
||||||
|
brushCanvas.lineWidth = currentSize;
|
||||||
|
|
||||||
|
line(Mouse.prevX, Mouse.prevY, Mouse.x, Mouse.y);
|
||||||
|
|
||||||
|
render();
|
||||||
|
},
|
||||||
|
selected() {
|
||||||
|
Mouse.event.on("move", this.onMouseMove);
|
||||||
|
},
|
||||||
|
unselected() {
|
||||||
|
Mouse.event.off("move", this.onMouseMove);
|
||||||
|
},
|
||||||
|
};
|
151
src/plugins/remix/editor/tools/crop.ts
Normal file
151
src/plugins/remix/editor/tools/crop.ts
Normal file
|
@ -0,0 +1,151 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { canvas, cropCanvas, render } from "../components/Canvas";
|
||||||
|
import { ToolDefinition } from "../components/Toolbar";
|
||||||
|
import { Mouse } from "../input";
|
||||||
|
import { dist, fillCircle } from "../utils/canvas";
|
||||||
|
|
||||||
|
export const bounds = {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: -1,
|
||||||
|
bottom: -1,
|
||||||
|
};
|
||||||
|
|
||||||
|
export function resetBounds() {
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
bounds.top = 0;
|
||||||
|
bounds.left = 0;
|
||||||
|
bounds.right = canvas.width;
|
||||||
|
bounds.bottom = canvas.height;
|
||||||
|
|
||||||
|
CropTool.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CropTool: ToolDefinition = {
|
||||||
|
dragging: "",
|
||||||
|
|
||||||
|
onMouseMove() {
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
if (this.dragging !== "") {
|
||||||
|
if (this.dragging.includes("left")) bounds.left = Mouse.x;
|
||||||
|
if (this.dragging.includes("right")) bounds.right = Mouse.x;
|
||||||
|
if (this.dragging.includes("top")) bounds.top = Mouse.y;
|
||||||
|
if (this.dragging.includes("bottom")) bounds.bottom = Mouse.y;
|
||||||
|
|
||||||
|
this.update();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dist(Mouse.x, Mouse.y, bounds.left, bounds.top) < 30) {
|
||||||
|
if (Mouse.down) {
|
||||||
|
bounds.left = Mouse.x;
|
||||||
|
bounds.top = Mouse.y;
|
||||||
|
this.dragging = "left top";
|
||||||
|
} else {
|
||||||
|
canvas.style.cursor = "nwse-resize";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (dist(Mouse.x, Mouse.y, bounds.right, bounds.top) < 30) {
|
||||||
|
if (Mouse.down) {
|
||||||
|
bounds.right = Mouse.x;
|
||||||
|
bounds.top = Mouse.y;
|
||||||
|
this.dragging = "right top";
|
||||||
|
} else {
|
||||||
|
canvas.style.cursor = "nesw-resize";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (dist(Mouse.x, Mouse.y, bounds.left, bounds.bottom) < 30) {
|
||||||
|
if (Mouse.down) {
|
||||||
|
bounds.left = Mouse.x;
|
||||||
|
bounds.bottom = Mouse.y;
|
||||||
|
this.dragging = "left bottom";
|
||||||
|
} else {
|
||||||
|
canvas.style.cursor = "nesw-resize";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (dist(Mouse.x, Mouse.y, bounds.right, bounds.bottom) < 30) {
|
||||||
|
if (Mouse.down) {
|
||||||
|
bounds.right = Mouse.x;
|
||||||
|
bounds.bottom = Mouse.y;
|
||||||
|
this.dragging = "right bottom";
|
||||||
|
} else {
|
||||||
|
canvas.style.cursor = "nwse-resize";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
canvas.style.cursor = "default";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.dragging !== "") this.update();
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseUp() {
|
||||||
|
this.dragging = "";
|
||||||
|
|
||||||
|
if (bounds.left > bounds.right) [bounds.left, bounds.right] = [bounds.right, bounds.left];
|
||||||
|
if (bounds.top > bounds.bottom) [bounds.top, bounds.bottom] = [bounds.bottom, bounds.top];
|
||||||
|
},
|
||||||
|
|
||||||
|
update() {
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
cropCanvas.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
cropCanvas.fillStyle = "rgba(0, 0, 0, 0.75)";
|
||||||
|
cropCanvas.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
cropCanvas.fillStyle = "rgba(0, 0, 0, 0.25)";
|
||||||
|
cropCanvas.clearRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
|
||||||
|
cropCanvas.fillRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
|
||||||
|
|
||||||
|
cropCanvas.fillStyle = "white";
|
||||||
|
cropCanvas.strokeStyle = "white";
|
||||||
|
cropCanvas.lineWidth = 3;
|
||||||
|
|
||||||
|
cropCanvas.strokeRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
|
||||||
|
|
||||||
|
fillCircle(bounds.left, bounds.top, 10, cropCanvas);
|
||||||
|
fillCircle(bounds.right, bounds.top, 10, cropCanvas);
|
||||||
|
fillCircle(bounds.left, bounds.bottom, 10, cropCanvas);
|
||||||
|
fillCircle(bounds.right, bounds.bottom, 10, cropCanvas);
|
||||||
|
|
||||||
|
render();
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseMoveCallback: undefined,
|
||||||
|
onMouseUpCallback: undefined,
|
||||||
|
|
||||||
|
selected() {
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
if (bounds.right === -1) bounds.right = canvas.width;
|
||||||
|
if (bounds.bottom === -1) bounds.bottom = canvas.height;
|
||||||
|
|
||||||
|
this.update();
|
||||||
|
|
||||||
|
this.onMouseMoveCallback = this.onMouseMove.bind(this);
|
||||||
|
this.onMouseUpCallback = this.onMouseUp.bind(this);
|
||||||
|
|
||||||
|
Mouse.event.on("move", this.onMouseMoveCallback);
|
||||||
|
Mouse.event.on("up", this.onMouseUpCallback);
|
||||||
|
},
|
||||||
|
unselected() {
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
cropCanvas.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
cropCanvas.fillStyle = "rgba(0, 0, 0, 0.75)";
|
||||||
|
cropCanvas.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
cropCanvas.clearRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
|
||||||
|
|
||||||
|
render();
|
||||||
|
|
||||||
|
Mouse.event.off("move", this.onMouseMoveCallback);
|
||||||
|
Mouse.event.off("up", this.onMouseUpCallback);
|
||||||
|
},
|
||||||
|
};
|
36
src/plugins/remix/editor/tools/eraser.ts
Normal file
36
src/plugins/remix/editor/tools/eraser.ts
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { brushCanvas, render } from "../components/Canvas";
|
||||||
|
import { currentSize, ToolDefinition } from "../components/Toolbar";
|
||||||
|
import { Mouse } from "../input";
|
||||||
|
|
||||||
|
export const EraseTool: ToolDefinition = {
|
||||||
|
onMouseMove() {
|
||||||
|
if (!Mouse.down) return;
|
||||||
|
|
||||||
|
brushCanvas.lineCap = "round";
|
||||||
|
brushCanvas.lineJoin = "round";
|
||||||
|
brushCanvas.lineWidth = currentSize;
|
||||||
|
|
||||||
|
brushCanvas.globalCompositeOperation = "destination-out";
|
||||||
|
|
||||||
|
brushCanvas.beginPath();
|
||||||
|
brushCanvas.moveTo(Mouse.prevX, Mouse.prevY);
|
||||||
|
brushCanvas.lineTo(Mouse.x, Mouse.y);
|
||||||
|
brushCanvas.stroke();
|
||||||
|
|
||||||
|
brushCanvas.globalCompositeOperation = "source-over";
|
||||||
|
|
||||||
|
render();
|
||||||
|
},
|
||||||
|
selected() {
|
||||||
|
Mouse.event.on("move", this.onMouseMove);
|
||||||
|
},
|
||||||
|
unselected() {
|
||||||
|
Mouse.event.off("move", this.onMouseMove);
|
||||||
|
},
|
||||||
|
};
|
109
src/plugins/remix/editor/tools/shape.ts
Normal file
109
src/plugins/remix/editor/tools/shape.ts
Normal file
|
@ -0,0 +1,109 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { brushCanvas, render, shapeCanvas } from "../components/Canvas";
|
||||||
|
import { ToolDefinition } from "../components/Toolbar";
|
||||||
|
import { Mouse } from "../input";
|
||||||
|
import { line } from "../utils/canvas";
|
||||||
|
|
||||||
|
export type Shape = "rectangle" | "ellipse" | "line" | "arrow";
|
||||||
|
|
||||||
|
export let currentShape: Shape = "rectangle";
|
||||||
|
|
||||||
|
export function setShape(shape: Shape) {
|
||||||
|
currentShape = shape;
|
||||||
|
}
|
||||||
|
|
||||||
|
export let shapeFill = false;
|
||||||
|
|
||||||
|
export function setShapeFill(fill: boolean) {
|
||||||
|
shapeFill = fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ShapeTool: ToolDefinition = {
|
||||||
|
draggingFrom: { x: 0, y: 0 },
|
||||||
|
isDragging: false,
|
||||||
|
|
||||||
|
onMouseMove() {
|
||||||
|
if (!Mouse.down) return;
|
||||||
|
|
||||||
|
if (!this.isDragging) {
|
||||||
|
this.draggingFrom.x = Mouse.x;
|
||||||
|
this.draggingFrom.y = Mouse.y;
|
||||||
|
this.isDragging = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
shapeCanvas.clearRect(0, 0, shapeCanvas.canvas.width, shapeCanvas.canvas.height);
|
||||||
|
this.draw();
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseUp() {
|
||||||
|
if (!this.isDragging) return;
|
||||||
|
|
||||||
|
shapeCanvas.clearRect(0, 0, shapeCanvas.canvas.width, shapeCanvas.canvas.height);
|
||||||
|
this.draw(brushCanvas);
|
||||||
|
this.isDragging = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseMoveListener: null,
|
||||||
|
onMouseUpListener: null,
|
||||||
|
|
||||||
|
draw(canvas = shapeCanvas) {
|
||||||
|
canvas.lineCap = "butt";
|
||||||
|
canvas.lineJoin = "miter";
|
||||||
|
|
||||||
|
switch (currentShape) {
|
||||||
|
case "rectangle":
|
||||||
|
if (shapeFill) canvas.fillRect(this.draggingFrom.x, this.draggingFrom.y, Mouse.x - this.draggingFrom.x, Mouse.y - this.draggingFrom.y);
|
||||||
|
else canvas.strokeRect(this.draggingFrom.x, this.draggingFrom.y, Mouse.x - this.draggingFrom.x, Mouse.y - this.draggingFrom.y);
|
||||||
|
break;
|
||||||
|
case "ellipse":
|
||||||
|
const width = Mouse.x - this.draggingFrom.x;
|
||||||
|
const height = Mouse.y - this.draggingFrom.y;
|
||||||
|
const centerX = this.draggingFrom.x + width / 2;
|
||||||
|
const centerY = this.draggingFrom.y + height / 2;
|
||||||
|
const radiusX = Math.abs(width / 2);
|
||||||
|
const radiusY = Math.abs(height / 2);
|
||||||
|
canvas.beginPath();
|
||||||
|
canvas.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
|
||||||
|
if (shapeFill) canvas.fill();
|
||||||
|
else canvas.stroke();
|
||||||
|
break;
|
||||||
|
case "line":
|
||||||
|
line(this.draggingFrom.x, this.draggingFrom.y, Mouse.x, Mouse.y, canvas);
|
||||||
|
break;
|
||||||
|
case "arrow":
|
||||||
|
line(this.draggingFrom.x, this.draggingFrom.y, Mouse.x, Mouse.y, canvas);
|
||||||
|
// draw arrowhead (thanks copilot :3)
|
||||||
|
const angle = Math.atan2(Mouse.y - this.draggingFrom.y, Mouse.x - this.draggingFrom.x);
|
||||||
|
const arrowLength = 10;
|
||||||
|
canvas.beginPath();
|
||||||
|
canvas.moveTo(Mouse.x, Mouse.y);
|
||||||
|
canvas.lineTo(Mouse.x - arrowLength * Math.cos(angle - Math.PI / 6), Mouse.y - arrowLength * Math.sin(angle - Math.PI / 6));
|
||||||
|
canvas.lineTo(Mouse.x - arrowLength * Math.cos(angle + Math.PI / 6), Mouse.y - arrowLength * Math.sin(angle + Math.PI / 6));
|
||||||
|
canvas.closePath();
|
||||||
|
if (shapeFill) canvas.fill();
|
||||||
|
else canvas.stroke();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
render();
|
||||||
|
},
|
||||||
|
|
||||||
|
selected() {
|
||||||
|
this.onMouseMoveListener = this.onMouseMove.bind(this);
|
||||||
|
this.onMouseUpListener = this.onMouseUp.bind(this);
|
||||||
|
|
||||||
|
Mouse.event.on("move", this.onMouseMoveListener);
|
||||||
|
Mouse.event.on("up", this.onMouseUpListener);
|
||||||
|
},
|
||||||
|
unselected() {
|
||||||
|
shapeCanvas.clearRect(0, 0, shapeCanvas.canvas.width, shapeCanvas.canvas.height);
|
||||||
|
|
||||||
|
Mouse.event.off("move", this.onMouseMoveListener);
|
||||||
|
Mouse.event.off("up", this.onMouseUpListener);
|
||||||
|
},
|
||||||
|
};
|
63
src/plugins/remix/editor/utils/canvas.ts
Normal file
63
src/plugins/remix/editor/utils/canvas.ts
Normal file
|
@ -0,0 +1,63 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { brushCanvas } from "../components/Canvas";
|
||||||
|
|
||||||
|
export function fillCircle(x: number, y: number, radius: number, canvas = brushCanvas) {
|
||||||
|
canvas.beginPath();
|
||||||
|
canvas.arc(x, y, radius, 0, Math.PI * 2);
|
||||||
|
canvas.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function strokeCircle(x: number, y: number, radius: number, canvas = brushCanvas) {
|
||||||
|
canvas.beginPath();
|
||||||
|
canvas.arc(x, y, radius, 0, Math.PI * 2);
|
||||||
|
canvas.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function line(x1: number, y1: number, x2: number, y2: number, canvas = brushCanvas) {
|
||||||
|
canvas.beginPath();
|
||||||
|
canvas.moveTo(x1, y1);
|
||||||
|
canvas.lineTo(x2, y2);
|
||||||
|
canvas.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function dist(x1: number, y1: number, x2: number, y2: number) {
|
||||||
|
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function widthFromBounds(bounds: { left: number, right: number, top: number, bottom: number; }) {
|
||||||
|
return bounds.right - bounds.left;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function heightFromBounds(bounds: { left: number, right: number, top: number, bottom: number; }) {
|
||||||
|
return bounds.bottom - bounds.top;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function urlToImage(url: string) {
|
||||||
|
return new Promise<HTMLImageElement>(resolve => {
|
||||||
|
const img = new Image();
|
||||||
|
img.crossOrigin = "anonymous";
|
||||||
|
img.onload = () => resolve(img);
|
||||||
|
img.src = url;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function imageToBlob(image: HTMLImageElement) {
|
||||||
|
return new Promise<File>(resolve => {
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
const ctx = canvas.getContext("2d")!;
|
||||||
|
canvas.width = image.width;
|
||||||
|
canvas.height = image.height;
|
||||||
|
ctx.drawImage(image, 0, 0);
|
||||||
|
|
||||||
|
canvas.toBlob(blob => {
|
||||||
|
if (!blob) return;
|
||||||
|
|
||||||
|
resolve(new File([blob], "image.png", { type: "image/png" }));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
56
src/plugins/remix/editor/utils/eventEmitter.ts
Normal file
56
src/plugins/remix/editor/utils/eventEmitter.ts
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
export class EventEmitter<T> {
|
||||||
|
events: {
|
||||||
|
[key: string]: ((val: T) => void)[];
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.events = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
on(eventName: string, callback: (val: T) => void) {
|
||||||
|
if (!this.events[eventName]) {
|
||||||
|
this.events[eventName] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
this.events[eventName].push(callback);
|
||||||
|
}
|
||||||
|
|
||||||
|
emit(eventName: string, val: T) {
|
||||||
|
if (!this.events[eventName]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.events[eventName].forEach(callback => {
|
||||||
|
callback(val);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
off(eventName: string, callback: (val: T) => void) {
|
||||||
|
if (!this.events[eventName]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.events[eventName] = this.events[eventName].filter(cb => {
|
||||||
|
return cb !== callback;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
this.events = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
once(eventName: string, callback: (val: T) => void) {
|
||||||
|
const onceCallback = (val: T) => {
|
||||||
|
callback(val);
|
||||||
|
this.off(eventName, onceCallback);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.on(eventName, onceCallback);
|
||||||
|
}
|
||||||
|
}
|
11
src/plugins/remix/icons/SendIcon.tsx
Normal file
11
src/plugins/remix/icons/SendIcon.tsx
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const SendIcon = () => {
|
||||||
|
return (<svg className="sendIcon__461ff" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M6.6 10.02 14 11.4a.6.6 0 0 1 0 1.18L6.6 14l-2.94 5.87a1.48 1.48 0 0 0 1.99 1.98l17.03-8.52a1.48 1.48 0 0 0 0-2.64L5.65 2.16a1.48 1.48 0 0 0-1.99 1.98l2.94 5.88Z"></path>
|
||||||
|
</svg>);
|
||||||
|
};
|
133
src/plugins/remix/index.tsx
Normal file
133
src/plugins/remix/index.tsx
Normal file
|
@ -0,0 +1,133 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a Discord client mod
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
|
||||||
|
import { definePluginSettings } from "@api/Settings";
|
||||||
|
import { disableStyle, enableStyle } from "@api/Styles";
|
||||||
|
import { Devs } from "@utils/constants";
|
||||||
|
import { closeModal, openModal } from "@utils/modal";
|
||||||
|
import definePlugin, { OptionType } from "@utils/types";
|
||||||
|
import { extractAndLoadChunksLazy, findByPropsLazy, findStoreLazy } from "@webpack";
|
||||||
|
import { FluxDispatcher, Menu, MessageActions, RestAPI, showToast, SnowflakeUtils, Toasts } from "@webpack/common";
|
||||||
|
import { Util } from "Vencord";
|
||||||
|
|
||||||
|
import RemixModal from "./RemixModal";
|
||||||
|
import css from "./styles.css?managed";
|
||||||
|
|
||||||
|
// so FileUpload is loaded
|
||||||
|
export const requireCreateStickerModal = extractAndLoadChunksLazy(["stickerInspected]:"]);
|
||||||
|
// so ColorPicker is loaded
|
||||||
|
export const requireSettingsMenu = extractAndLoadChunksLazy(['name:"UserSettings"'], /createPromise:.{0,20}el\("(.+?)"\).{0,50}"UserSettings"/);
|
||||||
|
|
||||||
|
const CloudUtils = findByPropsLazy("CloudUpload");
|
||||||
|
const PendingReplyStore = findStoreLazy("PendingReplyStore");
|
||||||
|
|
||||||
|
|
||||||
|
const validMediaTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
|
||||||
|
|
||||||
|
const UploadContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
|
||||||
|
if (children.find(c => c?.props?.id === "vc-remix")) return;
|
||||||
|
|
||||||
|
children.push(<Menu.MenuItem
|
||||||
|
id="vc-remix"
|
||||||
|
label="Remix"
|
||||||
|
action={() => {
|
||||||
|
const key = openModal(props =>
|
||||||
|
<RemixModal modalProps={props} close={() => closeModal(key)} />
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>);
|
||||||
|
};
|
||||||
|
|
||||||
|
const MessageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
|
||||||
|
const url = props.itemHref ?? props.itemSrc;
|
||||||
|
if (!url) return;
|
||||||
|
if (props.attachment && !validMediaTypes.includes(props.attachment.content_type)) return;
|
||||||
|
|
||||||
|
const group = findGroupChildrenByChildId("copy-text", children);
|
||||||
|
if (!group) return;
|
||||||
|
if (group.find(c => c?.props?.id === "vc-remix")) return;
|
||||||
|
|
||||||
|
const index = group.findIndex(c => c?.props?.id === "copy-text");
|
||||||
|
|
||||||
|
group.splice(index + 1, 0, <Menu.MenuItem
|
||||||
|
id="vc-remix"
|
||||||
|
label="Remix"
|
||||||
|
action={() => {
|
||||||
|
const key = openModal(modalProps =>
|
||||||
|
<RemixModal modalProps={modalProps} close={() => closeModal(key)} url={url} />
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>);
|
||||||
|
};
|
||||||
|
|
||||||
|
export function sendRemix(blob: Blob) {
|
||||||
|
const currentChannelId = Util.getCurrentChannel().id;
|
||||||
|
const reply = PendingReplyStore.getPendingReply(currentChannelId);
|
||||||
|
if (reply) FluxDispatcher.dispatch({ type: "DELETE_PENDING_REPLY", currentChannelId });
|
||||||
|
|
||||||
|
const upload = new CloudUtils.CloudUpload({
|
||||||
|
file: new File([blob], "remix.png", { type: "image/png" }),
|
||||||
|
isClip: false,
|
||||||
|
isThumbnail: false,
|
||||||
|
platform: 1
|
||||||
|
}, currentChannelId, false, 0);
|
||||||
|
|
||||||
|
upload.on("complete", () => {
|
||||||
|
RestAPI.post({
|
||||||
|
url: `/channels/${currentChannelId}/messages`,
|
||||||
|
body: {
|
||||||
|
channel_id: currentChannelId,
|
||||||
|
content: "",
|
||||||
|
nonce: SnowflakeUtils.fromTimestamp(Date.now()),
|
||||||
|
sticker_ids: [],
|
||||||
|
attachments: [{
|
||||||
|
id: "0",
|
||||||
|
filename: upload.filename,
|
||||||
|
uploaded_filename: upload.uploadedFilename,
|
||||||
|
size: blob.size,
|
||||||
|
is_remix: settings.store.remixTag
|
||||||
|
}],
|
||||||
|
message_reference: reply ? MessageActions.getSendMessageOptionsForReply(reply)?.messageReference : null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
upload.on("error", () => showToast("Failed to upload remix", Toasts.Type.FAILURE));
|
||||||
|
|
||||||
|
upload.upload();
|
||||||
|
}
|
||||||
|
|
||||||
|
const settings = definePluginSettings({
|
||||||
|
remixTag: {
|
||||||
|
description: "Include the remix tag in remixed messages",
|
||||||
|
type: OptionType.BOOLEAN,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default definePlugin({
|
||||||
|
name: "Remix",
|
||||||
|
description: "Adds Remix to Desktop",
|
||||||
|
authors: [Devs.MrDiamond],
|
||||||
|
settings,
|
||||||
|
|
||||||
|
async start() {
|
||||||
|
addContextMenuPatch("channel-attach", UploadContextMenuPatch);
|
||||||
|
addContextMenuPatch("message", MessageContextMenuPatch);
|
||||||
|
|
||||||
|
await requireCreateStickerModal();
|
||||||
|
await requireSettingsMenu();
|
||||||
|
|
||||||
|
enableStyle(css);
|
||||||
|
},
|
||||||
|
|
||||||
|
stop() {
|
||||||
|
removeContextMenuPatch("channel-attach", UploadContextMenuPatch);
|
||||||
|
removeContextMenuPatch("message", MessageContextMenuPatch);
|
||||||
|
|
||||||
|
disableStyle(css);
|
||||||
|
},
|
||||||
|
});
|
57
src/plugins/remix/styles.css
Normal file
57
src/plugins/remix/styles.css
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
.vc-remix-toolbar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-remix-tools,
|
||||||
|
.vc-remix-misc,
|
||||||
|
.vc-remix-settings {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--modal-footer-background);
|
||||||
|
padding: 10px 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-remix-settings {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-remix-setting-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-remix-toolbar button {
|
||||||
|
min-width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: var(--brand);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-remix-canvas {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
min-width: 50%;
|
||||||
|
min-height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-remix-editor {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
|
@ -419,6 +419,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
|
||||||
name: "coolelectronics",
|
name: "coolelectronics",
|
||||||
id: 696392247205298207n,
|
id: 696392247205298207n,
|
||||||
},
|
},
|
||||||
|
MrDiamond: {
|
||||||
|
name: "MrDiamond",
|
||||||
|
id: 523338295644782592n,
|
||||||
|
},
|
||||||
Av32000: {
|
Av32000: {
|
||||||
name: "Av32000",
|
name: "Av32000",
|
||||||
id: 593436735380127770n,
|
id: 593436735380127770n,
|
||||||
|
|
Loading…
Reference in a new issue