add endpoint for oembed; restyle gifv; skeleton for websocket

app/lib/ffmpeg.ts

@@ -7,6 +7,8 @@ import which from "which";
 
 import fs from "fs";
 
+import { wss } from "./ws";
+
 /**
  * Enum to represent different types of video encoding methods.
  *

app/lib/lib.ts

@@ -31,7 +31,9 @@ export interface oembedObj {
   provider_name: string;
   provider_url: string;
   cache_age: number;
+  title: string;
   html: string;
+  url: string;
   width?: number;
   height?: number;
 }

app/lib/middleware.ts

@@ -69,6 +69,8 @@ export const createEmbedData: Middleware = async (req, res, next) => {
             html: `<iframe src='${req.protocol}://${req.get(
                 "host",
             )}/gifv/${filename}${fileExtension}'></iframe>`,
+            title: filename,
+            url: `${req.protocol}://${req.get("host")}/uploads/${filename}${fileExtension}`,
         };
 
         if (isMedia) {

app/lib/ws.ts

@@ -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 };
+

app/public/js/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-undef */
 /* eslint-env browser: true */
 
 let newMediaList;
@@ -149,14 +151,12 @@ function previewFile(file) {
 function uploadFile(file) {
     let xhr = new XMLHttpRequest();
     let formData = new FormData();
-  let reader = new FileReader();
 
     xhr.open("POST", "/", true);
 
-  xhr.addEventListener("readystatechange", function (e) {
+    xhr.addEventListener("readystatechange", function () {
         if (xhr.readyState == 4) {
             if (xhr.status == 200) {
-        let response = xhr.responseText;
                 //document.getElementById("embedder-list").innerHTML = response;
                 htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
                 document.getElementById("gallery").innerHTML = "";
@@ -248,7 +248,7 @@ function checkFileAvailability(filePath) {
                     return response.json().then(json => {
                         document.getElementById(`spinner-${filePath}`).innerText = `Optimizing Video for Sharing: ${p(json.progress)} done`;
                         return response;
-          })
+                    });
                 } else if (response.status === 404) {
                     console.log(`${filePath} finished processing`);
                     console.log(`/uploads/720p-${filePath}-progress.json finished`);

app/routes/index.ts

@@ -14,7 +14,7 @@ import { ffProbe } from "../lib/ffmpeg";
 import fs from "fs";
 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 { fileStorage } from "../lib/multer";
 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(
     "/",
     [

app/views/gifv.ejs

@@ -12,7 +12,8 @@ const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'
 <head>
   <% if (extension(url)[1] == ".gif") { %>
   <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" 
+  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:site_name" content="embedder"></meta>
@@ -24,7 +25,8 @@ const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'
   <meta property="og:url" content="<%= host %>/uploads/720p-<%= extension(url)[0] %>.gif"></meta>
   <% } else if (videoExtensions.includes(extension(url)[1])) { %>
   <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" 
+  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:site_name" content="embedder"></meta>
@@ -36,7 +38,8 @@ 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>
   <% } else { %>
   <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" 
+  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:site_name" content="embedder"></meta>
@@ -109,11 +112,15 @@ footer a:hover {
 </style>
 
 <body>
+  <div class="container">
     <% if (videoExtensions.includes(extension(url)[1])) { %>
-  <video class="image" width="100%" controls autoplay loop muted><source src="/uploads/720p-<%= extension(url)[0]+extension(url)[1] %>"></video>
+      <video class="image" width="100%" controls autoplay muted> 
+        <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" width="100%">
+      <img src="/uploads/<%= extension(url)[0] + extension(url)[1] %>" class="image" alt="<%= oembedData.title %>"> 
     <% } %>
+  </div>
 
   <footer>
     <p>Powered by <a href="https://github.com/waveringana/embedder">Embedder</a> created by <a href="https://github.com/waveringana">WaveringAna</a></p>

package-lock.json

@@ -26,7 +26,8 @@
         "passport-local": "^1.0.0",
         "probe-image-size": "^7.2.3",
         "sqlite3": "^5.0.2",
-        "which": "^4.0.0"
+        "which": "^4.0.0",
+        "ws": "^8.17.0"
       },
       "devDependencies": {
         "@types/connect-sqlite3": "^0.9.1",
@@ -42,6 +43,7 @@
         "@types/passport-local": "^1.0.34",
         "@types/probe-image-size": "^7.2.0",
         "@types/which": "^3.0.1",
+        "@types/ws": "^8.5.10",
         "@typescript-eslint/eslint-plugin": "^5.46.1",
         "@typescript-eslint/parser": "^5.46.1",
         "copyfiles": "^2.4.1",
@@ -764,6 +766,15 @@
       "integrity": "sha512-OJWjr4k8gS1HXuOnCmQbBrQez+xqt/zqfp5PhgbKtsmEFEuojAg23arr+TiTZZ1TORdUF9RKXb/WKEpT1dwgSg==",
       "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": {
       "version": "5.46.1",
       "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",
       "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": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -46,7 +46,8 @@
     "passport-local": "^1.0.0",
     "probe-image-size": "^7.2.3",
     "sqlite3": "^5.0.2",
-    "which": "^4.0.0"
+    "which": "^4.0.0",
+    "ws": "^8.17.0"
   },
   "devDependencies": {
     "@types/connect-sqlite3": "^0.9.1",
@@ -62,6 +63,7 @@
     "@types/passport-local": "^1.0.34",
     "@types/probe-image-size": "^7.2.0",
     "@types/which": "^3.0.1",
+    "@types/ws": "^8.5.10",
     "@typescript-eslint/eslint-plugin": "^5.46.1",
     "@typescript-eslint/parser": "^5.46.1",
     "copyfiles": "^2.4.1",