museria 0.2.49 → 0.3.2

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "museria",
-  "version": "0.2.49",
+  "version": "0.3.2",
   "description": "Decentralized music storage",
   "main": "./src/index.js",
+  "type": "module",
   "bin": {
     "museria": "./bin/index.js"
   },
@@ -41,59 +42,59 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.13.15",
-    "@babel/eslint-parser": "^7.13.14",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.13.15",
-    "babel-loader": "^8.2.2",
-    "babel-preset-akili": "^2.0.4",
-    "chai": "^4.2.0",
+    "@babel/core": "^7.23.7",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "babel-loader": "^9.1.3",
+    "babel-preset-akili": "^2.0.8",
+    "chai": "^5.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.0.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
-    "eslint": "^7.0.0",
-    "eslint-webpack-plugin": "^2.5.3",
-    "file-loader": "^6.2.0",
-    "html-loader": "^2.1.2",
-    "husky": "^4.3.6",
-    "mini-css-extract-plugin": "^1.3.9",
+    "css-loader": "^6.9.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "eslint": "^8.56.0",
+    "eslint-webpack-plugin": "^4.0.1",
+    "html-loader": "^5.0.0",
+    "husky": "^4.0.3",
+    "mini-css-extract-plugin": "^2.7.7",
     "mocha": "^10.2.0",
-    "node-polyfill-webpack-plugin": "^1.0.3",
+    "node-polyfill-webpack-plugin": "^3.0.0",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.43.4",
-    "sass-loader": "^12.3.0",
-    "terser-webpack-plugin": "^5.0.0",
-    "webpack": "^5.31.0",
-    "webpack-cli": "^4.6.0",
-    "yargs": "^17.0.0"
+    "sass": "^1.69.7",
+    "sass-loader": "^14.0.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.0",
-    "akili": "^1.2.22",
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "akili": "1.2.37",
     "base64url": "^3.0.1",
-    "bootstrap": "^4.5.3",
-    "chalk": "^4.1.2",
+    "bootstrap": "^5.0.0",
+    "chalk": "^5.3.0",
     "emoji-strip": "^1.0.1",
-    "express": "^4.17.1",
-    "fs-extra": "^9.0.1",
-    "lodash": "^4.17.20",
-    "metastocle": "^0.2.32",
-    "music-metadata": "^7.13.0",
-    "node-fetch": "^2.6.1",
-    "node-id3": "^0.2.2",
+    "express": "^4.18.2",
+    "fs-extra": "^11.2.0",
+    "hasha": "^5.0.0",
+    "lodash-es": "^4.17.21",
+    "metastocle": "~0.3.10",
+    "music-metadata": "^7.14.0",
+    "node-fetch": "^3.3.2",
+    "node-id3": "^0.2.6",
     "sanitize-filename": "^1.6.3",
     "serve-favicon": "^2.5.0",
-    "sharp": "^0.30.0",
-    "splaytree": "^3.1.0",
-    "spreadable": "^0.2.28",
-    "storacle": "^0.2.28",
-    "transliteration": "^2.2.0"
+    "sharp": "^0.33.2",
+    "splaytree": "^3.1.2",
+    "spreadable": "~0.3.10",
+    "storacle": "~0.3.6",
+    "transliteration": "^2.3.5",
+    "yargs": "^17.7.2"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ortexx/museria"
   },
   "engines": {
-    "node": ">=10.13.0"
+    "node": ">=20.0.0"
   }
 }

package/src/browser/client/index.js

@@ -1 +1,2 @@
-module.exports = require('../../client')();
+import client from "../../client.js";
+export default client();

package/src/browser/face/client.js

@@ -1,3 +1,4 @@
-import ClientMuseria from '../../../dist/client/museria.client.js';
+import clientMuseria from "../../client.js";
+const ClientMuseria = clientMuseria();
 const client = new ClientMuseria();
 export default client;

package/src/browser/face/controllers/app/app.html

@@ -62,7 +62,7 @@
     </a>
   </header>
   <div class="content">    
-    <div class="row pt-5 pb-3">
+    <div class="row px-4 px-sm-5 pt-5 pb-3">
       <div class="song-search col-lg-6 col-12 pl-5 pr-5 pr-lg-4 pt-4">             
         <div class="song-search-input input-group input-group-lg">
           <i hidden="${ this.isFinding }" class="fas fa-search fa-lg"></i>
@@ -135,42 +135,48 @@
                 <div class="invalid-feedback">Title must be like "Artist - Title"</div>
               </div>
               <div class="form-group mt-3 w-100">
-                <div class="custom-file position-relative">
+                <div class="custom-file input-group position-relative">
                   <input 
                     type="file" 
