Expandulláh

babel.config.json

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "ie 11"
+      }
+    ]
+  ]
+}

package.json

@@ -8,10 +8,11 @@
   ],
   "scripts": {
     "test": "echo \"Léky teď\"",
-    "dirs": "mkdir -p ./config/lists ./public/{css,js,uploads,banners,captcha} ./public/uploads/thumb",
+    "dirs": "mkdir -p ./config/lists ./public/{js,css,uploads,banners,captcha} ./public/uploads/thumb",
     "backend": "npx xss-scan && npx tsc",
+    "js": "esbuild web/ts/main.ts --bundle --outfile=public/js/bundle.tmp.js && npx babel public/js/bundle.tmp.js --out-file public/js/bundle.js && rm public/js/bundle.tmp.js",
     "css": "npx sass ./web/sass:./public/css --style compressed && npx postcss ./public/css/**/*.css --use autoprefixer --replace",
-    "build": "npm run backend && npm run css && npm run map-assets",
+    "build": "npm run backend && npm run js && npm run css && npm run map-assets",
     "start": "node ./dist/src/main.js",
     "configure": "node ./dist/scripts/configure.js",
     "map-assets": "node ./dist/scripts/map_assets.js",
@@ -25,17 +26,22 @@
   "author": "sneedmaster <dev@czchan.org>",
   "license": "AGPL-3.0-only",
   "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/bcrypt": "^6.0.0",
     "@types/cookie-parser": "^1.4.10",
     "@types/encoding-japanese": "^2.2.1",
     "@types/express": "^5.0.6",
     "@types/formidable": "^3.5.0",
+    "@types/jquery": "^4.0.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^25.5.0",
     "@types/pg": "^8.20.0",
     "@types/timestring": "^7.0.0",
     "autoprefixer": "^10.4.27",
+    "esbuild": "^0.28.0",
     "postcss-cli": "^11.0.1",
     "prettier": "^3.8.1",
     "prettier-plugin-css-order": "^2.2.0"
@@ -54,6 +60,7 @@
     "formidable": "^3.5.4",
     "ioredis": "^5.10.1",
     "ipaddr.js": "^2.3.0",
+    "jquery": "^4.0.0",
     "jsonwebtoken": "^9.0.3",
     "pg": "^8.20.0",
     "postgres-migrations": "^5.3.0",

src/db/post.ts

@@ -472,8 +472,6 @@ const updatePostReports = async (
   post: Post,
   reports: { ip: string; reason: string }[],
 ) => {
-  console.log(reports);
-
   const result = await postgres.query<Post>(
     "UPDATE posts SET reports = $1, reported = $2 WHERE board = $3 AND id = $4 RETURNING *",
     [

src/web/components/chrome/page_body.tsx

@@ -81,6 +81,7 @@ const PageBody = ({
       </div>
     </footer>
     <div id="bottom"></div>
+    <script src="/public/js/bundle.js" defer></script>
   </body>
 );
 

src/web/components/content/post.tsx

@@ -157,7 +157,13 @@ const PostComponent = ({
               {file.deleted ? (
                 <Thumbnail file={file} />
               ) : (
-                <a class="thumb-link" target="_blank" href={file.url}>
+                <a
+                  class="thumb-link"
+                  target="_blank"
+                  href={file.url}
+                  data-type={file.type}
+                  data-format={file.format}
+                >
                   <Thumbnail file={file} />
                 </a>
               )}

web/sass/base.scss

@@ -234,7 +234,8 @@ footer {
   word-break: break-word;
 }
 
-.multiple-files {
+.multiple-files,
+.expanded-files {
   float: none;
 }
 
@@ -246,6 +247,15 @@ footer {
   max-width: 192px;
 }
 
+.expanded-file {
+  max-width: 100%;
+}
+
+.src {
+  max-width: 100%;
+  max-height: 90vh;
+}
+
 .thumb {
   display: block;
   margin: auto;

web/ts/expand.ts

@@ -0,0 +1,133 @@
+import $ from "jquery";
+
+const expand = () => {
+  setup_events($(".thumb-link"));
+
+  function setup_events(elements: JQuery<HTMLElement>) {
+    elements.each(function () {
+      $(this).on("click", function () {
+        const srcLink = $(this).attr("href");
+        const type = $(this).attr("data-type");
+
+        switch (type) {
+          case "image":
+            toggleImage($(this), srcLink);
+            break;
+          case "video":
+            toggleVideo($(this), srcLink);
+            break;
+          case "audio":
+            toggleAudio($(this), srcLink);
+            break;
+        }
+
+        $(this).parent().toggleClass("expanded-file");
+
+        return false;
+      });
+    });
+  }
+
+  function toggleImage(parent: JQuery<any>, srcLink: string | undefined) {
+    const thumb = parent.find(".thumb");
+    const src = parent.find(".src");
+
+    if (src.length === 0) {
+      thumb.addClass("loading");
+
+      parent.append(`<img class="src" src="${srcLink}">`);
+
+      const src = parent.find(".src");
+
+      src.hide();
+      src.on("load", function () {
+        thumb.removeClass("loading");
+        thumb.hide();
+        src.show();
+
+        parent.closest(".post-files").addClass("expanded-files");
+      });
+
+      return;
+    }
+
+    thumb.toggle();
+    src.toggle();
+
+    parent.closest(".post-files").toggleClass("expanded-files");
+  }
+
+  function toggleVideo(parent: JQuery<any>, srcLink: string | undefined) {
+    const expanded = parent.parent().hasClass("expanded-file");
+    const thumb = parent.find(".thumb");
+    const src = parent.parent().find(".src");
+
+    if (src.length === 0) {
+      parent.append('<div class="center"><b class="closer">[Zavřít]</b></div>');
+      parent
+        .parent()
+        .append(
+          `<video class="src" src="${srcLink}" controls="" loop=""></video>`,
+        );
+
+      const src = parent.parent().find(".src");
+
+      thumb.hide();
+      src.show();
+      (src.get(0) as any).play();
+
+      return;
+    }
+
+    thumb.toggle();
+    src.toggle();
+
+    if (expanded) {
+      (src.get(0) as any).pause();
+      (src.get(0) as any).currentTime = 0;
+    } else {
+      (src.get(0) as any).play();
+    }
+
+    parent.closest(".post-files").toggleClass("expanded-files");
+    parent.find(".closer").toggle();
+  }
+
+  function toggleAudio(parent: JQuery<any>, srcLink: string | undefined) {
+    const expanded = parent.parent().hasClass("expanded-file");
+    const thumb = parent.find(".thumb");
+    const src = parent.parent().find(".src");
+
+    if (src.length === 0) {
+      parent.append('<div class="center"><b class="closer">[Zavřít]</b></div>');
+      parent
+        .parent()
+        .append(
+          `<audio class="src" src="${srcLink}" controls="" loop=""></audio>`,
+        );
+
+      const src = parent.parent().find(".src");
+
+      thumb.hide();
+      src.show();
+      (src.get(0) as any).play();
+
+      return;
+    }
+
+    thumb.toggle();
+    src.toggle();
+
+    if (expanded) {
+      (src.get(0) as any).pause();
+      (src.get(0) as any).currentTime = 0;
+    } else {
+      (src.get(0) as any).play();
+    }
+
+    parent.closest(".post-files").toggleClass("expanded-files");
+    parent.find(".closer").toggle();
+  }
+};
+
+export default expand;

web/ts/main.ts

@@ -0,0 +1,3 @@
+import expand from "./expand";
+
+expand();

web/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["ts"]
+}