toggle fullscreen

public/s/css/f0ck.css

@@ -1105,6 +1105,21 @@ html[theme="f0ck95d"] .admin-search button {
   color: black;
 }
 
+/* fullscreen */
+html[res="fullscreen"] .embed-responsive-16by9::before {
+  padding-top: 32.99%;
+}
+
+html[res="fullscreen"] .container {
+  max-width: 100% !important;
+  padding: 0 !important;
+}
+
+html[res="fullscreen"] span#favs {
+  padding: 0 !important;
+}
+
+
 ::-webkit-scrollbar {
   width: 2px;
 }

public/s/img/iconset.svg

@@ -6,5 +6,7 @@
     <symbol id="heart_regular" viewBox="0 0 512 512"><path d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"/></symbol>
     <symbol id="heart_solid" viewBox="0 0 512 512"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></symbol>
     <symbol id="cross" viewBox="0 0 512 512"><path d="M53.6,62.3 L458.4,458.4 M458.4,62.3 L53.6,458.4" style="stroke-linecap: round;stroke-width: 60;"/></symbol>
+    <symbol id="window-maximize" viewBox="0 0 512 512"><path d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z" style="fill: var(--accent);"/></symbol>
+    <symbol id="window-minimize" viewBox="0 0 512 512"><path d="M464 0H144c-26.5 0-48 21.5-48 48v48H48c-26.5 0-48 21.5-48 48v320c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h48c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-96 464H48V256h320v208zm96-96h-48V144c0-26.5-21.5-48-48-48H144V48h320v320z" style="fill: var(--accent);"/></symbol>
   </defs>
 </svg>

public/s/js/theme.js

@@ -8,6 +8,7 @@ const Cookie = {
       opts['max-age'] = opts.days * 60 * 60 * 24;
       delete opts.days;
     }
+    opts.SameSite = 'Strict';
     opts = Object.entries(opts).reduce((accumulatedStr, [k, v]) => `${accumulatedStr}; ${k}=${v}`, '');
     document.cookie = name + '=' + encodeURIComponent(value) + opts
   }
@@ -44,4 +45,21 @@ const Cookie = {
       Cookie.set("theme", themes[i], { path: "/", days: 360 });
     }
   });
+
+  if(tbuttonfull = document.querySelector('svg#a_tfull')) {
+    tbuttonfull.addEventListener('click', e => {
+      let f = Cookie.get('fullscreen');
+      if(f == 1) {
+        Cookie.set('fullscreen', 0);
+        document.querySelector('html').setAttribute('res', '');
+        tbuttonfull.innerHTML = `<use href="/s/img/iconset.svg#window-maximize"></use>`;
+      }
+      else {
+        Cookie.set('fullscreen', 1);
+        document.querySelector('html').setAttribute('res', 'fullscreen');
+        tbuttonfull.innerHTML = `<use href="/s/img/iconset.svg#window-minimize"></use>`;
+      }
+      return true;
+    });
+  }
 })();

src/inc/routes/theme.mjs

@@ -12,5 +12,19 @@ export default (router, tpl) => {
       "Location": req.headers.referer ?? "/"
     }).end();
   });
+
+  router.get(/^\/tfull\//, async (req, res) => {
+    let full = req.session.fullscreen;
+    if(full == 1)
+      full = 0;
+    else
+      full = 1;
+    
+    return res.writeHead(301, {
+      "Cache-Control": "no-cache, public",
+      "Set-Cookie": `theme=${full}; Path=/`,
+      "Location": req.headers.referer ?? "/"
+    }).end();
+  });
   return router;
 };

src/index.mjs

@@ -67,6 +67,7 @@ process.on('unhandledRejection', err => {
     if(req.url.pathname.match(/^\/(s|b|t|ca)\//))
       return;
     req.theme = req.cookies.theme || 'f0ck';
+    req.fullscreen = req.cookies.fullscreen || 0;
 
     if(req.cookies.session) {
       const user = await db`
@@ -101,6 +102,7 @@ process.on('unhandledRejection', err => {
       `;
 
       req.session.theme = req.cookies.theme;
+      req.session.fullscreen = req.cookies.fullscreen;
       
       // update userprofile
       await db`
@@ -108,12 +110,14 @@ process.on('unhandledRejection', err => {
           db({
             user_id: +user[0].id,
             mode: user[0].mode ?? 0,
-            theme: req.session.theme ?? 'f0ck'
-          }, 'user_id', 'mode', 'theme')
+            theme: req.session.theme ?? 'f0ck',
+            fullscreen: req.session.fullscreen || 0
+          }, 'user_id', 'mode', 'theme', 'fullscreen')
         }
         on conflict ("user_id") do update set
           mode = excluded.mode,
           theme = excluded.theme,
+          fullscreen = excluded.fullscreen,
           user_id = excluded.user_id
       `;
     }

views/item.html

@@ -12,6 +12,7 @@
         @if(session)
         <div class="gapRight">
           <svg class="iconset" id="a_favo"><use href="/s/img/iconset.svg#heart_{{ Object.values(item.favorites).filter(u => u.user == session.user)[0] ? 'solid' : 'regular' }}"></use></svg>
+          <svg class="iconset" id="a_tfull"><use href="/s/img/iconset.svg#window-{{ fullscreen == 1 ? 'minimize' : 'maximize' }}"></use></svg>
           <svg class="iconset" id="a_delete"><use href="/s/img/iconset.svg#cross"></use></svg> 
         </div>
         @endif

views/snippets/header.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" theme="@if(typeof theme !== "undefined"){{ theme }}@endif">
+<html lang="en" theme="@if(typeof theme !== "undefined"){{ theme }}@endif" res="@if(typeof fullscreen !== "undefined"){{ fullscreen == 1 ? 'fullscreen' : '' }}@endif">
 <head>
   <title>f0ck!</title>
   <meta name="description" content="Welcome to the internet"/>