-                    class="${ utils.class({ 'custom-file-input': true, 'is-invalid': this.uploadFormFails.cover }) }"
+                    class="form-control ${ utils.class({ 'is-invalid': this.uploadFormFails.cover }) }"
                     id="cover-file" 
                     on-change="${ this.prepareCover(event.target.files[0]) }"
                     accept="image/jpeg,image/png"
                   >
-                  <div class="invalid-feedback">Cover must be "jpeg" or "png"</div>
+                  <button class="btn btn-outline-secondary px-3" type="button" id="cover-file-button">Browse</button>                 
                   <img  
                     hidden="${ !this.songUploadInfo.cover }"
                     url="${ this.songUploadInfo.cover }" 
                     class="cover-img"
                   >
                   <label 
-                    class="custom-file-label ${ utils.class({'cover-label': true, 'with-img': !!this.songUploadInfo.cover}) }" 
+                    class="custom-file-label input-group-text ${ utils.class({'cover-label': true, 'with-img': !!this.songUploadInfo.cover}) }" 
                     for="cover-file">
                     ${ this.songUploadInfo.cover? 'Cover is chosen': 'Choose a cover file' }
-                  </label>
+                  </label>                
                   <i 
                     hidden="${ !this.songUploadInfo.cover }"
                     on-click="${ this.removeCover() }"
                     class="close-fa cover-remove fas fa-times fa-lg" 
                     title="remove the cover"></i>
                 </div>
+                <div 
+                  class="invalid-feedback" 
+                  style="display: ${ this.uploadFormFails.cover? 'block': 'none' };"
+                >
+                  Cover must be "jpeg" or "png"
+                </div>
               </div>
               <div class="form-group mt-3 w-100">
-                <div class="custom-control custom-checkbox my-1 mr-sm-2">
+                <div class="form-check my-1 mr-sm-2">
                   <input 
                     type="checkbox" 
-                    class="custom-control-input" 
+                    class="form-check-input" 
                     id="songHighPriorityCheckbox"
                     checked="${ this.songUploadInfo.controlled }"
                     on-change="${ this.songUploadInfo.controlled = event.target.checked }"
                   >
-                  <label class="custom-control-label" for="songHighPriorityCheckbox">
+                  <label class="form-check-label" for="songHighPriorityCheckbox">
                     Moderation mode (optional)
                   </label>
                 </div>
@@ -183,17 +189,17 @@
                   on-radio="${ this.songUploadInfo.priority = event.detail }"
                   class="d-flex song-priority"
                 >
-                  <div class="custom-control custom-radio pr-4">
-                    <input type="radio" class="custom-control-input" id="songLowPriority" value="-1">
-                    <label class="custom-control-label" for="songLowPriority">Low priority</label>
+                  <div class="form-check form-check-inline pr-4">
+                    <input type="radio" class="form-check-input" id="songLowPriority" value="-1">
+                    <label class="form-check-label" for="songLowPriority">Low priority</label>
                   </div>
-                  <div class="custom-control custom-radio pr-4">
-                    <input type="radio" class="custom-control-input" id="songNormalPriority" value="0">
-                    <label class="custom-control-label" for="songNormalPriority">Normal priority</label>
+                  <div class="form-check form-check-inline pr-4">
+                    <input type="radio" class="form-check-input" id="songNormalPriority" value="0">
+                    <label class="form-check-label" for="songNormalPriority">Normal priority</label>
                   </div>
-                  <div class="custom-control custom-radio">
-                    <input type="radio" class="custom-control-input" id="songHighPriority" value="1">
-                    <label class="custom-control-label" for="songHighPriority">High priority</label>
+                  <div class="form-check form-check-inline">
+                    <input type="radio" class="form-check-input" id="songHighPriority" value="1">
+                    <label class="form-check-label" for="songHighPriority">High priority</label>
                   </div>
                 </radio>               
               </div>
@@ -209,10 +215,10 @@
         </div>
       </div>    
     </div>  
-    <div class="container py-5">
+    <div class="container py-4">
       <div class="row px-2 pb-5">
         <div class="col-12 text-center">
-          <ul class="questions">
+          <ul class="questions px-0">
             <li>
               <div>What is this?</div>
               <div>It is a decentralized music storage node.</div>
@@ -261,56 +267,58 @@
     </div>
   </div>  
   <footer class="footer row">
