add endpoint for oembed; restyle gifv; skeleton for websocket
This commit is contained in:
parent
ec3597e474
commit
e799724b3b
9 changed files with 312 additions and 209 deletions
|
@ -7,6 +7,8 @@ import which from "which";
|
||||||
|
|
||||||
import fs from "fs";
|
import fs from "fs";
|
||||||
|
|
||||||
|
import { wss } from "./ws";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enum to represent different types of video encoding methods.
|
* Enum to represent different types of video encoding methods.
|
||||||
*
|
*
|
||||||
|
|
|
@ -31,7 +31,9 @@ export interface oembedObj {
|
||||||
provider_name: string;
|
provider_name: string;
|
||||||
provider_url: string;
|
provider_url: string;
|
||||||
cache_age: number;
|
cache_age: number;
|
||||||
|
title: string;
|
||||||
html: string;
|
html: string;
|
||||||
|
url: string;
|
||||||
width?: number;
|
width?: number;
|
||||||
height?: number;
|
height?: number;
|
||||||
}
|
}
|
||||||
|
@ -54,4 +56,4 @@ export const imageExtensions = [
|
||||||
".svg",
|
".svg",
|
||||||
".tiff",
|
".tiff",
|
||||||
".webp",
|
".webp",
|
||||||
];
|
];
|
|
@ -69,6 +69,8 @@ export const createEmbedData: Middleware = async (req, res, next) => {
|
||||||
html: `<iframe src='${req.protocol}://${req.get(
|
html: `<iframe src='${req.protocol}://${req.get(
|
||||||
"host",
|
"host",
|
||||||
)}/gifv/${filename}${fileExtension}'></iframe>`,
|
)}/gifv/${filename}${fileExtension}'></iframe>`,
|
||||||
|
title: filename,
|
||||||
|
url: `${req.protocol}://${req.get("host")}/uploads/${filename}${fileExtension}`,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isMedia) {
|
if (isMedia) {
|
||||||
|
|
20
app/lib/ws.ts
Normal file
20
app/lib/ws.ts
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
import WebSocket from "ws";
|
||||||
|
|
||||||
|
const wsPort = normalizePort(process.env.EBWSPORT || "3001");
|
||||||
|
|
||||||
|
function normalizePort(val: string) {
|
||||||
|
const port = parseInt(val, 10);
|
||||||
|
|
||||||
|
if (isNaN(port)) {
|
||||||
|
return parseInt(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (port >= 0) {
|
||||||
|
return port;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const wss = new WebSocket.Server({port: wsPort});
|
||||||
|
|
||||||
|
export { wss };
|
||||||
|
|
|
@ -1,295 +1,295 @@
|
||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||||
|
/* eslint-disable no-undef */
|
||||||
/* eslint-env browser: true */
|
/* eslint-env browser: true */
|
||||||
|
|
||||||
let newMediaList;
|
let newMediaList;
|
||||||
|
|
||||||
const videoExtensions = [
|
const videoExtensions = [
|
||||||
".mp4",
|
".mp4",
|
||||||
".mov",
|
".mov",
|
||||||
".avi",
|
".avi",
|
||||||
".flv",
|
".flv",
|
||||||
".mkv",
|
".mkv",
|
||||||
".wmv",
|
".wmv",
|
||||||
".webm",
|
".webm",
|
||||||
];
|
];
|
||||||
|
|
||||||
const imageExtensions = [
|
const imageExtensions = [
|
||||||
".jpg",
|
".jpg",
|
||||||
".jpeg",
|
".jpeg",
|
||||||
".png",
|
".png",
|
||||||
".gif",
|
".gif",
|
||||||
".bmp",
|
".bmp",
|
||||||
".svg",
|
".svg",
|
||||||
".tiff",
|
".tiff",
|
||||||
".webp",
|
".webp",
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
function copyURI(evt) {
|
function copyURI(evt) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
navigator.clipboard
|
navigator.clipboard
|
||||||
.writeText(absolutePath(evt.target.getAttribute("src")))
|
.writeText(absolutePath(evt.target.getAttribute("src")))
|
||||||
.then(
|
.then(
|
||||||
() => {
|
() => {
|
||||||
console.log("copied");
|
console.log("copied");
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
console.log("failed");
|
console.log("failed");
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyA(evt) {
|
function copyA(evt) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
navigator.clipboard
|
navigator.clipboard
|
||||||
.writeText(absolutePath(evt.target.getAttribute("href")))
|
.writeText(absolutePath(evt.target.getAttribute("href")))
|
||||||
.then(
|
.then(
|
||||||
() => {
|
() => {
|
||||||
console.log("copied");
|
console.log("copied");
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
console.log("failed");
|
console.log("failed");
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyPath(evt) {
|
function copyPath(evt) {
|
||||||
navigator.clipboard.writeText(absolutePath(evt)).then(
|
navigator.clipboard.writeText(absolutePath(evt)).then(
|
||||||
() => {
|
() => {
|
||||||
console.log("copied");
|
console.log("copied");
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
console.log("failed");
|
console.log("failed");
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function absolutePath(href) {
|
function absolutePath(href) {
|
||||||
let link = document.createElement("a");
|
let link = document.createElement("a");
|
||||||
link.href = href;
|
link.href = href;
|
||||||
return link.href;
|
return link.href;
|
||||||
}
|
}
|
||||||
|
|
||||||
function extension(string) {
|
function extension(string) {
|
||||||
return string.slice(((string.lastIndexOf(".") - 2) >>> 0) + 2);
|
return string.slice(((string.lastIndexOf(".") - 2) >>> 0) + 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
let dropArea = document.getElementById("dropArea");
|
let dropArea = document.getElementById("dropArea");
|
||||||
|
|
||||||
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
|
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
|
||||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||||
});
|
});
|
||||||
|
|
||||||
function preventDefaults(e) {
|
function preventDefaults(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
["dragenter", "dragover"].forEach((eventName) => {
|
["dragenter", "dragover"].forEach((eventName) => {
|
||||||
dropArea.addEventListener(eventName, highlight, false);
|
dropArea.addEventListener(eventName, highlight, false);
|
||||||
});
|
});
|
||||||
["dragleave", "drop"].forEach((eventName) => {
|
["dragleave", "drop"].forEach((eventName) => {
|
||||||
dropArea.addEventListener(eventName, unhighlight, false);
|
dropArea.addEventListener(eventName, unhighlight, false);
|
||||||
});
|
});
|
||||||
|
|
||||||
function highlight(e) {
|
function highlight(e) {
|
||||||
dropArea.classList.add("highlight");
|
dropArea.classList.add("highlight");
|
||||||
}
|
}
|
||||||
|
|
||||||
function unhighlight(e) {
|
function unhighlight(e) {
|
||||||
dropArea.classList.remove("highlight");
|
dropArea.classList.remove("highlight");
|
||||||
}
|
}
|
||||||
|
|
||||||
dropArea.addEventListener("drop", handleDrop, false);
|
dropArea.addEventListener("drop", handleDrop, false);
|
||||||
window.addEventListener("paste", handlePaste);
|
window.addEventListener("paste", handlePaste);
|
||||||
|
|
||||||
function handleDrop(e) {
|
function handleDrop(e) {
|
||||||
let dt = e.dataTransfer;
|
let dt = e.dataTransfer;
|
||||||
let files = dt.files;
|
let files = dt.files;
|
||||||
handleFiles(files);
|
handleFiles(files);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handlePaste(e) {
|
function handlePaste(e) {
|
||||||
// Get the data of clipboard
|
// Get the data of clipboard
|
||||||
const clipboardItems = e.clipboardData.items;
|
const clipboardItems = e.clipboardData.items;
|
||||||
const items = [].slice.call(clipboardItems).filter(function (item) {
|
const items = [].slice.call(clipboardItems).filter(function (item) {
|
||||||
// Filter the image items only
|
// Filter the image items only
|
||||||
return item.type.indexOf("image") !== -1;
|
return item.type.indexOf("image") !== -1;
|
||||||
});
|
});
|
||||||
if (items.length === 0) {
|
if (items.length === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const item = items[0];
|
const item = items[0];
|
||||||
// Get the blob of image
|
// Get the blob of image
|
||||||
const blob = item.getAsFile();
|
const blob = item.getAsFile();
|
||||||
console.log(blob);
|
console.log(blob);
|
||||||
|
|
||||||
uploadFile(blob);
|
uploadFile(blob);
|
||||||
previewFile(blob);
|
previewFile(blob);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleFiles(files) {
|
function handleFiles(files) {
|
||||||
files = [...files];
|
files = [...files];
|
||||||
files.forEach(uploadFile);
|
files.forEach(uploadFile);
|
||||||
files.forEach(previewFile);
|
files.forEach(previewFile);
|
||||||
}
|
}
|
||||||
|
|
||||||
function previewFile(file) {
|
function previewFile(file) {
|
||||||
let reader = new FileReader();
|
let reader = new FileReader();
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
reader.onloadend = function () {
|
reader.onloadend = function () {
|
||||||
let img = document.createElement("img");
|
let img = document.createElement("img");
|
||||||
img.src = reader.result;
|
img.src = reader.result;
|
||||||
img.className = "image";
|
img.className = "image";
|
||||||
document.getElementById("gallery").appendChild(img);
|
document.getElementById("gallery").appendChild(img);
|
||||||
document.getElementById("fileupload").src = img.src;
|
document.getElementById("fileupload").src = img.src;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function uploadFile(file) {
|
function uploadFile(file) {
|
||||||
let xhr = new XMLHttpRequest();
|
let xhr = new XMLHttpRequest();
|
||||||
let formData = new FormData();
|
let formData = new FormData();
|
||||||
let reader = new FileReader();
|
|
||||||
|
|
||||||
xhr.open("POST", "/", true);
|
xhr.open("POST", "/", true);
|
||||||
|
|
||||||
xhr.addEventListener("readystatechange", function (e) {
|
xhr.addEventListener("readystatechange", function () {
|
||||||
if (xhr.readyState == 4) {
|
if (xhr.readyState == 4) {
|
||||||
if (xhr.status == 200) {
|
if (xhr.status == 200) {
|
||||||
let response = xhr.responseText;
|
//document.getElementById("embedder-list").innerHTML = response;
|
||||||
//document.getElementById("embedder-list").innerHTML = response;
|
htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
|
||||||
htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
|
document.getElementById("gallery").innerHTML = "";
|
||||||
document.getElementById("gallery").innerHTML = "";
|
htmx.process(document.body);
|
||||||
htmx.process(document.body);
|
} else {
|
||||||
} else {
|
alert(`Upload failed, error code: ${xhr.status}`);
|
||||||
alert(`Upload failed, error code: ${xhr.status}`);
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (file == null || file == undefined) {
|
||||||
|
file = document.querySelector("#fileupload").files[0];
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
if (file == null || file == undefined) {
|
formData.append("fileupload", file);
|
||||||
file = document.querySelector("#fileupload").files[0];
|
formData.append("expire", document.getElementById("expire").value);
|
||||||
}
|
xhr.send(formData);
|
||||||
|
|
||||||
formData.append("fileupload", file);
|
|
||||||
formData.append("expire", document.getElementById("expire").value);
|
|
||||||
xhr.send(formData);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function openFullSize(imageUrl) {
|
function openFullSize(imageUrl) {
|
||||||
let modal = document.createElement("div");
|
let modal = document.createElement("div");
|
||||||
modal.classList.add("modal");
|
modal.classList.add("modal");
|
||||||
let img = document.createElement("img");
|
let img = document.createElement("img");
|
||||||
let video = document.createElement("video");
|
let video = document.createElement("video");
|
||||||
img.src = imageUrl;
|
img.src = imageUrl;
|
||||||
video.src = imageUrl;
|
video.src = imageUrl;
|
||||||
video.controls = true;
|
video.controls = true;
|
||||||
|
|
||||||
if (
|
if (
|
||||||
imageExtensions.includes(extension(imageUrl))
|
imageExtensions.includes(extension(imageUrl))
|
||||||
) {
|
) {
|
||||||
modal.appendChild(img);
|
modal.appendChild(img);
|
||||||
} else if (
|
} else if (
|
||||||
videoExtensions.includes(extension(imageUrl))
|
videoExtensions.includes(extension(imageUrl))
|
||||||
) {
|
) {
|
||||||
modal.appendChild(video);
|
modal.appendChild(video);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add the modal to the page
|
// Add the modal to the page
|
||||||
document.body.appendChild(modal);
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
// Add an event listener to close the modal when the user clicks on it
|
// Add an event listener to close the modal when the user clicks on it
|
||||||
modal.addEventListener("click", function () {
|
modal.addEventListener("click", function () {
|
||||||
modal.remove();
|
modal.remove();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let searchInput = document.getElementById("search");
|
let searchInput = document.getElementById("search");
|
||||||
|
|
||||||
searchInput.addEventListener("input", () => {
|
searchInput.addEventListener("input", () => {
|
||||||
let searchValue = searchInput.value;
|
let searchValue = searchInput.value;
|
||||||
let mediaList = document.querySelectorAll("ul.embedder-list li");
|
let mediaList = document.querySelectorAll("ul.embedder-list li");
|
||||||
|
|
||||||
mediaList.forEach((li) => {
|
mediaList.forEach((li) => {
|
||||||
if (!li.id.toLowerCase().includes(searchValue)) {
|
if (!li.id.toLowerCase().includes(searchValue)) {
|
||||||
//make lowercase to allow case insensitivity
|
//make lowercase to allow case insensitivity
|
||||||
li.classList.add("hide");
|
li.classList.add("hide");
|
||||||
li.classList.remove("show");
|
li.classList.remove("show");
|
||||||
li.addEventListener(
|
li.addEventListener(
|
||||||
"animationend",
|
"animationend",
|
||||||
function () {
|
function () {
|
||||||
if (searchInput.value !== "") {
|
if (searchInput.value !== "") {
|
||||||
this.style.display = "none";
|
this.style.display = "none";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ once: true }
|
{ once: true }
|
||||||
); // The {once: true} option automatically removes the event listener after it has been called
|
); // The {once: true} option automatically removes the event listener after it has been called
|
||||||
} else {
|
} else {
|
||||||
li.style.display = "";
|
li.style.display = "";
|
||||||
li.classList.remove("hide");
|
li.classList.remove("hide");
|
||||||
if (searchValue === "" && !li.classList.contains("show")) {
|
if (searchValue === "" && !li.classList.contains("show")) {
|
||||||
li.classList.add("show");
|
li.classList.add("show");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function p(num) {
|
function p(num) {
|
||||||
return `${(num * 100).toFixed(2)}%`;
|
return `${(num * 100).toFixed(2)}%`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkFileAvailability(filePath) {
|
function checkFileAvailability(filePath) {
|
||||||
const checkFile = () => {
|
const checkFile = () => {
|
||||||
console.log(`Checking if ${filePath} is processed...`);
|
console.log(`Checking if ${filePath} is processed...`);
|
||||||
fetch(`/uploads/${filePath}-progress.json`)
|
fetch(`/uploads/${filePath}-progress.json`)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
console.log(`${filePath} still processing`);
|
console.log(`${filePath} still processing`);
|
||||||
return response.json().then(json => {
|
return response.json().then(json => {
|
||||||
document.getElementById(`spinner-${filePath}`).innerText = `Optimizing Video for Sharing: ${p(json.progress)} done`;
|
document.getElementById(`spinner-${filePath}`).innerText = `Optimizing Video for Sharing: ${p(json.progress)} done`;
|
||||||
return response;
|
return response;
|
||||||
})
|
});
|
||||||
} else if (response.status === 404) {
|
} else if (response.status === 404) {
|
||||||
console.log(`${filePath} finished processing`);
|
console.log(`${filePath} finished processing`);
|
||||||
console.log(`/uploads/720p-${filePath}-progress.json finished`);
|
console.log(`/uploads/720p-${filePath}-progress.json finished`);
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
createVideoElement(filePath);
|
createVideoElement(filePath);
|
||||||
} else {
|
} else {
|
||||||
throw new Error(`HTTP error: Status code ${response.status}`);
|
throw new Error(`HTTP error: Status code ${response.status}`);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => console.error("Error:", error));
|
.catch((error) => console.error("Error:", error));
|
||||||
};
|
};
|
||||||
|
|
||||||
checkFile();
|
checkFile();
|
||||||
const interval = setInterval(checkFile, 1000);
|
const interval = setInterval(checkFile, 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function createVideoElement(filePath) {
|
function createVideoElement(filePath) {
|
||||||
const videoContainer = document.getElementById(`video-${filePath}`);
|
const videoContainer = document.getElementById(`video-${filePath}`);
|
||||||
videoContainer.outerHTML = `
|
videoContainer.outerHTML = `
|
||||||
<video id='video-${filePath}' class="image" autoplay loop muted playsinline>
|
<video id='video-${filePath}' class="image" autoplay loop muted playsinline>
|
||||||
<source src="/uploads/720p-${filePath}">
|
<source src="/uploads/720p-${filePath}">
|
||||||
</video>
|
</video>
|
||||||
`;
|
`;
|
||||||
videoContainer.style.display = "block";
|
videoContainer.style.display = "block";
|
||||||
document.getElementById(`spinner-${filePath}`).style.display = "none";
|
document.getElementById(`spinner-${filePath}`).style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateMediaList() {
|
function updateMediaList() {
|
||||||
htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
|
htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
|
||||||
htmx.process(document.body);
|
htmx.process(document.body);
|
||||||
}
|
}
|
||||||
|
|
||||||
function refreshMediaList(files) {
|
function refreshMediaList(files) {
|
||||||
files.forEach(file => {
|
files.forEach(file => {
|
||||||
console.log(`Checking ${file.path}...`);
|
console.log(`Checking ${file.path}...`);
|
||||||
if (videoExtensions.includes(extension(file.path))) {
|
if (videoExtensions.includes(extension(file.path))) {
|
||||||
const progressFileName = `uploads/${file.path}-progress.json`;
|
const progressFileName = `uploads/${file.path}-progress.json`;
|
||||||
console.log(`Fetching ${progressFileName}...`);
|
console.log(`Fetching ${progressFileName}...`);
|
||||||
checkFileAvailability(file.path);
|
checkFileAvailability(file.path);
|
||||||
} else {
|
} else {
|
||||||
console.log(`File ${file.path} is not a video, displaying...`);
|
console.log(`File ${file.path} is not a video, displaying...`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,7 @@ import { ffProbe } from "../lib/ffmpeg";
|
||||||
import fs from "fs";
|
import fs from "fs";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
|
|
||||||
import { extension, videoExtensions } from "../lib/lib";
|
import { extension, videoExtensions, oembedObj } from "../lib/lib";
|
||||||
import { db, MediaRow, getPath, deleteId } from "../lib/db";
|
import { db, MediaRow, getPath, deleteId } from "../lib/db";
|
||||||
import { fileStorage } from "../lib/multer";
|
import { fileStorage } from "../lib/multer";
|
||||||
import {
|
import {
|
||||||
|
@ -117,6 +117,43 @@ router.get(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
router.get("/oembed/:file",
|
||||||
|
async (req: Request, res: Response) => {
|
||||||
|
const filename = req.params.file;
|
||||||
|
const fileExtension = filename.slice(filename.lastIndexOf("."));
|
||||||
|
|
||||||
|
try {
|
||||||
|
const oembedData: oembedObj = {
|
||||||
|
type: (videoExtensions.includes(fileExtension) ? "photo" : "video"),
|
||||||
|
version: "1.0",
|
||||||
|
provider_name: "embedder",
|
||||||
|
provider_url: "https://github.com/WaveringAna/embedder",
|
||||||
|
cache_age: 86400,
|
||||||
|
title: filename.slice(0, filename.lastIndexOf(".")),
|
||||||
|
html: "",
|
||||||
|
url: `${req.protocol}://${req.get("host")}/uploads/${filename}`
|
||||||
|
};
|
||||||
|
|
||||||
|
if (videoExtensions.includes(fileExtension) || fileExtension === '.gif') {
|
||||||
|
const ffprobeData = await ffProbe(`uploads/${filename}`, filename, fileExtension);
|
||||||
|
oembedData.width = ffprobeData.streams[0].width;
|
||||||
|
oembedData.height = ffprobeData.streams[0].height;
|
||||||
|
|
||||||
|
// Consider generating a thumbnail_url if it's a video
|
||||||
|
} else {
|
||||||
|
const imageData = await imageProbe(fs.createReadStream(`uploads/${filename}`));
|
||||||
|
oembedData.width = imageData.width;
|
||||||
|
oembedData.height = imageData.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json(oembedData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error generating oEmbed data:", error);
|
||||||
|
res.status(500).send("Error generating oEmbed data");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
router.post(
|
router.post(
|
||||||
"/",
|
"/",
|
||||||
[
|
[
|
||||||
|
|
|
@ -12,8 +12,9 @@ const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'
|
||||||
<head>
|
<head>
|
||||||
<% if (extension(url)[1] == ".gif") { %>
|
<% if (extension(url)[1] == ".gif") { %>
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<link rel="alternate" type="application/json+oembed" href="<%= host %>/uploads/oembed-<%= extension(url)[0]+extension(url)[1] %>.json"></link>
|
<link rel="alternate" type="application/json+oembed"
|
||||||
<meta property="og:title" content="<%= extension(url)[0] %>.gif"></meta>
|
href="<%= host %>/oembed/<%= extension(url)[0]+extension(url)[1] %>"></link>
|
||||||
|
<meta property="og:title" content="<%= extension(url)[0] %>.gif"></meta>
|
||||||
<meta property="og:description" content="Click to view the GIF"></meta>
|
<meta property="og:description" content="Click to view the GIF"></meta>
|
||||||
<meta property="og:site_name" content="embedder"></meta>
|
<meta property="og:site_name" content="embedder"></meta>
|
||||||
<meta property="og:type" content="article"></meta>
|
<meta property="og:type" content="article"></meta>
|
||||||
|
@ -24,8 +25,9 @@ const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'
|
||||||
<meta property="og:url" content="<%= host %>/uploads/720p-<%= extension(url)[0] %>.gif"></meta>
|
<meta property="og:url" content="<%= host %>/uploads/720p-<%= extension(url)[0] %>.gif"></meta>
|
||||||
<% } else if (videoExtensions.includes(extension(url)[1])) { %>
|
<% } else if (videoExtensions.includes(extension(url)[1])) { %>
|
||||||
<meta name="twitter:card" content="player">
|
<meta name="twitter:card" content="player">
|
||||||
<link rel="alternate" type="application/json+oembed" href="<%= host %>/uploads/oembed-<%= extension(url)[0]+extension(url)[1] %>.json"></link>
|
<link rel="alternate" type="application/json+oembed"
|
||||||
<meta property="og:title" content="<%= extension(url)[0]+extension(url)[1] %>"></meta>
|
href="<%= host %>/oembed/<%= extension(url)[0]+extension(url)[1] %>"></link>
|
||||||
|
<meta property="og:title" content="<%= extension(url)[0]+extension(url)[1] %>"></meta>
|
||||||
<meta property="og:description" content="Click to view the GIFv"></meta>
|
<meta property="og:description" content="Click to view the GIFv"></meta>
|
||||||
<meta property="og:site_name" content="embedder"></meta>
|
<meta property="og:site_name" content="embedder"></meta>
|
||||||
<meta property="og:type" content="article"></meta>
|
<meta property="og:type" content="article"></meta>
|
||||||
|
@ -36,8 +38,9 @@ const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'
|
||||||
<meta property="og:url" content="<%= host %>/uploads/720p-<%= extension(url)[0]+extension(url)[1] %>.mp4"></meta>
|
<meta property="og:url" content="<%= host %>/uploads/720p-<%= extension(url)[0]+extension(url)[1] %>.mp4"></meta>
|
||||||
<% } else { %>
|
<% } else { %>
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<link rel="alternate" type="application/json+oembed" href="<%= host %>/uploads/oembed-<%= extension(url)[0]+extension(url)[1] %>.json"></link>
|
<link rel="alternate" type="application/json+oembed"
|
||||||
<meta property="og:title" content="<%= extension(url)[0] + extension(url)[1] %>"></meta>
|
href="<%= host %>/oembed/<%= extension(url)[0]+extension(url)[1] %>"></link>
|
||||||
|
<meta property="og:title" content="<%= extension(url)[0] + extension(url)[1] %>"></meta>
|
||||||
<meta property="og:description" content="Click to view the image"></meta>
|
<meta property="og:description" content="Click to view the image"></meta>
|
||||||
<meta property="og:site_name" content="embedder"></meta>
|
<meta property="og:site_name" content="embedder"></meta>
|
||||||
<meta property="og:type" content="article"></meta>
|
<meta property="og:type" content="article"></meta>
|
||||||
|
@ -109,11 +112,15 @@ footer a:hover {
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<% if (videoExtensions.includes(extension(url)[1])) { %>
|
<div class="container">
|
||||||
<video class="image" width="100%" controls autoplay loop muted><source src="/uploads/720p-<%= extension(url)[0]+extension(url)[1] %>"></video>
|
<% if (videoExtensions.includes(extension(url)[1])) { %>
|
||||||
<% } else { %>
|
<video class="image" width="100%" controls autoplay muted>
|
||||||
<img src="/uploads/<%= extension(url)[0] + extension(url)[1] %>" class="image" width="100%">
|
<source src="/uploads/720p-<%= extension(url)[0]+extension(url)[1] %>" type="video/mp4">
|
||||||
<% } %>
|
</video>
|
||||||
|
<% } else { %>
|
||||||
|
<img src="/uploads/<%= extension(url)[0] + extension(url)[1] %>" class="image" alt="<%= oembedData.title %>">
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>Powered by <a href="https://github.com/waveringana/embedder">Embedder</a> created by <a href="https://github.com/waveringana">WaveringAna</a></p>
|
<p>Powered by <a href="https://github.com/waveringana/embedder">Embedder</a> created by <a href="https://github.com/waveringana">WaveringAna</a></p>
|
||||||
|
|
33
package-lock.json
generated
33
package-lock.json
generated
|
@ -26,7 +26,8 @@
|
||||||
"passport-local": "^1.0.0",
|
"passport-local": "^1.0.0",
|
||||||
"probe-image-size": "^7.2.3",
|
"probe-image-size": "^7.2.3",
|
||||||
"sqlite3": "^5.0.2",
|
"sqlite3": "^5.0.2",
|
||||||
"which": "^4.0.0"
|
"which": "^4.0.0",
|
||||||
|
"ws": "^8.17.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/connect-sqlite3": "^0.9.1",
|
"@types/connect-sqlite3": "^0.9.1",
|
||||||
|
@ -42,6 +43,7 @@
|
||||||
"@types/passport-local": "^1.0.34",
|
"@types/passport-local": "^1.0.34",
|
||||||
"@types/probe-image-size": "^7.2.0",
|
"@types/probe-image-size": "^7.2.0",
|
||||||
"@types/which": "^3.0.1",
|
"@types/which": "^3.0.1",
|
||||||
|
"@types/ws": "^8.5.10",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.46.1",
|
"@typescript-eslint/eslint-plugin": "^5.46.1",
|
||||||
"@typescript-eslint/parser": "^5.46.1",
|
"@typescript-eslint/parser": "^5.46.1",
|
||||||
"copyfiles": "^2.4.1",
|
"copyfiles": "^2.4.1",
|
||||||
|
@ -764,6 +766,15 @@
|
||||||
"integrity": "sha512-OJWjr4k8gS1HXuOnCmQbBrQez+xqt/zqfp5PhgbKtsmEFEuojAg23arr+TiTZZ1TORdUF9RKXb/WKEpT1dwgSg==",
|
"integrity": "sha512-OJWjr4k8gS1HXuOnCmQbBrQez+xqt/zqfp5PhgbKtsmEFEuojAg23arr+TiTZZ1TORdUF9RKXb/WKEpT1dwgSg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/ws": {
|
||||||
|
"version": "8.5.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
|
||||||
|
"integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/node": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||||
"version": "5.46.1",
|
"version": "5.46.1",
|
||||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.46.1.tgz",
|
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.46.1.tgz",
|
||||||
|
@ -4936,6 +4947,26 @@
|
||||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
||||||
},
|
},
|
||||||
|
"node_modules/ws": {
|
||||||
|
"version": "8.17.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
|
||||||
|
"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"bufferutil": "^4.0.1",
|
||||||
|
"utf-8-validate": ">=5.0.2"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"bufferutil": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"utf-8-validate": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/xtend": {
|
"node_modules/xtend": {
|
||||||
"version": "4.0.2",
|
"version": "4.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||||
|
|
|
@ -46,7 +46,8 @@
|
||||||
"passport-local": "^1.0.0",
|
"passport-local": "^1.0.0",
|
||||||
"probe-image-size": "^7.2.3",
|
"probe-image-size": "^7.2.3",
|
||||||
"sqlite3": "^5.0.2",
|
"sqlite3": "^5.0.2",
|
||||||
"which": "^4.0.0"
|
"which": "^4.0.0",
|
||||||
|
"ws": "^8.17.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/connect-sqlite3": "^0.9.1",
|
"@types/connect-sqlite3": "^0.9.1",
|
||||||
|
@ -62,6 +63,7 @@
|
||||||
"@types/passport-local": "^1.0.34",
|
"@types/passport-local": "^1.0.34",
|
||||||
"@types/probe-image-size": "^7.2.0",
|
"@types/probe-image-size": "^7.2.0",
|
||||||
"@types/which": "^3.0.1",
|
"@types/which": "^3.0.1",
|
||||||
|
"@types/ws": "^8.5.10",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.46.1",
|
"@typescript-eslint/eslint-plugin": "^5.46.1",
|
||||||
"@typescript-eslint/parser": "^5.46.1",
|
"@typescript-eslint/parser": "^5.46.1",
|
||||||
"copyfiles": "^2.4.1",
|
"copyfiles": "^2.4.1",
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue