webp lol

debug/thumbnailer.mjs

@@ -1,8 +1,6 @@
-import cfg from "../src/inc/config.mjs";
 import sql from "../src/inc/sql.mjs";
-import { promises as fs } from "fs";
+import fs from "fs";
 import { exec as _exec } from "child_process";
-import fetch from "flumm-fetch-cookies";
 
 const exec = cmd => new Promise((resolve, reject) => {
   _exec(cmd, { maxBuffer: 5e3 * 1024 }, (err, stdout, stderr) => {
@@ -15,9 +13,13 @@ const exec = cmd => new Promise((resolve, reject) => {
 });
 
 const _args = process.argv.slice(2);
-const _itemid = +_args[0] || 1;
+const _itemid = +_args[0] || 0;
 
-const items = await sql('items').where('id', _itemid);//.where('mime', 'like', 'audio/%');
+let items;
+if(_itemid > 0)
+  items = await sql('items').where('id', _itemid);
+else
+  items = await sql('items').orderBy('id', 'asc')/*.whereNot('src', 'like', '%soundcloud%')*/.where('mime', 'like', 'audio/%');
 let count = 1;
 let total = items.length;
 
@@ -25,36 +27,44 @@ for(let item of items) {
   const itemid = item.id;
   const filename = item.dest;
   const mime = item.mime;
+  const link = item.src;
   try {
     if(mime.startsWith('video/') || mime == 'image/gif')
       await exec(`ffmpegthumbnailer -i./public/b/${filename} -s1024 -o./tmp/${itemid}.png`);
     else if(mime.startsWith('image/') && mime != 'image/gif')
       await exec(`convert ./public/b/${filename} ./tmp/${itemid}.png`);
     else if(mime.startsWith('audio/')) {
-      if(item.src.match(/soundcloud/)) {
+      if(link.match(/soundcloud/)) {
-        const cover = (await exec(`yt-dlp -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' --get-thumbnail "${item.src}"`)).stdout.trim();
+        const cover = (await exec(`yt-dlp -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' --get-thumbnail "${link}"`)).stdout.trim();
         if(!cover.match(/default_avatar/)) {
           try {
             await exec(`wget "${cover}" -O ./tmp/${itemid}.jpg`);
-            const size = (await fs.stat(`./tmp/${itemid}.jpg`)).size;
+            const size = (await fs.promises.stat(`./tmp/${itemid}.jpg`)).size;
-            if(size >= 0)
+            if(size >= 0) {
               await exec(`convert ./tmp/${itemid}.jpg ./tmp/${itemid}.png`);
-            await fs.unlink(`./tmp/${itemid}.jpg`);
+              await exec(`convert ./tmp/${itemid}.jpg -resize 50% ./public/ca/${itemid}.webp`);
-          } catch(err) {}
+            }
+          } catch(err) {
+            //console.log(err);
+          }
         }
-        else
+        else {
           await exec(`ffmpeg -i ./public/b/${filename} -update 1 -map 0:v -map 0:1 -c copy ./tmp/${itemid}.png`);
+          await exec(`convert ./tmp/${itemid}.png ./public/ca/${itemid}.webp`);
+        }
       }
-      else
+      else {
         await exec(`ffmpeg -i ./public/b/${filename} -update 1 -map 0:v -map 0:1 -c copy ./tmp/${itemid}.png`);
-      await fs.copyFile(`./tmp/${itemid}.png`, `./public/ca/${itemid}.png`);
+        await exec(`convert ./tmp/${itemid}.png ./public/ca/${itemid}.webp`);
+      }
     }
 
-    await exec(`convert "./tmp/${itemid}.png" -resize "128x128^" -gravity center -crop 128x128+0+0 +repage ./public/t/${itemid}.png`);
+    await exec(`convert "./tmp/${itemid}.png" -resize "128x128^" -gravity center -crop 128x128+0+0 +repage ./public/t/${itemid}.webp`);
-    await fs.unlink(`./tmp/${itemid}.png`);
+    await fs.promises.unlink(`./tmp/${itemid}.png`).catch(err => {});
-
+    await fs.promises.unlink(`./tmp/${itemid}.jpg`).catch(err => {});
   } catch(err) {
-    await fs.copyFile('./mugge.png', `./public/t/${itemid}.png`);
+    //console.log(err);
+    await exec(`convert ./mugge.png ./public/t/${itemid}.webp`);
   }
   console.log(`current: ${itemid} (${count} / ${total})`);
   count++;

public/s/css/f0ck.css

@@ -1376,7 +1376,7 @@ table.table thead tr {
 table.table th, table.table td {
   padding: 7px 15px;
 }
-table.table tbody tr:nth-of-type(even) {
+table.table tbody tr:nth-of-type(odd) {
   background-color: var(--badge-tag);
 }
 

public/s/js/admin.js

@@ -217,7 +217,7 @@ const flash = ({ type, msg }) => {
           a.setAttribute('flow', 'down');
 
           const img = document.createElement('img');
-          img.src = `/t/${f.avatar}.png`;
+          img.src = `/t/${f.avatar}.webp`;
           img.style.height = "32px";
           img.style.width = "32px";
 

src/inc/routes/inc/f0cklib.mjs

@@ -201,11 +201,11 @@ export default {
           .select("tags_assign.item_id", "tags.tag")
           .leftJoin("tags_assign", "tags_assign.tag_id", "tags.id")
           .where("tags.tag", "ilike", "%"+tag+"%")
-          .groupBy("tags_assign.item_id", "tags.tag")
+          .groupBy("tags.tag", "tags_assign.item_id")
           .as("st"),
         "st.item_id", "items.id"
       )
-      .groupBy('items.id', 'st.item_id', 'st.tag');
+      .groupBy('st.tag', 'st.item_id', 'items.id');
     }
     else
       items = items.groupBy('items.id');
@@ -215,6 +215,9 @@ export default {
       items = items.andWhere("items.mime", "ilike", mime + "/%");
     
     items = await items;
+
+    if(tag)
+      items = items.filter((v, i, s) => i === s.findIndex(t => t.id === v.id));
   
     const item = items.findIndex(i => i.id === itemid);
     const actitem = items[item];
@@ -227,7 +230,7 @@ export default {
     }
   
     const tags = await lib.getTags(itemid);
-    const cheat = items.slice(Math.max(0, item - 3), item + 4).map(i => i.id);
+    const cheat = [...new Set(items.slice(Math.max(0, item - 3), item + 4).map(i => i.id))];
     const link = lib.genLink({ user, tag, mime, type: o.fav ? 'favs' : 'f0cks' });
     const favorites = await sql('favorites')
       .select('user.user', 'user_options.avatar')
@@ -249,7 +252,7 @@ export default {
           short: url.parse(actitem.src).hostname,
         },
         thumbnail: `${cfg.websrv.paths.thumbnails}/${actitem.id}.png`,
-        coverart: `${cfg.websrv.paths.coverarts}/${actitem.id}.png`,
+        coverart: `${cfg.websrv.paths.coverarts}/${actitem.id}.webp`,
         dest: `${cfg.websrv.paths.images}/${actitem.dest}`,
         mime: actitem.mime,
         size: lib.formatSize(actitem.size),

src/inc/trigger/f0ck.mjs

@@ -51,13 +51,15 @@ export default async bot => {
         case "stats":
           const dirs = {
             b: await fs.readdir("./public/b"),
-            t: await fs.readdir("./public/t")
+            t: await fs.readdir("./public/t"),
+            ca: await fs.readdir("./public/ca")
           };
           const sizes = {
             b: lib.formatSize((await Promise.all(dirs.b.map(async file => (await fs.stat(`./public/b/${file}`)).size))).reduce((a, b) => b + a)),
             t: lib.formatSize((await Promise.all(dirs.t.map(async file => (await fs.stat(`./public/t/${file}`)).size))).reduce((a, b) => b + a)),
+            ca: lib.formatSize((await Promise.all(dirs.ca.map(async file => (await fs.stat(`./public/ca/${file}`)).size))).reduce((a, b) => b + a)),
           };
-          return e.reply(`${dirs.b.length} f0cks: ${sizes.b}, ${dirs.t.length} thumbnails: ${sizes.t}`);
+          return e.reply(`${dirs.b.length} f0cks: ${sizes.b}, ${dirs.t.length} thumbnails: ${sizes.t}, ${dirs.ca.length} coverarts: ${sizes.ca}`);
         case "limit":
           return e.reply(`up to ${lib.formatSize(cfg.main.maxfilesize)} (${lib.formatSize(cfg.main.maxfilesize * 2.5)} for admins)`);
         case "thumb":

src/inc/trigger/parser.mjs

@@ -142,24 +142,28 @@ export default async bot => {
                 try {
                   await exec(`wget "${cover}" -O ./tmp/${itemid}.jpg`);
                   const size = (await fs.promises.stat(`./tmp/${itemid}.jpg`)).size;
-                  if(size >= 0)
+                  if(size >= 0) {
                     await exec(`convert ./tmp/${itemid}.jpg ./tmp/${itemid}.png`);
-                  await fs.promises.unlink(`./tmp/${itemid}.jpg`);
+                    await exec(`convert ./tmp/${itemid}.jpg -resize 50% ./public/ca/${itemid}.webp`);
+                  }
                 } catch(err) {}
               }
-              else
+              else {
                 await exec(`ffmpeg -i ./public/b/${filename} -update 1 -map 0:v -map 0:1 -c copy ./tmp/${itemid}.png`);
+                await exec(`convert ./tmp/${itemid}.png ./public/ca/${itemid}.webp`);
+              }
             }
-            else
+            else {
               await exec(`ffmpeg -i ./public/b/${filename} -update 1 -map 0:v -map 0:1 -c copy ./tmp/${itemid}.png`);
-            await fs.promises.copyFile(`./tmp/${itemid}.png`, `./public/ca/${itemid}.png`);
+              await exec(`convert ./tmp/${itemid}.png ./public/ca/${itemid}.webp`);
+            }
           }
-
+      
-          await exec(`convert "./tmp/${itemid}.png" -resize "128x128^" -gravity center -crop 128x128+0+0 +repage ./public/t/${itemid}.png`);
+          await exec(`convert "./tmp/${itemid}.png" -resize "128x128^" -gravity center -crop 128x128+0+0 +repage ./public/t/${itemid}.webp`);
-          await fs.promises.unlink(`./tmp/${itemid}.png`);
+          await fs.promises.unlink(`./tmp/${itemid}.png`).catch(err => {});
-
+          await fs.promises.unlink(`./tmp/${itemid}.jpg`).catch(err => {});
         } catch(err) {
-          await fs.promises.copyFile('./mugge.png', `./public/t/${itemid}.png`);
+          await exec(`convert ./mugge.png ./public/t/${itemid}.webp`);
         }
 
         let speed = lib.calcSpeed(size, end);

src/index.mjs

@@ -65,7 +65,7 @@ import flummpress from "flummpress";
 
     if(req.cookies.session) {
       const user = await sql("user_sessions") // get user
-        .select("user.id", "user.login", "user.user", "user.level", "user_sessions.id as sess_id", "user_options.mode", "user_options.theme", "user_options.avatar")
+        .select("user.id", "user.login", "user.user", "user.level", "user_sessions.id as sess_id", "user_options.*")
         .where("user_sessions.session", lib.md5(req.cookies.session))
         .leftJoin("user", "user.id", "user_sessions.user_id")
         .leftJoin("user_options", "user_options.user_id", "user_sessions.user_id")

views/admin/search.html

@@ -15,7 +15,7 @@
   </tr>
 @each(result as line)
   <tr>
-    <td style="width: 128px;"><a href="/{{ line.id }}" target="_blank"><img src="/t/{{ line.id }}.png" /></a></td>
+    <td style="width: 128px;"><a href="/{{ line.id }}" target="_blank"><img src="/t/{{ line.id }}.webp" /></a></td>
     <td style="text-align: center;"><a href="/{{ line.id }}" target="_blank">{{ line.id }}</a></td>
     <td style="text-align: center;"><a href="/admin/test?tag={{ line.tag.replace(/\s/g, "+") }}">{{ line.tag }}</a></td>
     <td style="text-align: center;">{{ line.username }}</td>

views/index.html

@@ -4,7 +4,7 @@
     @if(tmp.tag)<h2>tag: @if(session)<a href="/admin/test?tag={!! tmp.tag.toLowerCase() !!}" target="_blank">{!! tmp.tag.toLowerCase() !!}</a>@else{!! tmp.tag.toLowerCase() !!}@endif@if(tmp.mime) ({{ tmp.mime }}s)@else (all)@endif</h2>@endif
     <div id="posts">
       @each(items as item)
-      <a href="/{{ link }}@if(link.length != 0)/@endif{{ item.id }}" data-mime="{{ item.mime }}" data-mode="{{ item.tag_id ? ['','sfw','nsfw'][item.tag_id] : 'null' }}" style="background-image: url('/t/{{ item.id }}.png')"><p></p></a>
+      <a href="/{{ link }}@if(link.length != 0)/@endif{{ item.id }}" data-mime="{{ item.mime }}" data-mode="{{ item.tag_id ? ['','sfw','nsfw'][item.tag_id] : 'null' }}" style="background-image: url('/t/{{ item.id }}.webp')"><p></p></a>
       @endeach
     </div>
     <div id="footbar">

views/item.html

@@ -45,7 +45,7 @@
     </div>
     <div class="metadata">
       <span class="badge badge-dark">
-        <a href="/{{ item.id }}" style="--hover-image: url('/t/{{ item.id }}.png');" class="id-link">{{ item.id }}</a>
+        <a href="/{{ item.id }}" style="--hover-image: url('/t/{{ item.id }}.webp');" class="id-link">{{ item.id }}</a>
         @if(session)
         (<a id="a_username" href="/user/{{ user.name.toLowerCase() }}/f0cks@if(tmp.mime)/{{ tmp.mime }}@endif">{{ user.name }}</a>) 
         <svg class="iconset" id="a_delete"><use href="/s/img/iconset.svg#cross"></use></svg> 
@@ -67,7 +67,7 @@
       @if(typeof item.tags !== "undefined")
         @each(item.tags as tag)
         <span @if(session)tooltip="{{ tag.user }}" data-tagid="{{ tag.id }}"@endif class="badge {{ tag.badge }} mr-2">
-          <a href="/tag/{!! tag.tag !!}">{!! tag.tag !!}</a>@if(session)&nbsp;<a href="#">&#215;</a>@endif
+          <a href="/tag/{{ tag.tag }}">{!! tag.tag !!}</a>@if(session)&nbsp;<a href="#">&#215;</a>@endif
         </span>
         @endeach
       @endif
@@ -78,7 +78,7 @@
       <span class="badge" id="favs"@if(!item.favorites.length || !session) hidden@endif>
       @if(item.favorites.length && session)
       @each(item.favorites as fav)
-      <a href="/user/{{ fav.user.toLowerCase() }}/favs" tooltip="{{ fav.user }}" flow="down"><img src="@if(fav.avatar)/t/{{ fav.avatar }}@else/s/img/default@endif.png" style="height: 32px; width: 32px" /></a>
+      <a href="/user/{{ fav.user.toLowerCase() }}/favs" tooltip="{{ fav.user }}" flow="down"><img src="@if(fav.avatar)/t/{{ fav.avatar }}.webp@else/s/img/default.png@endif" style="height: 32px; width: 32px" /></a>
       @endeach
       @endif
       </span>

views/settings.html

@@ -1,6 +1,6 @@
 @include(snippets/header)
 <h1>Settings</h1>
-@if(session.avatar)<a href="//f0ck.me/{{ session.avatar }}"><img src="/t/{{ session.avatar }}.png" /></a>@endif
+@if(session.avatar)<a href="//f0ck.me/{{ session.avatar }}"><img src="/t/{{ session.avatar }}.webp" /></a>@endif
 <h2>Account</h2>
 <table class="table">
   <tbody>

views/snippets/navbar.html

@@ -5,7 +5,7 @@
       <li class="nav-item dropdown">
         @if(session)
         <a class="nav-link" href="#" content="{{ session.user }}" data-toggle="dropdown">
-          <img src="@if(session.avatar)/t/{{ session.avatar }}.png@else/s/img/ava/default.png@endif" class="avatar" />&nbsp;{{ session.user }}
+          <img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar" />&nbsp;{{ session.user }}
         </a>
         <ul class="dropdown-menu">
           <li><a href="/admin">adminpanel</a></li>