-    <div class="container">
-      <div class="row px-4">
-        <div class="col-xl-4 col-lg-6 mt-4 px-0 footer-contacts">
-          <h5>Contacts</h5>
-          <ul class="flex-column nav">
-            <li>
-              <i class="fas fa-envelope" aria-hidden="true"></i>
-              <a href="mailto:storage@museria.com" target="_blank">
-                <span class="pl-1">storage@museria.com</span>
-              </a>
-            </li>
-            <li>
-              <i class="fab fa-github" aria-hidden="true"></i>
-              <a href="https://github.com/ortexx/" target="_blank">
-                <span class="pl-1">ortexx</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div class="col-xl-4 col-lg-6 mt-4 px-0">
-          <h5>Information</h5>
-          <ul class="flex-column nav">
-            <li>
-              <i class="fas fa-book-open" aria-hidden="true"></i>
-              <a href="https://github.com/ortexx/museria/" target="_blank">Documentation</a>
-            </li>
-            <li>
-              <i class="fas fa-globe" aria-hidden="true"></i>
-              <a href="https://github.com/ortexx/museria-global/" target="_blank">Global network</a>
-            </li>
-            <li>
-              <i class="fas fa-play-circle" aria-hidden="true"></i>
-              <a href="https://github.com/ortexx/musiphone/" target="_blank">Decentralized player</a>
-            </li>
-          </ul>
-        </div>
-        <div class="col-xl-4 col-lg-6 mt-4 px-0">
-          <h5>Donate</h5>
-          <ul class="flex-column nav">
-            <li>
-              <i class="fab fa-btc" aria-hidden="true"></i>
-              <span>38dyvCmUadqS2HVFEuDBVC3k1a7h6J5gqU</span>
-            </li>
-            <li>
-              <i class="fab fa-ethereum" aria-hidden="true"></i>
-              <span>0x4e5Ef1b362271523f5c6eDe7a54BDcA9750D81E8</span>
-            </li>
-          </ul>
+    <div>
+      <div class="container">
+        <div class="row px-4">
+          <div class="col-xl-4 col-lg-6 mt-4 px-0 footer-contacts">
+            <h5>Contacts</h5>
+            <ul class="flex-column nav">
+              <li>
+                <i class="fas fa-envelope" aria-hidden="true"></i>
+                <a href="mailto:storage@museria.com" target="_blank">
+                  <span class="pl-1">storage@museria.com</span>
+                </a>
+              </li>
+              <li>
+                <i class="fab fa-github" aria-hidden="true"></i>
+                <a href="https://github.com/ortexx/" target="_blank">
+                  <span class="pl-1">ortexx</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="col-xl-4 col-lg-6 mt-4 px-0">
+            <h5>Information</h5>
+            <ul class="flex-column nav">
+              <li>
+                <i class="fas fa-book-open" aria-hidden="true"></i>
+                <a href="https://github.com/ortexx/museria/" target="_blank">Documentation</a>
+              </li>
+              <li>
+                <i class="fas fa-globe" aria-hidden="true"></i>
+                <a href="https://github.com/ortexx/museria-global/" target="_blank">Global network</a>
+              </li>
+              <li>
+                <i class="fas fa-play-circle" aria-hidden="true"></i>
+                <a href="https://github.com/ortexx/musiphone/" target="_blank">Decentralized player</a>
+              </li>
+            </ul>
+          </div>
+          <div class="col-xl-4 col-lg-6 mt-4 px-0">
+            <h5>Donate</h5>
+            <ul class="flex-column nav">
+              <li>
+                <i class="fab fa-btc" aria-hidden="true"></i>
+                <span>38dyvCmUadqS2HVFEuDBVC3k1a7h6J5gqU</span>
+              </li>
+              <li>
+                <i class="fab fa-ethereum" aria-hidden="true"></i>
+                <span>0x4e5Ef1b362271523f5c6eDe7a54BDcA9750D81E8</span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
+    </div>   
   </footer>
 </div>

package/src/browser/face/controllers/app/app.js

@@ -1,10 +1,11 @@
 import './app.scss';
 import Akili from 'akili';
