pinokiod 3.20.25 → 3.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.20.25",
+  "version": "3.22.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/index.js

@@ -3742,7 +3742,12 @@ class Server {
       //    }
       //  })
       //}))
+      let pinokio_ip
       for(let proc of peer.processes) {
+        if (proc.internal_port === 42000) {
+          // pinokio ip
+          pinokio_ip = proc.external_ip
+        }
         if (proc.external_router) {
           // try to get icons from pinokio
           for(let router of proc.external_router) {
@@ -3755,31 +3760,39 @@ class Server {
               if (exists) {
                 let meta = await this.kernel.api.meta(name)
                 if (meta.icon) {
-                  favicons[proc.ip] = meta.icon
+                  favicons[proc.external_ip] = meta.icon
                 }
                 if (meta.title) {
-                  titles[proc.ip] = meta.title
+                  titles[proc.external_ip] = meta.title
                 }
                 if (meta.description) {
-                  descriptions[proc.ip] = meta.description
+                  descriptions[proc.external_ip] = meta.description
                 }
               }
             }
           }
         }
         // if not running from pinokio, try to fetch and infer the favicon
-        if (!favicons[proc.ip]) {
-          let favicon = await this.kernel.favicon.get("http://" + proc.ip)
+        if (!favicons[proc.external_ip]) {
+          let favicon = await this.kernel.favicon.get("http://" + proc.external_ip)
           if (favicon) {
-            favicons[proc.ip] = favicon
+            favicons[proc.external_ip] = favicon
           }
         }
       }
+      for (let external_ip in favicons) {
+        let favicon_path = favicons[external_ip]
+        if (!favicon_path.startsWith("http")) {
+          favicons[external_ip] = "http://" + pinokio_ip + favicon_path
+        }
+      }
       console.timeEnd("Favicon")
+      console.log("favicons", favicons)
 
       let current_urls = await this.current_urls(req.originalUrl.slice(1))
       console.log("LIST", JSON.stringify(list, null, 2))
       res.render("net", {
+        selected_name: req.params.name,
         favicons,
         titles,
         descriptions,

package/server/views/index.ejs

@@ -214,6 +214,7 @@ main {
   border-left: 10px solid transparent;
 }
 aside {
+  width: 200px;
   display: block;
   flex-shrink: 0;
   border-right: 1px solid rgba(0,0,0,0.04);
@@ -239,16 +240,23 @@ aside .tab {
   border-left: 10px solid transparent;
 }
 body.dark aside .tab.selected {
+
   color: white;
+  /*
   border-left: 10px solid white;
+  */
 }
 aside .tab.selected {
+/*
   border-left: 10px solid black;
+  */
   font-weight: bold;
   opacity: 1;
 }
 body.dark aside .current.selected {
+/*
   border-left: 10px solid white;
+  */
 }
 @media only screen and (max-width: 480px) {
   .btn2 {
@@ -375,18 +383,10 @@ body.dark aside .current.selected {
   <a href="/" class='tab selected'><i class='fas fa-laptop-code'></i> Local</a>
   <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i> Network</a>
   <% if (list.length > 0) { %>
-    <div class='tab'>
-      <div class='submenu'>
-        <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
-        <% list.forEach(({ host, name, platform, processes }, index) => { %>
-          <% if (current_host === host) { %>
-            <a href="/net/<%=name%>" class='tab  <%=current_host === host ? 'current' : ''%>'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (this machine)</div></a>
-          <% } else { %>
-            <a href="/net/<%=name%>" class='tab  <%=current_host === host ? 'current' : ''%>'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=host%>)</div></a>
-          <% } %>
-        <% }) %>
-      </div>
-    </div>
+    <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
+    <% list.forEach(({ host, name, platform, processes }, index) => { %>
+      <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
+    <% }) %>
   <% } %>
   <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
 </aside>

package/server/views/net.ejs

@@ -296,6 +296,7 @@ main {
   display: flex;
 }
 aside {
+  width: 200px;
   display: block;
   flex-shrink: 0;
   border-right: 1px solid rgba(0,0,0,0.04);
@@ -327,14 +328,16 @@ aside .selected {
   font-weight: bold;
   opacity: 1;
 }
-body.dark aside .current.selected {
+/*
+body.dark aside .selected {
   border-left: 10px solid white;
 }
-aside .current.selected {
+aside .selected {
   border-left: 10px solid black;
   font-weight: bold;
   opacity: 1;
 }
+*/
 .submenu .tab {
   padding: 0;
 }
@@ -440,18 +443,14 @@ body.dark .net {
   <a href="/" class='tab'><i class='fas fa-laptop-code'></i> Local</a>
   <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i> Network</a>
   <% if (list.length > 0) { %>
-  <div class='tab selected'>
-    <div class='submenu'>
-      <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
-      <% list.forEach(({ host, name, platform, processes }, index) => { %>
-        <% if (current_host === host) { %>
-          <a href="/net/<%=name%>" class='tab  <%=current_host === host ? 'selected current' : ''%>'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (this machine)</div></a>
-        <% } else { %>
-          <a href="/net/<%=name%>" class='tab  <%=current_host === host ? 'selected current' : ''%>'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=host%>)</div></a>
-        <% } %>
-      <% }) %>
-    </div>
-  </div>
+    <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
+    <% list.forEach(({ host, name, platform, processes }, index) => { %>
+      <% if (selected_name === name) { %>
+        <a href="/net/<%=name%>" class='submenu tab selected'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
+      <% } else { %>
+        <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
+      <% } %>
+    <% }) %>
   <% } %>
   <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
 </aside>
@@ -481,8 +480,8 @@ body.dark .net {
           <div class='line align-top' data-index="<%=index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-description="<%=item.internal_router.join(' ')%> <%=item.port%>">
             <h3>
               <div class='item-icon'>
-                <% if (favicons[item.ip]) { %>
-                  <img src="<%=favicons[item.ip]%>">
+                <% if (favicons[item.external_ip]) { %>
+                  <img src="<%=favicons[item.external_ip]%>">
                 <% } else { %>
                   <img src="/pinokio-black.png">
                 <% } %>

package/server/views/network.ejs

@@ -198,8 +198,10 @@ a.ln:hover {
   box-sizing: border-box;
 }
 .container {
+/*
   display: grid;
   grid-template-columns: repeat(<%=list.length%>, 1fr);
+  */
 }
 .dark .container-row {
   background: rgba(255, 255, 255, 0.04);
@@ -400,6 +402,9 @@ input:checked + .slider:before {
 table h3 {
   margin: 0;
 }
+body.dark .desc {
+  color: rgba(255,255,255,0.7);
+}
 .desc {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.7);
@@ -435,6 +440,7 @@ main {
   display: flex;
 }
 aside {
+  width: 200px;
   display: block;
   flex-shrink: 0;
   border-right: 1px solid rgba(0,0,0,0.04);
@@ -461,14 +467,20 @@ aside .tab {
 }
 body.dark aside .tab.selected {
   color: white;
+  /*
   border-left: 10px solid white;
+  */
 }
 body.dark aside .selected {
+/*
   border-left: 10px solid white;
+  */
 }
 aside .selected {
   font-weight: bold;
+  /*
   border-left: 10px solid black;
+  */
   opacity: 1;
 }
 body.dark aside .current.selected {
@@ -480,7 +492,7 @@ aside .current.selected {
   opacity: 1;
 }
 .submenu .tab {
-  padding: 0;
+  padding: 10px;
 }
 .submenu .tab {
   border-left: 10px solid transparent;
@@ -565,18 +577,10 @@ input[type=search] {
     <a href="/" class='tab'><i class='fas fa-laptop-code'></i> Local</a>
     <a href="/network" class='tab selected'><i class="fa-solid fa-wifi"></i> Network</a>
     <% if (list.length > 0) { %>
-      <div class='tab'>
-        <div class='submenu'>
-          <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
-          <% list.forEach(({ host, name, platform, processes }, index) => { %>
-            <% if (current_host === host) { %>
-              <a href="/net/<%=name%>" class='tab  <%=current_host === host ? 'current' : ''%>'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (this machine)</div></a>
-            <% } else { %>
-              <a href="/net/<%=name%>" class='tab  <%=current_host === host ? 'current' : ''%>'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=host%>)</div></a>
-            <% } %>
-          <% }) %>
-        </div>
-      </div>
+      <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
+      <% list.forEach(({ host, name, platform, processes }, index) => { %>
+        <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
+      <% }) %>
     <% } %>
     <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
   </aside>