-import router from 'akili/src/services/router';
-import client from '../../client';
+import router from 'akili/src/services/router.js';
+import client from '../../client.js';
+import template from './app.html';
 
 export default class App extends Akili.Component {
-  static template = require('./app.html');
+  static template = template;
 
   static define() {
     Akili.component('app', this);
@@ -171,22 +172,28 @@ export default class App extends Akili.Component {
     if(!file) {
       return;
     }  
-    
+
+    if(!file.type.match('image')) {
+      this.scope.uploadFormFails.cover = true;
+      return;
+    }
+
     this.scope.songUploadInfo.coverFile = file;
     this.scope.songUploadInfo.cover = URL.createObjectURL(file)
     this.scope.songUploadInfo.fileChanged = true;
+    this.scope.uploadFormFails.cover = '';
   }
 
   async removeCover() {
     this.resetCover();
-    this.scope.songUploadInfo.fileChanged = true;  
+    this.scope.songUploadInfo.fileChanged = true;
   }
 
   async resetCover() {
-    this.scope.uploadFormFails.cover = '';
     this.scope.songUploadInfo.cover = '';
     this.scope.songUploadInfo.coverFile = null;
-    this.scope.uploadFormFails.cover && URL.revokeObjectURL(this.scope.uploadFormFails.cover);
+    this.scope.uploadFormFails.cover && URL.revokeObjectURL(this.scope.uploadFormFails.cover);    
+    this.scope.uploadFormFails.cover = '';
   }
 
   async uploadSong(failed = false) {    

package/src/browser/face/controllers/app/app.scss

@@ -111,6 +111,7 @@
       text-transform: uppercase;
       font-weight: bold;
       text-align: center;
+      max-width: 50%;
 
       & b {
         color: $light;
@@ -123,7 +124,7 @@
       text-transform: uppercase;
       font-weight: bold;
       text-decoration: none;
-      
+      width: unset;
 
       &-img {
         display: inline-block;
@@ -250,27 +251,6 @@
     }
   }
 
-  .cover-img {
-    object-fit: cover;
-    height: 2.22em;
-    width: 2.22em;
-    position: absolute;
-    left: 2px;
-    top: 1px;
-    z-index: 2;
-    pointer-events: none;
-  }
-
-  .cover-remove {
-    right: 4.5em;
-  }
-
-  .cover-label {
-    &.with-img {
-      padding-left: 3em;
-    }
-  }
-
   .upload-preloader-btn {
     & i {
       margin-left: 0.3em;

package/src/browser/face/index.js

@@ -1,8 +1,8 @@
 import './styles/main.scss';
 import Akili from 'akili';
-import router from 'akili/src/services/router';
-import App from './controllers/app/app';
-import client from './client';
+import router from 'akili/src/services/router.js';
+import App from './controllers/app/app.js';
+import client from './client.js';
 
 App.define();
 

package/src/browser/face/styles/main.scss

@@ -27,35 +27,109 @@ body {
   color: $pale;
 }
 
-.custom-file input {
-  cursor: pointer;
-  text-indent: -1000px;
-}
+.custom-file  {  
+  .cover-img {
+    object-fit: cover;
+    height: 2.22em;
+    width: 2.22em;
+    position: absolute;
+    left: 2px;
+    top: 1px;
+    z-index: 2;
+    pointer-events: none;
+  }
 
-.custom-control-label {
-  cursor: pointer;
-  opacity: 0.8;
+  .cover-remove {
+    right: 5em;
+    margin-top: 1px;
+  }
 
-  &:hover {
-    opacity: 1;
+  .cover-label {
+    position: absolute; 
+    background: none; 
+    border: none;
+
+    &.with-img {
+      padding-left: 3em;
+    }
   }
+
+  & input {
+    cursor: pointer;
+    text-indent: -1000px;
+    z-index: 0 !important;
+
+    &:focus + .btn {
+      border-color: $green;
+    }
+
+    &.is-invalid {
+      background-image: unset !important;
+
+      &+ .btn {
+        border-color: $red !important;
+      }
+    }
+  }
+
+  & .btn {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    pointer-events: none;
+    color: $light;
+    text-transform: none;
+    font-weight: normal;
+  }  
+}
+
+.form-check-input {
+  &[type=checkbox] {
+    border-radius: 2px;
+  } 
+
+  &, & + .form-check-label {
+    cursor: pointer;
+    opacity: 0.8;
+  
+    &:hover {
+      opacity: 1;
+    }
+  } 
+
+  &:focus, &:active {
+    outline: none !important;
+    box-shadow: none !important;
+  }  
 }
 
 .btn {
-  padding: 0;
+  padding: 0.33em;
   text-transform: uppercase;
   font-weight: bold;
+  color: white; 
 
   &:focus, &:active {
     outline: none !important;
     box-shadow: none !important;
-  }  
+    color: white; 
+  } 
+
+  &:hover {
+    color: white; 
+  }
 
   &[disabled] {
     cursor: not-allowed;
   }
 }
 
+.btn-primary {
+  &:focus, &:active, &:active:focus, &:hover  {
+    background: $green !important;
+  } 
+}
+
 a {
   color: $pale;
   text-decoration: underline;
@@ -66,6 +140,12 @@ a {
   }
 }
 
+input.form-control {
+  &::placeholder {
+    color: $gray;
+  }
+}
+
 .input-group-lg input[type=text] {
   padding: 0.42rem 1rem 0.45rem 1rem;  
   height: auto;

package/src/browser/face/styles/vars.scss

@@ -29,4 +29,3 @@ $input-focus-box-shadow: none;
 $input-disabled-bg: $dark;
 $custom-file-button-bg: $dark;
 $custom-file-button-color: $light;
-